@dataloop-ai/components 0.17.62 → 0.17.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.62",
+  "version": "0.17.64",
   "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/assets/globals.scss

@@ -142,6 +142,8 @@ body {
     --dl-font-size-h2: 20px;
     --dl-font-size-h3: 16px;
     --dl-font-size-h4: 14px;
+    --dl-font-size-h5: 12px;
+    --dl-font-size-h6: 10px;
     --dl-font-size-body: 12px;
     --dl-font-size-small: 10px;
 
@@ -173,6 +175,7 @@ body {
     --dl-color-fill-third: #FBFBFB;
     --dl-color-link: #20ABFA;
     --dl-color-cell-background: #FFFAE2;
+    --dl-color-disabled-slider: #E4E4E4;
     --q-color-positive: #38D079;
     --q-color-warning: #E1B75B;
 
@@ -226,6 +229,7 @@ body {
     --dl-color-fill-third: #9E9E9E1A;
     --dl-color-link: #53B2E8;
     --dl-color-cell-background: #FFFAE2;
+    --dl-color-disabled-slider: #64686D;
     --q-color-positive: #A1E5B6;
     --q-color-warning: #F8D29A;
 

package/src/components/basic/DlPopup/components/PopupHeader.vue

@@ -38,7 +38,7 @@
                     v-else
                     color="dl-color-darker"
                     icon="icon-dl-close"
-                    size="8px"
+                    size="12px"
                 />
             </span>
             <span class="subtitle">{{ subtitle }}</span>
@@ -91,7 +91,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .popup-header {
     max-width: 100%;
-    padding: 0 10px 20px 16px;
+    padding: 16px 10px 20px 16px;
 }
 
 .header-content {
@@ -111,6 +111,7 @@ export default defineComponent({
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-top: 4px;
     cursor: pointer;
     transition: color 200ms;
     &:hover {

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>
@@ -183,7 +183,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 +217,7 @@ import {
 } from './utils/utils'
 import { v4 } from 'uuid'
 import { parseSmartQuery, stringifySmartQuery } from '../../../../utils'
+import { debounce } from 'lodash'
 
 export default defineComponent({
     components: {
@@ -223,7 +232,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 +256,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 +284,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 +319,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 +361,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 +399,7 @@ export default defineComponent({
             preventUpdate,
             selectedOption,
             handleInputModel,
+            debouncedInputModel,
             setFocused,
             findSuggestions,
             toJSON

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/components/compound/DlSlider/DlSlider.vue

@@ -57,7 +57,7 @@
                 <div class="right-container capitalize">
                     <dl-button
                         flat
-                        size="m"
+                        size="12px"
                         label="Reset"
                         :disabled="disabled || readonly"
                         data-test="non-editable-slider-button"

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

@@ -146,7 +146,7 @@ export default defineComponent({
                 color:
                     this.disabled !== true
                         ? getColor(this.color, 'dl-color-secondary')
-                        : 'var(--dl-color-separator)'
+                        : 'var(--dl-color-disabled-slider)'
             }
         },
         thumbStyle(): Record<string, any> {

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

@@ -82,7 +82,7 @@ export default defineComponent({
 <style scoped>
 input[type='number'] {
     width: 31px;
-    height: 12px;
+    height: 20px;
     padding-top: 3px;
     padding-left: 5px;
     padding-bottom: 3px;

package/src/components/compound/DlSlider/sliderStyles.scss

@@ -103,6 +103,9 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      & > * {
+        margin: 0px 5px
+      }
     }
   }
 }

package/src/components/essential/DlTypography/DlTypography.vue

@@ -16,7 +16,7 @@ import { transformOptions } from '../../shared/types'
 
 type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
 
-const sizes = ['h1', 'h2', 'h3', 'h4', 'body', 'small']
+const sizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'small']
 
 export default defineComponent({
     name: 'DlTypography',
@@ -108,6 +108,12 @@ export default defineComponent({
     &--h4 {
         font-size: var(--dl-font-size-h4);
     }
+    &--h5 {
+        font-size: var(--dl-font-size-h5);
+    }
+    &--h6 {
+        font-size: var(--dl-font-size-h6);
+    }
     &--body {
         font-size: var(--dl-font-size-body);
     }

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}'`
         }
     }