@dataloop-ai/components 0.20.154 → 0.20.156

package/package.json

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

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -64,6 +64,8 @@
                 :icon="dropdownIcon"
                 :size="iconSize"
                 :color="getIconColor"
+                :tooltip="iconTooltip"
+                @click="onIconClicked"
             />
         </dl-button>
         <dl-menu
@@ -132,6 +134,8 @@
                 :icon="dropdownIcon"
                 :size="iconSize"
                 :color="getIconColor"
+                :tooltip="iconTooltip"
+                @click="onIconClicked"
             />
         </div>
 
@@ -235,6 +239,11 @@ export default defineComponent({
         fluid: Boolean,
         icon: { type: String, required: false, default: '' },
         iconSize: { type: String, required: false, default: '20px' },
+        iconTooltip: {
+            type: String,
+            required: false,
+            default: null
+        },
         flat: Boolean,
         transform: {
             type: String as PropType<DlTextTransformOptions>,
@@ -276,6 +285,7 @@ export default defineComponent({
         'update:model-value',
         'update:model-value',
         'click',
+        'icon-clicked',
         'before-show',
         'show',
         'before-hide',
@@ -384,6 +394,10 @@ export default defineComponent({
             emit('click', e)
         }
 
+        function onIconClicked(e: Event) {
+            emit('icon-clicked', e)
+        }
+
         function onClickHide(e: Event) {
             stop(e)
             hide(e)
@@ -486,6 +500,7 @@ export default defineComponent({
             onShow,
             onHide,
             onClick,
+            onIconClicked,
             onClickHide,
             toggle,
             show,

package/src/components/essential/DlIcon/DlIcon.vue

@@ -18,6 +18,9 @@
             {{ externalIcon ? icon : null }}
         </i>
         <slot />
+        <dl-tooltip v-if="tooltip">
+            {{ tooltip }}
+        </dl-tooltip>
     </div>
     <div
         v-else
@@ -48,9 +51,13 @@ import {
 } from 'vue-demi'
 import { getColor, loggerFactory, stringStyleToRecord } from '../../../utils'
 import { COLORED_ICONS } from '@dataloop-ai/icons/types'
+import { DlTooltip } from '../../shared'
 
 export default defineComponent({
     name: 'DlIcon',
+    components: {
+        DlTooltip
+    },
     props: {
         color: {
             type: String,
@@ -79,11 +86,15 @@ export default defineComponent({
         svgSource: {
             type: String,
             default: null
+        },
+        tooltip: {
+            type: String,
+            default: null
         }
     },
     emits: ['click', 'mousemove', 'mouseup', 'mousedown'],
     setup(props) {
-        const { styles, color, size, icon, svg, inline, svgSource } =
+        const { styles, color, size, icon, svg, inline, svgSource, tooltip } =
             toRefs(props)
 
         const svgIcon = ref(null)

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>