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

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)`
   );
@@ -89,8 +89,10 @@ export function useDraggableDrag(args) {
     wrapperRect,
     animation,
     snapPoints,
+    draggedX,
     draggedY,
-    draggedX
+    lastDraggedX,
+    lastDraggedY
   });
   const emitter = useMagicEmitter();
   const {
@@ -329,10 +331,10 @@ export function useDraggableDrag(args) {
   function onPointerdown(e) {
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      lockScroll();
       if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
         addScrollLockPadding();
       }
+      lockScroll();
     }
     if (dragging.value) {
       return;
@@ -398,6 +400,7 @@ export function useDraggableDrag(args) {
       if (activeSnapPoint.value) {
         await snapTo({ snapPoint: activeSnapPoint.value, interpolate: false });
         snapPointsMap.trigger();
+        mappedSnapPoints.trigger();
       }
     }, 100)();
   });
@@ -407,6 +410,7 @@ export function useDraggableDrag(args) {
       if (activeSnapPoint.value) {
         await snapTo({ snapPoint: activeSnapPoint.value, interpolate: false });
         snapPointsMap.trigger();
+        mappedSnapPoints.trigger();
       }
     }, 100)();
   });

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

@@ -1,7 +1,11 @@
-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);
+import {
+  matchClass,
+  scrollbarWidth,
+  scrollbarGutterSupport
+} from "@maas/vue-equipment/utils";
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useDraggableScrollLock() {
   const positionFixedElements = ref([]);
   function lockScroll() {
@@ -13,24 +17,40 @@ export function useDraggableScrollLock() {
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-draggable/);
-    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 {
     lockScroll,

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

@@ -4,8 +4,10 @@ type UseDraggableSnapArgs = {
     id: MaybeRef<string>;
     elRect: Ref<DOMRect | undefined>;
     wrapperRect: Ref<DOMRect | undefined>;
-    draggedY: Ref<number>;
     draggedX: Ref<number>;
+    draggedY: Ref<number>;
+    lastDraggedX: Ref<number>;
+    lastDraggedY: Ref<number>;
     animation: MaybeRef<DraggableDefaultOptions['animation']>;
     snapPoints: MaybeRef<DraggableDefaultOptions['snapPoints']>;
 };
@@ -22,13 +24,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" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | ["center" | "right" | "left" | "top" | "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" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | ["center" | "right" | "left" | "top" | "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" | "right" | "left" | "top" | "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

@@ -4,7 +4,19 @@ import { interpolate } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 import { defu } from "defu";
 export function useDraggableSnap(args) {
-  const { id, draggedY, draggedX, elRect, wrapperRect, animation, snapPoints } = args;
+  const {
+    id,
+    draggedX,
+    draggedY,
+    lastDraggedX,
+    lastDraggedY,
+    elRect,
+    wrapperRect,
+    animation,
+    snapPoints
+  } = args;
+  const interpolationIdX = ref(void 0);
+  const interpolationIdY = ref(void 0);
   const activeSnapPoint = ref(void 0);
   const mappedSnapPoints = computedWithControl(
     () => toValue(wrapperRect),
@@ -18,17 +30,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 +60,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 +70,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 +80,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 +90,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
@@ -93,6 +102,14 @@ export function useDraggableSnap(args) {
         };
     }
   }
+  function cancelInterpolation() {
+    if (interpolationIdY.value) {
+      cancelAnimationFrame(interpolationIdY.value);
+    }
+    if (interpolationIdX.value) {
+      cancelAnimationFrame(interpolationIdX.value);
+    }
+  }
   function interpolateDragged(args2) {
     const {
       x,
@@ -102,19 +119,27 @@ export function useDraggableSnap(args) {
     } = args2;
     const snapPoint = snapPointsMap.value[`x${x}y${y}`];
     emitter.emit("beforeSnap", { id: toValue(id), snapPoint });
-    interpolate({
+    cancelInterpolation();
+    interpolationIdY.value = interpolate({
       from: draggedY.value,
       to: y,
       duration,
       easing,
-      callback: (value) => {
+      callback(value) {
         draggedY.value = value;
         if (y > x && draggedY.value === y) {
           emitter.emit("afterSnap", { id: toValue(id), snapPoint });
         }
+        if (draggedY.value === y) {
+          lastDraggedX.value = draggedX.value;
+          lastDraggedY.value = draggedY.value;
+        }
+      },
+      interpolationIdCallback(id2) {
+        interpolationIdY.value = id2;
       }
     });
-    interpolate({
+    interpolationIdX.value = interpolate({
       from: draggedX.value,
       to: x,
       duration,
@@ -124,6 +149,13 @@ export function useDraggableSnap(args) {
         if (x >= y && draggedX.value === x) {
           emitter.emit("afterSnap", { id: toValue(id), snapPoint });
         }
+        if (draggedX.value === x) {
+          lastDraggedX.value = draggedX.value;
+          lastDraggedY.value = draggedY.value;
+        }
+      },
+      interpolationIdCallback(id2) {
+        interpolationIdX.value = id2;
       }
     });
   }
@@ -139,8 +171,11 @@ export function useDraggableSnap(args) {
           duration
         });
       } else {
+        cancelInterpolation();
         draggedX.value = mappedSnapPoint.x;
         draggedY.value = mappedSnapPoint.y;
+        lastDraggedX.value = draggedX.value;
+        lastDraggedY.value = draggedY.value;
       }
     }
     activeSnapPoint.value = snapPoint;

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

@@ -1,5 +1,5 @@
 import { ref, reactive, toValue } from "vue";
-const drawerStateStore = ref([]);
+const draggableStateStore = ref([]);
 export function useDraggableState(id) {
   function createState(id2) {
     const state = {
@@ -22,18 +22,18 @@ export function useDraggableState(id) {
   }
   function addState(id2) {
     const state = createState(id2);
-    drawerStateStore.value = [...drawerStateStore.value, state];
+    draggableStateStore.value = [...draggableStateStore.value, state];
     return state;
   }
   function initializeState() {
-    let state = drawerStateStore.value.find((entry) => {
+    let state = draggableStateStore.value.find((entry) => {
       return entry.id === id;
     });
     if (!state) state = addState(toValue(id));
     return state;
   }
   function deleteState() {
-    drawerStateStore.value = drawerStateStore.value.filter(
+    draggableStateStore.value = draggableStateStore.value.filter(
       (x) => x.id !== id
     );
   }

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/MagicDraggable/src/utils/defaultOptions.mjs

@@ -16,7 +16,7 @@ const defaultOptions = {
     }
   },
   initial: {
-    snapPoint: "center"
+    snapPoint: "top-left"
   },
   disabled: false
 };

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

@@ -1,14 +1,19 @@
 <script>
 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 = ["id", "data-dragging", "data-wheeling", "data-disabled", "data-position"];
-const _hoisted_2 = { class: "magic-drawer__content" };
-const _hoisted_3 = {
+const _hoisted_1 = ["data-id", "data-dragging", "data-wheeling", "data-disabled", "data-position"];
+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,10 +255,9 @@ export default /* @__PURE__ */ _defineComponent({
         disabled: _unref(mappedOptions).teleport?.disabled
       }, [
         _createElementVNode("div", _mergeProps({
-          id: toValue(_ctx.id),
-          ref_key: "drawerRef",
-          ref: drawerRef,
+          ref: "drawer",
           class: "magic-drawer",
+          "data-id": toValue(_ctx.id),
           "data-dragging": _unref(dragging),
           "data-wheeling": _unref(wheeling),
           "data-disabled": disabled.value,
@@ -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 */
@@ -345,7 +344,9 @@ export default /* @__PURE__ */ _defineComponent({
 <style>
 :root {
   --magic-drawer-height: 75svh;
+  --magic-drawer-max-height: none;
   --magic-drawer-width: 100%;
+  --magic-drawer-max-width: none;
   --magic-drawer-justify-content: center;
   --magic-drawer-align-items: flex-end;
   --magic-drawer-enter-animation: slide-btt-in 300ms ease;
@@ -433,18 +434,26 @@ export default /* @__PURE__ */ _defineComponent({
 
 .magic-drawer__wrapper {
   height: var(--magic-drawer-height);
+  max-height: calc(
+    var(--magic-drawer-max-height) + var(--magic-drawer-drag-overshoot-y)
+  );
   width: var(--magic-drawer-width);
+  max-width: calc(
+    var(--magic-drawer-max-width) + var(--magic-drawer-drag-overshoot-x)
+  );
   transform: translate(
     var(--magic-drawer-drag-overshoot-x),
     var(--magic-drawer-drag-overshoot-y)
   );
   pointer-events: none;
+  display: flex;
+  min-height: 0;
 }
 
 .magic-drawer__content {
   width: 100%;
-  height: 100%;
   max-height: 100%;
+  height: var(--magic-drawer-content-height, 100%);
   position: relative;
 }