@budibase/bbui 3.39.25 → 3.39.27

package/dist/bbui.mjs

@@ -47163,8 +47163,19 @@ function Calendar(l, u) {
 		max: 9999,
 		pad: 0,
 		fallback: E.year()
-	});
-	legacy_pre_effect(() => deep_read_state(v()), () => {
+	}), z = 40, B = !1, V, H = 0, U = 0, W = (l) => {
+		set(D, l ? get$2(D).add(1, "month") : get$2(D).subtract(1, "month"));
+	}, K = (l) => {
+		if (B) return;
+		let u = l.deltaY || l.deltaX;
+		u && (B = !0, V = setTimeout(() => B = !1, 120), W(u > 0));
+	}, q = (l) => {
+		H = l.changedTouches[0].clientX, U = l.changedTouches[0].clientY;
+	}, J = (l) => {
+		let u = l.changedTouches[0].clientX - H, f = l.changedTouches[0].clientY - U;
+		Math.abs(u) > 40 && Math.abs(u) > Math.abs(f) && W(u < 0);
+	};
+	onDestroy(() => clearTimeout(V)), legacy_pre_effect(() => deep_read_state(v()), () => {
 		set(D, (0, import_dayjs_min.default)(v() || (0, import_dayjs_min.default)()).startOf("month"));
 	}), legacy_pre_effect(() => deep_read_state(y()), () => {
 		set(f, k(y()));
@@ -47176,12 +47187,12 @@ function Calendar(l, u) {
 			value: u
 		})));
 	}), legacy_pre_effect_reset();
-	var z = { setDate: L };
+	var Y = { setDate: L };
 	init$1();
-	var B = root$73(), V = child(B), H = child(V), U = child(H), W = child(U);
+	var X = root$73(), Z = child(X), Q = child(Z), ee = child(Q), ne = child(ee);
 	{
 		let l = /* @__PURE__ */ derived_safe_equal(() => (deep_read_state(b()), untrack(() => b()?.datePickerPlaceholder))), u = /* @__PURE__ */ derived_safe_equal(() => (get$2(D), untrack(() => get$2(D).month())));
-		Select_1(W, {
+		Select_1(ne, {
 			autoWidth: !0,
 			get placeholder() {
 				return get$2(l);
@@ -47195,11 +47206,11 @@ function Calendar(l, u) {
 			$$events: { change: (l) => set(D, get$2(D).month(l.detail)) }
 		});
 	}
-	reset(U);
-	var K = sibling(U, 2);
+	reset(ee);
+	var $ = sibling(ee, 2);
 	{
 		let l = /* @__PURE__ */ derived_safe_equal(() => (get$2(D), untrack(() => get$2(D).year())));
-		NumberInput(K, {
+		NumberInput($, {
 			get value() {
 				return get$2(l);
 			},
@@ -47212,28 +47223,28 @@ function Calendar(l, u) {
 			}
 		});
 	}
-	reset(H);
-	var q = sibling(H, 2);
-	Icon(child(q), {
+	reset(Q);
+	var re = sibling(Q, 2);
+	Icon(child(re), {
 		name: "caret-left",
 		weight: "bold",
 		size: "S"
-	}), reset(q);
-	var J = sibling(q, 2);
-	Icon(child(J), {
+	}), reset(re);
+	var ie = sibling(re, 2);
+	Icon(child(ie), {
 		name: "caret-right",
 		weight: "bold",
 		size: "S"
-	}), reset(J), reset(V);
-	var Y = sibling(V, 2), X = child(Y), Z = child(X), Q = child(Z);
-	each$1(Q, 5, () => get$2(f), index, (l, u) => {
+	}), reset(ie), reset(Z);
+	var ae = sibling(Z, 2), oe = child(ae), ce = child(oe), le = child(ce);
+	each$1(le, 5, () => get$2(f), index, (l, u) => {
 		var f = root_1$38(), p = child(f), m = child(p, !0);
 		reset(p), reset(f), template_effect((l, u) => {
 			set_attribute(p, "title", l), set_text(m, u);
 		}, [() => (get$2(u), untrack(() => j(get$2(u)))), () => (get$2(u), untrack(() => j(get$2(u))[0]))]), append$1(l, f);
-	}), reset(Q), reset(Z);
-	var ee = sibling(Z);
-	return each$1(ee, 5, () => get$2(p), index, (l, u) => {
+	}), reset(le), reset(ce);
+	var ue = sibling(ce);
+	return each$1(ue, 5, () => get$2(p), index, (l, u) => {
 		var f = root_2$24();
 		each$1(f, 4, () => [
 			0,
@@ -47260,7 +47271,7 @@ function Calendar(l, u) {
 				() => (deep_read_state(get$2(p)), untrack(() => get$2(p).date()))
 			]), event("click", y, () => F(get$2(p))), append$1(l, y);
 		}), reset(f), append$1(l, f);
-	}), reset(ee), reset(X), reset(Y), reset(B), event("click", q, () => set(D, get$2(D).subtract(1, "month"))), event("click", J, () => set(D, get$2(D).add(1, "month"))), append$1(l, B), bind_prop(u, "setDate", L), pop(z);
+	}), reset(ue), reset(oe), reset(ae), reset(X), event("click", re, () => set(D, get$2(D).subtract(1, "month"))), event("click", ie, () => set(D, get$2(D).add(1, "month"))), event("wheel", ae, preventDefault(K)), event("touchstart", ae, q), event("touchend", ae, J), append$1(l, X), bind_prop(u, "setDate", L), pop(Y);
 }
 //#endregion
 //#region src/Tooltip/Tooltip.svelte

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.39.25",
+  "version": "3.39.27",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -105,5 +105,5 @@
       }
     }
   },
-  "gitHead": "02e3837724b2102305a6aeb8590004680d403c32"
+  "gitHead": "e7d16cc7fdea9a4a9f4d53b392b6fe790051afb3"
 }

package/src/Form/Core/DatePicker/Calendar.svelte

@@ -3,7 +3,7 @@
   import Select from "../../Select.svelte"
   import dayjs from "dayjs"
   import NumberInput from "./NumberInput.svelte"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onDestroy } from "svelte"
   import Icon from "../../../Icon/Icon.svelte"
   import { resolveTranslationGroup } from "@budibase/shared-core"
 
@@ -116,6 +116,51 @@
   }
 
   const cleanYear = cleanInput({ max: 9999, pad: 0, fallback: now.year() })
+
+  // Scroll (desktop) or horizontal swipe (touch) over the calendar to move
+  // between months.
+  const SWIPE_THRESHOLD = 40
+  let wheelLock = false
+  let wheelTimer
+  let touchStartX = 0
+  let touchStartY = 0
+
+  const changeMonth = forward => {
+    calendarDate = forward
+      ? calendarDate.add(1, "month")
+      : calendarDate.subtract(1, "month")
+  }
+
+  // A short lock keeps a single trackpad gesture from skipping many months
+  const handleWheel = e => {
+    if (wheelLock) {
+      return
+    }
+    const delta = e.deltaY || e.deltaX
+    if (!delta) {
+      return
+    }
+    wheelLock = true
+    wheelTimer = setTimeout(() => (wheelLock = false), 120)
+    changeMonth(delta > 0)
+  }
+
+  const handleTouchStart = e => {
+    touchStartX = e.changedTouches[0].clientX
+    touchStartY = e.changedTouches[0].clientY
+  }
+
+  // Only a clear horizontal swipe changes month - vertical stays a normal
+  // scroll and small movements remain taps so date selection keeps working
+  const handleTouchEnd = e => {
+    const dx = e.changedTouches[0].clientX - touchStartX
+    const dy = e.changedTouches[0].clientY - touchStartY
+    if (Math.abs(dx) > SWIPE_THRESHOLD && Math.abs(dx) > Math.abs(dy)) {
+      changeMonth(dx < 0)
+    }
+  }
+
+  onDestroy(() => clearTimeout(wheelTimer))
 </script>
 
 <div class="spectrum-Calendar">
@@ -160,10 +205,14 @@
       <Icon name="caret-right" weight="bold" size="S" />
     </button>
   </div>
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="spectrum-Calendar-body"
     aria-readonly="true"
     aria-disabled="false"
+    on:wheel|preventDefault={handleWheel}
+    on:touchstart={handleTouchStart}
+    on:touchend={handleTouchEnd}
   >
     <table role="presentation" class="spectrum-Calendar-table">
       <thead role="presentation">