vue-devui 1.0.0-rc.2 → 1.0.0-rc.3

package/README.md

@@ -1,126 +1,129 @@
-<p align="center">
-  <a href="https://devui.design/home" target="_blank" rel="noopener noreferrer">
-    <img alt="DevUI Logo" src="https://github.com/DevCloudFE/vue-devui/raw/dev/packages/devui-vue/public/logo.svg" width="180" style="max-width:100%;">
-  </a>
-</p>
-
-<h1 align="center">Vue DevUI</h1>
-
-<p align="center">Vue3 component library based on <a href="https://devui.design/" target="_blank" rel="noopener noreferrer">DevUI Design</a></p>
-
-English | [简体中文](README.zh-CN.md)
-
-🌈 Features：
-
-- 📦 40 high-quality components that are simple, easy to use, and flexible.
-- 🔑 Support for TypeScript.
-- ⛰️ Support for Nuxt3.
-- ⚡ Support for on-demand import.
-- 🌍 Support internationalization.
-- 🎨 Support theme customization, and built-in seven beautiful themes such as `Galaxy`, `Sweet` and `Provence`.
-
-## 🔧 Usage
-
-The first step is to install vue devui:
-
-```
-npm i vue-devui
-```
-
-Then import `DevUI` in the `main.ts` file:
-
-```ts
-import { createApp } from 'vue'
-import App from './App.vue'
-
-// Import Vue DevUI component and style
-import DevUI from 'vue-devui'
-import 'vue-devui/style.css'
-
-createApp(App).use(DevUI).mount('#app')
-```
-
-Then you can use the vue devui component(such as `<d-button>`) in the `App.vue` file:
-
-```vue
-<template>
-  <d-button>Button</d-button>
-</template>
-```
-
-## 🖥️ Development
-
-```shell
-git clone git@github.com:DevCloudFE/vue-devui.git
-cd vue-devui
-pnpm i
-pnpm dev
-```
-
-Open your browser and visit: [http://localhost:3000/](http://localhost:3000/).
-
-## 🤝 Contributing
-
-Welcome to join our Vue DevUI open source project!🎉
-
-By participating in the Vue DevUI project, we can together:
-- 🔥 Learn the latest cool `Vite` + `Vue3` + `TypeScript` + `JSX` technology.
-- 🎁 Learn how to design and develop UI components.
-- ⭐ Hone programming skills and learn excellent programming practice.
-- 🎊 Meet a group of friends who love learning and open source.
-
-If you don't know how to start, please read our [contributing guide](https://vue-devui.github.io/contributing/)
-
-## ✨ Contributors
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center"><a href="https://juejin.cn/user/712139267650141"><img src="https://avatars.githubusercontent.com/u/9566362?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kagol</b></sub></a><br /><a href="#maintenance-kagol" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/TinsFox"><img src="https://avatars.githubusercontent.com/u/33956589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>TinsFox</b></sub></a><br /><a href="#maintenance-TinsFox" title="Maintenance">🚧</a> <a href="#infra-TinsFox" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
-    <td align="center"><a href="https://github.com/lnzhangsong"><img src="https://avatars.githubusercontent.com/u/15092594?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nif</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=lnzhangsong" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Zcating"><img src="https://avatars.githubusercontent.com/u/13329558?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zcating</b></sub></a><br /><a href="#maintenance-Zcating" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=Zcating" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/sufuwang"><img src="https://avatars.githubusercontent.com/u/46395105?v=4?s=100" width="100px;" alt=""/><br /><sub><b>王凯</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=sufuwang" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/iel-h"><img src="https://avatars.githubusercontent.com/u/53589602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>iel</b></sub></a><br /><a href="#maintenance-iel-h" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=iel-h" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/chenxi24"><img src="https://avatars.githubusercontent.com/u/40349890?v=4?s=100" width="100px;" alt=""/><br /><sub><b>chenxi24</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=chenxi24" title="Code">💻</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/asdlml6"><img src="https://avatars.githubusercontent.com/u/61737780?v=4?s=100" width="100px;" alt=""/><br /><sub><b>小九九</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=asdlml6" title="Code">💻</a></td>
-    <td align="center"><a href="http://blog.alanlee.top"><img src="https://avatars.githubusercontent.com/u/42601044?v=4?s=100" width="100px;" alt=""/><br /><sub><b>AlanLee</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=AlanLee97" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/ForeseeBear"><img src="https://avatars.githubusercontent.com/u/15258339?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Echo</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ForeseeBear" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/GaoNeng-wWw"><img src="https://avatars.githubusercontent.com/u/31283122?v=4?s=100" width="100px;" alt=""/><br /><sub><b>GaoNeng</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=GaoNeng-wWw" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/xingyan95"><img src="https://avatars.githubusercontent.com/u/11143986?v=4?s=100" width="100px;" alt=""/><br /><sub><b>行言</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xingyan95" title="Code">💻</a></td>
-    <td align="center"><a href="https://devin974.github.io/"><img src="https://avatars.githubusercontent.com/u/67035714?v=4?s=100" width="100px;" alt=""/><br /><sub><b>devin</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=devin974" title="Code">💻</a></td>
-    <td align="center"><a href="https://juejin.cn/user/1618116899507735/posts"><img src="https://avatars.githubusercontent.com/u/70649502?v=4?s=100" width="100px;" alt=""/><br /><sub><b>无声</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ivestszheng" title="Code">💻</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/zxlfly"><img src="https://avatars.githubusercontent.com/u/26324442?v=4?s=100" width="100px;" alt=""/><br /><sub><b>sleep_fish</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=zxlfly" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/whylost"><img src="https://avatars.githubusercontent.com/u/62528887?v=4?s=100" width="100px;" alt=""/><br /><sub><b>迷心whylost</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=whylost" title="Code">💻</a></td>
-    <td align="center"><a href="https://juejin.im/user/5c15d35fe51d4545ae495e43"><img src="https://avatars.githubusercontent.com/u/31237954?v=4?s=100" width="100px;" alt=""/><br /><sub><b>X.Q. Chen</b></sub></a><br /><a href="#infra-brenner8023" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=brenner8023" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/git-Where"><img src="https://avatars.githubusercontent.com/u/16344566?v=4?s=100" width="100px;" alt=""/><br /><sub><b>葉家男孩</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=git-Where" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/CatsAndMice"><img src="https://avatars.githubusercontent.com/u/58327088?v=4?s=100" width="100px;" alt=""/><br /><sub><b>lihai</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=CatsAndMice" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.naluduo.vip"><img src="https://avatars.githubusercontent.com/u/28448589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>纳撸多</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=naluduo233" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/ElsaOOo"><img src="https://avatars.githubusercontent.com/u/48074435?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ElsaOOo</b></sub></a><br /><a href="#maintenance-ElsaOOo" title="Maintenance">🚧</a> <a href="#infra-ElsaOOo" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=ElsaOOo" title="Code">💻</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/liuxdi"><img src="https://avatars.githubusercontent.com/u/10958003?v=4?s=100" width="100px;" alt=""/><br /><sub><b>刘小迪</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=liuxdi" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/unfound"><img src="https://avatars.githubusercontent.com/u/32935349?v=4?s=100" width="100px;" alt=""/><br /><sub><b>unfound</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=unfound" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Roading"><img src="https://avatars.githubusercontent.com/u/7751774?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Roading</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Roading" title="Code">💻</a></td>
-    <td align="center"><a href="http://inreasons.cn"><img src="https://avatars.githubusercontent.com/u/47918504?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chestnut</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=banlify" title="Code">💻</a></td>
-  </tr>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
-
-## License
-
-[MIT](https://github.com/DevCloudFE/vue-devui/blob/dev/LICENSE)
+<p align="center">
+  <a href="https://devui.design/home" target="_blank" rel="noopener noreferrer">
+    <img alt="DevUI Logo" src="https://github.com/DevCloudFE/vue-devui/raw/dev/packages/devui-vue/public/logo.svg" width="180" style="max-width:100%;">
+  </a>
+</p>
+
+<h1 align="center">Vue DevUI</h1>
+
+<p align="center">Vue3 component library based on <a href="https://devui.design/" target="_blank" rel="noopener noreferrer">DevUI Design</a></p>
+
+English | [简体中文](README.zh-CN.md)
+
+🌈 Features：
+
+- 📦 40 high-quality components that are simple, easy to use, and flexible.
+- 🔑 Support for TypeScript.
+- ⛰️ Support for Nuxt3.
+- ⚡ Support for on-demand import.
+- 🌍 Support internationalization.
+- 🎨 Support theme customization, and built-in seven beautiful themes such as `Galaxy`, `Sweet` and `Provence`.
+
+## 🔧 Usage
+
+The first step is to install vue devui:
+
+```
+npm i vue-devui
+```
+
+Then import `DevUI` in the `main.ts` file:
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// Import Vue DevUI component and style
+import DevUI from 'vue-devui'
+import 'vue-devui/style.css'
+
+createApp(App).use(DevUI).mount('#app')
+```
+
+Then you can use the vue devui component(such as `<d-button>`) in the `App.vue` file:
+
+```vue
+<template>
+  <d-button>Button</d-button>
+</template>
+```
+
+## 🖥️ Development
+
+```shell
+git clone git@github.com:DevCloudFE/vue-devui.git
+cd vue-devui
+pnpm i
+pnpm dev
+```
+
+Open your browser and visit: [http://localhost:3000/](http://localhost:3000/).
+
+## 🤝 Contributing
+
+Welcome to join our Vue DevUI open source project!🎉
+
+By participating in the Vue DevUI project, we can together:
+- 🔥 Learn the latest cool `Vite` + `Vue3` + `TypeScript` + `JSX` technology.
+- 🎁 Learn how to design and develop UI components.
+- ⭐ Hone programming skills and learn excellent programming practice.
+- 🎊 Meet a group of friends who love learning and open source.
+
+If you don't know how to start, please read our [contributing guide](https://vue-devui.github.io/contributing/)
+
+## ✨ Contributors
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://juejin.cn/user/712139267650141"><img src="https://avatars.githubusercontent.com/u/9566362?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kagol</b></sub></a><br /><a href="#maintenance-kagol" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/TinsFox"><img src="https://avatars.githubusercontent.com/u/33956589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>TinsFox</b></sub></a><br /><a href="#maintenance-TinsFox" title="Maintenance">🚧</a> <a href="#infra-TinsFox" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://github.com/lnzhangsong"><img src="https://avatars.githubusercontent.com/u/15092594?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nif</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=lnzhangsong" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Zcating"><img src="https://avatars.githubusercontent.com/u/13329558?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zcating</b></sub></a><br /><a href="#maintenance-Zcating" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=Zcating" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/sufuwang"><img src="https://avatars.githubusercontent.com/u/46395105?v=4?s=100" width="100px;" alt=""/><br /><sub><b>王凯</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=sufuwang" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/iel-h"><img src="https://avatars.githubusercontent.com/u/53589602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>iel</b></sub></a><br /><a href="#maintenance-iel-h" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=iel-h" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/chenxi24"><img src="https://avatars.githubusercontent.com/u/40349890?v=4?s=100" width="100px;" alt=""/><br /><sub><b>chenxi24</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=chenxi24" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/asdlml6"><img src="https://avatars.githubusercontent.com/u/61737780?v=4?s=100" width="100px;" alt=""/><br /><sub><b>小九九</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=asdlml6" title="Code">💻</a></td>
+    <td align="center"><a href="http://blog.alanlee.top"><img src="https://avatars.githubusercontent.com/u/42601044?v=4?s=100" width="100px;" alt=""/><br /><sub><b>AlanLee</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=AlanLee97" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ForeseeBear"><img src="https://avatars.githubusercontent.com/u/15258339?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Echo</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ForeseeBear" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/GaoNeng-wWw"><img src="https://avatars.githubusercontent.com/u/31283122?v=4?s=100" width="100px;" alt=""/><br /><sub><b>GaoNeng</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=GaoNeng-wWw" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/xingyan95"><img src="https://avatars.githubusercontent.com/u/11143986?v=4?s=100" width="100px;" alt=""/><br /><sub><b>行言</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xingyan95" title="Code">💻</a></td>
+    <td align="center"><a href="https://devin974.github.io/"><img src="https://avatars.githubusercontent.com/u/67035714?v=4?s=100" width="100px;" alt=""/><br /><sub><b>devin</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=devin974" title="Code">💻</a></td>
+    <td align="center"><a href="https://juejin.cn/user/1618116899507735/posts"><img src="https://avatars.githubusercontent.com/u/70649502?v=4?s=100" width="100px;" alt=""/><br /><sub><b>无声</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ivestszheng" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/zxlfly"><img src="https://avatars.githubusercontent.com/u/26324442?v=4?s=100" width="100px;" alt=""/><br /><sub><b>sleep_fish</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=zxlfly" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/whylost"><img src="https://avatars.githubusercontent.com/u/62528887?v=4?s=100" width="100px;" alt=""/><br /><sub><b>迷心whylost</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=whylost" title="Code">💻</a></td>
+    <td align="center"><a href="https://juejin.im/user/5c15d35fe51d4545ae495e43"><img src="https://avatars.githubusercontent.com/u/31237954?v=4?s=100" width="100px;" alt=""/><br /><sub><b>X.Q. Chen</b></sub></a><br /><a href="#infra-brenner8023" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=brenner8023" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/git-Where"><img src="https://avatars.githubusercontent.com/u/16344566?v=4?s=100" width="100px;" alt=""/><br /><sub><b>葉家男孩</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=git-Where" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/CatsAndMice"><img src="https://avatars.githubusercontent.com/u/58327088?v=4?s=100" width="100px;" alt=""/><br /><sub><b>lihai</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=CatsAndMice" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.naluduo.vip"><img src="https://avatars.githubusercontent.com/u/28448589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>纳撸多</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=naluduo233" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ElsaOOo"><img src="https://avatars.githubusercontent.com/u/48074435?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ElsaOOo</b></sub></a><br /><a href="#maintenance-ElsaOOo" title="Maintenance">🚧</a> <a href="#infra-ElsaOOo" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=ElsaOOo" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/liuxdi"><img src="https://avatars.githubusercontent.com/u/10958003?v=4?s=100" width="100px;" alt=""/><br /><sub><b>刘小迪</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=liuxdi" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/unfound"><img src="https://avatars.githubusercontent.com/u/32935349?v=4?s=100" width="100px;" alt=""/><br /><sub><b>unfound</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=unfound" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Roading"><img src="https://avatars.githubusercontent.com/u/7751774?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Roading</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Roading" title="Code">💻</a></td>
+    <td align="center"><a href="http://inreasons.cn"><img src="https://avatars.githubusercontent.com/u/47918504?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chestnut</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=banlify" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/c0dedance"><img src="https://avatars.githubusercontent.com/u/38075730?v=4?s=100" width="100px;" alt=""/><br /><sub><b>c0dedance</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=c0dedance" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/duqingyu"><img src="https://avatars.githubusercontent.com/u/30541930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>杜庆愉</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=duqingyu" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/linxiang07"><img src="https://avatars.githubusercontent.com/u/40119767?v=4?s=100" width="100px;" alt=""/><br /><sub><b>linxiang</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=linxiang07" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+
+## License
+
+[MIT](https://github.com/DevCloudFE/vue-devui/blob/dev/LICENSE)

package/auto-complete/index.es.js

@@ -20,7 +20,12 @@ var __publicField = (obj, key, value) => {
 };
 import { ref, nextTick, defineComponent, createVNode, h, render, inject, withDirectives, createTextVNode, resolveDirective, vShow, unref, watch, onUnmounted, mergeProps, toRefs, provide, Teleport, Transition, isVNode } from "vue";
 import { shift, offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
-const defaultFormatter = (item) => item ? item.label || item.toString() : "";
+const defaultFormatter = (item) => {
+  if (typeof item === "string") {
+    return item;
+  }
+  return item !== null ? item.label || item.toString() : "";
+};
 const defaultValueParse = (item) => item;
 const autoCompleteProps = {
   modelValue: {
@@ -35,6 +40,10 @@ const autoCompleteProps = {
     type: Boolean,
     default: false
   },
+  appendToBody: {
+    type: Boolean,
+    default: false
+  },
   position: {
     type: Array,
     default: ["bottom-end"]
@@ -145,9 +154,20 @@ function useCustomTemplate(ctx2, modelValue) {
   return { customRenderSolts };
 }
 function useSearchFn(ctx2, allowEmptyValueSearch, source, searchFn, formatter) {
-  const searchList = ref();
+  const searchList = ref([]);
   const showNoResultItemTemplate = ref(false);
-  const handleSearch = async (term, enableLazyLoad) => {
+  const defaultSearchFn = (term) => {
+    const arr = [];
+    source.value.forEach((item) => {
+      let cur = formatter.value(item);
+      cur = cur.toLowerCase();
+      if (cur.startsWith(term)) {
+        arr.push(item);
+      }
+    });
+    return arr;
+  };
+  const handleSearch = async (term, enableLazyLoad = false) => {
     if (term === "" && !allowEmptyValueSearch.value) {
       searchList.value = [];
       showNoResultItemTemplate.value = false;
@@ -158,13 +178,7 @@ function useSearchFn(ctx2, allowEmptyValueSearch, source, searchFn, formatter) {
     if (enableLazyLoad) {
       arr = source.value;
     } else if (!searchFn.value) {
-      source.value.forEach((item) => {
-        let cur = formatter.value(item);
-        cur = cur.toLowerCase();
-        if (cur.startsWith(term)) {
-          arr.push(item);
-        }
-      });
+      arr = defaultSearchFn(term);
     } else {
       arr = await searchFn.value(term);
     }
@@ -193,13 +207,13 @@ function useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue,
   const searchStatus = ref(false);
   const debounce = (cb, time) => {
     let timer;
-    return (...args) => {
+    return (arg) => {
       if (timer) {
         clearTimeout(timer);
       }
       timer = setTimeout(async () => {
         searchStatus.value = true;
-        await cb(...args);
+        await cb(arg);
         searchStatus.value = false;
       }, time);
     };
@@ -218,7 +232,7 @@ function useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue,
   };
   const onFocus = () => {
     handleSearch(modelValue.value);
-    recentlyFocus(latestSource.value);
+    recentlyFocus(latestSource == null ? void 0 : latestSource.value);
     transInputFocusEmit.value && transInputFocusEmit.value();
   };
   const handleClose = () => {
@@ -250,11 +264,22 @@ function useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue,
 }
 function useSelectHandle(ctx2, searchList, selectValue, handleSearch, formatter, handleClose) {
   const selectedIndex = ref(0);
-  const getListIndex = (item) => {
+  const getListIndex = (cur) => {
     if (searchList.value.length === 0) {
       return 0;
     }
-    const ind = searchList.value.indexOf(item);
+    let ind = 0;
+    searchList.value.forEach((item, index2) => {
+      if (typeof item === "string") {
+        if (item === cur) {
+          ind = index2;
+        }
+      } else {
+        if (String(item.label) === cur) {
+          ind = index2;
+        }
+      }
+    });
     return ind === -1 ? 0 : ind;
   };
   const selectOptionClick = async (item) => {
@@ -285,11 +310,11 @@ function useLazyHandle(props, ctx2, handleSearch) {
       showLoading.value = true;
     }
   };
-  ctx2.expose({ loadFinish });
   async function loadFinish() {
     await handleSearch(props.modelValue, props.enableLazyLoad);
     showLoading.value = false;
   }
+  ctx2.expose({ loadFinish });
   return {
     showLoading,
     dropDownRef,
@@ -444,8 +469,8 @@ var Loading = defineComponent({
   }
 });
 const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
-function createComponent(Component, props, children = null) {
-  const vnode = h(Component, __spreadValues({}, props), children);
+function createComponent(component, props, children = null) {
+  const vnode = h(component, __spreadValues({}, props), children);
   const container = document.createElement("div");
   vnode[COMPONENT_CONTAINER_SYMBOL] = container;
   render(vnode, container);
@@ -525,13 +550,14 @@ const removeAttribute = (el) => {
   el.removeAttribute("loadingtemplateref");
 };
 const handleProps = (el, vprops) => {
+  var _a;
   const props = __spreadValues(__spreadValues({}, new LoadingProps()), vprops);
   const loadingTemplateRef = props.loadingTemplateRef;
   const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
   el.style.position = props.positionType;
   el.options = props;
   el.instance = loadingInstance;
-  el.mask = loadingInstance.proxy.$el;
+  el.mask = (_a = loadingInstance == null ? void 0 : loadingInstance.proxy) == null ? void 0 : _a.$el;
 };
 const loadingDirective = {
   mounted: function(el, binding, vnode) {
@@ -566,7 +592,8 @@ var DAutoCompleteDropdown = defineComponent({
       showNoResultItemTemplate,
       latestSource,
       modelValue,
-      hoverIndex
+      hoverIndex,
+      valueParser
     } = propsData;
     const {
       disabled,
@@ -576,7 +603,8 @@ var DAutoCompleteDropdown = defineComponent({
       isSearching
     } = propsData.props;
     const onSelect = (item) => {
-      if (item[disabledKey]) {
+      item = valueParser.value(item);
+      if (typeof item === "object" && item[disabledKey]) {
         return;
       }
       selectOptionClick(item);
@@ -601,7 +629,7 @@ var DAutoCompleteDropdown = defineComponent({
         return createVNode("li", {
           "onClick": () => onSelect(item),
           "class": ["devui-dropdown-item", selectedIndex.value === index2 && "selected", {
-            "disabled": disabledKey && item[disabledKey]
+            "disabled": disabledKey && typeof item === "object" && item[disabledKey]
           }, {
             "devui-dropdown-bg": hoverIndex.value === index2
           }],
@@ -733,6 +761,7 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
 function useOverlay(props, emit) {
   const overlayRef = ref();
   const arrowRef = ref();
+  let originParent = null;
   const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
     const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
     const staticSide = {
@@ -771,21 +800,20 @@ function useOverlay(props, emit) {
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
   watch(() => props.modelValue, () => {
-    const originParent = getScrollParent(props.origin);
     if (props.modelValue && props.origin) {
+      originParent = getScrollParent(props.origin);
       nextTick(updatePosition);
-      originParent.addEventListener("scroll", updatePosition);
+      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
       originParent !== window && window.addEventListener("scroll", updatePosition);
       window.addEventListener("resize", updatePosition);
     } else {
-      originParent.removeEventListener("scroll", updatePosition);
+      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
       originParent !== window && window.removeEventListener("scroll", updatePosition);
       window.removeEventListener("resize", updatePosition);
     }
   });
   onUnmounted(() => {
-    const originParent = getScrollParent(props.origin);
-    originParent.removeEventListener("scroll", updatePosition);
+    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
     originParent !== window && window.removeEventListener("scroll", updatePosition);
     window.removeEventListener("resize", updatePosition);
   });
@@ -840,6 +868,7 @@ var AutoComplete = defineComponent({
       width,
       delay,
       allowEmptyValueSearch,
+      appendToBody,
       formatter,
       transInputFocusEmit,
       selectValue,
@@ -847,7 +876,8 @@ var AutoComplete = defineComponent({
       searchFn,
       position,
       latestSource,
-      showAnimation
+      showAnimation,
+      valueParser
     } = toRefs(props);
     const {
       handleSearch,
@@ -894,18 +924,46 @@ var AutoComplete = defineComponent({
       latestSource,
       modelValue,
       showNoResultItemTemplate,
-      hoverIndex
+      hoverIndex,
+      valueParser
     });
     const origin = ref();
     const renderDropdown = () => {
-      let _slot;
-      return createVNode(Teleport, {
-        "to": "body"
-      }, {
-        default: () => [createVNode(Transition, {
+      if (appendToBody.value) {
+        let _slot;
+        return createVNode(Teleport, {
+          "to": "body"
+        }, {
+          default: () => [createVNode(Transition, {
+            "name": showAnimation ? "fade" : ""
+          }, {
+            default: () => [createVNode(FlexibleOverlay, {
+              "show-arrow": true,
+              "origin": origin.value,
+              "position": position.value,
+              "modelValue": visible.value,
+              "onUpdate:modelValue": ($event) => visible.value = $event
+            }, {
+              default: () => [createVNode("div", {
+                "class": "devui-auto-complete-menu",
+                "style": {
+                  width: `
+                      ${width.value + "px"}
+                    `
+                }
+              }, [createVNode(DAutoCompleteDropdown, null, _isSlot(_slot = customRenderSolts()) ? _slot : {
+                default: () => [_slot]
+              })])]
+            })]
+          })]
+        });
+      } else {
+        let _slot2;
+        return createVNode(Transition, {
           "name": showAnimation ? "fade" : ""
         }, {
           default: () => [createVNode(FlexibleOverlay, {
+            "show-arrow": true,
             "origin": origin.value,
             "position": position.value,
             "modelValue": visible.value,
@@ -918,12 +976,12 @@ var AutoComplete = defineComponent({
                     ${width.value + "px"}
                   `
               }
-            }, [createVNode(DAutoCompleteDropdown, null, _isSlot(_slot = customRenderSolts()) ? _slot : {
-              default: () => [_slot]
+            }, [createVNode(DAutoCompleteDropdown, null, _isSlot(_slot2 = customRenderSolts()) ? _slot2 : {
+              default: () => [_slot2]
             })])]
           })]
-        })]
-      });
+        });
+      }
     };
     return () => {
       return withDirectives(createVNode("div", {
@@ -947,15 +1005,12 @@ var AutoComplete = defineComponent({
     };
   }
 });
-AutoComplete.install = function(app) {
-  app.component(AutoComplete.name, AutoComplete);
-};
 var index = {
   title: "AutoComplete \u81EA\u52A8\u8865\u5168",
   category: "\u6570\u636E\u5F55\u5165",
   status: "100%",
   install(app) {
-    app.use(AutoComplete);
+    app.component(AutoComplete.name, AutoComplete);
   }
 };
-export { AutoComplete, index as default };
+export { AutoComplete, DropdownPropsKey, autoCompleteProps, index as default };