@maas/vue-equipment 0.26.5 → 0.27.1

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableState.d.ts

@@ -0,0 +1,108 @@
+import { type MaybeRef } from 'vue';
+import type { DraggableState } from '../../types/index.js';
+export declare function useDraggableState(id: MaybeRef<string>): {
+    addState: (id: string) => {
+        id: string;
+        dragStart: {
+            toString: () => string;
+            toDateString: () => string;
+            toTimeString: () => string;
+            toLocaleString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            toLocaleDateString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            toLocaleTimeString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            valueOf: () => number;
+            getTime: () => number;
+            getFullYear: () => number;
+            getUTCFullYear: () => number;
+            getMonth: () => number;
+            getUTCMonth: () => number;
+            getDate: () => number;
+            getUTCDate: () => number;
+            getDay: () => number;
+            getUTCDay: () => number;
+            getHours: () => number;
+            getUTCHours: () => number;
+            getMinutes: () => number;
+            getUTCMinutes: () => number;
+            getSeconds: () => number;
+            getUTCSeconds: () => number;
+            getMilliseconds: () => number;
+            getUTCMilliseconds: () => number;
+            getTimezoneOffset: () => number;
+            setTime: (time: number) => number;
+            setMilliseconds: (ms: number) => number;
+            setUTCMilliseconds: (ms: number) => number;
+            setSeconds: (sec: number, ms?: number | undefined) => number;
+            setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+            setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+            setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+            setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+            setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+            setDate: (date: number) => number;
+            setUTCDate: (date: number) => number;
+            setMonth: (month: number, date?: number | undefined) => number;
+            setUTCMonth: (month: number, date?: number | undefined) => number;
+            setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+            setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+            toUTCString: () => string;
+            toISOString: () => string;
+            toJSON: (key?: any) => string;
+            getVarDate: () => VarDate;
+            [Symbol.toPrimitive]: {
+                (hint: "default"): string;
+                (hint: "string"): string;
+                (hint: "number"): number;
+                (hint: string): string | number;
+            };
+        } | undefined;
+        dragging: boolean;
+        interpolateTo: {
+            x: number;
+            y: number;
+        } | undefined;
+        originX: number;
+        originY: number;
+        lastDraggedX: number;
+        lastDraggedY: number;
+        intermediateDraggedX: number;
+        intermediateDraggedY: number;
+        draggedX: number;
+        draggedY: number;
+        elRect: {
+            height: number;
+            width: number;
+            x: number;
+            y: number;
+            readonly bottom: number;
+            readonly left: number;
+            readonly right: number;
+            readonly top: number;
+            toJSON: () => any;
+        } | undefined;
+        wrapperRect: {
+            height: number;
+            width: number;
+            x: number;
+            y: number;
+            readonly bottom: number;
+            readonly left: number;
+            readonly right: number;
+            readonly top: number;
+            toJSON: () => any;
+        } | undefined;
+    };
+    findState: () => import("vue").ToRefs<DraggableState>;
+    deleteState: () => void;
+};

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableState.mjs

@@ -0,0 +1,46 @@
+import { ref, reactive, toRefs, toValue } from "vue";
+const drawerStateStore = ref([]);
+export function useDraggableState(id) {
+  function createState(id2) {
+    const state = {
+      id: id2,
+      dragStart: void 0,
+      dragging: false,
+      interpolateTo: void 0,
+      originX: 0,
+      originY: 0,
+      lastDraggedX: 0,
+      lastDraggedY: 0,
+      intermediateDraggedX: 0,
+      intermediateDraggedY: 0,
+      draggedX: 0,
+      draggedY: 0,
+      elRect: void 0,
+      wrapperRect: void 0
+    };
+    return reactive(state);
+  }
+  function addState(id2) {
+    const instance = createState(id2);
+    drawerStateStore.value = [...drawerStateStore.value, instance];
+    return instance;
+  }
+  function findState() {
+    let instance = drawerStateStore.value.find((instance2) => {
+      return instance2.id === id;
+    });
+    if (!instance)
+      instance = addState(toValue(id));
+    return toRefs(instance);
+  }
+  function deleteState() {
+    drawerStateStore.value = drawerStateStore.value.filter(
+      (x) => x.id !== id
+    );
+  }
+  return {
+    addState,
+    findState,
+    deleteState
+  };
+}

package/dist/plugins/MagicDraggable/src/composables/useDraggableApi.d.ts

@@ -0,0 +1 @@
+export declare function useDraggableApi(): void;

package/dist/plugins/MagicDraggable/src/composables/useDraggableApi.mjs

@@ -0,0 +1,2 @@
+export function useDraggableApi() {
+}

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

@@ -0,0 +1,48 @@
+type Position = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type Coordinates = {
+    x: number;
+    y: number;
+};
+export type SnapPoint = [
+    Position,
+    offset?: {
+        x?: number;
+        y?: number;
+    }
+] | Position;
+export interface DraggableOptions {
+    tag?: 'dialog' | 'div';
+    threshold?: {
+        distance?: number;
+        momentum?: number;
+        idle?: number;
+    };
+    animation?: {
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    };
+    initial?: {
+        snapPoint?: SnapPoint;
+    };
+    snapPoints: SnapPoint[];
+    disabled?: boolean;
+}
+export interface DraggableState {
+    id: string;
+    dragStart: Date | undefined;
+    dragging: boolean;
+    interpolateTo: Coordinates | undefined;
+    originX: number;
+    originY: number;
+    lastDraggedX: number;
+    lastDraggedY: number;
+    intermediateDraggedX: number;
+    intermediateDraggedY: number;
+    draggedX: number;
+    draggedY: number;
+    elRect: DOMRect | undefined;
+    wrapperRect: DOMRect | undefined;
+}
+export {};

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

@@ -0,0 +1,5 @@
+import type { DraggableOptions } from '../types.js';
+import type { RequireAll } from '@maas/vue-equipment/utils';
+type DefaultOptions = RequireAll<DraggableOptions>;
+declare const defaultOptions: DefaultOptions;
+export { defaultOptions, type DefaultOptions };

package/dist/plugins/MagicDraggable/src/utils/defaultOptions.mjs

@@ -0,0 +1,21 @@
+import { easeOutBack } from "@maas/vue-equipment/utils";
+const defaultOptions = {
+  tag: "div",
+  threshold: {
+    distance: 128,
+    momentum: 1.5,
+    idle: 250
+  },
+  animation: {
+    snap: {
+      duration: 500,
+      easing: easeOutBack
+    }
+  },
+  initial: {
+    snapPoint: "center"
+  },
+  snapPoints: [],
+  disabled: false
+};
+export { defaultOptions };

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

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

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

@@ -92,7 +92,7 @@ import { useDrawerDrag } from '../composables/private/useDrawerDrag'
 import { useDrawerWheel } from '../composables/private/useDrawerWheel'
 import { useDrawerState } from '../composables/private/useDrawerState'
 
-import type { DrawerOptions } from './../types/index'
+import type { DrawerOptions } from '../types/index'
 
 import '@maas/vue-equipment/utils/css/animations/fade-in.css'
 import '@maas/vue-equipment/utils/css/animations/fade-out.css'
@@ -106,8 +106,9 @@ import '@maas/vue-equipment/utils/css/animations/slide-ttb-out.css'
 import '@maas/vue-equipment/utils/css/animations/slide-btt-out.css'
 
 // Prevent deep merge of certain options
+// In this case, don’t merge the `close` and `points` options
 const customDefu = createDefu((obj, key, value) => {
-  if (key === 'keys' || key === 'points') {
+  if (key === 'close' || key === 'points') {
     obj[key] = value
     return true
   }
@@ -140,7 +141,14 @@ const drawerApi = useDrawerApi(props.id, {
 })
 
 const overshoot = ref(0)
-const { position, threshold, snap, canClose } = mappedOptions
+const {
+  position,
+  snapPoints,
+  threshold,
+  animation,
+  preventDragClose,
+  initial,
+} = mappedOptions
 
 const {
   isActive,
@@ -171,10 +179,12 @@ const { onPointerdown, onClick, style, hasDragged } = useDrawerDrag({
   elRef,
   wrapperRef,
   position,
+  snapPoints,
   threshold,
   overshoot,
-  snap,
-  canClose,
+  animation,
+  initial,
+  preventDragClose,
   close,
 })
 
@@ -221,8 +231,8 @@ const { resetMetaViewport } = useMetaViewport()
 // To achieve this, the transition names are set to undefined
 const preventTransition = computed(() => {
   return (
-    mappedOptions.beforeMount.open &&
-    !mappedOptions.beforeMount.animate &&
+    mappedOptions.initial.open &&
+    !mappedOptions.initial.transition &&
     !wasActive.value
   )
 })
@@ -230,13 +240,11 @@ const preventTransition = computed(() => {
 const backdropTransition = computed(() => {
   return preventTransition.value
     ? undefined
-    : mappedOptions.transitions?.backdrop
+    : mappedOptions.transition?.backdrop
 })
 
 const contentTransition = computed(() => {
-  return preventTransition.value
-    ? undefined
-    : mappedOptions.transitions?.content
+  return preventTransition.value ? undefined : mappedOptions.transition?.content
 })
 
 // Private functions
@@ -270,14 +278,14 @@ async function onOpen() {
   await nextTick()
   innerActive.value = true
   await nextTick()
-  if (mappedOptions.mousewheel) {
+  if (mappedOptions.enableMousewheel) {
     initializeWheelListener()
   }
 }
 
 function onClose() {
   innerActive.value = false
-  if (mappedOptions.mousewheel) {
+  if (mappedOptions.enableMousewheel) {
     destroyWheelListener()
   }
 }
@@ -296,7 +304,7 @@ function guardedClick(event: PointerEvent) {
 }
 
 function guardedClose() {
-  if (canClose && !disabled.value) {
+  if (!disabled.value) {
     close()
   }
 }
@@ -310,8 +318,8 @@ function saveOvershoot() {
 }
 
 // Lifecycle hooks and listeners
-if (mappedOptions.keys && canClose) {
-  for (const key of mappedOptions.keys) {
+if (mappedOptions.keyListener.close) {
+  for (const key of mappedOptions.keyListener.close) {
     onKeyStroke(key, (e) => {
       close()
       e.preventDefault()
@@ -334,7 +342,7 @@ watch(innerActive, () => {
 
 onBeforeMount(async () => {
   // Force open
-  if (mappedOptions.beforeMount.open) {
+  if (mappedOptions.initial.open) {
     open()
   }
 })
@@ -351,7 +359,10 @@ onBeforeUnmount(() => {
 onUnmounted(() => {
   if (mappedOptions.scrollLock) {
     unlockScroll()
-    if (mappedOptions.scrollLockPadding) {
+    if (
+      typeof mappedOptions.scrollLock === 'object' &&
+      mappedOptions.scrollLock.padding
+    ) {
       removeScrollLockPadding()
     }
   }
@@ -360,7 +371,7 @@ onUnmounted(() => {
     releaseFocus()
   }
 
-  if (mappedOptions.preventZoom) {
+  if (!mappedOptions.preventZoom) {
     resetMetaViewport()
   }
 

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

@@ -1,5 +1,5 @@
 import { type Component, type MaybeRef } from 'vue';
-import type { DrawerOptions } from './../types/index';
+import type { DrawerOptions } from '../types/index';
 import '@maas/vue-equipment/utils/css/animations/fade-in.css';
 import '@maas/vue-equipment/utils/css/animations/fade-out.css';
 import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css';

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.d.ts

@@ -6,9 +6,11 @@ type UseDrawerDragArgs = {
     elRef: Ref<HTMLElement | undefined>;
     wrapperRef: Ref<HTMLDivElement | undefined>;
     position: MaybeRef<DefaultOptions['position']>;
+    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
     threshold: MaybeRef<DefaultOptions['threshold']>;
-    snap: MaybeRef<DefaultOptions['snap']>;
-    canClose: MaybeRef<DefaultOptions['canClose']>;
+    initial: MaybeRef<DefaultOptions['initial']>;
+    animation: MaybeRef<DefaultOptions['animation']>;
+    preventDragClose: MaybeRef<DefaultOptions['preventDragClose']>;
     overshoot: MaybeRef<number>;
     close: () => void;
 };

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.mjs

@@ -26,10 +26,12 @@ export function useDrawerDrag(args) {
     elRef,
     wrapperRef,
     position,
+    snapPoints,
     overshoot,
     threshold,
-    snap,
-    canClose,
+    initial,
+    animation,
+    preventDragClose,
     close
   } = args;
   const { findState } = useDrawerState(toValue(id));
@@ -56,7 +58,6 @@ export function useDrawerDrag(args) {
   let cancelPointermove = void 0;
   let cancelTouchend = void 0;
   let scrollLock = void 0;
-  const duration = computed(() => toValue(snap)?.duration);
   const hasDragged = computed(() => {
     const hasDraggedX = !isWithinRange({
       input: draggedX.value,
@@ -86,8 +87,9 @@ export function useDrawerDrag(args) {
   } = useDrawerSnap({
     id,
     wrapperRect,
-    snap,
-    canClose,
+    animation,
+    snapPoints,
+    preventDragClose,
     position,
     overshoot,
     draggedY,
@@ -273,7 +275,7 @@ export function useDrawerDrag(args) {
         snapTo({
           snapPoint: payload.snapPoint,
           interpolate: true,
-          duration: payload.duration || duration.value
+          duration: payload.duration
         });
       }
     }
@@ -284,8 +286,7 @@ export function useDrawerDrag(args) {
     } else if (interpolateTo.value || interpolateTo.value === 0) {
       if (scrollLock && scrollLock.value || canInterpolate(e.target)) {
         interpolateDragged({
-          to: interpolateTo.value,
-          duration: duration.value
+          to: interpolateTo.value
         });
       }
       activeSnapPoint.value = snapPointsMap.value[interpolateTo.value];
@@ -304,15 +305,13 @@ export function useDrawerDrag(args) {
         case "bottom":
         case "top":
           interpolateDragged({
-            to: snappedY.value,
-            duration: duration.value
+            to: snappedY.value
           });
           break;
         case "right":
         case "left":
           interpolateDragged({
-            to: snappedX.value,
-            duration: duration.value
+            to: snappedX.value
           });
           break;
       }
@@ -388,8 +387,10 @@ export function useDrawerDrag(args) {
     () => [unrefElement(elRef), unrefElement(wrapperRef)],
     async () => {
       await getSizes();
-      const snapPoint = toValue(snap)?.initial;
-      snapTo({ snapPoint, interpolate: false });
+      const snapPoint = toValue(initial)?.snapPoint;
+      if (snapPoint) {
+        snapTo({ snapPoint, interpolate: false });
+      }
     }
   );
   watch([snappedX, snappedY], ([x, y]) => {

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerSnap.d.ts

@@ -7,8 +7,9 @@ type UseDrawerSnapArgs = {
     draggedY: Ref<number>;
     draggedX: Ref<number>;
     position: MaybeRef<DefaultOptions['position']>;
-    snap: MaybeRef<DefaultOptions['snap']>;
-    canClose: MaybeRef<DefaultOptions['canClose']>;
+    animation: MaybeRef<DefaultOptions['animation']>;
+    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
+    preventDragClose: MaybeRef<DefaultOptions['preventDragClose']>;
     overshoot: MaybeRef<number>;
 };
 type FindClosestSnapPointArgs = {
@@ -24,6 +25,7 @@ type SnapToArgs = {
 type InterpolateDraggedArgs = {
     to: number;
     duration?: number;
+    easing?: (t: number) => number;
 };
 export declare function useDrawerSnap(args: UseDrawerSnapArgs): {
     snappedY: Ref<number>;

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerSnap.mjs

@@ -5,19 +5,19 @@ import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
 export function useDrawerSnap(args) {
   const {
     id,
-    snap,
+    snapPoints,
+    animation,
     position,
     wrapperRect,
     overshoot,
     draggedY,
     draggedX,
-    canClose
+    preventDragClose
   } = args;
   const mappedSnapPoints = computedWithControl(
     () => toValue(wrapperRect),
     () => {
-      const snapPoints = toValue(snap)?.points;
-      const extended = toValue(canClose) ? [...snapPoints, 0] : snapPoints;
+      const extended = toValue(preventDragClose) ? toValue(snapPoints) : [...toValue(snapPoints), 0];
       const mapped = extended.map((snapPoint) => {
         return mapSnapPoint(snapPoint);
       });
@@ -28,13 +28,9 @@ export function useDrawerSnap(args) {
     }
   );
   const snapPointsMap = computedWithControl(
+    () => toValue(snapPoints),
     () => {
-      const snapPoints = toValue(snap)?.points;
-      return { ...snapPoints };
-    },
-    () => {
-      const snapPoints = toValue(snap)?.points;
-      const extended = toValue(canClose) ? [...snapPoints, 0] : snapPoints;
+      const extended = toValue(preventDragClose) ? toValue(snapPoints) : [...toValue(snapPoints), 0];
       const mapped = extended.reduce((acc, current) => {
         const key = mapSnapPoint(current);
         if (key || key === 0) {
@@ -192,7 +188,11 @@ export function useDrawerSnap(args) {
     }
   }
   function interpolateDragged(args2) {
-    const { to, duration = toValue(snap).duration } = args2;
+    const {
+      to,
+      duration = toValue(animation)?.snap?.duration || 300,
+      easing
+    } = args2;
     const snapPoint = snapPointsMap.value[to];
     useDrawerEmitter().emit("beforeSnap", { id: toValue(id), snapPoint });
     switch (position) {
@@ -202,6 +202,7 @@ export function useDrawerSnap(args) {
           from: draggedY.value,
           to,
           duration,
+          easing,
           callback: (value) => {
             draggedY.value = value;
             if (draggedY.value === to) {
@@ -219,6 +220,7 @@ export function useDrawerSnap(args) {
           from: draggedX.value,
           to,
           duration,
+          easing,
           callback: (value) => {
             draggedX.value = value;
             if (draggedX.value === to) {

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

@@ -3,15 +3,17 @@ export type SnapPoint = number | `${string}px`;
 export interface DrawerOptions {
     position?: 'top' | 'right' | 'bottom' | 'left';
     backdrop?: boolean;
+    tag?: 'dialog' | 'div';
     focusTrap?: boolean | Options;
-    scrollLock?: boolean;
-    scrollLockPadding?: boolean;
-    preventZoom?: boolean;
+    scrollLock?: boolean | {
+        padding: boolean;
+    };
+    snapPoints: SnapPoint[];
     teleport?: {
         target?: string;
         disabled?: boolean;
     };
-    transitions?: {
+    transition?: {
         content?: string;
         backdrop?: string;
     };
@@ -20,19 +22,23 @@ export interface DrawerOptions {
         distance?: number;
         momentum?: number;
     };
-    tag?: 'dialog' | 'div';
-    keys?: string[] | false;
-    beforeMount?: {
-        open: boolean;
-        animate: boolean;
+    animation?: {
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
     };
-    snap?: {
-        points: SnapPoint[];
-        duration?: number;
-        initial?: SnapPoint;
+    initial?: {
+        open?: boolean;
+        transition?: boolean;
+        snapPoint?: SnapPoint;
+    };
+    keyListener?: {
+        close?: string[] | false;
     };
-    mousewheel?: boolean;
-    canClose?: boolean;
+    enableMousewheel?: boolean;
+    preventZoom?: boolean;
+    preventDragClose?: boolean;
     disabled?: boolean;
 }
 export interface DrawerState {

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

@@ -1,8 +1,11 @@
 import type { DrawerOptions } from '../types.js';
 import type { RequireAll } from '@maas/vue-equipment/utils';
 type DefaultOptions = RequireAll<DrawerOptions> & {
+    scrollLock: RequireAll<DrawerOptions['scrollLock']>;
     threshold: RequireAll<DrawerOptions['threshold']>;
-    snap: RequireAll<DrawerOptions['snap']>;
+    animation: RequireAll<DrawerOptions['animation']>;
+    initial: RequireAll<DrawerOptions['initial']>;
+    keyListener: RequireAll<DrawerOptions['keyListener']>;
 };
 declare const defaultOptions: DefaultOptions;
 export { defaultOptions, type DefaultOptions };