feat: add Toggle component

2026-05-27 14:45:19 +02:00
parent 079bacf3a6
commit 1aa34d2640
4 changed files with 118 additions and 0 deletions
@@ -0,0 +1,60 @@
+---
+export interface Props {
+    checked?: boolean;
+    name?: string;
+    id: string;
+}
+
+const { checked = false, name = 'toggle', id} = Astro.props;
+---
+
+<toggle-switch data-checked={checked} data-name={name} id={id}>
+    <div class="toggle">
+        <div class="toggle-switch"></div>
+    </div>
+</toggle-switch>
+
+<script>
+    class ToggleSwitch extends HTMLElement {
+        private _checked: boolean = false;
+
+        connectedCallback() {
+            this._checked = this.dataset.checked === 'true';
+            this.updateUI();
+
+            this.querySelector('.toggle')?.addEventListener('click', () => {
+                this.toggle();
+            });
+        }
+
+        toggle() {
+            this._checked = !this._checked;
+            this.updateUI();
+
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: { checked: this._checked, name: this.dataset.name },
+                bubbles: true, 
+                composed: true,
+            }));
+        }
+        set checked(value: boolean) {
+            this._checked = value;
+            this.updateUI();
+        }
+
+        get checked() {
+            return this._checked;
+        }
+
+        private updateUI() {
+            this.dataset.checked = String(this._checked);
+            this.querySelector('.toggle')?.classList.toggle('toggle-active', this._checked);
+        }
+    }
+
+    customElements.define('toggle-switch', ToggleSwitch);
+</script>
+
+<style lang="scss">
+@use './_toggle.scss';
+</style>