@maas/vue-equipment 1.0.0-beta.4 → 1.0.0-beta.40

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

@@ -1,96 +1,79 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, normalizeClass as _normalizeClass, withCtx as _withCtx, createVNode as _createVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+<template>
+  <primitive
+    class="magic-menu-remote"
+    :data-id="`${channelId}-remote`"
+    :data-disabled="disabled"
+    :data-active="channel?.active"
+    :as-child="asChild"
+    @click="onClick"
+    @mouseenter="onMouseenter"
+  >
+    <slot :channel-active="channel?.active" :remote-disabled="disabled" />
+  </primitive>
+</template>
+
+<script setup>
 import { computed, inject, watch } from "vue";
 import { Primitive } from "@maas/vue-primitive";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 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 mappedInstanceId = inject(MagicMenuInstanceId, __props.instanceId);
-    const mappedViewId = inject(MagicMenuViewId, __props.viewId);
-    if (!mappedInstanceId) {
-      throw new Error(
-        "MagicMenuRemote must be nested inside MagicMenuProvider or an instanceId must be provided"
-      );
-    }
-    if (!mappedViewId) {
-      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 { disabled, channelId, instanceId, viewId, trigger } = defineProps({
+  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 }
+});
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
+const injectedInstanceId = inject(MagicMenuInstanceId, instanceId);
+const injectedViewId = inject(MagicMenuViewId, viewId);
+const mappedInstanceId = computed(() => instanceId ?? injectedInstanceId);
+const mappedViewId = computed(() => viewId ?? injectedViewId);
+magicError.assert(mappedInstanceId.value, {
+  message: "MagicMenuRemote must be nested inside MagicMenuProvider or an instanceId must be provided",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(mappedViewId.value, {
+  message: "MagicMenuRemote must be nested inside MagicMenuView or a viewId must be provided",
+  errorCode: "missing_view_id"
+});
+magicError.assert(channelId, {
+  message: "MagicMenuRemote requires a channelId",
+  errorCode: "id_required"
+});
+const mappedChannelId = computed(() => `magic-menu-channel-${channelId}`);
+const mappedTrigger = computed(() => 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 });
     }
-    const mappedChannelId = computed(() => `magic-menu-channel-${__props.channelId}`);
-    const mappedTrigger = computed(() => __props.trigger ?? ["mouseenter"]);
-    const { getView } = useMenuView(mappedInstanceId);
-    const view = getView(mappedViewId);
-    const { initializeChannel, deleteChannel } = useMenuChannel({
-      instanceId: mappedInstanceId,
-      viewId: mappedViewId
-    });
-    const { onClick, onMouseenter } = useMenuRemote({
-      instanceId: mappedInstanceId,
-      viewId: mappedViewId,
-      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) => {
-      const _component_magic_menu_trigger = _resolveComponent("magic-menu-trigger");
-      return _openBlock(), _createBlock(_component_magic_menu_trigger, {
-        "view-id": _unref(mappedViewId),
-        disabled: _ctx.disabled,
-        trigger: _ctx.trigger
-      }, {
-        default: _withCtx(() => [
-          _createVNode(_unref(Primitive), {
-            class: _normalizeClass([
-              "magic-menu-remote",
-              { "-active": _unref(channel)?.active, "-disabled": _ctx.disabled }
-            ]),
-            "data-id": `${_ctx.channelId}-remote`,
-            "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, ["class", "data-id", "as-child", "onClick", "onMouseenter"])
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["view-id", "disabled", "trigger"]);
-    };
   }
-});
+);
 </script>
 
 <style>
@@ -98,7 +81,7 @@ export default /* @__PURE__ */ _defineComponent({
   cursor: var(--magic-menu-remote-cursor, pointer);
 }
 
-.magic-menu-remote.-disabled {
+.magic-menu-remote[data-disabled='true'] {
   pointer-events: none;
 }
 </style>

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

@@ -7,31 +7,18 @@ interface MagicMenuRemoteProps {
     trigger?: Interaction[];
     asChild?: boolean;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            channelActive: boolean;
-            remoteDisabled: boolean | undefined;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
+declare var __VLS_11: {
+    channelActive: boolean;
+    remoteDisabled: boolean;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuRemoteProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuRemoteProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-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;
-    };
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -0,0 +1,24 @@
+import type { Interaction } from '../types/index.js';
+interface MagicMenuTriggerProps {
+    instanceId?: string;
+    viewId?: string;
+    disabled?: boolean;
+    trigger?: Interaction[];
+    asChild?: boolean;
+}
+declare var __VLS_13: {
+    viewActive: boolean | undefined;
+    triggerDisabled: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,8 +1,26 @@
-<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, ref, toValue, watch } from "vue";
+<template>
+  <primitive
+    ref="el"
+    :data-id="`${mappedViewId}-trigger`"
+    :data-active="view?.active"
+    :data-disabled="mappedDisabled"
+    :tabindex="mappedTabindex"
+    :as-child="asChild"
+    class="magic-menu-trigger"
+    @click="onClick"
+    @contextmenu="onClick"
+    @mouseenter="onMouseenter"
+  >
+    <slot :view-active="view?.active" :trigger-disabled="mappedDisabled" />
+  </primitive>
+</template>
+
+<script setup>
+import { computed, inject, useTemplateRef, toValue, watch } from "vue";
 import { Primitive } from "@maas/vue-primitive";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuView } from "../composables/private/useMenuView";
 import { useMenuItem } from "../composables/private/useMenuItem";
@@ -13,100 +31,84 @@ import {
   MagicMenuItemId
 } from "../symbols";
 import { onKeyStroke } from "@vueuse/core";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicMenuTrigger",
-  props: {
-    disabled: { type: Boolean, required: false },
-    trigger: { type: Array, required: false },
-    asChild: { type: Boolean, required: false }
-  },
-  setup(__props) {
-    const elRef = ref(void 0);
-    const instanceId = inject(MagicMenuInstanceId, void 0);
-    const viewId = inject(MagicMenuViewId, void 0);
-    const itemId = inject(MagicMenuItemId, void 0);
-    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(() => {
-      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,
-      viewId,
-      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_key: "elRef",
-        ref: elRef,
-        "data-id": `${_unref(viewId)}-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"]);
-    };
+const { instanceId, viewId, disabled, trigger } = defineProps({
+  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 }
+});
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
+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(() => instanceId ?? injectedInstanceId);
+const mappedViewId = computed(() => viewId ?? injectedViewId);
+magicError.assert(mappedInstanceId.value, {
+  message: "MagicMenuTrigger must be nested inside MagicMenuProvider or an instanceId must be provided",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(mappedViewId.value, {
+  message: "MagicMenuTrigger must be nested inside MagicMenuView or a viewId must be provided",
+  errorCode: "missing_view_id"
+});
+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(() => disabled ?? item?.disabled ?? false);
+const mappedTrigger = computed(() => {
+  if (trigger?.length) {
+    return 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, onKeypress } = 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", onKeypress);
 </script>
 
 <style>
@@ -114,7 +116,7 @@ export default /* @__PURE__ */ _defineComponent({
   cursor: var(--magic-menu-trigger-cursor, pointer);
 }
 
-.magic-menu-trigger.-disabled {
+.magic-menu-trigger[data-disabled='true'] {
   pointer-events: none;
 }
 </style>

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

@@ -1,71 +1,23 @@
 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 var __VLS_13: {
+    viewActive: boolean | undefined;
+    triggerDisabled: boolean;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuTriggerProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuTriggerProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-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;
-    };
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -0,0 +1,20 @@
+import type { MenuPlacement } from '../types/index.js';
+interface MagicMenuViewProps {
+    id?: string;
+    placement?: MenuPlacement;
+}
+declare var __VLS_1: {
+    viewActive: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicMenuViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};