@maas/vue-equipment 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,7 +1,11 @@
-import { ref } from "vue";
+import { shallowRef, ref } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import { matchClass } from "@maas/vue-equipment/utils";
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+import {
+  matchClass,
+  scrollbarWidth,
+  scrollbarGutterSupport
+} from "@maas/vue-equipment/utils";
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useDraggableScrollLock() {
   const positionFixedElements = ref([]);
   function lockScroll() {
@@ -13,24 +17,40 @@ export function useDraggableScrollLock() {
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-draggable/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
     );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
   }
   function removeScrollLockPadding() {
-    document.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     lockScroll,

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

@@ -1,11 +1,7 @@
-import { type MaybeRef, type Ref } from 'vue';
+import { type MaybeRef } from 'vue';
 import type { DraggableSnapPoint, Coordinates, DraggableDefaultOptions } from '../../types/index.js';
 type UseDraggableSnapArgs = {
     id: MaybeRef<string>;
-    elRect: Ref<DOMRect | undefined>;
-    wrapperRect: Ref<DOMRect | undefined>;
-    draggedY: Ref<number>;
-    draggedX: Ref<number>;
     animation: MaybeRef<DraggableDefaultOptions['animation']>;
     snapPoints: MaybeRef<DraggableDefaultOptions['snapPoints']>;
 };
@@ -21,17 +17,8 @@ type SnapToArgs = {
     duration?: number;
 };
 export declare function useDraggableSnap(args: UseDraggableSnapArgs): {
+    mappedActiveSnapPoint: import("vue").ComputedRef<Coordinates | undefined>;
     mappedSnapPoints: import("@vueuse/core").ComputedRefWithControl<Coordinates[]>;
-    activeSnapPoint: Ref<("center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right") | ["center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right", offset?: {
-        x?: number | undefined;
-        y?: number | undefined;
-    } | undefined] | undefined, "center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | ["center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right", offset?: {
-        x?: number;
-        y?: number;
-    } | undefined] | ["center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right", offset?: {
-        x?: number | undefined;
-        y?: number | undefined;
-    } | undefined] | undefined>;
     snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<string, DraggableSnapPoint>>;
     mapSnapPoint: (snapPoint: DraggableSnapPoint) => Coordinates | undefined;
     interpolateDragged: (args: InterpolateDraggedArgs) => void;

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

@@ -1,18 +1,37 @@
-import { ref, toValue, nextTick } from "vue";
+import { ref, toRefs, computed, toValue, nextTick } from "vue";
 import { computedWithControl } from "@vueuse/core";
 import { interpolate } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 import { defu } from "defu";
+import { useDraggableState } from "./useDraggableState.mjs";
 export function useDraggableSnap(args) {
-  const { id, draggedY, draggedX, elRect, wrapperRect, animation, snapPoints } = args;
-  const activeSnapPoint = ref(void 0);
+  const { id, animation, snapPoints } = args;
+  const { initializeState } = useDraggableState(toValue(id));
+  const state = initializeState();
+  const {
+    lastDraggedX,
+    lastDraggedY,
+    draggedX,
+    draggedY,
+    elRect,
+    wrapperRect,
+    activeSnapPoint
+  } = toRefs(state);
+  const interpolationIdX = ref(void 0);
+  const interpolationIdY = ref(void 0);
+  const mappedActiveSnapPoint = computed(() => {
+    if (!activeSnapPoint.value) {
+      return void 0;
+    }
+    return mapSnapPoint(activeSnapPoint.value);
+  });
   const mappedSnapPoints = computedWithControl(
     () => toValue(wrapperRect),
     () => {
       const mapped = toValue(snapPoints).map((snapPoint) => {
         return mapSnapPoint(snapPoint);
       }).filter((snapPoint) => snapPoint !== void 0);
-      return mapped;
+      return mapped ?? [];
     }
   );
   const snapPointsMap = computedWithControl(
@@ -45,52 +64,65 @@ export function useDraggableSnap(args) {
     const mappedSnapPoint = typeof snapPoint === "string" ? [snapPoint] : snapPoint;
     const [position, offset] = mappedSnapPoint;
     const mappedOffset = defu(offset, { x: 0, y: 0 });
+    let x = 0;
+    let y = 0;
     switch (position) {
-      case "top-left":
-        return {
-          x: mappedOffset.x,
-          y: mappedOffset.y
-        };
-      case "top-center":
-        return {
-          x: wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2,
-          y: mappedOffset.y
-        };
-      case "top-right":
-        return {
-          x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
-          y: mappedOffset.y
-        };
-      case "center-left":
-        return {
-          x: mappedOffset.x,
-          y: wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2
-        };
-      case "center":
-        return {
-          x: wrapperRect.value.width / 2 - elRect.value.width / 2 + mappedOffset.x,
-          y: wrapperRect.value.height / 2 - elRect.value.height / 2 + mappedOffset.y
-        };
-      case "center-right":
-        return {
-          x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
-          y: wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2
-        };
-      case "bottom-left":
-        return {
-          x: mappedOffset.x,
-          y: wrapperRect.value.height + mappedOffset.y - elRect.value.height
-        };
-      case "bottom-center":
-        return {
-          x: wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2,
-          y: wrapperRect.value.height - mappedOffset.y - elRect.value.height
-        };
-      case "bottom-right":
-        return {
-          x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
-          y: wrapperRect.value.height - mappedOffset.y - elRect.value.height
-        };
+      case "top-left": {
+        x = mappedOffset.x;
+        y = mappedOffset.y;
+        break;
+      }
+      case "top": {
+        x = wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2;
+        y = mappedOffset.y;
+        break;
+      }
+      case "top-right": {
+        x = wrapperRect.value.width - mappedOffset.x - elRect.value.width;
+        y = mappedOffset.y;
+        break;
+      }
+      case "left": {
+        x = mappedOffset.x;
+        y = wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2;
+        break;
+      }
+      case "center": {
+        x = wrapperRect.value.width / 2 - elRect.value.width / 2 + mappedOffset.x;
+        y = wrapperRect.value.height / 2 - elRect.value.height / 2 + mappedOffset.y;
+        break;
+      }
+      case "right": {
+        x = wrapperRect.value.width - mappedOffset.x - elRect.value.width;
+        y = wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2;
+        break;
+      }
+      case "bottom-left": {
+        x = mappedOffset.x;
+        y = wrapperRect.value.height + mappedOffset.y - elRect.value.height;
+        break;
+      }
+      case "bottom": {
+        x = wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2;
+        y = wrapperRect.value.height - mappedOffset.y - elRect.value.height;
+        break;
+      }
+      case "bottom-right": {
+        x = wrapperRect.value.width - mappedOffset.x - elRect.value.width;
+        y = wrapperRect.value.height - mappedOffset.y - elRect.value.height;
+        break;
+      }
+    }
+    return { x: Math.round(x), y: Math.round(y) };
+  }
+  function cancelInterpolation() {
+    if (interpolationIdY.value) {
+      cancelAnimationFrame(interpolationIdY.value);
+      interpolationIdY.value = void 0;
+    }
+    if (interpolationIdX.value) {
+      cancelAnimationFrame(interpolationIdX.value);
+      interpolationIdX.value = void 0;
     }
   }
   function interpolateDragged(args2) {
@@ -102,19 +134,27 @@ export function useDraggableSnap(args) {
     } = args2;
     const snapPoint = snapPointsMap.value[`x${x}y${y}`];
     emitter.emit("beforeSnap", { id: toValue(id), snapPoint });
-    interpolate({
+    cancelInterpolation();
+    interpolationIdY.value = interpolate({
       from: draggedY.value,
       to: y,
       duration,
       easing,
-      callback: (value) => {
+      callback(value) {
         draggedY.value = value;
         if (y > x && draggedY.value === y) {
           emitter.emit("afterSnap", { id: toValue(id), snapPoint });
         }
+        if (draggedY.value === y) {
+          lastDraggedY.value = y;
+          interpolationIdY.value = void 0;
+        }
+      },
+      interpolationIdCallback(id2) {
+        interpolationIdY.value = id2;
       }
     });
-    interpolate({
+    interpolationIdX.value = interpolate({
       from: draggedX.value,
       to: x,
       duration,
@@ -124,6 +164,13 @@ export function useDraggableSnap(args) {
         if (x >= y && draggedX.value === x) {
           emitter.emit("afterSnap", { id: toValue(id), snapPoint });
         }
+        if (draggedX.value === x) {
+          lastDraggedX.value = x;
+          interpolationIdX.value = void 0;
+        }
+      },
+      interpolationIdCallback(id2) {
+        interpolationIdX.value = id2;
       }
     });
   }
@@ -139,15 +186,18 @@ export function useDraggableSnap(args) {
           duration
         });
       } else {
+        cancelInterpolation();
         draggedX.value = mappedSnapPoint.x;
         draggedY.value = mappedSnapPoint.y;
+        lastDraggedX.value = draggedX.value;
+        lastDraggedY.value = draggedY.value;
       }
     }
     activeSnapPoint.value = snapPoint;
   }
   return {
+    mappedActiveSnapPoint,
     mappedSnapPoints,
-    activeSnapPoint,
     snapPointsMap,
     mapSnapPoint,
     interpolateDragged,

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

@@ -1,5 +1,5 @@
 import { ref, reactive, toValue } from "vue";
-const drawerStateStore = ref([]);
+const draggableStateStore = ref([]);
 export function useDraggableState(id) {
   function createState(id2) {
     const state = {
@@ -16,24 +16,25 @@ export function useDraggableState(id) {
       draggedX: 0,
       draggedY: 0,
       elRect: void 0,
-      wrapperRect: void 0
+      wrapperRect: void 0,
+      activeSnapPoint: void 0
     };
     return reactive(state);
   }
   function addState(id2) {
     const state = createState(id2);
-    drawerStateStore.value = [...drawerStateStore.value, state];
+    draggableStateStore.value = [...draggableStateStore.value, state];
     return state;
   }
   function initializeState() {
-    let state = drawerStateStore.value.find((entry) => {
+    let state = draggableStateStore.value.find((entry) => {
       return entry.id === id;
     });
     if (!state) state = addState(toValue(id));
     return state;
   }
   function deleteState() {
-    drawerStateStore.value = drawerStateStore.value.filter(
+    draggableStateStore.value = draggableStateStore.value.filter(
       (x) => x.id !== id
     );
   }

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

@@ -1,5 +1,5 @@
 import type { RequireAll } from '@maas/vue-equipment/utils';
-type Position = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+type Position = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
 export type Coordinates = {
     x: number;
     y: number;
@@ -53,8 +53,9 @@ export interface DraggableState {
     draggedY: number;
     elRect: DOMRect | undefined;
     wrapperRect: DOMRect | undefined;
+    activeSnapPoint: DraggableSnapPoint | undefined;
 }
-export type DraggableEvents = {
+export interface DraggableEvents {
     beforeSnap: {
         id: string;
         snapPoint: DraggableSnapPoint;
@@ -88,5 +89,5 @@ export type DraggableEvents = {
         x: number;
         y: number;
     };
-};
+}
 export {};

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

@@ -16,7 +16,7 @@ const defaultOptions = {
     }
   },
   initial: {
-    snapPoint: "center"
+    snapPoint: "top-left"
   },
   disabled: false
 };

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

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