@dataloop-ai/components 0.13.0

package/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}

package/src/hooks/use-anchor.ts

@@ -0,0 +1,223 @@
+import {
+    ref,
+    watch,
+    onMounted,
+    onBeforeUnmount,
+    nextTick,
+    getCurrentInstance,
+    Ref
+} from 'vue-demi'
+
+import { addEvt, cleanEvt, prevent } from '../utils/events'
+import { isKeyCode } from '../utils/key-composition'
+
+interface AnchorEvent extends KeyboardEvent {
+    dlAnchorHandled?: boolean
+}
+
+export const useAnchorProps = {
+    target: {
+        default: true
+    },
+    noParentEvent: Boolean,
+    contextMenu: Boolean
+}
+
+export default function ({
+    configureAnchorEl
+}: {
+    configureAnchorEl?: Function
+}) {
+    const { props, proxy, emit } = getCurrentInstance()!
+
+    const anchorEl: Ref<HTMLElement | Element | null> = ref(null)
+
+    let touchTimer: number
+
+    function canShow(evt: TouchEvent) {
+        // abort with no parent configured or on multi-touch
+        return anchorEl?.value === null
+            ? false
+            : evt === void 0 ||
+                  evt.touches === void 0 ||
+                  evt.touches.length <= 1
+    }
+
+    interface AnchorElements {
+        hide: Function
+        toggle?: Function
+        toggleKey: Function
+        contextClick: Function
+        prevent: Function
+    }
+
+    const anchorEvents: Partial<AnchorElements> = {}
+
+    if (configureAnchorEl === void 0 && proxy) {
+        // default configureAnchorEl is designed for
+        // DlMenu & DlPopupProxy (which is why it's handled here)
+
+        Object.assign(anchorEvents, {
+            hide(evt: Event) {
+                // @ts-ignore
+                proxy.hide(evt)
+            },
+
+            toggle(evt: AnchorEvent) {
+                // @ts-ignore
+                proxy.toggle(evt)
+                evt.dlAnchorHandled = true
+            },
+
+            toggleKey(evt: AnchorEvent) {
+                if (isKeyCode(evt, 13) && anchorEvents.toggle !== void 0) {
+                    anchorEvents.toggle(evt)
+                }
+            },
+
+            contextClick(evt: AnchorEvent) {
+                // @ts-ignore
+                proxy.hide(evt)
+                prevent(evt)
+                nextTick(() => {
+                    // @ts-ignore
+                    proxy.show(evt)
+                    evt.dlAnchorHandled = true
+                })
+            },
+
+            prevent
+        })
+
+        configureAnchorEl = function (context = props.contextMenu) {
+            if (props.noParentEvent === true || anchorEl.value === null) {
+                return
+            }
+
+            let evts
+
+            if (context === true) {
+                evts = [
+                    [anchorEl.value, 'mousedown', 'hide', 'passive'],
+                    [
+                        anchorEl.value,
+                        'contextmenu',
+                        'contextClick',
+                        'notPassive'
+                    ]
+                ]
+            } else {
+                evts = [
+                    [anchorEl.value, 'click', 'toggle', 'passive'],
+                    [anchorEl.value, 'keyup', 'toggleKey', 'passive']
+                ]
+            }
+
+            addEvt(anchorEvents, 'anchor', evts as string[][])
+        }
+    }
+
+    function unconfigureAnchorEl() {
+        cleanEvt(anchorEvents, 'anchor')
+    }
+
+    function setAnchorEl(el: HTMLElement | null) {
+        if (!el) return
+        anchorEl.value = el
+        while (
+            (anchorEl.value as HTMLElement).classList.contains(
+                'dl-anchor--skip'
+            )
+        ) {
+            anchorEl.value = (anchorEl.value as HTMLElement)
+                .parentNode as HTMLElement
+        }
+        if (configureAnchorEl) {
+            configureAnchorEl()
+        }
+    }
+
+    function pickAnchorEl() {
+        if (props.target === false || props.target === '') {
+            anchorEl.value = null
+        } else if (props.target === true && proxy) {
+            setAnchorEl(proxy.$el.parentNode as HTMLElement)
+        } else {
+            let el = props.target
+
+            if (typeof props.target === 'string') {
+                try {
+                    el = document.querySelector(props.target)
+                } catch (err) {
+                    el = void 0
+                }
+            }
+
+            if (el !== void 0 && el !== null) {
+                anchorEl.value = (el as any).$el || el // cannot use VUE type to work on both vue versions, so let it be any
+                if (configureAnchorEl) {
+                    configureAnchorEl()
+                }
+            } else {
+                anchorEl.value = null
+            }
+        }
+    }
+
+    watch(
+        () => props.contextMenu,
+        (val) => {
+            if (anchorEl.value !== null) {
+                unconfigureAnchorEl()
+                if (configureAnchorEl) {
+                    configureAnchorEl(val)
+                }
+            }
+        }
+    )
+
+    watch(
+        () => props.target,
+        () => {
+            if (anchorEl.value !== null) {
+                unconfigureAnchorEl()
+            }
+
+            pickAnchorEl()
+        }
+    )
+
+    watch(
+        () => props.noParentEvent,
+        (val) => {
+            if (anchorEl.value !== null) {
+                if (val === true) {
+                    unconfigureAnchorEl()
+                } else {
+                    if (configureAnchorEl) {
+                        configureAnchorEl()
+                    }
+                }
+            }
+        }
+    )
+
+    onMounted(() => {
+        pickAnchorEl()
+
+        if (props.modelValue === true && anchorEl.value === null) {
+            emit('update:modelValue', false)
+        }
+    })
+
+    onBeforeUnmount(() => {
+        clearTimeout(touchTimer)
+        unconfigureAnchorEl()
+    })
+
+    return {
+        anchorEl,
+        canShow,
+        anchorEvents
+    }
+}

package/src/hooks/use-model-toggle.ts

@@ -0,0 +1,181 @@
+import {
+    watch,
+    nextTick,
+    onMounted,
+    getCurrentInstance,
+    Ref,
+    PropType,
+    isVue2
+} from 'vue-demi'
+
+const modelValueNaming = isVue2 ? 'model-value' : 'modelValue'
+
+const staticUseModelToggleProps: any = {
+    modelValue: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    }
+}
+
+staticUseModelToggleProps[`onUpdate:${modelValueNaming}`] = [Function, Array]
+
+export const useModelToggleProps = staticUseModelToggleProps as {
+    modelValue: {
+        type: PropType<boolean>
+        default: boolean
+    }
+    'onUpdate:model-value': (FunctionConstructor | ArrayConstructor)[]
+}
+
+export const useModelToggleEmits = [
+    'before-show',
+    'show',
+    'before-hide',
+    'hide',
+    'update:mode-value'
+]
+
+export interface AnchorEvent extends KeyboardEvent {
+    dlAnchorHandled?: boolean
+}
+
+// handleShow/handleHide -> removeTick(), self (& emit show)
+
+export default function ({
+    showing,
+    canShow, // optional
+    handleShow, // optional
+    handleHide, // optional
+    processOnMount // optional
+}: {
+    showing: Ref<boolean>
+    canShow: Function
+    handleShow: Function
+    handleHide: Function
+    processOnMount: boolean
+}) {
+    const vm = getCurrentInstance()!
+    const { props, emit, proxy } = vm
+
+    let payload: AnchorEvent | undefined
+
+    function toggle(evt: AnchorEvent) {
+        if (showing.value === true) {
+            hide(evt)
+        } else {
+            show(evt)
+        }
+    }
+
+    function show(evt: AnchorEvent) {
+        if (
+            props.disabled === true ||
+            (evt !== void 0 && evt.dlAnchorHandled === true) ||
+            (canShow !== void 0 && canShow(evt) !== true)
+        ) {
+            return
+        }
+
+        const listener =
+            props[`onUpdate:${modelValueNaming}`] !== void 0 ||
+            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`] !==
+                void 0
+
+        if (listener === true) {
+            emit(`update:${modelValueNaming}`, true)
+            payload = evt
+
+            nextTick(() => {
+                if (payload === evt) {
+                    payload = void 0
+                }
+            })
+        }
+
+        if (!props.modelValue || listener === false) {
+            processShow(evt)
+        }
+    }
+
+    function processShow(evt: AnchorEvent) {
+        if (showing.value === true) {
+            return
+        }
+
+        showing.value = true
+
+        emit('before-show', evt)
+
+        if (handleShow !== void 0) {
+            handleShow(evt)
+        } else {
+            emit('show', evt)
+        }
+    }
+
+    function hide(evt: AnchorEvent) {
+        if (props.disabled === true) {
+            return
+        }
+
+        const listener =
+            props[`onUpdate:${modelValueNaming}`] !== void 0 ||
+            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`] !==
+                void 0
+
+        if (listener === true) {
+            emit(`update:${modelValueNaming}`, false)
+            payload = evt
+            nextTick(() => {
+                if (payload === evt) {
+                    payload = void 0
+                }
+            })
+        }
+
+        if (!props.modelValue || listener === false) {
+            processHide(evt)
+        }
+    }
+
+    function processHide(evt: AnchorEvent) {
+        if (!showing.value) {
+            return
+        }
+
+        showing.value = false
+
+        emit('before-hide', evt)
+
+        if (handleHide !== void 0) {
+            handleHide(evt)
+        } else {
+            emit('hide', evt)
+        }
+    }
+
+    function processModelChange(val: boolean) {
+        if (props.disabled === true && val === true) {
+            if (props[`onUpdate:${modelValueNaming}`] !== void 0) {
+                emit(`update:${modelValueNaming}`, false)
+            }
+        } else if ((val === true) !== showing.value) {
+            const fn = val === true ? processShow : processHide
+            fn(payload as AnchorEvent)
+        }
+    }
+
+    watch(() => props.modelValue as boolean, processModelChange, { deep: true })
+
+    if (processOnMount) {
+        onMounted(() => {
+            return processModelChange(props.modelValue as boolean)
+        })
+    }
+
+    // expose public methods
+    const publicMethods = { show, hide, toggle }
+    Object.assign(proxy!, publicMethods)
+
+    return publicMethods
+}

package/src/hooks/use-portal.ts

@@ -0,0 +1,104 @@
+import { ref, onUnmounted, Ref, ComponentInternalInstance } from 'vue-demi'
+
+import { addFocusWaitFlag, removeFocusWaitFlag } from '../utils/focus-manager'
+import { createGlobalNode, removeGlobalNode } from '../utils/global-nodes'
+import { portalList } from '../utils/portal'
+
+function isOnGlobalDialog(vm: any) {
+    vm = vm.parent
+
+    while (vm !== void 0 && vm !== null) {
+        if (vm.type.name === 'DlGlobalDialog') {
+            return true
+        }
+        if (vm.type.name === 'DlDialog' || vm.type.name === 'DlMenu') {
+            return false
+        }
+
+        vm = vm.parent
+    }
+
+    return false
+}
+
+// Warning!
+// You MUST specify "inheritAttrs: false" in your component
+
+export default function (
+    vm: ComponentInternalInstance | null,
+    innerRef: Ref<HTMLElement | null>,
+    checkGlobalDialog = false
+) {
+    // showing, including while in show/hide transition
+    const portalIsActive = ref(false)
+
+    const { proxy } = vm!
+
+    // showing & not in any show/hide transition
+    const portalIsAccessible = ref(false)
+
+    // let portalEl = null
+    const portalEl: any = ref(null)
+    const focusObj = {}
+    const onGlobalDialog = checkGlobalDialog === true && isOnGlobalDialog(vm)
+
+    function showPortal(isReady = false) {
+        if (isReady === true) {
+            removeFocusWaitFlag(focusObj)
+            portalIsAccessible.value = true
+            return
+        }
+
+        portalIsAccessible.value = false
+
+        if (portalIsActive.value === false) {
+            if (onGlobalDialog === false && portalEl.value === null) {
+                portalEl.value = createGlobalNode()
+            }
+
+            portalIsActive.value = true
+
+            // register portal
+            portalList.push(proxy!)
+
+            addFocusWaitFlag(focusObj)
+        }
+    }
+
+    function hidePortal(isReady = false) {
+        portalIsAccessible.value = false
+
+        if (isReady !== true) {
+            return
+        }
+
+        removeFocusWaitFlag(focusObj)
+        portalIsActive.value = false
+
+        // unregister portal
+        const index = portalList.indexOf(proxy!)
+        if (index > -1) {
+            portalList.splice(index, 1)
+        }
+
+        if (portalEl.value !== null) {
+            removeGlobalNode(portalEl.value)
+            portalEl.value = null
+        }
+    }
+
+    onUnmounted(() => {
+        hidePortal(true)
+    })
+
+    // expose publicly needed stuff for portal utils
+    Object.assign(proxy!, { __dlPortalInnerRef: innerRef })
+
+    return {
+        showPortal,
+        hidePortal,
+        portalEl,
+        portalIsActive,
+        portalIsAccessible
+    }
+}

package/src/hooks/use-scroll-target.ts

@@ -0,0 +1,53 @@
+import { ref, watch, onBeforeUnmount } from 'vue-demi'
+
+import { listenOpts } from '../utils/events'
+
+export default function (props: any, configureScrollTarget: Function) {
+    const localScrollTarget = ref(null)
+
+    let scrollFn: Function | undefined
+
+    function changeScrollEvent(scrollTarget: any, fn: Function = () => {}) {
+        const fnProp: string = `${
+            fn !== void 0 ? 'add' : 'remove'
+        }EventListener`
+        const fnHandler = fn !== void 0 ? fn : scrollFn
+
+        if (scrollTarget !== window) {
+            scrollTarget[fnProp]('scroll', fnHandler, listenOpts.passive)
+        }
+
+        (window as { [key: string]: any })[fnProp](
+            'scroll',
+            fnHandler,
+            listenOpts.passive
+        )
+
+        scrollFn = fn
+    }
+
+    function unconfigureScrollTarget() {
+        if (localScrollTarget.value !== null) {
+            changeScrollEvent(localScrollTarget.value as any)
+            localScrollTarget.value = null
+        }
+    }
+
+    const noParentEventWatcher = watch(
+        () => props.noParentEvent,
+        () => {
+            if (localScrollTarget.value !== null) {
+                unconfigureScrollTarget()
+                configureScrollTarget()
+            }
+        }
+    )
+
+    onBeforeUnmount(noParentEventWatcher)
+
+    return {
+        localScrollTarget,
+        unconfigureScrollTarget,
+        changeScrollEvent
+    }
+}

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

@@ -0,0 +1,24 @@
+import { onBeforeUnmount, onMounted, ref, Ref } from 'vue-demi'
+import { isEllipsisActive } from '../utils/is-ellipsis-active'
+
+export function useSizeObserver(elRef: Ref) {
+    const widthRef = ref(0)
+    const heightRef = ref(0)
+    const hasEllipsis = ref(false)
+    const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+            hasEllipsis.value = isEllipsisActive(entry.target)
+            widthRef.value = entry.contentRect.width
+            heightRef.value = entry.contentRect.height
+        }
+    })
+
+    onMounted(() => elRef.value && resizeObserver.observe(elRef.value))
+    onBeforeUnmount(() => elRef.value && resizeObserver.unobserve(elRef.value))
+
+    return {
+        widthRef,
+        heightRef,
+        hasEllipsis
+    }
+}