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

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

@@ -1,103 +1,95 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, normalizeStyle as _normalizeStyle, withCtx as _withCtx, createBlock as _createBlock, createElementVNode as _createElementVNode, mergeProps as _mergeProps } from "vue";
-const _hoisted_1 = ["id"];
-const _hoisted_2 = {
-  key: 0,
-  class: "magic-draggable__overlay"
-};
-import { ref, computed, toValue, toRefs } from "vue";
-import { defu } from "defu";
+<template>
+  <div
+    :data-id="mappedId"
+    :data-dragging="dragging"
+    :data-disabled="disabled"
+    :data-active-snap-point="activeSnapPoint"
+    class="magic-draggable"
+    v-bind="$attrs"
+  >
+    <div ref="wrapper" class="magic-draggable__wrapper">
+      <component
+        :is="mappedOptions.tag"
+        ref="el"
+        class="magic-draggable__drag"
+        :style="style"
+        @pointerdown="guardedPointerdown"
+        @click="guardedClick"
+      >
+        <slot />
+        <div v-if="hasDragged" class="magic-draggable__overlay" />
+      </component>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useTemplateRef, computed, toValue, toRefs } from "vue";
+import { createDefu } from "defu";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useDraggableDrag } from "../composables/private/useDraggableDrag";
 import { useDraggableState } from "../composables/private/useDraggableState";
 import { defaultOptions } from "../utils/defaultOptions";
-export default /* @__PURE__ */ _defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "MagicDraggable",
-  props: {
-    id: { type: null, required: true },
-    options: { type: Object, required: false, default: () => ({}) }
-  },
-  setup(__props) {
-    const mappedOptions = defu(__props.options, defaultOptions);
-    const elRef = ref(void 0);
-    const wrapperRef = ref(void 0);
-    const { initializeState } = useDraggableState(__props.id);
-    const state = initializeState();
-    const { dragging } = toRefs(state);
-    const disabled = computed(() => {
-      if (__props.options.disabled === void 0) {
-        return defaultOptions.disabled;
-      } else {
-        return __props.options.disabled;
-      }
-    });
-    const { snapPoints, animation, initial, threshold, scrollLock } = mappedOptions;
-    const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
-      id: __props.id,
-      elRef,
-      wrapperRef,
-      threshold,
-      snapPoints,
-      animation,
-      initial,
-      scrollLock
-    });
-    function guardedPointerdown(event) {
-      if (!disabled.value) {
-        onPointerdown(event);
-      }
-    }
-    function guardedClick(event) {
-      if (!disabled.value) {
-        onClick(event);
-      }
-    }
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", _mergeProps({
-        id: toValue(_ctx.id),
-        ref: "drawerRef",
-        class: [
-          "magic-draggable",
-          {
-            "-dragging": _unref(dragging),
-            "-disabled": disabled.value
-          }
-        ]
-      }, _ctx.$attrs), [
-        _createElementVNode(
-          "div",
-          {
-            ref_key: "wrapperRef",
-            ref: wrapperRef,
-            class: "magic-draggable__wrapper"
-          },
-          [
-            (_openBlock(), _createBlock(_resolveDynamicComponent(_unref(mappedOptions).tag), {
-              ref_key: "elRef",
-              ref: elRef,
-              class: "magic-draggable__drag",
-              style: _normalizeStyle(_unref(style)),
-              onPointerdown: guardedPointerdown,
-              onClick: guardedClick
-            }, {
-              default: _withCtx(() => [
-                _renderSlot(_ctx.$slots, "default"),
-                _unref(hasDragged) ? (_openBlock(), _createElementBlock("div", _hoisted_2)) : _createCommentVNode("v-if", true)
-              ]),
-              _: 3
-              /* FORWARDED */
-            }, 40, ["style"]))
-          ],
-          512
-          /* NEED_PATCH */
-        )
-      ], 16, _hoisted_1);
-    };
+defineOptions({
+  inheritAttrs: false
+});
+const { id, options = {} } = defineProps({
+  id: { type: null, required: true },
+  options: { type: Object, required: false }
+});
+const magicError = useMagicError({
+  prefix: "MagicDraggable",
+  source: "MagicDraggable"
+});
+const customDefu = createDefu((obj, key, value) => {
+  if (key === "snapPoints") {
+    obj[key] = value;
+    return true;
+  }
+});
+const mappedOptions = customDefu(options, defaultOptions);
+const mappedId = toValue(id);
+if (!mappedOptions.snapPoints.length) {
+  magicError.throwError({
+    message: "MagicDraggable must have at least one snap point set",
+    errorCode: "missing_snap_point"
+  });
+}
+const elRef = useTemplateRef("el");
+const wrapperRef = useTemplateRef("wrapper");
+const { initializeState } = useDraggableState(id);
+const state = initializeState();
+const { dragging, activeSnapPoint } = toRefs(state);
+const disabled = computed(() => {
+  if (options.disabled === void 0) {
+    return defaultOptions.disabled;
+  } else {
+    return options.disabled;
   }
 });
+const { snapPoints, animation, initial, threshold, scrollLock } = mappedOptions;
+const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
+  id,
+  elRef,
+  wrapperRef,
+  threshold,
+  snapPoints,
+  animation,
+  initial,
+  scrollLock
+});
+function guardedPointerdown(event) {
+  if (!disabled.value) {
+    onPointerdown(event);
+  }
+}
+function guardedClick(event) {
+  if (!disabled.value) {
+    onClick(event);
+  }
+}
 </script>
 
 <style>
@@ -108,13 +100,12 @@ export default /* @__PURE__ */ _defineComponent({
   z-index: var(--magic-draggable-z-index, 999);
   inset: var(--magic-draggable-inset, 0);
   pointer-events: none;
-  background: transparent;
   color: inherit;
   padding: 0;
   border: none;
 }
 
-.magic-draggable.-disabled {
+.magic-draggable[data-disabled='true'] {
   pointer-events: none;
 }
 
@@ -125,7 +116,7 @@ export default /* @__PURE__ */ _defineComponent({
 }
 
 .magic-draggable__drag {
-  cursor: grab;
+  cursor: var(--magic-draggable-cursor, grab);
   user-select: none;
   pointer-events: auto;
   position: relative;
@@ -136,12 +127,12 @@ export default /* @__PURE__ */ _defineComponent({
   touch-action: none;
 }
 
-.magic-draggable.-dragging .magic-draggable__drag {
-  cursor: grabbing;
+.magic-draggable[data-dragging='true'] .magic-draggable__drag {
+  cursor: var(--magic-draggable-cursor-dragging, grabbing);
   user-select: none;
 }
 
-.magic-draggable.-disabled .magic-draggable__drag {
+.magic-draggable[data-disabled='true'] .magic-draggable__drag {
   cursor: default;
 }
 

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

@@ -4,32 +4,15 @@ interface MagicDraggableProps {
     id: MaybeRef<string>;
     options?: MagicDraggableOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        drawerRef: HTMLDivElement;
-        wrapperRef: HTMLDivElement;
-        elRef: unknown;
-    };
-    rootEl: any;
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicDraggableProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicDraggableProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_base: import("vue").DefineComponent<MagicDraggableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDraggableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/plugins/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,
@@ -23,7 +23,8 @@ import {
 } from "@maas/vue-equipment/utils";
 import {
   useMagicEmitter
-} from "@maas/vue-equipment/plugins";
+} from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useDraggableSnap } from "./useDraggableSnap.mjs";
 import { useDraggableState } from "./useDraggableState.mjs";
 import { useDraggableScrollLock } from "./useDraggableScrollLock.mjs";
@@ -38,6 +39,10 @@ export function useDraggableDrag(args) {
     animation,
     scrollLock
   } = args;
+  const { logWarning } = useMagicError({
+    prefix: "MagicDraggable",
+    source: "useDraggableDrag"
+  });
   const { initializeState } = useDraggableState(toValue(id));
   const state = initializeState();
   const {
@@ -53,13 +58,14 @@ export function useDraggableDrag(args) {
     draggedX,
     draggedY,
     elRect,
-    wrapperRect
+    wrapperRect,
+    activeSnapPoint
   } = toRefs(state);
   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)`
   );
@@ -78,19 +84,15 @@ export function useDraggableDrag(args) {
   });
   const {
     snapTo,
-    activeSnapPoint,
+    mappedActiveSnapPoint,
     mapSnapPoint,
     mappedSnapPoints,
     snapPointsMap,
     interpolateDragged
   } = useDraggableSnap({
     id,
-    elRect,
-    wrapperRect,
     animation,
-    snapPoints,
-    draggedY,
-    draggedX
+    snapPoints
   });
   const emitter = useMagicEmitter();
   const {
@@ -99,10 +101,9 @@ export function useDraggableDrag(args) {
     addScrollLockPadding,
     removeScrollLockPadding
   } = useDraggableScrollLock();
-  async function getSizes() {
+  function getSizes() {
     elRect.value = unrefElement(elRef)?.getBoundingClientRect();
     wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
-    await nextTick();
   }
   function setDragged({ x, y }) {
     draggedX.value = x - originX.value;
@@ -126,33 +127,18 @@ export function useDraggableDrag(args) {
       });
     }
   }
-  function detectCollision() {
+  async function checkSizes() {
+    getSizes();
     const childRect = toValue(elRect);
     const parentRect = toValue(wrapperRect);
     if (!childRect || !parentRect) {
+      logWarning("Could not calculate sizing");
       return;
     }
     if (childRect.width > parentRect.width || childRect.height > parentRect.height) {
-      console.warn("MagicDraggable is too small for its content");
+      logWarning("Element is too small for its content");
       return;
     }
-    interpolateTo.value = { x: draggedX.value, y: draggedY.value };
-    if (childRect.top < parentRect.top) {
-      interpolateTo.value = { x: interpolateTo.value?.x, y: 0 };
-    } else if (childRect.bottom > parentRect.bottom) {
-      interpolateTo.value = {
-        x: interpolateTo.value?.x,
-        y: parentRect.height - childRect.height
-      };
-    }
-    if (childRect.left < parentRect.left) {
-      interpolateTo.value = { x: 0, y: interpolateTo.value?.y };
-    } else if (childRect.right > parentRect.right) {
-      interpolateTo.value = {
-        x: parentRect.width - childRect.width,
-        y: interpolateTo.value?.y
-      };
-    }
   }
   function vectorBetweenCoordinates(a, b) {
     const dx = b.x - a.x;
@@ -253,9 +239,18 @@ export function useDraggableDrag(args) {
     const draggedCoords = { x: draggedX.value, y: draggedY.value };
     const closestSnapPoint = mappedSnapPoints.value.reduce((a, b) => {
       return calculateDistance(a, draggedCoords) < calculateDistance(b, draggedCoords) ? a : b;
-    });
+    }, mappedSnapPoints.value[0]);
     return closestSnapPoint;
   }
+  function onIdle() {
+    interpolateTo.value = findClosestSnapPoint();
+    if (distanceThresholdReached.value && momentumThresholdReached.value) {
+      intermediateDraggedX.value = draggedX.value;
+      intermediateDraggedY.value = draggedY.value;
+      distanceThresholdReached.value = false;
+      momentumThresholdReached.value = false;
+    }
+  }
   function onPointerup(e) {
     if (!momentumThresholdReached.value && distanceThresholdReached.value) {
       interpolateTo.value = findClosestSnapPoint();
@@ -263,9 +258,7 @@ export function useDraggableDrag(args) {
     const { x, y } = interpolateTo.value || {};
     if (x !== void 0 && y !== void 0) {
       interpolateDragged({ x, y });
-    }
-    if (interpolateTo.value) {
-      const key = `x${interpolateTo.value.x}y${interpolateTo.value.y}`;
+      const key = `x${x}y${y}`;
       activeSnapPoint.value = snapPointsMap.value[key];
     }
     if (intermediateDraggedX.value === draggedX.value && intermediateDraggedY.value === draggedY.value) {
@@ -291,13 +284,11 @@ export function useDraggableDrag(args) {
     }
     guardedReleasePointerCapture({ event: e, element: elRef.value });
   }
-  function onPointermove(e) {
+  async function onPointermove(e) {
     if (!e.isPrimary) {
       return;
     }
     setDragged({ x: e.screenX, y: e.screenY });
-    getSizes();
-    detectCollision();
     if (!distanceThresholdReached.value) {
       checkDistance();
     }
@@ -305,50 +296,44 @@ export function useDraggableDrag(args) {
       checkMomentum();
     }
     if (!distanceThresholdReached.value && !momentumThresholdReached.value) {
-      interpolateTo.value = { x: lastDraggedX.value, y: lastDraggedY.value };
+      const { x, y } = mappedActiveSnapPoint.value ?? {};
+      if (x !== void 0 && y !== void 0) {
+        interpolateTo.value = { x, y };
+      }
       return;
     }
-    if (toValue(snapPoints).length) {
-      findSnapPointByVector();
-    }
+    findSnapPointByVector();
     emitter.emit("drag", {
       id: toValue(id),
       x: draggedX.value,
       y: draggedY.value
     });
   }
-  function onIdle() {
-    interpolateTo.value = findClosestSnapPoint();
-    if (distanceThresholdReached.value && momentumThresholdReached.value) {
-      intermediateDraggedX.value = draggedX.value;
-      intermediateDraggedY.value = draggedY.value;
-      distanceThresholdReached.value = false;
-      momentumThresholdReached.value = false;
-    }
-  }
   function onPointerdown(e) {
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      lockScroll();
       if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
         addScrollLockPadding();
       }
+      lockScroll();
     }
     if (dragging.value) {
       return;
-    } else {
-      guardedSetPointerCapture({ event: e, element: elRef.value });
-      dragging.value = true;
-      emitter.emit("beforeDrag", {
-        id: toValue(id),
-        x: draggedX.value,
-        y: draggedY.value
-      });
     }
+    checkSizes();
+    guardedSetPointerCapture({ event: e, element: elRef.value });
+    dragging.value = true;
+    emitter.emit("beforeDrag", {
+      id: toValue(id),
+      x: draggedX.value,
+      y: draggedY.value
+    });
     intermediateDraggedX.value = draggedX.value;
     intermediateDraggedY.value = draggedY.value;
     lastDraggedX.value = draggedX.value;
     lastDraggedY.value = draggedY.value;
+    originX.value = e.screenX - draggedX.value;
+    originY.value = e.screenY - draggedY.value;
     cancelPointerup = useEventListener(document, "pointerup", onPointerup);
     cancelPointermove = useEventListener(
       document,
@@ -357,8 +342,6 @@ export function useDraggableDrag(args) {
       { passive: false }
     );
     cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
-    originX.value = e.screenX - draggedX.value;
-    originY.value = e.screenY - draggedY.value;
     dragStart.value = /* @__PURE__ */ new Date();
     onPointermove(e);
   }
@@ -372,7 +355,7 @@ export function useDraggableDrag(args) {
     if (elRect.value && wrapperRect.value) {
       emitter.on("snapTo", snapToCallback);
       if (elRect.value.width > wrapperRect.value.width || elRect.value.height > wrapperRect.value.height) {
-        console.warn("MagicDraggable is too small for its content");
+        logWarning("is too small for its content");
         return;
       }
     }
@@ -394,19 +377,21 @@ export function useDraggableDrag(args) {
   });
   useResizeObserver(wrapperRef, async () => {
     useThrottleFn(async () => {
-      await getSizes();
+      getSizes();
       if (activeSnapPoint.value) {
         await snapTo({ snapPoint: activeSnapPoint.value, interpolate: false });
         snapPointsMap.trigger();
+        mappedSnapPoints.trigger();
       }
     }, 100)();
   });
   useResizeObserver(elRef, async () => {
     useThrottleFn(async () => {
-      await getSizes();
+      getSizes();
       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() {
@@ -11,26 +15,44 @@ export function useDraggableScrollLock() {
     scrollLock.value = false;
   }
   function addScrollLockPadding() {
-    if (typeof window === "undefined") return;
+    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

@@ -1,11 +1,7 @@
-import { type MaybeRef, type Ref } from 'vue';
+import { type MaybeRef } from 'vue';
 import type { DraggableSnapPoint, Coordinates, DraggableDefaultOptions } from '../../types/index.js';
 type UseDraggableSnapArgs = {
     id: MaybeRef<string>;
-    elRect: Ref<DOMRect | undefined>;
-    wrapperRect: Ref<DOMRect | undefined>;
-    draggedY: Ref<number>;
-    draggedX: Ref<number>;
     animation: MaybeRef<DraggableDefaultOptions['animation']>;
     snapPoints: MaybeRef<DraggableDefaultOptions['snapPoints']>;
 };
@@ -21,17 +17,8 @@ type SnapToArgs = {
     duration?: number;
 };
 export declare function useDraggableSnap(args: UseDraggableSnapArgs): {
+    mappedActiveSnapPoint: import("vue").ComputedRef<Coordinates | undefined>;
     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?: {
-        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?: {
-        x?: number;
-        y?: number;
-    } | undefined] | ["center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right", offset?: {
-        x?: number | undefined;
-        y?: number | undefined;
-    } | undefined] | undefined>;
     snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<string, DraggableSnapPoint>>;
     mapSnapPoint: (snapPoint: DraggableSnapPoint) => Coordinates | undefined;
     interpolateDragged: (args: InterpolateDraggedArgs) => void;