@dataloop-ai/components 0.20.183-ds-v3.2 → 0.20.184
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/assets/theme.css +2 -0
- package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue +106 -101
- package/src/components/compound/DlDateTime/DlDateTimeRange/types.ts +0 -5
- package/src/components/compound/DlInput/DlInput.vue +0 -4
- package/src/components/compound/DlSearches/DlSearch/DlSearch.vue +0 -12
- package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue +7 -24
- package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue +45 -187
- package/src/components/compound/DlSelect/DlSelect.vue +3 -15
- package/src/components/compound/DlSelect/components/DlSelectOption.vue +6 -7
- package/src/components/compound/DlTable/DlTable.vue +32 -20
- package/src/components/compound/DlTable/hooks/use-sortable.ts +6 -0
- package/src/components/compound/DlTreeTable/DlTreeTable.vue +2 -4
- package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue +1 -1
- package/src/components/essential/DlProgressBar/DlProgressBar.vue +8 -10
- package/src/components/essential/DlSwitch/DlSwitch.vue +4 -14
- package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue +1 -3
- package/src/demos/DlDateTimeRangeDemo.vue +0 -20
- package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue +0 -1
- package/src/components/compound/DlDateTime/DlDateTimeRange/DateTimeRangeContent.vue +0 -177
|
@@ -4,116 +4,48 @@
|
|
|
4
4
|
v-model="isOpen"
|
|
5
5
|
:height="500"
|
|
6
6
|
:width="800"
|
|
7
|
-
style="--dl-dialog-box-footer-padding: 10px 16px
|
|
7
|
+
style="--dl-dialog-box-footer-padding: 10px 16px"
|
|
8
8
|
>
|
|
9
9
|
<template #header>
|
|
10
10
|
<dl-dialog-box-header
|
|
11
|
-
title="DQL
|
|
11
|
+
title="DQL Search"
|
|
12
12
|
:close-button="true"
|
|
13
13
|
@onClose="isOpen = false"
|
|
14
14
|
/>
|
|
15
15
|
</template>
|
|
16
16
|
<template #body>
|
|
17
17
|
<div class="json-editor-layout">
|
|
18
|
-
<div
|
|
18
|
+
<div
|
|
19
|
+
class="json-query-menu"
|
|
20
|
+
style="margin-bottom: 10px"
|
|
21
|
+
>
|
|
19
22
|
<dl-select
|
|
20
23
|
:model-value="selectedOption"
|
|
21
|
-
ref="jsonQueryMenu"
|
|
22
24
|
width="300px"
|
|
23
25
|
:options="selectOptions"
|
|
24
26
|
placeholder="New Query"
|
|
25
|
-
searchable
|
|
26
|
-
size="m"
|
|
27
|
-
after-options-padding="0"
|
|
28
|
-
no-options-padding="0"
|
|
29
|
-
menu-style="overflow-y: hidden;"
|
|
30
27
|
@update:model-value="onQuerySelect"
|
|
31
28
|
>
|
|
32
29
|
<template #selected="scope">
|
|
33
|
-
<span class="json-query-menu-
|
|
30
|
+
<span class="json-query-menu-option">
|
|
34
31
|
{{ scope.opt ? scope.opt.label : '' }}
|
|
35
32
|
</span>
|
|
36
33
|
</template>
|
|
37
34
|
<template #option="scope">
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
disabled
|
|
42
|
-
style="cursor: default !important; padding: 14px 0 10px 0;"
|
|
43
|
-
>
|
|
44
|
-
No Saved Queries
|
|
45
|
-
</div>
|
|
46
|
-
<div v-else class="json-query-menu-option">
|
|
47
|
-
<div class="json-query-menu-option-label">
|
|
48
|
-
{{ scope.opt.label }}
|
|
49
|
-
</div>
|
|
50
|
-
<dl-icon
|
|
51
|
-
v-if="scope.opt.label !== 'New Query'"
|
|
52
|
-
icon="icon-dl-delete"
|
|
53
|
-
color="dl-color-negative"
|
|
54
|
-
class="json-query-menu-option-delete"
|
|
55
|
-
@click.stop="onDelete(scope.opt)"
|
|
56
|
-
>
|
|
57
|
-
<dl-tooltip>Delete</dl-tooltip>
|
|
58
|
-
</dl-icon>
|
|
59
|
-
</div>
|
|
60
|
-
</template>
|
|
61
|
-
<template #after-options>
|
|
62
|
-
<dl-separator
|
|
63
|
-
style="margin: 0 0 2px 0 !important"
|
|
64
|
-
type="horizontal"
|
|
65
|
-
/>
|
|
66
|
-
<dl-button
|
|
67
|
-
icon="icon-dl-save"
|
|
68
|
-
flat
|
|
69
|
-
fluid
|
|
70
|
-
secondary
|
|
71
|
-
size="s"
|
|
72
|
-
label="Save Query"
|
|
73
|
-
class="json-query-menu-save-button"
|
|
74
|
-
@click="onSave"
|
|
75
|
-
/>
|
|
76
|
-
</template>
|
|
77
|
-
<template #no-options>
|
|
78
|
-
<div class="json-query-menu-no-option">
|
|
79
|
-
No Results Found
|
|
80
|
-
</div>
|
|
81
|
-
<dl-separator
|
|
82
|
-
style="margin: 0 0 2px 0 !important"
|
|
83
|
-
type="horizontal"
|
|
84
|
-
/>
|
|
85
|
-
<dl-button
|
|
86
|
-
icon="icon-dl-save"
|
|
87
|
-
flat
|
|
88
|
-
fluid
|
|
89
|
-
secondary
|
|
90
|
-
size="s"
|
|
91
|
-
label="Save Query"
|
|
92
|
-
class="json-query-menu-save-button"
|
|
93
|
-
@click="onSave"
|
|
94
|
-
/>
|
|
35
|
+
<span class="json-query-menu-option">
|
|
36
|
+
{{ scope.opt.label }}
|
|
37
|
+
</span>
|
|
95
38
|
</template>
|
|
96
39
|
</dl-select>
|
|
97
|
-
<
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
/>
|
|
107
|
-
<dl-button
|
|
108
|
-
icon="icon-dl-copy"
|
|
109
|
-
tooltip="Copy"
|
|
110
|
-
flat
|
|
111
|
-
color="secondary"
|
|
112
|
-
padding="0px 3px"
|
|
113
|
-
:disabled="alignDisabled"
|
|
114
|
-
@click="copyJSON"
|
|
115
|
-
/>
|
|
116
|
-
</div>
|
|
40
|
+
<dl-button
|
|
41
|
+
icon="icon-dl-align-left"
|
|
42
|
+
label="Align Left"
|
|
43
|
+
flat
|
|
44
|
+
color="secondary"
|
|
45
|
+
padding="0px 3px"
|
|
46
|
+
:disabled="alignDisabled"
|
|
47
|
+
@click="alignJSON"
|
|
48
|
+
/>
|
|
117
49
|
</div>
|
|
118
50
|
<dl-json-editor
|
|
119
51
|
ref="jsonEditor"
|
|
@@ -133,7 +65,7 @@
|
|
|
133
65
|
flat
|
|
134
66
|
color="secondary"
|
|
135
67
|
padding="0"
|
|
136
|
-
@click="
|
|
68
|
+
@click="showDeleteDialog = true"
|
|
137
69
|
/>
|
|
138
70
|
<div class="json-editor-footer-actions">
|
|
139
71
|
<dl-button
|
|
@@ -169,20 +101,27 @@
|
|
|
169
101
|
<template #body>
|
|
170
102
|
<dl-input
|
|
171
103
|
v-model="newQueryName"
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
placeholder="Insert query name"
|
|
104
|
+
title="Query name"
|
|
105
|
+
style="text-align: center"
|
|
106
|
+
placeholder="Type query name"
|
|
176
107
|
/>
|
|
177
108
|
</template>
|
|
178
109
|
<template #footer>
|
|
179
110
|
<div class="dl-smart-search__buttons--save">
|
|
180
111
|
<dl-button
|
|
181
112
|
:disabled="!newQueryName"
|
|
113
|
+
outlined
|
|
114
|
+
style="margin-right: 5px"
|
|
182
115
|
@click="() => saveQuery(false)"
|
|
183
116
|
>
|
|
184
117
|
Save
|
|
185
118
|
</dl-button>
|
|
119
|
+
<dl-button
|
|
120
|
+
:disabled="!newQueryName"
|
|
121
|
+
@click="() => saveQuery(true)"
|
|
122
|
+
>
|
|
123
|
+
Save and Search
|
|
124
|
+
</dl-button>
|
|
186
125
|
</div>
|
|
187
126
|
</template>
|
|
188
127
|
</dl-dialog-box>
|
|
@@ -196,13 +135,12 @@
|
|
|
196
135
|
/>
|
|
197
136
|
</template>
|
|
198
137
|
<template #body>
|
|
199
|
-
<dl-typography
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
This action cannot be undone.
|
|
138
|
+
<dl-typography
|
|
139
|
+
size="h3"
|
|
140
|
+
style="display: flex; justify-content: center"
|
|
141
|
+
>
|
|
142
|
+
Are you sure you want to delete
|
|
143
|
+
{{ selectedOption.label }}?
|
|
206
144
|
</dl-typography>
|
|
207
145
|
</template>
|
|
208
146
|
<template #footer>
|
|
@@ -228,12 +166,10 @@ import {
|
|
|
228
166
|
} from 'vue-demi'
|
|
229
167
|
import { DlSelect } from '../../../DlSelect'
|
|
230
168
|
import { DlSelectOption } from '../../../DlSelect/types'
|
|
231
|
-
import { DlSeparator } from '../../../../essential/DlSeparator'
|
|
232
169
|
import { DlButton } from '../../../../basic'
|
|
233
170
|
import { DlDialogBox, DlDialogBoxHeader } from '../../../DlDialogBox'
|
|
234
171
|
import { DlJsonEditor } from '../../../DlJsonEditor'
|
|
235
|
-
import {
|
|
236
|
-
import { DlTypography, DlIcon } from '../../../../essential'
|
|
172
|
+
import { DlTypography } from '../../../../essential'
|
|
237
173
|
import { DlInput } from '../../../DlInput'
|
|
238
174
|
import { stateManager } from '../../../../../StateManager'
|
|
239
175
|
import { cloneDeep, isEqual, uniqBy } from 'lodash'
|
|
@@ -243,12 +179,9 @@ export default defineComponent({
|
|
|
243
179
|
components: {
|
|
244
180
|
DlDialogBox,
|
|
245
181
|
DlDialogBoxHeader,
|
|
246
|
-
DlIcon,
|
|
247
182
|
DlJsonEditor,
|
|
248
183
|
DlButton,
|
|
249
184
|
DlSelect,
|
|
250
|
-
DlSeparator,
|
|
251
|
-
DlTooltip,
|
|
252
185
|
DlTypography,
|
|
253
186
|
DlInput
|
|
254
187
|
},
|
|
@@ -281,24 +214,11 @@ export default defineComponent({
|
|
|
281
214
|
'update:modelValue',
|
|
282
215
|
'search',
|
|
283
216
|
'change',
|
|
284
|
-
'copied',
|
|
285
217
|
'update:options',
|
|
286
218
|
'save',
|
|
287
219
|
'delete',
|
|
288
220
|
'select'
|
|
289
221
|
],
|
|
290
|
-
methods: {
|
|
291
|
-
onDelete(option: DlSelectOption) {
|
|
292
|
-
const select = this.$refs['jsonQueryMenu'] as InstanceType<typeof DlSelect>
|
|
293
|
-
select?.closeMenu()
|
|
294
|
-
this.optionToDelete = option
|
|
295
|
-
},
|
|
296
|
-
onSave() {
|
|
297
|
-
const select = this.$refs['jsonQueryMenu'] as InstanceType<typeof DlSelect>
|
|
298
|
-
select?.closeMenu()
|
|
299
|
-
this.showSaveDialog = true
|
|
300
|
-
}
|
|
301
|
-
},
|
|
302
222
|
setup(props, { emit }) {
|
|
303
223
|
const { modelValue, options, json, selectedFilter } = toRefs(props)
|
|
304
224
|
|
|
@@ -310,15 +230,7 @@ export default defineComponent({
|
|
|
310
230
|
const currentQuery = ref<{ [key: string]: any }>(cloneDeep(json.value))
|
|
311
231
|
const jsonEditor = ref<any>(null)
|
|
312
232
|
const showSaveDialog = ref(false)
|
|
313
|
-
const
|
|
314
|
-
const showDeleteDialog = computed<boolean>({
|
|
315
|
-
get: () => !!optionToDelete.value,
|
|
316
|
-
set: (val) => {
|
|
317
|
-
if (!val) {
|
|
318
|
-
optionToDelete.value = null
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
})
|
|
233
|
+
const showDeleteDialog = ref(false)
|
|
322
234
|
const newQueryName = ref('')
|
|
323
235
|
const alignDisabled = ref(false)
|
|
324
236
|
|
|
@@ -361,11 +273,6 @@ export default defineComponent({
|
|
|
361
273
|
jsonEditor.value?.format()
|
|
362
274
|
}
|
|
363
275
|
|
|
364
|
-
const copyJSON = async () => {
|
|
365
|
-
await navigator.clipboard.writeText(stringifiedJSON.value)
|
|
366
|
-
emit('copied')
|
|
367
|
-
}
|
|
368
|
-
|
|
369
276
|
const onQuerySelect = (option: DlSelectOption) => {
|
|
370
277
|
if (option.label === selectedOption.value.label) {
|
|
371
278
|
return
|
|
@@ -449,10 +356,10 @@ export default defineComponent({
|
|
|
449
356
|
|
|
450
357
|
const deleteQuery = () => {
|
|
451
358
|
const toDelete = options.value.find(
|
|
452
|
-
(o: DlSelectOption) => o.label ===
|
|
359
|
+
(o: DlSelectOption) => o.label === selectedOption.value.label
|
|
453
360
|
)
|
|
454
361
|
const newOptions = options.value.filter(
|
|
455
|
-
(o: DlSelectOption) => o.label !==
|
|
362
|
+
(o: DlSelectOption) => o.label !== selectedOption.value.label
|
|
456
363
|
)
|
|
457
364
|
|
|
458
365
|
emit('delete', toDelete)
|
|
@@ -485,11 +392,9 @@ export default defineComponent({
|
|
|
485
392
|
selectedOption,
|
|
486
393
|
hasActiveFilter,
|
|
487
394
|
alignJSON,
|
|
488
|
-
copyJSON,
|
|
489
395
|
onQuerySelect,
|
|
490
396
|
newQueryName,
|
|
491
397
|
alignDisabled,
|
|
492
|
-
optionToDelete,
|
|
493
398
|
showDeleteDialog,
|
|
494
399
|
selectOptions,
|
|
495
400
|
search,
|
|
@@ -502,76 +407,29 @@ export default defineComponent({
|
|
|
502
407
|
})
|
|
503
408
|
</script>
|
|
504
409
|
|
|
505
|
-
<style scoped>
|
|
410
|
+
<style scoped lang="scss">
|
|
506
411
|
.json-editor-layout {
|
|
507
412
|
display: flex;
|
|
508
413
|
flex-direction: column;
|
|
509
414
|
height: 100%;
|
|
510
415
|
}
|
|
511
416
|
|
|
512
|
-
.json-editor-footer
|
|
513
|
-
width: 100%;
|
|
514
|
-
display: flex;
|
|
515
|
-
align-items: center;
|
|
516
|
-
justify-content: space-between;
|
|
517
|
-
}
|
|
417
|
+
.json-editor-footer,
|
|
518
418
|
.json-query-menu {
|
|
419
|
+
width: 100%;
|
|
519
420
|
display: flex;
|
|
520
421
|
align-items: center;
|
|
521
|
-
background-color: var(--dl-color-fill);
|
|
522
422
|
justify-content: space-between;
|
|
523
|
-
padding: 6px 16px;
|
|
524
423
|
}
|
|
525
424
|
.json-editor {
|
|
526
|
-
height:
|
|
527
|
-
--jse-main-border: none;
|
|
425
|
+
height: 100%;
|
|
528
426
|
}
|
|
529
427
|
|
|
530
428
|
.json-query-menu-option {
|
|
531
|
-
display: flex;
|
|
532
|
-
flex-direction: row;
|
|
533
|
-
}
|
|
534
|
-
.json-query-menu-option-label,
|
|
535
|
-
.json-query-menu-selected {
|
|
536
|
-
padding-top: 3px;
|
|
537
429
|
white-space: nowrap;
|
|
538
430
|
display: inline-block;
|
|
539
431
|
width: 265px;
|
|
540
432
|
overflow: hidden;
|
|
541
433
|
text-overflow: ellipsis;
|
|
542
434
|
}
|
|
543
|
-
.json-query-menu-option:hover .json-query-menu-option-label {
|
|
544
|
-
margin-right: 6px;
|
|
545
|
-
width: 255px;
|
|
546
|
-
}
|
|
547
|
-
.json-query-menu-option-delete {
|
|
548
|
-
overflow-x: hidden;
|
|
549
|
-
width: 0;
|
|
550
|
-
}
|
|
551
|
-
.json-query-menu-option:hover .json-query-menu-option-delete {
|
|
552
|
-
border-radius: 4px;
|
|
553
|
-
overflow-x: visible;
|
|
554
|
-
padding: 4px;
|
|
555
|
-
width: auto;
|
|
556
|
-
}
|
|
557
|
-
.json-query-menu-option-delete:hover {
|
|
558
|
-
background-color: var(--dl-color-fill-secondary);
|
|
559
|
-
}
|
|
560
|
-
.json-query-menu-option-delete:active {
|
|
561
|
-
background-color: var(--dl-color-negative-background);
|
|
562
|
-
}
|
|
563
|
-
.json-query-menu-no-option {
|
|
564
|
-
display: flex;
|
|
565
|
-
padding: 20px 0;
|
|
566
|
-
flex-direction: column;
|
|
567
|
-
align-items: center;
|
|
568
|
-
align-self: stretch;
|
|
569
|
-
}
|
|
570
|
-
.json-query-menu-save-button:hover {
|
|
571
|
-
background-color: var(--dl-color-fill-secondary);
|
|
572
|
-
}
|
|
573
|
-
.dl-smart-search__buttons--save {
|
|
574
|
-
text-align: right;
|
|
575
|
-
width: 100%;
|
|
576
|
-
}
|
|
577
435
|
</style>
|
|
@@ -170,17 +170,13 @@
|
|
|
170
170
|
<slot name="before-options" />
|
|
171
171
|
</dl-item-section>
|
|
172
172
|
</dl-list-item>
|
|
173
|
-
<dl-list-item
|
|
174
|
-
v-if="noOptions"
|
|
175
|
-
:style="computedNoOptionsStyle"
|
|
176
|
-
:padding="noOptionsPadding"
|
|
177
|
-
>
|
|
173
|
+
<dl-list-item v-if="noOptions" :style="computedNoOptionsStyle">
|
|
178
174
|
<dl-item-section color="dl-color-medium">
|
|
179
175
|
<slot name="no-options"> No options </slot>
|
|
180
176
|
</dl-item-section>
|
|
181
177
|
</dl-list-item>
|
|
182
178
|
<dl-list
|
|
183
|
-
v-
|
|
179
|
+
v-if="showMenuList"
|
|
184
180
|
class="select-list"
|
|
185
181
|
:padding="false"
|
|
186
182
|
:style="
|
|
@@ -519,10 +515,6 @@ export default defineComponent({
|
|
|
519
515
|
type: String,
|
|
520
516
|
default: null
|
|
521
517
|
},
|
|
522
|
-
noOptionsPadding: {
|
|
523
|
-
type: String,
|
|
524
|
-
default: null
|
|
525
|
-
},
|
|
526
518
|
keepFocusOnBlur: {
|
|
527
519
|
type: Boolean,
|
|
528
520
|
default: false
|
|
@@ -1056,11 +1048,7 @@ export default defineComponent({
|
|
|
1056
1048
|
return !!option?.readonly
|
|
1057
1049
|
},
|
|
1058
1050
|
isDisableRowOption(option: DlSelectOptionType) {
|
|
1059
|
-
return
|
|
1060
|
-
typeof option === 'object' &&
|
|
1061
|
-
option !== null &&
|
|
1062
|
-
!!option.disableRow
|
|
1063
|
-
)
|
|
1051
|
+
return typeof option === 'object' && option !== null && !!option.disableRow
|
|
1064
1052
|
},
|
|
1065
1053
|
getOptionCount(option: any) {
|
|
1066
1054
|
return option?.count ?? null
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
<dl-list-item
|
|
18
18
|
v-else
|
|
19
19
|
class="option"
|
|
20
|
-
:class="{
|
|
20
|
+
:class="{
|
|
21
21
|
highlighted: highlightSelected && isSelected,
|
|
22
22
|
'disabled-row': disableRow
|
|
23
23
|
}"
|
|
@@ -142,7 +142,10 @@ import { v4 } from 'uuid'
|
|
|
142
142
|
import { debounce } from 'lodash'
|
|
143
143
|
import { stateManager } from '../../../../StateManager'
|
|
144
144
|
import { getCaseInsensitiveInput, getLabel } from '../utils'
|
|
145
|
-
import {
|
|
145
|
+
import {
|
|
146
|
+
DlSelectOption,
|
|
147
|
+
DlSelectOptionType
|
|
148
|
+
} from '../../types'
|
|
146
149
|
|
|
147
150
|
const ValueTypes = [Array, Boolean, String, Number, Object, Function]
|
|
148
151
|
|
|
@@ -403,11 +406,7 @@ export default defineComponent({
|
|
|
403
406
|
return !!option?.readonly
|
|
404
407
|
},
|
|
405
408
|
isDisableRowOption(option: DlSelectOptionType) {
|
|
406
|
-
return
|
|
407
|
-
typeof option === 'object' &&
|
|
408
|
-
option !== null &&
|
|
409
|
-
!!option.disableRow
|
|
410
|
-
)
|
|
409
|
+
return typeof option === 'object' && option !== null && !!option.disableRow
|
|
411
410
|
}
|
|
412
411
|
}
|
|
413
412
|
})
|
|
@@ -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')
|
|
@@ -2031,8 +2040,10 @@ export default defineComponent({
|
|
|
2031
2040
|
const handleSortableEvent = (event: SortableEvent) => {
|
|
2032
2041
|
const { oldIndex, newIndex } = event
|
|
2033
2042
|
const newRows = insertAtIndex(rows.value, oldIndex, newIndex)
|
|
2034
|
-
tbodyKey.value = v4()
|
|
2035
2043
|
emit('row-reorder', newRows)
|
|
2044
|
+
nextTick(() => {
|
|
2045
|
+
tbodyKey.value = v4()
|
|
2046
|
+
})
|
|
2036
2047
|
}
|
|
2037
2048
|
|
|
2038
2049
|
const reorderColumns = (sourceIndex: number, targetIndex: number) => {
|
|
@@ -2077,11 +2088,12 @@ export default defineComponent({
|
|
|
2077
2088
|
})
|
|
2078
2089
|
|
|
2079
2090
|
const sortableOptions: any = {
|
|
2080
|
-
group: 'nested',
|
|
2091
|
+
group: props.isTreeTable ? 'nested' : tableUuid,
|
|
2081
2092
|
animation: 150,
|
|
2082
2093
|
fallbackOnBody: true,
|
|
2083
2094
|
invertSwap: true,
|
|
2084
|
-
swapThreshold: 0.5
|
|
2095
|
+
swapThreshold: 0.5,
|
|
2096
|
+
handle: '.draggable-icon'
|
|
2085
2097
|
}
|
|
2086
2098
|
|
|
2087
2099
|
const virtualScrollClasses = computed(() => {
|
|
@@ -2137,7 +2149,7 @@ export default defineComponent({
|
|
|
2137
2149
|
handleSortableEvent,
|
|
2138
2150
|
tbodyKey,
|
|
2139
2151
|
tableKey,
|
|
2140
|
-
uuid:
|
|
2152
|
+
uuid: tableUuid,
|
|
2141
2153
|
rootRef,
|
|
2142
2154
|
containerClass,
|
|
2143
2155
|
computedRows,
|
|
@@ -100,6 +100,12 @@ export function useSortable(vm: Record<string, any>) {
|
|
|
100
100
|
})
|
|
101
101
|
|
|
102
102
|
watch(rootRef, (newRootRef) => {
|
|
103
|
+
|
|
104
|
+
if (sortable.value) {
|
|
105
|
+
sortable.value.destroy()
|
|
106
|
+
sortable.value = null
|
|
107
|
+
}
|
|
108
|
+
|
|
103
109
|
if (newRootRef) {
|
|
104
110
|
sortable.value = new Sortable(newRootRef, {
|
|
105
111
|
...props.options,
|
|
@@ -804,9 +804,7 @@ export default defineComponent({
|
|
|
804
804
|
targetRow: finalTarget
|
|
805
805
|
})
|
|
806
806
|
|
|
807
|
-
const isDragValid =
|
|
808
|
-
shouldSkipValidation ||
|
|
809
|
-
checkParentCondition(draggedRow.value, finalTarget)
|
|
807
|
+
const isDragValid = shouldSkipValidation || checkParentCondition(draggedRow.value, finalTarget)
|
|
810
808
|
if (isDragValid) {
|
|
811
809
|
const smartSortingMovement = {
|
|
812
810
|
...sortingMovement.value,
|
|
@@ -931,7 +929,7 @@ export default defineComponent({
|
|
|
931
929
|
}
|
|
932
930
|
|
|
933
931
|
const isValid = checkParentCondition(draggedRow.value, targetRow)
|
|
934
|
-
|
|
932
|
+
|
|
935
933
|
if (isValid) {
|
|
936
934
|
storedValidTarget.value = targetRow
|
|
937
935
|
}
|