@maas/vue-equipment 0.40.0 → 1.0.0-beta.10

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

@@ -1,93 +1,94 @@
-<template>
-  <primitive
-    :class="[
-      'magic-menu-remote',
-      { '-active': channel?.active, '-disabled': disabled },
-    ]"
-    :data-id="`${channelId}-remote`"
-    :as-child="asChild"
-    @click="onClick"
-    @mouseenter="onMouseenter"
-  >
-    <slot :channel-active="channel?.active" :remote-disabled="disabled" />
-  </primitive>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, watch } from 'vue'
-import { Primitive } from '@maas/vue-primitive'
-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[]
-  asChild?: boolean
-}
-
-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 { initializeChannel, deleteChannel } = useMenuChannel({
-  instanceId,
-  viewId,
-})
-
-const { onClick, onMouseenter } = useMenuRemote({
-  viewId,
-  instanceId,
-  mappedChannelId,
-  mappedTrigger,
-})
-
-let channel = initializeChannel({ id: mappedChannelId.value })
-
-watch(
-  () => view?.active,
-  (value) => {
-    // Reset if parent view is inactive
-    if (!value) {
-      deleteChannel(mappedChannelId.value)
-      channel = initializeChannel({ id: mappedChannelId.value })
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { computed, inject, watch } from "vue";
+import { Primitive } from "@maas/vue-primitive";
+import { useMenuView } from "../composables/private/useMenuView";
+import { useMenuChannel } from "../composables/private/useMenuChannel";
+import { MagicMenuInstanceId, MagicMenuViewId } from "../symbols";
+import { useMenuRemote } from "../composables/private/useMenuRemote";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicMenuRemote",
+  props: {
+    channelId: { type: String, required: true },
+    viewId: { type: String, required: false },
+    instanceId: { type: String, required: false },
+    disabled: { type: Boolean, required: false },
+    trigger: { type: Array, required: false },
+    asChild: { type: Boolean, required: false }
+  },
+  setup(__props) {
+    const injectedInstanceId = inject(MagicMenuInstanceId, __props.instanceId);
+    const injectedViewId = inject(MagicMenuViewId, __props.viewId);
+    const mappedInstanceId = computed(() => __props.instanceId ?? injectedInstanceId);
+    const mappedViewId = computed(() => __props.viewId ?? injectedViewId);
+    if (!mappedInstanceId.value) {
+      throw new Error(
+        "MagicMenuRemote must be nested inside MagicMenuProvider or an instanceId must be provided"
+      );
+    }
+    if (!mappedViewId.value) {
+      throw new Error(
+        "MagicMenuRemote 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(() => __props.trigger ?? ["mouseenter"]);
+    const { getView } = useMenuView(mappedInstanceId.value);
+    const view = getView(mappedViewId.value);
+    const { initializeChannel, deleteChannel } = useMenuChannel({
+      instanceId: mappedInstanceId.value,
+      viewId: mappedViewId.value
+    });
+    const { onClick, onMouseenter } = useMenuRemote({
+      instanceId: mappedInstanceId.value,
+      viewId: mappedViewId.value,
+      mappedChannelId,
+      mappedTrigger
+    });
+    let channel = initializeChannel({ id: mappedChannelId.value });
+    watch(
+      () => view?.active,
+      (value) => {
+        if (!value) {
+          deleteChannel(mappedChannelId.value);
+          channel = initializeChannel({ id: mappedChannelId.value });
+        }
+      }
+    );
+    return (_ctx, _cache) => {
+      return _openBlock(), _createBlock(_unref(Primitive), {
+        class: "magic-menu-remote",
+        "data-id": `${_ctx.channelId}-remote`,
+        "data-disabled": _ctx.disabled,
+        "data-active": _unref(channel)?.active,
+        "as-child": _ctx.asChild,
+        onClick: _unref(onClick),
+        onMouseenter: _unref(onMouseenter)
+      }, {
+        default: _withCtx(() => [
+          _renderSlot(_ctx.$slots, "default", {
+            channelActive: _unref(channel)?.active,
+            remoteDisabled: _ctx.disabled
+          })
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["data-id", "data-disabled", "data-active", "as-child", "onClick", "onMouseenter"]);
+    };
   }
-)
+});
 </script>
 
 <style>
-.magic-menu-remote{cursor:var(--magic-menu-remote-cursor,pointer)}.magic-menu-remote.-disabled{pointer-events:none}
+.magic-menu-remote {
+  cursor: var(--magic-menu-remote-cursor, pointer);
+}
+
+.magic-menu-remote[data-disabled='true'] {
+  pointer-events: none;
+}
 </style>

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

@@ -1,4 +1,5 @@
-import type { Interaction } from '../types';
+import { Primitive } from '@maas/vue-primitive';
+import type { Interaction } from '../types/index.js';
 interface MagicMenuRemoteProps {
     channelId: string;
     viewId?: string;
@@ -7,22 +8,26 @@ interface MagicMenuRemoteProps {
     trigger?: Interaction[];
     asChild?: boolean;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            channelActive: boolean;
-            remoteDisabled: boolean | undefined;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
+declare const onClick: () => void, onMouseenter: () => void;
+declare let channel: import("../types").MenuChannel;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_11: {
+    channelActive: boolean;
+    remoteDisabled: boolean;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_11) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicMenuRemoteProps, {
+    Primitive: typeof Primitive;
+    onClick: typeof onClick;
+    onMouseenter: typeof onMouseenter;
+    channel: typeof channel;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuRemoteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<MagicMenuRemoteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuRemoteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,121 +1,130 @@
-<template>
-  <primitive
-    ref="elRef"
-    :class="[
-      'magic-menu-trigger',
-      { '-active': view?.active, '-disabled': mappedDisabled },
-    ]"
-    :data-id="`${viewId}-trigger`"
-    :tabindex="mappedTabindex"
-    :as-child="asChild"
-    @click="onClick"
-    @contextmenu="onClick"
-    @mouseenter="onMouseenter"
-  >
-    <slot :view-active="view?.active" :trigger-disabled="mappedDisabled" />
-  </primitive>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, ref, toValue, watch } from 'vue'
-import { Primitive } from '@maas/vue-primitive'
-import { useMenuState } from '../composables/private/useMenuState'
-import { useMenuView } from '../composables/private/useMenuView'
-import { useMenuItem } from '../composables/private/useMenuItem'
-import { useMenuTrigger } from '../composables/private/useMenuTrigger'
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { computed, inject, useTemplateRef, toValue, watch } from "vue";
+import { Primitive } from "@maas/vue-primitive";
+import { useMenuState } from "../composables/private/useMenuState";
+import { useMenuView } from "../composables/private/useMenuView";
+import { useMenuItem } from "../composables/private/useMenuItem";
+import { useMenuTrigger } from "../composables/private/useMenuTrigger";
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,
-  MagicMenuItemId,
-} from '../symbols'
-
-import type { Interaction } from '../types'
-import { onKeyStroke } from '@vueuse/core'
-
-interface MagicMenuTriggerProps {
-  disabled?: boolean
-  trigger?: Interaction[]
-  asChild?: boolean
-}
-
-const props = defineProps<MagicMenuTriggerProps>()
-const elRef = ref<InstanceType<typeof Primitive> | undefined>(undefined)
-
-const instanceId = inject(MagicMenuInstanceId, undefined)
-const viewId = inject(MagicMenuViewId, undefined)
-const itemId = inject(MagicMenuItemId, undefined)
-
-if (!instanceId) {
-  throw new Error('MagicMenuTrigger must be nested inside MagicMenuProvider')
-}
-
-if (!viewId) {
-  throw new Error('MagicMenuTrigger must be nested inside MagicMenuView')
-}
-
-const { getView, getRelativeViewIndex } = useMenuView(instanceId)
-const view = getView(viewId)
-const viewIndex = getRelativeViewIndex(viewId)
-
-const { initializeState } = useMenuState(instanceId)
-const state = initializeState()
-
-const { getItem } = useMenuItem({ instanceId, viewId })
-const item = getItem(itemId ?? '')
-
-const mappedDisabled = computed(() => props.disabled ?? item?.disabled ?? false)
-
-const mappedTrigger = computed<Interaction[]>(() => {
-  if (props.trigger?.length) {
-    return props.trigger
-  }
-
-  switch (state.options.mode) {
-    case 'menubar':
-      return view?.parent.item
-        ? ['mouseenter', 'click']
-        : state.active
-        ? ['mouseenter', 'click']
-        : ['click']
-    case 'dropdown':
-      return view?.parent.item ? ['mouseenter', 'click'] : ['click']
-    case 'context':
-      return view?.parent.item ? ['mouseenter', 'click'] : ['right-click']
-    case 'navigation':
-      return ['mouseenter']
-  }
-})
-
-const mappedTabindex = computed(() => {
-  if (viewIndex === 0 && state.options.mode !== 'context' && !itemId) {
-    return 0
-  } else {
-    return undefined
-  }
-})
-
-const { onMouseenter, onClick, onEnter } = useMenuTrigger({
-  instanceId,
-  viewId,
-  itemId,
-  mappedDisabled,
-  mappedTrigger,
-  elRef,
-})
-
-watch(
-  () => view?.active,
-  async (value) => {
-    if (value) {
-      await new Promise((resolve) => requestAnimationFrame(resolve))
-      toValue(elRef)?.$el?.blur()
+  MagicMenuItemId
+} from "../symbols";
+import { onKeyStroke } from "@vueuse/core";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicMenuTrigger",
+  props: {
+    instanceId: { type: String, required: false },
+    viewId: { type: String, required: false },
+    disabled: { type: Boolean, required: false },
+    trigger: { type: Array, required: false },
+    asChild: { type: Boolean, required: false }
+  },
+  setup(__props) {
+    const elRef = useTemplateRef("el");
+    const injectedInstanceId = inject(MagicMenuInstanceId, void 0);
+    const injectedViewId = inject(MagicMenuViewId, void 0);
+    const itemId = inject(MagicMenuItemId, void 0);
+    const mappedInstanceId = computed(() => __props.instanceId ?? injectedInstanceId);
+    const mappedViewId = computed(() => __props.viewId ?? injectedViewId);
+    if (!mappedInstanceId.value) {
+      throw new Error(
+        "MagicMenuRemote must be nested inside MagicMenuProvider or an instanceId must be provided"
+      );
+    }
+    if (!mappedViewId.value) {
+      throw new Error(
+        "MagicMenuTrigger must be nested inside MagicMenuView or a viewId must be provided"
+      );
     }
+    const { getView, getRelativeViewIndex } = useMenuView(mappedInstanceId.value);
+    const view = getView(mappedViewId.value);
+    const viewIndex = getRelativeViewIndex(mappedViewId.value);
+    const { initializeState } = useMenuState(mappedInstanceId.value);
+    const state = initializeState();
+    const { getItem } = useMenuItem({
+      instanceId: mappedInstanceId.value,
+      viewId: mappedViewId.value
+    });
+    const item = getItem(itemId ?? "");
+    const mappedDisabled = computed(() => __props.disabled ?? item?.disabled ?? false);
+    const mappedTrigger = computed(() => {
+      if (__props.trigger?.length) {
+        return __props.trigger;
+      }
+      switch (state.options.mode) {
+        case "menubar":
+          return view?.parent.item ? ["mouseenter", "click"] : state.active ? ["mouseenter", "click"] : ["click"];
+        case "dropdown":
+          return view?.parent.item ? ["mouseenter", "click"] : ["click"];
+        case "context":
+          return view?.parent.item ? ["mouseenter", "click"] : ["right-click"];
+        case "navigation":
+          return ["mouseenter"];
+        default:
+          return [];
+      }
+    });
+    const mappedTabindex = computed(() => {
+      if (viewIndex === 0 && state.options.mode !== "context" && !itemId) {
+        return 0;
+      } else {
+        return void 0;
+      }
+    });
+    const { onMouseenter, onClick, onEnter } = useMenuTrigger({
+      instanceId: mappedInstanceId.value,
+      viewId: mappedViewId.value,
+      itemId,
+      mappedDisabled,
+      mappedTrigger,
+      elRef
+    });
+    watch(
+      () => view?.active,
+      async (value) => {
+        if (value) {
+          await new Promise((resolve) => requestAnimationFrame(resolve));
+          toValue(elRef)?.$el?.blur();
+        }
+      }
+    );
+    onKeyStroke("Enter", onEnter);
+    return (_ctx, _cache) => {
+      return _openBlock(), _createBlock(_unref(Primitive), {
+        ref: "el",
+        "data-id": `${mappedViewId.value}-trigger`,
+        "data-active": _unref(view)?.active,
+        "data-disabled": mappedDisabled.value,
+        tabindex: mappedTabindex.value,
+        "as-child": _ctx.asChild,
+        class: "magic-menu-trigger",
+        onClick: _unref(onClick),
+        onContextmenu: _unref(onClick),
+        onMouseenter: _unref(onMouseenter)
+      }, {
+        default: _withCtx(() => [
+          _renderSlot(_ctx.$slots, "default", {
+            viewActive: _unref(view)?.active,
+            triggerDisabled: mappedDisabled.value
+          })
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["data-id", "data-active", "data-disabled", "tabindex", "as-child", "onClick", "onContextmenu", "onMouseenter"]);
+    };
   }
-)
-
-onKeyStroke('Enter', onEnter)
+});
 </script>
 
 <style>
-.magic-menu-trigger{cursor:var(--magic-menu-trigger-cursor,pointer)}.magic-menu-trigger.-disabled{pointer-events:none}
+.magic-menu-trigger {
+  cursor: var(--magic-menu-trigger-cursor, pointer);
+}
+
+.magic-menu-trigger[data-disabled='true'] {
+  pointer-events: none;
+}
 </style>

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

@@ -1,62 +1,38 @@
-import type { Interaction } from '../types';
+import { Primitive } from '@maas/vue-primitive';
+import type { Interaction } from '../types/index.js';
 interface MagicMenuTriggerProps {
+    instanceId?: string;
+    viewId?: string;
     disabled?: boolean;
     trigger?: Interaction[];
     asChild?: boolean;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            viewActive: boolean | undefined;
-            triggerDisabled: boolean;
-        }): any;
-    };
-    refs: {
-        elRef: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, {}, {}, {}, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }> | null;
-    };
-    rootEl: any;
+declare const mappedViewId: import("vue").ComputedRef<string | undefined>;
+declare const view: import("../types").MenuView | undefined;
+declare const mappedDisabled: import("vue").ComputedRef<boolean>;
+declare const mappedTabindex: import("vue").ComputedRef<0 | undefined>;
+declare const onMouseenter: () => void, onClick: (e: MouseEvent) => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_13: {
+    viewActive: boolean | undefined;
+    triggerDisabled: boolean;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_13) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicMenuTriggerProps, {
+    Primitive: typeof Primitive;
+    mappedViewId: typeof mappedViewId;
+    view: typeof view;
+    mappedDisabled: typeof mappedDisabled;
+    mappedTabindex: typeof mappedTabindex;
+    onMouseenter: typeof onMouseenter;
+    onClick: typeof onClick;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<MagicMenuTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };