RC-90 | Add support for bar-input controls in item sheets

module/data/Item/Weapon.mjs

@@ -87,12 +87,28 @@ export class WeaponData extends foundry.abstract.TypeDataModel {
 				value: this.damage,
 				min: 0,
 			},
-			// { type: `bar`, label: `Wear` },
+			{
+				type: `bar`,
+				label: `RipCrypt.common.wear`,
+				value: {
+					label: `RipCrypt.Apps.current-wear`,
+					path: `system.wear.value`,
+					value: this.wear.value,
+					min: 0, max: this.wear.max,
+				},
+				max: {
+					label: `RipCrypt.Apps.max-wear`,
+					path: `system.wear.max`,
+					value: this.wear.max,
+					min: 0,
+				},
+			},
 			{
 				type: `dropdown`,
 				label: `Access`,
 				path: `system.access`,
 				value: this.access,
+				limited: false,
 				options: [
 					{
 						label: `RipCrypt.common.empty`,

module/handlebarHelpers/inputs/barInput.mjs

@@ -0,0 +1,36 @@
+import { localizer } from "../../utils/Localizer.mjs";
+
+export function barInput(input, data) {
+	const label = localizer(input.label);
+
+	// Trying to do limited bar info is... annoying to do.
+	if (data.meta.limited && input.limited) {
+		return ``;
+	};
+
+	return `<div data-input-type="bar">
+		<span class="label" aria-hidden="true">
+			${label}
+		</span>
+		<div class="pill-bar">
+			<input
+				type="number"
+				aria-label="${localizer(input.value.label)}"
+				${data.meta.editable ? `` : `disabled`}
+				name="${input.value.path}"
+				value="${input.value.value}"
+				min="${input.value.min ?? ``}"
+				max="${input.value.max ?? ``}"
+			>
+			<input
+				type="number"
+				aria-label="${localizer(input.max.label)}"
+				${data.meta.editable ? `` : `disabled`}
+				name="${input.max.path}"
+				value="${input.max.value}"
+				min="${input.max.min ?? ``}"
+				max="${input.max.max ?? ``}"
+			>
+		</div>
+	</div>`;
+};

module/handlebarHelpers/inputs/dropdownInput.mjs

@@ -10,7 +10,7 @@ export function dropdownInput(input, data) {
 	if (!data.meta.editable) {
 		return `<div data-input-type="dropdown">
 			<span class="label">${label}</span>
-			<span class="value">${data.meta.limited ? `???` : input.value}</span>
+			<span class="value">${data.meta.limited && input.limited ? `???` : input.value}</span>
 		</div>`;
 	};
 

module/handlebarHelpers/inputs/formFields.mjs

@@ -1,15 +1,20 @@
+import { barInput } from "./barInput.mjs";
 import { dropdownInput } from "./dropdownInput.mjs";
 import { numberInput } from "./numberInput.mjs";
 import { stringSet } from "./stringSet.mjs";
 
+const { getType } = foundry.utils;
+
 const inputTypes = {
 	"string-set": stringSet,
 	integer: numberInput,
-	bar: displayOnly,
+	bar: barInput,
 	dropdown: dropdownInput,
 	boolean: displayOnly,
 };
 
+const typesToSanitize = new Set([ `string`, `number` ]);
+
 function displayOnly(input) {
 	return `<div data-input-type="${input.type}">${input.label}</div>`;
 };
@@ -18,8 +23,15 @@ export function formFields(inputs, opts) {
 	const fields = [];
 	for (const input of inputs) {
 		if (inputTypes[input.type] == null) { continue };
-		input.value = Handlebars.escapeExpression(input.value);
+
+		input.limited ??= true;
+
+		if (typesToSanitize.has(getType(input.value))) {
+			input.value = Handlebars.escapeExpression(input.value);
+		};
 		fields.push(inputTypes[input.type](input, opts.data.root));
 	};
-	return fields.join(opts.hash?.joiner ?? `<hr />`);
+	return fields
+		.filter(i => i.length > 0)
+		.join(opts.hash?.joiner ?? `<hr />`);
 };

module/handlebarHelpers/inputs/numberInput.mjs

@@ -9,7 +9,7 @@ export function numberInput(input, data) {
 	if (!data.meta.editable) {
 		return `<div data-input-type="integer">
 			<span class="label">${label}</span>
-			<span class="value">${data.meta.limited ? `???` : input.value}</span>
+			<span class="value">${data.meta.limited && input.limited ? `???` : input.value}</span>
 		</div>`;
 	};
 

module/handlebarHelpers/inputs/stringSet.mjs

@@ -14,21 +14,23 @@ export function stringSet(input, data) {
 			.map(t => {
 				return `<div class="tag">${t.trim()}</div>`;
 			});
+		let count = tagList.length;
 		let tags = tagList.join(``);
 
 		if (tagList.length === 0) {
 			tags = `---`;
 		};
 
-		if (data.meta.limited) {
+		if (data.meta.limited && input.limited) {
+			count = 0;
 			tags = `???`;
 		};
 
 		return `<div data-input-type="string-set">
 			<span class="label">${label}</span>
 			<div
-				class="input-element-tags tags ${tags.length == 0 ? `empty` : ``}"
-				data-tag-count="${tagList.length}"
+				class="input-element-tags tags ${count == 0 ? `empty` : ``}"
+				data-tag-count="${count}"
 			>
 				${tags}
 			</div>