RC-93 | Group Input

module/handlebarHelpers/inputs/formFields.mjs

@@ -1,8 +1,10 @@
 import { barInput } from "./barInput.mjs";
 import { booleanInput } from "./booleanInput.mjs";
 import { dropdownInput } from "./dropdownInput.mjs";
+import { groupInput } from "./groupInput.mjs";
 import { numberInput } from "./numberInput.mjs";
 import { stringSet } from "./stringSet.mjs";
+import { textInput } from "./textInput.mjs";
 
 const { getType } = foundry.utils;
 
@@ -12,6 +14,8 @@ const inputTypes = {
 	bar: barInput,
 	dropdown: dropdownInput,
 	boolean: booleanInput,
+	group: groupInput,
+	text: textInput,
 };
 
 const typesToSanitize = new Set([ `string`, `number` ]);
@@ -21,7 +25,9 @@ export function formFields(inputs, opts) {
 	for (const input of inputs) {
 		if (inputTypes[input.type] == null) { continue };
 
-		input.limited ??= true;
+		if (input.type !== `group`) {
+			input.limited ??= true;
+		};
 
 		if (typesToSanitize.has(getType(input.value))) {
 			input.value = Handlebars.escapeExpression(input.value);

module/handlebarHelpers/inputs/groupInput.mjs

@@ -0,0 +1,26 @@
+import { formFields } from "./formFields.mjs";
+import { localizer } from "../../utils/Localizer.mjs";
+
+export function groupInput(input, data) {
+	const title = localizer(input.title);
+
+	const content = formFields(
+		input.fields,
+		{
+			data: { root: data },
+			hash: { joiner: input.joiner ?? `` },
+		},
+	);
+
+	return `<rc-border
+		data-input-type="group"
+		var:border-color="${input.borderColor ?? `var(--accent-1)`}"
+		var:vertical-displacement="${input.verticalDisplacement ?? `12px`}"
+		var:padding-top="${input.paddingTop ?? `16px`}"
+	>
+		<div slot="title">${title}</div>
+		<div slot="content" class="content">
+			${content}
+		</div>
+	</rc-border>`;
+};

module/handlebarHelpers/inputs/textInput.mjs

@@ -0,0 +1,27 @@
+import { localizer } from "../../utils/Localizer.mjs";
+
+export function textInput(input, data) {
+	const label = localizer(input.label);
+	const id = `${data.meta.idp}-${input.id}`;
+
+	if (!data.meta.editable) {
+		return `<div data-input-type="integer">
+			<span class="label">${label}</span>
+			<span class="value">${data.meta.limited && input.limited ? `???` : input.value}</span>
+		</div>`;
+	};
+
+	return `<div data-input-type="text">
+		<label
+			for="${id}"
+		>
+			${label}
+		</label>
+		<input
+			type="text"
+			id="${id}"
+			value="${input.value}"
+			name="${input.path}"
+		/>
+	</div>`;
+};