@rogieking/figui3 1.2.5 → 1.2.7

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,17 @@
                 </datalist>
             </fig-slider>
         </fig-field>
+        <fig-field direction="horizontal">
+            <label>Stepper slider (auto)</label>
+            <fig-slider type="stepper"
+                        value="0"
+                        default="5"
+                        min="0"
+                        max="10"
+                        step="1"
+                        text="true">
+            </fig-slider>
+        </fig-field>
 
         <fig-field>
             <label>Delta slider</label>

package/fig.css

@@ -1704,7 +1704,7 @@ fig-slider {
   datalist {
     position: absolute;
     inset: 0;
-    top: calc((var(--slider-field-height) - var(--slider-height)) / 2);
+    top: 0;
     display: flex;
     transition: var(--slider-transition);
     background: transparent;

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");
@@ -726,6 +726,7 @@ class FigSlider extends HTMLElement {
     //child nodes hack
     requestAnimationFrame(() => {
       this.input = this.querySelector("[type=range]");
+      this.inputContainer = this.querySelector(".fig-slider-input-container");
       this.input.removeEventListener("input", this.handleInput);
       this.input.addEventListener("input", this.handleInput.bind(this));
 
@@ -739,11 +740,23 @@ class FigSlider extends HTMLElement {
       this.datalist = this.querySelector("datalist");
       this.figInputText = this.querySelector("fig-input-text");
       if (this.datalist) {
+        this.inputContainer.append(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.inputContainer.append(this.datalist);
+        this.input.setAttribute("list", this.datalist.getAttribute("id"));
       }
       if (this.figInputText) {
         this.figInputText.removeEventListener("input", this.handleTextInput);
@@ -1129,7 +1142,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);
       }
@@ -1396,7 +1409,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.5",
+  "version": "1.2.7",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {