From fe90172656be199acf8e36038f689207681df3f1 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Sun, 12 Jan 2025 10:39:50 -0700
Subject: [PATCH] RC-96 | Add Boolean inputs for the item forms

---
 .../handlebarHelpers/inputs/booleanInput.mjs  | 32 +++++++++++++++++++
 module/handlebarHelpers/inputs/formFields.mjs |  3 +-
 templates/Apps/AllItemSheetV1/style.css       |  5 +++
 templates/css/elements/input.css              |  6 ++++
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 module/handlebarHelpers/inputs/booleanInput.mjs

diff --git a/module/handlebarHelpers/inputs/booleanInput.mjs b/module/handlebarHelpers/inputs/booleanInput.mjs
new file mode 100644
index 0000000..cda20a9
--- /dev/null
+++ b/module/handlebarHelpers/inputs/booleanInput.mjs
@@ -0,0 +1,32 @@
+import { localizer } from "../../utils/Localizer.mjs";
+
+const { randomID } = foundry.utils;
+
+export function booleanInput(input, data) {
+	const label = localizer(input.label);
+	const id = `${data.meta.idp}-${randomID(10)}`;
+
+	if (data.meta.limited) {
+		return `<div data-input-type="boolean">
+			<span class="label">${label}</span>
+			<div>
+				<span class="value">???</span>
+			</div>
+		</div>`;
+	};
+
+	return `<div data-input-type="boolean">
+		<label for="${id}">
+			${label}
+		</label>
+		<div class="checkbox-container">
+			<input
+				type="checkbox"
+				id="${id}"
+				${input.value ? `checked` : ``}
+				name="${input.path}"
+				${data.meta.editable ? `` : `disabled`}
+			>
+		</div>
+	</div>`;
+};
diff --git a/module/handlebarHelpers/inputs/formFields.mjs b/module/handlebarHelpers/inputs/formFields.mjs
index 9b70d55..79b2f29 100644
--- a/module/handlebarHelpers/inputs/formFields.mjs
+++ b/module/handlebarHelpers/inputs/formFields.mjs
@@ -1,4 +1,5 @@
 import { barInput } from "./barInput.mjs";
+import { booleanInput } from "./booleanInput.mjs";
 import { dropdownInput } from "./dropdownInput.mjs";
 import { numberInput } from "./numberInput.mjs";
 import { stringSet } from "./stringSet.mjs";
@@ -10,7 +11,7 @@ const inputTypes = {
 	integer: numberInput,
 	bar: barInput,
 	dropdown: dropdownInput,
-	boolean: displayOnly,
+	boolean: booleanInput,
 };
 
 const typesToSanitize = new Set([ `string`, `number` ]);
diff --git a/templates/Apps/AllItemSheetV1/style.css b/templates/Apps/AllItemSheetV1/style.css
index 247101c..9f95b26 100644
--- a/templates/Apps/AllItemSheetV1/style.css
+++ b/templates/Apps/AllItemSheetV1/style.css
@@ -61,4 +61,9 @@
 	[data-tag-count="0"] {
 		justify-content: start;
 	}
+
+	[data-input-type="boolean"] > .checkbox-container {
+		display: flex;
+		justify-content: right;
+	}
 }
diff --git a/templates/css/elements/input.css b/templates/css/elements/input.css
index c800d7c..34604d4 100644
--- a/templates/css/elements/input.css
+++ b/templates/css/elements/input.css
@@ -16,6 +16,12 @@
 			border-bottom: var(--input-underline);
 		}
 
+		&[type="checkbox"] {
+			all: revert-layer;
+			--checkbox-checked-color: var(--accent-3);
+			--checkbox-background-color: var(--accent-2);
+		}
+
 		&::placeholder {
 			color: var(--input-placeholder-text);
 		}