@maas/vue-equipment 1.0.0-beta.5 → 1.0.0-beta.7

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

@@ -77,40 +77,19 @@ declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOpt
         snapPoint?: import("../types").DraggableSnapPoint;
     };
 };
-declare const elRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
-declare const wrapperRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
 declare const dragging: import("vue").Ref<boolean, boolean>;
 declare const disabled: import("vue").ComputedRef<boolean>;
 declare const style: import("vue").ComputedRef<string>, hasDragged: import("vue").ComputedRef<boolean>;
 declare function guardedPointerdown(event: PointerEvent): void;
 declare function guardedClick(event: PointerEvent): void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare const __VLS_0: "dialog" | "div";
-declare const __VLS_2: {
-    __ctx?: {
-        attrs?: any;
-        expose?: any;
-        slots?: any;
-        emit?: any;
-        props?: {} & Record<string, unknown>;
-    };
-};
-declare var __VLS_6: (Parameters<NonNullable<(typeof __VLS_5)["expose"]>>[0] | null);
-declare var __VLS_10: {};
-declare var __VLS_5: __VLS_PickFunctionalComponentCtx<typeof __VLS_0, typeof __VLS_2>;
+declare var __VLS_12: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_12) => any;
 }>;
-type __VLS_TemplateRefs = {
-    drawerRef: typeof __VLS_nativeElements['div'];
-    wrapperRef: typeof __VLS_nativeElements['div'];
-    elRef: typeof __VLS_6;
-};
 declare const __VLS_self: import("vue").DefineComponent<MagicDraggableProps, {
     toValue: typeof toValue;
     mappedOptions: typeof mappedOptions;
-    elRef: typeof elRef;
-    wrapperRef: typeof wrapperRef;
     dragging: typeof dragging;
     disabled: typeof disabled;
     style: typeof style;
@@ -118,7 +97,7 @@ declare const __VLS_self: import("vue").DefineComponent<MagicDraggableProps, {
     guardedPointerdown: typeof guardedPointerdown;
     guardedClick: typeof guardedClick;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDraggableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicDraggableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDraggableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicDraggableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDraggableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

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

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

@@ -1,5 +1,5 @@
 import {
-  ref,
+  shallowRef,
   computed,
   toValue,
   nextTick,
@@ -58,8 +58,8 @@ export function useDraggableDrag(args) {
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
   let cancelTouchend = void 0;
-  const momentumThresholdReached = ref(false);
-  const distanceThresholdReached = ref(false);
+  const momentumThresholdReached = shallowRef(false);
+  const distanceThresholdReached = shallowRef(false);
   const style = computed(
     () => `transform: translate3d(${draggedX.value}px, ${draggedY.value}px, 0)`
   );

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

@@ -1,7 +1,7 @@
-import { ref } from "vue";
+import { shallowRef, ref } from "vue";
 import { useScrollLock } from "@vueuse/core";
 import { matchClass } from "@maas/vue-equipment/utils";
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useDraggableScrollLock() {
   const positionFixedElements = ref([]);
   function lockScroll() {

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

@@ -22,13 +22,13 @@ type SnapToArgs = {
 };
 export declare function useDraggableSnap(args: UseDraggableSnapArgs): {
     mappedSnapPoints: import("@vueuse/core").ComputedRefWithControl<Coordinates[]>;
-    activeSnapPoint: Ref<("center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right") | ["center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right", offset?: {
+    activeSnapPoint: Ref<("center" | "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | ["center" | "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
         x?: number | undefined;
         y?: number | undefined;
-    } | undefined] | undefined, "center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | ["center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right", offset?: {
+    } | undefined] | undefined, "center" | "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | ["center" | "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
         x?: number;
         y?: number;
-    } | undefined] | ["center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right", offset?: {
+    } | undefined] | ["center" | "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
         x?: number | undefined;
         y?: number | undefined;
     } | undefined] | undefined>;

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

@@ -18,17 +18,14 @@ export function useDraggableSnap(args) {
   const snapPointsMap = computedWithControl(
     () => toValue(snapPoints),
     () => {
-      const mapped = toValue(snapPoints).reduce(
-        (acc, current) => {
-          const key = mapSnapPoint(current);
-          if (key) {
-            const mappedKey = `x${key.x}y${key.y}`;
-            acc[mappedKey] = current;
-          }
-          return acc;
-        },
-        {}
-      );
+      const mapped = toValue(snapPoints).reduce((acc, current) => {
+        const key = mapSnapPoint(current);
+        if (key) {
+          const mappedKey = `x${key.x}y${key.y}`;
+          acc[mappedKey] = current;
+        }
+        return acc;
+      }, {});
       return mapped;
     }
   );
@@ -51,7 +48,7 @@ export function useDraggableSnap(args) {
           x: mappedOffset.x,
           y: mappedOffset.y
         };
-      case "top-center":
+      case "top":
         return {
           x: wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2,
           y: mappedOffset.y
@@ -61,7 +58,7 @@ export function useDraggableSnap(args) {
           x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
           y: mappedOffset.y
         };
-      case "center-left":
+      case "left":
         return {
           x: mappedOffset.x,
           y: wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2
@@ -71,7 +68,7 @@ export function useDraggableSnap(args) {
           x: wrapperRect.value.width / 2 - elRect.value.width / 2 + mappedOffset.x,
           y: wrapperRect.value.height / 2 - elRect.value.height / 2 + mappedOffset.y
         };
-      case "center-right":
+      case "right":
         return {
           x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
           y: wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2
@@ -81,7 +78,7 @@ export function useDraggableSnap(args) {
           x: mappedOffset.x,
           y: wrapperRect.value.height + mappedOffset.y - elRect.value.height
         };
-      case "bottom-center":
+      case "bottom":
         return {
           x: wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2,
           y: wrapperRect.value.height - mappedOffset.y - elRect.value.height

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

@@ -1,5 +1,5 @@
 import type { RequireAll } from '@maas/vue-equipment/utils';
-type Position = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+type Position = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
 export type Coordinates = {
     x: number;
     y: number;

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

@@ -2,13 +2,18 @@
 import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, withModifiers as _withModifiers, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock, resolveDynamicComponent as _resolveDynamicComponent, normalizeStyle as _normalizeStyle, createVNode as _createVNode, mergeProps as _mergeProps, Teleport as _Teleport } from "vue";
 const _hoisted_1 = ["data-id", "data-dragging", "data-wheeling", "data-disabled", "data-position"];
-const _hoisted_2 = { class: "magic-drawer__content" };
-const _hoisted_3 = {
+const _hoisted_2 = {
+  ref: "wrapper",
+  class: "magic-drawer__wrapper"
+};
+const _hoisted_3 = { class: "magic-drawer__content" };
+const _hoisted_4 = {
   key: 0,
   class: "magic-drawer__overlay"
 };
 import {
-  ref,
+  useTemplateRef,
+  shallowRef,
   watch,
   computed,
   nextTick,
@@ -56,9 +61,9 @@ export default /* @__PURE__ */ _defineComponent({
       }
     });
     const mappedOptions = customDefu(__props.options, defaultOptions);
-    const elRef = ref(void 0);
-    const drawerRef = ref(void 0);
-    const wrapperRef = ref(void 0);
+    const elRef = useTemplateRef("el");
+    const drawerRef = useTemplateRef("drawer");
+    const wrapperRef = useTemplateRef("wrapper");
     const {
       trapFocus,
       releaseFocus,
@@ -71,7 +76,7 @@ export default /* @__PURE__ */ _defineComponent({
       focusTrap: mappedOptions.focusTrap
     });
     const { isActive, open, close } = useMagicDrawer(__props.id);
-    const overshoot = ref(0);
+    const overshoot = shallowRef(0);
     const {
       position,
       snapPoints,
@@ -109,9 +114,9 @@ export default /* @__PURE__ */ _defineComponent({
     const { initializeState, deleteState } = useDrawerState(__props.id);
     const state = initializeState();
     const { dragging, wheeling } = toRefs(state);
-    const innerActive = ref(false);
-    const wrapperActive = ref(false);
-    const wasActive = ref(false);
+    const innerActive = shallowRef(false);
+    const wrapperActive = shallowRef(false);
+    const wasActive = shallowRef(false);
     const {
       onBeforeEnter,
       onEnter,
@@ -250,8 +255,7 @@ export default /* @__PURE__ */ _defineComponent({
         disabled: _unref(mappedOptions).teleport?.disabled
       }, [
         _createElementVNode("div", _mergeProps({
-          ref_key: "drawerRef",
-          ref: drawerRef,
+          ref: "drawer",
           class: "magic-drawer",
           "data-id": toValue(_ctx.id),
           "data-dragging": _unref(dragging),
@@ -285,11 +289,7 @@ export default /* @__PURE__ */ _defineComponent({
           }, 8, ["name"])) : _createCommentVNode("v-if", true),
           _createElementVNode(
             "div",
-            {
-              ref_key: "wrapperRef",
-              ref: wrapperRef,
-              class: "magic-drawer__wrapper"
-            },
+            _hoisted_2,
             [
               _createVNode(_Transition, {
                 name: contentTransition.value,
@@ -304,11 +304,10 @@ export default /* @__PURE__ */ _defineComponent({
                 default: _withCtx(() => [
                   _withDirectives(_createElementVNode(
                     "div",
-                    _hoisted_2,
+                    _hoisted_3,
                     [
                       (_openBlock(), _createBlock(_resolveDynamicComponent(_unref(mappedOptions).tag), {
-                        ref_key: "elRef",
-                        ref: elRef,
+                        ref: "el",
                         class: "magic-drawer__drag",
                         style: _normalizeStyle(_unref(style)),
                         onPointerdown: guardedPointerdown,
@@ -316,7 +315,7 @@ export default /* @__PURE__ */ _defineComponent({
                       }, {
                         default: _withCtx(() => [
                           _renderSlot(_ctx.$slots, "default"),
-                          _unref(hasDragged) ? (_openBlock(), _createElementBlock("div", _hoisted_3)) : _createCommentVNode("v-if", true)
+                          _unref(hasDragged) ? (_openBlock(), _createElementBlock("div", _hoisted_4)) : _createCommentVNode("v-if", true)
                         ]),
                         _: 3
                         /* FORWARDED */

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

@@ -0,0 +1,188 @@
+import { toValue, 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';
+interface MagicDrawerProps {
+    id: MaybeRef<string>;
+    options?: MagicDrawerOptions;
+}
+declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions> & Omit<import("../types/index").DrawerDefaultOptions, keyof MagicDrawerOptions> & {
+    threshold: ({
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+    } & import("../../../../utils").RequireAll<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+    }>) | (Omit<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+    }, "lock" | "distance" | "momentum"> & Omit<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+    } & import("../../../../utils").RequireAll<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+    }>, "lock" | "distance" | "momentum"> & {
+        lock: number;
+        distance: number;
+        momentum: number;
+    });
+    transition: {
+        content?: string;
+        backdrop?: string;
+    };
+    disabled: boolean;
+    animation: ({
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    } & import("../../../../utils").RequireAll<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }>) | (Omit<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }, "snap"> & Omit<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    } & import("../../../../utils").RequireAll<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }>, "snap"> & {
+        snap: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    });
+    backdrop: boolean;
+    tag: "dialog" | "div";
+    focusTrap: boolean | import("focus-trap").Options;
+    scrollLock: {
+        padding: boolean;
+    } | ((boolean | {
+        padding: boolean;
+    }) & import("../../../../utils").RequireAll<boolean | {
+        padding: boolean;
+    } | undefined>) | (Omit<{
+        padding: boolean;
+    }, "padding"> & Omit<false & import("../../../../utils").RequireAll<{
+        padding: boolean;
+    }>, "padding"> & {
+        padding: boolean;
+    }) | (Omit<{
+        padding: boolean;
+    }, "padding"> & Omit<true & import("../../../../utils").RequireAll<{
+        padding: boolean;
+    }>, "padding"> & {
+        padding: boolean;
+    }) | (Omit<{
+        padding: boolean;
+    }, "padding"> & Omit<{
+        padding: boolean;
+    } & false, "padding"> & {
+        padding: boolean;
+    }) | (Omit<{
+        padding: boolean;
+    }, "padding"> & Omit<{
+        padding: boolean;
+    } & true, "padding"> & {
+        padding: boolean;
+    });
+    teleport: {
+        target?: string;
+        disabled?: boolean;
+    };
+    keyListener: ({
+        close?: string[] | false;
+    } & import("../../../../utils").RequireAll<{
+        close?: string[] | false;
+    }>) | (Omit<{
+        close?: string[] | false;
+    }, "close"> & Omit<{
+        close?: string[] | false;
+    } & import("../../../../utils").RequireAll<{
+        close?: string[] | false;
+    }>, "close"> & {
+        close: (false | string[] | undefined) & (false | string[]);
+    });
+    position: "left" | "top" | "right" | "bottom";
+    snapPoints: import("../types/index").DrawerSnapPoint[];
+    initial: {
+        open?: boolean;
+        transition?: boolean;
+        snapPoint?: import("../types/index").DrawerSnapPoint;
+    };
+    enableMousewheel: boolean;
+    preventZoom: boolean;
+    preventDragClose: boolean;
+};
+declare const disabled: import("vue").ComputedRef<boolean>;
+declare const style: import("vue").ComputedRef<string>, hasDragged: import("vue").ComputedRef<boolean>;
+declare const dragging: import("vue").Ref<boolean, boolean>, wheeling: import("vue").Ref<boolean, boolean>;
+declare const innerActive: import("vue").ShallowRef<boolean, boolean>;
+declare const wrapperActive: import("vue").ShallowRef<boolean, boolean>;
+declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => Promise<void>, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
+declare const backdropTransition: import("vue").ComputedRef<string | undefined>;
+declare const contentTransition: import("vue").ComputedRef<string | undefined>;
+declare function guardedPointerdown(event: PointerEvent): void;
+declare function guardedClick(event: PointerEvent): void;
+declare function guardedClose(): void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_9: {}, __VLS_35: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    backdrop?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_35) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicDrawerProps, {
+    toValue: typeof toValue;
+    mappedOptions: typeof mappedOptions;
+    disabled: typeof disabled;
+    style: typeof style;
+    hasDragged: typeof hasDragged;
+    dragging: typeof dragging;
+    wheeling: typeof wheeling;
+    innerActive: typeof innerActive;
+    wrapperActive: typeof wrapperActive;
+    onBeforeEnter: typeof onBeforeEnter;
+    onEnter: typeof onEnter;
+    onAfterEnter: typeof onAfterEnter;
+    onBeforeLeave: typeof onBeforeLeave;
+    onLeave: typeof onLeave;
+    onAfterLeave: typeof onAfterLeave;
+    backdropTransition: typeof backdropTransition;
+    contentTransition: typeof contentTransition;
+    guardedPointerdown: typeof guardedPointerdown;
+    guardedClick: typeof guardedClick;
+    guardedClose: typeof guardedClose;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
@@ -8,7 +8,7 @@ const defaultOptions = {
   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);

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

@@ -383,9 +383,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;
       }
     }

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>;
 }