RC-91 | Add dropdown option support

langs/en-ca.json

@@ -55,7 +55,13 @@
 				"arms": "Arms",
 				"legs": "Legs"
 			},
-			"shield": "Shield"
+			"shield": "Shield",
+			"access": {
+				"Common": "Common",
+				"Uncommon": "Uncommon",
+				"Rare": "Rare",
+				"Scarce": "Scarce"
+			}
 		},
 		"setting": {
 			"abbrAccess": {

module/data/Item/Weapon.mjs

@@ -64,31 +64,46 @@ export class WeaponData extends foundry.abstract.TypeDataModel {
 				label: `RipCrypt.common.traits`,
 				placeholder: `RipCrypt.Apps.traits-placeholder`,
 				path: `system.traits`,
-				value: ctx.meta.limited ? `???` : this.traitString,
+				value: this.traitString,
 			},
 			{
 				type: `integer`,
 				label: `RipCrypt.Apps.short-range`,
 				path: `system.range.short`,
-				value: ctx.meta.limited ? `???` : (this.range.short ?? ``),
+				value: this.range.short ?? ``,
 				min: 0,
 			},
 			{
 				type: `integer`,
 				label: `RipCrypt.Apps.long-range`,
 				path: `system.range.long`,
-				value: ctx.meta.limited ? `???` : (this.range.long ?? ``),
+				value: this.range.long ?? ``,
 				min: 0,
 			},
 			{
 				type: `integer`,
 				label: `RipCrypt.common.damage`,
 				path: `system.damage`,
-				value: ctx.meta.limited ? `???` : this.damage,
+				value: this.damage,
 				min: 0,
 			},
 			// { type: `bar`, label: `Wear` },
-			// { type: `dropdown`, label: `Access` },
+			{
+				type: `dropdown`,
+				label: `Access`,
+				path: `system.access`,
+				value: this.access,
+				options: [
+					{
+						label: `RipCrypt.common.empty`,
+						value: ``,
+					},
+					...gameTerms.Access.map(opt => ({
+						label: `RipCrypt.common.access.${opt}`,
+						value: opt,
+					})),
+				],
+			},
 		];
 
 		if (this.parent.isEmbedded) {

module/handlebarHelpers/inputs/dropdownInput.mjs

@@ -0,0 +1,38 @@
+import { localizer } from "../../utils/Localizer.mjs";
+import { options } from "../options.mjs";
+
+const { randomID } = foundry.utils;
+
+export function dropdownInput(input, data) {
+	const label = localizer(input.label);
+	const id = `${data.meta.idp}-${randomID(10)}`;
+
+	if (!data.meta.editable) {
+		return `<div data-input-type="dropdown">
+			<span class="label">${label}</span>
+			<span class="value">${data.meta.limited ? `???` : input.value}</span>
+		</div>`;
+	};
+
+	if (!input.options.length) {
+		throw new Error(`dropdown type inputs must have some options`);
+	};
+
+	return `<div data-input-type="dropdown">
+		<label
+			for="${id}"
+		>
+			${label}
+		</label>
+		<select
+			id="${id}"
+			name="${input.path}"
+		>
+			${options(
+				input.value,
+				input.options,
+				{ hash: { localize: true }},
+			)}
+		</select>
+	</div>`;
+};

module/handlebarHelpers/inputs/formFields.mjs

@@ -1,3 +1,4 @@
+import { dropdownInput } from "./dropdownInput.mjs";
 import { numberInput } from "./numberInput.mjs";
 import { stringSet } from "./stringSet.mjs";
 
@@ -5,7 +6,7 @@ const inputTypes = {
 	"string-set": stringSet,
 	integer: numberInput,
 	bar: displayOnly,
-	dropdown: displayOnly,
+	dropdown: dropdownInput,
 	boolean: displayOnly,
 };
 
@@ -17,6 +18,7 @@ export function formFields(inputs, opts) {
 	const fields = [];
 	for (const input of inputs) {
 		if (inputTypes[input.type] == null) { continue };
+		input.value = Handlebars.escapeExpression(input.value);
 		fields.push(inputTypes[input.type](input, opts.data.root));
 	};
 	return fields.join(opts.hash?.joiner ?? `<hr />`);

templates/Apps/AllItemSheetV1/style.css

@@ -9,7 +9,10 @@
 	--string-tags-add-text: white;
 	--string-tags-add-background: var(--accent-1);
 	--string-tags-input-text: white;
-	--string-tags-input-background: var(--accent-1);
+	--string-tags-input-background: var(--accent-2);
+
+	--input-text: white;
+	--input-background: var(--accent-2);
 
 	display: grid;
 	grid-template-columns: auto minmax(0, 1fr);
@@ -45,13 +48,10 @@
 		font-weight: bold;
 	}
 
-	input, .value, [data-tag-count] {
+	input, select, .value, [data-tag-count] {
 		border-radius: 4px;
 		padding: 2px 4px;
 	}
-	input {
-		background: var(--accent-2);
-	}
 	.value, [data-tag-count="0"] {
 		border: 2px solid var(--accent-2);
 	}

templates/css/elements/select.css

@@ -8,4 +8,7 @@
 	font-size: inherit;
 	display: flex;
 	align-items: center;
+
+	background: var(--input-background);
+	color: var(--input-text);
 }