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

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 { 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';
@@ -12,29 +12,176 @@ 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(): {
-    attrs: Partial<{}>;
-    slots: {
-        backdrop?(_: {}): any;
-        default?(_: {}): any;
+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;
     };
-    refs: {
-        drawerRef: HTMLDivElement;
-        wrapperRef: HTMLDivElement;
-        elRef: unknown;
+    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: "div" | "dialog";
+    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;
     };
-    rootEl: any;
+    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: "right" | "left" | "top" | "bottom";
+    snapPoints: import("../types/index").DrawerSnapPoint[];
+    initial: {
+        open?: boolean;
+        transition?: boolean;
+        snapPoint?: import("../types/index").DrawerSnapPoint;
+    };
+    enableMousewheel: boolean;
+    preventZoom: boolean;
+    preventDragClose: boolean;
 };
-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 _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+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_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<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/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);
@@ -36,24 +40,40 @@ export function useDrawerDOM(args) {
   function addScrollLockPadding() {
     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

@@ -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']>;
+    elRef: Ref<HTMLElement | null>;
+    wrapperRef: Ref<HTMLDivElement | null>;
+    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 }) {
@@ -373,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,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>;
+    elRef: Ref<HTMLElement | null>;
     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): {