@rogieking/figui3 1.0.98 → 1.1.0

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>
@@ -424,6 +424,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

@@ -2188,6 +2188,7 @@ fig-field,
     flex: 0;
     padding: var(--spacer-1) 0;
     display: flex;
+    justify-content: space-between;
     min-height: calc(1rem + var(--spacer-1) * 2);
     align-items: center;
   }

package/fig.js

@@ -842,9 +842,18 @@ class FigSlider extends HTMLElement {
 window.customElements.define("fig-slider", FigSlider);
 
 class FigInputText extends HTMLElement {
+  #boundMouseMove;
+  #boundMouseUp;
+  #boundMouseDown;
+
   constructor() {
     super();
+    // Pre-bind the event handlers once
+    this.#boundMouseMove = this.#handleMouseMove.bind(this);
+    this.#boundMouseUp = this.#handleMouseUp.bind(this);
+    this.#boundMouseDown = this.#handleMouseDown.bind(this);
   }
+
   connectedCallback() {
     this.multiline = this.hasAttribute("multiline") || false;
     this.value = this.getAttribute("value") || "";
@@ -904,6 +913,7 @@ class FigInputText extends HTMLElement {
         if (this.getAttribute("step")) {
           this.input.setAttribute("step", this.#transformNumber(this.step));
         }
+        this.addEventListener("pointerdown", this.#boundMouseDown);
       }
       this.input.addEventListener("input", this.#handleInput.bind(this));
     });
@@ -912,16 +922,58 @@ class FigInputText extends HTMLElement {
     this.input.focus();
   }
   #transformNumber(value) {
-    return value * (this.transform || 1);
+    return Number(value) * (this.transform || 1);
   }
   #handleInput(e) {
     let value = e.target.value;
     if (this.type === "number") {
-      this.value = value / (this.transform || 1);
-    } else {
-      this.value = value;
+      value = this.#sanitizeInput(value);
+      value = value / (this.transform || 1);
+    }
+    this.setAttribute("value", value);
+  }
+  #handleMouseMove(e) {
+    if (e.altKey) {
+      const step = (this.step || 1) * e.movementX;
+      const value = this.#sanitizeInput(Number(this.value) + step).toFixed(2);
+      this.setAttribute("value", value);
     }
   }
+  #handleMouseDown(e) {
+    if (e.altKey) {
+      this.input.style.cursor =
+        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);
+    }
+  }
+  #handleMouseUp(e) {
+    this.input.style.cursor =
+      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.min, sanitized);
+      }
+      if (typeof this.max === "number") {
+        sanitized = Math.min(this.max, sanitized);
+      }
+    }
+    return sanitized;
+  }
 
   static get observedAttributes() {
     return [
@@ -941,7 +993,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") {
@@ -952,16 +1006,27 @@ 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);
           }
-          this[name] = this.input[name] = value;
+          this.value = 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;
       }
     }
   }
@@ -1064,7 +1129,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") {
@@ -1092,8 +1157,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));
@@ -1103,6 +1168,10 @@ class FigInputColor extends HTMLElement {
           this.#rgba,
           1
         );
+        this.textInput.addEventListener(
+          "input",
+          this.#handleTextInput.bind(this)
+        );
       }
 
       if (this.#alphaInput) {
@@ -1113,6 +1182,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();
@@ -1173,7 +1248,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) {
@@ -1461,7 +1545,7 @@ class FigChit extends HTMLElement {
     this.src = this.getAttribute("src") || "";
     this.value = this.getAttribute("value") || "";
     this.size = this.getAttribute("size") || "small";
-    this.disabled = this.getAttribute("disabled") === "true" ? true : false;
+    this.disabled = this.getAttribute("disabled") === "true";
     this.innerHTML = `<input type="color" value="${this.value}" />`;
     this.#updateSrc(this.src);
 

package/package.json

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