@rvx/ui 0.1.12 → 0.1.14

package/src/common/theme.tsx

@@ -33,6 +33,7 @@ export interface Theme {
 	button_text?: string;
 
 	card?: string;
+	card_raw?: string;
 	card_content?: string;
 	card_default?: string;
 	card_info?: string;
@@ -41,6 +42,7 @@ export interface Theme {
 	card_danger?: string;
 
 	checkbox_label?: string;
+	checkbox_padding?: string;
 	checkbox_input?: string;
 	checkbox_content?: string;
 
@@ -52,6 +54,7 @@ export interface Theme {
 	collapse_content?: string;
 
 	column?: string;
+	column_padded?: string;
 	column_content?: string;
 	column_control?: string;
 
@@ -78,6 +81,10 @@ export interface Theme {
 
 	link?: string;
 
+	nav_list?: string;
+	nav_list_item?: string;
+	nav_list_item_current?: string;
+
 	page?: string;
 	page_scrollbar_comp?: string;
 	page_content_col?: string;
@@ -91,6 +98,7 @@ export interface Theme {
 
 	radio_buttons?: string;
 	radio_button_label?: string;
+	radio_button_padding?: string;
 	radio_button_input?: string;
 	radio_button_content?: string;
 
@@ -105,6 +113,15 @@ export interface Theme {
 	scroll_view_indicator_end?: string;
 	scroll_view_indicator_visible?: string;
 
+	slider_host?: string;
+
+	tab_handle?: string;
+	tab_handle_current?: string;
+	tab_list?: string;
+	tab_list_padded?: string;
+	tab_panel?: string;
+	tab_panel_padded?: string;
+
 	text_input?: string;
 
 	text?: string;

package/src/components/button.tsx

@@ -1,5 +1,6 @@
-import { ClassValue, Expression, get, optionalString, StyleValue } from "rvx";
+import { ClassValue, Expression, get, StyleValue } from "rvx";
 import { isPending } from "rvx/async";
+import { optionalString } from "rvx/convert";
 import { Action, handleActionEvent, keyFor } from "../common/events.js";
 import { THEME } from "../common/theme.js";
 import { Validator } from "./validation.js";
@@ -77,7 +78,7 @@ export function Button(props: {
 		aria-haspopup={props["aria-haspopup"]}
 		aria-controls={props["aria-controls"]}
 		aria-invalid={props.validator ? optionalString(props.validator.invalid) : undefined}
-		aria-errormessage={props.validator ? props.validator.errorMessageIds : undefined}
+		aria-errormessage={props.validator ? props.validator.messageIds : undefined}
 		autofocus={props.autofocus}
 
 		on:click={action}

package/src/components/card.tsx

@@ -1,4 +1,4 @@
-import { Expression, get } from "rvx";
+import { Expression, map } from "rvx";
 import { THEME } from "../common/theme.js";
 import { Column } from "./column.js";
 
@@ -6,17 +6,22 @@ export type CardVariant = "default" | "info" | "success" | "warning" | "danger";
 
 export function Card(props: {
 	variant?: Expression<CardVariant | undefined>;
+	raw?: boolean;
 	children?: unknown;
 }): unknown {
 	const theme = THEME.current;
 	return <div
 		class={[
 			theme?.card,
-			() => theme?.[`card_${get(props.variant) ?? "default"}`],
+			map(props.variant, variant => theme?.[`card_${variant ?? "default"}`]),
+			map(props.raw, unpadded => unpadded ? theme?.card_raw : undefined),
 		]}
 	>
-		<Column class={theme?.card_content}>
-			{props.children}
-		</Column>
+		{props.raw
+			? props.children
+			: <Column class={theme?.card_content}>
+				{props.children}
+			</Column>
+		}
 	</div>;
 }

package/src/components/checkbox.tsx

@@ -1,10 +1,10 @@
-import { ClassValue, Expression, get, optionalString, Signal, string, StyleValue, watch } from "rvx";
+import { ClassValue, Expression, get, Signal, StyleValue, uniqueId, watch } from "rvx";
 import { isPending } from "rvx/async";
-import { uniqueId } from "rvx/id";
 
+import { optionalString, string } from "rvx/convert";
 import { THEME } from "../common/theme.js";
 import { Text } from "./text.js";
-import { validatorFor } from "./validation.js";
+import { closestValidator } from "./validation.js";
 
 export function Checkbox(props: {
 	checked?: Expression<boolean | undefined>;
@@ -23,7 +23,7 @@ export function Checkbox(props: {
 		? () => isPending() || get(props.disabled)
 		: () => true;
 
-	const validator = props.checked instanceof Signal ? validatorFor(props.checked) : undefined;
+	const validator = props.checked instanceof Signal ? closestValidator(props.checked) : undefined;
 
 	const input = <input
 		id={id}
@@ -36,7 +36,7 @@ export function Checkbox(props: {
 		}}
 		aria-readonly={string(!(props.checked instanceof Signal))}
 		aria-invalid={validator ? optionalString(validator.invalid) : undefined}
-		aria-errormessage={validator ? validator.errorMessageIds : undefined}
+		aria-errormessage={validator ? validator.messageIds : undefined}
 		autofocus={props.autofocus}
 		disabled={disabled}
 	/> as HTMLInputElement;
@@ -54,7 +54,7 @@ export function Checkbox(props: {
 		]}
 		style={props.style}
 	>
-		{input}
+		{theme?.checkbox_padding ? <div class={theme.checkbox_padding}>{input}</div> : input}
 		<Text class={theme?.checkbox_content}>
 			{props.children}
 		</Text>

package/src/components/collapse.tsx

@@ -1,10 +1,12 @@
-import { $, ClassValue, Expression, get, map, optionalString, StyleValue, teardown } from "rvx";
-import { Event } from "rvx/event";
+import { $, ClassValue, Component, Event, Expression, For, get, map, Signal, StyleValue, teardown, watch } from "rvx";
+import { useMicrotask, useTimeout } from "rvx/async";
+import { optionalString } from "rvx/convert";
 import { THEME } from "../common/theme.js";
 import { AriaLive, AriaRelevant } from "../common/types.js";
 
 export function Collapse(props: {
 	visible?: Expression<boolean | undefined>;
+	fadein?: Expression<boolean | undefined>;
 	alert?: Event<[]>;
 	children?: unknown;
 	class?: ClassValue;
@@ -15,7 +17,6 @@ export function Collapse(props: {
 	"aria-atomic"?: Expression<boolean | undefined>;
 }): unknown {
 	const theme = THEME.current;
-	const visible = map(props.visible, v => v ?? false);
 	const alert = $(false);
 	const size = $<number | undefined>(undefined);
 
@@ -37,7 +38,7 @@ export function Collapse(props: {
 	});
 
 	props.alert?.(() => {
-		if (get(visible)) {
+		if (get(props.visible) ?? false) {
 			alert.value = false;
 			// Force a reflow:
 			void root.offsetWidth;
@@ -45,8 +46,27 @@ export function Collapse(props: {
 		}
 	});
 
+	let visible = props.visible;
+	if (props.fadein !== undefined) {
+		const visibleSig = visible = $(false);
+		watch(props.visible, visible => {
+			const fadein = get(props.fadein);
+			if (fadein) {
+				visibleSig.value = false;
+				let handle = requestAnimationFrame(() => {
+					handle = requestAnimationFrame(() => {
+						visibleSig.value = visible ?? false;
+					});
+				});
+				teardown(() => cancelAnimationFrame(handle));
+			} else {
+				visibleSig.value = visible ?? false;
+			}
+		});
+	}
+
 	const root = <div
-		inert={map(visible, v => !v)}
+		inert={map(props.visible, v => !v)}
 		class={[
 			theme?.collapse,
 			() => size.value === undefined ? undefined : theme?.collapse_sized,
@@ -73,3 +93,105 @@ export function Collapse(props: {
 	</div> as HTMLDivElement;
 	return root;
 }
+
+export interface CollapseItem<T> {
+	value: T;
+	alert?: Event<[]>;
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	"aria-live"?: Expression<AriaLive | undefined>;
+	"aria-relevant"?: Expression<AriaRelevant | undefined>;
+	"aria-atomic"?: Expression<boolean | undefined>;
+}
+
+export function CollapseFor<T>(props: {
+	each: Expression<Iterable<CollapseItem<T>>>;
+	children: Component<T>;
+}): unknown {
+
+	interface Entry {
+		/** item */
+		i: CollapseItem<T>;
+		/** visible */
+		v: Signal<boolean>;
+	}
+
+	const entries = $<Entry[]>([]);
+	const fadein = $(false);
+	useMicrotask(() => fadein.value = true);
+
+	watch(() => {
+		const iter = get(props.each);
+		return Array.isArray(iter) ? iter : Array.from(iter);
+	}, items => {
+		entries.update(entries => {
+			let itemIndex = 0;
+			let entryIndex = 0;
+
+			function hasRemainingItem(value: T): boolean {
+				for (let i = itemIndex + 1; i < items.length; i++) {
+					if (Object.is(items[i].value, value)) {
+						return true;
+					}
+				}
+				return false;
+			}
+
+			function spliceRemainingEntry(value: T): Entry | undefined {
+				for (let i = entryIndex + 1; i < entries.length; i++) {
+					if (Object.is(entries[i].i.value, value)) {
+						return entries.splice(i, 1)[0];
+					}
+				}
+			}
+
+			items: while (itemIndex < items.length) {
+				const item = items[itemIndex];
+				let entry = entries[entryIndex] as Entry | undefined;
+				if (entry && Object.is(entry.i.value, item.value)) {
+					entry.v.value = true;
+				} else if (entry && !hasRemainingItem(entry.i.value)) {
+					entry.v.value = false;
+					entryIndex++;
+					continue items;
+				} else if (entry = spliceRemainingEntry(item.value)) {
+					entries.splice(entryIndex, 0, entry);
+					entry.v.value = true;
+				} else {
+					entries.splice(entryIndex, 0, { i: item, v: $(true) });
+				}
+				itemIndex++;
+				entryIndex++;
+			}
+
+			while (entryIndex < entries.length) {
+				entries[entryIndex].v.value = false;
+				entryIndex++;
+			}
+		});
+
+		useTimeout(() => {
+			const filtered = entries.value.filter(e => e.v.value);
+			if (filtered.length < entries.value.length) {
+				entries.value = filtered;
+			}
+		}, 1000);
+	});
+
+	return <For each={entries}>
+		{instance => <Collapse
+			visible={instance.v}
+			fadein={fadein}
+			alert={instance.i.alert}
+			class={instance.i.class}
+			style={instance.i.style}
+			id={instance.i.id}
+			aria-live={instance.i["aria-live"]}
+			aria-relevant={instance.i["aria-relevant"]}
+			aria-atomic={instance.i["aria-atomic"]}
+		>
+			{props.children(instance.i.value)}
+		</Collapse>}
+	</For>;
+}

package/src/components/column.tsx

@@ -11,12 +11,14 @@ export function Column(props: {
 	style?: StyleValue;
 	id?: Expression<string | undefined>;
 	children?: unknown;
+	padded?: boolean;
 }): unknown {
 	const theme = THEME.current;
 	return <div
 		class={[
 			theme?.column,
 			map(props.size, size => theme?.[`column_${size ?? "content"}`]),
+			map(props.padded, padded => padded ? theme?.column_padded : undefined),
 			props.class,
 		]}
 		style={props.style}

package/src/components/dialog.tsx

@@ -1,7 +1,5 @@
-import { $, captureSelf, ClassValue, Context, created, Expression, map, render, StyleValue, teardown } from "rvx";
-import { TASKS, Tasks } from "rvx/async";
-import { Emitter, Event } from "rvx/event";
-import { uniqueId } from "rvx/id";
+import { $, captureSelf, ClassValue, Context, Emitter, Event, Expression, map, render, StyleValue, teardown, uniqueId } from "rvx";
+import { TASKS, Tasks, useMicrotask } from "rvx/async";
 import { FlexSpace, Heading, Row, Text, THEME } from "../index.js";
 import { LAYER, Layer } from "./layer.js";
 
@@ -126,7 +124,7 @@ export function DialogBody(props: {
 		</div>
 	</div> as HTMLElement;
 
-	created(() => {
+	useMicrotask(() => {
 		if (theme?.dialog_fadein) {
 			body.offsetParent;
 			body.classList.add(theme.dialog_fadein);

package/src/components/dropdown-input.tsx

@@ -2,7 +2,7 @@ import { ClassValue, Expression, get, map, Signal, StyleValue } from "rvx";
 import { Button, ButtonVariant } from "./button.js";
 import { Dropdown, DropdownItem } from "./dropdown.js";
 import { PopoutAlignment, PopoutPlacement } from "./popout.js";
-import { validatorFor } from "./validation.js";
+import { closestValidator } from "./validation.js";
 
 export interface DropdownValue<T> {
 	value: T;
@@ -46,7 +46,7 @@ export function DropdownInput<T>(props: {
 			role="combobox"
 			aria-label={props["aria-label"]}
 			aria-labelledby={props["aria-labelledby"]}
-			validator={props.value instanceof Signal ? validatorFor(props.value) : undefined}
+			validator={props.value instanceof Signal ? closestValidator(props.value) : undefined}
 		>
 			{props.children ?? (() => {
 				const value = get(props.value);

package/src/components/dropdown.tsx

@@ -1,5 +1,5 @@
-import { $, ClassValue, Expression, For, get, map, memo, optionalString, render, StyleValue, View, watch } from "rvx";
-import { uniqueId } from "rvx/id";
+import { $, ClassValue, Expression, For, get, map, memo, render, StyleValue, uniqueId, View, watch } from "rvx";
+import { optionalString } from "rvx/convert";
 import { Action, createPassiveActionEvent, handleActionEvent, keyFor, startDelayedHoverOnMouseenter } from "../common/events.js";
 import { THEME } from "../common/theme.js";
 import { LAYER } from "./layer.js";

package/src/components/label.tsx

@@ -1,7 +1,5 @@
-import { ClassValue, Expression, StyleValue } from "rvx";
-
+import { ClassValue, Expression, StyleValue, uniqueId } from "rvx";
 import { THEME } from "../common/theme.js";
-import { uniqueId } from "rvx/id";
 
 export function Label(props: {
 	class?: ClassValue;

package/src/components/link.tsx

@@ -1,5 +1,6 @@
-import { ClassValue, Expression, get, map, optionalString, StyleValue } from "rvx";
+import { ClassValue, Expression, get, map, StyleValue } from "rvx";
 import { isPending } from "rvx/async";
+import { optionalString } from "rvx/convert";
 import { Action, handleActionEvent, keyFor } from "../common/events.js";
 import { THEME } from "../common/theme.js";
 import { separated } from "../common/types.js";

package/src/components/nav-list.tsx

@@ -0,0 +1,81 @@
+import { ClassValue, Expression, get, map, StyleValue } from "rvx";
+import { isPending } from "rvx/async";
+import { optionalString } from "rvx/convert";
+import { Action, handleActionEvent, keyFor } from "../common/events.js";
+import { THEME } from "../common/theme.js";
+
+export function NavList(props: {
+	/**
+	 * The element role or `false` to disable.
+	 *
+	 * @default "navigation"
+	 */
+	role?: Expression<string | false | undefined>;
+
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	children?: unknown;
+}): unknown {
+	const theme = THEME.current;
+	return <div
+		class={[
+			theme?.nav_list,
+			props.class,
+		]}
+		style={[
+			{ "--nav-list-depth": String(0) },
+			props.style,
+		]}
+		id={props.id}
+		role={map(props.role, role => role ?? "navigation")}
+	>
+		{props.children}
+	</div>;
+}
+
+export function NavListButton(props: {
+	/**
+	 * True if this is the currently selected item.
+	 */
+	current?: Expression<boolean | undefined>;
+
+	disabled?: Expression<boolean | undefined>;
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	action?: Action;
+	children?: unknown;
+}): unknown {
+	const theme = THEME.current;
+	const disabled = () => isPending() || get(props.disabled);
+
+	function action(event: Event) {
+		if (disabled() || !props.action) {
+			return;
+		}
+		handleActionEvent(event, props.action);
+	}
+
+	return <button
+		type="button"
+		disabled={disabled}
+		class={[
+			theme?.nav_list_item,
+			map(props.current, current => current && theme?.nav_list_item_current),
+			props.class,
+		]}
+		style={props.style}
+		id={props.id}
+		on:click={action}
+		on:keydown={event => {
+			const key = keyFor(event);
+			if (key === "enter" || key === "space") {
+				action(event);
+			}
+		}}
+		aria-current={optionalString(props.current)}
+	>
+		{props.children}
+	</button>;
+}

package/src/components/popout.tsx

@@ -1,5 +1,4 @@
-import { $, captureSelf, Context, Expression, get, render, teardown, TeardownHook, untrack, View, viewNodes } from "rvx";
-import { Emitter, Event as RvxEvent } from "rvx/event";
+import { $, captureSelf, Context, Emitter, Expression, get, render, Event as RvxEvent, teardown, TeardownHook, untrack, View, viewNodes } from "rvx";
 import { PASSIVE_ACTION_EVENT } from "../common/events.js";
 import { axisEquals, Direction, DOWN, flip, getBlockStart, getInlineStart, getSize, getWindowSize, getWindowSpaceAround, INSET, LEFT, RIGHT, ScriptDirection, UP, WritingMode } from "../common/writing-mode.js";
 import { LAYER, Layer } from "./layer.js";

package/src/components/popover.tsx

@@ -1,5 +1,4 @@
-import { $, ClassValue, Expression, get, Inject, map, render, StyleValue, SVG, watch, XMLNS } from "rvx";
-import { uniqueId } from "rvx/id";
+import { $, ClassValue, Expression, get, Inject, map, render, StyleValue, SVG, uniqueId, watch, XMLNS } from "rvx";
 import { Action } from "../common/events.js";
 import { THEME } from "../common/theme.js";
 import { DOWN, getSize, getXY, LEFT, RIGHT, UP } from "../common/writing-mode.js";

package/src/components/radio-buttons.tsx

@@ -1,9 +1,9 @@
-import { ClassValue, Expression, For, get, map, optionalString, Signal, string, StyleValue } from "rvx";
+import { ClassValue, Expression, For, get, map, Signal, StyleValue, uniqueId } from "rvx";
 import { isPending } from "rvx/async";
+import { optionalString, string } from "rvx/convert";
 import { THEME } from "../common/theme.js";
 import { Text } from "./text.js";
-import { validatorFor } from "./validation.js";
-import { uniqueId } from "rvx/id";
+import { closestValidator } from "./validation.js";
 
 export interface RadioOption<T> {
 	value: T;
@@ -32,7 +32,7 @@ export function RadioButtons<T>(props: {
 		? () => isPending() || get(props.disabled)
 		: true;
 
-	const validator = props.value instanceof Signal ? validatorFor(props.value) : undefined;
+	const validator = props.value instanceof Signal ? closestValidator(props.value) : undefined;
 
 	return <div
 		role="radiogroup"
@@ -44,33 +44,34 @@ export function RadioButtons<T>(props: {
 		style={props.style}
 		aria-readonly={string(!(props.options instanceof Signal))}
 		aria-invalid={validator ? optionalString(validator.invalid) : undefined}
-		aria-errormessage={validator ? validator.errorMessageIds : undefined}
+		aria-errormessage={validator ? validator.messageIds : undefined}
 		aria-label={props["aria-label"]}
 		aria-labelledby={props["aria-labelledby"]}
 	>
 		<For each={props.options}>
 			{(option, index) => {
 				const id = uniqueId();
+				const input = <input
+					id={id}
+					type="radio"
+					class={theme?.radio_button_input}
+					name={group}
+					value={id}
+					disabled={disabled}
+					autofocus={() => get(props.autofocus) && index() === 0}
+					prop:checked={map(props.value, x => x === option.value)}
+					on:input={() => {
+						if (props.value instanceof Signal) {
+							props.value.value = option.value;
+						}
+					}}
+				/>;
 
 				return <label
 					for={id}
 					class={theme?.radio_button_label}
 				>
-					<input
-						id={id}
-						type="radio"
-						class={theme?.radio_button_input}
-						name={group}
-						value={id}
-						disabled={disabled}
-						autofocus={() => get(props.autofocus) && index() === 0}
-						prop:checked={map(props.value, x => x === option.value)}
-						on:input={() => {
-							if (props.value instanceof Signal) {
-								props.value.value = option.value;
-							}
-						}}
-					/>
+					{theme?.radio_button_padding ? <div class={theme.radio_button_padding}>{input}</div> : input}
 					<Text class={theme?.radio_button_content}>
 						{option.label}
 					</Text>

package/src/components/slider.tsx

@@ -0,0 +1,55 @@
+import { Expression, map, Show, Signal, uniqueId } from "rvx";
+import { THEME } from "../common/theme.js";
+
+export function Slider(props: {
+	id?: Expression<string | undefined>;
+	value?: Expression<number | undefined>;
+	min?: Expression<number | undefined>;
+	max?: Expression<number | undefined>;
+	step?: Expression<number | "any" | undefined>;
+	markers?: Expression<number[] | undefined>;
+	children?: unknown;
+}) {
+	const theme = THEME.current;
+	const markerId = uniqueId();
+
+	const input = <input
+		id={props.id}
+		type="range"
+		min={map(props.min, min => min ?? 0)}
+		max={map(props.max, max => max ?? 100)}
+		step={map(props.step, step => step ?? 1)}
+		prop:value={map(props.value, value => value ?? "0")}
+		on:input={() => {
+			if (props.value instanceof Signal) {
+				props.value.value = Number(input.value);
+			}
+		}}
+		list={map(props.markers, markers => markers ? markerId : undefined)}
+	/> as HTMLInputElement;
+
+	return <div
+		class={theme?.slider_host}
+	>
+		{input}
+
+		<Show when={props.markers}>
+			{markers => <datalist id={markerId}>
+				{markers.map(marker => <option value={marker} />)}
+			</datalist>}
+		</Show>
+
+		{props.children}
+	</div>;
+}
+
+export function sliderMarkers(min: number, max: number, step: number): number[] {
+	if (min > max) {
+		[min, max] = [max, min];
+	}
+	const markers: number[] = [];
+	for (let i = min; i <= max; i += step) {
+		markers.push(i > max ? max : i);
+	}
+	return markers;
+}