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

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

@@ -1,77 +1,74 @@
-<template>
-  <div class="magic-menu-view" :id="mappedId">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, provide, useId } from 'vue'
-import { useMenuView } from '../composables/private/useMenuView'
+<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 = ["data-id"];
+import { computed, inject, onBeforeUnmount, provide, useId } from "vue";
+import { useMenuView } from "../composables/private/useMenuView";
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,
   MagicMenuParentTree,
   MagicMenuItemId,
-  MagicMenuViewActive,
-} from '../symbols'
-import type { Placement } from '@floating-ui/vue'
-import { useMenuState } from '../composables/private/useMenuState'
-
-interface MagicMenuViewProps {
-  id?: string
-  placement?: Placement
-}
-
-const props = defineProps<MagicMenuViewProps>()
-
-const parentTree = inject(MagicMenuParentTree, [])
-const instanceId = inject(MagicMenuInstanceId, undefined)
-const itemId = inject(MagicMenuItemId, undefined)
-
-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])
-
-// Register view
-const { initializeView, deleteView } = useMenuView(instanceId)
-const { initializeState } = useMenuState(instanceId)
-const state = initializeState()
-
-const mappedPlacement = computed(() => {
-  if (props.placement) {
-    return props.placement
+  MagicMenuViewActive
+} from "../symbols";
+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", {
+        "data-id": mappedId.value,
+        class: "magic-menu-view"
+      }, [
+        _renderSlot(_ctx.$slots, "default", {
+          viewActive: _unref(view).active
+        })
+      ], 8, _hoisted_1);
+    };
   }
-
-  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 'bottom'
-  }
-})
-
-const view = initializeView({
-  id: mappedId.value,
-  parent: { views: parentTree, item: itemId ?? '' },
-  placement: mappedPlacement.value,
-})
-
-// Pass id, active state and parent tree to children
-provide(MagicMenuParentTree, mappedParentTree.value)
-provide(MagicMenuViewId, mappedId.value)
-provide(MagicMenuViewActive, view.active)
-
-// Lifecycle
-onBeforeUnmount(() => {
-  deleteView(mappedId.value)
-})
+});
 </script>

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

@@ -3,19 +3,23 @@ interface MagicMenuViewProps {
     id?: string;
     placement?: Placement;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
+declare const mappedId: import("vue").ComputedRef<string>;
+declare const view: import("../types").MenuView;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {
+    viewActive: boolean;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicMenuViewProps, {
+    mappedId: typeof mappedId;
+    view: typeof view;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -12,11 +12,11 @@ type UseMenuCallbackArgs = {
     removeScrollLockPadding: () => void;
 };
 export declare function useMenuCallback(args: UseMenuCallbackArgs): {
-    onBeforeEnter: (_el: Element) => void;
-    onEnter: (_el: Element) => void;
-    onAfterEnter: (_el: Element) => void;
-    onBeforeLeave: (_el: Element) => void;
-    onLeave: (_el: Element) => void;
-    onAfterLeave: (_el: Element) => void;
+    onBeforeEnter: () => void;
+    onEnter: () => void;
+    onAfterEnter: () => void;
+    onBeforeLeave: () => void;
+    onLeave: () => void;
+    onAfterLeave: () => void;
 };
 export {};

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) {
-      lockScroll();
+    if (scrollLock) {
       if (typeof scrollLock === "object" && scrollLock.padding) {
         addScrollLockPadding();
       }
+      lockScroll();
     }
   }
-  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,73 @@ 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 deleteChannel(id) {
-    if (!view?.channels) return;
-    view.channels = view.channels.filter((x) => x.id !== id);
+  function initializeChannel(args2) {
+    const { id } = args2;
+    const channel = getChannel(id) ?? addChannel(args2);
+    return channel;
   }
-  function getChannel(id) {
-    return view?.channels.find((channel) => {
-      return channel.id === id;
-    });
+  function deleteChannel(id) {
+    if (!view?.channels) {
+      return;
+    }
+    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.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) {
@@ -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/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() {
@@ -12,25 +16,41 @@ export function useMenuDOM() {
   }
   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)";
+    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.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 {