@rvx/ui 0.1.6

package/src/components/popover.tsx

@@ -0,0 +1,292 @@
+import { ClassValue, Expression, extract, get, Inject, map, render, sig, 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";
+import { DialogRole } from "./dialog.js";
+import { LAYER } from "./layer.js";
+import { Popout, PopoutAlignment, PopoutPlacement } from "./popout.js";
+
+export type PopoverRole = DialogRole | "menu";
+
+export interface PopoverContent {
+	(props: {
+		popout: Popout;
+	}): unknown;
+}
+
+/**
+ * Create a popover that is initially hidden.
+ */
+export function createPopover(props: {
+	/**
+	 * Defines the direction in which the popover is placed in relation to the anchor.
+	 *
+	 * This expression is only evaluated when calculating the popover placement.
+	 *
+	 * See {@link PopoutPlacement}
+	 *
+	 * @default "block"
+	 */
+	placement?: Expression<PopoutPlacement | undefined>;
+
+	/**
+	 * Defines which side of the anchor and popover are aligned orthogonally to the placement axis.
+	 *
+	 * This expression is only evaluated when calculating the popover placement.
+	 *
+	 * See {@link PopoutAlignment}
+	 *
+	 * @default "center"
+	 */
+	alignment?: Expression<PopoutAlignment | undefined>;
+
+	/**
+	 * The content component.
+	 */
+	content: PopoverContent;
+
+	inlineSize?: Expression<string | undefined>;
+	maxInlineSize?: Expression<string | undefined>;
+	blockSize?: Expression<string | undefined>;
+	maxBlockSize?: Expression<string | undefined>;
+
+	/**
+	 * An array of event names that cause the popover to hide automatically when dispatched outside of the current layer stack or the anchor.
+	 *
+	 * @default ["resize", "scroll", "mousedown", "touchstart", "focusin", "rvx-ui:passive-action"]
+	 */
+	foreignEvents?: string[];
+
+	/**
+	 * The content role.
+	 *
+	 * @default "dialog"
+	 */
+	role?: PopoverRole;
+
+	id?: string;
+	class?: ClassValue;
+	style?: StyleValue;
+	"aria-label"?: Expression<string | undefined>;
+	"aria-labelledby"?: Expression<string | undefined>;
+	"aria-describedby"?: Expression<string | undefined>;
+}): Popout {
+	return new Popout({
+		placement: map(props.placement, v => v ?? "block"),
+		alignment: map(props.alignment, v => v ?? "center"),
+		content: ({ popout, onPlacement, placement, setSizeReference }) => {
+			const theme = extract(THEME);
+			const layer = extract(LAYER)!;
+			const spikeTransform = sig("");
+
+			layer.useHotkey("escape", () => {
+				popout.hide();
+			});
+
+			onPlacement(args => {
+				args.gap = Math.abs(spikeArea.getBoundingClientRect().x - root.getBoundingClientRect().x);
+			});
+
+			watch(placement, placement => {
+				if (placement) {
+					const { anchorRect, placementDir, alignStart } = placement;
+					const contentRect = placement.content.getBoundingClientRect();
+					const rawOffset = getXY(anchorRect, alignStart) + (getSize(anchorRect, alignStart) / 2) - getXY(contentRect, alignStart);
+					const offset = `max(var(--popover-spike-min-offset), min(${rawOffset}px, ${getSize(contentRect, alignStart)}px - var(--popover-spike-min-offset)))`;
+					switch (placementDir) {
+						case DOWN:
+							spikeTransform.value = `translate(${offset}, 0px)`;
+							break;
+						case UP:
+							spikeTransform.value = `translate(${offset}, ${contentRect.height}px) rotate(180deg)`;
+							break;
+						case RIGHT:
+							spikeTransform.value = `translate(0px, ${offset}) rotate(270deg)`;
+							break;
+						case LEFT:
+							spikeTransform.value = `translate(${contentRect.width}px, ${offset}) rotate(90deg)`;
+							break;
+					}
+				}
+			});
+
+			const spikeArea = <div class={theme?.popover_spike_area}>
+				<div class={theme?.popover_spike} style={{ transform: spikeTransform }}>
+					<Inject key={XMLNS} value={SVG}>
+						{() => {
+							return <svg viewBox="0 0 16 16" preserveAspectRatio="none">
+								<path d="M0,16 L8,0 L16,16 Z" />
+							</svg>;
+						}}
+					</Inject>
+				</div>
+			</div> as HTMLElement;
+
+			const content = <div class={[
+				theme?.column,
+				theme?.column_content,
+				theme?.popover_content,
+			]}>
+				{props.content({ popout })}
+			</div> as HTMLElement;
+			setSizeReference(content);
+
+			const root = <div
+				tabindex="-1"
+				role={map(props.role, v => v ?? "dialog")}
+				id={props.id}
+				class={[
+					theme?.popover,
+					props.class,
+				]}
+				style={[
+					props.style,
+					{
+						"inline-size": props.inlineSize,
+						"max-inline-size": props.maxInlineSize,
+						"block-size": props.blockSize,
+						"max-block-size": props.maxBlockSize,
+					},
+				]}
+				aria-label={props["aria-label"]}
+				aria-labelledby={props["aria-labelledby"]}
+				aria-describedby={props["aria-describedby"]}
+			>
+				{spikeArea}
+				<div class={theme?.popover_scroll_area}>
+					{content}
+				</div>
+			</div> as HTMLElement;
+			layer.useAutoFocusFallback(root);
+			return root;
+		},
+		foreignEvents: props.foreignEvents,
+	});
+}
+
+export interface PopoverAnchorProps {
+	action: Action;
+	id?: Expression<string | undefined>;
+	"aria-label"?: Expression<string | undefined>;
+	"aria-labelledby"?: Expression<string | undefined>;
+}
+
+export function Popover(props: {
+	/**
+	 * A function to immediately render the anchor.
+	 */
+	anchor: (props: PopoverAnchorProps) => unknown;
+
+	/**
+	 * The anchor id.
+	 *
+	 * By default, a unique id is generated and linked to the attached popover.
+	 */
+	id?: Expression<string | undefined>;
+
+	/** Class for the popover. */
+	class?: ClassValue;
+
+	/** Style for the popover. */
+	style?: StyleValue;
+
+	/** The popover content component. */
+	children: PopoverContent;
+
+	inlineSize?: Expression<string | undefined>;
+	maxInlineSize?: Expression<string | undefined>;
+	blockSize?: Expression<string | undefined>;
+	maxBlockSize?: Expression<string | undefined>;
+
+	/**
+	 * Defines the direction in which the popover is placed in relation to the anchor.
+	 *
+	 * This expression is only evaluated when calculating the popover placement.
+	 *
+	 * See {@link PopoutPlacement}^
+	 *
+	 * @default "block"
+	 */
+	placement?: Expression<PopoutPlacement | undefined>;
+
+	/**
+	 * Defines which side of the anchor and popover are aligned orthogonally to the placement axis.
+	 *
+	 * This expression is only evaluated when calculating the popover placement.
+	 *
+	 * See {@link PopoutAlignment}
+	 *
+	 * @default "center"
+	 */
+	alignment?: Expression<PopoutAlignment | undefined>;
+
+	/**
+	 * An array of event names that cause the popover to hide automatically when dispatched outside of the current layer stack or the anchor.
+	 *
+	 * @default ["resize", "scroll", "mousedown", "touchstart", "focusin", "rvx-ui:passive-action"]
+	 */
+	foreignEvents?: string[];
+
+	/**
+	 * The popover role.
+	 *
+	 * @default "dialog"
+	 */
+	role?: PopoverRole;
+
+	/**
+	 * The anchor and popover label.
+	 *
+	 * By default, the anchor itself is used a label for the popover.
+	 */
+	"aria-label"?: Expression<string | undefined>;
+
+	/**
+	 * The anchor and popover label id.
+	 *
+	 * By default, the anchor itself is used a label for the popover.
+	 */
+	"aria-labelledby"?: Expression<string | undefined>;
+
+	/**
+	 * An optional popover description id.
+	 *
+	 * If the popover contains a description, this should be set to it's id.
+	 */
+	"aria-describedby"?: Expression<string | undefined>;
+}): unknown {
+	const defaultId = uniqueId();
+	const id = map(props.id, v => v ?? defaultId);
+
+	const popover = createPopover({
+		content: props.children,
+		inlineSize: props.inlineSize,
+		maxInlineSize: props.maxInlineSize,
+		blockSize: props.blockSize,
+		maxBlockSize: props.maxBlockSize,
+		placement: props.placement,
+		alignment: props.alignment,
+		foreignEvents: props.foreignEvents,
+		role: props.role,
+		class: props.class,
+		style: props.style,
+
+		"aria-label": props["aria-label"],
+		"aria-labelledby": () => (get(props["aria-label"]) === undefined
+			? (get(props["aria-labelledby"]) ?? get(id))
+			: undefined),
+		"aria-describedby": props["aria-describedby"],
+	});
+
+	const anchor = render(props.anchor({
+		action: event => {
+			popover.toggle(anchor, event);
+		},
+		id,
+		"aria-label": props["aria-label"],
+		"aria-labelledby": props["aria-labelledby"],
+	}));
+
+	return anchor;
+}

package/src/components/radio-buttons.tsx

@@ -0,0 +1,81 @@
+import { ClassValue, Expression, extract, For, get, map, optionalString, Signal, string, StyleValue, uniqueId } from "rvx";
+import { isPending } from "rvx/async";
+
+import { THEME } from "../common/theme.js";
+import { Text } from "./text.js";
+import { validatorFor } from "./validation.js";
+
+export interface RadioOption<T> {
+	value: T;
+	label: unknown;
+}
+
+export function RadioButtons<T>(props: {
+	value?: Expression<T | undefined>;
+	options: Expression<RadioOption<T>[]>;
+
+	disabled?: Expression<boolean | undefined>;
+
+	id?: Expression<string | undefined>;
+	class?: ClassValue;
+	style?: StyleValue;
+	autofocus?: Expression<boolean | undefined>;
+	"aria-label"?: Expression<string | undefined>;
+	"aria-labelledby"?: Expression<string | undefined>;
+
+	children?: never;
+}): unknown {
+	const group = uniqueId();
+	const theme = extract(THEME);
+
+	const disabled = props.value instanceof Signal
+		? () => isPending() || get(props.disabled)
+		: true;
+
+	const validator = props.value instanceof Signal ? validatorFor(props.value) : undefined;
+
+	return <div
+		role="radiogroup"
+		id={props.id}
+		class={[
+			theme?.radio_buttons,
+			props.class,
+		]}
+		style={props.style}
+		aria-readonly={string(!(props.options instanceof Signal))}
+		aria-invalid={validator ? optionalString(validator.invalid) : undefined}
+		aria-errormessage={validator ? validator.errorMessageIds : undefined}
+		aria-label={props["aria-label"]}
+		aria-labelledby={props["aria-labelledby"]}
+	>
+		<For each={props.options}>
+			{(option, index) => {
+				const id = uniqueId();
+
+				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;
+							}
+						}}
+					/>
+					<Text class={theme?.radio_button_content}>
+						{option.label}
+					</Text>
+				</label>;
+			}}
+		</For>
+	</div>;
+}

package/src/components/row.tsx

@@ -0,0 +1,37 @@
+import { ClassValue, Expression, extract, get, StyleValue } from "rvx";
+
+import { THEME } from "../common/theme.js";
+import { SizeContext } from "../common/types.js";
+
+export type RowAlignment = "top" | "center" | "bottom";
+
+export function Row(props: {
+	size?: Expression<SizeContext | undefined>;
+	align?: Expression<RowAlignment | undefined>;
+	class?: ClassValue;
+	style?: StyleValue;
+	children?: unknown;
+}): unknown {
+	const theme = extract(THEME);
+	return <div
+		class={[
+			theme?.row,
+			() => theme?.[`row_${get(props.size) ?? "content"}`],
+			props.class,
+		]}
+		style={[
+			props.style,
+			{
+				"align-items": () => {
+					switch (get(props.align)) {
+						case "center": return "center";
+						case "bottom": return "end";
+						default: return "start";
+					}
+				},
+			},
+		]}
+	>
+		{props.children}
+	</div>;
+}

package/src/components/scroll-view.tsx

@@ -0,0 +1,97 @@
+import { ClassValue, extract, sig, StyleValue, teardown } from "rvx";
+
+import { debounceEvent } from "../common/events.js";
+import { THEME } from "../common/theme.js";
+import { axisEquals, DOWN, getBlockStart, getSize, RIGHT, UP, WritingMode } from "../common/writing-mode.js";
+
+export function ScrollView(props: {
+	class?: ClassValue;
+	style?: StyleValue;
+	children?: unknown;
+}): unknown {
+	const theme = extract(THEME);
+	const vertical = sig<boolean | undefined>(undefined);
+	const scrollbarComp = sig(0);
+	const startIndicator = sig(false);
+	const endIndicator = sig(false);
+
+	const content = <div class={theme?.scroll_view_content}>
+		{props.children}
+	</div> as HTMLElement;
+
+	const updateIndicators = (blockStart = getBlockStart(getComputedStyle(area).writingMode as WritingMode || "horizontal-tb")) => {
+		const areaSize = getSize(area.getBoundingClientRect(), blockStart);
+		let start: number;
+		let end: number;
+		if (blockStart === UP || blockStart === DOWN) {
+			start = area.scrollTop;
+			end = area.scrollHeight - start - areaSize;
+		} else {
+			start = area.scrollLeft;
+			end = area.scrollWidth - start - areaSize;
+		}
+		if (blockStart === DOWN || blockStart === RIGHT) {
+			const x = start;
+			start = end;
+			end = x;
+		}
+		startIndicator.value = start > .5;
+		endIndicator.value = end > .5;
+	};
+
+	const area = <div
+		class={theme?.scroll_view_area}
+		style={{
+			overflow: () => vertical.value ? "hidden auto" : "auto hidden",
+		}}
+		on:scroll={[debounceEvent(100, () => updateIndicators()), { passive: true }]}
+	>
+		{content}
+	</div> as HTMLElement;
+
+	const root = <div
+		class={[
+			props.class,
+			theme?.scroll_view,
+		]}
+		style={[
+			props.style,
+			{
+				"--scrollbar-comp": () => `${scrollbarComp.value}px`,
+			},
+		]}
+	>
+		{area}
+		<div class={[
+			theme?.scroll_view_indicator_start,
+			() => startIndicator.value && theme?.scroll_view_indicator_visible,
+		]} />
+		<div class={[
+			theme?.scroll_view_indicator_end,
+			() => endIndicator.value && theme?.scroll_view_indicator_visible,
+		]} />
+	</div> as HTMLElement;
+
+	const rootObserver = new ResizeObserver(() => {
+		const blockStart = getBlockStart(getComputedStyle(root).writingMode as WritingMode || "horizontal-tb");
+		vertical.value ??= axisEquals(blockStart, UP);
+		updateIndicators(blockStart);
+	});
+	rootObserver.observe(root);
+	teardown(() => rootObserver.disconnect());
+
+	const contentObserver = new IntersectionObserver(() => {
+		const rootRect = root.getBoundingClientRect();
+		const contentRect = content.getBoundingClientRect();
+		const blockStart = getBlockStart(getComputedStyle(root).writingMode as WritingMode || "horizontal-tb");
+		const isVertical = axisEquals(blockStart, UP);
+		const dir = isVertical ? RIGHT : UP;
+		scrollbarComp.value = Math.max(0, getSize(rootRect, dir) - getSize(contentRect, dir));
+		vertical.value ??= isVertical;
+		updateIndicators(blockStart);
+	}, { root, rootMargin: "0px 0px 0px 0px", threshold: 1 });
+	contentObserver.observe(content);
+	teardown(() => contentObserver.disconnect());
+
+	return root;
+}

package/src/components/text-input.tsx

@@ -0,0 +1,117 @@
+import { ClassValue, Expression, extract, get, optionalString, Signal, StyleValue } from "rvx";
+import { isPending, waitFor } from "rvx/async";
+
+import { keyFor } from "../common/events.js";
+import { THEME } from "../common/theme.js";
+import { validatorFor } from "./validation.js";
+
+export type TextInputType = "text" | "password";
+export type TextAreaWrap = "hard" | "soft";
+
+export function TextInput(props: ({
+	/**
+	 * If true, this component is rendered as a `<textarea>` element.
+	 */
+	multiline?: false;
+
+	/**
+	 * The input type.
+	 *
+	 * @default "text"
+	 */
+	type?: Expression<TextInputType | undefined>;
+} | {
+	/**
+	 * If true, this component is rendered as a `<textarea>` element.
+	 */
+	multiline: true;
+
+	/**
+	 * The number of visible rows if not overwritten via css.
+	 *
+	 * If not specified, the browser default is used.
+	 */
+	rows?: Expression<number | undefined>;
+
+	/**
+	 * Controls how the value is wrapped for form submission.
+	 *
+	 * This sets the standard `wrap` attribute.
+	 */
+	wrap?: Expression<TextAreaWrap | undefined>;
+}) & {
+	/**
+	 * Set when the input is disabled.
+	 *
+	 * The input is automatically disabled when there are any {@link isPending pending tasks}.
+	 */
+	disabled?: Expression<boolean | undefined>;
+
+	/**
+	 * The current text value.
+	 *
+	 * If this isn't a signal, the text input is readonly.
+	 */
+	value: Expression<string>;
+
+	enterAction?: (event: Event) => void | boolean | Promise<void>;
+
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	autofocus?: Expression<boolean | undefined>;
+	spellcheck?: Expression<boolean | undefined>;
+	"aria-label"?: Expression<string | undefined>;
+	"aria-labelledby"?: Expression<string | undefined>;
+}): unknown {
+	const theme = extract(THEME);
+	const disabled = () => isPending() || get(props.disabled);
+
+	const validator = props.value instanceof Signal ? validatorFor(props.value) : undefined;
+
+	const InputTag = props.multiline ? "textarea" : "input";
+	const input = <InputTag
+		type={props.multiline ? undefined : (() => get(props.type) ?? "text")}
+		rows={props.multiline ? props.rows : undefined}
+		wrap={props.multiline ? props.wrap : undefined}
+		disabled={disabled}
+		class={[
+			theme?.text_input,
+			props.class,
+		]}
+		style={props.style}
+		id={props.id}
+		autofocus={props.autofocus}
+		spellcheck={optionalString(props.spellcheck)}
+		readonly={!(props.value instanceof Signal)}
+
+		prop:value={props.value}
+		on:input={() => {
+			if (props.value instanceof Signal) {
+				props.value.value = input.value;
+			}
+		}}
+		on:keydown={event => {
+			const key = keyFor(event);
+			if (key === "enter" && props.enterAction && !disabled()) {
+				const result = props.enterAction(event);
+				if (result === false) {
+					return;
+				}
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				if (result instanceof Promise) {
+					waitFor(result);
+				}
+			}
+		}}
+
+		aria-label={props["aria-label"]}
+		aria-labelledby={props["aria-labelledby"]}
+
+		aria-invalid={validator ? optionalString(validator.invalid) : undefined}
+		aria-errormessage={validator ? validator.errorMessageIds : undefined}
+	/> as HTMLInputElement;
+
+	return input;
+}

package/src/components/text.tsx

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