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

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

@@ -1,20 +1,27 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue";
-const _hoisted_1 = ["id", "data-disabled", "data-active", "data-pointer-disabled"];
-const _hoisted_2 = {
-  key: 0,
-  class: "magic-menu-item__pointer-guard"
-};
+<template>
+  <div
+    class="magic-menu-item"
+    :data-id="mappedId"
+    :data-disabled="disabled"
+    :data-active="item.active"
+    :data-pointer-disabled="pointerDisabled"
+    @mouseenter="guardedSelect"
+    @mousemove="guardedSelect"
+    @touchstart.passive="guardedSelect"
+    @mouseleave="guardedUnselect"
+    @click="onClick"
+  >
+    <slot :item-active="item.active" :item-disabled="disabled" />
+    <div v-if="pointerDisabled" class="magic-menu-item__pointer-guard" />
+  </div>
+</template>
+
+<script setup>
+import { onKeyStroke } from "@vueuse/core";
+import { computed, inject, provide, onBeforeUnmount, watch, useId } from "vue";
 import {
-  ref,
-  computed,
-  inject,
-  provide,
-  onBeforeUnmount,
-  watch,
-  useId
-} from "vue";
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuItem } from "../composables/private/useMenuItem";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuView } from "../composables/private/useMenuView";
@@ -25,103 +32,87 @@ import {
   MagicMenuItemId,
   MagicMenuItemActive
 } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicMenuItem",
-  props: {
-    id: { type: String, required: false },
-    disabled: { type: Boolean, required: false }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const instanceId = inject(MagicMenuInstanceId, void 0);
-    const viewId = inject(MagicMenuViewId, void 0);
-    const contentId = inject(MagicMenuContentId, void 0);
-    const elRef = ref(void 0);
-    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-${useId()}`);
-    const mappedActive = computed(() => item.active);
-    const { initializeItem, deleteItem, selectItem, unselectItem } = useMenuItem({
-      instanceId,
-      viewId
-    });
-    const { initializeState } = useMenuState(instanceId);
-    const state = initializeState();
-    const item = initializeItem({
-      id: mappedId.value,
-      disabled: __props.disabled ?? false
-    });
-    const pointerDisabled = computed(() => state.input.disabled.includes("pointer"));
-    function guardedSelect() {
-      if (state.input.type === "pointer" && !state.input.disabled.includes("pointer") && !item.active && !item.disabled) {
-        selectItem(mappedId.value);
-      }
-    }
-    const { getNestedView, unselectAllViews } = useMenuView(instanceId);
-    const nestedView = computed(() => getNestedView(mappedId.value));
-    function guardedUnselect() {
-      if (!nestedView.value || !nestedView.value.active) {
-        unselectItem(mappedId.value);
-      } else {
-        watch(
-          () => nestedView.value?.active,
-          (value) => {
-            if (!value) {
-              unselectItem(mappedId.value);
-            }
-          },
-          { once: true }
-        );
-      }
-    }
-    function onClick(event) {
-      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();
-      }
-    }
-    provide(MagicMenuItemId, mappedId.value);
-    provide(MagicMenuItemActive, mappedActive);
-    onBeforeUnmount(() => {
-      deleteItem(mappedId.value);
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", {
-        id: mappedId.value,
-        ref_key: "elRef",
-        ref: elRef,
-        class: "magic-menu-item",
-        "data-disabled": _ctx.disabled,
-        "data-active": _unref(item).active,
-        "data-pointer-disabled": pointerDisabled.value,
-        onMouseenter: guardedSelect,
-        onMousemove: guardedSelect,
-        onTouchstartPassive: guardedSelect,
-        onMouseleave: guardedUnselect,
-        onClick
-      }, [
-        _renderSlot(_ctx.$slots, "default", {
-          itemActive: _unref(item).active,
-          itemDisabled: _ctx.disabled
-        }),
-        pointerDisabled.value ? (_openBlock(), _createElementBlock("div", _hoisted_2)) : _createCommentVNode("v-if", true)
-      ], 40, _hoisted_1);
-    };
+const { id, disabled } = defineProps({
+  id: { type: String, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["click", "enter"]);
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
+const instanceId = inject(MagicMenuInstanceId, void 0);
+const viewId = inject(MagicMenuViewId, void 0);
+const contentId = inject(MagicMenuContentId, void 0);
+magicError.assert(instanceId, {
+  message: "MagicMenuItem must be nested inside MagicMenuProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(viewId, {
+  message: "MagicMenuItem must be nested inside MagicMenuView",
+  errorCode: "missing_view_id"
+});
+magicError.assert(contentId, {
+  message: "MagicMenuItem must be nested inside MagicMenuContent",
+  errorCode: "missing_content_id"
+});
+const mappedId = computed(() => id ?? `magic-menu-item-${useId()}`);
+const mappedActive = computed(() => item.active);
+const { initializeItem, deleteItem, selectItem, unselectItem } = useMenuItem({
+  instanceId,
+  viewId
+});
+const { initializeState } = useMenuState(instanceId);
+const state = initializeState();
+const item = initializeItem({
+  id: mappedId.value,
+  disabled: disabled ?? false
+});
+const pointerDisabled = computed(() => state.input.disabled.includes("pointer"));
+function guardedSelect() {
+  if (state.input.type === "pointer" && !state.input.disabled.includes("pointer") && !item.active && !item.disabled) {
+    selectItem(mappedId.value);
   }
+}
+const { getNestedView, unselectAllViews } = useMenuView(instanceId);
+const nestedView = computed(() => getNestedView(mappedId.value));
+function guardedUnselect() {
+  if (!nestedView.value || !nestedView.value.active) {
+    unselectItem(mappedId.value);
+  } else {
+    watch(
+      () => nestedView.value?.active,
+      (value) => {
+        if (!value) {
+          unselectItem(mappedId.value);
+        }
+      },
+      { once: true }
+    );
+  }
+}
+function onClick(event) {
+  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();
+  }
+}
+function onReturn() {
+  if (!item.disabled && item.active) {
+    emit("enter");
+  }
+}
+provide(MagicMenuItemId, mappedId.value);
+provide(MagicMenuItemActive, mappedActive);
+onKeyStroke("Enter", onReturn);
+onBeforeUnmount(() => {
+  deleteItem(mappedId.value);
 });
 </script>
 

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

@@ -2,37 +2,24 @@ interface MagicMenuItemProps {
     id?: string;
     disabled?: boolean;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            itemActive: boolean;
-            itemDisabled: boolean;
-        }): any;
-    };
-    refs: {
-        elRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
+declare var __VLS_1: {
+    itemActive: boolean;
+    itemDisabled: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuItemProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (event: MouseEvent) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuItemProps>>> & Readonly<{
+declare const __VLS_base: import("vue").DefineComponent<MagicMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+    enter: () => any;
+}, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+    onEnter?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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_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_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -0,0 +1,20 @@
+import { type MaybeRef } from 'vue';
+import type { MagicMenuOptions } from '../types/index.js';
+interface MagicMenuProviderProps {
+    id: MaybeRef<string>;
+    asChild?: boolean;
+    options?: MagicMenuOptions;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicMenuProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuProviderProps> & 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/MagicMenuProvider.vue

@@ -1,7 +1,23 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { renderSlot as _renderSlot, unref as _unref, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
-import { ref, provide, watch, onBeforeUnmount } from "vue";
+<template>
+  <primitive
+    ref="el"
+    :as-child="asChild"
+    :data-id="id"
+    class="magic-menu-provider"
+  >
+    <slot />
+  </primitive>
+</template>
+
+<script setup>
+import {
+  useTemplateRef,
+  shallowRef,
+  provide,
+  watch,
+  toValue,
+  onBeforeUnmount
+} from "vue";
 import { onClickOutside, onKeyStroke, usePointer } from "@vueuse/core";
 import { Primitive } from "@maas/vue-primitive";
 import { defu } from "defu";
@@ -10,86 +26,71 @@ import { useMenuView } from "../composables/private/useMenuView";
 import { useMenuKeyListener } from "../composables/private/useMenuKeyListener";
 import { MagicMenuInstanceId } from "../symbols";
 import { defaultOptions } from "../utils/defaultOptions";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicMenuProvider",
-  props: {
-    id: { type: null, required: true },
-    asChild: { type: Boolean, required: false },
-    options: { type: Object, required: false }
+const { id, options } = defineProps({
+  id: { type: null, required: true },
+  asChild: { type: Boolean, required: false },
+  options: { type: Object, required: false }
+});
+const elRef = useTemplateRef("el");
+const mappedOptions = defu(options, defaultOptions);
+const { initializeState, deleteState } = useMenuState(id);
+const state = initializeState(mappedOptions);
+const lastX = shallowRef(0);
+const lastY = shallowRef(0);
+const { x, y } = usePointer();
+watch(
+  () => state?.input.type,
+  (value) => {
+    if (value === "keyboard") {
+      lastX.value = x.value;
+      lastY.value = y.value;
+    }
+  }
+);
+watch([x, y], ([x2, y2]) => {
+  if (x2 !== lastX.value || y2 !== lastY.value) {
+    if (state) {
+      state.input.type = "pointer";
+    }
+  }
+});
+const {
+  onArrowRight,
+  onArrowLeft,
+  onArrowUp,
+  onArrowDown,
+  onEscape,
+  onReturn,
+  onTab
+} = useMenuKeyListener(id);
+onKeyStroke("ArrowRight", onArrowRight);
+onKeyStroke("ArrowLeft", onArrowLeft);
+onKeyStroke("ArrowDown", onArrowDown);
+onKeyStroke("ArrowUp", onArrowUp);
+onKeyStroke("Escape", onEscape);
+onKeyStroke("Enter", onReturn);
+onKeyStroke("Tab", onTab);
+const { unselectAllViews } = useMenuView(id);
+onClickOutside(
+  elRef,
+  () => {
+    if (state) {
+      state.active = false;
+    }
+    unselectAllViews();
   },
-  setup(__props) {
-    const elRef = ref(void 0);
-    const mappedOptions = defu(__props.options, defaultOptions);
-    const { initializeState, deleteState } = useMenuState(__props.id);
-    const state = initializeState(mappedOptions);
-    const lastX = ref(0);
-    const lastY = ref(0);
-    const { x, y } = usePointer();
-    watch(
-      () => state?.input.type,
-      (value) => {
-        if (value === "keyboard") {
-          lastX.value = x.value;
-          lastY.value = y.value;
-        }
-      }
-    );
-    watch([x, y], ([x2, y2]) => {
-      if (x2 !== lastX.value || y2 !== lastY.value) {
-        if (state) {
-          state.input.type = "pointer";
-        }
-      }
-    });
-    const {
-      onArrowRight,
-      onArrowLeft,
-      onArrowUp,
-      onArrowDown,
-      onEscape,
-      onEnter,
-      onTab
-    } = useMenuKeyListener(__props.id);
-    onKeyStroke("ArrowRight", onArrowRight);
-    onKeyStroke("ArrowLeft", onArrowLeft);
-    onKeyStroke("ArrowDown", onArrowDown);
-    onKeyStroke("ArrowUp", onArrowUp);
-    onKeyStroke("Escape", onEscape);
-    onKeyStroke("Enter", onEnter);
-    onKeyStroke("Tab", onTab);
-    const { unselectAllViews } = useMenuView(__props.id);
-    onClickOutside(
-      elRef,
-      () => {
-        if (state) {
-          state.active = false;
-        }
-        unselectAllViews();
-      },
-      {
-        ignore: [".magic-menu-trigger", ".magic-menu-item", "magic-menu-float"]
-      }
-    );
-    onBeforeUnmount(() => {
-      deleteState();
-    });
-    provide(MagicMenuInstanceId, __props.id);
-    return (_ctx, _cache) => {
-      return _openBlock(), _createBlock(_unref(Primitive), {
-        ref_key: "elRef",
-        ref: elRef,
-        "as-child": _ctx.asChild,
-        class: "magic-menu-provider"
-      }, {
-        default: _withCtx(() => [
-          _renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["as-child"]);
-    };
+  {
+    ignore: [
+      `[data-id='${toValue(id)}'] .magic-menu-trigger`,
+      `[data-id='${toValue(id)}'] .magic-menu-item`,
+      `.magic-menu-float`
+    ]
   }
+);
+onBeforeUnmount(() => {
+  deleteState();
 });
+provide(MagicMenuInstanceId, id);
 </script>
 
 <style>

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

@@ -5,65 +5,15 @@ interface MagicMenuProviderProps {
     asChild?: boolean;
     options?: MagicMenuOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): 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_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuProviderProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuProviderProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_base: import("vue").DefineComponent<MagicMenuProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuProviderProps> & 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_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_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -0,0 +1,25 @@
+import type { Interaction } from '../types/index.js';
+interface MagicMenuRemoteProps {
+    channelId: string;
+    viewId?: string;
+    instanceId?: string;
+    disabled?: boolean;
+    trigger?: Interaction[];
+    asChild?: boolean;
+}
+declare var __VLS_11: {
+    channelActive: boolean;
+    remoteDisabled: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+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;
+    };
+};