@maas/vue-equipment 0.40.0 → 1.0.0-beta.10

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

@@ -7,7 +7,7 @@ type UseMenuTriggerArgs = {
     itemId?: string;
     mappedDisabled: ComputedRef<boolean>;
     mappedTrigger: ComputedRef<Interaction[]>;
-    elRef: Ref<InstanceType<typeof Primitive> | undefined>;
+    elRef: Ref<InstanceType<typeof Primitive> | null>;
 };
 export declare function useMenuTrigger(args: UseMenuTriggerArgs): {
     onMouseenter: () => void;

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;

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

@@ -1,19 +1,27 @@
 import { reactive, computed, toValue } from "vue";
 import { useMenuState } from "./useMenuState.mjs";
+function isAbortError(error) {
+  return error instanceof DOMException && error.name === "AbortError";
+}
 export function useMenuView(instanceId) {
   const { initializeState } = useMenuState(instanceId);
   const state = initializeState();
-  const currentView = computed(
-    () => state.views.filter((view) => view.active).reduce(
+  const currentInstanceId = toValue(instanceId);
+  const currentView = computed(() => {
+    const activeViews = state.views.filter((view) => view.active);
+    if (activeViews.length === 0) return void 0;
+    if (activeViews.length === 1) return activeViews[0];
+    return activeViews.reduce(
       (a, b) => a.parent.views.length >= b.parent.views.length ? a : b
-    )
-  );
+    );
+  });
+  const viewMap = /* @__PURE__ */ new Map();
   function createView(args) {
     const { id, parent, placement } = args;
     if (parent.views.length === 0) {
-      parent.views.push(toValue(instanceId));
+      parent.views.push(currentInstanceId);
     }
-    const view = {
+    const view = reactive({
       id,
       parent,
       active: false,
@@ -24,124 +32,152 @@ export function useMenuView(instanceId) {
         selectAbortController: new AbortController(),
         unselectAbortController: new AbortController()
       }
-    };
-    return reactive(view);
+    });
+    viewMap.set(id, view);
+    return view;
   }
   function addView(args) {
     const view = createView(args);
-    state.views = [...state.views, view];
+    state.views.push(view);
     return view;
   }
   function delay(ms, signal) {
     return new Promise((resolve, reject) => {
       const timer = setTimeout(resolve, ms);
-      signal.addEventListener("abort", () => {
+      const abortHandler = () => {
         clearTimeout(timer);
         reject(new DOMException("Aborted", "AbortError"));
-      });
+      };
+      signal.addEventListener("abort", abortHandler, { once: true });
     });
   }
-  function initializeView(args) {
-    const { id } = args;
-    let instance = getView(id);
-    if (!instance) instance = addView(args);
-    return instance;
+  function getView(id) {
+    let view = viewMap.get(id);
+    if (!view) {
+      view = state.views.find((v) => v.id === id);
+      if (view) viewMap.set(id, view);
+    }
+    return view;
   }
   function deleteView(id) {
-    state.views = state.views?.filter((view) => view.id !== id);
-  }
-  function getView(id) {
-    return state.views?.find((view) => view.id === id);
+    const index = state.views.findIndex((view) => view.id === id);
+    if (index !== -1) {
+      state.views.splice(index, 1);
+      viewMap.delete(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);
+    if (!view) {
+      return -1;
+    }
+    const nestingLevel = view.parent.views.length;
+    return state.views.findIndex(
+      (v) => v.parent.views.length === nestingLevel && v.id === id
+    );
   }
   function getNextView(id) {
-    const index = state.views?.findIndex((view) => view.id === id);
-    return state.views?.[index + 1];
+    const index = state.views.findIndex((view) => view.id === id);
+    return index !== -1 ? state.views[index + 1] : void 0;
   }
   function getPreviousView(id) {
-    const index = state.views?.findIndex((view) => view.id === id);
-    return state.views?.[index - 1];
+    const index = state.views.findIndex((view) => view.id === id);
+    return index > 0 ? state.views[index - 1] : void 0;
   }
   function getTopLevelView() {
-    return state.views?.find((view) => view.active && !view.parent.item);
+    return state.views.find((view) => view.active && !view.parent.item);
   }
   function getNestedView(itemId) {
-    return state.views?.find((view) => view.parent.item === 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 ?? "");
+    if (!view) {
+      return void 0;
+    }
+    const parentId = view.parent.views[view.parent.views.length - 1];
+    return parentId ? getView(parentId) : void 0;
   }
   function getUnrelatedViews(id) {
-    const argView = getView(id);
-    return state.views?.filter(
-      (view) => !view.parent.views.includes(id) && !argView?.parent.views.includes(view.id) && view.id !== id
-    );
+    const view = getView(id);
+    if (!view) {
+      return [];
+    }
+    const parentViewsSet = new Set(view.parent.views);
+    return state.views.filter((v) => v.id !== id && !parentViewsSet.has(v.id));
   }
   function getDescendingViews(id) {
-    const argView = getView(id);
-    return state.views?.filter(
-      (view) => view.id !== id && !argView?.parent.views.includes(view.id)
-    );
+    const view = getView(id);
+    if (!view) {
+      return [];
+    }
+    const parentViewsSet = new Set(view.parent.views);
+    return state.views.filter((v) => v.id !== id && !parentViewsSet.has(v.id));
   }
   async function selectView(id, delayMs = 0) {
-    const instance = getView(id);
-    if (instance) {
-      if (instance.state.unselectAbortController) {
-        instance.state.unselectAbortController.abort();
-      }
-      const abortController = new AbortController();
-      instance.state.selectAbortController = abortController;
-      try {
+    const view = getView(id);
+    if (!view) {
+      return;
+    }
+    if (view.state.unselectAbortController) {
+      view.state.unselectAbortController.abort();
+    }
+    const abortController = new AbortController();
+    view.state.selectAbortController = abortController;
+    try {
+      if (delayMs > 0) {
         await delay(delayMs, abortController.signal);
-        instance.active = true;
-        unselectUnrelatedViews(id);
-      } catch (error) {
-        if (error.name === "AbortError" && state.options.debug) {
-          console.log(
-            `selectView() was interrupted by a call to unselectView()`
-          );
-        }
+      }
+      view.active = true;
+      unselectUnrelatedViews(id);
+    } catch (error) {
+      if (isAbortError(error) && state.options.debug) {
+        console.log("selectView() was interrupted by a call to unselectView()");
       }
     }
   }
   async function unselectView(id, delayMs = 0) {
-    const instance = getView(id);
-    if (instance) {
-      if (instance.state.selectAbortController) {
-        instance.state.selectAbortController.abort();
-      }
-      const abortController = new AbortController();
-      instance.state.unselectAbortController = abortController;
-      try {
+    const view = getView(id);
+    if (!view) {
+      return;
+    }
+    if (view.state.selectAbortController) {
+      view.state.selectAbortController.abort();
+    }
+    const abortController = new AbortController();
+    view.state.unselectAbortController = abortController;
+    try {
+      if (delayMs > 0) {
         await delay(delayMs, abortController.signal);
-        instance.active = false;
-      } catch (error) {
-        if (error.name === "AbortError" && state.options.debug) {
-          console.log(
-            `unselectView() was interrupted by a call to selectView()`
-          );
-        }
+      }
+      view.active = false;
+    } catch (error) {
+      if (isAbortError(error) && state.options.debug) {
+        console.log("unselectView() was interrupted by a call to selectView()");
       }
     }
   }
   function unselectUnrelatedViews(id) {
-    const unrelatedViews = getUnrelatedViews(id);
-    unrelatedViews.forEach((view) => view.active = false);
+    const views = getUnrelatedViews(id);
+    for (const view of views) {
+      view.active = false;
+    }
   }
   function unselectDescendingViews(id) {
-    const descendingViews = getDescendingViews(id);
-    descendingViews.forEach((view) => view.active = false);
+    const views = getDescendingViews(id);
+    for (const view of views) {
+      view.active = false;
+    }
   }
   function unselectAllViews() {
-    state.views?.forEach((view) => {
+    for (const view of state.views) {
       view.active = false;
-    });
+    }
+  }
+  function initializeView(args) {
+    const { id } = args;
+    const view = getView(id) ?? addView(args);
+    return view;
   }
   return {
     currentView,

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

@@ -1,11 +1,11 @@
-import type { InjectionKey, MaybeRef } from 'vue';
+import type { InjectionKey, MaybeRef, Ref } 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 MagicMenuViewActive: InjectionKey<Ref<boolean>>;
 declare const MagicMenuContentId: InjectionKey<string>;
 declare const MagicMenuItemId: InjectionKey<string>;
-declare const MagicMenuItemActive: InjectionKey<boolean>;
+declare const MagicMenuItemActive: InjectionKey<Ref<boolean>>;
 declare const MagicMenuChannelId: InjectionKey<string>;
-declare const MagicMenuChannelActive: InjectionKey<boolean>;
+declare const MagicMenuChannelActive: InjectionKey<Ref<boolean>>;
 export { MagicMenuInstanceId, MagicMenuParentTree, MagicMenuViewId, MagicMenuViewActive, MagicMenuContentId, MagicMenuItemId, MagicMenuItemActive, MagicMenuChannelId, MagicMenuChannelActive, };

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

@@ -34,8 +34,7 @@ export interface RequiredMagicMenuOptions {
         channel: string;
     };
 }
-export interface OptionalMagicMenuOptions extends Pick<MagicMenuOptions, 'scrollLock' | 'floating' | 'delay'> {
-}
+export type OptionalMagicMenuOptions = Pick<MagicMenuOptions, 'scrollLock' | 'floating' | 'delay'>;
 export type CombinedMagicMenuOptions = RequiredMagicMenuOptions & OptionalMagicMenuOptions;
 export type Interaction = 'click' | 'mouseenter' | 'right-click';
 export type Coordinates = {

package/dist/plugins/MagicMenu/src/utils/modeDelayDefaults.d.ts

@@ -2,10 +2,10 @@ export declare enum ModeDelayMouseenter {
     menubar = 0,
     dropdown = 0,
     context = 0,
-    navigation = 50
+    navigation = 0
 }
 export declare enum ModeDelayMouseleave {
-    navigation = 200
+    navigation = 100
 }
 export declare enum ModeDelayClick {
     menubar = 0,

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

@@ -2,11 +2,11 @@ export var ModeDelayMouseenter = /* @__PURE__ */ ((ModeDelayMouseenter2) => {
   ModeDelayMouseenter2[ModeDelayMouseenter2["menubar"] = 0] = "menubar";
   ModeDelayMouseenter2[ModeDelayMouseenter2["dropdown"] = 0] = "dropdown";
   ModeDelayMouseenter2[ModeDelayMouseenter2["context"] = 0] = "context";
-  ModeDelayMouseenter2[ModeDelayMouseenter2["navigation"] = 50] = "navigation";
+  ModeDelayMouseenter2[ModeDelayMouseenter2["navigation"] = 0] = "navigation";
   return ModeDelayMouseenter2;
 })(ModeDelayMouseenter || {});
 export var ModeDelayMouseleave = /* @__PURE__ */ ((ModeDelayMouseleave2) => {
-  ModeDelayMouseleave2[ModeDelayMouseleave2["navigation"] = 200] = "navigation";
+  ModeDelayMouseleave2[ModeDelayMouseleave2["navigation"] = 100] = "navigation";
   return ModeDelayMouseleave2;
 })(ModeDelayMouseleave || {});
 export var ModeDelayClick = /* @__PURE__ */ ((ModeDelayClick2) => {