vue-devui 1.0.0-beta.12 → 1.0.0-beta.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -18
- package/accordion/style.css +1 -1
- package/alert/index.es.js +0 -3
- package/alert/index.umd.js +1 -1
- package/alert/style.css +1 -1
- package/auto-complete/index.d.ts +7 -0
- package/auto-complete/index.es.js +1121 -0
- package/auto-complete/index.umd.js +1 -0
- package/auto-complete/package.json +7 -0
- package/auto-complete/style.css +1 -0
- package/button/index.es.js +116 -113
- package/button/index.umd.js +1 -1
- package/button/style.css +1 -1
- package/carousel/index.es.js +5 -5
- package/carousel/index.umd.js +1 -1
- package/color-picker/index.d.ts +7 -0
- package/color-picker/index.es.js +2960 -0
- package/color-picker/index.umd.js +1 -0
- package/color-picker/package.json +7 -0
- package/color-picker/style.css +1 -0
- package/comment/index.es.js +3 -2
- package/comment/index.umd.js +1 -1
- package/comment/style.css +1 -1
- package/dragdrop/index.es.js +135 -10
- package/dragdrop/index.umd.js +1 -1
- package/drawer/index.es.js +142 -30
- package/drawer/index.umd.js +1 -1
- package/form/index.es.js +59 -17
- package/form/index.umd.js +1 -1
- package/gantt/index.es.js +3 -3
- package/gantt/index.umd.js +1 -1
- package/modal/index.es.js +120 -117
- package/modal/index.umd.js +1 -1
- package/modal/style.css +1 -1
- package/nuxt/components/AutoComplete.js +3 -0
- package/nuxt/components/CarouselItem.js +3 -0
- package/nuxt/components/ColorPicker.js +3 -0
- package/nuxt/components/DrawerService.js +3 -0
- package/package.json +21 -1
- package/popover/index.es.js +13 -4
- package/popover/index.umd.js +1 -1
- package/slider/index.es.js +2 -5
- package/slider/index.umd.js +1 -1
- package/slider/style.css +1 -1
- package/splitter/index.es.js +145 -14
- package/splitter/index.umd.js +1 -1
- package/splitter/style.css +1 -1
- package/statistic/index.es.js +17 -30
- package/statistic/index.umd.js +1 -1
- package/statistic/style.css +1 -1
- package/style.css +1 -1
- package/tag/index.es.js +2 -2
- package/tag/index.umd.js +1 -1
- package/tag/style.css +1 -1
- package/time-picker/index.es.js +117 -114
- package/time-picker/index.umd.js +1 -1
- package/time-picker/style.css +1 -1
- package/toast/index.es.js +7 -4
- package/toast/index.umd.js +1 -1
- package/tooltip/index.es.js +70 -116
- package/tooltip/index.umd.js +1 -1
- package/transfer/index.es.js +570 -172
- package/transfer/index.umd.js +1 -1
- package/transfer/style.css +1 -1
- package/tree/index.es.js +984 -21
- package/tree/index.umd.js +1 -1
- package/tree/style.css +1 -1
- package/tree-select/index.es.js +129 -34
- package/tree-select/index.umd.js +1 -1
- package/tree-select/style.css +1 -1
- package/upload/index.es.js +8 -5
- package/upload/index.umd.js +1 -1
- package/vue-devui.es.js +15984 -13220
- package/vue-devui.umd.js +17 -17
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ Vue DevUI 是 Vue3 版本的 DevUI 组件库，基于 [https://github.com/devclo
|
|
|
8
8
|
|
|
9
9
|
DevUI 官方网站：[https://devui.design](https://devui.design)
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
## 当前状态: Beta
|
|
12
12
|
|
|
13
13
|
该项目还处于孵化和演进阶段，欢迎大家参与到 Vue DevUI 项目的建设中来！🎉🎉
|
|
14
14
|
|
|
@@ -20,9 +20,9 @@ DevUI 官方网站：[https://devui.design](https://devui.design)
|
|
|
20
20
|
|
|
21
21
|
[贡献指南](https://github.com/DevCloudFE/vue-devui/wiki/%E8%B4%A1%E7%8C%AE%E6%8C%87%E5%8D%97)
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
## 快速开始
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
### 1 安装依赖
|
|
26
26
|
|
|
27
27
|
```
|
|
28
28
|
yarn(推荐)
|
|
@@ -32,7 +32,7 @@ or
|
|
|
32
32
|
npm i
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
### 2 启动
|
|
36
36
|
|
|
37
37
|
```
|
|
38
38
|
yarn dev(推荐)
|
|
@@ -42,11 +42,11 @@ or
|
|
|
42
42
|
npm run dev
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
### 3 访问
|
|
46
46
|
|
|
47
47
|
[http://localhost:3000/](http://localhost:3000/)
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
### 4 生产打包
|
|
50
50
|
|
|
51
51
|
```
|
|
52
52
|
yarn build(推荐)
|
|
@@ -56,15 +56,15 @@ or
|
|
|
56
56
|
npm run build
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
## 使用 Vue DevUI
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
### 1. 安装
|
|
62
62
|
|
|
63
63
|
```
|
|
64
64
|
yarn add vue-devui
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
### 2. 全量引入
|
|
68
68
|
|
|
69
69
|
在`main.ts`文件中编写以下代码：
|
|
70
70
|
```
|
|
@@ -81,7 +81,7 @@ createApp(App)
|
|
|
81
81
|
.mount('#app')
|
|
82
82
|
```
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
### 3. 按需引入
|
|
85
85
|
|
|
86
86
|
除了全量引入，我们也支持单个组件按需引入。
|
|
87
87
|
|
|
@@ -101,7 +101,7 @@ createApp(App)
|
|
|
101
101
|
.mount('#app')
|
|
102
102
|
```
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
### 4. 配置自动按需引入`unplugin-vue-components`（推荐）
|
|
105
105
|
|
|
106
106
|
配置`unplugin-vue-components`插件可以无需引入Vue DevUI就可以直接按需使用其中的组件，具体使用方式如下：
|
|
107
107
|
|
|
@@ -126,7 +126,7 @@ export default defineConfig({
|
|
|
126
126
|
|
|
127
127
|
配置了以上插件，就可以直接在代码中使用`Vue DevUI`的组件，而无需在`main.ts`文件中引入`Vue DevUI`。
|
|
128
128
|
|
|
129
|
-
|
|
129
|
+
### 5. 使用
|
|
130
130
|
|
|
131
131
|
```
|
|
132
132
|
<template>
|
|
@@ -134,13 +134,13 @@ export default defineConfig({
|
|
|
134
134
|
</template>
|
|
135
135
|
```
|
|
136
136
|
|
|
137
|
-
|
|
137
|
+
## 图标库
|
|
138
138
|
|
|
139
139
|
图标库推荐使用[DevUI图标库](https://devui.design/icon/ruleResource)，也可以使用第三方图标库，比如：iconfont。
|
|
140
140
|
|
|
141
|
-
|
|
141
|
+
### 使用DevUI图标库
|
|
142
142
|
|
|
143
|
-
|
|
143
|
+
#### 安装
|
|
144
144
|
|
|
145
145
|
```
|
|
146
146
|
yarn add @devui-design/icons(推荐)
|
|
@@ -150,7 +150,7 @@ or
|
|
|
150
150
|
npm i @devui-design/icons
|
|
151
151
|
```
|
|
152
152
|
|
|
153
|
-
|
|
153
|
+
#### 引入
|
|
154
154
|
|
|
155
155
|
在`main.ts`文件中，编写以下代码：
|
|
156
156
|
|
|
@@ -158,12 +158,35 @@ npm i @devui-design/icons
|
|
|
158
158
|
import '@devui-design/icons/icomoon/devui-icon.css'
|
|
159
159
|
```
|
|
160
160
|
|
|
161
|
-
|
|
161
|
+
#### 使用
|
|
162
162
|
|
|
163
163
|
```
|
|
164
164
|
<d-icon name="love" color="red"></d-icon>
|
|
165
165
|
```
|
|
166
166
|
|
|
167
|
-
|
|
167
|
+
## Contributors ✨
|
|
168
|
+
|
|
169
|
+
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
|
170
|
+
|
|
171
|
+
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
172
|
+
<!-- prettier-ignore-start -->
|
|
173
|
+
<!-- markdownlint-disable -->
|
|
174
|
+
<table>
|
|
175
|
+
<tr>
|
|
176
|
+
<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>
|
|
177
|
+
<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>
|
|
178
|
+
<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>
|
|
179
|
+
<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>
|
|
180
|
+
</tr>
|
|
181
|
+
</table>
|
|
182
|
+
|
|
183
|
+
<!-- markdownlint-restore -->
|
|
184
|
+
<!-- prettier-ignore-end -->
|
|
185
|
+
|
|
186
|
+
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
187
|
+
|
|
188
|
+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
|
189
|
+
|
|
190
|
+
## License
|
|
168
191
|
|
|
169
192
|
[MIT](https://github.com/DevCloudFE/vue-devui/blob/dev/LICENSE)
|
package/accordion/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.devui-accordion-menu ol
|
|
1
|
+
@charset "UTF-8";.devui-accordion-menu ol,.devui-accordion-menu ul{margin:0!important;line-height:0!important;font-size:12px}:host{display:block}.devui-accordion-menu-item,d-accordion-item,d-accordion-item-hreflink,d-accordion-item-routerlink,.devui-accordion-list{display:block}.devui-accordion-menu{display:block;background:var(--devui-base-bg, #ffffff);width:100%;overflow-y:auto;border-radius:var(--devui-border-radius, 2px);height:100%}.devui-accordion-menu.devui-accordion-menu-normal{box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-shadow, rgba(0, 0, 0, .2))}.devui-accordion-menu>.devui-accordion-list{padding:10px 0}.devui-accordion-menu .devui-over-flow-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-accordion-submenu{background:var(--devui-base-bg, #ffffff);width:100%}.devui-accordion-item-title{display:block;height:40px;width:100%;padding:0 10px 0 20px;font-weight:400;line-height:40px;color:var(--devui-text-weak, #575d6c);background:transparent;cursor:pointer}.devui-accordion-item-title.disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-accordion-item-title.disabled>a{color:var(--devui-disabled-text, #adb0b8)}.devui-accordion-item-title:not(.disabled):hover{background:var(--devui-list-item-hover-bg, #f2f5fc);color:var(--devui-list-item-hover-text, #526ecc)}.devui-accordion-item-title:not(.disabled).devui-router-active,.devui-accordion-item-title:not(.disabled).active:not(.open){color:var(--devui-brand-active, #526ecc);font-weight:bold}.devui-accordion-item-title:not(.disabled).devui-router-active>a,.devui-accordion-item-title:not(.disabled).active:not(.open)>a{color:var(--devui-brand-active, #526ecc)}.devui-accordion-item-title>a{text-decoration:none;display:block;width:100%;color:var(--devui-text-weak, #575d6c)}.devui-accordion-item-title>a:hover{color:inherit;text-decoration:none}d-accordion-item-hreflink.devui-accordion-item-title,d-accordion-item-routerlink.devui-accordion-item-title{padding:0}d-accordion-item-hreflink.devui-accordion-item-title>a,d-accordion-item-routerlink.devui-accordion-item-title>a{padding:0 10px 0 20px}.devui-accordion-menu-item>.devui-accordion-item-title{position:relative}.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon{display:inline-block;text-indent:0;pointer-events:none;position:absolute;right:10px;top:12px;width:16px;height:16px;line-height:16px;transition:transform ease-out .3s}.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon>svg{width:16px;height:16px}.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon>svg path{fill:var(--devui-text-weak, #575d6c)}.devui-accordion-menu-item>.devui-accordion-item-title:not(.open).active svg path{fill:var(--devui-icon-fill-active, #5e7ce0)}.devui-accordion-menu-item>.devui-accordion-item-title.open>.devui-accordion-open-icon{transform:rotate(180deg);transform-origin:center}.devui-accordion-menu-item>.devui-accordion-item-title.disabled>.devui-accordion-open-icon{color:var(--devui-disabled-text, #adb0b8)}.devui-accordion-menu-item>.devui-accordion-item-title.disabled>.devui-accordion-open-icon svg path{fill:var(--devui-disabled-text, #adb0b8)}.devui-accordion-menu-item>.devui-accordion-item-title{padding-right:30px}.devui-accordion-menu-item>.devui-accordion-item-title.active:not(.open){color:var(--devui-brand-active, #526ecc);background:transparent}.devui-accordion-list .devui-accordion-menu-hidden{opacity:0;height:0px;overflow:hidden}.devui-accordion-item-title{position:relative}.devui-accordion-item-title .devui-accordion-splitter{position:absolute;display:inline-block;left:10px;width:2px;height:40px;background:var(--devui-dividing-line, #dfe1e6);vertical-align:middle}.devui-accordion-item-title .devui-accordion-splitter.devui-parent-list{background-color:transparent}.devui-accordion-item-title .devui-accordion-splitter:before{content:"";display:block;width:2px;height:18px;background:var(--devui-form-control-line-active, #5e7ce0);position:absolute;top:11px;left:0;opacity:0}.devui-accordion-item-title.devui-router-active:not(.open) .devui-accordion-splitter:before,.devui-accordion-item-title.active:not(.open) .devui-accordion-splitter:before{opacity:1}.devui-accordion-show-animate .devui-accordion-item-title{transition:font-weight var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-accordion-show-animate .devui-accordion-item-title .devui-accordion-splitter:before{transform:scaleY(0);transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-accordion-show-animate .devui-accordion-item-title.devui-router-active:not(.open) .devui-accordion-splitter:before,.devui-accordion-show-animate .devui-accordion-item-title.active:not(.open) .devui-accordion-splitter:before{transform:scaleY(1)}.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter{height:28px;top:12px}.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter:before{top:0}.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter{height:28px;top:0}.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter:before{top:initial;bottom:0}.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-item-title>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter{height:18px;top:11px}.devui-accordion-item>a{padding:0 10px 0 20px;color:var(--devui-text-weak, #575d6c);display:block;text-decoration:none;width:100%}.devui-accordion-item-title .tag-done{display:inline-block;height:18px;min-height:20px;padding:0 10px;margin-left:8px;line-height:18px;color:#fa9841;border:solid 1px #fa9841;background:var(--devui-base-bg, #ffffff);font-size:var(--devui-font-size, 12px);border-radius:var(--devui-border-radius, 2px);text-indent:0;cursor:default}
|
package/alert/index.es.js
CHANGED
|
@@ -123,9 +123,6 @@ var Alert = defineComponent({
|
|
|
123
123
|
let dismissTimer = void 0;
|
|
124
124
|
const close = (event) => {
|
|
125
125
|
dismissTimer && clearTimeout(dismissTimer);
|
|
126
|
-
const dom = alertEl.value;
|
|
127
|
-
dom.style.height = `${dom.offsetHeight}px`;
|
|
128
|
-
dom.style.height = `${dom.offsetHeight}px`;
|
|
129
126
|
closing.value = true;
|
|
130
127
|
ctx.emit("close", event);
|
|
131
128
|
};
|
package/alert/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
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"});
|
package/alert/style.css
CHANGED
|
@@ -1 +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:bold}.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{
|
|
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:bold}.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}}
|