@dataloop-ai/components 0.18.50 → 0.18.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.50",
+  "version": "0.18.52",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlTable/DlTable.vue

@@ -248,14 +248,14 @@
                     <DlTr v-if="isEmpty">
                         <DlTd colspan="100%">
                             <div class="flex justify-center">
-                                <dl-empty-state v-bind="props">
+                                <dl-empty-state v-bind="emptyStateProps">
                                     <template
                                         v-for="(_, slot) in $slots"
-                                        #[slot]="emptyStateProps"
+                                        #[slot]="emptyStateSlotProps"
                                     >
                                         <slot
                                             :name="slot"
-                                            v-bind="emptyStateProps"
+                                            v-bind="emptyStateSlotProps"
                                         />
                                     </template>
                                 </dl-empty-state>
@@ -460,17 +460,17 @@
                         </slot>
                     </slot>
 
-                    <DlTr v-if="isEmpty">
+                    <DlTr v-if="isEmpty && hasEmptyStateProps">
                         <DlTd colspan="100%">
                             <div class="flex justify-center">
-                                <dl-empty-state v-bind="props">
+                                <dl-empty-state v-bind="emptyStateProps">
                                     <template
                                         v-for="(_, slot) in $slots"
-                                        #[slot]="emptyStateProps"
+                                        #[slot]="props"
                                     >
                                         <slot
                                             :name="slot"
-                                            v-bind="emptyStateProps"
+                                            v-bind="props"
                                         />
                                     </template>
                                 </dl-empty-state>
@@ -879,9 +879,6 @@ export default defineComponent({
         )
 
         const computedRows = computed(() => {
-            /*if(props.virtualScrollRows.length) {
-                return props.virtualScrollRows
-            }*/
             let rows = filteredSortedRows.value
 
             const { rowsPerPage } = computedPagination.value
@@ -1229,6 +1226,9 @@ export default defineComponent({
         const updatePagination = (value: any, key: string) => {
             return setPagination({ [`${key}`]: value })
         }
+        const hasEmptyStateProps = computed(
+            () => Object.keys(props.emptyStateProps).length > 0
+        )
 
         return {
             uuid: `dl-table-${v4()}`,
@@ -1282,7 +1282,8 @@ export default defineComponent({
             hasSlotBody,
             hasSlotHeaderSelection,
             stopAndPrevent,
-            updatePagination
+            updatePagination,
+            hasEmptyStateProps
         }
     }
 })

package/src/components/compound/DlTreeTable/DlTreeTable.vue

@@ -18,6 +18,10 @@
         :title="title"
         :virtual-scroll="virtualScroll"
         :rows-per-page-options="rowsPerPageOptions"
+        :hide-pagination="hidePagination"
+        :is-empty="isEmpty"
+        :empty-state-props="emptyStateProps"
+        :no-data-label="noDataLabel"
         @row-click="emitRowClick"
         @th-click="emitThClick"
         @update:selected="updateSelected"
@@ -32,7 +36,7 @@
             />
         </template>
         <template #table-body="props">
-            <template v-if="virtualScroll">
+            <template v-if="virtualScroll && !isEmpty">
                 <DlTrTreeView
                     :row="props.item"
                     :is-row-selected="
@@ -172,27 +176,11 @@
                         </template>
                     </DlTrTreeView>
                 </template>
-                <template v-else>
-                    <DlTr>
-                        <DlTd colspan="100%">
-                            <div class="flex justify-center">
-                                <dl-empty-state v-bind="props">
-                                    <template
-                                        v-for="(_, slot) in $slots"
-                                        #[slot]="emptyStateProps"
-                                    >
-                                        <slot
-                                            :name="slot"
-                                            v-bind="emptyStateProps"
-                                        />
-                                    </template>
-                                </dl-empty-state>
-                            </div>
-                        </DlTd>
-                    </DlTr>
-                </template>
             </template>
         </template>
+        <template #no-data>
+            <slot name="no-data" />
+        </template>
     </DlTable>
 </template>
 
@@ -205,7 +193,7 @@ import {
     set,
     ref
 } from 'vue-demi'
-import { DlTable, DlEmptyState, DlTr, DlTd } from '../../../components'
+import { DlTable } from '../../../components'
 import DlTrTreeView from './views/DlTrTreeView.vue'
 import { cloneDeep } from 'lodash'
 import { DlTableProps, DlTableRow } from '../DlTable/types'
@@ -220,10 +208,7 @@ export default defineComponent({
     components: {
         DlTable,
         DlTrTreeView,
-        DlCheckbox,
-        DlEmptyState,
-        DlTr,
-        DlTd
+        DlCheckbox
     },
     props,
     emits,
@@ -237,8 +222,13 @@ export default defineComponent({
         const tableRows = ref(cloneDeep(props.rows))
         const tableColumns = ref(props.columns)
         const hasFlatTreeData = true
+        const hasEmptyStateProps = computed(
+            () => Object.keys(props.emptyStateProps).length > 0
+        )
 
-        const computedRows = computed(() => dlTableRef.value.computedRows)
+        const computedRows = computed(() =>
+            dlTableRef.value?.computedRows ? dlTableRef.value?.computedRows : []
+        )
 
         const getRowKey = computed(() =>
             typeof props.rowKey === 'function'
@@ -380,6 +370,7 @@ export default defineComponent({
             computedRows,
             getRowKey,
             updateSelection,
+            hasEmptyStateProps,
             updateExpandedRow,
             updateSelectionHierarchy,
             onMultipleSelectionSet,

package/src/demos/DlCodeEditor/DlCodeEditorDemo.vue

@@ -17,7 +17,7 @@
             width="45vw"
             height="75vh"
             :language="language"
-            :theme="theme"
+            :theme="'atom-one-dark'"
             :readonly="readonly"
             :options="options"
         />

package/src/demos/DlTableDemo.vue

@@ -180,6 +180,43 @@
                 </DlTable>
             </div>
 
+            <div style="margin-top: 100px">
+                Custom Slot `row-body`
+                <DlTable
+                    :selected="selected"
+                    :separator="separator"
+                    :columns="tableColumns"
+                    :bordered="bordered"
+                    :dense="dense"
+                    class="sticky-header"
+                    :filter="filter"
+                    :selection="selection"
+                    :loading="loading"
+                    :rows="tableRows"
+                    :resizable="resizable"
+                    row-key="id"
+                    color="dl-color-secondary"
+                    title="Table Title"
+                    :virtual-scroll="vScroll"
+                    style="height: 500px"
+                    :rows-per-page-options="rowsPerPageOptions"
+                    @row-click="log"
+                    @th-click="log"
+                    @update:selected="updateSeleted"
+                >
+                    <template #row-body="props">
+                        <dl-tr :props="props">
+                            <dl-td
+                                v-for="(value, key) in Object.keys(props.row)"
+                                :key="key"
+                            >
+                                {{ props.row[value] }}
+                            </dl-td>
+                        </dl-tr>
+                    </template>
+                </DlTable>
+            </div>
+
             <div style="margin-top: 100px">
                 <DlTable
                     :selected="selected"
@@ -405,7 +442,9 @@ import {
     DlOptionGroup,
     DlSwitch,
     DlInput,
-    DlButton
+    DlButton,
+    DlTr,
+    DlTd
 } from '../components'
 import { defineComponent, ref, computed, nextTick } from 'vue-demi'
 import { times, cloneDeep, isNumber } from 'lodash'
@@ -577,7 +616,9 @@ export default defineComponent({
         DlSwitch,
         DlOptionGroup,
         DlInput,
-        DlButton
+        DlButton,
+        DlTr,
+        DlTd
     },
     setup() {
         const filter = ref('')

package/src/demos/DlTreeTableDemo.vue

@@ -168,6 +168,75 @@
                     style="height: 500px"
                 />
             </div>
+            <div style="margin-top: 100px">
+                <p>Empty State</p>
+                <DlTreeTable
+                    :separator="separator"
+                    :columns="tableColumns"
+                    :bordered="bordered"
+                    :draggable="draggable"
+                    :dense="dense"
+                    class="sticky-header"
+                    :filter="filter"
+                    :selection="selection"
+                    :loading="loading"
+                    :rows="[]"
+                    :resizable="resizable"
+                    row-key="name"
+                    color="dl-color-secondary"
+                    title="Table Title"
+                    :virtual-scroll="vScroll"
+                    style="height: 500px"
+                    :rows-per-page-options="rowsPerPageOptions"
+                    is-empty
+                    hide-pagination
+                    @row-click="onRowClick"
+                    @th-click="log"
+                    @selectedItems="selectedItems"
+                >
+                    <template #no-data>
+                        <div class="flex justify-center">
+                            &lt slot#no-data > customizabled
+                        </div>
+                    </template>
+                </DlTreeTable>
+                <div>
+                    <DlTreeTable
+                        :separator="separator"
+                        :columns="tableColumns"
+                        :bordered="bordered"
+                        :draggable="draggable"
+                        :dense="dense"
+                        class="sticky-header"
+                        :filter="filter"
+                        :selection="selection"
+                        :loading="loading"
+                        :rows="tableRows"
+                        :resizable="resizable"
+                        row-key="name"
+                        color="dl-color-secondary"
+                        title="Table Title"
+                        :virtual-scroll="vScroll"
+                        style="height: 500px"
+                        :rows-per-page-options="rowsPerPageOptions"
+                        is-empty
+                        hide-pagination
+                        :empty-state-props="{
+                            responsive: false,
+                            style: 'min-height: 350px; width: 300px;',
+                            bgSize: '130px',
+                            bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                            title: 'Lorem ipsum',
+                            subtitle:
+                                'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                            info: 'To learn more about this analytics, read our documentation.'
+                        }"
+                        @row-click="onRowClick"
+                        @th-click="log"
+                        @selectedItems="selectedItems"
+                    />
+                </div>
+            </div>
         </div>
     </div>
 </template>