@rvx/ui 0.1.6

package/src/common/writing-mode.tsx

@@ -0,0 +1,150 @@
+
+/**
+ * A CSS writing mode property value.
+ */
+export type WritingMode = "horizontal-tb" | "vertical-rl" | "vertical-lr" | "sideways-rl" | "sideways-lr";
+
+/**
+ * A CSS script direction property value.
+ */
+export type ScriptDirection = "ltr" | "rtl";
+
+/** The up {@link Direction}. */
+export const UP = 0;
+/** The right {@link Direction}. */
+export const RIGHT = 1;
+/** The down {@link Direction}. */
+export const DOWN = 2;
+/** The left {@link Direction}. */
+export const LEFT = 3;
+
+/**
+ * Represents a direction ({@link UP}, {@link RIGHT}, {@link DOWN}, {@link LEFT}).
+ */
+export type Direction = typeof UP | typeof RIGHT | typeof DOWN | typeof LEFT;
+
+/**
+ * Can be indexed by a {@link Direction} to get the respective css inset property.
+ */
+export const INSET: Record<Direction, "top" | "right" | "bottom" | "left"> = ["top", "right", "bottom", "left"];
+
+/**
+ * Flip a direction.
+ */
+export function flip(dir: Direction): Direction {
+	return ((dir + 2) & 3) as Direction;
+}
+
+/**
+ * Check if the specified directions are along the same axis.
+ *
+ * @example
+ * ```tsx
+ * axisEquals(UP, UP) // true
+ * axisEquals(UP, DOWN) // true
+ * axisEquals(UP, RIGHT) // false
+ * ```
+ */
+export function axisEquals(a: Direction, b: Direction): boolean {
+	return (a & 1) === (b & 1);
+}
+
+/**
+ * Get the window size in CSS pixels along the axis of the specified direction.
+ *
+ * @example
+ * ```tsx
+ * getWindowSize(UP) === window.innerHeight // true
+ * getWindowSize(DOWN) === window.innerHeight // true
+ * ```
+ */
+export function getWindowSize(dir: Direction): number {
+	return (dir & 1) ? window.innerWidth : window.innerHeight;
+}
+
+export interface DOMRectSize {
+	width: number;
+	height: number;
+}
+
+/**
+ * Get the size in CSS pixels of a DOM rect along the axis of the specified direction.
+ *
+ * @example
+ * ```tsx
+ * getSize(button.getBoundingClientRect(), RIGHT) // 234.5
+ * ```
+ */
+export function getSize(rect: DOMRectSize, dir: Direction): number {
+	return (dir & 1) ? rect.width : rect.height;
+}
+
+export interface DOMRectXY {
+	x: number;
+	y: number;
+}
+
+/**
+ * Get the X/Y coordinate start in CSS pixels of the specified DOM rect along the axis of the specified direction.
+ */
+export function getXY(rect: DOMRectXY, dir: Direction): number {
+	return (dir & 1) ? rect.x : rect.y;
+}
+
+/**
+ * Get the block start direction with respect to the specified writing mode.
+ */
+export function getBlockStart(writingMode: WritingMode): Direction {
+	switch (writingMode) {
+		case "horizontal-tb":
+			return UP;
+
+		case "vertical-rl":
+		case "sideways-rl":
+			return RIGHT;
+
+		case "vertical-lr":
+		case "sideways-lr":
+			return LEFT;
+	}
+}
+
+/**
+ * Get the inline start direction with respect to the specified writing mode and script direction.
+ */
+export function getInlineStart(writingMode: WritingMode, scriptDir: ScriptDirection): Direction {
+	let dir: Direction;
+	switch (writingMode) {
+		case "horizontal-tb":
+			dir = LEFT;
+			break;
+
+		case "vertical-rl":
+		case "vertical-lr":
+		case "sideways-rl":
+			dir = UP;
+			break;
+
+		case "sideways-lr":
+			dir = DOWN;
+			break;
+	}
+
+	if (scriptDir !== "ltr") {
+		dir = flip(dir);
+	}
+
+	return dir;
+}
+
+/**
+ * Get the space in CSS pixels between a DOM rect and the window in the specified direction.
+ */
+export function getWindowSpaceAround(rect: DOMRect, dir: Direction): number {
+	switch (dir) {
+		case UP: return rect.y;
+		case RIGHT: return window.innerWidth - rect.right;
+		case DOWN: return window.innerHeight - rect.bottom;
+		case LEFT: return rect.x;
+	}
+}

package/src/components/button.tsx

@@ -0,0 +1,94 @@
+import { ClassValue, Expression, extract, get, optionalString, StyleValue } from "rvx";
+import { isPending } from "rvx/async";
+
+import { Action, handleActionEvent, keyFor } from "../common/events.js";
+import { THEME } from "../common/theme.js";
+import { Validator } from "./validation.js";
+
+export type ButtonType = "button" | "submit" | "reset" | "menu";
+export type ButtonVariant = "default" | "primary" | "success" | "danger" | "warning" | "input";
+
+export function Button(props: {
+	/**
+	 * The button type.
+	 *
+	 * @default "button"
+	 */
+	type?: Expression<ButtonType | undefined>;
+
+	/**
+	 * The theme variant.
+	 *
+	 * @default "default"
+	 */
+	variant?: Expression<ButtonVariant | undefined>;
+
+	/**
+	 * Set when the button is disabled.
+	 *
+	 * The button is automatically disabled when there are any pending tasks.
+	 */
+	disabled?: Expression<boolean | undefined>;
+
+	/**
+	 * The action to run when the button is clicked.
+	 */
+	action?: Action;
+
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	autofocus?: Expression<boolean | undefined>;
+	title?: Expression<string | undefined>;
+	role?: Expression<string | undefined>;
+	"aria-label"?: Expression<string | undefined>;
+	"aria-labelledby"?: Expression<string | undefined>;
+	"aria-expanded"?: Expression<boolean | undefined>;
+	"aria-haspopup"?: Expression<string | undefined>;
+	"aria-controls"?: Expression<string | undefined>;
+	validator?: Validator;
+
+	children?: unknown;
+}): unknown {
+	const theme = extract(THEME);
+	const disabled = () => isPending() || get(props.disabled);
+
+	function action(event: Event) {
+		if (disabled() || !props.action) {
+			return;
+		}
+		handleActionEvent(event, props.action);
+	}
+
+	return <button
+		type={() => get(props.type) ?? "button"}
+		disabled={disabled}
+		class={[
+			theme?.button,
+			() => theme?.[`button_${get(props.variant) ?? "default"}`],
+			props.class,
+		]}
+		style={props.style}
+		id={props.id}
+		title={props.title}
+		role={props.role}
+		aria-label={props["aria-label"]}
+		aria-labelledby={props["aria-labelledby"]}
+		aria-expanded={optionalString(props["aria-expanded"])}
+		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}
+		autofocus={props.autofocus}
+
+		on:click={action}
+		on:keydown={event => {
+			const key = keyFor(event);
+			if (key === "enter" || key === "space") {
+				action(event);
+			}
+		}}
+	>
+		{props.children}
+	</button>;
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,64 @@
+import { ClassValue, Expression, extract, get, optionalString, Signal, string, StyleValue, uniqueId, watch } from "rvx";
+import { isPending } from "rvx/async";
+
+import { THEME } from "../common/theme.js";
+import { Text } from "./text.js";
+import { validatorFor } from "./validation.js";
+
+export function Checkbox(props: {
+	checked?: Expression<boolean | undefined>;
+
+	disabled?: Expression<boolean | undefined>;
+
+	class?: ClassValue;
+	style?: StyleValue;
+	autofocus?: Expression<boolean | undefined>;
+	children?: unknown;
+}): unknown {
+	const id = uniqueId();
+	const theme = extract(THEME);
+
+	const disabled = props.checked instanceof Signal
+		? () => isPending() || get(props.disabled)
+		: () => true;
+
+	const validator = props.checked instanceof Signal ? validatorFor(props.checked) : undefined;
+
+	const input = <input
+		id={id}
+		type="checkbox"
+		class={theme?.checkbox_input}
+		on:input={() => {
+			if (props.checked instanceof Signal) {
+				props.checked.value = input.checked;
+			}
+		}}
+		aria-readonly={string(!(props.checked instanceof Signal))}
+		aria-invalid={validator ? optionalString(validator.invalid) : undefined}
+		aria-errormessage={validator ? validator.errorMessageIds : undefined}
+		autofocus={props.autofocus}
+		disabled={disabled}
+	/> as HTMLInputElement;
+
+	watch(props.checked, checked => {
+		if (checked === undefined) {
+			input.indeterminate = true;
+		} else {
+			input.checked = checked;
+		}
+	});
+
+	return <label
+		for={id}
+		class={[
+			theme?.checkbox_label,
+			props.class,
+		]}
+		style={props.style}
+	>
+		{input}
+		<Text class={theme?.checkbox_content}>
+			{props.children}
+		</Text>
+	</label>;
+}

package/src/components/collapse-test.tsx

@@ -0,0 +1,23 @@
+import { themeClass } from "../test.js";
+
+function assertCollapse(collapse: Element): asserts collapse is HTMLDivElement {
+	if (!collapse.matches(`.${themeClass("collapse")}`)) {
+		throw new Error("collapse must be a collapse root element.");
+	}
+}
+
+/**
+ * Get the content element of a collapse.
+ */
+export function getCollapseContent(collapse: Element): HTMLDivElement {
+	assertCollapse(collapse);
+	return collapse.querySelector<HTMLDivElement>(`.${themeClass("collapse_content")}`)!;
+}
+
+/**
+ * Check if a collapse is visible.
+ */
+export function isCollapseVisible(collapse: Element): boolean {
+	assertCollapse(collapse);
+	return !collapse.hasAttribute("inert");
+}

package/src/components/collapse.tsx

@@ -0,0 +1,75 @@
+import { ClassValue, Event, Expression, extract, get, map, optionalString, sig, StyleValue, teardown } from "rvx";
+
+import { THEME } from "../common/theme.js";
+import { AriaLive, AriaRelevant } from "../common/types.js";
+
+export function Collapse(props: {
+	visible?: Expression<boolean | undefined>;
+	alert?: Event<[]>;
+	children?: unknown;
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	"aria-live"?: Expression<AriaLive | undefined>;
+	"aria-relevant"?: Expression<AriaRelevant | undefined>;
+	"aria-atomic"?: Expression<boolean | undefined>;
+}): unknown {
+	const theme = extract(THEME);
+	const visible = map(props.visible, v => v ?? false);
+	const alert = sig(false);
+	const size = sig<number | undefined>(undefined);
+
+	const content = <div class={theme?.collapse_content}>
+		{props.children}
+	</div> as HTMLDivElement;
+
+	const observer = new ResizeObserver(entries => {
+		const entry = entries[entries.length - 1];
+		const boxSize = entry?.borderBoxSize[entry.borderBoxSize.length - 1];
+		if (boxSize) {
+			size.value = boxSize.blockSize;
+		}
+	});
+
+	observer.observe(content);
+	teardown(() => {
+		observer.disconnect();
+	});
+
+	props.alert?.(() => {
+		if (get(visible)) {
+			alert.value = false;
+			// Force a reflow:
+			void root.offsetWidth;
+			alert.value = true;
+		}
+	});
+
+	const root = <div
+		inert={map(visible, v => !v)}
+		class={[
+			theme?.collapse,
+			() => size.value === undefined ? undefined : theme?.collapse_sized,
+			() => alert.value ? theme?.collapse_alert : undefined,
+			map(visible, v => v ? theme?.collapse_visible : undefined),
+			props.class,
+		]}
+		style={[
+			{
+				"--collapse-size": () => size.value === undefined ? undefined : `${size.value}px`,
+			},
+			props.style,
+		]}
+		id={props.id}
+		aria-live={map(props["aria-live"], v => v ?? "polite")}
+		aria-relevant={props["aria-relevant"]}
+		aria-atomic={optionalString(props["aria-atomic"])}
+	>
+		{theme?.collapse_view
+			? <div class={theme.collapse_view}>
+				{content}
+			</div>
+			: content}
+	</div> as HTMLDivElement;
+	return root;
+}

package/src/components/column.tsx

@@ -0,0 +1,28 @@
+import { ClassValue, Expression, extract, map, StyleValue } from "rvx";
+
+import { THEME } from "../common/theme.js";
+import { SizeContext } from "../common/types.js";
+
+/**
+ * A flex column with automatic spacing between it's children.
+ */
+export function Column(props: {
+	size?: Expression<SizeContext | undefined>;
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	children?: unknown;
+}): unknown {
+	const theme = extract(THEME);
+	return <div
+		class={[
+			theme?.column,
+			map(props.size, size => theme?.[`column_${size ?? "content"}`]),
+			props.class,
+		]}
+		style={props.style}
+		id={props.id}
+	>
+		{props.children}
+	</div>;
+}

package/src/components/control-group.tsx

@@ -0,0 +1,22 @@
+import { ClassValue, Expression, extract, StyleValue } from "rvx";
+
+import { THEME } from "../common/theme.js";
+
+export function ControlGroup(props: {
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	children?: unknown;
+}): unknown {
+	const theme = extract(THEME);
+	return <div
+		class={[
+			theme?.control_group,
+			props.class,
+		]}
+		style={props.style}
+		id={props.id}
+	>
+		{props.children}
+	</div>;
+}

package/src/components/dialog.tsx

@@ -0,0 +1,137 @@
+import { captureSelf, ClassValue, Expression, extract, map, mount, StyleValue, uniqueId } from "rvx";
+import { TASKS, Tasks } from "rvx/async";
+
+import { FlexSpace, Heading, Row, Text, THEME } from "../index.js";
+import { LAYER, Layer } from "./layer.js";
+
+export class DialogAbortError extends Error {}
+
+export interface Dialog<T> {
+	resolve: (value: T) => void;
+	reject: (cause?: unknown) => void;
+}
+
+export type DialogInit<T> = (dialog: Dialog<T>) => unknown;
+
+export interface DialogOptions {
+	cancellable?: boolean;
+}
+
+export function showDialog<T = void>(init: DialogInit<T>, options?: DialogOptions): Promise<T> {
+	return new Promise<T>((resolve, reject) => {
+		captureSelf(dispose => {
+			mount(
+				document.body,
+				<Layer modal>
+					{ctx => {
+						ctx.set(TASKS, new Tasks());
+						const dialog: Dialog<T> = {
+							resolve(value) {
+								dispose();
+								resolve(value);
+							},
+							reject(reason) {
+								dispose();
+								reject(reason);
+							},
+						};
+						if (options?.cancellable ?? true) {
+							extract(LAYER)?.useHotkey("escape", () => {
+								dialog.reject(new DialogAbortError());
+							});
+						}
+						return init(dialog);
+					}}
+				</Layer>
+			);
+		});
+	});
+}
+
+export type DialogRole = "dialog" | "alertdialog";
+
+export function DialogBody(props: {
+	class?: ClassValue;
+	style?: StyleValue;
+	children?: unknown;
+	role?: Expression<DialogRole | undefined>;
+	title?: unknown;
+	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>;
+}): unknown {
+	const theme = extract(THEME);
+
+	let titleId: string | undefined;
+	let descriptionId: string | undefined;
+	const head: unknown[] = [];
+
+	if (props.title !== undefined) {
+		titleId = uniqueId();
+		head.push(<Heading level="2" id={titleId}>{props.title}</Heading>);
+	}
+	if (props.description !== undefined) {
+		descriptionId = uniqueId();
+		head.push(<Text id={descriptionId}>{props.description}</Text>);
+	}
+
+	return <div
+		class={[
+			theme?.dialog_container,
+			props.class,
+		]}
+		style={props.style}
+		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)}
+	>
+		<div
+			class={[
+				theme?.column,
+				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>;
+}
+
+export function DialogFooter(props: {
+	class?: ClassValue;
+	style?: StyleValue;
+	links?: unknown;
+	children?: unknown;
+}): unknown {
+	const theme = extract(THEME);
+	return <Row
+		size="control"
+		class={[
+			theme?.dialog_footer,
+			props.class,
+		]}
+		style={props.style}
+		align="center"
+	>
+		<Row size="control">
+			{props.links}
+		</Row>
+		<FlexSpace />
+		<Row size="control">
+			{props.children}
+		</Row>
+	</Row>;
+}

package/src/components/dropdown-input.tsx

@@ -0,0 +1,82 @@
+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";
+
+export interface DropdownValue<T> {
+	value: T;
+	label: unknown;
+}
+
+export function DropdownInput<T>(props: {
+	children?: unknown;
+	value: Expression<T>;
+	values: Expression<DropdownValue<T>[]>;
+
+	variant?: ButtonVariant;
+	disabled?: Expression<boolean | undefined>;
+
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	autofocus?: Expression<boolean | undefined>;
+	title?: Expression<string | undefined>;
+	"aria-label"?: Expression<string | undefined>;
+	"aria-labelledby"?: Expression<string | undefined>;
+
+	dropdownId?: string;
+	dropdownClass?: ClassValue;
+	dropdownStyle?: StyleValue;
+	placement?: Expression<PopoutPlacement | undefined>;
+	alignment?: Expression<PopoutAlignment | undefined>;
+	foreignEvents?: string[];
+}): unknown {
+	const items = new WeakMap<DropdownValue<T>, DropdownItem>();
+	return <Dropdown
+		anchor={a => <Button
+			{...a}
+			variant={map(props.variant, v => v ?? "input")}
+			disabled={props.value instanceof Signal ? props.disabled : true}
+			class={props.class}
+			style={props.style}
+			id={props.id}
+			autofocus={props.autofocus}
+			title={props.title}
+			role="combobox"
+			aria-label={props["aria-label"]}
+			aria-labelledby={props["aria-labelledby"]}
+			validator={props.value instanceof Signal ? validatorFor(props.value) : undefined}
+		>
+			{props.children ?? (() => {
+				const value = get(props.value);
+				return get(props.values).find(v => v.value === value)?.label;
+			})}
+		</Button>}
+		items={() => get(props.values).map<DropdownItem>(value => {
+			let item = items.get(value);
+			if (item === undefined) {
+				item = {
+					label: value.label,
+					selected: () => value.value === get(props.value),
+					action: () => {
+						if (props.value instanceof Signal) {
+							props.value.value = value.value;
+						} else {
+							return false;
+						}
+					},
+				};
+				items.set(value, item);
+			}
+			return item;
+		})}
+		id={props.dropdownId}
+		style={props.dropdownStyle}
+		class={props.dropdownClass}
+		placement={props.placement}
+		alignment={props.alignment}
+		foreignEvents={props.foreignEvents}
+	/>;
+}