@maas/vue-equipment 1.0.0-beta.4 → 1.0.0-beta.41

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

@@ -1,7 +1,10 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = ["id"];
+<template>
+  <div :data-id="mappedId" class="magic-menu-view">
+    <slot :view-active="view.active" />
+  </div>
+</template>
+
+<script setup>
 import { computed, inject, onBeforeUnmount, provide, useId } from "vue";
 import { useMenuView } from "../composables/private/useMenuView";
 import {
@@ -11,64 +14,57 @@ import {
   MagicMenuItemId,
   MagicMenuViewActive
 } from "../symbols";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuState } from "../composables/private/useMenuState";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicMenuView",
-  props: {
-    id: { type: String, required: false },
-    placement: { type: null, required: false }
-  },
-  setup(__props) {
-    const parentTree = inject(MagicMenuParentTree, []);
-    const instanceId = inject(MagicMenuInstanceId, void 0);
-    const itemId = inject(MagicMenuItemId, void 0);
-    if (!instanceId) {
-      throw new Error("MagicMenuView must be nested inside MagicMenuProvider");
-    }
-    const mappedId = computed(() => __props.id ?? `magic-menu-view-${useId()}`);
-    const mappedParentTree = computed(() => [...parentTree, mappedId.value]);
-    const mappedActive = computed(() => view.active);
-    const { initializeView, deleteView } = useMenuView(instanceId);
-    const { initializeState } = useMenuState(instanceId);
-    const state = initializeState();
-    const mappedPlacement = computed(() => {
-      if (__props.placement) {
-        return __props.placement;
-      }
-      switch (state.options.mode) {
-        case "navigation":
-          return "bottom";
-        case "menubar":
-          return !itemId ? "bottom-start" : "right-start";
-        case "dropdown":
-          return !itemId ? "bottom" : "right-start";
-        case "context":
-          return "right-start";
-        default:
-          return void 0;
-      }
-    });
-    const view = initializeView({
-      id: mappedId.value,
-      parent: { views: parentTree, item: itemId ?? "" },
-      placement: mappedPlacement.value ?? "bottom"
-    });
-    provide(MagicMenuParentTree, mappedParentTree.value);
-    provide(MagicMenuViewId, mappedId.value);
-    provide(MagicMenuViewActive, mappedActive);
-    onBeforeUnmount(() => {
-      deleteView(mappedId.value);
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", {
-        id: mappedId.value,
-        class: "magic-menu-view"
-      }, [
-        _renderSlot(_ctx.$slots, "default", {
-          viewActive: _unref(view).active
-        })
-      ], 8, _hoisted_1);
-    };
+const { id, placement } = defineProps({
+  id: { type: String, required: false },
+  placement: { type: String, required: false }
+});
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
+const parentTree = inject(MagicMenuParentTree, []);
+const instanceId = inject(MagicMenuInstanceId, void 0);
+const itemId = inject(MagicMenuItemId, void 0);
+magicError.assert(instanceId, {
+  message: "MagicMenuView must be nested inside MagicMenuProvider",
+  errorCode: "missing_instance_id"
+});
+const mappedId = computed(() => id ?? `magic-menu-view-${useId()}`);
+const mappedParentTree = computed(() => [...parentTree, mappedId.value]);
+const mappedActive = computed(() => view.active);
+const { initializeView, deleteView } = useMenuView(instanceId);
+const { initializeState } = useMenuState(instanceId);
+const state = initializeState();
+const mappedPlacement = computed(() => {
+  if (placement) {
+    return placement;
   }
+  switch (state.options.mode) {
+    case "navigation":
+      return "bottom";
+    case "menubar":
+      return !itemId ? "bottom-start" : "right-start";
+    case "dropdown":
+      return !itemId ? "bottom" : "right-start";
+    case "context":
+      return "right-start";
+    default:
+      return void 0;
+  }
+});
+const view = initializeView({
+  id: mappedId.value,
+  parent: { views: parentTree, item: itemId ?? "" },
+  placement: mappedPlacement.value ?? "bottom"
+});
+provide(MagicMenuParentTree, mappedParentTree.value);
+provide(MagicMenuViewId, mappedId.value);
+provide(MagicMenuViewActive, mappedActive);
+onBeforeUnmount(() => {
+  deleteView(mappedId.value);
 });
 </script>

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue.d.ts

@@ -1,32 +1,19 @@
-import type { Placement } from '@floating-ui/vue';
+import type { MenuPlacement } from '../types/index.js';
 interface MagicMenuViewProps {
     id?: string;
-    placement?: Placement;
+    placement?: MenuPlacement;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            viewActive: boolean;
-        }): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
+declare var __VLS_1: {
+    viewActive: boolean;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuViewProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuViewProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
+declare const __VLS_base: import("vue").DefineComponent<MagicMenuViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,5 +1,5 @@
 import { toValue } from "vue";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { ModeScrollLock } from "../../utils/modeScrollLockDefaults.mjs";
 export function useMenuCallback(args) {
   const {
@@ -24,10 +24,10 @@ export function useMenuCallback(args) {
     emitter.emit("afterEnter", { id: toValue(instanceId), viewId });
     const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
     if (scrollLock) {
-      lockScroll();
       if (typeof scrollLock === "object" && scrollLock.padding) {
         addScrollLockPadding();
       }
+      lockScroll();
     }
   }
   function onBeforeLeave() {

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

@@ -22,7 +22,9 @@ export function useMenuChannel(args) {
     return channel;
   }
   function unselectSiblings(id) {
-    if (!view?.channels) return;
+    if (!view?.channels) {
+      return;
+    }
     for (const channel of view.channels) {
       if (channel.id !== id) {
         channel.active = false;
@@ -30,7 +32,9 @@ export function useMenuChannel(args) {
     }
   }
   function getChannel(id) {
-    if (!view?.channels) return void 0;
+    if (!view?.channels) {
+      return void 0;
+    }
     const channel = view.channels.find((ch) => ch.id === id);
     if (channel) {
       channelMap.set(id, channel);
@@ -44,7 +48,9 @@ export function useMenuChannel(args) {
     return channel;
   }
   function deleteChannel(id) {
-    if (!view?.channels) return;
+    if (!view?.channels) {
+      return;
+    }
     const index = view.channels.findIndex((channel) => channel.id === id);
     if (index !== -1) {
       view.channels.splice(index, 1);
@@ -53,13 +59,17 @@ export function useMenuChannel(args) {
   }
   function selectChannel(id) {
     const channel = getChannel(id);
-    if (!channel) return;
+    if (!channel) {
+      return;
+    }
     channel.active = true;
     unselectSiblings(id);
   }
   function unselectChannel(id) {
     const channel = getChannel(id);
-    if (!channel) return;
+    if (!channel) {
+      return;
+    }
     channel.active = false;
   }
   return {

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

@@ -7,9 +7,9 @@ export declare function useMenuCursor(view: MenuView, debug?: boolean): {
         x: number;
         y: number;
     }[]>;
-    isInsideFrom: import("vue").Ref<boolean, boolean>;
-    isInsideTo: import("vue").Ref<boolean, boolean>;
-    isInsideTriangle: import("vue").Ref<boolean, boolean>;
+    isInsideFrom: import("vue").ShallowRef<boolean, boolean>;
+    isInsideTo: import("vue").ShallowRef<boolean, boolean>;
+    isInsideTriangle: import("vue").ShallowRef<boolean, boolean>;
     initialize: () => void;
     destroy: () => void;
 };

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

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useEventListener } from "@vueuse/core";
 export function useMenuCursor(view, debug = false) {
   let cancelListener = new AbortController();
@@ -7,9 +7,9 @@ export function useMenuCursor(view, debug = false) {
     { x: 0, y: 0 },
     { x: 0, y: 0 }
   ]);
-  const isInsideFrom = ref(false);
-  const isInsideTo = ref(false);
-  const isInsideTriangle = ref(false);
+  const isInsideFrom = shallowRef(false);
+  const isInsideTo = shallowRef(false);
+  const isInsideTriangle = shallowRef(false);
   function extendTriangle(vertices, pixelAmount) {
     const [a, b, c] = vertices;
     switch (view?.placement) {

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

@@ -1,7 +1,11 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import { matchClass } from "@maas/vue-equipment/utils";
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+import {
+  matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useMenuDOM() {
   const positionFixedElements = ref([]);
   function lockScroll() {
@@ -11,26 +15,44 @@ export function useMenuDOM() {
     scrollLock.value = false;
   }
   function addScrollLockPadding() {
-    if (typeof window === "undefined") return;
-    const exclude = new RegExp(/magic-menu?/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    if (typeof window === "undefined") {
+      return;
+    }
+    const exclude = new RegExp(/magic-menu/);
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
     );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
   }
   function removeScrollLockPadding() {
-    document.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     lockScroll,

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

@@ -1,15 +1,23 @@
 import { reactive } from "vue";
 import { usePointer, watchOnce } from "@vueuse/core";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuView } from "./useMenuView.mjs";
 import { useMenuState } from "./useMenuState.mjs";
 export function useMenuItem(args) {
   const { instanceId, viewId } = args;
+  const { throwError } = useMagicError({
+    prefix: "MagicMenu",
+    source: "useMenuItem"
+  });
   const { initializeState } = useMenuState(instanceId);
   const state = initializeState();
   const { getView, unselectDescendingViews } = useMenuView(instanceId);
   const view = getView(viewId);
   if (!view) {
-    throw new Error(`View ${viewId} not found`);
+    throwError({
+      message: `View ${viewId} not found`,
+      errorCode: "view_id_not_found"
+    });
   }
   function createItem(args2) {
     const { id, disabled } = args2;
@@ -36,7 +44,9 @@ export function useMenuItem(args) {
     return item;
   }
   function deleteItem(id) {
-    if (!view?.items) return;
+    if (!view?.items) {
+      return;
+    }
     view.items = view.items.filter((x) => x.id !== id);
   }
   function getItem(id) {

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

@@ -1,10 +1,10 @@
-import { type MaybeRef } from 'vue';
+import type { MaybeRef } from 'vue';
 export declare function useMenuKeyListener(instanceId: MaybeRef<string>): {
     onArrowRight: (e: KeyboardEvent) => Promise<void>;
     onArrowLeft: (e: KeyboardEvent) => void;
     onArrowUp: (e: KeyboardEvent) => void;
     onArrowDown: (e: KeyboardEvent) => void;
     onEscape: (e: KeyboardEvent) => void;
-    onEnter: (e: KeyboardEvent) => Promise<void>;
+    onReturn: (e: KeyboardEvent) => Promise<void>;
     onTab: (e: KeyboardEvent) => void;
 };

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

@@ -1,9 +1,14 @@
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 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 { throwError, logWarning } = useMagicError({
+    prefix: "MagicMenu",
+    source: "useMenuKeyListener"
+  });
   const {
     selectView,
     unselectView,
@@ -19,11 +24,17 @@ export function useMenuKeyListener(instanceId) {
   function keyStrokeGuard(e) {
     switch (true) {
       case (!state.active && state.options.debug):
-        throw new Error(`'MagicMenu ${state.id} is not active'`);
-      default:
+        throwError({
+          message: `'MagicMenu ${state.id} is not active'`,
+          errorCode: "menu_not_active"
+        });
+      case state.active:
         state.input.type = "keyboard";
-        e.preventDefault();
         e.stopPropagation();
+        e.preventDefault();
+        break;
+      default:
+        state.input.type = "keyboard";
     }
   }
   function getEnabledItems(view) {
@@ -31,13 +42,16 @@ export function useMenuKeyListener(instanceId) {
   }
   function selectFirstItem(view) {
     const { selectItem } = useMenuItem({ instanceId, viewId: view.id });
-    selectItem(getEnabledItems(view)[0]?.id, true);
+    const firstItem = getEnabledItems(view)[0];
+    if (firstItem) {
+      selectItem(firstItem.id, true);
+    }
   }
   async function onArrowRight(e) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     if (!state.input.view) {
       return;
@@ -66,7 +80,7 @@ export function useMenuKeyListener(instanceId) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     if (!state.input.view) {
       return;
@@ -90,23 +104,31 @@ export function useMenuKeyListener(instanceId) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     if (!state.input.view) {
       return;
     }
     const viewId = state.input.view;
     const inputView = getView(viewId);
-    if (!inputView) return;
+    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, true);
+      const prevItem = enabledItems[prevIndex];
+      if (prevItem) {
+        selectItem(prevItem.id, true);
+      }
       unselectUnrelatedViews(viewId);
     } else if (prevIndex !== -1) {
       const { selectItem } = useMenuItem({ instanceId, viewId });
-      selectItem(enabledItems[enabledItems.length - 1]?.id, true);
+      const lastItem = enabledItems[enabledItems.length - 1];
+      if (lastItem) {
+        selectItem(lastItem.id, true);
+      }
       unselectUnrelatedViews(viewId);
     }
   }
@@ -114,19 +136,24 @@ export function useMenuKeyListener(instanceId) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     if (!state.input.view) {
       return;
     }
     const viewId = state.input.view;
     const inputView = getView(viewId);
-    if (!inputView) return;
+    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, true);
+      const nextItem = enabledItems[nextIndex];
+      if (nextItem) {
+        selectItem(nextItem.id, true);
+      }
       unselectUnrelatedViews(viewId);
     }
   }
@@ -134,17 +161,17 @@ export function useMenuKeyListener(instanceId) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     state.active = false;
     state.input.view = "";
     unselectAllViews();
   }
-  async function onEnter(e) {
+  async function onReturn(e) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     if (!state.input.view) {
       return;
@@ -167,7 +194,7 @@ export function useMenuKeyListener(instanceId) {
       try {
         keyStrokeGuard(e);
       } catch (e2) {
-        console.warn(e2);
+        logWarning(String(e2));
       }
     }
   }
@@ -177,7 +204,7 @@ export function useMenuKeyListener(instanceId) {
     onArrowUp,
     onArrowDown,
     onEscape,
-    onEnter,
+    onReturn,
     onTab
   };
 }

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

@@ -7,11 +7,11 @@ 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;
     onClick: (e: MouseEvent) => void;
-    onEnter: (e: KeyboardEvent) => void;
+    onKeypress: (e: KeyboardEvent) => void;
 };
 export {};

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

@@ -1,3 +1,5 @@
+import {} from "vue";
+import { Primitive } from "@maas/vue-primitive";
 import { useMagicKeys, useFocus } from "@vueuse/core";
 import { useMenuView } from "./useMenuView.mjs";
 import { useMenuState } from "./useMenuState.mjs";
@@ -32,7 +34,7 @@ export function useMenuTrigger(args) {
         unselectView(viewId);
     }
   }
-  function onEnter(e) {
+  function onKeypress(e) {
     if (focused.value && !mappedDisabled.value && !view?.active) {
       e.preventDefault();
       e.stopPropagation();
@@ -95,6 +97,6 @@ export function useMenuTrigger(args) {
   return {
     onMouseenter,
     onClick,
-    onEnter
+    onKeypress
   };
 }