@rogieking/figui3 1.0.81 → 1.0.83

package/example.html

@@ -19,6 +19,27 @@
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>
     <br />
+
+    <fig-slider min="0"
+                max="1"
+                transform="100"
+                step="0.01"
+                text="true"
+                style="width:300px;"
+                value="0.5">
+    </fig-slider>
+    <br />
+    <fig-input-text min="0"
+                    max="1"
+                    step="0.1"
+                    transform="100"
+                    type="number"
+                    style="width: 100px;"
+                    value="0.5"
+                    text="true">
+        <span slot="append">%</span>
+    </fig-input-text>
+    <br />
     <details>
         <summary>Details</summary>
         <p>Some more content here</p>
@@ -28,7 +49,11 @@
         <label>Opacity</label>
         <fig-slider type="opacity"
                     full
-                    value="0.75"
+                    value="0.5"
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    transform="100"
                     color="#ff0000"
                     units="%"
                     text="true"></fig-slider>

package/fig.js

@@ -636,16 +636,24 @@ class FigSlider extends HTMLElement {
     hue: { min: 0, max: 255, step: 1 },
     delta: { min: -100, max: 100, step: 1 },
     stepper: { min: 0, max: 100, step: 25 },
-    opacity: { min: 0, max: 100, step: 0.01, color: "#FF0000" },
+    opacity: { min: 0, max: 100, step: 0.1, color: "#FF0000" },
   };
   constructor() {
     super();
   }
   #regenerateInnerHTML() {
+    this.value = Number(this.getAttribute("value") || 0);
+    this.default = this.getAttribute("default") || null;
+    this.type = this.getAttribute("type") || "range";
+    this.text = this.getAttribute("text") || false;
+    this.units = this.getAttribute("units") || "";
+    this.transform = Number(this.getAttribute("transform") || 1);
+    this.disabled = this.getAttribute("disabled") ? true : false;
+
     const defaults = this.#typeDefaults[this.type];
-    this.min = this.getAttribute("min") || defaults.min;
-    this.max = this.getAttribute("max") || defaults.max;
-    this.step = this.getAttribute("step") || defaults.step;
+    this.min = Number(this.getAttribute("min") || defaults.min);
+    this.max = Number(this.getAttribute("max") || defaults.max);
+    this.step = Number(this.getAttribute("step") || defaults.step);
     this.color = this.getAttribute("color") || defaults?.color;
 
     if (this.color) {
@@ -671,6 +679,7 @@ class FigSlider extends HTMLElement {
                         type="number"
                         min="${this.min}"
                         max="${this.max}"
+                        transform="${this.transform}"
                         step="${this.step}"
                         value="${this.value}">
                         ${
@@ -683,18 +692,18 @@ class FigSlider extends HTMLElement {
       html = slider;
     }
     this.innerHTML = html;
-    return html;
-  }
-  #setupBindings() {
+
     //child nodes hack
     requestAnimationFrame(() => {
       this.input = this.querySelector("[type=range]");
       this.input.removeEventListener("input", this.handleInput);
       this.input.addEventListener("input", this.handleInput.bind(this));
-      this.handleInput();
 
       if (this.default) {
-        this.style.setProperty("--default", this.calculateNormal(this.default));
+        this.style.setProperty(
+          "--default",
+          this.#calculateNormal(this.default)
+        );
       }
 
       this.datalist = this.querySelector("datalist");
@@ -713,19 +722,14 @@ class FigSlider extends HTMLElement {
           this.handleTextInput.bind(this)
         );
       }
+
+      this.handleInput();
     });
   }
+
   connectedCallback() {
-    this.value = this.getAttribute("value");
-    this.default = this.getAttribute("default") || null;
-    this.type = this.getAttribute("type") || "range";
-    this.text = this.getAttribute("text") || false;
-    this.units = this.getAttribute("units") || "";
-    this.disabled = this.getAttribute("disabled") ? true : false;
     this.initialInnerHTML = this.innerHTML;
-
     this.#regenerateInnerHTML();
-    this.#setupBindings();
   }
   static get observedAttributes() {
     return [
@@ -737,6 +741,7 @@ class FigSlider extends HTMLElement {
       "disabled",
       "color",
       "units",
+      "transform",
     ];
   }
 
@@ -760,22 +765,26 @@ class FigSlider extends HTMLElement {
             this.figInputText.setAttribute("disabled", this.disabled);
           }
           break;
-        case "min":
-        case "max":
-        case "step":
-          this[name] = this.input[name] = newValue;
-          this.input.setAttribute(name, newValue);
+        case "value":
+          this.value = newValue;
+          if (this.figInputText) {
+            this.figInputText.setAttribute("value", newValue);
+          }
+          break;
+        case "transform":
+          this.transform = Number(newValue) || 1;
           if (this.figInputText) {
-            this.figInputText[name] = newValue;
-            this.figInputText.setAttribute(name, newValue);
+            this.figInputText.setAttribute("transform", this.transform);
           }
           break;
+        case "min":
+        case "max":
+        case "step":
         case "type":
         case "text":
         case "units":
           this[name] = newValue;
           this.#regenerateInnerHTML();
-          this.#setupBindings();
           break;
         default:
           this[name] = this.input[name] = newValue;
@@ -790,7 +799,7 @@ class FigSlider extends HTMLElement {
       this.handleInput();
     }
   }
-  calculateNormal(value) {
+  #calculateNormal(value) {
     let min = Number(this.input.min);
     let max = Number(this.input.max);
     let val = Number(value);
@@ -800,8 +809,8 @@ class FigSlider extends HTMLElement {
   handleInput() {
     let val = Number(this.input.value);
     this.value = val;
-    let complete = this.calculateNormal(val);
-    let defaultValue = this.calculateNormal(this.default);
+    let complete = this.#calculateNormal(val);
+    let defaultValue = this.#calculateNormal(this.default);
     this.style.setProperty("--slider-complete", complete);
     this.style.setProperty("--default", defaultValue);
     this.style.setProperty("--unchanged", complete === defaultValue ? 1 : 0);
@@ -820,12 +829,28 @@ class FigInputText extends HTMLElement {
     this.multiline = this.hasAttribute("multiline") || false;
     this.value = this.getAttribute("value") || "";
     this.type = this.getAttribute("type") || "text";
+    if (this.type === "number") {
+      if (this.getAttribute("step")) {
+        this.step = Number(this.getAttribute("step"));
+      }
+      if (this.getAttribute("min")) {
+        this.min = Number(this.getAttribute("min"));
+      }
+      if (this.getAttribute("max")) {
+        this.max = Number(this.getAttribute("max"));
+      }
+      this.transform = Number(this.getAttribute("transform") || 1);
+      if (this.getAttribute("value")) {
+        this.value = Number(this.value);
+      }
+    }
     this.placeholder = this.getAttribute("placeholder") || "";
-
     let html = `<input 
       type="${this.type}" 
       placeholder="${this.placeholder}"
-      value="${this.value}" />`;
+      value="${
+        this.type === "number" ? this.#transformNumber(this.value) : this.value
+      }" />`;
     if (this.multiline) {
       html = `<textarea  
       placeholder="${this.placeholder}">${this.value}</textarea>`;
@@ -849,23 +874,33 @@ class FigInputText extends HTMLElement {
 
       this.input = this.querySelector("input,textarea");
 
-      if (this.getAttribute("min")) {
-        this.input.setAttribute("min", this.getAttribute("min"));
-      }
-      if (this.getAttribute("max")) {
-        this.input.setAttribute("max", this.getAttribute("max"));
-      }
-      if (this.getAttribute("step")) {
-        this.input.setAttribute("step", this.getAttribute("step"));
+      if (this.type === "number") {
+        if (this.getAttribute("min")) {
+          this.input.setAttribute("min", this.#transformNumber(this.min));
+        }
+        if (this.getAttribute("max")) {
+          this.input.setAttribute("max", this.#transformNumber(this.max));
+        }
+        if (this.getAttribute("step")) {
+          this.input.setAttribute("step", this.#transformNumber(this.step));
+        }
       }
-      this.input.addEventListener("input", this.handleInput.bind(this));
+      this.input.addEventListener("input", this.#handleInput.bind(this));
     });
   }
   focus() {
     this.input.focus();
   }
-  handleInput() {
-    this.value = this.input.value;
+  #transformNumber(value) {
+    return Number(value) * (this.transform || 1);
+  }
+  #handleInput(e) {
+    let value = Number(e.target.value);
+    if (this.type === "number") {
+      this.value = value / (this.transform || 1);
+    } else {
+      this.value = value;
+    }
   }
 
   static get observedAttributes() {
@@ -878,6 +913,7 @@ class FigInputText extends HTMLElement {
       "step",
       "min",
       "max",
+      "transform",
     ];
   }
 
@@ -887,10 +923,23 @@ class FigInputText extends HTMLElement {
         case "disabled":
           this.disabled = this.input.disabled = newValue;
           break;
+        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);
+          }
+          break;
         default:
-          this[name] = this.input[name] = newValue;
+          let value = newValue;
+          if (this.type === "number") {
+            value = this.#transformNumber(value);
+          }
+          this[name] = this.input[name] = value;
           if (this.input) {
-            this.input.setAttribute(name, newValue);
+            this.input.setAttribute(name, value);
           }
           break;
       }
@@ -1393,15 +1442,14 @@ class FigChit extends HTMLElement {
     this.value = this.getAttribute("value") || "";
     this.size = this.getAttribute("size") || "small";
     this.disabled = this.getAttribute("disabled") === "true" ? true : false;
-    this.variant = this.getAttribute("variant") || "square";
     this.innerHTML = `<input type="color" value="${this.value}" />`;
+    this.#updateSrc(this.src);
 
     requestAnimationFrame(() => {
       this.input = this.querySelector("input");
-      this.updateSrc(this.src);
     });
   }
-  updateSrc(src) {
+  #updateSrc(src) {
     if (src) {
       this.src = src;
       this.style.setProperty("--src", `url(${src})`);
@@ -1410,14 +1458,22 @@ class FigChit extends HTMLElement {
     }
   }
   static get observedAttributes() {
-    return ["type", "src", "size", "variant", "value", "disabled"];
+    return ["src", "value", "disabled"];
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "src") {
-      this.updateSrc(newValue);
-    }
-    if (name === "disabled") {
-      this.disabled = newValue.toLowerCase() === "true";
+    switch (name) {
+      case "src":
+        this.#updateSrc(newValue);
+        break;
+      case "disabled":
+        this.disabled = newValue.toLowerCase() === "true";
+        break;
+      default:
+        if (this.input) {
+          this.input[name] = newValue;
+        }
+        this.#updateSrc(this.src);
+        break;
     }
   }
 }

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.81"
+  "version": "1.0.83"
 }