vue-devui 1.0.0-rc.0 → 1.0.0-rc.11

package/README.md

@@ -4,151 +4,74 @@
   </a>
 </p>
 
-Vue DevUI 是 Vue3 版本的 DevUI 组件库，基于 [https://github.com/devcloudfe/ng-devui](https://github.com/devcloudfe/ng-devui)，倡导`沉浸`、`灵活`、`至简`的设计价值观。
+<h1 align="center">Vue DevUI</h1>
 
-DevUI 官方网站：[https://devui.design](https://devui.design)
+<p align="center">Vue3 component library based on <a href="https://devui.design/" target="_blank" rel="noopener noreferrer">DevUI Design</a></p>
 
-## 当前状态: Beta
+English | [简体中文](README.zh-CN.md)
 
-该项目还处于孵化和演进阶段，欢迎大家参与到 Vue DevUI 项目的建设中来！🎉🎉
+🌈 Features：
 
-通过参与 Vue DevUI 项目，你可以：
-- 🔥 学习最新的 `Vite`+`Vue3`+`TypeScript`+`JSX` 技术
-- 🎁 学习如何设计和开发组件
-- ⭐ 参与到开源社区中来
-- 🎊 结识一群热爱学习、热爱开源的朋友
+- 📦 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`.
 
-[贡献指南](https://github.com/DevCloudFE/vue-devui/wiki/%E8%B4%A1%E7%8C%AE%E6%8C%87%E5%8D%97)
+## 🔧 Usage
 
-## 快速开始
+The first step is to install vue devui:
 
-### 1 安装依赖
-
-```
-pnpm i
-```
-
-### 2 启动
-
-```
-pnpm dev
-```
-
-### 3 访问
-
-[http://localhost:3000/](http://localhost:3000/)
-
-### 4 生产打包
-
-```
-pnpm build
 ```
-
-## 使用 Vue DevUI
-
-### 1. 安装
-
-```
-pnpm i vue-devui
+npm i vue-devui
 ```
 
-### 2. 全量引入
+Then import `DevUI` in the `main.ts` file:
 
-在`main.ts`文件中编写以下代码：
-```
+```ts
 import { createApp } from 'vue'
 import App from './App.vue'
 
-// Step 1: 引入 Vue DevUI 组件库
+// Import Vue DevUI component and style
 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')
+createApp(App).use(DevUI).mount('#app')
 ```
 
-### 4. 配置自动按需引入`unplugin-vue-components`（推荐）
+Then you can use the vue devui component(such as `<d-button>`) in the `App.vue` file:
 
-配置`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. 使用
-
-```
+```vue
 <template>
-  <d-button>确定</d-button>
+  <d-button>Button</d-button>
 </template>
 ```
 
-## 图标库
+## 🖥️ Development
 
-图标库推荐使用[DevUI图标库](https://devui.design/icon/ruleResource)，也可以使用第三方图标库，比如：iconfont。
-
-### 使用DevUI图标库
-
-#### 安装
-
-```
-pnpm i @devui-design/icons
+```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/).
 
-在`main.ts`文件中，编写以下代码：
+## 🤝 Contributing
 
-```
-import '@devui-design/icons/icomoon/devui-icon.css'
-```
+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.
 
-```
-<d-icon name="love" color="red"></d-icon>
-```
+If you don't know how to start, please read our [contributing guide](https://vue-devui.github.io/contributing/)
 
-## Contributors ✨
+## ✨ Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
@@ -164,14 +87,53 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <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>
+  </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></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>
 

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,33 +114,39 @@ 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();
@@ -140,36 +170,35 @@ 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;
     };
   }
 });
-Alert.install = function(app) {
-  app.component(Alert.name, Alert);
-};
 var index = {
   title: "Alert \u8B66\u544A",
   category: "\u53CD\u9988",
   status: "100%",
   install(app) {
-    app.use(Alert);
+    app.component(Alert.name, Alert);
   }
 };
-export { Alert, index as default };
+export { Alert, alertProps, index as default };

package/alert/index.umd.js

@@ -1 +1 @@
-(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.index={},n.Vue))})(this,function(n,e){"use strict";const u=()=>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)])])]),f=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}})()]);var w="",l=e.defineComponent({name:"DAlert",props:{type:{type:String,default:"info"},cssClass:{type:String,default:""},closeable:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},dismissTime:{type:Number,default:0}},emits:["close"],setup(t,d){const s=e.ref(!1),o=e.ref(!1),h=e.ref();let r;const a=i=>{r&&clearTimeout(r),o.value=!0,d.emit("close",i)},C=()=>{r=void 0,s.value=!0,o.value=!1};return e.onMounted(()=>{t.dismissTime&&(r=window.setTimeout(()=>{a()},t.dismissTime))}),()=>s.value?null:e.createVNode(e.Transition,{name:"devui-alert",onAfterLeave:C},{default:()=>{var i,c;return[e.withDirectives(e.createVNode("div",{ref:h,class:`devui-alert devui-alert-${t.type} ${t.cssClass} ${o.value?"devui-alter-close":""}`},[t.closeable?e.createVNode("div",{class:"devui-close",onClick:a},[e.createVNode(u,null,null)]):null,t.showIcon!==!1&&t.type!=="simple"?e.createVNode("span",{class:"devui-alert-icon"},[e.createVNode(f,{type:t.type},null)]):null,(c=(i=d.slots).default)==null?void 0:c.call(i)]),[[e.vShow,!o.value]])]}})}});l.install=function(t){t.component(l.name,l)};var L={title:"Alert \u8B66\u544A",category:"\u53CD\u9988",status:"100%",install(t){t.use(l)}};n.Alert=l,n.default=L,Object.defineProperty(n,"__esModule",{value:!0}),n[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}}