@dataloop-ai/components 0.13.0

package/src/utils/events.ts

@@ -0,0 +1,67 @@
+export const listenOpts: Record<string, any> = {
+    hasPassive: false,
+    passiveCapture: true,
+    notPassiveCapture: true,
+    passive: false
+}
+
+export function stopAndPrevent(e: Event) {
+    if (e.cancelable) {
+        e.preventDefault()
+    }
+    e.stopPropagation()
+}
+
+export function leftClick(e: MouseEvent) {
+    return e.button === 0
+}
+
+export function position(e: any) {
+    if (e.touches && e.touches[0]) {
+        e = e.touches[0]
+    } else if (e.changedTouches && e.changedTouches[0]) {
+        e = e.changedTouches[0]
+    } else if (e.targetTouches && e.targetTouches[0]) {
+        e = e.targetTouches[0]
+    }
+
+    return {
+        top: e.clientY,
+        left: e.clientX
+    }
+}
+
+export function stop(e: Event) {
+    e.stopPropagation()
+}
+
+export function prevent(e: Event) {
+    if (e.cancelable === false) return
+
+    e.preventDefault()
+}
+
+export function addEvt(
+    ctx: Record<string, any>,
+    targetName: string,
+    events: any[][]
+) {
+    const name = `__dl_${targetName}_evt`
+
+    ctx[name] = ctx[name] !== void 0 ? ctx[name].concat(events) : events
+
+    events.forEach((evt: any[]) => {
+        evt[0].addEventListener(evt[1], ctx[evt[2]], listenOpts[evt[3]])
+    })
+}
+
+export function cleanEvt(ctx: Record<string, any>, targetName: string) {
+    const name = `__dl_${targetName}_evt`
+
+    if (ctx[name] !== void 0) {
+        ctx[name].forEach((evt: any[]) => {
+            evt[0].removeEventListener(evt[1], ctx[evt[2]], listenOpts[evt[3]])
+        })
+        ctx[name] = void 0
+    }
+}

package/src/utils/focus-manager.ts

@@ -0,0 +1,33 @@
+let queue: Function[] = []
+let waitFlags: Object[] = []
+
+function clearFlag(flag: Object) {
+    waitFlags = waitFlags.filter((entry) => entry !== flag)
+}
+
+export function addFocusWaitFlag(flag: Object) {
+    clearFlag(flag)
+    waitFlags.push(flag)
+}
+
+export function removeFocusWaitFlag(flag: Object) {
+    clearFlag(flag)
+
+    if (waitFlags.length === 0 && queue.length > 0) {
+        // only call last focus handler (can't focus multiple things at once)
+        queue[queue.length - 1]()
+        queue = []
+    }
+}
+
+export function addFocusFn(fn: Function) {
+    if (waitFlags.length === 0) {
+        fn()
+    } else {
+        queue.push(fn)
+    }
+}
+
+export function removeFocusFn(fn: Function) {
+    queue = queue.filter((entry) => entry !== fn)
+}

package/src/utils/focusout.ts

@@ -0,0 +1,29 @@
+import { isMobileOrTablet } from '.'
+
+const handlers: Function[] = []
+
+function trigger(e: Event) {
+    handlers[handlers.length - 1](e)
+}
+
+export function addFocusout(fn: Function) {
+    const isMobile = isMobileOrTablet()
+    if (!isMobile) {
+        handlers.push(fn)
+
+        if (handlers.length === 1) {
+            document.body.addEventListener('focusin', trigger)
+        }
+    }
+}
+
+export function removeFocusout(fn: Function) {
+    const index = handlers.indexOf(fn)
+    if (index > -1) {
+        handlers.splice(index, 1)
+
+        if (handlers.length === 0) {
+            document.body.removeEventListener('focusin', trigger)
+        }
+    }
+}

package/src/utils/format.ts

@@ -0,0 +1,3 @@
+export function between(v: any, min: number, max: number): number {
+    return max <= min ? min : Math.min(max, Math.max(min, v))
+}

package/src/utils/getColor.ts

@@ -0,0 +1,17 @@
+import { colorNames } from './css-color-names'
+const CSS_COLOR_NAMES = [...Object.keys(colorNames)]
+
+const regex =
+    /(?:#|0x)(?:[A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})\b|(?:rgb|hsl)a?\([^\)]*\)/
+
+const getColor = (color: string, fallback?: string) => {
+    if (regex.test(color) || CSS_COLOR_NAMES.includes(color?.toLowerCase())) {
+        return color
+    }
+
+    if (!color) return `var(--${fallback || 'dl-color-darker'})`
+
+    return `var(--${color}, var(--${fallback || 'dl-color-darker'}))`
+}
+
+export { getColor }

package/src/utils/getLighterGradient.ts

@@ -0,0 +1,36 @@
+import { colorNames } from './css-color-names'
+import { getRootStyles } from './getRootStyles'
+const MAGNITUDE = 100
+
+const allColorNames = {
+    ...colorNames,
+    ...getRootStyles()
+}
+
+const getLighterGradient = (color: string, magnitude = MAGNITUDE) => {
+    color = color.replace('dl', '--dl')
+    let newColor =
+        color in allColorNames
+            ? allColorNames[color as keyof typeof allColorNames]
+            : color
+    newColor = newColor.replace(`#`, ``).trim()
+
+    if (newColor.length === 6) {
+        const decimalColor = parseInt(newColor, 16)
+
+        let r = (decimalColor >> 16) + magnitude
+        if (r > 255) r = 255
+        if (r < 0) r = 0
+        let g = (decimalColor & 0x0000ff) + magnitude
+        if (g > 255) g = 255
+        if (g < 0) g = 0
+        let b = ((decimalColor >> 8) & 0x00ff) + magnitude
+        if (b > 255) b = 255
+        if (b < 0) b = 0
+        return `#${(g | (b << 8) | (r << 16)).toString(16)}`
+    } else {
+        return newColor
+    }
+}
+
+export { getLighterGradient }

package/src/utils/getRootStyles.ts

@@ -0,0 +1,52 @@
+function getAllCSSVariableNames(styleSheets = document.styleSheets) {
+    const cssVars = []
+    for (let i = 0; i < styleSheets.length; i++) {
+        try {
+            for (let j = 0; j < styleSheets[i].cssRules.length; j++) {
+                try {
+                    for (
+                        let k = 0;
+                        k <
+                        (styleSheets[i].cssRules[j] as CSSStyleRule).style
+                            .length;
+                        k++
+                    ) {
+                        const name = (
+                            styleSheets[i].cssRules[j] as CSSStyleRule
+                        ).style[k]
+                        if (
+                            name.startsWith('--') &&
+                            cssVars.indexOf(name) == -1
+                        ) {
+                            cssVars.push(name)
+                        }
+                    }
+                } catch (error) {}
+            }
+        } catch (error) {}
+    }
+    return cssVars
+}
+
+function getElementCSSVariables(
+    allCSSVars: any,
+    element = document.body,
+    pseudo?: any
+) {
+    const elStyles = window.getComputedStyle(element, pseudo)
+    const cssVars = {}
+    for (let i = 0; i < allCSSVars.length; i++) {
+        const key = allCSSVars[i]
+        const value = elStyles.getPropertyValue(key)
+        if (value) {
+            //@ts-ignore
+            cssVars[key] = value
+        }
+    }
+    return cssVars
+}
+
+export function getRootStyles() {
+    const cssVars = getAllCSSVariableNames()
+    return getElementCSSVariables(cssVars, document.documentElement)
+}

package/src/utils/global-config.ts

@@ -0,0 +1,6 @@
+export const globalConfig: Record<string, any> = {}
+export let globalConfigIsFrozen = false
+
+export function freezeGlobalConfig() {
+    globalConfigIsFrozen = true
+}

package/src/utils/global-nodes.ts

@@ -0,0 +1,42 @@
+import { globalConfig } from './global-config'
+
+const globalNodes: HTMLElement[] = []
+let target = document.body
+
+export function createGlobalNode(id: string | null = null) {
+    const el: HTMLElement = document.createElement('div')
+    el.setAttribute('data-test-id', 'portal')
+
+    if (id) {
+        el.id = id
+    }
+
+    if (globalConfig.globalNodes !== void 0) {
+        const cls = globalConfig.globalNodes.class
+        if (cls !== void 0) {
+            el.className = cls
+        }
+    }
+
+    target.appendChild(el)
+    globalNodes.push(el)
+
+    return el
+}
+
+export function removeGlobalNode(el: HTMLElement) {
+    globalNodes.splice(globalNodes.indexOf(el), 1)
+    el.remove()
+}
+
+export function changeGlobalNodesTarget(el: HTMLElement) {
+    if (el !== target) {
+        target = el
+
+        globalNodes.forEach((el) => {
+            if (el.contains(target) === false) {
+                target.appendChild(el)
+            }
+        })
+    }
+}

package/src/utils/includes.ts

@@ -0,0 +1,3 @@
+export function includes<T extends U, U>(coll: readonly T[], el: U): el is T {
+    return coll.includes(el as T)
+}

package/src/utils/index.ts

@@ -0,0 +1,29 @@
+export * from './logger'
+export * from './calcs'
+export * from './events'
+export * from './getColor'
+export * from './includes'
+export * from './keyCodes'
+export * from './ripple'
+export * from './selection'
+export * from './theme'
+export * from './format'
+export * from './render'
+export * from './component-name-parser'
+
+export const isMobileOrTablet = () => {
+    let check = false
+    ;(function (a) {
+        if (
+            /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
+                a
+            ) ||
+            /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+                a.substr(0, 4)
+            )
+        )
+            check = true
+        // @ts-ignore
+    })(navigator.userAgent || navigator.vendor || window.opera)
+    return check
+}

package/src/utils/inject-object-prop.ts

@@ -0,0 +1,21 @@
+export function injectProp(
+    target: Record<string, any>,
+    propName: string,
+    get: () => any,
+    set?: (val: any, evt?: any) => void
+) {
+    Object.defineProperty(target, propName, {
+        get,
+        set,
+        enumerable: true
+    })
+}
+
+export function injectMultipleProps(
+    target: Record<string, any>,
+    props: Record<string, any>
+) {
+    for (const key in props) {
+        injectProp(target, key, props[key])
+    }
+}

package/src/utils/input-sizes.ts

@@ -0,0 +1,7 @@
+export const InputSizes = {
+    l: 'l',
+    m: 'm',
+    s: 's'
+} as const
+
+export type TInputSizes = typeof InputSizes[keyof typeof InputSizes]

package/src/utils/is-ellipsis-active.ts

@@ -0,0 +1,3 @@
+export const isEllipsisActive = (e: Element) => {
+    return (e as HTMLElement).offsetWidth < e.scrollWidth
+}

package/src/utils/is-in-viewport.ts

@@ -0,0 +1,13 @@
+const isInViewport = (element: Element) => {
+    const rect = element.getBoundingClientRect()
+    return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <=
+            (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <=
+            (window.innerWidth || document.documentElement.clientWidth)
+    )
+}
+
+export { isInViewport }

package/src/utils/is.ts

@@ -0,0 +1,15 @@
+export function isObject(v: any) {
+    return v !== null && typeof v === 'object' && Array.isArray(v) !== true
+}
+
+export function isDate(v: any) {
+    return Object.prototype.toString.call(v) === '[object Date]'
+}
+
+export function isRegexp(v: any) {
+    return Object.prototype.toString.call(v) === '[object RegExp]'
+}
+
+export function isNumber(v: any) {
+    return typeof v === 'number' && isFinite(v)
+}

package/src/utils/key-composition.ts

@@ -0,0 +1,17 @@
+let lastKeyCompositionStatus = false
+
+export function shouldIgnoreKey(evt: KeyboardEvent) {
+    return (
+        lastKeyCompositionStatus ||
+        evt !== Object(evt) ||
+        evt.isComposing === true
+    )
+}
+
+export function isKeyCode(evt: KeyboardEvent, keyCodes: number) {
+    return shouldIgnoreKey(evt) ? false : [keyCodes].includes(evt.keyCode)
+}
+
+export function onKeyDownComposition(evt: KeyboardEvent) {
+    lastKeyCompositionStatus = evt.isComposing === true
+}

package/src/utils/keyCodes.ts

@@ -0,0 +1,12 @@
+export const KEY_CODE = {
+    PGDOWN: 34,
+    LEFT: 37,
+    DOWN: 40,
+    PGUP: 33,
+    RIGHT: 39,
+    UP: 38
+} as const
+
+export type KEY_CODE = typeof KEY_CODE[keyof typeof KEY_CODE]
+
+export const keyCodes = Object.values(KEY_CODE)

package/src/utils/logger/ConsoleLogger.ts

@@ -0,0 +1,65 @@
+import { isVue2 } from 'vue-demi'
+import { ILogger } from './ILogger'
+
+export enum logLevels {
+    NON = 'non',
+    ERROR = 'error',
+    WARN = 'warn',
+    INFO = 'info',
+    DEBUG = 'debug'
+}
+export class ConsoleLogger extends ILogger {
+    public static LOG_LEVEL: logLevels = logLevels.DEBUG
+
+    private _shouldLogLevel(logLevel: logLevels): boolean {
+        const logLevelOrder = [
+            logLevels.NON,
+            logLevels.ERROR,
+            logLevels.WARN,
+            logLevels.INFO,
+            logLevels.DEBUG
+        ]
+        return (
+            logLevelOrder.indexOf(logLevel) <=
+            logLevelOrder.indexOf(ConsoleLogger.LOG_LEVEL)
+        )
+    }
+
+    constructor(loggerName: string) {
+        super(loggerName)
+    }
+    private _timestamp() {
+        return new Date().toISOString()
+    }
+    private _logMessage(level: string, message: string, metadata: any) {
+        message = `[${this._timestamp()}] [${this._name}] - ${message}`
+        if (metadata) {
+            // @ts-ignore
+            console[level](message, metadata)
+        } else {
+            // @ts-ignore
+            console[level](message)
+        }
+    }
+
+    public debug(message: string, metadata?: any) {
+        if (this._shouldLogLevel(logLevels.DEBUG)) {
+            this._logMessage('debug', message, metadata)
+        }
+    }
+    public info(message: string, metadata?: any) {
+        if (this._shouldLogLevel(logLevels.INFO)) {
+            this._logMessage('log', message, metadata)
+        }
+    }
+    public warn(message: string, metadata?: any) {
+        if (this._shouldLogLevel(logLevels.WARN)) {
+            this._logMessage('warn', message, metadata)
+        }
+    }
+    public error(message: string, metadata?: any) {
+        if (this._shouldLogLevel(logLevels.ERROR)) {
+            this._logMessage('error', message, metadata)
+        }
+    }
+}

package/src/utils/logger/ILogger.ts

@@ -0,0 +1,8 @@
+export abstract class ILogger {
+    protected constructor(protected _name: string) {}
+
+    public abstract debug(message: string, ...metadata: any[]): void
+    public abstract info(message: string, ...metadata: any[]): void
+    public abstract warn(message: string, ...metadata: any[]): void
+    public abstract error(message: string, ...metadata: any[]): void
+}

package/src/utils/logger/index.ts

@@ -0,0 +1,8 @@
+import { ILogger } from './ILogger'
+import { ConsoleLogger } from './ConsoleLogger'
+import { isVue2 } from 'vue-demi'
+
+export { ILogger }
+
+export const loggerFactory = (loggerName: string): ILogger =>
+    new ConsoleLogger(loggerName)

package/src/utils/nav-keys-constants.ts

@@ -0,0 +1 @@
+export const admissibleKeys = ['Backspace', 'Delete', 'ArrowDown', 'ArrowUp']

package/src/utils/portal.ts

@@ -0,0 +1,55 @@
+import { getParentVm } from './vm'
+
+export const portalList: any = []
+
+export function getPortalVm(el: HTMLElement) {
+    return portalList.find(
+        (vm: any) =>
+            vm.__dlPortalInnerRef.value !== null &&
+            vm.__dlPortalInnerRef.value.contains(el)
+    )
+}
+
+export function closePortalMenus(vm: any, evt: Event) {
+    do {
+        if (vm.$options.name === 'DlMenu') {
+            vm.hide(evt)
+
+            // is this a point of separation?
+            if (vm.$props.separateClosePopup === true) {
+                return getParentVm(vm)
+            }
+        } else if (vm.__dlPortalInnerRef !== void 0) {
+            // 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') {
+                vm.hide(evt)
+                return parent
+            } else {
+                return vm
+            }
+        }
+
+        vm = getParentVm(vm)
+    } while (vm !== void 0 && vm !== null)
+}
+
+export function closePortals(vm: any, evt: Event, depth: number) {
+    while (depth !== 0 && vm !== void 0 && vm !== null) {
+        if (vm.__dlPortalInnerRef !== void 0) {
+            depth--
+
+            if (vm.$options.name === 'DlMenu') {
+                vm = closePortalMenus(vm, evt)
+                continue
+            }
+
+            vm.hide(evt)
+        }
+
+        vm = getParentVm(vm)
+    }
+}