vdesign-ui 0.2.12 → 0.2.14
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 +78 -78
- package/dist/components/actionbar/index.js +8 -8
- package/dist/components/actionbar/index.vue +39 -39
- package/dist/components/actionbar/style.less +44 -44
- package/dist/components/actionbar-cell/index.js +7 -7
- package/dist/components/actionbar-cell/index.vue +38 -38
- package/dist/components/actions/index.js +6 -6
- package/dist/components/actions/index.vue +77 -76
- package/dist/components/actions/style.less +109 -109
- package/dist/components/actions-cell/index.js +6 -6
- package/dist/components/actions-cell/index.vue +94 -94
- package/dist/components/actions-cell/style.less +38 -38
- package/dist/components/activityviews/index.js +8 -8
- package/dist/components/activityviews/index.vue +192 -192
- package/dist/components/activityviews/style.less +151 -151
- package/dist/components/badge/index.js +8 -8
- package/dist/components/badge/index.vue +49 -49
- package/dist/components/badge/style.less +54 -54
- package/dist/components/button/index.js +8 -8
- package/dist/components/button/index.vue +93 -93
- package/dist/components/button/style.less +558 -558
- package/dist/components/calendar/index-element.vue +84 -84
- package/dist/components/calendar/index.js +7 -7
- package/dist/components/calendar/index.vue +52 -52
- package/dist/components/calendar/style.less +138 -138
- package/dist/components/checkbox/index.js +8 -8
- package/dist/components/checkbox/index.vue +161 -161
- package/dist/components/checkbox/style.less +288 -288
- package/dist/components/checkbox-group/index.js +7 -7
- package/dist/components/checkbox-group/index.vue +69 -69
- package/dist/components/common/state/index.vue +33 -33
- package/dist/components/common/state/style.less +47 -47
- package/dist/components/data-list/index.js +10 -10
- package/dist/components/data-list/index.vue +19 -19
- package/dist/components/data-list/style.less +623 -623
- package/dist/components/datetime-picker/index.js +7 -7
- package/dist/components/datetime-picker/index.vue +37 -37
- package/dist/components/datetime-picker/style.less +23 -23
- package/dist/components/dialog/index.js +8 -8
- package/dist/components/dialog/index.vue +164 -164
- package/dist/components/dialog/overlay-manager.js +18 -18
- package/dist/components/dialog/style.less +138 -138
- package/dist/components/divider/index.js +8 -8
- package/dist/components/divider/index.vue +54 -54
- package/dist/components/divider/style.less +92 -92
- package/dist/components/dropdown/index.js +8 -8
- package/dist/components/dropdown/index.vue +218 -218
- package/dist/components/dropdown/style.less +432 -432
- package/dist/components/empty/index.js +8 -8
- package/dist/components/empty/index.vue +138 -138
- package/dist/components/empty/style.less +60 -60
- package/dist/components/footer/index.js +6 -6
- package/dist/components/footer/index.vue +33 -33
- package/dist/components/footer/style.less +20 -20
- package/dist/components/footnav/index.js +6 -6
- package/dist/components/footnav/index.vue +93 -93
- package/dist/components/footnav/style.less +22 -22
- package/dist/components/footnav-item/index.js +6 -6
- package/dist/components/footnav-item/index.vue +50 -50
- package/dist/components/footnav-item/style.less +39 -39
- package/dist/components/form/index.js +6 -6
- package/dist/components/form/index.vue +12 -12
- package/dist/components/headnav/index.js +6 -6
- package/dist/components/headnav/index.vue +185 -185
- package/dist/components/headnav/style.less +231 -231
- package/dist/components/icon/font/iconfont.css +163 -163
- package/dist/components/icon/font/iconfont.js +5 -5
- package/dist/components/icon/index.js +9 -9
- package/dist/components/icon/index.vue +96 -96
- package/dist/components/icon/style.less +44 -44
- package/dist/components/input/calcTextareaHeight.js +162 -162
- package/dist/components/input/index.js +8 -8
- package/dist/components/input/index.vue +345 -345
- package/dist/components/input/style.less +470 -470
- package/dist/components/list/index.js +8 -8
- package/dist/components/list/index.vue +152 -152
- package/dist/components/list/style.less +213 -213
- package/dist/components/loading/index.js +6 -6
- package/dist/components/loading/index.vue +68 -68
- package/dist/components/loading/style.less +53 -53
- package/dist/components/mixins/clickoutside.js +81 -81
- package/dist/components/mixins/dom.js +41 -41
- package/dist/components/mixins/languageMixin.js +41 -41
- package/dist/components/mixins/outlineConfigPlugin.js +45 -45
- package/dist/components/mixins/router-link.js +22 -22
- package/dist/components/mixins/themeMixin.js +43 -43
- package/dist/components/noticebar/index.js +8 -8
- package/dist/components/noticebar/index.vue +258 -258
- package/dist/components/noticebar/style.less +328 -328
- package/dist/components/overlay/index.js +8 -8
- package/dist/components/overlay/index.vue +184 -184
- package/dist/components/overlay/style.less +23 -23
- package/dist/components/pagebreak/index.js +6 -6
- package/dist/components/pagebreak/index.vue +67 -67
- package/dist/components/pagebreak/style.less +41 -41
- package/dist/components/password/index.js +8 -8
- package/dist/components/password/index.vue +60 -60
- package/dist/components/popover/index.js +8 -8
- package/dist/components/popover/index.vue +100 -100
- package/dist/components/popover/style.less +346 -346
- package/dist/components/popover/vue-popover.vue +314 -314
- package/dist/components/popup/index.js +7 -7
- package/dist/components/popup/index.vue +243 -243
- package/dist/components/radio/index.js +8 -8
- package/dist/components/radio/index.vue +184 -184
- package/dist/components/radio/style.less +293 -293
- package/dist/components/radio-group/index.js +6 -6
- package/dist/components/radio-group/index.vue +58 -58
- package/dist/components/result/index.js +8 -8
- package/dist/components/result/index.vue +73 -73
- package/dist/components/result/style.less +43 -43
- package/dist/components/search/index.js +8 -8
- package/dist/components/search/index.vue +66 -66
- package/dist/components/selector/index.js +8 -8
- package/dist/components/selector/index.vue +161 -161
- package/dist/components/selector/style.less +484 -484
- package/dist/components/skeleton/index.js +6 -6
- package/dist/components/skeleton/index.vue +207 -207
- package/dist/components/skeleton/style.less +196 -196
- package/dist/components/slider/draggable.js +49 -49
- package/dist/components/slider/index.js +6 -6
- package/dist/components/slider/index.vue +167 -167
- package/dist/components/slider/style.less +99 -99
- package/dist/components/slider/utils.js +59 -59
- package/dist/components/step/index.js +7 -7
- package/dist/components/step/index.vue +48 -48
- package/dist/components/step/style.less +66 -58
- package/dist/components/step-item/index.js +7 -7
- package/dist/components/step-item/index.vue +126 -126
- package/dist/components/step-item/style.less +399 -362
- package/dist/components/stepper/index.js +8 -8
- package/dist/components/stepper/index.vue +146 -146
- package/dist/components/style/index.vue +42 -42
- package/dist/components/switch/index.js +8 -8
- package/dist/components/switch/index.vue +72 -72
- package/dist/components/switch/style.less +56 -56
- package/dist/components/tab/index.js +7 -7
- package/dist/components/tab/index.vue +94 -94
- package/dist/components/tabs/index.js +8 -8
- package/dist/components/tabs/index.vue +292 -281
- package/dist/components/tabs/style.less +408 -408
- package/dist/components/tag/index.js +6 -6
- package/dist/components/tag/index.vue +64 -64
- package/dist/components/tag/style.less +210 -210
- package/dist/components/title/index.js +8 -8
- package/dist/components/title/index.vue +99 -99
- package/dist/components/title/style.less +187 -187
- package/dist/components/toast/index.js +97 -97
- package/dist/components/toast/index.vue +49 -49
- package/dist/components/toast/style.less +57 -57
- package/dist/components/transition/index.js +8 -8
- package/dist/components/transition/index.vue +13 -13
- package/dist/components/transition/style.less +208 -208
- package/dist/components/upload/index.js +6 -6
- package/dist/components/upload/index.vue +106 -106
- package/dist/components/upload/style.less +147 -147
- package/dist/components/utils/assist.js +34 -34
- package/dist/components/utils/env.js +21 -21
- package/dist/locale/ar.js +97 -97
- package/dist/locale/en.js +97 -97
- package/dist/locale/zh.js +97 -97
- package/dist/token.css +23 -17
- package/dist/vdesign-ui.common.js +141 -129
- package/dist/vdesign-ui.css +1 -1
- package/dist/vdesign-ui.umd.js +141 -129
- package/dist/vdesign-ui.umd.min.js +2 -2
- package/package.json +113 -113
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="vd-password">
|
|
3
|
-
<input type="tel" :maxlength="length" v-model="innerValue" @input="handleInput" @focus="handleFocus"
|
|
4
|
-
@blur="handleBlur" class="vd-password__input" />
|
|
5
|
-
<div class="vd-password__security">
|
|
6
|
-
<div class="vd-password__item" v-for="n in length" :key="n" :class="{ 'vd-password-is-filled': n === innerValue.length + 1 }">
|
|
7
|
-
<template v-if="mask">
|
|
8
|
-
<i v-if="n <= innerValue.length" class="mask-icon"></i>
|
|
9
|
-
</template>
|
|
10
|
-
<template v-else>
|
|
11
|
-
{{ innerValue[n - 1] }}
|
|
12
|
-
</template>
|
|
13
|
-
</div>
|
|
14
|
-
</div>
|
|
15
|
-
</div>
|
|
16
|
-
</template>
|
|
17
|
-
|
|
18
|
-
<script>
|
|
19
|
-
export default {
|
|
20
|
-
name: "vd-password",
|
|
21
|
-
props: {
|
|
22
|
-
value: {
|
|
23
|
-
type: String,
|
|
24
|
-
},
|
|
25
|
-
length: {
|
|
26
|
-
type: Number,
|
|
27
|
-
default: 6,
|
|
28
|
-
},
|
|
29
|
-
mask: {
|
|
30
|
-
type: Boolean,
|
|
31
|
-
default: true,
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
|
-
data() {
|
|
35
|
-
return {
|
|
36
|
-
innerValue: this.value,
|
|
37
|
-
};
|
|
38
|
-
},
|
|
39
|
-
watch: {
|
|
40
|
-
value(val) {
|
|
41
|
-
this.innerValue = val;
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
methods: {
|
|
45
|
-
handleInput(e) {
|
|
46
|
-
this.innerValue = e.target.value.slice(0, this.length);
|
|
47
|
-
this.$emit("input", this.innerValue);
|
|
48
|
-
if (this.innerValue.length === this.length) {
|
|
49
|
-
this.$emit("complete", this.innerValue);
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
handleFocus() {
|
|
53
|
-
this.$emit("focus");
|
|
54
|
-
},
|
|
55
|
-
handleBlur() {
|
|
56
|
-
this.$emit("blur");
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
};
|
|
60
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="vd-password">
|
|
3
|
+
<input type="tel" :maxlength="length" v-model="innerValue" @input="handleInput" @focus="handleFocus"
|
|
4
|
+
@blur="handleBlur" class="vd-password__input" />
|
|
5
|
+
<div class="vd-password__security">
|
|
6
|
+
<div class="vd-password__item" v-for="n in length" :key="n" :class="{ 'vd-password-is-filled': n === innerValue.length + 1 }">
|
|
7
|
+
<template v-if="mask">
|
|
8
|
+
<i v-if="n <= innerValue.length" class="mask-icon"></i>
|
|
9
|
+
</template>
|
|
10
|
+
<template v-else>
|
|
11
|
+
{{ innerValue[n - 1] }}
|
|
12
|
+
</template>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
export default {
|
|
20
|
+
name: "vd-password",
|
|
21
|
+
props: {
|
|
22
|
+
value: {
|
|
23
|
+
type: String,
|
|
24
|
+
},
|
|
25
|
+
length: {
|
|
26
|
+
type: Number,
|
|
27
|
+
default: 6,
|
|
28
|
+
},
|
|
29
|
+
mask: {
|
|
30
|
+
type: Boolean,
|
|
31
|
+
default: true,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
data() {
|
|
35
|
+
return {
|
|
36
|
+
innerValue: this.value,
|
|
37
|
+
};
|
|
38
|
+
},
|
|
39
|
+
watch: {
|
|
40
|
+
value(val) {
|
|
41
|
+
this.innerValue = val;
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
methods: {
|
|
45
|
+
handleInput(e) {
|
|
46
|
+
this.innerValue = e.target.value.slice(0, this.length);
|
|
47
|
+
this.$emit("input", this.innerValue);
|
|
48
|
+
if (this.innerValue.length === this.length) {
|
|
49
|
+
this.$emit("complete", this.innerValue);
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
handleFocus() {
|
|
53
|
+
this.$emit("focus");
|
|
54
|
+
},
|
|
55
|
+
handleBlur() {
|
|
56
|
+
this.$emit("blur");
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
};
|
|
60
|
+
</script>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import Popover from './index.vue';
|
|
2
|
-
import './style.less';
|
|
3
|
-
|
|
4
|
-
Popover.install = function (Vue) {
|
|
5
|
-
Vue.component(Popover.name, Popover);
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export default Popover;
|
|
1
|
+
import Popover from './index.vue';
|
|
2
|
+
import './style.less';
|
|
3
|
+
|
|
4
|
+
Popover.install = function (Vue) {
|
|
5
|
+
Vue.component(Popover.name, Popover);
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export default Popover;
|
|
@@ -1,100 +1,100 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<popper :appendToBody="true" trigger="click" :visibleArrow="true" :options="{
|
|
3
|
-
placement: placement,
|
|
4
|
-
modifiers: {
|
|
5
|
-
offset: {
|
|
6
|
-
offset: 0,
|
|
7
|
-
},
|
|
8
|
-
computeStyle: {
|
|
9
|
-
gpuAcceleration: false,
|
|
10
|
-
},
|
|
11
|
-
preventOverflow: {
|
|
12
|
-
boundariesElement: 'window',
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
}" rootClass="vd-popover" transition="vd-popover-fade" :disabled="disabled" ref="close">
|
|
16
|
-
<!-- 内容过多的时候,建议使用content插槽,便于自定义样式 -->
|
|
17
|
-
<div v-if="hasSlot" :class="'vd-popover-' + theme" ref="popperRef" class="vd-popper">
|
|
18
|
-
<slot name="content"></slot>
|
|
19
|
-
<vd-icon name="icon_btn_close" v-if="closeable" class="vd-popover-close" @click="$_close"></vd-icon>
|
|
20
|
-
<div class="vd-popover-close--hot" v-if="closeable" @click="$_close"></div>
|
|
21
|
-
</div>
|
|
22
|
-
<!-- 内容少的话,直接content属性 -->
|
|
23
|
-
<div v-else :class="'vd-popover-' + theme" ref="popperRef" class="vd-popper">
|
|
24
|
-
{{ content }}
|
|
25
|
-
<!-- <a v-if="closeable" class="vd-popover-close" href="javascript:;" @click="$_close">✕</a> -->
|
|
26
|
-
<vd-icon name="icon_btn_close" v-if="closeable" class="vd-popover-close"></vd-icon>
|
|
27
|
-
<div class="vd-popover-close--hot" v-if="closeable" @click="$_close"></div>
|
|
28
|
-
</div>
|
|
29
|
-
<!-- 把外界传递的普通插槽当做具名插槽传递给子组件使用 -->
|
|
30
|
-
<slot slot="reference"></slot>
|
|
31
|
-
</popper>
|
|
32
|
-
</template>
|
|
33
|
-
|
|
34
|
-
<script>
|
|
35
|
-
import VdIcon from '../icon';
|
|
36
|
-
import popper from "./vue-popover";
|
|
37
|
-
// 总共12个位置
|
|
38
|
-
const placementArr = [
|
|
39
|
-
"top-start",
|
|
40
|
-
"top",
|
|
41
|
-
"top-end",
|
|
42
|
-
"left-start",
|
|
43
|
-
"left",
|
|
44
|
-
"left-end",
|
|
45
|
-
"right-start",
|
|
46
|
-
"right",
|
|
47
|
-
"right-end",
|
|
48
|
-
"bottom-start",
|
|
49
|
-
"bottom",
|
|
50
|
-
"bottom-end",
|
|
51
|
-
];
|
|
52
|
-
export default {
|
|
53
|
-
name: "vd-popover",
|
|
54
|
-
components: { popper,VdIcon }, // 注册并使用 vue-popperjs 插件组件
|
|
55
|
-
props: {
|
|
56
|
-
// 12个位置
|
|
57
|
-
placement: {
|
|
58
|
-
type: String,
|
|
59
|
-
default: 'top', // 默认
|
|
60
|
-
validator(val) {
|
|
61
|
-
return placementArr.includes(val); // 位置校验函数
|
|
62
|
-
},
|
|
63
|
-
},
|
|
64
|
-
// 内容
|
|
65
|
-
content: {
|
|
66
|
-
type: String,
|
|
67
|
-
default: "",
|
|
68
|
-
},
|
|
69
|
-
// 切换模式,默认是 primary 模式
|
|
70
|
-
theme: {
|
|
71
|
-
type: String,
|
|
72
|
-
default: "primary", // secondary
|
|
73
|
-
},
|
|
74
|
-
// 是否禁用即关掉
|
|
75
|
-
disabled: {
|
|
76
|
-
type: Boolean,
|
|
77
|
-
default: false,
|
|
78
|
-
},
|
|
79
|
-
// closeable
|
|
80
|
-
closeable: {
|
|
81
|
-
type: Boolean,
|
|
82
|
-
default: false
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
computed: {
|
|
86
|
-
hasSlot() {
|
|
87
|
-
return Boolean(this.$slots.content)
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
methods: {
|
|
91
|
-
$_close() {
|
|
92
|
-
this.$refs.close.doClose()
|
|
93
|
-
// popper.methods.handleDocumentClick 拦截该事件
|
|
94
|
-
}
|
|
95
|
-
},
|
|
96
|
-
};
|
|
97
|
-
</script>
|
|
98
|
-
<style lang="less">
|
|
99
|
-
@import './style.less';
|
|
100
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<popper :appendToBody="true" trigger="click" :visibleArrow="true" :options="{
|
|
3
|
+
placement: placement,
|
|
4
|
+
modifiers: {
|
|
5
|
+
offset: {
|
|
6
|
+
offset: 0,
|
|
7
|
+
},
|
|
8
|
+
computeStyle: {
|
|
9
|
+
gpuAcceleration: false,
|
|
10
|
+
},
|
|
11
|
+
preventOverflow: {
|
|
12
|
+
boundariesElement: 'window',
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
}" rootClass="vd-popover" transition="vd-popover-fade" :disabled="disabled" ref="close">
|
|
16
|
+
<!-- 内容过多的时候,建议使用content插槽,便于自定义样式 -->
|
|
17
|
+
<div v-if="hasSlot" :class="'vd-popover-' + theme" ref="popperRef" class="vd-popper">
|
|
18
|
+
<slot name="content"></slot>
|
|
19
|
+
<vd-icon name="icon_btn_close" v-if="closeable" class="vd-popover-close" @click="$_close"></vd-icon>
|
|
20
|
+
<div class="vd-popover-close--hot" v-if="closeable" @click="$_close"></div>
|
|
21
|
+
</div>
|
|
22
|
+
<!-- 内容少的话,直接content属性 -->
|
|
23
|
+
<div v-else :class="'vd-popover-' + theme" ref="popperRef" class="vd-popper">
|
|
24
|
+
{{ content }}
|
|
25
|
+
<!-- <a v-if="closeable" class="vd-popover-close" href="javascript:;" @click="$_close">✕</a> -->
|
|
26
|
+
<vd-icon name="icon_btn_close" v-if="closeable" class="vd-popover-close"></vd-icon>
|
|
27
|
+
<div class="vd-popover-close--hot" v-if="closeable" @click="$_close"></div>
|
|
28
|
+
</div>
|
|
29
|
+
<!-- 把外界传递的普通插槽当做具名插槽传递给子组件使用 -->
|
|
30
|
+
<slot slot="reference"></slot>
|
|
31
|
+
</popper>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script>
|
|
35
|
+
import VdIcon from '../icon';
|
|
36
|
+
import popper from "./vue-popover";
|
|
37
|
+
// 总共12个位置
|
|
38
|
+
const placementArr = [
|
|
39
|
+
"top-start",
|
|
40
|
+
"top",
|
|
41
|
+
"top-end",
|
|
42
|
+
"left-start",
|
|
43
|
+
"left",
|
|
44
|
+
"left-end",
|
|
45
|
+
"right-start",
|
|
46
|
+
"right",
|
|
47
|
+
"right-end",
|
|
48
|
+
"bottom-start",
|
|
49
|
+
"bottom",
|
|
50
|
+
"bottom-end",
|
|
51
|
+
];
|
|
52
|
+
export default {
|
|
53
|
+
name: "vd-popover",
|
|
54
|
+
components: { popper,VdIcon }, // 注册并使用 vue-popperjs 插件组件
|
|
55
|
+
props: {
|
|
56
|
+
// 12个位置
|
|
57
|
+
placement: {
|
|
58
|
+
type: String,
|
|
59
|
+
default: 'top', // 默认
|
|
60
|
+
validator(val) {
|
|
61
|
+
return placementArr.includes(val); // 位置校验函数
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
// 内容
|
|
65
|
+
content: {
|
|
66
|
+
type: String,
|
|
67
|
+
default: "",
|
|
68
|
+
},
|
|
69
|
+
// 切换模式,默认是 primary 模式
|
|
70
|
+
theme: {
|
|
71
|
+
type: String,
|
|
72
|
+
default: "primary", // secondary
|
|
73
|
+
},
|
|
74
|
+
// 是否禁用即关掉
|
|
75
|
+
disabled: {
|
|
76
|
+
type: Boolean,
|
|
77
|
+
default: false,
|
|
78
|
+
},
|
|
79
|
+
// closeable
|
|
80
|
+
closeable: {
|
|
81
|
+
type: Boolean,
|
|
82
|
+
default: false
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
computed: {
|
|
86
|
+
hasSlot() {
|
|
87
|
+
return Boolean(this.$slots.content)
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
methods: {
|
|
91
|
+
$_close() {
|
|
92
|
+
this.$refs.close.doClose()
|
|
93
|
+
// popper.methods.handleDocumentClick 拦截该事件
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
};
|
|
97
|
+
</script>
|
|
98
|
+
<style lang="less">
|
|
99
|
+
@import './style.less';
|
|
100
|
+
</style>
|