@dataloop-ai/components 0.20.167-ds-v3.0 → 0.20.167

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.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue +36 -172
  3. package/src/components/compound/DlSelect/DlSelect.vue +2 -10
  4. package/src/components/compound/DlTable/DlTable.vue +11 -11
  5. package/src/components/compound/DlTreeTable/DlTreeTable.vue +32 -7
  6. package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.20.167-ds-v3.0",
3
+ "version": "0.20.167",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue CHANGED
@@ -8,7 +8,7 @@
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
  />
@@ -21,93 +21,31 @@
21
21
  >
22
22
  <dl-select
23
23
  :model-value="selectedOption"
24
- ref="jsonQueryMenu"
25
24
  width="300px"
26
25
  :options="selectOptions"
27
26
  placeholder="New Query"
28
- searchable
29
- after-options-padding="0"
30
- no-options-padding="0"
31
- menu-style="overflow-y: hidden;"
32
27
  @update:model-value="onQuerySelect"
33
28
  >
34
29
  <template #selected="scope">
35
- <span class="json-query-menu-selected">
30
+ <span class="json-query-menu-option">
36
31
  {{ scope.opt ? scope.opt.label : '' }}
37
32
  </span>
38
33
  </template>
39
34
  <template #option="scope">
40
- <div class="json-query-menu-option">
41
- <div class="json-query-menu-option-label">
42
- {{ scope.opt.label }}
43
- </div>
44
- <dl-icon
45
- v-if="scope.opt.label !== 'New Query'"
46
- icon="icon-dl-delete"
47
- color="dl-color-negative"
48
- class="json-query-menu-option-delete"
49
- @click.stop="onDelete(scope.opt)"
50
- >
51
- <dl-tooltip>Delete</dl-tooltip>
52
- </dl-icon>
53
- </div>
54
- </template>
55
- <template #after-options>
56
- <dl-separator
57
- style="margin: 0 0 2px 0 !important"
58
- type="horizontal"
59
- />
60
- <dl-button
61
- icon="icon-dl-save"
62
- flat
63
- fluid
64
- secondary
65
- size="s"
66
- label="Save Query"
67
- class="json-query-menu-save-button"
68
- @click="onSave"
69
- />
70
- </template>
71
- <template #no-options>
72
- <div class="json-query-menu-no-option">
73
- {{ noOptionsLabel }}
74
- </div>
75
- <dl-separator
76
- style="margin: 0 0 2px 0 !important"
77
- type="horizontal"
78
- />
79
- <dl-button
80
- icon="icon-dl-save"
81
- flat
82
- fluid
83
- secondary
84
- size="s"
85
- label="Save Query"
86
- class="json-query-menu-save-button"
87
- @click="onSave"
88
- />
35
+ <span class="json-query-menu-option">
36
+ {{ scope.opt.label }}
37
+ </span>
89
38
  </template>
90
39
  </dl-select>
91
- <div>
92
- <dl-button
93
- icon="icon-dl-align-left"
94
- tooltip="Align Left"
95
- flat
96
- color="secondary"
97
- padding="0px 3px"
98
- :disabled="alignDisabled"
99
- @click="alignJSON"
100
- />
101
- <dl-button
102
- icon="icon-dl-copy"
103
- tooltip="Copy"
104
- flat
105
- color="secondary"
106
- padding="0px 3px"
107
- :disabled="alignDisabled"
108
- @click="copyJSON"
109
- />
110
- </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
+ />
111
49
  </div>
112
50
  <dl-json-editor
113
51
  ref="jsonEditor"
@@ -127,7 +65,7 @@
127
65
  flat
128
66
  color="secondary"
129
67
  padding="0"
130
- @click="optionToDelete = selectedOption"
68
+ @click="showDeleteDialog = true"
131
69
  />
132
70
  <div class="json-editor-footer-actions">
133
71
  <dl-button
@@ -163,20 +101,27 @@
163
101
  <template #body>
164
102
  <dl-input
165
103
  v-model="newQueryName"
166
- :red-asterisk="true"
167
- :required="true"
168
- title="Query Name"
169
- placeholder="Insert query name"
104
+ title="Query name"
105
+ style="text-align: center"
106
+ placeholder="Type query name"
170
107
  />
171
108
  </template>
172
109
  <template #footer>
173
110
  <div class="dl-smart-search__buttons--save">
174
111
  <dl-button
175
112
  :disabled="!newQueryName"
113
+ outlined
114
+ style="margin-right: 5px"
176
115
  @click="() => saveQuery(false)"
177
116
  >
178
117
  Save
179
118
  </dl-button>
119
+ <dl-button
120
+ :disabled="!newQueryName"
121
+ @click="() => saveQuery(true)"
122
+ >
123
+ Save and Search
124
+ </dl-button>
180
125
  </div>
181
126
  </template>
182
127
  </dl-dialog-box>
@@ -190,13 +135,12 @@
190
135
  />
191
136
  </template>
192
137
  <template #body>
193
- <dl-typography size="h5">
194
- Are you sure you want to permanently delete the following query?
195
- <br />
196
- {{ optionToDelete.label }}
197
- <br />
198
- <br />
199
- 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 }}?
200
144
  </dl-typography>
201
145
  </template>
202
146
  <template #footer>
@@ -222,12 +166,10 @@ import {
222
166
  } from 'vue-demi'
223
167
  import { DlSelect } from '../../../DlSelect'
224
168
  import { DlSelectOption } from '../../../DlSelect/types'
225
- import { DlSeparator } from '../../../../essential/DlSeparator'
226
169
  import { DlButton } from '../../../../basic'
227
170
  import { DlDialogBox, DlDialogBoxHeader } from '../../../DlDialogBox'
228
171
  import { DlJsonEditor } from '../../../DlJsonEditor'
229
- import { DlTooltip } from '../../../../shared/DlTooltip'
230
- import { DlTypography, DlIcon } from '../../../../essential'
172
+ import { DlTypography } from '../../../../essential'
231
173
  import { DlInput } from '../../../DlInput'
232
174
  import { stateManager } from '../../../../../StateManager'
233
175
  import { cloneDeep, isEqual, uniqBy } from 'lodash'
@@ -237,12 +179,9 @@ export default defineComponent({
237
179
  components: {
238
180
  DlDialogBox,
239
181
  DlDialogBoxHeader,
240
- DlIcon,
241
182
  DlJsonEditor,
242
183
  DlButton,
243
184
  DlSelect,
244
- DlSeparator,
245
- DlTooltip,
246
185
  DlTypography,
247
186
  DlInput
248
187
  },
@@ -275,24 +214,11 @@ export default defineComponent({
275
214
  'update:modelValue',
276
215
  'search',
277
216
  'change',
278
- 'copied',
279
217
  'update:options',
280
218
  'save',
281
219
  'delete',
282
220
  'select'
283
221
  ],
284
- methods: {
285
- onDelete(option: DlSelectOption) {
286
- const select = this.$refs['jsonQueryMenu'] as InstanceType<typeof DlSelect>
287
- select?.closeMenu()
288
- this.optionToDelete = option
289
- },
290
- onSave() {
291
- const select = this.$refs['jsonQueryMenu'] as InstanceType<typeof DlSelect>
292
- select?.closeMenu()
293
- this.showSaveDialog = true
294
- }
295
- },
296
222
  setup(props, { emit }) {
297
223
  const { modelValue, options, json, selectedFilter } = toRefs(props)
298
224
 
@@ -304,15 +230,7 @@ export default defineComponent({
304
230
  const currentQuery = ref<{ [key: string]: any }>(cloneDeep(json.value))
305
231
  const jsonEditor = ref<any>(null)
306
232
  const showSaveDialog = ref(false)
307
- const optionToDelete = ref<DlSelectOption>(null)
308
- const showDeleteDialog = computed<boolean>({
309
- get: () => !!optionToDelete.value,
310
- set: (val) => {
311
- if (!val) {
312
- optionToDelete.value = null
313
- }
314
- }
315
- })
233
+ const showDeleteDialog = ref(false)
316
234
  const newQueryName = ref('')
317
235
  const alignDisabled = ref(false)
318
236
 
@@ -334,12 +252,6 @@ export default defineComponent({
334
252
  }
335
253
  )
336
254
 
337
- const noOptionsLabel = computed<string>(() => {
338
- return selectOptions.value.length
339
- ? 'No Results Found'
340
- : 'No Saved Queries'
341
- })
342
-
343
255
  watch(
344
256
  selectedFilter,
345
257
  () => {
@@ -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)
@@ -483,14 +390,11 @@ export default defineComponent({
483
390
  showSaveDialog,
484
391
  stringifiedJSON,
485
392
  selectedOption,
486
- noOptionsLabel,
487
393
  hasActiveFilter,
488
394
  alignJSON,
489
- copyJSON,
490
395
  onQuerySelect,
491
396
  newQueryName,
492
397
  alignDisabled,
493
- optionToDelete,
494
398
  showDeleteDialog,
495
399
  selectOptions,
496
400
  search,
@@ -522,50 +426,10 @@ export default defineComponent({
522
426
  }
523
427
 
524
428
  .json-query-menu-option {
525
- display: flex;
526
- flex-direction: row;
527
- }
528
- .json-query-menu-option-label,
529
- .json-query-menu-selected {
530
- line-height: 20px;
531
429
  white-space: nowrap;
532
430
  display: inline-block;
533
431
  width: 265px;
534
432
  overflow: hidden;
535
433
  text-overflow: ellipsis;
536
434
  }
537
- .json-query-menu-option:hover .json-query-menu-option-label {
538
- margin-right: 6px;
539
- width: 255px;
540
- }
541
- .json-query-menu-option-delete {
542
- overflow-x: hidden;
543
- width: 0;
544
- }
545
- .json-query-menu-option:hover .json-query-menu-option-delete {
546
- border-radius: 4px;
547
- overflow-x: visible;
548
- padding: 4px;
549
- width: auto;
550
- }
551
- .json-query-menu-option-delete:hover {
552
- background-color: var(--dl-color-fill-secondary);
553
- }
554
- .json-query-menu-option-delete:active {
555
- background-color: var(--dl-color-negative-background);
556
- }
557
- .json-query-menu-no-option {
558
- display: flex;
559
- padding: 20px 0;
560
- flex-direction: column;
561
- align-items: center;
562
- align-self: stretch;
563
- }
564
- .json-query-menu-save-button:hover {
565
- background-color: var(--dl-color-fill-secondary);
566
- }
567
- .dl-smart-search__buttons--save {
568
- text-align: right;
569
- width: 100%;
570
- }
571
435
  </style>
package/src/components/compound/DlSelect/DlSelect.vue CHANGED
@@ -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="
@@ -514,10 +510,6 @@ export default defineComponent({
514
510
  type: String,
515
511
  default: null
516
512
  },
517
- noOptionsPadding: {
518
- type: String,
519
- default: null
520
- },
521
513
  keepFocusOnBlur: {
522
514
  type: Boolean,
523
515
  default: false
package/src/components/compound/DlTable/DlTable.vue CHANGED
@@ -156,7 +156,7 @@
156
156
  <div
157
157
  v-if="
158
158
  visibleColumns &&
159
- visibleColumns.length
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
- ? ' cursor-pointer'
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
- visibleColumns.length
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
- infiniteScroll &&
670
- !isDataEmpty
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
- ? ' cursor-pointer'
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
- infiniteScroll &&
841
- !isDataEmpty
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
- selectedRowsLabel(rowsSelectedNumber)
898
+ selectedRowsLabel(rowsSelectedNumber)
899
899
  "
900
900
  class="dl-table__control"
901
901
  >
package/src/components/compound/DlTreeTable/DlTreeTable.vue CHANGED
@@ -355,6 +355,7 @@ export default defineComponent({
355
355
  const hasFlatTreeData = true
356
356
  const draggedRow = ref<DlTableRow | null>(null)
357
357
  const targetRow = ref<DlTableRow | null>(null)
358
+ const storedValidTarget = ref<DlTableRow | null>(null)
358
359
 
359
360
  const vue2h = ref()
360
361
 
@@ -783,24 +784,38 @@ export default defineComponent({
783
784
  }
784
785
 
785
786
  const handleEndEvent = (event: SortableJs.SortableEvent) => {
787
+ let finalTarget = targetRow.value
788
+ let shouldSkipValidation = false
789
+
790
+ if (storedValidTarget.value && targetRow.value) {
791
+ const targetParent = findParentForChild(targetRow.value.id, tableRows.value)
792
+ if (targetParent === storedValidTarget.value.id) {
793
+ finalTarget = storedValidTarget.value
794
+ shouldSkipValidation = true
795
+ }
796
+ }
797
+
786
798
  emit('row-drag-end', {
787
799
  draggedRow: draggedRow.value,
788
- targetRow: targetRow.value
800
+ targetRow: finalTarget
789
801
  })
790
- const isDragValid = checkParentCondition(
791
- draggedRow.value,
792
- targetRow.value
793
- )
802
+
803
+ const isDragValid = shouldSkipValidation || checkParentCondition(draggedRow.value, finalTarget)
794
804
  if (isDragValid) {
805
+ const smartSortingMovement = {
806
+ ...sortingMovement.value,
807
+ lastId: finalTarget?.id || sortingMovement.value.lastId
808
+ }
795
809
  emit(
796
810
  'row-reorder',
797
- moveNestedRow(tableRows.value, event, sortingMovement.value)
811
+ moveNestedRow(tableRows.value, event, smartSortingMovement)
798
812
  )
799
813
  } else {
800
814
  mainTableKey.value = v4()
801
815
  }
802
816
  draggedRow.value = null
803
817
  targetRow.value = null
818
+ storedValidTarget.value = null
804
819
  }
805
820
 
806
821
  const handleChangeEvent = (event: any) => {
@@ -905,7 +920,17 @@ export default defineComponent({
905
920
  return false
906
921
  }
907
922
 
908
- return checkParentCondition(draggedRow.value, targetRow)
923
+
924
+ if (targetRow.disableDraggable) {
925
+ return false
926
+ }
927
+
928
+ const isValid = checkParentCondition(draggedRow.value, targetRow)
929
+
930
+ if (isValid) {
931
+ storedValidTarget.value = targetRow
932
+ }
933
+ return isValid
909
934
  }
910
935
 
911
936
  const getTargetRowFromMoveEvent = (
package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue CHANGED
@@ -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"