@rogieking/figui3 1.0.99 → 1.1.1

package/example.html

@@ -80,7 +80,7 @@
         <label>Opacity slider</label>
         <fig-slider type="opacity"
                     variant="minimal"
-                    value="0.75"
+                    value="75"
                     color="#ff0000"
                     units="%"
                     text="true"></fig-slider>
@@ -89,6 +89,7 @@
     <fig-field style="width:300px;">
         <label>Hue slider</label>
         <fig-slider type="hue"
+                    style="--bg-hue: linear-gradient(90deg in lch longer hue,#fc38ff, #abff57)"
                     variant="minimal"
                     value="55"></fig-slider>
     </fig-field>
@@ -131,10 +132,11 @@
                     transform="100"
                     type="number"
                     autoresize="true"
-                    value="0.5"
-                    text="true">
+                    value="0.5">
         <span slot="append">%</span>
     </fig-input-text>
+
+
     <br />
     <details>
         <summary>Details</summary>
@@ -424,6 +426,8 @@
         </fig-combo-input>
         <br /><br />
         <fig-input-text type="number"
+                        min="0"
+                        max="360"
                         value="90">
             <span slot="append">°</span>
         </fig-input-text>

package/fig.css

@@ -2195,7 +2195,7 @@ fig-field,
 
   &[direction="horizontal"] {
     gap: var(--spacer-2);
-    align-items: flex-start;
+    align-items: center;
     flex-direction: row;
 
     & > label {

package/fig.js

@@ -927,21 +927,17 @@ class FigInputText extends HTMLElement {
   #handleInput(e) {
     let value = e.target.value;
     if (this.type === "number") {
-      if (this.min) {
-        value = Math.min(this.min, value);
-      }
-      if (this.max) {
-        value = Math.max(this.max, value);
-      }
+      value = this.#sanitizeInput(value);
+      //value = Number(value);
       value = value / (this.transform || 1);
     }
-    this.value = value;
+    this.setAttribute("value", value);
   }
   #handleMouseMove(e) {
     if (e.altKey) {
       const step = (this.step || 1) * e.movementX;
-      const value = Number(this.input.value) + step;
-      this.setAttribute("value", value / this.transform);
+      const value = this.#sanitizeInput(Number(this.value) + step).toFixed(2);
+      this.setAttribute("value", value);
     }
   }
   #handleMouseDown(e) {
@@ -950,6 +946,7 @@ class FigInputText extends HTMLElement {
         this.style.cursor =
         document.body.style.cursor =
           "ew-resize";
+      this.style.userSelect = "none";
       // Use the pre-bound handlers
       window.addEventListener("pointermove", this.#boundMouseMove);
       window.addEventListener("pointerup", this.#boundMouseUp);
@@ -960,10 +957,24 @@ class FigInputText extends HTMLElement {
       this.style.cursor =
       document.body.style.cursor =
         "";
+    this.style.userSelect = "all";
     // Remove the pre-bound handlers
     window.removeEventListener("pointermove", this.#boundMouseMove);
     window.removeEventListener("pointerup", this.#boundMouseUp);
   }
+  #sanitizeInput(value) {
+    let sanitized = value;
+    if (this.type === "number") {
+      sanitized = Number(sanitized);
+      if (typeof this.min === "number") {
+        sanitized = Math.max(this.#transformNumber(this.min), sanitized);
+      }
+      if (typeof this.max === "number") {
+        sanitized = Math.min(this.#transformNumber(this.max), sanitized);
+      }
+    }
+    return sanitized;
+  }
 
   static get observedAttributes() {
     return [
@@ -983,7 +994,9 @@ class FigInputText extends HTMLElement {
     if (this.input) {
       switch (name) {
         case "disabled":
-          this.disabled = this.input.disabled = newValue;
+          this.disabled = this.input.disabled =
+            newValue === "true" ||
+            (newValue === undefined && newValue !== null);
           break;
         case "transform":
           if (this.type === "number") {
@@ -994,16 +1007,29 @@ class FigInputText extends HTMLElement {
             this.value = this.#transformNumber(this.value);
           }
           break;
-        default:
+        case "value":
           let value = newValue;
           if (this.type === "number") {
-            value = this.#transformNumber(value);
+            let sanitized = this.#sanitizeInput(value);
+            this.value = sanitized;
+            this.input.value = this.#transformNumber(sanitized);
+          } else {
+            this.value = value;
+            this.input.value = value;
           }
-          this[name] = this.input[name] = value;
+          this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+          break;
+        case "min":
+        case "max":
+        case "step":
+          this[name] = this.input[name] = Number(newValue);
           if (this.input) {
-            this.input.setAttribute(name, value);
+            this.input.setAttribute(name, newValue);
           }
           break;
+        default:
+          this[name] = this.input[name] = value;
+          break;
       }
     }
   }
@@ -1106,7 +1132,7 @@ class FigInputColor extends HTMLElement {
     );
     let html = ``;
     if (this.getAttribute("text")) {
-      let label = `<fig-input-text placeholder="Text" value="${this.getAttribute(
+      let label = `<fig-input-text type="text" placeholder="Text" value="${this.getAttribute(
         "value"
       )}"></fig-input-text>`;
       if (this.getAttribute("alpha") === "true") {
@@ -1134,8 +1160,8 @@ class FigInputColor extends HTMLElement {
 
     requestAnimationFrame(() => {
       this.#swatch = this.querySelector("input[type=color]");
-      this.textInput = this.querySelector("input[type=text]");
-      this.#alphaInput = this.querySelector("input[type=number]");
+      this.textInput = this.querySelector("fig-input-text:not([type=number])");
+      this.#alphaInput = this.querySelector("fig-input-text[type=number]");
 
       this.#swatch.disabled = this.hasAttribute("disabled");
       this.#swatch.addEventListener("input", this.handleInput.bind(this));
@@ -1145,6 +1171,10 @@ class FigInputColor extends HTMLElement {
           this.#rgba,
           1
         );
+        this.textInput.addEventListener(
+          "input",
+          this.#handleTextInput.bind(this)
+        );
       }
 
       if (this.#alphaInput) {
@@ -1155,6 +1185,12 @@ class FigInputColor extends HTMLElement {
       }
     });
   }
+  #handleTextInput(event) {
+    //do not propagate to onInput handler for web component
+    event.stopPropagation();
+    this.value = this.#swatch.value = this.textInput.value;
+    this.setAttribute("value", this.value);
+  }
   handleAlphaInput(event) {
     //do not propagate to onInput handler for web component
     event.stopPropagation();
@@ -1215,7 +1251,16 @@ class FigInputColor extends HTMLElement {
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    //this[name] = newValue;
+    switch (name) {
+      case "value":
+        if (this.textInput) {
+          this.value = this.#swatch.value = this.textInput.value = newValue;
+        } else {
+          this.value = newValue;
+        }
+        this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+        break;
+    }
   }
 
   rgbAlphaToHex({ r, g, b }, a = 1) {
@@ -1458,14 +1503,16 @@ class FigComboInput extends HTMLElement {
                     </div>`;
     requestAnimationFrame(() => {
       this.input = this.querySelector("fig-input-text");
-      this.select = this.querySelector("fig-dropdown");
+      this.dropdown = this.querySelector("fig-dropdown");
 
-      this.select.addEventListener("input", this.handleSelectInput.bind(this));
+      this.dropdown.addEventListener(
+        "input",
+        this.handleSelectInput.bind(this)
+      );
     });
   }
   handleSelectInput(e) {
-    this.value = e.target.parentNode.value;
-    this.setAttribute("value", this.value);
+    this.setAttribute("value", e.target.closest("fig-dropdown").value);
   }
   handleInput(e) {
     this.value = this.input.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.99",
+  "version": "1.1.1",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {