@dataloop-ai/components 0.19.113 → 0.19.114

package/package.json

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

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

@@ -160,7 +160,7 @@
                 no-focus
                 :offset="[0, 3]"
                 style="border-radius: 0"
-                :style="menuStyle"
+                :style="computedMenuStyle"
                 :menu-class="menuClass"
                 :disabled="disabled || readonly"
                 :arrow-nav-items="options"
@@ -195,6 +195,8 @@
                         :model-value="allFiltersModel"
                         :count="totalCount"
                         :highlight-selected="highlightSelected"
+                        :filter-term="searchTerm"
+                        :fit-content="fitContent"
                         total-items
                         @update:model-value="selectAll"
                         @depth-change="handleDepthChange"
@@ -212,8 +214,7 @@
                         :virtual-scroll-item-size="28"
                         :virtual-scroll-sticky-size-start="28"
                         :virtual-scroll-sticky-size-end="20"
-                        separator
-                        :style="multiselect ? `width: max-content` : ''"
+                        :style="`width: 100%; max-height: calc(${dropdownMaxHeight} - 20px);`"
                     >
                         <dl-select-option
                             :key="getKeyForOption(item)"
@@ -228,6 +229,8 @@
                                     ? 'background-color: var(--dl-color-fill)'
                                     : ''
                             "
+                            :fit-content="fitContent"
+                            :filter-term="searchTerm"
                             :with-wave="withWave"
                             :model-value="modelValue"
                             :value="getOptionValue(item)"
@@ -277,6 +280,8 @@
                                     ? 'background-color: var(--dl-color-fill)'
                                     : ''
                             "
+                            :fit-content="fitContent"
+                            :filter-term="searchTerm"
                             :with-wave="withWave"
                             :model-value="modelValue"
                             :value="getOptionValue(option)"
@@ -296,6 +301,7 @@
                                 :opt="option"
                                 name="option"
                             >
+                                tetestestes
                                 <span
                                     v-if="fitContent"
                                     class="inner-option"
@@ -357,8 +363,9 @@ import {
     getLabelOfSelectedOption,
     getCaseInsensitiveInput
 } from './utils'
+import { DlSelectOption as DlSelectOptionEntry } from '../types'
 import DlSelectOption from './components/DlSelectOption.vue'
-import { isEqual } from 'lodash'
+import { cloneDeep, isEqual } from 'lodash'
 import { getColor } from '../../../utils'
 import { v4 } from 'uuid'
 
@@ -493,15 +500,98 @@ export default defineComponent({
                 return this.options
             }
 
-            return this.options.filter((option) => {
-                const label = getLabel(option)
-                return (
-                    label &&
-                    label
-                        .toLowerCase()
-                        .includes(this.searchTerm.toLowerCase().trim())
-                )
-            })
+            // alternate version here it shows from child down
+            // const labelIncluded = (
+            //     options: DlSelectOptionType[],
+            //     term: string
+            // ): DlSelectOptionType[] => {
+            //     const filteredNodes: DlSelectOptionType[] = []
+
+            //     for (const op of options) {
+            //         const queue: DlSelectOptionType[] = [op]
+            //         while (queue.length) {
+            //             const node = queue.shift()
+            //             let shouldPush = false
+
+            //             const label = getLabel(node)
+
+            //             if (
+            //                 label &&
+            //                 label
+            //                     .toLowerCase()
+            //                     .includes(term.toLowerCase().trim())
+            //             ) {
+            //                 filteredNodes.push(node)
+            //                 shouldPush = true
+            //             }
+
+            //             if (
+            //                 !shouldPush &&
+            //                 (node as DlSelectOptionEntry)?.children?.length
+            //             ) {
+            //                 queue.push(
+            //                     ...(node as DlSelectOptionEntry).children
+            //                 )
+            //             }
+            //         }
+            //     }
+
+            //     return filteredNodes
+            // }
+
+            const labelIncluded = (
+                options: DlSelectOptionType[],
+                term: string
+            ): DlSelectOptionType[] => {
+                const filteredNodes: DlSelectOptionType[] = []
+
+                for (const op of options) {
+                    const queue: DlSelectOptionType[] = [op]
+                    const filteredRoots: DlSelectOptionType[] = []
+                    while (queue.length) {
+                        const node = queue.shift()
+                        let shouldPush = false
+                        if ((node as DlSelectOptionEntry)?.children?.length) {
+                            const filteredChildren: DlSelectOptionType[] =
+                                labelIncluded(
+                                    (node as DlSelectOptionEntry).children,
+                                    term
+                                )
+                            if (filteredChildren.length) {
+                                // @ts-ignore
+                                node.children = filteredChildren
+                                shouldPush = true
+                            }
+                        }
+
+                        const label = getLabel(node)
+
+                        if (
+                            shouldPush ||
+                            (label &&
+                                label
+                                    .toLowerCase()
+                                    .includes(term.toLowerCase().trim()))
+                        ) {
+                            filteredRoots.push(node)
+                        }
+                    }
+                    for (const root of filteredRoots) {
+                        filteredNodes.push(root)
+                    }
+                }
+
+                return filteredNodes
+            }
+
+            return labelIncluded(cloneDeep(this.options), this.searchTerm)
+        },
+        computedMenuStyle(): string {
+            let style = this.menuStyle ?? ''
+            if (this.optionsCount > this.MAX_ITEMS_PER_LIST) {
+                style += '; overflow-y: hidden'
+            }
+            return style
         },
         optionsCount(): number {
             return this.options?.length ?? 0
@@ -778,7 +868,11 @@ export default defineComponent({
             return option?.count ?? null
         },
         getKeyForOption(
-            option: string | number | Record<string, string | number>
+            option:
+                | string
+                | number
+                | Record<string, string | number>
+                | DlSelectOptionType
         ) {
             if (typeof option === 'string' || typeof option === 'number') {
                 return option

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

@@ -96,24 +96,40 @@
                     :capitalized="capitalized"
                     :readonly="isReadonlyOption(child)"
                     :is-expanded="isExpanded"
+                    :filter-term="filterTerm"
+                    :fit-content="fitContent"
                     @update:model-value="handleCheckboxUpdate"
                     @selected="handleSingleSelect"
                     @deselected="handleSingleDeselect"
                     @depth-change="$emit('depth-change')"
-                />
+                >
+                    <span
+                        v-if="fitContent"
+                        class="inner-option"
+                        v-html="getOptionHtml(child)"
+                    />
+                    <dl-ellipsis v-else>
+                        <span
+                            class="inner-option"
+                            v-html="getOptionHtml(child)"
+                        />
+                    </dl-ellipsis>
+                </dl-select-option>
             </div>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { defineComponent, PropType } from 'vue-demi'
 import { DlListItem } from '../../../basic'
 import { DlIcon, DlCheckbox } from '../../../essential'
 import { DlItemSection } from '../../../shared'
 import { v4 } from 'uuid'
 import { debounce } from 'lodash'
 import { stateManager } from '../../../../StateManager'
+import { DlSelectOptionType, getCaseInsensitiveInput, getLabel } from '../utils'
+import { DlSelectedValueType } from '../../types'
 
 const ValueTypes = [Array, Boolean, String, Number, Object, Function]
 
@@ -135,7 +151,10 @@ export default defineComponent({
         defaultStyles: { type: Boolean, default: true },
         multiselect: { type: Boolean, default: false },
         value: { type: ValueTypes, default: null },
-        children: { type: Array, default: null },
+        children: {
+            type: Array as PropType<DlSelectedValueType[]>,
+            default: null
+        },
         highlightSelected: { type: Boolean, default: false },
         count: { type: Number, default: null },
         totalItems: { type: Boolean, default: false },
@@ -150,6 +169,14 @@ export default defineComponent({
         isExpanded: {
             type: Boolean,
             default: false
+        },
+        filterTerm: {
+            type: String,
+            default: null
+        },
+        fitContent: {
+            type: Boolean,
+            default: false
         }
     },
     emits: [
@@ -199,6 +226,32 @@ export default defineComponent({
         }
     },
     methods: {
+        getOptionValue(option: any) {
+            return option?.value ?? option
+        },
+        getOptionLabel(option: any) {
+            return getLabel(option) ?? this.getOptionValue(option)
+        },
+        getOptionHtml(option: DlSelectOptionType) {
+            const label = `${this.getOptionLabel(option)}`
+            let highlightedHtml = label
+
+            if (this.filterTerm?.length) {
+                const toReplace = new RegExp(this.filterTerm, 'gi')
+
+                highlightedHtml = label.replace(
+                    toReplace,
+                    `<span style="background: var(--dl-color-warning)">${getCaseInsensitiveInput(
+                        label,
+                        this.filterTerm
+                    )}</span>`
+                )
+            }
+
+            const html = `<span>${highlightedHtml}</span>`
+
+            return html
+        },
         handleSingleSelect(value?: any) {
             this.$emit('selected', value ?? this.value)
         },

package/src/components/compound/DlSelect/types.ts

@@ -1,6 +1,7 @@
 export interface DlSelectOption {
     label: string
     value: any
+    key?: string
     expanded?: boolean
     children?: DlSelectOption[]
     readonly?: boolean

package/src/demos/DlSelectDemo.vue

@@ -576,44 +576,24 @@
             v-model="selectedWithChildrenAndReadonly"
             :options="treeOptionsExpanded"
             multiselect
+            searchable
             style="margin-bottom: 150px; width: 200px"
-        >
-            <template #option="scope">
-                <div style="padding: 5px 0px">
-                    <div>{{ scope.opt.label }}</div>
-                    <div>{{ scope.opt.subLabel }}</div>
-                </div>
-            </template>
-        </dl-select>
-
+        />
         Select with multiselect auto expanded and fixed width and virtual scroll
         <dl-select
             v-model="selectedWithChildrenAndReadonly"
             :options="alotOfOptionsExpanded"
             multiselect
+            searchable
             style="margin-bottom: 150px; width: 200px"
-        >
-            <template #option="scope">
-                <div style="padding: 5px 0px">
-                    <div>{{ scope.opt.label }}</div>
-                    <div>{{ scope.opt.subLabel }}</div>
-                </div>
-            </template>
-        </dl-select>
+        />
         Select with multiselect auto expanded and fixed width and virtual scroll
         <dl-select
             v-model="selectedWithChildrenAndReadonly"
             :options="alotOfOptionsExpanded"
             multiselect
             style="margin-bottom: 150px"
-        >
-            <template #option="scope">
-                <div style="padding: 5px 0px">
-                    <div>{{ scope.opt.label }}</div>
-                    <div>{{ scope.opt.subLabel }}</div>
-                </div>
-            </template>
-        </dl-select>
+        />
     </div>
 </template>