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

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

@@ -1,46 +1,30 @@
 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';
-import '@maas/vue-equipment/utils/css/animations/slide-rtl-in.css';
-import '@maas/vue-equipment/utils/css/animations/slide-ttb-in.css';
-import '@maas/vue-equipment/utils/css/animations/slide-btt-in.css';
-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 '@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 function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        backdrop?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {
-        drawerRef: HTMLDivElement;
-        wrapperRef: HTMLDivElement;
-        elRef: unknown;
-    };
-    rootEl: any;
+declare var __VLS_11: {}, __VLS_37: {};
+type __VLS_Slots = {} & {
+    backdrop?: (props: typeof __VLS_11) => any;
+} & {
+    default?: (props: typeof __VLS_37) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-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"]>;
+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_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 & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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 { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useMetaViewport } from "@maas/vue-equipment/composables/useMetaViewport";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 export function useDrawerCallback(args) {
   const {
     id,

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

@@ -1,14 +1,18 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import { matchClass } from "@maas/vue-equipment/utils";
+import {
+  matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
 const defaultOptions = {
   focusTrap: false,
   focusTarget: void 0,
   scrollLock: true
 };
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useDrawerDOM(args) {
   const positionFixedElements = ref([]);
   const mappedOptions = defu(args, defaultOptions);
@@ -34,26 +38,44 @@ export function useDrawerDOM(args) {
     }
   }
   function addScrollLockPadding() {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined") {
+      return;
+    }
     const exclude = new RegExp(/magic-drawer(__backdrop)?/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
     );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
   }
   function removeScrollLockPadding() {
-    document.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     trapFocus,

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

@@ -2,8 +2,8 @@ import { type Ref, type MaybeRef } from 'vue';
 import type { DrawerDefaultOptions } from '../../types/index.js';
 type UseDrawerDragArgs = {
     id: MaybeRef<string>;
-    elRef: Ref<HTMLElement | undefined>;
-    wrapperRef: Ref<HTMLDivElement | undefined>;
+    elRef: Ref<HTMLElement | null>;
+    wrapperRef: Ref<HTMLDivElement | null>;
     position: MaybeRef<DrawerDefaultOptions['position']>;
     snapPoints: MaybeRef<DrawerDefaultOptions['snapPoints']>;
     threshold: MaybeRef<DrawerDefaultOptions['threshold']>;

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

@@ -22,7 +22,8 @@ import {
 } from "@maas/vue-equipment/utils";
 import {
   useMagicEmitter
-} from "@maas/vue-equipment/plugins";
+} from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useMagicDrawer } from "./../useMagicDrawer.mjs";
 import { useDrawerSnap } from "./useDrawerSnap.mjs";
 import { useDrawerGuards } from "./useDrawerGuards.mjs";
@@ -42,6 +43,10 @@ export function useDrawerDrag(args) {
     preventDragClose,
     disabled
   } = args;
+  const { logWarning } = useMagicError({
+    prefix: "MagicDrawer",
+    source: "useDrawerDrag"
+  });
   const { initializeState } = useDrawerState(toValue(id));
   const state = initializeState();
   const {
@@ -285,7 +290,7 @@ export function useDrawerDrag(args) {
   function snapToCallback(payload) {
     if (payload.id === toValue(id)) {
       if (!toValue(isActive)) {
-        console.warn("Cannot snap to point when drawer is not open");
+        logWarning("Cannot snap to point when drawer is not open");
         return;
       } else {
         snapTo({
@@ -383,9 +388,9 @@ export function useDrawerDrag(args) {
     shouldClose.value = false;
     checkDirection({ x: e.screenX, y: e.screenY });
     if (!scrollLock) {
-      const target = lockScroll(e.target);
-      if (target) {
-        scrollLock = useScrollLock(target);
+      const scrollLockTarget = lockScroll(e.target);
+      if (scrollLockTarget) {
+        scrollLock = useScrollLock(scrollLockTarget);
         scrollLock.value = true;
       }
     }
@@ -405,6 +410,12 @@ export function useDrawerDrag(args) {
     if (dragging.value) {
       return;
     } else {
+      const isSelect = ["SELECT", "OPTION"].includes(
+        e.target.tagName
+      );
+      if (isSelect) {
+        return;
+      }
       dragging.value = true;
       pointerdownTarget = e.target;
       guardedSetPointerCapture({

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

@@ -1,7 +1,7 @@
 import { type Ref, type MaybeRef } from 'vue';
 import type { DrawerSnapPoint, DrawerDefaultOptions } from '../../types/index.js';
 interface UseDrawerGuardsArgs {
-    elRef: Ref<HTMLElement | undefined>;
+    elRef: Ref<HTMLElement | null>;
     absDirectionX: MaybeRef<'with' | 'against' | undefined>;
     absDirectionY: MaybeRef<'with' | 'against' | undefined>;
     position: MaybeRef<DrawerDefaultOptions['position']>;

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

@@ -8,6 +8,20 @@ export function useDrawerGuards(args) {
   const canSnap = computed(() => {
     return toValue(activeSnapPoint) !== 1 && !!toValue(activeSnapPoint);
   });
+  function canScrollY(element) {
+    const style = window.getComputedStyle(element);
+    const overflowY = style.overflowY;
+    const canScroll = ["auto", "scroll"].includes(overflowY);
+    const hasOverflow = Math.round(element.scrollHeight) > Math.round(element.clientHeight);
+    return canScroll && hasOverflow;
+  }
+  function canScrollX(element) {
+    const style = window.getComputedStyle(element);
+    const overflowX = style.overflowX;
+    const canScroll = ["auto", "scroll"].includes(overflowX);
+    const hasOverflow = Math.round(element.scrollWidth) > Math.round(element.clientWidth);
+    return canScroll && hasOverflow;
+  }
   function canDrag(el) {
     let element = el;
     if (hasCursor.value) {
@@ -22,7 +36,7 @@ export function useDrawerGuards(args) {
       }
       switch (position) {
         case "bottom":
-          if (element.scrollHeight > element.clientHeight) {
+          if (canScrollY(element)) {
             if (element.scrollTop > 0) {
               return false;
             }
@@ -35,7 +49,7 @@ export function useDrawerGuards(args) {
           }
           break;
         case "top":
-          if (element.scrollHeight > element.clientHeight) {
+          if (canScrollY(element)) {
             const maxScroll = element.scrollHeight - element.clientHeight;
             if (element.scrollTop < maxScroll) {
               return false;
@@ -49,7 +63,7 @@ export function useDrawerGuards(args) {
           }
           break;
         case "right":
-          if (element.scrollWidth > element.clientWidth) {
+          if (canScrollX(element)) {
             if (element.scrollLeft > 0) {
               return false;
             }
@@ -62,7 +76,7 @@ export function useDrawerGuards(args) {
           }
           break;
         case "left":
-          if (element.scrollWidth > element.clientWidth) {
+          if (canScrollX(element)) {
             const maxScroll = element.scrollWidth - element.clientWidth;
             if (element.scrollLeft < maxScroll) {
               return false;
@@ -89,13 +103,13 @@ export function useDrawerGuards(args) {
       switch (position) {
         case "bottom":
         case "top":
-          if (element.scrollHeight > element.clientHeight) {
+          if (canScrollY(element)) {
             return false;
           }
           break;
         case "left":
         case "right":
-          if (element.scrollWidth > element.clientWidth) {
+          if (canScrollX(element)) {
             return false;
           }
           break;
@@ -117,41 +131,45 @@ export function useDrawerGuards(args) {
       }
       switch (position) {
         case "bottom":
-          if (element.scrollHeight > element.clientHeight) {
+          if (canScrollY(element)) {
             if (element.scrollTop === 0 || canSnap.value) {
               if (toValue(absDirectionY) === "against") {
                 return element;
               }
             }
+            return void 0;
           }
           break;
         case "top":
-          if (element.scrollHeight > element.clientHeight) {
+          if (canScrollY(element)) {
             const maxScroll = element.scrollHeight - element.clientHeight;
             if (element.scrollTop === maxScroll || canSnap.value) {
               if (toValue(absDirectionY) === "against") {
                 return element;
               }
             }
+            return void 0;
           }
           break;
         case "right":
-          if (element.scrollWidth > element.clientWidth) {
+          if (canScrollX(element)) {
             if (element.scrollLeft === 0 || canSnap.value) {
               if (toValue(absDirectionX) === "against") {
                 return element;
               }
             }
+            return void 0;
           }
           break;
         case "left":
-          if (element.scrollWidth > element.clientWidth) {
+          if (canScrollX(element)) {
             const maxScroll = element.scrollWidth - element.clientWidth;
             if (element.scrollLeft === maxScroll || canSnap.value) {
               if (toValue(absDirectionX) === "against") {
                 return element;
               }
             }
+            return void 0;
           }
           break;
       }

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

@@ -2,8 +2,8 @@ import { type Ref, type MaybeRef } from 'vue';
 import type { DrawerDefaultOptions } from '../../types/index.js';
 interface UseDrawerProgressArgs {
     id: MaybeRef<string>;
-    elRef: Ref<HTMLElement | undefined>;
-    drawerRef: Ref<HTMLDivElement | undefined>;
+    elRef: Ref<HTMLElement | null>;
+    drawerRef: Ref<HTMLDivElement | null>;
     position: MaybeRef<DrawerDefaultOptions['position']>;
     overshoot: MaybeRef<number>;
 }

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

@@ -11,7 +11,7 @@ import { useElementBounding, useRafFn } from "@vueuse/core";
 import { clampValue, mapValue } from "@maas/vue-equipment/utils";
 import {
   useMagicEmitter
-} from "@maas/vue-equipment/plugins";
+} from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useDrawerState } from "./useDrawerState.mjs";
 export function useDrawerProgress(args) {
   const { id, drawerRef, elRef, position, overshoot } = args;

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

@@ -27,9 +27,9 @@ type InterpolateDraggedArgs = {
     easing?: (t: number) => number;
 };
 export declare function useDrawerSnap(args: UseDrawerSnapArgs): {
-    snappedY: Ref<number, number>;
-    snappedX: Ref<number, number>;
-    activeSnapPoint: Ref<DrawerSnapPoint | undefined, DrawerSnapPoint | undefined>;
+    snappedY: import("vue").ShallowRef<number, number>;
+    snappedX: import("vue").ShallowRef<number, number>;
+    activeSnapPoint: import("vue").ShallowRef<DrawerSnapPoint | undefined, DrawerSnapPoint | undefined>;
     snapTo: (args: SnapToArgs) => Promise<void>;
     findClosestSnapPoint: (args: FindClosestSnapPointArgs) => number | undefined;
     interpolateDragged: (args: InterpolateDraggedArgs) => void;

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

@@ -1,7 +1,12 @@
-import { ref, computed, toValue, nextTick } from "vue";
+import {
+  shallowRef,
+  computed,
+  toValue,
+  nextTick
+} from "vue";
 import { computedWithControl } from "@vueuse/core";
 import { mapValue, interpolate } from "@maas/vue-equipment/utils";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 export function useDrawerSnap(args) {
   const {
     id,
@@ -44,9 +49,9 @@ export function useDrawerSnap(args) {
       return mapped;
     }
   );
-  const snappedY = ref(0);
-  const snappedX = ref(0);
-  const activeSnapPoint = ref(void 0);
+  const snappedY = shallowRef(0);
+  const snappedX = shallowRef(0);
+  const activeSnapPoint = shallowRef(void 0);
   const drawerHeight = computed(() => {
     const rect = toValue(wrapperRect);
     if (rect === void 0) {
@@ -102,30 +107,54 @@ export function useDrawerSnap(args) {
       switch (position) {
         case "bottom": {
           const rect = toValue(wrapperRect);
-          if (reversedSnapPoint === 1) return drawerHeight.value;
-          if (reversedSnapPoint === 0) return 0;
-          if (!rect) return 0;
+          if (reversedSnapPoint === 1) {
+            return drawerHeight.value;
+          }
+          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;
-          if (reversedSnapPoint === 0) return 0;
-          if (!rect) return 0;
+          if (reversedSnapPoint === 1) {
+            return drawerHeight.value * -1;
+          }
+          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;
-          if (reversedSnapPoint === 0) return 0;
-          if (!rect) return 0;
+          if (reversedSnapPoint === 1) {
+            return drawerWidth.value;
+          }
+          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;
-          if (reversedSnapPoint === 0) return 0;
-          if (!rect) return 0;
+          if (reversedSnapPoint === 1) {
+            return drawerWidth.value * -1;
+          }
+          if (reversedSnapPoint === 0) {
+            return 0;
+          }
+          if (!rect) {
+            return 0;
+          }
           return vw * reversedSnapPoint - rect.right;
         }
         default:
@@ -157,7 +186,9 @@ export function useDrawerSnap(args) {
       case "top":
       case "bottom": {
         const mappedSnapPointY = mapSnapPoint(snapPoint);
-        if (!mappedSnapPointY && mappedSnapPointY !== 0) return;
+        if (!mappedSnapPointY && mappedSnapPointY !== 0) {
+          return;
+        }
         const closestY = findClosestSnapPoint({
           draggedX,
           draggedY: mappedSnapPointY
@@ -174,7 +205,9 @@ export function useDrawerSnap(args) {
       case "left":
       case "right": {
         const mappedSnapPointX = mapSnapPoint(toValue(snapPoint));
-        if (!mappedSnapPointX && mappedSnapPointX !== 0) return;
+        if (!mappedSnapPointX && mappedSnapPointX !== 0) {
+          return;
+        }
         const closestX = findClosestSnapPoint({
           draggedX: mappedSnapPointX,
           draggedY
@@ -198,6 +231,9 @@ export function useDrawerSnap(args) {
       easing
     } = args2;
     const snapPoint = snapPointsMap.value[to];
+    if (!snapPoint && snapPoint !== 0) {
+      return;
+    }
     emitter.emit("beforeSnap", { id: toValue(id), snapPoint });
     switch (position) {
       case "bottom":

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

@@ -38,7 +38,9 @@ export function useDrawerState(id) {
     let state = drawerStateStore.value.find((entry) => {
       return entry.id === id;
     });
-    if (!state) state = addState(toValue(id));
+    if (!state) {
+      state = addState(toValue(id));
+    }
     return state;
   }
   function deleteState() {

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

@@ -1,16 +1,29 @@
 export function useDrawerUtils() {
   function clamp(value, from, to) {
     if (from > to) {
-      if (value > from) return value;
-      if (value < to) return to;
-      else return value;
+      if (value > from) {
+        return value;
+      }
+      if (value < to) {
+        return to;
+      } else {
+        return value;
+      }
     } else if (from < to) {
-      if (value < from) return value;
-      if (value > to) return to;
-      else return value;
+      if (value < from) {
+        return value;
+      }
+      if (value > to) {
+        return to;
+      } else {
+        return value;
+      }
     } else {
-      if (value < to) return to;
-      else return value;
+      if (value < to) {
+        return to;
+      } else {
+        return value;
+      }
     }
   }
   return {

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

@@ -2,7 +2,7 @@ import { type Ref, type MaybeRef, type ComputedRef } from 'vue';
 import type { DrawerDefaultOptions } from '../../types/index.js';
 type UseDrawerWheelArgs = {
     id: MaybeRef<string>;
-    elRef: Ref<HTMLElement | undefined>;
+    elRef: Ref<HTMLElement | null>;
     position: MaybeRef<DrawerDefaultOptions['position']>;
     disabled: ComputedRef<boolean>;
 };

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

@@ -4,10 +4,15 @@ import {
   toRefs
 } from "vue";
 import { unrefElement } from "@vueuse/core";
-import WheelGestures from "wheel-gestures";
+import WheelGestures, {} from "wheel-gestures";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useDrawerState } from "./useDrawerState.mjs";
 export function useDrawerWheel(args) {
   const { id, elRef, position, disabled } = args;
+  const { logError } = useMagicError({
+    prefix: "MagicDrawer",
+    source: "useDrawerWheel"
+  });
   const { initializeState } = useDrawerState(toValue(id));
   const state = initializeState();
   const { dragging, wheeling } = toRefs(state);
@@ -56,7 +61,7 @@ export function useDrawerWheel(args) {
       dispatchEvent(startEvent);
       wheeling.value = true;
     } catch (e) {
-      console.error(e);
+      logError(String(e));
       return destroyWheelListener();
     }
   }

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

@@ -1,5 +1,5 @@
 import { computed, toValue, toRefs } from "vue";
-import { useMagicEmitter } from "../../../MagicEmitter/index.mjs";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useDrawerState } from "./private/useDrawerState.mjs";
 export function useMagicDrawer(id) {
   const { initializeState } = useDrawerState(toValue(id));

package/dist/plugins/MagicDrawer/src/types/index.mjs

@@ -0,0 +1 @@
+import {} from "focus-trap";

package/dist/plugins/MagicDrawer/src/utils/defaultOptions.mjs

@@ -14,8 +14,8 @@ const defaultOptions = {
     disabled: false
   },
   transition: {
-    content: "magic-drawer--content",
-    backdrop: "magic-drawer--backdrop"
+    content: "magic-drawer-content",
+    backdrop: "magic-drawer-backdrop"
   },
   threshold: {
     lock: 0,

package/dist/plugins/MagicEmitter/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;