@rogieking/figui3 1.2.4 → 1.2.6

package/example.html

@@ -526,7 +526,7 @@
                         value="25"
                         default="50"
                         step="25">
-                <datalist id="markers">
+                <datalist>
                     <option value="0"></option>
                     <option value="25"></option>
                     <option value="50"></option>
@@ -535,6 +535,14 @@
                 </datalist>
             </fig-slider>
         </fig-field>
+        <fig-field>
+            <label>Stepper slider (auto)</label>
+            <fig-slider type="stepper"
+                        value="25"
+                        default="50"
+                        step="25">
+            </fig-slider>
+        </fig-field>
 
         <fig-field>
             <label>Delta slider</label>
@@ -584,9 +592,14 @@
         <fig-field>
             <label>Minimal ranges</label>
             <fig-slider text="true"
-                        default="50"
+                        min="0"
+                        max="1"
+                        style="width: 100%;"
+                        step="0.01"
+                        transform="100"
+                        default="0.5"
                         variant="minimal"
-                        value="50"></fig-slider>
+                        value="0.5"></fig-slider>
         </fig-field>
         <fig-field direction="horizontal">
             <label>Opacity</label>

package/fig.js

@@ -1,7 +1,7 @@
-function uniqueId() {
+function figUniqueId() {
   return Date.now().toString(36) + Math.random().toString(36).substring(2);
 }
-function supportsPopover() {
+function figSupportsPopover() {
   return HTMLElement.prototype.hasOwnProperty("popover");
 }
 
@@ -502,7 +502,7 @@ class FigPopover2 extends HTMLElement {
     this.#trigger = this;
     this.#delay = Number(this.getAttribute("delay")) || 0;
     this.#action = this.getAttribute("trigger-action") || "click";
-    this.#id = `tooltip-${uniqueId()}`;
+    this.#id = `tooltip-${figUniqueId()}`;
     if (this.#popover) {
       this.#popover.setAttribute("id", this.#id);
       this.#popover.setAttribute("role", "tooltip");
@@ -741,9 +741,20 @@ class FigSlider extends HTMLElement {
       if (this.datalist) {
         this.datalist.setAttribute(
           "id",
-          this.datalist.getAttribute("id") || uniqueId()
+          this.datalist.getAttribute("id") || figUniqueId()
         );
         this.input.setAttribute("list", this.datalist.getAttribute("id"));
+      } else if (this.type === "stepper") {
+        this.datalist = document.createElement("datalist");
+        this.datalist.setAttribute("id", figUniqueId());
+        let steps = (this.max - this.min) / this.step + 1;
+        for (let i = 0; i < steps; i++) {
+          let option = document.createElement("option");
+          option.setAttribute("value", this.min + i * this.step);
+          this.datalist.append(option);
+        }
+        this.append(this.datalist);
+        this.input.setAttribute("list", this.datalist.getAttribute("id"));
       }
       if (this.figInputText) {
         this.figInputText.removeEventListener("input", this.handleTextInput);
@@ -936,7 +947,9 @@ class FigInputText extends HTMLElement {
     this.input.focus();
   }
   #transformNumber(value) {
-    return value === "" ? "" : Number(value) * (this.transform || 1);
+    let transformed = value === "" ? "" : Number(value) * (this.transform || 1);
+    transformed = this.#formatNumber(transformed);
+    return transformed;
   }
   #handleInput(e) {
     let value = e.target.value;
@@ -1127,7 +1140,7 @@ class FigField extends HTMLElement {
       );
       if (this.input && this.label) {
         this.label.addEventListener("click", this.focus.bind(this));
-        let inputId = this.input.getAttribute("id") || uniqueId();
+        let inputId = this.input.getAttribute("id") || figUniqueId();
         this.input.setAttribute("id", inputId);
         this.label.setAttribute("for", inputId);
       }
@@ -1394,7 +1407,7 @@ class FigCheckbox extends HTMLElement {
     this.input = document.createElement("input");
     this.name = this.getAttribute("name") || "checkbox";
     this.value = this.getAttribute("value") || "";
-    this.input.setAttribute("id", uniqueId());
+    this.input.setAttribute("id", figUniqueId());
     this.input.setAttribute("name", this.name);
     this.input.setAttribute("type", "checkbox");
     this.labelElement = document.createElement("label");

package/package.json

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