@dataloop-ai/components 0.20.196 → 0.20.198

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 (31) hide show
  1. package/package.json +1 -1
  2. package/src/assets/globals.scss +2 -10
  3. package/src/components/basic/DlButton/DlButton.vue +9 -8
  4. package/src/components/compound/DlDateTime/DlDateTimeRange/DateTimeRangeContent.vue +177 -0
  5. package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue +101 -106
  6. package/src/components/compound/DlDateTime/DlDateTimeRange/types.ts +5 -0
  7. package/src/components/compound/DlDropdownButton/DlDropdownButton.vue +24 -27
  8. package/src/components/compound/DlInput/DlInput.vue +9 -5
  9. package/src/components/compound/DlPagination/DlPagination.vue +3 -3
  10. package/src/components/compound/DlPagination/components/PageNavigation.vue +55 -39
  11. package/src/components/compound/DlPagination/components/PaginationLegend.vue +1 -1
  12. package/src/components/compound/DlPagination/components/QuickNavigation.vue +19 -17
  13. package/src/components/compound/DlPagination/components/RowsSelector.vue +4 -5
  14. package/src/components/compound/DlSearches/DlSearch/DlSearch.vue +12 -0
  15. package/src/components/compound/DlSearches/DlSmartSearch/DlSmartSearch.vue +3 -8
  16. package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue +71 -19
  17. package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue +187 -45
  18. package/src/components/compound/DlSelect/DlSelect.vue +22 -10
  19. package/src/components/compound/DlSelect/components/DlSelectOption.vue +7 -6
  20. package/src/components/compound/DlTable/DlTable.vue +21 -17
  21. package/src/components/compound/DlTable/styles/dl-table-styles.scss +21 -21
  22. package/src/components/compound/DlTreeTable/DlTreeTable.vue +16 -16
  23. package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue +1 -1
  24. package/src/components/essential/DlCheckbox/DlCheckbox.vue +8 -23
  25. package/src/components/essential/DlIcon/DlIcon.vue +1 -1
  26. package/src/components/essential/DlLink/DlLink.vue +14 -8
  27. package/src/components/essential/DlSwitch/DlSwitch.vue +14 -4
  28. package/src/components/essential/DlTypography/DlTypography.vue +1 -1
  29. package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue +3 -1
  30. package/src/demos/DlDateTimeRangeDemo.vue +20 -0
  31. package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue +1 -0
package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue CHANGED
@@ -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 Search"
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-option">
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
- <span class="json-query-menu-option">
36
- {{ scope.opt.label }}
37
- </span>
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
- <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
- />
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="showDeleteDialog = true"
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
- title="Query name"
105
- style="text-align: center"
106
- placeholder="Type query name"
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
- size="h3"
140
- style="display: flex; justify-content: center"
141
- >
142
- Are you sure you want to delete
143
- {{ selectedOption.label }}?
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 { DlTypography } from '../../../../essential'
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 showDeleteDialog = 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
+ })
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 === selectedOption.value.label
452
+ (o: DlSelectOption) => o.label === optionToDelete.value.label
360
453
  )
361
454
  const newOptions = options.value.filter(
362
- (o: DlSelectOption) => o.label !== selectedOption.value.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 lang="scss">
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>
package/src/components/compound/DlSelect/DlSelect.vue CHANGED
@@ -170,13 +170,17 @@
170
170
  <slot name="before-options" />
171
171
  </dl-item-section>
172
172
  </dl-list-item>
173
- <dl-list-item v-if="noOptions" :style="computedNoOptionsStyle">
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="
@@ -515,6 +519,10 @@ export default defineComponent({
515
519
  type: String,
516
520
  default: null
517
521
  },
522
+ noOptionsPadding: {
523
+ type: String,
524
+ default: null
525
+ },
518
526
  keepFocusOnBlur: {
519
527
  type: Boolean,
520
528
  default: false
@@ -807,7 +815,7 @@ export default defineComponent({
807
815
  return {
808
816
  '--placeholder-color': getColor(
809
817
  this.modelValueLength > 0 || this.selectedIndex !== -1
810
- ? 'dl-color-darker'
818
+ ? 'dell-gray-800'
811
819
  : 'dl-color-lighter'
812
820
  )
813
821
  }
@@ -929,7 +937,7 @@ export default defineComponent({
929
937
  return !!this.$slots.prepend && !this.isSmall
930
938
  },
931
939
  chevronIconColor(): string {
932
- return `${this.disabled ? 'dl-color-disabled' : null}`
940
+ return `${this.disabled ? 'dell-gray-500' : null}`
933
941
  },
934
942
  showMenuList(): boolean {
935
943
  if (
@@ -1048,7 +1056,11 @@ export default defineComponent({
1048
1056
  return !!option?.readonly
1049
1057
  },
1050
1058
  isDisableRowOption(option: DlSelectOptionType) {
1051
- return typeof option === 'object' && option !== null && !!option.disableRow
1059
+ return (
1060
+ typeof option === 'object' &&
1061
+ option !== null &&
1062
+ !!option.disableRow
1063
+ )
1052
1064
  },
1053
1065
  getOptionCount(option: any) {
1054
1066
  return option?.count ?? null
@@ -1323,10 +1335,10 @@ export default defineComponent({
1323
1335
  }
1324
1336
 
1325
1337
  .dl_select__select {
1326
- border: 1px solid var(--dl-color-separator);
1327
- border-radius: 2px;
1338
+ border: 1px solid var(--dell-gray-500);
1339
+ border-radius: 0px;
1328
1340
  cursor: pointer;
1329
- color: var(--dl-color-darker);
1341
+ color: var(--dell-gray-800);
1330
1342
  height: 12px;
1331
1343
  width: 100%;
1332
1344
  box-sizing: content-box;
@@ -1415,11 +1427,11 @@ export default defineComponent({
1415
1427
  }
1416
1428
 
1417
1429
  &:hover {
1418
- border-color: var(--dl-color-hover);
1430
+ border-color: var(--dell-gray-800);
1419
1431
  }
1420
1432
 
1421
1433
  &--focused {
1422
- border-color: var(--dl-color-secondary);
1434
+ border-color: var(--dell-blue-500) !important;
1423
1435
  }
1424
1436
 
1425
1437
  &--disabled {
package/src/components/compound/DlSelect/components/DlSelectOption.vue CHANGED
@@ -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,10 +142,7 @@ 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 {
146
- DlSelectOption,
147
- DlSelectOptionType
148
- } from '../../types'
145
+ import { DlSelectOption, DlSelectOptionType } from '../../types'
149
146
 
150
147
  const ValueTypes = [Array, Boolean, String, Number, Object, Function]
151
148
 
@@ -406,7 +403,11 @@ export default defineComponent({
406
403
  return !!option?.readonly
407
404
  },
408
405
  isDisableRowOption(option: DlSelectOptionType) {
409
- return typeof option === 'object' && option !== null && !!option.disableRow
406
+ return (
407
+ typeof option === 'object' &&
408
+ option !== null &&
409
+ !!option.disableRow
410
+ )
410
411
  }
411
412
  }
412
413
  })
package/src/components/compound/DlTable/DlTable.vue CHANGED
@@ -88,7 +88,7 @@
88
88
  v-bind="getHeaderScope({})"
89
89
  >
90
90
  <DlCheckbox
91
- :color="color"
91
+ :color="checkboxColor"
92
92
  :model-value="headerSelectedValue"
93
93
  :indeterminate-value="true"
94
94
  @update:model-value="
@@ -161,7 +161,7 @@
161
161
  <div
162
162
  v-if="
163
163
  visibleColumns &&
164
- visibleColumns.length
164
+ visibleColumns.length
165
165
  "
166
166
  class="visible-columns-justify-end"
167
167
  style="width: 100%; display: flex"
@@ -169,8 +169,8 @@
169
169
  <dl-button
170
170
  :text-color="
171
171
  isVisibleColumnsOpen
172
- ? 'dl-color-secondary'
173
- : 'dl-color-medium'
172
+ ? 'dell-blue-600'
173
+ : 'dell-gray-600'
174
174
  "
175
175
  flat
176
176
  icon="icon-dl-column"
@@ -274,8 +274,8 @@
274
274
  isRowSelected(getRowKey(props.item))
275
275
  ? 'selected'
276
276
  : hasAnyAction
277
- ? ' cursor-pointer'
278
- : ''
277
+ ? ' cursor-pointer'
278
+ : ''
279
279
  "
280
280
  :no-hover="noHover"
281
281
  @click="
@@ -325,7 +325,7 @@
325
325
  "
326
326
  >
327
327
  <DlCheckbox
328
- :color="color"
328
+ :color="checkboxColor"
329
329
  :model-value="
330
330
  isRowSelected(
331
331
  getRowKey(props.item)
@@ -490,7 +490,7 @@
490
490
  v-bind="getHeaderScope({})"
491
491
  >
492
492
  <DlCheckbox
493
- :color="color"
493
+ :color="checkboxColor"
494
494
  :model-value="headerSelectedValue"
495
495
  :indeterminate-value="true"
496
496
  @update:model-value="
@@ -565,7 +565,7 @@
565
565
  <div
566
566
  v-if="
567
567
  visibleColumns &&
568
- visibleColumns.length
568
+ visibleColumns.length
569
569
  "
570
570
  class="visible-columns-justify-end"
571
571
  style="width: 100%; display: flex"
@@ -674,8 +674,8 @@
674
674
  <dl-top-scroll
675
675
  v-if="
676
676
  tableScroll &&
677
- infiniteScroll &&
678
- !isDataEmpty
677
+ infiniteScroll &&
678
+ !isDataEmpty
679
679
  "
680
680
  :container-ref="tableScroll"
681
681
  @scroll-to-top="
@@ -709,8 +709,8 @@
709
709
  isRowSelected(getRowKey(row))
710
710
  ? 'selected'
711
711
  : hasAnyAction
712
- ? ' cursor-pointer'
713
- : ''
712
+ ? ' cursor-pointer'
713
+ : ''
714
714
  "
715
715
  :no-hover="noHover"
716
716
  @click="onTrClick($event, row, pageIndex)"
@@ -747,7 +747,7 @@
747
747
  "
748
748
  >
749
749
  <DlCheckbox
750
- :color="color"
750
+ :color="checkboxColor"
751
751
  :model-value="
752
752
  isRowSelected(
753
753
  getRowKey(row)
@@ -845,8 +845,8 @@
845
845
  <dl-bottom-scroll
846
846
  v-if="
847
847
  tableScroll &&
848
- infiniteScroll &&
849
- !isDataEmpty
848
+ infiniteScroll &&
849
+ !isDataEmpty
850
850
  "
851
851
  :container-ref="tableScroll"
852
852
  @scroll-to-bottom="
@@ -903,7 +903,7 @@
903
903
  <div
904
904
  v-if="
905
905
  hasBottomSelectionBanner &&
906
- selectedRowsLabel(rowsSelectedNumber)
906
+ selectedRowsLabel(rowsSelectedNumber)
907
907
  "
908
908
  class="dl-table__control"
909
909
  >
@@ -1285,6 +1285,10 @@ export default defineComponent({
1285
1285
  validator: (value: string) =>
1286
1286
  ['first', 'last', 'both'].includes(value)
1287
1287
  },
1288
+ checkboxColor: {
1289
+ type: String,
1290
+ default: 'dell-blue-500'
1291
+ },
1288
1292
  ...useTableActionsProps,
1289
1293
  ...commonVirtScrollProps,
1290
1294
  ...useTableRowExpandProps,