@maas/vue-equipment 1.0.0-beta.4 → 1.0.0-beta.40

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

@@ -1,40 +1,33 @@
-<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/MagicScrollProvider.vue.d.ts

@@ -2,47 +2,34 @@ import { type MaybeElementRef } from '@vueuse/core';
 interface MagicScrollProviderProps {
     target?: MaybeElementRef<HTMLElement>;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            scrollReturn: {
-                x: import("vue").WritableComputedRef<number, number>;
-                y: import("vue").WritableComputedRef<number, number>;
-                isScrolling: import("vue").Ref<boolean, boolean>;
-                arrivedState: {
-                    left: boolean;
-                    right: boolean;
-                    top: boolean;
-                    bottom: boolean;
-                };
-                directions: {
-                    left: boolean;
-                    right: boolean;
-                    top: boolean;
-                    bottom: boolean;
-                };
-                measure(): void;
-            };
-        }): any;
+declare var __VLS_1: {
+    scrollReturn: {
+        x: import("vue").WritableComputedRef<number, number>;
+        y: import("vue").WritableComputedRef<number, number>;
+        isScrolling: import("vue").ShallowRef<boolean, boolean>;
+        arrivedState: {
+            left: boolean;
+            right: boolean;
+            top: boolean;
+            bottom: boolean;
+        };
+        directions: {
+            left: boolean;
+            right: boolean;
+            top: boolean;
+            bottom: boolean;
+        };
+        measure(): void;
     };
-    refs: {};
-    rootEl: HTMLDivElement;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicScrollProviderProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicScrollProviderProps>>> & 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_base: import("vue").DefineComponent<MagicScrollProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -0,0 +1,20 @@
+import type { ScrollIntersection } from '../types/index.js';
+interface MagicScrollSceneProps {
+    from?: ScrollIntersection;
+    to?: ScrollIntersection;
+}
+declare var __VLS_1: {
+    progress: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicScrollSceneProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollSceneProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,81 +1,81 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, provide, inject, watch, nextTick, readonly } from "vue";
+<template>
+  <div ref="el" class="magic-scroll-scene">
+    <slot :progress="progress" />
+  </div>
+</template>
+
+<script setup>
+import {
+  shallowRef,
+  provide,
+  inject,
+  watch,
+  nextTick,
+  readonly,
+  useTemplateRef
+} from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useScrollApi } from "../composables/private/useScrollApi";
 import {
   MagicScrollTarget,
   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" }
-  },
-  setup(__props) {
-    const scrollReturn = inject(MagicScrollReturn, void 0);
-    const scrollTarget = inject(MagicScrollTarget);
-    if (!scrollTarget) {
-      console.error("MagicScrollScene must be used within a MagicScrollProvider");
-    }
-    const progress = ref(0);
-    const intersecting = ref(false);
-    const elRef = ref(void 0);
-    const { getCalculations, getProgress } = useScrollApi({
-      child: elRef,
-      parent: scrollTarget,
-      from: __props.from,
-      to: __props.to
-    });
-    async function calculate() {
-      getCalculations();
-      await nextTick();
-      progress.value = getProgress();
+const { from = "top-bottom", to = "bottom-top" } = defineProps({
+  from: { type: String, required: false },
+  to: { type: String, required: false }
+});
+const magicError = useMagicError({
+  prefix: "MagicScroll",
+  source: "MagicScrollScene"
+});
+const scrollReturn = inject(MagicScrollReturn, void 0);
+const scrollTarget = inject(MagicScrollTarget, void 0);
+magicError.assert(scrollTarget, {
+  message: "MagicScrollScene must be used within a MagicScrollProvider",
+  errorCode: "missing_scroll_target"
+});
+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,
-      () => {
-        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",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-scroll-scene"
-        },
-        [
-          _renderSlot(_ctx.$slots, "default", { progress: progress.value })
-        ],
-        512
-        /* NEED_PATCH */
-      );
-    };
   }
-});
+);
+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/MagicScroll/src/components/MagicScrollScene.vue.d.ts

@@ -3,32 +3,17 @@ interface MagicScrollSceneProps {
     from?: ScrollIntersection;
     to?: ScrollIntersection;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            progress: number;
-        }): any;
-    };
-    refs: {
-        elRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
+declare var __VLS_1: {
+    progress: number;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicScrollSceneProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicScrollSceneProps>>> & 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_base: import("vue").DefineComponent<MagicScrollSceneProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollSceneProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/plugins/MagicScroll/src/composables/private/useCollisionDetection.d.ts

@@ -2,8 +2,8 @@ import { type MaybeRef } from 'vue';
 import type { CollisionOffset } from '../../types/index.js';
 type UseCollisionDetectionArgs = {
     id: string;
-    child: MaybeRef<HTMLElement | undefined>;
-    parent: MaybeRef<HTMLElement | undefined>;
+    child: MaybeRef<HTMLElement | null>;
+    parent: MaybeRef<HTMLElement | null | undefined>;
     scrollY: MaybeRef<number>;
     offset?: CollisionOffset;
 };

package/dist/plugins/MagicScroll/src/composables/private/useCollisionDetection.mjs

@@ -1,6 +1,6 @@
-import { ref, reactive, computed, toValue } from "vue";
-import { useElementBounding } from "@vueuse/core";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { shallowRef, reactive, computed, toValue } from "vue";
+import { useElementBounding, useWindowSize } from "@vueuse/core";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 export function useCollisionDetection(args) {
   const { id, scrollY, child, parent, offset } = args;
   const alerted = reactive({
@@ -25,11 +25,21 @@ export function useCollisionDetection(args) {
       }
     }
   });
+  const { width, height } = useWindowSize();
+  const windowBoundingRect = {
+    width,
+    height,
+    right: width,
+    bottom: height,
+    top: shallowRef(0),
+    left: shallowRef(0)
+  };
   const childBoundingRect = useElementBounding(child);
   const parentBoundingRect = useElementBounding(parent);
+  const mappedParentBoundingRect = toValue(parent) ? parentBoundingRect : windowBoundingRect;
   const mappedOffset = { top: 0, bottom: 0, ...offset };
-  const lastScrollY = ref(0);
-  const scrollDirection = ref();
+  const lastScrollY = shallowRef(0);
+  const scrollDirection = shallowRef();
   const oppositeScrollDirection = computed(
     () => scrollDirection.value === "up" ? "down" : "up"
   );
@@ -101,7 +111,7 @@ export function useCollisionDetection(args) {
     }
     const offset2 = mappedOffset[parentEdge];
     const mappedChildEdge = toValue(childBoundingRect[childEdge]);
-    const mappedParentEdge = toValue(parentBoundingRect[parentEdge]) + offset2;
+    const mappedParentEdge = toValue(mappedParentBoundingRect[parentEdge]) + offset2;
     if (direction === "down" && mappedChildEdge <= mappedParentEdge || direction === "up" && mappedChildEdge >= mappedParentEdge) {
       alerted[direction][childEdge][parentEdge] = true;
       useMagicEmitter().emit("collision", {
@@ -119,7 +129,7 @@ export function useCollisionDetection(args) {
     }
     const offset2 = mappedOffset[parentEdge];
     const mappedChildEdge = toValue(childBoundingRect[childEdge]);
-    const mappedParentEdge = toValue(parentBoundingRect[parentEdge]) + offset2;
+    const mappedParentEdge = toValue(mappedParentBoundingRect[parentEdge]) + offset2;
     if (direction === "down" && mappedChildEdge >= mappedParentEdge || direction === "up" && mappedChildEdge <= mappedParentEdge) {
       alerted[direction][childEdge][parentEdge] = false;
     }

package/dist/plugins/MagicScroll/src/composables/private/useScrollApi.d.ts

@@ -1,12 +1,12 @@
 import { type MaybeRef, type MaybeRefOrGetter } from 'vue';
 import type { ScrollIntersection } from '../../types/index.js';
-type UseScrollApiParams = {
+type UseScrollApiArgs = {
     child: MaybeRef<HTMLElement | null | undefined>;
     parent: MaybeRefOrGetter<HTMLElement | null | undefined>;
     from: ScrollIntersection;
     to: ScrollIntersection;
 };
-export declare function useScrollApi(params: UseScrollApiParams): {
+export declare function useScrollApi(args: UseScrollApiArgs): {
     getCalculations: () => void;
     getProgress: () => number;
 };

package/dist/plugins/MagicScroll/src/composables/private/useScrollApi.mjs

@@ -1,14 +1,28 @@
-import { ref, inject, toValue } from "vue";
-import { useWindowSize } from "@vueuse/core";
-import { MagicScrollReturn } from "../../symbols/index.mjs";
+import {
+  shallowRef,
+  inject,
+  toValue
+} from "vue";
+import { useElementBounding, useWindowSize } from "@vueuse/core";
 import { clampValue } from "@maas/vue-equipment/utils";
-export function useScrollApi(params) {
-  const { child, parent, from, to } = params;
+import { MagicScrollReturn } from "../../symbols/index.mjs";
+export function useScrollApi(args) {
+  const { child, parent, from, to } = args;
   const scrollReturn = inject(MagicScrollReturn, void 0);
-  const childRect = ref(void 0);
-  const parentRect = ref(void 0);
-  const start = ref(0);
-  const end = ref(0);
+  const start = shallowRef(0);
+  const end = shallowRef(0);
+  const { width, height } = useWindowSize();
+  const windowBoundingRect = {
+    width,
+    height,
+    right: width,
+    bottom: height,
+    top: shallowRef(0),
+    left: shallowRef(0)
+  };
+  const childBoundingRect = useElementBounding(child);
+  const parentBoundingRect = useElementBounding(parent);
+  const mappedParentBoundingRect = toValue(parent) ? parentBoundingRect : windowBoundingRect;
   function splitLocation(location) {
     return {
       child: location.match(/^[a-z]+/)[0],
@@ -17,51 +31,52 @@ export function useScrollApi(params) {
   }
   function getOffsetTop(points) {
     let y = 0;
-    if (!childRect.value) return y;
     const scrollY = toValue(scrollReturn?.y) || 0;
+    const parentTop = mappedParentBoundingRect.top.value;
+    const parentHeight = mappedParentBoundingRect.height.value;
+    const childTop = childBoundingRect.top.value;
+    const childHeight = childBoundingRect.height.value;
+    if (!childHeight) {
+      return y;
+    }
     switch (points.child) {
       case "top":
-        y += childRect.value.top + scrollY;
+        y += childTop + scrollY;
         break;
       case "center":
-        y += childRect.value.top + childRect.value.height / 2 + scrollY;
+        y += childTop + childHeight / 2 + scrollY;
         break;
       case "bottom":
-        y += childRect.value.top + childRect.value.height + scrollY;
+        y += childTop + childHeight + scrollY;
         break;
     }
-    if (!parentRect.value) {
+    if (!mappedParentBoundingRect.height.value) {
       return y;
     }
-    const dimensions = {
-      width: toValue(parentRect.value.width),
-      height: toValue(parentRect.value.height),
-      top: toValue(parentRect.value.top)
-    };
     switch (points.parent) {
       case "top":
-        y -= dimensions.top;
+        y -= parentTop;
         break;
       case "center":
-        y -= dimensions.top + dimensions.height / 2;
+        y -= parentTop + parentHeight / 2;
         break;
       case "bottom":
-        y -= dimensions.top + dimensions.height;
+        y -= parentTop + parentHeight;
         break;
       case "initial":
-        y -= childRect.value.top + scrollY;
+        y -= childTop + scrollY;
         break;
     }
     return y;
   }
   function getCalculations() {
-    childRect.value = toValue(child)?.getBoundingClientRect();
-    parentRect.value = toValue(parent) ? toValue(parent)?.getBoundingClientRect() : { ...useWindowSize(), top: 0 };
+    childBoundingRect.update();
+    parentBoundingRect.update();
     start.value = getOffsetTop(splitLocation(from));
     end.value = getOffsetTop(splitLocation(to));
   }
   function getProgress() {
-    const scrollY = toValue(scrollReturn?.y) || 0;
+    const scrollY = toValue(scrollReturn?.y) ?? 0;
     const total = Math.abs(end.value - start.value);
     const current = scrollY - start.value;
     return clampValue(current / total, 0, 1);

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

@@ -1,6 +1,6 @@
 import type { InjectionKey, Ref, MaybeRef } from 'vue';
 import type { UseScrollReturn } from '@vueuse/core';
-declare const MagicScrollTarget: InjectionKey<MaybeRef<HTMLElement | undefined>>;
+declare const MagicScrollTarget: InjectionKey<MaybeRef<HTMLElement | null | undefined>>;
 declare const MagicScrollProgress: InjectionKey<Ref<number>>;
 declare const MagicScrollReturn: InjectionKey<UseScrollReturn | undefined>;
 export { MagicScrollTarget, MagicScrollProgress, MagicScrollReturn };

package/dist/plugins/MagicToast/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/MagicToast/src/components/MagicToastProvider.d.vue.ts

@@ -0,0 +1,15 @@
+import { type MaybeRef } from 'vue';
+import type { MagicToastOptions } from '../types/index.js';
+import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/squash-y.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-rtl-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-rtl-out.css';
+interface MagicToastProps {
+    id: MaybeRef<string>;
+    options?: MagicToastOptions;
+}
+declare const __VLS_export: import("vue").DefineComponent<MagicToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;