@maas/vue-equipment 0.30.3 → 0.30.4

package/dist/plugins/MagicEmitter/src/composables/useMagicEmitter.d.ts

@@ -15,11 +15,11 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             } | {
                 id: string;
                 snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -92,7 +92,7 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -173,7 +173,7 @@ export declare function useMagicEmitter(): {
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
                 position: import("../../../MagicScroll/src/types").Position;
                 element: HTMLElement;
-                data?: Record<string, unknown> | undefined;
+                data?: Record<string, unknown>;
             };
         } & Omit<{
             beforeEnter: string;
@@ -198,11 +198,11 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             } | {
                 id: string;
                 snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -275,7 +275,7 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -356,7 +356,7 @@ export declare function useMagicEmitter(): {
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
                 position: import("../../../MagicScroll/src/types").Position;
                 element: HTMLElement;
-                data?: Record<string, unknown> | undefined;
+                data?: Record<string, unknown>;
             };
         } & Omit<{
             beforeEnter: string;
@@ -368,7 +368,7 @@ export declare function useMagicEmitter(): {
         } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>>): void;
     };
     off: {
-        <Key_1 extends "progress" | "beforeEnter" | "enter" | "afterEnter" | "beforeLeave" | "leave" | "afterLeave" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | keyof import("../../../MagicCookie/src/types").CookieEvents>(type: Key_1, handler?: import("mitt").Handler<({
+        <Key extends "progress" | "beforeEnter" | "enter" | "afterEnter" | "beforeLeave" | "leave" | "afterLeave" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | keyof import("../../../MagicCookie/src/types").CookieEvents>(type: Key, handler?: import("mitt").Handler<({
             accept: import("../../../MagicCookie/src/types").MagicCookieConsent;
             reject: import("../../../MagicCookie/src/types").MagicCookieConsent;
             acceptSelected: import("../../../MagicCookie/src/types").MagicCookieConsent;
@@ -383,11 +383,11 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             } | {
                 id: string;
                 snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -460,7 +460,7 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -541,7 +541,7 @@ export declare function useMagicEmitter(): {
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
                 position: import("../../../MagicScroll/src/types").Position;
                 element: HTMLElement;
-                data?: Record<string, unknown> | undefined;
+                data?: Record<string, unknown>;
             };
         } & Omit<{
             beforeEnter: string;
@@ -550,7 +550,7 @@ export declare function useMagicEmitter(): {
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>)[Key_1]> | undefined): void;
+        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>)[Key]> | undefined): void;
         (type: "*", handler: import("mitt").WildcardHandler<{
             accept: import("../../../MagicCookie/src/types").MagicCookieConsent;
             reject: import("../../../MagicCookie/src/types").MagicCookieConsent;
@@ -566,11 +566,11 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             } | {
                 id: string;
                 snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -643,7 +643,7 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -724,7 +724,7 @@ export declare function useMagicEmitter(): {
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
                 position: import("../../../MagicScroll/src/types").Position;
                 element: HTMLElement;
-                data?: Record<string, unknown> | undefined;
+                data?: Record<string, unknown>;
             };
         } & Omit<{
             beforeEnter: string;
@@ -736,7 +736,7 @@ export declare function useMagicEmitter(): {
         } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>>): void;
     };
     emit: {
-        <Key_2 extends "progress" | "beforeEnter" | "enter" | "afterEnter" | "beforeLeave" | "leave" | "afterLeave" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | keyof import("../../../MagicCookie/src/types").CookieEvents>(type: Key_2, event: ({
+        <Key extends "progress" | "beforeEnter" | "enter" | "afterEnter" | "beforeLeave" | "leave" | "afterLeave" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | keyof import("../../../MagicCookie/src/types").CookieEvents>(type: Key, event: ({
             accept: import("../../../MagicCookie/src/types").MagicCookieConsent;
             reject: import("../../../MagicCookie/src/types").MagicCookieConsent;
             acceptSelected: import("../../../MagicCookie/src/types").MagicCookieConsent;
@@ -751,11 +751,11 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             } | {
                 id: string;
                 snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -828,7 +828,7 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -909,7 +909,7 @@ export declare function useMagicEmitter(): {
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
                 position: import("../../../MagicScroll/src/types").Position;
                 element: HTMLElement;
-                data?: Record<string, unknown> | undefined;
+                data?: Record<string, unknown>;
             };
         } & Omit<{
             beforeEnter: string;
@@ -918,8 +918,8 @@ export declare function useMagicEmitter(): {
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>)[Key_2]): void;
-        <Key_3 extends "progress" | "beforeEnter" | "enter" | "afterEnter" | "beforeLeave" | "leave" | "afterLeave" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | keyof import("../../../MagicCookie/src/types").CookieEvents>(type: undefined extends ({
+        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>)[Key]): void;
+        <Key extends "progress" | "beforeEnter" | "enter" | "afterEnter" | "beforeLeave" | "leave" | "afterLeave" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | keyof import("../../../MagicCookie/src/types").CookieEvents>(type: undefined extends ({
             accept: import("../../../MagicCookie/src/types").MagicCookieConsent;
             reject: import("../../../MagicCookie/src/types").MagicCookieConsent;
             acceptSelected: import("../../../MagicCookie/src/types").MagicCookieConsent;
@@ -934,11 +934,11 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             } | {
                 id: string;
                 snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -1011,7 +1011,7 @@ export declare function useMagicEmitter(): {
             snapTo: {
                 id: string;
                 snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
-                duration?: number | undefined;
+                duration?: number;
             };
             afterSnap: {
                 id: string;
@@ -1092,7 +1092,7 @@ export declare function useMagicEmitter(): {
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
                 position: import("../../../MagicScroll/src/types").Position;
                 element: HTMLElement;
-                data?: Record<string, unknown> | undefined;
+                data?: Record<string, unknown>;
             };
         } & Omit<{
             beforeEnter: string;
@@ -1101,6 +1101,6 @@ export declare function useMagicEmitter(): {
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>)[Key_3] ? Key_3 : never): void;
+        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>)[Key] ? Key : never): void;
     };
 };

package/dist/plugins/MagicMarquee/src/components/MagicMarquee.vue.d.ts

@@ -2,7 +2,11 @@ interface MagicMarqueeProps {
     direction?: 'reverse' | 'normal';
     speed?: number;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicMarqueeProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicMarqueeProps>, {
     direction: string;
     speed: number;
 }>, {
@@ -15,10 +19,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     direction: "reverse" | "normal";
     speed: number;
-}, {}>, {
-    default?(_: {}): any;
-    default?(_: {}): any;
-}>;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -1,16 +1,18 @@
 <template>
-  <div
-    class="magic-menu-channel"
-    v-if="channel.active"
-    :data-id="mappedId"
-    :id="id"
-  >
-    <slot />
-  </div>
+  <transition :name="mappedTransition">
+    <div
+      :class="['magic-menu-channel', { '-initialized': state.active }]"
+      v-if="channel.active"
+      :data-id="mappedId"
+      :id="id"
+    >
+      <slot />
+    </div>
+  </transition>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, provide, onBeforeUnmount } from 'vue'
+import { computed, inject, provide } from 'vue'
 import { useMenuChannel } from '../composables/private/useMenuChannel'
 import {
   MagicMenuInstanceId,
@@ -19,6 +21,7 @@ import {
   MagicMenuChannelId,
   MagicMenuChannelActive,
 } from '../symbols'
+import { useMenuState } from '../composables/private/useMenuState'
 
 interface MagicMenuChannelProps {
   id: string
@@ -46,10 +49,14 @@ if (!props.id) {
   throw new Error('MagicMenuChannel requires an id')
 }
 
+const { initializeState } = useMenuState(instanceId)
+const state = initializeState()
+
 const mappedId = computed(() => `magic-menu-channel-${props.id}`)
+const mappedTransition = computed(() => state.options.transition.channel)
 
 // Register channel
-const { initializeChannel, deleteChannel } = useMenuChannel({
+const { initializeChannel } = useMenuChannel({
   instanceId,
   viewId,
 })
@@ -61,9 +68,8 @@ const channel = initializeChannel({
 // Pass id and active state to children
 provide(MagicMenuChannelId, mappedId.value)
 provide(MagicMenuChannelActive, channel.active)
-
-// Lifecycle
-onBeforeUnmount(() => {
-  deleteChannel(mappedId.value)
-})
 </script>
+
+<style>
+.magic-menu-channel-enter-active{animation:fade-in .3s ease}.magic-menu-channel-enter-active.-initialized{position:absolute}.magic-menu-channel-leave-active{animation:fade-out .3s ease}.magic-menu-channel-leave-active.-initialized{position:absolute}
+</style>

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

@@ -1,9 +1,11 @@
 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>>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {}): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuChannelProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuChannelProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -24,7 +24,11 @@
             <slot name="arrow" />
           </template>
           <template #default>
-            <div class="magic-menu-content__inner" ref="contentRef">
+            <div
+              class="magic-menu-content__inner"
+              ref="contentRef"
+              :class="{ '-disabled': pointerDisabled }"
+            >
               <slot />
             </div>
           </template>
@@ -73,6 +77,7 @@ import {
 
 import '@maas/vue-equipment/utils/css/animations/fade-in.css'
 import '@maas/vue-equipment/utils/css/animations/fade-out.css'
+import { ModeTransitions } from '../utils/modeTransitions'
 
 defineOptions({
   inheritAttrs: false,
@@ -98,22 +103,22 @@ if (!viewId) {
   throw new Error('MagicMenuContent must be nested inside MagicMenuView')
 }
 
-const { getView } = useMenuView(instanceId)
+const { getView, unselectView } = useMenuView(instanceId)
 const view = getView(viewId)
 
 const { initializeState } = useMenuState(instanceId)
 const state = initializeState()
 
+const pointerDisabled = computed(() => state.input.disabled.includes('pointer'))
+
 const mappedTransition = computed(() => {
   switch (true) {
     case !!view?.parent.item:
-      return state.options.transition?.nested
-    case state.active:
-      return state.options.transition?.initial
-    case !state.active:
-      return state.options.transition?.final
+      return state.options.transition.content.nested
+    case !!state.options.transition.content.default:
+      return state.options.transition.content.default
     default:
-      return ''
+      return ModeTransitions[state.options.mode]
   }
 })
 
@@ -171,7 +176,7 @@ const {
   isInsideTriangle,
   isInsideTo,
   isInsideFrom,
-} = useMenuCursor(view!)
+} = useMenuCursor(view!, state.options.debug)
 
 function disableCursor() {
   state.input.disabled = [...state.input.disabled, 'pointer']
@@ -203,7 +208,7 @@ watch(isOutside, (value, oldValue) => {
   if (value && !oldValue) {
     switch (state.options.mode) {
       case 'navigation':
-        view!.active = false
+        unselectView(viewId, 200)
     }
   }
 })
@@ -216,5 +221,5 @@ 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 0ms ease}.magic-menu-content--final-leave-active{animation:fade-out .2s ease}.magic-menu-content--nested-enter-active{animation:fade-in .3s 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__inner.-disabled{pointer-events:none}.magic-menu-content--default-enter-active,.magic-menu-content--default-leave-active{animation:none}.magic-menu-content--fade-enter-active{animation:fade-in .2s ease}.magic-menu-content--fade-leave-active{animation:fade-out .2s ease}
 </style>

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

@@ -5,16 +5,18 @@ interface MagicMenuContentProps {
     arrow?: boolean | undefined;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicMenuContentProps>, {
+declare function __VLS_template(): {
+    arrow?(_: {}): any;
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicMenuContentProps>, {
     arrow: undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicMenuContentProps>, {
     arrow: undefined;
 }>>>, {
     arrow: boolean;
-}, {}>, {
-    arrow?(_: {}): any;
-    default?(_: {}): any;
-}>;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -145,18 +145,18 @@ const mappedMiddleware = computed(() => {
 const mappedReferenceEl = computed(() => {
   if (props.referenceEl) {
     return toValue(props.referenceEl)
-  } else if (view?.click) {
+  } else if (view?.state.clicked) {
     return {
       getBoundingClientRect() {
         return {
           width: 0,
           height: 0,
-          x: view.click!.x,
-          y: view.click!.y,
-          top: view.click!.y,
-          left: view.click!.x,
-          right: view.click!.x,
-          bottom: view.click!.y,
+          x: view.state.clicked!.x,
+          y: view.state.clicked!.y,
+          top: view.state.clicked!.y,
+          left: view.state.clicked!.x,
+          right: view.state.clicked!.x,
+          bottom: view.state.clicked!.y,
         }
       },
     }

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

@@ -5,10 +5,12 @@ interface MagicMenuFloatProps {
     arrow?: boolean;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuFloatProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuFloatProps>>>, {}, {}>, {
+declare function __VLS_template(): {
     arrow?(_: {}): any;
     default?(_: {}): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuFloatProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuFloatProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -2,16 +2,18 @@ interface MagicMenuItemProps {
     id?: string;
     disabled?: boolean;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuItemProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (event: MouseEvent) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuItemProps>>> & {
-    onClick?: ((event: MouseEvent) => any) | undefined;
-}, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {
         isActive: boolean;
         isDisabled: boolean | undefined;
     }): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuItemProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuItemProps>>> & {
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

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

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

@@ -4,9 +4,11 @@ interface MagicMenuProviderProps {
     id: MaybeRef<string>;
     options?: MagicMenuOptions;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuProviderProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuProviderProps>>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {}): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuProviderProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuProviderProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -3,7 +3,7 @@
     class="magic-menu-remote"
     :class="{ '-active': channel?.active, '-disabled': disabled }"
     :data-id="`${channelId}-remote`"
-    @click="onClick"
+    @pointerdown="onClick"
     @mouseenter="onMouseenter"
   >
     <slot :is-active="view?.active" :is-disabled="disabled" />
@@ -49,6 +49,7 @@ if (!props.channelId) {
 }
 
 const mappedChannelId = computed(() => `magic-menu-channel-${props.channelId}`)
+
 const mappedTrigger = computed<Interaction[]>(
   () => props.trigger ?? ['mouseenter']
 )
@@ -60,7 +61,6 @@ const { initializeChannel, deleteChannel } = useMenuChannel({
   instanceId,
   viewId,
 })
-let channel = initializeChannel({ id: mappedChannelId.value })
 
 const { onClick, onMouseenter } = useMenuRemote({
   viewId,
@@ -69,16 +69,20 @@ const { onClick, onMouseenter } = useMenuRemote({
   mappedTrigger,
 })
 
+let channel = initializeChannel({ id: mappedChannelId.value })
+
 watch(
   () => view?.active,
-  () => {
-    // Reset if parent view changes
-    deleteChannel(mappedChannelId.value)
-    channel = initializeChannel({ id: mappedChannelId.value })
+  (value) => {
+    // Reset if parent view is inactive
+    if (!value) {
+      deleteChannel(mappedChannelId.value)
+      channel = initializeChannel({ id: mappedChannelId.value })
+    }
   }
 )
 </script>
 
 <style>
-.magic-menu-remote{cursor:var(--magic-menu-remote-cursor,pointer)}
+.magic-menu-remote{cursor:var(--magic-menu-remote-cursor,pointer)}.magic-menu-remote.-disabled{pointer-events:none}
 </style>

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

@@ -6,12 +6,14 @@ interface MagicMenuRemoteProps {
     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>>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {
         isActive: boolean | undefined;
         isDisabled: boolean | undefined;
     }): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuRemoteProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuRemoteProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -5,7 +5,7 @@
     :class="{ '-active': view?.active, '-disabled': mappedDisabled }"
     :data-id="`${viewId}-trigger`"
     :tabindex="mappedTabindex"
-    @click="onClick"
+    @pointerdown="onClick"
     @contextmenu="onClick"
     @mouseenter="onMouseenter"
   >
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, ref, toValue, watch } from 'vue'
+import { computed, inject, ref, toValue, watch } from 'vue'
 import { useMenuState } from '../composables/private/useMenuState'
 import { useMenuView } from '../composables/private/useMenuView'
 import { useMenuItem } from '../composables/private/useMenuItem'
@@ -58,7 +58,7 @@ const state = initializeState()
 const { getItem } = useMenuItem({ instanceId, viewId })
 const item = getItem(itemId ?? '')
 
-const mappedDisabled = computed(() => props.disabled ?? item?.disabled)
+const mappedDisabled = computed(() => props.disabled ?? item?.disabled ?? false)
 
 const mappedTrigger = computed<Interaction[]>(() => {
   if (props.trigger?.length) {
@@ -112,5 +112,5 @@ onKeyStroke('Enter', onEnter)
 </script>
 
 <style>
-.magic-menu-trigger{cursor:var(--magic-menu-trigger-cursor,pointer)}
+.magic-menu-trigger{cursor:var(--magic-menu-trigger-cursor,pointer)}.magic-menu-trigger.-disabled{pointer-events:none}
 </style>