@maas/vue-equipment 0.27.3 → 0.28.1

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

@@ -85,7 +85,7 @@ import { createDefu } from 'defu'
 import { onKeyStroke, unrefElement } from '@vueuse/core'
 import { useMetaViewport } from '@maas/vue-equipment/composables'
 import { defaultOptions } from './../utils/defaultOptions'
-import { useDrawerApi } from './../composables/useDrawerApi'
+import { useDrawerDOM } from '../composables/private/useDrawerDOM'
 import { useDrawerCallback } from '../composables/private/useDrawerCallback'
 import { useDrawerProgress } from '../composables/private/useDrawerProgress'
 import { useDrawerDrag } from '../composables/private/useDrawerDrag'
@@ -104,6 +104,7 @@ import '@maas/vue-equipment/utils/css/animations/slide-ltr-out.css'
 import '@maas/vue-equipment/utils/css/animations/slide-rtl-out.css'
 import '@maas/vue-equipment/utils/css/animations/slide-ttb-out.css'
 import '@maas/vue-equipment/utils/css/animations/slide-btt-out.css'
+import { useMagicDrawer } from '../composables/useMagicDrawer'
 
 // Prevent deep merge of certain options
 // In this case, don’t merge the `close` and `points` options
@@ -135,11 +136,20 @@ const elRef = ref<HTMLElement | undefined>(undefined)
 const drawerRef = ref<HTMLDivElement | undefined>(undefined)
 const wrapperRef = ref<HTMLDivElement | undefined>(undefined)
 
-const drawerApi = useDrawerApi(props.id, {
+const {
+  trapFocus,
+  releaseFocus,
+  lockScroll,
+  unlockScroll,
+  addScrollLockPadding,
+  removeScrollLockPadding,
+} = useDrawerDOM({
   focusTarget: drawerRef,
   focusTrap: mappedOptions.focusTrap,
 })
 
+const { isActive, open, close } = useMagicDrawer(props.id)
+
 const overshoot = ref(0)
 const {
   position,
@@ -150,20 +160,6 @@ const {
   initial,
 } = mappedOptions
 
-const {
-  isActive,
-  open,
-  close,
-  trapFocus,
-  releaseFocus,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-  initialize,
-  destroy,
-} = drawerApi
-
 // Make sure this is reactive
 const disabled = computed(() => {
   if (props.options.disabled === undefined) {
@@ -347,10 +343,6 @@ onBeforeMount(async () => {
   }
 })
 
-onMounted(() => {
-  initialize()
-})
-
 // Reset state on unmount
 onBeforeUnmount(() => {
   close()
@@ -374,11 +366,9 @@ onUnmounted(() => {
   if (!mappedOptions.preventZoom) {
     resetMetaViewport()
   }
-
-  destroy()
 })
 </script>
 
 <style>
-:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-x:hidden;--magic-drawer-content-overflow-y:hidden;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-padding:0px}.magic-drawer{--magic-drawer-drag-overshoot-x:0px;--magic-drawer-drag-overshoot-y:0px;align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 0 var(--magic-drawer-drag-overshoot-y) 0}.magic-drawer.-bottom>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:var(--magic-drawer-drag-overshoot-y) 0 0 0}.magic-drawer.-top>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 var(--magic-drawer-drag-overshoot-x) 0 0}.magic-drawer.-right>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:0 0 0 var(--magic-drawer-drag-overshoot-x)}.magic-drawer.-left>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer__wrapper{height:var(--magic-drawer-height);pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:var(--magic-drawer-width)}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-x:var(--magic-drawer-content-overflow-x);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}dialog.magic-drawer__drag{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-drawer__drag::backdrop{background-color:transparent}.magic-drawer.-dragging .magic-drawer__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-drawer.-disabled .magic-drawer__drag,.magic-drawer.-wheeling .magic-drawer__drag{cursor:auto}.magic-drawer__drag>*{padding:var(--magic-drawer-padding)}.magic-drawer__overlay{inset:0;position:absolute;z-index:9999}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer.-disabled .magic-drawer__backdrop{pointer-events:none}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
+:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-x:hidden;--magic-drawer-content-overflow-y:hidden;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-padding:0px}.magic-drawer{--magic-drawer-drag-overshoot-x:0px;--magic-drawer-drag-overshoot-y:0px;align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 0 var(--magic-drawer-drag-overshoot-y) 0}.magic-drawer.-bottom>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:var(--magic-drawer-drag-overshoot-y) 0 0 0}.magic-drawer.-top>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 var(--magic-drawer-drag-overshoot-x) 0 0}.magic-drawer.-right>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:0 0 0 var(--magic-drawer-drag-overshoot-x)}.magic-drawer.-left>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer__wrapper{height:var(--magic-drawer-height);pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:var(--magic-drawer-width)}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-x:var(--magic-drawer-content-overflow-x);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;touch-action:none;width:100%}dialog.magic-drawer__drag{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-drawer__drag::backdrop{background-color:transparent}.magic-drawer.-dragging .magic-drawer__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-drawer.-disabled .magic-drawer__drag,.magic-drawer.-wheeling .magic-drawer__drag{cursor:auto}.magic-drawer__drag>*{padding:var(--magic-drawer-padding)}.magic-drawer__overlay{inset:0;position:absolute;z-index:9999}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer.-disabled .magic-drawer__backdrop{pointer-events:none}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
 </style>

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

@@ -1,6 +1,6 @@
 import { toValue, nextTick } from "vue";
 import { useMetaViewport } from "@maas/vue-equipment/composables";
-import { useDrawerEmitter } from "./../useDrawerEmitter.mjs";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 export function useDrawerCallback(args) {
   const {
     id,
@@ -15,10 +15,11 @@ export function useDrawerCallback(args) {
     wasActive
   } = args;
   const { setMetaViewport, resetMetaViewport } = useMetaViewport();
+  const emitter = useMagicEmitter();
   function onBeforeEnter(_el) {
-    useDrawerEmitter().emit("beforeEnter", toValue(id));
+    emitter.emit("beforeEnter", toValue(id));
     if (mappedOptions.scrollLock) {
-      if (mappedOptions.scrollLockPadding) {
+      if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
         addScrollLockPadding();
       }
       lockScroll();
@@ -28,10 +29,10 @@ export function useDrawerCallback(args) {
     }
   }
   function onEnter(_el) {
-    useDrawerEmitter().emit("enter", toValue(id));
+    emitter.emit("enter", toValue(id));
   }
   async function onAfterEnter(_el) {
-    useDrawerEmitter().emit("afterEnter", toValue(id));
+    emitter.emit("afterEnter", toValue(id));
     if (mappedOptions.focusTrap) {
       await nextTick();
       trapFocus();
@@ -39,16 +40,16 @@ export function useDrawerCallback(args) {
     wasActive.value = true;
   }
   function onBeforeLeave(_el) {
-    useDrawerEmitter().emit("beforeLeave", toValue(id));
+    emitter.emit("beforeLeave", toValue(id));
   }
   function onLeave(_el) {
-    useDrawerEmitter().emit("leave", toValue(id));
+    emitter.emit("leave", toValue(id));
   }
   function onAfterLeave(_el) {
-    useDrawerEmitter().emit("afterLeave", toValue(id));
+    emitter.emit("afterLeave", toValue(id));
     if (mappedOptions.scrollLock) {
       unlockScroll();
-      if (mappedOptions.scrollLockPadding) {
+      if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
         removeScrollLockPadding();
       }
     }

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDOM.d.ts

@@ -0,0 +1,13 @@
+import { type MaybeElementRef } from '@vueuse/core';
+import type { DrawerOptions } from '../../types/index.js';
+export type UseDrawerDOMOptions = Pick<DrawerOptions, 'scrollLock' | 'focusTrap'> & {
+    focusTarget: MaybeElementRef;
+};
+export declare function useDrawerDOM(options?: UseDrawerDOMOptions): {
+    trapFocus: () => void;
+    releaseFocus: () => void;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
+};

package/dist/plugins/MagicDrawer/src/composables/{useDrawerApi.mjs → private/useDrawerDOM.mjs}

@@ -1,46 +1,18 @@
-import { ref, computed, toValue } from "vue";
+import { ref } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import { uuid, matchClass } from "@maas/vue-equipment/utils";
-import { useDrawerStore } from "./private/useDrawerStore.mjs";
-import { useDrawerState } from "./private/useDrawerState.mjs";
-import { useDrawerEmitter } from "./useDrawerEmitter.mjs";
+import { matchClass } from "@maas/vue-equipment/utils";
 const defaultOptions = {
   focusTrap: false,
   focusTarget: void 0,
   scrollLock: true
 };
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
-export function useDrawerApi(id, options) {
+export function useDrawerDOM(options) {
   const positionFixedElements = ref([]);
-  const mappedId = computed(() => toValue(id) || uuid());
   const mappedOptions = defu(options, defaultOptions);
   const focusTrap = mappedOptions.focusTarget ? typeof mappedOptions.focusTrap === "boolean" ? useFocusTrap(mappedOptions.focusTarget) : useFocusTrap(mappedOptions.focusTarget, mappedOptions.focusTrap) : void 0;
-  const { drawerStore, addInstance, removeInstance } = useDrawerStore();
-  const { deleteState } = useDrawerState(mappedId.value);
-  function progressCallback(payload) {
-    if (payload.id === mappedId.value) {
-      progress.value.x = payload.x;
-      progress.value.y = payload.y;
-    }
-  }
-  const isActive = computed(() => drawerStore.value.includes(mappedId.value));
-  const progress = ref({ x: 0, y: 0 });
-  function open() {
-    addInstance(mappedId.value);
-  }
-  function close() {
-    removeInstance(mappedId.value);
-    deleteState();
-  }
-  function snapTo(snapPoint, duration) {
-    useDrawerEmitter().emit("snapTo", {
-      id: mappedId.value,
-      snapPoint,
-      duration
-    });
-  }
   function trapFocus() {
     if (focusTrap) {
       focusTrap.activate();
@@ -84,26 +56,12 @@ export function useDrawerApi(id, options) {
       (elem) => elem.style.paddingRight = ""
     );
   }
-  function initialize() {
-    useDrawerEmitter().on("progress", progressCallback);
-  }
-  function destroy() {
-    useDrawerEmitter().off("progress", progressCallback);
-  }
   return {
-    id: mappedId,
-    isActive,
-    progress,
-    open,
-    close,
-    snapTo,
     trapFocus,
     releaseFocus,
     lockScroll,
     unlockScroll,
     addScrollLockPadding,
-    removeScrollLockPadding,
-    initialize,
-    destroy
+    removeScrollLockPadding
   };
 }

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

@@ -13,12 +13,12 @@ import {
   useThrottleFn,
   useScrollLock
 } from "@vueuse/core";
-import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
+import { isIOS, isWithinRange } from "@maas/vue-equipment/utils";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 import { useDrawerSnap } from "./useDrawerSnap.mjs";
 import { useDrawerGuards } from "./useDrawerGuards.mjs";
 import { useDrawerUtils } from "./useDrawerUtils.mjs";
 import { useDrawerState } from "./useDrawerState.mjs";
-import { isIOS } from "@maas/vue-equipment/utils";
 export function useDrawerDrag(args) {
   const {
     id,
@@ -102,7 +102,8 @@ export function useDrawerDrag(args) {
     position,
     activeSnapPoint
   });
-  const { clamp, isWithinRange } = useDrawerUtils();
+  const { clamp } = useDrawerUtils();
+  const emitter = useMagicEmitter();
   async function getSizes() {
     elRect.value = unrefElement(elRef)?.getBoundingClientRect();
     wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
@@ -316,7 +317,7 @@ export function useDrawerDrag(args) {
           break;
       }
     }
-    useDrawerEmitter().emit("afterDrag", {
+    emitter.emit("afterDrag", {
       id: toValue(id),
       x: draggedX.value,
       y: draggedY.value
@@ -331,6 +332,9 @@ export function useDrawerDrag(args) {
     if (e.isTrusted && wheeling.value) {
       return;
     }
+    if (e.isTrusted && !e.isPrimary) {
+      return;
+    }
     shouldClose.value = false;
     checkDirection({ x: e.screenX, y: e.screenY });
     if (!scrollLock) {
@@ -346,7 +350,7 @@ export function useDrawerDrag(args) {
     setDragged({ x: e.screenX, y: e.screenY });
     checkMomentum();
     checkPosition();
-    useDrawerEmitter().emit("drag", {
+    emitter.emit("drag", {
       id: toValue(id),
       x: draggedX.value,
       y: draggedY.value
@@ -357,7 +361,7 @@ export function useDrawerDrag(args) {
       return;
     } else {
       dragging.value = true;
-      useDrawerEmitter().emit("beforeDrag", {
+      emitter.emit("beforeDrag", {
         id: toValue(id),
         x: draggedX.value,
         y: draggedY.value
@@ -380,8 +384,8 @@ export function useDrawerDrag(args) {
   }
   onMounted(async () => {
     await getSizes();
-    useDrawerEmitter().on("snapTo", snapToCallback);
-    useDrawerEmitter().on("afterLeave", afterLeaveCallback);
+    emitter.on("snapTo", snapToCallback);
+    emitter.on("afterLeave", afterLeaveCallback);
   });
   watch(
     () => [unrefElement(elRef), unrefElement(wrapperRef)],
@@ -407,8 +411,8 @@ export function useDrawerDrag(args) {
     }, 100)();
   });
   onBeforeUnmount(() => {
-    useDrawerEmitter().off("snapTo", snapToCallback);
-    useDrawerEmitter().off("afterLeave", afterLeaveCallback);
+    emitter.off("snapTo", snapToCallback);
+    emitter.off("afterLeave", afterLeaveCallback);
   });
   return {
     onPointerdown,

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

@@ -1,5 +1,4 @@
 import {
-  ref,
   watch,
   toValue,
   computed,
@@ -7,11 +6,13 @@ import {
   onBeforeUnmount,
   nextTick
 } from "vue";
-import { useDrawerEmitter } from "./../useDrawerEmitter.mjs";
 import { useElementBounding, useRafFn } from "@vueuse/core";
 import { clampValue, mapValue } from "@maas/vue-equipment/utils";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useDrawerState } from "./useDrawerState.mjs";
 export function useDrawerProgress(args) {
   const { id, drawerRef, elRef, position, overshoot } = args;
+  const { findState } = useDrawerState(id);
   const drawerRect = useElementBounding(drawerRef);
   const elRect = useElementBounding(elRef);
   const maxX = computed(
@@ -20,12 +21,13 @@ export function useDrawerProgress(args) {
   const maxY = computed(
     () => drawerRect.height.value - elRect.height.value + toValue(overshoot)
   );
-  const progress = ref({ x: 0, y: 0 });
+  const { progress } = findState();
   function rafCallback() {
     drawerRect.update();
     elRect.update();
     calculateProgress();
   }
+  const emitter = useMagicEmitter();
   const { pause: snapPause, resume: snapResume } = useRafFn(rafCallback, {
     immediate: false
   });
@@ -81,7 +83,7 @@ export function useDrawerProgress(args) {
     progress.value = { x, y };
   }
   watch([() => progress.value.x, () => progress.value.y], ([x, y]) => {
-    useDrawerEmitter().emit("progress", {
+    emitter.emit("progress", {
       id: toValue(id),
       x,
       y
@@ -127,24 +129,24 @@ export function useDrawerProgress(args) {
     }
   }
   onMounted(() => {
-    useDrawerEmitter().on("beforeEnter", beforeCallback);
-    useDrawerEmitter().on("afterEnter", afterCallback);
-    useDrawerEmitter().on("beforeDrag", beforeDragCallback);
-    useDrawerEmitter().on("afterDrag", afterDragCallback);
-    useDrawerEmitter().on("beforeSnap", beforeSnapCallback);
-    useDrawerEmitter().on("afterSnap", afterSnapCallback);
-    useDrawerEmitter().on("beforeLeave", beforeCallback);
-    useDrawerEmitter().on("afterLeave", afterCallback);
+    emitter.on("beforeEnter", beforeCallback);
+    emitter.on("afterEnter", afterCallback);
+    emitter.on("beforeDrag", beforeDragCallback);
+    emitter.on("afterDrag", afterDragCallback);
+    emitter.on("beforeSnap", beforeSnapCallback);
+    emitter.on("afterSnap", afterSnapCallback);
+    emitter.on("beforeLeave", beforeCallback);
+    emitter.on("afterLeave", afterCallback);
   });
   onBeforeUnmount(() => {
-    useDrawerEmitter().off("beforeEnter", beforeCallback);
-    useDrawerEmitter().off("afterEnter", afterCallback);
-    useDrawerEmitter().off("beforeDrag", beforeDragCallback);
-    useDrawerEmitter().off("afterDrag", afterDragCallback);
-    useDrawerEmitter().off("beforeSnap", beforeSnapCallback);
-    useDrawerEmitter().off("afterSnap", afterSnapCallback);
-    useDrawerEmitter().off("beforeLeave", beforeCallback);
-    useDrawerEmitter().off("afterLeave", afterCallback);
+    emitter.off("beforeEnter", beforeCallback);
+    emitter.off("afterEnter", afterCallback);
+    emitter.off("beforeDrag", beforeDragCallback);
+    emitter.off("afterDrag", afterDragCallback);
+    emitter.off("beforeSnap", beforeSnapCallback);
+    emitter.off("afterSnap", afterSnapCallback);
+    emitter.off("beforeLeave", beforeCallback);
+    emitter.off("afterLeave", afterCallback);
   });
   return { progress };
 }

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

@@ -1,7 +1,7 @@
 import { ref, computed, toValue, nextTick } from "vue";
 import { computedWithControl } from "@vueuse/core";
 import { mapValue, interpolate } from "@maas/vue-equipment/utils";
-import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 export function useDrawerSnap(args) {
   const {
     id,
@@ -58,6 +58,7 @@ export function useDrawerSnap(args) {
       return toValue(wrapperRect)?.width - toValue(overshoot);
     }
   });
+  const emitter = useMagicEmitter();
   function findClosestNumber(args2) {
     const { number, numbers, direction } = args2;
     let filtered = numbers;
@@ -194,7 +195,7 @@ export function useDrawerSnap(args) {
       easing
     } = args2;
     const snapPoint = snapPointsMap.value[to];
-    useDrawerEmitter().emit("beforeSnap", { id: toValue(id), snapPoint });
+    emitter.emit("beforeSnap", { id: toValue(id), snapPoint });
     switch (position) {
       case "bottom":
       case "top":
@@ -206,7 +207,7 @@ export function useDrawerSnap(args) {
           callback: (value) => {
             draggedY.value = value;
             if (draggedY.value === to) {
-              useDrawerEmitter().emit("afterSnap", {
+              emitter.emit("afterSnap", {
                 id: toValue(id),
                 snapPoint
               });
@@ -224,7 +225,7 @@ export function useDrawerSnap(args) {
           callback: (value) => {
             draggedX.value = value;
             if (draggedX.value === to) {
-              useDrawerEmitter().emit("afterSnap", {
+              emitter.emit("afterSnap", {
                 id: toValue(id),
                 snapPoint
               });

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerState.d.ts

@@ -69,6 +69,10 @@ export declare function useDrawerState(id: MaybeRef<string>): {
         } | undefined;
         dragging: boolean;
         wheeling: boolean;
+        progress: {
+            x: number;
+            y: number;
+        };
         shouldClose: boolean;
         interpolateTo: number | undefined;
         originX: number;

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

@@ -20,7 +20,11 @@ export function useDrawerState(id) {
       absDirectionY: void 0,
       absDirectionX: void 0,
       elRect: void 0,
-      wrapperRect: void 0
+      wrapperRect: void 0,
+      progress: {
+        x: 0,
+        y: 0
+      }
     };
     return reactive(state);
   }

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerUtils.d.ts

@@ -1,10 +1,3 @@
-interface isWithinRangeArgs {
-    input: number;
-    base: number;
-    threshold: number;
-}
 export declare function useDrawerUtils(): {
     clamp: (value: number, from: number, to: number) => number;
-    isWithinRange: (args: isWithinRangeArgs) => boolean;
 };
-export {};

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

@@ -21,12 +21,7 @@ export function useDrawerUtils() {
         return value;
     }
   }
-  function isWithinRange(args) {
-    const { input, base, threshold } = args;
-    return input >= base - threshold && input <= base + threshold;
-  }
   return {
-    clamp,
-    isWithinRange
+    clamp
   };
 }

package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.d.ts

@@ -0,0 +1,13 @@
+import { type MaybeRef } from 'vue';
+import type { SnapPoint } from '../types/index.js';
+export declare function useMagicDrawer(id: MaybeRef<string>): {
+    isActive: import("vue").ComputedRef<boolean>;
+    progress: import("vue").Ref<{
+        x: number;
+        y: number;
+    }>;
+    open: () => void;
+    close: () => void;
+    snapTo: (snapPoint: SnapPoint, duration?: number) => void;
+};
+export type UseMagicDrawerReturn = ReturnType<typeof useMagicDrawer>;

package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.mjs

@@ -0,0 +1,31 @@
+import { computed, toValue } from "vue";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useDrawerStore } from "./private/useDrawerStore.mjs";
+import { useDrawerState } from "./private/useDrawerState.mjs";
+export function useMagicDrawer(id) {
+  const { drawerStore, addInstance, removeInstance } = useDrawerStore();
+  const { deleteState, findState } = useDrawerState(toValue(id));
+  const { progress } = findState();
+  const isActive = computed(() => drawerStore.value.includes(toValue(id)));
+  function open() {
+    addInstance(toValue(id));
+  }
+  function close() {
+    removeInstance(toValue(id));
+    deleteState();
+  }
+  function snapTo(snapPoint, duration) {
+    useMagicEmitter().emit("snapTo", {
+      id: toValue(id),
+      snapPoint,
+      duration
+    });
+  }
+  return {
+    isActive,
+    progress,
+    open,
+    close,
+    snapTo
+  };
+}

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

@@ -46,6 +46,10 @@ export interface DrawerState {
     dragStart: Date | undefined;
     dragging: boolean;
     wheeling: boolean;
+    progress: {
+        x: number;
+        y: number;
+    };
     shouldClose: boolean;
     interpolateTo: number | undefined;
     originX: number;

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

@@ -0,0 +1,4 @@
+import { useMagicEmitter } from './src/composables/useMagicEmitter.js';
+import type { MagicEmitterEvents } from './src/types/index.js';
+export { useMagicEmitter };
+export type { MagicEmitterEvents };

package/dist/plugins/MagicEmitter/index.mjs

@@ -0,0 +1,2 @@
+import { useMagicEmitter } from "./src/composables/useMagicEmitter.mjs";
+export { useMagicEmitter };

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

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

package/dist/plugins/MagicEmitter/nuxt.mjs

@@ -0,0 +1,12 @@
+import { defineNuxtModule, addImports } from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicEmitter"
+  },
+  setup() {
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicEmitter",
+      name: "useMagicEmitter"
+    });
+  }
+});