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

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 (10) hide show
  1. package/package.json +1 -1
  2. package/src/assets/theme.css +1 -1
  3. package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue +1 -6
  4. package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue +45 -187
  5. package/src/components/compound/DlSelect/DlSelect.vue +2 -10
  6. package/src/components/compound/DlTable/DlTable.vue +11 -11
  7. package/src/components/compound/DlTreeTable/DlTreeTable.vue +2 -4
  8. package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue +1 -1
  9. package/src/components/essential/DlSwitch/DlSwitch.vue +4 -14
  10. package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.20.175-ds-v3.0",
3
+ "version": "0.20.175",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/assets/theme.css CHANGED
@@ -152,7 +152,7 @@ body {
152
152
  --dl-color-positive: #3FC97F;
153
153
  --dl-color-positive-background: #183928;
154
154
  --dl-color-positive-bg: #183928;
155
- --dl-color-info-background: #1F3447;
155
+ --dl-color-info-background: #182F44;
156
156
  --dl-color-info-bg: #182F44;
157
157
  --dl-color-info: #7CC8F4;
158
158
  --dl-color-info-base: #0A365C;
package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue CHANGED
@@ -53,7 +53,7 @@
53
53
  </div>
54
54
  </div>
55
55
  <dl-tooltip
56
- v-if="!focused && !noTooltip"
56
+ v-if="!focused"
57
57
  border="1px solid var(--dl-color-separator)"
58
58
  background-color="dl-color-panel-background"
59
59
  color="dl-color-darker"
@@ -248,10 +248,6 @@ export default defineComponent({
248
248
  type: String,
249
249
  default: '28px'
250
250
  },
251
- noTooltip: {
252
- type: Boolean,
253
- default: false
254
- },
255
251
  omitSuggestions: {
256
252
  type: Array as PropType<string[]>,
257
253
  default: () => [] as string[]
@@ -301,7 +297,6 @@ export default defineComponent({
301
297
  defaultIcon,
302
298
  defaultIconColor,
303
299
  schema,
304
- noTooltip,
305
300
  omitSuggestions,
306
301
  operatorsOverride,
307
302
  height,
package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue CHANGED
@@ -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>
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="
@@ -517,10 +513,6 @@ export default defineComponent({
517
513
  type: String,
518
514
  default: null
519
515
  },
520
- noOptionsPadding: {
521
- type: String,
522
- default: null
523
- },
524
516
  keepFocusOnBlur: {
525
517
  type: Boolean,
526
518
  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
@@ -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
  }
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"
package/src/components/essential/DlSwitch/DlSwitch.vue CHANGED
@@ -7,14 +7,12 @@
7
7
  }`"
8
8
  >
9
9
  <label
10
- v-if="hasLeftLabel"
10
+ v-if="!!leftLabel"
11
11
  class="left dl-switch-label"
12
12
  :for="computedId"
13
13
  :style="cssLabelVars"
14
14
  >
15
- <slot name="left-label">
16
- {{ leftLabel }}
17
- </slot>
15
+ {{ leftLabel }}
18
16
  </label>
19
17
  <span
20
18
  class="dl-switch-container"
@@ -37,14 +35,12 @@
37
35
  />
38
36
  </span>
39
37
  <label
40
- v-if="hasRightLabel"
38
+ v-if="!!rightLabel"
41
39
  class="right dl-switch-label"
42
40
  :for="computedId"
43
41
  :style="cssLabelVars"
44
42
  >
45
- <slot name="right-label">
46
- {{ rightLabel }}
47
- </slot>
43
+ {{ rightLabel }}
48
44
  </label>
49
45
  </div>
50
46
  </template>
@@ -147,12 +143,6 @@ export default defineComponent({
147
143
  ? this.index === -1
148
144
  : toRaw(this.modelValue) === toRaw(this.falseValue)
149
145
  },
150
- hasLeftLabel(): boolean {
151
- return !!this.leftLabel || !!this.$slots['left-label']
152
- },
153
- hasRightLabel(): boolean {
154
- return !!this.rightLabel || !!this.$slots['right-label']
155
- },
156
146
  cssVars(): Record<string, string> {
157
147
  return {
158
148
  '--dl-checkbox-height': `${this.size}px`,
package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue CHANGED
@@ -42,7 +42,6 @@
42
42
 
43
43
  <dl-smart-search-input
44
44
  v-model="queryObject"
45
- no-tooltip
46
45
  :aliases="aliases"
47
46
  :schema="schema"
48
47
  :color-schema="colorSchema"