@dataloop-ai/components 0.19.1 → 0.19.3

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/compound/DlTable/DlTable.vue +195 -101
  3. package/src/components/compound/DlTable/components/DlTd.vue +6 -5
  4. package/src/components/compound/DlTable/components/DlTh.vue +12 -2
  5. package/src/components/compound/DlTable/types.ts +1 -1
  6. package/src/components/compound/DlTable/utils/getCellValue.ts +5 -0
  7. package/src/demos/DlTableDemo.vue +5 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.19.1",
3
+ "version": "0.19.3",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/compound/DlTable/DlTable.vue CHANGED
@@ -133,17 +133,36 @@
133
133
  :props="getHeaderScope({ col })"
134
134
  :col-index="colIndex"
135
135
  >
136
- {{ col.label }}
136
+ <div
137
+ style="
138
+ width: 100%;
139
+ display: flex;
140
+ align-items: center;
141
+ gap: 2px;
142
+ "
143
+ >
144
+ {{ col.label }}
145
+ <dl-icon
146
+ v-if="col.hint"
147
+ icon="icon-dl-info"
148
+ size="10px"
149
+ >
150
+ <dl-tooltip>
151
+ {{ col.hint }}
152
+ </dl-tooltip>
153
+ </dl-icon>
154
+ </div>
137
155
  </DlTh>
138
156
  </slot>
139
157
 
140
158
  <DlTh
141
159
  v-if="visibleColumns && visibleColumns.length"
142
- key="visibleColsBtn"
160
+ key="visibleColumnsSlot"
161
+ :col-index="-1"
143
162
  >
144
163
  <slot
145
164
  name="header-cell-visible-columns-button"
146
- :computed-visible-cols="computedVisibleCols"
165
+ :visible-columns-state="visibleColumnsState"
147
166
  :group-options="groupOptions"
148
167
  :handle-visible-columns-update="
149
168
  handleVisibleColumnsUpdate
@@ -157,8 +176,8 @@
157
176
  >
158
177
  <slot
159
178
  name="header-cell-visible-columns-menu"
160
- :computed-visible-cols="
161
- computedVisibleCols
179
+ :visible-columns-state="
180
+ visibleColumnsState
162
181
  "
163
182
  :group-options="groupOptions"
164
183
  :handle-visible-columns-update="
@@ -168,8 +187,8 @@
168
187
  <dl-menu>
169
188
  <slot
170
189
  name="header-cell-visible-columns-menu-content"
171
- :computed-visible-cols="
172
- computedVisibleCols
190
+ :visible-columns-state="
191
+ visibleColumnsState
173
192
  "
174
193
  :group-options="
175
194
  groupOptions
@@ -317,35 +336,39 @@
317
336
  />
318
337
  </slot>
319
338
  </td>
320
- <slot
339
+ <DlTd
321
340
  v-for="(col, colIndex) in computedCols"
322
- v-bind="
323
- getBodyCellScope({
324
- key: getRowKey(props.item),
325
- row: props.item,
326
- pageIndex: props.pageIndex,
327
- col
328
- })
329
- "
330
- :name="
331
- hasSlotByName(`body-cell-${col.name}`)
332
- ? `body-cell-${col.name}`
333
- : 'body-cell'
334
- "
341
+ :key="col.name"
342
+ :class="col.tdClass(props.item)"
343
+ :style="col.tdStyle(props.item)"
344
+ :no-hover="noHover"
345
+ :col-index="colIndex"
335
346
  >
336
- <DlTd
337
- :class="col.tdClass(props.item)"
338
- :style="col.tdStyle(props.item)"
339
- :no-hover="noHover"
340
- :col-index="colIndex"
347
+ <slot
348
+ v-bind="
349
+ getBodyCellScope({
350
+ key: getRowKey(props.item),
351
+ row: props.item,
352
+ pageIndex: props.pageIndex,
353
+ col
354
+ })
355
+ "
356
+ :name="
357
+ hasSlotByName(
358
+ `body-cell-${col.name}`
359
+ )
360
+ ? `body-cell-${col.name}`
361
+ : 'body-cell'
362
+ "
341
363
  >
342
364
  {{ getCellValue(col, props.item) }}
343
- </DlTd>
344
- </slot>
365
+ </slot>
366
+ </DlTd>
345
367
  <DlTd
346
368
  v-if="showRowActions"
347
- key="body-cell-row-actions"
369
+ key="visibleColumnsSlot"
348
370
  class="visible-columns-justify-end"
371
+ :col-index="-1"
349
372
  no-tooltip
350
373
  >
351
374
  <slot
@@ -464,39 +487,93 @@
464
487
  :col-index="colIndex"
465
488
  @click="onThClick($event, col.name)"
466
489
  >
467
- {{ col.label }}
490
+ <div
491
+ style="
492
+ width: 100%;
493
+ display: flex;
494
+ align-items: center;
495
+ gap: 2px;
496
+ "
497
+ >
498
+ {{ col.label }}
499
+ <dl-icon
500
+ v-if="col.hint"
501
+ icon="icon-dl-info"
502
+ size="10px"
503
+ >
504
+ <dl-tooltip>
505
+ {{ col.hint }}
506
+ </dl-tooltip>
507
+ </dl-icon>
508
+ </div>
468
509
  </DlTh>
469
510
  </slot>
470
511
  <DlTh
471
512
  v-if="showRowActions"
472
- key="visibleColsBtn"
513
+ key="visibleColumnsSlot"
473
514
  >
474
- <dl-button
475
- v-if="
476
- visibleColumns && visibleColumns.length
515
+ <slot
516
+ name="header-cell-visible-columns-button"
517
+ :computed-visible-cols="computedVisibleCols"
518
+ :group-options="groupOptions"
519
+ :handle-visible-columns-update="
520
+ handleVisibleColumnsUpdate
477
521
  "
478
- text-color="dl-color-medium"
479
- flat
480
- icon="icon-dl-column"
481
522
  >
482
- <dl-menu>
483
- <dl-list separator>
484
- <dl-option-group
485
- :model-value="
486
- computedVisibleCols
487
- "
488
- :options="groupOptions"
489
- :left-label="true"
490
- max-width="250px"
491
- type="switch"
492
- class="table-options"
493
- @update:model-value="
494
- handleVisibleColumnsUpdate
495
- "
496
- />
497
- </dl-list>
498
- </dl-menu>
499
- </dl-button>
523
+ <dl-button
524
+ v-if="
525
+ visibleColumns &&
526
+ visibleColumns.length
527
+ "
528
+ text-color="dl-color-medium"
529
+ flat
530
+ icon="icon-dl-column"
531
+ >
532
+ <slot
533
+ name="header-cell-visible-columns-menu"
534
+ :computed-visible-cols="
535
+ computedVisibleCols
536
+ "
537
+ :group-options="groupOptions"
538
+ :handle-visible-columns-update="
539
+ handleVisibleColumnsUpdate
540
+ "
541
+ >
542
+ <dl-menu>
543
+ <slot
544
+ name="header-cell-visible-columns-menu-content"
545
+ :computed-visible-cols="
546
+ computedVisibleCols
547
+ "
548
+ :group-options="
549
+ groupOptions
550
+ "
551
+ :handle-visible-columns-update="
552
+ handleVisibleColumnsUpdate
553
+ "
554
+ >
555
+ <dl-list separator>
556
+ <dl-option-group
557
+ :model-value="
558
+ computedVisibleCols
559
+ "
560
+ :options="
561
+ groupOptions
562
+ "
563
+ :left-label="true"
564
+ max-width="250px"
565
+ type="switch"
566
+ class="table-options"
567
+ @update:model-value="
568
+ handleVisibleColumnsUpdate
569
+ "
570
+ />
571
+ </dl-list>
572
+ </slot>
573
+ </dl-menu>
574
+ </slot>
575
+ </dl-button>
576
+ </slot>
500
577
  </DlTh>
501
578
  </DlTr>
502
579
 
@@ -656,8 +733,9 @@
656
733
  </DlTd>
657
734
  <DlTd
658
735
  v-if="showRowActions"
659
- key="body-cell-row-actions"
736
+ key="visibleColumnsSlot"
660
737
  class="visible-columns-justify-end"
738
+ :col-index="-1"
661
739
  no-tooltip
662
740
  >
663
741
  <slot
@@ -772,7 +850,6 @@ import {
772
850
  getCurrentInstance,
773
851
  ComputedRef,
774
852
  onMounted,
775
- toRef,
776
853
  toRefs,
777
854
  nextTick,
778
855
  PropType
@@ -1097,7 +1174,25 @@ export default defineComponent({
1097
1174
  dense,
1098
1175
  draggable,
1099
1176
  virtualScroll,
1100
- rows
1177
+ rows,
1178
+ visibleColumns,
1179
+ rowKey,
1180
+ titleClass,
1181
+ emptyStateProps,
1182
+ hideNoData,
1183
+ loading,
1184
+ loadingLabel,
1185
+ filter,
1186
+ noResultsLabel,
1187
+ noDataLabel,
1188
+ columns,
1189
+ fitAllColumns,
1190
+ resizable,
1191
+ hidePagination,
1192
+ hideSelectedBanner,
1193
+ color,
1194
+ virtualScrollStickySizeStart,
1195
+ noHover
1101
1196
  } = toRefs(props)
1102
1197
 
1103
1198
  const tbodyKey = ref()
@@ -1111,12 +1206,12 @@ export default defineComponent({
1111
1206
  )
1112
1207
 
1113
1208
  const hasEmptyStateProps = computed(() =>
1114
- props.emptyStateProps
1209
+ emptyStateProps.value
1115
1210
  ? Object.keys(props.emptyStateProps).length > 0
1116
1211
  : false
1117
1212
  )
1118
1213
 
1119
- const isDataEmpty = computed(() => !props.rows.length)
1214
+ const isDataEmpty = computed(() => !rows.value.length)
1120
1215
 
1121
1216
  const groupOptions = computed(() =>
1122
1217
  (
@@ -1130,7 +1225,7 @@ export default defineComponent({
1130
1225
  )
1131
1226
 
1132
1227
  const visibleColumnsState = ref(
1133
- (props.visibleColumns as DlTableColumn[])?.map((col) => col.name)
1228
+ (visibleColumns.value as DlTableColumn[])?.map((col) => col.name)
1134
1229
  )
1135
1230
 
1136
1231
  const computedVisibleCols = computed(() =>
@@ -1140,9 +1235,9 @@ export default defineComponent({
1140
1235
  const { hasAnyAction } = useTableActions(props) // todo: does not work
1141
1236
 
1142
1237
  const getRowKey = computed(() =>
1143
- typeof props.rowKey === 'function'
1144
- ? props.rowKey
1145
- : (row: Record<string, any>) => row[props.rowKey as string]
1238
+ typeof rowKey.value === 'function'
1239
+ ? rowKey.value
1240
+ : (row: Record<string, any>) => row[rowKey.value as string]
1146
1241
  )
1147
1242
 
1148
1243
  const isResizing = ref(false)
@@ -1176,7 +1271,7 @@ export default defineComponent({
1176
1271
  })
1177
1272
 
1178
1273
  const containerStyle = computed(() => {
1179
- if (props.virtualScroll) {
1274
+ if (virtualScroll.value) {
1180
1275
  return {
1181
1276
  height: 'var(--dl-table-height, 500px)'
1182
1277
  }
@@ -1186,13 +1281,13 @@ export default defineComponent({
1186
1281
  const nothingToDisplay = computed(() => computedRows.value.length === 0)
1187
1282
 
1188
1283
  const titleClasses = computed(
1189
- () => 'dl-table__title ' + (props.titleClass || '')
1284
+ () => 'dl-table__title ' + (titleClass.value || '')
1190
1285
  )
1191
1286
 
1192
1287
  const bottomClasses = computed(() => {
1193
1288
  let classNames = 'dl-table__bottom row items-center'
1194
1289
 
1195
- if (nothingToDisplay.value && !props.hideNoData) {
1290
+ if (nothingToDisplay.value && !hideNoData.value) {
1196
1291
  // TODO add styles for this class
1197
1292
  classNames = classNames + ' dl-table__bottom--nodata'
1198
1293
  }
@@ -1202,15 +1297,15 @@ export default defineComponent({
1202
1297
  //
1203
1298
 
1204
1299
  const noDataMessage = computed(() => {
1205
- if (props.loading) {
1206
- return props.loadingLabel
1300
+ if (loading.value) {
1301
+ return loadingLabel.value
1207
1302
  }
1208
1303
 
1209
- if (props.filter) {
1210
- return props.noResultsLabel
1304
+ if (filter.value) {
1305
+ return noResultsLabel.value
1211
1306
  }
1212
1307
 
1213
- return props.noDataLabel
1308
+ return noDataLabel.value
1214
1309
  })
1215
1310
 
1216
1311
  const hasDraggableRows = computed(() =>
@@ -1236,11 +1331,11 @@ export default defineComponent({
1236
1331
  nextTick(() => {
1237
1332
  setAllColumnWidths(
1238
1333
  tableEl,
1239
- props.columns as DlTableColumn[],
1240
- props.fitAllColumns
1334
+ columns.value as DlTableColumn[],
1335
+ fitAllColumns.value
1241
1336
  )
1242
1337
  })
1243
- if (props.resizable === true) {
1338
+ if (resizable.value === true) {
1244
1339
  applyResizableColumns(tableEl, vm)
1245
1340
  }
1246
1341
  if (hasDraggableColumns.value === true) {
@@ -1259,7 +1354,7 @@ export default defineComponent({
1259
1354
  'table.dl-table'
1260
1355
  ) as HTMLTableElement
1261
1356
 
1262
- if (props.resizable) {
1357
+ if (resizable.value) {
1263
1358
  applyResizableColumns(tableEl, vm)
1264
1359
  }
1265
1360
 
@@ -1276,15 +1371,12 @@ export default defineComponent({
1276
1371
  }
1277
1372
  )
1278
1373
 
1279
- watch(
1280
- () => props.resizable,
1281
- () => {
1282
- applyResizableColumns(tableEl, vm)
1283
- }
1284
- )
1374
+ watch(resizable, () => {
1375
+ applyResizableColumns(tableEl, vm)
1376
+ })
1285
1377
 
1286
1378
  watch(
1287
- () => props.columns,
1379
+ columns,
1288
1380
  (newColumns) => {
1289
1381
  setAllColumnWidths(
1290
1382
  rootRef.value,
@@ -1298,14 +1390,15 @@ export default defineComponent({
1298
1390
  )
1299
1391
 
1300
1392
  watch(
1301
- () => (props as any).visibleColummns,
1302
- (value) => {
1393
+ visibleColumns,
1394
+ (value: string[]) => {
1303
1395
  visibleColumnsState.value = value
1304
- }
1396
+ },
1397
+ { immediate: true, deep: true }
1305
1398
  )
1306
1399
 
1307
1400
  watch(
1308
- () => props.draggable,
1401
+ draggable,
1309
1402
  () => {
1310
1403
  if (tableEl) {
1311
1404
  if (hasDraggableColumns.value === true) {
@@ -1367,10 +1460,10 @@ export default defineComponent({
1367
1460
 
1368
1461
  const { sortBy, descending } = computedPagination.value
1369
1462
 
1370
- if (props.filter) {
1463
+ if (filter.value) {
1371
1464
  filtered = computedFilterMethod.value(
1372
1465
  rows.value,
1373
- props.filter,
1466
+ filter.value,
1374
1467
  computedCols.value,
1375
1468
  getCellValue
1376
1469
  )
@@ -1431,7 +1524,7 @@ export default defineComponent({
1431
1524
  })
1432
1525
 
1433
1526
  const displayPagination = computed(
1434
- () => !(props.hidePagination || nothingToDisplay.value)
1527
+ () => !(hidePagination.value || nothingToDisplay.value)
1435
1528
  )
1436
1529
 
1437
1530
  const {
@@ -1499,7 +1592,7 @@ export default defineComponent({
1499
1592
 
1500
1593
  const hasBotomSelectionBanner = computed(() => {
1501
1594
  return (
1502
- props.hideSelectedBanner !== true &&
1595
+ hideSelectedBanner.value !== true &&
1503
1596
  hasSelectionMode.value === true &&
1504
1597
  rowsSelectedNumber.value > 0
1505
1598
  )
@@ -1528,8 +1621,8 @@ export default defineComponent({
1528
1621
  cols: computedCols.value,
1529
1622
  sort,
1530
1623
  colsMap: computedColsMap.value,
1531
- color: props.color,
1532
- dense: props.dense
1624
+ color: color.value,
1625
+ dense: dense.value
1533
1626
  })
1534
1627
 
1535
1628
  if (multipleSelection.value === true) {
@@ -1590,7 +1683,7 @@ export default defineComponent({
1590
1683
  )
1591
1684
  const offsetTop =
1592
1685
  rowEl.offsetTop -
1593
- (props.virtualScrollStickySizeStart as number)
1686
+ (virtualScrollStickySizeStart.value as number)
1594
1687
  const direction =
1595
1688
  offsetTop < scrollTarget.scrollTop ? 'decrease' : 'increase'
1596
1689
 
@@ -1642,12 +1735,13 @@ export default defineComponent({
1642
1735
  function injectBodyCommonScope(data: Record<string, any>) {
1643
1736
  Object.assign(data, {
1644
1737
  cols: computedCols.value,
1738
+ visibleColumnsState: visibleColumnsState.value,
1645
1739
  colsMap: computedColsMap.value,
1646
1740
  sort,
1647
1741
  rowIndex: firstRowIndex.value + data.pageIndex,
1648
- color: props.color,
1649
- dense: props.dense,
1650
- noHover: props.noHover
1742
+ color: color.value,
1743
+ dense: dense.value,
1744
+ noHover: noHover.value
1651
1745
  })
1652
1746
 
1653
1747
  if (hasSelectionMode.value === true) {
@@ -1716,18 +1810,18 @@ export default defineComponent({
1716
1810
 
1717
1811
  const handleSortableEvent = (event: SortableEvent) => {
1718
1812
  const { oldIndex, newIndex } = event
1719
- const newRows = insertAtIndex(props.rows, oldIndex, newIndex)
1813
+ const newRows = insertAtIndex(rows.value, oldIndex, newIndex)
1720
1814
  tbodyKey.value = v4()
1721
1815
  emit('row-reorder', newRows)
1722
1816
  }
1723
1817
 
1724
1818
  const reorderColumns = (sourceIndex: number, targetIndex: number) => {
1725
1819
  const newColumns = insertAtIndex(
1726
- props.columns,
1820
+ columns.value,
1727
1821
  sourceIndex,
1728
1822
  targetIndex
1729
1823
  )
1730
- if (isEqual(newColumns, props.columns)) return
1824
+ if (isEqual(newColumns, columns.value)) return
1731
1825
  tableKey.value = v4()
1732
1826
  emit('col-update', newColumns)
1733
1827
  }
@@ -1771,7 +1865,7 @@ export default defineComponent({
1771
1865
 
1772
1866
  const showRowActions = computed<boolean>(
1773
1867
  () =>
1774
- !!(props.visibleColumns && props.visibleColumns.length) ||
1868
+ !!(visibleColumns.value && visibleColumns.value.length) ||
1775
1869
  !!hasSlotByName(`body-cell-row-actions`)
1776
1870
  )
1777
1871
 
package/src/components/compound/DlTable/components/DlTd.vue CHANGED
@@ -83,7 +83,12 @@ export default defineComponent({
83
83
  return colmap ?? props.props?.col
84
84
  })
85
85
 
86
- if (!hasOptionalProps.value) {
86
+ const colIndex = computed(() => {
87
+ return props.props?.colIndex ?? props.colIndex
88
+ })
89
+
90
+ if (!hasOptionalProps.value || !column.value || colIndex.value === -1) {
91
+ // return empty if !column if you dont want line.
87
92
  return {
88
93
  classes: tdClasses,
89
94
  styles: tdStyles,
@@ -92,10 +97,6 @@ export default defineComponent({
92
97
  }
93
98
  }
94
99
 
95
- if (!column.value) {
96
- return
97
- }
98
-
99
100
  const { row } = props.props
100
101
 
101
102
  return {
package/src/components/compound/DlTable/components/DlTh.vue CHANGED
@@ -25,7 +25,13 @@
25
25
 
26
26
  <script lang="ts">
27
27
  import { isString } from 'lodash'
28
- import { defineComponent, getCurrentInstance, computed, ref } from 'vue-demi'
28
+ import {
29
+ defineComponent,
30
+ getCurrentInstance,
31
+ computed,
32
+ ref,
33
+ toRefs
34
+ } from 'vue-demi'
29
35
  import { useSizeObserver } from '../../../../hooks/use-size-observer'
30
36
  import { stringStyleToRecord } from '../../../../utils'
31
37
  import { DlIcon } from '../../../essential'
@@ -73,7 +79,11 @@ export default defineComponent({
73
79
  return col
74
80
  })
75
81
 
76
- if (!column.value) {
82
+ const colIndex = computed(() => {
83
+ return props.props?.colIndex ?? props.colIndex
84
+ })
85
+
86
+ if (!column.value || colIndex.value === -1) {
77
87
  return {
78
88
  headerStyle: '',
79
89
  thClasses: '',
package/src/components/compound/DlTable/types.ts CHANGED
@@ -27,7 +27,7 @@ export type DlTableFilter = string | Record<string, any>
27
27
  export type DlTableColumn = {
28
28
  name: string
29
29
  label: string
30
- field: string | ((row: DlTableRow) => string)
30
+ field?: string | ((row: DlTableRow) => string)
31
31
  required?: boolean
32
32
  align?: 'right' | 'left' | 'center'
33
33
  sortable?: boolean
package/src/components/compound/DlTable/utils/getCellValue.ts CHANGED
@@ -14,8 +14,13 @@ export function getCellValue(
14
14
  }
15
15
 
16
16
  function getNestedProperty(obj: Record<string, any>, propertyPath: string) {
17
+ if (!propertyPath) {
18
+ return obj
19
+ }
20
+
17
21
  const pathArray = propertyPath.split('.')
18
22
  let value = obj
23
+
19
24
  for (const prop of pathArray) {
20
25
  if (value && value.hasOwnProperty(prop)) {
21
26
  value = value[prop]
package/src/demos/DlTableDemo.vue CHANGED
@@ -380,7 +380,11 @@
380
380
  :columns="tableColumns"
381
381
  title="Editable Columns"
382
382
  :visible-columns="tableColumns.slice(0, -1)"
383
- />
383
+ >
384
+ <template #body-cell-row-actions>
385
+ <dl-button label="ActionButton" />
386
+ </template>
387
+ </DlTable>
384
388
  </div>
385
389
  <div>
386
390
  <p>Virtual With editable columns</p>