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

package/dist/plugins/MagicCommand/src/components/MagicCommandItem.vue

@@ -1,13 +1,22 @@
-<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 = ["data-id", "data-disabled", "data-active", "data-pointer-disabled"];
-const _hoisted_2 = {
-  key: 0,
-  class: "magic-command-item__pointer-guard"
-};
+<template>
+  <div
+    class="magic-command-item"
+    :data-id="mappedId"
+    :data-disabled="disabled"
+    :data-active="item.active"
+    :data-pointer-disabled="pointerDisabled"
+    @mouseenter="guardedSelect"
+    @mousemove="guardedSelect"
+    @touchstart.passive="guardedSelect"
+    @click="onClick"
+  >
+    <slot :item-active="item.active" :item-disabled="disabled" />
+    <div v-if="pointerDisabled" class="magic-command-item__pointer-guard" />
+  </div>
+</template>
+
+<script setup>
 import {
-  ref,
   computed,
   inject,
   provide,
@@ -15,6 +24,9 @@ import {
   useId,
   onMounted
 } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandItem } from "../composables/private/useCommandItem";
 import { useCommandState } from "../composables/private/useCommandState";
 import {
@@ -25,85 +37,75 @@ import {
   MagicCommandItemActive,
   MagicCommandItemDisabled
 } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicCommandItem",
-  props: {
-    id: { type: String, required: false },
-    initial: { type: Boolean, required: false, default: false },
-    disabled: { type: Boolean, required: false, default: false }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const instanceId = inject(MagicCommandInstanceId, void 0);
-    const viewId = inject(MagicCommandViewId, void 0);
-    const contentId = inject(MagicCommandContentId, void 0);
-    const elRef = ref(void 0);
-    if (!instanceId) {
-      throw new Error("MagicCommandItem must be nested inside MagicCommandProvider");
-    }
-    if (!viewId) {
-      throw new Error("MagicCommandItem must be nested inside MagicCommandView");
-    }
-    if (!contentId) {
-      throw new Error("MagicCommandItem must be nested inside MagicCommandContent");
-    }
-    const mappedId = computed(() => __props.id ?? `magic-command-item-${useId()}`);
-    const { initializeItem, deleteItem, selectItem } = useCommandItem({
-      instanceId,
-      viewId
-    });
-    const { initializeState } = useCommandState(instanceId);
-    const state = initializeState();
-    const item = initializeItem({
-      id: mappedId.value,
-      disabled: __props.disabled ?? false
-    });
-    const pointerDisabled = computed(() => state.input.type !== "pointer");
-    const mappedDisabled = computed(() => __props.disabled ?? item?.disabled);
-    const mappedActive = computed(() => item?.active);
-    function guardedSelect() {
-      if (state.input.type === "pointer" && !item.disabled && !item.active) {
-        selectItem(mappedId.value);
-      }
-    }
-    function onClick(event) {
-      emit("click", event);
-      guardedSelect();
-    }
-    provide(MagicCommandItemId, mappedId.value);
-    provide(MagicCommandItemActive, mappedActive);
-    provide(MagicCommandItemDisabled, mappedDisabled);
-    onMounted(() => {
-      if (__props.initial) {
-        selectItem(mappedId.value);
-      }
-    });
-    onBeforeUnmount(() => {
-      deleteItem(mappedId.value);
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", {
-        ref_key: "elRef",
-        ref: elRef,
-        class: "magic-command-item",
-        "data-id": mappedId.value,
-        "data-disabled": _ctx.disabled,
-        "data-active": _unref(item).active,
-        "data-pointer-disabled": pointerDisabled.value,
-        onMouseenter: guardedSelect,
-        onMousemove: guardedSelect,
-        onTouchstartPassive: guardedSelect,
-        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);
-    };
+import { onKeyStroke } from "@vueuse/core";
+const {
+  id,
+  initial = false,
+  disabled = false
+} = defineProps({
+  id: { type: String, required: false },
+  initial: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["click", "enter"]);
+const magicError = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommand"
+});
+const instanceId = inject(MagicCommandInstanceId, void 0);
+const viewId = inject(MagicCommandViewId, void 0);
+const contentId = inject(MagicCommandContentId, void 0);
+magicError.assert(instanceId, {
+  message: "MagicCommandItem must be nested inside MagicCommandProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(viewId, {
+  message: "MagicCommandItem must be nested inside MagicCommandView",
+  errorCode: "missing_view_id"
+});
+magicError.assert(contentId, {
+  message: "MagicCommandItem must be nested inside MagicCommandContent",
+  errorCode: "missing_content_id"
+});
+const mappedId = computed(() => id ?? `magic-command-item-${useId()}`);
+const { initializeItem, deleteItem, selectItem } = useCommandItem({
+  instanceId,
+  viewId
+});
+const { initializeState } = useCommandState(instanceId);
+const state = initializeState();
+const item = initializeItem({
+  id: mappedId.value,
+  disabled: disabled ?? false
+});
+const pointerDisabled = computed(() => state.input.type !== "pointer");
+const mappedDisabled = computed(() => disabled ?? item?.disabled);
+const mappedActive = computed(() => item?.active);
+function guardedSelect() {
+  if (state.input.type === "pointer" && !item.disabled && !item.active) {
+    selectItem(mappedId.value);
+  }
+}
+function onClick(event) {
+  emit("click", event);
+  guardedSelect();
+}
+function onReturn() {
+  if (!item.disabled && item.active) {
+    emit("enter");
   }
+}
+provide(MagicCommandItemId, mappedId.value);
+provide(MagicCommandItemActive, mappedActive);
+provide(MagicCommandItemDisabled, mappedDisabled);
+onKeyStroke("Enter", onReturn);
+onMounted(() => {
+  if (initial) {
+    selectItem(mappedId.value);
+  }
+});
+onBeforeUnmount(() => {
+  deleteItem(mappedId.value);
 });
 </script>
 

package/dist/plugins/MagicCommand/src/components/MagicCommandItem.vue.d.ts

@@ -3,37 +3,24 @@ interface MagicCommandItemProps {
     initial?: boolean;
     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<MagicCommandItemProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (event: MouseEvent) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandItemProps>>> & Readonly<{
+declare const __VLS_base: import("vue").DefineComponent<MagicCommandItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    enter: () => any;
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<MagicCommandItemProps> & Readonly<{
+    onEnter?: (() => any) | undefined;
     onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+}>, {}, {}, {}, {}, 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/MagicCommand/src/components/MagicCommandModal.d.vue.ts

@@ -0,0 +1,17 @@
+import type { MagicCommandModalOptions } from '../types/index.js';
+interface MagicCommandProps {
+    options?: MagicCommandModalOptions;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicCommandProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandProps> & 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/MagicCommand/src/components/MagicCommandModal.vue

@@ -1,57 +1,47 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+<template>
+  <magic-modal
+    :id="instanceId"
+    class="magic-command-modal"
+    :options="options"
+    v-bind="$attrs"
+  >
+    <slot />
+  </magic-modal>
+</template>
+
+<script setup>
 import { inject, watch, onBeforeUnmount } from "vue";
+import { useMagicModal } from "@maas/vue-equipment/plugins/MagicModal";
 import {
-  useMagicModal,
   useMagicEmitter
-} from "@maas/vue-equipment/plugins";
+} from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useMagicCommand } from "../composables/useMagicCommand";
 import { MagicCommandInstanceId } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "MagicCommandModal",
-  props: {
-    options: { type: null, required: false }
-  },
-  setup(__props) {
-    const instanceId = inject(MagicCommandInstanceId, "");
-    const emitter = useMagicEmitter();
-    function afterLeaveCallback(payload) {
-      if (typeof payload === "string" && payload === instanceId) {
-        close();
-      }
-    }
-    const { close, isActive } = useMagicCommand(instanceId);
-    const modalApi = useMagicModal(instanceId);
-    watch(isActive, (value) => {
-      if (value) {
-        modalApi.open();
-      } else {
-        modalApi.close();
-      }
-    });
-    emitter.on("afterLeave", afterLeaveCallback);
-    onBeforeUnmount(() => {
-      emitter.off("afterLeave", afterLeaveCallback);
-      close();
-    });
-    return (_ctx, _cache) => {
-      const _component_magic_modal = _resolveComponent("magic-modal");
-      return _openBlock(), _createBlock(_component_magic_modal, _mergeProps({
-        id: _unref(instanceId),
-        class: "magic-command-modal",
-        options: _ctx.options
-      }, _ctx.$attrs), {
-        default: _withCtx(() => [
-          _renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 16, ["id", "options"]);
-    };
+defineOptions({
+  inheritAttrs: false
+});
+defineProps({
+  options: { type: null, required: false }
+});
+const instanceId = inject(MagicCommandInstanceId, "");
+const emitter = useMagicEmitter();
+function afterLeaveCallback(payload) {
+  if (typeof payload === "string" && payload === instanceId) {
+    close();
   }
+}
+const { close, isActive } = useMagicCommand(instanceId);
+const modalApi = useMagicModal(instanceId);
+watch(isActive, (value) => {
+  if (value) {
+    modalApi.open();
+  } else {
+    modalApi.close();
+  }
+});
+emitter.on("afterLeave", afterLeaveCallback);
+onBeforeUnmount(() => {
+  emitter.off("afterLeave", afterLeaveCallback);
+  close();
 });
 </script>

package/dist/plugins/MagicCommand/src/components/MagicCommandModal.vue.d.ts

@@ -2,28 +2,15 @@ import type { MagicCommandModalOptions } from '../types/index.js';
 interface MagicCommandProps {
     options?: MagicCommandModalOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandProps>>> & 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<MagicCommandProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandProps> & 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/MagicCommand/src/components/MagicCommandProvider.d.vue.ts

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

@@ -1,93 +1,92 @@
-<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 :data-id="id" :as-child="asChild" class="magic-command-provider">
+    <slot />
+  </primitive>
+</template>
+
+<script setup>
+import { shallowRef, provide, watch, onBeforeUnmount } from "vue";
 import { useMagicKeys, usePointer } from "@vueuse/core";
 import { Primitive } from "@maas/vue-primitive";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { createDefu } from "defu";
 import { useCommandState } from "../composables/private/useCommandState";
 import { useMagicCommand } from "../composables/useMagicCommand";
 import { defaultOptions } from "../utils/defaultOptions";
 import { MagicCommandInstanceId, MagicCommandProviderOptions } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicCommandProvider",
-  props: {
-    id: { type: null, required: true },
-    asChild: { type: Boolean, required: false },
-    options: { type: Object, required: false, default: () => ({}) }
-  },
-  setup(__props) {
-    const elRef = ref(void 0);
-    const customDefu = createDefu((obj, key, value) => {
-      if (key === "open" || key === "close" || key === "next" || key === "prev") {
-        obj[key] = value;
-        return true;
-      }
-    });
-    const mappedOptions = customDefu(__props.options, defaultOptions);
-    const { initializeState, deleteState } = useCommandState(__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 { id, options = {} } = defineProps({
+  id: { type: null, required: true },
+  asChild: { type: Boolean, required: false },
+  options: { type: Object, required: false }
+});
+const customDefu = createDefu((obj, key, value) => {
+  if (key === "open" || key === "close" || key === "next" || key === "prev") {
+    obj[key] = value;
+    return true;
+  }
+});
+const mappedOptions = customDefu(options, defaultOptions);
+const { initializeState, deleteState } = useCommandState(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 keys = useMagicKeys();
+const commandApi = useMagicCommand(id);
+const { open, close } = commandApi;
+const { logWarning } = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommandProvider"
+});
+if (mappedOptions.keyListener?.open) {
+  for (const key of mappedOptions.keyListener.open) {
+    const mappedKey = keys[key];
+    if (!mappedKey) {
+      logWarning(`The key \u201C${key}\u201D is not supported by MagicCommand`);
+      continue;
+    }
+    watch(mappedKey, (value) => {
+      if (value) {
+        open();
       }
     });
-    const keys = useMagicKeys();
-    const commandApi = useMagicCommand(__props.id);
-    const { open, close } = commandApi;
-    if (mappedOptions.keyListener?.open) {
-      for (const key of mappedOptions.keyListener.open) {
-        watch(keys[key], (value) => {
-          if (value) {
-            open();
-          }
-        });
-      }
+  }
+}
+if (mappedOptions.keyListener?.close) {
+  for (const key of mappedOptions.keyListener.close) {
+    const mappedKey = keys[key];
+    if (!mappedKey) {
+      logWarning(`The key \u201C${key}\u201D is not supported by MagicCommand`);
+      continue;
     }
-    if (mappedOptions.keyListener?.close) {
-      for (const key of mappedOptions.keyListener.close) {
-        watch(keys[key], (value) => {
-          if (value) {
-            close();
-          }
-        });
+    watch(mappedKey, (value) => {
+      if (value) {
+        close();
       }
-    }
-    onBeforeUnmount(() => {
-      deleteState();
     });
-    provide(MagicCommandInstanceId, __props.id);
-    provide(MagicCommandProviderOptions, mappedOptions);
-    return (_ctx, _cache) => {
-      return _openBlock(), _createBlock(_unref(Primitive), {
-        ref_key: "elRef",
-        ref: elRef,
-        "as-child": _ctx.asChild,
-        class: "magic-command-provider"
-      }, {
-        default: _withCtx(() => [
-          _renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["as-child"]);
-    };
   }
+}
+onBeforeUnmount(() => {
+  deleteState();
 });
+provide(MagicCommandInstanceId, id);
+provide(MagicCommandProviderOptions, mappedOptions);
 </script>
 
 <style>