schema-components 2.0.1 → 2.1.0

package/dist/lit/renderers/scNumber.mjs

@@ -0,0 +1,64 @@
+import { constraintHint } from "../../core/constraintHint.mjs";
+import "../../core/cssClasses.mjs";
+import { fieldDomId, hintIdFor } from "../../core/idPath.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scNumber.ts
+/**
+* `<sc-number>` — Custom Element renderer for `NumberField`.
+*
+* Mirrors React's `renderNumber`: `<input type="number">` with
+* integer-vs-decimal `step` and `inputmode` selection. The host
+* element narrows on `tree.type === "number"` to read `isInteger`.
+*
+* Parts: `input`, `value`, `hint`.
+*
+* @packageDocumentation
+*/
+/**
+* Lit Custom Element rendering a number-valued schema field.
+*
+* Tag: `<sc-number>` (registered by `registerSchemaComponents`).
+*/
+var ScNumber = class extends BaseScElement {
+	render() {
+		const id = fieldDomId(this.path);
+		if (this.readOnly) {
+			if (typeof this.value !== "number") return html`<span part="value" id=${id}>${"—"}</span>`;
+			return html`<span part="value" id=${id}
+                >${this.value.toLocaleString()}</span
+            >`;
+		}
+		const numValue = typeof this.value === "number" ? this.value : "";
+		const isInteger = this.tree.type === "number" ? this.tree.isInteger : false;
+		const inputMode = isInteger ? "numeric" : "decimal";
+		const multipleOf = this.constraints.multipleOf;
+		const step = multipleOf !== void 0 ? String(multipleOf) : isInteger ? "1" : void 0;
+		const hint = constraintHint(this.constraints);
+		const describedBy = hint !== void 0 ? hintIdFor(id) : void 0;
+		return html`
+            <input
+                part="input"
+                id=${id}
+                type="number"
+                inputmode=${inputMode}
+                step=${step ?? ""}
+                .value=${String(this.writeOnly ? "" : numValue)}
+                min=${this.constraints.minimum ?? ""}
+                max=${this.constraints.maximum ?? ""}
+                aria-describedby=${describedBy ?? ""}
+                @input=${this.handleInput}
+            />
+            ${hint === void 0 ? html`` : html`<small part="hint" id=${hintIdFor(id)} class="sc-hint"
+                      >${hint}</small
+                  >`}
+        `;
+	}
+	handleInput = (e) => {
+		const target = e.target;
+		if (!(target instanceof HTMLInputElement)) return;
+		this.emitChange(Number(target.value));
+	};
+};
+//#endregion
+export { ScNumber };

package/dist/lit/renderers/scObject.d.mts

@@ -0,0 +1,14 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scObject.d.ts
+/**
+ * Lit Custom Element rendering an object schema field.
+ *
+ * Tag: `<sc-object>` (registered by `registerSchemaComponents`).
+ */
+declare class ScObject extends BaseScElement {
+  render(): TemplateResult;
+}
+//#endregion
+export { ScObject };

package/dist/lit/renderers/scObject.mjs

@@ -0,0 +1,57 @@
+import { isObject } from "../../core/guards.mjs";
+import { sortFieldsByOrder } from "../../core/fieldOrder.mjs";
+import { fieldDomId } from "../../core/idPath.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scObject.ts
+/**
+* `<sc-object>` — Custom Element renderer for `ObjectField`.
+*
+* Mirrors React's `renderObject`: a `<fieldset>` with one `<label>`
+* plus child renderer per property. Visibility / field-order respects
+* the same `meta.visible === false` skip and `sortFieldsByOrder()`
+* ordering as the React side.
+*
+* Parts: `fieldset`, `legend`, `field`, `label`.
+*
+* @packageDocumentation
+*/
+/**
+* Lit Custom Element rendering an object schema field.
+*
+* Tag: `<sc-object>` (registered by `registerSchemaComponents`).
+*/
+var ScObject = class extends BaseScElement {
+	render() {
+		if (this.tree.type !== "object") return html``;
+		const obj = isObject(this.value) ? this.value : {};
+		const sortedEntries = sortFieldsByOrder(this.tree.fields);
+		return html`<fieldset part="fieldset">
+            ${typeof this.meta.description === "string" ? html`<legend part="legend">${this.meta.description}</legend>` : html``}
+            ${sortedEntries.filter(([, field]) => field.meta.visible !== false).map(([key, field]) => {
+			const childValue = obj[key];
+			const childId = fieldDomId(`${this.path}.${key}`);
+			const childChange = (v) => {
+				const updated = {};
+				for (const [k, val] of Object.entries(obj)) updated[k] = val;
+				updated[key] = v;
+				this.emitChange(updated);
+			};
+			return html`<div part="field">
+                        <label part="label" for=${childId}>
+                            ${typeof field.meta.description === "string" ? field.meta.description : key}
+                            ${field.isOptional === false ? html`<span
+                                      aria-hidden="true"
+                                      class="sc-required"
+                                  >
+                                      *
+                                  </span>` : html``}
+                        </label>
+                        ${this.renderChild(field, childValue, childChange, key)}
+                    </div>`;
+		})}
+        </fieldset>`;
+	}
+};
+//#endregion
+export { ScObject };

package/dist/lit/renderers/scRecord.d.mts

@@ -0,0 +1,14 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scRecord.d.ts
+/**
+ * Lit Custom Element rendering a record schema field.
+ *
+ * Tag: `<sc-record>` (registered by `registerSchemaComponents`).
+ */
+declare class ScRecord extends BaseScElement {
+  render(): TemplateResult;
+}
+//#endregion
+export { ScRecord };

package/dist/lit/renderers/scRecord.mjs

@@ -0,0 +1,112 @@
+import { isObject } from "../../core/guards.mjs";
+import "../../core/cssClasses.mjs";
+import { fieldDomId } from "../../core/idPath.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { defaultRecordValueLit, nextRecordKeyLit, renameRecordKeyLit } from "./recordHelpers.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scRecord.ts
+/**
+* `<sc-record>` — Custom Element renderer for `RecordField`.
+*
+* Mirrors React's `renderRecord`: editable key/value rows with rename
+* (on input blur), per-row remove, and footer add. Read-only mode
+* collapses to a labelled list with no controls.
+*
+* Parts: `list`, `item`, `key`, `remove`, `add`.
+*
+* @packageDocumentation
+*/
+function ariaLabel(description) {
+	return typeof description === "string" ? description : void 0;
+}
+/**
+* Lit Custom Element rendering a record schema field.
+*
+* Tag: `<sc-record>` (registered by `registerSchemaComponents`).
+*/
+var ScRecord = class extends BaseScElement {
+	render() {
+		if (this.tree.type !== "record") return html``;
+		const obj = isObject(this.value) ? this.value : {};
+		const valueType = this.tree.valueType;
+		const entries = Object.entries(obj);
+		const label = ariaLabel(this.meta.description);
+		if (this.readOnly) {
+			if (entries.length === 0) return html`<span part="value">${"—"}</span>`;
+			return html`<div role="group" aria-label=${label ?? ""}>
+                ${entries.map(([key, value]) => {
+				return html`<div part="item">
+                        <label for=${fieldDomId(`${this.path}.${key}`)}>${key}</label>
+                        ${this.renderChild(valueType, value, () => {}, key)}
+                    </div>`;
+			})}
+            </div>`;
+		}
+		const handleRename = (oldKey, newKey) => {
+			const renamed = renameRecordKeyLit(obj, oldKey, newKey);
+			if (renamed === obj) return;
+			this.emitChange(renamed);
+		};
+		const handleValueChange = (key, next) => {
+			const updated = {};
+			for (const [k, val] of Object.entries(obj)) updated[k] = val;
+			updated[key] = next;
+			this.emitChange(updated);
+		};
+		const handleRemove = (key) => {
+			const next = {};
+			for (const [k, v] of Object.entries(obj)) {
+				if (k === key) continue;
+				next[k] = v;
+			}
+			this.emitChange(next);
+		};
+		const handleAdd = () => {
+			const newKey = nextRecordKeyLit(Object.keys(obj));
+			const next = { ...obj };
+			next[newKey] = defaultRecordValueLit(valueType);
+			this.emitChange(next);
+		};
+		return html`<div part="list" role="group" aria-label=${label ?? ""}>
+            ${entries.map(([key, value]) => {
+			return html`<div part="item">
+                    <input
+                        part="key"
+                        id=${`${fieldDomId(`${this.path}.${key}`)}-key`}
+                        type="text"
+                        aria-label="Entry key"
+                        .defaultValue=${key}
+                        @blur=${(e) => {
+				const target = e.target;
+				if (!(target instanceof HTMLInputElement)) return;
+				handleRename(key, target.value);
+			}}
+                    />
+                    ${this.renderChild(valueType, value, (nextValue) => {
+				handleValueChange(key, nextValue);
+			}, key)}
+                    <button
+                        part="remove"
+                        type="button"
+                        aria-label="Remove entry ${key}"
+                        @click=${() => {
+				handleRemove(key);
+			}}
+                    >
+                        Remove
+                    </button>
+                </div>`;
+		})}
+            <button
+                part="add"
+                type="button"
+                aria-label="Add entry"
+                @click=${handleAdd}
+            >
+                Add
+            </button>
+        </div>`;
+	}
+};
+//#endregion
+export { ScRecord };

package/dist/lit/renderers/scString.d.mts

@@ -0,0 +1,19 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scString.d.ts
+/**
+ * Lit Custom Element rendering a string-valued schema field.
+ *
+ * Tag: `<sc-string>` (registered by `registerSchemaComponents`).
+ */
+declare class ScString extends BaseScElement {
+  render(): TemplateResult;
+  private renderReadOnly;
+  private renderEditable;
+  private renderHintMaybe;
+  private handleInput;
+  private handleSelect;
+}
+//#endregion
+export { ScString };

package/dist/lit/renderers/scString.mjs

@@ -0,0 +1,165 @@
+import { dateInputType } from "../../core/formats.mjs";
+import { isSafeHyperlink, isSafeMailtoAddress } from "../../core/uri.mjs";
+import { constraintHint } from "../../core/constraintHint.mjs";
+import "../../core/cssClasses.mjs";
+import { fieldDomId, hintIdFor } from "../../core/idPath.mjs";
+import { displayJsonValue } from "../../core/walkBuilders.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scString.ts
+/**
+* `<sc-string>` — Custom Element renderer for `StringField`.
+*
+* Mirrors the React `renderString` headless renderer:
+* `<input type="…">` in editable mode with `format`-aware type
+* selection (`email`, `url`, `password`, date/time variants), or a
+* `<span>` in read-only mode that linkifies safe `mailto:` / `http(s)`
+* URLs and locale-formats date/time strings.
+*
+* Exposes the following CSS parts so consumers can theme without
+* piercing the Shadow DOM:
+*
+* - `input` — the inner `<input>` element
+* - `value` — the read-only `<span>` (or `<a>` for safe link formats)
+* - `hint` — the constraint hint `<small>` element
+*
+* @packageDocumentation
+*/
+function formatDateTime(value) {
+	if (typeof value !== "string" || value.length === 0) return void 0;
+	const date = new Date(value);
+	if (isNaN(date.getTime())) return void 0;
+	return date.toLocaleString();
+}
+function formatDate(value) {
+	if (typeof value !== "string" || value.length === 0) return void 0;
+	const date = new Date(value);
+	if (isNaN(date.getTime())) return void 0;
+	return date.toLocaleDateString();
+}
+function formatTime(value) {
+	if (typeof value !== "string" || value.length === 0) return void 0;
+	const date = new Date(value);
+	if (isNaN(date.getTime())) return void 0;
+	return date.toLocaleTimeString();
+}
+/**
+* Lit Custom Element rendering a string-valued schema field.
+*
+* Tag: `<sc-string>` (registered by `registerSchemaComponents`).
+*/
+var ScString = class extends BaseScElement {
+	render() {
+		const id = fieldDomId(this.path);
+		const strValue = typeof this.value === "string" ? this.value : "";
+		if (this.readOnly) return this.renderReadOnly(id, strValue);
+		return this.renderEditable(id, strValue);
+	}
+	renderReadOnly(id, strValue) {
+		if (strValue.length === 0) return html`<span part="value" id=${id}>${"—"}</span>`;
+		const format = this.constraints.format;
+		if (format === "email" && isSafeMailtoAddress(strValue)) return html`<a
+                part="value"
+                href=${`mailto:${strValue}`}
+                id=${id}
+                aria-readonly="true"
+                >${strValue}</a
+            >`;
+		if ((format === "uri" || format === "url") && isSafeHyperlink(strValue)) return html`<a
+                part="value"
+                href=${strValue}
+                id=${id}
+                aria-readonly="true"
+                >${strValue}</a
+            >`;
+		if (format === "date") return html`<span part="value" id=${id}
+                >${formatDate(strValue) ?? strValue}</span
+            >`;
+		if (format === "time") return html`<span part="value" id=${id}
+                >${formatTime(strValue) ?? strValue}</span
+            >`;
+		if (format === "date-time" || format === "datetime") return html`<span part="value" id=${id}
+                >${formatDateTime(strValue) ?? strValue}</span
+            >`;
+		return html`<span part="value" id=${id}>${strValue}</span>`;
+	}
+	renderEditable(id, strValue) {
+		const dateType = dateInputType(this.constraints.format);
+		const hint = constraintHint(this.constraints);
+		const hintTpl = this.renderHintMaybe(id, hint);
+		const describedBy = hint !== void 0 ? hintIdFor(id) : void 0;
+		if (dateType !== void 0) return html`
+                <input
+                    part="input"
+                    id=${id}
+                    type=${dateType}
+                    .value=${this.writeOnly ? "" : strValue}
+                    aria-describedby=${describedBy ?? ""}
+                    @input=${this.handleInput}
+                />
+                ${hintTpl}
+            `;
+		if (this.tree.type === "enum" && this.tree.enumValues.length > 0) {
+			const enumValues = this.tree.enumValues;
+			const selected = this.writeOnly ? "" : strValue;
+			return html`
+                <select
+                    part="input"
+                    id=${id}
+                    .value=${selected}
+                    aria-describedby=${describedBy ?? ""}
+                    @change=${this.handleSelect}
+                >
+                    <option value="">Select${"…"}</option>
+                    ${enumValues.map((v) => {
+				const display = displayJsonValue(v);
+				return html`<option
+                            value=${display}
+                            ?selected=${display === selected}
+                        >
+                            ${display}
+                        </option>`;
+			})}
+                </select>
+                ${hintTpl}
+            `;
+		}
+		const isCredential = this.writeOnly && this.constraints.format === "password";
+		const inputType = isCredential ? "password" : this.constraints.format === "email" ? "email" : this.constraints.format === "uri" ? "url" : "text";
+		const autoComplete = isCredential ? strValue.length > 0 ? "current-password" : "new-password" : void 0;
+		const placeholder = typeof this.meta.description === "string" ? this.meta.description : void 0;
+		return html`
+            <input
+                part="input"
+                id=${id}
+                type=${inputType}
+                autocomplete=${autoComplete ?? ""}
+                .value=${this.writeOnly ? "" : strValue}
+                placeholder=${placeholder ?? ""}
+                minlength=${this.constraints.minLength ?? ""}
+                maxlength=${this.constraints.maxLength ?? ""}
+                aria-describedby=${describedBy ?? ""}
+                @input=${this.handleInput}
+            />
+            ${hintTpl}
+        `;
+	}
+	renderHintMaybe(id, hint) {
+		if (hint === void 0) return html``;
+		return html`<small part="hint" id=${hintIdFor(id)} class="sc-hint"
+            >${hint}</small
+        >`;
+	}
+	handleInput = (e) => {
+		const target = e.target;
+		if (!(target instanceof HTMLInputElement)) return;
+		this.emitChange(target.value);
+	};
+	handleSelect = (e) => {
+		const target = e.target;
+		if (!(target instanceof HTMLSelectElement)) return;
+		this.emitChange(target.value);
+	};
+};
+//#endregion
+export { ScString };

package/dist/lit/renderers/scTuple.d.mts

@@ -0,0 +1,14 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scTuple.d.ts
+/**
+ * Lit Custom Element rendering a tuple schema field.
+ *
+ * Tag: `<sc-tuple>` (registered by `registerSchemaComponents`).
+ */
+declare class ScTuple extends BaseScElement {
+  render(): TemplateResult;
+}
+//#endregion
+export { ScTuple };

package/dist/lit/renderers/scTuple.mjs

@@ -0,0 +1,58 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scTuple.ts
+/**
+* `<sc-tuple>` — Custom Element renderer for `TupleField`.
+*
+* Mirrors React's `renderTuple`: positional rendering of every
+* `prefixItems` entry, plus rest items when present. Each entry is
+* threaded with a `[i]` path suffix so child DOM ids remain unique.
+*
+* Parts: `tuple`, `item`, `rest-item`.
+*
+* @packageDocumentation
+*/
+function ariaLabel(description) {
+	return typeof description === "string" ? description : void 0;
+}
+/**
+* Lit Custom Element rendering a tuple schema field.
+*
+* Tag: `<sc-tuple>` (registered by `registerSchemaComponents`).
+*/
+var ScTuple = class extends BaseScElement {
+	render() {
+		if (this.tree.type !== "tuple") return html``;
+		const { prefixItems, restItems } = this.tree;
+		const arr = Array.isArray(this.value) ? this.value : [];
+		if (prefixItems.length === 0 && restItems === void 0 && arr.length === 0) return html``;
+		const restCount = restItems !== void 0 ? Math.max(arr.length - prefixItems.length, 0) : 0;
+		return html`<div part="tuple" role="group" aria-label=${ariaLabel(this.meta.description) ?? ""}>
+            ${prefixItems.map((element, i) => {
+			const itemValue = arr[i];
+			const childChange = (v) => {
+				const next = arr.slice();
+				next[i] = v;
+				this.emitChange(next);
+			};
+			return html`<div part="item">
+                    ${this.renderChild(element, itemValue, childChange, `[${String(i)}]`)}
+                </div>`;
+		})}
+            ${restItems === void 0 ? html`` : Array.from({ length: restCount }, (_, j) => {
+			const i = prefixItems.length + j;
+			const itemValue = arr[i];
+			const childChange = (v) => {
+				const next = arr.slice();
+				next[i] = v;
+				this.emitChange(next);
+			};
+			return html`<div part="rest-item">
+                          ${this.renderChild(restItems, itemValue, childChange, `[${String(i)}]`)}
+                      </div>`;
+		})}
+        </div>`;
+	}
+};
+//#endregion
+export { ScTuple };

package/dist/lit/renderers/scUnion.d.mts

@@ -0,0 +1,14 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scUnion.d.ts
+/**
+ * Lit Custom Element rendering a plain union schema field.
+ *
+ * Tag: `<sc-union>` (registered by `registerSchemaComponents`).
+ */
+declare class ScUnion extends BaseScElement {
+  render(): TemplateResult;
+}
+//#endregion
+export { ScUnion };

package/dist/lit/renderers/scUnion.mjs

@@ -0,0 +1,44 @@
+import "../../core/cssClasses.mjs";
+import { matchUnionOption } from "../../core/unionMatch.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scUnion.ts
+/**
+* `<sc-union>` — Custom Element renderer for plain `UnionField`.
+*
+* Mirrors React's `renderUnion`: picks the structurally matching option
+* via {@link matchUnionOption} and delegates to `renderChild`. Falls
+* back to the first option when no match is found, or to the em-dash
+* placeholder when the union has no options.
+*
+* Parts: `value`.
+*
+* @packageDocumentation
+*/
+/**
+* Lit Custom Element rendering a plain union schema field.
+*
+* Tag: `<sc-union>` (registered by `registerSchemaComponents`).
+*/
+var ScUnion = class extends BaseScElement {
+	render() {
+		const options = this.tree.type === "union" || this.tree.type === "discriminatedUnion" ? this.tree.options : void 0;
+		if (options === void 0 || options.length === 0) {
+			if (this.value === void 0 || this.value === null) return html`<span part="value">${"—"}</span>`;
+			return html`<span part="value"
+                >${JSON.stringify(this.value)}</span
+            >`;
+		}
+		const matched = matchUnionOption(options, this.value);
+		if (matched !== void 0) return this.renderChild(matched, this.value, (next) => {
+			this.emitChange(next);
+		});
+		const firstOption = options[0];
+		if (firstOption !== void 0) return this.renderChild(firstOption, this.value, (next) => {
+			this.emitChange(next);
+		});
+		return html`<span part="value">${"—"}</span>`;
+	}
+};
+//#endregion
+export { ScUnion };

package/dist/lit/renderers/scUnknown.d.mts

@@ -0,0 +1,15 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scUnknown.d.ts
+/**
+ * Lit Custom Element rendering an unconstrained (`unknown`) schema field.
+ *
+ * Tag: `<sc-unknown>` (registered by `registerSchemaComponents`).
+ */
+declare class ScUnknown extends BaseScElement {
+  render(): TemplateResult;
+  private handleInput;
+}
+//#endregion
+export { ScUnknown };

package/dist/lit/renderers/scUnknown.mjs

@@ -0,0 +1,45 @@
+import "../../core/cssClasses.mjs";
+import { fieldDomId } from "../../core/idPath.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scUnknown.ts
+/**
+* `<sc-unknown>` — Custom Element renderer for `UnknownField`.
+*
+* Mirrors React's `renderUnknown`: a JSON-encoded fallback for
+* unconstrained values — `<input type="text">` in editable mode, a
+* `<span>` showing the stringified value in read-only mode.
+*
+* Parts: `input`, `value`.
+*
+* @packageDocumentation
+*/
+/**
+* Lit Custom Element rendering an unconstrained (`unknown`) schema field.
+*
+* Tag: `<sc-unknown>` (registered by `registerSchemaComponents`).
+*/
+var ScUnknown = class extends BaseScElement {
+	render() {
+		const id = fieldDomId(this.path);
+		if (this.readOnly) {
+			if (this.value === void 0 || this.value === null) return html`<span part="value" id=${id}>${"—"}</span>`;
+			return html`<span part="value" id=${id}>${typeof this.value === "string" ? this.value : JSON.stringify(this.value)}</span>`;
+		}
+		const strValue = typeof this.value === "string" ? this.value : "";
+		return html`<input
+            part="input"
+            id=${id}
+            type="text"
+            .value=${this.writeOnly ? "" : strValue}
+            @input=${this.handleInput}
+        />`;
+	}
+	handleInput = (e) => {
+		const target = e.target;
+		if (!(target instanceof HTMLInputElement)) return;
+		this.emitChange(target.value);
+	};
+};
+//#endregion
+export { ScUnknown };