@dataloop-ai/components 0.16.44 → 0.16.46

package/src/components/compound/DlPagination/components/PageNavigation.vue

@@ -1,10 +1,12 @@
 <template>
-    <div class="dl-pagination--page_navigation">
+    <div
+        class="dl-pagination--page_navigation"
+        :style="cssVars"
+    >
         <button
             v-if="boundaryLinks"
             class="dl-pagination--nav_btn"
             :disabled="disabled || isFirstPage"
-            :style="cssVars"
             @click="setPage(min)"
         >
             <dl-icon
@@ -16,7 +18,6 @@
             v-if="directionLinks"
             class="dl-pagination--nav_btn"
             :disabled="disabled || isFirstPage"
-            :style="cssVars"
             @click="setPage(value - 1)"
         >
             <dl-icon
@@ -28,7 +29,7 @@
             <button
                 v-if="boundaryNumbers"
                 class="dl-pagination--page_btn"
-                :style="isActivePage(min) ? activePageCssVars : cssVars"
+                :class="{ 'dl-pagination--active': isActivePage(min) }"
                 :disabled="disabled"
                 @click="setPage(min)"
             >
@@ -37,7 +38,6 @@
             <button
                 v-if="ellipsesStart"
                 class="dl-pagination--page_btn"
-                :style="cssVars"
                 :disabled="disabled"
                 @click="setPage(pgFrom - 1)"
             >
@@ -48,8 +48,10 @@
                     v-for="page in pages"
                     :key="page"
                     class="dl-pagination--page_btn"
-                    :class="{ active: isActivePage(page) }"
-                    :style="isActivePage(page) ? activePageCssVars : cssVars"
+                    :class="{
+                        'dl-pagination--active': isActivePage(page),
+                        active: isActivePage(page)
+                    }"
                     :disabled="disabled"
                     @click="setPage(page)"
                 >
@@ -59,7 +61,6 @@
             <button
                 v-if="ellipsesEnd"
                 class="dl-pagination--page_btn"
-                :style="cssVars"
                 :disabled="disabled"
                 @click="setPage(pgTo + 1)"
             >
@@ -68,7 +69,7 @@
             <button
                 v-if="boundaryNumbers && min !== max"
                 class="dl-pagination--page_btn"
-                :style="isActivePage(max) ? activePageCssVars : cssVars"
+                :class="{ 'dl-pagination--active': isActivePage(max) }"
                 :disabled="disabled"
                 @click="setPage(max)"
             >
@@ -79,7 +80,6 @@
             v-if="directionLinks"
             class="dl-pagination--nav_btn"
             :disabled="disabled || isLastPage"
-            :style="cssVars"
             @click="setPage(value + 1)"
         >
             <dl-icon
@@ -91,7 +91,6 @@
             v-if="boundaryLinks"
             class="dl-pagination--nav_btn"
             :disabled="disabled || isLastPage"
-            :style="cssVars"
             @click="setPage(max)"
         >
             <dl-icon
@@ -141,7 +140,7 @@ export default defineComponent({
         directionLinks: Boolean,
         color: {
             type: String,
-            default: 'dl-color-bg'
+            default: 'dl-color-transparent'
         },
         textColor: {
             type: String,
@@ -178,21 +177,16 @@ export default defineComponent({
         },
         cssVars(): Record<string, any> {
             return {
-                '--dl-page-bg-color': getColor(this.color, 'dl-color-bg'),
-                '--dl-page-text-color': getColor(
-                    this.textColor,
-                    'dl-color-darker'
+                '--dl-btn-bg-color': getColor(
+                    this.color,
+                    'dl-color-transparent'
                 ),
-                '--dl-btn-min-width': this.btnMinWidth
-            }
-        },
-        activePageCssVars(): Record<string, any> {
-            return {
-                '--dl-page-bg-color': getColor(
+                '--dl-active-btn-bg-color': getColor(
                     this.activeColor,
                     'dl-color-secondary'
                 ),
-                '--dl-page-text-color': getColor(
+                '--dl-text-color': getColor(this.textColor, 'dl-color-darker'),
+                '--dl-active-text-color': getColor(
                     this.activeTextColor,
                     'dl-color-text-buttons'
                 ),
@@ -309,6 +303,11 @@ export default defineComponent({
         text-overflow: ellipsis;
     }
 
+    &--active {
+        color: var(--dl-active-text-color) !important;
+        background-color: var(--dl-active-btn-bg-color) !important;
+    }
+
     &--page_btn,
     &--nav_btn {
         min-width: var(--dl-btn-min-width);
@@ -316,8 +315,8 @@ export default defineComponent({
         cursor: pointer;
         border: none;
         border-radius: 2px;
-        color: var(--dl-page-text-color);
-        background-color: var(--dl-page-bg-color);
+        color: var(--dl-text-color);
+        background-color: var(--dl-btn-bg-color);
 
         &:active:not(:disabled) {
             background-color: var(--dl-color-secondary);

package/src/components/compound/DlPagination/components/PaginationLegend.vue

@@ -36,6 +36,7 @@ export default defineComponent({
     justify-content: flex-end;
     display: flex;
     color: var(--dl-color-lighter);
-    margin-left: 16px;
+    padding-left: 16px;
+    margin-left: auto;
 }
 </style>

package/src/components/compound/DlPagination/components/QuickNavigation.vue

@@ -14,6 +14,7 @@
         <dl-button
             size="s"
             flat
+            margin="0"
             class="dl-pagination--quick_nav_button"
             :disabled="disabled"
             @click="handleNavigation"

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

@@ -15,7 +15,7 @@
                 :model-value="inputModel"
                 :expanded-input-height="expandedInputHeight"
                 :suggestions="suggestions"
-                @save="handleQueryEdit"
+                @save="saveQueryDialogBoxModel = true"
                 @focus="setFocused"
                 @update:modelValue="handleInputModel"
                 @dql-edit="jsonEditorModel = !jsonEditorModel"
@@ -30,23 +30,13 @@
                     @click="emitSearchQuery"
                 />
             </div>
-            <!-- <div class="dl-smart-search__filters-btn-wrapper">
-                <dl-filters
-                    v-model="filtersModel"
-                    :filters="filters"
-                    :disabled="disabled"
-                    @save="handleQueryEdit"
-                    @remove="handleQueryRemove"
-                    @setActive="handleSetActiveQuery"
-                />
-            </div> -->
         </div>
         <dl-json-editor
             :model-value="jsonEditorModel"
             :query="activeQuery"
             :queries="savedQueries"
             @update:modelValue="jsonEditorModel = $event"
-            @save="handleQuerySaveEditor"
+            @save="saveQueryDialogBoxModel = true"
             @remove="handleQueryRemove"
             @search="handleQuerySearchEditor"
         />
@@ -88,15 +78,23 @@
                 />
             </template>
             <template #footer>
-                <dl-button @click="emitSaveQuery">
-                    Save
-                </dl-button>
+                <div class="dl-smart-search__buttons--save">
+                    <dl-button @click="handleSaveQuery">
+                        Save
+                    </dl-button>
+                    <dl-button
+                        padding="10px"
+                        @click="handleSaveQuery(true)"
+                    >
+                        Save and Search
+                    </dl-button>
+                </div>
             </template>
         </dl-dialog-box>
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi'
+import { defineComponent, PropType, ref } from 'vue-demi'
 import DlSmartSearchInput from './components/DlSmartSearchInput.vue'
 import { DlJsonEditor } from '../../DlJsonEditor'
 import { DlDialogBox, DlDialogBoxHeader } from '../../DlDialogBox'
@@ -106,11 +104,17 @@ import { DlButton } from '../../../basic'
 import {
     useSuggestions,
     Schema,
-    Alias
+    Alias,
+    removeBrackets
 } from '../../../../hooks/use-suggestions'
 import { Filter, Query, ColorSchema, SearchStatus } from './types'
-import { createColorSchema } from './utils/highlightSyntax'
+import {
+    replaceAliases,
+    replaceWithJsDates,
+    createColorSchema
+} from './utils/utils'
 import { v4 } from 'uuid'
+import { parseSmartQuery } from '../../../../utils'
 
 export default defineComponent({
     components: {
@@ -165,19 +169,22 @@ export default defineComponent({
         }
     },
     emits: ['save-query', 'remove-query', 'search-query'],
-    setup(props, { emit }) {
-        const vm = getCurrentInstance()
-        const proxy = vm!.proxy!
-
+    setup(props) {
         const inputModel = ref('')
         const jsonEditorModel = ref(false)
 
-        const activeQuery = ref(null)
+        const activeQuery = ref({
+            name: 'New Query',
+            query: ''
+        })
         const filtersModel = ref(false)
         const removeQueryDialogBoxModel = ref(false)
         const saveQueryDialogBoxModel = ref(false)
         const newQueryName = ref('')
         const isFocused = ref(false)
+        const isQuerying = ref(false)
+
+        let oldInputQuery = ''
 
         const { suggestions, error, findSuggestions } = useSuggestions(
             props.schema,
@@ -186,11 +193,30 @@ export default defineComponent({
 
         const handleInputModel = (value: string) => {
             inputModel.value = value
+            const json = JSON.stringify(toJSON(removeBrackets(value)))
+            activeQuery.value.query = replaceAliases(json, props.aliases)
+            findSuggestions(value)
+            isQuerying.value = false
+            oldInputQuery = value
+        }
+
+        const toJSON = (value: string) => {
+            return parseSmartQuery(
+                replaceWithJsDates(value) ?? inputModel.value
+            )
         }
 
         const setFocused = (value: boolean) => {
             isFocused.value = value
             findSuggestions(inputModel.value)
+
+            if (value) {
+                inputModel.value = oldInputQuery
+                isQuerying.value = false
+            }
+            if (!value && !error) {
+                toJSON(inputModel.value)
+            }
         }
 
         return {
@@ -205,9 +231,11 @@ export default defineComponent({
             error,
             newQueryName,
             isFocused,
+            isQuerying,
             handleInputModel,
             setFocused,
-            findSuggestions
+            findSuggestions,
+            toJSON
         }
     },
     computed: {
@@ -232,10 +260,21 @@ export default defineComponent({
             return createColorSchema(this.colorSchema, this.aliases)
         },
         computedStatus(): SearchStatus {
-            if (!this.error) {
+            if (this.isFocused) return
+            if (this.isQuerying) return
+            if (!this.error && this.inputModel !== '') {
+                return {
+                    type: 'success',
+                    message: ''
+                }
+            } else if (this.error === 'warning') {
+                return {
+                    type: 'warning',
+                    message: 'The query is not supported technically.'
+                }
+            } else if (this.inputModel === '') {
                 return this.status
             }
-
             return {
                 type: 'error',
                 message: this.error
@@ -247,22 +286,10 @@ export default defineComponent({
             this.inputModel = `Query "${this.activeQuery.name}" ${
                 val ? 'is running' : ''
             }`
-        },
-        inputModel(val) {
-            this.findSuggestions(val)
+            this.isQuerying = true
         }
     },
     methods: {
-        handleQueryEdit(query: Query) {
-            this.activeQuery = query
-            this.jsonEditorModel = true
-        },
-        handleQuerySaveEditor(query: Query) {
-            this.filtersModel = false
-            this.activeQuery = query
-            this.newQueryName = query.name
-            this.saveQueryDialogBoxModel = true
-        },
         handleQueryRemove(query: Query) {
             this.filtersModel = false
             this.activeQuery = query
@@ -273,11 +300,16 @@ export default defineComponent({
             this.activeQuery = query
             this.$emit('search-query', this.activeQuery)
         },
-        emitSearchQuery() {
-            this.activeQuery = {
-                name: '',
-                query: this.inputModel
+        handleSaveQuery(performSearch: boolean) {
+            if (performSearch) {
+                this.emitSaveQuery()
+                this.emitSearchQuery()
+                this.jsonEditorModel = false
+            } else {
+                this.emitSaveQuery()
             }
+        },
+        emitSearchQuery() {
             this.$emit('search-query', this.activeQuery)
         },
         emitRemoveQuery() {
@@ -289,14 +321,9 @@ export default defineComponent({
             if (!this.activeQuery) return
             if (this.newQueryName !== '')
                 this.activeQuery.name = this.newQueryName
-            this.$emit('save-query', this.activeQuery)
+            this.$emit('save-query', { ...this.activeQuery })
             this.saveQueryDialogBoxModel = false
             this.newQueryName = ''
-        },
-        handleSetActiveQuery(query: Query) {
-            this.filtersModel = false
-            this.activeQuery = query
-            this.inputModel = `Query "${query.name}"`
         }
     }
 })
@@ -316,6 +343,16 @@ export default defineComponent({
         display: flex;
         margin: 0px 5px;
         align-items: flex-start;
+
+        &--save {
+            display: flex;
+            width: 100%;
+            justify-content: flex-end;
+            align-items: center;
+        }
+        &--save > * {
+            margin: 0px 10px;
+        }
     }
 
     &__search-btn-wrapper {

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"
@@ -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: {
@@ -312,13 +312,13 @@ export default defineComponent({
         searchBarClasses(): string {
             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 (this.focused && this.status.type === 'info') {
+                classes += ' dl-smart-search-input__search-bar--focused'
             } else {
-                if (this.focused) {
-                    classes += ' dl-smart-search-input__search-bar--focused'
+                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'
                 }
             }
 
@@ -355,6 +355,13 @@ export default defineComponent({
                     this.expandedInputHeight,
                 '--dl-smart-search-input-height': this.inputHeight
             }
+        },
+        saveStatus() {
+            return (
+                this.disabled ||
+                !this.modelValue ||
+                this.status.type === 'error'
+            )
         }
     },
     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
-        }
-    }
-}