@dataloop-ai/components 0.19.196 → 0.19.198
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/package.json +1 -1
- package/src/components/compound/DlSlider/DlSlider.vue +16 -16
- package/src/components/compound/DlSlider/components/DlSliderInput.vue +12 -2
- package/src/components/compound/DlTable/DlTable.vue +40 -30
- package/src/components/compound/DlTable/components/DlTh.vue +12 -10
- package/src/components/compound/DlTable/styles/dl-table-styles.scss +37 -10
- package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue +3 -13
- package/src/components/shared/DlVirtualScroll/useVirtualScroll.ts +5 -1
- package/src/demos/DlSliderDemo.vue +10 -4
- package/src/demos/DlTableDemo.vue +5 -12
- package/src/utils/table-columns.ts +2 -3
package/package.json
CHANGED
|
@@ -1,14 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
|
|
4
|
-
class="slider-content"
|
|
5
|
-
:style="sliderStyles"
|
|
6
|
-
>
|
|
7
|
-
<div
|
|
8
|
-
v-if="slim"
|
|
9
|
-
class="slider slim"
|
|
10
|
-
data-test="slim-slider"
|
|
11
|
-
>
|
|
2
|
+
<div :id="uuid" class="slider-content" :style="sliderStyles">
|
|
3
|
+
<div v-if="slim" class="slider slim" data-test="slim-slider">
|
|
12
4
|
<span class="text capitalize">{{ text }}</span>
|
|
13
5
|
<dl-slider-input
|
|
14
6
|
v-model="value"
|
|
@@ -18,6 +10,8 @@
|
|
|
18
10
|
:disabled="disabled"
|
|
19
11
|
:style="{ marginRight: '10px' }"
|
|
20
12
|
data-test="slim-slider-input"
|
|
13
|
+
@focus="handleFocus"
|
|
14
|
+
@blur="handleBlur"
|
|
21
15
|
/>
|
|
22
16
|
<div class="slider-bar-container">
|
|
23
17
|
<dl-slider-base
|
|
@@ -35,11 +29,7 @@
|
|
|
35
29
|
/>
|
|
36
30
|
</div>
|
|
37
31
|
</div>
|
|
38
|
-
<div
|
|
39
|
-
v-else
|
|
40
|
-
class="slider non-slim"
|
|
41
|
-
data-test="non-slim-slider"
|
|
42
|
-
>
|
|
32
|
+
<div v-else class="slider non-slim" data-test="non-slim-slider">
|
|
43
33
|
<div class="header">
|
|
44
34
|
<div class="row text capitalize">
|
|
45
35
|
{{ text }}
|
|
@@ -72,6 +62,8 @@
|
|
|
72
62
|
:disabled="disabled"
|
|
73
63
|
data-test="non-slim-slider-input"
|
|
74
64
|
@change="onChange"
|
|
65
|
+
@focus="handleFocus"
|
|
66
|
+
@blur="handleBlur"
|
|
75
67
|
/>
|
|
76
68
|
</div>
|
|
77
69
|
</div>
|
|
@@ -184,7 +176,7 @@ export default defineComponent({
|
|
|
184
176
|
required: false
|
|
185
177
|
}
|
|
186
178
|
},
|
|
187
|
-
emits: ['update:model-value', 'change'],
|
|
179
|
+
emits: ['update:model-value', 'change', 'input-focus', 'input-blur'],
|
|
188
180
|
setup(props, { emit }) {
|
|
189
181
|
const { modelValue, min, max, textColor, width, thumbSize, color } =
|
|
190
182
|
toRefs(props)
|
|
@@ -256,6 +248,14 @@ export default defineComponent({
|
|
|
256
248
|
onChange,
|
|
257
249
|
handleResetButtonClick
|
|
258
250
|
}
|
|
251
|
+
},
|
|
252
|
+
methods: {
|
|
253
|
+
handleFocus(e: Event) {
|
|
254
|
+
this.$emit('input-focus', e)
|
|
255
|
+
},
|
|
256
|
+
handleBlur(e: Event) {
|
|
257
|
+
this.$emit('input-blur', e)
|
|
258
|
+
}
|
|
259
259
|
}
|
|
260
260
|
})
|
|
261
261
|
</script>
|
|
@@ -9,7 +9,9 @@
|
|
|
9
9
|
:disabled="disabled"
|
|
10
10
|
@input="handleChange"
|
|
11
11
|
@change="handleChange"
|
|
12
|
-
|
|
12
|
+
@focus="handleFocus"
|
|
13
|
+
@blur="handleBlur"
|
|
14
|
+
/>
|
|
13
15
|
</template>
|
|
14
16
|
|
|
15
17
|
<script lang="ts">
|
|
@@ -46,7 +48,7 @@ export default defineComponent({
|
|
|
46
48
|
default: false
|
|
47
49
|
}
|
|
48
50
|
},
|
|
49
|
-
emits: ['update:model-value', 'change'],
|
|
51
|
+
emits: ['update:model-value', 'change', 'focus', 'blur'],
|
|
50
52
|
setup(props, { emit }) {
|
|
51
53
|
const modelRef = toRef(props, 'modelValue')
|
|
52
54
|
const sliderInput = ref<HTMLInputElement>(null)
|
|
@@ -75,6 +77,14 @@ export default defineComponent({
|
|
|
75
77
|
handleChange: debouncedHandleChange
|
|
76
78
|
}
|
|
77
79
|
},
|
|
80
|
+
methods: {
|
|
81
|
+
handleFocus(e: Event) {
|
|
82
|
+
this.$emit('focus', e)
|
|
83
|
+
},
|
|
84
|
+
handleBlur(e: Event) {
|
|
85
|
+
this.$emit('blur', e)
|
|
86
|
+
}
|
|
87
|
+
},
|
|
78
88
|
template: 'dl-slider-input'
|
|
79
89
|
})
|
|
80
90
|
</script>
|
|
@@ -58,20 +58,20 @@
|
|
|
58
58
|
<DlTr>
|
|
59
59
|
<th
|
|
60
60
|
v-if="hasDraggableRows"
|
|
61
|
-
class="dl-table--col-auto-
|
|
61
|
+
class="dl-table--col-auto-width empty-col"
|
|
62
62
|
:data-resizable="false"
|
|
63
63
|
style="width: 25px"
|
|
64
64
|
@mousedown="stopAndPrevent"
|
|
65
65
|
/>
|
|
66
66
|
<th
|
|
67
67
|
v-if="singleSelection"
|
|
68
|
-
class="dl-table--col-auto-
|
|
68
|
+
class="dl-table--col-auto-width dl-table--col-checkbox-wrapper"
|
|
69
69
|
@mousedown="stopAndPrevent"
|
|
70
70
|
/>
|
|
71
71
|
|
|
72
72
|
<th
|
|
73
73
|
v-else-if="multipleSelection"
|
|
74
|
-
class="dl-table--col-auto-
|
|
74
|
+
class="dl-table--col-auto-width dl-table--col-checkbox-wrapper"
|
|
75
75
|
:data-resizable="false"
|
|
76
76
|
@mousedown="stopAndPrevent"
|
|
77
77
|
>
|
|
@@ -93,12 +93,12 @@
|
|
|
93
93
|
<th
|
|
94
94
|
v-if="expandableRows"
|
|
95
95
|
style="width: 26px"
|
|
96
|
-
class="dl-table--col-auto-
|
|
96
|
+
class="dl-table--col-auto-width dl-table--col-icon-wrapper"
|
|
97
97
|
/>
|
|
98
98
|
|
|
99
99
|
<th
|
|
100
100
|
v-if="isTreeTable"
|
|
101
|
-
class="dl-table--col-auto-
|
|
101
|
+
class="dl-table--col-auto-width empty-col"
|
|
102
102
|
:data-resizable="false"
|
|
103
103
|
style="width: 25px; padding: 5px"
|
|
104
104
|
/>
|
|
@@ -127,16 +127,16 @@
|
|
|
127
127
|
}
|
|
128
128
|
"
|
|
129
129
|
>
|
|
130
|
-
<dl-ellipsis>
|
|
130
|
+
<dl-ellipsis v-if="fitAllColumns">
|
|
131
131
|
{{ col.label }}
|
|
132
132
|
</dl-ellipsis>
|
|
133
|
+
<span v-else> {{ col.label }} </span>
|
|
133
134
|
</span>
|
|
134
135
|
</DlTh>
|
|
135
136
|
</slot>
|
|
136
137
|
<DlTh
|
|
137
138
|
v-if="showRowActions"
|
|
138
139
|
key="visibleColumnsSlot"
|
|
139
|
-
:col-index="-1"
|
|
140
140
|
no-tooltip
|
|
141
141
|
padding="0"
|
|
142
142
|
>
|
|
@@ -291,7 +291,7 @@
|
|
|
291
291
|
</td>
|
|
292
292
|
<td
|
|
293
293
|
v-if="hasSelectionMode"
|
|
294
|
-
class="dl-table--col-auto-
|
|
294
|
+
class="dl-table--col-auto-width"
|
|
295
295
|
>
|
|
296
296
|
<slot
|
|
297
297
|
name="body-selection"
|
|
@@ -362,7 +362,6 @@
|
|
|
362
362
|
v-if="showRowActions"
|
|
363
363
|
key="visibleColumnsSlot"
|
|
364
364
|
class="visible-columns-justify-end"
|
|
365
|
-
:col-index="-1"
|
|
366
365
|
no-tooltip
|
|
367
366
|
>
|
|
368
367
|
<slot
|
|
@@ -436,20 +435,20 @@
|
|
|
436
435
|
<DlTr>
|
|
437
436
|
<th
|
|
438
437
|
v-if="hasDraggableRows"
|
|
439
|
-
class="dl-table--col-auto-
|
|
438
|
+
class="dl-table--col-auto-width empty-col"
|
|
440
439
|
:data-resizable="false"
|
|
441
440
|
style="width: 25px"
|
|
442
441
|
@mousedown="stopAndPrevent"
|
|
443
442
|
/>
|
|
444
443
|
<th
|
|
445
444
|
v-if="singleSelection"
|
|
446
|
-
class="dl-table--col-auto-
|
|
445
|
+
class="dl-table--col-auto-width dl-table--col-checkbox-wrapper"
|
|
447
446
|
@mousedown="stopAndPrevent"
|
|
448
447
|
/>
|
|
449
448
|
|
|
450
449
|
<th
|
|
451
450
|
v-else-if="multipleSelection"
|
|
452
|
-
class="dl-table--col-auto-
|
|
451
|
+
class="dl-table--col-auto-width dl-table--col-checkbox-wrapper"
|
|
453
452
|
:data-resizable="false"
|
|
454
453
|
@mousedown="stopAndPrevent"
|
|
455
454
|
>
|
|
@@ -471,12 +470,12 @@
|
|
|
471
470
|
<th
|
|
472
471
|
v-if="expandableRows"
|
|
473
472
|
style="width: 26px"
|
|
474
|
-
class="dl-table--col-auto-
|
|
473
|
+
class="dl-table--col-auto-width dl-table--col-icon-wrapper"
|
|
475
474
|
/>
|
|
476
475
|
|
|
477
476
|
<th
|
|
478
477
|
v-if="isTreeTable"
|
|
479
|
-
class="dl-table--col-auto-
|
|
478
|
+
class="dl-table--col-auto-width empty-col"
|
|
480
479
|
:data-resizable="false"
|
|
481
480
|
style="width: 25px; padding: 5px"
|
|
482
481
|
/>
|
|
@@ -506,16 +505,16 @@
|
|
|
506
505
|
}
|
|
507
506
|
"
|
|
508
507
|
>
|
|
509
|
-
<dl-ellipsis>
|
|
508
|
+
<dl-ellipsis v-if="fitAllColumns">
|
|
510
509
|
{{ col.label }}
|
|
511
510
|
</dl-ellipsis>
|
|
511
|
+
<span v-else> {{ col.label }} </span>
|
|
512
512
|
</span>
|
|
513
513
|
</DlTh>
|
|
514
514
|
</slot>
|
|
515
515
|
<DlTh
|
|
516
516
|
v-if="showRowActions"
|
|
517
517
|
key="visibleColumnsSlot"
|
|
518
|
-
:col-index="-1"
|
|
519
518
|
no-tooltip
|
|
520
519
|
:padding="isTreeTable ? '0' : '0 10px'"
|
|
521
520
|
>
|
|
@@ -689,7 +688,7 @@
|
|
|
689
688
|
</td>
|
|
690
689
|
<td
|
|
691
690
|
v-if="hasSelectionMode"
|
|
692
|
-
class="dl-table--col-auto-
|
|
691
|
+
class="dl-table--col-auto-width"
|
|
693
692
|
>
|
|
694
693
|
<slot
|
|
695
694
|
name="body-selection"
|
|
@@ -758,7 +757,6 @@
|
|
|
758
757
|
v-if="showRowActions"
|
|
759
758
|
key="visibleColumnsSlot"
|
|
760
759
|
class="visible-columns-justify-end"
|
|
761
|
-
:col-index="-1"
|
|
762
760
|
no-tooltip
|
|
763
761
|
>
|
|
764
762
|
<slot
|
|
@@ -854,10 +852,7 @@
|
|
|
854
852
|
<div v-else class="dl-table__control">
|
|
855
853
|
<slot name="bottom" v-bind="marginalsScope">
|
|
856
854
|
<div
|
|
857
|
-
v-if="
|
|
858
|
-
hasBotomSelectionBanner &&
|
|
859
|
-
selectedRowsLabel(rowsSelectedNumber)
|
|
860
|
-
"
|
|
855
|
+
v-if="hasBotomSelectionBanner"
|
|
861
856
|
class="dl-table__control"
|
|
862
857
|
>
|
|
863
858
|
<div>
|
|
@@ -895,6 +890,7 @@ import {
|
|
|
895
890
|
getCurrentInstance,
|
|
896
891
|
ComputedRef,
|
|
897
892
|
onMounted,
|
|
893
|
+
onBeforeUnmount,
|
|
898
894
|
toRefs,
|
|
899
895
|
nextTick,
|
|
900
896
|
PropType
|
|
@@ -1259,7 +1255,6 @@ export default defineComponent({
|
|
|
1259
1255
|
noDataLabel,
|
|
1260
1256
|
columns,
|
|
1261
1257
|
fitAllColumns,
|
|
1262
|
-
stickyColumns,
|
|
1263
1258
|
resizable,
|
|
1264
1259
|
hidePagination,
|
|
1265
1260
|
hideSelectedBanner,
|
|
@@ -1397,7 +1392,7 @@ export default defineComponent({
|
|
|
1397
1392
|
return computedPagination.value.rowsNumber || rows.value.length
|
|
1398
1393
|
})
|
|
1399
1394
|
|
|
1400
|
-
|
|
1395
|
+
const updateTableSizing = () => {
|
|
1401
1396
|
tableEl =
|
|
1402
1397
|
tableRef.value ||
|
|
1403
1398
|
virtScrollRef.value.rootRef.querySelector('table') ||
|
|
@@ -1407,10 +1402,19 @@ export default defineComponent({
|
|
|
1407
1402
|
setAllColumnWidths(
|
|
1408
1403
|
tableEl,
|
|
1409
1404
|
columns.value as DlTableColumn[],
|
|
1410
|
-
stickyColumns
|
|
1411
|
-
fitAllColumns
|
|
1405
|
+
props.stickyColumns,
|
|
1406
|
+
props.fitAllColumns
|
|
1412
1407
|
)
|
|
1413
1408
|
})
|
|
1409
|
+
return tableEl
|
|
1410
|
+
}
|
|
1411
|
+
|
|
1412
|
+
onMounted(() => {
|
|
1413
|
+
const tableEl = updateTableSizing()
|
|
1414
|
+
window.addEventListener(
|
|
1415
|
+
'virtual-scroll-content-update',
|
|
1416
|
+
updateTableSizing
|
|
1417
|
+
)
|
|
1414
1418
|
if (visibleColumns.value) return
|
|
1415
1419
|
if (resizable.value) {
|
|
1416
1420
|
applyResizableColumns(tableEl, vm)
|
|
@@ -1423,6 +1427,12 @@ export default defineComponent({
|
|
|
1423
1427
|
)
|
|
1424
1428
|
}
|
|
1425
1429
|
})
|
|
1430
|
+
onBeforeUnmount(() => {
|
|
1431
|
+
window.removeEventListener(
|
|
1432
|
+
'virtual-scroll-content-update',
|
|
1433
|
+
updateTableSizing
|
|
1434
|
+
)
|
|
1435
|
+
})
|
|
1426
1436
|
|
|
1427
1437
|
watch(
|
|
1428
1438
|
hasVirtScroll,
|
|
@@ -1438,8 +1448,8 @@ export default defineComponent({
|
|
|
1438
1448
|
setAllColumnWidths(
|
|
1439
1449
|
tableEl,
|
|
1440
1450
|
props.columns as DlTableColumn[],
|
|
1441
|
-
stickyColumns
|
|
1442
|
-
fitAllColumns
|
|
1451
|
+
props.stickyColumns,
|
|
1452
|
+
props.fitAllColumns
|
|
1443
1453
|
)
|
|
1444
1454
|
})
|
|
1445
1455
|
if (visibleColumns.value) return
|
|
@@ -1478,8 +1488,8 @@ export default defineComponent({
|
|
|
1478
1488
|
setAllColumnWidths(
|
|
1479
1489
|
tableRef.value,
|
|
1480
1490
|
newColumns as DlTableColumn[],
|
|
1481
|
-
stickyColumns
|
|
1482
|
-
fitAllColumns
|
|
1491
|
+
props.stickyColumns,
|
|
1492
|
+
props.fitAllColumns
|
|
1483
1493
|
)
|
|
1484
1494
|
})
|
|
1485
1495
|
},
|
|
@@ -9,16 +9,18 @@
|
|
|
9
9
|
@mouseleave="iconHover = false"
|
|
10
10
|
>
|
|
11
11
|
<div class="inner-th-wrapper">
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
12
|
+
<span v-if="isSortable && align === 'right'" class="th-sort-icon">
|
|
13
|
+
<dl-icon
|
|
14
|
+
:class="iconClass"
|
|
15
|
+
:icon="computedSortIcon"
|
|
16
|
+
size="16px"
|
|
17
|
+
:style="
|
|
18
|
+
!isCurrentlySorted && !iconHover
|
|
19
|
+
? 'opacity: 0 !important;'
|
|
20
|
+
: ''
|
|
21
|
+
"
|
|
22
|
+
/>
|
|
23
|
+
</span>
|
|
22
24
|
<dl-tooltip v-if="hasEllipsis">
|
|
23
25
|
<slot />
|
|
24
26
|
</dl-tooltip>
|
|
@@ -21,28 +21,42 @@
|
|
|
21
21
|
z-index: 50;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
+
.dl-th {
|
|
25
|
+
z-index: 100;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.dl-th.sticky-col {
|
|
29
|
+
z-index: 101;
|
|
30
|
+
}
|
|
31
|
+
|
|
24
32
|
.inner-th-wrapper {
|
|
25
33
|
display: flex;
|
|
26
34
|
align-items: center;
|
|
27
35
|
justify-content: space-between;
|
|
28
|
-
gap: 6px;
|
|
29
36
|
height: 34px;
|
|
30
37
|
position: relative;
|
|
38
|
+
line-height: 34px;
|
|
39
|
+
&--left {
|
|
40
|
+
left: 0;
|
|
41
|
+
transform: none;
|
|
42
|
+
}
|
|
31
43
|
}
|
|
44
|
+
|
|
32
45
|
.inner-th {
|
|
33
46
|
display: inline-block;
|
|
34
47
|
flex: 0 1 auto;
|
|
35
|
-
position: absolute;
|
|
36
48
|
left: 50%;
|
|
37
49
|
transform: translateX(-50%);
|
|
38
50
|
overflow: hidden;
|
|
39
51
|
position: relative;
|
|
40
52
|
line-height: 34px;
|
|
53
|
+
|
|
41
54
|
&--left {
|
|
42
55
|
left: 0;
|
|
43
56
|
transform: none;
|
|
44
57
|
}
|
|
45
58
|
}
|
|
59
|
+
|
|
46
60
|
.th-icons {
|
|
47
61
|
display: flex;
|
|
48
62
|
flex: 0 1 auto;
|
|
@@ -51,6 +65,15 @@
|
|
|
51
65
|
justify-content: flex-end;
|
|
52
66
|
}
|
|
53
67
|
|
|
68
|
+
.th-sort-icon {
|
|
69
|
+
display: flex;
|
|
70
|
+
flex: 0 1 auto;
|
|
71
|
+
margin-right: auto;
|
|
72
|
+
align-items: center;
|
|
73
|
+
justify-content: flex-start;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
|
|
54
77
|
.expanded-row {
|
|
55
78
|
display: flex;
|
|
56
79
|
justify-content: center;
|
|
@@ -61,7 +84,7 @@
|
|
|
61
84
|
border-collapse: separate;
|
|
62
85
|
border-spacing: 0;
|
|
63
86
|
|
|
64
|
-
&__drag-icon
|
|
87
|
+
&__drag-icon>div {
|
|
65
88
|
transition: all ease-in 0.1s;
|
|
66
89
|
opacity: 0;
|
|
67
90
|
}
|
|
@@ -115,7 +138,7 @@
|
|
|
115
138
|
height: 40px;
|
|
116
139
|
|
|
117
140
|
&:not(.dl-tr--no-hover):hover {
|
|
118
|
-
.dl-table__drag-icon
|
|
141
|
+
.dl-table__drag-icon>div {
|
|
119
142
|
opacity: 1;
|
|
120
143
|
}
|
|
121
144
|
td:not(.dl-td--no-hover) {
|
|
@@ -183,7 +206,7 @@
|
|
|
183
206
|
}
|
|
184
207
|
}
|
|
185
208
|
|
|
186
|
-
tbody
|
|
209
|
+
tbody>tr:not(.dl-tr--no-hover):hover>td:not(.dl-td--no-hover):before {
|
|
187
210
|
content: '';
|
|
188
211
|
}
|
|
189
212
|
|
|
@@ -213,6 +236,7 @@
|
|
|
213
236
|
}
|
|
214
237
|
|
|
215
238
|
&--no-wrap {
|
|
239
|
+
|
|
216
240
|
th,
|
|
217
241
|
td {
|
|
218
242
|
white-space: nowrap;
|
|
@@ -222,12 +246,12 @@
|
|
|
222
246
|
&__container {
|
|
223
247
|
position: relative;
|
|
224
248
|
|
|
225
|
-
|
|
249
|
+
*>div:first-child {
|
|
226
250
|
border-top-left-radius: inherit;
|
|
227
251
|
border-top-right-radius: inherit;
|
|
228
252
|
}
|
|
229
253
|
|
|
230
|
-
|
|
254
|
+
*>div:last-child {
|
|
231
255
|
border-bottom-left-radius: inherit;
|
|
232
256
|
border-bottom-right-radius: inherit;
|
|
233
257
|
}
|
|
@@ -338,7 +362,7 @@
|
|
|
338
362
|
td {
|
|
339
363
|
border-color: var(--dl-color-separator);
|
|
340
364
|
|
|
341
|
-
|
|
365
|
+
&>label {
|
|
342
366
|
padding: 0;
|
|
343
367
|
}
|
|
344
368
|
}
|
|
@@ -464,6 +488,7 @@
|
|
|
464
488
|
}
|
|
465
489
|
|
|
466
490
|
.dl-table__select {
|
|
491
|
+
|
|
467
492
|
.dl-field__control,
|
|
468
493
|
.dl-field__native {
|
|
469
494
|
min-height: 24px;
|
|
@@ -494,18 +519,20 @@
|
|
|
494
519
|
|
|
495
520
|
.dl-table--horizontal-separator,
|
|
496
521
|
.dl-table--cell-separator {
|
|
522
|
+
|
|
497
523
|
thead th,
|
|
498
|
-
tbody tr:not(:last-child)
|
|
524
|
+
tbody tr:not(:last-child)>td {
|
|
499
525
|
border-bottom-width: 1px;
|
|
500
526
|
}
|
|
501
527
|
|
|
502
|
-
tbody:not(:last-child)
|
|
528
|
+
tbody:not(:last-child)>tr>td {
|
|
503
529
|
border-bottom-width: 1px;
|
|
504
530
|
}
|
|
505
531
|
}
|
|
506
532
|
|
|
507
533
|
.dl-table--vertical-separator,
|
|
508
534
|
.dl-table--cell-separator {
|
|
535
|
+
|
|
509
536
|
td,
|
|
510
537
|
th {
|
|
511
538
|
border-left-width: 1px;
|
|
@@ -14,11 +14,7 @@
|
|
|
14
14
|
v-if="hasDraggableRows"
|
|
15
15
|
:style="`width: 25px; opacity: ${isDragIconVisible ? '1' : '0'}`"
|
|
16
16
|
>
|
|
17
|
-
<dl-icon
|
|
18
|
-
class="draggable-icon"
|
|
19
|
-
icon="icon-dl-drag"
|
|
20
|
-
size="12px"
|
|
21
|
-
/>
|
|
17
|
+
<dl-icon class="draggable-icon" icon="icon-dl-drag" size="12px" />
|
|
22
18
|
</td>
|
|
23
19
|
<td class="chevron-icon">
|
|
24
20
|
<DlIcon
|
|
@@ -27,14 +23,8 @@
|
|
|
27
23
|
@click.stop.prevent="emitUpdateExpandedRow"
|
|
28
24
|
/>
|
|
29
25
|
</td>
|
|
30
|
-
<td
|
|
31
|
-
v-
|
|
32
|
-
class="dl-table--col-auto-with"
|
|
33
|
-
>
|
|
34
|
-
<slot
|
|
35
|
-
name="body-selection"
|
|
36
|
-
v-bind="bindBodySelection"
|
|
37
|
-
>
|
|
26
|
+
<td v-if="hasSelectionMode" class="dl-table--col-auto-width">
|
|
27
|
+
<slot name="body-selection" v-bind="bindBodySelection">
|
|
38
28
|
<DlCheckbox
|
|
39
29
|
style="padding-left: 10px"
|
|
40
30
|
:color="color"
|
|
@@ -846,6 +846,7 @@ export function useVirtualScroll({
|
|
|
846
846
|
['--dl-virtual-scroll-item-' + paddingSize]:
|
|
847
847
|
virtualScrollItemSizeComputed.value + 'px'
|
|
848
848
|
}
|
|
849
|
+
const onUpdate = new Event('virtual-scroll-content-update')
|
|
849
850
|
|
|
850
851
|
return [
|
|
851
852
|
tag === 'tbody'
|
|
@@ -890,7 +891,10 @@ export function useVirtualScroll({
|
|
|
890
891
|
ref: styles ? 'grid' : contentRef,
|
|
891
892
|
tabindex: -1
|
|
892
893
|
},
|
|
893
|
-
|
|
894
|
+
(() => {
|
|
895
|
+
window.dispatchEvent(onUpdate)
|
|
896
|
+
return content.flat()
|
|
897
|
+
})()
|
|
894
898
|
),
|
|
895
899
|
|
|
896
900
|
tag === 'tbody'
|
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
:readonly="readonly"
|
|
12
12
|
:disabled="disabled"
|
|
13
13
|
@change="handleChange"
|
|
14
|
+
@input-focus="handleFocus"
|
|
15
|
+
@input-blur="handleBlur"
|
|
14
16
|
/>
|
|
15
17
|
<div>
|
|
16
|
-
<button @click="slim = !slim">
|
|
17
|
-
slim: {{ slim }}
|
|
18
|
-
</button>
|
|
18
|
+
<button @click="slim = !slim">slim: {{ slim }}</button>
|
|
19
19
|
<button @click="readonly = !readonly">
|
|
20
20
|
Readonly: {{ readonly }}
|
|
21
21
|
</button>
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
</button>
|
|
25
25
|
</div>
|
|
26
26
|
<div>
|
|
27
|
-
Events: <br
|
|
27
|
+
Events: <br />
|
|
28
28
|
{{ events }}
|
|
29
29
|
</div>
|
|
30
30
|
</div>
|
|
@@ -58,6 +58,12 @@ export default defineComponent({
|
|
|
58
58
|
handleChange(value: number) {
|
|
59
59
|
console.log(`@@@ handling change ${value}`)
|
|
60
60
|
this.events[1] = `@@@ handling change ${value}`
|
|
61
|
+
},
|
|
62
|
+
handleFocus(event: Event) {
|
|
63
|
+
this.events[1] = `@@@ Input Focus `
|
|
64
|
+
},
|
|
65
|
+
handleBlur(event: Event) {
|
|
66
|
+
this.events[1] = `@@@ Input Blur `
|
|
61
67
|
}
|
|
62
68
|
},
|
|
63
69
|
template: 'dl-slider-demo'
|
|
@@ -143,7 +143,6 @@
|
|
|
143
143
|
:virtual-scroll="vScroll"
|
|
144
144
|
style="height: 500px"
|
|
145
145
|
:rows-per-page-options="rowsPerPageOptions"
|
|
146
|
-
:selected-rows-label="(val) => 'Selected rows ' + val"
|
|
147
146
|
@row-click="log"
|
|
148
147
|
@th-click="log"
|
|
149
148
|
@update:selected="updateSeleted"
|
|
@@ -261,10 +260,11 @@
|
|
|
261
260
|
</div>
|
|
262
261
|
|
|
263
262
|
<div style="margin-top: 100px">
|
|
264
|
-
With sticky columns: both
|
|
263
|
+
With sticky columns: both AND virtual scroll
|
|
265
264
|
<DlTable
|
|
266
265
|
:columns="[...tableColumns, ...tableColumns]"
|
|
267
266
|
sticky-columns="both"
|
|
267
|
+
:virtual-scroll="true"
|
|
268
268
|
:rows="tableRows"
|
|
269
269
|
row-key="id"
|
|
270
270
|
style="height: 300px"
|
|
@@ -556,13 +556,8 @@
|
|
|
556
556
|
:visible-columns="
|
|
557
557
|
tableColumns.slice(0, -1).map((c) => c.name)
|
|
558
558
|
"
|
|
559
|
-
loading
|
|
560
559
|
:resizable="true"
|
|
561
|
-
|
|
562
|
-
<template #body-cell-row-actions>
|
|
563
|
-
<dl-button label="ActionButton" />
|
|
564
|
-
</template>
|
|
565
|
-
</DlTable>
|
|
560
|
+
/>
|
|
566
561
|
</div>
|
|
567
562
|
<div>
|
|
568
563
|
<p>Virtual With editable columns</p>
|
|
@@ -715,7 +710,7 @@ export const columns = [
|
|
|
715
710
|
label: 'Calories',
|
|
716
711
|
field: 'calories',
|
|
717
712
|
sortable: true,
|
|
718
|
-
width: '
|
|
713
|
+
width: '10%'
|
|
719
714
|
},
|
|
720
715
|
{
|
|
721
716
|
name: 'fat',
|
|
@@ -950,21 +945,19 @@ export default defineComponent({
|
|
|
950
945
|
|
|
951
946
|
const onScroll = ({ to, ref }: { to: number; ref: any }) => {
|
|
952
947
|
const lastIndex = computedRows.value.length - 1
|
|
953
|
-
|
|
954
948
|
if (
|
|
955
949
|
infiniteLoading.value !== true &&
|
|
956
950
|
nextPageNumber.value < lastPageNumber &&
|
|
957
951
|
to === lastIndex
|
|
958
952
|
) {
|
|
959
953
|
infiniteLoading.value = true
|
|
960
|
-
|
|
961
954
|
setTimeout(() => {
|
|
962
955
|
nextPageNumber.value++
|
|
963
956
|
nextTick(() => {
|
|
964
957
|
ref.refresh()
|
|
965
958
|
infiniteLoading.value = false
|
|
966
959
|
})
|
|
967
|
-
},
|
|
960
|
+
}, 1500)
|
|
968
961
|
}
|
|
969
962
|
}
|
|
970
963
|
|
|
@@ -118,7 +118,8 @@ export function justifyMouseInsideTargetCell(
|
|
|
118
118
|
|
|
119
119
|
function getIconWidth(el: HTMLElement) {
|
|
120
120
|
const iconEl = el.querySelector('.th-icons')
|
|
121
|
-
|
|
121
|
+
const sortEl = el.querySelector('.th-sort-icon')
|
|
122
|
+
return (iconEl?.scrollWidth ?? 0) + (sortEl?.scrollWidth ?? 0)
|
|
122
123
|
}
|
|
123
124
|
|
|
124
125
|
function addStickyPosition(
|
|
@@ -142,7 +143,6 @@ export function setAllColumnWidths(
|
|
|
142
143
|
) {
|
|
143
144
|
const hasWidth = columns.some((col) => col.hasOwnProperty('width'))
|
|
144
145
|
if (!hasWidth) return
|
|
145
|
-
table.style.tableLayout = 'fixed'
|
|
146
146
|
columns.forEach((col, i) => {
|
|
147
147
|
browseNestedNodes(
|
|
148
148
|
table,
|
|
@@ -157,7 +157,6 @@ export function setAllColumnWidths(
|
|
|
157
157
|
targetEl.querySelector('.inner-th').scrollWidth) +
|
|
158
158
|
getIconWidth(targetEl) +
|
|
159
159
|
35
|
|
160
|
-
|
|
161
160
|
// Set the width of the column
|
|
162
161
|
targetEl.style.width =
|
|
163
162
|
typeof col.width === 'number' || !col.width
|