@dataloop-ai/components 0.18.0 → 0.18.2

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 = {
@@ -60,36 +71,86 @@ 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))'
+const dateSuggestionPattern = '(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)/,
+export const datePattern = new RegExp(
+    /([\(']?\d{2}\/\d{2}\/\d{4}[\)']?\s?|\s?\(dd\/mm\/yyyy\)\s?)/,
     'gi'
 )
+export const datePatternNoBrackets =
+    /(\d{2}\/\d{2}\/\d{4}\s?|\s?dd\/mm\/yyyy\s?)/
+
+const mergeWords = (words: string[]) => {
+    const result: string[] = []
+    let merging = false
+    let mergeIndex = -1
+
+    for (let i = 0; i < words.length; ++i) {
+        const currentItem = words[i]
+
+        if (currentItem === 'IN' || currentItem === 'NOT-IN') {
+            merging = true
+            mergeIndex = i + 1
+            result.push(currentItem)
+            continue
+        } else if (
+            Object.values(Logical).includes(currentItem as any) ||
+            Object.values(operators).includes(currentItem as any)
+        ) {
+            merging = false
+        }
+
+        if (merging) {
+            if (!result[mergeIndex]) {
+                result[mergeIndex] = ''
+            }
+            result[mergeIndex] += ' ' + currentItem
+            continue
+        }
+
+        result.push(currentItem)
+    }
+
+    return result
+}
+
+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)
 
-export const useSuggestions = (schema: Schema, aliases: Alias[]) => {
-    const initialSuggestions = aliases.map((alias) => alias.alias)
-    const suggestions: Ref<Suggestion[]> = ref(initialSuggestions)
+    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)
+        const mergedWords = mergeWords(words)
+        const expressions = mapWordsToExpressions(mergedWords)
 
         for (const { field, operator, value, keyword } of expressions) {
             let matchedField: Suggestion | null = null
@@ -98,33 +159,67 @@ export const useSuggestions = (schema: Schema, aliases: Alias[]) => {
 
             if (!field) continue
 
-            localSuggestions = getMatches(localSuggestions, field)
-            matchedField = getMatch(localSuggestions, field)
+            const fieldSeparated: any = field.split('.')
+
+            if (fieldSeparated.length > 1) {
+                localSuggestions = []
+                matchedField = field
+            } else {
+                localSuggestions = getMatches(localSuggestions, field)
+                matchedField = getMatch(localSuggestions, field)
+            }
 
             if (!matchedField && isNextCharSpace(input, field)) {
                 localSuggestions = []
                 continue
             }
 
-            if (!matchedField || !isNextCharSpace(input, matchedField)) {
+            if (
+                !matchedField ||
+                (!isNextCharSpace(input, matchedField) &&
+                    fieldSeparated.length === 1)
+            ) {
                 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
             }
 
+            if (operator && (!value || value === '')) {
+                const valueSuggestion = getValueSuggestions(dataType, operator)
+                if (valueSuggestion) {
+                    localSuggestions = valueSuggestion
+                    continue
+                }
+            }
+
             const ops: string[] = Array.isArray(dataType)
                 ? getGenericOperators()
                 : getOperatorByDataType(dataType)
 
             localSuggestions = getOperators(ops)
 
-            if (!operator) continue
+            if (!operator) {
+                const dotSeparated = matchedField.split('.').filter((el) => el)
+                let fieldOf = schema
+                for (const key of dotSeparated) {
+                    fieldOf = fieldOf[key] as Schema
+                }
+
+                if (isObject(fieldOf) && !Array.isArray(fieldOf)) {
+                    const toConcat: string[] = []
+                    for (const key of Object.keys(fieldOf)) {
+                        if (key === '*') continue
+                        toConcat.push(`.${key}`)
+                    }
+                    localSuggestions = localSuggestions.concat(toConcat)
+                }
+
+                continue
+            }
 
             localSuggestions = getMatches(localSuggestions, operator)
             matchedOperator = getMatch(localSuggestions, operator)
@@ -139,7 +234,9 @@ export const useSuggestions = (schema: Schema, aliases: Alias[]) => {
             }
 
             if (Array.isArray(dataType)) {
-                localSuggestions = dataType
+                localSuggestions = dataType.filter(
+                    (type) => !knownDataTypes.includes(type)
+                )
 
                 if (!value) continue
 
@@ -149,11 +246,7 @@ export const useSuggestions = (schema: Schema, aliases: Alias[]) => {
                 dataType === 'date' ||
                 dataType === 'time'
             ) {
-                localSuggestions = [
-                    dateIntervalSuggestionString,
-                    dateStartSuggestionString,
-                    dateEndSuggestionString
-                ]
+                localSuggestions = [dateSuggestionPattern]
 
                 if (!value) continue
 
@@ -176,11 +269,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 +287,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 +334,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 +374,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) {
@@ -261,11 +407,7 @@ const validateBracketValues = (value: string) => {
 }
 
 const isValidDateIntervalPattern = (str: string) => {
-    return (
-        !!str.match(dateIntervalPattern) ||
-        !!str.match(startDatePattern) ||
-        !!str.match(endDatePattern)
-    )
+    return !!str.match(datePatternNoBrackets)
 }
 
 const isValidNumber = (str: string) => {
@@ -283,10 +425,18 @@ const isValidString = (str: string) => {
 }
 
 const getOperatorByDataType = (dataType: string) => {
-    return Object.keys(operatorToDataTypeMap).filter((key) => {
+    if (dataType === 'boolean') return ['$eq', '$neq']
+
+    if (dataType === 'object') {
+        return []
+    }
+
+    const operators = Object.keys(operatorToDataTypeMap).filter((key) => {
         const value = operatorToDataTypeMap[key]
         return value.length === 0 || value.includes(dataType)
     })
+
+    return operators
 }
 
 const getOperators = (op: string[]) => op.map((o) => operators[o])
@@ -300,22 +450,32 @@ 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
 
-    if (nestedKey.length === 1) {
-        return (schema[nestedKey[0]] as string | string[]) ?? null
-    }
+    const nestedKey = aliasedKey.split('.').filter((el) => el)
 
     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
     }
 
+    if (isObject(value) && !Array.isArray(value)) {
+        return 'object'
+    }
+
     return value as unknown as string | string[] | null
 }
 
@@ -381,3 +541,33 @@ export const removeBrackets = (str: string) => {
 const removeQuotes = (str: string) => {
     return str.replaceAll('"', '').replaceAll("'", '')
 }
+
+const getValueSuggestions = (dataType: string | string[], operator: string) => {
+    const types: string[] = Array.isArray(dataType) ? dataType : [dataType]
+    const suggestion: string[] = []
+
+    if (Array.isArray(dataType)) {
+        suggestion.push(
+            ...dataType.filter((type) => !knownDataTypes.includes(type))
+        )
+    }
+
+    for (const type of types) {
+        switch (type) {
+            case 'boolean':
+                if (operator === '=' || operator === '!=') {
+                    suggestion.push('true', 'false')
+                }
+                break
+            case 'date':
+            case 'time':
+            case 'datetime':
+                suggestion.push(dateSuggestionPattern)
+            default:
+                // do nothing
+                break
+        }
+    }
+
+    return suggestion
+}

package/src/hooks/use-transition.ts

@@ -1,6 +1,13 @@
-import { ref, computed, watch, nextTick, Ref } from 'vue-demi'
+import { computed, watch, nextTick, Ref } from 'vue-demi'
 
 export const useTransitionProps = {
+    /**
+     * The duration of the transition in milliseconds.
+     * @default 300
+     * @type {number}
+     *
+     * Disabled for Vue2
+     */
     transitionDuration: {
         type: Number,
         default: 300
@@ -13,11 +20,10 @@ export default function (
     },
     showing: Ref<boolean>
 ) {
-    const transitionState = ref(showing.value)
-
     watch(showing, (val) => {
         nextTick(() => {
-            transitionState.value = val
+            if (showing.value === val) return
+            showing.value = val
         })
     })
 

package/src/index.ts

@@ -1,7 +1,28 @@
-import { install } from 'vue-demi'
+import { computed, install, reactive } from 'vue-demi'
 
 install()
 
+// @ts-ignore
+window.DlComponents = window.DlComponents || {
+    state: reactive({}),
+    setTheme: (theme: 'light' | 'dark') => {
+        // @ts-ignore
+        window.DlComponents.state.theme = theme
+    },
+    get theme(): 'light' | 'dark' {
+        // @ts-ignore
+        return window.DlComponents.state.theme
+    },
+    isDark: computed(() => {
+        // @ts-ignore
+        return window.DlComponents.state.theme === 'dark'
+    }),
+    isLight: computed(() => {
+        // @ts-ignore
+        return window.DlComponents.state.theme === 'light'
+    })
+}
+
 export * from './components'
 import DlComponentsDemo from './App.vue'
 export { DlComponentsDemo }

package/src/layouts/DlDatasetBrowser/DemoComponents/DatasetFooter.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="footer-content">
+        <div style="width: 300px">
+            <DlSlider
+                text="Thumb size"
+                editable
+            />
+        </div>
+        <div style="width: 100%; display: flex; padding-left: 20px">
+            <dl-pagination
+                v-model="page"
+                :rows-per-page="rowsPerPage"
+                :boundary-numbers="boundaryNumbers"
+                :boundary-links="boundaryLinks"
+                :direction-links="directionLinks"
+                :max-pages="maxPages"
+                :disabled="disabled"
+                :with-legend="withLegend"
+                :total-items="total"
+                :items-name="itemsName"
+                :with-quick-navigation="withQuickNavigation"
+                :with-rows-per-page="withRowsPerPage"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import { DlSlider, DlPagination } from '../../../components'
+
+export default defineComponent({
+    name: 'DatasetFooter',
+    components: {
+        DlSlider,
+        DlPagination
+    },
+    setup() {
+        const page = ref(18)
+        const rowsPerPage = ref(10)
+        const boundaryNumbers = ref(true)
+        const boundaryLinks = ref(true)
+        const directionLinks = ref(true)
+        const maxPages = ref(6)
+        const disabled = ref(false)
+        const withLegend = ref(true)
+        const total = ref(200)
+        const itemsName = ref('Rows')
+        const withQuickNavigation = ref(true)
+        const withRowsPerPage = ref(true)
+
+        return {
+            page,
+            rowsPerPage,
+            boundaryNumbers,
+            boundaryLinks,
+            directionLinks,
+            maxPages,
+            disabled,
+            withLegend,
+            total,
+            itemsName,
+            withQuickNavigation,
+            withRowsPerPage
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.footer-content {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding: 0 15px 0 15px;
+    gap: 20px;
+}
+</style>

package/src/layouts/DlDatasetBrowser/DemoComponents/DatasetHeader.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <navbar-kpi />
+        <navbar-search />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import NavbarKpi from './NavbarKpi.vue'
+import NavbarSearch from './NavbarSearch.vue'
+
+export default defineComponent({
+    name: 'DatasetHeader',
+    components: {
+        NavbarKpi,
+        NavbarSearch
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/layouts/DlDatasetBrowser/DemoComponents/DatasetLeftDrawer.vue

@@ -0,0 +1,96 @@
+<template>
+    <div
+        class="left-drawer-content"
+        :style="cssVars"
+    >
+        <div style="padding: 10px">
+            <div class="left-drawer-content__toggle-icon">
+                <dl-button
+                    flat
+                    color="secondary"
+                    :icon="expandIcon"
+                    @click="onToggle"
+                />
+            </div>
+            <div style="padding: 40px 0 10px">
+                <dl-typography
+                    size="12px"
+                    color="dl-color-dark"
+                >
+                    Search in:
+                </dl-typography>
+            </div>
+            <dl-radio
+                v-model="checkModel"
+                label="All Dataset items"
+                :value="1"
+            />
+            <dl-radio
+                v-model="checkModel"
+                label="Folders"
+                :value="2"
+            />
+            <dl-radio
+                v-model="checkModel"
+                label="Tasks"
+                :value="3"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi'
+import { DlRadio, DlTypography, DlButton } from '../../../components'
+
+export default defineComponent({
+    name: 'DatasetLeftDrawer',
+    components: {
+        DlRadio,
+        DlTypography,
+        DlButton
+    },
+    setup() {
+        const LARGE_WIDTH = '300px'
+        const SMALL_WIDTH = '50px'
+        const leftDrawerContentWidth = ref(LARGE_WIDTH)
+        const isExpanded = ref(true)
+        const checkModel = ref('')
+
+        const onToggle = () => {
+            isExpanded.value = !isExpanded.value
+            leftDrawerContentWidth.value = isExpanded.value
+                ? LARGE_WIDTH
+                : SMALL_WIDTH
+        }
+        const expandIcon = computed(() =>
+            isExpanded.value ? 'icon-dl-expand' : 'icon-dl-collapse'
+        )
+        const cssVars = computed(() => {
+            return {
+                '--left-drawer-content-width': leftDrawerContentWidth.value
+            }
+        })
+
+        return {
+            checkModel,
+            onToggle,
+            expandIcon,
+            cssVars
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.left-drawer-content {
+    width: var(--left-drawer-content-width);
+    position: relative;
+    transition: all 300ms;
+
+    &__toggle-icon {
+        position: absolute;
+        right: 0;
+    }
+}
+</style>