@maas/vue-equipment 1.0.0-beta.3 → 1.0.0-beta.30

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

@@ -1,8 +1,40 @@
-<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 } from "vue";
+<template>
+  <teleport v-if="state.renderer && state.active" :to="state.renderer">
+    <transition
+      :name="state.options.transition?.content"
+      :on-before-enter="onBeforeEnter"
+      :on-enter="onEnter"
+      :on-after-enter="onAfterEnter"
+      :on-before-leave="onBeforeLeave"
+      :on-leave="onLeave"
+      :on-after-leave="onAfterLeave"
+    >
+      <div
+        v-if="isActive"
+        v-show="!isIdle"
+        ref="el"
+        :key="`${viewId}-content`"
+        class="magic-command-content"
+        :data-id="`${viewId}-content`"
+        :data-idle="isIdle"
+        v-bind="$attrs"
+      >
+        <slot />
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup>
+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";
@@ -15,161 +47,123 @@ import {
 } 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 = ref(void 0);
-    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";
+import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
+defineOptions({
+  inheritAttrs: false
+});
+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);
-            nextTimeout.value = setTimeout(() => {
-              nextInterval.value = setInterval(() => {
-                selectNextItem(options.loop);
-              }, 100);
-            }, 500);
-          } else {
-            clearTimeout(nextTimeout.value);
-            clearInterval(nextInterval.value);
-          }
-        });
+          }, 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";
+    });
+  }
+}
+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);
-            prevTimeout.value = setTimeout(() => {
-              prevInterval.value = setInterval(() => {
-                selectPrevItem(options.loop);
-              }, 100);
-            }, 500);
-          } else {
-            clearTimeout(prevTimeout.value);
-            clearInterval(prevInterval.value);
-          }
-        });
+          }, 100);
+        }, 500);
+      } else {
+        clearTimeout(prevTimeout.value);
+        clearInterval(prevInterval.value);
       }
+    });
+  }
+}
+watch(
+  activeItem,
+  async (value) => {
+    if (!value || isIdle.value || state.input.type !== "keyboard") {
+      return;
     }
-    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;
         }
-        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_key: "elRef",
-              ref: elRef,
-              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);
-    };
-  }
-});
+      }
+    });
+  },
+  { deep: true }
+);
+provide(MagicCommandContentId, `${viewId}-content`);
 </script>
 
 <style>

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

@@ -1,20 +1,13 @@
-import '@maas/vue-equipment/utils/css/animations/fade-in.css';
-import '@maas/vue-equipment/utils/css/animations/fade-out.css';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        elRef: any;
-    };
-    rootEl: any;
+import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 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_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+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/MagicCommandDrawer.vue

@@ -1,6 +1,15 @@
-<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-drawer
+    :id="instanceId"
+    class="magic-command-drawer"
+    :options="options"
+    v-bind="$attrs"
+  >
+    <slot />
+  </magic-drawer>
+</template>
+
+<script setup>
 import { inject, watch, onBeforeUnmount } from "vue";
 import {
   useMagicDrawer,
@@ -8,55 +17,36 @@ import {
 } 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"]);
-    };
+defineOptions({
+  inheritAttrs: false
+});
+defineProps({
+  options: { type: null, required: false }
+});
+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();
 });
 </script>

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

@@ -2,28 +2,14 @@ import type { MagicCommandDrawerOptions } from '../types/index.js';
 interface MagicCommandDrawerProps {
     options?: MagicCommandDrawerOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandDrawerProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandDrawerProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+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_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/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,
@@ -25,85 +34,61 @@ 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);
-    };
+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"]);
+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");
+}
+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(() => 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();
+}
+provide(MagicCommandItemId, mappedId.value);
+provide(MagicCommandItemActive, mappedActive);
+provide(MagicCommandItemDisabled, mappedDisabled);
+onMounted(() => {
+  if (initial) {
+    selectItem(mappedId.value);
+  }
+});
+onBeforeUnmount(() => {
+  deleteItem(mappedId.value);
 });
 </script>