@rvx/ui 0.1.13 → 0.1.15

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";
 
@@ -76,9 +74,7 @@ export function DialogBody(props: {
 	description?: unknown;
 
 	inlineSize?: Expression<string | undefined>;
-	maxInlineSize?: Expression<string | undefined>;
 	blockSize?: Expression<string | undefined>;
-	maxBlockSize?: Expression<string | undefined>;
 
 	"aria-labelledby"?: Expression<string | undefined>;
 	"aria-describedby"?: Expression<string | undefined>;
@@ -103,7 +99,13 @@ export function DialogBody(props: {
 			theme?.dialog_container,
 			props.class,
 		]}
-		style={props.style}
+		style={[
+			props.style,
+			{
+				"--dialog-inline-size": map(props.inlineSize, v => v ?? "auto"),
+				"--dialog-block-size": map(props.blockSize, v => v ?? "auto"),
+			},
+		]}
 		role={map(props.role, v => v ?? "dialog")}
 		aria-labelledby={map(props["aria-labelledby"], v => v ?? titleId)}
 		aria-describedby={map(props["aria-describedby"], v => v ?? descriptionId)}
@@ -114,19 +116,13 @@ export function DialogBody(props: {
 				theme?.column_content,
 				theme?.dialog_body,
 			]}
-			style={{
-				"inline-size": props.inlineSize,
-				"max-inline-size": props.maxInlineSize,
-				"block-size": props.blockSize,
-				"max-block-size": props.maxBlockSize,
-			}}
 		>
 			{head}
 			{props.children}
 		</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,8 +1,8 @@
-import { ClassValue, Expression, get, map, optionalString, StyleValue } from "rvx";
+import { ClassValue, Expression, get, map, StyleValue } from "rvx";
 import { isPending } from "rvx/async";
+import { optionalString, separated } from "rvx/convert";
 import { Action, handleActionEvent, keyFor } from "../common/events.js";
 import { THEME } from "../common/theme.js";
-import { separated } from "../common/types.js";
 
 export type LinkReferrerPolicy = "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
 

package/src/components/nav-list.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";
 

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

@@ -1,5 +1,4 @@
-import { Expression, map, Show, Signal } from "rvx";
-import { uniqueId } from "rvx/id";
+import { Expression, map, Show, Signal, uniqueId } from "rvx";
 import { THEME } from "../common/theme.js";
 
 export function Slider(props: {

package/src/components/tabs.tsx

@@ -0,0 +1,67 @@
+import { $, Component, Expression, For, get, map, Show, Signal, uniqueIdFor, watch } from "rvx";
+import { string } from "rvx/convert";
+import { THEME } from "../common/theme.js";
+
+export interface Tab {
+	label: Component;
+	content: Component;
+}
+
+export function Tabs(props: {
+	tabs: Expression<Iterable<Tab>>;
+	selected?: Signal<Tab | undefined>;
+	padded?: Expression<boolean | undefined>;
+}) {
+	const theme = THEME.current;
+	const selected = props.selected ?? $(undefined);
+
+	watch(selected, current => {
+		if (current === undefined) {
+			for (const tab of get(props.tabs)) {
+				selected.value = tab;
+				break;
+			}
+		}
+	});
+
+	return <>
+		<div
+			role="tablist"
+			class={[
+				theme?.tab_list,
+				map(props.padded, padded => padded ? theme?.tab_list_padded : undefined),
+			]}
+		>
+			<For each={props.tabs}>
+				{tab => <button
+					role="tab"
+					class={[
+						theme?.tab_handle,
+						() => selected.value === tab ? theme?.tab_handle_current : undefined,
+					]}
+					aria-selected={string(() => selected.value === tab)}
+					aria-controls={uniqueIdFor(tab)}
+					on:click={event => {
+						event.stopImmediatePropagation();
+						event.preventDefault();
+						selected.value = tab;
+					}}
+				>
+					{tab.label()}
+				</button>}
+			</For>
+		</div>
+		<Show when={selected}>
+			{tab => <div
+				role="tabpanel"
+				id={uniqueIdFor(tab)}
+				class={[
+					theme?.tab_panel,
+					map(props.padded, padded => padded ? theme?.tab_panel_padded : undefined),
+				]}
+			>
+				{tab.content()}
+			</div>}
+		</Show>
+	</>;
+}

package/src/components/text-input.tsx

@@ -1,8 +1,9 @@
-import { ClassValue, Expression, get, optionalString, Signal, StyleValue } from "rvx";
+import { ClassValue, Expression, get, Signal, StyleValue } from "rvx";
 import { isPending, waitFor } from "rvx/async";
+import { optionalString } from "rvx/convert";
 import { keyFor } from "../common/events.js";
 import { THEME } from "../common/theme.js";
-import { validatorFor } from "./validation.js";
+import { closestValidator } from "./validation.js";
 
 export type TextInputType = "text" | "password";
 export type TextAreaWrap = "hard" | "soft";
@@ -66,7 +67,7 @@ export function TextInput(props: ({
 	const theme = THEME.current;
 	const disabled = () => isPending() || get(props.disabled);
 
-	const validator = props.value instanceof Signal ? validatorFor(props.value) : undefined;
+	const validator = props.value instanceof Signal ? closestValidator(props.value) : undefined;
 
 	const InputTag = props.multiline ? "textarea" : "input";
 	const input = <InputTag
@@ -109,7 +110,7 @@ export function TextInput(props: ({
 		aria-labelledby={props["aria-labelledby"]}
 
 		aria-invalid={validator ? optionalString(validator.invalid) : undefined}
-		aria-errormessage={validator ? validator.errorMessageIds : undefined}
+		aria-errormessage={validator ? validator.messageIds : undefined}
 	/> as HTMLInputElement;
 
 	return input;

package/src/components/validation-rules.tsx

@@ -0,0 +1,50 @@
+import { $, Component, Expression, get, Signal, watchUpdates } from "rvx";
+import { Validator } from "./validation.js";
+
+export function rule<T>(source: Signal<T>, condition: (value: T) => boolean, message: Component): Signal<T> {
+	Validator.get(source).prependRule(() => {
+		if (!condition(source.value)) {
+			return [message];
+		}
+	});
+	return source;
+}
+
+export interface IntParserOptions {
+	/** The validation message for invalid formats. */
+	format: Component;
+	/** The validation message for an out of range value. Defaults to the format message. */
+	range?: Component;
+	min?: Expression<number>;
+	max?: Expression<number>;
+}
+
+export function intParser(source: Signal<number>, options: IntParserOptions): Signal<string> {
+	const input = $(String(source.value), source);
+
+	const messages = $<Component[]>([]);
+	Validator.get(source).prependRule(() => messages.value);
+
+	const min = options.min ?? Number.MIN_SAFE_INTEGER;
+	const max = options.max ?? Number.MAX_SAFE_INTEGER;
+
+	watchUpdates(source, value => {
+		input.value = String(value);
+	});
+
+	watchUpdates(input, value => {
+		if (/^-?\d+$/.test(value)) {
+			const num = Number.parseInt(value);
+			if (Number.isSafeInteger(num) && num >= get(min) && num <= get(max)) {
+				messages.value = [];
+				source.value = num;
+			} else {
+				messages.value = [options.range ?? options.format];
+			}
+		} else {
+			messages.value = [options.format];
+		}
+	});
+
+	return input;
+}