@dataloop-ai/components 0.18.50 → 0.18.51
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.
package/package.json
CHANGED
|
@@ -248,14 +248,14 @@
|
|
|
248
248
|
<DlTr v-if="isEmpty">
|
|
249
249
|
<DlTd colspan="100%">
|
|
250
250
|
<div class="flex justify-center">
|
|
251
|
-
<dl-empty-state v-bind="
|
|
251
|
+
<dl-empty-state v-bind="emptyStateProps">
|
|
252
252
|
<template
|
|
253
253
|
v-for="(_, slot) in $slots"
|
|
254
|
-
#[slot]="
|
|
254
|
+
#[slot]="emptyStateSlotProps"
|
|
255
255
|
>
|
|
256
256
|
<slot
|
|
257
257
|
:name="slot"
|
|
258
|
-
v-bind="
|
|
258
|
+
v-bind="emptyStateSlotProps"
|
|
259
259
|
/>
|
|
260
260
|
</template>
|
|
261
261
|
</dl-empty-state>
|
|
@@ -460,17 +460,17 @@
|
|
|
460
460
|
</slot>
|
|
461
461
|
</slot>
|
|
462
462
|
|
|
463
|
-
<DlTr v-if="isEmpty">
|
|
463
|
+
<DlTr v-if="isEmpty && hasEmptyStateProps">
|
|
464
464
|
<DlTd colspan="100%">
|
|
465
465
|
<div class="flex justify-center">
|
|
466
|
-
<dl-empty-state v-bind="
|
|
466
|
+
<dl-empty-state v-bind="emptyStateProps">
|
|
467
467
|
<template
|
|
468
468
|
v-for="(_, slot) in $slots"
|
|
469
|
-
#[slot]="
|
|
469
|
+
#[slot]="props"
|
|
470
470
|
>
|
|
471
471
|
<slot
|
|
472
472
|
:name="slot"
|
|
473
|
-
v-bind="
|
|
473
|
+
v-bind="props"
|
|
474
474
|
/>
|
|
475
475
|
</template>
|
|
476
476
|
</dl-empty-state>
|
|
@@ -1229,6 +1229,9 @@ export default defineComponent({
|
|
|
1229
1229
|
const updatePagination = (value: any, key: string) => {
|
|
1230
1230
|
return setPagination({ [`${key}`]: value })
|
|
1231
1231
|
}
|
|
1232
|
+
const hasEmptyStateProps = computed(
|
|
1233
|
+
() => Object.keys(props.emptyStateProps).length > 0
|
|
1234
|
+
)
|
|
1232
1235
|
|
|
1233
1236
|
return {
|
|
1234
1237
|
uuid: `dl-table-${v4()}`,
|
|
@@ -1282,7 +1285,8 @@ export default defineComponent({
|
|
|
1282
1285
|
hasSlotBody,
|
|
1283
1286
|
hasSlotHeaderSelection,
|
|
1284
1287
|
stopAndPrevent,
|
|
1285
|
-
updatePagination
|
|
1288
|
+
updatePagination,
|
|
1289
|
+
hasEmptyStateProps
|
|
1286
1290
|
}
|
|
1287
1291
|
}
|
|
1288
1292
|
})
|
|
@@ -18,6 +18,10 @@
|
|
|
18
18
|
:title="title"
|
|
19
19
|
:virtual-scroll="virtualScroll"
|
|
20
20
|
:rows-per-page-options="rowsPerPageOptions"
|
|
21
|
+
:hide-pagination="hidePagination"
|
|
22
|
+
:is-empty="isEmpty"
|
|
23
|
+
:empty-state-props="emptyStateProps"
|
|
24
|
+
:no-data-label="noDataLabel"
|
|
21
25
|
@row-click="emitRowClick"
|
|
22
26
|
@th-click="emitThClick"
|
|
23
27
|
@update:selected="updateSelected"
|
|
@@ -32,7 +36,7 @@
|
|
|
32
36
|
/>
|
|
33
37
|
</template>
|
|
34
38
|
<template #table-body="props">
|
|
35
|
-
<template v-if="virtualScroll">
|
|
39
|
+
<template v-if="virtualScroll && !isEmpty">
|
|
36
40
|
<DlTrTreeView
|
|
37
41
|
:row="props.item"
|
|
38
42
|
:is-row-selected="
|
|
@@ -172,27 +176,11 @@
|
|
|
172
176
|
</template>
|
|
173
177
|
</DlTrTreeView>
|
|
174
178
|
</template>
|
|
175
|
-
<template v-else>
|
|
176
|
-
<DlTr>
|
|
177
|
-
<DlTd colspan="100%">
|
|
178
|
-
<div class="flex justify-center">
|
|
179
|
-
<dl-empty-state v-bind="props">
|
|
180
|
-
<template
|
|
181
|
-
v-for="(_, slot) in $slots"
|
|
182
|
-
#[slot]="emptyStateProps"
|
|
183
|
-
>
|
|
184
|
-
<slot
|
|
185
|
-
:name="slot"
|
|
186
|
-
v-bind="emptyStateProps"
|
|
187
|
-
/>
|
|
188
|
-
</template>
|
|
189
|
-
</dl-empty-state>
|
|
190
|
-
</div>
|
|
191
|
-
</DlTd>
|
|
192
|
-
</DlTr>
|
|
193
|
-
</template>
|
|
194
179
|
</template>
|
|
195
180
|
</template>
|
|
181
|
+
<template #no-data>
|
|
182
|
+
<slot name="no-data" />
|
|
183
|
+
</template>
|
|
196
184
|
</DlTable>
|
|
197
185
|
</template>
|
|
198
186
|
|
|
@@ -205,7 +193,7 @@ import {
|
|
|
205
193
|
set,
|
|
206
194
|
ref
|
|
207
195
|
} from 'vue-demi'
|
|
208
|
-
import { DlTable
|
|
196
|
+
import { DlTable } from '../../../components'
|
|
209
197
|
import DlTrTreeView from './views/DlTrTreeView.vue'
|
|
210
198
|
import { cloneDeep } from 'lodash'
|
|
211
199
|
import { DlTableProps, DlTableRow } from '../DlTable/types'
|
|
@@ -220,10 +208,7 @@ export default defineComponent({
|
|
|
220
208
|
components: {
|
|
221
209
|
DlTable,
|
|
222
210
|
DlTrTreeView,
|
|
223
|
-
DlCheckbox
|
|
224
|
-
DlEmptyState,
|
|
225
|
-
DlTr,
|
|
226
|
-
DlTd
|
|
211
|
+
DlCheckbox
|
|
227
212
|
},
|
|
228
213
|
props,
|
|
229
214
|
emits,
|
|
@@ -237,8 +222,13 @@ export default defineComponent({
|
|
|
237
222
|
const tableRows = ref(cloneDeep(props.rows))
|
|
238
223
|
const tableColumns = ref(props.columns)
|
|
239
224
|
const hasFlatTreeData = true
|
|
225
|
+
const hasEmptyStateProps = computed(
|
|
226
|
+
() => Object.keys(props.emptyStateProps).length > 0
|
|
227
|
+
)
|
|
240
228
|
|
|
241
|
-
const computedRows = computed(() =>
|
|
229
|
+
const computedRows = computed(() =>
|
|
230
|
+
dlTableRef.value?.computedRows ? dlTableRef.value?.computedRows : []
|
|
231
|
+
)
|
|
242
232
|
|
|
243
233
|
const getRowKey = computed(() =>
|
|
244
234
|
typeof props.rowKey === 'function'
|
|
@@ -380,6 +370,7 @@ export default defineComponent({
|
|
|
380
370
|
computedRows,
|
|
381
371
|
getRowKey,
|
|
382
372
|
updateSelection,
|
|
373
|
+
hasEmptyStateProps,
|
|
383
374
|
updateExpandedRow,
|
|
384
375
|
updateSelectionHierarchy,
|
|
385
376
|
onMultipleSelectionSet,
|
|
@@ -168,6 +168,75 @@
|
|
|
168
168
|
style="height: 500px"
|
|
169
169
|
/>
|
|
170
170
|
</div>
|
|
171
|
+
<div style="margin-top: 100px">
|
|
172
|
+
<p>Empty State</p>
|
|
173
|
+
<DlTreeTable
|
|
174
|
+
:separator="separator"
|
|
175
|
+
:columns="tableColumns"
|
|
176
|
+
:bordered="bordered"
|
|
177
|
+
:draggable="draggable"
|
|
178
|
+
:dense="dense"
|
|
179
|
+
class="sticky-header"
|
|
180
|
+
:filter="filter"
|
|
181
|
+
:selection="selection"
|
|
182
|
+
:loading="loading"
|
|
183
|
+
:rows="[]"
|
|
184
|
+
:resizable="resizable"
|
|
185
|
+
row-key="name"
|
|
186
|
+
color="dl-color-secondary"
|
|
187
|
+
title="Table Title"
|
|
188
|
+
:virtual-scroll="vScroll"
|
|
189
|
+
style="height: 500px"
|
|
190
|
+
:rows-per-page-options="rowsPerPageOptions"
|
|
191
|
+
is-empty
|
|
192
|
+
hide-pagination
|
|
193
|
+
@row-click="onRowClick"
|
|
194
|
+
@th-click="log"
|
|
195
|
+
@selectedItems="selectedItems"
|
|
196
|
+
>
|
|
197
|
+
<template #no-data>
|
|
198
|
+
<div class="flex justify-center">
|
|
199
|
+
< slot#no-data > customizabled
|
|
200
|
+
</div>
|
|
201
|
+
</template>
|
|
202
|
+
</DlTreeTable>
|
|
203
|
+
<div>
|
|
204
|
+
<DlTreeTable
|
|
205
|
+
:separator="separator"
|
|
206
|
+
:columns="tableColumns"
|
|
207
|
+
:bordered="bordered"
|
|
208
|
+
:draggable="draggable"
|
|
209
|
+
:dense="dense"
|
|
210
|
+
class="sticky-header"
|
|
211
|
+
:filter="filter"
|
|
212
|
+
:selection="selection"
|
|
213
|
+
:loading="loading"
|
|
214
|
+
:rows="tableRows"
|
|
215
|
+
:resizable="resizable"
|
|
216
|
+
row-key="name"
|
|
217
|
+
color="dl-color-secondary"
|
|
218
|
+
title="Table Title"
|
|
219
|
+
:virtual-scroll="vScroll"
|
|
220
|
+
style="height: 500px"
|
|
221
|
+
:rows-per-page-options="rowsPerPageOptions"
|
|
222
|
+
is-empty
|
|
223
|
+
hide-pagination
|
|
224
|
+
:empty-state-props="{
|
|
225
|
+
responsive: false,
|
|
226
|
+
style: 'min-height: 350px; width: 300px;',
|
|
227
|
+
bgSize: '130px',
|
|
228
|
+
bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
|
|
229
|
+
title: 'Lorem ipsum',
|
|
230
|
+
subtitle:
|
|
231
|
+
'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
|
|
232
|
+
info: 'To learn more about this analytics, read our documentation.'
|
|
233
|
+
}"
|
|
234
|
+
@row-click="onRowClick"
|
|
235
|
+
@th-click="log"
|
|
236
|
+
@selectedItems="selectedItems"
|
|
237
|
+
/>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
171
240
|
</div>
|
|
172
241
|
</div>
|
|
173
242
|
</template>
|