@maas/vue-equipment 0.39.2 → 1.0.0-beta.1

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

@@ -14,32 +14,32 @@ export function useMenuCallback(args) {
     removeScrollLockPadding
   } = args;
   const emitter = useMagicEmitter();
-  function onBeforeEnter(_el) {
+  function onBeforeEnter() {
     emitter.emit("beforeEnter", { id: toValue(instanceId), viewId });
   }
-  function onEnter(_el) {
+  function onEnter() {
     emitter.emit("enter", { id: toValue(instanceId), viewId });
   }
-  function onAfterEnter(_el) {
+  function onAfterEnter() {
     emitter.emit("afterEnter", { id: toValue(instanceId), viewId });
     const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
-    if (!!scrollLock) {
+    if (scrollLock) {
       lockScroll();
       if (typeof scrollLock === "object" && scrollLock.padding) {
         addScrollLockPadding();
       }
     }
   }
-  function onBeforeLeave(_el) {
+  function onBeforeLeave() {
     emitter.emit("beforeLeave", { id: toValue(instanceId), viewId });
   }
-  function onLeave(_el) {
+  function onLeave() {
     emitter.emit("leave", { id: toValue(instanceId), viewId });
   }
-  function onAfterLeave(_el) {
+  function onAfterLeave() {
     emitter.emit("afterLeave", { id: toValue(instanceId), viewId });
     const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
-    if (!!scrollLock) {
+    if (scrollLock) {
       unlockScroll();
       if (typeof scrollLock === "object" && scrollLock.padding) {
         removeScrollLockPadding();

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

@@ -4,54 +4,63 @@ export function useMenuChannel(args) {
   const { instanceId, viewId } = args;
   const { getView } = useMenuView(instanceId);
   const view = getView(viewId);
+  const channelMap = /* @__PURE__ */ new Map();
   function createChannel(args2) {
     const { id } = args2;
-    const channel = {
+    const channel = reactive({
       id,
       active: false
-    };
-    return reactive(channel);
+    });
+    channelMap.set(id, channel);
+    return channel;
   }
   function addChannel(args2) {
     const channel = createChannel(args2);
     if (view?.channels) {
-      view.channels = [...view?.channels, channel];
+      view.channels.push(channel);
     }
     return channel;
   }
   function unselectSiblings(id) {
-    return view?.channels.filter((channel) => channel.id !== id).forEach((channel) => channel.active = false);
+    if (!view?.channels) return;
+    for (const channel of view.channels) {
+      if (channel.id !== id) {
+        channel.active = false;
+      }
+    }
   }
-  function initializeChannel(args2) {
-    const { id } = args2;
-    const instance = getChannel(id);
-    if (!instance) {
-      const channel = addChannel(args2);
+  function getChannel(id) {
+    if (!view?.channels) return void 0;
+    const channel = view.channels.find((ch) => ch.id === id);
+    if (channel) {
+      channelMap.set(id, channel);
       return channel;
     }
-    return instance;
+    return void 0;
+  }
+  function initializeChannel(args2) {
+    const { id } = args2;
+    const channel = getChannel(id) ?? addChannel(args2);
+    return channel;
   }
   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;
-    });
+    const index = view.channels.findIndex((channel) => channel.id === id);
+    if (index !== -1) {
+      view.channels.splice(index, 1);
+      channelMap.delete(id);
+    }
   }
   function selectChannel(id) {
-    const instance = getChannel(id);
-    if (instance) {
-      instance.active = true;
-      unselectSiblings(id);
-    }
+    const channel = getChannel(id);
+    if (!channel) return;
+    channel.active = true;
+    unselectSiblings(id);
   }
   function unselectChannel(id) {
-    const instance = getChannel(id);
-    if (instance) {
-      instance.active = false;
-    }
+    const channel = getChannel(id);
+    if (!channel) return;
+    channel.active = false;
   }
   return {
     initializeChannel,

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

@@ -20,18 +20,20 @@ export function useMenuCursor(view, debug = false) {
       case "top-start":
       case "top-end":
         switch (true) {
-          case (a.y < b.y && a.y < c.y):
+          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):
+          }
+          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":
@@ -41,18 +43,20 @@ export function useMenuCursor(view, debug = false) {
       case "left-start":
       case "left-end":
         switch (true) {
-          case (a.x < b.x && a.x < c.x):
+          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):
+          }
+          case (a.x > b.x && a.x > c.x): {
             b.x -= pixelAmount;
             b.y -= pixelAmount;
             c.x -= pixelAmount;
             c.y += pixelAmount;
             break;
+          }
         }
         break;
     }
@@ -90,25 +94,27 @@ export function useMenuCursor(view, debug = false) {
       case "top-end":
       case "bottom":
       case "bottom-start":
-      case "bottom-end":
+      case "bottom-end": {
         const topDist = Math.abs(top - centerPoint.y);
         const bottomDist = Math.abs(bottom - centerPoint.y);
         const mappedY = topDist < bottomDist ? top : bottom;
         sidePoints.push({ x: left, y: mappedY });
         sidePoints.push({ x: right, y: mappedY });
         break;
+      }
       case "right":
       case "right-start":
       case "right-end":
       case "left":
       case "left-start":
-      case "left-end":
+      case "left-end": {
         const rightDist = Math.abs(right - centerPoint.x);
         const leftDist = Math.abs(left - centerPoint.x);
         const mappedX = rightDist < leftDist ? right : left;
         sidePoints.push({ x: mappedX, y: top });
         sidePoints.push({ x: mappedX, y: bottom });
         break;
+      }
     }
     const [a, b, c] = extendTriangle(
       [centerPoint, sidePoints[0], sidePoints[1]],

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

@@ -9,7 +9,7 @@ export declare function useMenuItem(args: UseMenuItemArgs): {
     initializeItem: (args: InitializeItemArgs) => MenuItem;
     deleteItem: (id: string) => void;
     getItem: (id: string) => MenuItem | undefined;
-    selectItem: (id: string) => void;
+    selectItem: (id: string, disablePointer?: boolean) => void;
     unselectItem: (id: string) => void;
 };
 export {};

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

@@ -1,4 +1,5 @@
 import { reactive } from "vue";
+import { usePointer, watchOnce } from "@vueuse/core";
 import { useMenuView } from "./useMenuView.mjs";
 import { useMenuState } from "./useMenuState.mjs";
 export function useMenuItem(args) {
@@ -22,7 +23,7 @@ export function useMenuItem(args) {
   function addItem(args2) {
     const item = createItem(args2);
     if (view?.items) {
-      view.items = [...view?.items, item];
+      view.items = [...view.items, item];
     }
     return item;
   }
@@ -31,12 +32,8 @@ export function useMenuItem(args) {
   }
   function initializeItem(args2) {
     const { id } = args2;
-    const instance = getItem(id);
-    if (!instance) {
-      const item = addItem(args2);
-      return item;
-    }
-    return instance;
+    const item = getItem(id) ?? addItem(args2);
+    return item;
   }
   function deleteItem(id) {
     if (!view?.items) return;
@@ -47,21 +44,30 @@ export function useMenuItem(args) {
       return item.id === id;
     });
   }
-  function selectItem(id) {
-    const instance = getItem(id);
-    if (instance) {
-      instance.active = true;
+  function selectItem(id, disablePointer) {
+    const item = getItem(id);
+    if (item) {
+      item.active = true;
       unselectSiblings(id);
       unselectDescendingViews(viewId);
       if (view) {
         state.input.view = view.id;
       }
+      if (disablePointer) {
+        const { x, y } = usePointer();
+        state.input.disabled = [...state.input.disabled, "pointer"];
+        watchOnce([x, y], () => {
+          state.input.disabled = state.input.disabled.filter(
+            (x2) => x2 !== "pointer"
+          );
+        });
+      }
     }
   }
   function unselectItem(id) {
-    const instance = getItem(id);
-    if (instance) {
-      instance.active = false;
+    const item = getItem(id);
+    if (item) {
+      item.active = false;
     }
   }
   return {

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

@@ -18,8 +18,8 @@ export function useMenuKeyListener(instanceId) {
   } = useMenuView(instanceId);
   function keyStrokeGuard(e) {
     switch (true) {
-      case !state.active:
-        throw new Error("Menu is not active");
+      case (!state.active && state.options.debug):
+        throw new Error(`'MagicMenu ${state.id} is not active'`);
       default:
         state.input.type = "keyboard";
         e.preventDefault();
@@ -31,12 +31,13 @@ export function useMenuKeyListener(instanceId) {
   }
   function selectFirstItem(view) {
     const { selectItem } = useMenuItem({ instanceId, viewId: view.id });
-    selectItem(getEnabledItems(view)[0]?.id);
+    selectItem(getEnabledItems(view)[0]?.id, true);
   }
   async function onArrowRight(e) {
     try {
       keyStrokeGuard(e);
-    } catch (_e) {
+    } catch (e2) {
+      console.warn(e2);
     }
     if (!state.input.view) {
       return;
@@ -64,7 +65,8 @@ export function useMenuKeyListener(instanceId) {
   function onArrowLeft(e) {
     try {
       keyStrokeGuard(e);
-    } catch (_e) {
+    } catch (e2) {
+      console.warn(e2);
     }
     if (!state.input.view) {
       return;
@@ -87,7 +89,8 @@ export function useMenuKeyListener(instanceId) {
   function onArrowUp(e) {
     try {
       keyStrokeGuard(e);
-    } catch (_e) {
+    } catch (e2) {
+      console.warn(e2);
     }
     if (!state.input.view) {
       return;
@@ -99,18 +102,19 @@ export function useMenuKeyListener(instanceId) {
     const prevIndex = enabledItems.findIndex((item) => item.active) - 1;
     if (prevIndex >= 0) {
       const { selectItem } = useMenuItem({ instanceId, viewId });
-      selectItem(enabledItems[prevIndex]?.id);
+      selectItem(enabledItems[prevIndex]?.id, true);
       unselectUnrelatedViews(viewId);
     } else if (prevIndex !== -1) {
       const { selectItem } = useMenuItem({ instanceId, viewId });
-      selectItem(enabledItems[enabledItems.length - 1]?.id);
+      selectItem(enabledItems[enabledItems.length - 1]?.id, true);
       unselectUnrelatedViews(viewId);
     }
   }
   function onArrowDown(e) {
     try {
       keyStrokeGuard(e);
-    } catch (_e) {
+    } catch (e2) {
+      console.warn(e2);
     }
     if (!state.input.view) {
       return;
@@ -122,14 +126,15 @@ export function useMenuKeyListener(instanceId) {
     const nextIndex = enabledItems.findIndex((item) => item.active) + 1;
     if (nextIndex >= 0) {
       const { selectItem } = useMenuItem({ instanceId, viewId });
-      selectItem(enabledItems[nextIndex]?.id);
+      selectItem(enabledItems[nextIndex]?.id, true);
       unselectUnrelatedViews(viewId);
     }
   }
   function onEscape(e) {
     try {
       keyStrokeGuard(e);
-    } catch (_e) {
+    } catch (e2) {
+      console.warn(e2);
     }
     state.active = false;
     state.input.view = "";
@@ -138,7 +143,8 @@ export function useMenuKeyListener(instanceId) {
   async function onEnter(e) {
     try {
       keyStrokeGuard(e);
-    } catch (_e) {
+    } catch (e2) {
+      console.warn(e2);
     }
     if (!state.input.view) {
       return;
@@ -160,7 +166,8 @@ export function useMenuKeyListener(instanceId) {
     if (state.active) {
       try {
         keyStrokeGuard(e);
-      } catch (_e) {
+      } catch (e2) {
+        console.warn(e2);
       }
     }
   }

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

@@ -6,7 +6,7 @@ export function useMenuState(instanceId) {
   function createState(id) {
     const state = {
       id,
-      options: defaultOptions,
+      options: { ...defaultOptions },
       views: [],
       active: false,
       input: {
@@ -18,22 +18,22 @@ export function useMenuState(instanceId) {
     return reactive(state);
   }
   function addState(id) {
-    const instance = createState(id);
-    menuStateStore.value = [...menuStateStore.value, instance];
-    return instance;
+    const state = createState(id);
+    menuStateStore.value = [...menuStateStore.value, state];
+    return state;
   }
   function initializeState(options) {
-    let instance = menuStateStore.value.find((instance2) => {
-      return instance2.id === toValue(instanceId);
+    let state = menuStateStore.value.find((entry) => {
+      return entry.id === toValue(instanceId);
     });
-    if (!instance) {
-      instance = addState(toValue(instanceId));
+    if (!state) {
+      state = addState(toValue(instanceId));
     }
     if (options) {
       const mappedOptions = defu(options, defaultOptions);
-      instance.options = mappedOptions;
+      state.options = mappedOptions;
     }
-    return instance;
+    return state;
   }
   function deleteState() {
     menuStateStore.value = menuStateStore.value.filter(

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

@@ -15,7 +15,7 @@ export function useMenuTrigger(args) {
   const { shift, control } = useMagicKeys();
   function onRightClick(e) {
     switch (e.button) {
-      case 2:
+      case 2: {
         const delay = state.options.delay?.rightClick ?? 0;
         selectView(viewId, delay);
         state.active = true;
@@ -26,6 +26,7 @@ export function useMenuTrigger(args) {
           state.input.view = viewId;
         }
         break;
+      }
       default:
         state.active = false;
         unselectView(viewId);
@@ -58,7 +59,7 @@ export function useMenuTrigger(args) {
   function onClick(e) {
     if (mappedTrigger.value.includes("click") && !mappedDisabled.value && e.button === 0 && viewId) {
       switch (true) {
-        case !state.active:
+        case !state.active: {
           const delay = state.options.delay?.click ?? ModeDelayClick[state.options.mode];
           state.active = true;
           selectView(viewId, delay);
@@ -66,10 +67,12 @@ export function useMenuTrigger(args) {
             state.input.view = viewId;
           }
           break;
-        case (state.active && !itemId):
+        }
+        case (state.active && !itemId): {
           state.active = false;
           unselectView(viewId);
           break;
+        }
       }
     }
     if (mappedTrigger.value.includes("right-click") && viewId) {

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

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