@maas/vue-equipment 1.0.0-beta.12 → 1.0.0-beta.14

package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue

@@ -1,10 +1,10 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = {
-  ref: "el",
-  class: "magic-scroll-collision"
-};
+<template>
+  <div ref="el" class="magic-scroll-collision">
+    <slot />
+  </div>
+</template>
+
+<script setup>
 import {
   shallowRef,
   inject,
@@ -18,60 +18,50 @@ import {
 import { useCollisionDetection } from "../composables/private/useCollisionDetection";
 import { MagicScrollReturn, MagicScrollTarget } from "../symbols";
 import { useIntersectionObserver } from "@vueuse/core";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicScrollCollision",
-  props: {
-    id: { type: String, required: false },
-    offset: { type: Object, required: false }
+const { id, offset } = defineProps({
+  id: {
+    type: String,
+    required: false
   },
-  setup(__props) {
-    const scrollReturn = inject(MagicScrollReturn, void 0);
-    const scrollTarget = inject(MagicScrollTarget);
-    if (!scrollTarget) {
-      console.error(
-        "MagicScrollCollision must be used within a MagicScrollProvider"
-      );
-    }
-    const intersecting = shallowRef(false);
-    const elRef = useTemplateRef("el");
-    const scrollY = computed(() => toValue(scrollReturn?.y) || 0);
-    const mappedId = computed(() => __props.id ?? `magic-scroll-collision-${useId()}`);
-    const { observe } = useCollisionDetection({
-      id: mappedId.value,
-      child: elRef,
-      parent: scrollTarget,
-      scrollY,
-      offset: __props.offset
-    });
-    watch(
-      () => scrollY.value,
-      () => {
-        if (intersecting.value) {
-          observe();
-        }
-      }
-    );
-    useIntersectionObserver(
-      elRef,
-      ([{ isIntersecting }]) => {
-        intersecting.value = isIntersecting;
-      },
-      { rootMargin: "150% 0px 150% 0px", immediate: true }
-    );
-    onMounted(() => {
+  offset: {
+    type: Object,
+    required: false
+  }
+});
+const scrollReturn = inject(MagicScrollReturn, void 0);
+const scrollTarget = inject(MagicScrollTarget);
+if (!scrollTarget) {
+  console.error(
+    "MagicScrollCollision must be used within a MagicScrollProvider"
+  );
+}
+const intersecting = shallowRef(false);
+const elRef = useTemplateRef("el");
+const scrollY = computed(() => toValue(scrollReturn?.y) || 0);
+const mappedId = computed(() => id ?? `magic-scroll-collision-${useId()}`);
+const { observe } = useCollisionDetection({
+  id: mappedId.value,
+  child: elRef,
+  parent: scrollTarget,
+  scrollY,
+  offset
+});
+watch(
+  () => scrollY.value,
+  () => {
+    if (intersecting.value) {
       observe();
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        _hoisted_1,
-        [
-          _renderSlot(_ctx.$slots, "default")
-        ],
-        512
-        /* NEED_PATCH */
-      );
-    };
+    }
   }
+);
+useIntersectionObserver(
+  elRef,
+  ([{ isIntersecting }]) => {
+    intersecting.value = isIntersecting;
+  },
+  { rootMargin: "150% 0px 150% 0px", immediate: true }
+);
+onMounted(() => {
+  observe();
 });
 </script>

package/dist/plugins/MagicScroll/src/components/MagicScrollMotion.vue

@@ -1,10 +1,10 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = {
-  ref: "el",
-  class: "magic-scroll-motion"
-};
+<template>
+  <div ref="el" class="magic-scroll-motion">
+    <slot />
+  </div>
+</template>
+
+<script setup>
 import { ref, inject, computed, onMounted, watch, useTemplateRef } from "vue";
 import { unrefElement } from "@vueuse/core";
 import defu from "defu";
@@ -12,70 +12,63 @@ import {
   animate
 } from "motion";
 import { MagicScrollProgress } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicScrollMotion",
-  props: {
-    sequence: { type: Array, required: true },
-    sequenceOptions: { type: Object, required: false },
-    progress: { type: Number, required: false }
+const { progress, sequence, sequenceOptions } = defineProps({
+  sequence: {
+    type: Array,
+    required: true
+  },
+  sequenceOptions: {
+    type: Object,
+    required: false
+  },
+  progress: {
+    type: Number,
+    required: false
+  }
+});
+const animation = ref(void 0);
+const elRef = useTemplateRef("el");
+const injectedProgress = inject(
+  MagicScrollProgress,
+  computed(() => 0)
+);
+const mappedProgress = computed(() => {
+  return progress || injectedProgress.value || 0;
+});
+const defaultSequenceOptions = {
+  duration: 1,
+  delay: 0
+};
+const mappedSequenceOptions = defu(sequenceOptions, defaultSequenceOptions);
+function createAnimation() {
+  const el = unrefElement(elRef);
+  if (!sequence || !sequence.length || !el) {
+    return;
+  }
+  const mappedSequence = sequence.map((item) => {
+    const [animation2 = [], options = {}] = item;
+    return [el, animation2, options];
+  });
+  animation.value = animate(mappedSequence, mappedSequenceOptions);
+  animation.value.pause();
+  animation.value.time = mappedProgress.value;
+}
+watch(mappedProgress, (value) => {
+  if (!value && value !== 0 || !animation.value) {
+    return;
+  }
+  animation.value.time = value;
+});
+watch(
+  () => sequence,
+  () => {
+    createAnimation();
   },
-  setup(__props) {
-    const animation = ref(void 0);
-    const elRef = useTemplateRef("el");
-    const injectedProgress = inject(
-      MagicScrollProgress,
-      computed(() => 0)
-    );
-    const mappedProgress = computed(() => {
-      return __props.progress || injectedProgress.value || 0;
-    });
-    const defaultSequenceOptions = {
-      duration: 1,
-      delay: 0
-    };
-    const mappedSequenceOptions = defu(__props.sequenceOptions, defaultSequenceOptions);
-    function createAnimation() {
-      const el = unrefElement(elRef);
-      if (!__props.sequence || !__props.sequence.length || !el) {
-        return;
-      }
-      const mappedSequence = __props.sequence.map((item) => {
-        const [animation2 = [], options = {}] = item;
-        return [el, animation2, options];
-      });
-      animation.value = animate(mappedSequence, mappedSequenceOptions);
-      animation.value.pause();
-      animation.value.time = mappedProgress.value;
-    }
-    watch(mappedProgress, (value) => {
-      if (!value && value !== 0 || !animation.value) {
-        return;
-      }
-      animation.value.time = value;
-    });
-    watch(
-      () => __props.sequence,
-      () => {
-        createAnimation();
-      },
-      {
-        deep: true
-      }
-    );
-    onMounted(() => {
-      createAnimation();
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        _hoisted_1,
-        [
-          _renderSlot(_ctx.$slots, "default")
-        ],
-        512
-        /* NEED_PATCH */
-      );
-    };
+  {
+    deep: true
   }
+);
+onMounted(() => {
+  createAnimation();
 });
 </script>

package/dist/plugins/MagicScroll/src/components/MagicScrollProvider.vue

@@ -1,40 +1,36 @@
-<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 = { class: "magic-scroll-provider" };
+<template>
+  <div class="magic-scroll-provider">
+    <slot :scroll-return="scrollReturn" />
+  </div>
+</template>
+
+<script setup>
 import { provide, computed } from "vue";
 import { useScroll, unrefElement } from "@vueuse/core";
 import { MagicScrollReturn, MagicScrollTarget } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicScrollProvider",
-  props: {
-    target: { type: null, required: false }
-  },
-  setup(__props) {
-    const mappedTarget = computed(() => {
-      switch (true) {
-        case !!__props.target:
-          return unrefElement(__props.target);
-        case typeof window !== "undefined":
-          return window;
-        default:
-          return void 0;
-      }
-    });
-    const providedTarget = computed(() => {
-      if (__props.target) {
-        return unrefElement(__props.target);
-      }
+const { target } = defineProps({
+  target: {
+    type: null,
+    required: false
+  }
+});
+const mappedTarget = computed(() => {
+  switch (true) {
+    case !!target:
+      return unrefElement(target);
+    case typeof window !== "undefined":
+      return window;
+    default:
       return void 0;
-    });
-    const scrollReturn = useScroll(mappedTarget);
-    provide(MagicScrollReturn, scrollReturn);
-    provide(MagicScrollTarget, providedTarget);
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", _hoisted_1, [
-        _renderSlot(_ctx.$slots, "default", { scrollReturn: _unref(scrollReturn) })
-      ]);
-    };
   }
 });
+const providedTarget = computed(() => {
+  if (target) {
+    return unrefElement(target);
+  }
+  return void 0;
+});
+const scrollReturn = useScroll(mappedTarget);
+provide(MagicScrollReturn, scrollReturn);
+provide(MagicScrollTarget, providedTarget);
 </script>

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue

@@ -1,10 +1,10 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = {
-  ref: "el",
-  class: "magic-scroll-scene"
-};
+<template>
+  <div ref="el" class="magic-scroll-scene">
+    <slot :progress="progress" />
+  </div>
+</template>
+
+<script setup>
 import {
   shallowRef,
   provide,
@@ -21,69 +21,59 @@ import {
   MagicScrollProgress,
   MagicScrollReturn
 } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicScrollScene",
-  props: {
-    from: { type: String, required: false, default: "top-bottom" },
-    to: { type: String, required: false, default: "bottom-top" }
+const { from = "top-bottom", to = "bottom-top" } = defineProps({
+  from: {
+    type: String,
+    required: false
   },
-  setup(__props) {
-    const scrollReturn = inject(MagicScrollReturn, void 0);
-    const scrollTarget = inject(MagicScrollTarget, void 0);
-    if (!scrollTarget) {
-      console.error("MagicScrollScene must be used within a MagicScrollProvider");
-    }
-    const progress = shallowRef(0);
-    const intersecting = shallowRef(false);
-    const elRef = useTemplateRef("el");
-    const { getCalculations, getProgress } = useScrollApi({
-      child: elRef,
-      parent: scrollTarget,
-      from: __props.from,
-      to: __props.to
-    });
-    async function calculate() {
-      getCalculations();
-      await nextTick();
-      progress.value = getProgress();
-    }
-    watch(
-      () => scrollReturn?.y.value,
-      () => {
-        if (intersecting.value) {
-          calculate();
-        }
-      }
-    );
-    watch(
-      () => scrollReturn?.y.value,
-      () => {
-        calculate();
-      },
-      { once: true }
-    );
-    useIntersectionObserver(
-      elRef,
-      ([{ isIntersecting }]) => {
-        intersecting.value = isIntersecting;
-        if (isIntersecting) {
-          calculate();
-        }
-      },
-      { rootMargin: "150% 0px 150% 0px", immediate: true }
-    );
-    provide(MagicScrollProgress, readonly(progress));
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        _hoisted_1,
-        [
-          _renderSlot(_ctx.$slots, "default", { progress: progress.value })
-        ],
-        512
-        /* NEED_PATCH */
-      );
-    };
+  to: {
+    type: String,
+    required: false
   }
 });
+const scrollReturn = inject(MagicScrollReturn, void 0);
+const scrollTarget = inject(MagicScrollTarget, void 0);
+if (!scrollTarget) {
+  console.error("MagicScrollScene must be used within a MagicScrollProvider");
+}
+const progress = shallowRef(0);
+const intersecting = shallowRef(false);
+const elRef = useTemplateRef("el");
+const { getCalculations, getProgress } = useScrollApi({
+  child: elRef,
+  parent: scrollTarget,
+  from,
+  to
+});
+async function calculate() {
+  getCalculations();
+  await nextTick();
+  progress.value = getProgress();
+}
+watch(
+  () => scrollReturn?.y.value,
+  () => {
+    if (intersecting.value) {
+      calculate();
+    }
+  }
+);
+watch(
+  () => scrollReturn?.y.value,
+  () => {
+    calculate();
+  },
+  { once: true }
+);
+useIntersectionObserver(
+  elRef,
+  ([{ isIntersecting }]) => {
+    intersecting.value = isIntersecting;
+    if (isIntersecting) {
+      calculate();
+    }
+  },
+  { rootMargin: "150% 0px 150% 0px", immediate: true }
+);
+provide(MagicScrollProgress, readonly(progress));
 </script>

package/dist/plugins/MagicToast/src/components/MagicToastProvider.vue

@@ -1,9 +1,48 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, createBlock as _createBlock, withCtx as _withCtx, TransitionGroup as _TransitionGroup, createVNode as _createVNode, createElementVNode as _createElementVNode, Teleport as _Teleport } from "vue";
-const _hoisted_1 = ["data-id", "data-position", "data-expanded"];
+<template>
+  <teleport
+    :to="state.options.teleport?.target"
+    :disabled="state.options.teleport?.disabled"
+  >
+    <div
+      :data-id="toValue(id)"
+      :data-position="state.options.position"
+      :data-expanded="state.expanded"
+      class="magic-toast-provider"
+      v-bind="$attrs"
+    >
+      <transition-group
+        ref="list"
+        tag="ol"
+        class="magic-toast-provider__list"
+        :name="state.options.transition"
+        :on-before-enter="onBeforeEnter"
+        :on-enter="onEnter"
+        :on-after-enter="onAfterEnter"
+        :on-before-leave="onBeforeLeave"
+        :on-leave="onLeave"
+        :on-after-leave="onAfterLeave"
+        @mouseenter="onMouseenter"
+        @mouseleave="onMouseleave"
+      >
+        <magic-toast-view
+          v-for="(view, index) in state.views"
+          :id="view.id"
+          :key="view.id"
+          :index="index"
+        >
+          <component
+            :is="view.component"
+            v-bind="view.props"
+            @remove="deleteView(view.id)"
+          />
+        </magic-toast-view>
+      </transition-group>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
 import {
-  toValue,
   useTemplateRef,
   provide,
   watch,
@@ -13,7 +52,6 @@ import { onClickOutside } from "@vueuse/core";
 import { useToastState } from "../composables/private/useToastState";
 import { useToastView } from "../composables/private/useToastView";
 import { useToastCallback } from "../composables/private/useToastCallback";
-import MagicToastView from "./MagicToastView.vue";
 import { MagicToastInstanceId } from "../../symbols";
 import "@maas/vue-equipment/utils/css/animations/fade-out.css";
 import "@maas/vue-equipment/utils/css/animations/squash-y.css";
@@ -22,99 +60,46 @@ import "@maas/vue-equipment/utils/css/animations/slide-ltr-out.css";
 import "@maas/vue-equipment/utils/css/animations/slide-rtl-in.css";
 import "@maas/vue-equipment/utils/css/animations/slide-rtl-out.css";
 import { useToastListener } from "../composables/private/useToastListener";
-export default /* @__PURE__ */ _defineComponent({
-  ...{
-    inheritAttrs: false
+const { id, options } = defineProps({
+  id: {
+    type: null,
+    required: true
   },
-  __name: "MagicToastProvider",
-  props: {
-    id: { type: null, required: true },
-    options: { type: Object, required: false }
+  options: {
+    type: Object,
+    required: false
+  }
+});
+defineOptions({
+  inheritAttrs: false
+});
+const { deleteView } = useToastView(id);
+const { deleteState, initializeState } = useToastState(id);
+const state = initializeState(options);
+const listRef = useTemplateRef("list");
+const {
+  onBeforeEnter,
+  onEnter,
+  onAfterEnter,
+  onBeforeLeave,
+  onLeave,
+  onAfterLeave
+} = useToastCallback(id);
+const { onMouseenter, onMouseleave, outsideClickCallback } = useToastListener(id);
+onClickOutside(listRef, outsideClickCallback);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
   },
-  setup(__props) {
-    const { deleteView } = useToastView(__props.id);
-    const { deleteState, initializeState } = useToastState(__props.id);
-    const state = initializeState(__props.options);
-    const listRef = useTemplateRef("list");
-    const {
-      onBeforeEnter,
-      onEnter,
-      onAfterEnter,
-      onBeforeLeave,
-      onLeave,
-      onAfterLeave
-    } = useToastCallback(__props.id);
-    const { onMouseenter, onMouseleave, outsideClickCallback } = useToastListener(__props.id);
-    onClickOutside(listRef, outsideClickCallback);
-    watch(
-      () => __props.options,
-      (value) => {
-        initializeState(value);
-      },
-      {
-        deep: true
-      }
-    );
-    onBeforeUnmount(() => {
-      deleteState();
-    });
-    provide(MagicToastInstanceId, __props.id);
-    return (_ctx, _cache) => {
-      return _openBlock(), _createBlock(_Teleport, {
-        to: _unref(state).options.teleport?.target,
-        disabled: _unref(state).options.teleport?.disabled
-      }, [
-        _createElementVNode("div", _mergeProps({
-          "data-id": toValue(_ctx.id),
-          "data-position": _unref(state).options.position,
-          "data-expanded": _unref(state).expanded,
-          class: "magic-toast-provider"
-        }, _ctx.$attrs), [
-          _createVNode(_TransitionGroup, {
-            ref: "list",
-            tag: "ol",
-            class: "magic-toast-provider__list",
-            name: _unref(state).options.transition,
-            "on-before-enter": _unref(onBeforeEnter),
-            "on-enter": _unref(onEnter),
-            "on-after-enter": _unref(onAfterEnter),
-            "on-before-leave": _unref(onBeforeLeave),
-            "on-leave": _unref(onLeave),
-            "on-after-leave": _unref(onAfterLeave),
-            onMouseenter: _unref(onMouseenter),
-            onMouseleave: _unref(onMouseleave)
-          }, {
-            default: _withCtx(() => [
-              (_openBlock(true), _createElementBlock(
-                _Fragment,
-                null,
-                _renderList(_unref(state).views, (view, index) => {
-                  return _openBlock(), _createBlock(MagicToastView, {
-                    id: view.id,
-                    key: view.id,
-                    index
-                  }, {
-                    default: _withCtx(() => [
-                      (_openBlock(), _createBlock(_resolveDynamicComponent(view.component), _mergeProps({ ref_for: true }, view.props, {
-                        onRemove: ($event) => _unref(deleteView)(view.id)
-                      }), null, 16, ["onRemove"]))
-                    ]),
-                    _: 2
-                    /* DYNAMIC */
-                  }, 1032, ["id", "index"]);
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["name", "on-before-enter", "on-enter", "on-after-enter", "on-before-leave", "on-leave", "on-after-leave", "onMouseenter", "onMouseleave"])
-        ], 16, _hoisted_1)
-      ], 8, ["to", "disabled"]);
-    };
+  {
+    deep: true
   }
+);
+onBeforeUnmount(() => {
+  deleteState();
 });
+provide(MagicToastInstanceId, id);
 </script>
 
 <style>