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

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

@@ -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']>;
+    elRef: Ref<HTMLElement | null>;
+    drawerRef: Ref<HTMLDivElement | null>;
+    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 = {
@@ -28,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,4 +1,9 @@
-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";
@@ -41,22 +46,22 @@ 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(() => {
-    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 +102,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 +157,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 +172,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 +190,7 @@ export function useDrawerSnap(args) {
         snappedX.value = closestX;
         activeSnapPoint.value = toValue(snapPoint);
         break;
+      }
     }
   }
   function interpolateDragged(args2) {
@@ -233,8 +252,8 @@ export function useDrawerSnap(args) {
             numbers: mappedSnapPoints.value,
             direction
           });
-          break;
         }
+        break;
       case "right":
       case "left":
         if (!!toValue(draggedX2) || toValue(draggedX2) === 0) {
@@ -243,8 +262,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']>;
+    elRef: Ref<HTMLElement | null>;
+    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;

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

@@ -1,10 +1,11 @@
-import { type Options } from 'focus-trap';
-export type DrawerSnapPoint = number | `${string}px`;
+import { type Options as FocusTrapOptions } from 'focus-trap';
+import type { RequireAll } from '@maas/vue-equipment/utils';
+export type DrawerSnapPoint = number | `${number}px`;
 export interface MagicDrawerOptions {
     position?: 'top' | 'right' | 'bottom' | 'left';
     backdrop?: boolean;
     tag?: 'dialog' | 'div';
-    focusTrap?: boolean | Options;
+    focusTrap?: boolean | FocusTrapOptions;
     scrollLock?: boolean | {
         padding: boolean;
     };
@@ -41,6 +42,12 @@ export interface MagicDrawerOptions {
     preventDragClose?: boolean;
     disabled?: boolean;
 }
+export type DrawerDefaultOptions = RequireAll<MagicDrawerOptions> & {
+    scrollLock: RequireAll<MagicDrawerOptions['scrollLock']>;
+    threshold: RequireAll<MagicDrawerOptions['threshold']>;
+    animation: RequireAll<MagicDrawerOptions['animation']>;
+    keyListener: RequireAll<MagicDrawerOptions['keyListener']>;
+};
 export interface DrawerState {
     id: string;
     active: boolean;

package/dist/plugins/MagicDrawer/src/utils/defaultOptions.d.ts

@@ -1,11 +1,3 @@
-import type { MagicDrawerOptions } from '../types/index.js';
-import type { RequireAll } from '@maas/vue-equipment/utils';
-type DefaultOptions = RequireAll<MagicDrawerOptions> & {
-    scrollLock: RequireAll<MagicDrawerOptions['scrollLock']>;
-    threshold: RequireAll<MagicDrawerOptions['threshold']>;
-    animation: RequireAll<MagicDrawerOptions['animation']>;
-    initial: RequireAll<MagicDrawerOptions['initial']>;
-    keyListener: RequireAll<MagicDrawerOptions['keyListener']>;
-};
-declare const defaultOptions: DefaultOptions;
-export { defaultOptions, type DefaultOptions };
+import type { DrawerDefaultOptions } from '../types/index.js';
+declare const defaultOptions: DrawerDefaultOptions;
+export { defaultOptions };

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

@@ -28,9 +28,7 @@ const defaultOptions = {
     }
   },
   initial: {
-    open: false,
-    transition: false,
-    snapPoint: 1
+    open: false
   },
   keyListener: {
     close: ["Escape"]