@dataloop-ai/components 0.13.0

package/src/hooks/use-suggestions.ts

@@ -0,0 +1,355 @@
+import { Ref, ref } from 'vue-demi'
+import { splitByQuotes } from '../utils/splitByQuotes'
+
+export type Schema = {
+    [key: string]:
+        | string
+        | number
+        | boolean
+        | (number | boolean | string)[]
+        | Schema
+}
+
+export type Alias = {
+    alias: string
+    key: string
+}
+
+type Operators = {
+    [key: string]: string
+}
+
+export enum Logical {
+    AND = 'AND',
+    OR = 'OR'
+}
+
+export const operators: Operators = {
+    $eq: '=', // all types
+    $neq: '!=', // all types
+    $gt: '>', // number, date, datetime, time
+    $gte: '>=', // number, date, datetime, time
+    $lt: '<', // number, date, datetime, time
+    $lte: '<=', // number, date, datetime, time
+    $in: 'IN', // all types
+    $nin: 'NOT-IN' // all types
+}
+
+type OperatorToDataTypeMap = {
+    [key: string]: string[]
+}
+
+const operatorToDataTypeMap: OperatorToDataTypeMap = {
+    $eq: [],
+    $neq: [],
+    $gt: ['number', 'date', 'datetime', 'time'],
+    $gte: ['number', 'date', 'datetime', 'time'],
+    $lt: ['number', 'date', 'datetime', 'time'],
+    $lte: ['number', 'date', 'datetime', 'time'],
+    $in: [],
+    $nin: []
+}
+
+type Suggestion = string
+
+type Expression = {
+    field: string | null
+    operator: string | null
+    value: string | null
+    keyword: string | null
+}
+
+const space = ' '
+const dateIntervalSuggestionString = '(From (dd/mm/yyyy) To (dd/mm/yyyy))'
+
+let localSuggestions: Suggestion[] = []
+
+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\))\)/,
+    'gi'
+)
+
+export const useSuggestions = (schema: Schema, aliases: Alias[]) => {
+    const initialSuggestions = aliases.map((alias) => alias.alias)
+    const suggestions: Ref<Suggestion[]> = ref(initialSuggestions)
+    const error: Ref<string | null> = ref(null)
+
+    const findSuggestions = (input: string) => {
+        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
+
+                if (!field) return
+
+                localSuggestions = getMatches(localSuggestions, field)
+                matchedField = getMatch(localSuggestions, field)
+
+                if (!matchedField && isNextCharSpace(input, field)) {
+                    localSuggestions = []
+                    return
+                }
+
+                if (!matchedField || !isNextCharSpace(input, matchedField)) {
+                    return
+                }
+
+                const alias = getAliasObjByAlias(aliases, matchedField)
+                if (!alias) return
+                const dataType = getDataTypeByAliasKey(schema, alias.key)
+                if (!dataType) {
+                    localSuggestions = []
+                    return
+                }
+
+                const ops: string[] = Array.isArray(dataType)
+                    ? getGenericOperators()
+                    : getOperatorByDataType(dataType)
+
+                localSuggestions = getOperators(ops)
+
+                if (!operator) return
+
+                localSuggestions = getMatches(localSuggestions, operator)
+                matchedOperator = getMatch(localSuggestions, operator)
+
+                if (!matchedOperator && isNextCharSpace(input, operator)) {
+                    localSuggestions = []
+                    return
+                }
+
+                if (
+                    !matchedOperator ||
+                    !isNextCharSpace(input, matchedOperator)
+                ) {
+                    return
+                }
+
+                if (Array.isArray(dataType)) {
+                    localSuggestions = dataType
+
+                    if (!value) return
+
+                    localSuggestions = getMatches(localSuggestions, value)
+                } else if (
+                    dataType === 'datetime' ||
+                    dataType === 'date' ||
+                    dataType === 'time'
+                ) {
+                    localSuggestions = [dateIntervalSuggestionString]
+
+                    if (!value) return
+
+                    localSuggestions = getMatches(localSuggestions, value)
+                } else {
+                    localSuggestions = []
+                }
+
+                if (!value || !isNextCharSpace(input, value)) {
+                    return
+                }
+
+                localSuggestions = [Logical.AND, Logical.OR]
+
+                if (!keyword) return
+
+                localSuggestions = getMatches(localSuggestions, keyword)
+                matchedKeyword = getMatch(localSuggestions, keyword)
+
+                if (!matchedKeyword || !isNextCharSpace(input, matchedKeyword))
+                    return
+
+                localSuggestions = initialSuggestions
+            }
+        )
+
+        error.value = input.length
+            ? getError(schema, aliases, expressions)
+            : null
+
+        suggestions.value = localSuggestions
+    }
+
+    return { suggestions, findSuggestions, error }
+}
+
+const errors = {
+    INVALID_EXPRESSION: 'Invalid Expression',
+    INVALID_VALUE: (field: string) => `Invalid value for "${field}" field`
+}
+
+const getError = (
+    schema: Schema,
+    aliases: Alias[],
+    expressions: Expression[]
+): string | null => {
+    const hasErrorInStructure = expressions
+        .flatMap((exp) => Object.values(exp))
+        .some((el, index, arr) => {
+            const isLastValue = index === arr.length - 1
+            return (isLastValue && el) || (!isLastValue && !el)
+        })
+
+    if (hasErrorInStructure) {
+        return errors.INVALID_EXPRESSION
+    }
+
+    return expressions
+        .filter(({ field, value }) => field !== null && value !== null)
+        .reduce<string | null>((acc, { field, value, operator }, _, arr) => {
+            const valid = isValidByDataType(
+                value,
+                getDataTypeByAliasKey(
+                    schema,
+                    getAliasObjByAlias(aliases, field)!.key
+                ),
+                operator
+            )
+
+            if (!valid) {
+                arr.splice(1)
+                return (acc = errors.INVALID_VALUE(field))
+            }
+
+            return (acc = null)
+        }, null)
+}
+
+const isValidByDataType = (
+    str: string,
+    dataType: string | string[],
+    operator: string // TODO: use operator
+): boolean => {
+    if (Array.isArray(dataType)) {
+        return !!getValueMatch(dataType, str)
+    }
+
+    switch (dataType) {
+        case 'number':
+            return isValidNumber(str)
+        case 'boolean':
+            return isValidBoolean(str)
+        case 'string':
+            return isValidString(str)
+        case 'date':
+        case 'datetime':
+        case 'time':
+            return isValidDateIntervalPattern(str)
+    }
+}
+
+const isValidDateIntervalPattern = (str: string) => {
+    return !!str.match(dateIntervalPattern)
+}
+
+const isValidNumber = (str: string) => {
+    return !isNaN(Number(str))
+}
+
+const isValidBoolean = (str: string) => {
+    return true.toString() === str || false.toString() === str
+}
+
+const isValidString = (str: string) => {
+    return !!str.match(
+        /^('[A-Za-z0-9._~()'!*:@,;+?-]*')|("[A-Za-z0-9._~()'!*:@,;+?-]*")$/
+    )
+}
+
+const getOperatorByDataType = (dataType: string) => {
+    return Object.keys(operatorToDataTypeMap).filter((key) => {
+        const value = operatorToDataTypeMap[key]
+        return value.length === 0 || value.includes(dataType)
+    })
+}
+
+const getOperators = (op: string[]) => op.map((o) => operators[o])
+
+const mapWordsToExpression = (words: string[]): Expression => {
+    return {
+        field: words[0] ?? null,
+        operator: words[1] ?? null,
+        value: words[2] ?? null,
+        keyword: words[3] ?? null
+    }
+}
+
+const getDataTypeByAliasKey = (
+    schema: Schema,
+    key: string
+): string | string[] | null => {
+    const nestedKey = key.split('.')
+
+    if (nestedKey.length === 1) {
+        return (schema[nestedKey[0]] as string | string[]) ?? null
+    }
+
+    let value = schema[nestedKey[0]] as Schema
+    for (let i = 1; i < nestedKey.length; i++) {
+        const nextKey = nestedKey[i]
+        value = (value[nextKey] as Schema) ?? null
+    }
+
+    return value as unknown as string | string[] | null
+}
+
+const getAliasObjByAlias = (aliases: Alias[], alias: string): Alias | null => {
+    return aliases.find((el) => el.alias === alias)
+}
+
+const getGenericOperators = () => {
+    return Object.keys(operatorToDataTypeMap).filter(
+        (key) => operatorToDataTypeMap[key].length === 0
+    )
+}
+
+const mapWordsToExpressions = (words: string[]): Expression[] => {
+    const _words = words.slice()
+    const expressions = [mapWordsToExpression(_words.splice(0, 4))]
+
+    while (_words.length) {
+        expressions.push(mapWordsToExpression(_words.splice(0, 4)))
+    }
+
+    return expressions
+}
+
+const insensitive = (str: string): string => str.toLowerCase()
+
+const getMatch = (strArr: string[], str: string) =>
+    strArr.find((val) => insensitive(val) === insensitive(str)) ?? null
+
+const getValueMatch = (strArr: string[], str: string | number | boolean) => {
+    return (
+        strArr.find((val) =>
+            val.toString().charAt(0) === '"' && typeof str === 'string'
+                ? insensitive(val.replaceAll('"', '')) === insensitive(str)
+                : val.toString() === str.toString()
+        ) ?? null
+    )
+}
+const getMatches = (strArr: string[], str: string | number | boolean) =>
+    strArr.filter((val) =>
+        insensitive(val.toString()).includes(insensitive(str.toString()))
+    )
+
+const isNextCharSpace = (input: string, str: string) => {
+    const insensitiveInput = insensitive(input)
+
+    return (
+        (insensitiveInput.lastIndexOf(insensitive(str)) > -1 &&
+            insensitiveInput[
+                insensitiveInput.lastIndexOf(insensitive(str)) + str.length
+            ] === space) ||
+        matchStringEnd(input, str)
+    )
+}
+
+const matchStringEnd = (input: string, str: string) =>
+    input.lastIndexOf(str + '" ') > -1 || input.lastIndexOf(str + "' ") > -1

package/src/hooks/use-tick.ts

@@ -0,0 +1,32 @@
+import { nextTick, onBeforeUnmount } from 'vue-demi'
+
+/*
+ * Usage:
+ *    registerTick(fn)
+ *    registerTick(fn)
+ */
+
+export default function () {
+    let tickFn: Function | undefined
+
+    onBeforeUnmount(() => {
+        tickFn = void 0
+    })
+
+    return {
+        registerTick(fn: Function) {
+            tickFn = fn
+
+            nextTick(() => {
+                if (tickFn === fn) {
+                    tickFn()
+                    tickFn = void 0
+                }
+            })
+        },
+
+        removeTick() {
+            tickFn = void 0
+        }
+    }
+}

package/src/hooks/use-timeout.ts

@@ -0,0 +1,20 @@
+import { onBeforeUnmount } from 'vue-demi'
+
+export default function () {
+    let timer: number
+
+    onBeforeUnmount(() => {
+        clearTimeout(timer)
+    })
+
+    return {
+        registerTimeout(fn: Function, delay: number) {
+            clearTimeout(timer)
+            timer = setTimeout(fn, delay)
+        },
+
+        removeTimeout() {
+            clearTimeout(timer)
+        }
+    }
+}

package/src/hooks/use-transition.ts

@@ -0,0 +1,32 @@
+import { ref, computed, watch, nextTick, Ref } from 'vue-demi'
+
+export const useTransitionProps = {
+    transitionDuration: {
+        type: Number,
+        default: 300
+    }
+}
+
+export default function (
+    props: {
+        transitionDuration: number
+    },
+    showing: Ref<boolean>
+) {
+    const transitionState = ref(showing.value)
+
+    watch(showing, (val) => {
+        nextTick(() => {
+            transitionState.value = val
+        })
+    })
+
+    // return transition
+    return {
+        transitionStyle: computed(() => {
+            return {
+                '--dl-transition-duration': `${props.transitionDuration}ms`
+            }
+        })
+    }
+}

package/src/hooks/use-window-size.ts

@@ -0,0 +1,25 @@
+import { reactive, onMounted, onUnmounted } from 'vue-demi'
+
+const useWindowSize = () => {
+    const sizes = reactive({
+        width: window.innerWidth,
+        height: window.innerHeight
+    })
+
+    const onResize = () => {
+        sizes.width = window.innerWidth
+        sizes.height = window.innerHeight
+    }
+
+    onMounted(() => {
+        window.addEventListener('resize', onResize)
+    })
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', onResize)
+    })
+
+    return sizes
+}
+
+export default useWindowSize

package/src/hooks/useForm.ts

@@ -0,0 +1,12 @@
+export interface FormProps {
+    name: string
+}
+
+export const useFormProps: {
+    [key: string]: { type: any; default?: any; required?: boolean }
+} = {
+    name: {
+        type: String,
+        default: null
+    }
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+import { install } from 'vue-demi'
+
+install()
+
+export * from './components'
+import DlComponentsDemo from './App.vue'
+export { DlComponentsDemo }

package/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/src/models.ts

@@ -0,0 +1,4 @@
+export * from './types'
+
+export * from './components/DlStepper/Stepper'
+export * from './components/DlStepper/Step'

package/src/types.ts

@@ -0,0 +1,6 @@
+export * from './components/DlOptionGroup/OptionGroup.types'
+export * from './components/DlStepper/interfaces'
+export * from './components/DlTable/types'
+export * from './components/DlTabs/types'
+export * from './components/DlTimePicker/types'
+export * from './components/DlWidget/types'

package/src/utils/calcs.ts

@@ -0,0 +1,18 @@
+export const calculateWidth = (height: number) => Math.round(height * (25 / 12))
+
+export const calculateBorderRadius = (height: number) => height * 0.5
+
+export const calculateMargin = (height: number) => Math.round(height / 12)
+
+export const calculateCircleRadius = (height: number) =>
+    height - calculateMargin(height) * 2
+
+export const calculateActiveMarginLeft = (height: number) =>
+    calculateWidth(height) -
+    calculateMargin(height) -
+    calculateCircleRadius(height)
+
+export const hasOverflowing = (ref: any) =>
+    ref?.offsetHeight < ref?.scrollHeight ||
+    ref?.offsetWidth < ref?.scrollWidth ||
+    false

package/src/utils/click-outside.ts

@@ -0,0 +1,108 @@
+import { listenOpts } from './events'
+import { Ref } from 'vue-demi'
+import { portalList } from './portal'
+
+export interface ClickOutsideEvent extends MouseEvent {
+    dlClickOutside?: boolean
+}
+
+export interface TouchOutsideEvent extends TouchEvent {
+    dlClickOutside?: boolean
+}
+
+export type ClickOutsideProps = {
+    anchorEl: Ref<HTMLElement | Element | null>
+    innerRef: Ref<HTMLElement | null>
+    onClickOutside: Function
+}
+
+let timer: number
+
+const { notPassiveCapture } = listenOpts
+const registeredList: ClickOutsideProps[] = []
+
+function globalHandler(evt: ClickOutsideEvent | TouchOutsideEvent) {
+    clearTimeout(timer)
+
+    const target = evt.target as HTMLElement
+
+    if (
+        target === void 0 ||
+        target.nodeType === 8 ||
+        target.classList.contains('no-pointer-events') === true
+    ) {
+        return
+    }
+
+    // check last portal vm if it's
+    // a DlDialog and not in seamless mode
+    let portalIndex = portalList.length - 1
+
+    while (portalIndex >= 0) {
+        const proxy = (portalList[portalIndex] as any).$
+
+        if (proxy?.type?.name !== 'DlDialog') {
+            break
+        }
+
+        if (proxy?.props?.seamless !== true) {
+            return
+        }
+
+        portalIndex--
+    }
+
+    for (let i = registeredList.length - 1; i >= 0; i--) {
+        const state = registeredList[i]
+
+        if (
+            (state.anchorEl.value === null ||
+                state.anchorEl.value.contains(target) === false) &&
+            (target === document.body ||
+                (state.innerRef.value !== null &&
+                    state.innerRef.value.contains(target) === false))
+        ) {
+            // mark the event as being processed by clickOutside
+            // used to prevent refocus after menu close
+            evt.dlClickOutside = true
+            state.onClickOutside(evt)
+        } else {
+            return
+        }
+    }
+}
+
+export function addClickOutside(clickOutsideProps: ClickOutsideProps) {
+    registeredList.push(clickOutsideProps)
+
+    if (registeredList.length === 1) {
+        document.addEventListener('mousedown', globalHandler, notPassiveCapture)
+        document.addEventListener(
+            'touchstart',
+            globalHandler,
+            notPassiveCapture
+        )
+    }
+}
+
+export function removeClickOutside(clickOutsideProps: ClickOutsideProps) {
+    const index = registeredList.findIndex((h) => h === clickOutsideProps)
+
+    if (index > -1) {
+        registeredList.splice(index, 1)
+
+        if (registeredList.length === 0) {
+            clearTimeout(timer)
+            document.removeEventListener(
+                'mousedown',
+                globalHandler,
+                notPassiveCapture
+            )
+            document.removeEventListener(
+                'touchstart',
+                globalHandler,
+                notPassiveCapture
+            )
+        }
+    }
+}

package/src/utils/component-name-parser.ts

@@ -0,0 +1 @@
+export const parseName = (string: string) => string.split('_').join(' ')