@maas/vue-equipment 0.30.0 → 0.30.2

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 });
@@ -17,6 +17,8 @@ export function useMenuCallback(args) {
         break;
       case "menubar":
         break;
+      case "navigation":
+        break;
       case "context":
         lockScroll();
         break;
@@ -36,10 +38,13 @@ export function useMenuCallback(args) {
         break;
       case "menubar":
         break;
+      case "navigation":
+        break;
       case "context":
         unlockScroll();
         break;
     }
+    wrapperActive.value = false;
   }
   return {
     onBeforeEnter,

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

@@ -0,0 +1,15 @@
+import { type MaybeRef } from 'vue';
+import type { MenuChannel } from '../../types.js';
+type UseMenuChannelArgs = {
+    instanceId: MaybeRef<string>;
+    viewId: string;
+};
+type InitializeChannelArgs = Pick<MenuChannel, 'id'>;
+export declare function useMenuChannel(args: UseMenuChannelArgs): {
+    initializeChannel: (args: InitializeChannelArgs) => MenuChannel;
+    deleteChannel: (id: string) => void;
+    getChannel: (id: string) => MenuChannel | undefined;
+    selectChannel: (id: string) => void;
+    unselectChannel: (id: string) => void;
+};
+export {};

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

@@ -0,0 +1,70 @@
+import { reactive } from "vue";
+import { useMenuView } from "./useMenuView.mjs";
+import { useMenuState } from "./useMenuState.mjs";
+export function useMenuChannel(args) {
+  const { instanceId, viewId } = args;
+  const { initializeState } = useMenuState(instanceId);
+  const state = initializeState();
+  const { getView } = useMenuView(instanceId);
+  const view = getView(viewId);
+  function createChannel(args2) {
+    const { id } = args2;
+    const channel = {
+      id,
+      active: false
+    };
+    return reactive(channel);
+  }
+  function addChannel(args2) {
+    const channel = createChannel(args2);
+    if (view?.channels) {
+      view.channels = [...view?.channels, channel];
+    }
+    return channel;
+  }
+  function unselectSiblings(id) {
+    return view?.channels.filter((channel) => channel.id !== id).forEach((channel) => channel.active = false);
+  }
+  function initializeChannel(args2) {
+    const { id } = args2;
+    const instance = getChannel(id);
+    if (!instance) {
+      const channel = addChannel(args2);
+      return channel;
+    }
+    return instance;
+  }
+  function deleteChannel(id) {
+    if (!view?.channels)
+      return;
+    view.channels = view.channels.filter((x) => x.id !== id);
+  }
+  function getChannel(id) {
+    return view?.channels.find((channel) => {
+      return channel.id === id;
+    });
+  }
+  function selectChannel(id) {
+    const instance = getChannel(id);
+    if (instance) {
+      instance.active = true;
+      unselectSiblings(id);
+      if (view) {
+        state.input.view = view.id;
+      }
+    }
+  }
+  function unselectChannel(id) {
+    const instance = getChannel(id);
+    if (instance) {
+      instance.active = false;
+    }
+  }
+  return {
+    initializeChannel,
+    deleteChannel,
+    getChannel,
+    selectChannel,
+    unselectChannel
+  };
+}

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/useMenuRemote.d.ts

@@ -0,0 +1,13 @@
+import { type MaybeRef, type ComputedRef } from 'vue';
+import type { Interaction } from '../../types.js';
+interface UseMenuRemoteArgs {
+    viewId: string;
+    instanceId: MaybeRef<string>;
+    mappedChannelId: MaybeRef<string>;
+    mappedTrigger: ComputedRef<Interaction[]>;
+}
+export declare function useMenuRemote(args: UseMenuRemoteArgs): {
+    onClick: () => void;
+    onMouseenter: () => void;
+};
+export {};

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

@@ -0,0 +1,23 @@
+import { toValue } from "vue";
+import { useMenuChannel } from "./useMenuChannel.mjs";
+export function useMenuRemote(args) {
+  const { viewId, instanceId, mappedChannelId, mappedTrigger } = args;
+  const { selectChannel } = useMenuChannel({
+    instanceId,
+    viewId
+  });
+  function onClick() {
+    if (mappedTrigger.value.includes("click")) {
+      selectChannel(toValue(mappedChannelId));
+    }
+  }
+  function onMouseenter() {
+    if (mappedTrigger.value.includes("mouseenter")) {
+      selectChannel(toValue(mappedChannelId));
+    }
+  }
+  return {
+    onClick,
+    onMouseenter
+  };
+}

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

@@ -1,9 +1,9 @@
 import { type MaybeRef } from 'vue';
 import type { MenuView } from '../../types/index.js';
-type FindViewArgs = Pick<MenuView, 'id' | 'parent'>;
+type InitializeViewArgs = Pick<MenuView, 'id' | 'parent' | 'placement'>;
 export declare function useMenuView(instanceId: MaybeRef<string>): {
     currentView: import("vue").ComputedRef<MenuView>;
-    initializeView: (args: FindViewArgs) => MenuView;
+    initializeView: (args: InitializeViewArgs) => MenuView;
     deleteView: (id: string) => void;
     getView: (id: string) => MenuView | undefined;
     getRelativeViewIndex: (id: string) => number;
@@ -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 {};