@rogieking/figui3 3.20.0 → 3.20.2

package/fig.js

@@ -3533,8 +3533,8 @@ class FigInputText extends HTMLElement {
     valueTransformed = this.#formatNumber(valueTransformed);
     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 }));
   }
   #handleMouseDown(e) {
     if (this.type !== "number") return;
@@ -3656,6 +3656,10 @@ class FigInputText extends HTMLElement {
           this[name] = this.input[name] = newValue;
           this.input.setAttribute("name", newValue);
           break;
+        case "placeholder":
+          this.placeholder = newValue ?? "";
+          this.input.placeholder = this.placeholder;
+          break;
         default:
           this[name] = this.input[name] = newValue;
           break;
@@ -4019,8 +4023,8 @@ class FigInputNumber extends HTMLElement {
     value = this.#sanitizeInput(value, false);
     this.value = value;
     this.input.value = this.#formatWithUnit(this.value);
-    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 }));
   }
 
   #handleMouseDown(e) {
@@ -4141,6 +4145,10 @@ class FigInputNumber extends HTMLElement {
           this[name] = this.input[name] = newValue;
           this.input.setAttribute("name", newValue);
           break;
+        case "placeholder":
+          this.placeholder = newValue ?? "";
+          this.input.placeholder = this.placeholder;
+          break;
         default:
           this[name] = this.input[name] = newValue;
           break;
@@ -4793,18 +4801,18 @@ class FigInputColor extends HTMLElement {
   }
 
   #emitInputEvent() {
-    const e = new CustomEvent("input", {
+    this.dispatchEvent(new CustomEvent("input", {
       bubbles: true,
       cancelable: true,
-    });
-    this.dispatchEvent(e);
+      detail: { value: this.value, hex: this.hex, rgba: this.rgba },
+    }));
   }
   #emitChangeEvent() {
-    const e = new CustomEvent("change", {
+    this.dispatchEvent(new CustomEvent("change", {
       bubbles: true,
       cancelable: true,
-    });
-    this.dispatchEvent(e);
+      detail: { value: this.value, hex: this.hex, rgba: this.rgba },
+    }));
   }
 
   static get observedAttributes() {
@@ -9607,6 +9615,7 @@ class FigInputJoystick extends HTMLElement {
       new CustomEvent("input", {
         bubbles: true,
         cancelable: true,
+        detail: { value: this.value, x: this.position.x, y: this.position.y },
       }),
     );
   }
@@ -9616,6 +9625,7 @@ class FigInputJoystick extends HTMLElement {
       new CustomEvent("change", {
         bubbles: true,
         cancelable: true,
+        detail: { value: this.value, x: this.position.x, y: this.position.y },
       }),
     );
   }
@@ -10078,6 +10088,7 @@ class FigInputAngle extends HTMLElement {
       new CustomEvent("input", {
         bubbles: true,
         cancelable: true,
+        detail: { value: this.value, angle: this.angle },
       }),
     );
   }
@@ -10087,6 +10098,7 @@ class FigInputAngle extends HTMLElement {
       new CustomEvent("change", {
         bubbles: true,
         cancelable: true,
+        detail: { value: this.value, angle: this.angle },
       }),
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "3.20.0",
+  "version": "3.20.2",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",