@maas/vue-equipment 1.0.0-beta.6 → 1.0.0-beta.7

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

@@ -1,7 +1,7 @@
 <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 { shallowRef, provide, watch, onBeforeUnmount } from "vue";
 import { useMagicKeys, usePointer } from "@vueuse/core";
 import { Primitive } from "@maas/vue-primitive";
 import { createDefu } from "defu";
@@ -17,7 +17,6 @@ export default /* @__PURE__ */ _defineComponent({
     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;
@@ -27,8 +26,8 @@ export default /* @__PURE__ */ _defineComponent({
     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 lastX = shallowRef(0);
+    const lastY = shallowRef(0);
     const { x, y } = usePointer();
     watch(
       () => state?.input.type,
@@ -74,8 +73,6 @@ export default /* @__PURE__ */ _defineComponent({
     provide(MagicCommandProviderOptions, mappedOptions);
     return (_ctx, _cache) => {
       return _openBlock(), _createBlock(_unref(Primitive), {
-        ref_key: "elRef",
-        ref: elRef,
         "as-child": _ctx.asChild,
         class: "magic-command-provider"
       }, {

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

@@ -6,99 +6,15 @@ interface MagicCommandProviderProps {
     asChild?: boolean;
     options?: MagicCommandOptions;
 }
-declare const elRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare const __VLS_0: import("vue").DefineComponent<{
-    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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_2: import("vue/jsx-runtime").JSX.Element & {
-    __ctx?: ({
-        attrs?: any;
-        slots?: Readonly<{
-            [name: string]: import("vue").Slot<any> | undefined;
-        }> | undefined;
-        emit?: ((event: string, ...args: any[]) => void) | undefined;
-    } & {
-        props?: (Partial<{
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }> & Omit<{
-            readonly asChild: boolean;
-            readonly as: import("@maas/vue-primitive").ElementOrComponent;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "asChild" | "as"> & Record<string, unknown>) | undefined;
-        expose?(exposed: 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;
-        }>): void;
-    }) | undefined;
-};
-declare var __VLS_6: (Parameters<NonNullable<(typeof __VLS_5)["expose"]>>[0] | null);
-declare var __VLS_7: {};
-declare var __VLS_5: __VLS_PickFunctionalComponentCtx<typeof __VLS_0, typeof __VLS_2>;
+declare var __VLS_6: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_6) => any;
 }>;
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_6;
-};
 declare const __VLS_self: import("vue").DefineComponent<MagicCommandProviderProps, {
     Primitive: typeof Primitive;
-    elRef: typeof elRef;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicCommandProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCommandProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,7 +1,11 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, inject, onBeforeUnmount } from "vue";
+const _hoisted_1 = {
+  ref: "el",
+  class: "magic-command-renderer"
+};
+import { inject, onBeforeUnmount, useTemplateRef } from "vue";
 import {
   useMagicEmitter
 } from "@maas/vue-equipment/plugins";
@@ -17,7 +21,7 @@ export default /* @__PURE__ */ _defineComponent({
         "MagicCommandRenderer must be nested inside MagicCommandProvider"
       );
     }
-    const elRef = ref(void 0);
+    const elRef = useTemplateRef("el");
     const { initializeState } = useCommandState(instanceId);
     const state = initializeState();
     function enterCallback(payload) {
@@ -32,11 +36,7 @@ export default /* @__PURE__ */ _defineComponent({
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock(
         "div",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-command-renderer"
-        },
+        _hoisted_1,
         null,
         512
         /* NEED_PATCH */

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

@@ -1,5 +1,2 @@
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_nativeElements['div'];
-};
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, __VLS_TemplateRefs, HTMLDivElement>;
+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

@@ -1,7 +1,7 @@
 <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 { computed, inject, useTemplateRef, toValue, watch } from "vue";
 import { Primitive } from "@maas/vue-primitive";
 import { useCommandView } from "../composables/private/useCommandView";
 import { useCommandTrigger } from "../composables/private/useCommandTrigger";
@@ -24,7 +24,7 @@ export default /* @__PURE__ */ _defineComponent({
     asChild: { type: Boolean, required: false }
   },
   setup(__props) {
-    const elRef = ref(void 0);
+    const elRef = useTemplateRef("el");
     const instanceId = inject(MagicCommandInstanceId, void 0);
     const itemActive = inject(MagicCommandItemActive, void 0);
     const itemDisabled = inject(MagicCommandItemDisabled, void 0);
@@ -75,8 +75,7 @@ export default /* @__PURE__ */ _defineComponent({
     }
     return (_ctx, _cache) => {
       return _openBlock(), _createBlock(_unref(Primitive), {
-        ref_key: "elRef",
-        ref: elRef,
+        ref: "el",
         "data-id": `${mappedViewId.value}-trigger`,
         "data-active": mappedActive.value,
         "data-disabled": mappedDisabled.value,

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

@@ -8,175 +8,21 @@ interface MagicCommandTriggerProps {
     trigger?: Interaction[];
     asChild?: boolean;
 }
-declare const elRef: import("vue").Ref<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;
-}> | undefined, 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;
-}> | undefined>;
 declare const mappedViewId: import("vue").ComputedRef<string | undefined>;
 declare const view: import("../types").CommandView | undefined;
 declare const mappedActive: import("vue").ComputedRef<boolean>;
 declare const mappedDisabled: import("vue").ComputedRef<boolean>;
 declare const onMouseenter: () => Promise<void>, onClick: (e: MouseEvent) => Promise<void>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare const __VLS_0: import("vue").DefineComponent<{
-    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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_2: import("vue/jsx-runtime").JSX.Element & {
-    __ctx?: ({
-        attrs?: any;
-        slots?: Readonly<{
-            [name: string]: import("vue").Slot<any> | undefined;
-        }> | undefined;
-        emit?: ((event: string, ...args: any[]) => void) | undefined;
-    } & {
-        props?: (Partial<{
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }> & Omit<{
-            readonly asChild: boolean;
-            readonly as: import("@maas/vue-primitive").ElementOrComponent;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "asChild" | "as"> & Record<string, unknown>) | undefined;
-        expose?(exposed: 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;
-        }>): void;
-    }) | undefined;
-};
-declare var __VLS_6: (Parameters<NonNullable<(typeof __VLS_5)["expose"]>>[0] | null);
-declare var __VLS_10: {
+declare var __VLS_12: {
     viewActive: boolean | undefined;
     triggerDisabled: boolean;
 };
-declare var __VLS_5: __VLS_PickFunctionalComponentCtx<typeof __VLS_0, typeof __VLS_2>;
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_12) => any;
 }>;
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_6;
-};
 declare const __VLS_self: import("vue").DefineComponent<MagicCommandTriggerProps, {
     Primitive: typeof Primitive;
-    elRef: typeof elRef;
     mappedViewId: typeof mappedViewId;
     view: typeof view;
     mappedActive: typeof mappedActive;
@@ -184,7 +30,7 @@ declare const __VLS_self: import("vue").DefineComponent<MagicCommandTriggerProps
     onMouseenter: typeof onMouseenter;
     onClick: typeof onClick;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicCommandTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCommandTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -5,17 +5,17 @@ interface MagicCommandViewProps {
 declare const mappedId: import("vue").ComputedRef<string>;
 declare const view: import("../types").CommandView;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {
+declare var __VLS_1: {
     viewActive: boolean;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_0) => any;
+    default?: (props: typeof __VLS_1) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<MagicCommandViewProps, {
     mappedId: typeof mappedId;
     view: typeof view;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicCommandViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCommandViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import { type MaybeRef, type Ref } from 'vue';
 interface IsElementAboveArgs {
     element: MaybeRef<HTMLElement>;
     ancestor?: HTMLElement;
@@ -15,7 +15,7 @@ interface ScrollInFromBottomArgs {
     element: MaybeRef<HTMLElement>;
     ancestor?: HTMLElement;
 }
-export declare function useCommandScroll(parent: MaybeRef<HTMLElement | undefined>): {
+export declare function useCommandScroll(parent: Ref<HTMLElement | null>): {
     findElement: (id: string) => HTMLElement | null;
     findScrollableAncestor: (element: HTMLElement | null) => HTMLElement | undefined;
     isElementAbove: (args: IsElementAboveArgs) => boolean;

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

@@ -9,7 +9,7 @@ export function useCommandState(instanceId) {
       id,
       options: { ...defaultOptions },
       views: [],
-      renderer: void 0,
+      renderer: null,
       active: false,
       input: {
         type: "pointer",

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

@@ -8,7 +8,7 @@ type UseCommandTriggerArgs = {
     mappedActive?: ComputedRef<boolean>;
     trigger: Interaction[];
     action: Action;
-    elRef: Ref<InstanceType<typeof Primitive> | undefined>;
+    elRef: Ref<InstanceType<typeof Primitive> | null>;
 };
 export declare function useCommandTrigger(args: UseCommandTriggerArgs): {
     onMouseenter: () => Promise<void>;

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

@@ -1,12 +1,12 @@
-import type { InjectionKey, MaybeRef } from 'vue';
+import type { InjectionKey, MaybeRef, Ref } from 'vue';
 import type { MagicCommandOptions } from '../types/index.js';
 declare const MagicCommandInstanceId: InjectionKey<MaybeRef<string>>;
 declare const MagicCommandParentTree: InjectionKey<string[]>;
 declare const MagicCommandViewId: InjectionKey<string>;
-declare const MagicCommandViewActive: InjectionKey<MaybeRef<boolean>>;
+declare const MagicCommandViewActive: InjectionKey<Ref<boolean>>;
 declare const MagicCommandContentId: InjectionKey<string>;
 declare const MagicCommandItemId: InjectionKey<string>;
-declare const MagicCommandItemActive: InjectionKey<MaybeRef<boolean>>;
-declare const MagicCommandItemDisabled: InjectionKey<MaybeRef<boolean>>;
+declare const MagicCommandItemActive: InjectionKey<Ref<boolean>>;
+declare const MagicCommandItemDisabled: InjectionKey<Ref<boolean>>;
 declare const MagicCommandProviderOptions: InjectionKey<MagicCommandOptions>;
 export { MagicCommandInstanceId, MagicCommandParentTree, MagicCommandViewId, MagicCommandViewActive, MagicCommandContentId, MagicCommandItemId, MagicCommandItemActive, MagicCommandItemDisabled, MagicCommandProviderOptions, };

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

@@ -46,7 +46,7 @@ export interface CommandState {
     id: string;
     active: boolean;
     views: CommandView[];
-    renderer: HTMLElement | undefined;
+    renderer: HTMLElement | null;
     options: MagicCommandOptions;
     input: {
         type: 'keyboard' | 'pointer';

package/dist/plugins/MagicCookie/src/components/MagicCookieItem.vue.d.ts

@@ -5,16 +5,16 @@ interface MagicCookieItemProps {
 }
 declare const item: import("../types").CookieItem;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {
+declare var __VLS_1: {
     item: import("../types").CookieItem;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_0) => any;
+    default?: (props: typeof __VLS_1) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<MagicCookieItemProps, {
     item: typeof item;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCookieItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicCookieItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCookieItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCookieItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCookieItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/plugins/MagicCookie/src/components/MagicCookieView.vue.d.ts

@@ -4,11 +4,11 @@ import '@maas/vue-equipment/utils/css/animations/auto-size-out.css';
 declare const state: import("../types").CookieState;
 declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => Promise<void>, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_19: {
+declare var __VLS_18: {
     viewActive: boolean;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_18) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<{}, {
     AutoSize: typeof AutoSize;
@@ -20,7 +20,7 @@ declare const __VLS_self: import("vue").DefineComponent<{}, {
     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, {}, HTMLDivElement>;
+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 & {

package/dist/plugins/MagicCookie/src/symbols/index.d.ts

@@ -1,5 +1,5 @@
-import type { InjectionKey, MaybeRef } from 'vue';
+import type { InjectionKey, MaybeRef, Ref } from 'vue';
 declare const MagicCookieInstanceId: InjectionKey<MaybeRef<string>>;
 declare const MagicCookieItemId: InjectionKey<string>;
-declare const MagicCookieItemActive: InjectionKey<MaybeRef<boolean>>;
+declare const MagicCookieItemActive: InjectionKey<Ref<boolean>>;
 export { MagicCookieInstanceId, MagicCookieItemId, MagicCookieItemActive };

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

@@ -3,10 +3,14 @@ import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, normalizeStyle as _normalizeStyle, withCtx as _withCtx, createBlock as _createBlock, createElementVNode as _createElementVNode, mergeProps as _mergeProps } from "vue";
 const _hoisted_1 = ["data-id", "data-dragging", "data-disabled"];
 const _hoisted_2 = {
+  ref: "wrapper",
+  class: "magic-draggable__wrapper"
+};
+const _hoisted_3 = {
   key: 0,
   class: "magic-draggable__overlay"
 };
-import { ref, computed, toValue, toRefs } from "vue";
+import { useTemplateRef, computed, toValue, toRefs } from "vue";
 import { defu } from "defu";
 import { useDraggableDrag } from "../composables/private/useDraggableDrag";
 import { useDraggableState } from "../composables/private/useDraggableState";
@@ -22,8 +26,8 @@ export default /* @__PURE__ */ _defineComponent({
   },
   setup(__props) {
     const mappedOptions = defu(__props.options, defaultOptions);
-    const elRef = ref(void 0);
-    const wrapperRef = ref(void 0);
+    const elRef = useTemplateRef("el");
+    const wrapperRef = useTemplateRef("wrapper");
     const { initializeState } = useDraggableState(__props.id);
     const state = initializeState();
     const { dragging } = toRefs(state);
@@ -57,7 +61,6 @@ export default /* @__PURE__ */ _defineComponent({
     }
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock("div", _mergeProps({
-        ref: "drawerRef",
         "data-id": toValue(_ctx.id),
         "data-dragging": _unref(dragging),
         "data-disabled": disabled.value,
@@ -65,15 +68,10 @@ export default /* @__PURE__ */ _defineComponent({
       }, _ctx.$attrs), [
         _createElementVNode(
           "div",
-          {
-            ref_key: "wrapperRef",
-            ref: wrapperRef,
-            class: "magic-draggable__wrapper"
-          },
+          _hoisted_2,
           [
             (_openBlock(), _createBlock(_resolveDynamicComponent(_unref(mappedOptions).tag), {
-              ref_key: "elRef",
-              ref: elRef,
+              ref: "el",
               class: "magic-draggable__drag",
               style: _normalizeStyle(_unref(style)),
               onPointerdown: guardedPointerdown,
@@ -81,7 +79,7 @@ export default /* @__PURE__ */ _defineComponent({
             }, {
               default: _withCtx(() => [
                 _renderSlot(_ctx.$slots, "default"),
-                _unref(hasDragged) ? (_openBlock(), _createElementBlock("div", _hoisted_2)) : _createCommentVNode("v-if", true)
+                _unref(hasDragged) ? (_openBlock(), _createElementBlock("div", _hoisted_3)) : _createCommentVNode("v-if", true)
               ]),
               _: 3
               /* FORWARDED */