@maas/vue-equipment 0.16.8 → 0.17.0

package/dist/nuxt/module.json

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

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

@@ -97,7 +97,7 @@ import '@maas/vue-equipment/utils/css/animations/slide-btt-out.css'
 
 // Prevent deep merge of certain options
 const customDefu = createDefu((obj, key, value) => {
-  if (key === 'keys' || key === 'snapPoints') {
+  if (key === 'keys' || key === 'points') {
     obj[key] = value
     return true
   }
@@ -126,7 +126,7 @@ const mappedOptions: typeof defaultOptions = customDefu(
 )
 
 const overshoot = ref(0)
-const { position, threshold, snapPoints, snapPoint, canClose } = mappedOptions
+const { position, threshold, snap, canClose } = mappedOptions
 
 const {
   isActive,
@@ -148,8 +148,7 @@ const { onPointerdown, dragging, style } = useDrawerDrag({
   position,
   threshold,
   overshoot,
-  snapPoints,
-  snapPoint,
+  snap,
   canClose,
   close,
 })
@@ -290,5 +289,5 @@ onBeforeUnmount(() => {
 </script>
 
 <style>
-: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-x:hidden;--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;pointer-events:none;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-x:var(--magic-drawer-content-overflow-x);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}.magic-drawer.-dragging .magic-drawer__drag{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;pointer-events:auto;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-width:100%;--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-x:hidden;--magic-drawer-content-overflow-y:hidden;--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:0rem;--magic-drawer-drag-overshoot-y:0rem;--magic-drawer-padding:0rem}.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;pointer-events:none;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-padding:0 0 var(--magic-drawer-drag-overshoot-y) 0}.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-padding:var(--magic-drawer-drag-overshoot-y) 0 0 0}.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-padding:0 var(--magic-drawer-drag-overshoot-x) 0 0}.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-padding:0 0 0 var(--magic-drawer-drag-overshoot-x)}.magic-drawer__wrapper{height:calc(var(--magic-drawer-height) + var(--magic-drawer-drag-overshoot-y));pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:calc(var(--magic-drawer-width) + var(--magic-drawer-drag-overshoot-x))}.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-x:var(--magic-drawer-content-overflow-x);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}.magic-drawer.-dragging .magic-drawer__drag{cursor:grabbing}.magic-drawer__drag>*{padding:var(--magic-drawer-padding)}.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;pointer-events:auto;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/useDrawerDrag.d.ts

@@ -1,23 +1,22 @@
-import { type MaybeRef } from 'vue';
+import { type Ref, type MaybeRef } from 'vue';
 import { type DefaultOptions } from '../../utils/defaultOptions.js';
 type UseDrawerDragArgs = {
     id: MaybeRef<string>;
     isActive: MaybeRef<boolean>;
-    elRef: MaybeRef<HTMLDivElement | undefined>;
-    wrapperRef: MaybeRef<HTMLDivElement | undefined>;
+    elRef: Ref<HTMLDivElement | undefined>;
+    wrapperRef: Ref<HTMLDivElement | undefined>;
     position: MaybeRef<DefaultOptions['position']>;
     threshold: MaybeRef<DefaultOptions['threshold']>;
-    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
-    snapPoint: MaybeRef<DefaultOptions['snapPoint']>;
+    snap: MaybeRef<DefaultOptions['snap']>;
     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>;
+    draggedX: Ref<number>;
+    draggedY: Ref<number>;
+    dragging: Ref<boolean>;
     onPointerdown: (e: PointerEvent) => void;
 };
 export {};

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

@@ -24,11 +24,10 @@ export function useDrawerDrag(args) {
     isActive,
     elRef,
     wrapperRef,
-    snapPoints,
     position,
     overshoot,
     threshold,
-    snapPoint,
+    snap,
     canClose,
     close
   } = args;
@@ -46,9 +45,10 @@ export function useDrawerDrag(args) {
   const relDirectionX = ref("absolute");
   const absDirectionY = ref(void 0);
   const absDirectionX = ref(void 0);
-  const hasSnapPoints = computed(() => toValue(snapPoints).length > 1);
+  const hasSnapPoints = computed(() => toValue(snap)?.points.length > 1);
   const elRect = ref(void 0);
   const wrapperRect = ref(void 0);
+  const duration = computed(() => toValue(snap)?.duration);
   const draggedX = ref(0);
   const draggedY = ref(0);
   const style = computed(
@@ -67,7 +67,7 @@ export function useDrawerDrag(args) {
   } = useDrawerSnap({
     id,
     wrapperRect,
-    snapPoints,
+    snap,
     canClose,
     position,
     overshoot,
@@ -301,7 +301,11 @@ export function useDrawerDrag(args) {
         console.warn("Cannot snap to point when drawer is not open");
         return;
       } else {
-        snapTo({ snapPoint: payload.snapPoint, interpolate: true });
+        snapTo({
+          snapPoint: payload.snapPoint,
+          interpolate: true,
+          duration: duration.value
+        });
       }
     }
   }
@@ -310,7 +314,10 @@ export function useDrawerDrag(args) {
       close();
     } else if (interpolateTo.value || interpolateTo.value === 0) {
       if (scrollLock && scrollLock.value || canInterpolate(e.target)) {
-        interpolateDragged(interpolateTo.value);
+        interpolateDragged({
+          to: interpolateTo.value,
+          duration: duration.value
+        });
       }
       activeSnapPoint.value = snapPointsMap.value[interpolateTo.value];
       switch (position) {
@@ -327,11 +334,17 @@ export function useDrawerDrag(args) {
       switch (position) {
         case "bottom":
         case "top":
-          interpolateDragged(snappedY.value);
+          interpolateDragged({
+            to: snappedY.value,
+            duration: duration.value
+          });
           break;
         case "right":
         case "left":
-          interpolateDragged(snappedX.value);
+          interpolateDragged({
+            to: snappedX.value,
+            duration: duration.value
+          });
           break;
       }
     }
@@ -379,9 +392,10 @@ export function useDrawerDrag(args) {
     useDrawerEmitter().on("*", emitterCallback);
   });
   watch(
-    () => [unrefElement(wrapperRef), unrefElement(wrapperRef)],
+    () => [unrefElement(elRef), unrefElement(wrapperRef)],
     async () => {
       await getSizes();
+      const snapPoint = toValue(snap)?.initial;
       snapTo({ snapPoint, interpolate: false });
     }
   );

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

@@ -1,8 +1,8 @@
-import { type MaybeRef } from 'vue';
+import { type Ref, type MaybeRef } from 'vue';
 import { type DefaultOptions } from '../../utils/defaultOptions.js';
 import { type SnapPoint } from '../../types.js';
 interface UseDrawerGuardsArgs {
-    elRef: MaybeRef<HTMLDivElement | undefined>;
+    elRef: Ref<HTMLDivElement | undefined>;
     absDirectionX: MaybeRef<'with' | 'against' | undefined>;
     absDirectionY: MaybeRef<'with' | 'against' | undefined>;
     position: MaybeRef<DefaultOptions['position']>;

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

@@ -2,13 +2,15 @@ import { computed, toValue } from "vue";
 import { unrefElement } from "@vueuse/core";
 export function useDrawerGuards(args) {
   const { elRef, absDirectionX, absDirectionY, position, activeSnapPoint } = args;
-  const isHoverSupported = matchMedia("(hover: hover)").matches;
+  const hasCursor = computed(() => {
+    return typeof window !== "undefined" && matchMedia("(hover: hover)").matches;
+  });
   const canSnap = computed(() => {
     return toValue(activeSnapPoint) !== 1 && !!toValue(activeSnapPoint);
   });
   function canDrag(el) {
     let element = el;
-    if (isHoverSupported) {
+    if (hasCursor.value) {
       return true;
     }
     if (canSnap.value) {
@@ -27,6 +29,9 @@ export function useDrawerGuards(args) {
             if (toValue(absDirectionY) === "with") {
               return false;
             }
+            if (!toValue(absDirectionY)) {
+              return false;
+            }
           }
           break;
         case "top":
@@ -38,6 +43,9 @@ export function useDrawerGuards(args) {
             if (toValue(absDirectionY) === "with") {
               return false;
             }
+            if (!toValue(absDirectionY)) {
+              return false;
+            }
           }
           break;
         case "right":
@@ -48,6 +56,9 @@ export function useDrawerGuards(args) {
             if (toValue(absDirectionX) === "with") {
               return false;
             }
+            if (!toValue(absDirectionX)) {
+              return false;
+            }
           }
           break;
         case "left":
@@ -59,6 +70,9 @@ export function useDrawerGuards(args) {
             if (toValue(absDirectionX) === "with") {
               return false;
             }
+            if (!toValue(absDirectionX)) {
+              return false;
+            }
           }
           break;
       }
@@ -68,7 +82,7 @@ export function useDrawerGuards(args) {
   }
   function canInterpolate(el) {
     let element = el;
-    if (isHoverSupported) {
+    if (hasCursor.value) {
       return true;
     }
     while (element) {
@@ -94,7 +108,7 @@ export function useDrawerGuards(args) {
   }
   function lockScroll(el) {
     let element = el;
-    if (isHoverSupported) {
+    if (hasCursor.value && !canSnap.value) {
       return void 0;
     }
     while (element) {

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

@@ -5,7 +5,7 @@ import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
 export function useDrawerSnap(args) {
   const {
     id,
-    snapPoints,
+    snap,
     position,
     wrapperRect,
     overshoot,
@@ -16,7 +16,8 @@ export function useDrawerSnap(args) {
   const mappedSnapPoints = computedWithControl(
     () => toValue(wrapperRect),
     () => {
-      const extended = toValue(canClose) ? [...toValue(snapPoints), 0] : toValue(snapPoints);
+      const snapPoints = toValue(snap)?.points;
+      const extended = toValue(canClose) ? [...snapPoints, 0] : snapPoints;
       const mapped = extended.map((snapPoint) => {
         return mapSnapPoint(snapPoint);
       });
@@ -28,10 +29,12 @@ export function useDrawerSnap(args) {
   );
   const snapPointsMap = computedWithControl(
     () => {
-      return { ...toValue(snapPoints) };
+      const snapPoints = toValue(snap)?.points;
+      return { ...snapPoints };
     },
     () => {
-      const extended = toValue(canClose) ? [...toValue(snapPoints), 0] : toValue(snapPoints);
+      const snapPoints = toValue(snap)?.points;
+      const extended = toValue(canClose) ? [...snapPoints, 0] : snapPoints;
       const mapped = extended.reduce((acc, current) => {
         const key = mapSnapPoint(current);
         if (key || key === 0) {
@@ -145,12 +148,12 @@ export function useDrawerSnap(args) {
     }
   }
   async function snapTo(args2) {
-    const { snapPoint, interpolate: interpolate2 } = args2;
+    const { snapPoint, interpolate: interpolate2, duration = 200 } = args2;
     await nextTick();
     switch (position) {
       case "top":
       case "bottom":
-        const mappedSnapPointY = mapSnapPoint(toValue(snapPoint));
+        const mappedSnapPointY = mapSnapPoint(snapPoint);
         if (!mappedSnapPointY && mappedSnapPointY !== 0)
           return;
         const closestY = await findClosestSnapPoint({
@@ -158,7 +161,7 @@ export function useDrawerSnap(args) {
           draggedY: mappedSnapPointY
         }) || 0;
         if (interpolate2) {
-          await interpolateDragged(closestY);
+          await interpolateDragged({ to: closestY, duration });
         } else {
           draggedY.value = closestY;
         }
@@ -175,7 +178,7 @@ export function useDrawerSnap(args) {
           draggedY
         }) || 0;
         if (interpolate2) {
-          await interpolateDragged(closestX);
+          await interpolateDragged({ to: closestX, duration });
         } else {
           draggedX.value = closestX;
           snappedX.value = closestX;
@@ -185,19 +188,20 @@ export function useDrawerSnap(args) {
         break;
     }
   }
-  async function interpolateDragged(target) {
-    const snapPoint = snapPointsMap.value[target];
+  async function interpolateDragged(args2) {
+    const { to, duration = 200 } = args2;
+    const snapPoint = snapPointsMap.value[to];
     useDrawerEmitter().emit("beforeSnap", { id: toValue(id), snapPoint });
     switch (position) {
       case "bottom":
       case "top":
         interpolate({
           from: draggedY.value,
-          to: target,
-          duration: 300,
+          to,
+          duration,
           callback: (value) => {
             draggedY.value = value;
-            if (draggedY.value === target) {
+            if (draggedY.value === to) {
               useDrawerEmitter().emit("afterSnap", {
                 id: toValue(id),
                 snapPoint
@@ -210,11 +214,11 @@ export function useDrawerSnap(args) {
       case "left":
         interpolate({
           from: draggedX.value,
-          to: target,
-          duration: 300,
+          to,
+          duration,
           callback: (value) => {
             draggedX.value = value;
-            if (draggedX.value === target) {
+            if (draggedX.value === to) {
               useDrawerEmitter().emit("afterSnap", {
                 id: toValue(id),
                 snapPoint

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

@@ -23,8 +23,11 @@ export type DrawerOptions = {
         open: boolean;
         animate: boolean;
     };
-    snapPoints?: SnapPoint[];
-    snapPoint?: SnapPoint;
+    snap?: {
+        points: SnapPoint[];
+        duration?: number;
+        initial?: SnapPoint;
+    };
     canClose?: boolean;
 };
 export type DrawerEvents = {

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

@@ -22,8 +22,11 @@ const defaultOptions = {
     open: false,
     animate: false
   },
-  snapPoints: [1],
-  snapPoint: 1,
+  snap: {
+    points: [1],
+    duration: 200,
+    initial: 1
+  },
   canClose: true
 };
 export { defaultOptions };

package/package.json

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