@maas/vue-equipment 0.29.2 → 0.29.3

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

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+interface MagicScrollTransformProps {
   as?: string
   scale?: number
   scaleX?: number
@@ -18,7 +18,7 @@ interface Props {
   translateY?: number
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<MagicScrollTransformProps>(), {
   as: 'div',
   scale: 1,
   scaleX: 1,

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

@@ -1,4 +1,4 @@
-interface Props {
+interface MagicScrollTransformProps {
     as?: string;
     scale?: number;
     scaleX?: number;
@@ -8,7 +8,7 @@ interface Props {
     translateX?: number;
     translateY?: number;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicScrollTransformProps>, {
     as: string;
     scale: number;
     scaleX: number;
@@ -17,7 +17,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     skewY: number;
     translateX: number;
     translateY: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicScrollTransformProps>, {
     as: string;
     scale: number;
     scaleX: number;

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

@@ -0,0 +1,28 @@
+import { type MaybeRef } from 'vue';
+import type { MagicScrollCollisionEntry, Offset } from '../../types.js';
+type UseCollisionDetectArgs = {
+    scrollY: MaybeRef<number>;
+    entries: MagicScrollCollisionEntry[];
+    parent: HTMLElement | undefined;
+};
+export declare function useCollisionDetect(args: UseCollisionDetectArgs): {
+    mappedEntries: import("vue").Ref<{
+        element: HTMLElement;
+        alerted: {
+            up: {
+                top: boolean;
+                bottom: boolean;
+            };
+            down: {
+                top: boolean;
+                bottom: boolean;
+            };
+        };
+        data: Record<string, unknown>;
+        offset?: {
+            top: Offset;
+            bottom: Offset;
+        } | undefined;
+    }[]>;
+};
+export {};

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

@@ -0,0 +1,144 @@
+import { ref, watch, computed, toValue } from "vue";
+import { useIntersectionObserver, useWindowSize } from "@vueuse/core";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+export function useCollisionDetect(args) {
+  const { scrollY, entries, parent } = args;
+  const lastScrollY = ref(0);
+  const intersecting = ref();
+  const scrollDirection = ref();
+  const mappedEntries = ref([]);
+  const oppositeScrollDirection = computed(
+    () => scrollDirection.value === "up" ? "down" : "up"
+  );
+  const windowDimensions = useWindowSize();
+  function getOffset(payload) {
+    return typeof payload === "function" ? payload({
+      vh: toValue(windowDimensions.height),
+      vw: toValue(windowDimensions.width)
+    }) : payload ?? 0;
+  }
+  function initialize() {
+    if (!parent)
+      return;
+    mappedEntries.value = entries.map((entry) => {
+      const alerted = {
+        up: {
+          top: false,
+          bottom: false
+        },
+        down: {
+          top: false,
+          bottom: false
+        }
+      };
+      const offset = { top: 0, bottom: 0, ...entry.offset };
+      const element = entry.element ? parent?.querySelector(entry.element) : parent;
+      if (!element) {
+        return void 0;
+      } else {
+        return { ...entry, offset, element, alerted };
+      }
+    }).filter((element) => !!element);
+    useIntersectionObserver(
+      parent.querySelector("*"),
+      ([{ isIntersecting }]) => {
+        intersecting.value = isIntersecting;
+      },
+      { rootMargin: "50% 0px 50% 0px", threshold: 0.01 }
+    );
+    observeAll();
+  }
+  function observeAll() {
+    if (!lastScrollY.value) {
+      lastScrollY.value = toValue(scrollY);
+      resetAll();
+      return;
+    }
+    scrollDirection.value = lastScrollY.value <= toValue(scrollY) ? "down" : "up";
+    lastScrollY.value = toValue(scrollY);
+    let i = mappedEntries.value.length;
+    while (i--) {
+      const entry = mappedEntries.value[i];
+      if (!entry.element)
+        return;
+      const boundingRect = entry.element.getBoundingClientRect();
+      if (scrollDirection.value) {
+        observeEntry({
+          position: "top",
+          direction: scrollDirection.value,
+          boundingRect,
+          entry
+        });
+        observeEntry({
+          position: "bottom",
+          direction: scrollDirection.value,
+          boundingRect,
+          entry
+        });
+        resetEntry({
+          position: "top",
+          direction: oppositeScrollDirection.value,
+          boundingRect,
+          entry
+        });
+        resetEntry({
+          position: "bottom",
+          direction: oppositeScrollDirection.value,
+          boundingRect,
+          entry
+        });
+      }
+    }
+  }
+  function resetAll() {
+    mappedEntries.value = mappedEntries.value.map((entry) => {
+      const alerted = {
+        up: {
+          top: false,
+          bottom: false
+        },
+        down: {
+          top: false,
+          bottom: false
+        }
+      };
+      return { ...entry, alerted };
+    });
+  }
+  function observeEntry(args2) {
+    const { position, direction, boundingRect, entry } = args2;
+    const offset = getOffset(entry.offset[position] ?? 0);
+    if (entry.alerted[direction][position])
+      return;
+    if (direction === "down" && boundingRect[position] <= offset || direction === "up" && boundingRect[position] >= offset) {
+      entry.alerted[direction][position] = true;
+      useMagicEmitter().emit("collision", {
+        direction,
+        position,
+        element: entry.element,
+        data: entry.data
+      });
+    }
+  }
+  function resetEntry(args2) {
+    const { position, direction, boundingRect, entry } = args2;
+    const offset = getOffset(entry.offset[position] ?? 0);
+    if (!entry.alerted[direction][position])
+      return;
+    if (direction === "down" && boundingRect[position] >= offset || direction === "up" && boundingRect[position] <= offset) {
+      entry.alerted[direction][position] = false;
+    }
+  }
+  initialize();
+  watch(
+    () => toValue(scrollY),
+    () => {
+      if (intersecting.value) {
+        observeAll();
+      }
+    }
+  );
+  return {
+    mappedEntries
+  };
+}

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

@@ -10,5 +10,4 @@ export declare function useScrollApi(params: UseScrollApiParams): {
     getCalculations: () => void;
     getProgress: () => number;
 };
-export type UseScrollApiReturn = ReturnType<typeof useScrollApi>;
 export {};

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

@@ -1,33 +1,27 @@
-type AlertPositions = {
-    top: boolean;
-    bottom: boolean;
-};
-type CollisionEvents = {
-    collision: {
-        dir: 'up' | 'down';
-        pos: 'top' | 'bottom';
-        el: HTMLElement;
-        data?: Record<string, unknown>;
-    };
+export type Dimensions = {
+    width: number;
+    height: number;
 };
-interface CollisionEntry {
+export type ScrollDirection = 'up' | 'down';
+export type Position = 'top' | 'bottom';
+export type FromTo = 'top-top' | 'top-center' | 'top-bottom' | 'center-top' | 'center-center' | 'center-bottom' | 'bottom-top' | 'bottom-center' | 'bottom-bottom';
+export type Offset = number | (({ vw, vh }: {
+    vw: number;
+    vh: number;
+}) => number);
+export interface MagicScrollCollisionEntry {
     offset?: {
-        top: number | (() => number);
-        bottom: number | (() => number);
+        top: Offset;
+        bottom: Offset;
     };
     element?: string;
     data: Record<string, unknown>;
 }
-interface MappedCollisionEntry extends Omit<CollisionEntry, 'element'> {
-    alerted: {
-        up: AlertPositions;
-        down: AlertPositions;
+export type ScrollEvents = {
+    collision: {
+        direction: ScrollDirection;
+        position: Position;
+        element: HTMLElement;
+        data?: Record<string, unknown>;
     };
-    element: HTMLElement;
-}
-type Dimensions = {
-    width: number;
-    height: number;
 };
-type FromTo = 'top-top' | 'top-center' | 'top-bottom' | 'center-top' | 'center-center' | 'center-bottom' | 'bottom-top' | 'bottom-center' | 'bottom-bottom';
-export type { FromTo, CollisionEvents, CollisionEntry, MappedCollisionEntry, Dimensions, };

package/dist/plugins/MagicToast/index.d.ts

@@ -1,7 +1,5 @@
 import MagicToast from './src/components/MagicToast.vue.js';
 import { useMagicToast } from './src/composables/useMagicToast.js';
 import type { Plugin } from 'vue';
-import type { ToastEvents } from './src/types/index.js';
 declare const MagicToastPlugin: Plugin;
 export { MagicToastPlugin, MagicToast, useMagicToast };
-export type { ToastEvents };

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

@@ -23,7 +23,7 @@
           :key="toast.id"
           :index="index"
           :total="count || 0"
-          :siblings="activeElements"
+          :siblings="activeToasts"
           :class="{
             expanded: isExpanded,
           }"
@@ -61,7 +61,7 @@ import { useMagicToast } from '../composables/useMagicToast'
 
 import MagicToastComponent from './MagicToastComponent.vue'
 
-import type { ToastOptions } from './../types/index'
+import type { MagicToastOptions } from './../types/index'
 
 import '@maas/vue-equipment/utils/css/animations/fade-out.css'
 import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css'
@@ -72,7 +72,7 @@ import '@maas/vue-equipment/utils/css/animations/slide-btt-in.css'
 interface MagicToastProps {
   id: MaybeRef<string>
   class: MaybeRef<string>
-  options?: ToastOptions
+  options?: MagicToastOptions
 }
 
 const props = defineProps<MagicToastProps>()
@@ -92,7 +92,7 @@ const {
   onBeforeLeave,
   onLeave,
   onAfterLeave,
-  activeElements,
+  activeToasts,
 } = useToastCallback({ id: props.id, mappedOptions, count, firstToast })
 
 function onMouseenter() {

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

@@ -1,5 +1,5 @@
 import { type MaybeRef } from 'vue';
-import type { ToastOptions } from './../types/index';
+import type { MagicToastOptions } from './../types/index';
 import '@maas/vue-equipment/utils/css/animations/fade-out.css';
 import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css';
 import '@maas/vue-equipment/utils/css/animations/slide-rtl-in.css';
@@ -8,7 +8,7 @@ import '@maas/vue-equipment/utils/css/animations/slide-btt-in.css';
 interface MagicToastProps {
     id: MaybeRef<string>;
     class: MaybeRef<string>;
-    options?: ToastOptions;
+    options?: MagicToastOptions;
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicToastProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicToastProps>>>, {}, {}>;
 export default _default;

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

@@ -13,16 +13,16 @@
 
 <script lang="ts" setup>
 import { ref, computed, onMounted, watchEffect } from 'vue'
-import { type ActiveElement } from './../types'
+import { type ActiveToast } from './../types'
 
-interface Props {
+interface MagicToastComponentProps {
   index: number
   total: number
   id: string
-  siblings: ActiveElement[]
+  siblings: ActiveToast[]
 }
 
-const props = defineProps<Props>()
+const props = defineProps<MagicToastComponentProps>()
 const emit = defineEmits<{
   mouseenter: [event: Event]
 }>()

package/dist/plugins/MagicToast/src/components/MagicToastComponent.vue.d.ts

@@ -1,13 +1,13 @@
-import { type ActiveElement } from './../types';
-interface Props {
+import { type ActiveToast } from './../types';
+interface MagicToastComponentProps {
     index: number;
     total: number;
     id: string;
-    siblings: ActiveElement[];
+    siblings: ActiveToast[];
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicToastComponentProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     mouseenter: (event: Event) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicToastComponentProps>>> & {
     onMouseenter?: ((event: Event) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;

package/dist/plugins/MagicToast/src/composables/private/useToastApi.d.ts

@@ -1,5 +1,5 @@
 import { type MaybeRef } from 'vue';
 export declare function useToastApi(id: MaybeRef<string>): {
-    initialize: () => import("../../types").ToastInstance | undefined;
+    initialize: () => any;
     destroy: (id: string) => void;
 };

package/dist/plugins/MagicToast/src/composables/private/useToastCallback.d.ts

@@ -1,8 +1,8 @@
 import { type Ref, type MaybeRef } from 'vue';
-import type { ToastOptions, Toast } from './../../types.js';
+import type { MagicToastOptions, Toast } from './../../types.js';
 type UseToastCallbackArgs = {
     id: MaybeRef<string>;
-    mappedOptions: ToastOptions;
+    mappedOptions: MagicToastOptions;
     count: Ref<number | undefined>;
     firstToast: Ref<Toast | undefined>;
 };
@@ -13,7 +13,7 @@ export declare function useToastCallback(args: UseToastCallbackArgs): {
     onBeforeLeave: (_el: Element) => void;
     onLeave: (el: Element) => void;
     onAfterLeave: (_el: Element) => void;
-    activeElements: Ref<{
+    activeToasts: Ref<{
         id: string;
         height: number;
         padding: {

package/dist/plugins/MagicToast/src/composables/private/useToastCallback.mjs

@@ -2,7 +2,7 @@ import { ref, toValue } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 export function useToastCallback(args) {
   const { id, mappedOptions, count, firstToast } = args;
-  const activeElements = ref([]);
+  const activeToasts = ref([]);
   const emitter = useMagicEmitter();
   function onBeforeEnter(_el) {
     emitter.emit("beforeEnter", toValue(id));
@@ -17,8 +17,8 @@ export function useToastCallback(args) {
     emitter.emit("afterEnter", toValue(id));
     const mappedEl = el;
     const style = window.getComputedStyle(mappedEl);
-    activeElements.value = [
-      ...activeElements.value,
+    activeToasts.value = [
+      ...activeToasts.value,
       {
         id: el.id,
         height: mappedEl.offsetHeight,
@@ -34,9 +34,7 @@ export function useToastCallback(args) {
   }
   function onLeave(el) {
     emitter.emit("leave", toValue(id));
-    activeElements.value = activeElements.value.filter(
-      (item) => item.id !== el.id
-    );
+    activeToasts.value = activeToasts.value.filter((item) => item.id !== el.id);
   }
   function onAfterLeave(_el) {
     emitter.emit("afterLeave", toValue(id));
@@ -48,6 +46,6 @@ export function useToastCallback(args) {
     onBeforeLeave,
     onLeave,
     onAfterLeave,
-    activeElements
+    activeToasts
   };
 }

package/dist/plugins/MagicToast/src/composables/private/useToastInternalApi.d.ts

@@ -1,4 +1,4 @@
-import type { ToastInstance, AddArgs } from './../../types.js';
+import type { ToastInstance, AddToastArgs } from './../../types.js';
 export declare function useToastInternalApi(): {
-    addToast: (args: AddArgs, ctx: ToastInstance) => string;
+    addToast: (args: AddToastArgs, ctx: ToastInstance) => string;
 };

package/dist/plugins/MagicToast/src/composables/private/useToastStore.d.ts

@@ -1,17 +1,7 @@
-import type { ToastInstance, AddArgs } from '../../types.js';
+import type { MagicToastInstance } from '../../types.js';
 export declare function useToastStore(): {
-    toastStore: import("vue").Ref<{
-        id: string;
-        toasts: {
-            id: string;
-            component: Object;
-            props?: Record<string, any> | undefined;
-            remove: Function;
-        }[];
-        add: (args: AddArgs) => string;
-        remove: (id: string) => void;
-    }[]>;
-    findInstance: (id: string) => ToastInstance | undefined;
-    addInstance: (id: string) => ToastInstance;
+    toastStore: import("vue").Ref<any[]>;
+    findInstance: (id: string) => MagicToastInstance | undefined;
+    addInstance: (id: string) => MagicToastInstance;
     removeInstance: (id: string) => void;
 };

package/dist/plugins/MagicToast/src/composables/useMagicToast.d.ts

@@ -1,11 +1,11 @@
 import { type MaybeRef } from 'vue';
-import type { AddArgs } from './../types.js';
+import type { AddToastArgs } from './../types.js';
 export declare function useMagicToast(id: MaybeRef<string>): {
-    toasts: import("vue").ComputedRef<import("./../types").Toast[] | undefined>;
-    count: import("vue").ComputedRef<number | undefined>;
-    firstToast: import("vue").ComputedRef<import("./../types").Toast | undefined>;
-    lastToast: import("vue").ComputedRef<import("./../types").Toast | undefined>;
-    add: (options: AddArgs) => Promise<string | undefined>;
+    toasts: import("vue").ComputedRef<any>;
+    count: import("vue").ComputedRef<any>;
+    firstToast: import("vue").ComputedRef<any>;
+    lastToast: import("vue").ComputedRef<any>;
+    add: (options: AddToastArgs) => Promise<any>;
     remove: (toastId: string) => void;
     clear: () => void;
 };

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

@@ -1,31 +1,21 @@
 import type { MaybeRef } from 'vue';
 import type { PickPartial } from '@maas/vue-equipment/utils';
-type Toast = {
+export type Toast = {
     id: string;
     component: Object;
     props?: MaybeRef<Record<string, any>>;
     remove: Function;
 };
-type ToastInstance = {
+export type AddToastArgs = Pick<Toast, 'component'> & PickPartial<Toast, 'props'> & {
+    duration?: number;
+};
+export type ToastInstance = {
     id: string;
     toasts: Toast[];
-    add: (args: AddArgs) => string;
+    add: (args: AddToastArgs) => string;
     remove: (id: string) => void;
 };
-type ToastOptions = {
-    teleport?: {
-        target?: string;
-        disabled?: boolean;
-    };
-    transitions?: {
-        list: string;
-    };
-    layout?: {
-        expand?: boolean | 'hover' | 'click';
-        max?: false | number;
-    };
-};
-type ActiveElement = {
+export type ActiveToast = {
     id: string;
     height: number;
     padding: {
@@ -33,7 +23,7 @@ type ActiveElement = {
         bottom: number;
     };
 };
-type ToastEvents = {
+export type ToastEvents = {
     beforeEnter: string;
     enter: string;
     afterEnter: string;
@@ -41,7 +31,16 @@ type ToastEvents = {
     leave: string;
     afterLeave: string;
 };
-type AddArgs = Pick<Toast, 'component'> & PickPartial<Toast, 'props'> & {
-    duration?: number;
+export type MagicToastOptions = {
+    teleport?: {
+        target?: string;
+        disabled?: boolean;
+    };
+    transitions?: {
+        list: string;
+    };
+    layout?: {
+        expand?: boolean | 'hover' | 'click';
+        max?: false | number;
+    };
 };
-export type { Toast, ToastInstance, ToastOptions, ActiveElement, ToastEvents, AddArgs, };

package/dist/plugins/MagicToast/src/utils/defaultOptions.d.ts

@@ -1,4 +1,4 @@
-import type { ToastOptions } from '../types/index.js';
+import type { MagicToastOptions } from '../types/index.js';
 import type { RequireAll } from '@maas/vue-equipment/utils';
-declare const defaultOptions: RequireAll<ToastOptions>;
+declare const defaultOptions: RequireAll<MagicToastOptions>;
 export { defaultOptions };

package/dist/plugins/index.d.ts

@@ -4,6 +4,7 @@ export * from './MagicDraggable/index.js';
 export * from './MagicDrawer/index.js';
 export * from './MagicEmitter/index.js';
 export * from './MagicMarquee/index.js';
+export * from './MagicMenu/index.js';
 export * from './MagicModal/index.js';
 export * from './MagicNoise/index.js';
 export * from './MagicPlayer/index.js';

package/dist/plugins/index.mjs

@@ -4,6 +4,7 @@ export * from "./MagicDraggable/index.mjs";
 export * from "./MagicDrawer/index.mjs";
 export * from "./MagicEmitter/index.mjs";
 export * from "./MagicMarquee/index.mjs";
+export * from "./MagicMenu/index.mjs";
 export * from "./MagicModal/index.mjs";
 export * from "./MagicNoise/index.mjs";
 export * from "./MagicPlayer/index.mjs";

package/dist/utils/index.js

@@ -123,8 +123,7 @@ function interpolate(args) {
   const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args;
   let startTime;
   function animate(timestamp) {
-    if (!startTime)
-      startTime = timestamp;
+    if (!startTime) startTime = timestamp;
     const progress = Math.min(1, (timestamp - startTime) / duration);
     const easedProgress = easing(progress);
     const value = from + (to - from) * easedProgress;
@@ -138,8 +137,7 @@ function interpolate(args) {
 
 // src/functions/isIOS.ts
 function isIOS() {
-  if (typeof window === "undefined")
-    return false;
+  if (typeof window === "undefined") return false;
   return /iPad|iPhone|iPod/.test(navigator == null ? void 0 : navigator.userAgent);
 }
 
@@ -175,10 +173,8 @@ function slugify(string, options) {
   const charMap = {};
   let slug = string.normalize().split("").reduce(function(result, ch) {
     let appendChar = charMap[ch];
-    if (appendChar === void 0)
-      appendChar = ch;
-    if (appendChar === (_options == null ? void 0 : _options.separator))
-      appendChar = " ";
+    if (appendChar === void 0) appendChar = ch;
+    if (appendChar === (_options == null ? void 0 : _options.separator)) appendChar = " ";
     return result + appendChar.replace((_options == null ? void 0 : _options.remove) || /[^\w\s$*_+~.()'"!\-:@]+/g, "");
   }, "");
   if (_options.strict) {