@maas/vue-equipment 0.29.1 → 0.29.3

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

@@ -1,21 +1,21 @@
-import type { CollisionEvents } from '../../../MagicScroll.js';
-import type { CommandEvents } from '../../../MagicCommand.js';
-import type { CookieEvents } from '../../../MagicCookie.js';
-import type { DraggableEvents } from '../../../MagicDraggable.js';
-import type { DrawerEvents } from '../../../MagicDrawer.js';
-import type { ModalEvents } from '../../../MagicModal.js';
-import type { ToastEvents } from '../../../MagicToast.js';
+import type { CookieEvents } from '../../../MagicCookie/src/types/index.js';
+import type { DraggableEvents } from '../../../MagicDraggable/src/types/index.js';
+import type { DrawerEvents } from '../../../MagicDrawer/src/types/index.js';
+import type { ModalEvents } from '../../../MagicModal/src/types/index.js';
+import type { MenuEvents } from '../../../MagicMenu/src/types/index.js';
+import type { ScrollEvents } from '../../../MagicScroll/src/types/index.js';
+import type { ToastEvents } from '../../../MagicToast/src/types/index.js';
 type MergeTypes<T, U> = {
     [K in keyof T]: K extends keyof U ? T[K] | U[K] : T[K];
 } & Omit<U, keyof T>;
 type Merge<T extends unknown[]> = T extends [infer First, ...infer Rest] ? MergeTypes<First, Merge<Rest>> : {};
 export type MagicEmitterEvents = Merge<[
-    CollisionEvents,
-    CommandEvents,
     CookieEvents,
     DraggableEvents,
     DrawerEvents,
     ModalEvents,
+    MenuEvents,
+    ScrollEvents,
     ToastEvents
 ]>;
 export {};

package/dist/plugins/MagicMarquee/nuxt.mjs

@@ -1,8 +1,4 @@
-import {
-  defineNuxtModule,
-  createResolver,
-  addComponentsDir
-} from "@nuxt/kit";
+import { defineNuxtModule, createResolver, addComponentsDir } from "@nuxt/kit";
 export default defineNuxtModule({
   meta: {
     name: "@maas/vue-equipment/nuxt/MagicMarquee"

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

@@ -19,12 +19,12 @@
 import { ref, computed, onMounted } from 'vue'
 import { useMarqueeApi } from '../composables/private/useMarqueeApi'
 
-interface Props {
+interface MagicMarqueeProps {
   direction?: 'reverse' | 'normal'
   speed?: number
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<MagicMarqueeProps>(), {
   direction: 'normal',
   speed: 1,
 })
@@ -53,5 +53,5 @@ defineExpose({
 </script>
 
 <style>
-:root{--magic-marquee-gap:1rem;--magic-marquee-content-width:unset;--magic-marquee-transform-target-x:-100%}@keyframes magicMarqueeScrollX{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes magicMarqueeScrollY{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}.magic-marquee{overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.magic-marquee__track{display:flex;justify-content:flex-start;position:relative;width:100%}.magic-marquee__content{animation-direction:var(--magic-marquee-animation-direction,normal);animation-duration:var(--magic-marquee-animation-duration);animation-iteration-count:infinite;animation-name:var(--magic-marquee-animation-name);animation-play-state:var(--magic-marquee-animation-play-state,running);animation-timing-function:linear;backface-visibility:hidden;flex-grow:0;flex-shrink:0;padding-right:var(--magic-marquee-gap);white-space:nowrap;width:var(--magic-marquee-content-width)}
+:root{--magic-marquee-gap:1rem;--magic-marquee-content-width:unset;--magic-marquee-transform-target-x:-100%}@keyframes magicMarqueeScrollX{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes magicMarqueeScrollY{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}.magic-marquee{overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.magic-marquee__track{display:flex;justify-content:flex-start;position:relative;width:100%}.magic-marquee__content{animation-direction:var(--magic-marquee-animation-direction,normal);animation-duration:var(--magic-marquee-animation-duration);animation-iteration-count:infinite;animation-name:var(--magic-marquee-animation-name);animation-play-state:var(--magic-marquee-animation-play-state,running);animation-timing-function:linear;backface-visibility:hidden;display:flex;flex-grow:0;flex-shrink:0;gap:var(--magic-marquee-gap);padding-right:var(--magic-marquee-gap);white-space:nowrap;width:var(--magic-marquee-content-width)}
 </style>

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

@@ -1,15 +1,15 @@
-interface Props {
+interface MagicMarqueeProps {
     direction?: 'reverse' | 'normal';
     speed?: number;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicMarqueeProps>, {
     direction: string;
     speed: number;
 }>, {
     playing: import("vue").Ref<boolean>;
     play: () => void;
     pause: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicMarqueeProps>, {
     direction: string;
     speed: number;
 }>>>, {

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

@@ -0,0 +1,4 @@
+import { MagicMenuInstanceId, MagicMenuItemActive, MagicMenuParentTree } from './src/symbols/index.js';
+import type { Plugin } from 'vue';
+declare const MagicMenuPlugin: Plugin;
+export { MagicMenuPlugin, MagicMenuInstanceId, MagicMenuItemActive, MagicMenuParentTree, };

package/dist/plugins/MagicMenu/index.mjs

@@ -0,0 +1,27 @@
+import MagicMenuFloat from "./src/components/MagicMenuFloat.vue";
+import MagicMenuContent from "./src/components/MagicMenuContent.vue";
+import MagicMenuItem from "./src/components/MagicMenuItem.vue";
+import MagicMenuProvider from "./src/components/MagicMenuProvider.vue";
+import MagicMenuTrigger from "./src/components/MagicMenuTrigger.vue";
+import MagicMenuView from "./src/components/MagicMenuView.vue";
+import {
+  MagicMenuInstanceId,
+  MagicMenuItemActive,
+  MagicMenuParentTree
+} from "./src/symbols/index.mjs";
+const MagicMenuPlugin = {
+  install: (app) => {
+    app.component("MagicMenuFloat", MagicMenuFloat);
+    app.component("MagicMenuContent", MagicMenuContent);
+    app.component("MagicMenuItem", MagicMenuItem);
+    app.component("MagicMenuProvider", MagicMenuProvider);
+    app.component("MagicMenuTrigger", MagicMenuTrigger);
+    app.component("MagicMenuView", MagicMenuView);
+  }
+};
+export {
+  MagicMenuPlugin,
+  MagicMenuInstanceId,
+  MagicMenuItemActive,
+  MagicMenuParentTree
+};

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

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

package/dist/plugins/MagicMenu/nuxt.mjs

@@ -0,0 +1,14 @@
+import { defineNuxtModule, createResolver, addComponentsDir } from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicMenu"
+  },
+  setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("src/components"),
+      global: true,
+      pathPrefix: false
+    });
+  }
+});

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

@@ -0,0 +1,140 @@
+<template>
+  <teleport to="body" v-if="wrapperActive">
+    <transition
+      :name="mappedTransition"
+      :on-before-enter="onBeforeEnter"
+      :on-enter="onEnter"
+      :on-after-enter="onAfterEnter"
+      :on-before-leave="onBeforeLeave"
+      :on-leave="onLeave"
+      :on-after-leave="onAfterLeave"
+    >
+      <div
+        class="magic-menu-content"
+        :data-id="`${viewId}-content`"
+        v-if="innerActive"
+      >
+        <magic-menu-float :placement="placement" :arrow="arrow">
+          <template #arrow v-if="$slots.arrow && arrow">
+            <slot name="arrow" />
+          </template>
+          <template #default>
+            <div class="magic-menu-content__inner" ref="contentRef">
+              <slot />
+            </div>
+          </template>
+        </magic-menu-float>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, inject, provide, nextTick, watch, computed } from 'vue'
+import type { Placement } from '@floating-ui/vue'
+import { useMenuView } from '../composables/private/useMenuView'
+import {
+  MagicMenuInstanceId,
+  MagicMenuViewId,
+  MagicMenuContentId,
+} from '../symbols'
+
+import '@maas/vue-equipment/utils/css/animations/fade-in.css'
+import '@maas/vue-equipment/utils/css/animations/fade-out.css'
+import { useMenuState } from '../composables/private/useMenuState'
+import { useMenuCallback } from '../composables/private/useMenuCallback'
+import { useMenuDOM } from '../composables/private/useMenuDOM'
+
+interface MagicMenuContentProps {
+  placement?: Placement
+  arrow?: boolean
+}
+
+defineProps<MagicMenuContentProps>()
+
+const contentRef = ref<HTMLElement | undefined>(undefined)
+
+const instanceId = inject(MagicMenuInstanceId, undefined)
+const viewId = inject(MagicMenuViewId, undefined)
+
+if (!instanceId) {
+  throw new Error('MagicMenuContent must be nested inside MagicMenuProvider')
+}
+
+if (!viewId) {
+  throw new Error('MagicMenuContent must be nested inside MagicMenuView')
+}
+
+const { getView } = useMenuView(instanceId)
+const view = getView(viewId)
+
+const { initializeState } = useMenuState(instanceId)
+const state = initializeState()
+
+const mappedTransition = computed(() => {
+  switch (true) {
+    case !!view?.parent.item:
+      return state.options.transition?.nested
+    case state.active:
+      return state.options.transition?.initial
+    case !state.active:
+      return state.options.transition?.final
+    default:
+      return ''
+  }
+})
+
+const { lockScroll, unlockScroll } = useMenuDOM()
+const {
+  onBeforeEnter,
+  onEnter,
+  onAfterEnter,
+  onBeforeLeave,
+  onLeave,
+  onAfterLeave,
+} = useMenuCallback({
+  state,
+  instanceId,
+  viewId,
+  lockScroll,
+  unlockScroll,
+})
+
+// Split isActive into two values to animate content smoothly
+const innerActive = ref(false)
+const wrapperActive = ref(false)
+
+// Handle state
+async function onOpen() {
+  wrapperActive.value = true
+  await nextTick()
+  innerActive.value = true
+  await nextTick()
+  if (view) {
+    view.children.content = contentRef.value
+  }
+}
+
+async function onClose() {
+  innerActive.value = false
+  await nextTick()
+  wrapperActive.value = false
+}
+
+watch(
+  () => view?.active,
+  async (value) => {
+    if (value) {
+      await onOpen()
+    } else {
+      onClose()
+    }
+  }
+)
+
+provide(MagicMenuContentId, `${viewId}-content`)
+</script>
+
+<style>
+.magic-menu-content{-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-menu-content__inner{border:0;padding:0}.magic-menu-content__initial-enter-active{animation:fade-in 50ms ease}.magic-menu-content__final-leave-active{animation:fade-out .15s ease}.magic-menu-content__nested-enter-active{animation:fade-in .1s ease}
+</style>

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

@@ -0,0 +1,26 @@
+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;
+}
+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;
+    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/MagicMenuFloat.vue

@@ -0,0 +1,169 @@
+<template>
+  <div
+    class="magic-menu-float"
+    ref="elRef"
+    :style="floatingStyles"
+    :class="placementClasses"
+  >
+    <div
+      v-if="hasArrow"
+      ref="arrowRef"
+      class="magic-menu-float__arrow"
+      :style="arrowStyles"
+    >
+      <slot name="arrow">
+        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+          <polygon :points="polygonPoints" fill="currentColor" />
+        </svg>
+      </slot>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, inject } from 'vue'
+import {
+  useFloating,
+  autoUpdate,
+  flip,
+  shift,
+  limitShift,
+  arrow,
+  type Placement,
+} from '@floating-ui/vue'
+import { MagicMenuInstanceId, MagicMenuViewId } from '../symbols'
+import { useMenuView } from '../composables/private/useMenuView'
+import { useMenuState } from '../composables/private/useMenuState'
+
+interface MagicMenuFloatProps {
+  placement?: Placement
+  arrow?: boolean
+}
+
+const props = defineProps<MagicMenuFloatProps>()
+
+const elRef = ref<HTMLElement | undefined>(undefined)
+const arrowRef = ref<HTMLElement | undefined>(undefined)
+
+const instanceId = inject(MagicMenuInstanceId, undefined)
+const viewId = inject(MagicMenuViewId, undefined)
+
+const { initializeState } = useMenuState(instanceId ?? '')
+const state = initializeState()
+
+const { getView } = useMenuView(instanceId ?? '')
+const view = getView(viewId ?? '')
+
+const mappedPlacement = computed(() => {
+  if (props.placement) {
+    return props.placement
+  }
+
+  switch (state.options.mode) {
+    case 'menubar':
+      return !view?.parent.item ? 'bottom-start' : 'right-start'
+    case 'dropdown':
+      return !view?.parent.item ? 'bottom' : 'right-start'
+    case 'context':
+      return 'right-start'
+  }
+})
+
+const hasArrow = computed(
+  () => props.arrow || (state.options.mode === 'dropdown' && !view?.parent.item)
+)
+
+const mappedMiddleware = computed(() => {
+  const middleware = [flip()]
+
+  if (view?.parent.item) {
+    middleware.push(shift({ crossAxis: true, limiter: limitShift() }))
+  }
+
+  if (hasArrow.value) {
+    middleware.push(arrow({ element: arrowRef }))
+  }
+
+  return middleware
+})
+
+const referenceEl = computed(() => {
+  if (view?.click) {
+    return {
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: view.click!.x,
+          y: view.click!.y,
+          top: view.click!.y,
+          left: view.click!.x,
+          right: view.click!.x,
+          bottom: view.click!.y,
+        }
+      },
+    }
+  } else {
+    return view?.children?.trigger
+  }
+})
+
+const { floatingStyles, placement, middlewareData } = useFloating(
+  referenceEl,
+  elRef,
+  {
+    placement: mappedPlacement,
+    whileElementsMounted: autoUpdate,
+    middleware: mappedMiddleware,
+  }
+)
+
+const arrowStyles = computed(() => {
+  if (!hasArrow.value) {
+    return {}
+  }
+
+  let translate = 'translate3d('
+  ;(translate +=
+    middlewareData.value.arrow?.x != null
+      ? `${middlewareData.value.arrow.x}px`
+      : '0'),
+    (translate += ', ')
+  ;(translate +=
+    middlewareData.value.arrow?.y != null
+      ? `${middlewareData.value.arrow.y}px`
+      : '0'),
+    (translate += ', 0)')
+
+  return {
+    transform: translate,
+  }
+})
+
+const placementClasses = computed(() => {
+  return placement.value
+    .split('-')
+    .map((value) => `-${value}`)
+    .join(' ')
+})
+
+const polygonPoints = computed(() => {
+  const position = placement.value.split('-')[0]
+
+  switch (position) {
+    case 'bottom':
+      return '50,50 100,100 0,100'
+    case 'top':
+      return '50,50 100,0 0,0'
+    case 'right':
+      return '50,50 100,100 100,0'
+    case 'left':
+      return '50,50 0,100 0,0'
+  }
+})
+</script>
+
+<style>
+.magic-menu-float{display:flex;z-index:var(--magic-menu-float-z-index,999)}.magic-menu-float.-top{flex-direction:column-reverse}.magic-menu-float.-bottom{flex-direction:column}.magic-menu-float.-left{flex-direction:row-reverse}.magic-menu-float.-right{flex-direction:row}.magic-menu-float__arrow{color:var(--magic-menu-float-arrow-color,inherit);height:var(--magic-menu-float-arrow-height,.75rem);width:var(--magic-menu-float-arrow-width,.75rem)}.magic-menu-float__arrow svg{height:100%;width:100%}
+</style>

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

@@ -0,0 +1,24 @@
+import { type Placement } from '@floating-ui/vue';
+interface MagicMenuFloatProps {
+    placement?: Placement;
+    arrow?: boolean;
+}
+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;
+    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/MagicMenuItem.vue

@@ -0,0 +1,137 @@
+<template>
+  <div
+    class="magic-menu-item"
+    ref="elRef"
+    :id="mappedId"
+    :class="{ '-active': item.active, '-disabled': disabled }"
+    @mouseenter="guardedSelect"
+    @mousemove="guardedSelect"
+    @touchstart.passive="guardedSelect"
+    @mouseleave="guardedUnselect"
+    @click="onClick"
+  >
+    <slot :is-active="item.active" :is-disabled="disabled" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, provide, onBeforeUnmount, watch } from 'vue'
+import { uuid } from '@maas/vue-equipment/utils'
+import { useMenuItem } from '../composables/private/useMenuItem'
+import { useMenuState } from '../composables/private/useMenuState'
+import { useMenuView } from '../composables/private/useMenuView'
+import {
+  MagicMenuInstanceId,
+  MagicMenuViewId,
+  MagicMenuContentId,
+  MagicMenuItemId,
+  MagicMenuItemActive,
+} from '../symbols'
+
+interface MagicMenuItemProps {
+  id?: string
+  disabled?: boolean
+}
+
+const props = defineProps<MagicMenuItemProps>()
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+
+const instanceId = inject(MagicMenuInstanceId, undefined)
+const viewId = inject(MagicMenuViewId, undefined)
+const contentId = inject(MagicMenuContentId, undefined)
+
+if (!instanceId) {
+  throw new Error('MagicMenuItem must be nested inside MagicMenuProvider')
+}
+
+if (!viewId) {
+  throw new Error('MagicMenuItem must be nested inside MagicMenuView')
+}
+
+if (!contentId) {
+  throw new Error('MagicMenuItem must be nested inside MagicMenuContent')
+}
+
+const mappedId = computed(() => props.id ?? `magic-menu-item-${uuid()}`)
+
+// Register item
+const { initializeItem, deleteItem, selectItem, unselectItem } = useMenuItem({
+  instanceId,
+  viewId,
+})
+
+// Guarded select
+// Check for mode and active state
+const { initializeState } = useMenuState(instanceId)
+const state = initializeState()
+const item = initializeItem({
+  id: mappedId.value,
+  disabled: props.disabled ?? false,
+})
+
+function guardedSelect() {
+  if (
+    state.input.type === 'pointer' &&
+    !state.input.disabled.includes('pointer') &&
+    !item.active &&
+    !item.disabled
+  ) {
+    selectItem(mappedId.value)
+  }
+}
+
+// Guarded unselect
+// Check for active nested views
+const { getNestedView, unselectAllViews } = useMenuView(instanceId)
+const nestedView = computed(() => getNestedView(mappedId.value))
+
+function guardedUnselect() {
+  // If there is no nested active view, unselect the item
+  if (!nestedView.value || !nestedView.value.active) {
+    unselectItem(mappedId.value)
+  } else {
+    // If there is a nested active view,
+    // unselect the item once it is closed
+    watch(
+      () => nestedView.value?.active,
+      (value) => {
+        if (!value) {
+          unselectItem(mappedId.value)
+        }
+      },
+      { once: true }
+    )
+  }
+}
+
+function onClick(event: MouseEvent) {
+  emit('click', event)
+
+  state.input.type = 'pointer'
+  state.input.disabled = []
+
+  if (!item.disabled && !item.active) {
+    selectItem(mappedId.value)
+  }
+
+  if (!nestedView.value) {
+    state.active = false
+    unselectAllViews()
+  }
+}
+
+// Pass id and active state to children
+provide(MagicMenuItemId, mappedId.value)
+provide(MagicMenuItemActive, item.active)
+
+// Lifecycle
+onBeforeUnmount(() => {
+  deleteItem(mappedId.value)
+})
+</script>
+
+<style>
+.magic-menu-item{cursor:var(--magic-menu-item-cursor,default)}.magic-menu-item.-disabled{cursor:var(--magic-menu-item-cursor-disabled,not-allowed)}.magic-menu-item.-disabled>*{pointer-events:none}
+</style>

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

@@ -0,0 +1,29 @@
+interface MagicMenuItemProps {
+    id?: string;
+    disabled?: boolean;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuItemProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuItemProps>>> & {
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}, {}, {}>, {
+    default?(_: {
+        isActive: boolean;
+        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;
+    };
+};