@maas/vue-equipment 0.30.6 → 0.31.0

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.30.5",
+  "version": "0.30.7",
   "builder": {
     "@nuxt/module-builder": "0.8.1",
     "unbuild": "unknown"

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

@@ -37,6 +37,7 @@
     </transition>
     <span
       v-for="point in coords"
+      v-if="state.options.debug"
       :style="{
         background: 'red',
         position: 'fixed',
@@ -69,6 +70,8 @@ import { useMenuState } from '../composables/private/useMenuState'
 import { useMenuCallback } from '../composables/private/useMenuCallback'
 import { useMenuDOM } from '../composables/private/useMenuDOM'
 import { useMenuCursor } from '../composables/private/useMenuCursor'
+import { ModeTransitions } from '../utils/modeTransitionDefaults'
+import { ModeDelayMouseleave } from '../utils/modeDelayDefaults'
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,
@@ -77,7 +80,6 @@ import {
 
 import '@maas/vue-equipment/utils/css/animations/fade-in.css'
 import '@maas/vue-equipment/utils/css/animations/fade-out.css'
-import { ModeTransitions } from '../utils/modeTransitions'
 
 defineOptions({
   inheritAttrs: false,
@@ -126,7 +128,12 @@ const mappedTransition = computed(() => {
 const innerActive = ref(false)
 const wrapperActive = ref(false)
 
-const { lockScroll, unlockScroll } = useMenuDOM()
+const {
+  lockScroll,
+  unlockScroll,
+  addScrollLockPadding,
+  removeScrollLockPadding,
+} = useMenuDOM()
 const {
   onBeforeEnter,
   onEnter,
@@ -138,9 +145,11 @@ const {
   state,
   instanceId,
   viewId,
+  wrapperActive,
   lockScroll,
   unlockScroll,
-  wrapperActive,
+  addScrollLockPadding,
+  removeScrollLockPadding,
 })
 
 // Handle state
@@ -208,7 +217,9 @@ watch(isOutside, (value, oldValue) => {
   if (value && !oldValue) {
     switch (state.options.mode) {
       case 'navigation':
-        unselectView(viewId, 200)
+        const delay =
+          state.options.delay?.mouseleave ?? ModeDelayMouseleave.navigation
+        unselectView(viewId, delay)
     }
   }
 })

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

@@ -42,6 +42,7 @@ import {
 import { MagicMenuInstanceId, MagicMenuViewId } from '../symbols'
 import { useMenuView } from '../composables/private/useMenuView'
 import { useMenuState } from '../composables/private/useMenuState'
+import { ModeFloatingStrategy } from '../utils/modeFloatingStrategyDefaults'
 
 interface MagicMenuFloatProps {
   placement?: Placement
@@ -165,11 +166,18 @@ const mappedReferenceEl = computed(() => {
   }
 })
 
+const mappedStrategy = computed(() => {
+  return (
+    state.options.floating?.strategy ?? ModeFloatingStrategy[state.options.mode]
+  )
+})
+
 const { floatingStyles, placement, middlewareData } = useFloating(
   mappedReferenceEl,
   elRef,
   {
     placement: mappedPlacement,
+    strategy: mappedStrategy,
     whileElementsMounted: autoUpdate,
     middleware: mappedMiddleware,
   }

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

@@ -4,9 +4,11 @@ type UseMenuCallbackArgs = {
     state: MenuState;
     instanceId: MaybeRef<string>;
     viewId: string;
+    wrapperActive: Ref<boolean>;
     lockScroll: () => void;
     unlockScroll: () => void;
-    wrapperActive: Ref<boolean>;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
 };
 export declare function useMenuCallback(args: UseMenuCallbackArgs): {
     onBeforeEnter: (_el: Element) => void;

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

@@ -1,7 +1,17 @@
 import { toValue } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { ModeScrollLock } from "../../utils/modeScrollLockDefaults.mjs";
 export function useMenuCallback(args) {
-  const { state, instanceId, viewId, lockScroll, unlockScroll, wrapperActive } = args;
+  const {
+    state,
+    instanceId,
+    viewId,
+    wrapperActive,
+    lockScroll,
+    unlockScroll,
+    addScrollLockPadding,
+    removeScrollLockPadding
+  } = args;
   const emitter = useMagicEmitter();
   function onBeforeEnter(_el) {
     emitter.emit("beforeEnter", { id: toValue(instanceId), view: viewId });
@@ -11,17 +21,12 @@ export function useMenuCallback(args) {
   }
   function onAfterEnter(_el) {
     emitter.emit("afterEnter", { id: toValue(instanceId), view: viewId });
-    switch (state.options.mode) {
-      case "dropdown":
-        lockScroll();
-        break;
-      case "menubar":
-        break;
-      case "navigation":
-        break;
-      case "context":
-        lockScroll();
-        break;
+    const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
+    if (!!scrollLock) {
+      lockScroll();
+      if (typeof scrollLock === "object" && scrollLock.padding) {
+        addScrollLockPadding();
+      }
     }
   }
   function onBeforeLeave(_el) {
@@ -32,17 +37,12 @@ export function useMenuCallback(args) {
   }
   function onAfterLeave(_el) {
     emitter.emit("afterLeave", { id: toValue(instanceId), view: viewId });
-    switch (state.options.mode) {
-      case "dropdown":
-        unlockScroll();
-        break;
-      case "menubar":
-        break;
-      case "navigation":
-        break;
-      case "context":
-        unlockScroll();
-        break;
+    const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
+    if (!!scrollLock) {
+      unlockScroll();
+      if (typeof scrollLock === "object" && scrollLock.padding) {
+        removeScrollLockPadding();
+      }
     }
     wrapperActive.value = false;
   }

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

@@ -1,6 +1,10 @@
 import { useMagicKeys, useFocus } from "@vueuse/core";
 import { useMenuView } from "./useMenuView.mjs";
 import { useMenuState } from "./useMenuState.mjs";
+import {
+  ModeDelayClick,
+  ModeDelayMouseenter
+} from "../../utils/modeDelayDefaults.mjs";
 export function useMenuTrigger(args) {
   const { instanceId, viewId, itemId, mappedTrigger, mappedDisabled, elRef } = args;
   const { getView, selectView, unselectView } = useMenuView(instanceId);
@@ -12,7 +16,8 @@ export function useMenuTrigger(args) {
   function onRightClick(e) {
     switch (e.button) {
       case 2:
-        selectView(viewId);
+        const delay = state.options.delay?.rightClick ?? 0;
+        selectView(viewId, delay);
         state.active = true;
         if (view) {
           view.state.clicked = { x: e.clientX, y: e.clientY };
@@ -41,13 +46,8 @@ export function useMenuTrigger(args) {
       if (mappedTrigger.value[0] === "mouseenter") {
         state.active = true;
       }
-      let delay = 0;
-      switch (state.options.mode) {
-        case "navigation":
-          delay = 200;
-          break;
-      }
       if (state.active) {
+        const delay = state.options.delay?.mouseenter ?? ModeDelayMouseenter[state.options.mode];
         selectView(viewId, delay);
         if (!itemId) {
           state.input.view = viewId;
@@ -57,14 +57,9 @@ export function useMenuTrigger(args) {
   }
   function onClick(e) {
     if (mappedTrigger.value.includes("click") && !mappedDisabled.value && e.button === 0 && viewId) {
-      let delay = 0;
-      switch (state.options.mode) {
-        case "navigation":
-          delay = 200;
-          break;
-      }
       switch (true) {
         case !state.active:
+          const delay = state.options.delay?.click ?? ModeDelayClick[state.options.mode];
           state.active = true;
           selectView(viewId, delay);
           if (!itemId) {
@@ -79,6 +74,7 @@ export function useMenuTrigger(args) {
     }
     if (mappedTrigger.value.includes("right-click") && viewId) {
       e.preventDefault();
+      e.stopPropagation();
       if (control.value || shift.value) {
         onRightClick(
           new MouseEvent(e.type, {

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

@@ -4,12 +4,24 @@ type MenuMode = 'dropdown' | 'menubar' | 'context' | 'navigation';
 export interface MagicMenuOptions {
     mode?: MenuMode;
     debug?: boolean;
+    scrollLock?: boolean | {
+        padding: boolean;
+    };
     transition?: {
         content?: {
             default?: string;
             nested?: string;
         };
-        channel: string;
+        channel?: string;
+    };
+    floating?: {
+        strategy: 'fixed' | 'absolute';
+    };
+    delay?: {
+        mouseenter?: number;
+        mouseleave?: number;
+        click?: number;
+        rightClick?: number;
     };
 }
 export type Interaction = 'click' | 'mouseenter' | 'right-click';

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

@@ -1,4 +1,4 @@
 import type { MagicMenuOptions } from '../types.js';
 import type { RequireAllNested } from '@maas/vue-equipment/utils';
-declare const defaultOptions: RequireAllNested<MagicMenuOptions>;
+declare const defaultOptions: Omit<RequireAllNested<MagicMenuOptions>, 'scrollLock' | 'floating' | 'delay'>;
 export { defaultOptions };

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

@@ -0,0 +1,15 @@
+export declare enum ModeDelayMouseenter {
+    menubar = 0,
+    dropdown = 0,
+    context = 0,
+    navigation = 200
+}
+export declare enum ModeDelayMouseleave {
+    navigation = 200
+}
+export declare enum ModeDelayClick {
+    menubar = 0,
+    dropdown = 0,
+    context = 0,
+    navigation = 0
+}

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

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

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

@@ -0,0 +1,6 @@
+export declare enum ModeFloatingStrategy {
+    menubar = "absolute",
+    dropdown = "absolute",
+    context = "absolute",
+    navigation = "fixed"
+}

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

@@ -0,0 +1,7 @@
+export var ModeFloatingStrategy = /* @__PURE__ */ ((ModeFloatingStrategy2) => {
+  ModeFloatingStrategy2["menubar"] = "absolute";
+  ModeFloatingStrategy2["dropdown"] = "absolute";
+  ModeFloatingStrategy2["context"] = "absolute";
+  ModeFloatingStrategy2["navigation"] = "fixed";
+  return ModeFloatingStrategy2;
+})(ModeFloatingStrategy || {});

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

@@ -0,0 +1,12 @@
+export declare class ModeScrollLock {
+    private readonly key;
+    readonly value: false | {
+        padding: boolean;
+    };
+    static readonly menubar: ModeScrollLock;
+    static readonly dropdown: ModeScrollLock;
+    static readonly context: ModeScrollLock;
+    static readonly navigation: ModeScrollLock;
+    private constructor();
+    toString(): string;
+}

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

@@ -0,0 +1,13 @@
+export class ModeScrollLock {
+  constructor(key, value) {
+    this.key = key;
+    this.value = value;
+  }
+  static menubar = new ModeScrollLock("menubar", false);
+  static dropdown = new ModeScrollLock("dropdown", { padding: true });
+  static context = new ModeScrollLock("context", { padding: true });
+  static navigation = new ModeScrollLock("navigation", false);
+  toString() {
+    return this.key;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.30.6",
+  "version": "0.31.0",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "type": "module",
   "devDependencies": {