@maas/vue-equipment 1.0.0-beta.12 → 1.0.0-beta.14

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

@@ -1,6 +1,15 @@
-<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";
+<template>
+  <primitive
+    ref="el"
+    :as-child="asChild"
+    :data-id="id"
+    class="magic-menu-provider"
+  >
+    <slot />
+  </primitive>
+</template>
+
+<script setup>
 import {
   useTemplateRef,
   shallowRef,
@@ -10,97 +19,86 @@ import {
   onBeforeUnmount
 } from "vue";
 import { onClickOutside, onKeyStroke, usePointer } from "@vueuse/core";
-import { Primitive } from "@maas/vue-primitive";
 import { defu } from "defu";
 import { useMenuState } from "../composables/private/useMenuState";
 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,
+  onEnter,
+  onTab
+} = useMenuKeyListener(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(id);
+onClickOutside(
+  elRef,
+  () => {
+    if (state) {
+      state.active = false;
+    }
+    unselectAllViews();
   },
-  setup(__props) {
-    const elRef = useTemplateRef("el");
-    const mappedOptions = defu(__props.options, defaultOptions);
-    const { initializeState, deleteState } = useMenuState(__props.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,
-      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: [
-          `[data-id='${toValue(__props.id)}'] .magic-menu-trigger`,
-          `[data-id='${toValue(__props.id)}'] .magic-menu-item`,
-          `.magic-menu-float`
-        ]
-      }
-    );
-    onBeforeUnmount(() => {
-      deleteState();
-    });
-    provide(MagicMenuInstanceId, __props.id);
-    return (_ctx, _cache) => {
-      return _openBlock(), _createBlock(_unref(Primitive), {
-        ref: "el",
-        "as-child": _ctx.asChild,
-        "data-id": _ctx.id,
-        class: "magic-menu-provider"
-      }, {
-        default: _withCtx(() => [
-          _renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["as-child", "data-id"]);
-    };
+  {
+    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/MagicMenuRemote.vue

@@ -1,86 +1,90 @@
-<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";
+<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 { 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 }
+const { disabled, channelId, instanceId, viewId, trigger } = defineProps({
+  channelId: {
+    type: String,
+    required: true
   },
-  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"]);
-    };
+  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 injectedInstanceId = inject(MagicMenuInstanceId, instanceId);
+const injectedViewId = inject(MagicMenuViewId, viewId);
+const mappedInstanceId = computed(() => instanceId ?? injectedInstanceId);
+const mappedViewId = computed(() => 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 (!channelId) {
+  throw new Error("MagicMenuRemote requires a channelId");
+}
+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 });
+    }
+  }
+);
 </script>
 
 <style>

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

@@ -9,7 +9,7 @@ interface MagicMenuRemoteProps {
     asChild?: boolean;
 }
 declare const onClick: () => void, onMouseenter: () => void;
-declare let channel: import("../types").MenuChannel;
+declare let channel: import("../types/index.js").MenuChannel;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_11: {
     channelActive: boolean;

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

@@ -1,8 +1,22 @@
-<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";
+<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 { useMenuState } from "../composables/private/useMenuState";
 import { useMenuView } from "../composables/private/useMenuView";
 import { useMenuItem } from "../composables/private/useMenuItem";
@@ -13,110 +27,97 @@ import {
   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 }
+const { instanceId, viewId, disabled, trigger } = defineProps({
+  instanceId: {
+    type: String,
+    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"]);
-    };
+  viewId: {
+    type: String,
+    required: false
+  },
+  disabled: {
+    type: Boolean,
+    required: false
+  },
+  trigger: {
+    type: Array,
+    required: false
+  },
+  asChild: {
+    type: Boolean,
+    required: false
   }
 });
+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);
+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(() => 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, 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);
 </script>
 
 <style>

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

@@ -8,7 +8,7 @@ interface MagicMenuTriggerProps {
     asChild?: boolean;
 }
 declare const mappedViewId: import("vue").ComputedRef<string | undefined>;
-declare const view: import("../types").MenuView | undefined;
+declare const view: import("../types/index.js").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;