@maas/vue-equipment 0.40.0 → 1.0.0-beta.10

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

@@ -4,7 +4,19 @@ import { interpolate } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 import { defu } from "defu";
 export function useDraggableSnap(args) {
-  const { id, draggedY, draggedX, elRect, wrapperRect, animation, snapPoints } = args;
+  const {
+    id,
+    draggedX,
+    draggedY,
+    lastDraggedX,
+    lastDraggedY,
+    elRect,
+    wrapperRect,
+    animation,
+    snapPoints
+  } = args;
+  const interpolationIdX = ref(void 0);
+  const interpolationIdY = ref(void 0);
   const activeSnapPoint = ref(void 0);
   const mappedSnapPoints = computedWithControl(
     () => toValue(wrapperRect),
@@ -48,7 +60,7 @@ export function useDraggableSnap(args) {
           x: mappedOffset.x,
           y: mappedOffset.y
         };
-      case "top-center":
+      case "top":
         return {
           x: wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2,
           y: mappedOffset.y
@@ -58,7 +70,7 @@ export function useDraggableSnap(args) {
           x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
           y: mappedOffset.y
         };
-      case "center-left":
+      case "left":
         return {
           x: mappedOffset.x,
           y: wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2
@@ -68,7 +80,7 @@ export function useDraggableSnap(args) {
           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":
+      case "right":
         return {
           x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
           y: wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2
@@ -78,7 +90,7 @@ export function useDraggableSnap(args) {
           x: mappedOffset.x,
           y: wrapperRect.value.height + mappedOffset.y - elRect.value.height
         };
-      case "bottom-center":
+      case "bottom":
         return {
           x: wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2,
           y: wrapperRect.value.height - mappedOffset.y - elRect.value.height
@@ -90,6 +102,14 @@ export function useDraggableSnap(args) {
         };
     }
   }
+  function cancelInterpolation() {
+    if (interpolationIdY.value) {
+      cancelAnimationFrame(interpolationIdY.value);
+    }
+    if (interpolationIdX.value) {
+      cancelAnimationFrame(interpolationIdX.value);
+    }
+  }
   function interpolateDragged(args2) {
     const {
       x,
@@ -99,19 +119,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) {
+          lastDraggedX.value = draggedX.value;
+          lastDraggedY.value = draggedY.value;
+        }
+      },
+      interpolationIdCallback(id2) {
+        interpolationIdY.value = id2;
       }
     });
-    interpolate({
+    interpolationIdX.value = interpolate({
       from: draggedX.value,
       to: x,
       duration,
@@ -121,6 +149,13 @@ export function useDraggableSnap(args) {
         if (x >= y && draggedX.value === x) {
           emitter.emit("afterSnap", { id: toValue(id), snapPoint });
         }
+        if (draggedX.value === x) {
+          lastDraggedX.value = draggedX.value;
+          lastDraggedY.value = draggedY.value;
+        }
+      },
+      interpolationIdCallback(id2) {
+        interpolationIdX.value = id2;
       }
     });
   }
@@ -136,8 +171,11 @@ 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;

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

@@ -1,5 +1,6 @@
 import { type MaybeRef } from 'vue';
+import type { DraggableState } from '../../types/index.js';
 export declare function useDraggableState(id: MaybeRef<string>): {
-    initializeState: () => any;
+    initializeState: () => DraggableState;
     deleteState: () => void;
 };

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

@@ -1,5 +1,5 @@
-import { ref, reactive, toRefs, toValue } from "vue";
-const drawerStateStore = ref([]);
+import { ref, reactive, toValue } from "vue";
+const draggableStateStore = ref([]);
 export function useDraggableState(id) {
   function createState(id2) {
     const state = {
@@ -21,19 +21,19 @@ export function useDraggableState(id) {
     return reactive(state);
   }
   function addState(id2) {
-    const instance = createState(id2);
-    drawerStateStore.value = [...drawerStateStore.value, instance];
-    return instance;
+    const state = createState(id2);
+    draggableStateStore.value = [...draggableStateStore.value, state];
+    return state;
   }
   function initializeState() {
-    let instance = drawerStateStore.value.find((instance2) => {
-      return instance2.id === id;
+    let state = draggableStateStore.value.find((entry) => {
+      return entry.id === id;
     });
-    if (!instance) instance = addState(toValue(id));
-    return toRefs(instance);
+    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,4 +1,5 @@
-type Position = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+import type { RequireAll } from '@maas/vue-equipment/utils';
+type Position = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
 export type Coordinates = {
     x: number;
     y: number;
@@ -12,11 +13,15 @@ export type DraggableSnapPoint = [
 ] | Position;
 export interface MagicDraggableOptions {
     tag?: 'dialog' | 'div';
+    scrollLock?: boolean | {
+        padding: boolean;
+    };
+    snapPoints?: DraggableSnapPoint[];
     threshold?: {
+        lock?: number;
         distance?: number;
         momentum?: number;
         idle?: number;
-        lock?: number;
     };
     animation?: {
         snap?: {
@@ -27,12 +32,12 @@ export interface MagicDraggableOptions {
     initial?: {
         snapPoint?: DraggableSnapPoint;
     };
-    snapPoints?: DraggableSnapPoint[];
-    scrollLock?: boolean | {
-        padding: boolean;
-    };
     disabled?: boolean;
 }
+export type DraggableDefaultOptions = RequireAll<MagicDraggableOptions> & {
+    threshold: RequireAll<MagicDraggableOptions['threshold']>;
+    animation: RequireAll<MagicDraggableOptions['animation']>;
+};
 export interface DraggableState {
     id: string;
     dragStart: Date | undefined;

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

@@ -1,8 +1,3 @@
-import type { MagicDraggableOptions } from '../types/index.js';
-import type { RequireAll } from '@maas/vue-equipment/utils';
-type DefaultOptions = RequireAll<MagicDraggableOptions> & {
-    threshold: RequireAll<MagicDraggableOptions['threshold']>;
-    animation: RequireAll<MagicDraggableOptions['animation']>;
-};
-declare const defaultOptions: DefaultOptions;
-export { defaultOptions, type DefaultOptions };
+import type { DraggableDefaultOptions } from '../types/index.js';
+declare const defaultOptions: DraggableDefaultOptions;
+export { defaultOptions };

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

@@ -1,11 +1,13 @@
 import { easeOutBack } from "@maas/vue-equipment/utils";
 const defaultOptions = {
   tag: "div",
+  scrollLock: { padding: true },
+  snapPoints: ["top-left", "top-right", "bottom-left", "bottom-right"],
   threshold: {
+    lock: 0,
     distance: 128,
     momentum: 1.5,
-    idle: 250,
-    lock: 0
+    idle: 250
   },
   animation: {
     snap: {
@@ -14,10 +16,8 @@ const defaultOptions = {
     }
   },
   initial: {
-    snapPoint: "center"
+    snapPoint: "top-left"
   },
-  snapPoints: [],
-  disabled: false,
-  scrollLock: { padding: true }
+  disabled: false
 };
 export { defaultOptions };

package/dist/plugins/MagicDrawer/nuxt.mjs

@@ -8,7 +8,7 @@ export default defineNuxtModule({
   meta: {
     name: "@maas/vue-equipment/nuxt/MagicDrawer"
   },
-  setup(_options, nuxt) {
+  setup() {
     const resolver = createResolver(import.meta.url);
     addComponentsDir({
       path: resolver.resolve("src/components"),