@rogieking/figui3 1.3.6 → 1.3.8

package/example.html

@@ -23,6 +23,42 @@
         <h2>UI3 Components</h2>
     </fig-header>
     <fig-content>
+        <br /><br />
+        <fig-input-angle value="45"
+                         text="true"></fig-input-angle>
+        <br /><br />
+        <fig-slider min="0.01"
+                    max="0.25"
+                    name="u_thickness"
+                    variant="minimal"
+                    step="0.01"
+                    value="1"
+                    text="true"
+                    type="range"
+                    units="%"
+                    transform="100">
+        </fig-slider>
+        <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

@@ -1,6 +1,7 @@
 :root {
   --figma-color-bg: #ffffff;
   --figma-color-bg-brand: #0d99ff;
+
   --figma-color-bg-brand-hover: #007be5;
   --figma-color-bg-brand-pressed: #007be5;
   --figma-color-bg-brand-secondary: #0768cf;
@@ -160,6 +161,7 @@
   --figma-color-text-onwarning-tertiary: #0000004d;
   --figma-color-text-secondary: #00000080;
   --figma-color-text-secondary-hover: #000000e5;
+  --figma-color-text-selection: rgba(13, 153, 255, 0.4);
   --figma-color-text-selected: #007be5;
   --figma-color-text-selected-secondary: #007be5;
   --figma-color-text-selected-tertiary: #007be5;
@@ -478,6 +480,14 @@ html {
   box-sizing: border-box;
 }
 
+::selection {
+  background-color: var(--figma-color-text-selection);
+}
+
+::-moz-selection {
+  background-color: var(--figma-color-text-selection);
+}
+
 body {
   font-size: var(--body-medium-fontSize);
   letter-spacing: var(--body-letter-spacing);
@@ -2213,12 +2223,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;
@@ -2259,10 +2271,12 @@ fig-segmented-control {
     justify-content: center;
     position: relative;
     appearance: none;
+    color: var(--figma-color-text-se);
     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]);
     };
 
@@ -2011,8 +2023,9 @@ class FigInputAngle extends HTMLElement {
     this.handle = null;
     this.angleInput = null;
     this.plane = null;
+  }
 
-    // Initialize position
+  connectedCallback() {
     requestAnimationFrame(() => {
       this.precision = this.getAttribute("precision") || 1;
       this.precision = parseInt(this.precision);
@@ -2251,5 +2264,4 @@ class FigInputAngle extends HTMLElement {
     }
   }
 }
-
 customElements.define("fig-input-angle", FigInputAngle);

package/package.json

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