@rvx/ui 0.1.13 → 0.1.15

package/src/components/validation.tsx

@@ -1,62 +1,90 @@
-import { $, ClassValue, Context, Expression, For, map, Signal, StyleValue, teardown, trigger, TriggerPipe, untrack } from "rvx";
+import { $, Component, Context, Emitter, memo, Signal, teardown, trigger, TriggerPipe, uniqueIdFor, untrack } from "rvx";
 import { Queue } from "rvx/async";
-import { Emitter, Event } from "rvx/event";
-import { uniqueId } from "rvx/id";
 import { THEME } from "../common/theme.js";
-import { Collapse } from "./collapse.js";
+import { CollapseFor, CollapseItem } from "./collapse.js";
 import { Text } from "./text.js";
 
-const VALIDATORS = new WeakMap<object, Validator>();
+const VALIDATORS = new WeakMap<Signal<unknown>, Validator>();
+const ALERTS = new WeakMap<Component, Emitter<[]>>();
 
-/**
- * Context for validation options used by new validators.
- */
 export const VALIDATION = new Context<ValidationOptions | undefined>();
 
-/**
- * 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 type ValidationTrigger = "if-validated" | "if-invalid" | "never";
 
 export interface ValidationOptions {
-	signalTrigger?: ValidationSignalTrigger;
+	trigger?: ValidationTrigger;
+}
+
+export interface ValidationRule {
+	/**
+	 * Validate this rule.
+	 *
+	 * Immediately accessed signals may be tracked by the caller to trigger automatic re-validation when updated.
+	 *
+	 * @param abortSignal An optional abort signal to abort validaiton if supported.
+	 * @returns An array of validation message components. If empty, this rule is considered valid.
+	 */
+	(abortSignal?: AbortSignal): Component[] | undefined | Promise<Component[] | undefined>;
+}
+
+export class ValidationRuleEntry {
+	#rule: ValidationRule;
+	#pipe: TriggerPipe;
+	#result = $<Component[]>([]);
+
+	constructor(rule: ValidationRule, notify: () => void) {
+		this.#rule = rule;
+		this.#pipe = trigger(notify);
+	}
+
+	get messages(): Component[] {
+		return this.#result.value;
+	}
+
+	async validate(abortSignal: AbortSignal | undefined, sideEffect: boolean): Promise<boolean> {
+		const messages = (await this.#pipe(() => this.#rule(abortSignal))) ?? [];
+		if (!sideEffect) {
+			for (const message of messages) {
+				if (this.#result.value.includes(message)) {
+					ALERTS.get(message)?.emit();
+				}
+			}
+		}
+		this.#result.value = messages;
+		return messages.length === 0;
+	}
+
+	reset(): void {
+		this.#pipe(() => { });
+		this.#result.value = [];
+	}
 }
 
 export class Validator {
 	#queue = new Queue();
-	#signalTrigger: ValidationSignalTrigger;
+	#trigger: ValidationTrigger;
 	#rules = $<ValidationRuleEntry[]>([]);
-	#invalid = $(false);
+	#notified = false;
 
 	constructor() {
 		const options = VALIDATION.current;
-		this.#signalTrigger = options?.signalTrigger ?? "if-validated";
+		this.#trigger = options?.trigger ?? "if-invalid";
 	}
 
-	/**
-	 * 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);
+	#notify = (): void => {
+		if (this.#notified || this.#trigger === "never" || (this.#trigger === "if-invalid" && !this.#invalid())) {
+			return;
+		}
+		this.#notified = true;
+		queueMicrotask(() => {
+			if (this.#notified) {
+				this.#queue.sideEffect(abortSignal => this.#validate(abortSignal, true));
+			}
 		});
+	};
+
+	#createRuleEntry(rule: ValidationRule): ValidationRuleEntry {
+		const entry = new ValidationRuleEntry(rule, this.#notify);
 		teardown(() => {
 			this.#rules.update(rules => {
 				const index = rules.indexOf(entry);
@@ -66,97 +94,86 @@ export class Validator {
 				rules.splice(index, 1);
 			});
 		});
+		return entry;
 	}
 
-	#ruleUpdated = () => {
-		const signalTrigger = this.#signalTrigger;
-		if (signalTrigger === "never" || (signalTrigger === "if-invalid" && !this.#invalid.value)) {
-			return;
+	#validate = async (abortSignal: AbortSignal | undefined, sideEffect: boolean): Promise<boolean> => {
+		this.#notified = false;
+		let valid = true;
+		// TODO: Support custom validation behavior.
+		for (const rule of untrack(() => this.#rules.value)) {
+			if (valid) {
+				valid = await rule.validate(abortSignal, sideEffect);
+			} else {
+				rule.reset();
+			}
 		}
-		this.triggerValidation();
+		return valid;
 	};
 
-	/**
-	 * 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));
+	validate(abortSignal?: AbortSignal): Promise<boolean> {
+		return this.#queue.block(() => this.#validate(abortSignal, false));
 	}
 
+	#invalid = () => {
+		return this.#rules.value.some(r => r.messages.length > 0);
+	};
+
 	/**
-	 * Add a rule to be validated last until the current lifecycle is disposed.
+	 * Reactively check if this validator is in an invalid state.
+	 *
+	 * @returns `true` if invalid.
 	 */
-	appendRule(rule: ValidationRule): void {
-		this.#addRule(rule, (rules, entry) => rules.push(entry));
-	}
+	invalid = memo<boolean>(this.#invalid);
 
 	/**
-	 * Attach this validator to an object.
+	 * Reactively get a space separated list of message ids.
 	 */
-	attach(target: object): void {
-		VALIDATORS.set(target, this);
-	}
+	messageIds = memo<string>(() => {
+		return this.#rules.value.flatMap(r => r.messages).map(uniqueIdFor).join(" ");
+	});
 
-	async #validate(sideEffect: boolean, signal?: AbortSignal): Promise<boolean> {
-		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;
+	get rules(): ValidationRuleEntry[] {
+		return this.#rules.value;
 	}
 
 	/**
-	 * Validate using the currently attached rules.
+	 * Append a rule to this validator until the current lifecycle is disposed.
 	 */
-	async validate(signal?: AbortSignal): Promise<boolean> {
-		return this.#queue.block(() => this.#validate(false, signal));
+	appendRule(rule: ValidationRule): void {
+		const entry = this.#createRuleEntry(rule);
+		this.#rules.update(rules => {
+			rules.push(entry);
+		});
 	}
 
 	/**
-	 * Trigger validation as a side effect.
+	 * Prepend a rule to this validator until the current lifecycle is disposed.
 	 */
-	triggerValidation(): void {
-		this.#queue.sideEffect(signal => this.#validate(true, signal));
+	prependRule(rule: ValidationRule): void {
+		const entry = this.#createRuleEntry(rule);
+		this.#rules.update(rules => {
+			rules.unshift(entry);
+		});
 	}
 
 	/**
-	 * Reset this validator to it's initial state.
+	 * Attach this validator to the specified target.
+	 *
+	 * This will overwrite existing validators on the target.
 	 */
-	reset(): void {
-		this.#invalid.value = false;
-		const rules = untrack(() => this.#rules.value);
-		for (let i = 0; i < rules.length; i++) {
-			rules[i].visible.value = false;
-		}
+	attach(target: Signal<unknown>): void {
+		VALIDATORS.set(target, this);
 	}
 
 	/**
-	 * Get or attach a validator to an object.
+	 * Find the {@link closestValidator closest validator} or {@link Validator.prototype.attach attach} a new one to the target's {@link Signal.prototype.root root}.
 	 */
-	static attach(target: object): Validator {
-		let validator = VALIDATORS.get(target);
+	static get(target: Signal<unknown>): Validator {
+		let validator = closestValidator(target);
 		if (!validator) {
 			validator = new Validator();
-			VALIDATORS.set(target, validator);
+			validator.attach(target.root);
 		}
 		return validator;
 	}
@@ -164,107 +181,88 @@ export class Validator {
 
 /**
  * Get the validator attached to the specified target.
+ *
+ * @param target The target.
+ * @returns The validator or `undefined` if there is none.
  */
-export function validatorFor(target: object): Validator | undefined {
+export function validatorFor(target: Signal<unknown>): 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 = $(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.
+ * Find the closest validator attached to the specified target or any of it's {@link Signal.prototype.source sources}.
  *
- * 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.
+ * @param target The target.
+ * @returns The validator or `undefined` if there is none.
  */
-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;
+export function closestValidator(target: Signal<unknown>): Validator | undefined;
+export function closestValidator(target: Signal<unknown> | undefined): Validator | undefined {
+	while (target) {
+		const validator = VALIDATORS.get(target);
+		if (validator) {
+			return validator;
+		}
+		target = target.source;
+	}
 }
 
 /**
- * Validate all specified targets in parallel.
+ * Validate the specified targets in parallel.
+ *
+ * @param targets The targets that have attached validators.
+ * @param abortSignal An optional abort signal to abort validation if supported.
+ * @returns `true` if valid.
  */
-export async function validate(...targets: object[]): Promise<boolean> {
+export async function validate(targets: Signal<unknown>[], abortSignal?: AbortSignal): Promise<boolean> {
 	const tasks: Promise<boolean>[] = [];
-	for (const target of targets) {
-		const validator = validatorFor(target);
+	for (let i = 0; i < targets.length; i++) {
+		const validator = validatorFor(targets[i]);
 		if (validator === undefined) {
-			throw new Error("target has no attached validator.");
+			throw new Error(`targets[${i}] has no attached validator.`);
 		}
-		tasks.push(validator.validate());
+		tasks.push(validator.validate(abortSignal));
 	}
 	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;
+	children: unknown;
 }): unknown {
 	const theme = THEME.current;
-	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>;
+	return <Text class={theme?.validation_message}>
+		{props.children}
+	</Text>;
 }
 
-/**
- * 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}
+	for: Signal<unknown> | Validator;
+}) {
+	const validator = props.for instanceof Validator
+		? props.for
+		: closestValidator(props.for);
+
+	if (!validator) {
+		throw new Error("props.for is or has no attached validator.");
+	}
+
+	return <CollapseFor each={function * (): IterableIterator<CollapseItem<Component>> {
+		for (const rule of validator.rules) {
+			for (const message of rule.messages) {
+				let alert = ALERTS.get(message);
+				if (!alert) {
+					alert = new Emitter<[]>();
+					ALERTS.set(message, alert);
+				}
+				yield {
+					value: message,
+					id: uniqueIdFor(message),
+					alert: alert.event,
+				};
+			}
+		}
+	}}>
+		{message => <ValidationMessage>
+			{message()}
 		</ValidationMessage>}
-	</For>;
+	</CollapseFor>;
 }

package/src/index.tsx

@@ -1,9 +1,6 @@
 export * from "./common/coupling.js";
-export * from "./common/debounce.js";
 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";
@@ -28,7 +25,9 @@ export * from "./components/radio-buttons.js";
 export * from "./components/row.js";
 export * from "./components/scroll-view.js";
 export * from "./components/slider.js";
+export * from "./components/tabs.js";
 export * from "./components/text-input.js";
 export * from "./components/text.js";
+export * from "./components/validation-rules.js";
 export * from "./components/validation.js";
 export * from "./components/value.js";

package/src/theme/base.scss

@@ -30,6 +30,10 @@ $root-size: 14px;
 	--control-disabled: opacity(.5);
 	@include common.define-quad(control-pad, px(8), px(10));
 
+	--input-padding: #{px(4)};
+
+	--separator: #{px(1)};
+
 	--focus-outline-offset: #{px(2)};
 
 	--overflow-safe-area: #{px(4)};
@@ -53,6 +57,9 @@ $root-size: 14px;
 	focus-outline: (
 		dark: var(--control-border) dashed var(--accent),
 	),
+	separator-color: (
+		dark: rgb(64, 64, 64),
+	),
 ));
 
 body {

package/src/theme/components/card.scss

@@ -21,7 +21,10 @@
 .card {
 	box-shadow: var(--content-shadow);
 	border-radius: var(--content-radius);
-	@include common.padding(content-pad, var(--content-border));
+
+	&:not(.card_raw) {
+		@include common.padding(content-pad, var(--content-border));
+	}
 }
 
 @each $name in (default, info, success, warning, danger) {

package/src/theme/components/checkbox.scss

@@ -18,6 +18,11 @@
 	}
 }
 
+.checkbox_padding {
+	padding: var(--input-padding);
+	margin: calc(var(--input-padding) * -1);
+}
+
 .checkbox_input {
 	margin: 0;
 	outline: none;

package/src/theme/components/column.scss

@@ -1,3 +1,4 @@
+@use "../common";
 
 .column {
 	display: flex;
@@ -32,5 +33,9 @@
 		& > * {
 			--parent-row-gap: var(--#{$size}-row-gap);
 		}
+
+		&.column_padded {
+			@include common.padding(#{$size}-pad, var(--content-border));
+		}
 	}
 }

package/src/theme/components/dialog.scss

@@ -22,8 +22,8 @@
 	background-color: var(--dialog-container-bg);
 
 	display: grid;
-	grid-template-columns: 1fr auto 1fr;
-	grid-template-rows: 3fr auto 4fr;
+	grid-template-columns: 1fr minmax(auto, var(--dialog-inline-size)) 1fr;
+	grid-template-rows: 3fr minmax(auto, var(--dialog-block-size)) 4fr;
 
 	overflow: auto;
 

package/src/theme/components/radio-buttons.scss

@@ -24,6 +24,11 @@
 	}
 }
 
+.radio_button_padding {
+	padding: var(--input-padding);
+	margin: calc(var(--input-padding) * -1);
+}
+
 .radio_button_input {
 	margin: 0;
 	outline: none;

package/src/theme/components/slider.scss

@@ -6,6 +6,7 @@
 
 	& > input {
 		outline: none;
+		cursor: grab;
 
 		&:focus-visible {
 			outline: var(--focus-outline);

package/src/theme/components/tabs.scss

@@ -0,0 +1,72 @@
+@use "../common";
+
+@include common.theme((
+	tab-handle-marker: (
+		dark: rgb(150, 150, 150),
+	),
+	tab-handle-bg: (
+		dark: rgb(64, 64, 64),
+	),
+	tab-handle-bg-active: (
+		dark: rgb(72, 72, 72),
+	),
+	tab-handle-fg: (
+		dark: rgb(172, 172, 172),
+	),
+	tab-handle-fg-active: (
+		dark: var(--fg),
+	),
+	tab-handle-fg-current: (
+		dark: var(--fg),
+	),
+));
+
+.tab_list {
+	display: flex;
+	flex-direction: row;
+	border-bottom: var(--separator) solid var(--separator-color);
+}
+
+.tab_handle {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: 600;
+	line-height: 1;
+
+	cursor: pointer;
+	outline: none;
+
+	padding-block:
+		var(--control-pad-block-start)
+		calc(var(--control-pad-block-end) - var(--control-border));
+	padding-inline:
+		var(--control-pad-inline-start)
+		var(--control-pad-inline-end);
+
+	background-color: transparent;
+	color: var(--tab-handle-fg);
+	border: none;
+	border-block-end: transparent solid var(--control-border);
+
+	border-radius: var(--control-radius) var(--control-radius) 0 0;
+	transition: var(--color-transition) background-color,
+		var(--color-transition) border-color;
+
+	&:hover,
+	&:focus-visible {
+		color: var(--tab-handle-fg-active);
+		background-color: var(--tab-handle-bg-active);
+	}
+	&:active {
+		background-color: var(--tab-handle-bg);
+	}
+}
+
+.tab_handle_current {
+	border-block-end-color: var(--tab-handle-marker);
+	color: var(--tab-handle-fg-current);
+}
+
+.tab_panel_padded {
+	@include common.padding(content-pad, var(--content-border));
+}

package/src/theme/theme.scss

@@ -19,6 +19,7 @@
 @forward "components/row";
 @forward "components/scroll-view";
 @forward "components/slider";
+@forward "components/tabs";
 @forward "components/text-input";
 @forward "components/text";
 @forward "components/validation";

package/dist/common/debounce.d.ts

@@ -1,12 +0,0 @@
-import { Signal } from "rvx";
-/**
- * Create a signal that debounces input changes.
- *
- * This supports validation.
- *
- * @example
- * ```tsx
- * <TextInput value={someSignal.pipe(debounce, 500)} />
- * ```
- */
-export declare function debounce<T>(source: Signal<T>, delay: number): Signal<T>;

package/dist/common/debounce.js

@@ -1,23 +0,0 @@
-import { $, teardown, watchUpdates } from "rvx";
-import { validatorFor } from "../components/validation.js";
-export function debounce(source, delay) {
-    const input = $(source.value);
-    let timer;
-    watchUpdates(input, value => {
-        clearTimeout(timer);
-        if (source.value !== value) {
-            timer = setTimeout(() => {
-                source.value = value;
-            }, delay);
-            teardown(() => {
-                clearTimeout(timer);
-            });
-        }
-    });
-    watchUpdates(source, value => {
-        input.value = value;
-    });
-    validatorFor(source)?.attach(input);
-    return input;
-}
-//# sourceMappingURL=debounce.js.map

package/dist/common/debounce.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"debounce.js","sourceRoot":"","sources":["../../src/common/debounce.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAU,QAAQ,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAY3D,MAAM,UAAU,QAAQ,CAAI,MAAiB,EAAE,KAAa;IAC3D,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,KAAyB,CAAC;IAE9B,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE;QAC3B,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YAC5B,KAAK,GAAI,UAAuC,CAAC,GAAG,EAAE;gBACrD,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;YACtB,CAAC,EAAE,KAAK,CAAC,CAAC;YACV,QAAQ,CAAC,GAAG,EAAE;gBACb,YAAY,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC,CAAC,CAAC;QACJ,CAAC;IACF,CAAC,CAAC,CAAC;IAEH,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE;QAC5B,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IACpC,OAAO,KAAK,CAAC;AACd,CAAC"}