@maas/vue-equipment 0.35.2 → 0.36.1

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.35.1",
+  "version": "0.36.0",
   "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":
@@ -415,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)],
@@ -451,8 +458,7 @@ export function useDrawerDrag(args) {
     }, 100)();
   });
   onBeforeUnmount(() => {
-    emitter.off("snapTo", snapToCallback);
-    emitter.off("afterLeave", afterLeaveCallback);
+    destroy();
   });
   return {
     onPointerdown,

package/dist/plugins/MagicMenu/src/composables/private/useMenuView.mjs

@@ -106,8 +106,6 @@ export function useMenuView(instanceId) {
           console.log(
             `selectView() was interrupted by a call to unselectView()`
           );
-        } else {
-          throw error;
         }
       }
     }
@@ -128,8 +126,6 @@ export function useMenuView(instanceId) {
           console.log(
             `unselectView() was interrupted by a call to selectView()`
           );
-        } else {
-          throw error;
         }
       }
     }

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

@@ -188,5 +188,5 @@ onUnmounted(() => {
 </script>
 
 <style>
-@keyframes magic-modal-content-enter{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes magic-modal-content-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.magic-modal{align-items:center;background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:center;padding:0;position:fixed;width:100%;z-index:var(--magic-modal-z-index,999)}.magic-modal__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-modal-content-align-items,center);display:flex;justify-content:var(--magic-modal-content-justify-content,center);max-height:100%;overflow-y:var(--magic-modal-content-overflow-y,auto);scroll-behavior:smooth;width:100%}dialog.magic-modal__content{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-modal__content::backdrop{background-color:transparent}.magic-modal__backdrop{-webkit-backdrop-filter:var(--magic-modal-backdrop-filter,unset);backdrop-filter:var(--magic-modal-backdrop-filter,unset);background-color:var(--magic-modal-backdrop-color,rgba(0,0,0,.5));bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-modal--content-enter-active{animation:magic-modal-content-enter .3s ease}.magic-modal--content-leave-active{animation:magic-modal-content-leave .3s ease}@media (prefers-reduced-motion){.magic-modal--content-enter-active{animation:fade-in .3s ease}.magic-modal--content-leave-active{animation:fade-out .3s ease}}.magic-modal--backdrop-enter-active{animation:fade-in .3s ease}.magic-modal--backdrop-leave-active{animation:fade-out .3s ease}
+@keyframes magic-modal-content-enter{0%{opacity:0;transform:translate3d(0,2rem,0)}to{opacity:1;transform:translateZ(0)}}@keyframes magic-modal-content-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.magic-modal{align-items:center;background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:center;padding:0;position:fixed;width:100%;z-index:var(--magic-modal-z-index,999)}.magic-modal__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-modal-content-align-items,center);display:flex;justify-content:var(--magic-modal-content-justify-content,center);max-height:100%;overflow-y:var(--magic-modal-content-overflow-y,auto);scroll-behavior:smooth;width:100%}dialog.magic-modal__content{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-modal__content::backdrop{background-color:transparent}.magic-modal__backdrop{-webkit-backdrop-filter:var(--magic-modal-backdrop-filter,unset);backdrop-filter:var(--magic-modal-backdrop-filter,unset);background-color:var(--magic-modal-backdrop-color,rgba(0,0,0,.5));bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-modal--content-enter-active{animation:magic-modal-content-enter .3s ease}.magic-modal--content-leave-active{animation:magic-modal-content-leave .3s ease}@media (prefers-reduced-motion){.magic-modal--content-enter-active{animation:fade-in .3s ease}.magic-modal--content-leave-active{animation:fade-out .3s ease}}.magic-modal--backdrop-enter-active{animation:fade-in .3s ease}.magic-modal--backdrop-leave-active{animation:fade-out .3s ease}
 </style>

package/dist/plugins/MagicNoise/src/composables/private/useNoiseApi.d.ts

@@ -12,7 +12,7 @@ export declare function useNoiseApi({ canvasRef, offCanvasRef, options, }: UseNo
     throttledDraw: () => void;
     throttledRotateAndTransfer: () => void;
     isReady: Ref<boolean, boolean>;
-    drawControls: import("vue").ShallowRef<RafControls | undefined>;
-    transferControls: import("vue").ShallowRef<RafControls | undefined>;
+    drawControls: import("vue").ShallowRef<RafControls | undefined, RafControls | undefined>;
+    transferControls: import("vue").ShallowRef<RafControls | undefined, RafControls | undefined>;
 };
 export {};

package/dist/plugins/MagicPlayer/src/components/MagicPlayerTimeline.vue

@@ -62,5 +62,5 @@ const {
 <style>
 :root{--magic-player-track-height:0.25rem}.magic-player-timeline{height:var(--magic-player-track-height)}.magic-player-timeline,.magic-player-timeline__target{align-items:center;display:flex;position:relative;width:100%}.magic-player-timeline__target{cursor:pointer;height:var(--magic-player-target-height,3.5rem)}.magic-player-timeline__slider-track{background:var(--magic-player-track-background,hsla(0,0%,98%,.15));border-radius:50rem;height:var(--magic-player-track-height);position:relative;width:100%}.magic-player-timeline__slider-inner-track{border-radius:50rem;height:100%;left:0;overflow:hidden;position:relative;top:0;width:100%;z-index:1}.magic-player-timeline__slider-thumb{height:var(--magic-player-track-height);position:absolute;width:var(--magic-player-track-height);z-index:10}.magic-player-timeline__slider-thumb-handle{background-color:var(
     --magic-player-thumb-background,#fafafa
-  );border-radius:50rem;height:var(--magic-player-thumb-size,1rem);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .3s ease;width:var(--magic-player-thumb-size,1rem);z-index:10}.magic-player-timeline__slider-buffered,.magic-player-timeline__slider-scrubbed,.magic-player-timeline__slider-seeked{background:currentColor;border-radius:50rem;height:100%;left:0;margin-left:calc(-100% + var(--magic-player-track-height));position:absolute;width:100%}.magic-player-timeline__slider-scrubbed{display:flex;min-width:var(--magic-player-track-height);z-index:1}.magic-player-timeline__slider-seeked{opacity:.25}.magic-player-timeline__slider-buffered{opacity:.15}.magic-player-timeline:hover .magic-player-timeline__slider-thumb-handle{transform:translate(-50%,-50%) scale(1)}.magic-player-timeline__seek-popover{bottom:100%;left:0;position:absolute;transform:translateX(-50%)}
+  );border-radius:50rem;height:var(--magic-player-thumb-size,1rem);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .3s ease;width:var(--magic-player-thumb-size,1rem);z-index:10}.magic-player-timeline__slider-buffered,.magic-player-timeline__slider-scrubbed,.magic-player-timeline__slider-seeked{background:currentColor;border-radius:50rem;height:100%;left:0;margin-left:calc(-100% + var(--magic-player-track-height));position:absolute;width:100%}.magic-player-timeline__slider-scrubbed{display:flex;min-width:var(--magic-player-track-height);z-index:1}.magic-player-timeline__slider-seeked{opacity:.25}.magic-player-timeline__slider-buffered{opacity:.15}.magic-player-timeline:hover .magic-player-timeline__slider-thumb-handle{transform:translate3d(-50%,-50%,0) scale(1)}.magic-player-timeline__seek-popover{bottom:100%;left:0;position:absolute;transform:translateX(-50%)}
 </style>

package/dist/utils/css/animations/fade-down-in.css

@@ -1,10 +1,10 @@
 @keyframes fade-down-in {
   0% {
     opacity: 0;
-    transform: translateY(-1rem);
+    transform: translate3d(0, -1rem, 0);
   }
   100% {
     opacity: 1;
-    transform: translateY(0);
+    transform: translate3d(0, 0, 0);
   }
 }

package/dist/utils/css/animations/fade-down-out.css

@@ -1,10 +1,10 @@
 @keyframes fade-down-out {
   0% {
     opacity: 1;
-    transform: translateY(0);
+    transform: translate3d(0, 0, 0);
   }
   100% {
     opacity: 0;
-    transform: translateY(-1rem);
+    transform: translate3d(0, -1rem, 0);
   }
 }

package/dist/utils/css/animations/fade-up-in.css

@@ -1,9 +1,9 @@
 @keyframes fade-up-in {
   0% {
     opacity: 0;
-    transform: translateY(1rem);
+    transform: translate3d(0, 1rem, 0);
   }
   100% {
-    transform: translateY(0);
+    transform: translate3d(0, 0, 0);
   }
 }

package/dist/utils/css/animations/fade-up-out.css

@@ -1,10 +1,10 @@
 @keyframes fade-up-out {
   0% {
     opacity: 1;
-    transform: translateY(0);
+    transform: translate3d(0, 0, 0);
   }
   100% {
     opacity: 0;
-    transform: translateY(1rem);
+    transform: translate3d(0, 1rem, 0);
   }
 }

package/dist/utils/css/animations/slide-btt-in.css

@@ -1,8 +1,8 @@
 @keyframes slide-btt-in {
   0% {
-    transform: translateY(100%);
+    transform: translate3d(0, 100%, 0);
   }
   100% {
-    transform: translateY(0);
+    transform: translate3d(0, 0, 0);
   }
 }

package/dist/utils/css/animations/slide-btt-out.css

@@ -1,6 +1,9 @@
 
 @keyframes slide-btt-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
   100% {
-    transform: translateY(100%);
+    transform: translate3d(0, 100%, 0);
   }
 }

package/dist/utils/css/animations/slide-ltr-in.css

@@ -1,8 +1,8 @@
 @keyframes slide-ltr-in {
   0% {
-    transform: translateX(-100%);
+    transform: translate3d(-100%, 0, 0);
   }
   100% {
-    transform: translateX(0);
+    transform: translate3d(0, 0, 0);
   }
 }

package/dist/utils/css/animations/slide-ltr-out.css

@@ -1,5 +1,8 @@
 @keyframes slide-ltr-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
   100% {
-    transform: translateX(-100%);
+    transform: translate3d(-100%, 0, 0);
   }
 }

package/dist/utils/css/animations/slide-rtl-in.css

@@ -1,8 +1,8 @@
 @keyframes slide-rtl-in {
   0% {
-    transform: translateX(100%);
+    transform: translate3d(100%, 0, 0);
   }
   100% {
-    transform: translateX(0);
+    transform: translate3d(0, 0, 0);
   }
 }

package/dist/utils/css/animations/slide-rtl-out.css

@@ -1,5 +1,8 @@
 @keyframes slide-rtl-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
   100% {
-    transform: translateX(100%);
+    transform: translate3d(100%, 0, 0);
   }
 }

package/dist/utils/css/animations/slide-ttb-in.css

@@ -1,8 +1,8 @@
 @keyframes slide-ttb-in {
   0% {
-    transform: translateY(-100%);
+    transform: translate3d(0, -100%, 0);
   }
   100% {
-    transform: translateY(0);
+    transform: translate3d(0, 0, 0);
   }
 }

package/dist/utils/css/animations/slide-ttb-out.css

@@ -1,5 +1,8 @@
 @keyframes slide-ttb-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
   100% {
-    transform: translateY(-100%);
+    transform: translate3d(0, -100%, 0);
   }
 }

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.2",
+  "version": "0.36.1",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "type": "module",
   "devDependencies": {