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

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

@@ -1,5 +1,5 @@
-import { type Component, type MaybeRef } from 'vue';
-import type { MagicDrawerOptions } from '../types/index';
+import { type MaybeRef } from 'vue';
+import type { MagicDrawerOptions } from '../types/index.js';
 import '@maas/vue-equipment/utils/css/animations/fade-in.css';
 import '@maas/vue-equipment/utils/css/animations/fade-out.css';
 import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css';
@@ -12,7 +12,6 @@ import '@maas/vue-equipment/utils/css/animations/slide-ttb-out.css';
 import '@maas/vue-equipment/utils/css/animations/slide-btt-out.css';
 interface MagicDrawerProps {
     id: MaybeRef<string>;
-    component?: Component;
     options?: MagicDrawerOptions;
 }
 declare function __VLS_template(): {
@@ -29,11 +28,18 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerProps> & Readonly<{}>, {
-    options: MagicDrawerOptions;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicDrawerProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicDrawerProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -13,11 +13,11 @@ type UseDrawerCallbackArgs = {
     wasActive: Ref<boolean>;
 };
 export declare function useDrawerCallback(args: UseDrawerCallbackArgs): {
-    onBeforeEnter: (_el?: Element) => void;
-    onEnter: (_el?: Element) => void;
-    onAfterEnter: (_el?: Element) => Promise<void>;
-    onBeforeLeave: (_el?: Element) => void;
-    onLeave: (_el: Element) => void;
-    onAfterLeave: (_el?: Element) => void;
+    onBeforeEnter: () => void;
+    onEnter: () => void;
+    onAfterEnter: () => Promise<void>;
+    onBeforeLeave: () => void;
+    onLeave: () => void;
+    onAfterLeave: () => void;
 };
 export {};

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

@@ -16,7 +16,7 @@ export function useDrawerCallback(args) {
   } = args;
   const { setMetaViewport, resetMetaViewport } = useMetaViewport();
   const emitter = useMagicEmitter();
-  function onBeforeEnter(_el) {
+  function onBeforeEnter() {
     emitter.emit("beforeEnter", toValue(id));
     if (mappedOptions.scrollLock) {
       if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
@@ -28,10 +28,10 @@ export function useDrawerCallback(args) {
       setMetaViewport();
     }
   }
-  function onEnter(_el) {
+  function onEnter() {
     emitter.emit("enter", toValue(id));
   }
-  async function onAfterEnter(_el) {
+  async function onAfterEnter() {
     emitter.emit("afterEnter", toValue(id));
     if (mappedOptions.focusTrap) {
       await nextTick();
@@ -39,13 +39,13 @@ export function useDrawerCallback(args) {
     }
     wasActive.value = true;
   }
-  function onBeforeLeave(_el) {
+  function onBeforeLeave() {
     emitter.emit("beforeLeave", toValue(id));
   }
-  function onLeave(_el) {
+  function onLeave() {
     emitter.emit("leave", toValue(id));
   }
-  function onAfterLeave(_el) {
+  function onAfterLeave() {
     emitter.emit("afterLeave", toValue(id));
     if (mappedOptions.scrollLock) {
       unlockScroll();

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

@@ -1,19 +1,17 @@
 import { type Ref, type MaybeRef } from 'vue';
-import { type DefaultOptions } from '../../utils/defaultOptions.js';
+import type { DrawerDefaultOptions } from '../../types/index.js';
 type UseDrawerDragArgs = {
     id: MaybeRef<string>;
-    isActive: MaybeRef<boolean>;
     elRef: Ref<HTMLElement | undefined>;
     wrapperRef: Ref<HTMLDivElement | undefined>;
-    position: MaybeRef<DefaultOptions['position']>;
-    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
-    threshold: MaybeRef<DefaultOptions['threshold']>;
-    initial: MaybeRef<DefaultOptions['initial']>;
-    animation: MaybeRef<DefaultOptions['animation']>;
-    preventDragClose: MaybeRef<DefaultOptions['preventDragClose']>;
+    position: MaybeRef<DrawerDefaultOptions['position']>;
+    snapPoints: MaybeRef<DrawerDefaultOptions['snapPoints']>;
+    threshold: MaybeRef<DrawerDefaultOptions['threshold']>;
+    initial: MaybeRef<DrawerDefaultOptions['initial']>;
+    animation: MaybeRef<DrawerDefaultOptions['animation']>;
+    preventDragClose: MaybeRef<DrawerDefaultOptions['preventDragClose']>;
     disabled: MaybeRef<boolean>;
     overshoot: MaybeRef<number>;
-    close: () => void;
 };
 export declare function useDrawerDrag(args: UseDrawerDragArgs): {
     onPointerdown: (e: PointerEvent) => void;

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

@@ -4,6 +4,7 @@ import {
   watch,
   onBeforeUnmount,
   toValue,
+  toRefs,
   nextTick
 } from "vue";
 import {
@@ -22,6 +23,7 @@ import {
 import {
   useMagicEmitter
 } from "@maas/vue-equipment/plugins";
+import { useMagicDrawer } from "./../useMagicDrawer.mjs";
 import { useDrawerSnap } from "./useDrawerSnap.mjs";
 import { useDrawerGuards } from "./useDrawerGuards.mjs";
 import { useDrawerUtils } from "./useDrawerUtils.mjs";
@@ -29,7 +31,6 @@ import { useDrawerState } from "./useDrawerState.mjs";
 export function useDrawerDrag(args) {
   const {
     id,
-    isActive,
     elRef,
     wrapperRef,
     position,
@@ -39,10 +40,10 @@ export function useDrawerDrag(args) {
     initial,
     animation,
     preventDragClose,
-    disabled,
-    close
+    disabled
   } = args;
   const { initializeState } = useDrawerState(toValue(id));
+  const state = initializeState();
   const {
     dragStart,
     dragging,
@@ -61,7 +62,8 @@ export function useDrawerDrag(args) {
     absDirectionY,
     elRect,
     wrapperRect
-  } = initializeState();
+  } = toRefs(state);
+  const { isActive, close } = useMagicDrawer(id);
   let pointerdownTarget = void 0;
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
@@ -123,35 +125,37 @@ export function useDrawerDrag(args) {
     const distanceY = Math.abs(draggedY.value - lastDraggedY.value);
     switch (position) {
       case "bottom":
-      case "top":
+      case "top": {
         if (distanceY > toValue(threshold).distance) {
           const snapPointY = findClosestSnapPoint({
             draggedX: 0,
             draggedY,
             direction: relDirectionY.value
           });
-          if (snapPointY === drawerHeight.value) {
+          if (Math.abs(snapPointY ?? 0) === drawerHeight.value) {
             shouldClose.value = true;
           } else {
             interpolateTo.value = snapPointY;
           }
         }
         break;
+      }
       case "right":
-      case "left":
+      case "left": {
         if (distanceX > toValue(threshold).distance) {
           const snapPointX = findClosestSnapPoint({
             draggedX,
             draggedY: 0,
             direction: relDirectionX.value
           });
-          if (snapPointX === drawerWidth.value) {
+          if (Math.abs(snapPointX ?? 0) === drawerWidth.value) {
             shouldClose.value = true;
           } else {
             interpolateTo.value = snapPointX;
           }
         }
         break;
+      }
     }
   }
   function checkMomentum() {
@@ -162,63 +166,69 @@ export function useDrawerDrag(args) {
     const velocityY = elapsed && distanceY ? distanceY / elapsed : 0;
     switch (position) {
       case "bottom":
-      case "top":
+      case "top": {
         if (velocityY > toValue(threshold).momentum) {
           const snapPointY = findClosestSnapPoint({
             draggedX: 0,
             draggedY,
             direction: relDirectionY.value
           });
-          if (snapPointY === drawerHeight.value) {
+          if (Math.abs(snapPointY ?? 0) === drawerHeight.value) {
             shouldClose.value = true;
           } else {
             interpolateTo.value = snapPointY;
           }
         }
         break;
+      }
       case "right":
-      case "left":
+      case "left": {
         if (velocityX > toValue(threshold).momentum) {
           const snapPointX = findClosestSnapPoint({
             draggedX,
             draggedY,
             direction: relDirectionX.value
           });
-          if (snapPointX === drawerWidth.value) {
+          if (Math.abs(snapPointX ?? 0) === drawerWidth.value) {
             shouldClose.value = true;
           } else {
             interpolateTo.value = snapPointX;
           }
         }
         break;
+      }
     }
   }
   function setDragged({ x, y }) {
     switch (position) {
-      case "bottom":
+      case "bottom": {
         const newDraggedB = clamp(y - originY.value, 0, toValue(overshoot) * -1);
         if (newDraggedB === draggedY.value) break;
         relDirectionY.value = newDraggedB < draggedY.value ? "below" : "above";
         draggedY.value = newDraggedB;
         break;
-      case "top":
+      }
+      case "top": {
         const newDraggedT = clamp(y - originY.value, 0, toValue(overshoot));
         if (newDraggedT === draggedY.value) break;
         relDirectionY.value = newDraggedT < draggedY.value ? "below" : "above";
         draggedY.value = newDraggedT;
         break;
-      case "right":
+      }
+      case "right": {
         const newDraggedR = clamp(x - originX.value, 0, toValue(overshoot) * -1);
         if (newDraggedR === draggedX.value) break;
         relDirectionX.value = newDraggedR < draggedX.value ? "below" : "above";
         draggedX.value = newDraggedR;
         break;
-      case "left":
+      }
+      case "left": {
         const newDraggedL = clamp(x - originX.value, 0, toValue(overshoot));
         if (newDraggedL === draggedX.value) break;
         relDirectionX.value = newDraggedL < draggedX.value ? "below" : "above";
         draggedX.value = newDraggedL;
         break;
+      }
     }
   }
   function checkDirection({ x, y }) {

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

@@ -1,11 +1,10 @@
 import { type Ref, type MaybeRef } from 'vue';
-import { type DefaultOptions } from '../../utils/defaultOptions.js';
-import { type DrawerSnapPoint } from '../../types/index.js';
+import type { DrawerSnapPoint, DrawerDefaultOptions } from '../../types/index.js';
 interface UseDrawerGuardsArgs {
     elRef: Ref<HTMLElement | undefined>;
     absDirectionX: MaybeRef<'with' | 'against' | undefined>;
     absDirectionY: MaybeRef<'with' | 'against' | undefined>;
-    position: MaybeRef<DefaultOptions['position']>;
+    position: MaybeRef<DrawerDefaultOptions['position']>;
     activeSnapPoint: MaybeRef<DrawerSnapPoint | undefined>;
 }
 export declare function useDrawerGuards(args: UseDrawerGuardsArgs): {

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

@@ -1,10 +1,10 @@
 import { type Ref, type MaybeRef } from 'vue';
-import type { DefaultOptions } from '../../utils/defaultOptions.js';
+import type { DrawerDefaultOptions } from '../../types/index.js';
 interface UseDrawerProgressArgs {
     id: MaybeRef<string>;
     elRef: Ref<HTMLElement | undefined>;
     drawerRef: Ref<HTMLDivElement | undefined>;
-    position: MaybeRef<DefaultOptions['position']>;
+    position: MaybeRef<DrawerDefaultOptions['position']>;
     overshoot: MaybeRef<number>;
 }
 export declare function useDrawerProgress(args: UseDrawerProgressArgs): {

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

@@ -4,7 +4,8 @@ import {
   computed,
   onMounted,
   onBeforeUnmount,
-  nextTick
+  nextTick,
+  toRefs
 } from "vue";
 import { useElementBounding, useRafFn } from "@vueuse/core";
 import { clampValue, mapValue } from "@maas/vue-equipment/utils";
@@ -23,7 +24,8 @@ export function useDrawerProgress(args) {
   const maxY = computed(
     () => drawerRect.height.value - elRect.height.value + toValue(overshoot)
   );
-  const { progress } = initializeState();
+  const state = initializeState();
+  const { progress } = toRefs(state);
   function rafCallback() {
     drawerRect.update();
     elRect.update();

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

@@ -1,15 +1,14 @@
 import { type MaybeRef, type Ref } from 'vue';
-import { type DefaultOptions } from '../../utils/defaultOptions.js';
-import { type DrawerSnapPoint } from '../../types/index.js';
+import type { DrawerSnapPoint, DrawerDefaultOptions } from '../../types/index.js';
 type UseDrawerSnapArgs = {
     id: MaybeRef<string>;
     wrapperRect: Ref<DOMRect | undefined>;
     draggedY: Ref<number>;
     draggedX: Ref<number>;
-    position: MaybeRef<DefaultOptions['position']>;
-    animation: MaybeRef<DefaultOptions['animation']>;
-    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
-    preventDragClose: MaybeRef<DefaultOptions['preventDragClose']>;
+    position: MaybeRef<DrawerDefaultOptions['position']>;
+    animation: MaybeRef<DrawerDefaultOptions['animation']>;
+    snapPoints: MaybeRef<DrawerDefaultOptions['snapPoints']>;
+    preventDragClose: MaybeRef<DrawerDefaultOptions['preventDragClose']>;
     overshoot: MaybeRef<number>;
 };
 type FindClosestSnapPointArgs = {

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

@@ -31,13 +31,16 @@ export function useDrawerSnap(args) {
     () => toValue(snapPoints),
     () => {
       const extended = toValue(preventDragClose) ? toValue(snapPoints) : [...toValue(snapPoints), 0];
-      const mapped = extended.reduce((acc, current) => {
-        const key = mapSnapPoint(current);
-        if (key || key === 0) {
-          acc[key] = current;
-        }
-        return acc;
-      }, {});
+      const mapped = extended.reduce(
+        (acc, current) => {
+          const key = mapSnapPoint(current);
+          if (key || key === 0) {
+            acc[key] = current;
+          }
+          return acc;
+        },
+        {}
+      );
       return mapped;
     }
   );
@@ -45,18 +48,18 @@ export function useDrawerSnap(args) {
   const snappedX = ref(0);
   const activeSnapPoint = ref(void 0);
   const drawerHeight = computed(() => {
-    if (toValue(wrapperRect) === void 0) {
+    const rect = toValue(wrapperRect);
+    if (rect === void 0) {
       return 0;
-    } else {
-      return toValue(wrapperRect)?.height - toValue(overshoot);
     }
+    return rect.height - toValue(overshoot);
   });
   const drawerWidth = computed(() => {
-    if (toValue(wrapperRect) === void 0) {
+    const rect = toValue(wrapperRect);
+    if (rect === void 0) {
       return 0;
-    } else {
-      return toValue(wrapperRect)?.width - toValue(overshoot);
     }
+    return rect.width - toValue(overshoot);
   });
   const emitter = useMagicEmitter();
   function findClosestNumber(args2) {
@@ -97,22 +100,34 @@ export function useDrawerSnap(args) {
         return void 0;
       }
       switch (position) {
-        case "bottom":
+        case "bottom": {
+          const rect = toValue(wrapperRect);
           if (reversedSnapPoint === 1) return drawerHeight.value;
-          else if (reversedSnapPoint === 0) return 0;
-          else return vh * reversedSnapPoint - toValue(wrapperRect)?.top;
-        case "top":
+          if (reversedSnapPoint === 0) return 0;
+          if (!rect) return 0;
+          return vh * reversedSnapPoint - rect.top;
+        }
+        case "top": {
+          const rect = toValue(wrapperRect);
           if (reversedSnapPoint === 1) return drawerHeight.value * -1;
-          else if (reversedSnapPoint === 0) return 0;
-          else return vh * reversedSnapPoint - toValue(wrapperRect)?.bottom;
-        case "right":
+          if (reversedSnapPoint === 0) return 0;
+          if (!rect) return 0;
+          return vh * reversedSnapPoint - rect.bottom;
+        }
+        case "right": {
+          const rect = toValue(wrapperRect);
           if (reversedSnapPoint === 1) return drawerWidth.value;
-          else if (reversedSnapPoint === 0) return 0;
-          else return vw * reversedSnapPoint - toValue(wrapperRect)?.left;
-        case "left":
+          if (reversedSnapPoint === 0) return 0;
+          if (!rect) return 0;
+          return vw * reversedSnapPoint - rect.left;
+        }
+        case "left": {
+          const rect = toValue(wrapperRect);
           if (reversedSnapPoint === 1) return drawerWidth.value * -1;
-          else if (reversedSnapPoint === 0) return 0;
-          else return vw * reversedSnapPoint - toValue(wrapperRect)?.right;
+          if (reversedSnapPoint === 0) return 0;
+          if (!rect) return 0;
+          return vw * reversedSnapPoint - rect.right;
+        }
         default:
           return 0;
       }
@@ -140,7 +155,7 @@ export function useDrawerSnap(args) {
     await nextTick();
     switch (position) {
       case "top":
-      case "bottom":
+      case "bottom": {
         const mappedSnapPointY = mapSnapPoint(snapPoint);
         if (!mappedSnapPointY && mappedSnapPointY !== 0) return;
         const closestY = findClosestSnapPoint({
@@ -155,8 +170,9 @@ export function useDrawerSnap(args) {
         snappedY.value = closestY;
         activeSnapPoint.value = toValue(snapPoint);
         break;
+      }
       case "left":
-      case "right":
+      case "right": {
         const mappedSnapPointX = mapSnapPoint(toValue(snapPoint));
         if (!mappedSnapPointX && mappedSnapPointX !== 0) return;
         const closestX = findClosestSnapPoint({
@@ -172,6 +188,7 @@ export function useDrawerSnap(args) {
         snappedX.value = closestX;
         activeSnapPoint.value = toValue(snapPoint);
         break;
+      }
     }
   }
   function interpolateDragged(args2) {
@@ -233,8 +250,8 @@ export function useDrawerSnap(args) {
             numbers: mappedSnapPoints.value,
             direction
           });
-          break;
         }
+        break;
       case "right":
       case "left":
         if (!!toValue(draggedX2) || toValue(draggedX2) === 0) {
@@ -243,8 +260,8 @@ export function useDrawerSnap(args) {
             numbers: mappedSnapPoints.value,
             direction
           });
-          break;
         }
+        break;
     }
     return closest;
   }

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

@@ -1,7 +1,7 @@
 import { type Ref, type MaybeRef } from 'vue';
 import type { DrawerState } from '../../types/index.js';
 export declare function useDrawerState(id: MaybeRef<string>): {
-    initializeState: () => import("vue").ToRefs<DrawerState>;
+    initializeState: () => DrawerState;
     deleteState: () => void;
     drawerStateStore: Ref<DrawerState[], DrawerState[]>;
 };

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

@@ -1,4 +1,4 @@
-import { ref, reactive, toRefs, toValue } from "vue";
+import { ref, reactive, toValue } from "vue";
 const drawerStateStore = ref([]);
 export function useDrawerState(id) {
   function createState(id2) {
@@ -30,16 +30,16 @@ export function useDrawerState(id) {
     return reactive(state);
   }
   function addState(id2) {
-    const instance = createState(id2);
-    drawerStateStore.value = [...drawerStateStore.value, instance];
-    return instance;
+    const state = createState(id2);
+    drawerStateStore.value = [...drawerStateStore.value, state];
+    return state;
   }
   function initializeState() {
-    let instance = drawerStateStore.value.find((instance2) => {
-      return instance2.id === id;
+    let state = drawerStateStore.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((x) => x.id !== id);

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

@@ -1,9 +1,9 @@
 import { type Ref, type MaybeRef, type ComputedRef } from 'vue';
-import { type DefaultOptions } from '../../utils/defaultOptions.js';
+import type { DrawerDefaultOptions } from '../../types/index.js';
 type UseDrawerWheelArgs = {
     id: MaybeRef<string>;
     elRef: Ref<HTMLElement | undefined>;
-    position: MaybeRef<DefaultOptions['position']>;
+    position: MaybeRef<DrawerDefaultOptions['position']>;
     disabled: ComputedRef<boolean>;
 };
 export declare function useDrawerWheel(args: UseDrawerWheelArgs): {

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

@@ -1,14 +1,16 @@
 import {
   computed,
-  toValue
+  toValue,
+  toRefs
 } from "vue";
 import { unrefElement } from "@vueuse/core";
-import WheelGestures from "@maas/wheel-gestures";
+import WheelGestures from "wheel-gestures";
 import { useDrawerState } from "./useDrawerState.mjs";
 export function useDrawerWheel(args) {
   const { id, elRef, position, disabled } = args;
   const { initializeState } = useDrawerState(toValue(id));
-  const { dragging, wheeling } = initializeState();
+  const state = initializeState();
+  const { dragging, wheeling } = toRefs(state);
   let startEvent;
   const axis = computed(() => {
     switch (toValue(position)) {
@@ -18,6 +20,8 @@ export function useDrawerWheel(args) {
       case "top":
       case "bottom":
         return "y";
+      default:
+        return void 0;
     }
   });
   const wheelGestures = WheelGestures({
@@ -27,9 +31,8 @@ export function useDrawerWheel(args) {
   });
   let unobserveTargetNode;
   let cancelWheel;
-  function createPointerEvent(type, state) {
-    let moveX, moveY;
-    [moveX, moveY] = state.axisMovement;
+  function createPointerEvent(type, state2) {
+    const [moveX, moveY] = state2.axisMovement;
     if (!startEvent) {
       return new PointerEvent(type);
     }
@@ -47,40 +50,41 @@ export function useDrawerWheel(args) {
   function dispatchEvent(event) {
     unrefElement(elRef)?.dispatchEvent(event);
   }
-  function onWheelStarted(state) {
+  function onWheelStarted(state2) {
     try {
-      startEvent = new PointerEvent("pointerdown", state.event);
+      startEvent = new PointerEvent("pointerdown", state2.event);
       dispatchEvent(startEvent);
       wheeling.value = true;
     } catch (e) {
+      console.error(e);
       return destroyWheelListener();
     }
   }
-  function onWheelMove(state) {
-    dispatchEvent(createPointerEvent("pointermove", state));
+  function onWheelMove(state2) {
+    dispatchEvent(createPointerEvent("pointermove", state2));
   }
-  function onWheelEnded(state) {
-    dispatchEvent(createPointerEvent("pointerup", state));
+  function onWheelEnded(state2) {
+    dispatchEvent(createPointerEvent("pointerup", state2));
     wheeling.value = false;
   }
-  function handleWheel(state) {
+  function handleWheel(state2) {
     const {
       axisDelta: [deltaX, deltaY]
-    } = state;
+    } = state2;
     const primaryAxisDelta = axis.value === "x" ? deltaX : deltaY;
     const crossAxisDelta = axis.value === "x" ? deltaY : deltaX;
-    const isEndingOrRelease = state.isEnding && !state.isMomentum || state.isMomentum && state.previous && !state.previous.isMomentum;
+    const isEndingOrRelease = state2.isEnding && !state2.isMomentum || state2.isMomentum && state2.previous && !state2.previous.isMomentum;
     const primaryAxisDeltaIsDominant = Math.abs(primaryAxisDelta) > Math.abs(crossAxisDelta);
-    if (primaryAxisDeltaIsDominant && !dragging.value && !state.isMomentum) {
-      onWheelStarted(state);
+    if (primaryAxisDeltaIsDominant && !dragging.value && !state2.isMomentum) {
+      onWheelStarted(state2);
     }
     if (!dragging.value || !wheeling.value) {
       return;
     }
     if (isEndingOrRelease) {
-      onWheelEnded(state);
+      onWheelEnded(state2);
     } else {
-      onWheelMove(state);
+      onWheelMove(state2);
     }
   }
   function initializeWheelListener() {

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

@@ -1,9 +1,10 @@
-import { computed, toValue } from "vue";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { computed, toValue, toRefs } from "vue";
+import { useMagicEmitter } from "../../../MagicEmitter/index.mjs";
 import { useDrawerState } from "./private/useDrawerState.mjs";
 export function useMagicDrawer(id) {
   const { initializeState } = useDrawerState(toValue(id));
-  const { progress, active } = initializeState();
+  const state = initializeState();
+  const { progress, active } = toRefs(state);
   const isActive = computed(() => active.value);
   function open() {
     active.value = true;