webcake-ui-kit 1.2.13 → 1.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.
Files changed (35) hide show
  1. package/package.json +1 -2
  2. package/src/components/date-picker/date-picker.css +3 -1
  3. package/src/components/dropdown/Dropdown.vue +2 -2
  4. package/src/components/select-option/SelectOption.vue +2 -1
  5. package/src/components/select-option/select_option.css +0 -62
  6. package/src/components/select-option/select_option_sub.css +61 -0
  7. package/src/components/{table-v2 → table}/ColumnDragHandle.vue +2 -2
  8. package/src/components/table/Table.vue +250 -772
  9. package/src/components/{table-v2 → table}/TableColGroup.vue +2 -2
  10. package/src/components/{table-v2 → table}/TableEmpty.vue +2 -2
  11. package/src/components/{table-v2 → table}/TableLoading.vue +3 -3
  12. package/src/components/{table-v2 → table}/TableWrapper.vue +14 -9
  13. package/src/components/{table-v2 → table}/body/DragPreview.vue +4 -18
  14. package/src/components/{table-v2 → table}/body/TableBody.vue +6 -6
  15. package/src/components/{table-v2 → table}/body/TableCell.vue +8 -8
  16. package/src/components/{table-v2 → table}/body/TableRow.vue +4 -4
  17. package/src/components/{table-v2 → table}/header/TableHeader.vue +2 -2
  18. package/src/components/{table-v2 → table}/header/TableHeaderCell.vue +9 -9
  19. package/src/components/{table-v2 → table}/header/TableHeaderRow.vue +3 -3
  20. package/src/components/{table-v2 → table}/style/table-loading.css +3 -3
  21. package/src/components/{table-v2 → table}/style/table-wrapper.css +67 -51
  22. package/src/components/{table-v2 → table}/style/table.css +1 -1
  23. package/src/components/textarea/Textarea.vue +1 -1
  24. package/src/index.js +0 -1
  25. package/src/components/table/table.css +0 -396
  26. package/src/components/table-v2/Table.vue +0 -305
  27. /package/src/components/{table-v2 → table}/TableResizeObserver.vue +0 -0
  28. /package/src/components/{table-v2 → table}/body/MeasureCell.vue +0 -0
  29. /package/src/components/{table-v2 → table}/composables/useColumns.js +0 -0
  30. /package/src/components/{table-v2 → table}/composables/useSorter.js +0 -0
  31. /package/src/components/{table-v2 → table}/composables/useSticky.js +0 -0
  32. /package/src/components/{table-v2 → table}/constants.js +0 -0
  33. /package/src/components/{table-v2 → table}/context/createTableContext.js +0 -0
  34. /package/src/components/{table-v2 → table}/style/table-body.css +0 -0
  35. /package/src/components/{table-v2 → table}/style/table-header.css +0 -0
package/src/components/{table-v2 → table}/style/table-wrapper.css RENAMED
@@ -1,11 +1,11 @@
1
- .ui-table-v2__wrapper {
1
+ .ui-table__wrapper {
2
2
  overflow: hidden;
3
3
  border-radius: var(--rounded-2xl);
4
4
  border-inline-end: 1px solid var(--border-primary);
5
5
  border-inline-start: 1px solid var(--border-primary);
6
6
  }
7
7
 
8
- .ui-table-v2__wrapper table {
8
+ .ui-table__wrapper table {
9
9
  width: 100%;
10
10
  text-align: start;
11
11
  border-radius: 8px 8px 0 0;
@@ -13,22 +13,22 @@
13
13
  border-spacing: 0;
14
14
  }
15
15
 
16
- .ui-table-v2__wrapper .ui-table-v2__content {
16
+ .ui-table__wrapper .ui-table__content {
17
17
  border-top: 1px solid var(--border-primary);
18
18
  border-bottom: 1px solid var(--border-primary);
19
19
  }
20
20
 
21
- .ui-table-v2__wrapper .ui-table-v2__header-hold {
21
+ .ui-table__wrapper .ui-table__header-hold {
22
22
  border-top: 1px solid var(--border-primary);
23
23
  }
24
24
 
25
- .ui-table-v2__wrapper .ui-table-v2__body-hold {
25
+ .ui-table__wrapper .ui-table__body-hold {
26
26
  border-bottom: 1px solid var(--border-primary);
27
27
  }
28
28
 
29
29
  /* Common betwenn Header and Body */
30
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__header > tr > th,
31
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__body > tr > td {
30
+ .ui-table__wrapper ::v-deep .ui-table__header > tr > th,
31
+ .ui-table__wrapper ::v-deep .ui-table__body > tr > td {
32
32
  color: var(--primary-fg);
33
33
  font-size: var(--paragraph-small-font-size);
34
34
  line-height: var(--paragraph-small-line-height);
@@ -36,17 +36,17 @@
36
36
  border-bottom: 1px solid var(--border-primary);
37
37
  }
38
38
 
39
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__table--bordered .ui-table-v2__header > tr > th:not(:last-child),
40
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__table--bordered .ui-table-v2__body > tr > td:not(:last-child) {
39
+ .ui-table__wrapper ::v-deep .ui-table__table--bordered .ui-table__header > tr > th:not(:last-child),
40
+ .ui-table__wrapper ::v-deep .ui-table__table--bordered .ui-table__body > tr > td:not(:last-child) {
41
41
  border-inline-end: 1px solid var(--border-primary);
42
42
  }
43
43
 
44
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__table--bordered .ui-table-v2__header .ui-table-v2__header-cell--last {
44
+ .ui-table__wrapper ::v-deep .ui-table__table--bordered .ui-table__header .ui-table__header-cell--last {
45
45
  border-inline-end: 1px solid transparent !important;
46
46
  }
47
47
 
48
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__header-cell--ellipsis,
49
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__cell--ellipsis {
48
+ .ui-table__wrapper ::v-deep .ui-table__header-cell--ellipsis,
49
+ .ui-table__wrapper ::v-deep .ui-table__cell--ellipsis {
50
50
  overflow: hidden;
51
51
  white-space: nowrap;
52
52
  text-overflow: ellipsis;
@@ -55,7 +55,7 @@
55
55
  display: block;
56
56
  }
57
57
 
58
- .ui-table-v2__wrapper ::v-deep .wrapper-option {
58
+ .ui-table__wrapper ::v-deep .wrapper-option {
59
59
  height: 100%;
60
60
  width: 100%;
61
61
  display: flex;
@@ -63,30 +63,30 @@
63
63
  align-items: center;
64
64
  }
65
65
 
66
- .ui-table-v2__wrapper ::v-deep .wrapper-option .ui-checkbox {
66
+ .ui-table__wrapper ::v-deep .wrapper-option .ui-checkbox {
67
67
  margin: auto;
68
68
  }
69
69
 
70
- .ui-table-v2__wrapper ::v-deep .wrapper-option .drag-handle {
70
+ .ui-table__wrapper ::v-deep .wrapper-option .drag-handle {
71
71
  cursor: grab;
72
72
  }
73
73
 
74
- .ui-table-v2__wrapper--ping-left ::v-deep .ui-table-v2__cell--fixed-left__last {
74
+ .ui-table__wrapper--ping-left ::v-deep .ui-table__cell--fixed-left__last {
75
75
  box-shadow: var(--shadow-fixed-column-left);
76
76
  border-inline-end: none !important;
77
77
  }
78
78
 
79
- .ui-table-v2__wrapper--ping-right ::v-deep .ui-table-v2__cell--fixed-right__first {
79
+ .ui-table__wrapper--ping-right ::v-deep .ui-table__cell--fixed-right__first {
80
80
  box-shadow: var(--shadow-fixed-column-right);
81
81
  }
82
82
 
83
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__cell--fixed-left,
84
- .ui-table-v2__wrapper::v-deep .ui-table-v2__cell--fixed-right {
83
+ .ui-table__wrapper ::v-deep .ui-table__cell--fixed-left,
84
+ .ui-table__wrapper::v-deep .ui-table__cell--fixed-right {
85
85
  background: var(--primary-bg);
86
86
  z-index: 2;
87
87
  }
88
88
 
89
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__cell--fixed-left__last::after {
89
+ .ui-table__wrapper ::v-deep .ui-table__cell--fixed-left__last::after {
90
90
  position: absolute;
91
91
  top: 0;
92
92
  right: 0;
@@ -98,7 +98,7 @@
98
98
  pointer-events: none;
99
99
  }
100
100
 
101
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__cell--fixed-right__first::before {
101
+ .ui-table__wrapper ::v-deep .ui-table__cell--fixed-right__first::before {
102
102
  position: absolute;
103
103
  top: 0;
104
104
  bottom: -1px;
@@ -110,7 +110,7 @@
110
110
  pointer-events: none;
111
111
  }
112
112
 
113
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__cell-resize-handle {
113
+ .ui-table__wrapper ::v-deep .ui-table__cell-resize-handle {
114
114
  position: absolute;
115
115
  top: 0;
116
116
  height: 100% !important;
@@ -128,7 +128,7 @@
128
128
  align-items: center;
129
129
  }
130
130
 
131
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__cell-resize-handle .ui-table-v2__cell-resize-line {
131
+ .ui-table__wrapper ::v-deep .ui-table__cell-resize-handle .ui-table__cell-resize-line {
132
132
  display: block;
133
133
  width: 2px;
134
134
  margin-left: 7px;
@@ -136,20 +136,20 @@
136
136
  background: var(--border-focus);
137
137
  }
138
138
 
139
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__cell-resize-handle.reversed {
139
+ .ui-table__wrapper ::v-deep .ui-table__cell-resize-handle.reversed {
140
140
  right: auto;
141
141
  left: -8px;
142
142
  }
143
143
 
144
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__cell-resize-handle:hover .ui-table-v2__cell-resize-line,
145
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__cell-resize-handle.dragging .ui-table-v2__cell-resize-line {
144
+ .ui-table__wrapper ::v-deep .ui-table__cell-resize-handle:hover .ui-table__cell-resize-line,
145
+ .ui-table__wrapper ::v-deep .ui-table__cell-resize-handle.dragging .ui-table__cell-resize-line {
146
146
  opacity: 1;
147
147
  background-color: #1677ff;
148
148
  height: 100% !important;
149
149
  }
150
150
 
151
151
  /* Header */
152
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__header > tr > th {
152
+ .ui-table__wrapper ::v-deep .ui-table__header > tr > th {
153
153
  background: var(--secondary-bg);
154
154
  padding: var(--spacing-xs);
155
155
  font-weight: 500;
@@ -158,50 +158,66 @@
158
158
  }
159
159
 
160
160
  /* Body */
161
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__body .ui-table-v2__row {
161
+ .ui-table__wrapper ::v-deep .ui-table__body .ui-table__row {
162
162
  height: 50px;
163
163
  }
164
164
 
165
- .ui-table-v2__wrapper ::v-deep .drag-handle {
165
+ .ui-table__wrapper ::v-deep .drag-handle {
166
166
  cursor: grab;
167
167
  display: flex;
168
168
  align-items: center;
169
169
  color: var(--secondary-fg, #999);
170
170
  }
171
171
 
172
- .ui-table-v2__wrapper ::v-deep .drag-handle:active {
172
+ .ui-table__wrapper ::v-deep .drag-handle:active {
173
173
  cursor: grabbing;
174
174
  }
175
175
 
176
- .ui-table-v2__wrapper ::v-deep .sortable-chosen > td {
176
+ .ui-table__wrapper ::v-deep .sortable-chosen > td {
177
177
  background: var(--accent-1);
178
178
  opacity: 0.8;
179
179
  }
180
180
 
181
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__body > tr > td {
181
+ .ui-table__wrapper ::v-deep .ui-table__body > tr > td {
182
182
  padding: var(--spacing-xs);
183
183
  font-weight: 400;
184
184
  }
185
185
 
186
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__body > .ui-table-v2__row:hover > td {
186
+ .ui-table__wrapper ::v-deep .ui-table__body > .ui-table__row:hover > td {
187
187
  background: var(--accent-1);
188
188
  }
189
189
 
190
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__body .ui-table-v2__row--selected > td {
190
+ .ui-table__wrapper ::v-deep .ui-table__body .ui-table__row--selected > td {
191
191
  background: var(--accent-1);
192
192
  }
193
193
 
194
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__drag-preview .ui-table-v2__body > tr > td {
194
+ .ui-table__wrapper ::v-deep .ui-table__drag-preview .ui-table__body > tr > td {
195
195
  background: var(--primary-bg);
196
196
  position: unset;
197
197
  }
198
198
 
199
+ .ui-table__wrapper ::v-deep .ui-table__drag-preview {
200
+ position: fixed;
201
+ top: -10000px;
202
+ left: -10000px;
203
+ pointer-events: none;
204
+ border-collapse: separate;
205
+ border-spacing: 0;
206
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
207
+ border-radius: 4px;
208
+ overflow: hidden;
209
+ }
210
+
211
+ .ui-table__wrapper ::v-deep .ui-table__scrollbar-cell {
212
+ z-index: 2;
213
+ }
214
+
199
215
  /* Empty */
200
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__body > tr > td:has(.ui-table-v2__row-empty):hover {
216
+ .ui-table__wrapper ::v-deep .ui-table__body > tr > td:has(.ui-table__row-empty):hover {
201
217
  background: transparent;
202
218
  }
203
219
 
204
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__row-empty {
220
+ .ui-table__wrapper ::v-deep .ui-table__row-empty {
205
221
  min-height: 300px;
206
222
  display: flex;
207
223
  flex-direction: column;
@@ -209,74 +225,74 @@
209
225
  justify-content: center;
210
226
  }
211
227
 
212
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__row-empty .wrapper-img {
228
+ .ui-table__wrapper ::v-deep .ui-table__row-empty .wrapper-img {
213
229
  width: 120px;
214
230
  height: 120px;
215
231
  user-select: none;
216
232
  }
217
233
 
218
- .ui-table-v2__wrapper ::v-deep .ui-table-v2__row-empty .wrapper-img img {
234
+ .ui-table__wrapper ::v-deep .ui-table__row-empty .wrapper-img img {
219
235
  width: 100%;
220
236
  height: 100%;
221
237
  object-fit: cover;
222
238
  }
223
239
 
224
240
  /* Scrollbar */
225
- .ui-table-v2__body-hold::-webkit-scrollbar {
241
+ .ui-table__body-hold::-webkit-scrollbar {
226
242
  width: 10px;
227
243
  height: 10px;
228
244
  }
229
245
 
230
- .ui-table-v2__body-hold::-webkit-scrollbar-track:vertical {
246
+ .ui-table__body-hold::-webkit-scrollbar-track:vertical {
231
247
  border-left: 1px solid var(--border-primary);
232
248
  }
233
249
 
234
- .ui-table-v2__body-hold::-webkit-scrollbar-track:horizontal {
250
+ .ui-table__body-hold::-webkit-scrollbar-track:horizontal {
235
251
  border-top: 1px solid var(--border-primary);
236
252
  }
237
253
 
238
- .ui-table-v2__body-hold::-webkit-scrollbar-thumb {
254
+ .ui-table__body-hold::-webkit-scrollbar-thumb {
239
255
  background: var(--border-primary);
240
256
  border-radius: 3px;
241
257
  }
242
258
 
243
- .ui-table-v2__body-hold::-webkit-scrollbar-thumb:vertical {
259
+ .ui-table__body-hold::-webkit-scrollbar-thumb:vertical {
244
260
  border-left: 2px solid transparent;
245
261
  border-right: 1px solid transparent;
246
262
  background-clip: content-box;
247
263
  }
248
264
 
249
- .ui-table-v2__body-hold::-webkit-scrollbar-thumb:horizontal {
265
+ .ui-table__body-hold::-webkit-scrollbar-thumb:horizontal {
250
266
  border-top: 2px solid transparent;
251
267
  border-bottom: 1px solid transparent;
252
268
  background-clip: content-box;
253
269
  }
254
270
 
255
- .ui-table-v2__content::-webkit-scrollbar {
271
+ .ui-table__content::-webkit-scrollbar {
256
272
  width: 10px;
257
273
  height: 10px;
258
274
  }
259
275
 
260
- .ui-table-v2__content::-webkit-scrollbar-track:vertical {
276
+ .ui-table__content::-webkit-scrollbar-track:vertical {
261
277
  border-left: 1px solid var(--border-primary);
262
278
  }
263
279
 
264
- .ui-table-v2__content::-webkit-scrollbar-track:horizontal {
280
+ .ui-table__content::-webkit-scrollbar-track:horizontal {
265
281
  border-top: 1px solid var(--border-primary);
266
282
  }
267
283
 
268
- .ui-table-v2__content::-webkit-scrollbar-thumb {
284
+ .ui-table__content::-webkit-scrollbar-thumb {
269
285
  background: var(--border-primary);
270
286
  border-radius: 3px;
271
287
  }
272
288
 
273
- .ui-table-v2__content::-webkit-scrollbar-thumb:vertical {
289
+ .ui-table__content::-webkit-scrollbar-thumb:vertical {
274
290
  border-left: 2px solid transparent;
275
291
  border-right: 1px solid transparent;
276
292
  background-clip: content-box;
277
293
  }
278
294
 
279
- .ui-table-v2__content::-webkit-scrollbar-thumb:horizontal {
295
+ .ui-table__content::-webkit-scrollbar-thumb:horizontal {
280
296
  border-top: 2px solid transparent;
281
297
  border-bottom: 1px solid transparent;
282
298
  background-clip: content-box;
package/src/components/{table-v2 → table}/style/table.css RENAMED
@@ -1,4 +1,4 @@
1
- .ui-table-v2 {
1
+ .ui-table {
2
2
  width: 100%;
3
3
  font-family: var(--font-family-body);
4
4
  color: var(--primary-fg);
package/src/components/textarea/Textarea.vue CHANGED
@@ -68,7 +68,7 @@ export default {
68
68
  return String(this.currentValue).length
69
69
  },
70
70
  showCounter() {
71
- return this.showCount || this.maxLength !== undefined
71
+ return this.showCount
72
72
  }
73
73
  },
74
74
  watch: {
package/src/index.js CHANGED
@@ -40,7 +40,6 @@ export { default as WkSpinner } from './components/spinner/Spinner.vue'
40
40
  export { default as WkSwitch } from './components/switch/Switch.vue'
41
41
  export { default as WkSwitchGroup } from './components/switch-group/SwitchGroup.vue'
42
42
  export { default as WkTable } from './components/table/Table.vue'
43
- export { default as WkTableV2 } from './components/table-v2/Table.vue'
44
43
  export { default as WkTabs } from './components/tabs/Tabs.vue'
45
44
  export { default as WkTag } from './components/tag/Tag.vue'
46
45
  export { default as WkTextarea } from './components/textarea/Textarea.vue'