vue-devui 1.0.0-beta.2 → 1.0.0-beta.220801

package/README.md

@@ -1,172 +1,163 @@
-<p align="center">
-  <a href="https://devui.design/home" target="_blank" rel="noopener noreferrer">
-    <img alt="DevUI Logo" src="public/logo.svg?sanitize=true" 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://gitee.com/devui/vue-devui/wikis/【必看】快速开始)
-
-# 快速开始
-
-## 1 安装依赖
-
-```
-yarn(推荐)
-
-or
-
-npm i
-```
-
-## 2 启动
-
-```
-yarn dev(推荐)
-
-or
-
-npm run dev
-```
-
-## 3 访问
-
-[http://localhost:3000/](http://localhost:3000/)
-
-## 4 生产打包
-
-```
-yarn build(推荐)
-
-or
-
-npm run build
-```
-
-# 使用 Vue DevUI
-
-## 1. 安装
-
-```
-yarn add vue-devui
-```
-
-## 2. 全量引入
-
-```
-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. 按需引入
-
-除了全量引入，我们也支持单个组件按需引入。
-
-```
-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. 使用
-
-```
-<template>
-  <d-button>确定</d-button>
-</template>
-```
-
-# 图标库
-
-图标库可以使用[DevUI图标库](https://devui.design/icon/ruleResource)，也可以使用第三方图标库，比如：iconfont。
-
-## 使用DevUI图标库
-
-### 安装
-
-```
-yarn add @devui-design/icons(推荐)
-
-or
-
-npm i @devui-design/icons
-```
-
-### 引入
-
-在`main.ts`文件中，编写以下代码：
-
-```
-import '@devui-design/icons/icomoon/devui-icon.css'
-```
-
-### 使用
-
-```
-<d-icon name="love" color="red"></d-icon>
-```
-
-## 使用第三方图标库
-
-如果有第三方图标库，可以用类似的方式引入。
-
-### 引入
-
-在`main.ts`文件中，编写以下代码：
-
-```
-import 'your-folder/my-icon.css'
-```
-
-### 使用
-
-```
-<d-icon classPrefix="my-icon" name="love" color="red"></d-icon>
-```
-
-其中的`classPrefix`参数的值，应该和你的字体图标样式文件`my-icon.css`里定义的样式前缀保持一致。
-
-比如`my-icon.css`里的图标样式：
-
-```css
-.my-icon-branch-node:before {
-	content: "\E001";
-}
-```
-
-那么`classPrefix`就是`my-icon`。
-
-# License
-
-[MIT](https://gitee.com/devui/vue-devui/blob/dev/LICENSE)
+<p align="center">
+  <a href="https://devui.design/" target="_blank" rel="noopener noreferrer">
+    <img alt="DevUI Logo" src="https://vue-devui.github.io/assets/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>
+    <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>
+  </tr>
+  <tr>
+    <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> <a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3Axingyan95" title="Bug reports">🐛</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>
+    <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>
+  </tr>
+  <tr>
+    <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>
+    <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>
+    <td align="center"><a href="https://github.com/nextniko"><img src="https://avatars.githubusercontent.com/u/40553790?v=4?s=100" width="100px;" alt=""/><br /><sub><b>掘墓忍者</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=nextniko" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/zcj996"><img src="https://avatars.githubusercontent.com/u/52314078?v=4?s=100" width="100px;" alt=""/><br /><sub><b>一个大胖子</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=zcj996" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=zcj996" title="Documentation">📖</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://bandism.net/"><img src="https://avatars.githubusercontent.com/u/22633385?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ikko Ashimine</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=eltociear" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://xiaoborao.github.io/"><img src="https://avatars.githubusercontent.com/u/27467603?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bob</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xiaoboRao" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/NidusP"><img src="https://avatars.githubusercontent.com/u/30283065?v=4?s=100" width="100px;" alt=""/><br /><sub><b>populus</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=NidusP" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/554246839"><img src="https://avatars.githubusercontent.com/u/24663941?v=4?s=100" width="100px;" alt=""/><br /><sub><b>tohalf</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=554246839" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Lonely-shang"><img src="https://avatars.githubusercontent.com/u/34124930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Miliky</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Lonely-shang" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=Lonely-shang" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/MICD0704"><img src="https://avatars.githubusercontent.com/u/20532893?v=4?s=100" width="100px;" alt=""/><br /><sub><b>MICD</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=MICD0704" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AMICD0704" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/ming-bin"><img src="https://avatars.githubusercontent.com/u/54826175?v=4?s=100" width="100px;" alt=""/><br /><sub><b>mingBin</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ming-bin" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3Aming-bin" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/icjs-cc"><img src="https://avatars.githubusercontent.com/u/27618209?v=4?s=100" width="100px;" alt=""/><br /><sub><b>陈剑术</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=icjs-cc" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.merlin218.top/"><img src="https://avatars.githubusercontent.com/u/61051874?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Merlin218</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AMerlin218" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/jingyiliu"><img src="https://avatars.githubusercontent.com/u/6957175?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Johnny.Liu</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3Ajingyiliu" title="Bug reports">🐛</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/Yangxfeng"><img src="https://avatars.githubusercontent.com/u/35209766?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yangxfeng</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AYangxfeng" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/jCodeLife"><img src="https://avatars.githubusercontent.com/u/50767049?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jCodeLife</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AjCodeLife" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/XiaoRIGE"><img src="https://avatars.githubusercontent.com/u/33147011?v=4?s=100" width="100px;" alt=""/><br /><sub><b>宋小日</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AXiaoRIGE" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/daviForevel"><img src="https://avatars.githubusercontent.com/u/39021499?v=4?s=100" width="100px;" alt=""/><br /><sub><b>daviForevel</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=daviForevel" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/lj1990111"><img src="https://avatars.githubusercontent.com/u/8649913?v=4?s=100" width="100px;" alt=""/><br /><sub><b>lj1990111</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=lj1990111" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/newer2333"><img src="https://avatars.githubusercontent.com/u/32949033?v=4?s=100" width="100px;" alt=""/><br /><sub><b>newer2333</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=newer2333" title="Code">💻</a></td>
+    <td align="center"><a href="https://husky-bear.gitee.io/blob/"><img src="https://avatars.githubusercontent.com/u/50540342?v=4?s=100" width="100px;" alt=""/><br /><sub><b>哈士奇-黄</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Husky-Yellow" title="Code">💻</a></td>
+    <td align="center"><a href="http://innei.ren"><img src="https://avatars.githubusercontent.com/u/41265413?v=4?s=100" width="100px;" alt=""/><br /><sub><b>寻</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Innei" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/aolyang"><img src="https://avatars.githubusercontent.com/u/72056179?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anthonio OuYang</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=aolyang" title="Code">💻</a></td>
+    <td align="center"><a href="https://yyblog.top"><img src="https://avatars.githubusercontent.com/u/57666140?v=4?s=100" width="100px;" alt=""/><br /><sub><b>FlingYP</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=flingyp" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/xzxldl55"><img src="https://avatars.githubusercontent.com/u/22699218?v=4?s=100" width="100px;" alt=""/><br /><sub><b>xzxldl55</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xzxldl55" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/79E"><img src="https://avatars.githubusercontent.com/u/71202421?v=4?s=100" width="100px;" alt=""/><br /><sub><b>79</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=79E" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/SituC"><img src="https://avatars.githubusercontent.com/u/29355875?v=4?s=100" width="100px;" alt=""/><br /><sub><b>wailen</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=SituC" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/JensonMiao"><img src="https://avatars.githubusercontent.com/u/46488783?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jenson</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=JensonMiao" 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!
+
+## Partner project
+
+- [H5-Dooring - 让H5制作，更简单](http://h5.dooring.cn/)
+
+## License
+
+[MIT](https://github.com/DevCloudFE/vue-devui/blob/dev/LICENSE)

package/alert/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/alert/index.es.js

@@ -14,15 +14,39 @@ const AlertCloseIcon = () => createVNode("svg", {
   "transform": "translate(-3.000000, -3.000000)",
   "fill-rule": "nonzero"
 }, [createVNode("path", {
-  "d": "M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"
+  "d": "M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"
 }, null)])])]);
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+const ns = useNamespace("alert");
 const AlertTypeIcon = (props) => createVNode("svg", {
   "width": "16px",
   "height": "16px",
   "viewBox": "0 0 16 16",
   "version": "1.1",
   "xmlns": "http://www.w3.org/2000/svg",
-  "class": `devui-icon ${props.type === "danger" ? "devui-icon-error" : `devui-icon-${props.type}`}`
+  "class": [ns.e("icon"), props.type === "danger" ? ns.em("icon", "error") : ns.em("icon", props.type)]
 }, [(() => {
   switch (props.type) {
     case "success":
@@ -46,13 +70,13 @@ const AlertTypeIcon = (props) => createVNode("svg", {
         "fill": "none",
         "fill-rule": "evenodd"
       }, [createVNode("path", {
-        "class": "devui-icon-warning-outer",
-        "d": "M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
+        "class": "warning-outer",
+        "d": "M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117               15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15               14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873               0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229               C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589               C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
       }, null), createVNode("path", {
-        "class": "devui-icon-warning-inner",
+        "class": "warning-inner",
         "stroke-width": "0.3",
         "fill-rule": "nonzero",
-        "d": "M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
+        "d": "M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263               L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5               L8.96842105,4.5 L8.62102372,9.86842105 Z"
       }, null)]);
     case "info":
       return createVNode("g", {
@@ -63,10 +87,10 @@ const AlertTypeIcon = (props) => createVNode("svg", {
       }, [createVNode("g", {
         "fill-rule": "nonzero"
       }, [createVNode("path", {
-        "class": "devui-icon-info-outer",
+        "class": "info-outer",
         "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"
       }, null), createVNode("path", {
-        "class": "devui-icon-info-inner",
+        "class": "info-inner",
         "d": "M9.19008504,7 L8.79402696,13 L7.15622605,13 L6.73158434,7 L9.19008504,7 Z M9,3 L9,5 L7,5 L7,3 L9,3 Z",
         "stroke-width": "0.2"
       }, null)])]);
@@ -79,10 +103,10 @@ const AlertTypeIcon = (props) => createVNode("svg", {
       }, [createVNode("g", {
         "fill-rule": "nonzero"
       }, [createVNode("path", {
-        "class": "devui-icon-error-outer",
+        "class": "error-outer",
         "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"
       }, null), createVNode("path", {
-        "class": "devui-icon-error-inner",
+        "class": "error-inner",
         "d": "M9,10.6 L9,12.6 L7,12.6 L7,10.6 L9,10.6 Z M9.1,3.1 L8.65924344,9.1 L7.28422786,9.1 L6.9,3.1 L9.1,3.1 Z",
         "stroke-width": "0.2"
       }, null)])]);
@@ -90,87 +114,91 @@ const AlertTypeIcon = (props) => createVNode("svg", {
       return null;
   }
 })()]);
+const alertProps = {
+  type: {
+    type: String,
+    default: "info"
+  },
+  cssClass: {
+    type: String,
+    default: ""
+  },
+  closeable: {
+    type: Boolean,
+    default: true
+  },
+  showIcon: {
+    type: Boolean,
+    default: true
+  },
+  dismissTime: {
+    type: Number,
+    default: 0
+  },
+  center: {
+    type: Boolean,
+    default: false
+  }
+};
 var alert = "";
 var Alert = defineComponent({
   name: "DAlert",
-  props: {
-    type: {
-      type: String,
-      default: "info"
-    },
-    cssClass: {
-      type: String,
-      default: ""
-    },
-    closeable: {
-      type: Boolean,
-      default: true
-    },
-    showIcon: {
-      type: Boolean,
-      default: true
-    },
-    dismissTime: {
-      type: Number,
-      default: 0
-    }
-  },
+  props: alertProps,
   emits: ["close"],
   setup(props, ctx) {
+    const ns2 = useNamespace("alert");
     const hide = ref(false);
     const closing = ref(false);
     const alertEl = ref();
+    let dismissTimer = void 0;
     const close = (event) => {
-      const dom = alertEl.value;
-      dom.style.height = `${dom.offsetHeight}px`;
-      dom.style.height = `${dom.offsetHeight}px`;
+      dismissTimer && clearTimeout(dismissTimer);
       closing.value = true;
       ctx.emit("close", event);
     };
     const afterLeave = () => {
+      dismissTimer = void 0;
       hide.value = true;
       closing.value = false;
     };
     onMounted(() => {
       if (props.dismissTime) {
-        setTimeout(() => {
+        dismissTimer = window.setTimeout(() => {
           close();
         }, props.dismissTime);
       }
     });
     return () => {
       return !hide.value ? createVNode(Transition, {
-        "name": "devui-alert",
+        "name": ns2.b(),
         "onAfterLeave": afterLeave
       }, {
         default: () => {
           var _a, _b;
           return [withDirectives(createVNode("div", {
             "ref": alertEl,
-            "class": `devui-alert devui-alert-${props.type} ${props.cssClass} ${closing.value ? "devui-alter-close" : null}`
-          }, [props.closeable ? createVNode("button", {
-            "type": "button",
-            "class": "devui-close",
-            "onClick": close
-          }, [createVNode(AlertCloseIcon, null, null)]) : null, props.showIcon !== false && props.type !== "simple" ? createVNode("span", {
-            "class": "devui-alert-icon"
+            "class": [ns2.b(), ns2.m(props.type), props.cssClass, closing.value && ns2.m("close"), props.center && ns2.m("center")]
+          }, [props.showIcon !== false && props.type !== "simple" ? createVNode("span", {
+            "class": ns2.e("icon-wrap")
           }, [createVNode(AlertTypeIcon, {
             "type": props.type
-          }, null)]) : null, (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, !closing.value]])];
+          }, null)]) : null, createVNode("div", {
+            "class": ns2.e("content")
+          }, [createVNode("span", null, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), props.closeable ? createVNode("div", {
+            "class": ns2.e("close-icon"),
+            "onClick": close
+          }, [createVNode(AlertCloseIcon, null, null)]) : null])]), [[vShow, !closing.value]])];
         }
       }) : null;
     };
   }
 });
-Alert.install = function(app) {
-  app.component(Alert.name, Alert);
-};
 var index = {
   title: "Alert \u8B66\u544A",
   category: "\u53CD\u9988",
-  status: "\u5DF2\u5B8C\u6210",
+  status: "100%",
   install(app) {
-    app.use(Alert);
+    app.component(Alert.name, Alert);
   }
 };
-export { Alert, index as default };
+export { Alert, alertProps, index as default };