@budibase/bbui 3.39.26 → 3.39.28

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
@@ -49933,7 +49944,7 @@ function CollapsibleSearch(l, u) {
 var root_3$13 = /* @__PURE__ */ from_html("<span class=\"subtitle-text svelte-1jm7byl\"> </span>"), root_2$15 = /* @__PURE__ */ from_html("<li role=\"option\" aria-selected=\"true\" tabindex=\"0\"><span class=\"spectrum-Menu-itemLabel\"> <!></span> <div class=\"check svelte-1jm7byl\"><!></div></li>"), root_1$28 = /* @__PURE__ */ from_html("<div class=\"spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open svelte-1jm7byl\"><ul class=\"spectrum-Menu\" role=\"listbox\"></ul></div>"), root$50 = /* @__PURE__ */ from_html("<div><div><input class=\"spectrum-Textfield-input spectrum-InputGroup-input svelte-1jm7byl\"/></div> <div style=\"width: 40%\"><button aria-haspopup=\"listbox\"><span class=\"spectrum-Picker-label\"><div> </div></span> <!></button></div> <!></div>");
 function InputDropdown(l, u) {
 	push$1(u, !1);
-	let f = /* @__PURE__ */ mutable_source(), p = prop(u, "inputValue", 8), m = prop(u, "dropdownValue", 8), v = prop(u, "id", 8, null), y = prop(u, "inputType", 8, "text"), b = prop(u, "placeholder", 8, "Choose an option or type"), x = prop(u, "disabled", 8, !1), S = prop(u, "readonly", 8, !1), w = prop(u, "updateOnChange", 8, !0), T = prop(u, "options", 24, () => []), E = prop(u, "getOptionLabel", 8, (l) => U(l, "label")), D = prop(u, "getOptionValue", 8, (l) => U(l, "value")), O = prop(u, "getOptionSubtitle", 8, (l) => l?.subtitle), k = prop(u, "isOptionSelected", 8, () => !1), j = createEventDispatcher(), M = /* @__PURE__ */ mutable_source(!1), N = /* @__PURE__ */ mutable_source(!1), P = (l, u, f) => {
+	let f = /* @__PURE__ */ mutable_source(), p = prop(u, "inputValue", 8), m = prop(u, "dropdownValue", 8), v = prop(u, "id", 8, null), y = prop(u, "inputType", 8, "text"), b = prop(u, "placeholder", 8, "Choose an option or type"), x = prop(u, "disabled", 8, !1), S = prop(u, "readonly", 8, !1), w = prop(u, "updateOnChange", 8, !0), T = prop(u, "options", 24, () => []), E = prop(u, "getOptionLabel", 8, (l) => U(l, "label")), D = prop(u, "getOptionValue", 8, (l) => U(l, "value")), O = prop(u, "getOptionSubtitle", 8, (l) => l?.subtitle), k = prop(u, "isOptionSelected", 8, (l) => !1), j = createEventDispatcher(), M = /* @__PURE__ */ mutable_source(!1), N = /* @__PURE__ */ mutable_source(!1), P = (l, u, f) => {
 		if (l == null || l === "") return f || "Choose an option or type";
 		if (!u?.length) return "";
 		let p = u.find((u) => D()(u) === l);
@@ -50024,14 +50035,14 @@ function InputDropdown(l, u) {
 //#region src/Form/InputDropdown.svelte
 function InputDropdown_1(l, u) {
 	push$1(u, !1);
-	let f = prop(u, "inputValue", 12, null), p = prop(u, "dropdownValue", 12, null), m = prop(u, "inputType", 8, "text"), v = prop(u, "label", 8, null), y = prop(u, "labelPosition", 8, "above"), b = prop(u, "placeholder", 8, null), x = prop(u, "disabled", 8, !1), S = prop(u, "readonly", 8, !1), w = prop(u, "error", 8, null), T = prop(u, "updateOnChange", 8, !0), E = prop(u, "quiet", 8, !1), D = prop(u, "autofocus", 8), O = prop(u, "helpText", 8, null), k = prop(u, "options", 24, () => []), j = createEventDispatcher(), M = (l) => {
-		p(l.detail), j("pick", l.detail);
-	}, N = (l) => {
-		f(l.detail), j("change", l.detail);
+	let f = prop(u, "inputValue", 12, null), p = prop(u, "dropdownValue", 12, null), m = prop(u, "inputType", 8, "text"), v = prop(u, "label", 24, () => void 0), y = prop(u, "labelPosition", 8, "above"), b = prop(u, "placeholder", 24, () => void 0), x = prop(u, "disabled", 8, !1), S = prop(u, "readonly", 8, !1), w = prop(u, "error", 24, () => void 0), T = prop(u, "updateOnChange", 8, !0), E = prop(u, "helpText", 24, () => void 0), D = prop(u, "options", 24, () => []), O = createEventDispatcher(), k = (l) => {
+		p(l.detail), O("pick", l.detail);
+	}, j = (l) => {
+		f(l.detail), O("change", l.detail);
 	};
 	init$1(), Field(l, {
 		get helpText() {
-			return O();
+			return E();
 		},
 		get label() {
 			return v();
@@ -50047,9 +50058,6 @@ function InputDropdown_1(l, u) {
 				get updateOnChange() {
 					return T();
 				},
-				get error() {
-					return w();
-				},
 				get disabled() {
 					return x();
 				},
@@ -50068,19 +50076,13 @@ function InputDropdown_1(l, u) {
 				get inputType() {
 					return m();
 				},
-				get quiet() {
-					return E();
-				},
-				get autofocus() {
-					return D();
-				},
 				get options() {
-					return k();
+					return D();
 				},
 				isOptionSelected: (l) => l === p(),
 				$$events: {
-					change: N,
-					pick: M,
+					change: j,
+					pick: k,
 					click(l) {
 						bubble_event.call(this, u, l);
 					},

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.39.26",
+  "version": "3.39.28",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -105,5 +105,5 @@
       }
     }
   },
-  "gitHead": "6d7fa46d35e6d68da050e76f4c1662adaf25a182"
+  "gitHead": "1ad76cd4e4a5dc308900e2a7db331e20a013f65c"
 }

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">

package/src/Form/Core/InputDropdown.svelte

@@ -19,7 +19,7 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionSubtitle = option => option?.subtitle
-  export let isOptionSelected = () => false
+  export let isOptionSelected = _option => false
 
   const dispatch = createEventDispatcher()
   let open = false

package/src/Form/InputDropdown.svelte

@@ -1,30 +1,38 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import InputDropdown from "./Core/InputDropdown.svelte"
   import { createEventDispatcher } from "svelte"
+  import type { LabelPosition } from "../types"
 
-  export let inputValue = null
-  export let dropdownValue = null
+  interface Option {
+    label?: string
+    value?: string
+    subtitle?: string
+  }
+
+  export let inputValue: string | null = null
+  export let dropdownValue: string | null = null
   export let inputType = "text"
-  export let label = null
-  export let labelPosition = "above"
-  export let placeholder = null
+  export let label: string | undefined = undefined
+  export let labelPosition: LabelPosition = "above"
+  export let placeholder: string | undefined = undefined
   export let disabled = false
   export let readonly = false
-  export let error = null
+  export let error: string | undefined = undefined
   export let updateOnChange = true
-  export let quiet = false
-  export let autofocus
-  export let helpText = null
-  export let options = []
+  export let helpText: string | undefined = undefined
+  export let options: Option[] = []
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{
+    pick: string | null
+    change: string
+  }>()
 
-  const onPick = e => {
+  const onPick = (e: CustomEvent<string | null>) => {
     dropdownValue = e.detail
     dispatch("pick", e.detail)
   }
-  const onChange = e => {
+  const onChange = (e: CustomEvent<string>) => {
     inputValue = e.detail
     dispatch("change", e.detail)
   }
@@ -33,15 +41,12 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <InputDropdown
     {updateOnChange}
-    {error}
     {disabled}
     {readonly}
     {inputValue}
     {dropdownValue}
     {placeholder}
     {inputType}
-    {quiet}
-    {autofocus}
     {options}
     isOptionSelected={option => option === dropdownValue}
     on:change={onChange}