@yahoo/uds-create-config 4.13.0 → 4.15.0

package/dist/capture/capture-to-spec.js

@@ -234,6 +234,10 @@ var Converter = class {
 				if (text) props[prop] = text;
 			}
 		}
+		if ("value" in declared && props.value === void 0) {
+			const field = fieldValue(el, declared.value);
+			if (field !== void 0) props.value = field;
+		}
 		const loose = [];
 		const looseSelector = renders ? ROOT_LAYER : `${ROOT_LAYER}, svg`;
 		for (const nested of asArray(el.querySelectorAll(looseSelector))) {
@@ -411,6 +415,45 @@ function withinAny(el, layers, root) {
 function layerOf(root, path, layer) {
 	for (const candidate of asArray(root.querySelectorAll(`[data-uds-component="${path}"][data-uds-layer="${layer}"]`))) if (nearestRoot(candidate) === root) return candidate;
 }
+/** Field types whose `value` is a submit token rather than what the field shows. */
+const NON_TEXT_INPUT = new Set([
+	"checkbox",
+	"radio",
+	"hidden",
+	"submit",
+	"button",
+	"reset",
+	"image",
+	"file"
+]);
+/**
+* What the first form field under `root` shows: an input's `value` attribute, a textarea's text, a
+* select's chosen option. A field inside a nested component belongs to that component. The value is
+* typed by the declaration, so a `number` prop reads `24` rather than `'24'`.
+*/
+function fieldValue(root, declaration) {
+	for (const field of asArray(root.querySelectorAll("input, textarea, select"))) {
+		if (field.closest(ROOT_LAYER) !== root && nearestRoot(field) !== root) continue;
+		if (!visible(field) || hiddenBetween(field, root)) continue;
+		let raw = null;
+		const tag = field.tagName.toLowerCase();
+		if (tag === "input") {
+			const type = (field.getAttribute("type") ?? "text").toLowerCase();
+			if (NON_TEXT_INPUT.has(type)) continue;
+			raw = field.getAttribute("value");
+		} else if (tag === "textarea") raw = field.textContent;
+		else {
+			const chosen = asArray(field.querySelectorAll("option")).find((option) => option.hasAttribute("selected"));
+			raw = chosen ? chosen.getAttribute("value") ?? chosen.textContent : null;
+		}
+		if (raw === null || raw === "") return void 0;
+		if (declaration?.type === "number") {
+			const number = Number(raw);
+			return Number.isFinite(number) ? number : void 0;
+		}
+		return raw;
+	}
+}
 function svgOf(svg) {
 	return {
 		paths: asArray(svg.querySelectorAll("path")).map((p) => p.getAttribute("d") ?? "").filter(Boolean),