@maas/vue-equipment 0.29.2 → 0.29.4

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

@@ -0,0 +1,178 @@
+import { useMenuState } from "./useMenuState.mjs";
+import { useMenuView } from "./useMenuView.mjs";
+import { useMenuItem } from "./useMenuItem.mjs";
+export function useMenuKeyListener(instanceId) {
+  const { initializeState } = useMenuState(instanceId);
+  const state = initializeState();
+  const {
+    selectView,
+    unselectView,
+    unselectNonTreeViews,
+    unselectAllViews,
+    getView,
+    getNextView,
+    getPreviousView,
+    getTopLevelView,
+    getNestedView,
+    getParentView
+  } = useMenuView(instanceId);
+  function keyStrokeGuard(e) {
+    switch (true) {
+      case !state.active:
+        throw new Error("Menu is not active");
+      default:
+        state.input.type = "keyboard";
+        e.preventDefault();
+        e.stopPropagation();
+    }
+  }
+  function getEnabledItems(view) {
+    return view.items.filter((item) => !item.disabled);
+  }
+  function selectFirstItem(view) {
+    const { selectItem } = useMenuItem({ instanceId, viewId: view.id });
+    selectItem(getEnabledItems(view)[0]?.id);
+  }
+  async function onArrowRight(e) {
+    try {
+      keyStrokeGuard(e);
+    } catch (_e) {
+    }
+    if (!state.input.view) {
+      return;
+    }
+    const viewId = state.input.view;
+    const inputView = getView(viewId);
+    if (inputView) {
+      const activeItem = inputView.items.find((item) => item.active);
+      const nestedView = activeItem ? getNestedView(activeItem.id) : void 0;
+      if (nestedView) {
+        selectView(nestedView.id);
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        selectFirstItem(nestedView);
+        return;
+      }
+      const topLevelView = getTopLevelView();
+      const nextView = topLevelView ? getNextView(topLevelView.id) : void 0;
+      if (nextView && !nextView.parent.item) {
+        selectView(nextView.id);
+        state.input.view = nextView.id;
+        return;
+      }
+    }
+  }
+  function onArrowLeft(e) {
+    try {
+      keyStrokeGuard(e);
+    } catch (_e) {
+    }
+    if (!state.input.view) {
+      return;
+    }
+    const viewId = state.input.view;
+    const inputView = getView(viewId);
+    if (inputView && inputView.parent.item) {
+      unselectView(viewId);
+      state.input.view = getParentView(viewId)?.id ?? "";
+      return;
+    }
+    const topLevelView = getTopLevelView();
+    const previousView = topLevelView ? getPreviousView(topLevelView.id) : void 0;
+    if (previousView) {
+      selectView(previousView.id);
+      state.input.view = previousView.id;
+      return;
+    }
+  }
+  function onArrowUp(e) {
+    try {
+      keyStrokeGuard(e);
+    } catch (_e) {
+    }
+    if (!state.input.view) {
+      return;
+    }
+    const viewId = state.input.view;
+    const inputView = getView(viewId);
+    if (!inputView)
+      return;
+    const enabledItems = getEnabledItems(inputView);
+    const prevIndex = enabledItems.findIndex((item) => item.active) - 1;
+    if (prevIndex >= 0) {
+      const { selectItem } = useMenuItem({ instanceId, viewId });
+      selectItem(enabledItems[prevIndex]?.id);
+      unselectNonTreeViews(viewId);
+    } else if (prevIndex !== -1) {
+      const { selectItem } = useMenuItem({ instanceId, viewId });
+      selectItem(enabledItems[enabledItems.length - 1]?.id);
+      unselectNonTreeViews(viewId);
+    }
+  }
+  function onArrowDown(e) {
+    try {
+      keyStrokeGuard(e);
+    } catch (_e) {
+    }
+    if (!state.input.view) {
+      return;
+    }
+    const viewId = state.input.view;
+    const inputView = getView(viewId);
+    if (!inputView)
+      return;
+    const enabledItems = getEnabledItems(inputView);
+    const nextIndex = enabledItems.findIndex((item) => item.active) + 1;
+    if (nextIndex >= 0) {
+      const { selectItem } = useMenuItem({ instanceId, viewId });
+      selectItem(enabledItems[nextIndex]?.id);
+      unselectNonTreeViews(viewId);
+    }
+  }
+  function onEscape(e) {
+    try {
+      keyStrokeGuard(e);
+    } catch (_e) {
+    }
+    state.active = false;
+    state.input.view = "";
+    unselectAllViews();
+  }
+  async function onEnter(e) {
+    try {
+      keyStrokeGuard(e);
+    } catch (_e) {
+    }
+    if (!state.input.view) {
+      return;
+    }
+    const viewId = state.input.view;
+    const inputView = getView(viewId);
+    if (inputView) {
+      const activeItem = inputView.items.find((item) => item.active);
+      const nestedView = activeItem ? getNestedView(activeItem.id) : void 0;
+      if (nestedView) {
+        selectView(nestedView.id);
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        selectFirstItem(nestedView);
+        return;
+      }
+    }
+  }
+  function onTab(e) {
+    if (state.active) {
+      try {
+        keyStrokeGuard(e);
+      } catch (_e) {
+      }
+    }
+  }
+  return {
+    onArrowRight,
+    onArrowLeft,
+    onArrowUp,
+    onArrowDown,
+    onEscape,
+    onEnter,
+    onTab
+  };
+}

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

@@ -0,0 +1,7 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { MenuState, MagicMenuOptions } from '../../types/index.js';
+export declare function useMenuState(instanceId: MaybeRef<string>): {
+    initializeState: (options?: MagicMenuOptions) => MenuState;
+    deleteState: () => void;
+    menuStateStore: Ref<MenuState[]>;
+};

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

@@ -0,0 +1,48 @@
+import { ref, reactive, toValue } from "vue";
+import { defu } from "defu";
+import { defaultOptions } from "../../utils/defaultOptions.mjs";
+const menuStateStore = ref([]);
+export function useMenuState(instanceId) {
+  function createState(id) {
+    const state = {
+      id,
+      options: defaultOptions,
+      views: [],
+      active: false,
+      input: {
+        type: "pointer",
+        disabled: [],
+        view: void 0
+      }
+    };
+    return reactive(state);
+  }
+  function addState(id) {
+    const instance = createState(id);
+    menuStateStore.value = [...menuStateStore.value, instance];
+    return instance;
+  }
+  function initializeState(options) {
+    let instance = menuStateStore.value.find((instance2) => {
+      return instance2.id === toValue(instanceId);
+    });
+    if (!instance) {
+      instance = addState(toValue(instanceId));
+    }
+    if (options) {
+      const mappedOptions = defu(options, defaultOptions);
+      instance.options = mappedOptions;
+    }
+    return instance;
+  }
+  function deleteState() {
+    menuStateStore.value = menuStateStore.value.filter(
+      (x) => x.id !== toValue(instanceId)
+    );
+  }
+  return {
+    initializeState,
+    deleteState,
+    menuStateStore
+  };
+}

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

@@ -0,0 +1,18 @@
+import { type ComputedRef, type MaybeRef, type Ref } from 'vue';
+import type { MenuTrigger } from '../../types/index.js';
+type UseMenuTriggerArgs = {
+    instanceId: MaybeRef<string>;
+    viewId: string;
+    itemId?: string;
+    mappedDisabled: ComputedRef<boolean>;
+    mappedTrigger: ComputedRef<MenuTrigger[]>;
+    elRef: Ref<HTMLElement | undefined>;
+};
+export declare function useMenuTrigger(args: UseMenuTriggerArgs): {
+    onMouseenter: () => void;
+    onClick: (e: MouseEvent) => void;
+    onMouseleave: (e: MouseEvent) => void;
+    initialize: () => void;
+    destroy: () => void;
+};
+export {};

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

@@ -0,0 +1,262 @@
+import {
+  ref,
+  computed,
+  watch,
+  toValue
+} from "vue";
+import {
+  useEventListener,
+  useElementBounding,
+  useMagicKeys,
+  useFocus,
+  onKeyStroke
+} 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:
+        selectView(viewId);
+        state.active = true;
+        if (view) {
+          view.click = { x: e.clientX, y: e.clientY };
+        }
+        if (!itemId) {
+          state.input.view = viewId;
+        }
+        break;
+      default:
+        state.active = false;
+        unselectView(viewId);
+    }
+  }
+  function onEnter(e) {
+    if (focused.value && !mappedDisabled.value && !view?.active) {
+      e.preventDefault();
+      e.stopPropagation();
+      state.active = true;
+      state.input.type = "keyboard";
+      state.input.view = viewId;
+      selectView(viewId);
+    }
+  }
+  function onMouseenter() {
+    cancelPointermove?.();
+    resetState();
+    if (mappedTrigger.value.includes("mouseenter") && view && viewId && state.active && !mappedDisabled.value) {
+      selectView(viewId);
+      if (!itemId) {
+        state.input.view = viewId;
+      }
+      if (itemId) {
+        disableCursor();
+      }
+    }
+  }
+  function onClick(e) {
+    if (mappedTrigger.value.includes("click") && !mappedDisabled.value && e.button === 0 && viewId) {
+      switch (true) {
+        case !state.active:
+          state.active = true;
+          selectView(viewId);
+          if (!itemId) {
+            state.input.view = viewId;
+          }
+          break;
+        case (state.active && !itemId):
+          state.active = false;
+          unselectView(viewId);
+          break;
+      }
+    }
+    if (mappedTrigger.value.includes("right-click") && viewId) {
+      e.preventDefault();
+      if (control.value || shift.value) {
+        onRightClick(
+          new MouseEvent(e.type, {
+            ...e,
+            button: 2,
+            clientX: e.clientX,
+            clientY: e.clientY
+          })
+        );
+      } else {
+        onRightClick(e);
+      }
+    }
+  }
+  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
+  };
+}

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

@@ -0,0 +1,3 @@
+export declare function useMenuUtils(): {
+    arraysAreEqual: (a: string[], b: string[]) => boolean;
+};

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

@@ -0,0 +1,16 @@
+export function useMenuUtils() {
+  function arraysAreEqual(a, b) {
+    if (a.length !== b.length) {
+      return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return {
+    arraysAreEqual
+  };
+}

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

@@ -0,0 +1,20 @@
+import { type MaybeRef } from 'vue';
+import type { MenuView } from '../../types/index.js';
+type FindViewArgs = Pick<MenuView, 'id' | 'parent'>;
+export declare function useMenuView(instanceId: MaybeRef<string>): {
+    currentView: import("vue").ComputedRef<MenuView>;
+    initializeView: (args: FindViewArgs) => MenuView;
+    deleteView: (id: string) => void;
+    getView: (id: string) => MenuView | undefined;
+    getRelativeViewIndex: (id: string) => number;
+    getNextView: (id: string) => MenuView;
+    getPreviousView: (id: string) => MenuView;
+    getTopLevelView: () => MenuView | undefined;
+    getNestedView: (itemId: string) => MenuView | undefined;
+    getParentView: (id: string) => MenuView | undefined;
+    selectView: (id: string) => void;
+    unselectView: (id: string) => void;
+    unselectNonTreeViews: (id: string) => void;
+    unselectAllViews: () => void;
+};
+export {};

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

@@ -0,0 +1,116 @@
+import { reactive, computed, toValue } from "vue";
+import { useMenuState } from "./useMenuState.mjs";
+export function useMenuView(instanceId) {
+  const { initializeState } = useMenuState(instanceId);
+  const state = initializeState();
+  const currentView = computed(
+    () => state.views.filter((view) => view.active).reduce(
+      (a, b) => a.parent.views.length >= b.parent.views.length ? a : b
+    )
+  );
+  function createView(args) {
+    const { id, parent } = args;
+    if (parent.views.length === 0) {
+      parent.views.push(toValue(instanceId));
+    }
+    const view = {
+      id,
+      parent,
+      children: {
+        trigger: void 0,
+        content: void 0
+      },
+      active: false,
+      items: []
+    };
+    return reactive(view);
+  }
+  function addView(args) {
+    const view = createView(args);
+    state.views = [...state.views, view];
+    return view;
+  }
+  function initializeView(args) {
+    const { id } = args;
+    let instance = getView(id);
+    if (!instance)
+      instance = addView(args);
+    return instance;
+  }
+  function deleteView(id) {
+    state.views = state.views?.filter((view) => view.id !== id);
+  }
+  function getView(id) {
+    return state.views?.find((view) => {
+      return view.id === id;
+    });
+  }
+  function getRelativeViewIndex(id) {
+    const view = getView(id);
+    const nestingLevel = view?.parent.views.length;
+    return state.views?.filter((view2) => view2.parent.views.length === nestingLevel).findIndex((view2) => view2.id === id);
+  }
+  function getNextView(id) {
+    const index = state.views?.findIndex((view) => view.id === id);
+    return state.views?.[index + 1];
+  }
+  function getPreviousView(id) {
+    const index = state.views?.findIndex((view) => view.id === id);
+    return state.views?.[index - 1];
+  }
+  function getTopLevelView() {
+    return state.views?.find((view) => view.active && !view.parent.item);
+  }
+  function getNestedView(itemId) {
+    return state.views?.find((view) => view.parent.item === itemId);
+  }
+  function getParentView(id) {
+    const view = getView(id);
+    const parentId = view?.parent.views[view.parent.views.length - 1];
+    return getView(parentId ?? "");
+  }
+  function getNonTreeViews(id) {
+    const currentView2 = getView(id);
+    return state.views?.filter(
+      (view) => !currentView2?.parent.views.includes(view.id) && view.id !== id
+    );
+  }
+  function selectView(id) {
+    const instance = getView(id);
+    if (instance) {
+      instance.active = true;
+      unselectNonTreeViews(id);
+    }
+  }
+  function unselectView(id) {
+    const instance = getView(id);
+    if (instance) {
+      instance.active = false;
+    }
+  }
+  function unselectNonTreeViews(id) {
+    const nonTreeViews = getNonTreeViews(id);
+    nonTreeViews.forEach((view) => view.active = false);
+  }
+  function unselectAllViews() {
+    state.views?.forEach((view) => {
+      view.active = false;
+    });
+  }
+  return {
+    currentView,
+    initializeView,
+    deleteView,
+    getView,
+    getRelativeViewIndex,
+    getNextView,
+    getPreviousView,
+    getTopLevelView,
+    getNestedView,
+    getParentView,
+    selectView,
+    unselectView,
+    unselectNonTreeViews,
+    unselectAllViews
+  };
+}

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

@@ -0,0 +1,9 @@
+import type { InjectionKey, MaybeRef } from 'vue';
+declare const MagicMenuInstanceId: InjectionKey<MaybeRef<string>>;
+declare const MagicMenuParentTree: InjectionKey<string[]>;
+declare const MagicMenuViewId: InjectionKey<string>;
+declare const MagicMenuViewActive: InjectionKey<boolean>;
+declare const MagicMenuContentId: InjectionKey<string>;
+declare const MagicMenuItemId: InjectionKey<string>;
+declare const MagicMenuItemActive: InjectionKey<boolean>;
+export { MagicMenuInstanceId, MagicMenuParentTree, MagicMenuViewId, MagicMenuViewActive, MagicMenuContentId, MagicMenuItemId, MagicMenuItemActive, };

package/dist/plugins/MagicMenu/src/symbols/index.mjs

@@ -0,0 +1,16 @@
+const MagicMenuInstanceId = Symbol();
+const MagicMenuParentTree = Symbol();
+const MagicMenuViewId = Symbol();
+const MagicMenuViewActive = Symbol();
+const MagicMenuContentId = Symbol();
+const MagicMenuItemId = Symbol();
+const MagicMenuItemActive = Symbol();
+export {
+  MagicMenuInstanceId,
+  MagicMenuParentTree,
+  MagicMenuViewId,
+  MagicMenuViewActive,
+  MagicMenuContentId,
+  MagicMenuItemId,
+  MagicMenuItemActive
+};