@dataloop-ai/components 0.20.232 → 0.20.233

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.232",
+  "version": "0.20.233",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -23,7 +23,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.1.63",
+    "@dataloop-ai/icons": "^3.1.65",
     "@monaco-editor/loader": "^1.4.0",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",

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

@@ -37,6 +37,10 @@
             :hide-bottom="hideBottom"
             :hide-no-data="hideNoData"
             identifier-as-tooltip
+            :class="{
+                'dl-label-picker-tree-table': true,
+                'has-not-children': hasNotChildren
+            }"
             @row-click="handleRowClick"
         >
             <template #body-cell-displayLabel="item">
@@ -65,6 +69,7 @@ import { DlLabel, DlIcon } from '../../essential'
 import { DlInput, DlTreeTable } from '../../compound'
 import { DlEmptyStateProps, DlTableColumn, DlTableRow } from '../../types'
 import { DlLabelPickerItem } from './types'
+import { v4 } from 'uuid'
 
 export default defineComponent({
     name: 'DlLabelPicker',
@@ -142,6 +147,9 @@ export default defineComponent({
             emit('click', item)
         }
 
+        const hasNotChildren = computed(() => {
+            return !items.value?.some((item) => item.children?.length > 0)
+        })
         const placeHolderText = computed(() => {
             if (!currentSelectedLabel.value) {
                 return 'Search a label'
@@ -183,7 +191,8 @@ export default defineComponent({
                 mapObjects(item, (obj: DlLabelPickerItem) => {
                     return {
                         ...obj,
-                        name: obj.displayLabel
+                        name: obj.displayLabel,
+                        id: obj.id || v4()
                     }
                 })
             )
@@ -260,6 +269,7 @@ export default defineComponent({
         return {
             handleRowClick,
             inputValue,
+            hasNotChildren,
             columns,
             placeHolderText,
             inputStyles,
@@ -292,6 +302,15 @@ export default defineComponent({
 .dl-label-picker .dl-table tbody tr.selected td {
     background-color: var(--dl-color-fill);
 }
+.dl-label-picker > div.dl-label-picker-tree-table td.dl-draggable-container {
+    width: 0;
+    padding: 0;
+}
+.dl-label-picker
+    > div.dl-label-picker-tree-table.has-not-children
+    td.chevron-icon-container {
+    width: 10px;
+}
 </style>
 
 <style>

package/src/components/blocks/DlLabelPicker/types.ts

@@ -3,4 +3,5 @@ export type DlLabelPickerItem = {
     identifier: string
     displayLabel: string
     children?: DlLabelPickerItem[]
+    id?: string
 }

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

@@ -1068,7 +1068,7 @@ export default defineComponent({
             const parentMap = buildParentMap(props.rows)
             let level = 1
             let currentId = row.id
-            while (parentMap.has(currentId)) {
+            while (parentMap.has(currentId) && currentId) {
                 level++
                 currentId = parentMap.get(currentId)!
             }

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

@@ -11,9 +11,10 @@
         @mouseleave="onRowHoverEnd($event, row, rowIndex)"
     >
         <td
-            :style="`width: 25px; opacity: ${
+            :style="`opacity: ${
                 isDragIconVisible || isRowHighlighted ? '1' : '0'
             }`"
+            class="dl-draggable-container"
         >
             <dl-icon
                 v-if="hasDraggableRows && !row.disableDraggable"
@@ -452,4 +453,7 @@ export default defineComponent({
         cursor: default;
     }
 }
+.dl-draggable-container {
+    width: 25px;
+}
 </style>