@maas/vue-equipment 0.29.4 → 0.29.6

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.29.3",
+  "version": "0.29.5",
   "builder": {
     "@nuxt/module-builder": "0.8.0",
     "unbuild": "unknown"

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

@@ -15,7 +15,11 @@
         v-bind="$attrs"
         v-if="innerActive"
       >
-        <magic-menu-float :placement="placement" :arrow="arrow">
+        <magic-menu-float
+          :placement="placement"
+          :arrow="arrow"
+          :reference-el="referenceEl"
+        >
           <template #arrow v-if="$slots.arrow && arrow">
             <slot name="arrow" />
           </template>
@@ -31,7 +35,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, inject, provide, nextTick, watch, computed } from 'vue'
+import {
+  ref,
+  inject,
+  provide,
+  nextTick,
+  watch,
+  computed,
+  type MaybeRef,
+  type ComponentPublicInstance,
+} from 'vue'
 import type { Placement } from '@floating-ui/vue'
 import { useMenuView } from '../composables/private/useMenuView'
 import {
@@ -53,6 +66,7 @@ defineOptions({
 interface MagicMenuContentProps {
   placement?: Placement
   arrow?: boolean
+  referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>
 }
 
 defineProps<MagicMenuContentProps>()

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

@@ -1,9 +1,11 @@
+import { type MaybeRef, type ComponentPublicInstance } from 'vue';
 import type { Placement } from '@floating-ui/vue';
 import '@maas/vue-equipment/utils/css/animations/fade-in.css';
 import '@maas/vue-equipment/utils/css/animations/fade-out.css';
 interface MagicMenuContentProps {
     placement?: Placement;
     arrow?: boolean;
+    referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuContentProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuContentProps>>>, {}, {}>, {
     arrow?(_: {}): any;

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

@@ -22,7 +22,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, inject } from 'vue'
+import {
+  ref,
+  computed,
+  inject,
+  toValue,
+  type MaybeRef,
+  type ComponentPublicInstance,
+} from 'vue'
 import {
   useFloating,
   autoUpdate,
@@ -39,6 +46,7 @@ import { useMenuState } from '../composables/private/useMenuState'
 interface MagicMenuFloatProps {
   placement?: Placement
   arrow?: boolean
+  referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>
 }
 
 const props = defineProps<MagicMenuFloatProps>()
@@ -75,21 +83,69 @@ const hasArrow = computed(
 )
 
 const mappedMiddleware = computed(() => {
-  const middleware = [flip()]
-
-  if (view?.parent.item) {
-    middleware.push(shift({ crossAxis: true, limiter: limitShift() }))
-  }
+  const middleware = []
 
-  if (hasArrow.value) {
-    middleware.push(arrow({ element: arrowRef }))
+  switch (state.options.mode) {
+    case 'menubar':
+      if (!view?.parent.item) {
+        middleware.push(
+          flip({
+            crossAxis: true,
+          })
+        )
+      } else if (!!view?.parent.item) {
+        middleware.push(
+          flip({
+            crossAxis: false,
+          })
+        )
+        middleware.push(
+          shift({
+            crossAxis: true,
+            limiter: limitShift(),
+          })
+        )
+      }
+      break
+    case 'dropdown':
+      middleware.push(
+        flip({
+          mainAxis: true,
+          crossAxis: false,
+        })
+      )
+      middleware.push(
+        shift({
+          mainAxis: true,
+          crossAxis: false,
+          limiter: limitShift(),
+        })
+      )
+      if (hasArrow.value) {
+        middleware.push(
+          arrow({
+            element: arrowRef.value,
+          })
+        )
+      }
+      break
+    case 'context':
+      middleware.push(
+        flip({
+          mainAxis: true,
+          crossAxis: true,
+        })
+      )
+      break
   }
 
   return middleware
 })
 
-const referenceEl = computed(() => {
-  if (view?.click) {
+const mappedReferenceEl = computed(() => {
+  if (props.referenceEl) {
+    return toValue(props.referenceEl)
+  } else if (view?.click) {
     return {
       getBoundingClientRect() {
         return {
@@ -110,7 +166,7 @@ const referenceEl = computed(() => {
 })
 
 const { floatingStyles, placement, middlewareData } = useFloating(
-  referenceEl,
+  mappedReferenceEl,
   elRef,
   {
     placement: mappedPlacement,

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

@@ -1,7 +1,9 @@
+import { type MaybeRef, type ComponentPublicInstance } from 'vue';
 import { type Placement } from '@floating-ui/vue';
 interface MagicMenuFloatProps {
     placement?: Placement;
     arrow?: boolean;
+    referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuFloatProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuFloatProps>>>, {}, {}>, {
     arrow?(_: {}): any;

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

@@ -26,11 +26,11 @@ import {
   MagicMenuItemId,
 } from '../symbols'
 
-import type { MenuTrigger } from '../types'
+import type { Interaction } from '../types'
 
 interface MagicMenuTriggerProps {
   disabled?: boolean
-  trigger?: MenuTrigger[]
+  trigger?: Interaction[]
 }
 
 const props = defineProps<MagicMenuTriggerProps>()
@@ -60,7 +60,7 @@ const item = getItem(itemId ?? '')
 
 const mappedDisabled = computed(() => props.disabled ?? item?.disabled)
 
-const mappedTrigger = computed<MenuTrigger[]>(() => {
+const mappedTrigger = computed<Interaction[]>(() => {
   if (props.trigger?.length) {
     return props.trigger
   }

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

@@ -1,7 +1,7 @@
-import type { MenuTrigger } from '../types';
+import type { Interaction } from '../types';
 interface MagicMenuTriggerProps {
     disabled?: boolean;
-    trigger?: MenuTrigger[];
+    trigger?: Interaction[];
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuTriggerProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuTriggerProps>>>, {}, {}>, {
     default?(_: {

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

@@ -1,11 +1,11 @@
 import { type ComputedRef, type MaybeRef, type Ref } from 'vue';
-import type { MenuTrigger } from '../../types/index.js';
+import type { Interaction } from '../../types/index.js';
 type UseMenuTriggerArgs = {
     instanceId: MaybeRef<string>;
     viewId: string;
     itemId?: string;
     mappedDisabled: ComputedRef<boolean>;
-    mappedTrigger: ComputedRef<MenuTrigger[]>;
+    mappedTrigger: ComputedRef<Interaction[]>;
     elRef: Ref<HTMLElement | undefined>;
 };
 export declare function useMenuTrigger(args: UseMenuTriggerArgs): {

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

@@ -164,13 +164,18 @@ export function useMenuTrigger(args) {
   function onMouseenter() {
     cancelPointermove?.();
     resetState();
-    if (mappedTrigger.value.includes("mouseenter") && view && viewId && state.active && !mappedDisabled.value) {
-      selectView(viewId);
-      if (!itemId) {
-        state.input.view = viewId;
+    if (mappedTrigger.value.includes("mouseenter") && !mappedDisabled.value && viewId && view) {
+      if (!mappedTrigger.value[0].includes("mouseenter")) {
+        state.active = true;
       }
-      if (itemId) {
-        disableCursor();
+      if (state.active) {
+        selectView(viewId);
+        if (!itemId) {
+          state.input.view = viewId;
+        }
+        if (itemId) {
+          disableCursor();
+        }
       }
     }
   }

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

@@ -8,7 +8,7 @@ export interface MagicMenuOptions {
         nested?: string;
     };
 }
-export type MenuTrigger = 'click' | 'mouseenter' | 'mouseleave' | 'right-click';
+export type Interaction = 'click' | 'mouseenter' | 'mouseleave' | 'right-click';
 export type Coordinates = {
     x: number;
     y: number;

package/package.json

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