@dataloop-ai/components 0.19.70 → 0.19.71

package/package.json

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

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

@@ -347,13 +347,16 @@ export default defineComponent({
         const { filteredRows } = useNestedTableFilter(
             tableRows.value,
             (row) => {
-                return row.name
-                    .toLowerCase?.()
-                    .includes(props.filter?.toLowerCase())
+                let filter = props.filter ?? ''
+                if (typeof filter === 'string') {
+                    filter = filter.toLowerCase()
+                }
+
+                return row.name.toLowerCase?.().includes(filter)
             }
         )
 
-        const computedFilter = computed(() =>
+        const computedFilter = computed<DlTableRow[]>(() =>
             props.filter && filteredRows.value.length
                 ? filteredRows.value
                 : tableRows.value

package/src/components/compound/DlTreeTable/hooks/nestedTableFilter.ts

@@ -1,4 +1,4 @@
-import { ref, computed, watchEffect } from 'vue'
+import { ref, computed, watchEffect } from 'vue-demi'
 import { DlTableRow } from '../../types'
 
 export function useNestedTableFilter(
@@ -8,27 +8,30 @@ export function useNestedTableFilter(
     const nestedRows = ref<DlTableRow[]>(rows)
     const criteria = ref(filerCriteria)
 
-    const recursiveSearch = (
+    const nestedSearch = (
         array: DlTableRow[],
         criteria: (item: DlTableRow) => boolean
     ): DlTableRow[] => {
-        return array.reduce((result: DlTableRow[], item: DlTableRow) => {
+        const result = []
+        const stack = [...array]
+        while (stack.length) {
+            const item = stack.pop()
             if (criteria(item)) {
                 result.push(item)
             }
             if (item.children) {
-                result.push(...recursiveSearch(item.children, criteria))
+                stack.push(...item.children)
             }
-            return result
-        }, [])
+        }
+        return result
     }
 
     const filteredRows = computed(() => {
-        return recursiveSearch(nestedRows.value, criteria.value)
+        return nestedSearch(nestedRows.value, criteria.value)
     })
 
     watchEffect(() => {
-        recursiveSearch(nestedRows.value, criteria.value)
+        nestedSearch(nestedRows.value, criteria.value)
     })
 
     return {

package/src/demos/DlTreeTableDemo.vue

@@ -774,7 +774,7 @@ export default defineComponent({
     align-items: flex-start;
     gap: 10px;
     padding: 10px;
-    background-color: #f4f4f4;
+    background-color: var(--dl-color-panel-background);
     border-radius: 4px;
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
 }