@dataloop-ai/components 0.19.72 → 0.19.74

package/package.json

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

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

@@ -26,7 +26,7 @@
             selection="none"
             :loading="false"
             :filter="inputValue"
-            :rows="items"
+            :rows="rows"
             row-key="identifier"
             color="dl-color-secondary"
             @row-click="handleRowClick"
@@ -43,10 +43,10 @@
 </template>
 
 <script lang="ts">
-import { ref, PropType, defineComponent, computed } from 'vue-demi'
+import { ref, PropType, defineComponent, computed, toRefs } from 'vue-demi'
 import { DlLabel, DlIcon } from '../../essential'
 import { DlInput, DlTreeTable } from '../../compound'
-import { DlTableColumn } from '../../types'
+import { DlTableColumn, DlTableRow } from '../../types'
 import { DlLabelPickerItem } from './types'
 
 export default defineComponent({
@@ -63,8 +63,10 @@ export default defineComponent({
             default: () => [] as PropType<DlLabelPickerItem[]>
         }
     },
-    emits: ['selectedLabel'],
+    emits: ['selectedLabel', 'click'],
     setup(props, { emit, slots }) {
+        const { items } = toRefs(props)
+
         const columns: DlTableColumn[] = [
             {
                 name: 'displayLabel',
@@ -83,6 +85,7 @@ export default defineComponent({
         const handleRowClick = (_: MouseEvent, item: DlLabelPickerItem) => {
             currentSelectedLabel.value = item
             emit('selectedLabel', item)
+            emit('click', item)
         }
 
         const placeHolderText = computed(() => {
@@ -107,12 +110,20 @@ export default defineComponent({
             return { 'border-left': `2px solid ${selectedColor.value}` }
         })
 
+        const rows = computed<DlTableRow[]>(() => {
+            return items.value?.map((i: DlLabelPickerItem) => ({
+                ...i,
+                name: i.displayLabel
+            }))
+        })
+
         return {
             handleRowClick,
             inputValue,
             columns,
             placeHolderText,
-            inputStyles
+            inputStyles,
+            rows
         }
     }
 })

package/src/components/compound/DlTable/hooks/tableColumnSelection.ts

@@ -75,11 +75,7 @@ export function useTableColumnSelection(
                 align,
                 iconClass: `dl-table__sort-icon dl-table__sort-icon--${align}`,
                 thClass:
-                    alignClass +
-                    headerClass +
-                    sortableClass +
-                    sortOrderClass +
-                    textTransformClass,
+                    alignClass + headerClass + sortableClass + sortOrderClass,
                 tdStyle: assignTdStyles(col),
                 tdClass: assignTdClasses(col, alignClass, textTransformClass)
             }

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

@@ -352,7 +352,8 @@ export default defineComponent({
                     filter = filter.toLowerCase()
                 }
 
-                return row.name.toLowerCase?.().includes(filter)
+                // todo: row is not always defined. which will cause the filter not to work.
+                return row.name?.toLowerCase?.().includes(filter)
             }
         )