@maas/vue-equipment 1.4.0 → 1.5.0

package/dist/composables/useTouchIntent/index.d.ts

@@ -0,0 +1,18 @@
+import * as vue from 'vue';
+import { MaybeRefOrGetter } from 'vue';
+
+type TouchIntent = 'scroll' | 'swipe';
+type TouchIntentAxis = 'x' | 'y';
+interface UseTouchIntentOptions {
+    target?: MaybeRefOrGetter<Element | Document | null | undefined>;
+    axis?: MaybeRefOrGetter<TouchIntentAxis>;
+    threshold?: MaybeRefOrGetter<number>;
+}
+declare function useTouchIntent(options?: UseTouchIntentOptions): {
+    intent: Readonly<vue.Ref<TouchIntent | undefined, TouchIntent | undefined>>;
+    isScrolling: vue.ComputedRef<boolean>;
+    isSwiping: vue.ComputedRef<boolean>;
+};
+type UseTouchIntentReturn = ReturnType<typeof useTouchIntent>;
+
+export { type TouchIntent, type TouchIntentAxis, type UseTouchIntentOptions, type UseTouchIntentReturn, useTouchIntent };

package/dist/composables/useTouchIntent/index.js

@@ -0,0 +1,74 @@
+// useTouchIntent/index.ts
+import { computed, readonly, ref, toValue } from "vue";
+import {
+  defaultDocument,
+  tryOnScopeDispose,
+  useEventListener
+} from "@vueuse/core";
+var endEvents = ["pointerup", "pointercancel", "touchend", "touchcancel"];
+function useTouchIntent(options = {}) {
+  const { target, axis = "y", threshold = 8 } = options;
+  let pressX = 0;
+  let pressY = 0;
+  let cancelMove = void 0;
+  let cancelEnd = void 0;
+  const intent = ref(void 0);
+  const isScrolling = computed(() => intent.value === "scroll");
+  const isSwiping = computed(() => intent.value === "swipe");
+  function end() {
+    cancelMove?.();
+    cancelEnd?.();
+    cancelMove = void 0;
+    cancelEnd = void 0;
+    intent.value = void 0;
+  }
+  function onPointermove(e) {
+    if (intent.value || e.isTrusted && !e.isPrimary) {
+      return;
+    }
+    const dx = Math.abs(e.clientX - pressX);
+    const dy = Math.abs(e.clientY - pressY);
+    const vertical = toValue(axis) === "y";
+    const along = vertical ? dy : dx;
+    const across = vertical ? dx : dy;
+    const limit = toValue(threshold);
+    if (along > limit && along > across) {
+      intent.value = "scroll";
+    } else if (across > limit && across > along) {
+      intent.value = "swipe";
+    }
+  }
+  function onPointerdown(e) {
+    if (e.isTrusted && !e.isPrimary) {
+      return;
+    }
+    end();
+    pressX = e.clientX;
+    pressY = e.clientY;
+    cancelMove = useEventListener(
+      defaultDocument,
+      "pointermove",
+      onPointermove,
+      { capture: true }
+    );
+    cancelEnd = useEventListener(defaultDocument, endEvents, end, {
+      capture: true
+    });
+  }
+  useEventListener(
+    () => toValue(target) ?? defaultDocument,
+    "pointerdown",
+    onPointerdown,
+    { capture: true }
+  );
+  tryOnScopeDispose(end);
+  return {
+    intent: readonly(intent),
+    isScrolling,
+    isSwiping
+  };
+}
+export {
+  useTouchIntent
+};
+//# sourceMappingURL=index.js.map

package/dist/composables/useTouchIntent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../packages/composables/useTouchIntent/index.ts"],"sourcesContent":["import { computed, readonly, ref, toValue } from 'vue'\nimport {\n  defaultDocument,\n  tryOnScopeDispose,\n  useEventListener,\n} from '@vueuse/core'\n\nimport type { MaybeRefOrGetter } from 'vue'\n\nexport type TouchIntent = 'scroll' | 'swipe'\nexport type TouchIntentAxis = 'x' | 'y'\n\nexport interface UseTouchIntentOptions {\n  target?: MaybeRefOrGetter<Element | Document | null | undefined>\n  axis?: MaybeRefOrGetter<TouchIntentAxis>\n  threshold?: MaybeRefOrGetter<number>\n}\n\nconst endEvents = ['pointerup', 'pointercancel', 'touchend', 'touchcancel']\n\n// Tells a scroll from a swipe by the axis a press’s first move leans along\nexport function useTouchIntent(options: UseTouchIntentOptions = {}) {\n  const { target, axis = 'y', threshold = 8 } = options\n\n  // Private state\n  let pressX = 0\n  let pressY = 0\n  let cancelMove: (() => void) | undefined = undefined\n  let cancelEnd: (() => void) | undefined = undefined\n\n  // Public state\n  const intent = ref<TouchIntent | undefined>(undefined)\n  const isScrolling = computed(() => intent.value === 'scroll')\n  const isSwiping = computed(() => intent.value === 'swipe')\n\n  // Private functions\n  function end() {\n    cancelMove?.()\n    cancelEnd?.()\n    cancelMove = undefined\n    cancelEnd = undefined\n    intent.value = undefined\n  }\n\n  // The first axis to pass the threshold with the larger move settles the press\n  function onPointermove(e: PointerEvent) {\n    if (intent.value || (e.isTrusted && !e.isPrimary)) {\n      return\n    }\n\n    const dx = Math.abs(e.clientX - pressX)\n    const dy = Math.abs(e.clientY - pressY)\n    const vertical = toValue(axis) === 'y'\n    const along = vertical ? dy : dx\n    const across = vertical ? dx : dy\n    const limit = toValue(threshold)\n\n    if (along > limit && along > across) {\n      intent.value = 'scroll'\n    } else if (across > limit && across > along) {\n      intent.value = 'swipe'\n    }\n  }\n\n  function onPointerdown(e: PointerEvent) {\n    if (e.isTrusted && !e.isPrimary) {\n      return\n    }\n\n    end()\n    pressX = e.clientX\n    pressY = e.clientY\n    cancelMove = useEventListener(\n      defaultDocument,\n      'pointermove',\n      onPointermove,\n      { capture: true }\n    )\n    cancelEnd = useEventListener(defaultDocument, endEvents, end, {\n      capture: true,\n    })\n  }\n\n  useEventListener(\n    () => toValue(target) ?? defaultDocument,\n    'pointerdown',\n    onPointerdown,\n    { capture: true }\n  )\n\n  tryOnScopeDispose(end)\n\n  return {\n    intent: readonly(intent),\n    isScrolling,\n    isSwiping,\n  }\n}\n\nexport type UseTouchIntentReturn = ReturnType<typeof useTouchIntent>\n"],"mappings":";AAAA,SAAS,UAAU,UAAU,KAAK,eAAe;AACjD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAaP,IAAM,YAAY,CAAC,aAAa,iBAAiB,YAAY,aAAa;AAGnE,SAAS,eAAe,UAAiC,CAAC,GAAG;AAClE,QAAM,EAAE,QAAQ,OAAO,KAAK,YAAY,EAAE,IAAI;AAG9C,MAAI,SAAS;AACb,MAAI,SAAS;AACb,MAAI,aAAuC;AAC3C,MAAI,YAAsC;AAG1C,QAAM,SAAS,IAA6B,MAAS;AACrD,QAAM,cAAc,SAAS,MAAM,OAAO,UAAU,QAAQ;AAC5D,QAAM,YAAY,SAAS,MAAM,OAAO,UAAU,OAAO;AAGzD,WAAS,MAAM;AACb,iBAAa;AACb,gBAAY;AACZ,iBAAa;AACb,gBAAY;AACZ,WAAO,QAAQ;AAAA,EACjB;AAGA,WAAS,cAAc,GAAiB;AACtC,QAAI,OAAO,SAAU,EAAE,aAAa,CAAC,EAAE,WAAY;AACjD;AAAA,IACF;AAEA,UAAM,KAAK,KAAK,IAAI,EAAE,UAAU,MAAM;AACtC,UAAM,KAAK,KAAK,IAAI,EAAE,UAAU,MAAM;AACtC,UAAM,WAAW,QAAQ,IAAI,MAAM;AACnC,UAAM,QAAQ,WAAW,KAAK;AAC9B,UAAM,SAAS,WAAW,KAAK;AAC/B,UAAM,QAAQ,QAAQ,SAAS;AAE/B,QAAI,QAAQ,SAAS,QAAQ,QAAQ;AACnC,aAAO,QAAQ;AAAA,IACjB,WAAW,SAAS,SAAS,SAAS,OAAO;AAC3C,aAAO,QAAQ;AAAA,IACjB;AAAA,EACF;AAEA,WAAS,cAAc,GAAiB;AACtC,QAAI,EAAE,aAAa,CAAC,EAAE,WAAW;AAC/B;AAAA,IACF;AAEA,QAAI;AACJ,aAAS,EAAE;AACX,aAAS,EAAE;AACX,iBAAa;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,EAAE,SAAS,KAAK;AAAA,IAClB;AACA,gBAAY,iBAAiB,iBAAiB,WAAW,KAAK;AAAA,MAC5D,SAAS;AAAA,IACX,CAAC;AAAA,EACH;AAEA;AAAA,IACE,MAAM,QAAQ,MAAM,KAAK;AAAA,IACzB;AAAA,IACA;AAAA,IACA,EAAE,SAAS,KAAK;AAAA,EAClB;AAEA,oBAAkB,GAAG;AAErB,SAAO;AAAA,IACL,QAAQ,SAAS,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -161,6 +161,13 @@ const functions$1 = [
 		lastUpdated: 1787864792000,
 		docs: "https://vue.equipment/composables/useScrollTo",
 		description: "Scroll to an element with consistent speed"
+	},
+	{
+		name: "useTouchIntent",
+		"package": "composables",
+		lastUpdated: 1793702872000,
+		docs: "https://vue.equipment/composables/useTouchIntent",
+		description: "Tell a swipe from a scroll: a press that moves sideways is a swipe"
 	}
 ];
 

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

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

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

@@ -31,7 +31,7 @@ const {
 } = defineProps({
   id: { type: null, required: false },
   side: { type: [String, Array], required: true },
-  disabled: { type: Boolean, required: false },
+  disabled: { type: null, required: false },
   preventEdgeNavigation: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false }
 });
@@ -52,9 +52,12 @@ const { active, hasDragged, onPointerdown, onTouchstart } = useTrayGesture({
   id: mappedId,
   state,
   selectionLock: "drag",
+  disabled: () => toValue(disabled) === true,
   preventEdgeNavigation: () => preventEdgeNavigation ?? state.options.preventEdgeNavigation
 });
-const mappedDisabled = computed(() => disabled || state.options.disabled);
+const mappedDisabled = computed(
+  () => toValue(disabled) === true || state.options.disabled
+);
 const sides = computed(() => Array.isArray(side) ? side : [side]);
 const mappedSide = computed(() => sides.value.join(" "));
 const axis = computed(() => {

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

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

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

@@ -4,6 +4,7 @@ type UseTrayGestureArgs = {
     id: MaybeRef<string>;
     state: TrayState;
     selectionLock?: 'press' | 'drag';
+    disabled?: MaybeRefOrGetter<boolean>;
     preventEdgeNavigation: MaybeRefOrGetter<boolean>;
 };
 export declare function useTrayGesture(args: UseTrayGestureArgs): {

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

@@ -15,7 +15,13 @@ import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useTraySnap } from "./useTraySnap.mjs";
 import { SIDES, useTrayUtils } from "./useTrayUtils.mjs";
 export function useTrayGesture(args) {
-  const { id, state, selectionLock = "press", preventEdgeNavigation } = args;
+  const {
+    id,
+    state,
+    selectionLock = "press",
+    disabled: ownDisabled,
+    preventEdgeNavigation
+  } = args;
   const { clampWithOvershoot, isVertical, isDraggableSide } = useTrayUtils();
   const emitter = useMagicEmitter();
   const {
@@ -41,7 +47,9 @@ export function useTrayGesture(args) {
   let releaseSelection = void 0;
   let pending = void 0;
   const threshold = computed(() => state.options.threshold);
-  const disabled = computed(() => state.options.disabled);
+  const disabled = computed(
+    () => state.options.disabled || toValue(ownDisabled) === true
+  );
   const snapMode = computed(() => state.options.snap.mode);
   const dragMode = computed(() => state.options.drag.mode);
   const active = ref(false);
@@ -67,25 +75,37 @@ export function useTrayGesture(args) {
       (side2) => isDraggableSide({ snapPoints: state.options.snapPoints, side: side2 })
     );
   }
+  function isOpen(side) {
+    return state.dragged[side] > dragBounds(side).min;
+  }
   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) {
+    if (delta === 0) {
       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];
+    const [opens, closes] = alongX ? delta > 0 ? ["left", "right"] : ["right", "left"] : delta > 0 ? ["top", "bottom"] : ["bottom", "top"];
+    if (candidates.includes(closes) && isOpen(closes)) {
+      return closes;
+    }
+    return candidates.includes(opens) ? opens : candidates[0];
+  }
+  function dropPending(e) {
+    pending = void 0;
+    resetListeners();
+    if (e) {
+      guardedReleasePointerCapture({ event: e, element: pointerdownTarget });
+    }
   }
-  function resolvePending(x, y) {
+  function resolvePending(x, y, e) {
     if (!pending) {
       return void 0;
     }
     if (!canStart()) {
-      pending = void 0;
-      resetListeners();
+      dropPending(e);
       return void 0;
     }
     const side = resolveSide(pending.sides, x - pending.x, y - pending.y);
@@ -265,7 +285,7 @@ export function useTrayGesture(args) {
     if (e.isTrusted && !e.isPrimary) {
       return;
     }
-    const side = state.draggingSide ?? resolvePending(e.clientX, e.clientY);
+    const side = state.draggingSide ?? resolvePending(e.clientX, e.clientY, e);
     if (!side) {
       return;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "contributors": [
     {
       "name": "Robin Scholz",
@@ -148,17 +148,8 @@
     "update:deps:major": "pnpm dlx taze major -r -w"
   },
   "type": "module",
-  "packageManager": "pnpm@10.34.5",
-  "pnpm": {
-    "overrides": {
-      "typescript": "catalog:"
-    },
-    "onlyBuiltDependencies": [
-      "@bundled-es-modules/glob",
-      "@parcel/watcher",
-      "esbuild",
-      "style-dictionary",
-      "vue-demi"
-    ]
-  }
+  "engines": {
+    "pnpm": ">=12"
+  },
+  "packageManager": "pnpm@12.16.1"
 }