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

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

@@ -1,135 +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, useId } from 'vue'
-import { useMenuItem } from '../composables/private/useMenuItem'
-import { useMenuState } from '../composables/private/useMenuState'
-import { useMenuView } from '../composables/private/useMenuView'
+<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"
+};
+import {
+  ref,
+  computed,
+  inject,
+  provide,
+  onBeforeUnmount,
+  watch,
+  useId
+} from "vue";
+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-${useId()}`)
-
-// 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)
+  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);
+    };
   }
-}
-
-// Guarded unselect
-// Check for active nested views
-const { getNestedView, unselectAllViews } = useMenuView(instanceId)
-const nestedView = computed(() => getNestedView(mappedId.value))
+});
+</script>
 
-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 }
-    )
-  }
+<style>
+.magic-menu-item {
+  cursor: var(--magic-menu-item-cursor, default);
 }
 
-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()
-  }
+.magic-menu-item__pointer-guard {
+  position: absolute;
+  inset: 0;
 }
-
-// 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

@@ -6,8 +6,8 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {
-            isActive: boolean;
-            isDisabled: boolean | undefined;
+            itemActive: boolean;
+            itemDisabled: boolean;
         }): any;
     };
     refs: {
@@ -16,13 +16,22 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (event: MouseEvent) => any;
-}, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & Readonly<{
+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<{
     onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {}, {}, {}, {}, 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_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,102 +1,100 @@
-<template>
-  <div class="magic-menu-provider" ref="elRef">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, provide, watch, type MaybeRef, onBeforeUnmount } from 'vue'
-import { onClickOutside, onKeyStroke, usePointer } from '@vueuse/core'
-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'
-
-import type { MagicMenuOptions } from '../types'
-
-interface MagicMenuProviderProps {
-  id: MaybeRef<string>
-  options?: MagicMenuOptions
-}
-
-const props = defineProps<MagicMenuProviderProps>()
-const elRef = ref<HTMLElement | undefined>(undefined)
-
-const mappedOptions = defu(props.options, defaultOptions)
-
-const { initializeState, deleteState } = useMenuState(props.id)
-const state = initializeState(mappedOptions)
-
-// If the mode changes, save the current pointer position
-// If the pointer moves, switch to mouse mode
-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], ([x, y]) => {
-  if (x !== lastX.value || y !== lastY.value) {
-    if (state) {
-      state.input.type = 'pointer'
-    }
-  }
-})
-
-// Add key listener
-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)
-
-// Handle off-click
-const { unselectAllViews } = useMenuView(props.id)
-
-onClickOutside(
-  elRef,
-  () => {
-    if (state) {
-      state.active = false
-    }
-    unselectAllViews()
+<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";
+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 }
   },
-  {
-    ignore: ['.magic-menu-trigger', '.magic-menu-item', 'magic-menu-float'],
+  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"]);
+    };
   }
-)
-
-// Lifecycle
-onBeforeUnmount(() => {
-  deleteState()
-})
-
-provide(MagicMenuInstanceId, props.id)
+});
 </script>
 
 <style>
-.magic-menu-provider{outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}
+.magic-menu-provider {
+  outline: none;
+  user-select: none;
+}
 </style>

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

@@ -1,7 +1,8 @@
 import { type MaybeRef } from 'vue';
-import type { MagicMenuOptions } from '../types';
+import type { MagicMenuOptions } from '../types/index.js';
 interface MagicMenuProviderProps {
     id: MaybeRef<string>;
+    asChild?: boolean;
     options?: MagicMenuOptions;
 }
 declare function __VLS_template(): {
@@ -10,14 +11,58 @@ declare function __VLS_template(): {
         default?(_: {}): any;
     };
     refs: {
-        elRef: HTMLDivElement;
+        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: HTMLDivElement;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+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"]>;
 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 & {
     new (): {
         $slots: S;