@rogieking/figui3 1.9.1 → 1.9.3

package/components.css

@@ -2159,7 +2159,8 @@ fig-input-color,
 fig-checkbox,
 fig-radio,
 fig-tab,
-fig-tabs {
+fig-tabs,
+fig-segmented-control {
   display: inline-flex;
   gap: var(--spacer-2);
   user-select: none;

package/example.html

@@ -28,6 +28,16 @@
     </fig-header>
 
 
+    <fig-field direction="horizontal">
+        <label>Position</label>
+        <fig-dropdown value="outside">
+            <option value="inside">Inside</option>
+            <option value="center">Center</option>
+            <option value="outside">Outside</option>
+        </fig-dropdown>
+    </fig-field>
+
+
 
 
 
@@ -346,7 +356,10 @@
         </fig-field>
         <fig-field>
             <label>Submit Button</label>
-            <fig-button type="submit">Submit</fig-button>
+            <form action="https://www.google.com/search?q=rogie"
+                  method="get">
+                <fig-button type="submit">Submit</fig-button>
+            </form>
         </fig-field>
         <fig-field>
             <label>Disabled Button</label>
@@ -978,6 +991,13 @@
         </fig-field>
     </fig-content>
 
+    <script>
+        document.addEventListener("input", (e) => {
+            console.log("input", e.target, e.target.value);
+        });
+
+    </script>
+
 </body>
 
 </html>

package/fig.js

@@ -73,7 +73,10 @@ class FigButton extends HTMLElement {
       this.toggleAttribute("selected", !this.hasAttribute("selected"));
     }
     if (this.type === "submit") {
-      this.closest("form").dispatchEvent(new Event("submit"));
+      let form = this.closest("form");
+      if (form) {
+        form.submit();
+      }
     }
     if (this.type === "link") {
       const href = this.getAttribute("href");
@@ -167,11 +170,25 @@ class FigDropdown extends HTMLElement {
   #handleSelectInput(e) {
     this.value = e.target.value;
     this.setAttribute("value", this.value);
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: this.value,
+        bubbles: true,
+        composed: true,
+      })
+    );
   }
-  #handleSelectChange() {
+  #handleSelectChange(e) {
     if (this.type === "dropdown") {
       this.select.selectedIndex = -1;
     }
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: this.value,
+        bubbles: true,
+        composed: true,
+      })
+    );
   }
   focus() {
     this.select.focus();
@@ -405,10 +422,13 @@ class FigTooltip extends HTMLElement {
   hidePopup() {
     clearTimeout(this.timeout);
     clearTimeout(this.#touchTimeout);
-    this.popup.style.opacity = "0";
-    this.popup.style.display = "block";
-    this.popup.style.pointerEvents = "none";
-    this.destroy();
+    if (this.popup) {
+      this.popup.style.opacity = "0";
+      this.popup.style.display = "block";
+      this.popup.style.pointerEvents = "none";
+      this.destroy();
+    }
+
     this.isOpen = false;
   }
 
@@ -959,7 +979,9 @@ class FigSlider extends HTMLElement {
     if (this.figInputText) {
       this.value = this.input.value = this.figInputText.value;
       this.#syncProperties();
-      this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+      this.dispatchEvent(
+        new CustomEvent("input", { detail: this.value, bubbles: true })
+      );
     }
   }
   #calculateNormal(value) {
@@ -985,7 +1007,9 @@ class FigSlider extends HTMLElement {
 
   #handleInput() {
     this.#syncValue();
-    this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+    this.dispatchEvent(
+      new CustomEvent("input", { detail: this.value, bubbles: true })
+    );
   }
 
   static get observedAttributes() {
@@ -1172,8 +1196,12 @@ class FigInputText extends HTMLElement {
     }
     this.value = value;
     this.input.value = valueTransformed;
-    this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
-    this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
+    this.dispatchEvent(
+      new CustomEvent("input", { detail: this.value, bubbles: true })
+    );
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: this.value, bubbles: true })
+    );
   }
   #handleMouseMove(e) {
     if (this.type !== "number") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {
@@ -14,7 +14,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/rogie/figui3.git"
+    "url": "git+https://github.com/rogie/figui3.git"
   },
   "homepage": "https://github.com/rogie/figui3#readme",
   "bugs": {