diff --git a/module/data/Item/Weapon.mjs b/module/data/Item/Weapon.mjs
index 06460f9..dd23042 100644
--- a/module/data/Item/Weapon.mjs
+++ b/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` },
diff --git a/module/handlebarHelpers/inputs/formFields.mjs b/module/handlebarHelpers/inputs/formFields.mjs
index 0ddd6b5..16ca51e 100644
--- a/module/handlebarHelpers/inputs/formFields.mjs
+++ b/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 `
${input.label}
`;
};
-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;
};
diff --git a/module/handlebarHelpers/inputs/string-set.mjs b/module/handlebarHelpers/inputs/string-set.mjs
new file mode 100644
index 0000000..c8dfe76
--- /dev/null
+++ b/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 `
+ ${label}
+ ${input.value}
+
`;
+ };
+
+ return `
+
+
+
`;
+};
diff --git a/templates/Apps/AllItemSheetV1/style.css b/templates/Apps/AllItemSheetV1/style.css
index aae921a..8e73f7b 100644
--- a/templates/Apps/AllItemSheetV1/style.css
+++ b/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 {
- display: contents;
+ [data-input-type="string-set"] {
+ padding: 2px 4px;
+ display: flex;
+ flex-direction: row;
+ column-gap: var(--col-gap);
+ grid-row: span 2;
+
+ label, .label {
+ padding: 0;
+ }
}
}
diff --git a/templates/css/common.css b/templates/css/common.css
index 175d7a9..d234f59 100644
--- a/templates/css/common.css
+++ b/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 {
diff --git a/templates/css/elements/string-tags.css b/templates/css/elements/string-tags.css
new file mode 100644
index 0000000..bd1bc31
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/templates/css/themes/dark.css b/templates/css/themes/dark.css
index 9c0c05d..1f92f66 100644
--- a/templates/css/themes/dark.css
+++ b/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);
}