@maas/vue-equipment 0.30.1 → 0.30.2

package/dist/nuxt/module.json

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

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

@@ -44,8 +44,13 @@ import {
   computed,
   type MaybeRef,
   type ComponentPublicInstance,
+  onBeforeUnmount,
 } from '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,
@@ -54,9 +59,6 @@ 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,
@@ -101,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,
@@ -115,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() {
@@ -127,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(
@@ -149,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/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

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject } from 'vue'
+import { computed, inject, watch } from 'vue'
 import { useMenuView } from '../composables/private/useMenuView'
 import { useMenuChannel } from '../composables/private/useMenuChannel'
 import { MagicMenuInstanceId, MagicMenuViewId } from '../symbols'
@@ -56,11 +56,11 @@ const mappedTrigger = computed<Interaction[]>(
 const { getView } = useMenuView(instanceId)
 const view = getView(viewId)
 
-const { getChannel } = useMenuChannel({
+const { initializeChannel, deleteChannel } = useMenuChannel({
   instanceId,
   viewId,
 })
-const channel = getChannel(mappedChannelId.value)
+let channel = initializeChannel({ id: mappedChannelId.value })
 
 const { onClick, onMouseenter } = useMenuRemote({
   viewId,
@@ -68,6 +68,15 @@ const { onClick, onMouseenter } = useMenuRemote({
   mappedChannelId,
   mappedTrigger,
 })
+
+watch(
+  () => view?.active,
+  () => {
+    // Reset if parent view changes
+    deleteChannel(mappedChannelId.value)
+    channel = initializeChannel({ id: mappedChannelId.value })
+  }
+)
 </script>
 
 <style>

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,20 +68,16 @@ const mappedTrigger = computed<Interaction[]>(() => {
   switch (state.options.mode) {
     case 'menubar':
       return view?.parent.item
-        ? ['mouseenter', 'mouseleave', 'click']
+        ? ['mouseenter', 'click']
         : state.active
         ? ['mouseenter', 'click']
         : ['click']
     case 'dropdown':
-      return view?.parent.item
-        ? ['mouseenter', 'mouseleave', 'click']
-        : ['click']
+      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', 'mouseleave']
+      return ['mouseenter']
   }
 })
 
@@ -93,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/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;

package/dist/plugins/MagicMenu/src/composables/private/useMenuCallback.mjs

@@ -1,7 +1,7 @@
 import { toValue } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 export function useMenuCallback(args) {
-  const { state, instanceId, viewId, lockScroll, unlockScroll } = args;
+  const { state, instanceId, viewId, lockScroll, unlockScroll, wrapperActive } = args;
   const emitter = useMagicEmitter();
   function onBeforeEnter(_el) {
     emitter.emit("beforeEnter", { id: toValue(instanceId), view: viewId });
@@ -44,6 +44,7 @@ export function useMenuCallback(args) {
         unlockScroll();
         break;
     }
+    wrapperActive.value = false;
   }
   return {
     onBeforeEnter,

package/dist/plugins/MagicMenu/src/composables/private/useMenuChannel.mjs

@@ -7,9 +7,6 @@ export function useMenuChannel(args) {
   const state = initializeState();
   const { getView } = useMenuView(instanceId);
   const view = getView(viewId);
-  if (!view) {
-    throw new Error(`View ${viewId} not found`);
-  }
   function createChannel(args2) {
     const { id } = args2;
     const channel = {

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

@@ -0,0 +1,21 @@
+import { type MaybeRef } from 'vue';
+import type { Coordinates } from '../../types.js';
+import type { Placement } from '@floating-ui/vue';
+interface UseMenuCursorArgs {
+    from: MaybeRef<HTMLElement | undefined>;
+    to: MaybeRef<HTMLElement | undefined>;
+    placement: MaybeRef<Placement>;
+    click: MaybeRef<Coordinates | undefined>;
+}
+export declare function useMenuCursor(args: UseMenuCursorArgs): {
+    coords: import("vue").Ref<{
+        x: number;
+        y: number;
+    }[]>;
+    isInsideFrom: import("vue").Ref<boolean>;
+    isInsideTo: import("vue").Ref<boolean>;
+    isInsideTriangle: import("vue").Ref<boolean>;
+    initialize: () => void;
+    destroy: () => void;
+};
+export {};

package/dist/plugins/MagicMenu/src/composables/private/useMenuCursor.mjs

@@ -0,0 +1,212 @@
+import { ref, toValue } from "vue";
+import {
+  useEventListener,
+  useElementBounding,
+  useResizeObserver,
+  usePointer
+} from "@vueuse/core";
+export function useMenuCursor(args) {
+  const cancelListener = ref(new AbortController());
+  const { x, y } = usePointer();
+  const { from, to, placement, click } = args;
+  const coords = ref([
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+    { x: 0, y: 0 }
+  ]);
+  const isInsideFrom = ref(false);
+  const isInsideTo = ref(false);
+  const isInsideTriangle = ref(false);
+  function extendTriangle(vertices, pixelAmount) {
+    const [a, b, c] = vertices;
+    switch (toValue(placement)) {
+      case "bottom":
+      case "bottom-start":
+      case "bottom-end":
+      case "top":
+      case "top-start":
+      case "top-end":
+        switch (true) {
+          case (a.y < b.y && a.y < c.y):
+            b.y += pixelAmount;
+            b.x -= pixelAmount;
+            c.y += pixelAmount;
+            c.x += pixelAmount;
+            break;
+          case (a.y > b.y && a.y > c.y):
+            b.y -= pixelAmount;
+            b.x -= pixelAmount;
+            c.y -= pixelAmount;
+            c.x += pixelAmount;
+            break;
+        }
+        break;
+      case "right":
+      case "right-start":
+      case "right-end":
+      case "left":
+      case "left-start":
+      case "left-end":
+        switch (true) {
+          case (a.x < b.x && a.x < c.x):
+            b.x += pixelAmount;
+            b.y -= pixelAmount;
+            c.x += pixelAmount;
+            c.y += pixelAmount;
+            break;
+          case (a.x > b.x && a.x > c.x):
+            b.x -= pixelAmount;
+            b.y -= pixelAmount;
+            c.x -= pixelAmount;
+            c.y += pixelAmount;
+            break;
+        }
+        break;
+    }
+    coords.value = [a, b, c];
+    return [a, b, c];
+  }
+  function isPointInTriangle(args2) {
+    const { p, a, b, c } = args2;
+    const v0 = { x: c.x - a.x, y: c.y - a.y };
+    const v1 = { x: b.x - a.x, y: b.y - a.y };
+    const v2 = { x: p.x - a.x, y: p.y - a.y };
+    const dot00 = v0.x * v0.x + v0.y * v0.y;
+    const dot01 = v0.x * v1.x + v0.y * v1.y;
+    const dot02 = v0.x * v2.x + v0.y * v2.y;
+    const dot11 = v1.x * v1.x + v1.y * v1.y;
+    const dot12 = v1.x * v2.x + v1.y * v2.y;
+    const invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
+    const u = (dot11 * dot02 - dot01 * dot12) * invDenom;
+    const v = (dot00 * dot12 - dot01 * dot02) * invDenom;
+    return u >= 0 && v >= 0 && u + v <= 1;
+  }
+  function isPointInRectangle(args2) {
+    const { p, top, left, bottom, right } = args2;
+    return p.x >= left && p.x <= right && p.y >= top && p.y <= bottom;
+  }
+  function triangleOverlap(cursor, from2, to2) {
+    const fromBounding = useElementBounding(from2, {
+      windowScroll: false,
+      windowResize: false
+    });
+    const toBounding = useElementBounding(to2, {
+      windowScroll: false,
+      windowResize: false
+    });
+    const { top, left, bottom, right } = toBounding;
+    const centerPoint = toValue(click) ?? {
+      x: (fromBounding.left.value + fromBounding.right.value) / 2,
+      y: (fromBounding.top.value + fromBounding.bottom.value) / 2
+    };
+    const sidePoints = [];
+    switch (toValue(placement)) {
+      case "top":
+      case "top-start":
+      case "top-end":
+      case "bottom":
+      case "bottom-start":
+      case "bottom-end":
+        const topDist = Math.abs(top.value - centerPoint.y);
+        const bottomDist = Math.abs(bottom.value - centerPoint.y);
+        const mappedY = topDist < bottomDist ? top : bottom;
+        sidePoints.push({ x: left.value, y: mappedY.value });
+        sidePoints.push({ x: right.value, y: mappedY.value });
+        break;
+      case "right":
+      case "right-start":
+      case "right-end":
+      case "left":
+      case "left-start":
+      case "left-end":
+        const rightDist = Math.abs(right.value - centerPoint.x);
+        const leftDist = Math.abs(left.value - centerPoint.x);
+        const mappedX = rightDist < leftDist ? right : left;
+        sidePoints.push({ x: mappedX.value, y: top.value });
+        sidePoints.push({ x: mappedX.value, y: bottom.value });
+        break;
+    }
+    const [a, b, c] = extendTriangle(
+      [centerPoint, sidePoints[0], sidePoints[1]],
+      16
+    );
+    return isPointInTriangle({
+      p: cursor,
+      a,
+      b,
+      c
+    });
+  }
+  function elementOverlap(cursor, element) {
+    const { top, left, bottom, right } = useElementBounding(element, {
+      windowScroll: false,
+      windowResize: false
+    });
+    return isPointInRectangle({
+      p: cursor,
+      top: top.value,
+      left: left.value,
+      bottom: bottom.value,
+      right: right.value
+    });
+  }
+  function onMousemove(e) {
+    const cursor = { x: e.clientX, y: e.clientY };
+    isInsideFrom.value = elementOverlap(cursor, from);
+    isInsideTo.value = elementOverlap(cursor, to);
+    isInsideTriangle.value = triangleOverlap(cursor, from, to);
+  }
+  function fromMouseenter() {
+    isInsideFrom.value = true;
+  }
+  function fromMouseleave() {
+    isInsideFrom.value = false;
+  }
+  function toMouseenter() {
+    isInsideTo.value = true;
+  }
+  function toMouseleave(e) {
+    isInsideTo.value = false;
+  }
+  function onResize() {
+    const cursor = { x: x.value, y: y.value };
+    isInsideFrom.value = elementOverlap(cursor, from);
+    isInsideTo.value = elementOverlap(cursor, to);
+    isInsideTriangle.value = triangleOverlap(cursor, from, to);
+  }
+  function initialize() {
+    cancelListener.value.abort();
+    cancelListener.value = new AbortController();
+    useEventListener(from, "mouseenter", fromMouseenter, {
+      signal: cancelListener.value.signal
+    });
+    useEventListener(from, "mouseleave", fromMouseleave, {
+      signal: cancelListener.value.signal
+    });
+    useEventListener(to, "mouseenter", toMouseenter, {
+      signal: cancelListener.value.signal
+    });
+    useEventListener(to, "mouseleave", toMouseleave, {
+      signal: cancelListener.value.signal
+    });
+    useEventListener(document, "mousemove", onMousemove, {
+      signal: cancelListener.value.signal
+    });
+    useResizeObserver(to, onResize);
+  }
+  function destroy() {
+    coords.value = [];
+    isInsideFrom.value = false;
+    isInsideTo.value = false;
+    isInsideTriangle.value = false;
+    cancelListener.value.abort();
+  }
+  return {
+    coords,
+    isInsideFrom,
+    isInsideTo,
+    isInsideTriangle,
+    initialize,
+    destroy
+  };
+}

package/dist/plugins/MagicMenu/src/composables/private/useMenuItem.mjs

@@ -5,7 +5,7 @@ export function useMenuItem(args) {
   const { instanceId, viewId } = args;
   const { initializeState } = useMenuState(instanceId);
   const state = initializeState();
-  const { getView, unselectNonTreeViews } = useMenuView(instanceId);
+  const { getView, unselectDescendingViews } = useMenuView(instanceId);
   const view = getView(viewId);
   if (!view) {
     throw new Error(`View ${viewId} not found`);
@@ -53,7 +53,7 @@ export function useMenuItem(args) {
     if (instance) {
       instance.active = true;
       unselectSiblings(id);
-      unselectNonTreeViews(viewId);
+      unselectDescendingViews(viewId);
       if (view) {
         state.input.view = view.id;
       }

package/dist/plugins/MagicMenu/src/composables/private/useMenuKeyListener.mjs

@@ -7,7 +7,7 @@ export function useMenuKeyListener(instanceId) {
   const {
     selectView,
     unselectView,
-    unselectNonTreeViews,
+    unselectUnrelatedViews,
     unselectAllViews,
     getView,
     getNextView,
@@ -101,11 +101,11 @@ export function useMenuKeyListener(instanceId) {
     if (prevIndex >= 0) {
       const { selectItem } = useMenuItem({ instanceId, viewId });
       selectItem(enabledItems[prevIndex]?.id);
-      unselectNonTreeViews(viewId);
+      unselectUnrelatedViews(viewId);
     } else if (prevIndex !== -1) {
       const { selectItem } = useMenuItem({ instanceId, viewId });
       selectItem(enabledItems[enabledItems.length - 1]?.id);
-      unselectNonTreeViews(viewId);
+      unselectUnrelatedViews(viewId);
     }
   }
   function onArrowDown(e) {
@@ -125,7 +125,7 @@ export function useMenuKeyListener(instanceId) {
     if (nextIndex >= 0) {
       const { selectItem } = useMenuItem({ instanceId, viewId });
       selectItem(enabledItems[nextIndex]?.id);
-      unselectNonTreeViews(viewId);
+      unselectUnrelatedViews(viewId);
     }
   }
   function onEscape(e) {

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

@@ -11,8 +11,6 @@ type UseMenuTriggerArgs = {
 export declare function useMenuTrigger(args: UseMenuTriggerArgs): {
     onMouseenter: () => void;
     onClick: (e: MouseEvent) => void;
-    onMouseleave: (e: MouseEvent) => void;
-    initialize: () => void;
-    destroy: () => void;
+    onEnter: (e: KeyboardEvent) => void;
 };
 export {};

package/dist/plugins/MagicMenu/src/composables/private/useMenuTrigger.mjs

@@ -1,139 +1,14 @@
-import {
-  ref,
-  computed,
-  watch,
-  toValue
-} from "vue";
-import {
-  useEventListener,
-  useElementBounding,
-  useMagicKeys,
-  useFocus,
-  onKeyStroke
-} from "@vueuse/core";
+import { useMagicKeys, useFocus } from "@vueuse/core";
 import { useMenuView } from "./useMenuView.mjs";
 import { useMenuState } from "./useMenuState.mjs";
 export function useMenuTrigger(args) {
   const { instanceId, viewId, itemId, mappedTrigger, mappedDisabled, elRef } = args;
-  let cancelPointermove = void 0;
-  const mouseleaveCoordinates = ref(void 0);
   const { getView, selectView, unselectView } = useMenuView(instanceId);
   const view = getView(viewId);
   const { initializeState } = useMenuState(instanceId);
   const state = initializeState();
   const { focused } = useFocus(elRef);
-  const isInsideTriangle = ref(false);
-  const isInsideTrigger = ref(false);
-  const isInsideContent = ref(false);
-  const isOutside = computed(() => {
-    return !isInsideTrigger.value && !isInsideContent.value && !isInsideTriangle.value;
-  });
   const { shift, control } = useMagicKeys();
-  function resetState() {
-    mouseleaveCoordinates.value = void 0;
-    isInsideTriangle.value = false;
-  }
-  function disableCursor() {
-    state.input.disabled = [...state.input.disabled, "pointer"];
-  }
-  function enableCursor() {
-    state.input.disabled = state.input.disabled.filter((x) => x !== "pointer");
-  }
-  function extendTriangle(vertices, pixelAmount) {
-    const centroid = {
-      x: (vertices[0].x + vertices[1].x + vertices[2].x) / 3,
-      y: (vertices[0].y + vertices[1].y + vertices[2].y) / 3
-    };
-    function extendPoint(vertex) {
-      const dir = {
-        x: vertex.x - centroid.x,
-        y: vertex.y - centroid.y
-      };
-      const distance = Math.sqrt(dir.x * dir.x + dir.y * dir.y);
-      const unitDir = {
-        x: dir.x / distance,
-        y: dir.y / distance
-      };
-      const scaledDir = {
-        x: unitDir.x * pixelAmount,
-        y: unitDir.y * pixelAmount
-      };
-      return {
-        x: vertex.x + scaledDir.x,
-        y: vertex.y + scaledDir.y
-      };
-    }
-    return [
-      extendPoint(vertices[0]),
-      extendPoint(vertices[1]),
-      extendPoint(vertices[2])
-    ];
-  }
-  function isPointInTriangle(args2) {
-    const { p, a, b, c } = args2;
-    const v0 = { x: c.x - a.x, y: c.y - a.y };
-    const v1 = { x: b.x - a.x, y: b.y - a.y };
-    const v2 = { x: p.x - a.x, y: p.y - a.y };
-    const dot00 = v0.x * v0.x + v0.y * v0.y;
-    const dot01 = v0.x * v1.x + v0.y * v1.y;
-    const dot02 = v0.x * v2.x + v0.y * v2.y;
-    const dot11 = v1.x * v1.x + v1.y * v1.y;
-    const dot12 = v1.x * v2.x + v1.y * v2.y;
-    const invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
-    const u = (dot11 * dot02 - dot01 * dot12) * invDenom;
-    const v = (dot00 * dot12 - dot01 * dot02) * invDenom;
-    return u >= 0 && v >= 0 && u + v <= 1;
-  }
-  function isPointInRectangle(args2) {
-    const { p, top, left, bottom, right } = args2;
-    return p.x >= left && p.x <= right && p.y >= top && p.y <= bottom;
-  }
-  async function onPointermove(e) {
-    if (!mouseleaveCoordinates.value || !view?.children.content) {
-      return;
-    }
-    const mouseCoordinates = { x: e.clientX, y: e.clientY };
-    const { top, left, bottom, right } = useElementBounding(
-      view.children.content
-    );
-    const {
-      top: topTrigger,
-      left: leftTrigger,
-      bottom: bottomTrigger,
-      right: rightTrigger
-    } = useElementBounding(elRef);
-    const rightDistance = Math.abs(right.value - mouseleaveCoordinates.value.x);
-    const leftDistance = Math.abs(left.value - mouseleaveCoordinates.value.x);
-    const mappedX = rightDistance < leftDistance ? right : left;
-    const [a, b, c] = extendTriangle(
-      [
-        mouseleaveCoordinates.value,
-        { x: mappedX.value, y: top.value },
-        { x: mappedX.value, y: bottom.value }
-      ],
-      16
-    );
-    isInsideTriangle.value = isPointInTriangle({
-      p: mouseCoordinates,
-      a,
-      b,
-      c
-    });
-    isInsideContent.value = isPointInRectangle({
-      p: mouseCoordinates,
-      top: top.value,
-      left: left.value,
-      bottom: bottom.value,
-      right: right.value
-    });
-    isInsideTrigger.value = isPointInRectangle({
-      p: mouseCoordinates,
-      top: topTrigger.value,
-      left: leftTrigger.value,
-      bottom: bottomTrigger.value,
-      right: rightTrigger.value
-    });
-  }
   function onRightClick(e) {
     switch (e.button) {
       case 2:
@@ -162,8 +37,6 @@ export function useMenuTrigger(args) {
     }
   }
   function onMouseenter() {
-    cancelPointermove?.();
-    resetState();
     if (mappedTrigger.value.includes("mouseenter") && !mappedDisabled.value && viewId && view) {
       if (mappedTrigger.value[0].includes("mouseenter")) {
         state.active = true;
@@ -173,9 +46,6 @@ export function useMenuTrigger(args) {
         if (!itemId) {
           state.input.view = viewId;
         }
-        if (itemId) {
-          disableCursor();
-        }
       }
     }
   }
@@ -211,57 +81,9 @@ export function useMenuTrigger(args) {
       }
     }
   }
-  function onMouseleave(e) {
-    if (mappedTrigger.value.includes("mouseleave") && viewId) {
-      mouseleaveCoordinates.value = { x: e.clientX, y: e.clientY };
-      cancelPointermove = useEventListener("pointermove", onPointermove);
-    }
-  }
-  function initialize() {
-    watch(
-      () => view?.active,
-      async (value) => {
-        if (value) {
-          await new Promise((resolve) => requestAnimationFrame(resolve));
-          toValue(elRef)?.blur();
-        }
-      }
-    );
-    watch(isInsideTriangle, async (value, oldValue) => {
-      if (value && !oldValue) {
-        disableCursor();
-      } else if (!value && oldValue) {
-        enableCursor();
-      }
-    });
-    watch(isInsideContent, (value, oldValue) => {
-      if (value && !oldValue) {
-        cancelPointermove?.();
-        resetState();
-        enableCursor();
-      }
-    });
-    watch(isOutside, (value, oldValue) => {
-      if (!cancelPointermove) {
-        return;
-      }
-      if (value && !oldValue) {
-        unselectView(viewId);
-        cancelPointermove();
-        enableCursor();
-        resetState();
-      }
-    });
-    onKeyStroke("Enter", onEnter);
-  }
-  function destroy() {
-    cancelPointermove?.();
-  }
   return {
     onMouseenter,
     onClick,
-    onMouseleave,
-    initialize,
-    destroy
+    onEnter
   };
 }

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

@@ -14,7 +14,8 @@ export declare function useMenuView(instanceId: MaybeRef<string>): {
     getParentView: (id: string) => MenuView | undefined;
     selectView: (id: string) => void;
     unselectView: (id: string) => void;
-    unselectNonTreeViews: (id: string) => void;
+    unselectUnrelatedViews: (id: string) => void;
+    unselectDescendingViews: (id: string) => void;
     unselectAllViews: () => void;
 };
 export {};

package/dist/plugins/MagicMenu/src/composables/private/useMenuView.mjs

@@ -1,4 +1,8 @@
-import { reactive, computed, toValue } from "vue";
+import {
+  reactive,
+  computed,
+  toValue
+} from "vue";
 import { useMenuState } from "./useMenuState.mjs";
 export function useMenuView(instanceId) {
   const { initializeState } = useMenuState(instanceId);
@@ -16,10 +20,6 @@ export function useMenuView(instanceId) {
     const view = {
       id,
       parent,
-      children: {
-        trigger: void 0,
-        content: void 0
-      },
       active: false,
       items: [],
       channels: [],
@@ -69,17 +69,23 @@ export function useMenuView(instanceId) {
     const parentId = view?.parent.views[view.parent.views.length - 1];
     return getView(parentId ?? "");
   }
-  function getNonTreeViews(id) {
-    const currentView2 = getView(id);
+  function getUnrelatedViews(id) {
+    const argView = getView(id);
     return state.views?.filter(
-      (view) => !currentView2?.parent.views.includes(view.id) && view.id !== id
+      (view) => !view.parent.views.includes(id) && !argView?.parent.views.includes(view.id) && view.id !== id
+    );
+  }
+  function getDescendingViews(id) {
+    const argView = getView(id);
+    return state.views?.filter(
+      (view) => view.id !== id && !argView?.parent.views.includes(view.id)
     );
   }
   function selectView(id) {
     const instance = getView(id);
     if (instance) {
       instance.active = true;
-      unselectNonTreeViews(id);
+      unselectUnrelatedViews(id);
     }
   }
   function unselectView(id) {
@@ -88,9 +94,13 @@ export function useMenuView(instanceId) {
       instance.active = false;
     }
   }
-  function unselectNonTreeViews(id) {
-    const nonTreeViews = getNonTreeViews(id);
-    nonTreeViews.forEach((view) => view.active = false);
+  function unselectUnrelatedViews(id) {
+    const unrelatedViews = getUnrelatedViews(id);
+    unrelatedViews.forEach((view) => view.active = false);
+  }
+  function unselectDescendingViews(id) {
+    const descendingViews = getDescendingViews(id);
+    descendingViews.forEach((view) => view.active = false);
   }
   function unselectAllViews() {
     state.views?.forEach((view) => {
@@ -110,7 +120,8 @@ export function useMenuView(instanceId) {
     getParentView,
     selectView,
     unselectView,
-    unselectNonTreeViews,
+    unselectUnrelatedViews,
+    unselectDescendingViews,
     unselectAllViews
   };
 }

package/dist/plugins/MagicMenu/src/composables/useMagicMenu.d.ts

@@ -1,7 +1,7 @@
 import { type MaybeRef } from 'vue';
 interface UseMagicMenuArgs {
     instanceId: MaybeRef<string>;
-    viewId?: string;
+    viewId: string;
 }
 export declare function useMagicMenu(args: UseMagicMenuArgs): {
     selectView: (id: string) => void;

package/dist/plugins/MagicMenu/src/composables/useMagicMenu.mjs

@@ -5,7 +5,7 @@ export function useMagicMenu(args) {
   const { selectView, unselectView } = useMenuView(instanceId);
   const { selectChannel, unselectChannel } = useMenuChannel({
     instanceId,
-    viewId: viewId ?? ""
+    viewId
   });
   return {
     selectView,

package/dist/plugins/MagicMenu/src/types/index.d.ts

@@ -9,7 +9,7 @@ export interface MagicMenuOptions {
         nested?: string;
     };
 }
-export type Interaction = 'click' | 'mouseenter' | 'mouseleave' | 'right-click';
+export type Interaction = 'click' | 'mouseenter' | 'right-click';
 export type Coordinates = {
     x: number;
     y: number;
@@ -32,10 +32,6 @@ export interface MenuView {
         item: string;
         views: string[];
     };
-    children: {
-        trigger?: HTMLElement;
-        content?: HTMLElement;
-    };
     placement: Placement;
     click?: Coordinates;
 }

package/dist/plugins/MagicMenu/src/utils/defaultOptions.mjs

@@ -1,9 +1,9 @@
 const defaultOptions = {
   mode: "menubar",
   transition: {
-    initial: "magic-menu-content__initial",
-    final: "magic-menu-content__final",
-    nested: "magic-menu-content__nested"
+    initial: "magic-menu-content--initial",
+    final: "magic-menu-content--final",
+    nested: "magic-menu-content--nested"
   }
 };
 export { defaultOptions };

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

@@ -24,7 +24,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loop: boolean;
     srcType: MagicPlayerSourceType;
     autoplay: boolean;
-    preload: "metadata" | "auto" | "none";
+    preload: "metadata" | "none" | "auto";
 }, {}>, {
     default?(_: {}): any;
 }>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.30.1",
+  "version": "0.30.2",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",