@dataloop-ai/components 0.19.70 → 0.19.72

package/package.json

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

package/src/components/compound/DlPagination/components/RowsSelector.vue

@@ -12,7 +12,7 @@
             size="s"
             :options="options"
             :disabled="disabled"
-            width="min-content"
+            menu-style="min-width: fit-content;"
             align-right
             disable-dropdown-icon-padding
             fit-content

package/src/components/compound/DlSelect/DlSelect.vue

@@ -160,6 +160,8 @@
                 no-focus
                 :offset="[0, 3]"
                 style="border-radius: 0"
+                :style="menuStyle"
+                :menu-class="menuClass"
                 :disabled="disabled || readonly"
                 :arrow-nav-items="options"
                 :max-height="dropdownMaxHeight"
@@ -412,6 +414,14 @@ export default defineComponent({
         triggerPercentage: {
             type: Number,
             default: 1
+        },
+        menuStyle: {
+            type: String,
+            default: null
+        },
+        menuClass: {
+            type: String,
+            default: null
         }
     },
     emits: [
@@ -1106,6 +1116,7 @@ export default defineComponent({
         padding: 5px 0;
         max-height: var(--dl-select-dropdown-max-height);
         overflow: auto;
+        width: fit-content;
     }
 
     .expand-icon {

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/DlSelectDemo.vue

@@ -99,6 +99,51 @@
                 </div>
             </template>
         </dl-select>
+        fit content
+        <dl-select
+            v-model="statusOption"
+            width="96px"
+            without-borders
+            fit-content
+            align-right
+            :options="[
+                {
+                    label: 'S1',
+                    value: 1,
+                    badgeColor: 'var(--dl-color-disabled)'
+                },
+                {
+                    label: 'S 2',
+                    value: 2,
+                    badgeColor: 'var(--dl-color-secondary)'
+                },
+                {
+                    label: 'S3',
+                    value: 3,
+                    badgeColor: 'var(--dl-color-positive)'
+                },
+                {
+                    label: 'S4',
+                    value: 4,
+                    badgeColor: 'var(--dl-color-warning)'
+                }
+            ]"
+            required
+        >
+            <template #selected="scope">
+                <div style="display: flex; align-items: center; gap: 5px">
+                    <dl-badge :color="scope.opt.badgeColor" />
+                    {{ scope.opt.label }}
+                </div>
+            </template>
+            <template #option="scope">
+                <div style="display: flex; align-items: center; gap: 5px">
+                    <dl-badge :color="scope.opt.badgeColor" />
+                    {{ scope.opt.label }}
+                </div>
+            </template>
+        </dl-select>
+
         with prepend
         <dl-select
             v-model="tasksFilter"

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);
 }