@maas/vue-equipment 1.0.0-beta.4 → 1.0.0-beta.41

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

@@ -1,18 +1,42 @@
-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 { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 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 { logWarning } = useMagicError({
+    prefix: "MagicDraggable",
+    source: "useDraggableSnap"
+  });
+  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(
@@ -35,62 +59,75 @@ export function useDraggableSnap(args) {
   const emitter = useMagicEmitter();
   function mapSnapPoint(snapPoint) {
     if (!wrapperRect.value) {
-      console.warn("Wrapper rect is not defined");
+      logWarning("Wrapper rect is not defined");
       return void 0;
     }
     if (!elRect.value) {
-      console.warn("Element rect is not defined");
+      logWarning("Element rect is not defined");
       return void 0;
     }
     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) {
@@ -101,20 +138,31 @@ export function useDraggableSnap(args) {
       easing = toValue(animation).snap?.easing
     } = args2;
     const snapPoint = snapPointsMap.value[`x${x}y${y}`];
+    if (!snapPoint) {
+      return;
+    }
     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 +172,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 +194,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/composables/useMagicDraggable.mjs

@@ -1,5 +1,5 @@
 import { toValue } from "vue";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 export function useMagicDraggable(id) {
   function snapTo(snapPoint, duration) {
     useMagicEmitter().emit("snapTo", {

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;

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

@@ -0,0 +1,31 @@
+import { type MaybeRef } from 'vue';
+import type { MagicDrawerOptions } from '../types/index.js';
+import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-rtl-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ttb-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-btt-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-rtl-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ttb-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-btt-out.css';
+interface MagicDrawerProps {
+    id: MaybeRef<string>;
+    options?: MagicDrawerOptions;
+}
+declare var __VLS_11: {}, __VLS_37: {};
+type __VLS_Slots = {} & {
+    backdrop?: (props: typeof __VLS_11) => any;
+} & {
+    default?: (props: typeof __VLS_37) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};