@maas/vue-equipment 0.30.0 → 0.30.2

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.29.8",
+  "version": "0.30.1",
   "builder": {
     "@nuxt/module-builder": "0.8.0",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -4,7 +4,7 @@ const functions$1 = [
 	{
 		name: "MagicAutoSize",
 		"package": "plugins",
-		lastUpdated: 0,
+		lastUpdated: 1719323171000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicAutoSize/",
 		description: "auto Size"
 	},
@@ -53,7 +53,7 @@ const functions$1 = [
 	{
 		name: "MagicMenu",
 		"package": "plugins",
-		lastUpdated: 1719315337000,
+		lastUpdated: 1719385203000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicMenu/",
 		description: "menu"
 	},

package/dist/plugins/MagicAutoSize/src/components/MagicAutoSize.vue

@@ -55,12 +55,13 @@ const mappedSize = computed(() => {
 useMutationObserver(
   elRef,
   (mutations) => {
-    const addedNodes: HTMLElement[] = mutations
+    const filtered = mutations
       .flatMap((m) => [...m.addedNodes])
-      .filter((n) => n instanceof HTMLElement)
-      .map((n) => n as HTMLElement)
+      .find((n) => n instanceof HTMLElement)
 
-    content.value = addedNodes[0]
+    if (!!filtered && filtered instanceof HTMLElement) {
+      content.value = filtered
+    }
   },
   {
     childList: true,
@@ -78,11 +79,15 @@ useResizeObserver(content, () => {
 
 onMounted(() => {
   if (elRef.value) {
-    const content = elRef.value.querySelector('*')
-    if (content instanceof HTMLElement) {
+    const content = elRef.value.querySelectorAll('*')
+    const filtered = Array.from(content).find(
+      (node) => node instanceof HTMLElement
+    )
+
+    if (!!filtered && filtered instanceof HTMLElement) {
       size.value = {
-        width: content.offsetWidth,
-        height: content.offsetHeight,
+        width: filtered.offsetWidth,
+        height: filtered.offsetHeight,
       }
     }
   }

package/dist/plugins/MagicMenu/index.mjs

@@ -1,7 +1,9 @@
 import MagicMenuFloat from "./src/components/MagicMenuFloat.vue";
 import MagicMenuContent from "./src/components/MagicMenuContent.vue";
+import MagicMenuChannel from "./src/components/MagicMenuChannel.vue";
 import MagicMenuItem from "./src/components/MagicMenuItem.vue";
 import MagicMenuProvider from "./src/components/MagicMenuProvider.vue";
+import MagicMenuRemote from "./src/components/MagicMenuRemote.vue";
 import MagicMenuTrigger from "./src/components/MagicMenuTrigger.vue";
 import MagicMenuView from "./src/components/MagicMenuView.vue";
 import { useMagicMenu } from "./src/composables/useMagicMenu.mjs";
@@ -14,8 +16,10 @@ const MagicMenuPlugin = {
   install: (app) => {
     app.component("MagicMenuFloat", MagicMenuFloat);
     app.component("MagicMenuContent", MagicMenuContent);
+    app.component("MagicMenuChannel", MagicMenuChannel);
     app.component("MagicMenuItem", MagicMenuItem);
     app.component("MagicMenuProvider", MagicMenuProvider);
+    app.component("MagicMenuRemote", MagicMenuRemote);
     app.component("MagicMenuTrigger", MagicMenuTrigger);
     app.component("MagicMenuView", MagicMenuView);
   }

package/dist/plugins/MagicMenu/src/components/MagicMenuChannel.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    class="magic-menu-channel"
+    v-if="channel.active"
+    :data-id="mappedId"
+    :id="id"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, provide, onBeforeUnmount } from 'vue'
+import { useMenuChannel } from '../composables/private/useMenuChannel'
+import {
+  MagicMenuInstanceId,
+  MagicMenuViewId,
+  MagicMenuContentId,
+  MagicMenuChannelId,
+  MagicMenuChannelActive,
+} from '../symbols'
+
+interface MagicMenuChannelProps {
+  id: string
+}
+
+const props = defineProps<MagicMenuChannelProps>()
+
+const instanceId = inject(MagicMenuInstanceId, undefined)
+const viewId = inject(MagicMenuViewId, undefined)
+const contentId = inject(MagicMenuContentId, undefined)
+
+if (!instanceId) {
+  throw new Error('MagicMenuChannel must be nested inside MagicMenuProvider')
+}
+
+if (!viewId) {
+  throw new Error('MagicMenuChannel must be nested inside MagicMenuView')
+}
+
+if (!contentId) {
+  throw new Error('MagicMenuChannel must be nested inside MagicMenuContent')
+}
+
+if (!props.id) {
+  throw new Error('MagicMenuChannel requires an id')
+}
+
+const mappedId = computed(() => `magic-menu-channel-${props.id}`)
+
+// Register channel
+const { initializeChannel, deleteChannel } = useMenuChannel({
+  instanceId,
+  viewId,
+})
+
+const channel = initializeChannel({
+  id: mappedId.value,
+})
+
+// Pass id and active state to children
+provide(MagicMenuChannelId, mappedId.value)
+provide(MagicMenuChannelActive, channel.active)
+
+// Lifecycle
+onBeforeUnmount(() => {
+  deleteChannel(mappedId.value)
+})
+</script>

package/dist/plugins/MagicMenu/src/components/MagicMenuChannel.vue.d.ts

@@ -0,0 +1,21 @@
+interface MagicMenuChannelProps {
+    id: string;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuChannelProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuChannelProps>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/plugins/MagicMenu/src/components/MagicMenuContent.vue

@@ -16,7 +16,7 @@
         v-if="innerActive"
       >
         <magic-menu-float
-          :placement="placement"
+          :placement="view?.placement"
           :arrow="arrow"
           :reference-el="referenceEl"
         >
@@ -44,9 +44,13 @@ import {
   computed,
   type MaybeRef,
   type ComponentPublicInstance,
+  onBeforeUnmount,
 } from 'vue'
-import type { Placement } from '@floating-ui/vue'
 import { useMenuView } from '../composables/private/useMenuView'
+import { useMenuState } from '../composables/private/useMenuState'
+import { useMenuCallback } from '../composables/private/useMenuCallback'
+import { useMenuDOM } from '../composables/private/useMenuDOM'
+import { useMenuCursor } from '../composables/private/useMenuCursor'
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,
@@ -55,16 +59,12 @@ import {
 
 import '@maas/vue-equipment/utils/css/animations/fade-in.css'
 import '@maas/vue-equipment/utils/css/animations/fade-out.css'
-import { useMenuState } from '../composables/private/useMenuState'
-import { useMenuCallback } from '../composables/private/useMenuCallback'
-import { useMenuDOM } from '../composables/private/useMenuDOM'
 
 defineOptions({
   inheritAttrs: false,
 })
 
 interface MagicMenuContentProps {
-  placement?: Placement
   arrow?: boolean | undefined
   referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>
 }
@@ -103,6 +103,10 @@ const mappedTransition = computed(() => {
   }
 })
 
+// Split isActive into two values to animate content smoothly
+const innerActive = ref(false)
+const wrapperActive = ref(false)
+
 const { lockScroll, unlockScroll } = useMenuDOM()
 const {
   onBeforeEnter,
@@ -117,11 +121,22 @@ const {
   viewId,
   lockScroll,
   unlockScroll,
+  wrapperActive,
 })
 
-// Split isActive into two values to animate content smoothly
-const innerActive = ref(false)
-const wrapperActive = ref(false)
+// Handle cursor
+const mappedClick = computed(() => view?.click)
+const mappedPlacement = computed(() => view?.placement ?? 'bottom')
+const mappedTrigger = computed(
+  () => document.querySelector(`[data-id="${viewId}-trigger"]`) as HTMLElement
+)
+
+const { destroy, initialize, isInsideTriangle, isInsideTo } = useMenuCursor({
+  from: mappedTrigger,
+  to: contentRef,
+  placement: mappedPlacement,
+  click: mappedClick,
+})
 
 // Handle state
 async function onOpen() {
@@ -129,15 +144,20 @@ async function onOpen() {
   await nextTick()
   innerActive.value = true
   await nextTick()
-  if (view) {
-    view.children.content = contentRef.value
-  }
+  initialize()
 }
 
-async function onClose() {
+function onClose() {
+  destroy()
   innerActive.value = false
-  await nextTick()
-  wrapperActive.value = false
+}
+
+function disableCursor() {
+  state.input.disabled = [...state.input.disabled, 'pointer']
+}
+
+function enableCursor() {
+  state.input.disabled = state.input.disabled.filter((x) => x !== 'pointer')
 }
 
 watch(
@@ -151,9 +171,34 @@ watch(
   }
 )
 
+watch(isInsideTriangle, (value) => {
+  if (value) {
+    disableCursor()
+  } else {
+    enableCursor()
+  }
+})
+
+watch(isInsideTo, (value) => {
+  if (value) {
+    enableCursor()
+  } else {
+    switch (state.options.mode) {
+      case 'navigation':
+        if (!isInsideTriangle.value) {
+          view!.active = false
+        }
+    }
+  }
+})
+
+onBeforeUnmount(async () => {
+  destroy()
+})
+
 provide(MagicMenuContentId, `${viewId}-content`)
 </script>
 
 <style>
-.magic-menu-content{-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-menu-content__inner{border:0;padding:0}.magic-menu-content__initial-enter-active{animation:fade-in 50ms ease}.magic-menu-content__final-leave-active{animation:fade-out .15s ease}.magic-menu-content__nested-enter-active{animation:fade-in .1s ease}
+.magic-menu-content{-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-menu-content__inner{border:0;padding:0}.magic-menu-content--initial-enter-active{animation:fade-in 0ms ease}.magic-menu-content--final-leave-active{animation:fade-out .2s ease}.magic-menu-content--nested-enter-active{animation:fade-in .3s ease}
 </style>

package/dist/plugins/MagicMenu/src/components/MagicMenuContent.vue.d.ts

@@ -1,9 +1,7 @@
 import { type MaybeRef, type ComponentPublicInstance } from 'vue';
-import type { Placement } from '@floating-ui/vue';
 import '@maas/vue-equipment/utils/css/animations/fade-in.css';
 import '@maas/vue-equipment/utils/css/animations/fade-out.css';
 interface MagicMenuContentProps {
-    placement?: Placement;
     arrow?: boolean | undefined;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }

package/dist/plugins/MagicMenu/src/components/MagicMenuFloat.vue

@@ -161,7 +161,7 @@ const mappedReferenceEl = computed(() => {
       },
     }
   } else {
-    return view?.children?.trigger
+    return document.querySelector(`[data-id="${viewId}-trigger"]`)
   }
 })
 
@@ -221,5 +221,5 @@ const polygonPoints = computed(() => {
 </script>
 
 <style>
-.magic-menu-float{display:flex;z-index:var(--magic-menu-float-z-index,999)}.magic-menu-float.-top{flex-direction:column-reverse}.magic-menu-float.-bottom{flex-direction:column}.magic-menu-float.-left{flex-direction:row-reverse}.magic-menu-float.-right{flex-direction:row}.magic-menu-float__arrow{color:var(--magic-menu-float-arrow-color,inherit);height:var(--magic-menu-float-arrow-height,.75rem);width:var(--magic-menu-float-arrow-width,.75rem)}.magic-menu-float__arrow svg{height:100%;width:100%}
+.magic-menu-float{display:flex}.magic-menu-float.-top{flex-direction:column-reverse}.magic-menu-float.-bottom{flex-direction:column}.magic-menu-float.-left{flex-direction:row-reverse}.magic-menu-float.-right{flex-direction:row}.magic-menu-float__arrow{color:var(--magic-menu-float-arrow-color,inherit);height:var(--magic-menu-float-arrow-height,.75rem);width:var(--magic-menu-float-arrow-width,.75rem)}.magic-menu-float__arrow svg{height:100%;width:100%}
 </style>

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.vue

@@ -93,7 +93,7 @@ function guardedUnselect() {
     unselectItem(mappedId.value)
   } else {
     // If there is a nested active view,
-    // unselect the item once it is closed
+    //  unselect the item once it is closed
     watch(
       () => nestedView.value?.active,
       (value) => {

package/dist/plugins/MagicMenu/src/components/MagicMenuProvider.vue

@@ -85,11 +85,7 @@ onClickOutside(
     unselectAllViews()
   },
   {
-    ignore: [
-      '.magic-menu-view',
-      '.magic-menu-item',
-      '.magic-menu-cursor-blocker',
-    ],
+    ignore: ['.magic-menu-view', '.magic-menu-item'],
   }
 )
 

package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue

@@ -0,0 +1,84 @@
+<template>
+  <div
+    class="magic-menu-remote"
+    :class="{ '-active': channel?.active, '-disabled': disabled }"
+    :data-id="`${channelId}-remote`"
+    @click="onClick"
+    @mouseenter="onMouseenter"
+  >
+    <slot :is-active="view?.active" :is-disabled="disabled" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue'
+import { useMenuView } from '../composables/private/useMenuView'
+import { useMenuChannel } from '../composables/private/useMenuChannel'
+import { MagicMenuInstanceId, MagicMenuViewId } from '../symbols'
+
+import type { Interaction } from '../types'
+import { useMenuRemote } from '../composables/private/useMenuRemote'
+
+interface MagicMenuRemoteProps {
+  channelId: string
+  viewId?: string
+  instanceId?: string
+  disabled?: boolean
+  trigger?: Interaction[]
+}
+
+const props = defineProps<MagicMenuRemoteProps>()
+
+const instanceId = inject(MagicMenuInstanceId, props.instanceId)
+const viewId = inject(MagicMenuViewId, props.viewId)
+
+if (!instanceId) {
+  throw new Error(
+    'MagicMenuRemote must be nested inside MagicMenuProvider or an instanceId must be provided'
+  )
+}
+
+if (!viewId) {
+  throw new Error(
+    'MagicMenuTrigger must be nested inside MagicMenuView or a viewId must be provided'
+  )
+}
+
+if (!props.channelId) {
+  throw new Error('MagicMenuRemote requires a channelId')
+}
+
+const mappedChannelId = computed(() => `magic-menu-channel-${props.channelId}`)
+const mappedTrigger = computed<Interaction[]>(
+  () => props.trigger ?? ['mouseenter']
+)
+
+const { getView } = useMenuView(instanceId)
+const view = getView(viewId)
+
+const { initializeChannel, deleteChannel } = useMenuChannel({
+  instanceId,
+  viewId,
+})
+let channel = initializeChannel({ id: mappedChannelId.value })
+
+const { onClick, onMouseenter } = useMenuRemote({
+  viewId,
+  instanceId,
+  mappedChannelId,
+  mappedTrigger,
+})
+
+watch(
+  () => view?.active,
+  () => {
+    // Reset if parent view changes
+    deleteChannel(mappedChannelId.value)
+    channel = initializeChannel({ id: mappedChannelId.value })
+  }
+)
+</script>
+
+<style>
+.magic-menu-remote{cursor:var(--magic-menu-remote-cursor,pointer)}
+</style>

package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue.d.ts

@@ -0,0 +1,29 @@
+import type { Interaction } from '../types';
+interface MagicMenuRemoteProps {
+    channelId: string;
+    viewId?: string;
+    instanceId?: string;
+    disabled?: boolean;
+    trigger?: Interaction[];
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuRemoteProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuRemoteProps>>>, {}, {}>, {
+    default?(_: {
+        isActive: boolean | undefined;
+        isDisabled: boolean | undefined;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue

@@ -8,14 +8,13 @@
     @click="onClick"
     @contextmenu="onClick"
     @mouseenter="onMouseenter"
-    @mouseleave="onMouseleave"
   >
     <slot :is-active="view?.active" :is-disabled="mappedDisabled" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, inject, onBeforeUnmount, ref, toValue, watch } from 'vue'
 import { useMenuState } from '../composables/private/useMenuState'
 import { useMenuView } from '../composables/private/useMenuView'
 import { useMenuItem } from '../composables/private/useMenuItem'
@@ -27,6 +26,7 @@ import {
 } from '../symbols'
 
 import type { Interaction } from '../types'
+import { onKeyStroke } from '@vueuse/core'
 
 interface MagicMenuTriggerProps {
   disabled?: boolean
@@ -68,16 +68,16 @@ const mappedTrigger = computed<Interaction[]>(() => {
   switch (state.options.mode) {
     case 'menubar':
       return view?.parent.item
-        ? ['mouseenter', 'mouseleave', 'click']
-        : ['mouseenter', 'click']
-    case 'dropdown':
-      return view?.parent.item
-        ? ['mouseenter', 'mouseleave', 'click']
+        ? ['mouseenter', 'click']
+        : state.active
+        ? ['mouseenter', 'click']
         : ['click']
+    case 'dropdown':
+      return view?.parent.item ? ['mouseenter', 'click'] : ['click']
     case 'context':
-      return view?.parent.item
-        ? ['mouseenter', 'mouseleave', 'click']
-        : ['right-click']
+      return view?.parent.item ? ['mouseenter', 'click'] : ['right-click']
+    case 'navigation':
+      return ['mouseenter']
   }
 })
 
@@ -89,32 +89,26 @@ const mappedTabindex = computed(() => {
   }
 })
 
-const { initialize, destroy, onMouseenter, onClick, onMouseleave } =
-  useMenuTrigger({
-    instanceId,
-    viewId,
-    itemId,
-    mappedDisabled,
-    mappedTrigger,
-    elRef,
-  })
-
-// Initialize watcher
-initialize()
+const { onMouseenter, onClick, onEnter } = useMenuTrigger({
+  instanceId,
+  viewId,
+  itemId,
+  mappedDisabled,
+  mappedTrigger,
+  elRef,
+})
 
 watch(
-  elRef,
-  (value) => {
-    if (view && value) {
-      view.children.trigger = value
+  () => view?.active,
+  async (value) => {
+    if (value) {
+      await new Promise((resolve) => requestAnimationFrame(resolve))
+      toValue(elRef)?.blur()
     }
-  },
-  { immediate: true }
+  }
 )
 
-onBeforeUnmount(() => {
-  destroy()
-})
+onKeyStroke('Enter', onEnter)
 </script>
 
 <style>

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue

@@ -16,9 +16,12 @@ import {
   MagicMenuItemId,
   MagicMenuViewActive,
 } from '../symbols'
+import type { Placement } from '@floating-ui/vue'
+import { useMenuState } from '../composables/private/useMenuState'
 
 interface MagicMenuViewProps {
   id?: string
+  placement?: Placement
 }
 
 const props = defineProps<MagicMenuViewProps>()
@@ -36,9 +39,32 @@ const mappedParentTree = computed(() => [...parentTree, mappedId.value])
 
 // Register view
 const { initializeView, deleteView } = useMenuView(instanceId)
+const { initializeState } = useMenuState(instanceId)
+const state = initializeState()
+
+const mappedPlacement = computed(() => {
+  if (props.placement) {
+    return props.placement
+  }
+
+  switch (state.options.mode) {
+    case 'navigation':
+      return 'bottom'
+    case 'menubar':
+      return !itemId ? 'bottom-start' : 'right-start'
+    case 'dropdown':
+      return !itemId ? 'bottom' : 'right-start'
+    case 'context':
+      return 'right-start'
+    default:
+      return 'bottom'
+  }
+})
+
 const view = initializeView({
   id: mappedId.value,
   parent: { views: parentTree, item: itemId ?? '' },
+  placement: mappedPlacement.value,
 })
 
 // Pass id, active state and parent tree to children

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue.d.ts

@@ -1,5 +1,7 @@
+import type { Placement } from '@floating-ui/vue';
 interface MagicMenuViewProps {
     id?: string;
+    placement?: Placement;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuViewProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuViewProps>>>, {}, {}>, {
     default?(_: {}): any;

package/dist/plugins/MagicMenu/src/composables/private/useMenuCallback.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import { type MaybeRef, type Ref } from 'vue';
 import type { MenuState } from '../../types.js';
 type UseMenuCallbackArgs = {
     state: MenuState;
@@ -6,6 +6,7 @@ type UseMenuCallbackArgs = {
     viewId: string;
     lockScroll: () => void;
     unlockScroll: () => void;
+    wrapperActive: Ref<boolean>;
 };
 export declare function useMenuCallback(args: UseMenuCallbackArgs): {
     onBeforeEnter: (_el: Element) => void;