@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.
@@ -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; --dl-dialog-box-content-padding: 0"
7
+ style="--dl-dialog-box-footer-padding: 10px 16px"
8
8
  >
9
9
  <template #header>
10
10
  <dl-dialog-box-header
11
- title="DQL Editor"
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 class="json-query-menu">
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-selected">
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
- <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
- />
35
+ <span class="json-query-menu-option">
36
+ {{ scope.opt.label }}
37
+ </span>
95
38
  </template>
96
39
  </dl-select>
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>
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="optionToDelete = selectedOption"
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
- :red-asterisk="true"
173
- :required="true"
174
- title="Query Name"
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 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.
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 { DlTooltip } from '../../../../shared/DlTooltip'
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 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
- })
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 === optionToDelete.value.label
359
+ (o: DlSelectOption) => o.label === selectedOption.value.label
453
360
  )
454
361
  const newOptions = options.value.filter(
455
- (o: DlSelectOption) => o.label !== optionToDelete.value.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: calc(100% - 40px);
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-else-if="showMenuList"
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 { DlSelectOption, DlSelectOptionType } from '../../types'
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
- visibleColumns.length
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
- ? ' cursor-pointer'
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
- visibleColumns.length
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
- infiniteScroll &&
670
- !isDataEmpty
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
- ? ' cursor-pointer'
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
- infiniteScroll &&
841
- !isDataEmpty
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
- selectedRowsLabel(rowsSelectedNumber)
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: `dl-table-${v4()}`,
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
  }
@@ -16,7 +16,7 @@
16
16
  }`"
17
17
  >
18
18
  <dl-icon
19
- v-if="hasDraggableRows && !row.disableDraggable"
19
+ v-if="hasDraggableRows && !row.disableDraggable"
20
20
  class="draggable-icon"
21
21
  icon="icon-dl-drag"
22
22
  size="12px"