@dataloop-ai/components 0.18.0 → 0.18.2

package/src/hooks/use-anchor.ts

@@ -15,15 +15,24 @@ interface AnchorEvent extends KeyboardEvent {
     dlAnchorHandled?: boolean
 }
 
+interface AnchorElements {
+    hide: Function
+    toggle?: Function
+    toggleKey: Function
+    contextClick: Function
+    prevent: Function
+}
+
 export const useAnchorProps = {
     target: {
+        type: [String, Boolean],
         default: true
     },
     noParentEvent: Boolean,
     contextMenu: Boolean
 }
 
-export default function ({
+export default function useAnchor({
     configureAnchorEl
 }: {
     configureAnchorEl?: Function
@@ -38,22 +47,12 @@ export default function ({
         // 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
+            : !evt || !evt.touches || evt.touches.length <= 1
     }
 
     const anchorEvents: Partial<AnchorElements> = {}
 
-    if (configureAnchorEl === void 0 && proxy) {
+    if (!configureAnchorEl && proxy) {
         // default configureAnchorEl is designed for
         // DlMenu & DlPopupProxy (which is why it's handled here)
 
@@ -70,7 +69,7 @@ export default function ({
             },
 
             toggleKey(evt: AnchorEvent) {
-                if (isKeyCode(evt, 13) && anchorEvents.toggle !== void 0) {
+                if (isKeyCode(evt, 13) && anchorEvents.toggle) {
                     anchorEvents.toggle(evt)
                 }
             },
@@ -144,16 +143,15 @@ export default function ({
             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
+                    el = null
                 }
             }
 
-            if (el !== void 0 && el !== null) {
+            if (el) {
                 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()

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

@@ -1,41 +1,84 @@
-import { ref, onMounted, onBeforeUnmount } from 'vue-demi'
+import { ref, isRef, onMounted, onBeforeUnmount, computed } from 'vue-demi'
+
+type ItemType = Record<string, any> | string
 
 export function useArrowNavigation(items: any, isOpen: any) {
-    const selectedItem = ref(null)
-    const highlightedIndex = ref(-1)
+    const selectItem = ref<ItemType | null>(null)
+    const highlightIndex = ref<number>(-1)
+
+    const itemsData = computed(() => (isRef(items) ? items.value : items))
+    const isMenuOpen = computed(() => (isRef(isOpen) ? isOpen.value : isOpen))
 
-    const handleArrowUp = () => {
-        if (highlightedIndex.value > 0) {
-            highlightedIndex.value--
+    const selectedItem = computed({
+        get: () => selectItem.value,
+        set: (value: ItemType) => {
+            selectItem.value = value
         }
-    }
-    const handleArrowDown = () => {
-        if (highlightedIndex.value < items.value.length - 1) {
-            highlightedIndex.value++
+    })
+    const highlightedIndex = computed({
+        get: () => highlightIndex.value,
+        set: (value: number) => {
+            highlightIndex.value = value
         }
+    })
+
+    const itemsLength = computed<number>(() => itemsData.value.length)
+
+    const decrementHighlightedIndex = (): void => {
+        highlightedIndex.value -= 1
     }
-    const handleEnter = () => {
-        if (
+    const incrementHighlightedIndex = (): void => {
+        highlightedIndex.value += 1
+    }
+    const resetHighlightedIndex = (): void => {
+        highlightedIndex.value = -1
+    }
+
+    const isEligibleToHandleEnter = computed<boolean>(() => {
+        return (
             highlightedIndex.value >= 0 &&
-            highlightedIndex.value < items.value.length
-        ) {
-            selectedItem.value = items.value[highlightedIndex.value]
-            resetNavigation()
+            highlightedIndex.value < itemsLength.value
+        )
+    })
+    const isEligibleToIncrementHighlightedIndex = computed<boolean>(() => {
+        return highlightedIndex.value < itemsLength.value - 1
+    })
+    const isEligibleToDecrementHighlightedIndex = computed<boolean>(() => {
+        return highlightedIndex.value > 0
+    })
+    const isNotEligibleToHandleArrows = computed<boolean>(() => {
+        return !itemsLength.value || !isMenuOpen.value
+    })
+
+    const handleArrowUp = (event: KeyboardEvent) => {
+        event.preventDefault()
+        if (isEligibleToDecrementHighlightedIndex.value) {
+            decrementHighlightedIndex()
         }
     }
-    const resetNavigation = () => {
-        highlightedIndex.value = -1
+    const handleArrowDown = (event: KeyboardEvent) => {
+        event.preventDefault()
+        if (isEligibleToIncrementHighlightedIndex.value) {
+            incrementHighlightedIndex()
+        }
     }
+    const handleEnter = () => {
+        if (isEligibleToHandleEnter.value) {
+            selectedItem.value = itemsData.value[highlightedIndex.value]
+            resetHighlightedIndex()
+        }
+    }
+
     const navigateList = (event: KeyboardEvent) => {
-        if (!items.value?.length || !isOpen.value) {
+        if (isNotEligibleToHandleArrows.value) {
             return
         }
         switch (event.key) {
             case 'ArrowUp':
-                handleArrowUp()
+                handleArrowUp(event)
                 break
             case 'ArrowDown':
-                handleArrowDown()
+                handleArrowDown(event)
                 break
             case 'Enter':
                 handleEnter()

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

@@ -41,7 +41,7 @@ export interface AnchorEvent extends KeyboardEvent {
 
 // handleShow/handleHide -> removeTick(), self (& emit show)
 
-export default function ({
+export default function useModelToggle({
     showing,
     canShow, // optional
     handleShow, // optional
@@ -70,29 +70,28 @@ export default function ({
     function show(evt: AnchorEvent) {
         if (
             props.disabled === true ||
-            (evt !== void 0 && evt.dlAnchorHandled === true) ||
-            (canShow !== void 0 && canShow(evt) !== true)
+            (evt && evt.dlAnchorHandled === true) ||
+            (canShow && canShow(evt) !== true)
         ) {
             return
         }
 
         const listener =
-            props[`onUpdate:${modelValueNaming}`] !== void 0 ||
-            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`] !==
-                void 0
+            props[`onUpdate:${modelValueNaming}`] ||
+            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`]
 
-        if (listener === true) {
+        if (listener) {
             emit(`update:${modelValueNaming}`, true)
             payload = evt
 
             nextTick(() => {
                 if (payload === evt) {
-                    payload = void 0
+                    payload = null
                 }
             })
         }
 
-        if (!props.modelValue || listener === false) {
+        if (!props.modelValue || !listener) {
             processShow(evt)
         }
     }
@@ -106,7 +105,7 @@ export default function ({
 
         emit('before-show', evt)
 
-        if (handleShow !== void 0) {
+        if (handleShow) {
             handleShow(evt)
         } else {
             emit('show', evt)
@@ -119,16 +118,15 @@ export default function ({
         }
 
         const listener =
-            props[`onUpdate:${modelValueNaming}`] !== void 0 ||
-            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`] !==
-                void 0
+            props[`onUpdate:${modelValueNaming}`] ||
+            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`]
 
         if (listener === true) {
             emit(`update:${modelValueNaming}`, false)
             payload = evt
             nextTick(() => {
                 if (payload === evt) {
-                    payload = void 0
+                    payload = null
                 }
             })
         }
@@ -147,7 +145,7 @@ export default function ({
 
         emit('before-hide', evt)
 
-        if (handleHide !== void 0) {
+        if (handleHide) {
             handleHide(evt)
         } else {
             emit('hide', evt)
@@ -156,7 +154,7 @@ export default function ({
 
     function processModelChange(val: boolean) {
         if (props.disabled === true && val === true) {
-            if (props[`onUpdate:${modelValueNaming}`] !== void 0) {
+            if (props[`onUpdate:${modelValueNaming}`]) {
                 emit(`update:${modelValueNaming}`, false)
             }
         } else if ((val === true) !== showing.value) {

package/src/hooks/use-portal.ts

@@ -7,7 +7,7 @@ import { portalList } from '../utils/portal'
 function isOnGlobalDialog(vm: any) {
     vm = vm.parent
 
-    while (vm !== void 0 && vm !== null) {
+    while (vm) {
         if (vm.type.name === 'DlGlobalDialog') {
             return true
         }
@@ -24,15 +24,21 @@ function isOnGlobalDialog(vm: any) {
 // Warning!
 // You MUST specify "inheritAttrs: false" in your component
 
-export default function (
+export default function usePortal(
     vm: ComponentInternalInstance | null,
     innerRef: Ref<HTMLElement | null>,
-    checkGlobalDialog = false
+    checkGlobalDialog = false,
+    config: {
+        parentId?: string
+        parentClass?: string
+        parentStyle?: string
+    } = {}
 ) {
     // showing, including while in show/hide transition
     const portalIsActive = ref(false)
 
     const { proxy } = vm!
+    const { parentId, parentClass, parentStyle } = config
 
     // showing & not in any show/hide transition
     const portalIsAccessible = ref(false)

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

@@ -8,10 +8,8 @@ export default function (props: any, configureScrollTarget: Function) {
     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
+        const fnProp: string = `${fn ? 'add' : 'remove'}EventListener`
+        const fnHandler = fn ? fn : scrollFn
 
         if (scrollTarget !== window) {
             scrollTarget[fnProp]('scroll', fnHandler, listenOpts.passive)

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

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