Foundry/taf
1
0
Fork 0
Code Issues 12 Pull requests Releases 6 Wiki Activity Actions

Item Support #69

Merged
Oliver merged 50 commits from feature/item-support into main 2026-04-15 02:42:54 +00:00
Conversation 1 Commits 50 Files changed 50 +15 -5
1 changed files with 15 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 0f1ba90161 - Show all commits

20
module/apps/elements/Toggle.mjs
View file

@ -2,6 +2,7 @@ import { StyledShadowElement } from "./StyledShadowElement.mjs";
export class TafToggle extends StyledShadowElement(HTMLElement) { export class TafToggle extends StyledShadowElement(HTMLElement) {
static elementName = `taf-toggle`; static elementName = `taf-toggle`;
static formAssociated = true;
static _stylePath = `toggle.css`; static _stylePath = `toggle.css`;
@ -34,11 +35,12 @@ export class TafToggle extends StyledShadowElement(HTMLElement) {
}; };
get checked() { get checked() {
return this.hasAttribute(`checked`); return this._input.checked ?? false;
}; };
set checked(newValue) { set checked(newValue) {
if (typeof newValue !== `boolean`) { return }; if (typeof newValue !== `boolean`) { return };
this.toggleAttribute(`checked`, newValue); this._input.checked = newValue;
this.#emitEvents();
}; };
get disabled() { get disabled() {
@ -56,7 +58,7 @@ export class TafToggle extends StyledShadowElement(HTMLElement) {
super.connectedCallback(); super.connectedCallback();
if (this._mounted) { return }; if (this._mounted) { return };
this._internals.checked = this.checked; this._internals.checked = this.hasAttribute(`checked`);
/* /*
This converts all of the double-dash prefixed properties on the This converts all of the double-dash prefixed properties on the
@ -73,10 +75,13 @@ export class TafToggle extends StyledShadowElement(HTMLElement) {
const label = document.createElement(`label`); const label = document.createElement(`label`);
label.dataset.type = `round`; label.dataset.type = `round`;
const input = document.createElement(`input`); const input = this._input = document.createElement(`input`);
input.type = `checkbox`; input.type = `checkbox`;
input.toggleAttribute(`switch`, true); input.toggleAttribute(`switch`, true);
input.checked = this.checked; input.checked = this.hasAttribute(`checked`);
input.addEventListener(`change`, () => {
this.#emitEvents();
});
label.appendChild(input); label.appendChild(input);
@ -94,4 +99,9 @@ export class TafToggle extends StyledShadowElement(HTMLElement) {
if (!this._mounted) { return }; if (!this._mounted) { return };
this._mounted = false; this._mounted = false;
}; };
#emitEvents() {
this.dispatchEvent(new Event(`input`, {bubbles: true, cancelable: false}));
this.dispatchEvent(new Event(`change`, {bubbles: true, cancelable: false}));
};
}; };