@maas/vue-equipment 1.0.0-beta.13 → 1.0.0-beta.15

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,44 +16,39 @@ 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 }
+const { id, optional, maxAge } = defineProps({
+  id: {
+    type: String,
+    required: false
+  },
+  optional: {
+    type: Boolean,
+    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);
-    };
+  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>
 
 <style>

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

@@ -3,10 +3,10 @@ interface MagicCookieItemProps {
     optional?: boolean;
     maxAge?: number;
 }
-declare const item: import("../types").CookieItem;
+declare const item: import("../types/index.js").CookieItem;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {
-    item: import("../types").CookieItem;
+    item: import("../types/index.js").CookieItem;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_1) => any;

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

@@ -1,43 +1,32 @@
-<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 }
+defineOptions({
+  inheritAttrs: false
+});
+const { id, options } = defineProps({
+  id: {
+    type: null,
+    required: true
   },
-  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 */
-      });
-    };
+  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/MagicCookieView.vue

@@ -1,82 +1,49 @@
-<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-leave="onBeforeLeave"
+        @leave="onLeave"
+        @after-leave="onAfterLeave"
+        @before-enter="onBeforeEnter"
+        @enter="onEnter"
+        @after-enter="onAfterEnter"
+      >
+        <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 */
-      );
-    };
-  }
-});
+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>

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

@@ -1,7 +1,7 @@
 import { AutoSize } from '@maas/vue-autosize';
 import '@maas/vue-equipment/utils/css/animations/fade-in.css';
 import '@maas/vue-equipment/utils/css/animations/auto-size-out.css';
-declare const state: import("../types").CookieState;
+declare const state: import("../types/index.js").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_18: {

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

@@ -1,97 +1,81 @@
-<script>
-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"
-};
+<template>
+  <div
+    :data-id="mappedId"
+    :data-dragging="dragging"
+    :data-disabled="disabled"
+    class="magic-draggable"
+    v-bind="$attrs"
+  >
+    <div ref="wrapper" class="magic-draggable__wrapper">
+      <component
+        :is="mappedOptions.tag"
+        ref="el"
+        class="magic-draggable__drag"
+        :style="style"
+        @pointerdown="guardedPointerdown"
+        @click="guardedClick"
+      >
+        <slot />
+        <div v-if="hasDragged" class="magic-draggable__overlay" />
+      </component>
+    </div>
+  </div>
+</template>
+
+<script setup>
 import { useTemplateRef, computed, toValue, toRefs } from "vue";
 import { defu } from "defu";
 import { useDraggableDrag } from "../composables/private/useDraggableDrag";
 import { useDraggableState } from "../composables/private/useDraggableState";
 import { defaultOptions } from "../utils/defaultOptions";
-export default /* @__PURE__ */ _defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "MagicDraggable",
-  props: {
-    id: { type: null, required: true },
-    options: { type: Object, required: false, default: () => ({}) }
+defineOptions({
+  inheritAttrs: false
+});
+const { id, options = {} } = defineProps({
+  id: {
+    type: null,
+    required: true
   },
-  setup(__props) {
-    const mappedOptions = defu(__props.options, defaultOptions);
-    const elRef = useTemplateRef("el");
-    const wrapperRef = useTemplateRef("wrapper");
-    const { initializeState } = useDraggableState(__props.id);
-    const state = initializeState();
-    const { dragging } = toRefs(state);
-    const disabled = computed(() => {
-      if (__props.options.disabled === void 0) {
-        return defaultOptions.disabled;
-      } else {
-        return __props.options.disabled;
-      }
-    });
-    const { snapPoints, animation, initial, threshold, scrollLock } = mappedOptions;
-    const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
-      id: __props.id,
-      elRef,
-      wrapperRef,
-      threshold,
-      snapPoints,
-      animation,
-      initial,
-      scrollLock
-    });
-    function guardedPointerdown(event) {
-      if (!disabled.value) {
-        onPointerdown(event);
-      }
-    }
-    function guardedClick(event) {
-      if (!disabled.value) {
-        onClick(event);
-      }
-    }
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", _mergeProps({
-        "data-id": toValue(_ctx.id),
-        "data-dragging": _unref(dragging),
-        "data-disabled": disabled.value,
-        class: "magic-draggable"
-      }, _ctx.$attrs), [
-        _createElementVNode(
-          "div",
-          _hoisted_2,
-          [
-            (_openBlock(), _createBlock(_resolveDynamicComponent(_unref(mappedOptions).tag), {
-              ref: "el",
-              class: "magic-draggable__drag",
-              style: _normalizeStyle(_unref(style)),
-              onPointerdown: guardedPointerdown,
-              onClick: guardedClick
-            }, {
-              default: _withCtx(() => [
-                _renderSlot(_ctx.$slots, "default"),
-                _unref(hasDragged) ? (_openBlock(), _createElementBlock("div", _hoisted_3)) : _createCommentVNode("v-if", true)
-              ]),
-              _: 3
-              /* FORWARDED */
-            }, 40, ["style"]))
-          ],
-          512
-          /* NEED_PATCH */
-        )
-      ], 16, _hoisted_1);
-    };
+  options: {
+    type: Object,
+    required: false
+  }
+});
+const mappedOptions = defu(options, defaultOptions);
+const mappedId = toValue(id);
+const elRef = useTemplateRef("el");
+const wrapperRef = useTemplateRef("wrapper");
+const { initializeState } = useDraggableState(id);
+const state = initializeState();
+const { dragging } = toRefs(state);
+const disabled = computed(() => {
+  if (options.disabled === void 0) {
+    return defaultOptions.disabled;
+  } else {
+    return options.disabled;
   }
 });
+const { snapPoints, animation, initial, threshold, scrollLock } = mappedOptions;
+const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
+  id,
+  elRef,
+  wrapperRef,
+  threshold,
+  snapPoints,
+  animation,
+  initial,
+  scrollLock
+});
+function guardedPointerdown(event) {
+  if (!disabled.value) {
+    onPointerdown(event);
+  }
+}
+function guardedClick(event) {
+  if (!disabled.value) {
+    onClick(event);
+  }
+}
 </script>
 
 <style>

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

@@ -1,16 +1,16 @@
-import { toValue, type MaybeRef } from 'vue';
+import { type MaybeRef } from 'vue';
 import type { MagicDraggableOptions } from '../types/index.js';
 interface MagicDraggableProps {
     id: MaybeRef<string>;
     options?: MagicDraggableOptions;
 }
-declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOptions> & Omit<import("../types").DraggableDefaultOptions, keyof MagicDraggableOptions> & {
+declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOptions> & Omit<import("../types/index.js").DraggableDefaultOptions, keyof MagicDraggableOptions> & {
     threshold: ({
         lock?: number;
         distance?: number;
         momentum?: number;
         idle?: number;
-    } & import("../../../../utils").RequireAll<{
+    } & import("../../../../utils/index.js").RequireAll<{
         lock?: number;
         distance?: number;
         momentum?: number;
@@ -25,7 +25,7 @@ declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOpt
         distance?: number;
         momentum?: number;
         idle?: number;
-    } & import("../../../../utils").RequireAll<{
+    } & import("../../../../utils/index.js").RequireAll<{
         lock?: number;
         distance?: number;
         momentum?: number;
@@ -36,13 +36,17 @@ declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOpt
         momentum: number;
         idle: number;
     });
+    tag: "dialog" | "div";
+    scrollLock: boolean | {
+        padding: boolean;
+    };
     disabled: boolean;
     animation: ({
         snap?: {
             duration?: number;
             easing?: (t: number) => number;
         };
-    } & import("../../../../utils").RequireAll<{
+    } & import("../../../../utils/index.js").RequireAll<{
         snap?: {
             duration?: number;
             easing?: (t: number) => number;
@@ -57,7 +61,7 @@ declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOpt
             duration?: number;
             easing?: (t: number) => number;
         };
-    } & import("../../../../utils").RequireAll<{
+    } & import("../../../../utils/index.js").RequireAll<{
         snap?: {
             duration?: number;
             easing?: (t: number) => number;
@@ -68,15 +72,12 @@ declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOpt
             easing?: (t: number) => number;
         };
     });
-    tag: "div" | "dialog";
-    scrollLock: boolean | {
-        padding: boolean;
-    };
-    snapPoints: import("../types").DraggableSnapPoint[];
+    snapPoints: import("../types/index.js").DraggableSnapPoint[];
     initial: {
-        snapPoint?: import("../types").DraggableSnapPoint;
+        snapPoint?: import("../types/index.js").DraggableSnapPoint;
     };
 };
+declare const mappedId: string;
 declare const dragging: import("vue").Ref<boolean, boolean>;
 declare const disabled: import("vue").ComputedRef<boolean>;
 declare const style: import("vue").ComputedRef<string>, hasDragged: import("vue").ComputedRef<boolean>;
@@ -88,8 +89,8 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
     default?: (props: typeof __VLS_12) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<MagicDraggableProps, {
-    toValue: typeof toValue;
     mappedOptions: typeof mappedOptions;
+    mappedId: typeof mappedId;
     dragging: typeof dragging;
     disabled: typeof disabled;
     style: typeof style;