Squashed commit of the following:

commit 8b07d66
Author: Tenny <tenny.shu@foxmail.com>
Date:   Mon Oct 21 11:49:52 2024 +0800

    fix(SelectOri): 修复选择框 ts 类型错误

commit 2009296
Author: Tenny <tenny.shu@foxmail.com>
Date:   Mon Oct 21 11:48:17 2024 +0800

    fix(Image): 修复无法传递自定义样式、支持自定义fallback

commit 9f67504
Author: Tenny <joel.shu@qq.com>
Date:   Mon Oct 21 01:04:16 2024 +0800

    fix(Card): 修复暗黑模式下样式显示异常

    Signed-off-by: Tenny <joel.shu@qq.com>

commit 011a02e
Author: Tenny <joel.shu@qq.com>
Date:   Sun Oct 20 21:38:40 2024 +0800

    fix(Button): 修复暗黑模式下样式显示异常

    Signed-off-by: Tenny <joel.shu@qq.com>

commit 8a9ad64
Author: Tenny <joel.shu@qq.com>
Date:   Sun Oct 20 18:54:39 2024 +0800

    refactor(Popover): 优化代码

    Signed-off-by: Tenny <joel.shu@qq.com>

commit 5058450
Author: Tenny <joel.shu@qq.com>
Date:   Thu Oct 17 23:01:51 2024 +0800

    docs: 修复文档错误

    Signed-off-by: Tenny <joel.shu@qq.com>

Author: Tenny

docs/.vitepress/config.ts

@@ -58,6 +58,10 @@ export default defineConfig({
             text: '工具样式',
             link: '/css-util',
           },
+          {
+            text: '暗黑模式',
+            link: '/dark',
+          },
         ],
       },
       {

docs/components/card.md

@@ -18,7 +18,7 @@ import { Card, Button } from '../../src'
 <div>卡片内容</div>
 </template>
 <template v-slot:header-extra>
-<nt-button type="text">按钮</nt-button>
+<nt-button text>按钮</nt-button>
 </template>
 </nt-card>
 </textarea>
@@ -28,7 +28,7 @@ import { Card, Button } from '../../src'
 <div>卡片内容</div>
 </template>
 <template v-slot:header-extra>
-<Button type="text">按钮</Button>
+<Button text>按钮</Button>
 </template>
 </Card>
 </template>
@@ -68,7 +68,7 @@ import { Card, Button } from '../../src'
 <div>卡片内容</div>
 </template>
 <template v-slot:header-extra>
-<nt-button type="text">按钮</nt-button>
+<nt-button text>按钮</nt-button>
 </template>
 </nt-card>
 </textarea>
@@ -78,7 +78,7 @@ import { Card, Button } from '../../src'
 <div>卡片内容</div>
 </template>
 <template v-slot:header-extra>
-<Button type="text">按钮</Button>
+<Button text type="primary">按钮</Button>
 </template>
 </Card>
 </template>
@@ -99,7 +99,7 @@ import { Card, Button } from '../../src'
 <div>卡片内容</div>
 </template>
 <template v-slot:header-extra>
-<nt-button type="text">按钮</nt-button>
+<nt-button text>按钮</nt-button>
 </template>
 <template v-slot:footer>
 <span style="color: orange">卡片标题</span>
@@ -115,7 +115,7 @@ import { Card, Button } from '../../src'
 <div>卡片内容</div>
 </template>
 <template v-slot:header-extra>
-<Button type="text">按钮</Button>
+<Button text>按钮</Button>
 </template>
 <template v-slot:footer>
 <span style="color: orange">卡片标题</span>
@@ -139,23 +139,23 @@ import { Card, Button } from '../../src'
         <div>卡片内容1</div>
       </template>
       <template v-slot:header-extra>
-        <nt-button type="text">按钮</nt-button>
+        <nt-button text>按钮</nt-button>
       </template>
     </nt-card>
     <nt-card header-text="卡片标题2">
       <template v-slot:default>
         <div>卡片内容2</div>
       </template>
       <template v-slot:header-extra>
-        <nt-button type="text">按钮</nt-button>
+        <nt-button text>按钮</nt-button>
       </template>
     </nt-card>
     <nt-card header-text="卡片标题3">
       <template v-slot:default>
         <div>卡片内容3</div>
       </template>
       <template v-slot:header-extra>
-        <nt-button type="text">按钮</nt-button>
+        <nt-button text>按钮</nt-button>
       </template>
     </nt-card>
   </div>
@@ -167,23 +167,23 @@ import { Card, Button } from '../../src'
           <div>卡片内容1</div>
         </template>
         <template v-slot:header-extra>
-          <Button type="text">按钮</Button>
+          <Button text>按钮</Button>
         </template>
       </Card>
       <Card header-text="卡片标题2">
         <template v-slot:default>
           <div>卡片内容2</div>
         </template>
         <template v-slot:header-extra>
-          <Button type="text">按钮</Button>
+          <Button text>按钮</Button>
         </template>
       </Card>
       <Card header-text="卡片标题3">
         <template v-slot:default>
           <div>卡片内容3</div>
         </template>
         <template v-slot:header-extra>
-          <Button type="text">按钮</Button>
+          <Button text>按钮</Button>
         </template>
       </Card>
     </div>

docs/components/icon.md

@@ -72,3 +72,4 @@ import IconList from '../../src/app_components/IconList.vue'
 - 推荐图标库：[iconify](https://iconify.design/) 它提供了超过 200000 个开源图标。
 - 两种方式可以使用 `iconify`: [@iconify/vue](https://www.npmjs.com/package/@iconify/vue) 和 [unplugin-icons](https://github.com/unplugin/unplugin-icons)
 - 推荐使用 [unplugin-icons](https://github.com/unplugin/unplugin-icons) 既能离线加载，也能自定义图标
+- 其它图标库: [Lucide](https://lucide.dev/)

docs/components/image.md

@@ -22,7 +22,7 @@ const imgs = [
 <ClientOnly>
   <CodePreview class="mt-15">
     <textarea lang="vue-html">
-    <nt-image src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" width="100"></nt-image>
+    <nt-image src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" width="100px"></nt-image>
     </textarea>
   </CodePreview>
 </ClientOnly>
@@ -34,41 +34,41 @@ const imgs = [
 <ClientOnly>
   <CodePreview>
   <textarea lang="vue-html">
-  <nt-image src="/neatui-vue/img1.svg" width="100" height="100" fit="fill"></nt-image>
-  <nt-image src="/neatui-vue/img1.svg" width="100" height="100" fit="contain"></nt-image>
-  <nt-image src="/neatui-vue/img1.svg" width="100" height="100" fit="cover"></nt-image>
-  <nt-image src="/neatui-vue/img1.svg" width="100" height="100" fit="none"></nt-image>
-  <nt-image src="/neatui-vue/img1.svg" width="100" height="100" fit="scale-down"></nt-image>
+  <nt-image src="/neatui-vue/img1.svg" width="100px" height="100px" fit="fill"></nt-image>
+  <nt-image src="/neatui-vue/img1.svg" width="100px" height="100px" fit="contain"></nt-image>
+  <nt-image src="/neatui-vue/img1.svg" width="100px" height="100px" fit="cover"></nt-image>
+  <nt-image src="/neatui-vue/img1.svg" width="100px" height="100px" fit="none"></nt-image>
+  <nt-image src="/neatui-vue/img1.svg" width="100px" height="100px" fit="scale-down"></nt-image>
   </textarea>
     <template #preview>
       <div class="grid grid-cols-5">
         <Tooltip content="被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框">
           <div class="demo-img-item">
-            <Image src="/neatui-vue/img1.svg" width="100" height="100" fit="fill"></Image>
+            <Image src="/neatui-vue/img1.svg" width="100px" height="100px" fit="fill"></Image>
             <span class="mt-15">fill</span>
           </div>
         </Tooltip>
         <Tooltip content="被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比">
           <div class="demo-img-item">
-            <Image src="/neatui-vue/img1.svg" width="100" height="100" fit="contain"></Image>
+            <Image src="/neatui-vue/img1.svg" width="100px" height="100px" fit="contain"></Image>
             <span class="mt-15">contain</span>
           </div>
         </Tooltip>
         <Tooltip content="被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框">
           <div class="demo-img-item">
-            <Image src="/neatui-vue/img1.svg" width="100" height="100" fit="cover"></Image>
+            <Image src="/neatui-vue/img1.svg" width="100px" height="100px" fit="cover"></Image>
             <span class="mt-15">cover</span>
           </div>
         </Tooltip>
         <Tooltip content="被替换的内容将保持其原有的尺寸">
           <div class="demo-img-item">
-            <Image src="/neatui-vue/img1.svg" width="100" height="100" fit="none"></Image>
+            <Image src="/neatui-vue/img1.svg" width="100px" height="100px" fit="none"></Image>
             <span class="mt-15">none</span>
           </div>
         </Tooltip>
         <Tooltip content="内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些">
           <div class="demo-img-item">
-            <Image src="/neatui-vue/img1.svg" width="100" height="100" fit="scale-down"></Image>
+            <Image src="/neatui-vue/img1.svg" width="100px" height="100px" fit="scale-down"></Image>
             <span class="mt-15">scale-down</span>
           </div>
         </Tooltip>
@@ -84,25 +84,47 @@ const imgs = [
 <ClientOnly>
   <CodePreview>
   <textarea lang="vue-html">
-  <nt-image src="/neatui-vue/img2.svg" width="100" height="100" placeholder="/neatui-vue/img_loading.png"></nt-image>
+  <nt-image src="/neatui-vue/img2.svg" width="100px" height="100px" placeholder="/neatui-vue/img_loading.png"></nt-image>
   </textarea>
   <template #preview>
-    <Image src="/neatui-vue/img2.svg" width="100" height="100" placeholder="/neatui-vue/img_loading.png"></Image>
+    <Image src="/neatui-vue/img2.svg" width="100px" height="100px" placeholder="/neatui-vue/img_loading.png"></Image>
   </template>
   </CodePreview>
 </ClientOnly>
 
 ### 加载失败
 
-加载失败显示图像占位符
+通过配置 `fallback` 配置加载失败显示图像占位符; 也可以传递 `custom-fallback` 启用自定义加载失败占位符, 然后配置 `slot-fallback` 来自定义加载失败显示.
 
 <ClientOnly>
   <CodePreview>
   <textarea lang="vue-html">
-  <nt-image src="/neatui-vue/img3.svg" width="100" height="100" placeholder="/neatui-vue/loading_error.png"></nt-image>
+  <nt-image src="/neatui-vue/img3.svg" width="100px" height="100px" fallback="/neatui-vue/loading_error.png"></nt-image>
+  <nt-image
+    src="/neatui-vue/img3.svg"
+    width="100px"
+    height="100px"
+    custom-fallback
+    class="ml-10"
+  >
+    <template #fallback>
+      <div style="height: 100%;background-color: gray;display:flex;justify-content:center;align-items:center;color:#fff;">Error</div>
+    </template>
+  </nt-image>
   </textarea>
   <template #preview>
-    <Image src="/neatui-vue/img3.svg" width="100" height="100" placeholder="/neatui-vue/loading_error.png"></Image>
+    <Image src="/neatui-vue/img3.svg" width="100px" height="100px" fallback="/neatui-vue/loading_error.png"></Image>
+    <Image
+      src="/neatui-vue/img3.svg"
+      width="100px"
+      height="100px"
+      custom-fallback
+      class="ml-10"
+    >
+      <template #fallback>
+        <div style="height: 100%;background-color: gray;display:flex;justify-content:center;align-items:center;color:#fff;">Error</div>
+      </template>
+    </Image>
   </template>
   </CodePreview>
 </ClientOnly>
@@ -114,10 +136,10 @@ const imgs = [
 <ClientOnly>
   <CodePreview>
   <textarea lang="vue-html">
-  <nt-image src="/neatui-vue/img2.svg" width="100" height="100" preview-disable></nt-image>
+  <nt-image src="/neatui-vue/img2.svg" width="100px" height="100px" preview-disable></nt-image>
   </textarea>
   <template #preview>
-    <Image src="/neatui-vue/img2.svg" width="100" height="100" preview-disable></Image>
+    <Image src="/neatui-vue/img2.svg" width="100px" height="100px" preview-disable></Image>
   </template>
   </CodePreview>
 </ClientOnly>
@@ -138,11 +160,11 @@ const imgs = [
   </script>
 
   <template>
-    <nt-image v-for="src,index in imgs" :key="index" :src="src" :preview-src-list="imgs" :initial-index="index" width="100"></nt-image>
+    <nt-image v-for="src,index in imgs" :key="index" :src="src" :preview-src-list="imgs" :initial-index="index" width="100px"></nt-image>
   </template>
   </textarea>
   <template #preview>
-    <Image v-for="src,index in imgs" :key="index" :src="src" :preview-src-list="imgs" :initial-index="index" width="100"></Image>
+    <Image v-for="src,index in imgs" :key="index" :src="src" :preview-src-list="imgs" :initial-index="index" width="100px"></Image>
   </template>
   </CodePreview>
 </ClientOnly>
@@ -154,10 +176,10 @@ const imgs = [
 <ClientOnly>
   <CodePreview>
   <textarea lang="vue-html">
-  <nt-image src="/neatui-vue/img2.svg" width="100" height="100" loading="lazy"></nt-image>
+  <nt-image src="/neatui-vue/img2.svg" width="100px" height="100px" loading="lazy"></nt-image>
   </textarea>
   <template #preview>
-    <Image src="/neatui-vue/img2.svg" width="100" height="100" loading="lazy"></Image>
+    <Image src="/neatui-vue/img2.svg" width="100px" height="100px" loading="lazy"></Image>
   </template>
   </CodePreview>
 </ClientOnly>