@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -1,58 +1,144 @@
 /* eslint-disable no-empty */
 
-import { isFinite, isObject, isString } from 'lodash'
+import { isBoolean, isFinite, isNumber, isObject, isString } from 'lodash'
 
+export function isDatePattern(str: string) {
+    const datePattern = new RegExp(
+        /([\(']?\d{2}\/\d{2}\/\d{4}[\)']?\s?|\s?\(dd\/mm\/yyyy\)\s?)/,
+        'gi'
+    )
+    const dates = str.match(datePattern) ?? []
+    return dates.length > 0
+}
+
+const GeneratePureValue = (value: any) => {
+    if (value === '') {
+        return null
+    }
+
+    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
+}
+
+const Operators: string[] = ['>=', '<=', '!=', '=', '>', '<', 'IN', 'NOT-IN']
+
+/**
+ * Method to convert a DlSmartSearch query string to Mongo based JSON query
+ *
+ * @param { string } query DlSmartSearch query string
+ * @returns Mongo based JSON
+ */
 export const parseSmartQuery = (query: string) => {
     const queryArr = query.split(' OR ')
+    for (let i = 0; i < queryArr.length; i++) {
+        const term: string = queryArr[i]
+        let withOperator = false
+        if (Operators.includes(term.split(' ')[1])) {
+            withOperator = true
+        }
+
+        if (!withOperator) {
+            if (i > 0) {
+                queryArr[i - 1] += ` OR ${term}`
+                queryArr.splice(i, 1)
+            }
+        }
+    }
     const orTerms: { [key: string]: any }[] = []
 
     for (const query of queryArr) {
         const andTerms = query.split(' AND ')
+        for (let i = 0; i < andTerms.length; i++) {
+            const term: string = andTerms[i]
+            let withOperator = false
+            for (const op of Operators) {
+                if (term.includes(op)) {
+                    withOperator = true
+                    break
+                }
+            }
+
+            if (!withOperator) {
+                if (i > 0) {
+                    andTerms[i - 1] += ` AND ${term}`
+                    andTerms.splice(i, 1)
+                }
+            }
+        }
 
         const andQuery: { [key: string]: any } = {}
         let queryValue: any
 
         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
-        }
+        let pureValue:
+            | string
+            | number
+            | object
+            | boolean
+            | null
+            | (string | number | object | boolean)[]
 
         for (const term of andTerms) {
+            pureValue = null
+
             switch (true) {
                 case term.includes('>='):
                     [key, value] = term.split('>=').map((x) => x.trim())
-                    andQuery[key] = { $gte: cleanValue(value) }
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue !== null) {
+                        andQuery[key] = { $gte: pureValue }
+                    }
                     break
                 case term.includes('<='):
                     [key, value] = term.split('<=').map((x) => x.trim())
-                    andQuery[key] = { $lte: cleanValue(value) }
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue !== null) {
+                        andQuery[key] = { $lte: pureValue }
+                    }
                     break
                 case term.includes('>'):
                     [key, value] = term.split('>').map((x) => x.trim())
-                    andQuery[key] = { $gt: cleanValue(value) }
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue !== null) {
+                        andQuery[key] = { $gt: pureValue }
+                    }
                     break
                 case term.includes('<'):
                     [key, value] = term.split('<').map((x) => x.trim())
-                    andQuery[key] = { $lt: cleanValue(value) }
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue !== null) {
+                        andQuery[key] = { $lt: pureValue }
+                    }
                     break
                 case term.includes('!='):
                     [key, value] = term.split('!=').map((x) => x.trim())
-                    andQuery[key] = { $ne: cleanValue(value) }
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue !== null) {
+                        andQuery[key] = { $ne: pureValue }
+                    }
                     break
                 case term.includes('='):
                     [key, value] = term.split('=').map((x) => x.trim())
-                    andQuery[key] = cleanValue(value)
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue !== null) {
+                        andQuery[key] = pureValue
+                    }
                     break
                 case term.includes('IN'):
                     [key, value] = term.split('IN').map((x) => x.trim())
@@ -64,15 +150,25 @@ 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()))
+                            .filter((x) => x)
+
+                        pureValue = GeneratePureValue(queryValue)
+                        if (pureValue !== null && Array.isArray(pureValue)) {
+                            andQuery[key] = { $nin: pureValue }
+                        }
                     } 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()))
+                            .filter((x) => x)
+
+                        pureValue = GeneratePureValue(queryValue)
+                        if (pureValue !== null && Array.isArray(pureValue)) {
+                            andQuery[key] = { $in: pureValue }
+                        }
                     }
                     break
             }
@@ -86,108 +182,110 @@ export const parseSmartQuery = (query: string) => {
     return builtQuery
 }
 
+/**
+ * Method to convert a Mongo based JSON query to a DlSmartSearch query string
+ *
+ * @param { { [key: string]: any } } query Mongo based JSON that represents a query
+ * @returns DlSmartSearch query string
+ */
 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 (result.length) {
-                result += ' AND '
+        if (key === '$or') {
+            if (Array.isArray(value)) {
+                const subQueries = value.map(
+                    (subQuery: { [key: string]: any }) =>
+                        stringifySmartQuery(subQuery)
+                )
+                result += subQueries.join(' OR ')
             }
+            continue
+        }
 
-            if (isObject(value)) {
-                for (const operator in value) {
-                    if (value.hasOwnProperty(operator)) {
-                        let operatorValue = (
-                            value as {
-                                [key: string]:
-                                    | string
-                                    | number
+        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 | 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 if (isDatePattern(value)) {
+            result += `${key} = (${value})`
+        } else {
+            result += `${key} = '${value}'`
         }
     }
 

package/src/utils/portal.ts

@@ -19,13 +19,13 @@ export function closePortalMenus(vm: any, evt: Event) {
             if (vm.$props.separateClosePopup === true) {
                 return getParentVm(vm)
             }
-        } else if (vm.__dlPortalInnerRef !== void 0) {
+        } else if (vm.__dlPortalInnerRef) {
             // treat it as point of separation if parent is DlPopupProxy
             // (so mobile matches desktop behavior)
             // and hide it too
             const parent = getParentVm(vm)
 
-            if (parent !== void 0 && parent.$options.name === 'DlPopupProxy') {
+            if (parent && parent.$options.name === 'DlPopupProxy') {
                 vm.hide(evt)
                 return parent
             } else {
@@ -34,12 +34,12 @@ export function closePortalMenus(vm: any, evt: Event) {
         }
 
         vm = getParentVm(vm)
-    } while (vm !== void 0 && vm !== null)
+    } while (vm)
 }
 
 export function closePortals(vm: any, evt: Event, depth: number) {
-    while (depth !== 0 && vm !== void 0 && vm !== null) {
-        if (vm.__dlPortalInnerRef !== void 0) {
+    while (depth !== 0 && vm) {
+        if (vm.__dlPortalInnerRef) {
             depth--
 
             if (vm.$options.name === 'DlMenu') {

package/src/utils/position-engine.ts

@@ -84,7 +84,7 @@ export function parsePosition(pos: string): ParsedPosition {
 export function getAnchorProps(el: HTMLElement, offset: number[]) {
     let { top, left, right, bottom, width, height } = el.getBoundingClientRect()
 
-    if (offset !== void 0) {
+    if (offset) {
         top -= offset[1]
         left -= offset[0]
         bottom += offset[1]
@@ -101,8 +101,8 @@ export function getAnchorProps(el: HTMLElement, offset: number[]) {
         bottom,
         width,
         height,
-        middle: left + (right - left) / 2,
-        center: top + (bottom - top) / 2
+        middle: left + (right - left) / 2 + offset[0] ?? 0,
+        center: top + (bottom - top) / 2 + offset[1] ?? 0
     }
 }
 
@@ -145,7 +145,7 @@ interface ElementStyle {
 export function setPosition(cfg: PositionConfig) {
     const isMobile = isMobileOrTablet()
 
-    if (isMobile && window.visualViewport !== void 0) {
+    if (isMobile && window.visualViewport) {
         // uses the dl-position-engine CSS class
 
         const el = document.body.style
@@ -169,7 +169,7 @@ export function setPosition(cfg: PositionConfig) {
     // the new positioning
     const { scrollLeft, scrollTop } = cfg.el!
 
-    if (cfg.absoluteOffset === void 0) {
+    if (!cfg.absoluteOffset) {
         anchorProps = getAnchorProps(cfg.anchorEl, cfg.offset)
     } else {
         const { top: anchorTop, left: anchorLeft } =
@@ -245,7 +245,7 @@ export function setPosition(cfg: PositionConfig) {
         left: props.left + 'px'
     }
 
-    if (props.maxHeight !== void 0) {
+    if (props.maxHeight) {
         elStyle.maxHeight = props.maxHeight + 'px'
 
         if (anchorProps.height > props.maxHeight) {
@@ -253,7 +253,7 @@ export function setPosition(cfg: PositionConfig) {
         }
     }
 
-    if (props.maxWidth !== void 0) {
+    if (props.maxWidth) {
         elStyle.maxWidth = props.maxWidth + 'px'
 
         if (anchorProps.width > props.maxWidth) {

package/src/utils/render.ts

@@ -18,7 +18,7 @@ export const createElement = (
  * so it's merged with the possible slot
  */
 export function mergeSlot(slot: any, source: any) {
-    return slot !== void 0 ? source.concat(slot()) : source
+    return slot ? source.concat(slot()) : source
 }
 
 export const hSlot = (

package/src/utils/scroll.ts

@@ -14,8 +14,8 @@ export function getScrollTarget(
 ) {
     let target = getElement(targetEl)
 
-    if (target === void 0) {
-        if (el === void 0 || el === null) {
+    if (!target) {
+        if (!el) {
             return window
         }
 

package/src/utils/selection.ts

@@ -1,11 +1,11 @@
 export function clearSelection() {
-    if (window.getSelection !== void 0) {
+    if (window.getSelection) {
         const selection = window.getSelection()
         if (!selection) return
 
-        if (selection.empty !== void 0) {
+        if (selection.empty) {
             selection.empty()
-        } else if (selection.removeAllRanges !== void 0) {
+        } else if (selection.removeAllRanges) {
             selection.removeAllRanges()
             if ('ontouchstart' in window) {
                 selection.addRange(document.createRange())

package/vite.config.ts

@@ -13,9 +13,17 @@ export default defineConfig({
         },
         coverage: {
             reporter: ['lcovonly', 'text']
-        }
+        },
+        exclude: [
+            'node_modules/**/*.spec.js',
+            'node_modules/**/*.spec.ts',
+            'node_modules/**/*.test.js',
+            'node_modules/**/*.test.ts',
+            'misc'
+        ]
     },
     optimizeDeps: {
+        include: ['highlight.js'],
         exclude: ['vue-demi']
     },
     define: {