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

package/README.md

@@ -1,200 +1,149 @@
-<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>
+    <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>
+  </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/alert/index.es.js

@@ -16,13 +16,37 @@ const AlertCloseIcon = () => createVNode("svg", {
 }, [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"
 }, 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,10 +70,10 @@ const AlertTypeIcon = (props) => createVNode("svg", {
         "fill": "none",
         "fill-rule": "evenodd"
       }, [createVNode("path", {
-        "class": "devui-icon-warning-outer",
+        "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"
@@ -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)])]);
@@ -110,6 +134,10 @@ const alertProps = {
   dismissTime: {
     type: Number,
     default: 0
+  },
+  center: {
+    type: Boolean,
+    default: false
   }
 };
 var alert = "";
@@ -118,6 +146,7 @@ var Alert = defineComponent({
   props: alertProps,
   emits: ["close"],
   setup(props, ctx) {
+    const ns2 = useNamespace("alert");
     const hide = ref(false);
     const closing = ref(false);
     const alertEl = ref();
@@ -141,22 +170,24 @@ var Alert = defineComponent({
     });
     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" : ""}`
-          }, [props.closeable ? createVNode("div", {
-            "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;
     };

package/alert/index.umd.js

@@ -1 +1 @@
-(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.index={},l.Vue))})(this,function(l,e){"use strict";const f=()=>e.createVNode("svg",{width:"10px",height:"10px",viewBox:"0 0 10 10",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{transform:"translate(-3.000000, -3.000000)","fill-rule":"nonzero"},[e.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"},null)])])]),L=t=>e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:`devui-icon ${t.type==="danger"?"devui-icon-error":`devui-icon-${t.type}`}`},[(()=>{switch(t.type){case"success":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{"fill-rule":"nonzero",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),e.createVNode("polygon",{"stroke-width":"0.3","fill-rule":"nonzero",points:"6.82767602 11.5282799 3 7.24668779 3.89864233 6.37912367 6.82767602 9.04910002 12.2964408 4 13 4.64144383"},null)]);case"warning":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.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"},null),e.createVNode("path",{class:"devui-icon-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"},null)]);case"info":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{"fill-rule":"nonzero"},[e.createVNode("path",{class:"devui-icon-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),e.createVNode("path",{class:"devui-icon-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)])]);case"danger":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{"fill-rule":"nonzero"},[e.createVNode("path",{class:"devui-icon-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),e.createVNode("path",{class:"devui-icon-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)])]);default:return null}})()]),d={type:{type:String,default:"info"},cssClass:{type:String,default:""},closeable:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},dismissTime:{type:Number,default:0}};var g="",i=e.defineComponent({name:"DAlert",props:d,emits:["close"],setup(t,s){const a=e.ref(!1),n=e.ref(!1),C=e.ref();let o;const c=r=>{o&&clearTimeout(o),n.value=!0,s.emit("close",r)},w=()=>{o=void 0,a.value=!0,n.value=!1};return e.onMounted(()=>{t.dismissTime&&(o=window.setTimeout(()=>{c()},t.dismissTime))}),()=>a.value?null:e.createVNode(e.Transition,{name:"devui-alert",onAfterLeave:w},{default:()=>{var r,u;return[e.withDirectives(e.createVNode("div",{ref:C,class:`devui-alert devui-alert-${t.type} ${t.cssClass} ${n.value?"devui-alter-close":""}`},[t.closeable?e.createVNode("div",{class:"devui-close",onClick:c},[e.createVNode(f,null,null)]):null,t.showIcon!==!1&&t.type!=="simple"?e.createVNode("span",{class:"devui-alert-icon"},[e.createVNode(L,{type:t.type},null)]):null,(u=(r=s.slots).default)==null?void 0:u.call(r)]),[[e.vShow,!n.value]])]}})}}),h={title:"Alert \u8B66\u544A",category:"\u53CD\u9988",status:"100%",install(t){t.component(i.name,i)}};l.Alert=i,l.alertProps=d,l.default=h,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});
+(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.index={},o.Vue))})(this,function(o,e){"use strict";const N=()=>e.createVNode("svg",{width:"10px",height:"10px",viewBox:"0 0 10 10",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{transform:"translate(-3.000000, -3.000000)","fill-rule":"nonzero"},[e.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"},null)])])]);function c(t,r,n){let s=t;return r&&(s+=`__${r}`),n&&(s+=`--${n}`),s}function h(t,r=!1){const n=r?`.devui-${t}`:`devui-${t}`;return{b:()=>c(n),e:l=>l?c(n,l):"",m:l=>l?c(n,"",l):"",em:(l,d)=>l&&d?c(n,l,d):""}}const u=h("alert"),p=t=>e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:[u.e("icon"),t.type==="danger"?u.em("icon","error"):u.em("icon",t.type)]},[(()=>{switch(t.type){case"success":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{"fill-rule":"nonzero",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),e.createVNode("polygon",{"stroke-width":"0.3","fill-rule":"nonzero",points:"6.82767602 11.5282799 3 7.24668779 3.89864233 6.37912367 6.82767602 9.04910002 12.2964408 4 13 4.64144383"},null)]);case"warning":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{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),e.createVNode("path",{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"},null)]);case"info":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{"fill-rule":"nonzero"},[e.createVNode("path",{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),e.createVNode("path",{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)])]);case"danger":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{"fill-rule":"nonzero"},[e.createVNode("path",{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),e.createVNode("path",{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)])]);default:return null}})()]),w={type:{type:String,default:"info"},cssClass:{type:String,default:""},closeable:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},dismissTime:{type:Number,default:0},center:{type:Boolean,default:!1}};var g="",L=e.defineComponent({name:"DAlert",props:w,emits:["close"],setup(t,r){const n=h("alert"),s=e.ref(!1),a=e.ref(!1),C=e.ref();let i;const l=f=>{i&&clearTimeout(i),a.value=!0,r.emit("close",f)},d=()=>{i=void 0,s.value=!0,a.value=!1};return e.onMounted(()=>{t.dismissTime&&(i=window.setTimeout(()=>{l()},t.dismissTime))}),()=>s.value?null:e.createVNode(e.Transition,{name:n.b(),onAfterLeave:d},{default:()=>{var f,m;return[e.withDirectives(e.createVNode("div",{ref:C,class:[n.b(),n.m(t.type),t.cssClass,a.value&&n.m("close"),t.center&&n.m("center")]},[t.showIcon!==!1&&t.type!=="simple"?e.createVNode("span",{class:n.e("icon-wrap")},[e.createVNode(p,{type:t.type},null)]):null,e.createVNode("div",{class:n.e("content")},[e.createVNode("span",null,[(m=(f=r.slots).default)==null?void 0:m.call(f)]),t.closeable?e.createVNode("div",{class:n.e("close-icon"),onClick:l},[e.createVNode(N,null,null)]):null])]),[[e.vShow,!a.value]])]}})}}),V={title:"Alert \u8B66\u544A",category:"\u53CD\u9988",status:"100%",install(t){t.component(L.name,L)}};o.Alert=L,o.alertProps=w,o.default=V,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});

package/alert/style.css

@@ -1 +1 @@
-.devui-alert{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px);border:1px solid transparent;padding:8px 16px;line-height:24px;border-radius:var(--devui-border-radius, 2px);word-break:normal;word-wrap:break-word}.devui-alert .devui-close{color:var(--devui-text, #252b3a);opacity:1;line-height:26px;height:24px}.devui-alert .devui-close>svg path{fill:var(--devui-light-text, #ffffff)}.devui-alert .devui-close span{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px);font-weight:700}.devui-alert.devui-alert-success{background-color:var(--devui-success-bg, #edfff9);border-color:var(--devui-success-line, #50d4ab);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert-success .devui-close>svg path{fill:var(--devui-success-line, #50d4ab)}.devui-alert.devui-alert-info{background-color:var(--devui-info-bg, #f2f5fc);border-color:var(--devui-info-line, #5e7ce0);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert-info .devui-close>svg path{fill:var(--devui-info-line, #5e7ce0)}.devui-alert.devui-alert-warning{background-color:var(--devui-warning-bg, #fff3e8);border-color:var(--devui-warning-line, #fa9841);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert-warning .devui-close>svg path{fill:var(--devui-warning-line, #fa9841)}.devui-alert.devui-alert-danger{background-color:var(--devui-danger-bg, #ffeeed);border-color:var(--devui-danger-line, #f66f6a);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert-danger .devui-close>svg path{fill:var(--devui-danger-line, #f66f6a)}.devui-alert.devui-alert-simple{border-color:var(--devui-line, #adb0b8);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert-simple .devui-close>svg path{fill:var(--devui-text-weak, #575d6c)}.devui-alert svg.devui-icon{width:16px;height:16px;vertical-align:middle;transform:translateY(-1px)}.devui-alert .devui-icon.devui-icon-success>g path{fill:var(--devui-success-line, #50d4ab)}.devui-alert .devui-icon.devui-icon-success>g polygon{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-icon.devui-icon-warning>g path.devui-icon-warning-outer{fill:var(--devui-warning-line, #fa9841)}.devui-alert .devui-icon.devui-icon-warning>g path.devui-icon-warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-icon.devui-icon-info>g path.devui-icon-info-outer{fill:var(--devui-info-line, #5e7ce0)}.devui-alert .devui-icon.devui-icon-info>g path.devui-icon-info-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-icon.devui-icon-error>g path.devui-icon-error-outer{fill:var(--devui-danger-line, #f66f6a)}.devui-alert .devui-icon.devui-icon-error>g path.devui-icon-error-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert-icon{margin-right:4px}.devui-alter-close{margin:0;padding-top:0;padding-bottom:0;transform-origin:50% 0;transition:all .3s ease-in-out}.devui-alert-leave-active{animation:alertUpOut .3s ease-in-out;animation-fill-mode:both}@keyframes alertUpOut{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(0);transform-origin:0% 0%;opacity:0}}
+.devui-alert{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);border:1px solid transparent;padding:8px 16px;line-height:24px;border-radius:var(--devui-border-radius, 4px);display:flex;align-items:center;position:relative;width:100%;overflow:hidden}.devui-alert.devui-alert--center{justify-content:center}.devui-alert .devui-alert__content{display:flex;padding:0 16px 0 4px;word-break:normal;word-wrap:break-word}.devui-alert .devui-alert__close-icon{color:var(--devui-text, #252b3a);opacity:1;line-height:26px;height:24px;position:absolute;right:16px;top:8px}.devui-alert .devui-alert__close-icon>svg path{fill:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__close-icon span{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);font-weight:700}.devui-alert.devui-alert--success{background-color:var(--devui-success-bg, #edfff9);border-color:var(--devui-success-line, #50d4ab);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--success .devui-alert__close-icon>svg path{fill:var(--devui-success-line, #50d4ab)}.devui-alert.devui-alert--info{background-color:var(--devui-info-bg, #f2f5fc);border-color:var(--devui-info-line, #5e7ce0);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--info .devui-alert__close-icon>svg path{fill:var(--devui-info-line, #5e7ce0)}.devui-alert.devui-alert--warning{background-color:var(--devui-warning-bg, #fff3e8);border-color:var(--devui-warning-line, #fa9841);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--warning .devui-alert__close-icon>svg path{fill:var(--devui-warning-line, #fa9841)}.devui-alert.devui-alert--danger{background-color:var(--devui-danger-bg, #ffeeed);border-color:var(--devui-danger-line, #f66f6a);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--danger .devui-alert__close-icon>svg path{fill:var(--devui-danger-line, #f66f6a)}.devui-alert.devui-alert--simple{border-color:var(--devui-line, #d7d8da);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--simple .devui-alert__close-icon>svg path{fill:var(--devui-text-weak, #575d6c)}.devui-alert svg.devui-alert__icon{width:16px;height:16px;vertical-align:middle;transform:translateY(-1px)}.devui-alert .devui-alert__icon.devui-alert__icon--success>g path{fill:var(--devui-success-line, #50d4ab)}.devui-alert .devui-alert__icon.devui-alert__icon--success>g polygon{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-outer{fill:var(--devui-warning-line, #fa9841)}.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-outer{fill:var(--devui-info-line, #5e7ce0)}.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-outer{fill:var(--devui-danger-line, #f66f6a)}.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert__icon-wrap{margin-right:4px}.devui-alter--close{margin:0;padding-top:0;padding-bottom:0;transform-origin:50% 0;transition:all .3s ease-in-out}.devui-alert-leave-active{animation:alertUpOut .3s ease-in-out;animation-fill-mode:both}@keyframes alertUpOut{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(0);transform-origin:0% 0%;opacity:0}}