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

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

@@ -7,33 +7,17 @@ interface MagicCommandTriggerProps {
     trigger?: Interaction[];
     asChild?: boolean;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            viewActive: any;
-            triggerDisabled: any;
-        }): any;
-    };
-    refs: {
-        elRef: any;
-    };
-    rootEl: any;
+declare var __VLS_12: {
+    viewActive: boolean | undefined;
+    triggerDisabled: boolean;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandTriggerProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandTriggerProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
+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 & {
     new (): {
         $slots: S;
     };

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

@@ -1,7 +1,10 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = ["id"];
+<template>
+  <div :data-id="mappedId" class="magic-menu-view">
+    <slot :view-active="view.active" />
+  </div>
+</template>
+
+<script setup>
 import { computed, inject, onBeforeUnmount, provide, useId, watch } from "vue";
 import { useCommandView } from "../composables/private/useCommandView";
 import {
@@ -11,50 +14,35 @@ import {
   MagicCommandItemId,
   MagicCommandViewActive
 } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicCommandView",
-  props: {
-    id: { type: String, required: false },
-    initial: { type: Boolean, required: false, default: false }
-  },
-  setup(__props) {
-    const parentTree = inject(MagicCommandParentTree, []);
-    const instanceId = inject(MagicCommandInstanceId, void 0);
-    const itemId = inject(MagicCommandItemId, void 0);
-    if (!instanceId) {
-      throw new Error("MagicCommandView must be nested inside MagicCommandProvider");
-    }
-    const mappedId = computed(() => __props.id ?? `magic-command-view-${useId()}`);
-    const mappedParentTree = computed(() => [...parentTree, mappedId.value]);
-    const mappedActive = computed(() => view.active);
-    const { initializeView, deleteView, sortViewItems } = useCommandView(instanceId);
-    const view = initializeView({
-      id: mappedId.value,
-      parent: { views: parentTree, item: itemId ?? "" },
-      initial: __props.initial
-    });
-    provide(MagicCommandViewId, mappedId.value);
-    provide(MagicCommandViewActive, mappedActive);
-    provide(MagicCommandParentTree, mappedParentTree.value);
-    watch(
-      () => view?.items,
-      () => {
-        sortViewItems(mappedId.value);
-      }
-    );
-    onBeforeUnmount(() => {
-      deleteView(mappedId.value);
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", {
-        id: mappedId.value,
-        class: "magic-menu-view"
-      }, [
-        _renderSlot(_ctx.$slots, "default", {
-          viewActive: _unref(view).active
-        })
-      ], 8, _hoisted_1);
-    };
+const { id, initial = false } = defineProps({
+  id: { type: String, required: false },
+  initial: { type: Boolean, required: false }
+});
+const parentTree = inject(MagicCommandParentTree, []);
+const instanceId = inject(MagicCommandInstanceId, void 0);
+const itemId = inject(MagicCommandItemId, void 0);
+if (!instanceId) {
+  throw new Error("MagicCommandView must be nested inside MagicCommandProvider");
+}
+const mappedId = computed(() => id ?? `magic-command-view-${useId()}`);
+const mappedParentTree = computed(() => [...parentTree, mappedId.value]);
+const mappedActive = computed(() => view.active);
+const { initializeView, deleteView, sortViewItems } = useCommandView(instanceId);
+const view = initializeView({
+  id: mappedId.value,
+  parent: { views: parentTree, item: itemId ?? "" },
+  initial
+});
+provide(MagicCommandViewId, mappedId.value);
+provide(MagicCommandViewActive, mappedActive);
+provide(MagicCommandParentTree, mappedParentTree.value);
+watch(
+  () => view?.items,
+  () => {
+    sortViewItems(mappedId.value);
   }
+);
+onBeforeUnmount(() => {
+  deleteView(mappedId.value);
 });
 </script>

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

@@ -2,30 +2,16 @@ interface MagicCommandViewProps {
     id?: string;
     initial?: boolean;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            viewActive: any;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
+declare var __VLS_1: {
+    viewActive: boolean;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandViewProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandViewProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
+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 & {
     new (): {
         $slots: S;
     };

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,11 +8,11 @@ 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>;
     onClick: (e: MouseEvent) => Promise<void>;
-    onEnter: (e?: KeyboardEvent) => Promise<void>;
+    onKeypress: (e?: KeyboardEvent) => Promise<void>;
 };
 export {};

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

@@ -1,4 +1,5 @@
 import { nextTick } from "vue";
+import { Primitive } from "@maas/vue-primitive";
 import { useFocus } from "@vueuse/core";
 import { useCommandView } from "./useCommandView.mjs";
 import { useCommandState } from "./useCommandState.mjs";
@@ -17,7 +18,7 @@ export function useCommandTrigger(args) {
   const { initializeState } = useCommandState(instanceId);
   const state = initializeState();
   const { focused } = useFocus(elRef);
-  async function onEnter(e) {
+  async function onKeypress(e) {
     if ((focused.value || mappedActive?.value) && !mappedDisabled.value && !view?.active) {
       e?.preventDefault();
       e?.stopPropagation();
@@ -71,6 +72,6 @@ export function useCommandTrigger(args) {
   return {
     onMouseenter,
     onClick,
-    onEnter
+    onKeypress
   };
 }

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,14 +46,14 @@ export interface CommandState {
     id: string;
     active: boolean;
     views: CommandView[];
-    renderer: HTMLElement | undefined;
+    renderer: HTMLElement | null;
     options: MagicCommandOptions;
     input: {
         type: 'keyboard' | 'pointer';
         view: string | undefined;
     };
 }
-export type CommandEvents = {
+export interface CommandEvents {
     beforeEnter: {
         id: string;
         viewId: string;
@@ -78,6 +78,6 @@ export type CommandEvents = {
         id: string;
         viewId: string;
     };
-};
+}
 export type { MagicModalOptions as MagicCommandModalOptions };
 export type { MagicDrawerOptions as MagicCommandDrawerOptions };

package/dist/plugins/MagicCookie/nuxt.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("@nuxt/schema").NuxtModule<import("@nuxt/schema").ModuleOptions, import("@nuxt/schema").ModuleOptions, false>;
+declare const _default: import("nuxt/schema").NuxtModule<import("nuxt/schema").ModuleOptions, import("nuxt/schema").ModuleOptions, false>;
 export default _default;

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

@@ -1,7 +1,14 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = ["data-optional", "data-active"];
+<template>
+  <div
+    class="magic-cookie-item"
+    :data-optional="item.optional"
+    :data-active="item.active"
+  >
+    <slot :item="item" />
+  </div>
+</template>
+
+<script setup>
 import { computed, inject, provide, onBeforeUnmount, useId } from "vue";
 import { useCookieItem } from "../composables/private/useCookieItem";
 import {
@@ -9,43 +16,29 @@ import {
   MagicCookieItemId,
   MagicCookieItemActive
 } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicCookieItem",
-  props: {
-    id: { type: String, required: false },
-    optional: { type: Boolean, required: false },
-    maxAge: { type: Number, required: false }
-  },
-  setup(__props) {
-    const instanceId = inject(MagicCookieInstanceId, void 0);
-    if (!instanceId) {
-      throw new Error("MagicCookieItem must be nested inside MagicCookieProvider");
-    }
-    const mappedId = computed(() => __props.id ?? `magic-cookie-item-${useId()}`);
-    const mappedActive = computed(() => item.active);
-    const { initializeItem, deleteItem } = useCookieItem({
-      instanceId
-    });
-    const item = initializeItem({
-      id: mappedId.value,
-      optional: __props.optional,
-      maxAge: __props.maxAge
-    });
-    provide(MagicCookieItemId, mappedId.value);
-    provide(MagicCookieItemActive, mappedActive);
-    onBeforeUnmount(() => {
-      deleteItem(mappedId.value);
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", {
-        class: "magic-cookie-item",
-        "data-optional": _unref(item).optional,
-        "data-active": _unref(item).active
-      }, [
-        _renderSlot(_ctx.$slots, "default", { item: _unref(item) })
-      ], 8, _hoisted_1);
-    };
-  }
+const { id, optional, maxAge } = defineProps({
+  id: { type: String, required: false },
+  optional: { type: Boolean, required: false },
+  maxAge: { type: Number, required: false }
+});
+const instanceId = inject(MagicCookieInstanceId, void 0);
+if (!instanceId) {
+  throw new Error("MagicCookieItem must be nested inside MagicCookieProvider");
+}
+const mappedId = computed(() => id ?? `magic-cookie-item-${useId()}`);
+const mappedActive = computed(() => item.active);
+const { initializeItem, deleteItem } = useCookieItem({
+  instanceId
+});
+const item = initializeItem({
+  id: mappedId.value,
+  optional,
+  maxAge
+});
+provide(MagicCookieItemId, mappedId.value);
+provide(MagicCookieItemActive, mappedActive);
+onBeforeUnmount(() => {
+  deleteItem(mappedId.value);
 });
 </script>
 

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

@@ -3,30 +3,16 @@ interface MagicCookieItemProps {
     optional?: boolean;
     maxAge?: number;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            item: any;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
+declare var __VLS_1: {
+    item: import("../types/index.js").CookieItem;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCookieItemProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCookieItemProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
+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 & {
     new (): {
         $slots: S;
     };

package/dist/plugins/MagicCookie/src/components/MagicCookieProvider.vue

@@ -1,43 +1,26 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { renderSlot as _renderSlot, mergeProps as _mergeProps, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+<template>
+  <client-only>
+    <div class="magic-cookie-provider" v-bind="$attrs">
+      <slot />
+    </div>
+  </client-only>
+</template>
+
+<script setup>
 import { provide } from "vue";
 import { defu } from "defu";
 import { useCookieState } from "../composables/private/useCookieState";
 import { defaultOptions } from "../utils/defaultOptions";
 import { MagicCookieInstanceId } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "MagicCookieProvider",
-  props: {
-    id: { type: null, required: true },
-    options: { type: Object, required: false }
-  },
-  setup(__props) {
-    const mappedOptions = defu(__props.options, defaultOptions);
-    const { initializeState } = useCookieState(__props.id);
-    initializeState(mappedOptions);
-    provide(MagicCookieInstanceId, __props.id);
-    return (_ctx, _cache) => {
-      const _component_client_only = _resolveComponent("client-only");
-      return _openBlock(), _createBlock(_component_client_only, null, {
-        default: _withCtx(() => [
-          _createElementVNode(
-            "div",
-            _mergeProps({ class: "magic-cookie-provider" }, _ctx.$attrs),
-            [
-              _renderSlot(_ctx.$slots, "default")
-            ],
-            16
-            /* FULL_PROPS */
-          )
-        ]),
-        _: 3
-        /* FORWARDED */
-      });
-    };
-  }
+defineOptions({
+  inheritAttrs: false
 });
+const { id, options } = defineProps({
+  id: { type: null, required: true },
+  options: { type: Object, required: false }
+});
+const mappedOptions = defu(options, defaultOptions);
+const { initializeState } = useCookieState(id);
+initializeState(mappedOptions);
+provide(MagicCookieInstanceId, id);
 </script>

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

@@ -4,28 +4,14 @@ type MagicCookieProviderProps = {
     id: MaybeRef<string>;
     options?: MagicCookieOptions;
 };
-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<MagicCookieProviderProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCookieProviderProps>>> & 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<MagicCookieProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCookieProviderProps> & 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/MagicCookie/src/components/MagicCookieView.vue

@@ -1,82 +1,50 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = { class: "magic-cookie-view__inner" };
+<template>
+  <div
+    class="magic-cookie-view"
+    :style="{ '--mc-duration': `${state.options.animation?.duration}ms` }"
+  >
+    <auto-size :width="false">
+      <transition
+        :name="state.options.transition"
+        @before-enter="onBeforeEnter"
+        @enter="onEnter"
+        @after-enter="onAfterEnter"
+        @before-leave="onBeforeLeave"
+        @leave="onLeave"
+        @after-leave="onAfterLeave"
+      >
+        <div v-show="state.viewActive" class="magic-cookie-view__inner">
+          <slot :view-active="state.viewActive" />
+        </div>
+      </transition>
+    </auto-size>
+  </div>
+</template>
+
+<script setup>
 import { inject } from "vue";
 import { AutoSize } from "@maas/vue-autosize";
 import { useCookieState } from "../composables/private/useCookieState";
 import { useCookieCallback } from "../composables/private/useCookieCallback";
 import { MagicCookieInstanceId } from "../symbols";
-import "@maas/vue-equipment/utils/css/animations/fade-in.css";
-import "@maas/vue-equipment/utils/css/animations/auto-size-out.css";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicCookieView",
-  setup(__props) {
-    const instanceId = inject(MagicCookieInstanceId, void 0);
-    if (!instanceId) {
-      throw new Error(
-        "MagicCookiePreferences must be used within a MagicCookieProvider"
-      );
-    }
-    const { initializeState } = useCookieState(instanceId);
-    const state = initializeState();
-    const {
-      onBeforeEnter,
-      onEnter,
-      onAfterEnter,
-      onBeforeLeave,
-      onLeave,
-      onAfterLeave
-    } = useCookieCallback(instanceId);
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        {
-          class: "magic-cookie-view",
-          style: _normalizeStyle({ "--mc-duration": `${_unref(state).options.animation?.duration}ms` })
-        },
-        [
-          _createVNode(_unref(AutoSize), { width: false }, {
-            default: _withCtx(() => [
-              _createVNode(_Transition, {
-                name: _unref(state).options.transition,
-                onBeforeLeave: _unref(onBeforeLeave),
-                onLeave: _unref(onLeave),
-                onAfterLeave: _unref(onAfterLeave),
-                onBeforeEnter: _unref(onBeforeEnter),
-                onEnter: _unref(onEnter),
-                onAfterEnter: _unref(onAfterEnter),
-                persisted: ""
-              }, {
-                default: _withCtx(() => [
-                  _withDirectives(_createElementVNode(
-                    "div",
-                    _hoisted_1,
-                    [
-                      _renderSlot(_ctx.$slots, "default", {
-                        viewActive: _unref(state).viewActive
-                      })
-                    ],
-                    512
-                    /* NEED_PATCH */
-                  ), [
-                    [_vShow, _unref(state).viewActive]
-                  ])
-                ]),
-                _: 3
-                /* FORWARDED */
-              }, 8, ["name", "onBeforeLeave", "onLeave", "onAfterLeave", "onBeforeEnter", "onEnter", "onAfterEnter"])
-            ]),
-            _: 3
-            /* FORWARDED */
-          })
-        ],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
+import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/auto-size-out.css";
+const instanceId = inject(MagicCookieInstanceId, void 0);
+if (!instanceId) {
+  throw new Error(
+    "MagicCookiePreferences must be used within a MagicCookieProvider"
+  );
+}
+const { initializeState } = useCookieState(instanceId);
+const state = initializeState();
+const {
+  onBeforeEnter,
+  onEnter,
+  onAfterEnter,
+  onBeforeLeave,
+  onLeave,
+  onAfterLeave
+} = useCookieCallback(instanceId);
 </script>
 
 <style>