@dataloop-ai/components 0.19.167 → 0.19.168

package/package.json

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

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

@@ -59,7 +59,7 @@
             ref="suggestionsDropdown"
             v-model="showSuggestions"
             :parent-id="`${uuid}`"
-            :trigger-percentage="0.5"
+            :trigger-percentage="0.1"
             :disabled="disabled"
             :suggestions="suggestions"
             :offset="menuOffset"
@@ -120,7 +120,7 @@ import {
     setSelectionOffset
 } from '../../../../../utils'
 import { ColorSchema, SearchStatus, SyntaxColorSchema } from '../types'
-import { debounce, isEqual } from 'lodash'
+import { cloneDeep, debounce, isEqual } from 'lodash'
 import { DlTooltip } from '../../../../shared'
 import SuggestionsDropdown from './SuggestionsDropdown.vue'
 import { DateInterval } from '../../../DlDateTime/types'
@@ -493,6 +493,12 @@ export default defineComponent({
             focused.value = true
             if (suggestions.value.length) {
                 showSuggestions.value = true
+
+                nextTick(() => {
+                    setMenuOffset(
+                        isEligibleToChange(input.value, expanded.value)
+                    )
+                })
             }
             emit('focus')
         }
@@ -506,7 +512,7 @@ export default defineComponent({
             emit('blur')
         }
 
-        const blur = (e: Event) => {
+        const blur = () => {
             if (showDatePicker.value) {
                 return
             }

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

@@ -1,6 +1,7 @@
 <template>
     <div v-if="suggestions.length > 0" class="dl-suggestions-dropdown">
         <dl-menu
+            ref="menu"
             :target="defaultTarget"
             :offset="offset"
             :disabled="disabled"
@@ -10,6 +11,7 @@
             :auto-close="false"
             :toggle-key="null"
             max-width="250px"
+            :ignore-events="['click']"
             @update:model-value="emitModelValue($event)"
             @show="onShow"
             @hide="onHide"
@@ -93,15 +95,16 @@ export default defineComponent({
     },
     emits: ['set-input-value', 'update:model-value', 'escapekey', 'enterkey'],
     setup(props, { emit }) {
+        const menu = ref(null)
         const { suggestions } = toRefs(props)
 
         const isMenuOpen = ref(false)
         const highlightedIndex = ref(-1)
-        const onShow = (value: any) => {
-            isMenuOpen.value = !!value
+        const onShow = () => {
+            isMenuOpen.value = true
         }
-        const onHide = (value: any) => {
-            isMenuOpen.value = !value
+        const onHide = () => {
+            isMenuOpen.value = false
         }
 
         const setHighlightedIndex = (value: any) => {
@@ -137,11 +140,16 @@ export default defineComponent({
             return match ? match[1] : str
         }
 
+        const updatePosition = () => {
+            menu.value?.updatePosition()
+        }
+
         watch(suggestions, () => {
             highlightedIndex.value = -1
         })
 
         return {
+            menu,
             defaultTarget,
             setHighlightedIndex,
             handleSelectedItem,
@@ -151,7 +159,8 @@ export default defineComponent({
             onHide,
             emitModelValue,
             handleOption,
-            onEscapeKey
+            onEscapeKey,
+            updatePosition
         }
     }
 })

package/src/components/essential/DlMenu/DlMenu.vue

@@ -168,6 +168,10 @@ export default defineComponent({
         toggleKey: {
             type: String,
             default: 'Enter'
+        },
+        ignoreEvents: {
+            type: [String, Array] as PropType<string | string[]>,
+            default: null
         }
     },
 
@@ -191,7 +195,7 @@ export default defineComponent({
 
         const innerRef: Ref<HTMLElement | null> = ref(null)
         const showing = ref(false)
-        const { toggleKey, arrowNavItems } = toRefs(props)
+        const { toggleKey, arrowNavItems, ignoreEvents } = toRefs(props)
 
         const { registerTick, removeTick } = useTick()
         const { registerTimeout, removeTimeout } = useTimeout()
@@ -202,7 +206,10 @@ export default defineComponent({
             unconfigureScrollTarget
         } = useScrollTarget(props, configureScrollTarget)
 
-        const { anchorEl, canShow } = useAnchor({ toggleKey: toggleKey.value })
+        const { anchorEl, canShow } = useAnchor({
+            toggleKey: toggleKey.value,
+            ignoreEvents: ignoreEvents.value
+        })
 
         const screen = useWindowSize()
 

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -47,6 +47,7 @@
             :color-schema="colorSchema"
             :strict="strictState"
             :disabled="switchState"
+            placeholder="THIS IS A PLACEHOOOOOOOOLDER"
             @search="onSearchEmitted"
         />
 

package/src/hooks/use-anchor.ts

@@ -51,11 +51,12 @@ export default function useAnchor(
     options: {
         configureAnchorEl?: Function
         toggleKey?: string | number
+        ignoreEvents?: string | string[]
     } = {}
 ) {
     const { props, proxy, emit } = getCurrentInstance()!
     const { toggleKey } = options
-    let { configureAnchorEl } = options
+    let { configureAnchorEl, ignoreEvents } = options
 
     const anchorEl: Ref<HTMLElement | Element | null> = ref(null)
 
@@ -111,22 +112,45 @@ export default function useAnchor(
                 return
             }
 
-            let evts
+            let evts: any[]
+
+            const filteredEvents = (events: string[]) => {
+                if (!ignoreEvents) {
+                    return events
+                }
+
+                ignoreEvents = Array.isArray(ignoreEvents)
+                    ? ignoreEvents
+                    : [ignoreEvents]
+
+                return events.filter((evt) => ignoreEvents.includes(evt))
+            }
 
             if (context === true) {
                 evts = [
-                    [anchorEl.value, 'mousedown', 'hide', 'passive'],
                     [
                         anchorEl.value,
-                        'contextmenu',
-                        'contextClick',
-                        'notPassive'
+                        ...filteredEvents(['mousedown', 'hide', 'passive'])
+                    ],
+                    [
+                        anchorEl.value,
+                        ...filteredEvents([
+                            'contextmenu',
+                            'contextClick',
+                            'notPassive'
+                        ])
                     ]
                 ]
             } else {
                 evts = [
-                    [anchorEl.value, 'click', 'toggle', 'passive'],
-                    [anchorEl.value, 'keyup', 'toggleKey', 'passive']
+                    [
+                        anchorEl.value,
+                        ...filteredEvents(['click', 'toggle', 'passive'])
+                    ],
+                    [
+                        anchorEl.value,
+                        ...filteredEvents(['keyup', 'toggleKey', 'passive'])
+                    ]
                 ]
             }