@dataloop-ai/components 0.19.165 → 0.19.166

package/package.json

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

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

@@ -1,6 +1,7 @@
 <template>
     <div
         :id="`DlSmartSearchInput${uuid}`"
+        ref="container"
         :style="cssVars"
         class="dl-smart-search-input"
     >
@@ -235,6 +236,7 @@ export default defineComponent({
     ],
     setup(props, { emit }) {
         //#region refs
+        const container = ref<HTMLDivElement>(null)
         const input = ref<HTMLInputElement>(null)
         const label = ref<HTMLLabelElement>(null)
         const searchBar = ref<HTMLDivElement>(null)
@@ -253,7 +255,8 @@ export default defineComponent({
             height,
             width,
             forbiddenKeys,
-            inputDebounce
+            inputDebounce,
+            placeholder
         } = toRefs(props)
         //#endregion
 
@@ -494,23 +497,16 @@ export default defineComponent({
             emit('focus')
         }
 
-        const processBlur = (force: boolean = false) => {
+        const processBlur = () => {
             input.value.scrollLeft = 0
             input.value.scrollTop = 0
             focused.value = false
             expanded.value = true
-            if (!force) {
-                updateJSONQuery()
-                emit('blur')
-            }
+            updateJSONQuery()
+            emit('blur')
         }
 
-        const blur = (
-            e: Event | null = null,
-            options: { force?: boolean } = {}
-        ) => {
-            const { force } = options
-
+        const blur = (e: Event) => {
             if (showDatePicker.value) {
                 return
             }
@@ -521,11 +517,11 @@ export default defineComponent({
                     return
                 }
 
-                if (!focused.value && !force) {
+                if (!focused.value) {
                     return
                 }
 
-                processBlur(force)
+                processBlur()
             } else {
                 focus()
                 cancelBlur.value = cancelBlur.value - 1
@@ -848,10 +844,10 @@ export default defineComponent({
             }
         })
 
-        const inputPlaceholder = computed(() => {
+        const inputPlaceholder = computed<string>(() => {
             return focused.value || searchQuery.value.length
                 ? ''
-                : props.placeholder
+                : placeholder.value
         })
 
         const isValid = computed(() => {
@@ -878,7 +874,11 @@ export default defineComponent({
             })
         })
 
-        watch(focused, (value) => {
+        watch(focused, (value, old) => {
+            if (old === value) {
+                return
+            }
+
             if (!value) {
                 input.value.parentElement.style.width = '1px'
             } else {
@@ -887,7 +887,11 @@ export default defineComponent({
             }
         })
 
-        watch(showDatePicker, (value) => {
+        watch(showDatePicker, (value, old) => {
+            if (old === value) {
+                return
+            }
+
             if (!value) {
                 datePickerSelection.value = null
 
@@ -931,7 +935,6 @@ export default defineComponent({
             }
             window.addEventListener('mousemove', watchMouseMove)
             window.addEventListener('keyup', watchKeyUp)
-            blur(null, { force: true })
         })
         onBeforeUnmount(() => {
             window.removeEventListener('mousemove', watchMouseMove)
@@ -941,6 +944,7 @@ export default defineComponent({
         return {
             uuid: v4(),
             suggestionsDropdown,
+            container,
             input,
             label,
             searchBar,

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

@@ -4,12 +4,12 @@
             :target="defaultTarget"
             :offset="offset"
             :disabled="disabled"
-            fit-container
             :model-value="modelValue"
             :arrow-nav-items="suggestions"
             :trigger-percentage="triggerPercentage"
             :auto-close="false"
             :toggle-key="null"
+            max-width="250px"
             @update:model-value="emitModelValue($event)"
             @show="onShow"
             @hide="onHide"
@@ -25,22 +25,30 @@
                     :highlighted="suggestionIndex === highlightedIndex"
                     @click="handleOption(item)"
                 >
-                    {{ removeQuotes(item) }}
+                    <dl-ellipsis :text="removeQuotes(item)" />
                 </dl-list-item>
             </dl-list>
         </dl-menu>
     </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi'
-import { DlMenu, DlList } from '../../../../essential'
+import {
+    computed,
+    defineComponent,
+    PropType,
+    ref,
+    toRefs,
+    watch
+} from 'vue-demi'
+import { DlMenu, DlList, DlEllipsis } from '../../../../essential'
 import { DlListItem } from '../../../../basic'
 
 export default defineComponent({
     components: {
         DlMenu,
         DlList,
-        DlListItem
+        DlListItem,
+        DlEllipsis
     },
     model: {
         prop: 'modelValue',
@@ -71,6 +79,10 @@ export default defineComponent({
             type: Array as PropType<number[]>,
             default: () => [0, 0]
         },
+        maxWidth: {
+            type: String,
+            default: null
+        },
         /**
          * the % of the parent element that triggers the tooltips visibility
          */
@@ -81,6 +93,8 @@ export default defineComponent({
     },
     emits: ['set-input-value', 'update:model-value', 'escapekey', 'enterkey'],
     setup(props, { emit }) {
+        const { suggestions } = toRefs(props)
+
         const isMenuOpen = ref(false)
         const highlightedIndex = ref(-1)
         const onShow = (value: any) => {
@@ -123,6 +137,10 @@ export default defineComponent({
             return match ? match[1] : str
         }
 
+        watch(suggestions, () => {
+            highlightedIndex.value = -1
+        })
+
         return {
             defaultTarget,
             setHighlightedIndex,

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -1,16 +1,8 @@
 <template>
     <div style="width: 900px">
         <div style="margin: 40px 0">
-            <dl-checkbox
-                v-model="switchState"
-                dense
-                label="Disabled"
-            />
-            <dl-checkbox
-                v-model="strictState"
-                dense
-                label="Strict"
-            />
+            <dl-checkbox v-model="switchState" dense label="Disabled" />
+            <dl-checkbox v-model="strictState" dense label="Strict" />
         </div>
         <dl-input
             v-model="textQuery"
@@ -18,16 +10,13 @@
             placeholder="Select option"
             size="m"
         />
-        <div
-            style="width: 100px"
-            class="props"
-        />
+        <div style="width: 100px" class="props" />
         <div>
-            Template searches<br>
+            Template searches<br />
 
-            dir IN 'test', 'test2'<br>
-            type = 'dir'<br>
-            { "metadata.system.width": 5 }<br>
+            dir IN 'test', 'test2'<br />
+            type = 'dir'<br />
+            { "metadata.system.width": 5 }<br />
         </div>
         <dl-smart-search
             v-model="queryObject"
@@ -45,10 +34,10 @@
         />
         {{ queryObject }}
 
-        <br>
-        <br>
-        <br>
-        <br>
+        <br />
+        <br />
+        <br />
+        <br />
         Only the search
 
         <dl-smart-search-input
@@ -77,8 +66,8 @@
         {{ queryObject }}
         {{ queryObject2 }}
 
-        <br>
-        <br>
+        <br />
+        <br />
         With placeholder and [OR, true] suggestions omitted
         <dl-smart-search-input
             v-model="queryObject"
@@ -114,6 +103,11 @@ export default defineComponent({
     },
     data() {
         const schema: any = {
+            'very very very very very very long key': 'string',
+            'very very very very very very long key  very very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long key':
+                'string',
+            'very very very very very very long key  very very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long keyvery very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long keyvery very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long keyvery very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long keyvery very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long keyvery very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long key':
+                'string',
             id: ['string', 'number'],
             filename: 'string',
             name: 'string',