@dataloop-ai/components 0.17.63 → 0.17.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.63",
+  "version": "0.17.65",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -25,6 +25,7 @@
     "@dataloop-ai/icons": "^3.0.6",
     "@types/lodash": "^4.14.184",
     "chart.js": "^3.9.1",
+    "flat": "^5.0.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "sass": "^1.51.0",
@@ -45,6 +46,7 @@
     "@storybook/client-api": "^7.0.4",
     "@storybook/vue3": "^7.0.4",
     "@storybook/vue3-vite": "^7.0.4",
+    "@types/flat": "^5.0.2",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^18.7.18",
     "@types/resize-observer-browser": "^0.1.7",

package/src/components/basic/DlButton/DlButton.vue

@@ -62,6 +62,9 @@ import {
     setColorOnHover,
     setBorderOnHover,
     setBgOnHover,
+    setBgOnPressed,
+    setBorderOnPressed,
+    setTextOnPressed,
     setIconSize,
     setIconPadding,
     setMaxHeight
@@ -291,7 +294,8 @@ export default defineComponent({
                         disabled: this.disabled,
                         flat: this.flat,
                         shaded: this.shaded,
-                        color: this.color
+                        color: this.color,
+                        outlined: this.outlined
                     }),
                     '--dl-button-text-color-hover': setColorOnHover({
                         disabled: this.disabled,
@@ -314,13 +318,18 @@ export default defineComponent({
                         filled: this.filled,
                         color: this.color
                     }),
-                    '--dl-button-text-color-pressed': this.shaded
-                        ? 'var(--dl-color-text-buttons)'
-                        : 'var(--dl-button-text-color)',
-                    '--dl-button-bg-pressed': this.shaded
-                        ? 'var(--dl-color-secondary)'
-                        : 'var(--dl-button-bg)',
-                    '--dl-button-border-pressed': 'var(--dl-button-border)'
+                    '--dl-button-text-color-pressed': setTextOnPressed({
+                        shaded: this.shaded,
+                        outlined: this.shaded
+                    }),
+                    '--dl-button-bg-pressed': setBgOnPressed({
+                        shaded: this.shaded,
+                        outlined: this.outlined
+                    }),
+                    '--dl-button-border-pressed': setBorderOnPressed({
+                        shaded: this.shaded,
+                        outlined: this.outlined
+                    })
                 }
             }
 

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

@@ -70,6 +70,9 @@ export const setTextColor = ({
     if (disabled) {
         return getColor('', 'dl-color-disabled')
     }
+    if (shaded && outlined) {
+        return 'var(--dl-color-text-darker-buttons)'
+    }
     if (outlined) {
         return getColor(textColor, 'dl-color-secondary')
     }
@@ -111,13 +114,17 @@ export const setBorder = ({
     disabled,
     flat,
     color = '',
-    shaded
+    shaded,
+    outlined
 }: Partial<DlButtonProps>) => {
     if (disabled) {
         return flat
             ? 'var(--dl-color-transparent)'
             : 'var(--dl-color-separator)'
     }
+    if (shaded && outlined) {
+        return 'var(--dl-color-separator)'
+    }
     if (flat || shaded) {
         return 'var(--dl-color-transparent)'
     }
@@ -177,3 +184,39 @@ export const setBgOnHover = ({
 
     return 'var(--dl-color-panel-background)'
 }
+
+export const setBgOnPressed = ({
+    shaded,
+    outlined
+}: Partial<DlButtonProps>) => {
+    if (shaded && outlined) {
+        return 'var(--dl-color-text-buttons)'
+    }
+    if (shaded) {
+        return 'var(--dl-color-secondary)'
+    }
+    return 'var(--dl-button-bg)'
+}
+
+export const setTextOnPressed = ({
+    shaded,
+    outlined
+}: Partial<DlButtonProps>) => {
+    if (shaded && outlined) {
+        return 'var(--dl-color-secondary)'
+    }
+    if (shaded) {
+        return 'var(--dl-color-text-buttons)'
+    }
+    return 'var(--dl-button-text-color)'
+}
+
+export const setBorderOnPressed = ({
+    shaded,
+    outlined
+}: Partial<DlButtonProps>) => {
+    if (shaded && outlined) {
+        return 'var(--dl-color-secondary)'
+    }
+    return 'var(--dl-button-border)'
+}

package/src/components/compound/DlDialogBox/DlDialogBox.vue

@@ -262,7 +262,7 @@ export default defineComponent({
 
 .header {
     display: flex;
-    padding: 16px;
+    padding: var(--dl-dialog-box-header-padding, 16px);
     border-bottom: var(--dl-dialog-separator);
 }
 
@@ -281,7 +281,7 @@ export default defineComponent({
 
 .footer {
     display: flex;
-    padding: 20px 16px;
+    padding: var(--dl-dialog-box-footer-padding, 20px 16px);
     border-top: var(--dl-dialog-separator);
 }
 

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

@@ -22,7 +22,7 @@
                 :default-width="width"
                 @save="saveQueryDialogBoxModel = true"
                 @focus="setFocused"
-                @update:modelValue="handleInputModel"
+                @update:modelValue="debouncedInputModel"
                 @dql-edit="jsonEditorModel = !jsonEditorModel"
             />
         </div>
@@ -44,6 +44,7 @@
             <dl-button
                 class="dl-smart-search__buttons--filters"
                 shaded
+                outlined
                 size="s"
             >
                 Saved Filters
@@ -65,6 +66,7 @@
             v-model="jsonEditorModel"
             :height="500"
             :width="800"
+            style="--dl-dialog-box-footer-padding: 10px 16px"
         >
             <template #header>
                 <dl-dialog-box-header
@@ -90,6 +92,7 @@
                                 label="Align Left"
                                 flat
                                 color="secondary"
+                                padding="0px 3px"
                                 @click="alignJsonText"
                             />
                         </div>
@@ -111,11 +114,13 @@
                             label="Delete Query"
                             flat
                             color="secondary"
+                            padding="0"
                             @click="handleQueryRemove"
                         />
                     </div>
                     <div class="json-editor__footer-save">
                         <dl-button
+                            style="margin-right: 14px"
                             outlined
                             label="Save As"
                             @click="saveQueryDialogBoxModel = true"
@@ -152,7 +157,10 @@
                 </div>
             </template>
         </dl-dialog-box>
-        <dl-dialog-box v-model="saveQueryDialogBoxModel">
+        <dl-dialog-box
+            v-model="saveQueryDialogBoxModel"
+            style="--dl-dialog-box-footer-padding: 14px 17px"
+        >
             <template #header>
                 <dl-dialog-box-header
                     title="Save Query"
@@ -162,17 +170,22 @@
             <template #body>
                 <dl-input
                     v-model="newQueryName"
+                    title="Query name"
                     style="text-align: center"
                     placeholder="Type query name"
                 />
             </template>
             <template #footer>
                 <div class="dl-smart-search__buttons--save">
-                    <dl-button @click="handleSaveQuery">
+                    <dl-button
+                        :disabled="!newQueryName"
+                        outlined
+                        @click="handleSaveQuery"
+                    >
                         Save
                     </dl-button>
                     <dl-button
-                        padding="10px"
+                        :disabled="!newQueryName"
                         @click="handleSaveQuery(true)"
                     >
                         Save and Search
@@ -183,7 +196,15 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue-demi'
+import {
+    defineComponent,
+    PropType,
+    ref,
+    nextTick,
+    toRef,
+    onMounted,
+    watch
+} from 'vue-demi'
 import { DlTypography, DlMenu } from '../../../essential'
 import { DlButton } from '../../../basic'
 import { DlSelect } from '../../DlSelect'
@@ -209,6 +230,7 @@ import {
 } from './utils/utils'
 import { v4 } from 'uuid'
 import { parseSmartQuery, stringifySmartQuery } from '../../../../utils'
+import { debounce } from 'lodash'
 
 export default defineComponent({
     components: {
@@ -223,7 +245,15 @@ export default defineComponent({
         DlMenu,
         DlSelect
     },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
     props: {
+        modelValue: {
+            type: Object,
+            default: {} as { [key: string]: any }
+        },
         status: {
             type: Object as PropType<SearchStatus>,
             default: () => ({ type: 'info', message: '' })
@@ -239,9 +269,9 @@ export default defineComponent({
         colorSchema: {
             type: Object as PropType<ColorSchema>,
             default: () => ({
-                fields: 'blue',
-                operators: 'darkgreen',
-                keywords: 'bold'
+                fields: 'var(--dl-color-secondary)',
+                operators: 'var(--dl-color-positive)',
+                keywords: 'var(--dl-color-medium)'
             })
         },
         isLoading: {
@@ -267,10 +297,17 @@ export default defineComponent({
         width: {
             type: String,
             default: '450px'
+        },
+        /**
+         * If true, the validation will be a closed set based on the schema provided
+         */
+        strict: {
+            type: Boolean,
+            default: false
         }
     },
-    emits: ['save-query', 'remove-query', 'search-query'],
-    setup(props) {
+    emits: ['save-query', 'remove-query', 'search-query', 'update:modelValue'],
+    setup(props, { emit }) {
         const inputModel = ref('')
         const jsonEditorModel = ref(false)
         const searchBarWidth = ref('100%')
@@ -295,21 +332,30 @@ export default defineComponent({
             value: ''
         })
 
+        const strictRef = toRef(props, 'strict')
+
         const { suggestions, error, findSuggestions } = useSuggestions(
             props.schema,
-            props.aliases
+            props.aliases,
+            { strict: strictRef }
         )
 
         const handleInputModel = (value: string) => {
             inputModel.value = value
-            const json = JSON.stringify(toJSON(removeBrackets(value)))
-            const newQuery = replaceWithAliases(json, props.aliases)
+            const json = toJSON(removeBrackets(value))
+            emit('update:modelValue', json)
+            const stringified = JSON.stringify(json)
+            const newQuery = replaceWithAliases(stringified, props.aliases)
             activeQuery.value.query = newQuery
-            findSuggestions(value)
+            nextTick(() => {
+                findSuggestions(value)
+            })
             isQuerying.value = false
             oldInputQuery.value = value
         }
 
+        const debouncedInputModel = debounce(handleInputModel, 300)
+
         const toJSON = (value: string) => {
             return parseSmartQuery(
                 replaceWithJsDates(value) ?? inputModel.value
@@ -328,6 +374,23 @@ export default defineComponent({
                 toJSON(inputModel.value)
             }
         }
+
+        const modelRef: any = toRef(props, 'modelValue')
+
+        watch(modelRef, (val: any) => {
+            if (val) {
+                const stringQuery = stringifySmartQuery(val)
+                debouncedInputModel(stringQuery)
+            }
+        })
+
+        onMounted(() => {
+            if (props.modelValue) {
+                const stringQuery = stringifySmartQuery(props.modelValue)
+                debouncedInputModel(stringQuery)
+            }
+        })
+
         return {
             uuid: `dl-smart-search-${v4()}`,
             inputModel,
@@ -349,6 +412,7 @@ export default defineComponent({
             preventUpdate,
             selectedOption,
             handleInputModel,
+            debouncedInputModel,
             setFocused,
             findSuggestions,
             toJSON
@@ -634,8 +698,12 @@ export default defineComponent({
         display: flex;
         justify-content: space-between;
     }
-    &-save > * {
-        margin: 0px 10px;
+    &-delete {
+        align-items: center;
+        display: flex;
+        & > * {
+            margin-bottom: 6px;
+        }
     }
 }
 .json-query {

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">

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

@@ -66,15 +66,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"
@@ -612,7 +613,7 @@ export default defineComponent({
         }
 
         &--disabled {
-            border-color: var(--dl-color-disabled);
+            border-color: var(--dl-color-separator);
         }
     }
 
@@ -650,7 +651,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/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>
@@ -80,7 +77,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/utils/highlightSyntax.ts

@@ -95,7 +95,7 @@ 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>`
+            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)) {

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

@@ -69,12 +69,19 @@ export function replaceWithAliases(json: string, aliases: Alias[]) {
     })
     return newJson
 }
-export function revertAliases(json: string, aliases: Alias[]) {
-    let newJson = json
-    aliases.forEach((alias) => {
-        newJson = newJson.replaceAll(alias.key, alias.alias)
-    })
-    return newJson
+
+export function revertAliases(str: string, aliases: Alias[]) {
+    const words: string[] = []
+    for (const alias of aliases) {
+        words.push(alias.key)
+    }
+    const replacement = (match: string) => {
+        const index = words.indexOf(match)
+        return aliases[index].alias
+    }
+
+    const regex = new RegExp(words.join('|'), 'gi')
+    return str.replace(regex, replacement)
 }
 
 export function createColorSchema(

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -6,26 +6,30 @@
                 dense
                 label="Disabled"
             />
+            <dl-checkbox
+                v-model="strictState"
+                dense
+                label="Strict"
+            />
         </div>
         <div
             style="width: 100px"
             class="props"
         />
         <dl-smart-search
+            v-model="queryObject"
             :aliases="aliases"
             :schema="schema"
-            :color-schema="{
-                fields: 'blue',
-                operators: 'green',
-                keywords: 'bold'
-            }"
+            :color-schema="colorSchema"
             :filters="filters"
             :disabled="switchState"
             :is-loading="isLoading"
+            :strict="strictState"
             @remove-query="handleRemoveQuery"
             @save-query="handleSaveQuery"
             @search-query="handleSearchQuery"
         />
+        {{ queryObject }}
     </div>
 </template>
 
@@ -33,7 +37,6 @@
 import { defineComponent } from 'vue-demi'
 import { DlSmartSearch, DlCheckbox } from '../../components'
 import { Query } from '../../components/types'
-import { aliases, schema } from './schema'
 
 export default defineComponent({
     name: 'DlSmartSearchDemo',
@@ -42,11 +45,59 @@ export default defineComponent({
         DlCheckbox
     },
     data() {
+        const schema: any = {
+            id: ['string', 'number'],
+            filename: 'string',
+            name: 'string',
+            url: 'string',
+            type: 'string',
+            dataset: 'string',
+            datasetId: 'string',
+            dir: 'string',
+            thumbnail: 'string',
+            createdAt: 'date',
+            annotated: 'boolean',
+            hidden: 'boolean',
+            metadata: {
+                system: {
+                    width: 'number',
+                    height: 'number',
+                    '*': 'any'
+                },
+                test: 'any',
+                '*': 'any'
+            }
+        }
+
+        const colorSchema: any = {
+            fields: 'var(--dl-color-secondary)',
+            operators: 'var(--dl-color-positive)',
+            keywords: 'var(--dl-color-medium)'
+        }
+
+        const aliases: any = [
+            {
+                alias: 'ItemID',
+                key: 'id'
+            },
+            {
+                alias: 'ItemHeight',
+                key: 'metadata.system.height'
+            },
+            {
+                alias: 'ItemWidth',
+                key: 'metadata.system.width'
+            }
+        ]
+
         return {
             schema,
             aliases,
+            colorSchema,
             switchState: false,
+            strictState: false,
             isLoading: false,
+            queryObject: {},
             filters: {
                 saved: [
                     {

package/src/hooks/use-suggestions.ts

@@ -1,5 +1,7 @@
 import { Ref, ref } from 'vue-demi'
 import { splitByQuotes } from '../utils/splitByQuotes'
+import { flatten } from 'flat'
+import { isObject } from 'lodash'
 
 export type Schema = {
     [key: string]:
@@ -50,6 +52,15 @@ const operatorToDataTypeMap: OperatorToDataTypeMap = {
     $nin: []
 }
 
+const knownDataTypes = [
+    'number',
+    'boolean',
+    'string',
+    'date',
+    'datetime',
+    'time'
+]
+
 type Suggestion = string
 
 type Expression = {
@@ -79,14 +90,37 @@ export const dateIntervalPattern = new RegExp(
     'gi'
 )
 
-export const useSuggestions = (schema: Schema, aliases: Alias[]) => {
-    const initialSuggestions = aliases.map((alias) => alias.alias)
-    const suggestions: Ref<Suggestion[]> = ref(initialSuggestions)
+export const useSuggestions = (
+    schema: Schema,
+    aliases: Alias[],
+    options: { strict?: Ref<boolean> } = {}
+) => {
+    const { strict } = options
+    const initialSuggestions = Object.keys(schema)
+    const aliasedKeys = aliases.map((alias) => alias.key)
+    const aliasedSuggestions = initialSuggestions.map((suggestion) =>
+        aliasedKeys.includes(suggestion)
+            ? aliases.find((alias) => alias.key === suggestion)?.alias
+            : suggestion
+    )
+
+    for (const alias of aliases) {
+        if (aliasedSuggestions.includes(alias.alias)) {
+            continue
+        }
+        aliasedSuggestions.push(alias.alias)
+    }
+
+    const sortString = (a: string, b: string) =>
+        a.localeCompare(b, undefined, { sensitivity: 'base' })
+    const sortedSuggestions = aliasedSuggestions.sort(sortString)
+
+    const suggestions: Ref<Suggestion[]> = ref(sortedSuggestions)
     const error: Ref<string | null> = ref(null)
 
     const findSuggestions = (input: string) => {
         input = input.replace(/\s+/g, ' ').trimStart()
-        localSuggestions = initialSuggestions
+        localSuggestions = sortedSuggestions
 
         const words = splitByQuotes(input, space)
         const expressions = mapWordsToExpressions(words)
@@ -110,9 +144,7 @@ export const useSuggestions = (schema: Schema, aliases: Alias[]) => {
                 continue
             }
 
-            const alias = getAliasObjByAlias(aliases, matchedField)
-            if (!alias) continue
-            const dataType = getDataTypeByAliasKey(schema, alias.key)
+            const dataType = getDataType(schema, aliases, matchedField)
             if (!dataType) {
                 localSuggestions = []
                 continue
@@ -139,7 +171,9 @@ export const useSuggestions = (schema: Schema, aliases: Alias[]) => {
             }
 
             if (Array.isArray(dataType)) {
-                localSuggestions = dataType
+                localSuggestions = dataType.filter(
+                    (type) => !knownDataTypes.includes(type)
+                )
 
                 if (!value) continue
 
@@ -176,11 +210,11 @@ export const useSuggestions = (schema: Schema, aliases: Alias[]) => {
             if (!matchedKeyword || !isNextCharSpace(input, matchedKeyword))
                 continue
 
-            localSuggestions = initialSuggestions
+            localSuggestions = sortedSuggestions
         }
 
         error.value = input.length
-            ? getError(schema, aliases, expressions)
+            ? getError(schema, aliases, expressions, { strict })
             : null
 
         suggestions.value = localSuggestions
@@ -194,11 +228,38 @@ const errors = {
     INVALID_VALUE: (field: string) => `Invalid value for "${field}" field`
 }
 
+const isInputAllowed = (input: string, allowedKeys: string[]): boolean => {
+    for (const key of allowedKeys) {
+        const keyParts = key.split('.')
+        const inputParts = input.split('.')
+
+        if (keyParts.length > inputParts.length) {
+            continue
+        }
+
+        let isMatch = true
+        for (let i = 0; i < keyParts.length; i++) {
+            if (keyParts[i] !== '*' && keyParts[i] !== inputParts[i]) {
+                isMatch = false
+                break
+            }
+        }
+
+        if (isMatch) {
+            return true
+        }
+    }
+
+    return false
+}
+
 const getError = (
     schema: Schema,
     aliases: Alias[],
-    expressions: Expression[]
+    expressions: Expression[],
+    options: { strict?: Ref<boolean> } = {}
 ): string | null => {
+    const { strict } = options
     const hasErrorInStructure = expressions
         .flatMap((exp) => Object.values(exp))
         .some((el, index, arr) => {
@@ -214,11 +275,29 @@ const getError = (
         .filter(({ field, value }) => field !== null && value !== null)
         .reduce<string | null>((acc, { field, value, operator }, _, arr) => {
             if (acc === 'warning') return acc
-            const aliasObj = getAliasObjByAlias(aliases, field)
-            if (!aliasObj) return 'warning'
+            const key: string = getAliasObjByAlias(aliases, field)?.key ?? field
+
+            /**
+             * Handle nested keys to validate if the key exists in the schema or not.
+             */
+            const keys: string[] = []
+            for (const key of Object.keys(schema)) {
+                if (isObject(schema[key]) && !Array.isArray(schema[key])) {
+                    const flattened = flatten({ [key]: schema[key] })
+                    keys.push(...Object.keys(flattened))
+                } else {
+                    keys.push(key)
+                }
+            }
+
+            const isValid = isInputAllowed(key, keys)
+            if (!keys.includes(key) && !isValid) {
+                return strict.value ? errors.INVALID_EXPRESSION : 'warning'
+            }
+
             const valid = isValidByDataType(
                 validateBracketValues(value),
-                getDataTypeByAliasKey(schema, aliasObj!.key),
+                getDataType(schema, aliases, key),
                 operator
             )
 
@@ -236,8 +315,16 @@ const isValidByDataType = (
     dataType: string | string[],
     operator: string // TODO: use operator
 ): boolean => {
+    if (dataType === 'any') {
+        return true
+    }
+
     if (Array.isArray(dataType)) {
-        return !!getValueMatch(dataType, str)
+        let isOneOf = !!getValueMatch(dataType, str)
+        for (const type of dataType) {
+            isOneOf = isOneOf || isValidByDataType(str, type, operator)
+        }
+        return isOneOf
     }
 
     switch (dataType) {
@@ -283,6 +370,8 @@ const isValidString = (str: string) => {
 }
 
 const getOperatorByDataType = (dataType: string) => {
+    if (dataType === 'boolean') return ['$eq', '$neq']
+
     return Object.keys(operatorToDataTypeMap).filter((key) => {
         const value = operatorToDataTypeMap[key]
         return value.length === 0 || value.includes(dataType)
@@ -300,19 +389,29 @@ const mapWordsToExpression = (words: string[]): Expression => {
     }
 }
 
-const getDataTypeByAliasKey = (
+const getDataType = (
     schema: Schema,
+    aliases: Alias[],
     key: string
 ): string | string[] | null => {
-    const nestedKey = key.split('.')
+    const aliasedKey = getAliasObjByAlias(aliases, key)?.key ?? key
+
+    const nestedKey = aliasedKey.split('.')
 
     if (nestedKey.length === 1) {
         return (schema[nestedKey[0]] as string | string[]) ?? null
     }
 
     let value = schema[nestedKey[0]] as Schema
+    if (!value) return null
+
     for (let i = 1; i < nestedKey.length; i++) {
+        if (!value) return null
+
         const nextKey = nestedKey[i]
+        if (!value[nextKey] && value['*']) {
+            return 'any'
+        }
         value = (value[nextKey] as Schema) ?? null
     }
 

package/src/utils/parse-smart-query.ts

@@ -1,6 +1,26 @@
 /* eslint-disable no-empty */
 
-import { isFinite, isObject, isString } from 'lodash'
+import { isBoolean, isFinite, isNumber, isObject, isString } from 'lodash'
+
+const GeneratePureValue = (value: any) => {
+    if (typeof value === 'string') {
+        if (value === 'true') {
+            return true
+        }
+        if (value === 'false') {
+            return false
+        }
+
+        try {
+            const num = Number(value)
+            if (isFinite(num)) {
+                return num
+            }
+            return value.replaceAll('"', '').replaceAll("'", '')
+        } catch (e) {}
+    }
+    return value
+}
 
 export const parseSmartQuery = (query: string) => {
     const queryArr = query.split(' OR ')
@@ -15,44 +35,31 @@ export const parseSmartQuery = (query: string) => {
         let key: string
         let value: string | number | object
 
-        const cleanValue = (value: any) => {
-            if (typeof value === 'string') {
-                try {
-                    const num = Number(value)
-                    if (isFinite(num)) {
-                        return num
-                    }
-                } catch (e) {}
-                return value.replaceAll('"', '').replaceAll("'", '')
-            }
-            return value
-        }
-
         for (const term of andTerms) {
             switch (true) {
                 case term.includes('>='):
                     [key, value] = term.split('>=').map((x) => x.trim())
-                    andQuery[key] = { $gte: cleanValue(value) }
+                    andQuery[key] = { $gte: GeneratePureValue(value) }
                     break
                 case term.includes('<='):
                     [key, value] = term.split('<=').map((x) => x.trim())
-                    andQuery[key] = { $lte: cleanValue(value) }
+                    andQuery[key] = { $lte: GeneratePureValue(value) }
                     break
                 case term.includes('>'):
                     [key, value] = term.split('>').map((x) => x.trim())
-                    andQuery[key] = { $gt: cleanValue(value) }
+                    andQuery[key] = { $gt: GeneratePureValue(value) }
                     break
                 case term.includes('<'):
                     [key, value] = term.split('<').map((x) => x.trim())
-                    andQuery[key] = { $lt: cleanValue(value) }
+                    andQuery[key] = { $lt: GeneratePureValue(value) }
                     break
                 case term.includes('!='):
                     [key, value] = term.split('!=').map((x) => x.trim())
-                    andQuery[key] = { $ne: cleanValue(value) }
+                    andQuery[key] = { $ne: GeneratePureValue(value) }
                     break
                 case term.includes('='):
                     [key, value] = term.split('=').map((x) => x.trim())
-                    andQuery[key] = cleanValue(value)
+                    andQuery[key] = GeneratePureValue(value)
                     break
                 case term.includes('IN'):
                     [key, value] = term.split('IN').map((x) => x.trim())
@@ -64,15 +71,15 @@ export const parseSmartQuery = (query: string) => {
                             .split('NOT-IN')
                             .map((x) => x.trim())[1]
                             .split(',')
-                            .map((x) => cleanValue(x.trim()))
-                        andQuery[key] = { $nin: cleanValue(queryValue) }
+                            .map((x) => GeneratePureValue(x.trim()))
+                        andQuery[key] = { $nin: GeneratePureValue(queryValue) }
                     } else {
                         queryValue = term
                             .split('IN')
                             .map((x) => x.trim())[1]
                             .split(',')
-                            .map((x) => cleanValue(x.trim()))
-                        andQuery[key] = { $in: cleanValue(queryValue) }
+                            .map((x) => GeneratePureValue(x.trim()))
+                        andQuery[key] = { $in: GeneratePureValue(queryValue) }
                     }
                     break
             }
@@ -90,104 +97,98 @@ export const stringifySmartQuery = (query: { [key: string]: any }) => {
     let result = ''
 
     for (const key in query) {
-        if (query.hasOwnProperty(key)) {
-            const value = query[key]
-
-            if (key === '$or') {
-                if (Array.isArray(value)) {
-                    const subQueries = value.map(
-                        (subQuery: { [key: string]: any }) =>
-                            stringifySmartQuery(subQuery)
-                    )
-                    result += subQueries.join(' OR ')
-                }
-                continue
+        const value = query[key]
+
+        if (key === '$or') {
+            if (Array.isArray(value)) {
+                const subQueries = value.map(
+                    (subQuery: { [key: string]: any }) =>
+                        stringifySmartQuery(subQuery)
+                )
+                result += subQueries.join(' OR ')
             }
+            continue
+        }
 
-            if (result.length) {
-                result += ' AND '
-            }
+        if (result.length) {
+            result += ' AND '
+        }
 
-            if (isObject(value)) {
-                for (const operator in value) {
-                    if (value.hasOwnProperty(operator)) {
-                        let operatorValue = (
-                            value as {
-                                [key: string]:
-                                    | string
-                                    | number
+        if (isObject(value)) {
+            for (const operator in value) {
+                if (value.hasOwnProperty(operator)) {
+                    let operatorValue = (
+                        value as {
+                            [key: string]: string | number | string[] | number[]
+                        }
+                    )[operator]
+                    switch (operator) {
+                        case '$eq':
+                            result += `${key} = ${
+                                isString(operatorValue)
+                                    ? `'${operatorValue}'`
+                                    : operatorValue
+                            }`
+                            break
+                        case '$ne':
+                            result += `${key} != ${
+                                isString(operatorValue)
+                                    ? `'${operatorValue}'`
+                                    : operatorValue
+                            }`
+                            break
+                        case '$gt':
+                            result += `${key} > ${operatorValue}`
+                            break
+                        case '$gte':
+                            result += `${key} >= ${operatorValue}`
+                            break
+                        case '$lt':
+                            result += `${key} < ${operatorValue}`
+                            break
+                        case '$lte':
+                            result += `${key} <= ${operatorValue}`
+                            break
+                        case '$in':
+                            if (!Array.isArray(operatorValue)) {
+                                operatorValue = [operatorValue] as
                                     | string[]
                                     | number[]
                             }
-                        )[operator]
-                        switch (operator) {
-                            case '$eq':
-                                result += `${key} = ${
-                                    isString(operatorValue)
-                                        ? `'${operatorValue}'`
-                                        : operatorValue
-                                }`
-                                break
-                            case '$ne':
-                                result += `${key} != ${
-                                    isString(operatorValue)
-                                        ? `'${operatorValue}'`
-                                        : operatorValue
-                                }`
-                                break
-                            case '$gt':
-                                result += `${key} > ${operatorValue}`
-                                break
-                            case '$gte':
-                                result += `${key} >= ${operatorValue}`
-                                break
-                            case '$lt':
-                                result += `${key} < ${operatorValue}`
-                                break
-                            case '$lte':
-                                result += `${key} <= ${operatorValue}`
-                                break
-                            case '$in':
-                                if (!Array.isArray(operatorValue)) {
-                                    operatorValue = [operatorValue] as
-                                        | string[]
-                                        | number[]
-                                }
-
-                                const inValues: string = (
-                                    operatorValue as any[]
+
+                            const inValues: string = (operatorValue as any[])
+                                .map((x: string | number) =>
+                                    isString(x) ? `'${x}'` : x
                                 )
-                                    .map((x: string | number) =>
-                                        isString(x) ? `'${x}'` : x
-                                    )
-                                    .join(', ')
-                                result += `${key} IN ${inValues} `
-                                break
-                            case '$nin':
-                                if (!Array.isArray(operatorValue)) {
-                                    operatorValue = [operatorValue] as
-                                        | string[]
-                                        | number[]
-                                }
-
-                                const ninValues: string = (
-                                    operatorValue as any[]
+                                .join(', ')
+                            result += `${key} IN ${inValues} `
+                            break
+                        case '$nin':
+                            if (!Array.isArray(operatorValue)) {
+                                operatorValue = [operatorValue] as
+                                    | string[]
+                                    | number[]
+                            }
+
+                            const ninValues: string = (operatorValue as any[])
+                                .map((x: string | number) =>
+                                    isString(x) ? `'${x}'` : x
                                 )
-                                    .map((x: string | number) =>
-                                        isString(x) ? `'${x}'` : x
-                                    )
-                                    .join(', ')
-
-                                result += `${key} NOT-IN ${ninValues}`
-                                break
-                            default:
-                                throw new Error(`Invalid operator: ${operator}`)
-                        }
+                                .join(', ')
+
+                            result += `${key} NOT-IN ${ninValues}`
+                            break
+                        default:
+                            throw new Error(`Invalid operator: ${operator}`)
                     }
                 }
-            } else {
-                result += `${key} = '${value}'`
             }
+        } else if (isNumber(value)) {
+            result += `${key} = ${value}`
+        } else if (isBoolean(value)) {
+            result += `${key} = ${value}`
+        } else {
+            result += `${key} = '${value}'`
         }
     }