RC-93 | Group Input

langs/en-ca.json

@@ -33,6 +33,7 @@
 				"Rare": "Rare",
 				"Scarce": "Scarce"
 			},
+			"advances": "Advances",
 			"ammo": "Ammo",
 			"anatomy": {
 				"head": "Head",

module/data/Item/Skill.mjs

@@ -58,6 +58,20 @@ export class SkillData extends foundry.abstract.TypeDataModel {
 					value: ability,
 				})),
 			},
+			{
+				type: `group`,
+				title: `RipCrypt.common.advances`,
+				paddingTop: `20px`,
+				fields: Object.values(gameTerms.Rank).map(rank => {
+					return {
+						id: `advance-${rank}`,
+						type: `text`,
+						label: `RipCrypt.common.rankNames.${rank}`,
+						path: `system.advances.${rank}`,
+						value: this.advances[rank] ?? ``,
+					};
+				}),
+			},
 		];
 		return fields;
 	};

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 };
 
+		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>`;
+};

templates/Apps/AllItemSheetV1/style.css

@@ -26,9 +26,20 @@
 	background: var(--base-background);
 	color: var(--base-text);
 
-	> [data-input-type] {
+	[data-input-type] {
 		display: contents;
 	}
+	> [data-input-type="group"] {
+		display: unset;
+		grid-column: 1 / -1;
+
+		> .content {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+			column-gap: var(--col-gap);
+			row-gap: var(--row-gap);
+		}
+	}
 
 	hr {
 		background: var(--accent-1);