@dataloop-ai/components 0.17.122 → 0.17.124

package/package.json

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

package/src/components/basic/DlButton/utils.ts

@@ -1,7 +1,7 @@
 import { getColor } from '../../../utils'
 import { getLighterGradient } from '../../../utils/getLighterGradient'
 
-export type ButtonSizes = 's' | 'm' | 'l' | 'xl' | string
+export type ButtonSizes = 's' | 'm' | 'l' | ('xl' & string)
 
 const paddings = {
     s: '7px 16px',

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

@@ -29,42 +29,44 @@
         </div>
         <div class="dl-smart-search__buttons">
             <slot name="buttons">
-                <div
-                    style="height: 28px"
-                    class="dl-smart-search__search-btn-wrapper"
-                >
-                    <dl-button
-                        icon="icon-dl-search"
-                        :styles="{
-                            height: '28px'
-                        }"
-                        :disabled="disabled"
-                        @click="emitSearchQuery"
-                    />
-                </div>
+                <div style="display: flex; align-items: center">
+                    <div
+                        style="height: 28px"
+                        class="dl-smart-search__search-btn-wrapper"
+                    >
+                        <dl-button
+                            icon="icon-dl-search"
+                            :styles="{
+                                height: '28px'
+                            }"
+                            :disabled="disabled"
+                            @click="emitSearchQuery"
+                        />
+                    </div>
 
-                <slot name="extra-actions" />
+                    <slot name="extra-actions" />
 
-                <dl-button
-                    class="dl-smart-search__buttons--filters"
-                    shaded
-                    outlined
-                    size="s"
-                >
-                    Saved Filters
-                    <dl-menu
-                        v-model="filtersModel"
-                        :offset="[0, 5]"
-                        anchor="bottom middle"
-                        self="top middle"
+                    <dl-button
+                        class="dl-smart-search__buttons--filters"
+                        shaded
+                        outlined
+                        size="s"
                     >
-                        <dl-smart-search-filters
-                            :filters="filters"
-                            @filters-select="handleFiltersSelect"
-                            @filters-delete="handleFiltersDelete"
-                        />
-                    </dl-menu>
-                </dl-button>
+                        Saved Filters
+                        <dl-menu
+                            v-model="filtersModel"
+                            :offset="[0, 5]"
+                            anchor="bottom middle"
+                            self="top middle"
+                        >
+                            <dl-smart-search-filters
+                                :filters="filters"
+                                @filters-select="handleFiltersSelect"
+                                @filters-delete="handleFiltersDelete"
+                            />
+                        </dl-menu>
+                    </dl-button>
+                </div>
             </slot>
         </div>
         <dl-dialog-box
@@ -235,7 +237,7 @@ import {
     SyntaxColorSchema
 } from './types'
 import {
-    replaceAliases,
+    revertAliases,
     setAliases,
     replaceStringifiedDatesWithJSDates,
     createColorSchema,
@@ -354,9 +356,10 @@ export default defineComponent({
         )
 
         const handleInputModel = (value: string) => {
-            inputModel.value = value
+            const aliased = setAliases(value, props.aliases)
+            inputModel.value = aliased
             const bracketless = removeBrackets(value)
-            const cleanedAliases = replaceAliases(bracketless, props.aliases)
+            const cleanedAliases = revertAliases(bracketless, props.aliases)
             const json = toJSON(cleanedAliases)
             if (!isEqual(json, props.modelValue)) {
                 emit('update:modelValue', json)
@@ -364,10 +367,10 @@ export default defineComponent({
             const stringified = JSON.stringify(json)
             activeQuery.value.query = stringified
             nextTick(() => {
-                findSuggestions(value)
+                findSuggestions(aliased)
             })
             isQuerying.value = false
-            oldInputQuery.value = value
+            oldInputQuery.value = aliased
         }
 
         const debouncedInputModel = debounce(handleInputModel, 300)
@@ -548,7 +551,7 @@ export default defineComponent({
             const json = JSON.stringify(
                 this.toJSON(removeBrackets(this.inputModel))
             )
-            const newQuery = replaceAliases(json, this.aliases)
+            const newQuery = revertAliases(json, this.aliases)
             if (newQuery && newQuery !== '{}') {
                 this.jsonEditorQuery = newQuery
             }

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

@@ -268,11 +268,25 @@ export default defineComponent({
                         .join(' ')
                         .replace('  ', ' ')
                 } else {
-                    query.splice(-1)
+                    if (query[query.length - 1].endsWith('.')) {
+                        query[query.length - 1] = query[
+                            query.length - 1
+                        ].replace('.', '')
+                    } else {
+                        query.splice(-1)
+                    }
                     stringValue = [...query, value, ''].join(' ')
                 }
             } else {
-                stringValue = [value, ''].join(' ')
+                if (query[query.length - 1].endsWith('.')) {
+                    query[query.length - 1] = query[query.length - 1].replace(
+                        '.',
+                        ''
+                    )
+                    stringValue = [...query, value, ''].join(' ')
+                } else {
+                    stringValue = [value, ''].join(' ')
+                }
             }
 
             // to handle date suggestion modal to open automatically.
@@ -283,6 +297,7 @@ export default defineComponent({
             const specialSuggestions = props.suggestions.filter((suggestion) =>
                 suggestion.startsWith('.')
             )
+
             for (const suggestion of specialSuggestions) {
                 if (stringValue.includes(suggestion)) {
                     stringValue = stringValue.replace(
@@ -453,14 +468,15 @@ export default defineComponent({
         },
         suggestions(val) {
             if (this.isDatePickerVisible) return
+            nextTick(() => {
+                if (!val.length) {
+                    this.suggestionModal = false
+                }
 
-            if (!val.length) {
-                this.suggestionModal = false
-            }
-
-            if (!this.suggestionModal && val.length > 0 && this.focused) {
-                this.suggestionModal = true
-            }
+                if (!this.suggestionModal && val.length > 0 && this.focused) {
+                    this.suggestionModal = true
+                }
+            })
         },
         expanded(value) {
             this.$nextTick(() => {

package/src/components/compound/DlSearches/DlSmartSearch/utils/index.ts

@@ -109,26 +109,29 @@ export function replaceJSDatesWithStringifiedDates(
         return json
     }
 
-    const flat: { [key: string]: any } = flatten(json)
-    for (const key of Object.keys(flat)) {
-        const value = flat[key]
+    for (const key of Object.keys(json)) {
+        if (typeof json[key] === 'object') {
+            json[key] = replaceJSDatesWithStringifiedDates(json[key], dateKeys)
+            continue
+        }
+
+        const value = json[key]
         const keyToCheck = key.split('.').pop()
 
         if (dateKeys.includes(keyToCheck)) {
-            flat[key] = formatToStringDate(value)
+            json[key] = formatToStringDate(value)
         }
     }
 
-    return unflatten(flat) as {
-        [key: string]: any
-    }
+    return json
 }
 
-export function replaceAliases(json: string, aliases: Alias[]) {
+export function revertAliases(json: string, aliases: Alias[]) {
     let newJson = json
-    aliases.forEach((alias) => {
-        newJson = newJson.replaceAll(alias.alias, alias.key)
-    })
+    for (const alias of aliases) {
+        const regex = new RegExp(`${alias.alias}`, 'gi')
+        newJson = newJson.replace(regex, alias.key)
+    }
     return newJson
 }
 

package/src/components/compound/DlSlider/components/DlSliderInput.vue

@@ -1,19 +1,20 @@
 <template>
     <input
         ref="sliderInput"
-        :value="sliderValue"
+        :value="modelRef"
         type="number"
         :min="min"
         :max="max"
         :readonly="readonly"
         :disabled="disabled"
-        @input="sliderValue = $event"
+        @input="handleChange"
         @change="handleChange"
     >
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { debounce } from 'lodash'
+import { defineComponent, toRef } from 'vue-demi'
 import { getInputValue } from '../utils'
 
 export default defineComponent({
@@ -45,34 +46,24 @@ export default defineComponent({
         }
     },
     emits: ['update:model-value', 'change'],
-    computed: {
-        sliderValue: {
-            get(): number | undefined {
-                return this.modelValue
-            },
-            set(evt: any): void {
-                const val = evt.target.value
+    setup(props, { emit }) {
+        const modelRef = toRef(props, 'modelValue')
 
-                if (val === '') return
-
-                const { value } = getInputValue(val, this.min, this.max)
-
-                ;(this.$refs.sliderInput as HTMLInputElement).value = value
-
-                this.$emit('update:model-value', Number(value))
-            }
-        }
-    },
-    methods: {
-        handleChange(evt: any) {
+        const handleChange = (evt: any) => {
             const val = evt.target.value
             if (val === '') return
 
-            const { value } = getInputValue(val, this.min, this.max)
+            const { value } = getInputValue(val, props.min, props.max)
+
+            emit('change', Number(value))
+            emit('update:model-value', Number(value))
+        }
 
-            ;(this.$refs.sliderInput as HTMLInputElement).value = value
+        const debouncedHandleChange = debounce(handleChange, 300)
 
-            this.$emit('change', Number(value))
+        return {
+            modelRef,
+            handleChange: debouncedHandleChange
         }
     },
     template: 'dl-slider-input'

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

@@ -1,6 +1,6 @@
 export const getInputValue = (value: string, min: number, max: number) => {
-    if (parseInt(value) > max || parseInt(value) < min) {
-        return { value: (parseInt(value) > max ? max : min).toString() }
+    if (parseFloat(value) > max || parseFloat(value) < min) {
+        return { value: (parseFloat(value) > max ? max : min).toString() }
     }
 
     return { value }

package/src/components/shared/DlItemSection/DlItemSection.vue

@@ -53,6 +53,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .dl-item__section {
+    display: flex;
     padding-left: 0;
     padding-right: 0;
     font-size: var(--dl-font-size-body);

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -22,6 +22,7 @@
             style="width: 100px"
             class="props"
         />
+        { "metadata.system.width": 5 }
         <dl-smart-search
             v-model="queryObject"
             :aliases="aliases"
@@ -44,7 +45,7 @@
         <br>
         Test second if they work on same page..
         <dl-smart-search
-            v-model="queryObject"
+            v-model="queryObject2"
             :aliases="[]"
             :schema="schema2"
             :color-schema="colorSchema"
@@ -180,6 +181,7 @@ export default defineComponent({
             strictState: false,
             isLoading: false,
             queryObject: {},
+            queryObject2: {},
             textQuery: '',
             filters
         }