@dataloop-ai/components 0.20.183 → 0.20.186-ds-v3.0
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/DlDateTime/DlDateTimeRange/DateTimeRangeContent.vue +177 -0
- package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue +101 -106
- package/src/components/compound/DlDateTime/DlDateTimeRange/types.ts +5 -0
- package/src/components/compound/DlDialogBox/DlDialogBox.vue +12 -2
- package/src/components/compound/DlDropdownButton/DlDropdownButton.vue +24 -27
- package/src/components/compound/DlInput/DlInput.vue +4 -0
- package/src/components/compound/DlSearches/DlSearch/DlSearch.vue +12 -0
- package/src/components/compound/DlSearches/DlSmartSearch/DlSmartSearch.vue +3 -8
- package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue +58 -18
- package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue +187 -45
- package/src/components/compound/DlSelect/DlSelect.vue +15 -3
- package/src/components/compound/DlSelect/components/DlSelectOption.vue +7 -6
- package/src/components/compound/DlTable/DlTable.vue +34 -21
- package/src/components/compound/DlTable/hooks/use-sortable.ts +5 -0
- package/src/components/compound/DlTreeTable/DlTreeTable.vue +4 -2
- package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue +1 -1
- package/src/components/essential/DlSwitch/DlSwitch.vue +14 -4
- package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue +3 -1
- package/src/demos/DlDateTimeRangeDemo.vue +20 -0
- package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue +1 -0
|
@@ -66,6 +66,11 @@
|
|
|
66
66
|
style="width: 25px"
|
|
67
67
|
@mousedown="stopAndPrevent"
|
|
68
68
|
/>
|
|
69
|
+
<th
|
|
70
|
+
v-if="hasDraggableRows && !isTreeTable"
|
|
71
|
+
class="dl-table--col-auto-width dl-table__drag-icon"
|
|
72
|
+
style="width: 25px"
|
|
73
|
+
/>
|
|
69
74
|
<th
|
|
70
75
|
v-if="singleSelection"
|
|
71
76
|
class="dl-table--col-auto-width dl-table--col-checkbox-wrapper"
|
|
@@ -156,7 +161,7 @@
|
|
|
156
161
|
<div
|
|
157
162
|
v-if="
|
|
158
163
|
visibleColumns &&
|
|
159
|
-
|
|
164
|
+
visibleColumns.length
|
|
160
165
|
"
|
|
161
166
|
class="visible-columns-justify-end"
|
|
162
167
|
style="width: 100%; display: flex"
|
|
@@ -269,8 +274,8 @@
|
|
|
269
274
|
isRowSelected(getRowKey(props.item))
|
|
270
275
|
? 'selected'
|
|
271
276
|
: hasAnyAction
|
|
272
|
-
|
|
273
|
-
|
|
277
|
+
? ' cursor-pointer'
|
|
278
|
+
: ''
|
|
274
279
|
"
|
|
275
280
|
:no-hover="noHover"
|
|
276
281
|
@click="
|
|
@@ -296,7 +301,7 @@
|
|
|
296
301
|
"
|
|
297
302
|
>
|
|
298
303
|
<td
|
|
299
|
-
v-if="hasDraggableRows"
|
|
304
|
+
v-if="hasDraggableRows && !isTreeTable"
|
|
300
305
|
class="dl-table__drag-icon"
|
|
301
306
|
>
|
|
302
307
|
<dl-icon
|
|
@@ -463,6 +468,11 @@
|
|
|
463
468
|
style="width: 25px"
|
|
464
469
|
@mousedown="stopAndPrevent"
|
|
465
470
|
/>
|
|
471
|
+
<th
|
|
472
|
+
v-if="hasDraggableRows && !isTreeTable"
|
|
473
|
+
class="dl-table--col-auto-width dl-table__drag-icon"
|
|
474
|
+
style="width: 25px"
|
|
475
|
+
/>
|
|
466
476
|
<th
|
|
467
477
|
v-if="singleSelection"
|
|
468
478
|
class="dl-table--col-auto-width dl-table--col-checkbox-wrapper"
|
|
@@ -555,7 +565,7 @@
|
|
|
555
565
|
<div
|
|
556
566
|
v-if="
|
|
557
567
|
visibleColumns &&
|
|
558
|
-
|
|
568
|
+
visibleColumns.length
|
|
559
569
|
"
|
|
560
570
|
class="visible-columns-justify-end"
|
|
561
571
|
style="width: 100%; display: flex"
|
|
@@ -655,19 +665,17 @@
|
|
|
655
665
|
tag="tbody"
|
|
656
666
|
class="nested-table dl-virtual-scroll__content"
|
|
657
667
|
style="position: relative; z-index: 90"
|
|
658
|
-
v-bind="{
|
|
659
|
-
onEnd: handleSortableEvent
|
|
660
|
-
}"
|
|
661
668
|
:is-sortable="hasDraggableRows"
|
|
662
669
|
:options="sortableOptions"
|
|
670
|
+
@end="handleSortableEvent"
|
|
663
671
|
>
|
|
664
672
|
<slot name="top-row" :cols="computedCols" />
|
|
665
673
|
<slot name="table-body" :computed-rows="computedRows">
|
|
666
674
|
<dl-top-scroll
|
|
667
675
|
v-if="
|
|
668
676
|
tableScroll &&
|
|
669
|
-
|
|
670
|
-
|
|
677
|
+
infiniteScroll &&
|
|
678
|
+
!isDataEmpty
|
|
671
679
|
"
|
|
672
680
|
:container-ref="tableScroll"
|
|
673
681
|
@scroll-to-top="
|
|
@@ -701,8 +709,8 @@
|
|
|
701
709
|
isRowSelected(getRowKey(row))
|
|
702
710
|
? 'selected'
|
|
703
711
|
: hasAnyAction
|
|
704
|
-
|
|
705
|
-
|
|
712
|
+
? ' cursor-pointer'
|
|
713
|
+
: ''
|
|
706
714
|
"
|
|
707
715
|
:no-hover="noHover"
|
|
708
716
|
@click="onTrClick($event, row, pageIndex)"
|
|
@@ -714,7 +722,7 @@
|
|
|
714
722
|
"
|
|
715
723
|
>
|
|
716
724
|
<td
|
|
717
|
-
v-if="hasDraggableRows"
|
|
725
|
+
v-if="hasDraggableRows && !isTreeTable"
|
|
718
726
|
style="width: 25px"
|
|
719
727
|
class="dl-table__drag-icon"
|
|
720
728
|
>
|
|
@@ -837,8 +845,8 @@
|
|
|
837
845
|
<dl-bottom-scroll
|
|
838
846
|
v-if="
|
|
839
847
|
tableScroll &&
|
|
840
|
-
|
|
841
|
-
|
|
848
|
+
infiniteScroll &&
|
|
849
|
+
!isDataEmpty
|
|
842
850
|
"
|
|
843
851
|
:container-ref="tableScroll"
|
|
844
852
|
@scroll-to-bottom="
|
|
@@ -895,7 +903,7 @@
|
|
|
895
903
|
<div
|
|
896
904
|
v-if="
|
|
897
905
|
hasBottomSelectionBanner &&
|
|
898
|
-
|
|
906
|
+
selectedRowsLabel(rowsSelectedNumber)
|
|
899
907
|
"
|
|
900
908
|
class="dl-table__control"
|
|
901
909
|
>
|
|
@@ -1329,6 +1337,7 @@ export default defineComponent({
|
|
|
1329
1337
|
const virtScrollRef = ref(null)
|
|
1330
1338
|
const tableScroll = ref(null)
|
|
1331
1339
|
const isVisibleColumnsOpen = ref(false)
|
|
1340
|
+
const tableUuid = `dl-table-${v4()}`
|
|
1332
1341
|
|
|
1333
1342
|
const hasExpandableSlot = computed(() =>
|
|
1334
1343
|
hasSlotByName('body-cell-expandable-content')
|
|
@@ -1753,7 +1762,8 @@ export default defineComponent({
|
|
|
1753
1762
|
|
|
1754
1763
|
const colspanForProgressBar = computed(() => {
|
|
1755
1764
|
return (
|
|
1756
|
-
colspanWithExpandableRow.value -
|
|
1765
|
+
colspanWithExpandableRow.value -
|
|
1766
|
+
(hasDraggableRows.value ? 0 : 1)
|
|
1757
1767
|
)
|
|
1758
1768
|
})
|
|
1759
1769
|
|
|
@@ -2031,8 +2041,10 @@ export default defineComponent({
|
|
|
2031
2041
|
const handleSortableEvent = (event: SortableEvent) => {
|
|
2032
2042
|
const { oldIndex, newIndex } = event
|
|
2033
2043
|
const newRows = insertAtIndex(rows.value, oldIndex, newIndex)
|
|
2034
|
-
tbodyKey.value = v4()
|
|
2035
2044
|
emit('row-reorder', newRows)
|
|
2045
|
+
nextTick(() => {
|
|
2046
|
+
tbodyKey.value = v4()
|
|
2047
|
+
})
|
|
2036
2048
|
}
|
|
2037
2049
|
|
|
2038
2050
|
const reorderColumns = (sourceIndex: number, targetIndex: number) => {
|
|
@@ -2077,11 +2089,12 @@ export default defineComponent({
|
|
|
2077
2089
|
})
|
|
2078
2090
|
|
|
2079
2091
|
const sortableOptions: any = {
|
|
2080
|
-
group: 'nested',
|
|
2092
|
+
group: props.isTreeTable ? 'nested' : tableUuid,
|
|
2081
2093
|
animation: 150,
|
|
2082
2094
|
fallbackOnBody: true,
|
|
2083
2095
|
invertSwap: true,
|
|
2084
|
-
swapThreshold: 0.5
|
|
2096
|
+
swapThreshold: 0.5,
|
|
2097
|
+
handle: '.draggable-icon'
|
|
2085
2098
|
}
|
|
2086
2099
|
|
|
2087
2100
|
const virtualScrollClasses = computed(() => {
|
|
@@ -2137,7 +2150,7 @@ export default defineComponent({
|
|
|
2137
2150
|
handleSortableEvent,
|
|
2138
2151
|
tbodyKey,
|
|
2139
2152
|
tableKey,
|
|
2140
|
-
uuid:
|
|
2153
|
+
uuid: tableUuid,
|
|
2141
2154
|
rootRef,
|
|
2142
2155
|
containerClass,
|
|
2143
2156
|
computedRows,
|
|
@@ -100,6 +100,11 @@ export function useSortable(vm: Record<string, any>) {
|
|
|
100
100
|
})
|
|
101
101
|
|
|
102
102
|
watch(rootRef, (newRootRef) => {
|
|
103
|
+
if (sortable.value) {
|
|
104
|
+
sortable.value.destroy()
|
|
105
|
+
sortable.value = null
|
|
106
|
+
}
|
|
107
|
+
|
|
103
108
|
if (newRootRef) {
|
|
104
109
|
sortable.value = new Sortable(newRootRef, {
|
|
105
110
|
...props.options,
|
|
@@ -804,7 +804,9 @@ export default defineComponent({
|
|
|
804
804
|
targetRow: finalTarget
|
|
805
805
|
})
|
|
806
806
|
|
|
807
|
-
const isDragValid =
|
|
807
|
+
const isDragValid =
|
|
808
|
+
shouldSkipValidation ||
|
|
809
|
+
checkParentCondition(draggedRow.value, finalTarget)
|
|
808
810
|
if (isDragValid) {
|
|
809
811
|
const smartSortingMovement = {
|
|
810
812
|
...sortingMovement.value,
|
|
@@ -929,7 +931,7 @@ export default defineComponent({
|
|
|
929
931
|
}
|
|
930
932
|
|
|
931
933
|
const isValid = checkParentCondition(draggedRow.value, targetRow)
|
|
932
|
-
|
|
934
|
+
|
|
933
935
|
if (isValid) {
|
|
934
936
|
storedValidTarget.value = targetRow
|
|
935
937
|
}
|
|
@@ -7,12 +7,14 @@
|
|
|
7
7
|
}`"
|
|
8
8
|
>
|
|
9
9
|
<label
|
|
10
|
-
v-if="
|
|
10
|
+
v-if="hasLeftLabel"
|
|
11
11
|
class="left dl-switch-label"
|
|
12
12
|
:for="computedId"
|
|
13
13
|
:style="cssLabelVars"
|
|
14
14
|
>
|
|
15
|
-
|
|
15
|
+
<slot name="left-label">
|
|
16
|
+
{{ leftLabel }}
|
|
17
|
+
</slot>
|
|
16
18
|
</label>
|
|
17
19
|
<span
|
|
18
20
|
class="dl-switch-container"
|
|
@@ -35,12 +37,14 @@
|
|
|
35
37
|
/>
|
|
36
38
|
</span>
|
|
37
39
|
<label
|
|
38
|
-
v-if="
|
|
40
|
+
v-if="hasRightLabel"
|
|
39
41
|
class="right dl-switch-label"
|
|
40
42
|
:for="computedId"
|
|
41
43
|
:style="cssLabelVars"
|
|
42
44
|
>
|
|
43
|
-
|
|
45
|
+
<slot name="right-label">
|
|
46
|
+
{{ rightLabel }}
|
|
47
|
+
</slot>
|
|
44
48
|
</label>
|
|
45
49
|
</div>
|
|
46
50
|
</template>
|
|
@@ -143,6 +147,12 @@ export default defineComponent({
|
|
|
143
147
|
? this.index === -1
|
|
144
148
|
: toRaw(this.modelValue) === toRaw(this.falseValue)
|
|
145
149
|
},
|
|
150
|
+
hasLeftLabel(): boolean {
|
|
151
|
+
return !!this.leftLabel || !!this.$slots['left-label']
|
|
152
|
+
},
|
|
153
|
+
hasRightLabel(): boolean {
|
|
154
|
+
return !!this.rightLabel || !!this.$slots['right-label']
|
|
155
|
+
},
|
|
146
156
|
cssVars(): Record<string, string> {
|
|
147
157
|
return {
|
|
148
158
|
'--dl-checkbox-height': `${this.size}px`,
|
|
@@ -124,7 +124,9 @@ export default defineComponent({
|
|
|
124
124
|
|
|
125
125
|
let localScrollTarget: HTMLElement | undefined
|
|
126
126
|
const rootRef: Ref<HTMLElement | null> = ref(null)
|
|
127
|
-
const scrollSizeItem: Ref<number> = ref(
|
|
127
|
+
const scrollSizeItem: Ref<number> = ref(
|
|
128
|
+
virtualScrollItemSize.value || 40
|
|
129
|
+
)
|
|
128
130
|
|
|
129
131
|
const isDefined = (v: any) => v !== undefined && v !== null
|
|
130
132
|
|
|
@@ -176,6 +176,26 @@
|
|
|
176
176
|
@change="handleModelValueUpdate"
|
|
177
177
|
/>
|
|
178
178
|
</div>
|
|
179
|
+
<div style="width: 500px; margin-top: 30px">
|
|
180
|
+
<div style="margin-bottom: 10px; font-weight: bold">
|
|
181
|
+
Inline Mode
|
|
182
|
+
</div>
|
|
183
|
+
<dl-date-time-range
|
|
184
|
+
v-model="date"
|
|
185
|
+
:type="type"
|
|
186
|
+
width="100%"
|
|
187
|
+
:available-range="range ? availableRange : null"
|
|
188
|
+
:mode="mode"
|
|
189
|
+
:show-time="showTime"
|
|
190
|
+
:auto-close="autoClose"
|
|
191
|
+
:including-current-month="includesCurrentMonthEnd"
|
|
192
|
+
:should-clear-select-first-option="shouldClearSelectFirstOption"
|
|
193
|
+
:disabled-type="type === 'day' ? 'month' : 'day'"
|
|
194
|
+
view-mode="inline"
|
|
195
|
+
@set-type="handleSetType"
|
|
196
|
+
@change="handleModelValueUpdate"
|
|
197
|
+
/>
|
|
198
|
+
</div>
|
|
179
199
|
</div>
|
|
180
200
|
</template>
|
|
181
201
|
<script lang="ts">
|