@dataloop-ai/components 0.19.75 → 0.19.77

package/package.json

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

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -386,12 +386,6 @@ export default defineComponent({
         let lastSearchQuery: string
 
         const updateJSONQuery = () => {
-            if (lastSearchQuery === searchQuery.value) {
-                return null
-            } else {
-                lastSearchQuery = searchQuery.value
-            }
-
             try {
                 const bracketless = removeBrackets(searchQuery.value)
                 const cleanedAliases = revertAliases(bracketless, aliases.value)
@@ -610,10 +604,13 @@ export default defineComponent({
                 return
             }
 
-            const toSearch = updateJSONQuery()
-            if (toSearch) {
-                emit('search', toSearch)
-                showSuggestions.value = false
+            if (lastSearchQuery !== searchQuery.value) {
+                lastSearchQuery = searchQuery.value
+                const toSearch = updateJSONQuery()
+                if (toSearch) {
+                    emit('search', toSearch)
+                    showSuggestions.value = false
+                }
             }
         }
 

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

@@ -578,7 +578,7 @@ export default defineComponent({
                 )
             }
         },
-        selectedOption(): string | Record<string, string | number> | number {
+        selectedOption(): DlSelectOptionType {
             return this.selectedIndex === -1
                 ? this.computedPlaceholder
                 : this.options[this.selectedIndex]
@@ -719,12 +719,7 @@ export default defineComponent({
 
             if (this.emitValue) {
                 this.selectedIndex = this.options.findIndex(
-                    (
-                        option:
-                            | string
-                            | Record<string, string | number>
-                            | number
-                    ) =>
+                    (option: DlSelectOptionType) =>
                         isEqual(
                             (option as any).value,
                             this.modelValue as string | number
@@ -735,19 +730,13 @@ export default defineComponent({
 
             if (this.isModelValuePrimitiveType) {
                 this.selectedIndex = this.options.findIndex(
-                    (
-                        option:
-                            | string
-                            | Record<string, string | number>
-                            | number
-                    ) => option === this.modelValue
+                    (option: DlSelectOptionType) => option === this.modelValue
                 )
                 return
             }
 
             this.selectedIndex = this.options.findIndex(
-                (option: string | Record<string, string | number> | number) =>
-                    isEqual(option, this.modelValue)
+                (option: DlSelectOptionType) => isEqual(option, this.modelValue)
             )
         },
         handleSelectedItem(value: DlSelectOptionType) {

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

@@ -1,6 +1,7 @@
 import { TInputSizes } from '../../../utils/input-sizes'
+import { DlSelectOption } from './types'
 
-export type DlSelectOptionType = string | number | Record<string, any>
+export type DlSelectOptionType = string | number | DlSelectOption
 
 export const getLabel = (option: any) => {
     if (typeof option === 'object' && 'label' in option) {
@@ -19,18 +20,38 @@ const ICON_SIZES = {
     large: '16px'
 }
 
-export const getLabelOfSelectedOption = (
-    valueToSearch: string,
-    options: DlSelectOptionType[]
+const isValueSelected = (
+    option: DlSelectOptionType,
+    selected: string[] | string
 ) => {
-    if (options.length === 0) return ''
-
-    if (typeof options[0] === 'string') {
-        return options.find((opt) => opt === valueToSearch)
+    let isSelected = false
+    if (!Array.isArray(selected)) {
+        isSelected =
+            selected === (typeof option === 'object' ? option.value : option)
+    } else {
+        selected.forEach((val) => {
+            isSelected =
+                val === (typeof option === 'object' ? option.value : option)
+        })
     }
+    return isSelected
+}
 
-    return (options.find((opt: any) => opt.value === valueToSearch) as any)
-        .label
+export const getLabelOfSelectedOption = (
+    selected: string[] | string,
+    options: DlSelectOptionType[] | string[]
+): string | undefined => {
+    for (const option of options) {
+        if (typeof option === 'string' && typeof selected === 'string') {
+            return option
+        } else if (
+            typeof option === 'object' &&
+            isValueSelected(option, selected)
+        ) {
+            return option.label
+        }
+    }
+    return '1 Option Selected'
 }
 
 export const getIconSize = (size: TInputSizes) => ICON_SIZES[size] ?? '14px'

package/src/demos/DlSelectDemo.vue

@@ -759,7 +759,7 @@ export default defineComponent({
             // @ts-ignore
             return defaultOptions.includes(this.selectedBySearch as any)
         },
-        alotOfOptions(): DlSelectOptionType {
+        alotOfOptions(): DlSelectOptionType[] {
             const arr = [] as any[]
 
             for (let i = 0; i < 1000; ++i) {