bkui-vue 0.0.1-beta.411 → 0.0.1-beta.413

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/lib/tab/tab.d.ts CHANGED
@@ -2,8 +2,8 @@ declare const _default: import("vue").DefineComponent<{
2
2
  active: import("vue-types").VueTypeDef<string | number> & {
3
3
  default: string | number;
4
4
  };
5
- type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab"> & {
6
- default: "card" | "border-card" | "unborder-card" | "card-tab";
5
+ type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab" | "card-grid"> & {
6
+ default: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
7
7
  };
8
8
  tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
9
9
  default: "top" | "right" | "left";
@@ -71,8 +71,8 @@ declare const _default: import("vue").DefineComponent<{
71
71
  active: import("vue-types").VueTypeDef<string | number> & {
72
72
  default: string | number;
73
73
  };
74
- type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab"> & {
75
- default: "card" | "border-card" | "unborder-card" | "card-tab";
74
+ type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab" | "card-grid"> & {
75
+ default: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
76
76
  };
77
77
  tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
78
78
  default: "top" | "right" | "left";
@@ -141,7 +141,7 @@ declare const _default: import("vue").DefineComponent<{
141
141
  "onUpdate:active"?: (...args: any[]) => any;
142
142
  onSort?: (...args: any[]) => any;
143
143
  }, {
144
- type: "card" | "border-card" | "unborder-card" | "card-tab";
144
+ type: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
145
145
  active: string | number;
146
146
  extCls: string;
147
147
  closable: boolean;
package/lib/tab/tab.less CHANGED
@@ -28,6 +28,26 @@
28
28
  display: flex;
29
29
  color: @tab-color;
30
30
 
31
+ .@{bk-prefix}-tab--left & {
32
+ border-right: 1px solid @tab-border;
33
+ }
34
+
35
+ .@{bk-prefix}-tab--right & {
36
+ border-left: 1px solid @tab-border;
37
+ }
38
+
39
+ .@{bk-prefix}-tab--vertical-tab & {
40
+ border: 0;
41
+ }
42
+
43
+ .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
44
+ flex-direction: column;
45
+
46
+ > div {
47
+ flex-direction: column;
48
+ }
49
+ }
50
+
31
51
  .@{bk-prefix}-tab--card-tab &, .@{bk-prefix}-tab--vertical-tab & {
32
52
  background: @tab-card-tab-bg;
33
53
  }
@@ -36,19 +56,38 @@
36
56
  border-radius: 4px 4px 0;
37
57
  }
38
58
 
59
+ .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & {
60
+ border-bottom: 1px solid @tab-border;
61
+ }
62
+
63
+ .@{bk-prefix}-tab--border-card & {
64
+ border: solid @tab-border;
65
+ border-width: 1px 1px 1px 0;
66
+ }
67
+
68
+ .@{bk-prefix}-tab--border-card & {
69
+ background: @tab-header-bg;
70
+ }
71
+
72
+ .@{bk-prefix}-tab--unborder-card & {
73
+ border-bottom: 1px solid @tab-border;
74
+ }
75
+
76
+
77
+
78
+
39
79
  > div {
40
80
  display: flex;
41
-
42
81
  flex-wrap: nowrap;
43
- margin-bottom: -1px;
44
-
45
- .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
46
- border-right: 1px solid @tab-border;
82
+ .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & ,.@{bk-prefix}-tab--border-card &{
83
+ margin-bottom: -1px;
47
84
  }
48
85
  }
49
86
 
50
87
  &-nav {
51
88
  position: relative;
89
+ //width: 100%;
90
+
52
91
  .@{bk-prefix}-tab--top & {
53
92
  overflow-x: auto;
54
93
  overflow-y: visible;
@@ -99,44 +138,9 @@
99
138
  &-setting {
100
139
  justify-self: flex-end;
101
140
  margin-left: auto;
141
+ white-space: nowrap;
102
142
  }
103
143
 
104
- .@{bk-prefix}-tab--left & {
105
- border-right: 1px solid @tab-border;
106
- }
107
-
108
- .@{bk-prefix}-tab--right & {
109
- border-left: 1px solid @tab-border;
110
- }
111
-
112
- .@{bk-prefix}-tab--vertical-tab & {
113
- border: 0;
114
- }
115
-
116
- .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
117
- flex-direction: column;
118
-
119
- > div {
120
- flex-direction: column;
121
- }
122
- }
123
-
124
- .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & {
125
- border-bottom: 1px solid @tab-border;
126
- }
127
-
128
- .@{bk-prefix}-tab--border-card & {
129
- border: solid @tab-border;
130
- border-width: 1px 1px 1px 0;
131
- }
132
-
133
- .@{bk-prefix}-tab--border-card & {
134
- background: @tab-header-bg;
135
- }
136
-
137
- .@{bk-prefix}-tab--unborder-card & {
138
- border-bottom: 1px solid @tab-border;
139
- }
140
144
 
141
145
  &-item {
142
146
  display: flex;
@@ -145,16 +149,6 @@
145
149
  justify-content: center;
146
150
  align-items: center;
147
151
 
148
- &:hover {
149
- color: @tab-active;
150
-
151
- .@{bk-prefix}-tab-header-item-close {
152
- display: block;
153
- margin-left: 5px;
154
- color: @danger-color;
155
- }
156
- }
157
-
158
152
  .@{bk-prefix}-tab--top & {
159
153
  padding: 0 20px;
160
154
  }
@@ -173,11 +167,10 @@
173
167
 
174
168
  .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
175
169
  border-right: 1px solid @tab-border;
176
- border-bottom: 1px solid @tab-border;
177
170
 
178
- &:last-of-type {
179
- border-right: none;
180
- }
171
+ //&:last-of-type {
172
+ // border-right: none;
173
+ //}
181
174
  }
182
175
 
183
176
  .@{bk-prefix}-tab--card-tab & {
@@ -204,15 +197,28 @@
204
197
 
205
198
  }
206
199
 
200
+ .@{bk-prefix}-tab--card-grid & {
201
+ height: 40px;
202
+ line-height: 40px;
203
+ background: #EAEBF0;
204
+ border-radius: 4px 4px 0 0;
205
+ margin-right: 8px;
206
+ }
207
+
207
208
  .@{bk-prefix}-tab-header-operation & {
208
209
  padding-right: 12px;
209
210
  padding-left: 12px;
210
211
  }
211
212
 
212
- &-close {
213
- display: none;
214
- font-size: 16px;
215
- color: @tab-gray;
213
+
214
+ &:hover {
215
+ color: @tab-active;
216
+
217
+ .@{bk-prefix}-tab-header--close {
218
+ display: block;
219
+ margin-left: 5px;
220
+ color: @danger-color;
221
+ }
216
222
  }
217
223
 
218
224
  }
@@ -240,6 +246,10 @@
240
246
 
241
247
  }
242
248
 
249
+ .@{bk-prefix}-tab--card-grid & {
250
+ background: #FFFFFF;
251
+ }
252
+
243
253
  /* 激活边框,跟随,不再用固定样式
244
254
  //.@{bk-prefix}-tab--unborder-card & {
245
255
  // border-bottom: 2px solid @tab-active;
@@ -255,6 +265,12 @@
255
265
 
256
266
  }
257
267
 
268
+ &--close {
269
+ display: none;
270
+ font-size: 16px;
271
+ color: @tab-gray;
272
+ }
273
+
258
274
  &--disabled {
259
275
  color: @tab-disable-color;
260
276
  pointer-events: none;
@@ -274,10 +290,17 @@
274
290
  flex: 1;
275
291
  padding: 10px;
276
292
 
293
+
277
294
  .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
278
295
  border: solid @tab-border;
279
296
  border-width: 0 1px 1px;
280
297
  }
298
+
299
+ .@{bk-prefix}-tab--card-grid & {
300
+ background: #FFFFFF;
301
+ box-shadow: 0 2px 4px 0 #1919290d;
302
+ border-radius: 0 4px 4px 4px;
303
+ }
281
304
  }
282
305
 
283
306
  &-panel {
@@ -133,6 +133,23 @@
133
133
  display: flex;
134
134
  color: var(--default-color);
135
135
  }
136
+ .bk-tab--left .bk-tab-header {
137
+ border-right: 1px solid var(--disable-color);
138
+ }
139
+ .bk-tab--right .bk-tab-header {
140
+ border-left: 1px solid var(--disable-color);
141
+ }
142
+ .bk-tab--vertical-tab .bk-tab-header {
143
+ border: 0;
144
+ }
145
+ .bk-tab--left .bk-tab-header,
146
+ .bk-tab--right .bk-tab-header {
147
+ flex-direction: column;
148
+ }
149
+ .bk-tab--left .bk-tab-header > div,
150
+ .bk-tab--right .bk-tab-header > div {
151
+ flex-direction: column;
152
+ }
136
153
  .bk-tab--card-tab .bk-tab-header,
137
154
  .bk-tab--vertical-tab .bk-tab-header {
138
155
  background: #F0F1F5;
@@ -140,15 +157,28 @@
140
157
  .bk-tab--card-tab .bk-tab-header {
141
158
  border-radius: 4px 4px 0;
142
159
  }
160
+ .bk-tab--card .bk-tab-header,
161
+ .bk-tab--vertical-card .bk-tab-header {
162
+ border-bottom: 1px solid var(--disable-color);
163
+ }
164
+ .bk-tab--border-card .bk-tab-header {
165
+ border: solid var(--disable-color);
166
+ border-width: 1px 1px 1px 0;
167
+ }
168
+ .bk-tab--border-card .bk-tab-header {
169
+ background: #FAFBFD;
170
+ }
171
+ .bk-tab--unborder-card .bk-tab-header {
172
+ border-bottom: 1px solid var(--disable-color);
173
+ }
143
174
  .bk-tab-header > div {
144
175
  display: flex;
145
176
  flex-wrap: nowrap;
146
- margin-bottom: -1px;
147
177
  }
148
178
  .bk-tab--card .bk-tab-header > div,
149
- .bk-tab--border-card .bk-tab-header > div,
150
- .bk-tab--vertical-card .bk-tab-header > div {
151
- border-right: 1px solid var(--disable-color);
179
+ .bk-tab--vertical-card .bk-tab-header > div,
180
+ .bk-tab--border-card .bk-tab-header > div {
181
+ margin-bottom: -1px;
152
182
  }
153
183
  .bk-tab-header-nav {
154
184
  position: relative;
@@ -193,37 +223,7 @@
193
223
  .bk-tab-header-setting {
194
224
  justify-self: flex-end;
195
225
  margin-left: auto;
196
- }
197
- .bk-tab--left .bk-tab-header {
198
- border-right: 1px solid var(--disable-color);
199
- }
200
- .bk-tab--right .bk-tab-header {
201
- border-left: 1px solid var(--disable-color);
202
- }
203
- .bk-tab--vertical-tab .bk-tab-header {
204
- border: 0;
205
- }
206
- .bk-tab--left .bk-tab-header,
207
- .bk-tab--right .bk-tab-header {
208
- flex-direction: column;
209
- }
210
- .bk-tab--left .bk-tab-header > div,
211
- .bk-tab--right .bk-tab-header > div {
212
- flex-direction: column;
213
- }
214
- .bk-tab--card .bk-tab-header,
215
- .bk-tab--vertical-card .bk-tab-header {
216
- border-bottom: 1px solid var(--disable-color);
217
- }
218
- .bk-tab--border-card .bk-tab-header {
219
- border: solid var(--disable-color);
220
- border-width: 1px 1px 1px 0;
221
- }
222
- .bk-tab--border-card .bk-tab-header {
223
- background: #FAFBFD;
224
- }
225
- .bk-tab--unborder-card .bk-tab-header {
226
- border-bottom: 1px solid var(--disable-color);
226
+ white-space: nowrap;
227
227
  }
228
228
  .bk-tab-header-item {
229
229
  display: flex;
@@ -232,14 +232,6 @@
232
232
  justify-content: center;
233
233
  align-items: center;
234
234
  }
235
- .bk-tab-header-item:hover {
236
- color: var(--primary-color);
237
- }
238
- .bk-tab-header-item:hover .bk-tab-header-item-close {
239
- display: block;
240
- margin-left: 5px;
241
- color: var(--danger-color);
242
- }
243
235
  .bk-tab--top .bk-tab-header-item {
244
236
  padding: 0 20px;
245
237
  }
@@ -258,12 +250,6 @@
258
250
  .bk-tab--border-card .bk-tab-header-item,
259
251
  .bk-tab--vertical-card .bk-tab-header-item {
260
252
  border-right: 1px solid var(--disable-color);
261
- border-bottom: 1px solid var(--disable-color);
262
- }
263
- .bk-tab--card .bk-tab-header-item:last-of-type,
264
- .bk-tab--border-card .bk-tab-header-item:last-of-type,
265
- .bk-tab--vertical-card .bk-tab-header-item:last-of-type {
266
- border-right: none;
267
253
  }
268
254
  .bk-tab--card-tab .bk-tab-header-item {
269
255
  position: relative;
@@ -284,14 +270,24 @@
284
270
  right: 0;
285
271
  left: initial;
286
272
  }
273
+ .bk-tab--card-grid .bk-tab-header-item {
274
+ height: 40px;
275
+ line-height: 40px;
276
+ background: #EAEBF0;
277
+ border-radius: 4px 4px 0 0;
278
+ margin-right: 8px;
279
+ }
287
280
  .bk-tab-header-operation .bk-tab-header-item {
288
281
  padding-right: 12px;
289
282
  padding-left: 12px;
290
283
  }
291
- .bk-tab-header-item-close {
292
- display: none;
293
- font-size: 16px;
294
- color: var(--light-gray);
284
+ .bk-tab-header-item:hover {
285
+ color: var(--primary-color);
286
+ }
287
+ .bk-tab-header-item:hover .bk-tab-header--close {
288
+ display: block;
289
+ margin-left: 5px;
290
+ color: var(--danger-color);
295
291
  }
296
292
  .bk-tab-header--active {
297
293
  color: var(--primary-color);
@@ -327,6 +323,14 @@
327
323
  /* stylelint-disable-next-line declaration-no-important */
328
324
  display: none !important;
329
325
  }
326
+ .bk-tab--card-grid .bk-tab-header--active {
327
+ background: #FFFFFF;
328
+ }
329
+ .bk-tab-header--close {
330
+ display: none;
331
+ font-size: 16px;
332
+ color: var(--light-gray);
333
+ }
330
334
  .bk-tab-header--disabled {
331
335
  color: #aaa;
332
336
  pointer-events: none;
@@ -348,6 +352,11 @@
348
352
  border: solid var(--disable-color);
349
353
  border-width: 0 1px 1px;
350
354
  }
355
+ .bk-tab--card-grid .bk-tab-content {
356
+ background: #FFFFFF;
357
+ box-shadow: 0 2px 4px 0 #1919290d;
358
+ border-radius: 0 4px 4px 4px;
359
+ }
351
360
  .bk-tab-panel {
352
361
  height: 100%;
353
362
  }
@@ -7,9 +7,6 @@ declare const BkTree: {
7
7
  search: string | number | boolean | import("./props").SearchOption;
8
8
  draggable: boolean;
9
9
  lineHeight: number;
10
- selected: string | number | {
11
- [key: string]: any;
12
- };
13
10
  prefixIcon: any;
14
11
  children: string;
15
12
  offsetLeft: number;
@@ -90,13 +87,9 @@ declare const BkTree: {
90
87
  };
91
88
  disableDrag: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
92
89
  default: (...args: any[]) => any;
93
- } & {
94
- default: (...args: any[]) => any;
95
90
  };
96
91
  disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
97
92
  default: (...args: any[]) => any;
98
- } & {
99
- default: (...args: any[]) => any;
100
93
  };
101
94
  dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
102
95
  default: boolean;
@@ -123,11 +116,7 @@ declare const BkTree: {
123
116
  };
124
117
  selected: import("vue-types").VueTypeDef<string | number | {
125
118
  [key: string]: any;
126
- }> & {
127
- default: string | number | (() => {
128
- [key: string]: any;
129
- });
130
- };
119
+ }>;
131
120
  autoCheckChildren: import("vue-types").VueTypeValidableDef<boolean> & {
132
121
  default: boolean;
133
122
  } & {
@@ -155,7 +144,7 @@ declare const BkTree: {
155
144
  onNodeDragOver?: (...args: any[]) => any;
156
145
  onNodeDragLeave?: (...args: any[]) => any;
157
146
  onNodeDrop?: (...args: any[]) => any;
158
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "search" | "draggable" | "lineHeight" | "selected" | "prefixIcon" | "children" | "offsetLeft" | "emptyText" | "nodeKey" | "indent" | "levelLine" | "virtualRender" | "disableDrag" | "disableDrop" | "dragSort" | "selectable" | "disabledFolderSelectable" | "showCheckbox" | "showNodeTypeIcon" | "autoCheckChildren" | "autoOpenParentNode" | "expandAll" | "nodeContentAction">;
147
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "search" | "draggable" | "lineHeight" | "prefixIcon" | "children" | "offsetLeft" | "emptyText" | "nodeKey" | "indent" | "levelLine" | "virtualRender" | "disableDrag" | "disableDrop" | "dragSort" | "selectable" | "disabledFolderSelectable" | "showCheckbox" | "showNodeTypeIcon" | "autoCheckChildren" | "autoOpenParentNode" | "expandAll" | "nodeContentAction">;
159
148
  $attrs: {
160
149
  [x: string]: unknown;
161
150
  };
@@ -230,13 +219,9 @@ declare const BkTree: {
230
219
  };
231
220
  disableDrag: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
232
221
  default: (...args: any[]) => any;
233
- } & {
234
- default: (...args: any[]) => any;
235
222
  };
236
223
  disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
237
224
  default: (...args: any[]) => any;
238
- } & {
239
- default: (...args: any[]) => any;
240
225
  };
241
226
  dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
242
227
  default: boolean;
@@ -263,11 +248,7 @@ declare const BkTree: {
263
248
  };
264
249
  selected: import("vue-types").VueTypeDef<string | number | {
265
250
  [key: string]: any;
266
- }> & {
267
- default: string | number | (() => {
268
- [key: string]: any;
269
- });
270
- };
251
+ }>;
271
252
  autoCheckChildren: import("vue-types").VueTypeValidableDef<boolean> & {
272
253
  default: boolean;
273
254
  } & {
@@ -309,9 +290,6 @@ declare const BkTree: {
309
290
  search: string | number | boolean | import("./props").SearchOption;
310
291
  draggable: boolean;
311
292
  lineHeight: number;
312
- selected: string | number | {
313
- [key: string]: any;
314
- };
315
293
  prefixIcon: any;
316
294
  children: string;
317
295
  offsetLeft: number;
@@ -412,13 +390,9 @@ declare const BkTree: {
412
390
  };
413
391
  disableDrag: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
414
392
  default: (...args: any[]) => any;
415
- } & {
416
- default: (...args: any[]) => any;
417
393
  };
418
394
  disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
419
395
  default: (...args: any[]) => any;
420
- } & {
421
- default: (...args: any[]) => any;
422
396
  };
423
397
  dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
424
398
  default: boolean;
@@ -445,11 +419,7 @@ declare const BkTree: {
445
419
  };
446
420
  selected: import("vue-types").VueTypeDef<string | number | {
447
421
  [key: string]: any;
448
- }> & {
449
- default: string | number | (() => {
450
- [key: string]: any;
451
- });
452
- };
422
+ }>;
453
423
  autoCheckChildren: import("vue-types").VueTypeValidableDef<boolean> & {
454
424
  default: boolean;
455
425
  } & {
@@ -542,13 +512,9 @@ declare const BkTree: {
542
512
  };
543
513
  disableDrag: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
544
514
  default: (...args: any[]) => any;
545
- } & {
546
- default: (...args: any[]) => any;
547
515
  };
548
516
  disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
549
517
  default: (...args: any[]) => any;
550
- } & {
551
- default: (...args: any[]) => any;
552
518
  };
553
519
  dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
554
520
  default: boolean;
@@ -575,11 +541,7 @@ declare const BkTree: {
575
541
  };
576
542
  selected: import("vue-types").VueTypeDef<string | number | {
577
543
  [key: string]: any;
578
- }> & {
579
- default: string | number | (() => {
580
- [key: string]: any;
581
- });
582
- };
544
+ }>;
583
545
  autoCheckChildren: import("vue-types").VueTypeValidableDef<boolean> & {
584
546
  default: boolean;
585
547
  } & {
@@ -621,9 +583,6 @@ declare const BkTree: {
621
583
  search: string | number | boolean | import("./props").SearchOption;
622
584
  draggable: boolean;
623
585
  lineHeight: number;
624
- selected: string | number | {
625
- [key: string]: any;
626
- };
627
586
  prefixIcon: any;
628
587
  children: string;
629
588
  offsetLeft: number;