@maas/vue-equipment 0.35.1 → 0.36.0

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.35.0",
+  "version": "0.35.2",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -32,7 +32,7 @@ const functions$1 = [
 	{
 		name: "MagicDraggable",
 		"package": "plugins",
-		lastUpdated: 1716533739000,
+		lastUpdated: 1727253131000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicDraggable/",
 		description: "draggable"
 	},

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

@@ -1,6 +1,7 @@
 import type { Plugin } from 'vue';
 import MagicDraggable from './src/components/MagicDraggable.vue.js';
+import { useMagicDraggable } from './src/composables/useMagicDraggable.js';
 import type { MagicDraggableOptions } from './src/types/index.js';
 declare const MagicDraggablePlugin: Plugin;
-export { MagicDraggablePlugin, MagicDraggable };
+export { MagicDraggablePlugin, MagicDraggable, useMagicDraggable };
 export type { MagicDraggableOptions };

package/dist/plugins/MagicDraggable/index.mjs

@@ -1,7 +1,8 @@
 import MagicDraggable from "./src/components/MagicDraggable.vue";
+import { useMagicDraggable } from "./src/composables/useMagicDraggable.mjs";
 const MagicDraggablePlugin = {
   install: (app) => {
     app.component("MagicDraggable", MagicDraggable);
   }
 };
-export { MagicDraggablePlugin, MagicDraggable };
+export { MagicDraggablePlugin, MagicDraggable, useMagicDraggable };

package/dist/plugins/MagicDraggable/nuxt.mjs

@@ -1,4 +1,9 @@
-import { defineNuxtModule, createResolver, addComponent } from "@nuxt/kit";
+import {
+  defineNuxtModule,
+  createResolver,
+  addComponent,
+  addImports
+} from "@nuxt/kit";
 export default defineNuxtModule({
   meta: {
     name: "@maas/vue-equipment/nuxt/MagicDraggable"
@@ -10,5 +15,9 @@ export default defineNuxtModule({
       name: "MagicDraggable",
       global: true
     });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicDraggable",
+      name: "useMagicDraggable"
+    });
   }
 });

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

@@ -34,6 +34,7 @@ import {
   computed,
   toValue,
   onMounted,
+  onBeforeUnmount,
   type Component,
   type MaybeRef,
 } from 'vue'
@@ -77,16 +78,15 @@ const disabled = computed(() => {
 
 const { snapPoints, animation, initial, threshold } = mappedOptions
 
-const { initialize, onPointerdown, onClick, style, hasDragged } =
-  useDraggableDrag({
-    id: props.id,
-    elRef,
-    wrapperRef,
-    threshold,
-    snapPoints,
-    animation,
-    initial,
-  })
+const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
+  id: props.id,
+  elRef,
+  wrapperRef,
+  threshold,
+  snapPoints,
+  animation,
+  initial,
+})
 
 // Public functions
 function guardedPointerdown(event: PointerEvent) {
@@ -100,10 +100,6 @@ function guardedClick(event: PointerEvent) {
     onClick(event)
   }
 }
-
-onMounted(() => {
-  initialize()
-})
 </script>
 
 <style>

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

@@ -11,6 +11,7 @@ type UseDraggableDragArgs = {
 };
 export declare function useDraggableDrag(args: UseDraggableDragArgs): {
     initialize: () => Promise<void>;
+    destroy: () => void;
     onPointerdown: (e: PointerEvent) => void;
     onClick: (e: MouseEvent) => void;
     style: import("vue").ComputedRef<string>;

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

@@ -3,7 +3,9 @@ import {
   computed,
   toValue,
   nextTick,
-  watch
+  watch,
+  onBeforeUnmount,
+  onMounted
 } from "vue";
 import {
   useEventListener,
@@ -18,7 +20,9 @@ import {
   isIOS,
   isWithinRange
 } from "@maas/vue-equipment/utils";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import {
+  useMagicEmitter
+} from "@maas/vue-equipment/plugins";
 import { useDraggableSnap } from "./useDraggableSnap.mjs";
 import { useDraggableState } from "./useDraggableState.mjs";
 import { useDraggableScrollLock } from "./useDraggableScrollLock.mjs";
@@ -102,6 +106,15 @@ export function useDraggableDrag(args) {
     cancelPointerup?.();
     cancelPointermove?.();
   }
+  function snapToCallback(payload) {
+    if (payload.id === toValue(id)) {
+      snapTo({
+        snapPoint: payload.snapPoint,
+        interpolate: true,
+        duration: payload.duration
+      });
+    }
+  }
   function detectCollision() {
     const childRect = toValue(elRect);
     const parentRect = toValue(wrapperRect);
@@ -336,6 +349,7 @@ export function useDraggableDrag(args) {
   async function initialize() {
     await getSizes();
     if (elRect.value && wrapperRect.value) {
+      emitter.on("snapTo", snapToCallback);
       if (elRect.value.width > wrapperRect.value.width || elRect.value.height > wrapperRect.value.height) {
         console.warn("MagicDraggable is too small for its content");
         return;
@@ -351,6 +365,12 @@ export function useDraggableDrag(args) {
       }
     }
   }
+  function destroy() {
+    emitter.off("snapTo", snapToCallback);
+  }
+  onMounted(() => {
+    initialize();
+  });
   useResizeObserver(wrapperRef, async () => {
     useThrottleFn(async () => {
       await getSizes();
@@ -375,8 +395,12 @@ export function useDraggableDrag(args) {
       onIdle();
     }
   });
+  onBeforeUnmount(() => {
+    destroy();
+  });
   return {
     initialize,
+    destroy,
     onPointerdown,
     onClick,
     style,

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

@@ -94,7 +94,7 @@ export function useDraggableSnap(args) {
     const {
       x,
       y,
-      duration = toValue(animation).snap?.duration,
+      duration = toValue(animation)?.snap?.duration || 300,
       easing = toValue(animation).snap?.easing
     } = args2;
     const snapPoint = snapPointsMap.value[`x${x}y${y}`];

package/dist/plugins/MagicDraggable/src/composables/useMagicDraggable.d.ts

@@ -0,0 +1,6 @@
+import { type MaybeRef } from 'vue';
+import type { DraggableSnapPoint } from '../types/index.js';
+export declare function useMagicDraggable(id: MaybeRef<string>): {
+    snapTo: (snapPoint: DraggableSnapPoint, duration?: number) => void;
+};
+export type UseMagicDrawerReturn = ReturnType<typeof useMagicDraggable>;

package/dist/plugins/MagicDraggable/src/composables/useMagicDraggable.mjs

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

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

@@ -285,6 +285,15 @@ export function useDrawerDrag(args) {
       }
     }
   }
+  async function initialize() {
+    await getSizes();
+    emitter.on("snapTo", snapToCallback);
+    emitter.on("afterLeave", afterLeaveCallback);
+  }
+  function destroy() {
+    emitter.off("snapTo", snapToCallback);
+    emitter.off("afterLeave", afterLeaveCallback);
+  }
   function onCancel() {
     switch (position) {
       case "bottom":
@@ -352,7 +361,6 @@ export function useDrawerDrag(args) {
     guardedReleasePointerCapture({ event: e, element: elRef.value });
   }
   function onPointermove(e) {
-    console.log("onPointermove", e);
     if (e.isTrusted && wheeling.value) {
       return;
     }
@@ -416,9 +424,7 @@ export function useDrawerDrag(args) {
     }
   }
   onMounted(async () => {
-    await getSizes();
-    emitter.on("snapTo", snapToCallback);
-    emitter.on("afterLeave", afterLeaveCallback);
+    await initialize();
   });
   watch(
     () => [unrefElement(elRef), unrefElement(wrapperRef)],
@@ -452,8 +458,7 @@ export function useDrawerDrag(args) {
     }, 100)();
   });
   onBeforeUnmount(() => {
-    emitter.off("snapTo", snapToCallback);
-    emitter.off("afterLeave", afterLeaveCallback);
+    destroy();
   });
   return {
     onPointerdown,

package/package.json

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