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

package/README.md

@@ -1,200 +1,126 @@
-<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>
-
-Vue DevUI 是 Vue3 版本的 DevUI 组件库，基于 [https://github.com/devcloudfe/ng-devui](https://github.com/devcloudfe/ng-devui)，倡导`沉浸`、`灵活`、`至简`的设计价值观。
-
-DevUI 官方网站：[https://devui.design](https://devui.design)
-
-## 当前状态: Beta
-
-该项目还处于孵化和演进阶段，欢迎大家参与到 Vue DevUI 项目的建设中来！🎉🎉
-
-通过参与 Vue DevUI 项目，你可以：
-- 🔥 学习最新的 `Vite`+`Vue3`+`TypeScript`+`JSX` 技术
-- 🎁 学习如何设计和开发组件
-- ⭐ 参与到开源社区中来
-- 🎊 结识一群热爱学习、热爱开源的朋友
-
-[贡献指南](https://github.com/DevCloudFE/vue-devui/wiki/%E8%B4%A1%E7%8C%AE%E6%8C%87%E5%8D%97)
-
-## 快速开始
-
-### 1 安装依赖
-
-```
-pnpm i
-```
-
-### 2 启动
-
-```
-pnpm dev
-```
-
-### 3 访问
-
-[http://localhost:3000/](http://localhost:3000/)
-
-### 4 生产打包
-
-```
-pnpm build
-```
-
-## 使用 Vue DevUI
-
-### 1. 安装
-
-```
-pnpm i vue-devui
-```
-
-### 2. 全量引入
-
-在`main.ts`文件中编写以下代码：
-```
-import { createApp } from 'vue'
-import App from './App.vue'
-
-// Step 1: 引入 Vue DevUI 组件库
-import DevUI from 'vue-devui'
-// Step 2: 引入组件库样式
-import 'vue-devui/style.css'
-
-createApp(App)
-.use(DevUI) // Step 3: 使用 Vue DevUI
-.mount('#app')
-```
-
-### 3. 按需引入
-
-除了全量引入，我们也支持单个组件按需引入。
-
-在`main.ts`文件中编写以下代码：
-```
-import { createApp } from 'vue'
-import App from './App.vue'
-
-// Step 1: 引入单个组件
-import { Button } from 'vue-devui'
-// or import Button from 'vue-devui/button'
-// Step 2: 引入组件样式
-import 'vue-devui/button/style.css'
-
-createApp(App)
-.use(Button) // Step 3: 使用组件
-.mount('#app')
-```
-
-### 4. 配置自动按需引入`unplugin-vue-components`（推荐）
-
-配置`unplugin-vue-components`插件可以无需引入Vue DevUI就可以直接按需使用其中的组件，具体使用方式如下：
-
-在`vite.config.ts`文件中添加以下代码：
-```
-import Components from 'unplugin-vue-components/vite'
-import { DevUiResolver } from 'unplugin-vue-components/resolvers'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-
-    // 新增
-    Components({
-      resolvers: [
-        DevUiResolver()
-      ]
-    })
-  ]
-})
-```
-
-配置了以上插件，就可以直接在代码中使用`Vue DevUI`的组件，而无需在`main.ts`文件中引入`Vue DevUI`。
-
-### 5. 使用
-
-```
-<template>
-  <d-button>确定</d-button>
-</template>
-```
-
-## 图标库
-
-图标库推荐使用[DevUI图标库](https://devui.design/icon/ruleResource)，也可以使用第三方图标库，比如：iconfont。
-
-### 使用DevUI图标库
-
-#### 安装
-
-```
-pnpm i @devui-design/icons
-```
-
-#### 引入
-
-在`main.ts`文件中，编写以下代码：
-
-```
-import '@devui-design/icons/icomoon/devui-icon.css'
-```
-
-#### 使用
-
-```
-<d-icon name="love" color="red"></d-icon>
-```
-
-## 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>
-  </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>
+  </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

@@ -18,7 +18,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, nextTick, defineComponent, createVNode, h, render, inject, withDirectives, createTextVNode, resolveDirective, vShow, unref, watch, onUnmounted, mergeProps, toRefs, provide, reactive, isVNode, Transition } from "vue";
+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 defaultValueParse = (item) => item;
@@ -35,18 +35,9 @@ const autoCompleteProps = {
     type: Boolean,
     default: false
   },
-  appendToBody: {
-    type: Boolean,
-    default: false
-  },
-  appendToBodyDirections: {
-    type: Object,
-    default: () => ({
-      originX: "left",
-      originY: "bottom",
-      overlayX: "left",
-      overlayY: "top"
-    })
+  position: {
+    type: Array,
+    default: ["bottom-end"]
   },
   disabled: {
     type: Boolean,
@@ -92,9 +83,9 @@ const autoCompleteProps = {
     type: Boolean,
     default: false
   },
-  dAutoCompleteWidth: {
+  width: {
     type: Number,
-    default: null
+    default: 400
   },
   showAnimation: {
     type: Boolean,
@@ -121,32 +112,32 @@ const DropdownPropsKey = Symbol("DropdownPropsKey");
 function useCustomTemplate(ctx2, modelValue) {
   const itemTemplate = (item, index2) => {
     const arr = { item, index: index2 };
-    if (ctx2.slots.itemTemplate) {
-      return ctx2.slots.itemTemplate(arr);
+    if (ctx2.slots.item) {
+      return ctx2.slots.item(arr);
     }
     return null;
   };
   const noResultItemTemplate = () => {
-    if (ctx2.slots.noResultItemTemplate) {
-      return ctx2.slots.noResultItemTemplate(modelValue.value);
+    if (ctx2.slots.nothing) {
+      return ctx2.slots.nothing(modelValue.value);
     }
     return null;
   };
   const searchingTemplate = () => {
-    if (ctx2.slots.searchingTemplate) {
-      return ctx2.slots.searchingTemplate(modelValue.value);
+    if (ctx2.slots.searching) {
+      return ctx2.slots.searching(modelValue.value);
     }
     return null;
   };
   const customRenderSolts = () => {
     const slots = {};
-    if (ctx2.slots.itemTemplate) {
+    if (ctx2.slots.item) {
       slots["itemTemplate"] = itemTemplate;
     }
-    if (ctx2.slots.noResultItemTemplate) {
+    if (ctx2.slots.nothing) {
       slots["noResultItemTemplate"] = noResultItemTemplate;
     }
-    if (ctx2.slots.searchingTemplate) {
+    if (ctx2.slots.searching) {
       slots["searchingTemplate"] = searchingTemplate;
     }
     return slots;
@@ -154,10 +145,10 @@ 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) => {
-    if (term == "" && !allowEmptyValueSearch.value) {
+    if (term === "" && !allowEmptyValueSearch.value) {
       searchList.value = [];
       showNoResultItemTemplate.value = false;
       return;
@@ -178,7 +169,7 @@ function useSearchFn(ctx2, allowEmptyValueSearch, source, searchFn, formatter) {
       arr = await searchFn.value(term);
     }
     searchList.value = arr;
-    if (searchList.value.length == 0) {
+    if (searchList.value.length === 0) {
       showNoResultItemTemplate.value = true;
     } else {
       showNoResultItemTemplate.value = false;
@@ -241,7 +232,7 @@ function useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue,
         handleClose();
       } else {
         visible.value = true;
-        if (ctx2.slots.noResultItemTemplate && searchList.value.length == 0 && modelValue.value.trim() != "") {
+        if (ctx2.slots.noResultItemTemplate && searchList.value.length === 0 && modelValue.value.trim() !== "") {
           showNoResultItemTemplate.value = true;
         }
       }
@@ -260,11 +251,11 @@ function useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue,
 function useSelectHandle(ctx2, searchList, selectValue, handleSearch, formatter, handleClose) {
   const selectedIndex = ref(0);
   const getListIndex = (item) => {
-    if (searchList.value.length == 0) {
+    if (searchList.value.length === 0) {
       return 0;
     }
     const ind = searchList.value.indexOf(item);
-    return ind == -1 ? 0 : ind;
+    return ind === -1 ? 0 : ind;
   };
   const selectOptionClick = async (item) => {
     const cur = formatter.value(item);
@@ -272,7 +263,7 @@ function useSelectHandle(ctx2, searchList, selectValue, handleSearch, formatter,
     handleClose();
     await handleSearch(cur);
     selectedIndex.value = getListIndex(cur);
-    selectValue.value && selectValue.value();
+    selectValue.value && selectValue.value(cur);
   };
   return {
     selectedIndex,
@@ -580,7 +571,6 @@ var DAutoCompleteDropdown = defineComponent({
     const {
       disabled,
       maxHeight,
-      appendToBody,
       formatter,
       disabledKey,
       isSearching
@@ -593,7 +583,7 @@ var DAutoCompleteDropdown = defineComponent({
     };
     return () => {
       return withDirectives(createVNode("div", {
-        "class": ["devui-dropdown-menu", appendToBody && "devui-dropdown-menu-cdk", disabled && "disabled", latestSource.value && "devui-dropdown-latestSource"]
+        "class": ["devui-dropdown-menu", "devui-dropdown-menu-cdk", disabled && "disabled", latestSource.value && "devui-dropdown-latestSource"]
       }, [createVNode("ul", {
         "ref": dropDownRef,
         "class": "devui-list-unstyled scroll-height",
@@ -601,28 +591,28 @@ var DAutoCompleteDropdown = defineComponent({
           maxHeight: `${maxHeight}px`
         },
         "onScroll": loadMore
-      }, [isSearching && ctx2.slots.searchingTemplate && searchStatus.value && createVNode("li", {
+      }, [isSearching && ctx2.slots.searchingTemplate && (searchStatus == null ? void 0 : searchStatus.value) && createVNode("li", {
         "class": "devui-is-searching-template"
       }, [createVNode("div", {
         "class": "devui-no-data-tip"
       }, [ctx2.slots.searchingTemplate()])]), latestSource.value && !modelValue.value && createVNode("li", {
         "class": "devui-popup-tips"
-      }, [createTextVNode("\u6700\u8FD1\u8F93\u5165")]), !showNoResultItemTemplate.value && !searchStatus.value && searchList != null && searchList.value.length > 0 && searchList.value.map((item, index2) => {
+      }, [createTextVNode("\u6700\u8FD1\u8F93\u5165")]), !showNoResultItemTemplate.value && !(searchStatus == null ? void 0 : searchStatus.value) && searchList != null && searchList.value.length > 0 && searchList.value.map((item, index2) => {
         return createVNode("li", {
           "onClick": () => onSelect(item),
-          "class": ["devui-dropdown-item", selectedIndex.value == index2 && "selected", {
+          "class": ["devui-dropdown-item", selectedIndex.value === index2 && "selected", {
             "disabled": disabledKey && item[disabledKey]
           }, {
-            "devui-dropdown-bg": hoverIndex.value == index2
+            "devui-dropdown-bg": hoverIndex.value === index2
           }],
           "title": formatter(item),
           "key": formatter(item)
         }, [ctx2.slots.itemTemplate ? ctx2.slots.itemTemplate(item, index2) : formatter(item)]);
-      }), !searchStatus.value && searchList.value.length == 0 && ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value && createVNode("li", {
+      }), !(searchStatus == null ? void 0 : searchStatus.value) && searchList.value.length === 0 && ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value && createVNode("li", {
         "class": "devui-no-result-template"
       }, [createVNode("div", {
         "class": "devui-no-data-tip"
-      }, [ctx2.slots.noResultItemTemplate()])])])]), [[resolveDirective("dLoading"), showLoading.value], [vShow, visible.value && searchList.value.length > 0 || ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value || isSearching && ctx2.slots.searchingTemplate && searchStatus.value]]);
+      }, [ctx2.slots.noResultItemTemplate()])])])]), [[resolveDirective("dLoading"), showLoading.value], [vShow, visible.value && searchList.value.length > 0 || ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value || isSearching && ctx2.slots.searchingTemplate && (searchStatus == null ? void 0 : searchStatus.value)]]);
     };
   }
 });
@@ -847,8 +837,7 @@ var AutoComplete = defineComponent({
     const {
       disabled,
       modelValue,
-      appendToBody,
-      dAutoCompleteWidth,
+      width,
       delay,
       allowEmptyValueSearch,
       formatter,
@@ -856,7 +845,7 @@ var AutoComplete = defineComponent({
       selectValue,
       source,
       searchFn,
-      appendToBodyDirections,
+      position,
       latestSource,
       showAnimation
     } = toRefs(props);
@@ -908,51 +897,40 @@ var AutoComplete = defineComponent({
       hoverIndex
     });
     const origin = ref();
-    const position = reactive({
-      appendToBodyDirections: {}
-    });
-    position.appendToBodyDirections = appendToBodyDirections;
     const renderDropdown = () => {
-      if (appendToBody.value) {
-        let _slot;
-        return createVNode(FlexibleOverlay, {
-          "hasBackdrop": false,
-          "origin": origin,
-          "position": position.appendToBodyDirections,
-          "visible": visible.value,
-          "onUpdate:visible": ($event) => visible.value = $event
-        }, {
-          default: () => [createVNode("div", {
-            "class": "devui-dropdown devui-auto-complete-menu",
-            "style": {
-              width: dAutoCompleteWidth.value > 0 && dAutoCompleteWidth.value + "px"
-            }
-          }, [createVNode(DAutoCompleteDropdown, null, _isSlot(_slot = customRenderSolts()) ? _slot : {
-            default: () => [_slot]
-          })])]
-        });
-      } else {
-        let _slot2;
-        return createVNode("div", {
-          "class": "devui-dropdown",
-          "style": {
-            width: dAutoCompleteWidth.value > 0 && dAutoCompleteWidth.value + "px"
-          }
-        }, [createVNode(Transition, {
+      let _slot;
+      return createVNode(Teleport, {
+        "to": "body"
+      }, {
+        default: () => [createVNode(Transition, {
           "name": showAnimation ? "fade" : ""
         }, {
-          default: () => [createVNode(DAutoCompleteDropdown, null, _isSlot(_slot2 = customRenderSolts()) ? _slot2 : {
-            default: () => [_slot2]
+          default: () => [createVNode(FlexibleOverlay, {
+            "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]
+            })])]
           })]
-        })]);
-      }
+        })]
+      });
     };
     return () => {
       return withDirectives(createVNode("div", {
         "class": ["devui-auto-complete", "devui-form-group", "devui-has-feedback", visible.value && "devui-select-open"],
         "ref": origin,
         "style": {
-          width: dAutoCompleteWidth.value > 0 && dAutoCompleteWidth.value + "px"
+          width: `${width.value + "px"}`
         }
       }, [createVNode("input", {
         "disabled": disabled.value,