@dataloop-ai/components 0.19.60 → 0.19.62

package/package.json

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

package/src/components/blocks/DlLabelPicker/DlLabelPicker.vue

@@ -78,8 +78,6 @@ export default defineComponent({
         ]
 
         const inputValue = ref('')
-        const isInputActive = ref(false)
-        const inputBorderLeft = ref('2px solid transparent')
         const currentSelectedLabel = ref<DlLabelPickerItem>(null)
 
         const handleRowClick = (_: MouseEvent, item: DlLabelPickerItem) => {
@@ -103,16 +101,16 @@ export default defineComponent({
         })
 
         const inputStyles = computed(() => {
+            if (!selectedColor.value) {
+                return {}
+            }
             return { 'border-left': `2px solid ${selectedColor.value}` }
         })
 
         return {
             handleRowClick,
             inputValue,
-            inputBorderLeft,
-            isInputActive,
             columns,
-            selectedColor,
             placeHolderText,
             inputStyles
         }

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

@@ -815,7 +815,7 @@
         </div>
 
         <div
-            v-if="!hideBottom"
+            v-if="!hideBottom || (nothingToDisplay && !hideNoData)"
             :class="bottomClasses"
         >
             <div

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

@@ -294,7 +294,7 @@ export default defineComponent({
 
         const mainTbodyUuid = `dl-tree-table-tbody-${v4()}`
 
-        const mainTableKey = ref()
+        const mainTableKey = ref(v4())
 
         const { rows: tableRows, columns: tableColumns } = toRefs(props)
 
@@ -317,7 +317,8 @@ export default defineComponent({
         const getRowKey = computed(() =>
             typeof props.rowKey === 'function'
                 ? props.rowKey
-                : (row: Record<string, any>) => row[props.rowKey as string]
+                : (row: Record<string, any>) =>
+                      row[props.rowKey as string] ?? ''
         )
 
         const hasDraggableRows = computed(() =>
@@ -347,45 +348,44 @@ export default defineComponent({
             name: string,
             rowsArr: DlTableRow[] = tableRows.value
         ) => {
-            rowsArr.some((o) => {
-                if (getRowKey.value(o) === name) {
+            for (const row of rowsArr) {
+                if (getRowKey.value(row) === name) {
                     if (isVue2) {
-                        set(o, 'isExpanded', isExpanded)
+                        set(row, 'isExpanded', isExpanded)
                     } else {
-                        o.isExpanded = isExpanded
+                        row.isExpanded = isExpanded
                     }
-                    updateNestedRows(o, isExpanded)
+                    updateNestedRows(row, isExpanded)
                 } else {
-                    if ((o.children || []).length > 0) {
-                        updateExpandedRow(isExpanded, name, o.children)
+                    if ((row.children || []).length > 0) {
+                        updateExpandedRow(isExpanded, name, row.children)
                     }
                 }
-            })
+            }
         }
         const updateNestedRows = (
             row: (typeof computedRows.value)[number],
             isExpanded: boolean
         ) => {
-            if ((row.children || []).length > 0) {
-                row.children.forEach(
-                    (r: (typeof computedRows.value)[number]) => {
-                        if (isVue2) {
-                            set(r, 'isExpanded', isExpanded)
-                        } else {
-                            r.isExpanded = isExpanded
-                        }
-
-                        if (!isExpanded) {
-                            if (isVue2) {
-                                set(r, 'isExpanded', isExpanded)
-                            } else {
-                                r.isExpanded = isExpanded
-                            }
+            if (!row.children) {
+                return
+            }
+
+            for (const r of row.children) {
+                if (isVue2) {
+                    set(r, 'isExpanded', isExpanded)
+                } else {
+                    r.isExpanded = isExpanded
+                }
 
-                            updateNestedRows(r, isExpanded)
-                        }
+                if (!isExpanded) {
+                    if (isVue2) {
+                        set(r, 'isExpanded', isExpanded)
+                    } else {
+                        r.isExpanded = isExpanded
                     }
-                )
+                    updateNestedRows(r, isExpanded)
+                }
             }
         }
         const updateSelectionHierarchy = (

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

@@ -61,6 +61,9 @@ export default defineComponent({
     watch: {
         'props.row': {
             handler(row: DlTableRow) {
+                if (!this.$refs.dlTrTreeRef) {
+                    return
+                }
                 (this.$refs.dlTrTreeRef as any).setAttribute(
                     'data-is-visible',
                     row.isExpandedParent || row.level === 1

package/src/demos/DlLabelPickerDemo.vue

@@ -1,7 +1,11 @@
 <template>
     <div>
         <div>Label picker component</div>
-        <DlLabelPicker :items="items" />
+        <DlLabelPicker
+            :items="items"
+            @selected-label="setSelectedEvent"
+        />
+        <div>last selected: {{ lastSelected }}</div>
     </div>
 </template>
 
@@ -63,7 +67,11 @@ export default defineComponent({
     },
     setup() {
         const items = ref(rows)
-        return { items }
+        const lastSelected = ref<DlLabelPickerItem>(null)
+        const setSelectedEvent = (item: DlLabelPickerItem) => {
+            lastSelected.value = item
+        }
+        return { items, lastSelected, setSelectedEvent }
     }
 })
 </script>

package/src/demos/DlTableDemo.vue

@@ -506,6 +506,30 @@
                 no-data-label="NOoooooOOOOOoooooo"
             />
         </div>
+        <div>
+            <p>With empty data virtual scroll</p>
+            <DlTable
+                :rows="[]"
+                :columns="tableColumns"
+                title="empty data"
+                no-data-label="NOoooooOOOOOoooooo"
+                virtual-scroll
+            />
+        </div>
+        <div>
+            <p>With empty data virtual scroll no data slot</p>
+            <DlTable
+                :rows="[]"
+                :columns="tableColumns"
+                title="empty data"
+                virtual-scroll
+                hide-bottom
+            >
+                <template #no-data>
+                    <div>&lt slot#no-data ></div>
+                </template>
+            </DlTable>
+        </div>
         <div>
             <p>With alignments</p>
             <DlTable