@dataloop-ai/components 0.18.107 → 0.18.109

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/DlTable/DlTable.vue +4 -4
  3. package/src/components/compound/DlTreeTable/DlTreeTable.vue +114 -103
  4. package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue +2 -2
  5. package/src/demos/DlTableDemo.vue +9 -0
  6. package/src/demos/DlTreeTableDemo.vue +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.18.107",
3
+ "version": "0.18.109",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/compound/DlTable/DlTable.vue CHANGED
@@ -516,15 +516,15 @@
516
516
 
517
517
  <DlTr v-if="isEmpty && hasEmptyStateProps">
518
518
  <DlTd colspan="100%">
519
- <div class="flex justify-center">
519
+ <div class="flex justify-center full-width">
520
520
  <dl-empty-state v-bind="emptyStateProps">
521
521
  <template
522
522
  v-for="(_, slot) in $slots"
523
- #[slot]="props"
523
+ #[slot]="emptyStateProps"
524
524
  >
525
525
  <slot
526
526
  :name="slot"
527
- v-bind="props"
527
+ v-bind="emptyStateProps"
528
528
  />
529
529
  </template>
530
530
  </dl-empty-state>
@@ -640,7 +640,7 @@ import {
640
640
  } from '../../essential'
641
641
  import { ResizableManager } from './utils'
642
642
  import { DlButton } from '../../basic'
643
- import { DlOptionGroup } from '../../compound'
643
+ import DlOptionGroup from '../DlOptionGroup/DlOptionGroup.vue'
644
644
  import DlEmptyState from '../../basic/DlEmptyState/DlEmptyState.vue'
645
645
  import { v4 } from 'uuid'
646
646
  import { flatTreeData } from '../DlTreeTable/utils/flatTreeData'
package/src/components/compound/DlTreeTable/DlTreeTable.vue CHANGED
@@ -43,14 +43,13 @@
43
43
  <template v-if="virtualScroll && !isEmpty">
44
44
  <slot
45
45
  v-for="(row, rowIndex) in dlTableRef.computedCols"
46
- :key="rowIndex"
47
46
  name="row-body"
48
47
  v-bind="
49
48
  dlTableRef.getBodyScope({
50
49
  key: getRowKey(row),
51
50
  row,
52
- pageIndex,
53
- trClass: isRowSelected(getRowKey(row))
51
+ pageIndex: rowKey,
52
+ trClass: isRowSelected(rowKey, getRowKey(row))
54
53
  ? 'selected'
55
54
  : ''
56
55
  })
@@ -58,6 +57,7 @@
58
57
  >
59
58
  <DlTrTreeView
60
59
  :row="tableBodyProps.item"
60
+ :row-index="rowIndex"
61
61
  :is-row-selected="
62
62
  isRowSelected(
63
63
  rowKey,
@@ -154,113 +154,123 @@
154
154
  </template>
155
155
  <template v-else>
156
156
  <template v-if="dlTableRef && !isEmpty">
157
- <slot
158
- v-for="(row, rowIndex) in dlTableRef.computedCols"
159
- :key="rowIndex"
160
- name="row-body"
161
- v-bind="
162
- dlTableRef.getBodyScope({
163
- key: getRowKey(row),
164
- row,
165
- pageIndex,
166
- trClass: isRowSelected(getRowKey(row))
167
- ? 'selected'
168
- : ''
169
- })
170
- "
171
- >
172
- <DlTrTreeView
173
- v-for="(row, rowIndex) in computedRows"
174
- :key="rowIndex"
175
- :row="row"
176
- :row-index="rowIndex"
177
- :row-key="rowKey"
178
- :is-row-selected="
179
- isRowSelected(rowKey, getRowKey(row))
180
- ? 'selected'
181
- : ''
182
- "
183
- :has-any-action="dlTableRef.hasAnyAction"
184
- :no-hover="dlTableRef.noHover"
185
- :has-draggable-rows="
186
- dlTableRef.hasDraggableRows
187
- "
188
- :has-selection-mode="
189
- dlTableRef.hasSelectionMode
190
- "
191
- :bind-body-selection="
192
- dlTableRef.getBodySelectionScope({
157
+ <template v-for="(row, rowIndex) in computedRows">
158
+ <slot
159
+ name="row-body"
160
+ v-bind="
161
+ dlTableRef.getBodyScope({
193
162
  key: getRowKey(row),
194
163
  row,
195
- pageIndex: rowIndex
164
+ pageIndex: rowKey,
165
+ trClass: isRowSelected(
166
+ rowKey,
167
+ getRowKey(row)
168
+ )
169
+ ? 'selected'
170
+ : ''
196
171
  })
197
172
  "
198
- :bind-body-cell-scope="
199
- (col) =>
200
- dlTableRef.getBodyCellScope({
173
+ >
174
+ <DlTrTreeView
175
+ :key="rowIndex"
176
+ :row="row"
177
+ :row-index="rowIndex"
178
+ :row-key="rowKey"
179
+ :is-row-selected="
180
+ isRowSelected(rowKey, getRowKey(row))
181
+ ? 'selected'
182
+ : ''
183
+ "
184
+ :has-any-action="dlTableRef.hasAnyAction"
185
+ :no-hover="dlTableRef.noHover"
186
+ :has-draggable-rows="
187
+ dlTableRef.hasDraggableRows
188
+ "
189
+ :has-selection-mode="
190
+ dlTableRef.hasSelectionMode
191
+ "
192
+ :bind-body-selection="
193
+ dlTableRef.getBodySelectionScope({
201
194
  key: getRowKey(row),
202
195
  row,
203
- pageIndex: rowIndex,
204
- col
196
+ pageIndex: rowIndex
205
197
  })
206
- "
207
- :color="color"
208
- :computed-cols="dlTableRef.computedCols"
209
- :slot-name="dlTableRef.slotNames"
210
- :computed-rows="computedRows"
211
- :model-value="
212
- isRowSelected(rowKey, getRowKey(row))
213
- "
214
- @update:model-value="
215
- (adding, evt) =>
216
- updateSelectionHierarchy(
217
- adding,
218
- evt,
219
- row
220
- )
221
- "
222
- @rowClick="
223
- dlTableRef.onTrClick($event, row, rowIndex)
224
- "
225
- @rowDoubleClick="
226
- dlTableRef.onTrDblClick(
227
- $event,
228
- row,
229
- rowIndex
230
- )
231
- "
232
- @rowContextMenu="
233
- dlTableRef.onTrContextMenu(
234
- $event,
235
- row,
236
- rowIndex
237
- )
238
- "
239
- @updateExpandedRow="
240
- updateExpandedRow(
241
- !row.expanded,
242
- getRowKey(row)
243
- )
244
- "
245
- >
246
- <template
247
- v-for="templateCol in dlTableRef.computedCols"
248
- #[getSlotByName(templateCol.name)]
249
- >
250
- <slot
251
- :name="getSlotByName(templateCol.name)"
252
- v-bind="
253
- dlTableRef.getBodySelectionScope({
198
+ "
199
+ :bind-body-cell-scope="
200
+ (col) =>
201
+ dlTableRef.getBodyCellScope({
254
202
  key: getRowKey(row),
255
203
  row,
256
- col: templateCol,
257
- pageIndex: rowIndex
204
+ pageIndex: rowIndex,
205
+ col
258
206
  })
259
- "
260
- />
261
- </template>
262
- </DlTrTreeView>
263
- </slot>
207
+ "
208
+ :color="color"
209
+ :computed-cols="dlTableRef.computedCols"
210
+ :slot-name="dlTableRef.slotNames"
211
+ :computed-rows="computedRows"
212
+ :model-value="
213
+ isRowSelected(rowKey, getRowKey(row))
214
+ "
215
+ @update:model-value="
216
+ (adding, evt) =>
217
+ updateSelectionHierarchy(
218
+ adding,
219
+ evt,
220
+ row
221
+ )
222
+ "
223
+ @rowClick="
224
+ dlTableRef.onTrClick(
225
+ $event,
226
+ row,
227
+ rowIndex
228
+ )
229
+ "
230
+ @rowDoubleClick="
231
+ dlTableRef.onTrDblClick(
232
+ $event,
233
+ row,
234
+ rowIndex
235
+ )
236
+ "
237
+ @rowContextMenu="
238
+ dlTableRef.onTrContextMenu(
239
+ $event,
240
+ row,
241
+ rowIndex
242
+ )
243
+ "
244
+ @updateExpandedRow="
245
+ updateExpandedRow(
246
+ !row.expanded,
247
+ getRowKey(row)
248
+ )
249
+ "
250
+ >
251
+ <template
252
+ v-for="templateCol in dlTableRef.computedCols"
253
+ #[getSlotByName(templateCol.name)]
254
+ >
255
+ <slot
256
+ :name="
257
+ getSlotByName(templateCol.name)
258
+ "
259
+ v-bind="
260
+ dlTableRef.getBodySelectionScope(
261
+ {
262
+ key: getRowKey(row),
263
+ row,
264
+ col: templateCol,
265
+ pageIndex: rowIndex
266
+ }
267
+ )
268
+ "
269
+ />
270
+ </template>
271
+ </DlTrTreeView>
272
+ </slot>
273
+ </template>
264
274
  </template>
265
275
  </template>
266
276
  </slot>
@@ -278,15 +288,16 @@ import {
278
288
  defineComponent,
279
289
  isVue2,
280
290
  set,
281
- ref
291
+ ref,
292
+ h
282
293
  } from 'vue-demi'
283
- import { DlTable } from '../../../components'
294
+ import { DlCheckbox } from '../../essential'
295
+ import DlTable from '../DlTable/DlTable.vue'
284
296
  import DlTrTreeView from './views/DlTrTreeView.vue'
285
297
  import { cloneDeep } from 'lodash'
286
298
  import { DlTableProps, DlTableRow } from '../DlTable/types'
287
299
  import { useTreeTableRowSelection } from './utils/treeTableRowSelection'
288
300
  import { getFromChildren } from './utils/getFromChildren'
289
- import DlCheckbox from '../../essential/DlCheckbox/DlCheckbox.vue'
290
301
  import { props } from './props'
291
302
  import { emits } from './emits'
292
303
 
package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue CHANGED
@@ -125,8 +125,8 @@ export default defineComponent({
125
125
  default: () => ({})
126
126
  },
127
127
  bindBodyCellScope: {
128
- type: Object as PropType<Record<string, any>>,
129
- default: () => ({})
128
+ type: Function,
129
+ default: () => {}
130
130
  },
131
131
  color: {
132
132
  type: String,
package/src/demos/DlTableDemo.vue CHANGED
@@ -418,6 +418,15 @@
418
418
  />
419
419
  </div>
420
420
  </div>
421
+ <div>
422
+ <p>With empty data</p>
423
+ <DlTable
424
+ :rows="[]"
425
+ :columns="tableColumns"
426
+ title="empty data"
427
+ no-data-label="NOoooooOOOOOoooooo"
428
+ />
429
+ </div>
421
430
  </div>
422
431
  </template>
423
432
 
package/src/demos/DlTreeTableDemo.vue CHANGED
@@ -190,6 +190,7 @@
190
190
  class="sticky-header"
191
191
  :separator="separator"
192
192
  :columns="tableColumns"
193
+ :rows="tableRows"
193
194
  color="dl-color-secondary"
194
195
  style="height: 500px"
195
196
  >
@@ -741,7 +742,6 @@ export default defineComponent({
741
742
  const onRowClick = (item: any) => {
742
743
  // console.log('onRowClick TreeTableDemo: ', item)
743
744
  }
744
-
745
745
  return {
746
746
  filter,
747
747
  selectedData,