@rvx/ui 0.1.6

package/dist/theme.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/button.scss","../src/theme/components/checkbox.scss","../src/theme/components/collapse.scss","../src/theme/components/column.scss","../src/theme/components/control-group.scss","../src/theme/components/dialog.scss","../src/theme/components/dropdown.scss","../src/theme/components/flex-space.scss","../src/theme/components/heading.scss","../src/theme/components/label.scss","../src/theme/components/link.scss","../src/theme/components/page.scss","../src/theme/components/popover.scss","../src/theme/components/radio-buttons.scss","../src/theme/components/row.scss","../src/theme/components/scroll-view.scss","../src/theme/components/text-input.scss","../src/theme/components/text.scss","../src/theme/components/validation.scss","../src/theme/components/value.scss"],"names":[],"mappings":"AASA;EACC;EACA;EACA;EAEA;EACA;EACA;EACA;ECWA;EACA;EACA;EACA;EDXA;EACA;EACA;EACA;EACA;ECIA;EACA;EACA;EACA;EDJA;EAEA;EAEA;EACA;EAEA;;;ACrBC;EAFD;IANE;IAAA;IAAA;IAUA;;;ADkCH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;ACtDC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;ACmEH;EACC;EACA;EACA;EACA;EAEA;EAEA;EDtDC,eACC;EAED,gBACC;ECqDF;;AAEA;EACC;EACA;;;AAKD;EACC;EACA;EACA;;AACA;EAEC;;;AANF;EACC;EACA;EACA;;AACA;EAEC;;;AANF;EACC;EACA;EACA;;AACA;EAEC;;;AANF;EACC;EACA;EACA;;AACA;EAEC;;;AANF;EACC;EACA;EACA;;AACA;EAEC;;;AANF;EACC;EACA;EACA;;AACA;EAEC;;;AAKH;EACC;;;ACjHD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;;;ACtBD;EACC;EACA;EACA;;;AAGD;EACC,YACC;;;AAIF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC5DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;;AAQD;EACC;;AACA;EACC;;;AAHF;EACC;;AACA;EACC;;;ACvBH;EACC;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;;ALEA;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AMEH;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EAEA;EACA;EACA;EACA;ENDC,eACC;EAED,gBACC;;;AMCH;EACC;;;AN7BC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AOEH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EPPC,eACC;EAED,gBACC;;AOMF;EACC;;;AC9CF;EACC;EACA;EACA;;;ACHD;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;;ATxBC;EAFD;IANE;IAUA;;;AUPH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AVRA;EAFD;IANE;IAUA;;;AWPH;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;ACrBF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AZPC;EAFD;IANE;IAAA;IAAA;IAUA;;;AaDH;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EbnBC,eACC;EAED,gBACC;;;AcvCH;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AC5BD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AfAD;EAFD;IANE;IAAA;IAUA;;;AgBJH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AhBpCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AiBEH;EACC;EACA;EACA;EAEA;EAEA;EjBmBC,eACC;EAED,gBACC;EiBrBF;EACA;EAEA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC1CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AlBIA;EAFD;IANE;IAUA;;;AmBPH;EACC;;;AAGD;EACC;;;ACZD;EACC","file":"theme.module.css"}

package/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@rvx/ui",
+	"description": "Rvx based complete UI component library",
+	"homepage": "https://github.com/mxjp/rvx-ui",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/mxjp/rvx-ui"
+	},
+	"keywords": [
+		"ui",
+		"ux",
+		"rvx"
+	],
+	"license": "MIT",
+	"version": "0.1.6",
+	"type": "module",
+	"main": "./dist/index.js",
+	"sideEffects": false,
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./dist/": "./dist/"
+	},
+	"dependencies": {
+		"rvx": "^16.0.2"
+	}
+}

package/src/common/events.tsx

@@ -0,0 +1,130 @@
+import { waitFor } from "rvx/async";
+
+/**
+ * Get an identifier for the pressed key including any modifiers.
+ *
+ * The identifier is constructed by concatenating the modifies and lower cased key. In addition, the space key is represented as `space` for better readability.
+ *
+ * Modifiers in order:
+ * + `ctrl+`
+ * + `shift+`
+ * + `alt+`
+ * + `meta+`
+ *
+ * Examples:
+ * + `shift+a`
+ * + `ctrl+shift+space`
+ *
+ * @returns The identifier.
+ *
+ * @example
+ * ```tsx
+ * switch (keyFor(event)) {
+ *   case "enter": ...
+ *   case "ctrl+a": ...
+ * }
+ * ```
+ */
+export function keyFor(event: KeyboardEvent): string {
+	let key = event.key.toLowerCase();
+	if (key === " ") {
+		key = "space";
+	}
+	if (event.metaKey) {
+		key = "meta+" + key;
+	}
+	if (event.altKey) {
+		key = "alt+" + key;
+	}
+	if (event.shiftKey) {
+		key = "shift+" + key;
+	}
+	if (event.ctrlKey) {
+		key = "ctrl+" + key;
+	}
+	return key;
+}
+
+/**
+ * A function to run an optionally async user action.
+ *
+ * Returning false indicates, that no action has been performed and that another action or the browser default behavior can be run.
+ */
+export type Action<T extends unknown[] = []> = (event: Event, ...args: T) => void | boolean | Promise<void>;
+
+/**
+ * Call an action that was triggered by the specified event.
+ */
+export function handleActionEvent<T extends unknown[]>(event: Event, action: Action<T>, ...args: T): boolean {
+	const result = action(event, ...args);
+	if (result === false) {
+		return false;
+	}
+	event.preventDefault();
+	event.stopImmediatePropagation();
+	if (result instanceof Promise) {
+		waitFor(result);
+	}
+	return true;
+}
+
+/**
+ * Run an action of the event target is hovered for a minimum duration.
+ *
+ * @param event The "mouseenter" event.
+ * @param action The action to run.
+ * @param delay The delay to wait for.
+ *
+ * @example
+ * ```tsx
+ * <button on:mouseenter={event => {
+ *   startDelayedHoverOnMouseenter(event, () => {
+ *     // Close things like popovers or dropdowns in the same context
+ *     // when this button was hovered for some time:
+ *     event.target.dispatchEvent(createPassiveActionEvent());
+ *   });
+ * }}>Hover me!</button>
+ * ```
+ */
+export function startDelayedHoverOnMouseenter(event: MouseEvent, action: () => void, delay = 300): void {
+	const timer = setTimeout(action, delay);
+	const cancel = () => {
+		event.target?.removeEventListener("mouseleave", cancel);
+		event.target?.removeEventListener("mousedown", cancel, { capture: true });
+		event.target?.removeEventListener("touchstart", cancel, { capture: true });
+		clearTimeout(timer);
+	};
+	event.target?.addEventListener("mouseleave", cancel);
+	event.target?.addEventListener("mousedown", cancel, { capture: true });
+	event.target?.addEventListener("touchstart", cancel, { capture: true });
+}
+
+/**
+ * Rvx-ui's passive action event name.
+ *
+ * + This can be dispatched from an element to indicate that the user is likely no longer interested in interacting with other elements in the same context.
+ * + This is currently used to close nested dropdowns when the user hovers another dropdown item in the parent for some time.
+ */
+export const PASSIVE_ACTION_EVENT = "rvx-ui:passive-action";
+
+/**
+ * Create a {@link PASSIVE_ACTION_EVENT} custom event.
+ *
+ * This event does not bubble.
+ */
+export function createPassiveActionEvent(): Event {
+	return new CustomEvent(PASSIVE_ACTION_EVENT);
+}
+
+/**
+ * Debounce an event handler.
+ */
+export function debounceEvent<T>(delayMs: number, handler: (event: T) => void): (event: T) => void {
+	let timer: number;
+	return event => {
+		if (timer) {
+			clearTimeout(timer);
+		}
+		timer = (setTimeout as typeof window.setTimeout)(() => handler(event), delayMs);
+	};
+}

package/src/common/parsers.tsx

@@ -0,0 +1,167 @@
+import { sig, Signal, watchUpdates } from "rvx";
+
+import { Validator } from "../components/validation.js";
+
+export interface ValidParseResult<S> {
+	type: "valid";
+
+	/**
+	 * The parsed value.
+	 */
+	value: S;
+}
+
+export interface InvalidParseResult<M> {
+	type: "invalid";
+
+	/**
+	 * The validation message key.
+	 */
+	value: M;
+}
+
+export type ParseResult<S, M> = ValidParseResult<S> | InvalidParseResult<M>;
+
+export class ParserFormatError extends TypeError {}
+
+export interface Parser<S, I, M extends string> {
+	/**
+	 * Parse the specified input.
+	 */
+	parse(input: I): ParseResult<S, M>;
+
+	/**
+	 * Format the specified source.
+	 *
+	 * @throws A {@link ParserFormatError} if the source isn't currently formattable.
+	 */
+	format(source: S): I;
+
+	/**
+	 * An object with validation message keys and content to display.
+	 */
+	messages: Record<M, unknown>;
+}
+
+/**
+ * Utility to get the source type from a parser.
+ */
+export type ParserSource<P extends Parser<any, any, any>> = P extends Parser<infer S, any, any> ? S : never;
+
+/**
+ * Utility to get the input type from a parser.
+ */
+export type ParserInput<P extends Parser<any, any, any>> = P extends Parser<any, infer I, any> ? I : never;
+
+/**
+ * Utility to get the message keys type from a parser.
+ */
+export type ParserMessages<P extends Parser<any, any, any>> = P extends Parser<any, any, infer M> ? M : never;
+
+/**
+ * Create a bi-directional input signal with validation.
+ *
+ * @param source The source signal.
+ * @param parser The parser to use.
+ * @param input The initial input signal to use. If not specified, the parser is used to format the current source value.
+ *
+ * @example
+ * ```tsx
+ * const value = sig(0);
+ *
+ * // Format the current value as initial value:
+ * <TextInput value={
+ *   value
+ *     .pipe(parse, intParser({ format: "Enter a valid number." }))
+ *     .pipe(trim)
+ * } />
+ * ```
+ */
+export function parse<S, P extends Parser<S, any, any>>(source: Signal<S>, parser: P, input?: Signal<ParserInput<P>>): Signal<ParserInput<P>> {
+	if (input === undefined) {
+		input = sig(parser.format(source.value));
+	}
+
+	const invalid = sig<undefined | ParserMessages<P>>(undefined);
+
+	watchUpdates(source, value => {
+		try {
+			input!.value = parser.format(value) as ParserInput<P>;
+		} catch (error) {
+			if (!(error instanceof ParserFormatError)) {
+				throw error;
+			}
+		}
+	});
+
+	watchUpdates(input, value => {
+		const result = parser.parse(value);
+		if (result.type === "valid") {
+			source.value = result.value;
+			invalid.value = undefined;
+		} else {
+			invalid.value = result.value as ParserMessages<P>;
+		}
+	});
+
+	const validator = Validator.attach(source);
+	validator.attach(input);
+
+	for (const key in parser.messages) {
+		validator.prependRule({
+			validate: () => invalid.value !== key,
+			message: parser.messages[key],
+		});
+	}
+
+	return input;
+}
+
+export interface IntParserOptions {
+	/**
+	 * A function to check if the parsed value is in a valid range.
+	 *
+	 * By default, the value must be a safe integer.
+	 */
+	testRange?: (value: number) => boolean;
+
+	/**
+	 * A validation message if the format is invalid.
+	 */
+	format: unknown;
+
+	/**
+	 * A validation message if the parsed value is out of range.
+	 *
+	 * By default, the format validation message is used.
+	 */
+	range?: unknown;
+}
+
+/**
+ * Create a parser for integers for use with {@link parse}.
+ */
+export function intParser(options: IntParserOptions): Parser<number, string, "format" | "range"> {
+	const range = options.testRange ?? Number.isSafeInteger;
+	return {
+		parse(input) {
+			if (!/^-?\d+$/.test(input)) {
+				return { type: "invalid", value: "format" };
+			}
+			const value = Number(input);
+			if (!range(value)) {
+				return { type: "invalid", value: "range" };
+			}
+			return { type: "valid", value };
+		},
+
+		format(source) {
+			return String(source);
+		},
+
+		messages: {
+			format: options.format,
+			range: options.range ?? options.format,
+		},
+	};
+}

package/src/common/theme-test.tsx

@@ -0,0 +1,20 @@
+import { extract } from "rvx";
+
+import { THEME, Theme } from "./theme.js";
+
+/**
+ * Get a class name from the current theme.
+ *
+ * @throws An error if the current theme doesn't support the specified key.
+ */
+export function themeClass(key: keyof Theme): string {
+	const theme = extract(THEME);
+	if (!theme) {
+		throw new Error("theme is not available in the current context");
+	}
+	const value = theme[key];
+	if (value === undefined) {
+		throw new Error(`${key} is not supported by the current theme`);
+	}
+	return value;
+}

package/src/common/theme.tsx

@@ -0,0 +1,165 @@
+import { ContextKey } from "rvx";
+
+export const THEME = Symbol.for("rvx-ui:theme") as ContextKey<Theme>;
+
+/**
+ * A collection of class names that is used as the theme.
+ *
+ * @example
+ * ```tsx
+ * import { mount, Inject } from "rvx";
+ * import { THEME, Button } from "@rvx/ui";
+ *
+ * import theme from "./theme.module.css";
+ *
+ * mount(
+ *   document.body,
+ *   <Inject key={THEME} value={theme}>
+ *     {() => <>
+ *       <Button>Click me!</Button>
+ *     </>}
+ *   </Inject>
+ * );
+ * ```
+ */
+export interface Theme {
+	/** Class for all buttons */
+	button?: string;
+	/** Additional class for buttons with the "default" variant */
+	button_default?: string;
+	/** Additional class for buttons with the "primary" variant */
+	button_primary?: string;
+	/** Additional class for buttons with the "success" variant */
+	button_success?: string;
+	/** Additional class for buttons with the "danger" variant */
+	button_danger?: string;
+	/** Additional class for buttons with the "warning" variant */
+	button_warning?: string;
+	/** Additional class for buttons with the "input" variant */
+	button_input?: string;
+
+	/** Class for all checkbox containing labels */
+	checkbox_label?: string;
+	/** Class for all checkbox inputs */
+	checkbox_input?: string;
+	/** Class for checkbox text content. This element may also be a text block. */
+	checkbox_content?: string;
+
+	/** Class for collapses */
+	collapse?: string;
+	/** Class for collapses that is when it's size has been measured. */
+	collapse_sized?: string;
+	/** Class for an additional element between the collapse container and the content. If this is undefined, the element is omitted. */
+	collapse_view?: string;
+	/** Class that is added to collapses to play an alert animation. */
+	collapse_alert?: string;
+	/** Additional class for visible collapses */
+	collapse_visible?: string;
+	/** Class for collapse content */
+	collapse_content?: string;
+
+	/** Class for all columns */
+	column?: string;
+	/** Additional class for columns of content */
+	column_content?: string;
+	/** Additional class for columns of controls */
+	column_control?: string;
+
+	/** Class for all inline control groups */
+	control_group?: string;
+
+	/** Class for all dialog containers */
+	dialog_container?: string;
+	/** Class for all dialog bodies */
+	dialog_body?: string;
+	/** Class for all dialog footers */
+	dialog_footer?: string;
+
+	/** Class for all dropdown roots. */
+	dropdown?: string;
+	/** Additional class for nested dropdowns. */
+	dropdown_expansion?: string;
+	/** Class for the dropdown scroll area. */
+	dropdown_scroll_area?: string;
+	/** Class for the dropdown content. */
+	dropdown_content?: string;
+	/** Class for all dropdown items. */
+	dropdown_item?: string;
+	/** Class for the currently active dropdown item. */
+	dropdown_item_active?: string;
+
+	/** Class for growing flex space */
+	flex_space?: string;
+
+	/** Class for all headings which are also semantic elements like h1, h2 etc. */
+	heading?: string;
+
+	/** Class for all labels */
+	label?: string;
+
+	/** Class for all links */
+	link?: string;
+
+	/** Class for all page roots. */
+	page?: string;
+	/** Class for page scrollbar size compensation elements. */
+	page_scrollbar_comp?: string;
+	/** Class for the page content column besides the scrollbar size compensation element. */
+	page_content_col?: string;
+	/** Class for page content roots. */
+	page_content?: string;
+
+	/** Class for all popover roots. */
+	popover?: string;
+	/** Class for the spike container area. */
+	popover_spike_area?: string;
+	/** Class for the popover scrollable area. */
+	popover_scroll_area?: string;
+	/** Class for the spike root. */
+	popover_spike?: string;
+	/** Class for the popover content. */
+	popover_content?: string;
+
+	/** Class for all radio button columns */
+	radio_buttons?: string;
+	/** Class for all radio button containing labels */
+	radio_button_label?: string;
+	/** Class for all radio button inputs */
+	radio_button_input?: string;
+	/** Class for radio button text content. This element may also be a text block. */
+	radio_button_content?: string;
+
+	/** Class for all rows */
+	row?: string;
+	/** Additional class for rows of content */
+	row_content?: string;
+	/** Additional class for rows of controls */
+	row_control?: string;
+
+	/** Class for all scroll view roots */
+	scroll_view?: string;
+	/** Class for the scrolling area. */
+	scroll_view_area?: string;
+	/** Class for scroll view content root. */
+	scroll_view_content?: string;
+	/** Class for scroll view start overflow indicators. */
+	scroll_view_indicator_start?: string;
+	/** Class for scroll view end overflow indicators. */
+	scroll_view_indicator_end?: string;
+	/** Class for visible overflow indicators. */
+	scroll_view_indicator_visible?: string;
+
+	/** Class for all text inputs */
+	text_input?: string;
+
+	/** Class for all text blocks */
+	text?: string;
+
+	/** Class for all validation messages */
+	validation_message?: string;
+	/** Class for all validation message containers. */
+	validation_message_container?: string;
+
+	/** Class for all text values */
+	value?: string;
+}

package/src/common/trim.tsx

@@ -0,0 +1,30 @@
+import { sig, Signal, watchUpdates } from "rvx";
+
+import { validatorFor } from "../components/validation.js";
+
+/**
+ * Create a signal that trims input.
+ *
+ * This supports validation.
+ *
+ * @example
+ * ```tsx
+ * <TextInput value={someSignal.pipe(trim)} />;
+ * ```
+ */
+export function trim(source: Signal<string>): Signal<string> {
+	const input = sig(source.value);
+
+	watchUpdates(input, value => {
+		source.value = value.trim();
+	});
+
+	watchUpdates(source, value => {
+		if (value !== input.value.trim()) {
+			input.value = value;
+		}
+	});
+
+	validatorFor(source)?.attach(input);
+	return input;
+}

package/src/common/types.tsx

@@ -0,0 +1,23 @@
+import { Expression, map } from "rvx";
+
+export type SizeContext = "content" | "control";
+
+export type AriaLive = "off" | "polite" | "assertive";
+export type AriaRelevant = "additions" | "removals" | "text" | "all" | "additions removals" | "additions text" | "removals text";
+
+/**
+ * Utility to map expressions of strings or string arrays to (e.g. space) separated strings.
+ *
+ * @example
+ * ```tsx
+ * <a rel={separated(["noreferrer", "author"], " ")} />;
+ * ```
+ */
+export function separated(input: Expression<string | string[] | undefined>, sep: string): Expression<string | undefined> {
+	return map(input, v => {
+		if (Array.isArray(v)) {
+			return v.join(sep);
+		}
+		return v;
+	});
+}