@dataloop-ai/components 0.16.44 → 0.16.46

package/src/{demo → demos}/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -10,34 +10,8 @@
         <div
             style="width: 100px"
             class="props"
-        >
-            <select
-                id="status_select"
-                class="prop"
-                placeholder="Status type"
-                @input="updateStatusType"
-            >
-                <option value="info">
-                    Info
-                </option>
-                <option value="warning">
-                    Warning
-                </option>
-                <option value="error">
-                    Error
-                </option>
-                <option value="success">
-                    Success
-                </option>
-            </select>
-            <input
-                class="prop"
-                placeholder="Status Messaee"
-                @input="updateStatusMessage"
-            >
-        </div>
+        />
         <dl-smart-search
-            :status="status"
             :aliases="aliases"
             :schema="schema"
             :color-schema="{
@@ -74,10 +48,6 @@ export default defineComponent({
         return {
             switchState: false,
             isLoading: false,
-            status: {
-                type: 'info',
-                message: ''
-            },
             filters: [
                 {
                     label: 'Saved DQL Queries',
@@ -93,7 +63,7 @@ export default defineComponent({
                         },
                         {
                             name: 'Query 3',
-                            query: ''
+                            query: '{"query3": "query3"}'
                         },
                         {
                             name: 'Query 4',
@@ -143,8 +113,6 @@ export default defineComponent({
             ]
         }
     },
-
-    mounted() {},
     methods: {
         handleSearchQuery({ query }: { query: string }) {
             this.isLoading = true
@@ -154,22 +122,6 @@ export default defineComponent({
                 this.isLoading = false
             }, 2000)
         },
-
-        updateStatusType(e: Event) {
-            const newType = (e.target as HTMLInputElement).value
-            this.status = {
-                type: newType,
-                message: this.status.message
-            }
-        },
-        updateStatusMessage(e: Event) {
-            const newMessage = (e.target as HTMLInputElement).value
-            this.status = {
-                type: this.status.type,
-                message: newMessage
-            }
-        },
-
         handleSaveQuery(query: Query) {
             const saveQueryIndex = this.filters[0].queries.findIndex(
                 (q: Query) => q.name === query.name || q.query === query.query

package/src/{demo → demos}/index.ts

@@ -47,9 +47,14 @@ import DlToastDemo from './DlToastDemo.vue'
 import DlChartDoughnutDemo from './DlChartDoughnutDemo.vue'
 import DlLineChartDemo from './DlLineChartDemo.vue'
 import DlSpinner from './DlSpinnerDemo.vue'
+import DlConfusionMatrix from './DlConfusionMatrixDemo.vue'
+import DlToggleButtonDemo from './DlToggleButtonDemo.vue'
 import DlKpiDemo from './DlKpiDemo.vue'
+import DlEllipsisDemo from './DlEllipsisDemo.vue'
+import DlSeparatorDemo from './DlSeparatorDemo.vue'
+import DlCardDemo from './DlCardDemo.vue'
 
-export {
+export default {
     AvatarDemo,
     DlAlertDemo,
     DlProgressChartDemo,
@@ -92,64 +97,17 @@ export {
     DlWidgetDemo,
     DlRadioDemo,
     DlTextHolderDemo,
-    DlToastDemo as DlToastMessageDemo,
+    DlToastDemo,
     DlColumnChartDemo,
     DlSwitchDemo,
     DlChartDoughnutDemo,
     DlBarChartDemo,
     DlLineChartDemo,
-    DlSpinner
-}
-
-export const demoState = {
-    accordion: AccordionDemo,
-    alert: DlAlertDemo,
-    avatar: AvatarDemo,
-    badge: DlBadgeDemo,
-    button: DlButtonDemo,
-    column_chart: DlColumnChartDemo,
-    bar_chart: DlBarChartDemo,
-    line_chart: DlLineChartDemo,
-    checkbox: DlCheckboxDemo,
-    chip: DlChipDemo,
-    color_picker: DlColorPickerDemo,
-    counter: DlCounterDemo,
-    dialog_box: DlDialogBoxDemo,
-    doughnut_chart: DlChartDoughnutDemo,
-    dropdown_button: DropdownButtonDemo,
-    icon: DlIconDemo,
-    link: DlLinkDemo,
-    list: DlListDemo,
-    menu: DlMenuDemo,
-    option_group: DlOptionGroupDemo,
-    pagination: DlPaginationDemo,
-    panel_container: DlPanelContainerDemo,
-    popup: PopupDemo,
-    progress_bar: DlProgressBarDemo,
-    progress_chart: DlProgressChartDemo,
-    kpi: DlKpiDemo,
-    range: DlRangeDemo,
-    search: DlSearchDemo,
-    select: DlSelectDemo,
-    skeleton: DlSkeletonDemo,
-    slider: DlSliderDemo,
-    stepper: DlStepperDemo,
-    table: DlTableDemo,
-    table_td: DlTdDemo,
-    table_th: DlThDemo,
-    table_tr: DlTrDemo,
-    tabs: TabsDemo,
-    input: DlInputDemo,
-    textarea: DlTextareaDemo,
-    text_holder: DlTextHolderDemo,
-    time_picker: DlDateTimeRangeDemo,
-    tooltip: DlTooltipDemo,
-    trend: DlTrendDemo,
-    typography: DlTypographyDemo,
-    widget: DlWidgetDemo,
-    radio: DlRadioDemo,
-    switch: DlSwitchDemo,
-    smart_search: DlSmartSearchDemo,
-    toast: DlToastDemo,
-    spinner: DlSpinner
+    DlSpinner,
+    DlConfusionMatrix,
+    DlToggleButtonDemo,
+    DlEllipsisDemo,
+    DlSeparatorDemo,
+    DlKpiDemo,
+    DlCardDemo
 }

package/src/hooks/use-arrow-navigation.ts

@@ -0,0 +1,58 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue-demi'
+
+export function useArrowNavigation(items: any, isOpen: any) {
+    const selectedItem = ref(null)
+    const highlightedIndex = ref(-1)
+
+    const handleArrowUp = () => {
+        if (highlightedIndex.value > 0) {
+            highlightedIndex.value--
+        }
+    }
+    const handleArrowDown = () => {
+        if (highlightedIndex.value < items.value.length - 1) {
+            highlightedIndex.value++
+        }
+    }
+    const handleEnter = () => {
+        if (
+            highlightedIndex.value >= 0 &&
+            highlightedIndex.value < items.value.length
+        ) {
+            selectedItem.value = items.value[highlightedIndex.value]
+            resetNavigation()
+        }
+    }
+    const resetNavigation = () => {
+        highlightedIndex.value = -1
+    }
+    const navigateList = (event: KeyboardEvent) => {
+        if (!items.value?.length || !isOpen.value) {
+            return
+        }
+        switch (event.key) {
+            case 'ArrowUp':
+                handleArrowUp()
+                break
+            case 'ArrowDown':
+                handleArrowDown()
+                break
+            case 'Enter':
+                handleEnter()
+                break
+        }
+    }
+
+    onMounted(() => {
+        window.addEventListener('keydown', navigateList)
+    })
+    onBeforeUnmount(() => {
+        window.removeEventListener('keydown', navigateList)
+    })
+
+    return {
+        handleEnter,
+        highlightedIndex,
+        selectedItem
+    }
+}

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'