feat(rdom-forms): update range() value label handling

thi-ng · Dec 10, 2023 · 41f97d3 · 41f97d3
1 parent 9faaf26
commit 41f97d3
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 28 deletions.
diff --git a/packages/rdom-forms/src/api.ts b/packages/rdom-forms/src/api.ts
@@ -1,4 +1,4 @@
-import type { Predicate } from "@thi.ng/api";
+import type { Fn, Predicate } from "@thi.ng/api";
 import type {
 	Attribs,
 	FormAttribs,
@@ -75,8 +75,7 @@ export interface Num extends Value, WithPresets<number> {
 
 export interface Range extends Omit<Num, "type" | "placeholder" | "size"> {
 	type: "range";
-	vlabel?: boolean;
-	vlabelPrec?: number;
+	vlabel?: boolean | number | Fn<number, string>;
 }
 
 export interface Str extends Value, WithPresets<string> {
@@ -280,7 +279,12 @@ export interface TypeAttribs
 	/**
 	 * Attribs for {@link range} label elements
 	 */
-	rangeLabelAttribs: Partial<Attribs>;
+	rangeLabel: Partial<Attribs>;
+	/**
+	 * Attribs for the wrapper element of a single {@link range} widget (incl.
+	 * input element and optional value label)
+	 */
+	rangeWrapper: Partial<Attribs>;
 
 	[id: string]: Partial<Attribs>;
 }
@@ -342,5 +346,17 @@ export interface BehaviorOpts {
 	 * @defaultValue false
 	 */
 	radioLabelBefore: boolean;
+	/**
+	 * Number of fractional digits for range sliders.
+	 *
+	 * @defaultValue 2
+	 */
+	rangeLabelFmt: number | Fn<number, string>;
+	/**
+	 * If true, the label for toggle widgets will come before the actual
+	 * input element. By default, the order is reversed.
+	 *
+	 * @defaultValue false
+	 */
 	toggleLabelBefore: boolean;
 }
diff --git a/packages/rdom-forms/src/compile.ts b/packages/rdom-forms/src/compile.ts
@@ -470,33 +470,39 @@ export const compileForm: MultiFn2<
 			const val = <Range>$val;
 			const edit =
 				opts.behaviors?.rangeOnInput === false ? "onchange" : "oninput";
+			const children: ComponentLike[] = [
+				inputRange(
+					__attribs(
+						{
+							...opts.typeAttribs?.range,
+							min: val.min,
+							max: val.max,
+							step: val.step,
+						},
+						{ [edit]: $inputNum(val.value!) },
+						val,
+						opts
+					)
+				),
+			];
+			if (val.value && val.vlabel !== false && __useValues(opts)) {
+				const fmt =
+					val.vlabel === true || val.vlabel === undefined
+						? opts.behaviors?.rangeLabelFmt ?? 2
+						: val.vlabel;
+				children.push(
+					span(
+						{ ...opts.typeAttribs?.rangeLabel },
+						val.value.map(
+							isFunction(fmt) ? fmt : (x) => x.toFixed(fmt)
+						)
+					)
+				);
+			}
 			return div(
 				{ ...opts.wrapperAttribs, ...val.wrapperAttribs },
 				...__genCommon(val, opts),
-				div(
-					{},
-					inputRange(
-						__attribs(
-							{
-								...opts.typeAttribs?.range,
-								min: val.min,
-								max: val.max,
-								step: val.step,
-							},
-							{ [edit]: $inputNum(val.value!) },
-							val,
-							opts
-						)
-					),
-					val.value && val.vlabel !== false && __useValues(opts)
-						? span(
-								{ ...opts.typeAttribs?.rangeLabel },
-								val.value.map((x) =>
-									x.toFixed(val.vlabelPrec ?? 3)
-								)
-						  )
-						: undefined
-				)
+				div({ ...opts.typeAttribs?.rangeWrapper }, ...children)
 			);
 		},