@rogieking/figui3 1.9.2 → 1.9.3

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>
+
+
 
 
 
@@ -981,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

@@ -170,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();
@@ -965,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) {
@@ -991,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() {
@@ -1178,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.2",
+  "version": "1.9.3",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {