@dataloop-ai/components 0.19.67 → 0.19.69

package/package.json

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

package/src/components/compound/DlInput/DlInput.vue

@@ -743,6 +743,7 @@ export default defineComponent({
                 emit('update:model-value', newValue)
                 input.value.innerHTML = newValue
                 setCaretAtTheEnd(input.value)
+                isInternalChange.value = true
             }
         }
 

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

@@ -524,6 +524,7 @@
                                     :props="getHeaderScope({ col })"
                                     :col-index="colIndex"
                                     :pagination="computedPagination"
+                                    :padding="isTreeTable ? '0' : '0 10px'"
                                     @click="onThClick($event, col.name)"
                                 >
                                     <span
@@ -543,6 +544,7 @@
                                 key="visibleColumnsSlot"
                                 :col-index="-1"
                                 no-tooltip
+                                :padding="isTreeTable ? '0' : '0 10px'"
                             >
                                 <slot
                                     name="header-cell-visible-columns-button"

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

@@ -17,6 +17,7 @@ import DlTable from '../DlTable/DlTable.vue'
 import DlTrTreeView from './views/DlTrTreeView.vue'
 import { DlTableColumn, DlTableProps, DlTableRow } from '../DlTable/types'
 import { useTreeTableRowSelection } from './utils/treeTableRowSelection'
+import { useNestedTableFilter } from './hooks/nestedTableFilter'
 import { getFromChildren } from './utils/getFromChildren'
 import { emits } from './emits'
 import Sortable from '../DlTable/components/SortableJS.vue'
@@ -343,6 +344,21 @@ export default defineComponent({
             getRowKey as ComputedRef<(val: string | DlTableRow) => any>
         )
 
+        const { filteredRows } = useNestedTableFilter(
+            tableRows.value,
+            (row) => {
+                return row.name
+                    .toLowerCase?.()
+                    .includes(props.filter?.toLowerCase())
+            }
+        )
+
+        const computedFilter = computed(() =>
+            props.filter && filteredRows.value.length
+                ? filteredRows.value
+                : tableRows.value
+        )
+
         const updateExpandedRow = (
             isExpanded: boolean,
             name: string,
@@ -677,7 +693,7 @@ export default defineComponent({
 
         const renderTBody = () => {
             if (isEmpty(tableRootRef.value)) return null
-            const children = tableRows.value.map((row, i) => {
+            const children = computedFilter.value.map((row, i) => {
                 const rowBodySlot = slots['row-body']
                 const [renderRow] = rowBodySlot
                     ? rowBodySlot({ row })
@@ -776,7 +792,8 @@ export default defineComponent({
             uuid,
             mainTbodyUuid,
             vue2h,
-            containerClass
+            containerClass,
+            computedFilter
         }
     },
     // adding ignore here as overloading the render function like this is not a known type
@@ -802,7 +819,7 @@ export default defineComponent({
             isTreeTable: true,
             selection: this.selection,
             loading: this.loading,
-            rows: this.tableRows,
+            rows: this.computedFilter,
             resizable: this.resizable,
             rowKey: this.rowKey,
             color: this.color,

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

@@ -0,0 +1,37 @@
+import { ref, computed, watchEffect } from 'vue'
+import { DlTableRow } from '../../types'
+
+export function useNestedTableFilter(
+    rows: DlTableRow[],
+    filerCriteria: (item: DlTableRow) => boolean
+) {
+    const nestedRows = ref<DlTableRow[]>(rows)
+    const criteria = ref(filerCriteria)
+
+    const recursiveSearch = (
+        array: DlTableRow[],
+        criteria: (item: DlTableRow) => boolean
+    ): DlTableRow[] => {
+        return array.reduce((result: DlTableRow[], item: DlTableRow) => {
+            if (criteria(item)) {
+                result.push(item)
+            }
+            if (item.children) {
+                result.push(...recursiveSearch(item.children, criteria))
+            }
+            return result
+        }, [])
+    }
+
+    const filteredRows = computed(() => {
+        return recursiveSearch(nestedRows.value, criteria.value)
+    })
+
+    watchEffect(() => {
+        recursiveSearch(nestedRows.value, criteria.value)
+    })
+
+    return {
+        filteredRows
+    }
+}

package/src/demos/DlTableDemo.vue

@@ -601,7 +601,8 @@ import {
     DlOptionGroup,
     DlSwitch,
     DlInput,
-    DlButton
+    DlButton,
+    DlAvatar
 } from '../components'
 import { defineComponent, ref, computed, nextTick } from 'vue-demi'
 import { times, cloneDeep, isNumber } from 'lodash'
@@ -904,7 +905,8 @@ export default defineComponent({
         DlSwitch,
         DlOptionGroup,
         DlInput,
-        DlButton
+        DlButton,
+        DlAvatar
     },
     setup() {
         const filter = ref('')
@@ -1149,7 +1151,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);
 }