@maas/vue-equipment 1.3.0 → 1.4.0

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/plugins/MagicTray/src/components/MagicTrayTrigger.d.vue.ts

@@ -2,7 +2,7 @@ import type { MaybeRef } from 'vue';
 import type { MagicTraySide } from '../types/index.js';
 interface MagicTrayTriggerProps {
     id?: MaybeRef<string>;
-    side: MagicTraySide;
+    side: MagicTraySide | Array<MagicTraySide>;
     disabled?: boolean;
     preventEdgeNavigation?: boolean;
     asChild?: boolean;

package/dist/plugins/MagicTray/src/components/MagicTrayTrigger.vue

@@ -3,7 +3,8 @@
     class="magic-tray-trigger"
     :as-child="asChild"
     :data-id="`${mappedId}-trigger`"
-    :data-side="side"
+    :data-side="mappedSide"
+    :data-axis="axis"
     :data-dragging="active"
     :data-dragged="hasDragged"
     :data-disabled="mappedDisabled"
@@ -29,7 +30,7 @@ const {
   asChild
 } = defineProps({
   id: { type: null, required: false },
-  side: { type: String, required: true },
+  side: { type: [String, Array], required: true },
   disabled: { type: Boolean, required: false },
   preventEdgeNavigation: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false }
@@ -54,6 +55,17 @@ const { active, hasDragged, onPointerdown, onTouchstart } = useTrayGesture({
   preventEdgeNavigation: () => preventEdgeNavigation ?? state.options.preventEdgeNavigation
 });
 const mappedDisabled = computed(() => disabled || state.options.disabled);
+const sides = computed(() => Array.isArray(side) ? side : [side]);
+const mappedSide = computed(() => sides.value.join(" "));
+const axis = computed(() => {
+  const horizontal = sides.value.some(
+    (side2) => side2 === "left" || side2 === "right"
+  );
+  const vertical = sides.value.some(
+    (side2) => side2 === "top" || side2 === "bottom"
+  );
+  return horizontal && vertical ? "both" : vertical ? "y" : "x";
+});
 function isEditable(target) {
   if (!(target instanceof Element)) {
     return false;
@@ -76,16 +88,18 @@ function guardedTouchstart(event) {
 </script>
 
 <style>
-.magic-tray-trigger[data-disabled='false'][data-side='left'],
-.magic-tray-trigger[data-disabled='false'][data-side='right'] {
+.magic-tray-trigger[data-disabled='false'][data-axis='x'] {
   touch-action: var(--magic-tray-trigger-touch-action, pan-y);
 }
 
-.magic-tray-trigger[data-disabled='false'][data-side='top'],
-.magic-tray-trigger[data-disabled='false'][data-side='bottom'] {
+.magic-tray-trigger[data-disabled='false'][data-axis='y'] {
   touch-action: var(--magic-tray-trigger-touch-action, pan-x);
 }
 
+.magic-tray-trigger[data-disabled='false'][data-axis='both'] {
+  touch-action: var(--magic-tray-trigger-touch-action, none);
+}
+
 .magic-tray-trigger[data-dragging='true'] * {
   -webkit-user-drag: none;
 }

package/dist/plugins/MagicTray/src/components/MagicTrayTrigger.vue.d.ts

@@ -2,7 +2,7 @@ import type { MaybeRef } from 'vue';
 import type { MagicTraySide } from '../types/index.js';
 interface MagicTrayTriggerProps {
     id?: MaybeRef<string>;
-    side: MagicTraySide;
+    side: MagicTraySide | Array<MagicTraySide>;
     disabled?: boolean;
     preventEdgeNavigation?: boolean;
     asChild?: boolean;

package/dist/plugins/MagicTray/src/composables/private/useTrayGesture.d.ts

@@ -9,8 +9,8 @@ type UseTrayGestureArgs = {
 export declare function useTrayGesture(args: UseTrayGestureArgs): {
     active: Readonly<import("vue").Ref<boolean, boolean>>;
     hasDragged: import("vue").ComputedRef<boolean>;
-    onPointerdown: (side: MagicTraySide, e: PointerEvent) => void;
-    onTouchstart: (side: MagicTraySide, e: TouchEvent) => void;
+    onPointerdown: (side: MagicTraySide | Array<MagicTraySide>, e: PointerEvent) => void;
+    onTouchstart: (side: MagicTraySide | Array<MagicTraySide>, e: TouchEvent) => void;
 };
 export type UseTrayGestureReturn = ReturnType<typeof useTrayGesture>;
 export {};

package/dist/plugins/MagicTray/src/composables/private/useTrayGesture.mjs

@@ -39,6 +39,7 @@ export function useTrayGesture(args) {
   let cancelTouchcancel = void 0;
   let pointerdownTarget = null;
   let releaseSelection = void 0;
+  let pending = void 0;
   const threshold = computed(() => state.options.threshold);
   const disabled = computed(() => state.options.disabled);
   const snapMode = computed(() => state.options.snap.mode);
@@ -57,8 +58,45 @@ export function useTrayGesture(args) {
   function lockSelectionOnce() {
     releaseSelection ??= lockSelection();
   }
-  function canBegin(side) {
-    return !state.dragging && !toValue(disabled) && state.elRect !== void 0 && isDraggableSide({ snapPoints: state.options.snapPoints, side });
+  function canStart() {
+    return !state.dragging && !toValue(disabled) && state.elRect !== void 0;
+  }
+  function draggableSides(side) {
+    const sides = Array.isArray(side) ? side : [side];
+    return sides.filter(
+      (side2) => isDraggableSide({ snapPoints: state.options.snapPoints, side: side2 })
+    );
+  }
+  function resolveSide(sides, dx, dy) {
+    const horizontal = sides.filter((side) => !isVertical(side));
+    const vertical = sides.filter(isVertical);
+    const alongX = horizontal.length > 0 && (!vertical.length || Math.abs(dx) >= Math.abs(dy));
+    const delta = alongX ? dx : dy;
+    if (Math.abs(delta) <= toValue(threshold).lock) {
+      return void 0;
+    }
+    const candidates = alongX ? horizontal : vertical;
+    const preferred = alongX ? delta > 0 ? "left" : "right" : delta > 0 ? "top" : "bottom";
+    return candidates.includes(preferred) ? preferred : candidates[0];
+  }
+  function resolvePending(x, y) {
+    if (!pending) {
+      return void 0;
+    }
+    if (!canStart()) {
+      pending = void 0;
+      resetListeners();
+      return void 0;
+    }
+    const side = resolveSide(pending.sides, x - pending.x, y - pending.y);
+    if (!side) {
+      return void 0;
+    }
+    const { x: pressX, y: pressY, target, pressedAt } = pending;
+    pending = void 0;
+    beginDrag(side, isVertical(side) ? pressY : pressX, target);
+    state.dragStart = pressedAt;
+    return side;
   }
   function dragBounds(side) {
     const points = mappedSnapPoints(side);
@@ -173,11 +211,11 @@ export function useTrayGesture(args) {
   function emitWillSnapTo(side) {
     const target = settleTarget(side);
     const isPoint = mappedSnapPoints(side).includes(target);
-    const pending = !isPoint && rangeAt(side, target)?.range || target;
-    if (pending === lastPendingTarget) {
+    const pending2 = !isPoint && rangeAt(side, target)?.range || target;
+    if (pending2 === lastPendingTarget) {
       return;
     }
-    lastPendingTarget = pending;
+    lastPendingTarget = pending2;
     const snapPoint = snapPointAt(side, target);
     if (snapPoint === void 0) {
       return;
@@ -204,6 +242,7 @@ export function useTrayGesture(args) {
   }
   function resetDragState() {
     const side = state.draggingSide;
+    pending = void 0;
     if (side) {
       state.lastDragged[side] = state.snapped[side];
     }
@@ -226,7 +265,7 @@ export function useTrayGesture(args) {
     if (e.isTrusted && !e.isPrimary) {
       return;
     }
-    const side = state.draggingSide;
+    const side = state.draggingSide ?? resolvePending(e.clientX, e.clientY);
     if (!side) {
       return;
     }
@@ -269,14 +308,14 @@ export function useTrayGesture(args) {
     guardedReleasePointerCapture({ event: e, element: pointerdownTarget });
   }
   function onTouchmove(e) {
-    const side = state.draggingSide;
-    if (!side) {
-      return;
-    }
     const firstTouch = e.touches[0];
     if (!firstTouch) {
       return;
     }
+    const side = state.draggingSide ?? resolvePending(firstTouch.clientX, firstTouch.clientY);
+    if (!side) {
+      return;
+    }
     e.stopImmediatePropagation();
     e.stopPropagation();
     if (hasDragged.value) {
@@ -355,15 +394,28 @@ export function useTrayGesture(args) {
       interpolateDragged({ side, to: state.snapped[side] });
       resetDragState();
     }
+    pending = void 0;
     resetListeners();
   }
   function onPointerdown(side, e) {
-    if (!canBegin(side)) {
+    const sides = draggableSides(side);
+    if (!canStart() || !sides.length) {
       return;
     }
-    const coord = isVertical(side) ? e.clientY : e.clientX;
     const target = e.target instanceof Element ? e.target : null;
-    beginDrag(side, coord, target);
+    const only = sides.length === 1 ? sides[0] : void 0;
+    if (only) {
+      beginDrag(only, isVertical(only) ? e.clientY : e.clientX, target);
+    } else {
+      pending = {
+        sides,
+        x: e.clientX,
+        y: e.clientY,
+        target,
+        pressedAt: /* @__PURE__ */ new Date()
+      };
+      pointerdownTarget = target;
+    }
     guardedSetPointerCapture({ event: e, element: target });
     resetListeners();
     cancelPointerup = useEventListener(document, "pointerup", onPointerup);
@@ -382,23 +434,42 @@ export function useTrayGesture(args) {
     );
     cancelTouchend = isIOS() || isAndroid() ? useEventListener(document, "touchend", onTouchend) : void 0;
     cancelTouchcancel = isIOS() || isAndroid() ? useEventListener(document, "touchcancel", onTouchend) : void 0;
-    onPointermove(e);
+    if (!pending) {
+      onPointermove(e);
+    }
   }
   function onTouchstart(side, e) {
     if (toValue(preventEdgeNavigation)) {
       cancelEdgeNavigation({ event: e });
     }
-    if (!isAndroid() || !canBegin(side)) {
+    const sides = draggableSides(side);
+    if (!isAndroid() || !canStart() || !sides.length) {
       return;
     }
     const firstTouch = e.touches[0];
     if (!firstTouch) {
       return;
     }
-    e.stopImmediatePropagation();
-    e.stopPropagation();
-    const coord = isVertical(side) ? firstTouch.clientY : firstTouch.clientX;
-    beginDrag(side, coord, e.target instanceof Element ? e.target : null);
+    const target = e.target instanceof Element ? e.target : null;
+    const only = sides.length === 1 ? sides[0] : void 0;
+    if (only) {
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+      beginDrag(
+        only,
+        isVertical(only) ? firstTouch.clientY : firstTouch.clientX,
+        target
+      );
+    } else {
+      pending = {
+        sides,
+        x: firstTouch.clientX,
+        y: firstTouch.clientY,
+        target,
+        pressedAt: /* @__PURE__ */ new Date()
+      };
+      pointerdownTarget = target;
+    }
     cancelTouchmove?.();
     cancelTouchmove = useEventListener(document, "touchmove", onTouchmove, {
       passive: false
@@ -409,7 +480,9 @@ export function useTrayGesture(args) {
     });
     cancelTouchcancel?.();
     cancelTouchcancel = useEventListener(document, "touchcancel", onTouchend);
-    onTouchmove(e);
+    if (!pending) {
+      onTouchmove(e);
+    }
   }
   watch(disabled, (value) => {
     if (value) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "contributors": [
     {
       "name": "Robin Scholz",