diff --git a/module/apps/Ask.mjs b/module/apps/Ask.mjs index 472cfbf..f3d009a 100644 --- a/module/apps/Ask.mjs +++ b/module/apps/Ask.mjs @@ -2,6 +2,15 @@ import { __ID__, filePath } from "../consts.mjs"; const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api; +const validInputTypes = [ + `checkbox`, + `details`, + `divider`, + `error`, + `input`, + `select`, +]; + export class Ask extends HandlebarsApplicationMixin(ApplicationV2) { static DEFAULT_OPTIONS = { tag: `dialog`, @@ -32,11 +41,7 @@ export class Ask extends HandlebarsApplicationMixin(ApplicationV2) { static PARTS = { inputs: { template: filePath(`templates/Ask/inputs.hbs`), - templates: [ - filePath(`templates/Ask/inputs/checkbox.hbs`), - filePath(`templates/Ask/inputs/details.hbs`), - filePath(`templates/Ask/inputs/input.hbs`), - ], + templates: validInputTypes.map(type => filePath(`templates/Ask/inputs/${type}.hbs`)), }, controls: { template: filePath(`templates/Ask/controls.hbs`), @@ -69,6 +74,14 @@ export class Ask extends HandlebarsApplicationMixin(ApplicationV2) { } = {}) { super(options); this.alwaysUseAnswerObject = alwaysUseAnswerObject; + + for (const input of inputs) { + if (!validInputTypes.includes(input.type)) { + input.details = `Invalid input type provided: ${input.type}`; + input.type = `error`; + }; + }; + this._inputs = inputs; this._description = description; this._userOnCancel = onCancel; diff --git a/module/handlebarsHelpers/_index.mjs b/module/handlebarsHelpers/_index.mjs index d0923e8..b613f61 100644 --- a/module/handlebarsHelpers/_index.mjs +++ b/module/handlebarsHelpers/_index.mjs @@ -1,5 +1,7 @@ import { filePath } from "../consts.mjs"; +import { options } from "./options.mjs"; export default { systemFilePath: filePath, + "taf-options": options, }; diff --git a/module/handlebarsHelpers/options.mjs b/module/handlebarsHelpers/options.mjs new file mode 100644 index 0000000..664aaa6 --- /dev/null +++ b/module/handlebarsHelpers/options.mjs @@ -0,0 +1,34 @@ +/** + * @typedef {object} Option + * @property {string} [label] + * @property {string|number} value + * @property {boolean} [disabled] + */ + +/** + * @param {string | number} selected The selected value + * @param {Array`, + ); + }; + return new Handlebars.SafeString(htmlOptions.join(`\n`)); +}; diff --git a/styles/Apps/Ask.css b/styles/Apps/Ask.css index f0fb24e..f7bb78e 100644 --- a/styles/Apps/Ask.css +++ b/styles/Apps/Ask.css @@ -36,8 +36,19 @@ p { margin: 0; - grid-column: 1 / -1; text-indent: 1em; + + &.error { + font-size: 1.1rem; + padding: 6px 8px; + box-shadow: 0 0 10px var(--color-shadow-dark); + color: var(--color-text-light-1); + border-radius: 5px; + text-align: center; + background: var(--color-level-error-bg); + border: 1px solid var(--color-level-error); + text-indent: 0; + } } input[type="checkbox"] { diff --git a/styles/elements/hr.css b/styles/elements/hr.css new file mode 100644 index 0000000..2f87ec9 --- /dev/null +++ b/styles/elements/hr.css @@ -0,0 +1,7 @@ +.taf > .window-content hr { + height: 1px; + background: rebeccapurple; + border-radius: 0; + margin: 0; + padding: 0; +} diff --git a/styles/elements/input.css b/styles/elements/input.css index 9b72811..4c6c747 100644 --- a/styles/elements/input.css +++ b/styles/elements/input.css @@ -3,4 +3,54 @@ --input-height: 2.5rem; font-size: 1.75rem; } + + &[type="checkbox"] { + --checkbox-checked-color: var(--color-warm-1); + width: var(--checkbox-size); + height: var(--checkbox-size); + background: var(--input-background-color); + border: 2px solid var(--color-cool-3); + position: relative; + border-radius: 4px; + cursor: pointer; + + &::before, &::after { + display: none; + } + + &:focus-visible { + outline: 2px solid var(--checkbox-checked-color); + outline-offset: 3px; + } + + &:checked::after { + display: block; + position: absolute; + inset: 4px; + z-index: 1; + content: ""; + border-radius: 4px; + background: var(--checkbox-checked-color); + cursor: pointer; + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + + &::before { + display: block; + position: absolute; + inset: 0; + content: ""; + background: var(--color-level-error-bg); + border-radius: 2px; + cursor: not-allowed; + } + + &::after { + cursor: not-allowed; + } + } + } } diff --git a/styles/main.css b/styles/main.css index bf6264b..16de3e5 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,11 +1,16 @@ @layer resets, themes, elements, components, partials, apps, exceptions; +/* Resets */ +@import url("./resets/hr.css") layer(resets); +@import url("./resets/inputs.css") layer(resets); + /* Themes */ @import url("./themes/dark.css") layer(themes); @import url("./themes/light.css") layer(themes); /* Elements */ @import url("./elements/headers.css") layer(elements); +@import url("./elements/hr.css") layer(elements); @import url("./elements/input.css") layer(elements); @import url("./elements/p.css") layer(elements); @import url("./elements/prose-mirror.css") layer(elements); diff --git a/styles/resets/hr.css b/styles/resets/hr.css new file mode 100644 index 0000000..2ab3970 --- /dev/null +++ b/styles/resets/hr.css @@ -0,0 +1,3 @@ +.taf > .window-content hr { + all: initial; +} diff --git a/styles/resets/inputs.css b/styles/resets/inputs.css index aa6e6b7..0a7928f 100644 --- a/styles/resets/inputs.css +++ b/styles/resets/inputs.css @@ -1,5 +1,8 @@ .taf > .window-content { - button, input { + input[type="checkbox"] { all: initial; + &::after, &::before { + all: initial; + } } } diff --git a/templates/Ask/inputs.hbs b/templates/Ask/inputs.hbs index f5bdac4..36c1ea9 100644 --- a/templates/Ask/inputs.hbs +++ b/templates/Ask/inputs.hbs @@ -5,8 +5,6 @@

{{/if}} {{#each inputs as | i |}} -
- {{> (concat (systemFilePath "templates/Ask/inputs/" ) i.type ".hbs") i}} -
+ {{> (concat (systemFilePath "templates/Ask/inputs/" ) i.type ".hbs") i}} {{/each}} diff --git a/templates/Ask/inputs/checkbox.hbs b/templates/Ask/inputs/checkbox.hbs index cdca5e1..ce8fd88 100644 --- a/templates/Ask/inputs/checkbox.hbs +++ b/templates/Ask/inputs/checkbox.hbs @@ -1,12 +1,14 @@ - - +
+ + +
diff --git a/templates/Ask/inputs/details.hbs b/templates/Ask/inputs/details.hbs index fec6878..f84af5d 100644 --- a/templates/Ask/inputs/details.hbs +++ b/templates/Ask/inputs/details.hbs @@ -1,3 +1,3 @@ -

+

{{{ details }}}

diff --git a/templates/Ask/inputs/divider.hbs b/templates/Ask/inputs/divider.hbs new file mode 100644 index 0000000..e123ba7 --- /dev/null +++ b/templates/Ask/inputs/divider.hbs @@ -0,0 +1 @@ +
diff --git a/templates/Ask/inputs/error.hbs b/templates/Ask/inputs/error.hbs new file mode 100644 index 0000000..6fb1086 --- /dev/null +++ b/templates/Ask/inputs/error.hbs @@ -0,0 +1,3 @@ +

+ {{ details }} +

\ No newline at end of file diff --git a/templates/Ask/inputs/input.hbs b/templates/Ask/inputs/input.hbs index 196b12d..98922df 100644 --- a/templates/Ask/inputs/input.hbs +++ b/templates/Ask/inputs/input.hbs @@ -1,12 +1,14 @@ - - +
+ + +
diff --git a/templates/Ask/inputs/select.hbs b/templates/Ask/inputs/select.hbs new file mode 100644 index 0000000..9d64e34 --- /dev/null +++ b/templates/Ask/inputs/select.hbs @@ -0,0 +1,13 @@ +
+ + +