@dataloop-ai/components 0.16.45 → 0.16.47

package/src/hooks/use-suggestions.ts

@@ -60,12 +60,22 @@ type Expression = {
 }
 
 const space = ' '
+const dateStartSuggestionString = '(From dd/mm/yyyy)'
+const dateEndSuggestionString = '(To dd/mm/yyyy)'
 const dateIntervalSuggestionString = '(From (dd/mm/yyyy) To (dd/mm/yyyy))'
 
 let localSuggestions: Suggestion[] = []
 
+export const startDatePattern = new RegExp(
+    /(from\s?\d{2}\/\d{2}\/\d{4}\s?|from\s?dd\/mm\/yyyy\s?)/,
+    'gi'
+)
+export const endDatePattern = new RegExp(
+    /(to\s?\d{2}\/\d{2}\/\d{4}\s?|to\s?dd\/mm\/yyyy\s?)/,
+    'gi'
+)
 export const dateIntervalPattern = new RegExp(
-    /\((from\s?\(\d{2}\/\d{2}\/\d{4}\)\s?to\s?\(\d{2}\/\d{2}\/\d{4}\))\)|\((from\s?\(dd\/mm\/yyyy\)\s?to\s?\(dd\/mm\/yyyy\))\)/,
+    /(from\s?\d{2}\/\d{2}\/\d{4}\s?to\s?\d{2}\/\d{2}\/\d{4})|(from\s?dd\/mm\/yyyy\s?to\s?dd\/mm\/yyyy)/,
     'gi'
 )
 
@@ -75,99 +85,99 @@ export const useSuggestions = (schema: Schema, aliases: Alias[]) => {
     const error: Ref<string | null> = ref(null)
 
     const findSuggestions = (input: string) => {
+        input = input.replace(/\s+/g, ' ').trimStart()
         localSuggestions = initialSuggestions
 
         const words = splitByQuotes(input, space)
         const expressions = mapWordsToExpressions(words)
 
-        expressions.forEach(
-            ({ field, operator, value, keyword }: Expression) => {
-                let matchedField: Suggestion | null = null
-                let matchedOperator: Suggestion | null = null
-                let matchedKeyword: Suggestion | null = null
+        for (const { field, operator, value, keyword } of expressions) {
+            let matchedField: Suggestion | null = null
+            let matchedOperator: Suggestion | null = null
+            let matchedKeyword: Suggestion | null = null
 
-                if (!field) return
+            if (!field) continue
 
-                localSuggestions = getMatches(localSuggestions, field)
-                matchedField = getMatch(localSuggestions, field)
+            localSuggestions = getMatches(localSuggestions, field)
+            matchedField = getMatch(localSuggestions, field)
 
-                if (!matchedField && isNextCharSpace(input, field)) {
-                    localSuggestions = []
-                    return
-                }
+            if (!matchedField && isNextCharSpace(input, field)) {
+                localSuggestions = []
+                continue
+            }
 
-                if (!matchedField || !isNextCharSpace(input, matchedField)) {
-                    return
-                }
+            if (!matchedField || !isNextCharSpace(input, matchedField)) {
+                continue
+            }
 
-                const alias = getAliasObjByAlias(aliases, matchedField)
-                if (!alias) return
-                const dataType = getDataTypeByAliasKey(schema, alias.key)
-                if (!dataType) {
-                    localSuggestions = []
-                    return
-                }
+            const alias = getAliasObjByAlias(aliases, matchedField)
+            if (!alias) continue
+            const dataType = getDataTypeByAliasKey(schema, alias.key)
+            if (!dataType) {
+                localSuggestions = []
+                continue
+            }
 
-                const ops: string[] = Array.isArray(dataType)
-                    ? getGenericOperators()
-                    : getOperatorByDataType(dataType)
+            const ops: string[] = Array.isArray(dataType)
+                ? getGenericOperators()
+                : getOperatorByDataType(dataType)
 
-                localSuggestions = getOperators(ops)
+            localSuggestions = getOperators(ops)
 
-                if (!operator) return
+            if (!operator) continue
 
-                localSuggestions = getMatches(localSuggestions, operator)
-                matchedOperator = getMatch(localSuggestions, operator)
+            localSuggestions = getMatches(localSuggestions, operator)
+            matchedOperator = getMatch(localSuggestions, operator)
 
-                if (!matchedOperator && isNextCharSpace(input, operator)) {
-                    localSuggestions = []
-                    return
-                }
+            if (!matchedOperator && isNextCharSpace(input, operator)) {
+                localSuggestions = []
+                continue
+            }
 
-                if (
-                    !matchedOperator ||
-                    !isNextCharSpace(input, matchedOperator)
-                ) {
-                    return
-                }
+            if (!matchedOperator || !isNextCharSpace(input, matchedOperator)) {
+                continue
+            }
 
-                if (Array.isArray(dataType)) {
-                    localSuggestions = dataType
+            if (Array.isArray(dataType)) {
+                localSuggestions = dataType
 
-                    if (!value) return
+                if (!value) continue
 
-                    localSuggestions = getMatches(localSuggestions, value)
-                } else if (
-                    dataType === 'datetime' ||
-                    dataType === 'date' ||
-                    dataType === 'time'
-                ) {
-                    localSuggestions = [dateIntervalSuggestionString]
+                localSuggestions = getMatches(localSuggestions, value)
+            } else if (
+                dataType === 'datetime' ||
+                dataType === 'date' ||
+                dataType === 'time'
+            ) {
+                localSuggestions = [
+                    dateIntervalSuggestionString,
+                    dateStartSuggestionString,
+                    dateEndSuggestionString
+                ]
 
-                    if (!value) return
+                if (!value) continue
 
-                    localSuggestions = getMatches(localSuggestions, value)
-                } else {
-                    localSuggestions = []
-                }
+                localSuggestions = getMatches(localSuggestions, value)
+            } else {
+                localSuggestions = []
+            }
 
-                if (!value || !isNextCharSpace(input, value)) {
-                    return
-                }
+            if (!value || !isNextCharSpace(input, value)) {
+                continue
+            }
 
-                localSuggestions = [Logical.AND, Logical.OR]
+            localSuggestions = [Logical.AND, Logical.OR]
 
-                if (!keyword) return
+            if (!keyword) continue
 
-                localSuggestions = getMatches(localSuggestions, keyword)
-                matchedKeyword = getMatch(localSuggestions, keyword)
+            localSuggestions = getMatches(localSuggestions, keyword)
+            matchedKeyword = getMatch(localSuggestions, keyword)
 
-                if (!matchedKeyword || !isNextCharSpace(input, matchedKeyword))
-                    return
+            if (!matchedKeyword || !isNextCharSpace(input, matchedKeyword))
+                continue
 
-                localSuggestions = initialSuggestions
-            }
-        )
+            localSuggestions = initialSuggestions
+        }
 
         error.value = input.length
             ? getError(schema, aliases, expressions)
@@ -203,12 +213,11 @@ const getError = (
     return expressions
         .filter(({ field, value }) => field !== null && value !== null)
         .reduce<string | null>((acc, { field, value, operator }, _, arr) => {
+            const aliasObj = getAliasObjByAlias(aliases, field)
+            if (!aliasObj) return 'warning'
             const valid = isValidByDataType(
-                value,
-                getDataTypeByAliasKey(
-                    schema,
-                    getAliasObjByAlias(aliases, field)!.key
-                ),
+                validateBracketValues(value),
+                getDataTypeByAliasKey(schema, aliasObj!.key),
                 operator
             )
 
@@ -244,8 +253,18 @@ const isValidByDataType = (
     }
 }
 
+const validateBracketValues = (value: string) => {
+    value = removeBrackets(value)
+    value = value.split(',')[0]
+    return value
+}
+
 const isValidDateIntervalPattern = (str: string) => {
-    return !!str.match(dateIntervalPattern)
+    return (
+        !!str.match(dateIntervalPattern) ||
+        !!str.match(startDatePattern) ||
+        !!str.match(endDatePattern)
+    )
 }
 
 const isValidNumber = (str: string) => {
@@ -309,7 +328,7 @@ const getGenericOperators = () => {
     )
 }
 
-const mapWordsToExpressions = (words: string[]): Expression[] => {
+export const mapWordsToExpressions = (words: string[]): Expression[] => {
     const _words = words.slice()
     const expressions = [mapWordsToExpression(_words.splice(0, 4))]
 
@@ -353,3 +372,7 @@ const isNextCharSpace = (input: string, str: string) => {
 
 const matchStringEnd = (input: string, str: string) =>
     input.lastIndexOf(str + '" ') > -1 || input.lastIndexOf(str + "' ") > -1
+
+export const removeBrackets = (str: string) => {
+    return str.replaceAll('(', '').replaceAll(')', '')
+}

package/src/utils/colors.ts

@@ -4,7 +4,7 @@ export const hexToRgbA = (hex: string, opacity = 1) => {
         const g = parseInt(hex.slice(3, 5), 16)
         const b = parseInt(hex.slice(5, 7), 16)
 
-        if (opacity) {
+        if (opacity || opacity === 0) {
             return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')'
         } else {
             return 'rgb(' + r + ', ' + g + ', ' + b + ')'

package/src/utils/draggable-table.ts

@@ -58,7 +58,7 @@ function isIntersecting(
 }
 
 function getRows(table: HTMLTableElement) {
-    return table.querySelectorAll('tbody tr')
+    return table.querySelectorAll('tbody#draggable tr')
 }
 
 export function applyDraggableRows(
@@ -66,7 +66,7 @@ export function applyDraggableRows(
     vm?: any,
     root?: HTMLDivElement
 ) {
-    const tbody = table.querySelector('tbody')!
+    const tbody = table.querySelector('tbody#draggable')!
 
     let currRow: any = null
     let dragElem: any = null

package/src/utils/index.ts

@@ -12,6 +12,7 @@ export * from './render'
 export * from './component-name-parser'
 export * from './colors'
 export * from './teleport'
+export * from './parse-smart-query'
 
 export const isMobileOrTablet = () => {
     let check = false

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

@@ -0,0 +1,87 @@
+/* eslint-disable no-empty */
+
+import { isFinite } from 'lodash'
+
+export const parseSmartQuery = (query: string) => {
+    const queryArr = query.split(' OR ')
+    const orTerms: { [key: string]: any }[] = []
+
+    for (const query of queryArr) {
+        const andTerms = query.split(' AND ')
+
+        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
+        }
+
+        for (const term of andTerms) {
+            switch (true) {
+                case term.includes('>='):
+                    [key, value] = term.split('>=').map((x) => x.trim())
+                    andQuery[key] = { $gte: cleanValue(value) }
+                    break
+                case term.includes('<='):
+                    [key, value] = term.split('<=').map((x) => x.trim())
+                    andQuery[key] = { $lte: cleanValue(value) }
+                    break
+                case term.includes('>'):
+                    [key, value] = term.split('>').map((x) => x.trim())
+                    andQuery[key] = { $gt: cleanValue(value) }
+                    break
+                case term.includes('<'):
+                    [key, value] = term.split('<').map((x) => x.trim())
+                    andQuery[key] = { $lt: cleanValue(value) }
+                    break
+                case term.includes('!='):
+                    [key, value] = term.split('!=').map((x) => x.trim())
+                    andQuery[key] = { $ne: cleanValue(value) }
+                    break
+                case term.includes('='):
+                    [key, value] = term.split('=').map((x) => x.trim())
+                    andQuery[key] = cleanValue(value)
+                    break
+                case term.includes('IN'):
+                    [key, value] = term.split('IN').map((x) => x.trim())
+                    if (key.includes('NOT-')) {
+                        [key, value] = term
+                            .split('NOT-IN')
+                            .map((x) => x.trim())
+                        queryValue = term
+                            .split('NOT-IN')
+                            .map((x) => x.trim())[1]
+                            .split(',')
+                            .map((x) => cleanValue(x.trim()))
+                        andQuery[key] = { $nin: cleanValue(queryValue) }
+                    } else {
+                        queryValue = term
+                            .split('IN')
+                            .map((x) => x.trim())[1]
+                            .split(',')
+                            .map((x) => cleanValue(x.trim()))
+                        andQuery[key] = { $in: cleanValue(queryValue) }
+                    }
+                    break
+            }
+        }
+
+        orTerms.push(andQuery)
+    }
+
+    const builtQuery = orTerms.length > 1 ? { $or: orTerms } : orTerms[0]
+
+    return builtQuery
+}

package/src/components/compound/DlCharts/types.ts

@@ -1 +0,0 @@
-export * from './types'

package/src/demo/DlDropdownButtonDemo.vue

@@ -1,260 +0,0 @@
-<template>
-    <div>
-        <div style="display: flex; gap: 20px; flex-direction: column">
-            <h2>Splitted</h2>
-            <dl-dropdown-button
-                auto-close
-                outlined
-                split
-                label="Dropdown Button Outlined"
-            >
-                <dl-list>
-                    <dl-list-item clickable>
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Videos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Articles </dl-item-section>
-                    </dl-list-item>
-                </dl-list>
-            </dl-dropdown-button>
-
-            <dl-dropdown-button
-                disabled
-                auto-close
-                outlined
-                split
-                label="Dropdown Button Outlined"
-            >
-                <dl-list>
-                    <dl-list-item clickable>
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Videos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Articles </dl-item-section>
-                    </dl-list-item>
-                </dl-list>
-            </dl-dropdown-button>
-
-            <dl-dropdown-button
-                split
-                label="Dropdown Button Contained"
-            >
-                <dl-list>
-                    <dl-list-item clickable>
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Videos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Articles </dl-item-section>
-                    </dl-list-item>
-                </dl-list>
-            </dl-dropdown-button>
-
-            <dl-dropdown-button
-                v-model="showing"
-                auto-close
-                split
-                :label="name"
-                main-btn-style="width: 120px"
-                @click="onClick"
-            >
-                <dl-list>
-                    <dl-list-item
-                        clickable
-                        @click="() => onClose('Photos')"
-                    >
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item
-                        clickable
-                        @click="() => onClose('Videos and long text')"
-                    >
-                        <dl-item-section>
-                            Videos and long text
-                        </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item
-                        clickable
-                        @click="() => onClose('Articles')"
-                    >
-                        <dl-item-section> Articles </dl-item-section>
-                    </dl-list-item>
-                </dl-list>
-            </dl-dropdown-button>
-        </div>
-
-        <div style="display: flex; gap: 20px; flex-direction: column">
-            <h2>One Button</h2>
-            <dl-dropdown-button
-                auto-close
-                outlined
-                label="Dropdown Button Outlined"
-            >
-                <dl-list>
-                    <dl-list-item clickable>
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Videos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Articles </dl-item-section>
-                    </dl-list-item>
-                </dl-list>
-            </dl-dropdown-button>
-
-            <dl-dropdown-button
-                disabled
-                auto-close
-                outlined
-                label="Dropdown Button Outlined"
-            >
-                <dl-list>
-                    <dl-list-item clickable>
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Videos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Articles </dl-item-section>
-                    </dl-list-item>
-                </dl-list>
-            </dl-dropdown-button>
-
-            <dl-dropdown-button
-                auto-close
-                label="Dropdown Button Contained"
-                max-height="210px"
-            >
-                <dl-list>
-                    <dl-list-item clickable>
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Videos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Articles </dl-item-section>
-                    </dl-list-item>
-                    <dl-list-item clickable>
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Videos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Articles </dl-item-section>
-                    </dl-list-item>
-                    <dl-list-item clickable>
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Videos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item clickable>
-                        <dl-item-section> Articles </dl-item-section>
-                    </dl-list-item>
-                </dl-list>
-            </dl-dropdown-button>
-
-            <dl-dropdown-button
-                auto-close
-                :model-value="showing"
-                :label="name"
-                main-btn-style="width: 150px;"
-                @show="onOpen"
-            >
-                <dl-list>
-                    <dl-list-item
-                        clickable
-                        @click="() => onClose('Photos')"
-                    >
-                        <dl-item-section> Photos </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item
-                        clickable
-                        @click="() => onClose('Videos and long text')"
-                    >
-                        <dl-item-section>
-                            Videos and long text Videos and long text
-                        </dl-item-section>
-                    </dl-list-item>
-
-                    <dl-list-item
-                        clickable
-                        @click="() => onClose('Articles')"
-                    >
-                        <dl-item-section> Articles </dl-item-section>
-                    </dl-list-item>
-                </dl-list>
-            </dl-dropdown-button>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue-demi'
-import {
-    DlListItem,
-    DlItemSection,
-    DlList,
-    DlDropdownButton
-} from '../components'
-
-export default defineComponent({
-    name: 'DlDropdownButtonDemo',
-    components: {
-        DlListItem,
-        DlItemSection,
-        DlList,
-        DlDropdownButton
-    },
-    data() {
-        return {
-            name: 'Dropdown Button Controlled',
-            showing: false
-        }
-    },
-    methods: {
-        onClose(name: string) {
-            this.name = name
-            this.showing = false
-            alert(this.name)
-        },
-        onOpen() {
-            this.showing = true
-        },
-        onClick() {
-            alert(this.name)
-        }
-    }
-})
-</script>

package/src/demo/DlSpinnerDemo.vue

@@ -1,20 +0,0 @@
-<template>
-    <dl-spinner
-        text="Loading data, please wait..."
-        :text-styles="{
-            marginLeft: '10px',
-            color: 'var(--dl-color-tooltip-background)'
-        }"
-    />
-</template>
-
-<script>
-import { defineComponent } from 'vue-demi'
-import { DlSpinner } from '../components'
-
-export default defineComponent({
-    components: {
-        DlSpinner
-    }
-})
-</script>