@maas/vue-equipment 0.39.2 → 1.0.0-beta.1

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

@@ -1,55 +1,57 @@
-<template>
-  <magic-modal
-    :id="commandId"
-    class="magic-command-modal"
-    :options="options"
-    v-bind="$attrs"
-  >
-    <slot />
-  </magic-modal>
-</template>
-
-<script setup lang="ts">
-import { inject, watch, onBeforeUnmount } from 'vue'
-import { useMagicEmitter } from '@maas/vue-equipment/plugins'
-import { useMagicModal } from '../../../MagicModal'
-import { useMagicCommand } from '../composables/useMagicCommand'
-import { MagicCommandInstanceId } from './../symbols'
-
-import type { MagicCommandModalOptions } from '../types'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-interface MagicCommandProps {
-  options?: MagicCommandModalOptions
-}
-
-defineProps<MagicCommandProps>()
-
-const commandId = inject(MagicCommandInstanceId, '')
-const emitter = useMagicEmitter()
-
-function afterLeaveCallback() {
-  close()
-}
-
-const { close, isActive } = useMagicCommand(commandId)
-const modalApi = useMagicModal(commandId)
-
-watch(isActive, (value) => {
-  if (value) {
-    modalApi.open()
-  } else {
-    modalApi.close()
+<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";
+import { inject, watch, onBeforeUnmount } from "vue";
+import {
+  useMagicModal,
+  useMagicEmitter
+} from "@maas/vue-equipment/plugins";
+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"]);
+    };
   }
-})
-
-emitter.on('afterLeave', afterLeaveCallback)
-
-onBeforeUnmount(() => {
-  emitter.off('afterLeave', afterLeaveCallback)
-  close()
-})
+});
 </script>

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

@@ -1,4 +1,4 @@
-import type { MagicCommandModalOptions } from '../types';
+import type { MagicCommandModalOptions } from '../types/index.js';
 interface MagicCommandProps {
     options?: MagicCommandModalOptions;
 }
@@ -11,9 +11,18 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: 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_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"]>;
 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/MagicCommand/src/components/MagicCommandProvider.vue

@@ -1,66 +1,98 @@
-<template>
-  <div class="magic-command-provider">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { watch, provide, onBeforeUnmount, type MaybeRef } from 'vue'
-import { createDefu } from 'defu'
-import { useMagicKeys } from '@vueuse/core'
-import { defaultOptions } from '../utils/defaultOptions'
-import { useMagicCommand } from '../composables/useMagicCommand'
-import { MagicCommandInstanceId, MagicCommandProviderOptions } from '../symbols'
-
-import type { MagicCommandOptions } from './../types/index'
-
-// Prevent keys arrays from being merged with default
-const customDefu = createDefu((obj, key, value) => {
-  if (key === 'open' || key === 'close' || key === 'next' || key === 'prev') {
-    obj[key] = value
-    return true
-  }
-})
-
-interface MagicCommandProps {
-  id: MaybeRef<string>
-  options?: MagicCommandOptions
-}
-
-const props = withDefaults(defineProps<MagicCommandProps>(), {
-  options: () => defaultOptions,
-})
-
-const keys = useMagicKeys()
-const commandApi = useMagicCommand(props.id)
-const mappedOptions = customDefu(props.options, defaultOptions)
-
-const { open, close } = commandApi
-
-if (mappedOptions.keys?.open) {
-  for (const key of mappedOptions.keys.open) {
-    watch(keys[key], (value) => {
-      if (value) {
-        open()
+<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 { useMagicKeys, usePointer } from "@vueuse/core";
+import { Primitive } from "@maas/vue-primitive";
+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;
       }
-    })
-  }
-}
-
-if (mappedOptions.keys?.close) {
-  for (const key of mappedOptions.keys.close) {
-    watch(keys[key], (value) => {
-      if (value) {
-        close()
+    });
+    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 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) {
+        watch(keys[key], (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(() => {
-  close()
-})
-
-provide(MagicCommandInstanceId, props.id)
-provide(MagicCommandProviderOptions, mappedOptions)
+});
 </script>
+
+<style>
+.magic-command-provider {
+  outline: none;
+  user-select: none;
+}
+</style>

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

@@ -1,7 +1,8 @@
 import { type MaybeRef } from 'vue';
-import type { MagicCommandOptions } from './../types/index';
-interface MagicCommandProps {
+import type { MagicCommandOptions } from '../types/index.js';
+interface MagicCommandProviderProps {
     id: MaybeRef<string>;
+    asChild?: boolean;
     options?: MagicCommandOptions;
 }
 declare function __VLS_template(): {
@@ -9,15 +10,59 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
     };
-    refs: {};
-    rootEl: HTMLDivElement;
+    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;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicCommandProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandProps> & Readonly<{}>, {
-    options: MagicCommandOptions;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandProviderProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandProviderProps>>> & 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;

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

@@ -0,0 +1,63 @@
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { ref, inject, onBeforeUnmount } from "vue";
+import {
+  useMagicEmitter
+} from "@maas/vue-equipment/plugins";
+import { MagicCommandInstanceId } from "./../symbols";
+import { useCommandState } from "../composables/private/useCommandState";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicCommandRenderer",
+  setup(__props) {
+    const instanceId = inject(MagicCommandInstanceId, "");
+    const emitter = useMagicEmitter();
+    if (!instanceId) {
+      throw new Error(
+        "MagicCommandRenderer must be nested inside MagicCommandProvider"
+      );
+    }
+    const elRef = ref(void 0);
+    const { initializeState } = useCommandState(instanceId);
+    const state = initializeState();
+    function enterCallback(payload) {
+      if (typeof payload === "string" && payload === instanceId) {
+        state.renderer = elRef.value;
+      }
+    }
+    emitter.on("enter", enterCallback);
+    onBeforeUnmount(() => {
+      emitter.off("enter", enterCallback);
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock(
+        "div",
+        {
+          ref_key: "elRef",
+          ref: elRef,
+          class: "magic-command-renderer"
+        },
+        null,
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+});
+</script>
+
+<style>
+.magic-command-renderer {
+  position: relative;
+  width: var(--magic-command-renderer-width, 100%);
+  height: var(--magic-command-renderer-height, 100%);
+}
+
+.magic-command-content--fade-enter-active {
+  animation: fade-in 2000ms ease;
+}
+
+.magic-command-content--fade-leave-active {
+  animation: fade-out 2000ms ease;
+}
+</style>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,110 @@
+<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";
+import { Primitive } from "@maas/vue-primitive";
+import { useCommandView } from "../composables/private/useCommandView";
+import { useCommandTrigger } from "../composables/private/useCommandTrigger";
+import {
+  MagicCommandInstanceId,
+  MagicCommandViewId,
+  MagicCommandItemActive,
+  MagicCommandItemDisabled,
+  MagicCommandProviderOptions
+} from "../symbols";
+import { useMagicKeys } from "@vueuse/core";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicCommandTrigger",
+  props: {
+    viewId: { type: String, required: false },
+    active: { type: Boolean, required: false, default: () => void 0 },
+    disabled: { type: Boolean, required: false, default: () => void 0 },
+    action: { type: String, required: false, default: "open" },
+    trigger: { type: Array, required: false, default: () => ["click"] },
+    asChild: { type: Boolean, required: false }
+  },
+  setup(__props) {
+    const elRef = ref(void 0);
+    const instanceId = inject(MagicCommandInstanceId, void 0);
+    const itemActive = inject(MagicCommandItemActive, void 0);
+    const itemDisabled = inject(MagicCommandItemDisabled, void 0);
+    const injectedViewId = inject(MagicCommandViewId, void 0);
+    const mappedViewId = computed(() => __props.viewId ?? injectedViewId);
+    if (!instanceId) {
+      throw new Error(
+        "MagicCommandTrigger must be nested inside MagicCommandProvider"
+      );
+    }
+    if (!mappedViewId.value) {
+      throw new Error("MagicCommandTrigger must be nested inside MagicCommandView");
+    }
+    const { getView } = useCommandView(instanceId);
+    const view = getView(mappedViewId.value);
+    const mappedActive = computed(() => __props.active ?? toValue(itemActive) ?? false);
+    const mappedDisabled = computed(
+      () => __props.disabled ?? toValue(itemDisabled) ?? false
+    );
+    const options = inject(MagicCommandProviderOptions, void 0);
+    const { onMouseenter, onClick, onEnter } = useCommandTrigger({
+      instanceId,
+      viewId: mappedViewId.value,
+      mappedActive,
+      mappedDisabled,
+      trigger: __props.trigger,
+      action: __props.action,
+      elRef
+    });
+    watch(
+      () => view?.active,
+      async (value) => {
+        if (value) {
+          await new Promise((resolve) => requestAnimationFrame(resolve));
+          toValue(elRef)?.$el?.blur();
+        }
+      }
+    );
+    const keys = useMagicKeys();
+    if (options?.keyListener?.enter) {
+      for (const key of options.keyListener.enter) {
+        watch(keys[key], (value) => {
+          if (value) {
+            onEnter();
+          }
+        });
+      }
+    }
+    return (_ctx, _cache) => {
+      return _openBlock(), _createBlock(_unref(Primitive), {
+        ref_key: "elRef",
+        ref: elRef,
+        "data-id": `${mappedViewId.value}-trigger`,
+        "data-active": mappedActive.value,
+        "data-disabled": mappedDisabled.value,
+        "as-child": _ctx.asChild,
+        class: "magic-command-trigger",
+        onClick: _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", "as-child", "onClick", "onMouseenter"]);
+    };
+  }
+});
+</script>
+
+<style>
+.magic-menu-trigger {
+  cursor: var(--magic-command-trigger-cursor, pointer);
+}
+
+.magic-menu-trigger.-disabled {
+  pointer-events: none;
+}
+</style>

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

@@ -0,0 +1,75 @@
+import type { Interaction, Action } from '../types/index.js';
+interface MagicCommandTriggerProps {
+    viewId?: string;
+    active?: boolean;
+    disabled?: boolean;
+    action?: Action;
+    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;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandTriggerProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandTriggerProps>>> & 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;
+    };
+};