vdesign-ui 0.1.10 → 0.1.12
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/dist/components/activityviews/index.vue +2 -5
- package/dist/components/dialog/index.vue +4 -3
- package/dist/components/empty/index.vue +2 -2
- package/dist/components/input/index.vue +20 -15
- package/dist/components/input/search/index.vue +13 -11
- package/dist/components/input/style.less +19 -5
- package/dist/components/skeleton/index.vue +54 -46
- package/dist/locale/ar.js +1 -1
- package/dist/locale/en.js +1 -1
- package/dist/locale/zh.js +1 -1
- package/dist/token.css +2967 -0
- package/dist/vdesign-ui.common.js +190 -183
- package/dist/vdesign-ui.css +1 -1
- package/dist/vdesign-ui.umd.js +190 -183
- package/dist/vdesign-ui.umd.min.js +3 -3
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<div class="vd-activityviews">
|
|
6
6
|
<div class="vd-activityviews__header" v-if="withHeader">
|
|
7
7
|
<div class="vd-activityviews__wrapper">
|
|
8
|
-
<vd-icon v-if="backDefault"
|
|
8
|
+
<vd-icon v-if="backDefault" name="icon_nav_back"></vd-icon>
|
|
9
9
|
<div v-if="title" class="vd-activityviews__title">{{ title }}</div>
|
|
10
10
|
<slot name="close">
|
|
11
11
|
<vd-icon v-if="closeIcon" class="vd-activityviews__close" name="icon_btn_dialogclose" svg
|
|
@@ -45,10 +45,7 @@ export default {
|
|
|
45
45
|
props: {
|
|
46
46
|
value: Boolean,
|
|
47
47
|
title: String,
|
|
48
|
-
backDefault:
|
|
49
|
-
type: String,
|
|
50
|
-
default: "icon_nav_back"
|
|
51
|
-
},
|
|
48
|
+
backDefault:Boolean,
|
|
52
49
|
closeIcon: Boolean,
|
|
53
50
|
closeBtn: String,
|
|
54
51
|
description: String,
|
|
@@ -9,10 +9,11 @@
|
|
|
9
9
|
<div class="vd-dialog__title">{{ title }}</div>
|
|
10
10
|
</header>
|
|
11
11
|
<div class="vd-dialog__content">
|
|
12
|
-
<div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }" v-if="message">
|
|
12
|
+
<div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }" v-if="message || $slots.content">
|
|
13
|
+
<slot name="content">{{
|
|
13
14
|
message
|
|
14
|
-
}}</
|
|
15
|
-
|
|
15
|
+
}}</slot>
|
|
16
|
+
</div>
|
|
16
17
|
</div>
|
|
17
18
|
<footer class="vd-dialog__footer">
|
|
18
19
|
<div class="vd-dialog__btns" v-if="btns">
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="vd-empty" :class="wrapClasses">
|
|
3
3
|
<div class="vd-empty-img"><img :src="currentImg" alt="img"></div>
|
|
4
|
-
<p class="vd-empty-txt" :class="textClasses" v-if="
|
|
4
|
+
<p class="vd-empty-txt" :class="textClasses" v-if="description">{{ description }}</p>
|
|
5
5
|
<div class="vd-empty-footer" :class="footerClasses" v-if="$slots.btn">
|
|
6
6
|
<slot name="btn"></slot>
|
|
7
7
|
</div>
|
|
@@ -15,7 +15,7 @@ export default {
|
|
|
15
15
|
name: 'vd-empty',
|
|
16
16
|
props: {
|
|
17
17
|
imgs: String,
|
|
18
|
-
|
|
18
|
+
description: String,
|
|
19
19
|
size: String,
|
|
20
20
|
type: {
|
|
21
21
|
type: String,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="wrapClasses" class="vd-input">
|
|
3
3
|
<template v-if="inputTextArea || type !== 'textarea'">
|
|
4
|
-
<span v-if="prefix" class="vd-input-form__prefix
|
|
4
|
+
<span v-if="prefix || $slots.prefix" class="vd-input-form__prefix" :class="borderRightClasses">
|
|
5
5
|
<slot name="prefix">{{ prefix }}</slot>
|
|
6
6
|
</span>
|
|
7
7
|
<input
|
|
@@ -37,16 +37,16 @@
|
|
|
37
37
|
>
|
|
38
38
|
</textarea>
|
|
39
39
|
<div
|
|
40
|
-
v-if="suffix || append || isWordLimitVisible"
|
|
40
|
+
v-if="suffix || $slots.suffix || append || $slots.append || isWordLimitVisible"
|
|
41
41
|
class="vd-input-form__right"
|
|
42
42
|
>
|
|
43
|
-
<span v-if="suffix" class="vd-input-form__suffix">
|
|
43
|
+
<span v-if="suffix || $slots.suffix" class="vd-input-form__suffix">
|
|
44
44
|
<slot name="suffix">
|
|
45
45
|
<vd-icon name="icon_btn_clean" @click="handleClear"></vd-icon>
|
|
46
46
|
</slot>
|
|
47
47
|
</span>
|
|
48
|
-
<span v-if="append" class="vd-input-form__append">
|
|
49
|
-
<slot name="
|
|
48
|
+
<span v-if="append || $slots.append" class="vd-input-form__append">
|
|
49
|
+
<slot name="append">{{ append }}</slot>
|
|
50
50
|
</span>
|
|
51
51
|
<div
|
|
52
52
|
v-if="isWordLimitVisible"
|
|
@@ -64,17 +64,13 @@
|
|
|
64
64
|
class="vd-input-form__password"
|
|
65
65
|
>
|
|
66
66
|
<span v-if="passwordClose" class="vd-input-form__password--close">
|
|
67
|
-
<slot name="passwordClose">
|
|
68
67
|
<vd-icon name="icon_btn_close" @click="handleClear"></vd-icon>
|
|
69
|
-
</slot>
|
|
70
68
|
</span>
|
|
71
69
|
<span v-if="passwordIcon" class="vd-input-form__password--password">
|
|
72
|
-
<slot name="passwordIcon">
|
|
73
70
|
<vd-icon
|
|
74
71
|
:name="passwordVisible ? 'icon_btn_eye' : 'icon_btn_eye_close'"
|
|
75
72
|
@click="handlePasswordVisible"
|
|
76
73
|
></vd-icon>
|
|
77
|
-
</slot>
|
|
78
74
|
</span>
|
|
79
75
|
</span>
|
|
80
76
|
</template>
|
|
@@ -120,17 +116,18 @@ export default {
|
|
|
120
116
|
default: "text",
|
|
121
117
|
},
|
|
122
118
|
prefix: {
|
|
123
|
-
type:
|
|
124
|
-
|
|
119
|
+
type: Boolean,
|
|
120
|
+
},
|
|
121
|
+
borderRight: {
|
|
122
|
+
type: Boolean,
|
|
123
|
+
default: true
|
|
125
124
|
},
|
|
126
125
|
suffix: {
|
|
127
|
-
type:
|
|
128
|
-
default: false,
|
|
126
|
+
type: Boolean,
|
|
129
127
|
},
|
|
130
128
|
// 设计如此,单独的文字
|
|
131
129
|
append: {
|
|
132
|
-
type:
|
|
133
|
-
default: false,
|
|
130
|
+
type: Boolean,
|
|
134
131
|
},
|
|
135
132
|
placeholder: {
|
|
136
133
|
type: String,
|
|
@@ -222,6 +219,14 @@ export default {
|
|
|
222
219
|
},
|
|
223
220
|
];
|
|
224
221
|
},
|
|
222
|
+
borderRightClasses(){
|
|
223
|
+
return [
|
|
224
|
+
"vd-hairline--right",
|
|
225
|
+
{
|
|
226
|
+
[`${prefixCls}--border`]: this.borderRight,
|
|
227
|
+
}
|
|
228
|
+
]
|
|
229
|
+
},
|
|
225
230
|
inputClasses() {
|
|
226
231
|
return [
|
|
227
232
|
`${prefixCls}__control`,
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
<vd-icon name="icon_nav_search"></vd-icon>
|
|
7
7
|
</slot>
|
|
8
8
|
</span>
|
|
9
|
-
<input :type="type" :class="inputClasses" :placeholder="placeholder">
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
></vd-input>
|
|
9
|
+
<!-- <input :type="type" :class="inputClasses" :placeholder="placeholder"> -->
|
|
10
|
+
<vd-input
|
|
11
|
+
v-bind="$attrs"
|
|
12
|
+
v-on="listeners"
|
|
13
|
+
form="search"
|
|
14
|
+
:hairline = "false"
|
|
15
|
+
></vd-input>
|
|
16
16
|
<span v-if="suffix || $slots.suffix" class="vd-search__suffix">
|
|
17
17
|
<slot name="suffix">
|
|
18
18
|
<vd-icon v-if="suffix" name="icon_btn_clean"></vd-icon>
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
const prefixCls = 'vd-search';
|
|
31
31
|
export default {
|
|
32
32
|
name: 'vd-search',
|
|
33
|
+
inheritAttrs: false,
|
|
33
34
|
props: {
|
|
34
35
|
type: {
|
|
35
36
|
type: String,
|
|
@@ -41,10 +42,6 @@ export default {
|
|
|
41
42
|
suffix: {
|
|
42
43
|
type: Boolean,
|
|
43
44
|
},
|
|
44
|
-
placeholder: {
|
|
45
|
-
type: String,
|
|
46
|
-
default: ''
|
|
47
|
-
},
|
|
48
45
|
},
|
|
49
46
|
data() {
|
|
50
47
|
return {
|
|
@@ -56,6 +53,11 @@ export default {
|
|
|
56
53
|
`${prefixCls}__control`
|
|
57
54
|
]
|
|
58
55
|
},
|
|
56
|
+
listeners() {
|
|
57
|
+
return {
|
|
58
|
+
...this.$listeners,
|
|
59
|
+
};
|
|
60
|
+
}
|
|
59
61
|
},
|
|
60
62
|
methods: {
|
|
61
63
|
|
|
@@ -11,6 +11,10 @@
|
|
|
11
11
|
border: 0;
|
|
12
12
|
text-decoration: none;
|
|
13
13
|
}
|
|
14
|
+
|
|
15
|
+
&--border{
|
|
16
|
+
margin-inline-end: calc(var(--spacing-input-form_divider-margin_y)* 1px);
|
|
17
|
+
}
|
|
14
18
|
&__control {
|
|
15
19
|
flex: 1;
|
|
16
20
|
width: 100%;
|
|
@@ -18,10 +22,11 @@
|
|
|
18
22
|
margin: 0;
|
|
19
23
|
padding: 0;
|
|
20
24
|
background-color: transparent;
|
|
21
|
-
caret-color: var(--color-input-cursor);
|
|
22
25
|
color: var(--color-input-text-active);
|
|
23
26
|
font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
|
|
24
27
|
font-weight: var(--en-single-f-d-s-fontWeight);
|
|
28
|
+
caret-color: var(--color-input-cursor);
|
|
29
|
+
|
|
25
30
|
}
|
|
26
31
|
|
|
27
32
|
&--active {
|
|
@@ -126,7 +131,7 @@
|
|
|
126
131
|
color: var(--color-input-text-active);
|
|
127
132
|
font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
|
|
128
133
|
font-weight: var(--en-single-f-d-s-fontWeight);
|
|
129
|
-
margin-inline-end: calc(var(--spacing-input-form_divider-margin_y) * 1px);
|
|
134
|
+
// margin-inline-end: calc(var(--spacing-input-form_divider-margin_y) * 1px);
|
|
130
135
|
padding-inline-end: calc(var(--spacing-input-form_divider-margin_y) * 1px);
|
|
131
136
|
}
|
|
132
137
|
|
|
@@ -224,13 +229,22 @@
|
|
|
224
229
|
border: 0;
|
|
225
230
|
text-decoration: none;
|
|
226
231
|
}
|
|
227
|
-
|
|
232
|
+
flex: 1;
|
|
228
233
|
display: flex;
|
|
229
234
|
align-items: center;
|
|
235
|
+
height: calc(var(--height-input-search_content) * 1px);
|
|
230
236
|
padding-inline-start: calc(var(--spacing-input-search_textarea-padding_y) * 1px);
|
|
231
237
|
padding-inline-end: calc(var(--spacing-input-search_textarea-padding_y) * 1px);
|
|
232
238
|
|
|
233
239
|
|
|
240
|
+
.@{input-prefix-cls} {
|
|
241
|
+
&-search{
|
|
242
|
+
padding-inline-end: 0;
|
|
243
|
+
flex: 1;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
|
|
234
248
|
&-content {
|
|
235
249
|
flex: 1;
|
|
236
250
|
display: flex;
|
|
@@ -244,12 +258,12 @@
|
|
|
244
258
|
|
|
245
259
|
&__control {
|
|
246
260
|
width: 100%;
|
|
247
|
-
caret-color: var(--color-input-cursor);
|
|
248
261
|
background-color: transparent;
|
|
249
262
|
height: calc(var(--height-input-search_bg) * 1px);
|
|
250
263
|
color: var(--color-input-text-active);
|
|
251
264
|
font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
|
|
252
265
|
font-weight: var(--en-single-f-d-s-fontWeight);
|
|
266
|
+
caret-color: var(--color-input-cursor);
|
|
253
267
|
|
|
254
268
|
|
|
255
269
|
&::-webkit-input-placeholder {
|
|
@@ -311,13 +325,13 @@
|
|
|
311
325
|
&-input {
|
|
312
326
|
width: 100%;
|
|
313
327
|
padding: 0;
|
|
314
|
-
caret-color: var(--color-input-cursor);
|
|
315
328
|
background-color: transparent;
|
|
316
329
|
color: var(--color-input-text-active);
|
|
317
330
|
font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
|
|
318
331
|
font-weight: var(--en-single-f-d-s-fontWeight);
|
|
319
332
|
// margin-inline-start: calc(var(--spacing-input-trade_number_input-margin_left) * 1px);
|
|
320
333
|
margin-inline-end: calc(var(--spacing-input-trade_number_input-margin_left) * 1px);
|
|
334
|
+
caret-color: var(--color-input-cursor);
|
|
321
335
|
|
|
322
336
|
&::-webkit-input-placeholder {
|
|
323
337
|
color: var(--color-input-text-default);
|
|
@@ -1,55 +1,60 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="vd-skeleton" :class="{ 'vd-skeleton--animate': animate }">
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<div
|
|
10
|
-
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<div class="vd-skeleton__stock" v-if="stock">
|
|
18
|
-
<div class="vd-skeleton__stock--left">
|
|
19
|
-
<span class="vd-skeleton__stock--data"></span>
|
|
20
|
-
<span class="vd-skeleton__stock--subdatax"></span>
|
|
3
|
+
<template v-if="loading">
|
|
4
|
+
<div class="vd-skeleton__img" v-if="img"></div>
|
|
5
|
+
<div class="vd-skeleton__title" :class="titleClasses" v-if="title"></div>
|
|
6
|
+
<div class="vd-skeleton__button" v-if="button"></div>
|
|
7
|
+
<div class="vd-skeleton__img--s" v-if="sImg"></div>
|
|
8
|
+
<div class="vd-skeleton__avatar" :class="avatarClasses" v-if="avatar"></div>
|
|
9
|
+
<div v-if="paragraph || text" class="vd-skeleton__content">
|
|
10
|
+
<div class="vd-skeleton__text" v-if="text"></div>
|
|
11
|
+
<template v-if="paragraph">
|
|
12
|
+
<div class="vd-skeleton__paragraph" v-for="item in rows" :key="item" :class="{
|
|
13
|
+
'is-last': item === rows && rows > 1,
|
|
14
|
+
}">
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
21
17
|
</div>
|
|
22
|
-
<div class="vd-
|
|
23
|
-
<div class="vd-skeleton__stock--
|
|
24
|
-
|
|
25
|
-
<span class="vd-skeleton__stock--
|
|
26
|
-
<span class="vd-skeleton__stock--text"></span>
|
|
18
|
+
<div class="vd-skeleton__stock" v-if="stock">
|
|
19
|
+
<div class="vd-skeleton__stock--left">
|
|
20
|
+
<span class="vd-skeleton__stock--data"></span>
|
|
21
|
+
<span class="vd-skeleton__stock--subdatax"></span>
|
|
27
22
|
</div>
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
</div>
|
|
35
|
-
<div class="vd-skeleton--space">
|
|
36
|
-
<div class="vd-skeleton__stock--right">
|
|
37
|
-
<span class="vd-skeleton__stock--title"></span>
|
|
38
|
-
<span class="vd-skeleton__stock--text"></span>
|
|
23
|
+
<div class="vd-skeleton--space">
|
|
24
|
+
<div class="vd-skeleton__stock--center"></div>
|
|
25
|
+
<div class="vd-skeleton__stock--right spacing">
|
|
26
|
+
<span class="vd-skeleton__stock--title"></span>
|
|
27
|
+
<span class="vd-skeleton__stock--text"></span>
|
|
28
|
+
</div>
|
|
39
29
|
</div>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
30
|
+
</div>
|
|
31
|
+
<div class="vd-skeleton__stock" v-if="data">
|
|
32
|
+
<div class="vd-skeleton__stock--left">
|
|
33
|
+
<span class="vd-skeleton__stock--data"></span>
|
|
34
|
+
<span class="vd-skeleton__stock--subdatal"></span>
|
|
43
35
|
</div>
|
|
44
|
-
<div class="vd-
|
|
45
|
-
<
|
|
46
|
-
|
|
36
|
+
<div class="vd-skeleton--space">
|
|
37
|
+
<div class="vd-skeleton__stock--right">
|
|
38
|
+
<span class="vd-skeleton__stock--title"></span>
|
|
39
|
+
<span class="vd-skeleton__stock--text"></span>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="vd-skeleton__stock--right">
|
|
42
|
+
<span class="vd-skeleton__stock--title"></span>
|
|
43
|
+
<span class="vd-skeleton__stock--text"></span>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="vd-skeleton__stock--right">
|
|
46
|
+
<span class="vd-skeleton__stock--title"></span>
|
|
47
|
+
<span class="vd-skeleton__stock--text"></span>
|
|
48
|
+
</div>
|
|
47
49
|
</div>
|
|
48
50
|
</div>
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
</
|
|
51
|
+
<div class="vd-skeleton__equally" v-if="equally">
|
|
52
|
+
<div class="vd-skeleton__img" v-for="item in equallys" :key="item" :style="{ height: height + 'px' }"></div>
|
|
53
|
+
</div>
|
|
54
|
+
</template>
|
|
55
|
+
<template v-else>
|
|
56
|
+
<slot></slot>
|
|
57
|
+
</template>
|
|
53
58
|
</div>
|
|
54
59
|
</template>
|
|
55
60
|
|
|
@@ -110,8 +115,11 @@ export default {
|
|
|
110
115
|
avatarSize: {
|
|
111
116
|
type: String,
|
|
112
117
|
default: 's'
|
|
113
|
-
|
|
114
|
-
|
|
118
|
+
},
|
|
119
|
+
loading: {
|
|
120
|
+
type: Boolean,
|
|
121
|
+
default: true
|
|
122
|
+
},
|
|
115
123
|
},
|
|
116
124
|
computed: {
|
|
117
125
|
titleClasses() {
|
package/dist/locale/ar.js
CHANGED
package/dist/locale/en.js
CHANGED