@dataloop-ai/components 0.16.45 → 0.16.47

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

@@ -7,7 +7,7 @@
             <div :class="searchBarClasses">
                 <div class="dl-smart-search-input__status-icon-wrapper">
                     <dl-icon
-                        v-if="withSearchIcon || status"
+                        v-if="withSearchIcon || (!focused && status)"
                         :icon="statusIcon"
                         :color="statusIconColor"
                         size="18px"
@@ -65,7 +65,7 @@
                             icon="icon-dl-save"
                             size="16px"
                             flat
-                            :disabled="disabled"
+                            :disabled="saveStatus"
                             @click="save"
                         >
                             <dl-tooltip> Save Query </dl-tooltip>
@@ -74,10 +74,10 @@
                             icon="icon-dl-loop"
                             size="16px"
                             flat
+                            transform="none"
                             text-color="dl-color-darker"
-                            :disabled="disabled"
-                            uppercase
-                            label="dql"
+                            :disabled="saveStatus"
+                            label="switch to DQL"
                             @click="edit"
                         >
                             <dl-tooltip> Switch to DQL </dl-tooltip>
@@ -86,7 +86,7 @@
                 </div>
             </div>
             <label
-                v-show="status.message"
+                v-if="status.message !== 'info'"
                 ref="label"
                 class="dl-smart-search-input__search-label"
                 for="search-input"
@@ -117,7 +117,7 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, PropType } from 'vue-demi'
+import { defineComponent, ref, PropType, computed } from 'vue-demi'
 import { DlButton } from '../../../../basic'
 import { DlDatePicker } from '../../../DlDateTime'
 import { DlMenu, DlIcon } from '../../../../essential'
@@ -131,10 +131,10 @@ import { DateInterval } from '../../../DlDateTime/types'
 import {
     isEndingWithDateIntervalPattern,
     replaceDateInterval,
-    isEligibleToChange,
     setCaret,
     updateEditor
 } from '../utils'
+import { isEligibleToChange } from '../utils/utils'
 
 export default defineComponent({
     components: {
@@ -218,6 +218,10 @@ export default defineComponent({
         const styledTexarea = ref(null)
         const styledInput = ref(null)
 
+        const focused = ref(false)
+        const isOverflow = ref(false)
+        const isTyping = ref(false)
+
         const { hasEllipsis } = useSizeObserver(input)
 
         const suggestionModal = ref(false)
@@ -253,35 +257,16 @@ export default defineComponent({
             emit('update:modelValue', stringValue)
         }
 
-        return {
-            input,
-            label,
-            hasEllipsis,
-            suggestionModal,
-            setInputValue,
-            menuOffset,
-            cancelBlur,
-            expanded,
-            styledTexarea,
-            styledInput,
-            datePickerSelection,
-            isDatePickerVisible
-        }
-    },
-    data(): {
-        focused: boolean
-        isOverflow: boolean
-        isTyping: boolean
-    } {
-        return {
-            focused: false,
-            isOverflow: false,
-            isTyping: false
-        }
-    },
-    computed: {
-        statusIcon(): string {
-            switch (this.status.type) {
+        const saveStatus = computed(() => {
+            return (
+                props.disabled ||
+                !props.modelValue ||
+                props.status?.type === 'error'
+            )
+        })
+
+        const statusIcon = computed(() => {
+            switch (props.status?.type) {
                 case 'success':
                     return 'icon-dl-approve-filled'
                 case 'error':
@@ -291,9 +276,10 @@ export default defineComponent({
                 default:
                     return ''
             }
-        },
-        statusIconColor(): string {
-            switch (this.status.type) {
+        })
+
+        const statusIconColor = computed(() => {
+            switch (props.status?.type) {
                 case 'success':
                     return 'dl-color-positive'
                 case 'error':
@@ -303,58 +289,89 @@ export default defineComponent({
                 default:
                     return ''
             }
-        },
-        screenIcon(): string {
-            return this.expanded
-                ? 'icon-dl-fit-to-screen'
-                : 'icon-dl-full-screen'
-        },
-        searchBarClasses(): string {
+        })
+
+        const screenIcon = computed(() => {
+            return expanded ? 'icon-dl-fit-to-screen' : 'icon-dl-full-screen'
+        })
+
+        const searchBarClasses = computed(() => {
             let classes = 'dl-smart-search-input__search-bar'
 
-            if (this.status.type === 'error') {
-                classes += ' dl-smart-search-input__search-bar--error'
-            } else if (this.status.type === 'warning') {
-                classes += ' dl-smart-search-input__search-bar--warning'
+            if (focused && props.status?.type === 'info') {
+                classes += ' dl-smart-search-input__search-bar--focused'
             } else {
-                if (this.focused) {
-                    classes += ' dl-smart-search-input__search-bar--focused'
+                if (props.status?.type === 'error') {
+                    classes += ' dl-smart-search-input__search-bar--error'
+                } else if (props.status?.type === 'warning') {
+                    classes += ' dl-smart-search-input__search-bar--warning'
                 }
             }
 
-            if (this.expanded) {
+            if (expanded) {
                 classes += ' dl-smart-search-input__search-bar--expanded'
             }
 
-            if (this.disabled) {
+            if (props.disabled) {
                 classes += ' dl-smart-search-input__search-bar--disabled'
             }
 
             return classes
-        },
-        labelStyles(): Record<string, any> {
+        })
+
+        const labelStyles = computed(() => {
             return {
-                color: this.status.type === 'error' ? 'red' : 'gray'
+                color: props.status?.type === 'error' ? 'red' : 'gray'
             }
-        },
-        messageClasses(): string {
+        })
+
+        const messageClasses = computed(() => {
             let classes = 'dl-smart-search-input__message'
 
-            if (this.status) {
-                classes += ` dl-smart-search-input__message--${this.status}`
+            if (props.status) {
+                classes += ` dl-smart-search-input__message--${props.status}`
             }
 
             return classes
-        },
-        withClearBtn(): boolean {
-            return this.modelValue.length > 0
-        },
-        cssVars(): Record<string, string> {
+        })
+
+        const withClearBtn = computed(() => {
+            return props.modelValue?.length > 0
+        })
+
+        const cssVars = computed(() => {
             return {
                 '--dl-smart-search-bar-wrapper-height':
-                    this.expandedInputHeight,
-                '--dl-smart-search-input-height': this.inputHeight
+                    props.expandedInputHeight,
+                '--dl-smart-search-input-height': props.inputHeight
             }
+        })
+
+        return {
+            input,
+            label,
+            hasEllipsis,
+            suggestionModal,
+            setInputValue,
+            menuOffset,
+            cancelBlur,
+            expanded,
+            styledTexarea,
+            styledInput,
+            datePickerSelection,
+            isDatePickerVisible,
+            focused,
+            isOverflow,
+            isTyping,
+            saveStatus,
+            statusIcon,
+            statusIconColor,
+            screenIcon,
+            searchBarClasses,
+            labelStyles,
+            messageClasses,
+            withClearBtn,
+            cssVars
         }
     },
     watch: {

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

@@ -9,14 +9,20 @@
             :disabled="disabled"
             fit-container
             :model-value="modelValue"
-            @update:modelValue="$emit('update:modelValue', $event)"
+            :arrow-nav-items="suggestions"
+            @update:modelValue="emitModelValue($event)"
+            @show="onShow"
+            @hide="onHide"
+            @highlightedIndex="setHighlightedIndex"
+            @handleSelectedItem="handleSelectedItem"
         >
             <dl-list>
                 <dl-list-item
-                    v-for="item in suggestions"
+                    v-for="(item, suggestionIndex) in suggestions"
                     :key="item"
                     :clickable="true"
-                    @click="$emit('set-input-value', item)"
+                    :is-highlighted="suggestionIndex === highlightedIndex"
+                    @click="handleOption(item)"
                 >
                     {{ item }}
                 </dl-list-item>
@@ -25,7 +31,7 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType } from 'vue-demi'
+import { defineComponent, PropType, ref } from 'vue-demi'
 import { DlMenu, DlList } from '../../../../essential'
 import { DlListItem } from '../../../../basic'
 
@@ -62,6 +68,39 @@ export default defineComponent({
         }
     },
     emits: ['set-input-value', 'update:modelValue'],
+    setup(props, { emit }) {
+        const isMenuOpen = ref(false)
+        const highlightedIndex = ref(-1)
+        const onShow = (value: any) => {
+            isMenuOpen.value = !!value
+        }
+        const onHide = (value: any) => {
+            isMenuOpen.value = !value
+        }
+
+        const setHighlightedIndex = (value: any) => {
+            highlightedIndex.value = value
+        }
+        const handleSelectedItem = (value: any) => {
+            handleOption(value)
+        }
+        const emitModelValue = (event: any) => {
+            emit('update:modelValue', event)
+        }
+        const handleOption = (item: any) => {
+            emit('set-input-value', item)
+        }
+
+        return {
+            setHighlightedIndex,
+            handleSelectedItem,
+            highlightedIndex,
+            onShow,
+            onHide,
+            emitModelValue,
+            handleOption
+        }
+    },
     computed: {
         defaultTarget() {
             return '.dl-smart-search-input__textarea'

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

@@ -1,5 +1,4 @@
-import { operators, Alias } from '../../../../../hooks/use-suggestions'
-import { ColorSchema, SyntaxColorSchema } from '../types'
+import { SyntaxColorSchema } from '../types'
 
 let editor = document.getElementById('editor')
 let styleModel: SyntaxColorSchema
@@ -112,56 +111,3 @@ export function setCaret(target: HTMLElement) {
     sel.addRange(range)
     target.focus()
 }
-
-export const isEligibleToChange = (target: HTMLElement, expanded: boolean) => {
-    let childOffsetRight = 0
-    let childOffsetBottom = 20
-
-    if (target?.lastChild) {
-        const range = document.createRange()
-        range.selectNode(target?.lastChild)
-        childOffsetRight =
-            range.getBoundingClientRect().right -
-            target.getBoundingClientRect().left
-        childOffsetBottom =
-            range.getBoundingClientRect().bottom -
-            target.getBoundingClientRect().top +
-            5
-    }
-
-    if (childOffsetRight <= target.clientWidth) {
-        return [-childOffsetRight, 5]
-    } else {
-        return [-target.clientWidth, 5]
-    }
-}
-
-export function createColorSchema(
-    colorSchema: ColorSchema,
-    aliases: Alias[]
-): SyntaxColorSchema {
-    const thisFields = []
-    for (const key in aliases) {
-        thisFields.push(aliases[key].alias)
-    }
-
-    const thisOperators = []
-    for (const key in operators) {
-        thisOperators.push(operators[key])
-    }
-
-    return {
-        fields: {
-            values: thisFields,
-            color: colorSchema.fields
-        },
-        operators: {
-            values: thisOperators,
-            color: colorSchema.operators
-        },
-        keywords: {
-            values: ['OR', 'AND'],
-            color: colorSchema.keywords
-        }
-    }
-}

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

@@ -1,8 +1,21 @@
 export * from './highlightSyntax'
+export * from './utils'
 
-import { dateIntervalPattern } from '../../../../../hooks/use-suggestions'
 import { DateInterval } from '../../../DlDateTime/types'
 
+const startDatePattern = new RegExp(
+    /\(from\s?\d{2}\/\d{2}\/\d{4}\s?\)|\(from\s?dd\/mm\/yyyy\s?\)/,
+    'gi'
+)
+const endDatePattern = new RegExp(
+    /\(to\s?\d{2}\/\d{2}\/\d{4}\s?\)|\(to\s?dd\/mm\/yyyy\s?\)/,
+    'gi'
+)
+const dateIntervalPattern = new RegExp(
+    /\((from\s?\(\d{2}\/\d{2}\/\d{4}\)\s?to\s?\(\d{2}\/\d{2}\/\d{4}\))\)|\((from\s?\(dd\/mm\/yyyy\)\s?to\s?\(dd\/mm\/yyyy\))\)/,
+    'gi'
+)
+
 export const isEndOfString = (str: string, pattern: RegExp): boolean => {
     const trimmed = str.trim()
     const matches = trimmed.match(pattern)
@@ -13,8 +26,13 @@ export const isEndOfString = (str: string, pattern: RegExp): boolean => {
     return trimmed.lastIndexOf(lastMatch) + lastMatch.length === trimmed.length
 }
 
-export const isEndingWithDateIntervalPattern = (str: string) =>
-    isEndOfString(str, dateIntervalPattern)
+export const isEndingWithDateIntervalPattern = (str: string) => {
+    return (
+        isEndOfString(str, dateIntervalPattern) ||
+        isEndOfString(str, startDatePattern) ||
+        isEndOfString(str, endDatePattern)
+    )
+}
 
 export const replaceDateInterval = (
     str: string,
@@ -22,24 +40,38 @@ export const replaceDateInterval = (
 ) => {
     const dateFrom = new Date(dateInterval.from)
     const dateTo = new Date(dateInterval.to)
+    const values = str.match(/\((.*?)\)/g)
+    let newStr = ''
+    if (!values) return str
 
-    const newStr = `(From ${formatDate(dateFrom)} To ${formatDate(dateTo)})`
-
-    return replaceLastOccurrence(str, newStr)
+    if (values.length > 1) {
+        newStr = `(From (${formatDate(dateFrom)}) To (${formatDate(dateTo)}))`
+        return replaceLastOccurrence(str, newStr, dateIntervalPattern)
+    } else if (values[0].includes('From')) {
+        newStr = `(From ${formatDate(dateFrom)})`
+        return replaceLastOccurrence(str, newStr, startDatePattern)
+    } else if (values[0].includes('To')) {
+        newStr = `(To ${formatDate(dateTo)})`
+        return replaceLastOccurrence(str, newStr, endDatePattern)
+    }
 }
 
 const formatDate = (date: Date): string => {
-    return `(${addZero(date.getDate())}/${addZero(
+    return `${addZero(date.getDate())}/${addZero(
         date.getMonth() + 1
-    )}/${date.getFullYear()})`
+    )}/${date.getFullYear()}`
 }
 
 const addZero = (value: number): string => {
     return value < 10 ? `0${value}` : value.toString()
 }
 
-const replaceLastOccurrence = (string: string, replaceValue: string) => {
-    const matches = string.match(dateIntervalPattern)
+const replaceLastOccurrence = (
+    string: string,
+    replaceValue: string,
+    pattern: RegExp
+) => {
+    const matches = string.match(pattern)
 
     return matches && matches.length
         ? string.replace(matches[matches.length - 1], replaceValue)

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

@@ -0,0 +1,107 @@
+import { ColorSchema, SyntaxColorSchema } from '../types'
+import {
+    operators,
+    Alias,
+    startDatePattern,
+    endDatePattern,
+    dateIntervalPattern
+} from '../../../../../hooks/use-suggestions'
+
+export function replaceWithJsDates(str: string) {
+    const intervals = str.match(dateIntervalPattern)
+    const starts = str.match(startDatePattern)
+    const ends = str.match(endDatePattern)
+
+    intervals?.forEach((interval) => {
+        str = str.replaceAll(interval, formatToDateObj(interval))
+    })
+    starts?.forEach((start) => {
+        str = str.replaceAll(start, formatToDateObj(start))
+    })
+    ends?.forEach((end) => {
+        str = str.replaceAll(end, formatToDateObj(end))
+    })
+    return str
+}
+
+function formatToDateObj(str: string) {
+    const [day, month, year] = str.split(' ')[1].split('/')
+    const date = new Date(parseInt(year), parseInt(month), parseInt(day))
+    if (!isValidDate(date)) return str
+    const [toDay, toMonth, toYear] = str.split(' ')[3]?.split('/') || []
+    const toDate = new Date(
+        parseInt(toYear),
+        parseInt(toMonth),
+        parseInt(toDay)
+    )
+    if (!isValidDate(toDate)) return date.toISOString()
+    return JSON.stringify({
+        from: date.toISOString(),
+        to: toDate.toISOString()
+    })
+}
+
+function isValidDate(d: Date) {
+    return d instanceof Date && !isNaN(d as any)
+}
+
+export function replaceAliases(json: string, aliases: Alias[]) {
+    let newJson = json
+    aliases.forEach((alias) => {
+        newJson = newJson.replaceAll(alias.alias, alias.key)
+    })
+    return newJson
+}
+
+export function createColorSchema(
+    colorSchema: ColorSchema,
+    aliases: Alias[]
+): SyntaxColorSchema {
+    const thisFields = []
+    for (const key in aliases) {
+        thisFields.push(aliases[key].alias)
+    }
+
+    const thisOperators = []
+    for (const key in operators) {
+        thisOperators.push(operators[key])
+    }
+
+    return {
+        fields: {
+            values: thisFields,
+            color: colorSchema.fields
+        },
+        operators: {
+            values: thisOperators,
+            color: colorSchema.operators
+        },
+        keywords: {
+            values: ['OR', 'AND'],
+            color: colorSchema.keywords
+        }
+    }
+}
+
+export const isEligibleToChange = (target: HTMLElement, expanded: boolean) => {
+    let childOffsetRight = 0
+    let childOffsetBottom = 20
+
+    if (target?.lastChild) {
+        const range = document.createRange()
+        range.selectNode(target?.lastChild)
+        childOffsetRight =
+            range.getBoundingClientRect().right -
+            target.getBoundingClientRect().left
+        childOffsetBottom =
+            range.getBoundingClientRect().bottom -
+            target.getBoundingClientRect().top +
+            5
+    }
+
+    if (childOffsetRight <= target.clientWidth) {
+        return [-childOffsetRight, 5]
+    } else {
+        return [-target.clientWidth, 5]
+    }
+}

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

@@ -46,6 +46,7 @@
         </div>
         <div
             class="select-wrapper"
+            tabindex="0"
             :style="placeholderStyles"
         >
             <div
@@ -142,8 +143,11 @@
                 :offset="[0, 3]"
                 style="border-radius: 0"
                 :disabled="disabled || readonly"
+                :arrow-nav-items="options"
                 @show="onMenuOpen"
                 @hide="closeMenu"
+                @highlightedIndex="setHighlightedIndex"
+                @handleSelectedItem="handleSelectedItem"
             >
                 <dl-list
                     class="select-list"
@@ -183,7 +187,7 @@
                         </template>
                     </dl-select-option>
                     <dl-select-option
-                        v-for="option in options"
+                        v-for="(option, optionIndex) in options"
                         :key="getKeyForOption(option)"
                         clickable
                         :multiselect="multiselect"
@@ -191,6 +195,11 @@
                             selected:
                                 option === selectedOption && highlightSelected
                         }"
+                        :style="
+                            optionIndex === highlightedIndex
+                                ? 'background-color: var(--dl-color-fill)'
+                                : ''
+                        "
                         :with-wave="withWave"
                         :model-value="modelValue"
                         :value="getOptionValue(option)"
@@ -251,7 +260,7 @@ import { InputSizes, TInputSizes } from '../../../utils/input-sizes'
 import { DlListItem } from '../../basic'
 import { DlTooltip, DlList, DlIcon, DlMenu } from '../../essential'
 import { DlInfoErrorMessage, DlItemSection } from '../../shared'
-import { defineComponent, isVue2, PropType } from 'vue-demi'
+import { defineComponent, isVue2, PropType, ref } from 'vue-demi'
 import {
     getLabel,
     getIconSize,
@@ -337,11 +346,39 @@ export default defineComponent({
         'selected',
         'deselected'
     ],
+    setup(props, { emit }) {
+        const isExpanded = ref(false)
+        const selectedIndex = ref(-1)
+        const highlightedIndex = ref(-1)
+
+        const setHighlightedIndex = (value: any) => {
+            highlightedIndex.value = value
+        }
+        const handleModelValueUpdate = (val: any) => {
+            emit('update:model-value', val)
+            emit('change', val)
+        }
+        const handleSelectedItem = (value: any) => {
+            selectedIndex.value = props.options.findIndex(
+                (option: string | Record<string, string | number> | number) =>
+                    isEqual(option as any, value)
+            )
+
+            handleModelValueUpdate(value)
+        }
+
+        return {
+            isExpanded,
+            highlightedIndex,
+            selectedIndex,
+            setHighlightedIndex,
+            handleSelectedItem,
+            handleModelValueUpdate
+        }
+    },
     data() {
         return {
             uuid: `dl-select-${v4()}`,
-            isExpanded: false,
-            selectedIndex: -1,
             isEmpty: true
         }
     },
@@ -666,10 +703,6 @@ export default defineComponent({
             this.selectedIndex = -1
             this.closeMenu()
         },
-        handleModelValueUpdate(val: any) {
-            this.$emit('update:model-value', val)
-            this.$emit('change', val)
-        },
         selectOption(selected: any) {
             if (this.multiselect) {
                 return