@dataloop-ai/components 0.20.174 → 0.20.175-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/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue +6 -1
- package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue +187 -45
- package/src/components/compound/DlSelect/DlSelect.vue +10 -2
- package/src/components/compound/DlTable/DlTable.vue +11 -11
- 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/demos/SmartSearchDemo/DlSmartSearchDemo.vue +1 -0
package/package.json
CHANGED
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
</div>
|
|
54
54
|
</div>
|
|
55
55
|
<dl-tooltip
|
|
56
|
-
v-if="!focused"
|
|
56
|
+
v-if="!focused && !noTooltip"
|
|
57
57
|
border="1px solid var(--dl-color-separator)"
|
|
58
58
|
background-color="dl-color-panel-background"
|
|
59
59
|
color="dl-color-darker"
|
|
@@ -248,6 +248,10 @@ export default defineComponent({
|
|
|
248
248
|
type: String,
|
|
249
249
|
default: '28px'
|
|
250
250
|
},
|
|
251
|
+
noTooltip: {
|
|
252
|
+
type: Boolean,
|
|
253
|
+
default: false
|
|
254
|
+
},
|
|
251
255
|
omitSuggestions: {
|
|
252
256
|
type: Array as PropType<string[]>,
|
|
253
257
|
default: () => [] as string[]
|
|
@@ -297,6 +301,7 @@ export default defineComponent({
|
|
|
297
301
|
defaultIcon,
|
|
298
302
|
defaultIconColor,
|
|
299
303
|
schema,
|
|
304
|
+
noTooltip,
|
|
300
305
|
omitSuggestions,
|
|
301
306
|
operatorsOverride,
|
|
302
307
|
height,
|
|
@@ -4,48 +4,116 @@
|
|
|
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; --dl-dialog-box-content-padding: 0"
|
|
8
8
|
>
|
|
9
9
|
<template #header>
|
|
10
10
|
<dl-dialog-box-header
|
|
11
|
-
title="DQL
|
|
11
|
+
title="DQL Editor"
|
|
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
|
|
19
|
-
class="json-query-menu"
|
|
20
|
-
style="margin-bottom: 10px"
|
|
21
|
-
>
|
|
18
|
+
<div class="json-query-menu">
|
|
22
19
|
<dl-select
|
|
23
20
|
:model-value="selectedOption"
|
|
21
|
+
ref="jsonQueryMenu"
|
|
24
22
|
width="300px"
|
|
25
23
|
:options="selectOptions"
|
|
26
24
|
placeholder="New Query"
|
|
25
|
+
searchable
|
|
26
|
+
size="m"
|
|
27
|
+
after-options-padding="0"
|
|
28
|
+
no-options-padding="0"
|
|
29
|
+
menu-style="overflow-y: hidden;"
|
|
27
30
|
@update:model-value="onQuerySelect"
|
|
28
31
|
>
|
|
29
32
|
<template #selected="scope">
|
|
30
|
-
<span class="json-query-menu-
|
|
33
|
+
<span class="json-query-menu-selected">
|
|
31
34
|
{{ scope.opt ? scope.opt.label : '' }}
|
|
32
35
|
</span>
|
|
33
36
|
</template>
|
|
34
37
|
<template #option="scope">
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
+
<div
|
|
39
|
+
v-if="selectOptions.length < 2"
|
|
40
|
+
class="json-query-menu-no-option"
|
|
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
|
+
/>
|
|
38
95
|
</template>
|
|
39
96
|
</dl-select>
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
97
|
+
<div>
|
|
98
|
+
<dl-button
|
|
99
|
+
icon="icon-dl-align-left"
|
|
100
|
+
tooltip="Align Left"
|
|
101
|
+
flat
|
|
102
|
+
color="secondary"
|
|
103
|
+
padding="0px 3px"
|
|
104
|
+
:disabled="alignDisabled"
|
|
105
|
+
@click="alignJSON"
|
|
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>
|
|
49
117
|
</div>
|
|
50
118
|
<dl-json-editor
|
|
51
119
|
ref="jsonEditor"
|
|
@@ -65,7 +133,7 @@
|
|
|
65
133
|
flat
|
|
66
134
|
color="secondary"
|
|
67
135
|
padding="0"
|
|
68
|
-
@click="
|
|
136
|
+
@click="optionToDelete = selectedOption"
|
|
69
137
|
/>
|
|
70
138
|
<div class="json-editor-footer-actions">
|
|
71
139
|
<dl-button
|
|
@@ -101,27 +169,20 @@
|
|
|
101
169
|
<template #body>
|
|
102
170
|
<dl-input
|
|
103
171
|
v-model="newQueryName"
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
172
|
+
:red-asterisk="true"
|
|
173
|
+
:required="true"
|
|
174
|
+
title="Query Name"
|
|
175
|
+
placeholder="Insert query name"
|
|
107
176
|
/>
|
|
108
177
|
</template>
|
|
109
178
|
<template #footer>
|
|
110
179
|
<div class="dl-smart-search__buttons--save">
|
|
111
180
|
<dl-button
|
|
112
181
|
:disabled="!newQueryName"
|
|
113
|
-
outlined
|
|
114
|
-
style="margin-right: 5px"
|
|
115
182
|
@click="() => saveQuery(false)"
|
|
116
183
|
>
|
|
117
184
|
Save
|
|
118
185
|
</dl-button>
|
|
119
|
-
<dl-button
|
|
120
|
-
:disabled="!newQueryName"
|
|
121
|
-
@click="() => saveQuery(true)"
|
|
122
|
-
>
|
|
123
|
-
Save and Search
|
|
124
|
-
</dl-button>
|
|
125
186
|
</div>
|
|
126
187
|
</template>
|
|
127
188
|
</dl-dialog-box>
|
|
@@ -135,12 +196,13 @@
|
|
|
135
196
|
/>
|
|
136
197
|
</template>
|
|
137
198
|
<template #body>
|
|
138
|
-
<dl-typography
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
199
|
+
<dl-typography size="h5">
|
|
200
|
+
Are you sure you want to permanently delete the following query?
|
|
201
|
+
<br />
|
|
202
|
+
{{ optionToDelete.label }}
|
|
203
|
+
<br />
|
|
204
|
+
<br />
|
|
205
|
+
This action cannot be undone.
|
|
144
206
|
</dl-typography>
|
|
145
207
|
</template>
|
|
146
208
|
<template #footer>
|
|
@@ -166,10 +228,12 @@ import {
|
|
|
166
228
|
} from 'vue-demi'
|
|
167
229
|
import { DlSelect } from '../../../DlSelect'
|
|
168
230
|
import { DlSelectOption } from '../../../DlSelect/types'
|
|
231
|
+
import { DlSeparator } from '../../../../essential/DlSeparator'
|
|
169
232
|
import { DlButton } from '../../../../basic'
|
|
170
233
|
import { DlDialogBox, DlDialogBoxHeader } from '../../../DlDialogBox'
|
|
171
234
|
import { DlJsonEditor } from '../../../DlJsonEditor'
|
|
172
|
-
import {
|
|
235
|
+
import { DlTooltip } from '../../../../shared/DlTooltip'
|
|
236
|
+
import { DlTypography, DlIcon } from '../../../../essential'
|
|
173
237
|
import { DlInput } from '../../../DlInput'
|
|
174
238
|
import { stateManager } from '../../../../../StateManager'
|
|
175
239
|
import { cloneDeep, isEqual, uniqBy } from 'lodash'
|
|
@@ -179,9 +243,12 @@ export default defineComponent({
|
|
|
179
243
|
components: {
|
|
180
244
|
DlDialogBox,
|
|
181
245
|
DlDialogBoxHeader,
|
|
246
|
+
DlIcon,
|
|
182
247
|
DlJsonEditor,
|
|
183
248
|
DlButton,
|
|
184
249
|
DlSelect,
|
|
250
|
+
DlSeparator,
|
|
251
|
+
DlTooltip,
|
|
185
252
|
DlTypography,
|
|
186
253
|
DlInput
|
|
187
254
|
},
|
|
@@ -214,11 +281,24 @@ export default defineComponent({
|
|
|
214
281
|
'update:modelValue',
|
|
215
282
|
'search',
|
|
216
283
|
'change',
|
|
284
|
+
'copied',
|
|
217
285
|
'update:options',
|
|
218
286
|
'save',
|
|
219
287
|
'delete',
|
|
220
288
|
'select'
|
|
221
289
|
],
|
|
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
|
+
},
|
|
222
302
|
setup(props, { emit }) {
|
|
223
303
|
const { modelValue, options, json, selectedFilter } = toRefs(props)
|
|
224
304
|
|
|
@@ -230,7 +310,15 @@ export default defineComponent({
|
|
|
230
310
|
const currentQuery = ref<{ [key: string]: any }>(cloneDeep(json.value))
|
|
231
311
|
const jsonEditor = ref<any>(null)
|
|
232
312
|
const showSaveDialog = ref(false)
|
|
233
|
-
const
|
|
313
|
+
const optionToDelete = ref<DlSelectOption>(null)
|
|
314
|
+
const showDeleteDialog = computed<boolean>({
|
|
315
|
+
get: () => !!optionToDelete.value,
|
|
316
|
+
set: (val) => {
|
|
317
|
+
if (!val) {
|
|
318
|
+
optionToDelete.value = null
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
})
|
|
234
322
|
const newQueryName = ref('')
|
|
235
323
|
const alignDisabled = ref(false)
|
|
236
324
|
|
|
@@ -273,6 +361,11 @@ export default defineComponent({
|
|
|
273
361
|
jsonEditor.value?.format()
|
|
274
362
|
}
|
|
275
363
|
|
|
364
|
+
const copyJSON = async () => {
|
|
365
|
+
await navigator.clipboard.writeText(stringifiedJSON.value)
|
|
366
|
+
emit('copied')
|
|
367
|
+
}
|
|
368
|
+
|
|
276
369
|
const onQuerySelect = (option: DlSelectOption) => {
|
|
277
370
|
if (option.label === selectedOption.value.label) {
|
|
278
371
|
return
|
|
@@ -356,10 +449,10 @@ export default defineComponent({
|
|
|
356
449
|
|
|
357
450
|
const deleteQuery = () => {
|
|
358
451
|
const toDelete = options.value.find(
|
|
359
|
-
(o: DlSelectOption) => o.label ===
|
|
452
|
+
(o: DlSelectOption) => o.label === optionToDelete.value.label
|
|
360
453
|
)
|
|
361
454
|
const newOptions = options.value.filter(
|
|
362
|
-
(o: DlSelectOption) => o.label !==
|
|
455
|
+
(o: DlSelectOption) => o.label !== optionToDelete.value.label
|
|
363
456
|
)
|
|
364
457
|
|
|
365
458
|
emit('delete', toDelete)
|
|
@@ -392,9 +485,11 @@ export default defineComponent({
|
|
|
392
485
|
selectedOption,
|
|
393
486
|
hasActiveFilter,
|
|
394
487
|
alignJSON,
|
|
488
|
+
copyJSON,
|
|
395
489
|
onQuerySelect,
|
|
396
490
|
newQueryName,
|
|
397
491
|
alignDisabled,
|
|
492
|
+
optionToDelete,
|
|
398
493
|
showDeleteDialog,
|
|
399
494
|
selectOptions,
|
|
400
495
|
search,
|
|
@@ -407,29 +502,76 @@ export default defineComponent({
|
|
|
407
502
|
})
|
|
408
503
|
</script>
|
|
409
504
|
|
|
410
|
-
<style scoped
|
|
505
|
+
<style scoped>
|
|
411
506
|
.json-editor-layout {
|
|
412
507
|
display: flex;
|
|
413
508
|
flex-direction: column;
|
|
414
509
|
height: 100%;
|
|
415
510
|
}
|
|
416
511
|
|
|
417
|
-
.json-editor-footer
|
|
418
|
-
.json-query-menu {
|
|
512
|
+
.json-editor-footer {
|
|
419
513
|
width: 100%;
|
|
420
514
|
display: flex;
|
|
421
515
|
align-items: center;
|
|
422
516
|
justify-content: space-between;
|
|
423
517
|
}
|
|
518
|
+
.json-query-menu {
|
|
519
|
+
display: flex;
|
|
520
|
+
align-items: center;
|
|
521
|
+
background-color: var(--dl-color-fill);
|
|
522
|
+
justify-content: space-between;
|
|
523
|
+
padding: 6px 16px;
|
|
524
|
+
}
|
|
424
525
|
.json-editor {
|
|
425
|
-
height: 100
|
|
526
|
+
height: calc(100% - 40px);
|
|
527
|
+
--jse-main-border: none;
|
|
426
528
|
}
|
|
427
529
|
|
|
428
530
|
.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;
|
|
429
537
|
white-space: nowrap;
|
|
430
538
|
display: inline-block;
|
|
431
539
|
width: 265px;
|
|
432
540
|
overflow: hidden;
|
|
433
541
|
text-overflow: ellipsis;
|
|
434
542
|
}
|
|
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
|
+
}
|
|
435
577
|
</style>
|
|
@@ -170,13 +170,17 @@
|
|
|
170
170
|
<slot name="before-options" />
|
|
171
171
|
</dl-item-section>
|
|
172
172
|
</dl-list-item>
|
|
173
|
-
<dl-list-item
|
|
173
|
+
<dl-list-item
|
|
174
|
+
v-if="noOptions"
|
|
175
|
+
:style="computedNoOptionsStyle"
|
|
176
|
+
:padding="noOptionsPadding"
|
|
177
|
+
>
|
|
174
178
|
<dl-item-section color="dl-color-medium">
|
|
175
179
|
<slot name="no-options"> No options </slot>
|
|
176
180
|
</dl-item-section>
|
|
177
181
|
</dl-list-item>
|
|
178
182
|
<dl-list
|
|
179
|
-
v-if="showMenuList"
|
|
183
|
+
v-else-if="showMenuList"
|
|
180
184
|
class="select-list"
|
|
181
185
|
:padding="false"
|
|
182
186
|
:style="
|
|
@@ -513,6 +517,10 @@ export default defineComponent({
|
|
|
513
517
|
type: String,
|
|
514
518
|
default: null
|
|
515
519
|
},
|
|
520
|
+
noOptionsPadding: {
|
|
521
|
+
type: String,
|
|
522
|
+
default: null
|
|
523
|
+
},
|
|
516
524
|
keepFocusOnBlur: {
|
|
517
525
|
type: Boolean,
|
|
518
526
|
default: false
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
<div
|
|
157
157
|
v-if="
|
|
158
158
|
visibleColumns &&
|
|
159
|
-
|
|
159
|
+
visibleColumns.length
|
|
160
160
|
"
|
|
161
161
|
class="visible-columns-justify-end"
|
|
162
162
|
style="width: 100%; display: flex"
|
|
@@ -269,8 +269,8 @@
|
|
|
269
269
|
isRowSelected(getRowKey(props.item))
|
|
270
270
|
? 'selected'
|
|
271
271
|
: hasAnyAction
|
|
272
|
-
|
|
273
|
-
|
|
272
|
+
? ' cursor-pointer'
|
|
273
|
+
: ''
|
|
274
274
|
"
|
|
275
275
|
:no-hover="noHover"
|
|
276
276
|
@click="
|
|
@@ -555,7 +555,7 @@
|
|
|
555
555
|
<div
|
|
556
556
|
v-if="
|
|
557
557
|
visibleColumns &&
|
|
558
|
-
|
|
558
|
+
visibleColumns.length
|
|
559
559
|
"
|
|
560
560
|
class="visible-columns-justify-end"
|
|
561
561
|
style="width: 100%; display: flex"
|
|
@@ -666,8 +666,8 @@
|
|
|
666
666
|
<dl-top-scroll
|
|
667
667
|
v-if="
|
|
668
668
|
tableScroll &&
|
|
669
|
-
|
|
670
|
-
|
|
669
|
+
infiniteScroll &&
|
|
670
|
+
!isDataEmpty
|
|
671
671
|
"
|
|
672
672
|
:container-ref="tableScroll"
|
|
673
673
|
@scroll-to-top="
|
|
@@ -701,8 +701,8 @@
|
|
|
701
701
|
isRowSelected(getRowKey(row))
|
|
702
702
|
? 'selected'
|
|
703
703
|
: hasAnyAction
|
|
704
|
-
|
|
705
|
-
|
|
704
|
+
? ' cursor-pointer'
|
|
705
|
+
: ''
|
|
706
706
|
"
|
|
707
707
|
:no-hover="noHover"
|
|
708
708
|
@click="onTrClick($event, row, pageIndex)"
|
|
@@ -837,8 +837,8 @@
|
|
|
837
837
|
<dl-bottom-scroll
|
|
838
838
|
v-if="
|
|
839
839
|
tableScroll &&
|
|
840
|
-
|
|
841
|
-
|
|
840
|
+
infiniteScroll &&
|
|
841
|
+
!isDataEmpty
|
|
842
842
|
"
|
|
843
843
|
:container-ref="tableScroll"
|
|
844
844
|
@scroll-to-bottom="
|
|
@@ -895,7 +895,7 @@
|
|
|
895
895
|
<div
|
|
896
896
|
v-if="
|
|
897
897
|
hasBottomSelectionBanner &&
|
|
898
|
-
|
|
898
|
+
selectedRowsLabel(rowsSelectedNumber)
|
|
899
899
|
"
|
|
900
900
|
class="dl-table__control"
|
|
901
901
|
>
|
|
@@ -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`,
|