vxe-pc-ui 4.6.35 → 4.6.36

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 (44) hide show
  1. package/es/icon/style.css +1 -1
  2. package/es/style.css +1 -1
  3. package/es/style.min.css +1 -1
  4. package/es/tabs/src/tabs.js +290 -89
  5. package/es/tabs/style.css +431 -156
  6. package/es/tabs/style.min.css +1 -1
  7. package/es/ui/index.js +3 -1
  8. package/es/ui/src/log.js +1 -1
  9. package/es/vxe-tabs/style.css +431 -156
  10. package/es/vxe-tabs/style.min.css +1 -1
  11. package/lib/icon/style/style.css +1 -1
  12. package/lib/icon/style/style.min.css +1 -1
  13. package/lib/index.umd.js +310 -84
  14. package/lib/index.umd.min.js +1 -1
  15. package/lib/style.css +1 -1
  16. package/lib/style.min.css +1 -1
  17. package/lib/tabs/src/tabs.js +306 -82
  18. package/lib/tabs/src/tabs.min.js +1 -1
  19. package/lib/tabs/style/style.css +431 -156
  20. package/lib/tabs/style/style.min.css +1 -1
  21. package/lib/ui/index.js +3 -1
  22. package/lib/ui/index.min.js +1 -1
  23. package/lib/ui/src/log.js +1 -1
  24. package/lib/ui/src/log.min.js +1 -1
  25. package/lib/vxe-tabs/style/style.css +431 -156
  26. package/lib/vxe-tabs/style/style.min.css +1 -1
  27. package/package.json +1 -1
  28. package/packages/tabs/src/tabs.ts +299 -90
  29. package/packages/ui/index.ts +2 -0
  30. package/styles/components/tabs.scss +534 -183
  31. package/types/components/tabs.d.ts +22 -6
  32. package/types/ui/global-icon.d.ts +2 -0
  33. /package/es/icon/{iconfont.1750910542831.ttf → iconfont.1751108492990.ttf} +0 -0
  34. /package/es/icon/{iconfont.1750910542831.woff → iconfont.1751108492990.woff} +0 -0
  35. /package/es/icon/{iconfont.1750910542831.woff2 → iconfont.1751108492990.woff2} +0 -0
  36. /package/es/{iconfont.1750910542831.ttf → iconfont.1751108492990.ttf} +0 -0
  37. /package/es/{iconfont.1750910542831.woff → iconfont.1751108492990.woff} +0 -0
  38. /package/es/{iconfont.1750910542831.woff2 → iconfont.1751108492990.woff2} +0 -0
  39. /package/lib/icon/style/{iconfont.1750910542831.ttf → iconfont.1751108492990.ttf} +0 -0
  40. /package/lib/icon/style/{iconfont.1750910542831.woff → iconfont.1751108492990.woff} +0 -0
  41. /package/lib/icon/style/{iconfont.1750910542831.woff2 → iconfont.1751108492990.woff2} +0 -0
  42. /package/lib/{iconfont.1750910542831.ttf → iconfont.1751108492990.ttf} +0 -0
  43. /package/lib/{iconfont.1750910542831.woff → iconfont.1751108492990.woff} +0 -0
  44. /package/lib/{iconfont.1750910542831.woff2 → iconfont.1751108492990.woff2} +0 -0
package/lib/tabs/style/style.css CHANGED
@@ -1,11 +1,13 @@
1
1
  .vxe-tabs {
2
2
  display: flex;
3
- flex-direction: column;
4
3
  color: var(--vxe-ui-font-color);
5
4
  font-family: var(--vxe-ui-font-family);
6
5
  }
7
- .vxe-tabs.is--padding .vxe-tabs-pane--item {
8
- padding: var(--vxe-ui-layout-padding-default);
6
+ .vxe-tabs.pos--top, .vxe-tabs.pos--bottom {
7
+ flex-direction: column;
8
+ }
9
+ .vxe-tabs.pos--left, .vxe-tabs.pos--right {
10
+ flex-direction: row;
9
11
  }
10
12
  .vxe-tabs.trigger--default .vxe-tabs-header--item {
11
13
  cursor: pointer;
@@ -14,11 +16,6 @@
14
16
  color: var(--vxe-ui-font-primary-color);
15
17
  }
16
18
 
17
- .vxe-tabs-header {
18
- display: flex;
19
- flex-direction: row;
20
- }
21
-
22
19
  .vxe-tabs-header--bar {
23
20
  position: relative;
24
21
  display: flex;
@@ -26,16 +23,11 @@
26
23
  align-items: center;
27
24
  justify-content: center;
28
25
  flex-shrink: 0;
29
- width: 2em;
30
- border: 1px solid var(--vxe-ui-input-border-color);
31
26
  cursor: pointer;
32
27
  }
33
28
  .vxe-tabs-header--bar::after {
34
29
  content: "";
35
30
  position: absolute;
36
- top: 0;
37
- width: 1px;
38
- height: 100%;
39
31
  background-color: var(--vxe-ui-input-border-color);
40
32
  z-index: 3;
41
33
  }
@@ -44,58 +36,198 @@
44
36
  }
45
37
  .vxe-tabs-header--bar:hover {
46
38
  color: var(--vxe-ui-font-primary-lighten-color);
47
- background-color: var(--vxe-ui-font-tinge-color);
48
39
  }
49
40
  .vxe-tabs-header--bar:active {
50
41
  color: var(--vxe-ui-font-primary-darken-color);
51
42
  }
43
+ .vxe-tabs-header--bar.type--default, .vxe-tabs-header--bar.type--card, .vxe-tabs-header--bar.type--border-card, .vxe-tabs-header--bar.type--round-card {
44
+ border: 1px solid var(--vxe-ui-input-border-color);
45
+ }
46
+ .vxe-tabs-header--bar.type--round-card {
47
+ background-color: rgba(0, 0, 0, 0.02);
48
+ }
49
+ .vxe-tabs-header--bar.pos--top, .vxe-tabs-header--bar.pos--bottom {
50
+ width: 1.6em;
51
+ }
52
+ .vxe-tabs-header--bar.pos--top::after, .vxe-tabs-header--bar.pos--bottom::after {
53
+ top: 0;
54
+ width: 1px;
55
+ height: 100%;
56
+ }
57
+ .vxe-tabs-header--bar.pos--left, .vxe-tabs-header--bar.pos--right {
58
+ width: 100%;
59
+ height: 1.6em;
60
+ }
61
+ .vxe-tabs-header--bar.pos--left::after, .vxe-tabs-header--bar.pos--right::after {
62
+ left: 0;
63
+ width: 100%;
64
+ height: 1px;
65
+ }
52
66
 
53
- .vxe-tabs-header--left-bar {
67
+ .vxe-tabs-header--prev-bar.type--default.pos--top, .vxe-tabs-header--prev-bar.type--default.pos--bottom {
68
+ border-right: 0;
69
+ }
70
+ .vxe-tabs-header--prev-bar.type--default.pos--left, .vxe-tabs-header--prev-bar.type--default.pos--right {
71
+ border-bottom: 0;
72
+ }
73
+ .vxe-tabs-header--prev-bar.type--card.pos--top {
74
+ border-bottom: 0;
75
+ border-right: 0;
76
+ }
77
+ .vxe-tabs-header--prev-bar.type--card.pos--bottom {
78
+ border-top: 0;
79
+ border-right: 0;
80
+ }
81
+ .vxe-tabs-header--prev-bar.type--card.pos--left {
82
+ border-left: 0;
83
+ border-bottom: 0;
84
+ }
85
+ .vxe-tabs-header--prev-bar.type--card.pos--right {
86
+ border-right: 0;
87
+ border-bottom: 0;
88
+ }
89
+ .vxe-tabs-header--prev-bar.type--border-card.pos--top {
90
+ border-top: 0;
91
+ border-right: 0;
92
+ }
93
+ .vxe-tabs-header--prev-bar.type--border-card.pos--bottom {
94
+ border-right: 0;
95
+ border-bottom: 0;
96
+ }
97
+ .vxe-tabs-header--prev-bar.type--border-card.pos--left {
98
+ border-left: 0;
99
+ border-bottom: 0;
100
+ }
101
+ .vxe-tabs-header--prev-bar.type--border-card.pos--right {
102
+ border-right: 0;
103
+ border-bottom: 0;
104
+ }
105
+ .vxe-tabs-header--prev-bar.type--round-card.pos--top {
54
106
  border-right: 0;
55
- box-shadow: 8px 0px 10px -5px var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
56
107
  }
57
- .vxe-tabs-header--left-bar::after {
58
- right: -1px;
108
+ .vxe-tabs-header--prev-bar.type--round-card.pos--bottom {
109
+ border-right: 0;
110
+ }
111
+ .vxe-tabs-header--prev-bar.type--round-card.pos--left {
112
+ border-bottom: 0;
113
+ }
114
+ .vxe-tabs-header--prev-bar.type--round-card.pos--right {
115
+ border-bottom: 0;
116
+ }
117
+ .vxe-tabs-header--prev-bar.pos--top::after, .vxe-tabs-header--prev-bar.pos--bottom::after {
118
+ right: 0;
119
+ }
120
+ .vxe-tabs-header--prev-bar.pos--left::after, .vxe-tabs-header--prev-bar.pos--right::after {
121
+ bottom: 0;
122
+ }
123
+ .vxe-tabs-header--prev-bar.scrolling--middle.pos--top, .vxe-tabs-header--prev-bar.scrolling--middle.pos--bottom {
124
+ box-shadow: 4px 0px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
125
+ }
126
+ .vxe-tabs-header--prev-bar.scrolling--middle.pos--left, .vxe-tabs-header--prev-bar.scrolling--middle.pos--right {
127
+ box-shadow: 0 4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
59
128
  }
60
129
 
61
- .vxe-tabs-header--right-bar {
130
+ .vxe-tabs-header--next-bar.type--default.pos--top, .vxe-tabs-header--next-bar.type--default.pos--bottom {
131
+ border-left: 0;
132
+ }
133
+ .vxe-tabs-header--next-bar.type--default.pos--left, .vxe-tabs-header--next-bar.type--default.pos--right {
134
+ border-top: 0;
135
+ }
136
+ .vxe-tabs-header--next-bar.type--card.pos--top {
137
+ border-top: 0;
138
+ border-left: 0;
139
+ }
140
+ .vxe-tabs-header--next-bar.type--card.pos--bottom {
141
+ border-bottom: 0;
142
+ border-left: 0;
143
+ }
144
+ .vxe-tabs-header--next-bar.type--card.pos--left {
145
+ border-top: 0;
146
+ border-right: 0;
147
+ }
148
+ .vxe-tabs-header--next-bar.type--card.pos--right {
149
+ border-top: 0;
62
150
  border-left: 0;
63
- box-shadow: -8px 0px 10px -5px var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
64
151
  }
65
- .vxe-tabs-header--right-bar::after {
66
- left: -1px;
152
+ .vxe-tabs-header--next-bar.type--border-card.pos--top {
153
+ border-left: 0;
154
+ border-top: 0;
155
+ }
156
+ .vxe-tabs-header--next-bar.type--border-card.pos--bottom {
157
+ border-left: 0;
158
+ border-bottom: 0;
159
+ }
160
+ .vxe-tabs-header--next-bar.type--border-card.pos--left {
161
+ border-left: 0;
162
+ border-top: 0;
163
+ }
164
+ .vxe-tabs-header--next-bar.type--border-card.pos--right {
165
+ border-right: 0;
166
+ border-top: 0;
167
+ }
168
+ .vxe-tabs-header--next-bar.type--round-card.pos--top {
169
+ border-left: 0;
170
+ }
171
+ .vxe-tabs-header--next-bar.type--round-card.pos--bottom {
172
+ border-left: 0;
173
+ border-bottom: 0;
174
+ }
175
+ .vxe-tabs-header--next-bar.type--round-card.pos--left {
176
+ border-top: 0;
177
+ }
178
+ .vxe-tabs-header--next-bar.type--round-card.pos--right {
179
+ border-top: 0;
180
+ }
181
+ .vxe-tabs-header--next-bar.pos--top::after, .vxe-tabs-header--next-bar.pos--bottom::after {
182
+ left: 0;
183
+ }
184
+ .vxe-tabs-header--next-bar.pos--left::after, .vxe-tabs-header--next-bar.pos--right::after {
185
+ top: 0;
186
+ }
187
+ .vxe-tabs-header--next-bar.scrolling--middle.pos--top, .vxe-tabs-header--next-bar.scrolling--middle.pos--bottom {
188
+ box-shadow: -4px 0px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
189
+ }
190
+ .vxe-tabs-header--next-bar.scrolling--middle.pos--left, .vxe-tabs-header--next-bar.scrolling--middle.pos--right {
191
+ box-shadow: 0 -4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
67
192
  }
68
193
 
69
- .vxe-tabs-header--extra {
194
+ .vxe-tabs-header--prefix,
195
+ .vxe-tabs-header--suffix {
70
196
  display: flex;
71
197
  flex-direction: row;
72
198
  align-items: center;
73
199
  justify-content: center;
74
200
  flex-shrink: 0;
75
- border-bottom: 1px solid var(--vxe-ui-input-border-color);
76
201
  }
77
202
 
78
- .vxe-tabs-header--wrapper {
79
- position: relative;
80
- flex-grow: 1;
203
+ .vxe-tabs-header--prefix.type--default.pos--top, .vxe-tabs-header--prefix.type--border-card.pos--top, .vxe-tabs-header--prefix.type--round-card.pos--top,
204
+ .vxe-tabs-header--suffix.type--default.pos--top,
205
+ .vxe-tabs-header--suffix.type--border-card.pos--top,
206
+ .vxe-tabs-header--suffix.type--round-card.pos--top {
207
+ border-bottom: 1px solid var(--vxe-ui-input-border-color);
81
208
  }
82
- .vxe-tabs-header--wrapper::after {
83
- content: "";
84
- position: absolute;
85
- left: 0;
86
- bottom: 0;
87
- width: 100%;
88
- height: 1px;
89
- background-color: var(--vxe-ui-input-border-color);
90
- z-index: 0;
209
+ .vxe-tabs-header--prefix.type--default.pos--bottom, .vxe-tabs-header--prefix.type--border-card.pos--bottom, .vxe-tabs-header--prefix.type--round-card.pos--bottom,
210
+ .vxe-tabs-header--suffix.type--default.pos--bottom,
211
+ .vxe-tabs-header--suffix.type--border-card.pos--bottom,
212
+ .vxe-tabs-header--suffix.type--round-card.pos--bottom {
213
+ border-top: 1px solid var(--vxe-ui-input-border-color);
214
+ }
215
+ .vxe-tabs-header--prefix.type--default.pos--left, .vxe-tabs-header--prefix.type--border-card.pos--left, .vxe-tabs-header--prefix.type--round-card.pos--left,
216
+ .vxe-tabs-header--suffix.type--default.pos--left,
217
+ .vxe-tabs-header--suffix.type--border-card.pos--left,
218
+ .vxe-tabs-header--suffix.type--round-card.pos--left {
219
+ border-right: 1px solid var(--vxe-ui-input-border-color);
220
+ }
221
+ .vxe-tabs-header--prefix.type--default.pos--right, .vxe-tabs-header--prefix.type--border-card.pos--right, .vxe-tabs-header--prefix.type--round-card.pos--right,
222
+ .vxe-tabs-header--suffix.type--default.pos--right,
223
+ .vxe-tabs-header--suffix.type--border-card.pos--right,
224
+ .vxe-tabs-header--suffix.type--round-card.pos--right {
225
+ border-left: 1px solid var(--vxe-ui-input-border-color);
91
226
  }
92
227
 
93
228
  .vxe-tabs-header--item-wrapper {
94
229
  position: relative;
95
230
  display: flex;
96
- flex-direction: row;
97
- overflow-y: hidden;
98
- overflow-x: auto;
99
231
  outline: 0;
100
232
  }
101
233
 
@@ -116,6 +248,76 @@
116
248
  .vxe-tabs-header--item.align--right {
117
249
  text-align: right;
118
250
  }
251
+ .vxe-tabs-header--item.type--card.pos--top {
252
+ border-top: 1px solid var(--vxe-ui-input-border-color);
253
+ }
254
+ .vxe-tabs-header--item.type--card.pos--bottom {
255
+ border-bottom: 1px solid var(--vxe-ui-input-border-color);
256
+ }
257
+ .vxe-tabs-header--item.type--card.pos--top, .vxe-tabs-header--item.type--card.pos--bottom {
258
+ border-right: 1px solid var(--vxe-ui-input-border-color);
259
+ }
260
+ .vxe-tabs-header--item.type--card.pos--top:first-child, .vxe-tabs-header--item.type--card.pos--bottom:first-child {
261
+ border-left: 1px solid var(--vxe-ui-input-border-color);
262
+ }
263
+ .vxe-tabs-header--item.type--card.pos--left {
264
+ border-left: 1px solid var(--vxe-ui-input-border-color);
265
+ }
266
+ .vxe-tabs-header--item.type--card.pos--right {
267
+ border-right: 1px solid var(--vxe-ui-input-border-color);
268
+ }
269
+ .vxe-tabs-header--item.type--card.pos--left, .vxe-tabs-header--item.type--card.pos--right {
270
+ border-bottom: 1px solid var(--vxe-ui-input-border-color);
271
+ }
272
+ .vxe-tabs-header--item.type--card.pos--left:first-child, .vxe-tabs-header--item.type--card.pos--right:first-child {
273
+ border-top: 1px solid var(--vxe-ui-input-border-color);
274
+ }
275
+ .vxe-tabs-header--item.type--border-card.is--active {
276
+ background-color: var(--vxe-ui-layout-background-color);
277
+ }
278
+ .vxe-tabs-header--item.type--round-card {
279
+ z-index: 2;
280
+ border: 1px solid var(--vxe-ui-input-border-color);
281
+ background-color: rgba(0, 0, 0, 0.02);
282
+ transition: color 0.3s ease-in-out;
283
+ }
284
+ .vxe-tabs-header--item.type--round-card.is--active {
285
+ background-color: var(--vxe-ui-layout-background-color);
286
+ }
287
+ .vxe-tabs-header--item.type--round-card.pos--top {
288
+ border-bottom: 0;
289
+ border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
290
+ }
291
+ .vxe-tabs-header--item.type--round-card.pos--bottom {
292
+ border-top: 0;
293
+ border-radius: 0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius);
294
+ }
295
+ .vxe-tabs-header--item.type--round-card.pos--top, .vxe-tabs-header--item.type--round-card.pos--bottom {
296
+ margin: 0 2px;
297
+ }
298
+ .vxe-tabs-header--item.type--round-card.pos--top:first-child, .vxe-tabs-header--item.type--round-card.pos--bottom:first-child {
299
+ margin-left: 0;
300
+ }
301
+ .vxe-tabs-header--item.type--round-card.pos--top:last-child, .vxe-tabs-header--item.type--round-card.pos--bottom:last-child {
302
+ margin-right: 0;
303
+ }
304
+ .vxe-tabs-header--item.type--round-card.pos--left {
305
+ border-right: 0;
306
+ border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);
307
+ }
308
+ .vxe-tabs-header--item.type--round-card.pos--right {
309
+ border-left: 0;
310
+ border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0;
311
+ }
312
+ .vxe-tabs-header--item.type--round-card.pos--left, .vxe-tabs-header--item.type--round-card.pos--right {
313
+ margin: 2px 0;
314
+ }
315
+ .vxe-tabs-header--item.type--round-card.pos--left:first-child, .vxe-tabs-header--item.type--round-card.pos--right:first-child {
316
+ margin-top: 0;
317
+ }
318
+ .vxe-tabs-header--item.type--round-card.pos--left:last-child, .vxe-tabs-header--item.type--round-card.pos--right:last-child {
319
+ margin-bottom: 0;
320
+ }
119
321
 
120
322
  .vxe-tabs-header--item-inner {
121
323
  display: flex;
@@ -125,6 +327,10 @@
125
327
 
126
328
  .vxe-tabs-header--item-content {
127
329
  flex-grow: 1;
330
+ max-width: 30em;
331
+ overflow: hidden;
332
+ text-overflow: ellipsis;
333
+ white-space: nowrap;
128
334
  }
129
335
 
130
336
  .vxe-tabs-header--item-icon {
@@ -162,14 +368,52 @@
162
368
  font-size: 1em;
163
369
  }
164
370
 
371
+ .vxe-tabs-header--refresh-btn {
372
+ visibility: hidden;
373
+ }
374
+ .vxe-tabs-header--refresh-btn.is--active {
375
+ visibility: visible;
376
+ }
377
+
165
378
  .vxe-tabs-header--item-inner {
166
379
  transition: color 0.1s ease-in-out;
167
380
  }
168
381
 
169
- .vxe-tabs-pane {
382
+ .vxe-tabs-pane--wrapper {
383
+ display: flex;
384
+ flex-direction: column;
385
+ flex-grow: 1;
386
+ overflow: hidden;
387
+ }
388
+
389
+ .vxe-tabs-pane--body {
170
390
  flex-grow: 1;
171
391
  overflow: hidden;
172
392
  }
393
+ .vxe-tabs-pane--body.is--padding {
394
+ padding: var(--vxe-ui-layout-padding-default);
395
+ }
396
+ .vxe-tabs-pane--body.type--border-card, .vxe-tabs-pane--body.type--round-card {
397
+ border: 1px solid var(--vxe-ui-input-border-color);
398
+ }
399
+ .vxe-tabs-pane--body.type--border-card.pos--top, .vxe-tabs-pane--body.type--round-card.pos--top {
400
+ border-top: 0;
401
+ }
402
+ .vxe-tabs-pane--body.type--border-card.pos--bottom, .vxe-tabs-pane--body.type--round-card.pos--bottom {
403
+ border-bottom: 0;
404
+ }
405
+ .vxe-tabs-pane--body.type--border-card.pos--left, .vxe-tabs-pane--body.type--round-card.pos--left {
406
+ border-left: 0;
407
+ }
408
+ .vxe-tabs-pane--body.type--border-card.pos--right, .vxe-tabs-pane--body.type--round-card.pos--right {
409
+ border-right: 0;
410
+ }
411
+
412
+ .vxe-tabs-pane--top,
413
+ .vxe-tabs-pane--footer {
414
+ flex-shrink: 0;
415
+ overflow: auto;
416
+ }
173
417
 
174
418
  .vxe-tabs-pane--item {
175
419
  display: none;
@@ -181,167 +425,198 @@
181
425
  display: block;
182
426
  }
183
427
 
184
- .vxe-tabs-header--active-line {
185
- display: none;
428
+ .vxe-tabs-header {
429
+ display: flex;
186
430
  }
187
- .vxe-tabs-header--active-line.type--default {
188
- display: block;
189
- position: absolute;
190
- bottom: 0;
191
- left: 0;
192
- height: 2px;
193
- width: 4px;
194
- background-color: var(--vxe-ui-font-primary-color);
195
- z-index: 2;
196
- transition: all 0.3s ease-in-out;
431
+ .vxe-tabs-header.pos--top, .vxe-tabs-header.pos--bottom {
432
+ flex-direction: row;
197
433
  }
198
- .vxe-tabs-header--active-line.type--card {
199
- display: block;
200
- position: absolute;
201
- top: 0;
202
- left: 0;
203
- width: 4px;
204
- border: 1px solid var(--vxe-ui-font-primary-color);
205
- pointer-events: none;
206
- z-index: 1;
207
- box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
208
- transition: color, left 0.3s ease-in-out;
434
+ .vxe-tabs-header.pos--left, .vxe-tabs-header.pos--right {
435
+ flex-direction: column;
209
436
  }
210
- .vxe-tabs-header--active-line.type--border-card {
211
- display: block;
212
- position: absolute;
213
- top: 0;
214
- left: 0;
215
- width: 4px;
216
- border-left: 1px solid var(--vxe-ui-input-border-color);
437
+ .vxe-tabs-header.type--card.pos--top {
438
+ border-bottom: 1px solid var(--vxe-ui-input-border-color);
439
+ }
440
+ .vxe-tabs-header.type--card.pos--bottom {
441
+ border-top: 1px solid var(--vxe-ui-input-border-color);
442
+ }
443
+ .vxe-tabs-header.type--card.pos--left {
217
444
  border-right: 1px solid var(--vxe-ui-input-border-color);
218
- pointer-events: none;
219
- z-index: 1;
220
445
  }
221
-
222
- .vxe-tabs--default,
223
- .vxe-tabs--card,
224
- .vxe-tabs--border-card,
225
- .vxe-tabs--round-card {
226
- border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
227
- background-color: var(--vxe-ui-layout-background-color);
446
+ .vxe-tabs-header.type--card.pos--right {
447
+ border-left: 1px solid var(--vxe-ui-input-border-color);
228
448
  }
229
-
230
- .vxe-tabs--default .vxe-tabs-header--item-inner {
231
- border-bottom: 2px solid transparent;
449
+ .vxe-tabs-header.type--border-card {
450
+ background-color: var(--vxe-ui-tabs-card-header-background-color);
451
+ border: 1px solid var(--vxe-ui-input-border-color);
232
452
  }
233
-
234
- .vxe-tabs--card .vxe-tabs-header--bar {
453
+ .vxe-tabs-header.type--border-card.pos--top {
454
+ border-bottom: 0;
455
+ }
456
+ .vxe-tabs-header.type--border-card.pos--bottom {
235
457
  border-top: 0;
236
458
  }
237
- .vxe-tabs--card .vxe-tabs-header--left-bar {
459
+ .vxe-tabs-header.type--border-card.pos--left {
460
+ border-right: 0;
461
+ }
462
+ .vxe-tabs-header.type--border-card.pos--right {
238
463
  border-left: 0;
239
464
  }
240
- .vxe-tabs--card .vxe-tabs-header--right-bar {
241
- border-right: 0;
465
+
466
+ .vxe-tabs-header--wrapper {
467
+ position: relative;
468
+ flex-grow: 1;
469
+ overflow: hidden;
242
470
  }
243
- .vxe-tabs--card .vxe-tabs-header {
244
- border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
245
- border-top: 1px solid var(--vxe-ui-input-border-color);
246
- border-left: 1px solid var(--vxe-ui-input-border-color);
247
- border-right: 1px solid var(--vxe-ui-input-border-color);
471
+ .vxe-tabs-header--wrapper.type--default, .vxe-tabs-header--wrapper.type--border-card, .vxe-tabs-header--wrapper.type--round-card {
472
+ position: relative;
248
473
  }
249
- .vxe-tabs--card .vxe-tabs-header .vxe-tabs-header--wrapper {
250
- border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
474
+ .vxe-tabs-header--wrapper.type--default::after, .vxe-tabs-header--wrapper.type--border-card::after, .vxe-tabs-header--wrapper.type--round-card::after {
475
+ content: "";
476
+ position: absolute;
477
+ background-color: var(--vxe-ui-input-border-color);
478
+ z-index: 0;
251
479
  }
252
- .vxe-tabs--card .vxe-tabs-header--item {
253
- border-left: 1px solid var(--vxe-ui-input-border-color);
480
+ .vxe-tabs-header--wrapper.type--default.pos--top::after, .vxe-tabs-header--wrapper.type--border-card.pos--top::after, .vxe-tabs-header--wrapper.type--round-card.pos--top::after {
481
+ bottom: 0;
254
482
  }
255
- .vxe-tabs--card .vxe-tabs-header--item:first-child {
256
- border-left: 0;
483
+ .vxe-tabs-header--wrapper.type--default.pos--bottom::after, .vxe-tabs-header--wrapper.type--border-card.pos--bottom::after, .vxe-tabs-header--wrapper.type--round-card.pos--bottom::after {
484
+ top: 0;
257
485
  }
258
- .vxe-tabs--card .vxe-tabs-header--item:last-child {
259
- border-right: 1px solid var(--vxe-ui-input-border-color);
486
+ .vxe-tabs-header--wrapper.type--default.pos--top::after, .vxe-tabs-header--wrapper.type--default.pos--bottom::after, .vxe-tabs-header--wrapper.type--border-card.pos--top::after, .vxe-tabs-header--wrapper.type--border-card.pos--bottom::after, .vxe-tabs-header--wrapper.type--round-card.pos--top::after, .vxe-tabs-header--wrapper.type--round-card.pos--bottom::after {
487
+ left: 0;
488
+ width: 100%;
489
+ height: 1px;
260
490
  }
261
-
262
- .vxe-tabs--border-card .vxe-tabs-header--item-wrapper {
263
- z-index: 2;
491
+ .vxe-tabs-header--wrapper.type--default.pos--left::after, .vxe-tabs-header--wrapper.type--border-card.pos--left::after, .vxe-tabs-header--wrapper.type--round-card.pos--left::after {
492
+ right: 0;
264
493
  }
265
- .vxe-tabs--border-card .vxe-tabs-header--bar {
266
- border-top: 0;
494
+ .vxe-tabs-header--wrapper.type--default.pos--right::after, .vxe-tabs-header--wrapper.type--border-card.pos--right::after, .vxe-tabs-header--wrapper.type--round-card.pos--right::after {
495
+ left: 0;
267
496
  }
268
- .vxe-tabs--border-card .vxe-tabs-header--left-bar {
269
- border-left: 0;
497
+ .vxe-tabs-header--wrapper.type--default.pos--left::after, .vxe-tabs-header--wrapper.type--default.pos--right::after, .vxe-tabs-header--wrapper.type--border-card.pos--left::after, .vxe-tabs-header--wrapper.type--border-card.pos--right::after, .vxe-tabs-header--wrapper.type--round-card.pos--left::after, .vxe-tabs-header--wrapper.type--round-card.pos--right::after {
498
+ top: 0;
499
+ width: 1px;
500
+ height: 100%;
270
501
  }
271
- .vxe-tabs--border-card .vxe-tabs-header--right-bar {
272
- border-right: 0;
502
+ .vxe-tabs-header--wrapper.type--border-card.pos--top {
503
+ border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
273
504
  }
274
- .vxe-tabs--border-card.is--padding .vxe-tabs-pane--item, .vxe-tabs--border-card.is--height .vxe-tabs-pane--item {
275
- border-bottom: 1px solid var(--vxe-ui-input-border-color);
276
- border-left: 1px solid var(--vxe-ui-input-border-color);
277
- border-right: 1px solid var(--vxe-ui-input-border-color);
505
+ .vxe-tabs-header--wrapper.type--border-card.pos--bottom {
506
+ border-radius: 0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius);
278
507
  }
279
- .vxe-tabs--border-card .vxe-tabs-pane--item.has--content {
280
- border-bottom: 1px solid var(--vxe-ui-input-border-color);
281
- border-left: 1px solid var(--vxe-ui-input-border-color);
282
- border-right: 1px solid var(--vxe-ui-input-border-color);
508
+ .vxe-tabs-header--wrapper.type--border-card > .vxe-tabs-header--item-wrapper, .vxe-tabs-header--wrapper.type--round-card > .vxe-tabs-header--item-wrapper {
509
+ z-index: 2;
283
510
  }
284
- .vxe-tabs--border-card .vxe-tabs-header {
285
- border-top: 1px solid var(--vxe-ui-input-border-color);
286
- border-left: 1px solid var(--vxe-ui-input-border-color);
287
- border-right: 1px solid var(--vxe-ui-input-border-color);
288
- background-color: var(--vxe-ui-tabs-card-header-background-color);
511
+ .vxe-tabs-header--wrapper.pos--top, .vxe-tabs-header--wrapper.pos--bottom {
512
+ height: var(--vxe-ui-tabs-header-height-default);
289
513
  }
290
- .vxe-tabs--border-card .vxe-tabs-header .vxe-tabs-header--wrapper {
291
- border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
514
+ .vxe-tabs-header--wrapper.pos--top .vxe-tabs-header--item-wrapper, .vxe-tabs-header--wrapper.pos--bottom .vxe-tabs-header--item-wrapper {
515
+ flex-direction: row;
516
+ width: 100%;
517
+ overflow-y: hidden;
518
+ overflow-x: auto;
292
519
  }
293
- .vxe-tabs--border-card .vxe-tabs-header--item.is--active {
294
- background-color: var(--vxe-ui-layout-background-color);
520
+ .vxe-tabs-header--wrapper.pos--left .vxe-tabs-header--item-wrapper, .vxe-tabs-header--wrapper.pos--right .vxe-tabs-header--item-wrapper {
521
+ flex-direction: column;
522
+ height: 100%;
523
+ overflow-y: auto;
524
+ overflow-x: hidden;
295
525
  }
296
526
 
297
- .vxe-tabs--round-card .vxe-tabs-header--item-wrapper {
298
- z-index: 2;
527
+ .vxe-tabs-header--active-line {
528
+ display: none;
299
529
  }
300
- .vxe-tabs--round-card .vxe-tabs-header--item {
301
- position: relative;
530
+ .vxe-tabs-header--active-line.type--default {
531
+ display: block;
532
+ position: absolute;
533
+ background-color: var(--vxe-ui-font-primary-color);
302
534
  z-index: 2;
303
- margin: 0 2px;
304
- border-top: 1px solid var(--vxe-ui-input-border-color);
305
- border-left: 1px solid var(--vxe-ui-input-border-color);
306
- border-right: 1px solid var(--vxe-ui-input-border-color);
307
- border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
308
- background-color: rgba(0, 0, 0, 0.02);
309
- transition: color 0.3s ease-in-out;
535
+ transition: all 0.3s ease-in-out;
310
536
  }
311
- .vxe-tabs--round-card .vxe-tabs-header--item.is--active {
312
- background-color: var(--vxe-ui-layout-background-color);
537
+ .vxe-tabs-header--active-line.type--default.pos--top {
538
+ bottom: 0;
313
539
  }
314
- .vxe-tabs--round-card .vxe-tabs-header--item:first-child {
315
- margin-left: 0;
540
+ .vxe-tabs-header--active-line.type--default.pos--bottom {
541
+ top: 0;
316
542
  }
317
- .vxe-tabs--round-card .vxe-tabs-header--item:last-child {
318
- margin-right: 0;
543
+ .vxe-tabs-header--active-line.type--default.pos--top, .vxe-tabs-header--active-line.type--default.pos--bottom {
544
+ left: 0;
545
+ height: 2px;
546
+ width: 4px;
319
547
  }
320
- .vxe-tabs--round-card.is--padding .vxe-tabs-pane--item, .vxe-tabs--round-card.is--height .vxe-tabs-pane--item {
321
- border-bottom: 1px solid var(--vxe-ui-input-border-color);
322
- border-left: 1px solid var(--vxe-ui-input-border-color);
323
- border-right: 1px solid var(--vxe-ui-input-border-color);
548
+ .vxe-tabs-header--active-line.type--default.pos--left {
549
+ right: 0;
324
550
  }
325
- .vxe-tabs--round-card .vxe-tabs-pane--item.has--content {
326
- border-bottom: 1px solid var(--vxe-ui-input-border-color);
551
+ .vxe-tabs-header--active-line.type--default.pos--right {
552
+ left: 0;
553
+ }
554
+ .vxe-tabs-header--active-line.type--default.pos--left, .vxe-tabs-header--active-line.type--default.pos--right {
555
+ top: 0;
556
+ height: 4px;
557
+ width: 2px;
558
+ }
559
+ .vxe-tabs-header--active-line.type--card {
560
+ display: block;
561
+ position: absolute;
562
+ top: 0;
563
+ left: 0;
564
+ border: 1px solid var(--vxe-ui-font-primary-color);
565
+ pointer-events: none;
566
+ z-index: 1;
567
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
568
+ }
569
+ .vxe-tabs-header--active-line.type--card.pos--top, .vxe-tabs-header--active-line.type--card.pos--bottom {
570
+ width: 4px;
571
+ transition: color, left 0.3s ease-in-out;
572
+ }
573
+ .vxe-tabs-header--active-line.type--card.pos--left, .vxe-tabs-header--active-line.type--card.pos--right {
574
+ width: 100%;
575
+ transition: color, top 0.3s ease-in-out;
576
+ }
577
+ .vxe-tabs-header--active-line.type--border-card {
578
+ display: block;
579
+ position: absolute;
580
+ top: 0;
581
+ left: 0;
582
+ pointer-events: none;
583
+ z-index: 1;
584
+ }
585
+ .vxe-tabs-header--active-line.type--border-card.pos--top, .vxe-tabs-header--active-line.type--border-card.pos--bottom {
586
+ width: 4px;
327
587
  border-left: 1px solid var(--vxe-ui-input-border-color);
328
588
  border-right: 1px solid var(--vxe-ui-input-border-color);
329
589
  }
330
- .vxe-tabs--round-card .vxe-tabs-pane {
331
- background-color: var(--vxe-ui-layout-background-color);
590
+ .vxe-tabs-header--active-line.type--border-card.pos--left, .vxe-tabs-header--active-line.type--border-card.pos--right {
591
+ width: 100%;
592
+ border-top: 1px solid var(--vxe-ui-input-border-color);
593
+ border-bottom: 1px solid var(--vxe-ui-input-border-color);
332
594
  }
333
595
 
334
- .vxe-tabs .vxe-tabs-header--wrapper {
335
- height: var(--vxe-ui-tabs-header-height-default);
336
- overflow: hidden;
337
- }
338
596
  .vxe-tabs .vxe-tabs-header--item-inner {
339
597
  height: var(--vxe-ui-tabs-header-height-default);
340
598
  }
341
599
  .vxe-tabs .vxe-tabs-header--active-line.type--card {
342
- height: calc(var(--vxe-ui-tabs-header-height-default) - 1px);
600
+ height: var(--vxe-ui-tabs-header-height-default);
343
601
  }
344
602
  .vxe-tabs .vxe-tabs-header--active-line.type--border-card {
345
603
  height: calc(var(--vxe-ui-tabs-header-height-default) + 1px);
346
604
  line-height: calc(var(--vxe-ui-tabs-header-height-default) + 1px);
605
+ }
606
+
607
+ .vxe-tabs--default,
608
+ .vxe-tabs--card,
609
+ .vxe-tabs--border-card,
610
+ .vxe-tabs--round-card {
611
+ border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
612
+ background-color: var(--vxe-ui-layout-background-color);
613
+ }
614
+
615
+ .vxe-tabs--default .vxe-tabs-header--item-inner {
616
+ border-bottom: 2px solid transparent;
617
+ }
618
+
619
+ .vxe-tabs--card .vxe-tabs-header--item-inner,
620
+ .vxe-tabs--round-card .vxe-tabs-header--item-inner {
621
+ height: calc(var(--vxe-ui-tabs-header-height-default) - 1px);
347
622
  }