@dataloop-ai/components 0.18.114 → 0.18.116

package/package.json

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

package/src/components/compound/DlDateTime/DlDatePicker/DlDatePicker.vue

@@ -200,6 +200,7 @@ export default defineComponent({
         updateDateInterval(value: DateInterval) {
             if (this.disabled) return
             this.dateInterval = value
+            this.updateModelValue(value)
         },
 
         handleDateNext() {

package/src/components/compound/DlDateTime/DlDatePicker/components/DlMonthCalendar.vue

@@ -100,19 +100,26 @@ export default defineComponent({
     methods: {
         handleClick(value: number) {
             const d = new CalendarDate()
-            d.year(parseInt(this.title)).month(value).startOf('month')
+            d.year(parseInt(this.title)).month(value)
 
-            if (!isInRange(this.availableRange, d)) return
+            const from = new CalendarDate(d)
+            const to = new CalendarDate(d)
+
+            from.startOf('month')
+            from.startOf('day')
+            to.endOf('month')
+            to.endOf('day')
+
+            if (!isInRange(this.availableRange, new CalendarDate(from))) return
+            if (!isInRange(this.availableRange, new CalendarDate(to))) return
 
-            const date = d.toDate()
             const newDate = {
-                from: date,
-                to: date
+                from: from.toDate(),
+                to: to.toDate()
             }
             this.$emit('update:model-value', newDate)
             this.$emit('change', newDate)
         },
-
         handleMouseenter(value: number) {
             if (this.modelValue === null) return
 

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

@@ -20,6 +20,8 @@
                 :placeholder="placeholder"
                 @focus="isFocused = true"
                 @blur="isFocused = false"
+                @search="emitSearchQuery"
+                @error="$emit('error', $event)"
             />
         </div>
         <div class="dl-smart-search__buttons">
@@ -35,7 +37,7 @@
                                 height: '28px'
                             }"
                             :disabled="disabled"
-                            @click="$emit('search-query', queryObject)"
+                            @click="$emit('search', queryObject)"
                         />
                     </div>
                     <div
@@ -63,10 +65,9 @@
         <dl-smart-search-json-editor-dialog
             v-model="showJSONEditor"
             :json="stringifiedJSON"
-            @search="emitSearchQuery"
+            @search="handleJSONSearch"
             @change="handleJSONChange"
         />
-        <!-- todo: Add support for saved queries-->
     </div>
 </template>
 <script lang="ts">
@@ -137,7 +138,13 @@ export default defineComponent({
             default: ''
         }
     },
-    emits: ['save-query', 'remove-query', 'search-query', 'update:model-value'],
+    emits: [
+        'save-filter',
+        'remove-filter',
+        'update:model-value',
+        'search',
+        'error'
+    ],
     setup(props, { emit }) {
         //#region props
         const { modelValue, filters, width } = toRefs(props)
@@ -226,11 +233,15 @@ export default defineComponent({
             }
         }
 
-        const emitSearchQuery = (query: string) => {
+        const emitSearchQuery = (value?: { [key: string]: any }) => {
+            emit('search', value ?? queryObject.value)
+        }
+
+        const handleJSONSearch = (query: string) => {
             const json = toObject(query)
             if (!json) return
             queryObject.value = json
-            emit('search-query', json)
+            emitSearchQuery(json)
         }
 
         const handleJSONChange = (val: string) => {
@@ -264,6 +275,7 @@ export default defineComponent({
             emitSearchQuery,
             showJSONEditor,
             stringifiedJSON,
+            handleJSONSearch,
             handleJSONChange
         }
     }

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

@@ -4,7 +4,10 @@
         :style="cssVars"
         class="dl-smart-search-input"
     >
-        <div class="dl-smart-search-input__search-bar-wrapper">
+        <div
+            class="dl-smart-search-input__search-bar-wrapper"
+            @click="focus()"
+        >
             <div
                 ref="searchBar"
                 :class="searchBarClasses"
@@ -191,7 +194,7 @@ export default defineComponent({
             default: false
         }
     },
-    emits: ['update:model-value', 'focus', 'blur', 'input'],
+    emits: ['update:model-value', 'focus', 'blur', 'input', 'search', 'error'],
     setup(props, { emit }) {
         //#region refs
         const input = ref<HTMLInputElement>(null)
@@ -355,11 +358,20 @@ export default defineComponent({
         const debouncedSetInputValue = debounce(setInputValue, 300)
 
         const updateJSONQuery = () => {
-            const bracketless = removeBrackets(searchQuery.value)
-            const cleanedAliases = revertAliases(bracketless, aliases.value)
-            const json = toJSON(cleanedAliases)
-            if (!isEqual(json, modelValue.value)) {
-                emit('update:model-value', json)
+            try {
+                const bracketless = removeBrackets(searchQuery.value)
+                const cleanedAliases = revertAliases(bracketless, aliases.value)
+                const json = toJSON(cleanedAliases)
+                if (!isEqual(json, modelValue.value)) {
+                    emit('update:model-value', json)
+                }
+                return json
+            } catch (e) {
+                emit('error', {
+                    error: e,
+                    message: 'Could not translate given JSON to a valid Scheme'
+                })
+                return modelValue.value
             }
         }
 
@@ -385,6 +397,10 @@ export default defineComponent({
                 return
             }
 
+            if (focused.value) {
+                return
+            }
+
             input.value.scrollTo(0, input.value.scrollHeight)
             input.value.scrollLeft = input.value.scrollWidth
 
@@ -394,7 +410,12 @@ export default defineComponent({
             emit('focus')
         }
 
-        const blur = () => {
+        const blur = (
+            e: Event | null = null,
+            options: { force?: boolean } = {}
+        ) => {
+            const { force } = options
+
             if (showDatePicker.value) {
                 return
             }
@@ -405,6 +426,10 @@ export default defineComponent({
                     return
                 }
 
+                if (!focused.value && !force) {
+                    return
+                }
+
                 input.value.scrollLeft = 0
                 input.value.scrollTop = 0
                 focused.value = false
@@ -430,6 +455,10 @@ export default defineComponent({
         const onKeyPress = (e: KeyboardEvent) => {
             if (e.key === 'Enter') {
                 e.preventDefault()
+                e.stopPropagation()
+                emit('search', updateJSONQuery())
+                showSuggestions.value = false
+                return
             }
 
             if (!focused.value) {
@@ -438,6 +467,10 @@ export default defineComponent({
         }
 
         const onInput = (e: Event) => {
+            if ((e as KeyboardEvent).key === 'Enter') {
+                return
+            }
+
             const text = (e.target as HTMLElement).textContent
             debouncedSetInputValue(text)
         }
@@ -480,14 +513,22 @@ export default defineComponent({
         }
 
         const fromJSON = (value: { [key: string]: any }) => {
-            const replacedDate = replaceJSDatesWithStringifiedDates(
-                value,
-                dateKeys.value
-            )
-
-            const stringQuery = stringifySmartQuery(replacedDate)
-            const aliased = setAliases(stringQuery, aliases.value)
-            return aliased
+            try {
+                const replacedDate = replaceJSDatesWithStringifiedDates(
+                    value,
+                    dateKeys.value
+                )
+
+                const stringQuery = stringifySmartQuery(replacedDate)
+                const aliased = setAliases(stringQuery, aliases.value)
+                return aliased
+            } catch (e) {
+                emit('error', {
+                    error: e,
+                    message: 'Could not translate given JSON to a valid Scheme'
+                })
+                return ''
+            }
         }
         //#endregion
 
@@ -682,7 +723,7 @@ export default defineComponent({
                     isEllipsisActive(input.value) || hasEllipsis.value
             }
             window.addEventListener('mousemove', () => (isTyping.value = false))
-            blur()
+            blur(null, { force: true })
         })
         onBeforeUnmount(() => {
             window.removeEventListener(

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

@@ -12,6 +12,7 @@
             :arrow-nav-items="suggestions"
             :trigger-percentage="triggerPercentage"
             :auto-close="false"
+            :toggle-key="null"
             @update:model-value="emitModelValue($event)"
             @show="onShow"
             @hide="onHide"

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

@@ -33,7 +33,8 @@ import {
     computed,
     PropType,
     Ref,
-    isVue2
+    isVue2,
+    toRefs
 } from 'vue-demi'
 
 import useWindowSize from '../../../hooks/use-window-size'
@@ -159,6 +160,10 @@ export default defineComponent({
         triggerPercentage: {
             type: Number,
             default: 1
+        },
+        toggleKey: {
+            type: String,
+            default: 'Enter'
         }
     },
 
@@ -183,6 +188,7 @@ export default defineComponent({
 
         const innerRef: Ref<HTMLElement | null> = ref(null)
         const showing = ref(false)
+        const { toggleKey } = toRefs(props)
 
         const { registerTick, removeTick } = useTick()
         const { registerTimeout, removeTimeout } = useTimeout()
@@ -193,7 +199,7 @@ export default defineComponent({
             unconfigureScrollTarget
         } = useScrollTarget(props, configureScrollTarget)
 
-        const { anchorEl, canShow } = useAnchor({})
+        const { anchorEl, canShow } = useAnchor({ toggleKey: toggleKey.value })
 
         const screen = useWindowSize()
 

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -58,8 +58,14 @@
             :color-schema="colorSchema"
             :strict="strictState"
             :disabled="switchState"
+            @search="onSearchEmitted"
         />
 
+        <div>
+            <div>EMITED SEARCH:</div>
+            <div>count {{ searchEmitted }} last: {{ lastSearch }}</div>
+        </div>
+
         <dl-smart-search-input
             v-model="queryObject2"
             :aliases="aliases"
@@ -224,7 +230,9 @@ export default defineComponent({
             queryObject: {},
             queryObject2: {},
             textQuery: '',
-            filters
+            filters,
+            lastSearch: null,
+            searchEmitted: 0
         }
     },
     watch: {
@@ -262,6 +270,10 @@ export default defineComponent({
             this.filters[type] = this.filters[type].filter(
                 (q: Query) => q.name !== query.name
             )
+        },
+        onSearchEmitted(query: Query) {
+            this.searchEmitted++
+            this.lastSearch = query
         }
     }
 })

package/src/hooks/use-anchor.ts

@@ -47,12 +47,15 @@ export function CheckAnchorElVisibility(
     })
 }
 
-export default function useAnchor({
-    configureAnchorEl
-}: {
-    configureAnchorEl?: Function
-}) {
+export default function useAnchor(
+    options: {
+        configureAnchorEl?: Function
+        toggleKey?: string | number
+    } = {}
+) {
     const { props, proxy, emit } = getCurrentInstance()!
+    const { toggleKey } = options
+    let { configureAnchorEl } = options
 
     const anchorEl: Ref<HTMLElement | Element | null> = ref(null)
 
@@ -84,7 +87,7 @@ export default function useAnchor({
             },
 
             toggleKey(evt: AnchorEvent) {
-                if (isKeyCode(evt, 13) && anchorEvents.toggle) {
+                if (isKeyCode(evt, toggleKey) && anchorEvents.toggle) {
                     anchorEvents.toggle(evt)
                 }
             },

package/src/utils/key-composition.ts

@@ -8,8 +8,16 @@ export function shouldIgnoreKey(evt: KeyboardEvent) {
     )
 }
 
-export function isKeyCode(evt: KeyboardEvent, keyCodes: number) {
-    return shouldIgnoreKey(evt) ? false : [keyCodes].includes(evt.keyCode)
+export function isKeyCode(evt: KeyboardEvent, key: number | string) {
+    if (!key) {
+        return false
+    }
+
+    return shouldIgnoreKey(evt)
+        ? false
+        : [key].includes(evt.key) ||
+              [key].includes(evt.keyCode) ||
+              [key].includes(evt.code)
 }
 
 export function onKeyDownComposition(evt: KeyboardEvent) {