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

package/dist/plugins/MagicCommand/index.mjs

@@ -1,12 +1,11 @@
-import MagicCommandBody from "./src/components/MagicCommandBody.vue";
 import MagicCommandDrawer from "./src/components/MagicCommandDrawer.vue";
-import MagicCommandFooter from "./src/components/MagicCommandFooter.vue";
-import MagicCommandGroup from "./src/components/MagicCommandGroup.vue";
-import MagicCommandHead from "./src/components/MagicCommandHead.vue";
 import MagicCommandItem from "./src/components/MagicCommandItem.vue";
 import MagicCommandModal from "./src/components/MagicCommandModal.vue";
 import MagicCommandProvider from "./src/components/MagicCommandProvider.vue";
 import MagicCommandView from "./src/components/MagicCommandView.vue";
+import MagicCommandRenderer from "./src/components/MagicCommandRenderer.vue";
+import MagicCommandContent from "./src/components/MagicCommandContent.vue";
+import MagicCommandTrigger from "./src/components/MagicCommandTrigger.vue";
 import { useMagicCommand } from "./src/composables/useMagicCommand.mjs";
 import {
   MagicCommandInstanceId,
@@ -14,15 +13,14 @@ import {
 } from "./src/symbols/index.mjs";
 const MagicCommandPlugin = {
   install: (app) => {
-    app.component("MagicCommandBody", MagicCommandBody);
-    app.component("MagicCommandDrawer", MagicCommandDrawer);
-    app.component("MagicCommandFooter", MagicCommandFooter);
-    app.component("MagicCommandGroup", MagicCommandGroup);
-    app.component("MagicCommandHead", MagicCommandHead);
-    app.component("MagicCommandItem", MagicCommandItem);
-    app.component("MagicCommandModal", MagicCommandModal);
     app.component("MagicCommandProvider", MagicCommandProvider);
     app.component("MagicCommandView", MagicCommandView);
+    app.component("MagicCommandRenderer", MagicCommandRenderer);
+    app.component("MagicCommandContent", MagicCommandContent);
+    app.component("MagicCommandTrigger", MagicCommandTrigger);
+    app.component("MagicCommandItem", MagicCommandItem);
+    app.component("MagicCommandDrawer", MagicCommandDrawer);
+    app.component("MagicCommandModal", MagicCommandModal);
   }
 };
 export {

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

@@ -0,0 +1,199 @@
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from "vue";
+const _hoisted_1 = ["data-id", "data-idle"];
+import {
+  ref,
+  inject,
+  watch,
+  nextTick,
+  provide,
+  computed,
+  useTemplateRef
+} from "vue";
+import { useMagicKeys } from "@vueuse/core";
+import { useCommandItem } from "../composables/private/useCommandItem";
+import { useCommandScroll } from "../composables/private/useCommandScroll";
+import { useCommandCallback } from "../composables/private/useCommandCallback";
+import {
+  MagicCommandInstanceId,
+  MagicCommandViewId,
+  MagicCommandContentId,
+  MagicCommandProviderOptions
+} from "../symbols";
+import { useCommandView } from "../composables/private/useCommandView";
+import { useCommandState } from "../composables/private/useCommandState";
+import "@maas/vue-equipment/utils/css/animations/fade-in.css";
+import "@maas/vue-equipment/utils/css/animations/fade-out.css";
+export default /* @__PURE__ */ _defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "MagicCommandContent",
+  setup(__props) {
+    const instanceId = inject(MagicCommandInstanceId, void 0);
+    const viewId = inject(MagicCommandViewId, void 0);
+    const elRef = useTemplateRef("el");
+    if (!instanceId) {
+      throw new Error(
+        "MagicCommandContent must be nested inside MagicCommandProvider"
+      );
+    }
+    if (!viewId) {
+      throw new Error("MagicCommandContent must be nested inside MagicCommandView");
+    }
+    const { getView } = useCommandView(instanceId);
+    const view = getView(viewId);
+    const { initializeState } = useCommandState(instanceId);
+    const state = initializeState();
+    const isActive = computed(() => view?.active && state.active && state.renderer);
+    const isIdle = computed(() => state.input.view !== viewId);
+    const options = inject(MagicCommandProviderOptions, void 0);
+    const { activeItem, selectNextItem, selectPrevItem } = useCommandItem({
+      instanceId,
+      viewId
+    });
+    const {
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onBeforeLeave,
+      onLeave,
+      onAfterLeave
+    } = useCommandCallback({
+      instanceId,
+      viewId
+    });
+    const {
+      findElement,
+      findScrollableAncestor,
+      isElementAbove,
+      isElementBelow,
+      scrollInFromBottom,
+      scrollInFromTop
+    } = useCommandScroll(elRef);
+    const keys = useMagicKeys();
+    const nextTimeout = ref(void 0);
+    const prevTimeout = ref(void 0);
+    const nextInterval = ref(void 0);
+    const prevInterval = ref(void 0);
+    if (options?.keyListener?.next) {
+      for (const key of options.keyListener.next) {
+        watch(keys[key], (value) => {
+          if (isIdle.value) {
+            return;
+          }
+          if (value) {
+            state.input.type = "keyboard";
+            selectNextItem(options.loop);
+            nextTimeout.value = setTimeout(() => {
+              nextInterval.value = setInterval(() => {
+                selectNextItem(options.loop);
+              }, 100);
+            }, 500);
+          } else {
+            clearTimeout(nextTimeout.value);
+            clearInterval(nextInterval.value);
+          }
+        });
+      }
+    }
+    if (options?.keyListener?.prev) {
+      for (const key of options.keyListener.prev) {
+        watch(keys[key], (value) => {
+          if (isIdle.value) {
+            return;
+          }
+          if (value) {
+            state.input.type = "keyboard";
+            selectPrevItem(options.loop);
+            prevTimeout.value = setTimeout(() => {
+              prevInterval.value = setInterval(() => {
+                selectPrevItem(options.loop);
+              }, 100);
+            }, 500);
+          } else {
+            clearTimeout(prevTimeout.value);
+            clearInterval(prevInterval.value);
+          }
+        });
+      }
+    }
+    watch(
+      activeItem,
+      async (value) => {
+        if (!value || isIdle.value || state.input.type !== "keyboard") {
+          return;
+        }
+        nextTick(() => {
+          const element = findElement(value.id);
+          if (element) {
+            const ancestor = findScrollableAncestor(element);
+            switch (true) {
+              case isElementAbove({ element, ancestor }):
+                scrollInFromTop({ element, ancestor });
+                break;
+              case isElementBelow({ element, ancestor }):
+                scrollInFromBottom({ element, ancestor });
+                break;
+            }
+          }
+        });
+      },
+      { deep: true }
+    );
+    provide(MagicCommandContentId, `${viewId}-content`);
+    return (_ctx, _cache) => {
+      return _unref(state).renderer && _unref(state).active ? (_openBlock(), _createBlock(_Teleport, {
+        key: 0,
+        to: _unref(state).renderer
+      }, [
+        _createVNode(_Transition, {
+          name: _unref(state).options.transition?.content,
+          "on-before-enter": _unref(onBeforeEnter),
+          "on-enter": _unref(onEnter),
+          "on-after-enter": _unref(onAfterEnter),
+          "on-before-leave": _unref(onBeforeLeave),
+          "on-leave": _unref(onLeave),
+          "on-after-leave": _unref(onAfterLeave)
+        }, {
+          default: _withCtx(() => [
+            isActive.value ? _withDirectives((_openBlock(), _createElementBlock("div", _mergeProps({
+              ref: "el",
+              key: `${_unref(viewId)}-content`,
+              class: "magic-command-content",
+              "data-id": `${_unref(viewId)}-content`,
+              "data-idle": isIdle.value
+            }, _ctx.$attrs), [
+              _renderSlot(_ctx.$slots, "default")
+            ], 16, _hoisted_1)), [
+              [_vShow, !isIdle.value]
+            ]) : _createCommentVNode("v-if", true)
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["name", "on-before-enter", "on-enter", "on-after-enter", "on-before-leave", "on-leave", "on-after-leave"])
+      ], 8, ["to"])) : _createCommentVNode("v-if", true);
+    };
+  }
+});
+</script>
+
+<style>
+.magic-command-content {
+  position: absolute;
+  inset: 0;
+}
+
+.magic-command-content[data-idle='true'] {
+  pointer-events: none;
+}
+
+.magic-command-content-enter-active {
+  animation: fade-in 150ms ease;
+}
+
+.magic-command-content-leave-active {
+  animation: fade-out 150ms ease;
+}
+</style>

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

@@ -0,0 +1,32 @@
+import '@maas/vue-equipment/utils/css/animations/fade-in.css';
+import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+declare const viewId: string | undefined;
+declare const state: import("../types").CommandState;
+declare const isActive: import("vue").ComputedRef<false | HTMLElement | null | undefined>;
+declare const isIdle: import("vue").ComputedRef<boolean>;
+declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => void, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_9: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_9) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<{}, {
+    viewId: typeof viewId;
+    state: typeof state;
+    isActive: typeof isActive;
+    isIdle: typeof isIdle;
+    onBeforeEnter: typeof onBeforeEnter;
+    onEnter: typeof onEnter;
+    onAfterEnter: typeof onAfterEnter;
+    onBeforeLeave: typeof onBeforeLeave;
+    onLeave: typeof onLeave;
+    onAfterLeave: typeof onAfterLeave;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,55 +1,62 @@
-<template>
-  <magic-drawer
-    :id="commandId"
-    class="magic-command-drawer"
-    :options="options"
-    v-bind="$attrs"
-  >
-    <slot />
-  </magic-drawer>
-</template>
-
-<script setup lang="ts">
-import { inject, watch, onBeforeUnmount } from 'vue'
-import { useMagicEmitter } from '@maas/vue-equipment/plugins'
-import { useMagicDrawer } from '../../../MagicDrawer/src/composables/useMagicDrawer'
-import { useMagicCommand } from '../composables/useMagicCommand'
-import { MagicCommandInstanceId } from './../symbols'
-
-import type { MagicCommandDrawerOptions } from '../types'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-interface MagicCommandProps {
-  options?: MagicCommandDrawerOptions
-}
-
-defineProps<MagicCommandProps>()
-
-const commandId = inject(MagicCommandInstanceId, '')
-const emitter = useMagicEmitter()
-
-function afterLeaveCallback() {
-  close()
-}
-
-const { close, isActive } = useMagicCommand(commandId)
-const drawerApi = useMagicDrawer(commandId)
-
-watch(isActive, (value) => {
-  if (value) {
-    drawerApi.open()
-  } else {
-    drawerApi.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 {
+  useMagicDrawer,
+  useMagicEmitter
+} from "@maas/vue-equipment/plugins";
+import { useMagicCommand } from "../composables/useMagicCommand";
+import { MagicCommandInstanceId } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "MagicCommandDrawer",
+  props: {
+    options: { type: null, required: false }
+  },
+  setup(__props) {
+    const instanceId = inject(MagicCommandInstanceId, "");
+    const emitter = useMagicEmitter();
+    if (!instanceId) {
+      throw new Error(
+        "MagicCommandDrawer must be nested inside MagicCommandProvider"
+      );
+    }
+    function afterLeaveCallback(payload) {
+      if (typeof payload === "string" && payload === instanceId) {
+        close();
+      }
+    }
+    const { close, isActive } = useMagicCommand(instanceId);
+    const drawerApi = useMagicDrawer(instanceId);
+    watch(isActive, (value) => {
+      if (value) {
+        drawerApi.open();
+      } else {
+        drawerApi.close();
+      }
+    });
+    emitter.on("afterLeave", afterLeaveCallback);
+    onBeforeUnmount(() => {
+      emitter.off("afterLeave", afterLeaveCallback);
+      close();
+    });
+    return (_ctx, _cache) => {
+      const _component_magic_drawer = _resolveComponent("magic-drawer");
+      return _openBlock(), _createBlock(_component_magic_drawer, _mergeProps({
+        id: _unref(instanceId),
+        class: "magic-command-drawer",
+        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/MagicCommandDrawer.vue.d.ts

@@ -1,20 +1,20 @@
-import type { MagicCommandDrawerOptions } from '../types';
-interface MagicCommandProps {
+import type { MagicCommandDrawerOptions } from '../types/index.js';
+interface MagicCommandDrawerProps {
     options?: MagicCommandDrawerOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    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 _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const instanceId: import("vue").MaybeRef<string>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_6: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_6) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicCommandDrawerProps, {
+    instanceId: typeof instanceId;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCommandDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,91 +1,116 @@
-<template>
-  <div
-    class="magic-command-item"
-    ref="elRef"
-    :data-id="mappedId"
-    :aria-selected="isActive"
-  >
-    <slot :is-active="isActive" />
-  </div>
-</template>
-
-<script lang="ts" setup>
+<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"
+};
 import {
-  ref,
   computed,
   inject,
-  toValue,
-  nextTick,
-  onMounted,
-  onUnmounted,
+  provide,
+  onBeforeUnmount,
   useId,
-} from 'vue'
-import { useEventListener, onKeyStroke } from '@vueuse/core'
-import { useCommandStore } from '../composables/private/useCommandStore'
-import { useCommandItem } from '../composables/private/useCommandItem'
-import { MagicCommandInstanceId } from '../symbols'
-
-interface MagicCommandItemProps {
-  id?: string
-  default?: boolean
-  callback: Function | false
-  listener?: ('click' | 'mouseenter' | 'touchstart')[]
-  keys?: string[]
-}
-
-const props = withDefaults(defineProps<MagicCommandItemProps>(), {
-  listener: () => ['click'],
-  keys: () => ['Enter'],
-})
-const elRef = ref<HTMLElement | undefined>(undefined)
-
-const commandId = inject(MagicCommandInstanceId, '')
-const { selectItem, activeItem } = useCommandItem(commandId)
-
-const mappedId = computed(() => {
-  return props.id ?? useId() ?? ''
-})
-
-const isActive = computed(() => {
-  return toValue(mappedId) === activeItem.value
-})
-
-function listenerCallback() {
-  selectItem(mappedId.value)
-  nextTick(() => {
-    if (props.callback) {
-      props.callback()
+  onMounted
+} from "vue";
+import { useCommandItem } from "../composables/private/useCommandItem";
+import { useCommandState } from "../composables/private/useCommandState";
+import {
+  MagicCommandInstanceId,
+  MagicCommandViewId,
+  MagicCommandContentId,
+  MagicCommandItemId,
+  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);
+    if (!instanceId) {
+      throw new Error("MagicCommandItem must be nested inside MagicCommandProvider");
     }
-  })
-}
-
-useEventListener(elRef, props.listener, listenerCallback)
-
-if (props.keys.length) {
-  onKeyStroke(props.keys, () => (isActive.value ? listenerCallback() : null))
-}
-
-const { addItem, removeItem } = useCommandStore()
-
-onMounted(() => {
-  if (toValue(commandId)) {
-    addItem(toValue(commandId), mappedId.value)
-  }
-
-  nextTick(() => {
-    if (props.default) {
-      selectItem(mappedId.value)
+    if (!viewId) {
+      throw new Error("MagicCommandItem must be nested inside MagicCommandView");
     }
-  })
-})
-
-onUnmounted(() => {
-  if (toValue(commandId)) {
-    removeItem(toValue(commandId), mappedId.value)
+    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", {
+        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);
+    };
   }
-})
+});
 </script>
 
 <style>
-.magic-command-item{cursor:pointer}
+.magic-command-item {
+  position: relative;
+  cursor: var(--magic-command-item-cursor, default);
+}
+
+.magic-command-item__pointer-guard {
+  position: absolute;
+  inset: 0;
+}
 </style>