@maas/vue-equipment 0.29.8 → 0.30.1

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -1,6 +1,13 @@
 import { defineNuxtModule, createResolver, extendViteConfig, installModule, addImportsSources } from '@nuxt/kit';
 
 const functions$1 = [
+	{
+		name: "MagicAutoSize",
+		"package": "plugins",
+		lastUpdated: 1719323171000,
+		docs: "https://maas.egineering/vue-equipment/plugins/MagicAutoSize/",
+		description: "auto Size"
+	},
 	{
 		name: "MagicCommand",
 		"package": "plugins",
@@ -46,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/index.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from 'vue';
+import MagicAutoSize from './src/components/MagicAutoSize.vue.js';
+declare const MagicAutoSizePlugin: Plugin;
+export { MagicAutoSizePlugin, MagicAutoSize };

package/dist/plugins/MagicAutoSize/index.mjs

@@ -0,0 +1,7 @@
+import MagicAutoSize from "./src/components/MagicAutoSize.vue";
+const MagicAutoSizePlugin = {
+  install: (app) => {
+    app.component("MagicAutoSize", MagicAutoSize);
+  }
+};
+export { MagicAutoSizePlugin, MagicAutoSize };

package/dist/plugins/MagicAutoSize/nuxt.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@nuxt/schema").NuxtModule<import("@nuxt/schema").ModuleOptions>;
+export default _default;

package/dist/plugins/MagicAutoSize/nuxt.mjs

@@ -0,0 +1,14 @@
+import { defineNuxtModule, createResolver, addComponent } from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicAutoSize"
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    addComponent({
+      filePath: resolver.resolve("src/components/MagicAutoSize.vue"),
+      name: "MagicAutoSize",
+      global: true
+    });
+  }
+});

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

@@ -0,0 +1,99 @@
+<template>
+  <div
+    class="magic-auto-size"
+    ref="elRef"
+    :style="{
+      '--magic-auto-size-width': mappedSize?.width,
+      '--magic-auto-size-height': mappedSize?.height,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue'
+import { useResizeObserver, useMutationObserver } from '@vueuse/core'
+
+interface MagicAutoSizeProps {
+  width?: boolean
+  height?: boolean
+}
+
+const props = withDefaults(defineProps<MagicAutoSizeProps>(), {
+  width: true,
+  height: true,
+})
+
+const elRef = ref<HTMLElement | undefined>(undefined)
+
+const size = ref<{ width: number; height: number }>()
+const content = ref<HTMLElement | undefined>(undefined)
+
+const mappedSize = computed(() => {
+  if (size.value) {
+    switch (true) {
+      case props.width && props.height:
+        return {
+          width: `${size.value.width}px`,
+          height: `${size.value.height}px`,
+        }
+      case props.width:
+        return {
+          width: `${size.value.width}px`,
+        }
+      case props.height:
+        return {
+          height: `${size.value.height}px`,
+        }
+    }
+  } else {
+    return undefined
+  }
+})
+
+useMutationObserver(
+  elRef,
+  (mutations) => {
+    const filtered = mutations
+      .flatMap((m) => [...m.addedNodes])
+      .find((n) => n instanceof HTMLElement)
+
+    if (!!filtered && filtered instanceof HTMLElement) {
+      content.value = filtered
+    }
+  },
+  {
+    childList: true,
+  }
+)
+
+useResizeObserver(content, () => {
+  if (content.value) {
+    size.value = {
+      width: content.value.offsetWidth,
+      height: content.value.offsetHeight,
+    }
+  }
+})
+
+onMounted(() => {
+  if (elRef.value) {
+    const content = elRef.value.querySelectorAll('*')
+    const filtered = Array.from(content).find(
+      (node) => node instanceof HTMLElement
+    )
+
+    if (!!filtered && filtered instanceof HTMLElement) {
+      size.value = {
+        width: filtered.offsetWidth,
+        height: filtered.offsetHeight,
+      }
+    }
+  }
+})
+</script>
+
+<style>
+.magic-auto-size{--magic-auto-size-transition-function:ease;--magic-auto-size-transition-duration:100ms;height:var(--magic-auto-size-height);transition:all var(--magic-auto-size-transition-duration) var(--magic-auto-size-transition-function);width:var(--magic-auto-size-width)}
+</style>

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

@@ -0,0 +1,40 @@
+interface MagicAutoSizeProps {
+    width?: boolean;
+    height?: boolean;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAutoSizeProps>, {
+    width: boolean;
+    height: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAutoSizeProps>, {
+    width: boolean;
+    height: boolean;
+}>>>, {
+    width: boolean;
+    height: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+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/MagicCommand/src/components/MagicCommandBody.vue.d.ts

@@ -2,7 +2,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}
     default?(_: {}): any;
 }>;
 export default _default;
-
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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/dist/plugins/MagicPlayer/src/components/MagicPlayerControls.vue

@@ -146,5 +146,5 @@ const hidden = computed(() => {
 </script>
 
 <style>
-:root{--magic-player-controls-height:3rem;--magic-player-controls-padding:0.75rem;--magic-player-controls-bottom:1.5rem;--magic-player-controls-left:1.5rem;--magic-player-controls-width:calc(100% - var(--magic-player-controls-left)*2);--magic-player-controls-gap:1rem;--magic-player-controls-border-radius:50rem;--magic-player-controls-background:rgba(32,32,32,.8);--magic-player-controls-backdrop-filter:blur(80px);--magic-player-controls-color:#fff;--magic-player-controls-button-width:3rem;--magic-player-controls-icon-width:1.25rem}@media (max-width:640px){:root{--magic-player-controls-height:2.5rem;--magic-player-controls-bottom:0.75rem;--magic-player-controls-padding:0.5rem}}.magic-player-controls{inset:0;pointer-events:none;position:absolute;width:100%}.magic-player-controls-enter-active{animation:fade-up-in .15s ease}.magic-player-controls-leave-active{animation:fade-up-out .15s ease}.magic-player-controls__bar{align-items:flex-start;bottom:var(--magic-player-controls-bottom);display:flex;flex-direction:column;gap:var(--magic-player-controls-gap);left:var(--magic-player-controls-left);margin:0 auto;pointer-events:auto;position:absolute;width:var(--magic-player-controls-width)}.magic-player-controls__bar--inner{align-items:center;-webkit-backdrop-filter:var(--magic-player-controls-backdrop-filter);backdrop-filter:var(--magic-player-controls-backdrop-filter);background-color:var(--magic-player-controls-background);border-radius:var(--magic-player-controls-border-radius);box-sizing:border-box;color:var(--magic-player-controls-color);display:flex;height:var(--magic-player-controls-height);padding:0 var(--magic-player-controls-padding);width:100%}.magic-player-controls__item{align-items:center;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-player-controls__item.-shrink-0{flex-shrink:0}.magic-player-controls__item.-grow{flex-grow:1}.magic-player-controls__item button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:flex;height:var(--magic-player-controls-height);justify-content:center;outline:none;padding:0;width:var(--magic-player-controls-button-width)}.magic-player-controls__item button svg{display:block;height:auto;width:var(--magic-player-controls-icon-width)}.magic-player-controls__timeline{width:100%}.magic-player-controls.-standalone{inset:unset;position:relative;--magic-player-controls-width:100%;--magic-player-controls-bottom:0;--magic-player-controls-left:0;--magic-player-controls-padding:0;--magic-player-controls-background:unset;--magic-player-controls-border-radius:unset;--magic-player-controls-background:transparent;--magic-player-controls-backdrop-filter:none;--magic-player-controls-transition-duration:unset;--magic-player-controls-transition-timing-function:unset}.magic-player-controls.-standalone .magic-player-controls__bar{position:relative}
+:root{--magic-player-controls-height:3rem;--magic-player-controls-padding:0.75rem;--magic-player-controls-bottom:1.5rem;--magic-player-controls-left:1.5rem;--magic-player-controls-width:calc(100% - var(--magic-player-controls-left)*2);--magic-player-controls-gap:1rem;--magic-player-controls-border-radius:50rem;--magic-player-controls-background:rgba(32,32,32,.8);--magic-player-controls-backdrop-filter:blur(80px);--magic-player-controls-color:#fff;--magic-player-controls-button-width:3rem;--magic-player-controls-icon-width:1.25rem}@media (max-width:640px){:root{--magic-player-controls-height:2.5rem;--magic-player-controls-bottom:0.75rem;--magic-player-controls-padding:0.5rem}}.magic-player-controls{inset:0;pointer-events:none;position:absolute;width:100%}.magic-player-controls-enter-active{animation:fade-up-in .15s ease}.magic-player-controls-leave-active{animation:fade-up-out .15s ease}.magic-player-controls__bar{align-items:flex-start;bottom:var(--magic-player-controls-bottom);display:flex;flex-direction:column;gap:var(--magic-player-controls-gap);left:var(--magic-player-controls-left);margin:0 auto;pointer-events:auto;position:absolute;width:var(--magic-player-controls-width)}.magic-player-controls__bar--inner{align-items:center;-webkit-backdrop-filter:var(--magic-player-controls-backdrop-filter);backdrop-filter:var(--magic-player-controls-backdrop-filter);background-color:var(--magic-player-controls-background);border-radius:var(--magic-player-controls-border-radius);box-sizing:border-box;color:var(--magic-player-controls-color);display:flex;height:var(--magic-player-controls-height);padding:0 var(--magic-player-controls-padding);width:100%}.magic-player-controls__item{align-items:center;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-player-controls__item.-shrink-0{flex-shrink:0}.magic-player-controls__item.-grow{flex-grow:1}.magic-player-controls__item button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:flex;height:var(--magic-player-controls-height);justify-content:center;outline:none;padding:0;width:var(--magic-player-controls-button-width)}.magic-player-controls__item button svg{display:block;height:auto;width:var(--magic-player-controls-icon-width)}.magic-player-controls__timeline{width:100%}.magic-player-controls.-standalone{inset:unset;position:relative;--magic-player-controls-width:100%;--magic-player-controls-bottom:0;--magic-player-controls-left:0;--magic-player-controls-padding:0;--magic-player-controls-background:unset;--magic-player-controls-border-radius:unset;--magic-player-controls-background:transparent;--magic-player-controls-backdrop-filter:none}.magic-player-controls.-standalone .magic-player-controls__bar{position:relative}
 </style>

package/dist/plugins/index.d.ts

@@ -1,3 +1,4 @@
+export * from './MagicAutoSize/index.js';
 export * from './MagicCommand/index.js';
 export * from './MagicCookie/index.js';
 export * from './MagicDraggable/index.js';

package/dist/plugins/index.mjs

@@ -1,3 +1,4 @@
+export * from "./MagicAutoSize/index.mjs";
 export * from "./MagicCommand/index.mjs";
 export * from "./MagicCookie/index.mjs";
 export * from "./MagicDraggable/index.mjs";

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