@maas/vue-equipment 0.14.3 → 0.15.0

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.14.2"
+  "version": "0.14.4"
 }

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

@@ -19,19 +19,20 @@
       >
         <transition
           v-if="mappedOptions.backdrop || !!$slots.backdrop"
-          :name="mappedOptions.transitions?.backdrop"
+          :name="backdropTransition"
         >
           <div
             v-show="innerActive"
             class="magic-drawer__backdrop"
-            @click.self="close"
+            @click.self="closeIfAllowed"
           >
             <slot name="backdrop" />
           </div>
         </transition>
-        <div class="magic-drawer__wrapper">
+
+        <div class="magic-drawer__wrapper" ref="wrapperRef">
           <transition
-            :name="mappedOptions.transitions?.content"
+            :name="contentTransition"
             @before-leave="onBeforeLeave"
             @leave="onLeave"
             @after-leave="onAfterLeave"
@@ -39,20 +40,21 @@
             @enter="onEnter"
             @after-enter="onAfterEnter"
           >
-            <div
-              ref="elRef"
-              v-show="innerActive"
-              class="magic-drawer__content"
-              @pointerdown="onPointerdown"
-              :style="style"
-            >
-              <component
-                v-if="component"
-                v-bind="props"
-                :is="component"
-                @close="close"
-              />
-              <slot v-else />
+            <div v-show="innerActive" class="magic-drawer__content">
+              <div
+                ref="elRef"
+                class="magic-drawer__drag"
+                :style="style"
+                @pointerdown="onPointerdown"
+              >
+                <component
+                  v-if="component"
+                  v-bind="props"
+                  :is="component"
+                  @close="closeIfAllowed"
+                />
+                <slot v-else />
+              </div>
             </div>
           </transition>
         </div>
@@ -65,8 +67,11 @@
 import {
   ref,
   watch,
+  computed,
   nextTick,
   toValue,
+  onBeforeMount,
+  onBeforeUnmount,
   type Component,
   type MaybeRef,
 } from 'vue'
@@ -90,9 +95,9 @@ import '@maas/vue-equipment/utils/css/animations/slide-rtl-out.css'
 import '@maas/vue-equipment/utils/css/animations/slide-ttb-out.css'
 import '@maas/vue-equipment/utils/css/animations/slide-btt-out.css'
 
-// Prevent keys array from being merged with default
+// Prevent deep merge of certain options
 const customDefu = createDefu((obj, key, value) => {
-  if (key === 'keys') {
+  if (key === 'keys' || key === 'snapPoints') {
     obj[key] = value
     return true
   }
@@ -112,17 +117,20 @@ const props = withDefaults(defineProps<MagicDrawerProps>(), {
 
 const elRef = ref<HTMLDivElement | undefined>(undefined)
 const drawerRef = ref<HTMLElement | undefined>(undefined)
+const wrapperRef = ref<HTMLDivElement | undefined>(undefined)
 const drawerApi = useDrawerApi(props.id, { focusTarget: drawerRef })
+
 const mappedOptions: typeof defaultOptions = customDefu(
   props.options,
   defaultOptions
 )
 
 const overshoot = ref(0)
-const { position, threshold } = mappedOptions
+const { position, threshold, snapPoints, snapPoint, canClose } = mappedOptions
 
 const {
   isActive,
+  open,
   close,
   trapFocus,
   releaseFocus,
@@ -133,16 +141,21 @@ const {
 } = drawerApi
 
 const { onPointerdown, dragging, style } = useDrawerDrag({
+  elRef,
+  wrapperRef,
   position,
   threshold,
   overshoot,
-  elRef,
+  snapPoints,
+  snapPoint,
+  canClose,
   close,
 })
 
 // Split isActive into two values to animate drawer smoothly
 const innerActive = ref(false)
 const wrapperActive = ref(false)
+const wasActive = ref(false)
 
 const {
   onBeforeEnter,
@@ -161,19 +174,32 @@ const {
   trapFocus,
   releaseFocus,
   wrapperActive,
+  wasActive,
 })
 
-// Handle state
-async function onOpen() {
-  wrapperActive.value = true
-  await nextTick()
-  innerActive.value = true
-}
+// Surpress animation on initial mount if the options call for it
+// To achive this, the transition names are set to undefined
+const surpressTransition = computed(() => {
+  return (
+    mappedOptions.beforeMount.open &&
+    !mappedOptions.beforeMount.animate &&
+    !wasActive.value
+  )
+})
 
-function onClose() {
-  innerActive.value = false
-}
+const backdropTransition = computed(() => {
+  return surpressTransition.value
+    ? undefined
+    : mappedOptions.transitions?.backdrop
+})
+
+const contentTransition = computed(() => {
+  return surpressTransition.value
+    ? undefined
+    : mappedOptions.transitions?.content
+})
 
+// Private functions
 function convertToPixels(value: string) {
   const regex = /^(\d*\.?\d+)\s*(rem|px)$/
 
@@ -199,6 +225,23 @@ function convertToPixels(value: string) {
   }
 }
 
+async function onOpen() {
+  wrapperActive.value = true
+  await nextTick()
+  innerActive.value = true
+}
+
+function onClose() {
+  innerActive.value = false
+}
+
+// Public functions
+function closeIfAllowed() {
+  if (canClose) {
+    close()
+  }
+}
+
 function saveOvershoot() {
   const element = unrefElement(drawerRef)
   const overshootVar = getComputedStyle(element!).getPropertyValue(
@@ -208,7 +251,8 @@ function saveOvershoot() {
   overshoot.value = convertToPixels(overshootVar) || 0
 }
 
-if (mappedOptions.keys) {
+// Lifecycle hooks and listeners
+if (mappedOptions.keys && canClose) {
   for (const key of mappedOptions.keys) {
     onKeyStroke(key, (e) => {
       e.preventDefault()
@@ -229,8 +273,20 @@ watch(isActive, async (value) => {
 watch(innerActive, () => {
   saveOvershoot()
 })
+
+onBeforeMount(async () => {
+  // Force open
+  if (mappedOptions.beforeMount.open) {
+    open()
+  }
+})
+
+// Reset state on unmount
+onBeforeUnmount(() => {
+  close()
+})
 </script>
 
 <style>
-:root{--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-y:auto;--magic-drawer-handle-wrapper-height:2rem;--magic-drawer-handle-width:3rem;--magic-drawer-handle-height:0.375rem;--magic-drawer-handle-color:#d4d4d8;--magic-drawer-handle-border-radius:0.25rem;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-drag-overshoot-x:0;--magic-drawer-drag-overshoot-y:0}.magic-drawer{align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot)}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1)}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot)}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1)}.magic-drawer__wrapper{transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:100%}.magic-drawer__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;justify-content:var(--magic-drawer-justify-content);max-height:100%;overflow-y:var(--magic-drawer-content-overflow-y);position:relative;scroll-behavior:smooth;width:100%}.magic-drawer.-dragging .magic-drawer__content{cursor:grabbing}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
+:root{--magic-drawer-height:75svh;--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-y:auto;--magic-drawer-handle-wrapper-height:2rem;--magic-drawer-handle-width:3rem;--magic-drawer-handle-height:0.375rem;--magic-drawer-handle-color:#d4d4d8;--magic-drawer-handle-border-radius:0.25rem;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-drag-overshoot-x:0;--magic-drawer-drag-overshoot-y:0}.magic-drawer{align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot)}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1)}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot)}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1)}.magic-drawer__wrapper{height:calc(var(--magic-drawer-height) + var(--magic-drawer-drag-overshoot));pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:100%}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}.magic-drawer.-dragging .magic-drawer__content{cursor:grabbing}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
 </style>

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

@@ -10,6 +10,7 @@ type UseDrawerCallbackArgs = {
     trapFocus: () => void;
     releaseFocus: () => void;
     wrapperActive: Ref<boolean>;
+    wasActive: Ref<boolean>;
 };
 export declare function useDrawerCallback(args: UseDrawerCallbackArgs): {
     onBeforeEnter: (_el: Element) => void;

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

@@ -10,7 +10,8 @@ export function useDrawerCallback(args) {
     unlockScroll,
     trapFocus,
     releaseFocus,
-    wrapperActive
+    wrapperActive,
+    wasActive
   } = args;
   function onBeforeEnter(_el) {
     useDrawerEmitter().emit("beforeEnter", toValue(id));
@@ -30,6 +31,7 @@ export function useDrawerCallback(args) {
       await nextTick();
       trapFocus();
     }
+    wasActive.value = true;
   }
   function onBeforeLeave(_el) {
     useDrawerEmitter().emit("beforeLeave", toValue(id));

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

@@ -2,13 +2,19 @@ import { type MaybeRef } from 'vue';
 import { type DefaultOptions } from '../../utils/defaultOptions.js';
 type UseDrawerDragArgs = {
     elRef: MaybeRef<HTMLDivElement | undefined>;
+    wrapperRef: MaybeRef<HTMLDivElement | undefined>;
     position: MaybeRef<DefaultOptions['position']>;
     threshold: MaybeRef<DefaultOptions['threshold']>;
+    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
+    snapPoint: MaybeRef<DefaultOptions['snapPoint']>;
+    canClose: MaybeRef<DefaultOptions['canClose']>;
     overshoot: MaybeRef<number>;
     close: () => void;
 };
 export declare function useDrawerDrag(args: UseDrawerDragArgs): {
     style: import("vue").ComputedRef<string>;
+    draggedX: import("vue").Ref<number>;
+    draggedY: import("vue").Ref<number>;
     dragging: import("vue").Ref<boolean>;
     onPointerdown: (e: PointerEvent) => void;
 };

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

@@ -4,20 +4,46 @@ import {
   onMounted,
   watch,
   onBeforeUnmount,
-  toValue
+  toValue,
+  nextTick
 } from "vue";
 import { useEventListener, unrefElement } from "@vueuse/core";
 import { interpolate } from "@maas/vue-equipment/utils";
 import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
+import { useDrawerSnap } from "./useDrawerSnap.mjs";
 export function useDrawerDrag(args) {
-  const { elRef, position, overshoot, threshold, close } = args;
+  const {
+    elRef,
+    wrapperRef,
+    snapPoints,
+    position,
+    overshoot,
+    threshold,
+    snapPoint,
+    canClose,
+    close
+  } = args;
+  const { findClosestSnapPoint, mapSnapPoint, drawerHeight, drawerWidth } = useDrawerSnap({
+    wrapperRef,
+    snapPoints,
+    canClose,
+    position,
+    overshoot
+  });
   const dragStart = ref(void 0);
-  const originX = ref(0);
-  const originY = ref(0);
   const dragging = ref(false);
   const shouldClose = ref(false);
+  const interpolateTo = ref(void 0);
   const elRect = ref(void 0);
+  let cancelPointerup = void 0;
   let cancelPointermove = void 0;
+  const originX = ref(0);
+  const originY = ref(0);
+  const snappedY = ref(0);
+  const snappedX = ref(0);
+  const directionY = ref("absolute");
+  const directionX = ref("absolute");
+  const hasSnapPoints = computed(() => toValue(snapPoints).length > 1);
   const draggedX = ref(0);
   const draggedY = ref(0);
   const style = computed(
@@ -26,53 +52,125 @@ export function useDrawerDrag(args) {
   function getSizes() {
     elRect.value = unrefElement(elRef)?.getBoundingClientRect();
   }
-  function checkPosition() {
+  async function checkPosition() {
     switch (position) {
       case "bottom":
-        if (draggedY.value > toValue(threshold).distance) {
-          shouldClose.value = true;
+        const snapPointB = await findClosestSnapPoint({
+          draggedX,
+          draggedY,
+          direction: directionY.value
+        });
+        if (draggedY.value > toValue(threshold).distance || hasSnapPoints.value) {
+          if (snapPointB === drawerHeight.value) {
+            shouldClose.value = true;
+          } else {
+            interpolateTo.value = snapPointB;
+          }
         }
         break;
       case "top":
-        if (draggedY.value < toValue(threshold).distance * -1) {
-          shouldClose.value = true;
+        const snapPointT = await findClosestSnapPoint({
+          draggedX,
+          draggedY,
+          direction: directionY.value
+        });
+        if (draggedY.value < toValue(threshold).distance * -1 || hasSnapPoints.value) {
+          if (snapPointT === drawerHeight.value * -1) {
+            shouldClose.value = true;
+          } else {
+            interpolateTo.value = snapPointT;
+          }
         }
         break;
       case "right":
-        if (draggedX.value > toValue(threshold).distance) {
-          shouldClose.value = true;
+        const snapPointR = await findClosestSnapPoint({
+          draggedX,
+          draggedY,
+          direction: directionX.value
+        });
+        if (draggedX.value > toValue(threshold).distance || hasSnapPoints.value) {
+          if (snapPointR === drawerWidth.value) {
+            shouldClose.value = true;
+          } else {
+            interpolateTo.value = snapPointR;
+          }
         }
         break;
       case "left":
-        if (draggedX.value < toValue(threshold).distance * -1) {
-          shouldClose.value = true;
+        const snapPointL = await findClosestSnapPoint({
+          draggedX,
+          draggedY,
+          direction: directionX.value
+        });
+        if (draggedX.value < toValue(threshold).distance * -1 || hasSnapPoints.value) {
+          if (snapPointL === drawerWidth.value * -1) {
+            shouldClose.value = true;
+          } else {
+            interpolateTo.value = snapPointL;
+          }
         }
         break;
     }
   }
-  function checkMomentum({ x, y }) {
+  async function checkMomentum({ x, y }) {
     const elapsed = Date.now() - dragStart.value.getTime();
     const velocityX = (x - originX.value) / elapsed;
     const velocityY = (y - originY.value) / elapsed;
     switch (position) {
       case "bottom":
+        const snapPointB = await findClosestSnapPoint({
+          draggedX,
+          draggedY,
+          direction: directionY.value
+        });
         if (velocityY > toValue(threshold).momentum) {
-          shouldClose.value = true;
+          if (snapPointB === drawerHeight.value) {
+            shouldClose.value = true;
+          } else {
+            interpolateTo.value = snapPointB;
+          }
         }
         break;
       case "top":
+        const snapPointT = await findClosestSnapPoint({
+          draggedX,
+          draggedY,
+          direction: directionY.value
+        });
         if (velocityY < toValue(threshold).momentum * -1) {
-          shouldClose.value = true;
+          if (snapPointT === drawerHeight.value) {
+            shouldClose.value = true;
+          } else {
+            interpolateTo.value = snapPointT;
+          }
         }
         break;
       case "right":
+        const snapPointR = await findClosestSnapPoint({
+          draggedX,
+          draggedY,
+          direction: directionX.value
+        });
         if (velocityX > toValue(threshold).momentum) {
-          shouldClose.value = true;
+          if (snapPointR === drawerWidth.value) {
+            shouldClose.value = true;
+          } else {
+            interpolateTo.value = snapPointR;
+          }
         }
         break;
       case "left":
-        if (velocityX < toValue(threshold).momentum * -1) {
-          shouldClose.value = true;
+        const snapPointL = await findClosestSnapPoint({
+          draggedX,
+          draggedY,
+          direction: directionX.value
+        });
+        if (velocityX > toValue(threshold).momentum) {
+          if (snapPointL === drawerWidth.value) {
+            shouldClose.value = true;
+          } else {
+            interpolateTo.value = snapPointL;
+          }
         }
         break;
     }
@@ -99,59 +197,109 @@ export function useDrawerDrag(args) {
   function setDragged({ x, y }) {
     switch (position) {
       case "bottom":
-        draggedY.value = clamp(y - originY.value, 0, toValue(overshoot) * -1);
+        const newDraggedB = clamp(y - originY.value, 0, toValue(overshoot) * -1);
+        directionY.value = newDraggedB < draggedY.value ? "below" : "above";
+        draggedY.value = newDraggedB;
         break;
       case "top":
-        draggedY.value = clamp(y - originY.value, 0, toValue(overshoot));
+        const newDraggedT = clamp(y - originY.value, 0, toValue(overshoot));
+        directionY.value = newDraggedT < draggedY.value ? "below" : "above";
+        draggedY.value = newDraggedT;
         break;
       case "right":
-        draggedX.value = clamp(x - originX.value, 0, toValue(overshoot) * -1);
+        const newDraggedR = clamp(x - originX.value, 0, toValue(overshoot) * -1);
+        directionX.value = newDraggedR < draggedX.value ? "below" : "above";
+        draggedX.value = newDraggedR;
         break;
       case "left":
-        draggedX.value = clamp(x - originX.value, 0, toValue(overshoot));
+        const newDraggedL = clamp(x - originX.value, 0, toValue(overshoot));
+        directionX.value = newDraggedL < draggedX.value ? "below" : "above";
+        draggedX.value = newDraggedL;
+        break;
+    }
+  }
+  async function setInitial() {
+    await nextTick();
+    switch (position) {
+      case "top":
+      case "bottom":
+        draggedY.value = await findClosestSnapPoint({
+          draggedX,
+          draggedY: mapSnapPoint(toValue(snapPoint)) || 0
+        }) || 0;
+        break;
+      case "left":
+      case "right":
+        draggedX.value = await findClosestSnapPoint({
+          draggedX: mapSnapPoint(toValue(snapPoint)) || 0,
+          draggedY
+        }) || 0;
         break;
     }
   }
   function resetStateAndListeners() {
     dragging.value = false;
     shouldClose.value = false;
+    interpolateTo.value = void 0;
+    cancelPointerup?.();
     cancelPointermove?.();
   }
   function resetDragged() {
     draggedX.value = 0;
     draggedY.value = 0;
   }
+  function resetSnapped() {
+    snappedX.value = 0;
+    snappedY.value = 0;
+  }
   function emitterCallback(event, _payload) {
     if (event === "afterLeave") {
       resetDragged();
+      resetSnapped();
+    }
+  }
+  async function interpolateDragged(target) {
+    switch (position) {
+      case "bottom":
+      case "top":
+        snappedY.value = target;
+        interpolate({
+          from: draggedY.value,
+          to: target,
+          duration: 300,
+          callback: (value) => {
+            draggedY.value = value;
+          }
+        });
+        break;
+      case "right":
+      case "left":
+        snappedX.value = target;
+        interpolate({
+          from: draggedX.value,
+          to: target,
+          duration: 300,
+          callback: (value) => {
+            draggedX.value = value;
+          }
+        });
+        break;
     }
   }
   function onPointerup(e) {
     if (shouldClose.value) {
       close();
+    } else if (interpolateTo.value || interpolateTo.value === 0) {
+      interpolateDragged(interpolateTo.value);
     } else {
       switch (position) {
         case "bottom":
         case "top":
-          interpolate({
-            from: draggedY.value,
-            to: 0,
-            duration: 50,
-            callback: (value) => {
-              draggedY.value = value;
-            }
-          });
+          interpolateDragged(snappedY.value);
           break;
         case "right":
         case "left":
-          interpolate({
-            from: draggedX.value,
-            to: 0,
-            duration: 50,
-            callback: (value) => {
-              draggedX.value = value;
-            }
-          });
+          interpolateDragged(snappedX.value);
           break;
       }
     }
@@ -173,10 +321,10 @@ export function useDrawerDrag(args) {
     }
     ;
     e.target.setPointerCapture(e.pointerId);
-    useEventListener(document, "pointerup", onPointerup);
+    cancelPointerup = useEventListener(document, "pointerup", onPointerup);
     cancelPointermove = useEventListener(document, "pointermove", onPointermove);
-    originX.value = e.screenX;
-    originY.value = e.screenY;
+    originX.value = e.screenX - draggedX.value;
+    originY.value = e.screenY - draggedY.value;
     dragStart.value = /* @__PURE__ */ new Date();
     onPointermove(e);
     e.preventDefault();
@@ -186,9 +334,10 @@ export function useDrawerDrag(args) {
     useDrawerEmitter().on("*", emitterCallback);
   });
   watch(
-    () => unrefElement(elRef),
+    () => [unrefElement(elRef), unrefElement(wrapperRef)],
     () => {
       getSizes();
+      setInitial();
     }
   );
   onBeforeUnmount(() => {
@@ -196,6 +345,8 @@ export function useDrawerDrag(args) {
   });
   return {
     style,
+    draggedX,
+    draggedY,
     dragging,
     onPointerdown
   };

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

@@ -0,0 +1,22 @@
+import { type MaybeRef } from 'vue';
+import { type DefaultOptions } from '../../utils/defaultOptions.js';
+import { type SnapPoint } from '../../types.js';
+type UseDrawerSnapArgs = {
+    wrapperRef: MaybeRef<HTMLDivElement | undefined>;
+    position: MaybeRef<DefaultOptions['position']>;
+    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
+    canClose: MaybeRef<DefaultOptions['canClose']>;
+    overshoot: MaybeRef<number>;
+};
+type FindClosestSnapPointArgs = {
+    draggedY: MaybeRef<number>;
+    draggedX: MaybeRef<number>;
+    direction?: 'below' | 'above' | 'absolute';
+};
+export declare function useDrawerSnap(args: UseDrawerSnapArgs): {
+    findClosestSnapPoint: (args: FindClosestSnapPointArgs) => Promise<number | undefined>;
+    mapSnapPoint: (snapPoint: SnapPoint) => number | undefined;
+    drawerHeight: import("vue").ComputedRef<number>;
+    drawerWidth: import("vue").ComputedRef<number>;
+};
+export {};

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

@@ -0,0 +1,135 @@
+import { ref, computed, toValue, nextTick } from "vue";
+import { unrefElement } from "@vueuse/core";
+import { mapValue } from "@maas/vue-equipment/utils";
+export function useDrawerSnap(args) {
+  const { snapPoints, position, wrapperRef, overshoot, canClose } = args;
+  const wrapperRect = ref(void 0);
+  const mappedSnapPoints = computed(() => {
+    const extended = toValue(canClose) ? [...toValue(snapPoints), 0] : toValue(snapPoints);
+    const mapped = extended.map((snapPoint) => {
+      return mapSnapPoint(snapPoint);
+    });
+    const filtered = mapped.filter((snapPoint) => !!snapPoint).sort((a, b) => a - b);
+    return filtered;
+  });
+  const drawerHeight = computed(
+    () => wrapperRect.value?.height - toValue(overshoot)
+  );
+  const drawerWidth = computed(
+    () => wrapperRect.value?.width - toValue(overshoot)
+  );
+  async function getSizes() {
+    wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
+    await nextTick();
+  }
+  function findClosestNumber(args2) {
+    const { number, numbers, direction } = args2;
+    let filtered = numbers;
+    switch (direction) {
+      case "above":
+        filtered = numbers.filter((num) => num > number);
+        break;
+      case "below":
+        filtered = numbers.filter((num) => num < number);
+        break;
+    }
+    if (filtered.length === 0) {
+      switch (direction) {
+        case "above":
+          return Math.max(...numbers);
+        case "below":
+          return Math.min(...numbers);
+        default:
+          return void 0;
+      }
+    }
+    const closestNumber = filtered.reduce(
+      (closest, current) => Math.abs(current - number) < Math.abs(closest - number) ? current : closest
+    );
+    return closestNumber;
+  }
+  function mapSnapPoint(snapPoint) {
+    if (typeof snapPoint === "number") {
+      const reversedSnapPoint = mapValue(snapPoint, 0, 1, 1, 0);
+      const vh = window.innerHeight;
+      const vw = window.innerWidth;
+      if (wrapperRect.value === void 0) {
+        return void 0;
+      }
+      switch (position) {
+        case "bottom":
+          if (reversedSnapPoint === 1)
+            return drawerHeight.value;
+          else if (reversedSnapPoint === 0)
+            return 0;
+          else
+            return vh * reversedSnapPoint - wrapperRect.value?.top;
+        case "top":
+          if (reversedSnapPoint === 1)
+            return drawerHeight.value * -1;
+          else if (reversedSnapPoint === 0)
+            return 0;
+          else
+            return vh * reversedSnapPoint - wrapperRect.value?.bottom;
+        case "right":
+          if (reversedSnapPoint === 1)
+            return drawerWidth.value;
+          else if (reversedSnapPoint === 0)
+            return 0;
+          else
+            return vw * reversedSnapPoint - wrapperRect.value?.left;
+        case "left":
+          if (reversedSnapPoint === 1)
+            return drawerWidth.value * -1;
+          else if (reversedSnapPoint === 0)
+            return 0;
+          else
+            return vw * reversedSnapPoint - wrapperRect.value?.right;
+        default:
+          return 0;
+      }
+    } else {
+      const parsedSnapPoint = parseFloat(snapPoint);
+      if (drawerHeight.value === void 0 || drawerWidth.value === void 0) {
+        return void 0;
+      }
+      switch (position) {
+        case "bottom":
+          return drawerHeight.value - parsedSnapPoint;
+        case "top":
+          return (drawerHeight.value - parsedSnapPoint) * -1;
+        case "right":
+          return drawerWidth.value - parsedSnapPoint;
+        case "left":
+          return (drawerWidth.value - parsedSnapPoint) * -1;
+        default:
+          return parseFloat(snapPoint);
+      }
+    }
+  }
+  async function findClosestSnapPoint(args2) {
+    const { draggedY, draggedX, direction = "absolute" } = args2;
+    await getSizes();
+    let closest = 0;
+    switch (position) {
+      case "bottom":
+      case "top":
+        closest = findClosestNumber({
+          number: toValue(draggedY),
+          numbers: mappedSnapPoints.value,
+          direction
+        });
+        break;
+      case "right":
+      case "left":
+        closest = findClosestNumber({
+          number: toValue(draggedX),
+          numbers: mappedSnapPoints.value,
+          direction
+        });
+        break;
+    }
+    return closest;
+  }
+  return { findClosestSnapPoint, mapSnapPoint, drawerHeight, drawerWidth };
+}

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

@@ -1,3 +1,4 @@
+export type SnapPoint = number | `${string}px`;
 export type DrawerOptions = {
     position?: 'top' | 'right' | 'bottom' | 'left';
     backdrop?: boolean;
@@ -18,6 +19,13 @@ export type DrawerOptions = {
     };
     tag?: 'dialog' | 'div';
     keys?: string[] | false;
+    beforeMount?: {
+        open: boolean;
+        animate: boolean;
+    };
+    snapPoints?: SnapPoint[];
+    snapPoint?: SnapPoint;
+    canClose?: boolean;
 };
 export type DrawerEvents = {
     beforeEnter: string;

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

@@ -1,7 +1,7 @@
 const defaultOptions = {
   position: "bottom",
   backdrop: true,
-  focusTrap: true,
+  focusTrap: false,
   scrollLock: true,
   scrollLockPadding: true,
   teleport: {
@@ -17,6 +17,13 @@ const defaultOptions = {
     momentum: 1
   },
   tag: "dialog",
-  keys: ["Escape"]
+  keys: ["Escape"],
+  beforeMount: {
+    open: false,
+    animate: false
+  },
+  snapPoints: [1],
+  snapPoint: 1,
+  canClose: true
 };
 export { defaultOptions };

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

@@ -60,6 +60,7 @@ import {
   watch,
   nextTick,
   toValue,
+  onBeforeUnmount,
   type Component,
   type MaybeRef,
 } from 'vue'
@@ -159,6 +160,11 @@ watch(isActive, async (value) => {
     onClose()
   }
 })
+
+// Reset state on unmount
+onBeforeUnmount(() => {
+  close()
+})
 </script>
 
 <style>

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

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, inject, computed, onMounted, toRaw, watch } from 'vue'
+import { ref, inject, computed, onMounted, watch } from 'vue'
 import { unrefElement } from '@vueuse/core'
 import { animate, type Easing } from 'motion'
 import { ScrollProgressKey } from '../symbols'

package/dist/utils/index.js

@@ -37,26 +37,21 @@ function clampValue(value, min, max) {
 
 // src/functions/interpolate.ts
 function interpolate(args) {
-  const {
-    from,
-    to,
-    duration,
-    callback,
-    easing = (t) => t * (2 - t),
-    interval = 1
-  } = args;
-  const steps = Math.ceil(duration / interval);
-  const stepSize = 1 / steps;
-  let currentStep = 0;
-  const intervalId = setInterval(() => {
-    const progress = currentStep * stepSize;
-    const value = from + (to - from) * easing(progress);
+  const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args;
+  let startTime;
+  const speed = 1;
+  function animate(timestamp) {
+    if (!startTime)
+      startTime = timestamp;
+    const progress = Math.min(1, (timestamp - startTime) / (duration * speed));
+    const easedProgress = easing(progress);
+    const value = from + (to - from) * easedProgress;
     callback(value);
-    currentStep++;
-    if (currentStep >= steps) {
-      clearInterval(intervalId);
+    if (progress < 1) {
+      requestAnimationFrame(animate);
     }
-  }, interval);
+  }
+  requestAnimationFrame(animate);
 }
 
 // src/functions/isIOS.ts

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../packages/utils/index.ts","../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export * from './src/functions/clampValue'\nexport * from './src/functions/interpolate'\nexport * from './src/functions/isIOS'\nexport * from './src/functions/mapValue'\nexport * from './src/functions/uuid'\nexport * from './src/functions/uniq'\nexport * from './src/functions/slugify'\n\nexport type * from './src/types'\n","export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  interval?: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const {\n    from,\n    to,\n    duration,\n    callback,\n    easing = (t: number) => t * (2 - t),\n    interval = 1,\n  } = args\n\n  const steps = Math.ceil(duration / interval)\n  const stepSize = 1 / steps\n\n  let currentStep = 0\n\n  const intervalId = setInterval(() => {\n    const progress = currentStep * stepSize\n    const value = from + (to - from) * easing(progress)\n\n    callback(value)\n    currentStep++\n\n    if (currentStep >= steps) {\n      clearInterval(intervalId)\n    }\n  }, interval)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number,\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,CAAC,MAAc,KAAK,IAAI;AAAA,IACjC,WAAW;AAAA,EACb,IAAI;AAEJ,QAAM,QAAQ,KAAK,KAAK,WAAW,QAAQ;AAC3C,QAAM,WAAW,IAAI;AAErB,MAAI,cAAc;AAElB,QAAM,aAAa,YAAY,MAAM;AACnC,UAAM,WAAW,cAAc;AAC/B,UAAM,QAAQ,QAAQ,KAAK,QAAQ,OAAO,QAAQ;AAElD,aAAS,KAAK;AACd;AAEA,QAAI,eAAe,OAAO;AACxB,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,QAAQ;AACb;;;ACnCO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACJO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../packages/utils/index.ts","../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export * from './src/functions/clampValue'\nexport * from './src/functions/interpolate'\nexport * from './src/functions/isIOS'\nexport * from './src/functions/mapValue'\nexport * from './src/functions/uuid'\nexport * from './src/functions/uniq'\nexport * from './src/functions/slugify'\n\nexport type * from './src/types'\n","export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  interval?: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n  let startTime: number\n  const speed = 1\n\n  function animate(timestamp: number) {\n    if (!startTime) startTime = timestamp\n\n    const progress = Math.min(1, (timestamp - startTime) / (duration * speed))\n    const easedProgress = easing(progress)\n    const value = from + (to - from) * easedProgress\n\n    callback(value)\n\n    if (progress < 1) {\n      requestAnimationFrame(animate)\n    }\n  }\n\n  requestAnimationFrame(animate)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number,\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM,EAAE,MAAM,IAAI,UAAU,UAAU,SAAS,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI;AAEtE,MAAI;AACJ,QAAM,QAAQ;AAEd,WAAS,QAAQ,WAAmB;AAClC,QAAI,CAAC;AAAW,kBAAY;AAE5B,UAAM,WAAW,KAAK,IAAI,IAAI,YAAY,cAAc,WAAW,MAAM;AACzE,UAAM,gBAAgB,OAAO,QAAQ;AACrC,UAAM,QAAQ,QAAQ,KAAK,QAAQ;AAEnC,aAAS,KAAK;AAEd,QAAI,WAAW,GAAG;AAChB,4BAAsB,OAAO;AAAA,IAC/B;AAAA,EACF;AAEA,wBAAsB,OAAO;AAC/B;;;AC9BO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACJO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}

package/dist/utils/index.mjs

@@ -5,26 +5,21 @@ function clampValue(value, min, max) {
 
 // src/functions/interpolate.ts
 function interpolate(args) {
-  const {
-    from,
-    to,
-    duration,
-    callback,
-    easing = (t) => t * (2 - t),
-    interval = 1
-  } = args;
-  const steps = Math.ceil(duration / interval);
-  const stepSize = 1 / steps;
-  let currentStep = 0;
-  const intervalId = setInterval(() => {
-    const progress = currentStep * stepSize;
-    const value = from + (to - from) * easing(progress);
+  const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args;
+  let startTime;
+  const speed = 1;
+  function animate(timestamp) {
+    if (!startTime)
+      startTime = timestamp;
+    const progress = Math.min(1, (timestamp - startTime) / (duration * speed));
+    const easedProgress = easing(progress);
+    const value = from + (to - from) * easedProgress;
     callback(value);
-    currentStep++;
-    if (currentStep >= steps) {
-      clearInterval(intervalId);
+    if (progress < 1) {
+      requestAnimationFrame(animate);
     }
-  }, interval);
+  }
+  requestAnimationFrame(animate);
 }
 
 // src/functions/isIOS.ts

package/dist/utils/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  interval?: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const {\n    from,\n    to,\n    duration,\n    callback,\n    easing = (t: number) => t * (2 - t),\n    interval = 1,\n  } = args\n\n  const steps = Math.ceil(duration / interval)\n  const stepSize = 1 / steps\n\n  let currentStep = 0\n\n  const intervalId = setInterval(() => {\n    const progress = currentStep * stepSize\n    const value = from + (to - from) * easing(progress)\n\n    callback(value)\n    currentStep++\n\n    if (currentStep >= steps) {\n      clearInterval(intervalId)\n    }\n  }, interval)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number,\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n"],"mappings":";AAAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,CAAC,MAAc,KAAK,IAAI;AAAA,IACjC,WAAW;AAAA,EACb,IAAI;AAEJ,QAAM,QAAQ,KAAK,KAAK,WAAW,QAAQ;AAC3C,QAAM,WAAW,IAAI;AAErB,MAAI,cAAc;AAElB,QAAM,aAAa,YAAY,MAAM;AACnC,UAAM,WAAW,cAAc;AAC/B,UAAM,QAAQ,QAAQ,KAAK,QAAQ,OAAO,QAAQ;AAElD,aAAS,KAAK;AACd;AAEA,QAAI,eAAe,OAAO;AACxB,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,QAAQ;AACb;;;ACnCO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACJO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  interval?: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n  let startTime: number\n  const speed = 1\n\n  function animate(timestamp: number) {\n    if (!startTime) startTime = timestamp\n\n    const progress = Math.min(1, (timestamp - startTime) / (duration * speed))\n    const easedProgress = easing(progress)\n    const value = from + (to - from) * easedProgress\n\n    callback(value)\n\n    if (progress < 1) {\n      requestAnimationFrame(animate)\n    }\n  }\n\n  requestAnimationFrame(animate)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number,\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n"],"mappings":";AAAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM,EAAE,MAAM,IAAI,UAAU,UAAU,SAAS,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI;AAEtE,MAAI;AACJ,QAAM,QAAQ;AAEd,WAAS,QAAQ,WAAmB;AAClC,QAAI,CAAC;AAAW,kBAAY;AAE5B,UAAM,WAAW,KAAK,IAAI,IAAI,YAAY,cAAc,WAAW,MAAM;AACzE,UAAM,gBAAgB,OAAO,QAAQ;AACrC,UAAM,QAAQ,QAAQ,KAAK,QAAQ;AAEnC,aAAS,KAAK;AAEd,QAAI,WAAW,GAAG;AAChB,4BAAsB,OAAO;AAAA,IAC/B;AAAA,EACF;AAEA,wBAAsB,OAAO;AAC/B;;;AC9BO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACJO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.14.3",
+  "version": "0.15.0",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",