@rogieking/figui3 1.0.4 → 1.0.6

package/fig.js

@@ -398,43 +398,44 @@ window.customElements.define('fig-popover-2', FigPopover2);
 
 
 /* Tabs */
+class FigTab extends HTMLElement {
+    constructor() {
+        super()
+    }
+    connectedCallback() {
+        this.setAttribute("label", this.innerText)
+        this.addEventListener("click", this.handleClick.bind(this))
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.handleClick)
+    }
+    handleClick() {
+        this.setAttribute("selected", "true")
+    }
+}
+window.customElements.define('fig-tab', FigTab);
+
 class FigTabs extends HTMLElement {
     constructor() {
         super()
     }
     connectedCallback() {
-        const tabs = this.querySelectorAll('fig-tab')
-        const name = this.getAttribute("name") || ("tabs-" + this.uniqueId())
-        for (const tab of tabs) {
-            let input = document.createElement('input')
-            input.type = "radio"
-            input.name = name
-            input.checked = tab.hasAttribute("selected")
-            input.value = tab.getAttribute("value") || this.slugify(tab.innerText)
-            tab.setAttribute("label", tab.innerText)
-            tab.append(input)
-            input.addEventListener("input", this.handleInput.bind(this))
-        }
-    }
-    uniqueId() {
-        return Date.now().toString(36) + Math.random().toString(36).substring(2)
-    }
-    slugify(text) {
-        return text
-            .toLowerCase()
-            .trim()
-            .replace(/[^\w\s-]/g, '')
-            .replace(/[\s_-]+/g, '-')
-            .replace(/^-+|-+$/g, '');
+        this.name = this.getAttribute("name") || "tabs"
+        this.addEventListener("click", this.handleClick.bind(this))
     }
-    handleInput() {
-        const radios = this.querySelectorAll("[type=radio]")
-        for (const radio of radios) {
-            if (radio.checked) {
-                this.value = radio.value
-                radio.parentNode.setAttribute("selected", "")
-            } else {
-                radio.parentNode.removeAttribute("selected")
+    disconnectedCallback() {
+        this.removeEventListener("click", this.handleClick)
+    }
+    handleClick(event) {
+        const target = event.target;
+        if (target.nodeName.toLowerCase() === "fig-tab") {
+            const tabs = this.querySelectorAll("fig-tab")
+            for (const tab of tabs) {
+                if (tab === target) {
+                    this.selectedTab = tab
+                } else {
+                    tab.removeAttribute("selected")
+                }
             }
         }
     }
@@ -442,26 +443,43 @@ class FigTabs extends HTMLElement {
 window.customElements.define('fig-tabs', FigTabs);
 
 /* Segmented Control */
+class FigSegment extends HTMLElement {
+    constructor() {
+        super()
+    }
+    connectedCallback() {
+        this.addEventListener("click", this.handleClick.bind(this))
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.handleClick)
+    }
+    handleClick() {
+        this.setAttribute("selected", "true")
+    }
+}
+window.customElements.define('fig-segment', FigSegment);
+
 class FigSegmentedControl extends HTMLElement {
     constructor() {
         super()
     }
     connectedCallback() {
-        const segments = this.querySelectorAll('fig-segment')
-        const name = this.getAttribute("name") || "segmented-control"
-        for (const segment of segments) {
-            let input = document.createElement('input')
-            input.type = "radio"
-            input.name = name
-            input.checked = segment.hasAttribute("selected")
-            input.value = segment.getAttribute("value")
-            segment.append(input)
-            input.addEventListener("input", this.handleInput.bind(this))
+        this.name = this.getAttribute("name") || "segmented-control"
+        this.addEventListener("click", this.handleClick.bind(this))
+    }
+    handleClick(event) {
+        const target = event.target;
+        if (target.nodeName.toLowerCase() === "fig-segment") {
+            const segments = this.querySelectorAll("fig-segment")
+            for (const segment of segments) {
+                if (segment === target) {
+                    this.selectedSegment = segment
+                } else {
+                    segment.removeAttribute("selected")
+                }
+            }
         }
     }
-    handleInput() {
-        this.value = this.querySelector(":checked").value
-    }
 }
 window.customElements.define('fig-segmented-control', FigSegmentedControl);
 

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.4"
+  "version": "1.0.6"
 }