@maas/vue-equipment 0.30.0 → 0.30.1

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -4,7 +4,7 @@ const functions$1 = [
 	{
 		name: "MagicAutoSize",
 		"package": "plugins",
-		lastUpdated: 0,
+		lastUpdated: 1719323171000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicAutoSize/",
 		description: "auto Size"
 	},
@@ -53,7 +53,7 @@ const functions$1 = [
 	{
 		name: "MagicMenu",
 		"package": "plugins",
-		lastUpdated: 1719315337000,
+		lastUpdated: 1719385203000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicMenu/",
 		description: "menu"
 	},

package/dist/plugins/MagicAutoSize/src/components/MagicAutoSize.vue

@@ -55,12 +55,13 @@ const mappedSize = computed(() => {
 useMutationObserver(
   elRef,
   (mutations) => {
-    const addedNodes: HTMLElement[] = mutations
+    const filtered = mutations
       .flatMap((m) => [...m.addedNodes])
-      .filter((n) => n instanceof HTMLElement)
-      .map((n) => n as HTMLElement)
+      .find((n) => n instanceof HTMLElement)
 
-    content.value = addedNodes[0]
+    if (!!filtered && filtered instanceof HTMLElement) {
+      content.value = filtered
+    }
   },
   {
     childList: true,
@@ -78,11 +79,15 @@ useResizeObserver(content, () => {
 
 onMounted(() => {
   if (elRef.value) {
-    const content = elRef.value.querySelector('*')
-    if (content instanceof HTMLElement) {
+    const content = elRef.value.querySelectorAll('*')
+    const filtered = Array.from(content).find(
+      (node) => node instanceof HTMLElement
+    )
+
+    if (!!filtered && filtered instanceof HTMLElement) {
       size.value = {
-        width: content.offsetWidth,
-        height: content.offsetHeight,
+        width: filtered.offsetWidth,
+        height: filtered.offsetHeight,
       }
     }
   }

package/dist/plugins/MagicMenu/index.mjs

@@ -1,7 +1,9 @@
 import MagicMenuFloat from "./src/components/MagicMenuFloat.vue";
 import MagicMenuContent from "./src/components/MagicMenuContent.vue";
+import MagicMenuChannel from "./src/components/MagicMenuChannel.vue";
 import MagicMenuItem from "./src/components/MagicMenuItem.vue";
 import MagicMenuProvider from "./src/components/MagicMenuProvider.vue";
+import MagicMenuRemote from "./src/components/MagicMenuRemote.vue";
 import MagicMenuTrigger from "./src/components/MagicMenuTrigger.vue";
 import MagicMenuView from "./src/components/MagicMenuView.vue";
 import { useMagicMenu } from "./src/composables/useMagicMenu.mjs";
@@ -14,8 +16,10 @@ const MagicMenuPlugin = {
   install: (app) => {
     app.component("MagicMenuFloat", MagicMenuFloat);
     app.component("MagicMenuContent", MagicMenuContent);
+    app.component("MagicMenuChannel", MagicMenuChannel);
     app.component("MagicMenuItem", MagicMenuItem);
     app.component("MagicMenuProvider", MagicMenuProvider);
+    app.component("MagicMenuRemote", MagicMenuRemote);
     app.component("MagicMenuTrigger", MagicMenuTrigger);
     app.component("MagicMenuView", MagicMenuView);
   }

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

@@ -0,0 +1,69 @@
+<template>
+  <div
+    class="magic-menu-channel"
+    v-if="channel.active"
+    :data-id="mappedId"
+    :id="id"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, provide, onBeforeUnmount } from 'vue'
+import { useMenuChannel } from '../composables/private/useMenuChannel'
+import {
+  MagicMenuInstanceId,
+  MagicMenuViewId,
+  MagicMenuContentId,
+  MagicMenuChannelId,
+  MagicMenuChannelActive,
+} from '../symbols'
+
+interface MagicMenuChannelProps {
+  id: string
+}
+
+const props = defineProps<MagicMenuChannelProps>()
+
+const instanceId = inject(MagicMenuInstanceId, undefined)
+const viewId = inject(MagicMenuViewId, undefined)
+const contentId = inject(MagicMenuContentId, undefined)
+
+if (!instanceId) {
+  throw new Error('MagicMenuChannel must be nested inside MagicMenuProvider')
+}
+
+if (!viewId) {
+  throw new Error('MagicMenuChannel must be nested inside MagicMenuView')
+}
+
+if (!contentId) {
+  throw new Error('MagicMenuChannel must be nested inside MagicMenuContent')
+}
+
+if (!props.id) {
+  throw new Error('MagicMenuChannel requires an id')
+}
+
+const mappedId = computed(() => `magic-menu-channel-${props.id}`)
+
+// Register channel
+const { initializeChannel, deleteChannel } = useMenuChannel({
+  instanceId,
+  viewId,
+})
+
+const channel = initializeChannel({
+  id: mappedId.value,
+})
+
+// Pass id and active state to children
+provide(MagicMenuChannelId, mappedId.value)
+provide(MagicMenuChannelActive, channel.active)
+
+// Lifecycle
+onBeforeUnmount(() => {
+  deleteChannel(mappedId.value)
+})
+</script>

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

@@ -0,0 +1,21 @@
+interface MagicMenuChannelProps {
+    id: string;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuChannelProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuChannelProps>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+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;
+    };
+};

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

@@ -16,7 +16,7 @@
         v-if="innerActive"
       >
         <magic-menu-float
-          :placement="placement"
+          :placement="view?.placement"
           :arrow="arrow"
           :reference-el="referenceEl"
         >
@@ -45,7 +45,6 @@ import {
   type MaybeRef,
   type ComponentPublicInstance,
 } from 'vue'
-import type { Placement } from '@floating-ui/vue'
 import { useMenuView } from '../composables/private/useMenuView'
 import {
   MagicMenuInstanceId,
@@ -64,7 +63,6 @@ defineOptions({
 })
 
 interface MagicMenuContentProps {
-  placement?: Placement
   arrow?: boolean | undefined
   referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>
 }

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

@@ -1,9 +1,7 @@
 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 | undefined;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }

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

@@ -0,0 +1,75 @@
+<template>
+  <div
+    class="magic-menu-remote"
+    :class="{ '-active': channel?.active, '-disabled': disabled }"
+    :data-id="`${channelId}-remote`"
+    @click="onClick"
+    @mouseenter="onMouseenter"
+  >
+    <slot :is-active="view?.active" :is-disabled="disabled" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import { useMenuView } from '../composables/private/useMenuView'
+import { useMenuChannel } from '../composables/private/useMenuChannel'
+import { MagicMenuInstanceId, MagicMenuViewId } from '../symbols'
+
+import type { Interaction } from '../types'
+import { useMenuRemote } from '../composables/private/useMenuRemote'
+
+interface MagicMenuRemoteProps {
+  channelId: string
+  viewId?: string
+  instanceId?: string
+  disabled?: boolean
+  trigger?: Interaction[]
+}
+
+const props = defineProps<MagicMenuRemoteProps>()
+
+const instanceId = inject(MagicMenuInstanceId, props.instanceId)
+const viewId = inject(MagicMenuViewId, props.viewId)
+
+if (!instanceId) {
+  throw new Error(
+    'MagicMenuRemote must be nested inside MagicMenuProvider or an instanceId must be provided'
+  )
+}
+
+if (!viewId) {
+  throw new Error(
+    'MagicMenuTrigger must be nested inside MagicMenuView or a viewId must be provided'
+  )
+}
+
+if (!props.channelId) {
+  throw new Error('MagicMenuRemote requires a channelId')
+}
+
+const mappedChannelId = computed(() => `magic-menu-channel-${props.channelId}`)
+const mappedTrigger = computed<Interaction[]>(
+  () => props.trigger ?? ['mouseenter']
+)
+
+const { getView } = useMenuView(instanceId)
+const view = getView(viewId)
+
+const { getChannel } = useMenuChannel({
+  instanceId,
+  viewId,
+})
+const channel = getChannel(mappedChannelId.value)
+
+const { onClick, onMouseenter } = useMenuRemote({
+  viewId,
+  instanceId,
+  mappedChannelId,
+  mappedTrigger,
+})
+</script>
+
+<style>
+.magic-menu-remote{cursor:var(--magic-menu-remote-cursor,pointer)}
+</style>

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

@@ -0,0 +1,29 @@
+import type { Interaction } from '../types';
+interface MagicMenuRemoteProps {
+    channelId: string;
+    viewId?: string;
+    instanceId?: string;
+    disabled?: boolean;
+    trigger?: Interaction[];
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuRemoteProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuRemoteProps>>>, {}, {}>, {
+    default?(_: {
+        isActive: boolean | undefined;
+        isDisabled: boolean | undefined;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+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;
+    };
+};

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

@@ -69,7 +69,9 @@ const mappedTrigger = computed<Interaction[]>(() => {
     case 'menubar':
       return view?.parent.item
         ? ['mouseenter', 'mouseleave', 'click']
-        : ['mouseenter', 'click']
+        : state.active
+        ? ['mouseenter', 'click']
+        : ['click']
     case 'dropdown':
       return view?.parent.item
         ? ['mouseenter', 'mouseleave', 'click']
@@ -78,6 +80,8 @@ const mappedTrigger = computed<Interaction[]>(() => {
       return view?.parent.item
         ? ['mouseenter', 'mouseleave', 'click']
         : ['right-click']
+    case 'navigation':
+      return ['mouseenter', 'mouseleave']
   }
 })
 

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

@@ -16,9 +16,12 @@ import {
   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>()
@@ -36,9 +39,32 @@ 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
+  }
+
+  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

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

@@ -1,5 +1,7 @@
+import type { Placement } from '@floating-ui/vue';
 interface MagicMenuViewProps {
     id?: string;
+    placement?: Placement;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuViewProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuViewProps>>>, {}, {}>, {
     default?(_: {}): any;

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

@@ -17,6 +17,8 @@ export function useMenuCallback(args) {
         break;
       case "menubar":
         break;
+      case "navigation":
+        break;
       case "context":
         lockScroll();
         break;
@@ -36,6 +38,8 @@ export function useMenuCallback(args) {
         break;
       case "menubar":
         break;
+      case "navigation":
+        break;
       case "context":
         unlockScroll();
         break;

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

@@ -0,0 +1,15 @@
+import { type MaybeRef } from 'vue';
+import type { MenuChannel } from '../../types.js';
+type UseMenuChannelArgs = {
+    instanceId: MaybeRef<string>;
+    viewId: string;
+};
+type InitializeChannelArgs = Pick<MenuChannel, 'id'>;
+export declare function useMenuChannel(args: UseMenuChannelArgs): {
+    initializeChannel: (args: InitializeChannelArgs) => MenuChannel;
+    deleteChannel: (id: string) => void;
+    getChannel: (id: string) => MenuChannel | undefined;
+    selectChannel: (id: string) => void;
+    unselectChannel: (id: string) => void;
+};
+export {};

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

@@ -0,0 +1,73 @@
+import { reactive } from "vue";
+import { useMenuView } from "./useMenuView.mjs";
+import { useMenuState } from "./useMenuState.mjs";
+export function useMenuChannel(args) {
+  const { instanceId, viewId } = args;
+  const { initializeState } = useMenuState(instanceId);
+  const state = initializeState();
+  const { getView } = useMenuView(instanceId);
+  const view = getView(viewId);
+  if (!view) {
+    throw new Error(`View ${viewId} not found`);
+  }
+  function createChannel(args2) {
+    const { id } = args2;
+    const channel = {
+      id,
+      active: false
+    };
+    return reactive(channel);
+  }
+  function addChannel(args2) {
+    const channel = createChannel(args2);
+    if (view?.channels) {
+      view.channels = [...view?.channels, channel];
+    }
+    return channel;
+  }
+  function unselectSiblings(id) {
+    return view?.channels.filter((channel) => channel.id !== id).forEach((channel) => channel.active = false);
+  }
+  function initializeChannel(args2) {
+    const { id } = args2;
+    const instance = getChannel(id);
+    if (!instance) {
+      const channel = addChannel(args2);
+      return channel;
+    }
+    return instance;
+  }
+  function deleteChannel(id) {
+    if (!view?.channels)
+      return;
+    view.channels = view.channels.filter((x) => x.id !== id);
+  }
+  function getChannel(id) {
+    return view?.channels.find((channel) => {
+      return channel.id === id;
+    });
+  }
+  function selectChannel(id) {
+    const instance = getChannel(id);
+    if (instance) {
+      instance.active = true;
+      unselectSiblings(id);
+      if (view) {
+        state.input.view = view.id;
+      }
+    }
+  }
+  function unselectChannel(id) {
+    const instance = getChannel(id);
+    if (instance) {
+      instance.active = false;
+    }
+  }
+  return {
+    initializeChannel,
+    deleteChannel,
+    getChannel,
+    selectChannel,
+    unselectChannel
+  };
+}

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

@@ -0,0 +1,13 @@
+import { type MaybeRef, type ComputedRef } from 'vue';
+import type { Interaction } from '../../types.js';
+interface UseMenuRemoteArgs {
+    viewId: string;
+    instanceId: MaybeRef<string>;
+    mappedChannelId: MaybeRef<string>;
+    mappedTrigger: ComputedRef<Interaction[]>;
+}
+export declare function useMenuRemote(args: UseMenuRemoteArgs): {
+    onClick: () => void;
+    onMouseenter: () => void;
+};
+export {};

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

@@ -0,0 +1,23 @@
+import { toValue } from "vue";
+import { useMenuChannel } from "./useMenuChannel.mjs";
+export function useMenuRemote(args) {
+  const { viewId, instanceId, mappedChannelId, mappedTrigger } = args;
+  const { selectChannel } = useMenuChannel({
+    instanceId,
+    viewId
+  });
+  function onClick() {
+    if (mappedTrigger.value.includes("click")) {
+      selectChannel(toValue(mappedChannelId));
+    }
+  }
+  function onMouseenter() {
+    if (mappedTrigger.value.includes("mouseenter")) {
+      selectChannel(toValue(mappedChannelId));
+    }
+  }
+  return {
+    onClick,
+    onMouseenter
+  };
+}

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

@@ -1,9 +1,9 @@
 import { type MaybeRef } from 'vue';
 import type { MenuView } from '../../types/index.js';
-type FindViewArgs = Pick<MenuView, 'id' | 'parent'>;
+type InitializeViewArgs = Pick<MenuView, 'id' | 'parent' | 'placement'>;
 export declare function useMenuView(instanceId: MaybeRef<string>): {
     currentView: import("vue").ComputedRef<MenuView>;
-    initializeView: (args: FindViewArgs) => MenuView;
+    initializeView: (args: InitializeViewArgs) => MenuView;
     deleteView: (id: string) => void;
     getView: (id: string) => MenuView | undefined;
     getRelativeViewIndex: (id: string) => number;

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

@@ -9,7 +9,7 @@ export function useMenuView(instanceId) {
     )
   );
   function createView(args) {
-    const { id, parent } = args;
+    const { id, parent, placement } = args;
     if (parent.views.length === 0) {
       parent.views.push(toValue(instanceId));
     }
@@ -21,7 +21,9 @@ export function useMenuView(instanceId) {
         content: void 0
       },
       active: false,
-      items: []
+      items: [],
+      channels: [],
+      placement
     };
     return reactive(view);
   }

package/dist/plugins/MagicMenu/src/composables/useMagicMenu.d.ts

@@ -1,6 +1,13 @@
 import { type MaybeRef } from 'vue';
-export declare function useMagicMenu(instanceId: MaybeRef<string>): {
+interface UseMagicMenuArgs {
+    instanceId: MaybeRef<string>;
+    viewId?: string;
+}
+export declare function useMagicMenu(args: UseMagicMenuArgs): {
     selectView: (id: string) => void;
     unselectView: (id: string) => void;
+    selectChannel: (id: string) => void;
+    unselectChannel: (id: string) => void;
 };
 export type UseMagicMenuReturn = ReturnType<typeof useMagicMenu>;
+export {};

package/dist/plugins/MagicMenu/src/composables/useMagicMenu.mjs

@@ -1,8 +1,16 @@
 import { useMenuView } from "./private/useMenuView.mjs";
-export function useMagicMenu(instanceId) {
+import { useMenuChannel } from "./private/useMenuChannel.mjs";
+export function useMagicMenu(args) {
+  const { instanceId, viewId } = args;
   const { selectView, unselectView } = useMenuView(instanceId);
+  const { selectChannel, unselectChannel } = useMenuChannel({
+    instanceId,
+    viewId: viewId ?? ""
+  });
   return {
     selectView,
-    unselectView
+    unselectView,
+    selectChannel,
+    unselectChannel
   };
 }

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

@@ -6,4 +6,6 @@ declare const MagicMenuViewActive: InjectionKey<boolean>;
 declare const MagicMenuContentId: InjectionKey<string>;
 declare const MagicMenuItemId: InjectionKey<string>;
 declare const MagicMenuItemActive: InjectionKey<boolean>;
-export { MagicMenuInstanceId, MagicMenuParentTree, MagicMenuViewId, MagicMenuViewActive, MagicMenuContentId, MagicMenuItemId, MagicMenuItemActive, };
+declare const MagicMenuChannelId: InjectionKey<string>;
+declare const MagicMenuChannelActive: InjectionKey<boolean>;
+export { MagicMenuInstanceId, MagicMenuParentTree, MagicMenuViewId, MagicMenuViewActive, MagicMenuContentId, MagicMenuItemId, MagicMenuItemActive, MagicMenuChannelId, MagicMenuChannelActive, };

package/dist/plugins/MagicMenu/src/symbols/index.mjs

@@ -5,6 +5,8 @@ const MagicMenuViewActive = Symbol();
 const MagicMenuContentId = Symbol();
 const MagicMenuItemId = Symbol();
 const MagicMenuItemActive = Symbol();
+const MagicMenuChannelId = Symbol();
+const MagicMenuChannelActive = Symbol();
 export {
   MagicMenuInstanceId,
   MagicMenuParentTree,
@@ -12,5 +14,7 @@ export {
   MagicMenuViewActive,
   MagicMenuContentId,
   MagicMenuItemId,
-  MagicMenuItemActive
+  MagicMenuItemActive,
+  MagicMenuChannelId,
+  MagicMenuChannelActive
 };

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

@@ -1,5 +1,6 @@
+import type { Placement } from '@floating-ui/vue';
 import type { RequireAllNested } from '@maas/vue-equipment/utils';
-type MenuMode = 'dropdown' | 'menubar' | 'context';
+type MenuMode = 'dropdown' | 'menubar' | 'context' | 'navigation';
 export interface MagicMenuOptions {
     mode?: MenuMode;
     transition?: {
@@ -18,10 +19,15 @@ export interface MenuItem {
     active: boolean;
     disabled: boolean;
 }
+export interface MenuChannel {
+    id: string;
+    active: boolean;
+}
 export interface MenuView {
     id: string;
     active: boolean;
     items: MenuItem[];
+    channels: MenuChannel[];
     parent: {
         item: string;
         views: string[];
@@ -30,6 +36,7 @@ export interface MenuView {
         trigger?: HTMLElement;
         content?: HTMLElement;
     };
+    placement: Placement;
     click?: Coordinates;
 }
 export interface MenuState {

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.0",
+  "version": "0.30.1",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",