@torpor/ui 0.4.0 → 1.0.1

package/dist/SelectBox/index.d.ts

@@ -5,21 +5,39 @@ interface SelectBoxProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The data value selected by the user */
-	value?: any,
-	/** Whether the popout is visible  */
-	visible?: boolean,
-	/** A function to be called when the user selects a response */
-	callback?: ((value: any) => void),
-	/** Raised when the popout is opened or closed */
-	ontoggle?: (open: boolean) => void,
+	style?: StyleValue;
+	/** The name of the input's form data field */
+	name?: string;
+	/** The data value selected by the user, or an array of values if multiple is set */
+	value: Bindable<any>;
+	/** Whether multiple values can be selected at the same time */
+	multiple?: boolean;
+	/**
+	 * Reads options from the network (or anywhere async) when the box is
+	 * shown. When set and no content is slotted in, the options are rendered
+	 * automatically.
+	 */
+	load?: Loader;
+	/** Called after each successful load with the normalized result */
+	onload?: (result: LoadResult) => void;
+	/** Extracts the display text for a loaded item (defaults to `label ?? text ?? item`) */
+	getItemLabel?: (item: any) => any;
+	/** Extracts the value for a loaded item (defaults to `value ?? id`) */
+	getItemValue?: (item: any) => any;
+	/** Text to display when the input value is empty */
+	placeholder?: string;
+	///** Whether the input's value is required */
+	//required?: boolean,
+	/** Whether the popout is visible; only bind this to control it from outside */
+	visible?: Bindable<boolean | undefined>;
+	/** Raised when the value has changed */
+	onchange?: (value: any) => void;
 	/** Raised when the popout has opened */
-	onopen?: () => void,
+	onopen?: () => void;
 	/** Raised when the popout has closed */
-	onclose?: (result: any) => void,
+	onclose?: (result: any) => void;
 }
 
 /**
@@ -31,8 +49,7 @@ interface SelectBoxProps {
  *
  * ```
  * <SelectBox>
- * 	<SelectBoxInput />
- * 	<SelectBoxTrigger /> (optional)
+ * 	<SelectBoxTrigger />
  * 	<SelectBoxContent />
  * </SelectBox>
  * ```
@@ -51,9 +68,9 @@ interface SelectBoxContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -70,51 +87,19 @@ declare function SelectBoxContent(
 
 
 
-interface SelectBoxInputProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The name of the input's form data field */
-	name?: string,
-	/** The value displayed in the input */
-	value?: any,
-	/** Text to display when the input value is empty */
-	placeholder?: string,
-	/** Whether the input's value is required */
-	required?: boolean,
-	/** An ARIA label for describing the input to screen readers when there is no associated label element */
-	ariaLabel?: string,
-	/** Raised on change */
-	onchange?: (e: Event) => void,
-}
-
-/**
- * The input that causes a SelectBox to appear or disappear.
- */
-declare function SelectBoxInput(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: SelectBoxInputProps | undefined,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
 interface SelectBoxTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
+	/** An ARIA label for describing the trigger to screen readers when there is no associated label element */
+	ariaLabel?: string;
 }
 
 /**
- * The button that causes a SelectBox to appear or disappear.
+ * The input that causes a SelectBox to appear or disappear.
  */
 declare function SelectBoxTrigger(
 	$parent: ParentNode,
@@ -124,4 +109,4 @@ declare function SelectBoxTrigger(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { SelectBox, SelectBoxContent, SelectBoxInput, SelectBoxTrigger };
+export { SelectBox, SelectBoxContent, SelectBoxTrigger };

package/dist/SelectBox/index.js

@@ -1,18 +1,5 @@
-// src/SelectBox/SelectBox.torp
-import SelectBox_default from "./SelectBox.torp";
-
-// src/SelectBox/SelectBoxContent.torp
-import SelectBoxContent_default from "./SelectBoxContent.torp";
-
-// src/SelectBox/SelectBoxInput.torp
-import SelectBoxInput_default from "./SelectBoxInput.torp";
-
-// src/SelectBox/SelectBoxTrigger.torp
-import SelectBoxTrigger_default from "./SelectBoxTrigger.torp";
-export {
-  SelectBox_default as SelectBox,
-  SelectBoxContent_default as SelectBoxContent,
-  SelectBoxInput_default as SelectBoxInput,
-  SelectBoxTrigger_default as SelectBoxTrigger
-};
-//# sourceMappingURL=index.js.map
+import { n as normalizeLoadResult, t as createItemLoader } from "../loader-DEeG5vFY.js";
+import SelectBox from "./SelectBox.torp";
+import SelectBoxContent from "./SelectBoxContent.torp";
+import SelectBoxTrigger from "./SelectBoxTrigger.torp";
+export { SelectBox, SelectBoxContent, SelectBoxTrigger, createItemLoader, normalizeLoadResult };

package/dist/Slider/Slider.torp

@@ -0,0 +1,245 @@
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import $handle from "../utils/$handle";
+import {
+	type FieldContext,
+	FieldContextName,
+	type FormContext,
+	FormContextName,
+} from "../Form/FormTypes";
+import FormValues from "../Form/FormValues.torp";
+import createFormField from "../utils/formField";
+
+interface SliderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The minimum allowed value */
+	min?: number;
+	/** The maximum allowed value */
+	max?: number;
+	/** The amount by which the value is increased or decreased */
+	step?: number;
+	/** The current value of the slider */
+	value?: Bindable<number>;
+	/** The orientation of the slider */
+	orientation?: "horizontal" | "vertical";
+	/** If set to true, the user cannot interact with this slider */
+	disabled?: boolean;
+	/** An accessible name for the slider */
+	ariaLabel?: string;
+	/** The name of the component's form data field */
+	name?: string;
+	/** Raised when the value has changed */
+	onchange?: (value: number) => void;
+}
+
+/**
+ * An input where the user selects a value from within a given range, by
+ * dragging a thumb along a track or by using the keyboard.
+ *
+ * See [the WAI ARIA guidelines for Sliders](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).
+ */
+export default function Slider($props: SliderProps | undefined) {
+	let track: HTMLElement;
+	let thumb: HTMLElement;
+
+	// Wire up the enclosing Form and Field, if any
+	const form = createFormField(
+		$props?.name,
+		$context[FormContextName] as FormContext | undefined,
+		$context[FieldContextName] as FieldContext | undefined,
+	);
+
+	function getMin(): number {
+		return $props?.min ?? 0;
+	}
+	function getMax(): number {
+		return $props?.max ?? 100;
+	}
+	function getStep(): number {
+		const step = $props?.step ?? 1;
+		return step > 0 ? step : 1;
+	}
+	function getOrientation(): "horizontal" | "vertical" {
+		return $props?.orientation === "vertical" ? "vertical" : "horizontal";
+	}
+	function getDisabled(): boolean {
+		return $props?.disabled === true;
+	}
+
+	let $state = $watch({
+		value: 0,
+	});
+
+	$bind($state, $props, "value");
+
+	// Dispatch the change event when the value changes
+	$handle((first) => {
+		const value = $state.value;
+		if (!first) $props?.onchange?.(value);
+	});
+
+	function clamp(value: number): number {
+		return Math.min(getMax(), Math.max(getMin(), value));
+	}
+
+	// Snap a raw position-derived value to the nearest step multiple
+	function snap(value: number): number {
+		const min = getMin();
+		const snapped = min + Math.round((value - min) / getStep()) * getStep();
+		return snapped === -0 ? 0 : snapped;
+	}
+
+	// The clamped value that is displayed and reported to assistive tech
+	function getValue(): number {
+		return clamp($state.value);
+	}
+
+	// The percentage of the range that the value represents (0..100)
+	function getPct(): number {
+		const min = getMin();
+		const max = getMax();
+		if (max <= min) return 0;
+		return ((getValue() - min) / (max - min)) * 100;
+	}
+
+	function setValue(value: number) {
+		const next = clamp(snap(value));
+		if (next !== $state.value) {
+			$state.value = next;
+			form.handleInput();
+			return true;
+		}
+		return false;
+	}
+
+	// Convert a pointer position into a value along the track
+	function valueFromPointer(e: { clientX: number; clientY: number }): number {
+		const rect = track.getBoundingClientRect();
+		const horizontal = getOrientation() === "horizontal";
+		const pos = horizontal ? e.clientX - rect.left : e.clientY - rect.top;
+		const size = horizontal ? rect.width : rect.height;
+		if (!(size > 0)) {
+			return getValue();
+		}
+		const ratio = Math.min(1, Math.max(0, pos / size));
+		return getMin() + ratio * (getMax() - getMin());
+	}
+
+	let dragging = false;
+
+	function removeDragListeners() {
+		removeEventListener("mousemove", handleMouseMove);
+		removeEventListener("mouseup", handleMouseUp);
+	}
+
+	function handleMouseDown(e: MouseEvent) {
+		if (getDisabled()) return;
+		e.preventDefault();
+		dragging = true;
+		setValue(valueFromPointer(e));
+		thumb.focus();
+		addEventListener("mousemove", handleMouseMove);
+		addEventListener("mouseup", handleMouseUp);
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		if (!dragging || getDisabled()) return;
+		setValue(valueFromPointer(e));
+	}
+
+	function handleMouseUp() {
+		if (!dragging) return;
+		dragging = false;
+		removeDragListeners();
+	}
+
+	// Stop listening if the slider is unmounted mid-drag
+	$onmount(() => {
+		return () => removeDragListeners();
+	});
+
+	function handleKey(e: KeyboardEvent) {
+		if (getDisabled()) return;
+
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowUp": {
+				e.preventDefault();
+				setValue($state.value + getStep());
+				break;
+			}
+			case "ArrowLeft":
+			case "ArrowDown": {
+				e.preventDefault();
+				setValue($state.value - getStep());
+				break;
+			}
+			case "PageUp": {
+				e.preventDefault();
+				setValue($state.value + getStep() * 10);
+				break;
+			}
+			case "PageDown": {
+				e.preventDefault();
+				setValue($state.value - getStep() * 10);
+				break;
+			}
+			case "Home": {
+				e.preventDefault();
+				setValue(getMin());
+				break;
+			}
+			case "End": {
+				e.preventDefault();
+				setValue(getMax());
+				break;
+			}
+		}
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-slider", getDisabled() ? "torp-slider-disabled" : undefined, $props?.class]}
+			{$props?.style}
+			onmousedown={handleMouseDown}
+			&ref={track}
+		>
+			<div class="torp-slider-fill" style={`${getOrientation() === "vertical" ? "height" : "width"}: ${getPct()}%;`} />
+			<div
+				class="torp-slider-thumb"
+				style={`position: absolute; transform: translate(-50%, -50%); ${getOrientation() === "vertical" ? `top: ${getPct()}%; left: 50%` : `left: ${getPct()}%; top: 50%`};`}
+				role="slider"
+				tabindex={getDisabled() ? -1 : 0}
+				aria-orientation={getOrientation()}
+				aria-valuemin={getMin()}
+				aria-valuemax={getMax()}
+				aria-valuenow={getValue()}
+				aria-label={$props?.ariaLabel}
+				aria-disabled={getDisabled() ? "true" : undefined}
+				data-valid={form.valid ? "valid" : "invalid"}
+				aria-describedby={form.messageId}
+				aria-invalid={form.inField && !form.valid ? "true" : undefined}
+				onblur={form.handleBlur}
+				onkeydown={handleKey}
+				&ref={thumb}
+			/>
+		</div>
+
+		<FormValues name={form.name} value={getValue()} />
+	}
+
+	@style {
+		/* Headless: all positioning is done with inline styles (so that theme
+		   CSS can't dislodge the thumb from the track). All appearance is up
+		   to the consuming theme */
+		.torp-slider {
+			position: relative;
+			touch-action: none;
+		}
+	}
+}

package/dist/Slider/index.d.ts

@@ -0,0 +1,45 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface SliderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The minimum allowed value */
+	min?: number;
+	/** The maximum allowed value */
+	max?: number;
+	/** The amount by which the value is increased or decreased */
+	step?: number;
+	/** The current value of the slider */
+	value?: Bindable<number>;
+	/** The orientation of the slider */
+	orientation?: "horizontal" | "vertical";
+	/** If set to true, the user cannot interact with this slider */
+	disabled?: boolean;
+	/** An accessible name for the slider */
+	ariaLabel?: string;
+	/** The name of the component's form data field */
+	name?: string;
+	/** Raised when the value has changed */
+	onchange?: (value: number) => void;
+}
+
+/**
+ * An input where the user selects a value from within a given range, by
+ * dragging a thumb along a track or by using the keyboard.
+ *
+ * See [the WAI ARIA guidelines for Sliders](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).
+ */
+declare function Slider(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: SliderProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Slider };

package/dist/Slider/index.js

@@ -0,0 +1,2 @@
+import Slider from "./Slider.torp";
+export { Slider };

package/dist/Splitter/Splitter.torp

@@ -0,0 +1,156 @@
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import $handle from "../utils/$handle";
+import { type SplitterContext, SplitterContextName } from "./SplitterTypes";
+
+interface SplitterProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The orientation of the splitter (default horizontal) */
+	orientation?: "horizontal" | "vertical";
+	/** The percentage of the container taken up by the primary (first) pane */
+	value?: Bindable<number>;
+	/** The minimum percentage for the primary pane (default 0) */
+	min?: number;
+	/** The maximum percentage for the primary pane (default 100) */
+	max?: number;
+	/** The percentage by which keyboard interaction changes the value (default 1) */
+	step?: number;
+	/** If set to true, the user cannot interact with this splitter */
+	disabled?: boolean;
+	/** Raised when the value has changed */
+	onchange?: (value: number) => void;
+}
+
+/**
+ * Two resizable panes with a separator between them, which the user can drag
+ * or move with the keyboard to resize the panes.
+ *
+ * See [the WAI ARIA guidelines for Window Splitters](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).
+ *
+ * The structure of a Splitter is:
+ *
+ * ```
+ * <Splitter>
+ * 	<SplitterPane>...</SplitterPane>
+ * 	<SplitterHandle ariaLabel="Resize" />
+ * 	<SplitterPane>...</SplitterPane>
+ * </Splitter>
+ * ```
+ */
+export default function Splitter($props: SplitterProps | undefined) {
+	let container: HTMLElement;
+
+	let $state = $watch({
+		value: 50,
+		panes: [] as SplitterPaneStateLite[],
+	});
+
+	interface SplitterPaneStateLite {
+		index: number;
+	}
+
+	$bind($state, $props, "value");
+
+	// Keep the stored value clamped, so that out-of-range initial values or
+	// min/max changes don't later surface as user changes
+	$run(() => {
+		const clamped = getValue();
+		if (clamped !== $state.value) {
+			$state.value = clamped;
+		}
+	});
+
+	// Set the context to pass down to panes and handles
+	const context: SplitterContext = {
+		registerPane,
+		removePane,
+		getOrientation,
+		getValue,
+		getMin,
+		getMax,
+		getStep,
+		getDisabled,
+		setValue,
+		count: () => $state.panes.length,
+		getContainer: () => container,
+	};
+	$context[SplitterContextName] = context;
+
+	// Dispatch the change event when the value changes
+	$handle((first) => {
+		const value = getValue();
+		if (!first) $props?.onchange?.(value);
+	});
+
+	function getOrientation(): "horizontal" | "vertical" {
+		return $props?.orientation === "vertical" ? "vertical" : "horizontal";
+	}
+
+	function getMin(): number {
+		return clampPercent($props?.min ?? 0);
+	}
+
+	function getMax(): number {
+		return clampPercent($props?.max ?? 100);
+	}
+
+	function clampPercent(value: number): number {
+		return Math.min(100, Math.max(0, value));
+	}
+
+	function getStep(): number {
+		const step = $props?.step ?? 1;
+		return step > 0 ? step : 1;
+	}
+
+	function getDisabled(): boolean {
+		return $props?.disabled === true;
+	}
+
+	// The clamped value that is applied to the primary pane
+	function getValue(): number {
+		return Math.min(getMax(), Math.max(getMin(), $state.value));
+	}
+
+	function setValue(value: number) {
+		$state.value = Math.min(getMax(), Math.max(getMin(), value));
+	}
+
+	function registerPane(): SplitterPaneStateLite {
+		const state: SplitterPaneStateLite = $watch({ index: $state.panes.length });
+		$state.panes.push(state);
+		return state;
+	}
+
+	function removePane(index: number) {
+		if (index >= 0 && index < $state.panes.length) {
+			$state.panes.splice(index, 1);
+		}
+		$state.panes.forEach((pane, i) => (pane.index = i));
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-splitter", $props?.class]}
+			{$props?.style}
+			data-orientation={getOrientation()}
+			style={`flex-direction: ${getOrientation()};`}
+			&ref={container}
+		>
+			<slot />
+		</div>
+	}
+
+	@style {
+		/* Headless: layout only, so the panes split the container. All other
+		   appearance is up to the consuming theme */
+		.torp-splitter {
+			display: flex;
+		}
+	}
+}