@rvx/ui 0.1.6

package/src/components/validation.tsx

@@ -0,0 +1,272 @@
+import { ClassValue, ContextKey, Emitter, Event, Expression, extract, For, map, sig, Signal, StyleValue, teardown, trigger, TriggerPipe, uniqueId, untrack } from "rvx";
+import { TaskSlot } from "rvx/async";
+
+import { THEME } from "../common/theme.js";
+import { Collapse } from "./collapse.js";
+import { Text } from "./text.js";
+
+const VALIDATORS = new WeakMap<object, Validator>();
+
+/**
+ * Context key for validation options used by new validators.
+ */
+export const VALIDATION = Symbol.for("rvx-ui:validation") as ContextKey<ValidationOptions>;
+
+/**
+ * Defines when accessed signals trigger automatic validation.
+ *
+ * + **if-validated** - **Default.** Validate if validation did run before.
+ * + **if-invalid** - Validate if currently invalid.
+ * + **never** - Never validate automatically.
+ */
+export type ValidationSignalTrigger = "if-validated" | "if-invalid" | "never";
+
+export interface ValidationOptions {
+	signalTrigger?: ValidationSignalTrigger;
+}
+
+export class Validator {
+	#slot = new TaskSlot();
+	#signalTrigger: ValidationSignalTrigger;
+	#rules = sig<ValidationRuleEntry[]>([]);
+	#invalid = sig(false);
+	#cycle = 0;
+
+	constructor() {
+		const options = extract(VALIDATION);
+		this.#signalTrigger = options?.signalTrigger ?? "if-validated";
+	}
+
+	/**
+	 * Reactively get all validation rule entries.
+	 */
+	rules = (): readonly ValidationRuleEntry[] => this.#rules.value;
+
+	/**
+	 * An expression to get a space separated list of error message ids.
+	 */
+	errorMessageIds = (): string => this.#rules.value.map(r => r.id).join(" ");
+
+	/**
+	 * An expression to check if this validator is in an invalid state.
+	 */
+	invalid = (): boolean => this.#invalid.value;
+
+	#addRule(rule: ValidationRule, add: (rules: ValidationRuleEntry[], entry: ValidationRuleEntry) => void): void {
+		const entry = new ValidationRuleEntry(rule, trigger(this.#ruleUpdated));
+		this.#rules.update(rules => {
+			add(rules, entry);
+		});
+		teardown(() => {
+			this.#rules.update(rules => {
+				const index = rules.indexOf(entry);
+				if (index < 0) {
+					return false;
+				}
+				rules.splice(index, 1);
+			});
+		});
+	}
+
+	#ruleUpdated = () => {
+		const signalTrigger = this.#signalTrigger;
+		if (signalTrigger === "never" || (signalTrigger === "if-invalid" && !this.#invalid.value)) {
+			return;
+		}
+		this.triggerValidation();
+	};
+
+	/**
+	 * Add a rule to be validated first until the current lifecycle is disposed.
+	 */
+	prependRule(rule: ValidationRule): void {
+		this.#addRule(rule, (rules, entry) => rules.unshift(entry));
+	}
+
+	/**
+	 * Add a rule to be validated last until the current lifecycle is disposed.
+	 */
+	appendRule(rule: ValidationRule): void {
+		this.#addRule(rule, (rules, entry) => rules.push(entry));
+	}
+
+	/**
+	 * Attach this validator to an object.
+	 */
+	attach(target: object): void {
+		VALIDATORS.set(target, this);
+	}
+
+	async #validate(sideEffect: boolean, signal?: AbortSignal): Promise<boolean> {
+		this.#cycle++;
+		const rules = untrack(() => this.#rules.value);
+		for (let i = 0; i < rules.length; i++) {
+			if (signal?.aborted) {
+				return false;
+			}
+			const { validate, visible, alert, updated } = rules[i];
+			const valid = await updated(() => validate(signal));
+			if (valid) {
+				visible.value = false;
+			} else {
+				const wasVisible = visible.value;
+				visible.value = true;
+				for (let r = i + 1; r < rules.length; r++) {
+					rules[r].visible.value = false;
+				}
+				this.#invalid.value = true;
+				if (wasVisible && !sideEffect) {
+					alert.emit();
+				}
+				return false;
+			}
+		}
+		this.#invalid.value = false;
+		return true;
+	}
+
+	/**
+	 * Validate using the currently attached rules.
+	 */
+	async validate(signal?: AbortSignal): Promise<boolean> {
+		return this.#slot.block(() => this.#validate(false, signal));
+	}
+
+	/**
+	 * Trigger validation as a side effect.
+	 */
+	triggerValidation(): void {
+		this.#slot.sideEffect(signal => this.#validate(true, signal));
+	}
+
+	/**
+	 * Reset this validator to it's initial state.
+	 */
+	reset(): void {
+		this.#cycle++;
+		this.#invalid.value = false;
+		const rules = untrack(() => this.#rules.value);
+		for (let i = 0; i < rules.length; i++) {
+			rules[i].visible.value = false;
+		}
+	}
+
+	/**
+	 * Get or attach a validator to an object.
+	 */
+	static attach(target: object): Validator {
+		let validator = VALIDATORS.get(target);
+		if (!validator) {
+			validator = new Validator();
+			VALIDATORS.set(target, validator);
+		}
+		return validator;
+	}
+}
+
+/**
+ * Get the validator attached to the specified target.
+ */
+export function validatorFor(target: object): Validator | undefined {
+	return VALIDATORS.get(target);
+}
+
+export interface ValidationRule {
+	validate(signal?: AbortSignal): boolean | Promise<boolean>;
+	message: unknown;
+}
+
+export class ValidationRuleEntry {
+	readonly id = uniqueId();
+	readonly visible = sig(false);
+	readonly alert = new Emitter<[]>();
+	readonly message: unknown;
+	readonly validate: ValidationRule["validate"];
+	readonly updated: TriggerPipe;
+
+	constructor(rule: ValidationRule, updated: TriggerPipe) {
+		this.message = rule.message;
+		this.validate = rule.validate.bind(rule);
+		this.updated = updated;
+	}
+}
+
+export interface ValidateFn<T> {
+	(value: T, signal?: AbortSignal): boolean | Promise<boolean>;
+}
+
+/**
+ * Prepend a validation rule to the validator attached to the specified signal.
+ *
+ * This is a shorthand, meant to be used with `signal.pipe`.
+ *
+ * @param target The signal to attach the validator to.
+ * @param validate A function to validate the current value. Immediately accessed signals may trigger re-validation when updated.
+ * @param message The validation message to show when invalid.
+ * @returns The target itself.
+ */
+export function rule<T>(target: Signal<T>, validate: ValidateFn<T>, message: unknown): Signal<T> {
+	Validator.attach(target).prependRule({
+		validate(signal) {
+			return validate(target.value, signal);
+		},
+		message,
+	});
+	return target;
+}
+
+/**
+ * Validate all specified targets in parallel.
+ */
+export async function validate(...targets: object[]): Promise<boolean> {
+	const tasks: Promise<boolean>[] = [];
+	for (const target of targets) {
+		const validator = validatorFor(target);
+		if (validator === undefined) {
+			throw new Error("target has no attached validator.");
+		}
+		tasks.push(validator.validate());
+	}
+	return !(await Promise.all(tasks)).includes(false);
+}
+
+export function ValidationMessage(props: {
+	visible?: Expression<boolean | undefined>;
+	alert?: Event<[]>;
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	children?: unknown;
+}): unknown {
+	const theme = extract(THEME);
+	return <Collapse
+		visible={map(props.visible, v => v ?? true)}
+		alert={props.alert}
+		class={[
+			props.class,
+			theme?.validation_message_container,
+		]}
+		style={props.style}
+		id={props.id}
+	>
+		<div class={theme?.validation_message}>
+			<Text>
+				{props.children}
+			</Text>
+		</div>
+	</Collapse>;
+}
+
+/**
+ * Render validation messages for the validator attached to a specific target.
+ */
+export function ValidationMessages(props: {
+	for: object;
+}): unknown {
+	const validator = Validator.attach(props.for);
+	return <For each={validator.rules}>
+		{rule => <ValidationMessage visible={rule.visible} alert={rule.alert.event} id={rule.id}>
+			{rule.message}
+		</ValidationMessage>}
+	</For>;
+}

package/src/components/value.tsx

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

package/src/index.tsx

@@ -0,0 +1,29 @@
+export * from "./common/events.js";
+export * from "./common/parsers.js";
+export * from "./common/theme.js";
+export * from "./common/trim.js";
+export * from "./common/types.js";
+export * from "./common/writing-mode.js";
+export * from "./components/button.js";
+export * from "./components/checkbox.js";
+export * from "./components/collapse.js";
+export * from "./components/column.js";
+export * from "./components/control-group.js";
+export * from "./components/dialog.js";
+export * from "./components/dropdown.js";
+export * from "./components/dropdown-input.js";
+export * from "./components/flex-space.js";
+export * from "./components/heading.js";
+export * from "./components/label.js";
+export * from "./components/layer.js";
+export * from "./components/link.js";
+export * from "./components/page.js";
+export * from "./components/popout.js";
+export * from "./components/popover.js";
+export * from "./components/radio-buttons.js";
+export * from "./components/row.js";
+export * from "./components/scroll-view.js";
+export * from "./components/text.js";
+export * from "./components/text-input.js";
+export * from "./components/validation.js";
+export * from "./components/value.js";

package/src/test.tsx

@@ -0,0 +1,2 @@
+export * from "./common/theme-test.js";
+export * from "./components/collapse-test.js";

package/src/theme/base.scss

@@ -0,0 +1,69 @@
+@use "sass:math";
+@use "common";
+
+$root-size: 14px;
+
+@function px($value) {
+	@return math.div($value * 1px, $root-size) * 1rem;
+}
+
+:root {
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	font-size: #{math.div(1rem, 16px) * $root-size};
+	line-height: 1;
+
+	--content-column-gap: #{px(16)};
+	--content-row-gap: #{px(16)};
+	--content-radius: #{px(8)};
+	--content-border: #{px(2)};
+	@include common.define-quad(content-pad, px(20), px(20));
+
+	--control-column-gap: #{px(8)};
+	--control-row-gap: #{px(8)};
+	--control-radius: #{px(4)};
+	--control-border: #{px(1)};
+	--control-disabled: opacity(.5);
+	@include common.define-quad(control-pad, px(8), px(10));
+
+	--focus-outline-offset: #{px(2)};
+
+	--overflow-safe-area: #{px(4)};
+
+	--line-gap: #{px(6)};
+	--space-gap: #{px(6)};
+
+	--layout-transition: .15s ease;
+}
+
+@include common.theme((
+	bg: (
+		dark: rgb(32, 32, 32),
+	),
+	fg: (
+		dark: white,
+	),
+	focus-outline: (
+		dark: var(--control-border) dashed rgb(0, 127, 255),
+	),
+));
+
+body {
+	background-color: var(--bg);
+	color: var(--fg);
+
+	text-wrap: balance;
+	@supports (text-wrap: pretty) {
+		text-wrap: pretty;
+	}
+}
+
+* {
+	box-sizing: border-box;
+	--space-scale: 1;
+	--space-above: unset;
+	--space-below: unset;
+}
+
+::selection {
+	background-color: rgba(0, 100, 200, .7);
+}

package/src/theme/common.scss

@@ -0,0 +1,51 @@
+@use "sass:map";
+
+@mixin set-theme-vars($defs, $target) {
+	@each $name, $targets in $defs {
+		@if map.has-key($targets, $target) {
+			--#{$name}: #{map.get($targets, $target)};
+		}
+	}
+}
+
+@mixin theme($defs) {
+	:root {
+		@include set-theme-vars($defs, light);
+		@media (prefers-color-scheme: dark) {
+			@include set-theme-vars($defs, dark);
+			color-scheme: dark;
+		}
+
+		@media (prefers-contrast: more) {
+			@include set-theme-vars($defs, light-hc);
+			@media (prefers-color-scheme: dark) {
+				@include set-theme-vars($defs, dark-hc);
+			}
+		}
+	}
+}
+
+@mixin define-quad($name, $block-start, $inline-start: $block-start, $block-end: $block-start, $inline-end: $inline-start) {
+	--#{$name}-block-start: #{$block-start};
+	--#{$name}-inline-start: #{$inline-start};
+	--#{$name}-block-end: #{$block-end};
+	--#{$name}-inline-end: #{$inline-end};
+}
+
+@mixin padding($name, $subtract: null) {
+	@if $subtract {
+		padding-block:
+			calc(var(--#{$name}-block-start) - $subtract)
+			calc(var(--#{$name}-block-end) - $subtract);
+		padding-inline:
+			calc(var(--#{$name}-inline-start) - $subtract)
+			calc(var(--#{$name}-inline-end) - $subtract);
+	} @else {
+		padding-block:
+			var(--#{$name}-block-start)
+			var(--#{$name}-block-end);
+		padding-inline:
+			var(--#{$name}-inline-start)
+			var(--#{$name}-inline-end);
+	}
+}

package/src/theme/components/button.scss

@@ -0,0 +1,116 @@
+@use "../common";
+
+@include common.theme((
+	button-default-bg: (
+		dark: rgb(54, 54, 54),
+	),
+	button-default-bg-lit: (
+		dark: rgb(72, 72, 72),
+	),
+	button-default-fg: (
+		dark: var(--fg),
+	),
+	button-default-border: (
+		dark: rgb(80, 80, 80),
+	),
+
+	button-primary-bg: (
+		dark: rgb(0, 100, 200),
+	),
+	button-primary-bg-lit: (
+		dark: rgb(0, 128, 255),
+	),
+	button-primary-fg: (
+		dark: white,
+	),
+	button-primary-border: (
+		dark: rgb(0, 100, 200),
+	),
+
+	button-success-bg: (
+		dark: rgb(0, 200, 100),
+	),
+	button-success-bg-lit: (
+		dark: rgb(0, 242, 121),
+	),
+	button-success-fg: (
+		dark: black,
+	),
+	button-success-border: (
+		dark: rgb(0, 200, 100),
+	),
+
+	button-warning-bg: (
+		dark: rgb(255, 200, 0),
+	),
+	button-warning-bg-lit: (
+		dark: rgb(255, 224, 122),
+	),
+	button-warning-fg: (
+		dark: black,
+	),
+	button-warning-border: (
+		dark: rgb(255, 200, 0),
+	),
+
+	button-danger-bg: (
+		dark: rgb(255, 0, 64),
+	),
+	button-danger-bg-lit: (
+		dark: rgb(255, 64, 96),
+	),
+	button-danger-fg: (
+		dark: black,
+	),
+	button-danger-border: (
+		dark: rgb(255, 0, 64),
+	),
+
+	button-input-bg: (
+		dark: rgb(16, 16, 16),
+	),
+	button-input-bg-lit: (
+		dark: rgb(36, 36, 36),
+	),
+	button-input-fg: (
+		dark: white,
+	),
+	button-input-border: (
+		dark: rgb(80, 80, 80),
+	),
+));
+
+.button {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: 600;
+	line-height: 1;
+
+	cursor: pointer;
+
+	outline: none;
+	@include common.padding(control-pad, var(--control-border));
+
+	border-radius: var(--control-radius);
+
+	&[disabled] {
+		cursor: default;
+		filter: var(--control-disabled);
+	}
+}
+
+@each $variant in (default, primary, success, warning, danger, input) {
+	.button_#{$variant} {
+		background-color: var(--button-#{$variant}-bg);
+		color: var(--button-#{$variant}-fg);
+		border: var(--control-border) solid var(--button-#{$variant}-border, transparent);
+		&:hover:not(:active):not([disabled]),
+		&:focus-visible:not([disabled]) {
+			background-color: var(--button-#{$variant}-bg-lit);
+		}
+	}
+}
+
+.button_input {
+	text-align: left;
+}

package/src/theme/components/checkbox.scss

@@ -0,0 +1,25 @@
+
+.checkbox_label {
+	display: flex;
+	column-gap: var(--control-column-gap);
+	align-items: start;
+
+	&:has(.checkbox_input:not(:disabled)) {
+		cursor: pointer;
+	}
+
+	&:has(.checkbox_input:disabled) > .checkbox_content {
+		filter: var(--control-disabled);
+	}
+
+	&:has(.checkbox_input:focus-visible) {
+		outline: var(--focus-outline);
+		outline-offset: var(--focus-outline-offset);
+	}
+}
+
+.checkbox_input {
+	margin: 0;
+	outline: none;
+	cursor: inherit;
+}

package/src/theme/components/collapse.scss

@@ -0,0 +1,64 @@
+
+.collapse {
+	display: block;
+	position: relative;
+	--space-scale: 0;
+}
+
+.collapse_sized {
+	transition:
+		margin-block-start var(--layout-transition),
+		margin-block-end var(--layout-transition);
+}
+
+@keyframes alert {
+	from { transform: translateX(0rem); }
+	30% { transform: translateX(.2rem); }
+	70% { transform: translateX(-.2rem); }
+	to { transform: translateX(0rem); }
+}
+
+.collapse_alert {
+	animation: alert .2s ease;
+}
+
+.collapse_visible.collapse_visible {
+	--space-scale: 1;
+}
+
+.collapse_view {
+	block-size: 0px;
+	position: relative;
+	overflow: hidden;
+
+	.collapse_sized > & {
+		transition:
+			block-size var(--layout-transition),
+			margin var(--layout-transition);
+	}
+
+	.collapse_visible > & {
+		block-size: calc(var(--collapse-size) + var(--overflow-safe-area) * 2);
+		margin: calc(var(--overflow-safe-area) * -1);
+	}
+}
+
+.collapse_content {
+	position: absolute;
+	inline-size: 100%;
+	top: 0px;
+	left: 0px;
+
+	.collapse_sized > * > & {
+		transition:
+			top var(--layout-transition),
+			left var(--layout-transition),
+			inline-size var(--layout-transition);
+	}
+
+	.collapse_visible & {
+		top: var(--overflow-safe-area);
+		left: var(--overflow-safe-area);
+		inline-size: calc(100% - var(--overflow-safe-area) * 2);
+	}
+}

package/src/theme/components/column.scss

@@ -0,0 +1,28 @@
+
+.column {
+	display: flex;
+	flex-direction: column;
+
+	& > :not(:first-child) {
+		margin-block-start: calc(
+			(var(--space-above, var(--parent-row-gap)) - var(--parent-row-gap)) * var(--space-scale)
+			+ var(--parent-row-gap) * (var(--space-scale) - 1) / 2
+		);
+	}
+
+	& > :not(:last-child) {
+		margin-block-end: calc(
+			(var(--space-below, var(--parent-row-gap)) - var(--parent-row-gap)) * var(--space-scale)
+			+ var(--parent-row-gap) * (var(--space-scale) - 1) / 2
+		);
+	}
+}
+
+@each $size in "content", "control" {
+	.column_#{$size} {
+		row-gap: var(--#{$size}-row-gap);
+		& > * {
+			--parent-row-gap: var(--#{$size}-row-gap);
+		}
+	}
+}

package/src/theme/components/control-group.scss

@@ -0,0 +1,14 @@
+
+.control_group {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	& > :not(:first-child) {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+	& > :not(:last-child) {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+}