@rogieking/figui3 1.3.5 → 1.3.7

package/example.html

@@ -23,6 +23,27 @@
         <h2>UI3 Components</h2>
     </fig-header>
     <fig-content>
+        <fig-input-text type="number"
+                        min="1"
+                        style="width: 100px;"
+                        max="2"
+                        step="0.01"
+                        value="1.5"
+                        type="range"
+                        units="%"
+                        onInput="console.log(event.target.value)"
+                        transform="100">
+        </fig-input-text>
+        <fig-slider min="1"
+                    max="2"
+                    step="0.01"
+                    value="1.5"
+                    type="range"
+                    units="%"
+                    text="true"
+                    onInput="console.log(event.target.value)"
+                    transform="100">
+        </fig-slider>
         <fig-input-angle text="true"
                          value="0"
                          onInput="console.log(event.target.adjacent, event.target.opposite)"></fig-input-angle>

package/fig.css

@@ -1458,6 +1458,7 @@ fig-slider {
     0px 0px 0.5px 0px rgba(0, 0, 0, 0.18),
     0 0 0 1px var(--figma-color-border-selected);
   --slider-transition: all 0.1s ease-in-out;
+  --handle-transition: var(--slider-transition);
 
   display: inline-flex;
   align-items: center;
@@ -1574,7 +1575,7 @@ fig-slider {
       appearance: none;
       background: transparent;
       -webkit-appearance: none;
-      transition: var(--slider-transition);
+      transition: var(--handle-transition);
       border-radius: 100%;
       height: var(--slider-thumb-size);
       width: var(--slider-thumb-size);
@@ -1657,7 +1658,7 @@ fig-slider {
       cursor: grab;
       cursor: -moz-grab;
       box-shadow: var(--slider-handle-shadow);
-      transition: var(--slider-transition);
+      transition: var(--handle-transition);
     }
 
     &:disabled {
@@ -1736,6 +1737,8 @@ fig-slider {
     --slider-height: 0.25rem;
     --slider-thumb-size: 0.5rem;
     --slider-tick-size: calc(var(--slider-height) / 2);
+    --handle-transition: none;
+    --slider-transition: none;
 
     .fig-slider-input-container {
       height: var(--slider-height);
@@ -2210,12 +2213,14 @@ fig-field,
     justify-content: space-between;
     min-height: calc(1rem + var(--spacer-1) * 2);
     align-items: center;
+    width: 100%;
   }
 
   &[direction="horizontal"] {
     gap: var(--spacer-2);
     align-items: start;
     flex-direction: row;
+    width: auto;
 
     & > label {
       min-width: 4rem;
@@ -2256,10 +2261,12 @@ fig-segmented-control {
     justify-content: center;
     position: relative;
     appearance: none;
+    color: var(--figma-color-text-secondary);
     padding: 0 var(--spacer-2);
 
     &[selected]:not([selected="false"]),
     &[selected="true"] {
+      color: var(--figma-color-text);
       background-color: var(--figma-color-bg);
       border-radius: calc(var(--radius-medium) - 1px);
       box-shadow: 0 0 0 1px var(--figma-color-border);

package/fig.js

@@ -959,30 +959,42 @@ class FigInputText extends HTMLElement {
     this.input.focus();
   }
   #transformNumber(value) {
-    let transformed = value === "" ? "" : Number(value) * (this.transform || 1);
+    if (value === "") return "";
+    let transformed = Number(value) * (this.transform || 1);
     transformed = this.#formatNumber(transformed);
     return transformed;
   }
   #handleInput(e) {
+    console.log("handleInput", e.target.value);
+    e.stopPropagation();
     let value = e.target.value;
+    let valueTransformed = value;
     if (this.type === "number") {
-      value = this.#sanitizeInput(value);
-      //value = Number(value);
       value = value / (this.transform || 1);
+      value = this.#sanitizeInput(value, false);
+      valueTransformed = value * (this.transform || 1);
     }
-    this.setAttribute("value", value);
+    this.value = value;
+    this.input.value = valueTransformed;
+    this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
   }
   #handleMouseMove(e) {
+    if (this.type !== "number") return;
     if (e.altKey) {
-      const step = (this.step || 1) * e.movementX;
-      const value = this.#sanitizeInput(
-        Number(this.value) + step,
-        false
-      ).toFixed(2);
-      this.setAttribute("value", value);
+      let step = (this.step || 1) * e.movementX;
+      let value = Number(this.input.value);
+      value = value / (this.transform || 1) + step;
+      value = this.#sanitizeInput(value, false);
+      let valueTransformed = value * (this.transform || 1);
+      value = this.#formatNumber(value);
+      valueTransformed = this.#formatNumber(valueTransformed);
+      this.value = value;
+      this.input.value = valueTransformed;
+      this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
     }
   }
   #handleMouseDown(e) {
+    if (this.type !== "number") return;
     if (e.altKey) {
       this.input.style.cursor =
         this.style.cursor =
@@ -995,6 +1007,7 @@ class FigInputText extends HTMLElement {
     }
   }
   #handleMouseUp(e) {
+    if (this.type !== "number") return;
     this.input.style.cursor =
       this.style.cursor =
       document.body.style.cursor =
@@ -1020,6 +1033,7 @@ class FigInputText extends HTMLElement {
           sanitized
         );
       }
+
       sanitized = this.#formatNumber(sanitized);
     }
     return sanitized;
@@ -1056,18 +1070,15 @@ class FigInputText extends HTMLElement {
         case "transform":
           if (this.type === "number") {
             this.transform = Number(newValue) || 1;
-            this.min = this.#transformNumber(this.min);
-            this.max = this.#transformNumber(this.max);
-            this.step = this.#transformNumber(this.step);
-            this.value = this.#transformNumber(this.value);
+            this.input.value = this.#transformNumber(this.value);
           }
           break;
         case "value":
           let value = newValue;
           if (this.type === "number") {
-            let sanitized = this.#sanitizeInput(value);
-            this.value = sanitized;
-            this.input.value = this.#transformNumber(sanitized);
+            value = this.#sanitizeInput(value, false);
+            this.value = value;
+            this.input.value = this.#transformNumber(value);
           } else {
             this.value = value;
             this.input.value = value;
@@ -1935,6 +1946,7 @@ class FigInputJoystick extends HTMLElement {
     this.#updatePosition(e.touches[0]);
 
     const handleTouchMove = (e) => {
+      this.plane.classList.add("dragging");
       if (this.isDragging) this.#updatePosition(e.touches[0]);
     };
 
@@ -2251,5 +2263,3 @@ class FigInputAngle extends HTMLElement {
     }
   }
 }
-
-customElements.define("fig-input-angle", FigInputAngle);

package/package.json

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