RC-88 | String Set Input

module/data/Item/Weapon.mjs

@@ -59,7 +59,12 @@ export class WeaponData extends foundry.abstract.TypeDataModel {
 	// #region Sheet Data
 	getFormFields(ctx) {
 		const fields = [
-			{ type: `set`, label: `Traits` },
+			{
+				type: `string-set`,
+				label: `RipCrypt.common.traits`,
+				path: `system.traits`,
+				value: this.traitString,
+			},
 			{ type: `integer`, label: `Short Range` },
 			{ type: `integer`, label: `Long Range` },
 			{ type: `integer`, label: `Damage` },

module/handlebarHelpers/inputs/formFields.mjs

@@ -1,5 +1,7 @@
+import { stringSet } from "./string-set.mjs";
+
 const inputTypes = {
-	set: displayOnly,
+	"string-set": stringSet,
 	integer: displayOnly,
 	bar: displayOnly,
 	dropdown: displayOnly,
@@ -10,11 +12,11 @@ function displayOnly(input) {
 	return `<div data-input-type="${input.type}">${input.label}</div>`;
 };
 
-export function formFields(inputs) {
+export function formFields(inputs, opts) {
 	let htmlString = ``;
 	for (const input of inputs) {
 		if (inputTypes[input.type] == null) { continue };
-		htmlString += inputTypes[input.type](input);
+		htmlString += inputTypes[input.type](input, opts.data.root);
 	};
 	return htmlString;
 };

module/handlebarHelpers/inputs/string-set.mjs

@@ -0,0 +1,25 @@
+import { localizer } from "../../utils/Localizer.mjs";
+
+export function stringSet(input, data) {
+	const label = localizer(input.label);
+
+	if (!data.meta.editable) {
+		return `<div data-input-type="string-set">
+			<span class="label">${label}</span>
+			<span>${input.value}</span>
+		</div>`;
+	};
+
+	return `<div data-input-type="string-set">
+		<label
+			for="${data.meta.idp}-traits"
+		>
+			${label}
+		</label>
+		<string-tags
+			id="${data.meta.idp}-traits"
+			value="${input.value}"
+			name="${input.path}"
+		/>
+	</div>`;
+};

templates/Apps/AllItemSheetV1/style.css

@@ -2,6 +2,11 @@
 	--input-height: 1rem;
 	--col-gap: 8px;
 
+	--string-tags-tag-text: var(--header-text);
+	--string-tags-tag-background: var(--header-background);
+	--string-tags-add-text: white;
+	--string-tags-add-background: var(--accent-1);
+
 	display: grid;
 	grid-template-rows: minmax(0, 1fr);
 	grid-auto-rows: minmax(0, 1fr);
@@ -13,6 +18,11 @@
 	> :nth-child(odd) {
 		background: var(--alt-row-background);
 		color: var(--alt-row-text);
+
+		--string-tags-tag-text: var(--header-text);
+		--string-tags-tag-background: var(--header-background);
+		--string-tags-add-text: var(--button-text);
+		--string-tags-add-background: var(--button-background);
 	}
 
 	label, .label {
@@ -25,7 +35,15 @@
 		font-weight: bold;
 	}
 
-	.input-group {
+	[data-input-type="string-set"] {
-		display: contents;
+		padding: 2px 4px;
+		display: flex;
+		flex-direction: row;
+		column-gap: var(--col-gap);
+		grid-row: span 2;
+
+		label, .label {
+			padding: 0;
+		}
 	}
 }

templates/css/common.css

@@ -5,6 +5,7 @@
 @import url("./elements/lists.css");
 @import url("./elements/select.css");
 @import url("./elements/span.css");
+@import url("./elements/string-tags.css");
 @import url("./elements/table.css");
 
 .ripcrypt {

templates/css/elements/string-tags.css

@@ -0,0 +1,28 @@
+.ripcrypt string-tags {
+	--input-background: var(--string-tags-input-background);
+
+	display: grid;
+	grid-template-columns: 1fr min-content;
+	grid-template-rows: repeat(2, minmax(0, 1fr));
+
+	padding: 2px;
+	border: var(--string-tags-border);
+
+	.tags {
+		grid-column: 1 / -1;
+	}
+
+	.tag {
+		background: var(--tag-background, var(--header-background));
+		color: var(--tag-text, var(--header-text));
+		padding: 2px 4px;
+	}
+
+	button.icon.icon {
+		font-family: var(--font-awesome);
+		background: var(--string-tags-add-background);
+		color: var(--string-tags-add-text);
+		width: 30px;
+		border-radius: 4px;
+	}
+}

templates/css/themes/dark.css

@@ -7,6 +7,9 @@
 	--base-text: white;
 	--base-background: black;
 
+	--header-text: black;
+	--header-background: var(--accent-3);
+
 	--section-header-text: white;
 	--section-header-background: var(--accent-1);
 
@@ -19,4 +22,11 @@
 
 	--button-background: black;
 	--button-text: var(--accent-3);
+
+	/* Additional Variables */
+	--string-tags-border: inherit;
+	--string-tags-tag-background: inherit;
+	--string-tags-tag-text: inherit;
+	--string-tags-add-background: inherit;
+	--string-tags-add-text: var(--accent-3);
 }