@dataloop-ai/components 0.20.154 → 0.20.155

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.154",
+  "version": "0.20.155",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/essential/DlMenu/DlMenu.vue

@@ -75,13 +75,20 @@ import {
     refocusTargetFn,
     conditionalHandler
 } from './utils'
-import { isMobileOrTablet } from '../../../utils'
+import {
+    addEvt,
+    isMobileOrTablet
+} from '../../../utils'
 import { v4 } from 'uuid'
 import {
     arrowNavigationEvents,
     useArrowNavigation
 } from '../../../hooks/use-arrow-navigation'
 
+const hoverGroupHiders: {
+    [group: string]: ((evt: AnchorEvent) => void)[]
+} = {}
+
 export default defineComponent({
     name: 'DlMenu',
     components: {
@@ -108,6 +115,11 @@ export default defineComponent({
 
         square: Boolean,
 
+        hoverGroup: {
+            type: String,
+            default: ''
+        },
+
         anchor: {
             type: String,
             default: 'bottom left',
@@ -206,10 +218,20 @@ export default defineComponent({
             unconfigureScrollTarget
         } = useScrollTarget(props, configureScrollTarget)
 
-        const { anchorEl, canShow } = useAnchor({
-            toggleKey: toggleKey.value,
-            ignoreEvents: ignoreEvents.value
-        })
+        const isMobile = computed(() => isMobileOrTablet())
+
+        const { anchorEl, canShow, anchorEvents } = useAnchor(
+            props.hoverGroup && !isMobile.value
+                ? {
+                    configureAnchorEl
+                }
+                : {
+                    toggleKey: toggleKey.value,
+                    ignoreEvents: ignoreEvents.value
+                }
+        )
+
+        Object.assign(anchorEvents, { delayShow })
 
         const screen = useWindowSize()
 
@@ -222,7 +244,7 @@ export default defineComponent({
 
         const isInitialized = ref(false)
 
-        const { hide } = useModelToggle({
+        const { show, hide } = useModelToggle({
             showing,
             canShow,
             handleShow,
@@ -282,8 +304,6 @@ export default defineComponent({
             })
         }
 
-        const isMobile = computed(() => isMobileOrTablet())
-
         function handleShow(evt: MouseEvent | TouchEvent) {
             isMenuOpen.value = true
             removeTick()
@@ -463,7 +483,54 @@ export default defineComponent({
             })
         }
 
-        onBeforeUnmount(anchorCleanup as any)
+        const {
+            registerTimeout: registerHoverTimeout,
+            removeTimeout: removeHoverTimeout
+        } = useTimeout()
+
+        function delayShow(evt: AnchorEvent) {
+            for (const hider of hoverGroupHiders[props.hoverGroup]) {
+                if (hider !== delayHide) {
+                    hider(evt)
+                }
+            }
+            removeHoverTimeout()
+            registerHoverTimeout(() => {
+                show(evt)
+            }, 250)
+        }
+
+        function delayHide(evt: AnchorEvent) {
+            removeHoverTimeout()
+            registerHoverTimeout(() => {
+                hide(evt)
+            }, 250)
+        }
+
+        function configureAnchorEl() {
+            if (anchorEl.value === null) {
+                return
+            }
+            addEvt(anchorEvents, 'anchor', [
+                [anchorEl.value, 'mouseenter', 'delayShow', 'passive']
+            ])
+        }
+
+        if (props.hoverGroup) {
+            hoverGroupHiders[props.hoverGroup] = hoverGroupHiders[props.hoverGroup] ?? []
+            hoverGroupHiders[props.hoverGroup].push(delayHide)
+        }
+
+        onBeforeUnmount(() => {
+            anchorCleanup(false)
+            if (props.hoverGroup) {
+                const hiders = hoverGroupHiders[props.hoverGroup]
+                hiders.splice(hiders.indexOf(delayHide), 1)
+                if (hiders.length === 0) {
+                    delete hoverGroupHiders[props.hoverGroup]
+                }
+            }
+        })
 
         // expose public methods
         Object.assign(proxy, { focus, updatePosition })

package/src/demos/DlMenuDemo.vue

@@ -88,6 +88,65 @@
             </dl-menu>
         </dl-button>
 
+        <dl-button label="Auto-opening Submenus">
+            <dl-menu
+                auto-close
+                anchor="top end"
+                self="top start"
+            >
+                <dl-list bordered>
+                    <dl-list-item
+                        v-for="i in 3"
+                        :key="i"
+                        clickable
+                        end-icon="icon-dl-right-chevron"
+                    >
+                        <dl-item-section no-wrap>
+                            Submenu {{ i }}
+                        </dl-item-section>
+                        <dl-menu
+                            auto-close
+                            anchor="top end"
+                            self="top start"
+                            hover-group="main-submenus"
+                        >
+                            <dl-list bordered>
+                                <dl-list-item
+                                    v-for="j in 3"
+                                    :key="j"
+                                    clickable
+                                    end-icon="icon-dl-right-chevron"
+                                >
+                                    <dl-item-section no-wrap>
+                                        Submenu {{ i }}. {{ j }}
+                                    </dl-item-section>
+                                    <dl-menu
+                                        auto-close
+                                        anchor="top end"
+                                        self="top start"
+                                        :hover-group="`submenus-${i}`"
+                                    >
+                                        <dl-list bordered>
+                                            <dl-list-item
+                                                v-for="k in 3"
+                                                :key="k"
+                                                clickable
+                                                dense
+                                            >
+                                                <dl-item-section no-wrap>
+                                                    Submenu item {{ k }}
+                                                </dl-item-section>
+                                            </dl-list-item>
+                                        </dl-list>
+                                    </dl-menu>
+                                </dl-list-item>
+                            </dl-list>
+                        </dl-menu>
+                    </dl-list-item>
+                </dl-list>
+            </dl-menu>
+        </dl-button>
+
         <dl-button label="Basic Menu With SubText">
             This is a menu button
             <dl-menu>