@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -8,6 +8,7 @@
             volatile
             full-width
             :items="tabItems"
+            font-size="14px"
         />
         <div class="dl-filters-tabs">
             <dl-tab-panels v-model="currentTab">
@@ -36,8 +37,9 @@ import { defineComponent, PropType } from 'vue-demi'
 import { DlTabs } from '../../../DlTabs'
 import { DlTabPanels, DlTabPanel } from '../../../DlTabPanels'
 import { Filters } from '../../../DlSearches/DlSmartSearch/types'
-import { getTabItems } from '../utils/utils'
+import { getTabItems } from '../utils'
 import FiltersQuery from './FiltersQuery.vue'
+import { v4 } from 'uuid'
 
 export default defineComponent({
     components: {
@@ -55,6 +57,7 @@ export default defineComponent({
     emits: ['filters-delete', 'filters-search'],
     data() {
         return {
+            uuid: `dl-smart-search-filters-${v4()}`,
             currentTab: 'saved'
         }
     },

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

@@ -1,5 +1,6 @@
 <template>
     <div
+        :id="`DlSmartSearchInput${uuid}`"
         class="dl-smart-search-input"
         :style="cssVars"
     >
@@ -19,7 +20,7 @@
                 </div>
                 <div class="dl-smart-search-input__textarea-wrapper">
                     <div
-                        id="editor"
+                        :id="`dl-smart-search-input-text-area-${uuid}`"
                         ref="input"
                         :class="inputClass"
                         :style="textareaStyles"
@@ -27,7 +28,7 @@
                         :contenteditable="!disabled"
                         @keypress="keyPress"
                         @input="handleValueChange"
-                        @click="focus"
+                        @click.stop.prevent="focus"
                         @blur="blur"
                     />
                 </div>
@@ -66,15 +67,16 @@
                             v-if="withSaveButton"
                             class="dl-smart-search-input__save-btn-wrapper"
                         >
-                            <dl-button
-                                icon="icon-dl-save"
-                                size="16px"
-                                flat
-                                :disabled="saveStatus"
-                                @click="save"
-                            >
+                            <div>
+                                <dl-button
+                                    icon="icon-dl-save"
+                                    size="16px"
+                                    flat
+                                    :disabled="saveStatus"
+                                    @click="save"
+                                />
                                 <dl-tooltip> Save Query </dl-tooltip>
-                            </dl-button>
+                            </div>
                             <dl-button
                                 icon="icon-dl-edit"
                                 size="16px"
@@ -103,6 +105,7 @@
         </div>
         <dl-suggestions-dropdown
             v-model="suggestionModal"
+            :parent-id="`${uuid}`"
             :disabled="disabled"
             :suggestions="suggestions"
             :offset="menuOffset"
@@ -110,19 +113,22 @@
             @set-input-value="setInputValue"
         />
         <dl-menu
-            v-if="isDatePickerVisible"
+            v-if="isDatePickerVisible && focused"
             v-model="isDatePickerVisible"
             :disabled="disabled"
             :offset="[0, 3]"
         >
             <div class="dl-smart-search-input__date-picker-wrapper">
-                <dl-date-picker @change="handleDateSelectionUpdate" />
+                <dl-date-picker
+                    :single-selection="false"
+                    @change="handleDateSelectionUpdate"
+                />
             </div>
         </dl-menu>
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, PropType } from 'vue-demi'
+import { defineComponent, ref, PropType, nextTick } from 'vue-demi'
 import { DlButton } from '../../../../basic'
 import { DlDatePicker } from '../../../DlDateTime'
 import { DlMenu, DlIcon } from '../../../../essential'
@@ -130,16 +136,17 @@ import { isEllipsisActive } from '../../../../../utils/is-ellipsis-active'
 import { useSizeObserver } from '../../../../../hooks/use-size-observer'
 import { SearchStatus, SyntaxColorSchema } from '../types'
 import { debounce } from 'lodash'
-import { DlTooltip } from '../../../../essential'
+import { DlTooltip } from '../../../../shared'
 import DlSuggestionsDropdown from './DlSuggestionsDropdown.vue'
 import { DateInterval } from '../../../DlDateTime/types'
 import {
     isEndingWithDateIntervalPattern,
     replaceDateInterval,
     setCaret,
-    updateEditor
+    updateEditor,
+    isEligibleToChange
 } from '../utils'
-import { isEligibleToChange } from '../utils/utils'
+import { v4 } from 'uuid'
 
 export default defineComponent({
     components: {
@@ -161,7 +168,7 @@ export default defineComponent({
         },
         styleModel: {
             type: Object as PropType<SyntaxColorSchema>,
-            default: () => {}
+            default: null
         },
         placeholder: {
             type: String,
@@ -261,17 +268,55 @@ 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.
+            if (stringValue.includes('(dd/mm/yyyy)')) {
+                stringValue = stringValue.trimEnd()
+            }
+
+            const specialSuggestions = props.suggestions.filter((suggestion) =>
+                suggestion.startsWith('.')
+            )
+
+            for (const suggestion of specialSuggestions) {
+                if (stringValue.includes(suggestion)) {
+                    stringValue = stringValue.replace(
+                        ` ${suggestion}`,
+                        suggestion
+                    )
+                }
             }
 
             emit('update:modelValue', stringValue)
         }
 
+        const debouncedSetModal = debounce(
+            () => (suggestionModal.value = true),
+            200
+        )
+
         return {
+            uuid: v4(),
             input,
             label,
             hasEllipsis,
@@ -287,7 +332,8 @@ export default defineComponent({
             focused,
             isOverflow,
             isTyping,
-            scroll
+            scroll,
+            debouncedSetModal
         }
     },
     computed: {
@@ -393,35 +439,44 @@ export default defineComponent({
         modelValue(value: string) {
             const target = this.$refs['input'] as HTMLInputElement
             value = value?.replaceAll(' ', ' ') ?? ''
-            if (!this.isTyping) target.innerHTML = value
+            /*
+             * I commented out this line because it was blocking arrow navigation
+             * */
+            // if (!this.isTyping) target.innerHTML = value
+            target.innerHTML = value
             updateEditor(this.styleModel)
             this.setMenuOffset(isEligibleToChange(target, this.expanded))
-            if (!this.isTyping) setCaret(target)
+            /*
+             * I commented out this line because it was blocking arrow navigation
+             * */
+            // if (!this.isTyping) setCaret(target)
+            setCaret(target)
             if (!this.expanded) {
                 this.isOverflow =
                     isEllipsisActive(this.$refs['input'] as Element) ||
                     this.hasEllipsis
             }
-            if (value.length === 0) {
-                this.focus()
-            }
-            if (isEndingWithDateIntervalPattern(value)) {
+
+            if (value.length && isEndingWithDateIntervalPattern(value)) {
                 this.isDatePickerVisible = true
                 this.suggestionModal = false
+            } else {
+                this.isDatePickerVisible = false
+                this.suggestionModal = true
             }
             this.scroll = (this.$refs.input as HTMLDivElement).offsetHeight > 40
         },
         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) {
-                const deb = debounce(() => (this.suggestionModal = true), 200)
-                deb()
-            }
+                if (!this.suggestionModal && val.length > 0 && this.focused) {
+                    this.suggestionModal = true
+                }
+            })
         },
         expanded(value) {
             this.$nextTick(() => {
@@ -433,7 +488,9 @@ export default defineComponent({
 
                 this.setMenuOffset(isEligibleToChange(element, value))
 
-                this.focus()
+                if (value) {
+                    this.focus()
+                }
             })
         },
         focused(value) {
@@ -449,9 +506,9 @@ export default defineComponent({
             if (!val) {
                 this.datePickerSelection = null
 
-                setTimeout(() => {
+                nextTick(() => {
                     this.focus()
-                }, 1)
+                })
             }
         }
     },
@@ -493,9 +550,11 @@ export default defineComponent({
                     this.focused = true
                     return
                 }
+
                 element.scrollLeft = 0
                 element.scrollTop = 0
                 this.focused = false
+                this.expanded = false
                 this.$emit('focus', false)
             } else {
                 this.focus()
@@ -527,6 +586,7 @@ export default defineComponent({
         },
         handleValueChange(e: Event) {
             this.isTyping = true
+
             const text = (e.target as HTMLElement).textContent
                 .toString()
                 .replaceAll(' ', ' ')
@@ -600,6 +660,7 @@ export default defineComponent({
         }
 
         &--expanded {
+            z-index: var(--dl-z-index-overlay);
             transition: height 0.3s ease-out;
             position: relative;
             top: 0;
@@ -610,7 +671,7 @@ export default defineComponent({
         }
 
         &--disabled {
-            border-color: var(--dl-color-disabled);
+            border-color: var(--dl-color-separator);
         }
     }
 
@@ -648,7 +709,7 @@ export default defineComponent({
         height: auto;
 
         min-height: 14px;
-        max-height: 100%;
+        max-height: var(--dl-smart-search-bar-wrapper-height);
         display: block;
     }
 

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

@@ -10,6 +10,7 @@
             fit-container
             :model-value="modelValue"
             :arrow-nav-items="suggestions"
+            :auto-close="false"
             @update:modelValue="emitModelValue($event)"
             @show="onShow"
             @hide="onHide"
@@ -21,7 +22,7 @@
                     v-for="(item, suggestionIndex) in suggestions"
                     :key="item"
                     :clickable="true"
-                    :is-highlighted="suggestionIndex === highlightedIndex"
+                    :highlighted="suggestionIndex === highlightedIndex"
                     @click="handleOption(item)"
                 >
                     {{ item }}
@@ -31,7 +32,7 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue-demi'
+import { computed, defineComponent, PropType, ref } from 'vue-demi'
 import { DlMenu, DlList } from '../../../../essential'
 import { DlListItem } from '../../../../basic'
 
@@ -46,6 +47,10 @@ export default defineComponent({
         event: 'update:modelValue'
     },
     props: {
+        parentId: {
+            type: String,
+            required: true
+        },
         expanded: {
             type: Boolean,
             default: false
@@ -91,7 +96,12 @@ export default defineComponent({
             emit('set-input-value', item)
         }
 
+        const defaultTarget = computed(() => {
+            return `#dl-smart-search-input-text-area-${props.parentId}`
+        })
+
         return {
+            defaultTarget,
             setHighlightedIndex,
             handleSelectedItem,
             highlightedIndex,
@@ -100,11 +110,6 @@ export default defineComponent({
             emitModelValue,
             handleOption
         }
-    },
-    computed: {
-        defaultTarget() {
-            return '.dl-smart-search-input__textarea'
-        }
     }
 })
 </script>

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

@@ -8,10 +8,7 @@
             class="query__header"
             @mousedown="$emit('select')"
         >
-            <dl-icon
-                :icon="icon"
-                style="margin-bottom: 3px"
-            />
+            <dl-icon :icon="icon" />
             <span class="query__header--title">
                 {{ name }}
             </span>
@@ -37,7 +34,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlIcon, DlTooltip } from '../../../../essential'
+import { DlIcon } from '../../../../essential'
+import { DlTooltip } from '../../../../shared'
+
 export default defineComponent({
     components: {
         DlIcon,
@@ -80,7 +79,7 @@ export default defineComponent({
         display: flex;
         align-items: center;
         &--title {
-            font-size: 0.5em;
+            font-size: 12px;
             margin: 0px 12px;
         }
     }

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

@@ -34,3 +34,17 @@ export type SyntaxColorSchema = {
         color: string
     }
 }
+
+import {
+    Alias as DlSmartSearchAlias,
+    Schema as DlSmartSearchSchema
+} from '../../../../hooks/use-suggestions'
+
+type DlSmartSearchFilters = Filters & { [key: string]: any }
+
+export type {
+    DlSmartSearchAlias,
+    DlSmartSearchSchema,
+    ColorSchema as DlSmartSearchColorSchema,
+    DlSmartSearchFilters
+}

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

@@ -94,12 +94,16 @@ function restoreSelection(
 function renderText(text: string) {
     const words = text?.split(/(\s+)/)
     const output = words?.map((word) => {
-        if (styleModel.keywords.values.includes(word)) {
-            return `<strong style='${SPAN_STYLES}'>${word}</strong>`
-        } else if (styleModel.fields.values.includes(word)) {
-            return `<span style='color:${styleModel.fields.color}; ${SPAN_STYLES}'>${word}</span>`
-        } else if (styleModel.operators.values.includes(word)) {
-            return `<span style='color:${styleModel.operators.color}; ${SPAN_STYLES}'>${word}</span>`
+        if (styleModel) {
+            if (styleModel.keywords.values.includes(word)) {
+                return `<strong style='${SPAN_STYLES}; color:${styleModel.keywords.color}'>${word}</strong>`
+            } else if (styleModel.fields.values.includes(word)) {
+                return `<span style='color:${styleModel.fields.color}; ${SPAN_STYLES}'>${word}</span>`
+            } else if (styleModel.operators.values.includes(word)) {
+                return `<span style='color:${styleModel.operators.color}; ${SPAN_STYLES}'>${word}</span>`
+            } else {
+                return `<span style='${SPAN_STYLES}'>${word}</span>`
+            }
         } else {
             return `<span style='${SPAN_STYLES}'>${word}</span>`
         }