vdesign-ui 0.2.7 → 0.2.9

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.
Files changed (14) hide show
  1. package/dist/components/empty/index.vue +4 -4
  2. package/dist/components/mixins/outlineConfigPlugin.js +45 -45
  3. package/dist/components/tab/index.vue +79 -38
  4. package/dist/components/tabs/index.vue +169 -70
  5. package/dist/components/tabs/style.less +298 -266
  6. package/dist/components/toast/index.js +47 -44
  7. package/dist/components/toast/style.less +3 -1
  8. package/dist/components/utils/env.js +20 -1
  9. package/dist/token.css +2948 -2948
  10. package/dist/vdesign-ui.common.js +374 -240
  11. package/dist/vdesign-ui.css +1 -1
  12. package/dist/vdesign-ui.umd.js +374 -240
  13. package/dist/vdesign-ui.umd.min.js +3 -3
  14. package/package.json +1 -1
package/dist/components/tabs/style.less CHANGED
@@ -1,4 +1,5 @@
1
1
  @tabs-prefix-cls: vd-tabs;
2
+ @tab-prefix-cls: vd-tab;
2
3
 
3
4
  .@{tabs-prefix-cls} {
4
5
 
@@ -7,311 +8,309 @@
7
8
  width: 100%;
8
9
  }
9
10
 
10
- &-primary {
11
- position: relative;
12
- display: inline-block;
13
- cursor: pointer;
14
- padding-inline-start: var(--spacing-tab-primary-padding_left);
15
- padding-inline-end: var(--spacing-tab-primary-padding_right);
16
- color: var(--color-tab-primary-text-default);
17
- font-size: var(--en-single-f-d-r-fontSize);
18
- font-weight: var(--en-single-f-d-r-fontWeight);
11
+ &--sticky {
12
+ position: sticky;
13
+ top: 0;
14
+ z-index: 99;
15
+ }
19
16
 
20
- &-bar {
17
+ &__nav{
18
+ &--primary {
21
19
  position: relative;
22
20
  white-space: nowrap;
23
21
  padding-inline-start: var(--spacing-tab-primary-margin_left);
24
22
  height: var(--height-super-large);
25
23
  line-height: var(--height-super-large);
26
- }
27
-
28
- &-active {
29
- color: var(--color-tab-primary-text-active);
30
- font-size: var(--en-single-f-e-s-fontSize);
31
- font-weight: var(--en-single-f-e-s-fontWeight);
32
-
33
- &::before {
34
- content: "";
35
- bottom: 11px;
36
- height: var(--height-tab-primary-bar);
37
- width: var(--width-tab-primary-bar);
38
- display: block;
39
- position: absolute;
40
- background-color: var(--color-tab-primary-bar-active);
41
- left: 50%;
42
- transform: translateX(-50%);
43
- border-radius: var(--radius-tab-primary_bar);
24
+
25
+ .@{tab-prefix-cls}{
26
+ position: relative;
27
+ display: inline-block;
28
+ cursor: pointer;
29
+ padding-inline-start: var(--spacing-tab-primary-padding_left);
30
+ padding-inline-end: var(--spacing-tab-primary-padding_right);
31
+ color: var(--color-tab-primary-text-default);
32
+ font-size: var(--en-single-f-d-r-fontSize);
33
+ font-weight: var(--en-single-f-d-r-fontWeight);
34
+
35
+ &--active {
36
+ color: var(--color-tab-primary-text-active);
37
+ font-size: var(--en-single-f-e-s-fontSize);
38
+ font-weight: var(--en-single-f-e-s-fontWeight);
39
+
40
+ &::before {
41
+ content: "";
42
+ bottom: 11px;
43
+ height: var(--height-tab-primary-bar);
44
+ width: var(--width-tab-primary-bar);
45
+ display: block;
46
+ position: absolute;
47
+ background-color: var(--color-tab-primary-bar-active);
48
+ left: 50%;
49
+ transform: translateX(-50%);
50
+ border-radius: var(--radius-tab-primary_bar);
51
+ }
52
+ }
44
53
  }
45
54
  }
46
- }
47
55
 
48
- &-card {
49
- min-width: 1%;
50
- flex: 1;
51
- display: flex;
52
- justify-content: center;
53
- align-items: center;
54
- position: relative;
55
- cursor: pointer;
56
- text-align: center;
57
- color: var(--color-tab-primary-text-default);
58
- font-size: var(--en-single-f-d-r-fontSize);
59
- font-weight: var(--en-single-f-d-r-fontWeight);
60
-
61
- &-bar {
56
+ &--card {
62
57
  position: relative;
63
58
  display: flex;
64
59
  padding-inline-start: 20px;
65
60
  padding-inline-end: 20px;
66
61
  height: var(--height-super-large);
67
62
  line-height: var(--height-super-large);
68
- }
69
-
70
- &-active {
71
- color: var(--color-tab-primary-text-active);
72
- font-size: var(--en-single-f-e-s-fontSize);
73
- font-weight: var(--en-single-f-e-s-fontWeight);
74
-
75
- &::before {
76
- content: "";
77
- bottom: 11px;
78
- height: var(--height-tab-primary-bar);
79
- width: var(--width-tab-primary-bar);
80
- display: block;
81
- position: absolute;
82
- background-color: var(--color-tab-primary-bar-active);
83
- left: 50%;
84
- transform: translateX(-50%);
85
- border-radius: 1px;
63
+
64
+ .@{tab-prefix-cls}{
65
+ min-width: 1%;
66
+ flex: 1;
67
+ display: flex;
68
+ justify-content: center;
69
+ align-items: center;
70
+ position: relative;
71
+ cursor: pointer;
72
+ text-align: center;
73
+ color: var(--color-tab-primary-text-default);
74
+ font-size: var(--en-single-f-d-r-fontSize);
75
+ font-weight: var(--en-single-f-d-r-fontWeight);
76
+
77
+ &--active {
78
+ color: var(--color-tab-primary-text-active);
79
+ font-size: var(--en-single-f-e-s-fontSize);
80
+ font-weight: var(--en-single-f-e-s-fontWeight);
81
+
82
+ &::before {
83
+ content: "";
84
+ bottom: 11px;
85
+ height: var(--height-tab-primary-bar);
86
+ width: var(--width-tab-primary-bar);
87
+ display: block;
88
+ position: absolute;
89
+ background-color: var(--color-tab-primary-bar-active);
90
+ left: 50%;
91
+ transform: translateX(-50%);
92
+ border-radius: 1px;
93
+ }
94
+ }
86
95
  }
87
96
  }
88
- }
89
-
90
- &-secondary {
91
- position: relative;
92
- display: inline-block;
93
- cursor: pointer;
94
- margin-inline-start: var(--spacing-tab-secondary-padding_left);
95
- margin-inline-end: var(--spacing-tab-secondary-padding_right);
96
- color: var(--color-tab-primary-text-default);
97
- font-size: var(--en-single-f-c-r-fontSize);
98
- font-weight: var(--en-single-f-c-r-fontWeigh);
99
-
100
- &-bar {
97
+
98
+ &--secondary {
101
99
  display: flex;
102
100
  align-items: center;
103
101
  position: relative;
104
102
  padding-inline-start: var(--spacing-tab-secondary-margin_left);
105
103
  height: var(--height-tab-secondary);
106
104
  line-height: var(--height-tab-secondary);
107
- }
108
105
 
109
- &-active {
110
- color: var(--color-tab-primary-text-active);
111
- font-size: var(--en-single-f-c-s-fontSize);
112
- font-weight: var(--en-single-f-c-s-fontWeight);
106
+ .@{tab-prefix-cls}{
107
+ position: relative;
108
+ display: inline-block;
109
+ cursor: pointer;
110
+ margin-inline-start: var(--spacing-tab-secondary-padding_left);
111
+ margin-inline-end: var(--spacing-tab-secondary-padding_right);
112
+ color: var(--color-tab-primary-text-default);
113
+ font-size: var(--en-single-f-c-r-fontSize);
114
+ font-weight: var(--en-single-f-c-r-fontWeight);
115
+ &--active {
116
+ color: var(--color-tab-primary-text-active);
117
+ font-size: var(--en-single-f-c-s-fontSize);
118
+ font-weight: var(--en-single-f-c-s-fontWeight);
113
119
 
114
- &::before {
115
- content: "";
116
- bottom: 0;
117
- height: var(--height-tab-secondary-bar);
118
- display: block;
119
- position: absolute;
120
- background-color: var(--color-tab-secondary-bar-active);
121
- left: 0;
122
- right: 0;
123
- width: 100%;
124
- border-radius: var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_bottom) var(--radius-tab-secondary-bar_bottom);
120
+ &::before {
121
+ content: "";
122
+ bottom: 0;
123
+ height: var(--height-tab-secondary-bar);
124
+ display: block;
125
+ position: absolute;
126
+ background-color: var(--color-tab-secondary-bar-active);
127
+ left: 0;
128
+ right: 0;
129
+ width: 100%;
130
+ border-radius: var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_bottom) var(--radius-tab-secondary-bar_bottom);
131
+ }
132
+ }
125
133
  }
134
+
126
135
  }
127
- }
128
136
 
129
- &-capsule {
130
- position: relative;
131
- display: inline-block;
132
- cursor: pointer;
133
- vertical-align: middle;
134
- height: var(--height-tab-capsule_btn);
135
- line-height: var(--height-tab-capsule_btn);
136
- padding-inline-start: var(--spacing-tab-capsule_btn-padding_left);
137
- padding-inline-end: var(--spacing-tab-capsule_btn-padding_right);
138
- margin-inline-start: var(--spacing-tab-capsule_btn-margin_right);
139
- margin-inline-end: var(--spacing-tab-capsule_btn-margin_right);
140
- background-color: var(--color-tab-capsule_btn-bg-default);
141
- color: var(--color-tab-capsule-text-default);
142
- font-size: var(--en-single-f-c-r-fontSize);
143
- font-weight: var(--en-single-f-c-r-fontWeight);
144
- border-radius: var(--radius-tab-capsule_button);
137
+
145
138
 
146
- &-bar {
139
+ &--capsule {
147
140
  position: relative;
148
141
  white-space: nowrap;
149
142
  align-items: center;
150
143
  padding-inline-start: var(--spacing-tab-capsule-margin_left);
151
144
  height: var(--height-tab-capsule);
152
145
  line-height: var(--height-tab-capsule);
153
- }
154
146
 
155
- &-active {
156
- color: var(--color-tab-capsule-text-active);
157
- font-size: var(--en-single-f-c-s-fontSize);
158
- font-weight: var(--en-single-f-c-s-fontWeight);
159
- background-color: var(--color-tab-capsule_btn-bg-active);
147
+
148
+ .@{tab-prefix-cls}{
149
+ position: relative;
150
+ display: inline-block;
151
+ cursor: pointer;
152
+ vertical-align: middle;
153
+ height: var(--height-tab-capsule_btn);
154
+ line-height: var(--height-tab-capsule_btn);
155
+ padding-inline-start: var(--spacing-tab-capsule_btn-padding_left);
156
+ padding-inline-end: var(--spacing-tab-capsule_btn-padding_right);
157
+ margin-inline-start: var(--spacing-tab-capsule_btn-margin_right);
158
+ margin-inline-end: var(--spacing-tab-capsule_btn-margin_right);
159
+ background-color: var(--color-tab-capsule_btn-bg-default);
160
+ color: var(--color-tab-capsule-text-default);
161
+ font-size: var(--en-single-f-c-r-fontSize);
162
+ font-weight: var(--en-single-f-c-r-fontWeight);
163
+ border-radius: var(--radius-tab-capsule_button);
160
164
 
161
- .@{tabs-prefix-cls}-arrow {
162
- color: var(--color-tab-filter_down-active);
163
- transform: rotate(180deg);
165
+ &--active {
166
+ color: var(--color-tab-capsule-text-active);
167
+ font-size: var(--en-single-f-c-s-fontSize);
168
+ font-weight: var(--en-single-f-c-s-fontWeight);
169
+ background-color: var(--color-tab-capsule_btn-bg-active);
170
+
171
+ // .@{tab-prefix-cls}__arrow {
172
+ // color: var(--color-tab-filter_down-active);
173
+ // transform: rotate(180deg);
174
+ // }
175
+ }
164
176
  }
165
177
  }
166
- }
167
-
178
+
179
+
168
180
 
169
- &-selector-l {
170
- flex: 1;
171
- position: relative;
172
- display: inline-block;
173
- text-align: center;
174
- cursor: pointer;
175
- height: var(--height-tab-selector_l_btn);
176
- line-height: var(--height-tab-selector_l_btn);
177
- color: var(--color-tab-selector-text-default);
178
- font-size: var(--en-single-f-c-r-fontSize);
179
- font-weight: var(--en-single-f-c-r-fontWeight);
180
-
181
- &-bar {
182
- position: relative;
183
- display: flex;
184
- background-color: var(--color-tab-selector-bg-default);
185
- border-radius: var(--radius-tab-selector_card);
186
- padding-inline-start: var(--spacing-tab-selector-margin_left);
187
- padding-inline-end: var(--spacing-tab-selector-margin_right);
188
- padding-block-start: var(--spacing-tab-selector-margin_top);
189
- padding-block-end: var(--spacing-tab-selector-margin_bottom);
190
- }
191
-
192
- &-active {
193
- color: var(--color-tab-selector-text-active);
194
- font-size: var(--en-single-f-c-s-fontSize);
195
- font-weight: var(--en-single-f-c-s-fontWeight);
196
- background-color: var(--color-tab-selector-bg-active);
197
- box-shadow: var(--shadow-s1);
198
- border-radius: var(--radius-tab-selector_card);
199
- }
200
- }
201
-
202
- &-selector-m {
203
- flex: 1;
204
- position: relative;
205
- display: inline-block;
206
- text-align: center;
207
- cursor: pointer;
208
- height: var(--height-tab-selector_m_btn);
209
- line-height: var(--height-tab-selector_m_btn);
210
- color: var(--color-tab-selector-text-default);
211
- font-size: var(--en-single-f-b-r-fontSize);
212
- font-weight: var(--en-single-f-b-r-fontWeight);
213
-
214
- &-bar {
215
- position: relative;
216
- display: flex;
217
- background-color: var(--color-tab-selector-bg-default);
218
- border-radius: var(--radius-tab-selector_card);
219
- padding-inline-start: var(--spacing-tab-selector-margin_left);
220
- padding-inline-end: var(--spacing-tab-selector-margin_right);
221
- padding-block-start: var(--spacing-tab-selector-margin_top);
222
- padding-block-end: var(--spacing-tab-selector-margin_bottom);
223
- }
224
-
225
- &-active {
226
- color: var(--color-tab-selector-text-active);
227
- font-size: var(--en-single-f-b-s-fontSize);
228
- font-weight: var(--en-single-f-b-s-fontWeight);
229
- background-color: var(--color-tab-selector-bg-active);
230
- box-shadow: var(--shadow-s1);
231
- border-radius: var(--radius-tab-selector_card);
232
- }
233
- }
234
-
235
181
 
236
- &-filter {
237
- flex: 1;
238
- position: relative;
239
- cursor: pointer;
240
- text-align: center;
241
- color: var(--color-tab-filter-text-default);
242
- font-size: var(--en-single-f-c-r-fontSize);
243
- font-weight: var(--en-single-f-c-r-fontWeight);
244
-
245
- &-bar {
246
- position: relative;
247
- display: flex;
248
- height: var(--height-tab-filter);
249
- line-height: var(--height-tab-filter);
250
- padding-inline-start: var(--spacing-tab-filter-margin_y);
251
- padding-inline-end: var(--spacing-tab-filter-margin_y);
252
- }
253
-
254
- &-active {
255
- color: var(--color-tab-filter-text-active);
256
- font-size: var(--en-single-f-c-s-fontSize);
257
- font-weight: var(--en-single-f-c-s-fontWeight);
258
-
259
- .@{tabs-prefix-cls}-arrow {
260
- color: var(--color-tab-filter_down);
261
- transform: rotate(180deg);
182
+
183
+ &--selector-l {
184
+ position: relative;
185
+ display: flex;
186
+ background-color: var(--color-tab-selector-bg-default);
187
+ border-radius: var(--radius-tab-selector_card);
188
+ padding-inline-start: var(--spacing-tab-selector-margin_left);
189
+ padding-inline-end: var(--spacing-tab-selector-margin_right);
190
+ padding-block-start: var(--spacing-tab-selector-margin_top);
191
+ padding-block-end: var(--spacing-tab-selector-margin_bottom);
192
+
193
+ .@{tab-prefix-cls}{
194
+ flex: 1;
195
+ position: relative;
196
+ display: inline-block;
197
+ text-align: center;
198
+ cursor: pointer;
199
+ height: var(--height-tab-selector_l_btn);
200
+ line-height: var(--height-tab-selector_l_btn);
201
+ color: var(--color-tab-selector-text-default);
202
+ font-size: var(--en-single-f-c-r-fontSize);
203
+ font-weight: var(--en-single-f-c-r-fontWeight);
204
+
205
+ &--active {
206
+ color: var(--color-tab-selector-text-active);
207
+ font-size: var(--en-single-f-c-s-fontSize);
208
+ font-weight: var(--en-single-f-c-s-fontWeight);
209
+ background-color: var(--color-tab-selector-bg-active);
210
+ box-shadow: var(--shadow-s1);
211
+ border-radius: var(--radius-tab-selector_card);
212
+ }
262
213
  }
214
+
263
215
  }
264
- }
265
-
266
- &-click-filter {
267
- flex: 1;
268
- position: relative;
269
- cursor: pointer;
270
- text-align: center;
271
- color: var(--color-tab-double_click_filter-text-default);
272
- font-size: var(--en-single-f-c-r-fontSize);
273
- font-weight: var(--en-single-f-c-r-fontWeight);
274
-
275
- &-bar {
276
- position: relative;
277
- display: flex;
278
- height: var(--height-tab-filter);
279
- line-height: var(--height-tab-filter);
280
- }
281
-
282
- &-active {
283
- color: var(--color-tab-double_click_filter-text-active);
284
- font-size: var(--en-single-f-c-s-fontSize);
285
- font-weight: var(--en-single-f-c-s-fontWeight);
216
+
217
+
218
+
219
+ &--selector-m{
220
+ position: relative;
221
+ display: flex;
222
+ background-color: var(--color-tab-selector-bg-default);
223
+ border-radius: var(--radius-tab-selector_card);
224
+ padding-inline-start: var(--spacing-tab-selector-margin_left);
225
+ padding-inline-end: var(--spacing-tab-selector-margin_right);
226
+ padding-block-start: var(--spacing-tab-selector-margin_top);
227
+ padding-block-end: var(--spacing-tab-selector-margin_bottom);
228
+
229
+ .@{tab-prefix-cls}{
230
+ flex: 1;
231
+ position: relative;
232
+ display: inline-block;
233
+ text-align: center;
234
+ cursor: pointer;
235
+ height: var(--height-tab-selector_m_btn);
236
+ line-height: var(--height-tab-selector_m_btn);
237
+ color: var(--color-tab-selector-text-default);
238
+ font-size: var(--en-single-f-b-r-fontSize);
239
+ font-weight: var(--en-single-f-b-r-fontWeight);
240
+
241
+ &--active {
242
+ color: var(--color-tab-selector-text-active);
243
+ font-size: var(--en-single-f-b-s-fontSize);
244
+ font-weight: var(--en-single-f-b-s-fontWeight);
245
+ background-color: var(--color-tab-selector-bg-active);
246
+ box-shadow: var(--shadow-s1);
247
+ border-radius: var(--radius-tab-selector_card);
248
+ }
249
+ }
250
+
286
251
  }
287
- }
288
-
252
+
253
+
254
+ &--filter {
255
+ position: relative;
256
+ display: flex;
257
+ height: var(--height-tab-filter);
258
+ line-height: var(--height-tab-filter);
259
+ padding-inline-start: var(--spacing-tab-filter-margin_y);
260
+ padding-inline-end: var(--spacing-tab-filter-margin_y);
289
261
 
290
- &-menu-btn {
291
- cursor: pointer;
292
- font-size: var(--icon-large)!important;
293
- }
262
+ .@{tab-prefix-cls}{
263
+ flex: 1;
264
+ position: relative;
265
+ cursor: pointer;
266
+ text-align: center;
267
+ color: var(--color-tab-filter-text-default);
268
+ font-size: var(--en-single-f-c-r-fontSize);
269
+ font-weight: var(--en-single-f-c-r-fontWeight);
270
+ &--active {
271
+ color: var(--color-tab-filter-text-active);
272
+ font-size: var(--en-single-f-c-s-fontSize);
273
+ font-weight: var(--en-single-f-c-s-fontWeight);
274
+
275
+ // .@{tab-prefix-cls}__arrow {
276
+ // color: var(--color-tab-filter_down);
277
+ // transform: rotate(180deg);
278
+ // }
279
+ }
280
+ }
281
+
294
282
 
295
- &-text-cell {
296
- display: flex;
297
- align-items: center;
298
- justify-content: center;
299
- }
283
+ }
284
+
300
285
 
301
- &-arrow {
302
- display: inline-block;
303
- vertical-align: -1px;
304
- font-size: var(--icon-small) !important;
305
- color: var(--color-tab-filter_down);
306
- }
286
+
287
+ &--click-filter {
288
+ position: relative;
289
+ display: flex;
290
+ height: var(--height-tab-filter);
291
+ line-height: var(--height-tab-filter);
292
+
293
+ .@{tab-prefix-cls}{
294
+ flex: 1;
295
+ position: relative;
296
+ cursor: pointer;
297
+ text-align: center;
298
+ color: var(--color-tab-double_click_filter-text-default);
299
+ font-size: var(--en-single-f-c-r-fontSize);
300
+ font-weight: var(--en-single-f-c-r-fontWeight);
301
+ &--active {
302
+ color: var(--color-tab-double_click_filter-text-active);
303
+ font-size: var(--en-single-f-c-s-fontSize);
304
+ font-weight: var(--en-single-f-c-s-fontWeight);
305
+ }
306
+ }
307
+
307
308
 
308
- &__line {
309
- &::before {
310
- display: none;
311
309
  }
312
310
  }
313
-
314
- &-menu {
311
+
312
+
313
+ &__menu {
315
314
  display: flex;
316
315
  justify-content: space-between;
317
316
  align-items: center;
@@ -335,10 +334,13 @@
335
334
 
336
335
 
337
336
  }
337
+ &--btn {
338
+ cursor: pointer;
339
+ font-size: var(--icon-large)!important;
340
+ }
338
341
 
339
342
  }
340
343
 
341
-
342
344
  &__wrap--bg {
343
345
  background-color: transparent;
344
346
  }
@@ -354,24 +356,54 @@
354
356
  }
355
357
  }
356
358
 
357
- &-text--ellipsis {
359
+
360
+ &__content--animated {
361
+ overflow: hidden;
362
+ }
363
+ &__track {
364
+ display: flex;
365
+ transition: transform 0.3s;
366
+ }
367
+
368
+
369
+ }
370
+
371
+ .@{tab-prefix-cls}{
372
+
373
+ &__text {
374
+ display: flex;
375
+ align-items: center;
376
+ justify-content: center;
377
+ }
378
+
379
+ // &__arrow {
380
+ // display: inline-block;
381
+ // vertical-align: -1px;
382
+ // font-size: var(--icon-small) !important;
383
+ // color: var(--color-tab-filter_down);
384
+ // }
385
+
386
+ &__text--ellipsis {
358
387
  display: -webkit-box;
359
388
  overflow: hidden;
360
389
  -webkit-line-clamp: 1;
361
390
  -webkit-box-orient: vertical;
362
391
  }
363
- }
364
392
 
365
- [lang='ar'] .vd-tabs-menu--right::before {
366
- transform: scaleX(-1);
393
+ &__none--line {
394
+ &::before {
395
+ display: none;
396
+ }
397
+ }
398
+ &__pane {
399
+ flex-shrink: 0;
400
+ width: 100%;
401
+ }
402
+
367
403
  }
368
404
 
369
405
 
370
- .vd-tab {
371
- width: 100%;
372
- display: none;
373
- }
374
406
 
375
- .vd-tab-active {
376
- display: block;
407
+ [lang='ar'] .@{tabs-prefix-cls}__menu--right::before {
408
+ transform: scaleX(-1);
377
409
  }