@dataloop-ai/components 0.19.3 → 0.19.4

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/DlCharts/charts/DlLineChart/DlLineChart.vue +47 -30
  3. package/src/components/compound/DlCharts/charts/DlScatterChart/DlScatterChart.vue +57 -34
  4. package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue +1 -2
  5. package/src/components/compound/DlTable/DlTable.vue +1 -3
  6. package/src/components/compound/DlTable/hooks/tableColumnSelection.ts +6 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.19.3",
3
+ "version": "0.19.4",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/compound/DlCharts/charts/DlLineChart/DlLineChart.vue CHANGED
@@ -106,7 +106,8 @@ import {
106
106
  watch,
107
107
  ref,
108
108
  computed,
109
- PropType
109
+ PropType,
110
+ toRefs
110
111
  } from 'vue-demi'
111
112
  import DlEmptyState from '../../../../basic/DlEmptyState/DlEmptyState.vue'
112
113
  import { DlEmptyStateProps } from '../../../../basic/DlEmptyState/types'
@@ -185,8 +186,18 @@ export default defineComponent({
185
186
  ...CommonProps,
186
187
  ...ColumnChartProps
187
188
  } as { [key: string]: any },
188
- setup(props, { slots }) {
189
+ setup(props) {
189
190
  const { variables } = useThemeVariables()
191
+ const {
192
+ data,
193
+ options,
194
+ rootClass,
195
+ chartClass,
196
+ brushClass,
197
+ legendClass,
198
+ brushProps,
199
+ legendProps
200
+ } = toRefs(props)
190
201
 
191
202
  const chartWidth = ref('100%')
192
203
 
@@ -219,7 +230,7 @@ export default defineComponent({
219
230
  value: {
220
231
  min: 0,
221
232
  max:
222
- orderBy(props.data.datasets, (o) => o.data.length)[0].data
233
+ orderBy(data.value.datasets, (o) => o.data.length)[0].data
223
234
  .length - 1
224
235
  }
225
236
  })
@@ -232,7 +243,7 @@ export default defineComponent({
232
243
  }
233
244
  }
234
245
  const datasets: DatasetController<'line'> = updateKeys(
235
- props.data.datasets,
246
+ data.value.datasets,
236
247
  [
237
248
  'backgroundColor',
238
249
  'pointBackgroundColor',
@@ -257,9 +268,9 @@ export default defineComponent({
257
268
  })
258
269
 
259
270
  const chartProps = cloneDeep({
260
- options: props.options,
271
+ options: options.value,
261
272
  data: {
262
- ...props.data,
273
+ ...data.value,
263
274
  datasets
264
275
  }
265
276
  })
@@ -270,8 +281,8 @@ export default defineComponent({
270
281
  const chartWrapperClasses = computed(() => {
271
282
  const classes = 'dl-line-chart-wrapper'
272
283
 
273
- if (props.rootClass) {
274
- classes.concat(' ', props.rootClass)
284
+ if (rootClass.value) {
285
+ classes.concat(' ', rootClass.value)
275
286
  }
276
287
 
277
288
  return classes
@@ -280,8 +291,8 @@ export default defineComponent({
280
291
  const chartClasses = computed(() => {
281
292
  const classes = 'dl-line-chart'
282
293
 
283
- if (props.chartClass) {
284
- classes.concat(' ', props.chartClass)
294
+ if (chartClass.value) {
295
+ classes.concat(' ', chartClass.value)
285
296
  }
286
297
 
287
298
  return classes
@@ -290,8 +301,8 @@ export default defineComponent({
290
301
  const brushClasses = computed(() => {
291
302
  const classes = 'dl-brush'
292
303
 
293
- if (props.brushClass) {
294
- classes.concat(' ', props.brushClass)
304
+ if (brushClass.value) {
305
+ classes.concat(' ', brushClass.value)
295
306
  }
296
307
 
297
308
  return classes
@@ -300,19 +311,19 @@ export default defineComponent({
300
311
  const legendClasses = computed(() => {
301
312
  const classes = 'dl-legend'
302
313
 
303
- if (props.legendClass) {
304
- classes.concat(' ', props.legendClass)
314
+ if (legendClass.value) {
315
+ classes.concat(' ', legendClass.value)
305
316
  }
306
317
 
307
318
  return classes
308
319
  })
309
320
 
310
321
  const brushProperties = computed(() => {
311
- return merge(defaultLineChartProps.brushProps, props.brushProps)
322
+ return merge(defaultLineChartProps.brushProps, brushProps.value)
312
323
  })
313
324
 
314
325
  const legendProperties = computed(() => {
315
- return merge(defaultLineChartProps.legendProps, props.legendProps)
326
+ return merge(defaultLineChartProps.legendProps, legendProps.value)
316
327
  })
317
328
 
318
329
  const cssVars = computed(() => {
@@ -338,12 +349,12 @@ export default defineComponent({
338
349
  replaceColor
339
350
  )
340
351
 
341
- const chartData = ref(replaceDataColors(props.data))
352
+ const chartData = ref(replaceDataColors(data.value))
342
353
 
343
354
  const legendDatasets = ref(
344
355
  unionBy(
345
- props.legendProps?.datasets || [],
346
- props.data?.datasets || [],
356
+ legendProps.value?.datasets || [],
357
+ data.value?.datasets || [],
347
358
  'label'
348
359
  ) as { [key: string]: any }[]
349
360
  )
@@ -493,7 +504,7 @@ export default defineComponent({
493
504
  merge(
494
505
  { onResize, onHover },
495
506
  defaultLineChartProps.options,
496
- props.options
507
+ options.value
497
508
  ),
498
509
  ['color'],
499
510
  replaceColor
@@ -528,7 +539,7 @@ export default defineComponent({
528
539
  chart.value.update()
529
540
  }
530
541
 
531
- const xLabels = ref(props.data.labels)
542
+ const xLabels = ref(data.value.labels)
532
543
 
533
544
  const onHoverLegend = (
534
545
  item: BarControllerDatasetOptions,
@@ -586,18 +597,24 @@ export default defineComponent({
586
597
  }
587
598
 
588
599
  const labelStyles = computed(() => {
589
- const options = merge(
600
+ const mergedOptions = merge(
590
601
  {},
591
602
  defaultLineChartProps.options,
592
- props.options
603
+ options.value
593
604
  )
594
605
 
595
606
  return {
596
- title: options.scales.x.title.text,
597
- titleSize: `${options.scales.x.title.font.size}px`,
598
- titleColor: options.scales.x.title.color.replace('--', ''),
599
- labelColor: options.scales.x.ticks.color.replace('--', ''),
600
- fontSize: `${options.scales.x.ticks.font.size}px`
607
+ title: mergedOptions.scales.x.title.text,
608
+ titleSize: `${mergedOptions.scales.x.title.font.size}px`,
609
+ titleColor: mergedOptions.scales.x.title.color.replace(
610
+ '--',
611
+ ''
612
+ ),
613
+ labelColor: mergedOptions.scales.x.ticks.color.replace(
614
+ '--',
615
+ ''
616
+ ),
617
+ fontSize: `${mergedOptions.scales.x.ticks.font.size}px`
601
618
  }
602
619
  })
603
620
 
@@ -623,7 +640,7 @@ export default defineComponent({
623
640
  merge(
624
641
  { onResize, onHover },
625
642
  defaultLineChartProps.options,
626
- props.options
643
+ options.value
627
644
  ),
628
645
  ['color'],
629
646
  replaceColor
@@ -637,7 +654,7 @@ export default defineComponent({
637
654
  })
638
655
 
639
656
  watch(
640
- [props.data, props.options],
657
+ [data, options],
641
658
  ([newData = {}, newOptions = {}]) => {
642
659
  chartData.value = replaceDataColors(newData as ChartData)
643
660
 
package/src/components/compound/DlCharts/charts/DlScatterChart/DlScatterChart.vue CHANGED
@@ -83,7 +83,14 @@ import {
83
83
  ColumnChartProps,
84
84
  defaultLineChartProps
85
85
  } from '../../types/props'
86
- import { defineComponent, reactive, watch, ref, computed } from 'vue-demi'
86
+ import {
87
+ defineComponent,
88
+ reactive,
89
+ watch,
90
+ ref,
91
+ computed,
92
+ toRefs
93
+ } from 'vue-demi'
87
94
  import DlBrush from '../../components/DlBrush.vue'
88
95
  import DlChartLegend from '../../components/DlChartLegend.vue'
89
96
  import DlChartLabels from '../../components/DlChartLabels.vue'
@@ -141,9 +148,19 @@ export default defineComponent({
141
148
  },
142
149
  ...CommonProps,
143
150
  ...ColumnChartProps
144
- },
145
- setup(props, { slots }) {
151
+ } as { [key: string]: any },
152
+ setup(props) {
146
153
  const { variables } = useThemeVariables()
154
+ const {
155
+ data,
156
+ options,
157
+ rootClass,
158
+ chartClass,
159
+ brushClass,
160
+ legendClass,
161
+ brushProps,
162
+ legendProps
163
+ } = toRefs(props)
147
164
 
148
165
  const chartWidth = ref('100%')
149
166
 
@@ -176,8 +193,8 @@ export default defineComponent({
176
193
  value: {
177
194
  min: 0,
178
195
  max:
179
- props.data.datasets.length > 0
180
- ? orderBy(props.data.datasets, (o) => o.data.length)[0]
196
+ data.value.datasets.length > 0
197
+ ? orderBy(data.value.datasets, (o) => o.data.length)[0]
181
198
  .data.length - 1
182
199
  : 1
183
200
  }
@@ -191,7 +208,7 @@ export default defineComponent({
191
208
  }
192
209
  }
193
210
  const datasets: DatasetController<'scatter'> = updateKeys(
194
- props.data.datasets,
211
+ data.value.datasets,
195
212
  [
196
213
  'backgroundColor',
197
214
  'pointBackgroundColor',
@@ -216,9 +233,9 @@ export default defineComponent({
216
233
  })
217
234
 
218
235
  const chartProps = cloneDeep({
219
- options: props.options,
236
+ options: options.value,
220
237
  data: {
221
- ...props.data,
238
+ ...data.value,
222
239
  datasets
223
240
  }
224
241
  })
@@ -229,8 +246,8 @@ export default defineComponent({
229
246
  const chartWrapperClasses = computed(() => {
230
247
  const classes = 'dl-scatter-chart-wrapper'
231
248
 
232
- if (props.rootClass) {
233
- classes.concat(' ', props.rootClass)
249
+ if (rootClass.value) {
250
+ classes.concat(' ', rootClass.value)
234
251
  }
235
252
 
236
253
  return classes
@@ -239,8 +256,8 @@ export default defineComponent({
239
256
  const chartClasses = computed(() => {
240
257
  const classes = 'dl-scatter-chart'
241
258
 
242
- if (props.chartClass) {
243
- classes.concat(' ', props.chartClass)
259
+ if (chartClass.value) {
260
+ classes.concat(' ', chartClass.value)
244
261
  }
245
262
 
246
263
  return classes
@@ -249,8 +266,8 @@ export default defineComponent({
249
266
  const brushClasses = computed(() => {
250
267
  const classes = 'dl-brush'
251
268
 
252
- if (props.brushClass) {
253
- classes.concat(' ', props.brushClass)
269
+ if (brushClass.value) {
270
+ classes.concat(' ', brushClass.value)
254
271
  }
255
272
 
256
273
  return classes
@@ -259,19 +276,19 @@ export default defineComponent({
259
276
  const legendClasses = computed(() => {
260
277
  const classes = 'dl-legend'
261
278
 
262
- if (props.legendClass) {
263
- classes.concat(' ', props.legendClass)
279
+ if (legendClass.value) {
280
+ classes.concat(' ', legendClass.value)
264
281
  }
265
282
 
266
283
  return classes
267
284
  })
268
285
 
269
286
  const brushProperties = computed(() => {
270
- return merge(defaultLineChartProps.brushProps, props.brushProps)
287
+ return merge(defaultLineChartProps.brushProps, brushProps.value)
271
288
  })
272
289
 
273
290
  const legendProperties = computed(() => {
274
- return merge(defaultLineChartProps.legendProps, props.legendProps)
291
+ return merge(defaultLineChartProps.legendProps, legendProps.value)
275
292
  })
276
293
 
277
294
  const cssVars = computed(() => {
@@ -297,12 +314,12 @@ export default defineComponent({
297
314
  replaceColor
298
315
  )
299
316
 
300
- const chartData = ref(replaceDataColors(props.data))
317
+ const chartData = ref(replaceDataColors(data.value))
301
318
 
302
319
  const legendDatasets = ref(
303
320
  unionBy(
304
- props.legendProps?.datasets || [],
305
- props.data?.datasets || [],
321
+ legendProps.value?.datasets || [],
322
+ data.value?.datasets || [],
306
323
  'label'
307
324
  )
308
325
  )
@@ -452,7 +469,7 @@ export default defineComponent({
452
469
  merge(
453
470
  { onResize, onHover },
454
471
  defaultLineChartProps.options,
455
- props.options
472
+ options.value
456
473
  ),
457
474
  ['color'],
458
475
  replaceColor
@@ -460,7 +477,7 @@ export default defineComponent({
460
477
  )
461
478
 
462
479
  watch(
463
- () => chart.value?.scales?.x?.width,
480
+ () => chart.value?.scales?.x?.width ?? null,
464
481
  (val: string) => {
465
482
  if (val) {
466
483
  chartWidth.value = `${
@@ -487,7 +504,7 @@ export default defineComponent({
487
504
  chart.value.update()
488
505
  }
489
506
 
490
- const xLabels = ref(props.data.labels)
507
+ const xLabels = ref(data.value?.labels ?? [])
491
508
 
492
509
  const onHoverLegend = (
493
510
  item: BarControllerDatasetOptions,
@@ -545,18 +562,24 @@ export default defineComponent({
545
562
  }
546
563
 
547
564
  const labelStyles = computed(() => {
548
- const options = merge(
565
+ const mergedOptions = merge(
549
566
  {},
550
567
  defaultLineChartProps.options,
551
- props.options
568
+ options.value
552
569
  )
553
570
 
554
571
  return {
555
- title: options.scales.x.title.text,
556
- titleSize: `${options.scales.x.title.font.size}px`,
557
- titleColor: options.scales.x.title.color.replace('--', ''),
558
- labelColor: options.scales.x.ticks.color.replace('--', ''),
559
- fontSize: `${options.scales.x.ticks.font.size}px`
572
+ title: mergedOptions.scales.x.title.text,
573
+ titleSize: `${mergedOptions.scales.x.title.font.size}px`,
574
+ titleColor: mergedOptions.scales.x.title.color.replace(
575
+ '--',
576
+ ''
577
+ ),
578
+ labelColor: mergedOptions.scales.x.ticks.color.replace(
579
+ '--',
580
+ ''
581
+ ),
582
+ fontSize: `${mergedOptions.scales.x.ticks.font.size}px`
560
583
  }
561
584
  })
562
585
 
@@ -568,7 +591,7 @@ export default defineComponent({
568
591
  legendDatasets.value.splice(index, 1, {
569
592
  ...legendDatasets.value[index],
570
593
  hidden: !!item.hidden
571
- })
594
+ } as any)
572
595
 
573
596
  chart.value.update()
574
597
  }
@@ -582,7 +605,7 @@ export default defineComponent({
582
605
  merge(
583
606
  { onResize, onHover },
584
607
  defaultLineChartProps.options,
585
- props.options
608
+ options.value
586
609
  ),
587
610
  ['color'],
588
611
  replaceColor
@@ -596,7 +619,7 @@ export default defineComponent({
596
619
  })
597
620
 
598
621
  watch(
599
- [props.data, props.options],
622
+ [data, options],
600
623
  ([newData = {}, newOptions = {}]) => {
601
624
  chartData.value = replaceDataColors(newData as ChartData)
602
625
 
package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue CHANGED
@@ -360,10 +360,9 @@ export default defineComponent({
360
360
 
361
361
  const debouncedSetInputValue = debounce(setInputValue, 300)
362
362
 
363
- let lastSearchQuery: string;
363
+ let lastSearchQuery: string
364
364
 
365
365
  const updateJSONQuery = () => {
366
-
367
366
  if (lastSearchQuery === searchQuery.value) {
368
367
  return null
369
368
  } else {
package/src/components/compound/DlTable/DlTable.vue CHANGED
@@ -1224,9 +1224,7 @@ export default defineComponent({
1224
1224
  }))
1225
1225
  )
1226
1226
 
1227
- const visibleColumnsState = ref(
1228
- (visibleColumns.value as DlTableColumn[])?.map((col) => col.name)
1229
- )
1227
+ const visibleColumnsState = ref(visibleColumns.value)
1230
1228
 
1231
1229
  const computedVisibleCols = computed(() =>
1232
1230
  computedCols.value.map((col) => col.name)
package/src/components/compound/DlTable/hooks/tableColumnSelection.ts CHANGED
@@ -1,11 +1,15 @@
1
- import { computed, ComputedRef, Ref } from 'vue-demi'
1
+ import { computed, ComputedRef, PropType, Ref } from 'vue-demi'
2
2
 
3
3
  import { isNumber } from '../../../../utils/is'
4
4
  import { DlTableProps, DlTableColumn, DlTableRow } from '../types'
5
5
  import { TablePagination } from './tablePagination'
6
6
 
7
7
  export const useTableColumnSelectionProps = {
8
- visibleColumns: { type: Array, required: false, default: null as any }
8
+ visibleColumns: {
9
+ type: Array as PropType<string[]>,
10
+ required: false,
11
+ default: null as any
12
+ }
9
13
  }
10
14
 
11
15
  export function useTableColumnSelection(