vue-devui 1.0.0-beta.12 → 1.0.0-beta.13
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 +38 -18
- package/accordion/style.css +1 -1
- package/button/index.es.js +116 -113
- package/button/index.umd.js +1 -1
- package/button/style.css +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/dragdrop/index.es.js +135 -10
- package/dragdrop/index.umd.js +1 -1
- package/drawer/index.es.js +36 -3
- package/drawer/index.umd.js +1 -1
- package/form/index.es.js +18 -5
- 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/ColorPicker.js +3 -0
- package/nuxt/components/DrawerService.js +3 -0
- package/package.json +1 -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 +191 -14
- package/splitter/index.umd.js +1 -1
- package/splitter/style.css +1 -1
- package/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/transfer/index.es.js +211 -8
- package/transfer/index.umd.js +1 -1
- package/transfer/style.css +1 -1
- package/upload/index.es.js +8 -5
- package/upload/index.umd.js +1 -1
- package/vue-devui.es.js +11427 -9720
- package/vue-devui.umd.js +14 -14
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,32 @@ 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
|
+
</tr>
|
|
178
|
+
</table>
|
|
179
|
+
|
|
180
|
+
<!-- markdownlint-restore -->
|
|
181
|
+
<!-- prettier-ignore-end -->
|
|
182
|
+
|
|
183
|
+
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
184
|
+
|
|
185
|
+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
|
186
|
+
|
|
187
|
+
## License
|
|
168
188
|
|
|
169
189
|
[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/button/index.es.js
CHANGED
|
@@ -18,7 +18,7 @@ var __publicField = (obj, key, value) => {
|
|
|
18
18
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
19
19
|
return value;
|
|
20
20
|
};
|
|
21
|
-
import { defineComponent, createVNode, ref,
|
|
21
|
+
import { defineComponent, createVNode, ref, h, render, computed, mergeProps, withDirectives, resolveDirective } from "vue";
|
|
22
22
|
var Icon = defineComponent({
|
|
23
23
|
name: "DIcon",
|
|
24
24
|
props: {
|
|
@@ -68,118 +68,6 @@ var Icon = defineComponent({
|
|
|
68
68
|
Icon.install = function(app) {
|
|
69
69
|
app.component(Icon.name, Icon);
|
|
70
70
|
};
|
|
71
|
-
const buttonProps = {
|
|
72
|
-
type: {
|
|
73
|
-
type: String,
|
|
74
|
-
default: "button"
|
|
75
|
-
},
|
|
76
|
-
btnStyle: {
|
|
77
|
-
type: String,
|
|
78
|
-
default: "primary"
|
|
79
|
-
},
|
|
80
|
-
size: {
|
|
81
|
-
type: String,
|
|
82
|
-
default: "md"
|
|
83
|
-
},
|
|
84
|
-
position: {
|
|
85
|
-
type: String,
|
|
86
|
-
default: "default"
|
|
87
|
-
},
|
|
88
|
-
bordered: {
|
|
89
|
-
type: Boolean,
|
|
90
|
-
default: false
|
|
91
|
-
},
|
|
92
|
-
icon: {
|
|
93
|
-
type: String,
|
|
94
|
-
default: ""
|
|
95
|
-
},
|
|
96
|
-
showLoading: {
|
|
97
|
-
type: Boolean,
|
|
98
|
-
default: false
|
|
99
|
-
},
|
|
100
|
-
width: {
|
|
101
|
-
type: String
|
|
102
|
-
},
|
|
103
|
-
disabled: {
|
|
104
|
-
type: Boolean,
|
|
105
|
-
default: false
|
|
106
|
-
},
|
|
107
|
-
autofocus: {
|
|
108
|
-
type: Boolean,
|
|
109
|
-
default: false
|
|
110
|
-
},
|
|
111
|
-
onClick: {
|
|
112
|
-
type: Function
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
var button = "";
|
|
116
|
-
var Button = defineComponent({
|
|
117
|
-
name: "DButton",
|
|
118
|
-
props: buttonProps,
|
|
119
|
-
setup(props, ctx) {
|
|
120
|
-
const buttonContent = ref(null);
|
|
121
|
-
const onClick = (e) => {
|
|
122
|
-
var _a;
|
|
123
|
-
if (props.showLoading) {
|
|
124
|
-
return;
|
|
125
|
-
}
|
|
126
|
-
(_a = props.onClick) == null ? void 0 : _a.call(props, e);
|
|
127
|
-
};
|
|
128
|
-
const hasContent = computed(() => ctx.slots.default);
|
|
129
|
-
const btnClass = computed(() => {
|
|
130
|
-
const {
|
|
131
|
-
btnStyle,
|
|
132
|
-
size,
|
|
133
|
-
position,
|
|
134
|
-
bordered,
|
|
135
|
-
icon
|
|
136
|
-
} = props;
|
|
137
|
-
const origin = `devui-btn devui-btn-${btnStyle} devui-btn-${size} devui-btn-${position}`;
|
|
138
|
-
const borderedClass = bordered ? "bordered" : "";
|
|
139
|
-
const btnIcon = !!icon && !hasContent.value && btnStyle !== "primary" ? "d-btn-icon" : "";
|
|
140
|
-
const btnIconWrap = !!icon ? "d-btn-icon-wrap" : "";
|
|
141
|
-
return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
|
|
142
|
-
});
|
|
143
|
-
const iconClass = computed(() => {
|
|
144
|
-
if (!props.icon) {
|
|
145
|
-
return;
|
|
146
|
-
}
|
|
147
|
-
const origin = "devui-icon-fix icon";
|
|
148
|
-
if (hasContent.value) {
|
|
149
|
-
return `${origin} clear-right-5`;
|
|
150
|
-
} else {
|
|
151
|
-
return origin;
|
|
152
|
-
}
|
|
153
|
-
});
|
|
154
|
-
return () => {
|
|
155
|
-
var _a, _b;
|
|
156
|
-
const {
|
|
157
|
-
icon,
|
|
158
|
-
type,
|
|
159
|
-
disabled,
|
|
160
|
-
showLoading,
|
|
161
|
-
width
|
|
162
|
-
} = props;
|
|
163
|
-
return withDirectives(createVNode("div", mergeProps({
|
|
164
|
-
"class": "devui-btn-host"
|
|
165
|
-
}, ctx.attrs), [createVNode("button", {
|
|
166
|
-
"class": btnClass.value,
|
|
167
|
-
"type": type,
|
|
168
|
-
"disabled": disabled,
|
|
169
|
-
"style": {
|
|
170
|
-
width
|
|
171
|
-
},
|
|
172
|
-
"onClick": onClick
|
|
173
|
-
}, [!!icon ? createVNode(Icon, {
|
|
174
|
-
"name": icon,
|
|
175
|
-
"class": iconClass.value
|
|
176
|
-
}, null) : null, createVNode("span", {
|
|
177
|
-
"class": "button-content",
|
|
178
|
-
"ref": buttonContent
|
|
179
|
-
}, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])])]), [[resolveDirective("dLoading"), showLoading]]);
|
|
180
|
-
};
|
|
181
|
-
}
|
|
182
|
-
});
|
|
183
71
|
class View {
|
|
184
72
|
constructor() {
|
|
185
73
|
__publicField(this, "top", "50%");
|
|
@@ -376,6 +264,121 @@ const loadingDirective = {
|
|
|
376
264
|
toggleLoading(el, binding);
|
|
377
265
|
}
|
|
378
266
|
};
|
|
267
|
+
const buttonProps = {
|
|
268
|
+
type: {
|
|
269
|
+
type: String,
|
|
270
|
+
default: "button"
|
|
271
|
+
},
|
|
272
|
+
variant: {
|
|
273
|
+
type: String,
|
|
274
|
+
default: "primary"
|
|
275
|
+
},
|
|
276
|
+
size: {
|
|
277
|
+
type: String,
|
|
278
|
+
default: "md"
|
|
279
|
+
},
|
|
280
|
+
position: {
|
|
281
|
+
type: String,
|
|
282
|
+
default: "default"
|
|
283
|
+
},
|
|
284
|
+
bordered: {
|
|
285
|
+
type: Boolean,
|
|
286
|
+
default: false
|
|
287
|
+
},
|
|
288
|
+
icon: {
|
|
289
|
+
type: String,
|
|
290
|
+
default: ""
|
|
291
|
+
},
|
|
292
|
+
showLoading: {
|
|
293
|
+
type: Boolean,
|
|
294
|
+
default: false
|
|
295
|
+
},
|
|
296
|
+
width: {
|
|
297
|
+
type: String
|
|
298
|
+
},
|
|
299
|
+
disabled: {
|
|
300
|
+
type: Boolean,
|
|
301
|
+
default: false
|
|
302
|
+
},
|
|
303
|
+
autofocus: {
|
|
304
|
+
type: Boolean,
|
|
305
|
+
default: false
|
|
306
|
+
},
|
|
307
|
+
onClick: {
|
|
308
|
+
type: Function
|
|
309
|
+
}
|
|
310
|
+
};
|
|
311
|
+
var button = "";
|
|
312
|
+
var Button = defineComponent({
|
|
313
|
+
name: "DButton",
|
|
314
|
+
directives: {
|
|
315
|
+
devLoading: loadingDirective
|
|
316
|
+
},
|
|
317
|
+
props: buttonProps,
|
|
318
|
+
setup(props, ctx) {
|
|
319
|
+
const buttonContent = ref(null);
|
|
320
|
+
const onClick = (e) => {
|
|
321
|
+
var _a;
|
|
322
|
+
if (props.showLoading) {
|
|
323
|
+
return;
|
|
324
|
+
}
|
|
325
|
+
(_a = props.onClick) == null ? void 0 : _a.call(props, e);
|
|
326
|
+
};
|
|
327
|
+
const hasContent = computed(() => ctx.slots.default);
|
|
328
|
+
const btnClass = computed(() => {
|
|
329
|
+
const {
|
|
330
|
+
variant,
|
|
331
|
+
size,
|
|
332
|
+
position,
|
|
333
|
+
bordered,
|
|
334
|
+
icon
|
|
335
|
+
} = props;
|
|
336
|
+
const origin = `devui-btn devui-btn-${variant} devui-btn-${size} devui-btn-${position}`;
|
|
337
|
+
const borderedClass = bordered ? "bordered" : "";
|
|
338
|
+
const btnIcon = !!icon && !hasContent.value && variant !== "primary" ? "d-btn-icon" : "";
|
|
339
|
+
const btnIconWrap = !!icon ? "d-btn-icon-wrap" : "";
|
|
340
|
+
return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
|
|
341
|
+
});
|
|
342
|
+
const iconClass = computed(() => {
|
|
343
|
+
if (!props.icon) {
|
|
344
|
+
return;
|
|
345
|
+
}
|
|
346
|
+
const origin = "devui-icon-fix icon";
|
|
347
|
+
if (hasContent.value) {
|
|
348
|
+
return `${origin} clear-right-5`;
|
|
349
|
+
} else {
|
|
350
|
+
return origin;
|
|
351
|
+
}
|
|
352
|
+
});
|
|
353
|
+
return () => {
|
|
354
|
+
var _a, _b;
|
|
355
|
+
const {
|
|
356
|
+
icon,
|
|
357
|
+
type,
|
|
358
|
+
disabled,
|
|
359
|
+
showLoading,
|
|
360
|
+
width
|
|
361
|
+
} = props;
|
|
362
|
+
return createVNode("div", mergeProps({
|
|
363
|
+
"class": "devui-btn-host"
|
|
364
|
+
}, ctx.attrs), [withDirectives(createVNode("button", {
|
|
365
|
+
"class": btnClass.value,
|
|
366
|
+
"type": type,
|
|
367
|
+
"disabled": disabled,
|
|
368
|
+
"style": {
|
|
369
|
+
width
|
|
370
|
+
},
|
|
371
|
+
"onClick": onClick
|
|
372
|
+
}, [!!icon ? createVNode(Icon, {
|
|
373
|
+
"name": icon,
|
|
374
|
+
"class": iconClass.value
|
|
375
|
+
}, null) : null, createVNode("span", {
|
|
376
|
+
"class": "button-content",
|
|
377
|
+
"ref": buttonContent
|
|
378
|
+
}, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("devLoading"), showLoading]])]);
|
|
379
|
+
};
|
|
380
|
+
}
|
|
381
|
+
});
|
|
379
382
|
defineComponent(Loading);
|
|
380
383
|
Button.install = function(app) {
|
|
381
384
|
app.directive("dLoading", loadingDirective);
|
package/button/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var F=Object.defineProperty;var
|
|
1
|
+
var F=Object.defineProperty;var $=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var S=(i,t,r)=>t in i?F(i,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[t]=r,u=(i,t)=>{for(var r in t||(t={}))W.call(t,r)&&S(i,r,t[r]);if($)for(var r of $(t))q.call(t,r)&&S(i,r,t[r]);return i};var l=(i,t,r)=>(S(i,typeof t!="symbol"?t+"":t,r),r);(function(i,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis!="undefined"?globalThis:i||self,t(i.index={},i.Vue))})(this,function(i,t){"use strict";var r=t.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(e){return u({},e)},render(){const{name:e,size:n,color:o,classPrefix:s}=this;return/^((https?):)?\/\//.test(e)?t.createVNode("img",{src:e,alt:e.split("/")[e.split("/").length-1],style:{width:n,verticalAlign:"text-bottom"}},null):t.createVNode("i",{class:`${s} ${s}-${e}`,style:{fontSize:n,color:o}},null)}});r.install=function(e){e.component(r.name,r)};class V{constructor(){l(this,"top","50%");l(this,"left","50%")}}const I={message:String,backdrop:Boolean,view:{type:Object,default:()=>new V},zIndex:Number,isFull:{type:Boolean,default:!1}};class O{constructor(){l(this,"target");l(this,"message");l(this,"loadingTemplateRef");l(this,"backdrop",!0);l(this,"positionType","relative");l(this,"view",new V);l(this,"zIndex")}}var Y="",C=t.defineComponent({name:"DLoading",inheritAttrs:!1,props:I,setup(e){const n={top:e.view.top,left:e.view.left,zIndex:e.zIndex};e.message||(n.background="none");const o=t.ref(!1);return{style:n,isShow:o,open:()=>{o.value=!0},close:()=>{o.value=!1}}},render(){var g;const{isShow:e,isFull:n,backdrop:o,style:s,message:a,$slots:m}=this;return e&&t.createVNode("div",{class:["devui-loading-contanier",n?"devui-loading--full":""]},[((g=m.default)==null?void 0:g.call(m))||t.createVNode("div",{class:"devui-loading-wrapper"},[o?t.createVNode("div",{class:"devui-loading-mask"},null):null,t.createVNode("div",{style:s,class:"devui-loading-area"},[t.createVNode("div",{class:"devui-busy-default-spinner"},[t.createVNode("div",{class:"devui-loading-bar1"},null),t.createVNode("div",{class:"devui-loading-bar2"},null),t.createVNode("div",{class:"devui-loading-bar3"},null),t.createVNode("div",{class:"devui-loading-bar4"},null)]),a?t.createVNode("span",{class:"devui-loading-text"},[a]):null])])])}});const P=Symbol("dev_component_container");function E(e,n,o=null){const s=t.h(e,u({},n),o),a=document.createElement("div");return s[P]=a,t.render(s,a),s.component}function j(e){t.render(null,e==null?void 0:e.vnode[P])}const D=t.defineComponent(C),f=new WeakSet,v=e=>{if(!e)return!0;if(Array.isArray(e))return e.length===0;if(e instanceof Set||e instanceof Map)return e.size===0;if(e instanceof Promise)return!1;if(typeof e=="object")try{return Object.keys(e).length===0}catch{return!1}return!1},k=e=>Object.prototype.toString.call(e).slice(8,-1).toLowerCase(),_=e=>{switch(k(e)){case"promise":return[e];case"array":return e.some(o=>k(o)!=="promise")?(console.error(new TypeError("Binding values should all be of type Promise")),"error"):e;default:return!1}},A=e=>{f.delete(e),e.instance.proxy.close(),j(e.instance)},x=(e,n)=>{if(n.value){const o=_(n.value);if(o==="error")return;e.instance.proxy.open(),e.appendChild(e.mask),f.add(e),o&&Promise.all(o).catch(s=>{console.error(new Error("Promise handling errors"),s)}).finally(()=>{A(e)})}else A(e)},B=e=>{e.removeAttribute("zindex"),e.removeAttribute("positiontype"),e.removeAttribute("backdrop"),e.removeAttribute("message"),e.removeAttribute("view"),e.removeAttribute("loadingtemplateref")},L=(e,n)=>{const o=u(u({},new O),n),s=o.loadingTemplateRef,a=E(D,u({},o),s?()=>s:null);e.style.position=o.positionType,e.options=o,e.instance=a,e.mask=a.proxy.$el},T={mounted:function(e,n,o){L(e,o.props),B(e),!v(n.value)&&x(e,n)},updated:function(e,n,o){!v(n.value)&&f.has(e)||v(n.value)&&!f.has(e)||(!f.has(e)&&L(e,o.props),B(e),x(e,n))}},z={type:{type:String,default:"button"},variant:{type:String,default:"primary"},size:{type:String,default:"md"},position:{type:String,default:"default"},bordered:{type:Boolean,default:!1},icon:{type:String,default:""},showLoading:{type:Boolean,default:!1},width:{type:String},disabled:{type:Boolean,default:!1},autofocus:{type:Boolean,default:!1},onClick:{type:Function}};var G="",p=t.defineComponent({name:"DButton",directives:{devLoading:T},props:z,setup(e,n){const o=t.ref(null),s=d=>{var c;e.showLoading||(c=e.onClick)==null||c.call(e,d)},a=t.computed(()=>n.slots.default),m=t.computed(()=>{const{variant:d,size:c,position:w,bordered:N,icon:y}=e,b=`devui-btn devui-btn-${d} devui-btn-${c} devui-btn-${w}`,h=N?"bordered":"",R=!!y&&!a.value&&d!=="primary"?"d-btn-icon":"";return`${b} ${h} ${R} ${y?"d-btn-icon-wrap":""}`}),g=t.computed(()=>{if(!e.icon)return;const d="devui-icon-fix icon";return a.value?`${d} clear-right-5`:d});return()=>{var b,h;const{icon:d,type:c,disabled:w,showLoading:N,width:y}=e;return t.createVNode("div",t.mergeProps({class:"devui-btn-host"},n.attrs),[t.withDirectives(t.createVNode("button",{class:m.value,type:c,disabled:w,style:{width:y},onClick:s},[d?t.createVNode(r,{name:d,class:g.value},null):null,t.createVNode("span",{class:"button-content",ref:o},[(h=(b=n.slots).default)==null?void 0:h.call(b)])]),[[t.resolveDirective("devLoading"),N]])])}}});t.defineComponent(C),p.install=function(e){e.directive("dLoading",T),e.component(p.name,p)};var M={title:"Button \u6309\u94AE",category:"\u901A\u7528",status:"100%",install(e){e.use(p)}};i.Button=p,i.buttonProps=z,i.default=M,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
|
package/button/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:normal;line-height:1.5}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:bold;line-height:1.5}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:bold;line-height:1.5}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:bold;line-height:1.5}.devui-btn{padding:3px 20px;font-size:var(--devui-font-size-md, 12px);height:28px;line-height:1.5;border-radius:var(--devui-border-radius, 2px);border-width:1px;border-color:transparent;background-color:transparent}.devui-btn.devui-btn-text{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-text-dark{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-common{color:var(--devui-text, #252b3a);min-width:64px;background-color:var(--devui-block, #ffffff);border-color:var(--devui-line, #adb0b8)}.devui-btn.devui-btn-stress{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-primary{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-danger{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-contrast, #f66f6a)}.devui-btn.devui-btn-success{color:var(--devui-dark-text, #252b3a);min-width:64px;background-color:var(--devui-success, #50d4ab)}.devui-btn.devui-btn-warning{color:var(--devui-dark-text, #252b3a);min-width:64px;background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-left{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-btn.devui-btn-right{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-btn.devui-btn-xs{padding:1px 5px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:48px}.devui-btn.devui-btn-sm{padding:1px 15px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:56px}.devui-btn.devui-btn-lg{padding:5px 23px;height:32px;font-size:var(--devui-font-size-lg, 14px);min-width:72px}.devui-btn.devui-btn-text:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-common:hover{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:focus{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:active{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-stress:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-primary:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-danger:hover{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:focus{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:active{background-color:var(--devui-contrast-active, #de504e)}.devui-btn.devui-btn-success:hover{background-color:var(--devui-warning, #50d4ab)}.devui-btn.devui-btn-success:focus{background-color:var(--devui-warning, #50d4ab)}.devui-btn.devui-btn-success:active{background-color:var(--devui-warning, #50d4ab)}.devui-btn.devui-btn-warning:hover{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-warning:focus{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-warning:active{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-common:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-primary:disabled{color:var(--devui-light-text, #ffffff);background:var(--devui-primary-disabled, #beccfa);border:none}.devui-btn.devui-btn-danger:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-text-dark:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.devui-btn-text:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.bordered.devui-btn-common{color:var(--devui-text, #252b3a);border-color:transparent}.devui-btn.bordered.devui-btn-common:hover,.devui-btn.bordered.devui-btn-common:focus{border-color:var(--devui-primary-hover, #7693f5)}.devui-btn.bordered.devui-btn-common:active{border-color:var(--devui-primary-active, #344899)}.devui-btn.bordered.devui-btn-stress,.devui-btn.bordered.devui-btn-primary{border-color:var(--devui-brand, #5e7ce0);color:var(--devui-brand, #5e7ce0);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-success{border-color:var(--devui-success, #50d4ab);color:var(--devui-success, #50d4ab);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-warning{border-color:var(--devui-warning, #fac20a);color:var(--devui-warning, #fac20a);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-danger{border-color:var(--devui-danger, #f66f6a);color:var(--devui-danger, #f66f6a);background-color:var(--devui-block, #ffffff)}.devui-btn.d-btn-icon:hover,.devui-btn.d-btn-icon:focus{border:1px solid var(--devui-list-item-hover-bg, #f2f5fc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-btn.d-btn-icon:disabled{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap{color:var(--devui-text, #252b3a)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-loading .devui-loading-default-spinner div{background-color:var(--devui-text, #252b3a)}.devui-btn-host{display:inline-block}.devui-btn{transition:background-color .2s;border-style:solid;white-space:nowrap;display:flex;align-items:center;justify-content:center}.devui-btn:disabled,.devui-btn[disabled]{cursor:not-allowed}.devui-btn.d-btn-icon{padding:7px 8px;line-height:1em;border:1px solid transparent}.devui-btn.d-btn-icon.devui-btn-xs,.devui-btn.d-btn-icon.devui-btn-sm{padding:5px}.devui-btn.d-btn-icon.devui-btn-xs{min-width:24px}.devui-btn.d-btn-icon.devui-btn-sm{min-width:24px}.devui-btn.d-btn-icon.devui-btn-lg{min-width:32px}.devui-btn.d-btn-icon.devui-btn-lg .icon{font-size:var(--devui-font-size-icon, 16px)}.devui-btn:not(.d-btn-icon) .icon-fix{font-size:var(--devui-font-size-icon, 16px)}.devui-icon-fix{position:relative;font-size:var(--devui-font-size, 12px)}.devui-btn.devui-btn-common:not(:disabled) .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn.devui-btn-common:not(:disabled):hover .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):active .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):focus .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.button-content{display:inline-block;position:relative}.clear-right-5{margin-right:5px}@keyframes devui-busy-spinner-anim{0%{transform:rotate(0) scale(1)}50%{transform:rotate(135deg) scale(1.5)}to{transform:rotate(270deg) scale(1)}}.devui-loading-mask{position:absolute;left:0;right:0;bottom:0;top:0;background-color:var(--devui-line, #adb0b8);opacity:.3}.devui-loading-wrapper{text-align:center}.devui-loading--full{position:fixed;left:0;right:0;bottom:0;top:0;z-index:9999}.devui-loading--hidden{overflow:hidden}.devui-loading-text{margin-left:10px}.devui-loading-area{position:absolute;transform:translate(-50%,-50%);padding:12px 14px;background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px)}.devui-busy-default-spinner{position:relative;display:inline-block;width:15px;height:15px;animation:devui-busy-spinner-anim 1s linear infinite}.devui-busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:6px;height:6px;border-radius:50%}.devui-busy-default-spinner .devui-loading-bar1{top:0;left:0;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-busy-default-spinner .devui-loading-bar2{top:0;left:9px;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-busy-default-spinner .devui-loading-bar3{top:9px;left:0;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-busy-default-spinner .devui-loading-bar4{top:9px;left:9px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}
|
|
1
|
+
@keyframes devui-busy-spinner-anim{0%{transform:rotate(0) scale(1)}50%{transform:rotate(135deg) scale(1.5)}to{transform:rotate(270deg) scale(1)}}.devui-loading-mask{position:absolute;left:0;right:0;bottom:0;top:0;background-color:var(--devui-line, #adb0b8);opacity:.3}.devui-loading-wrapper{text-align:center}.devui-loading--full{position:fixed;left:0;right:0;bottom:0;top:0;z-index:9999}.devui-loading--hidden{overflow:hidden}.devui-loading-text{margin-left:10px}.devui-loading-area{position:absolute;transform:translate(-50%,-50%);padding:12px 14px;background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px)}.devui-busy-default-spinner{position:relative;display:inline-block;width:15px;height:15px;animation:devui-busy-spinner-anim 1s linear infinite}.devui-busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:6px;height:6px;border-radius:50%}.devui-busy-default-spinner .devui-loading-bar1{top:0;left:0;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-busy-default-spinner .devui-loading-bar2{top:0;left:9px;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-busy-default-spinner .devui-loading-bar3{top:9px;left:0;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-busy-default-spinner .devui-loading-bar4{top:9px;left:9px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:normal;line-height:1.5}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:bold;line-height:1.5}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:bold;line-height:1.5}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:bold;line-height:1.5}.devui-btn{padding:3px 20px;font-size:var(--devui-font-size-md, 12px);height:28px;line-height:1.5;border-radius:var(--devui-border-radius, 2px);border-width:1px;border-color:transparent;background-color:transparent}.devui-btn.devui-btn-text{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-text-dark{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-common{color:var(--devui-text, #252b3a);min-width:64px;background-color:var(--devui-block, #ffffff);border-color:var(--devui-line, #adb0b8)}.devui-btn.devui-btn-stress{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-primary{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-danger{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-contrast, #f66f6a)}.devui-btn.devui-btn-success{color:var(--devui-dark-text, #252b3a);min-width:64px;background-color:var(--devui-success, #50d4ab)}.devui-btn.devui-btn-warning{color:var(--devui-dark-text, #252b3a);min-width:64px;background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-left{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-btn.devui-btn-right{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-btn.devui-btn-xs{padding:1px 5px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:48px}.devui-btn.devui-btn-sm{padding:1px 15px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:56px}.devui-btn.devui-btn-lg{padding:5px 23px;height:32px;font-size:var(--devui-font-size-lg, 14px);min-width:72px}.devui-btn.devui-btn-text:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-common:hover{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:focus{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:active{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-stress:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-primary:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-danger:hover{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:focus{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:active{background-color:var(--devui-contrast-active, #de504e)}.devui-btn.devui-btn-success:hover{background-color:var(--devui-success, #50d4ab)}.devui-btn.devui-btn-success:focus{background-color:var(--devui-success, #50d4ab)}.devui-btn.devui-btn-success:active{background-color:var(--devui-success, #50d4ab)}.devui-btn.devui-btn-warning:hover{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-warning:focus{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-warning:active{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-common:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-primary:disabled{color:var(--devui-light-text, #ffffff);background:var(--devui-primary-disabled, #beccfa);border:none}.devui-btn.devui-btn-danger:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-text-dark:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.devui-btn-text:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.bordered.devui-btn-common{color:var(--devui-text, #252b3a);border-color:transparent}.devui-btn.bordered.devui-btn-common:hover,.devui-btn.bordered.devui-btn-common:focus{border-color:var(--devui-primary-hover, #7693f5)}.devui-btn.bordered.devui-btn-common:active{border-color:var(--devui-primary-active, #344899)}.devui-btn.bordered.devui-btn-stress,.devui-btn.bordered.devui-btn-primary{border-color:var(--devui-brand, #5e7ce0);color:var(--devui-brand, #5e7ce0);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-success{border-color:var(--devui-success, #50d4ab);color:var(--devui-success, #50d4ab);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-warning{border-color:var(--devui-warning, #fac20a);color:var(--devui-warning, #fac20a);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-danger{border-color:var(--devui-danger, #f66f6a);color:var(--devui-danger, #f66f6a);background-color:var(--devui-block, #ffffff)}.devui-btn.d-btn-icon:hover,.devui-btn.d-btn-icon:focus{border:1px solid var(--devui-list-item-hover-bg, #f2f5fc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-btn.d-btn-icon:disabled{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap{color:var(--devui-text, #252b3a)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-loading .devui-loading-default-spinner div{background-color:var(--devui-text, #252b3a)}.devui-btn-host{display:inline-block}.devui-btn{transition:background-color .2s;border-style:solid;white-space:nowrap;display:flex;align-items:center;justify-content:center}.devui-btn:disabled,.devui-btn[disabled]{cursor:not-allowed}.devui-btn.d-btn-icon{padding:7px 8px;line-height:1em;border:1px solid transparent}.devui-btn.d-btn-icon.devui-btn-xs,.devui-btn.d-btn-icon.devui-btn-sm{padding:5px}.devui-btn.d-btn-icon.devui-btn-xs{min-width:24px}.devui-btn.d-btn-icon.devui-btn-sm{min-width:24px}.devui-btn.d-btn-icon.devui-btn-lg{min-width:32px}.devui-btn.d-btn-icon.devui-btn-lg .icon{font-size:var(--devui-font-size-icon, 16px)}.devui-btn:not(.d-btn-icon) .icon-fix{font-size:var(--devui-font-size-icon, 16px)}.devui-icon-fix{position:relative;font-size:var(--devui-font-size, 12px)}.devui-btn.devui-btn-common:not(:disabled) .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn.devui-btn-common:not(:disabled):hover .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):active .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):focus .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.button-content{display:inline-block;position:relative}.clear-right-5{margin-right:5px}
|