@maas/vue-equipment 0.22.4 → 0.23.0

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.22.3"
+  "version": "0.22.5"
 }

package/dist/plugins/MagicCommand/demo/DefaultView.vue

@@ -2,7 +2,11 @@
   <magic-command-view
     id="default-view"
     :default="true"
-    class="bg-neutral-800 border border-solid border-neutral-600 w-[40rem] max-h-[30rem] rounded-xl overflow-hidden flex flex-col"
+    :class="{
+      'w-[40rem] max-h-[30rem] rounded-xl overflow-hidden': isModal,
+      'w-full h-full': !isModal,
+    }"
+    class="bg-neutral-800 border border-solid border-neutral-600 flex flex-col"
   >
     <magic-command-head class="px-2 pt-2">
       <div class="w-full border border-neutral-600 p-3 border-b-solid">
@@ -11,7 +15,7 @@
     </magic-command-head>
     <magic-command-body class="h-full py-2">
       <magic-command-group>
-        <h2 class="p-4 text-xs text-neutral-600">Suggestions</h2>
+        <span class="p-4 text-xs text-neutral-600">Suggestions</span>
         <magic-command-item
           v-slot="{ isActive }"
           :default="true"
@@ -26,7 +30,7 @@
         </magic-command-item>
       </magic-command-group>
       <magic-command-group>
-        <h2 class="p-4 text-xs text-neutral-600">Filter</h2>
+        <span class="p-4 text-xs text-neutral-600">Filter</span>
         <magic-command-item
           v-slot="{ isActive }"
           v-if="dynamic"
@@ -54,6 +58,7 @@ import DemoItem from './DemoItem.vue'
 
 interface Props {
   hasDynamicItem?: boolean
+  isModal?: boolean
 }
 
 defineProps<Props>()

package/dist/plugins/MagicCommand/demo/DefaultView.vue.d.ts

@@ -1,5 +1,6 @@
 interface Props {
     hasDynamicItem?: boolean;
+    isModal?: boolean;
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;

package/dist/plugins/MagicCommand/demo/ProjectView.vue

@@ -1,7 +1,11 @@
 <template>
   <magic-command-view
     id="project-view"
-    class="bg-neutral-800 border border-solid border-neutral-600 w-[40rem] max-h-[30rem] rounded-xl overflow-hidden flex flex-col"
+    :class="{
+      'w-[40rem] max-h-[30rem] rounded-xl': isModal,
+      'w-full h-full': !isModal,
+    }"
+    class="bg-neutral-800 border border-solid border-neutral-600 overflow-hidden flex flex-col"
   >
     <magic-command-head class="p-2">
       <div class="w-full border border-neutral-600 p-3 border-b-solid">
@@ -42,6 +46,12 @@ import { useCommandApi, CommandInstanceId } from '@maas/vue-equipment/plugins'
 
 import DemoItem from './DemoItem.vue'
 
+interface Props {
+  isModal?: boolean
+}
+
+defineProps<Props>()
+
 const commandId = inject(CommandInstanceId, '')
 
 const commandApi = useCommandApi(commandId)

package/dist/plugins/MagicCommand/demo/ProjectView.vue.d.ts

@@ -1,2 +1,14 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+interface Props {
+    isModal?: boolean;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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;
+    };
+};

package/dist/plugins/MagicCommand/index.mjs

@@ -1,21 +1,25 @@
-import MagicCommand from "./src/components/MagicCommand.vue";
 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 { useCommandApi } from "./src/composables/useCommandApi.mjs";
 import { useCommandEmitter } from "./src/composables/useCommandEmitter.mjs";
 import { CommandInstanceId, CommandOptionsKey } from "./src/symbols/index.mjs";
 const MagicCommandPlugin = {
   install: (app) => {
-    app.component("MagicCommand", MagicCommand);
     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);
   }
 };

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

@@ -0,0 +1,48 @@
+<template>
+  <magic-drawer
+    :id="commandId"
+    class="magic-command-drawer"
+    :class="props.class"
+    :options="options"
+  >
+    <slot />
+  </magic-drawer>
+</template>
+
+<script setup lang="ts">
+import { inject, watch, onBeforeUnmount, type MaybeRef } from 'vue'
+import { useDrawerApi, useDrawerEmitter } from '../../../MagicDrawer'
+import { useCommandApi } from './../composables/useCommandApi'
+import { CommandInstanceId } from './../symbols'
+
+import type { CommandDrawerOptions } from '../types'
+
+interface MagicCommandProps {
+  class?: MaybeRef<string>
+  options?: CommandDrawerOptions
+}
+
+const props = defineProps<MagicCommandProps>()
+
+const commandId = inject(CommandInstanceId, '')
+
+function afterLeaveCallback() {
+  close()
+}
+
+const { close, isActive } = useCommandApi(commandId)
+
+watch(isActive, (value) => {
+  if (value) {
+    useDrawerApi(commandId).open()
+  } else {
+    useDrawerApi(commandId).close()
+  }
+})
+
+useDrawerEmitter().on('afterLeave', afterLeaveCallback)
+
+onBeforeUnmount(() => {
+  useDrawerEmitter().off('afterLeave', afterLeaveCallback)
+})
+</script>

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

@@ -0,0 +1,24 @@
+import { type MaybeRef } from 'vue';
+import type { CommandDrawerOptions } from '../types';
+interface MagicCommandProps {
+    class?: MaybeRef<string>;
+    options?: CommandDrawerOptions;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<MagicCommandProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<MagicCommandProps>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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/MagicCommandItem.vue

@@ -18,7 +18,6 @@ import {
   nextTick,
   onMounted,
   onUnmounted,
-  getCurrentInstance,
 } from 'vue'
 import { useEventListener, onKeyStroke } from '@vueuse/core'
 import { uuid } from '@maas/vue-equipment/utils'

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

@@ -0,0 +1,48 @@
+<template>
+  <magic-modal
+    :id="commandId"
+    class="magic-command-modal"
+    :class="props.class"
+    :options="options"
+  >
+    <slot />
+  </magic-modal>
+</template>
+
+<script setup lang="ts">
+import { inject, watch, onBeforeUnmount, type MaybeRef } from 'vue'
+import { useModalApi, useModalEmitter } from '../../../MagicModal'
+import { useCommandApi } from './../composables/useCommandApi'
+import { CommandInstanceId } from './../symbols'
+
+import type { CommandModalOptions } from '../types'
+
+interface MagicCommandProps {
+  class?: MaybeRef<string>
+  options?: CommandModalOptions
+}
+
+const props = defineProps<MagicCommandProps>()
+
+const commandId = inject(CommandInstanceId, '')
+
+function afterLeaveCallback() {
+  close()
+}
+
+const { close, isActive } = useCommandApi(commandId)
+
+watch(isActive, (value) => {
+  if (value) {
+    useModalApi(commandId).open()
+  } else {
+    useModalApi(commandId).close()
+  }
+})
+
+useModalEmitter().on('afterLeave', afterLeaveCallback)
+
+onBeforeUnmount(() => {
+  useModalEmitter().off('afterLeave', afterLeaveCallback)
+})
+</script>

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

@@ -0,0 +1,24 @@
+import { type MaybeRef } from 'vue';
+import type { CommandModalOptions } from '../types';
+interface MagicCommandProps {
+    class?: MaybeRef<string>;
+    options?: CommandModalOptions;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<MagicCommandProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<MagicCommandProps>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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

@@ -0,0 +1,69 @@
+<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 { useCommandApi } from './../composables/useCommandApi'
+import { CommandInstanceId, CommandOptionsKey } from './../symbols'
+
+import type { CommandOptions } from './../types/index'
+
+import '@maas/vue-equipment/utils/css/animations/fade-in.css'
+import '@maas/vue-equipment/utils/css/animations/fade-out.css'
+
+// 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?: CommandOptions
+}
+
+const props = withDefaults(defineProps<MagicCommandProps>(), {
+  options: () => defaultOptions,
+})
+
+const keys = useMagicKeys()
+const commandApi = useCommandApi(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()
+      }
+    })
+  }
+}
+
+if (mappedOptions.keys?.close) {
+  for (const key of mappedOptions.keys.close) {
+    watch(keys[key], (value) => {
+      if (value) {
+        close()
+      }
+    })
+  }
+}
+
+onBeforeUnmount(() => {
+  close()
+})
+
+provide(CommandInstanceId, props.id)
+provide(CommandOptionsKey, mappedOptions)
+</script>

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

@@ -4,8 +4,6 @@ import '@maas/vue-equipment/utils/css/animations/fade-in.css';
 import '@maas/vue-equipment/utils/css/animations/fade-out.css';
 interface MagicCommandProps {
     id: MaybeRef<string>;
-    class?: MaybeRef<string>;
-    props?: Record<string, unknown>;
     options?: CommandOptions;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicCommandProps>, {
@@ -15,7 +13,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     options: CommandOptions;
 }, {}>, {
-    backdrop?(_: {}): any;
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/plugins/MagicCommand/src/composables/private/useCommandStore.mjs

@@ -17,34 +17,40 @@ export function useCommandStore() {
   }
   function sortItems(id, parent) {
     const instance = findInstance(id);
-    const itemElements = parent.querySelectorAll("[data-item-id]");
-    itemElements.forEach((el, index) => {
-      const itemId = el.dataset.itemId;
-      const item = instance.items.find((item2) => item2.id === itemId);
-      if (item) {
-        item.index = index;
-      }
-    });
-    instance.items.sort((a, b) => a.index - b.index);
+    if (instance) {
+      const itemElements = parent.querySelectorAll("[data-item-id]");
+      itemElements.forEach((el, index) => {
+        const itemId = el.dataset.itemId;
+        const item = instance.items?.find((item2) => item2.id === itemId);
+        if (item) {
+          item.index = index;
+        }
+      });
+      instance.items?.sort((a, b) => a.index - b.index);
+    }
   }
   function addItem(id, item) {
     const instance = findInstance(id);
-    instance.items.push({ index: -1, id: item });
+    if (instance) {
+      instance.items?.push({ index: -1, id: item });
+    }
   }
   function removeItem(id, item) {
     const instance = findInstance(id);
     if (instance) {
-      instance.items = instance.items.filter((x) => x.id !== item);
+      instance.items = instance.items?.filter((x) => x.id !== item);
     }
   }
   function addView(id, view) {
     const instance = findInstance(id);
-    instance.views.push(view);
+    if (instance) {
+      instance.views?.push(view);
+    }
   }
   function removeView(id, view) {
     const instance = findInstance(id);
     if (instance) {
-      instance.views = instance.views.filter((x) => x !== view);
+      instance.views = instance.views?.filter((x) => x !== view);
     }
   }
   return {

package/dist/plugins/MagicCommand/src/types/index.d.ts

@@ -1,17 +1,6 @@
+import type { ModalOptions } from '../../../MagicModal.js';
+import type { DrawerOptions } from '../../../MagicDrawer.js';
 export type CommandOptions = {
-    backdrop?: boolean;
-    focusTrap?: boolean;
-    scrollLock?: boolean;
-    scrollLockPadding?: boolean;
-    teleport?: {
-        target?: string;
-        disabled?: boolean;
-    };
-    transitions?: {
-        content?: string;
-        backdrop?: string;
-    };
-    tag?: 'dialog' | 'div';
     keys?: {
         open?: string[] | false;
         close?: string[] | false;
@@ -28,3 +17,7 @@ export type CommandEvents = {
     leave: string;
     afterLeave: string;
 };
+export interface CommandModalOptions extends ModalOptions {
+}
+export interface CommandDrawerOptions extends DrawerOptions {
+}

package/dist/plugins/MagicCommand/src/utils/defaultOptions.mjs

@@ -1,17 +1,4 @@
 const defaultOptions = {
-  backdrop: true,
-  focusTrap: true,
-  scrollLock: true,
-  scrollLockPadding: true,
-  teleport: {
-    target: "body",
-    disabled: false
-  },
-  transitions: {
-    content: "magic-command--content",
-    backdrop: "magic-command--backdrop"
-  },
-  tag: "dialog",
   keys: {
     open: ["Cmd+k"],
     close: ["Escape"],

package/dist/plugins/MagicDrawer/index.d.ts

@@ -2,7 +2,7 @@ import MagicDrawer from './src/components/MagicDrawer.vue.js';
 import { useDrawerApi } from './src/composables/useDrawerApi.js';
 import { useDrawerEmitter } from './src/composables/useDrawerEmitter.js';
 import type { Plugin } from 'vue';
-import type { DrawerEvents } from './src/types/index.js';
+import type { DrawerEvents, DrawerOptions } from './src/types/index.js';
 declare const MagicDrawerPlugin: Plugin;
 export { MagicDrawerPlugin, MagicDrawer, useDrawerApi, useDrawerEmitter };
-export type { DrawerEvents };
+export type { DrawerEvents, DrawerOptions };

package/dist/plugins/MagicDrawer/src/types/index.d.ts

@@ -1,5 +1,5 @@
 export type SnapPoint = number | `${string}px`;
-export type DrawerOptions = {
+export interface DrawerOptions {
     position?: 'top' | 'right' | 'bottom' | 'left';
     backdrop?: boolean;
     focusTrap?: boolean;
@@ -31,7 +31,7 @@ export type DrawerOptions = {
         initial?: SnapPoint;
     };
     canClose?: boolean;
-};
+}
 export type DrawerEvents = {
     beforeEnter: string;
     enter: string;
@@ -67,6 +67,3 @@ export type DrawerEvents = {
         y: number;
     };
 };
-export interface CustomMouseEvent extends MouseEvent {
-    custom?: string;
-}

package/dist/plugins/MagicModal/index.d.ts

@@ -2,7 +2,7 @@ import MagicModal from './src/components/MagicModal.vue.js';
 import { useModalApi } from './src/composables/useModalApi.js';
 import { useModalEmitter } from './src/composables/useModalEmitter.js';
 import type { Plugin } from 'vue';
-import type { ModalEvents } from './src/types/index.js';
+import type { ModalEvents, ModalOptions } from './src/types/index.js';
 declare const MagicModalPlugin: Plugin;
 export { MagicModalPlugin, MagicModal, useModalEmitter, useModalApi };
-export type { ModalEvents };
+export type { ModalEvents, ModalOptions };

package/dist/plugins/MagicModal/src/types/index.d.ts

@@ -1,4 +1,4 @@
-export type ModalOptions = {
+export interface ModalOptions {
     backdrop?: boolean;
     focusTrap?: boolean;
     scrollLock?: boolean;
@@ -13,7 +13,7 @@ export type ModalOptions = {
     };
     tag?: 'dialog' | 'div';
     keys?: string[] | false;
-};
+}
 export type ModalEvents = {
     beforeEnter: string;
     enter: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.22.4",
+  "version": "0.23.0",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",

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

@@ -1,179 +0,0 @@
-<template>
-  <teleport
-    v-if="wrapperActive"
-    :to="mappedOptions.teleport?.target"
-    :disabled="mappedOptions.teleport?.disabled"
-  >
-    <component
-      :is="mappedOptions.tag"
-      ref="commandRef"
-      class="magic-command"
-      :id="toValue(id)"
-      :class="toValue(props.class)"
-      aria-command="true"
-    >
-      <transition
-        v-if="mappedOptions.backdrop || !!$slots.backdrop"
-        :name="mappedOptions.transitions?.backdrop"
-      >
-        <div
-          v-show="innerActive"
-          class="magic-command__backdrop"
-          @click.self="close"
-        >
-          <slot name="backdrop" />
-        </div>
-      </transition>
-      <transition
-        :name="mappedOptions.transitions?.content"
-        @before-leave="onBeforeLeave"
-        @leave="onLeave"
-        @after-leave="onAfterLeave"
-        @before-enter="onBeforeEnter"
-        @enter="onEnter"
-        @after-enter="onAfterEnter"
-      >
-        <div
-          v-show="innerActive"
-          class="magic-command__content"
-          @click.self="close"
-        >
-          <slot />
-        </div>
-      </transition>
-    </component>
-  </teleport>
-</template>
-
-<script setup lang="ts">
-import {
-  ref,
-  watch,
-  nextTick,
-  toValue,
-  onBeforeUnmount,
-  provide,
-  type MaybeRef,
-} from 'vue'
-import { createDefu } from 'defu'
-import { useMagicKeys } from '@vueuse/core'
-import { defaultOptions } from './../utils/defaultOptions'
-import { useCommandApi } from './../composables/useCommandApi'
-import { useCommandCallback } from '../composables/private/useCommandCallback'
-import { CommandInstanceId, CommandOptionsKey } from './../symbols'
-
-import type { CommandOptions } from './../types/index'
-
-import '@maas/vue-equipment/utils/css/animations/fade-in.css'
-import '@maas/vue-equipment/utils/css/animations/fade-out.css'
-
-// 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>
-  class?: MaybeRef<string>
-  props?: Record<string, unknown>
-  options?: CommandOptions
-}
-
-const props = withDefaults(defineProps<MagicCommandProps>(), {
-  options: () => defaultOptions,
-})
-
-const keys = useMagicKeys()
-const commandRef = ref<HTMLElement | undefined>(undefined)
-const commandApi = useCommandApi(props.id, { focusTarget: commandRef })
-const mappedOptions = customDefu(props.options, defaultOptions)
-
-const {
-  isActive,
-  open,
-  close,
-  trapFocus,
-  releaseFocus,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-} = commandApi
-
-// Split isActive into two values to animate command smoothly
-const innerActive = ref(false)
-const wrapperActive = ref(false)
-
-const {
-  onBeforeEnter,
-  onEnter,
-  onAfterEnter,
-  onBeforeLeave,
-  onLeave,
-  onAfterLeave,
-} = useCommandCallback({
-  id: props.id,
-  mappedOptions,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-  lockScroll,
-  unlockScroll,
-  trapFocus,
-  releaseFocus,
-  wrapperActive,
-})
-
-// Handle state
-async function onOpen() {
-  wrapperActive.value = true
-  await nextTick()
-  innerActive.value = true
-}
-
-function onClose() {
-  innerActive.value = false
-}
-
-if (mappedOptions.keys?.open) {
-  for (const key of mappedOptions.keys.open) {
-    watch(keys[key], (value) => {
-      if (value) {
-        open()
-      }
-    })
-  }
-}
-
-if (mappedOptions.keys?.close) {
-  for (const key of mappedOptions.keys.close) {
-    watch(keys[key], (value) => {
-      if (value) {
-        close()
-      }
-    })
-  }
-}
-
-watch(isActive, async (value) => {
-  if (value) {
-    await onOpen()
-  } else {
-    onClose()
-  }
-})
-
-// Reset state on unmount
-onBeforeUnmount(() => {
-  close()
-})
-
-provide(CommandInstanceId, props.id)
-provide(CommandOptionsKey, mappedOptions)
-</script>
-
-<style>
-:root{--magic-command-z-index:999;--magic-command-backdrop-color:rgba(0,0,0,.5);--magic-command-backdrop-filter:unset;--magic-command-content-align-items:center;--magic-command-content-justify-content:center;--magic-command-content-overflow-y:auto}@keyframes magic-command-content-enter{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes magic-command-content-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.magic-command{align-items:center;background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:center;padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-command-z-index)}.magic-command__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-command-content-align-items);display:flex;justify-content:var(--magic-command-content-justify-content);max-height:100%;overflow-y:var(--magic-command-content-overflow-y);pointer-events:auto;scroll-behavior:smooth;width:100%}.magic-command__backdrop{-webkit-backdrop-filter:var(--magic-command-backdrop-filter);backdrop-filter:var(--magic-command-backdrop-filter);background-color:var(--magic-command-backdrop-color);bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-command--content-enter-active{animation:magic-command-content-enter .3s ease}.magic-command--content-leave-active{animation:magic-command-content-leave .3s ease}@media (prefers-reduced-motion){.magic-command--content-enter-active{animation:fade-in .3s ease}.magic-command--content-leave-active{animation:fade-out .3s ease}}.magic-command--backdrop-enter-active{animation:fade-in .3s ease}.magic-command--backdrop-leave-active{animation:fade-out .3s ease}
-</style>

package/dist/plugins/MagicCommand/src/composables/private/useCommandCallback.d.ts

@@ -1,22 +0,0 @@
-import { type Ref, type MaybeRef } from 'vue';
-import type { CommandOptions } from '../../types.js';
-type UseCommandCallbackArgs = {
-    id: MaybeRef<string>;
-    mappedOptions: CommandOptions;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    trapFocus: () => void;
-    releaseFocus: () => void;
-    wrapperActive: Ref<boolean>;
-};
-export declare function useCommandCallback(args: UseCommandCallbackArgs): {
-    onBeforeEnter: (_el: Element) => void;
-    onEnter: (_el: Element) => void;
-    onAfterEnter: (_el: Element) => Promise<void>;
-    onBeforeLeave: (_el: Element) => void;
-    onLeave: (_el: Element) => void;
-    onAfterLeave: (_el: Element) => void;
-};
-export {};

package/dist/plugins/MagicCommand/src/composables/private/useCommandCallback.mjs

@@ -1,61 +0,0 @@
-import { toValue, nextTick } from "vue";
-import { useCommandEmitter } from "./../useCommandEmitter.mjs";
-export function useCommandCallback(args) {
-  const {
-    id,
-    mappedOptions,
-    addScrollLockPadding,
-    removeScrollLockPadding,
-    lockScroll,
-    unlockScroll,
-    trapFocus,
-    releaseFocus,
-    wrapperActive
-  } = args;
-  function onBeforeEnter(_el) {
-    useCommandEmitter().emit("beforeEnter", toValue(id));
-    if (mappedOptions.scrollLock) {
-      if (mappedOptions.scrollLockPadding) {
-        addScrollLockPadding();
-      }
-      lockScroll();
-    }
-  }
-  function onEnter(_el) {
-    useCommandEmitter().emit("enter", toValue(id));
-  }
-  async function onAfterEnter(_el) {
-    useCommandEmitter().emit("afterEnter", toValue(id));
-    if (mappedOptions.focusTrap) {
-      await nextTick();
-      trapFocus();
-    }
-  }
-  function onBeforeLeave(_el) {
-    useCommandEmitter().emit("beforeLeave", toValue(id));
-  }
-  function onLeave(_el) {
-    useCommandEmitter().emit("leave", toValue(id));
-  }
-  function onAfterLeave(_el) {
-    useCommandEmitter().emit("afterLeave", toValue(id));
-    if (mappedOptions.scrollLock) {
-      unlockScroll();
-      if (mappedOptions.scrollLockPadding) {
-        removeScrollLockPadding();
-      }
-    }
-    if (mappedOptions.focusTrap) {
-      releaseFocus();
-    }
-    wrapperActive.value = false;
-  }
-  return {
-    onBeforeEnter,
-    onEnter,
-    onAfterEnter,
-    onBeforeLeave,
-    onLeave,
-    onAfterLeave
-  };
-}