@rogieking/figui3 1.0.49 → 1.0.51

package/fig.js

@@ -577,7 +577,7 @@ 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: 1, step: 0.01, color: "#FF0000" },
+    opacity: { min: 0, max: 100, step: 0.01, color: "#FF0000" },
   };
   constructor() {
     super();
@@ -644,7 +644,6 @@ class FigSlider extends HTMLElement {
 
       this.datalist = this.querySelector("datalist");
       this.figInputText = this.querySelector("fig-input-text");
-      this.textInput = this.querySelector("input[type=number]");
       if (this.datalist) {
         this.datalist.setAttribute(
           "id",
@@ -698,9 +697,6 @@ class FigSlider extends HTMLElement {
           break;
         default:
           this[name] = this.input[name] = newValue;
-          if (this.figInputText) {
-            this.figInputText.setAttribute(name, newValue);
-          }
           this.handleInput();
           break;
       }
@@ -727,8 +723,8 @@ class FigSlider extends HTMLElement {
     this.style.setProperty("--slider-complete", complete);
     this.style.setProperty("--default", defaultValue);
     this.style.setProperty("--unchanged", complete === defaultValue ? 1 : 0);
-    if (this.textInput) {
-      this.textInput.value = val;
+    if (this.figInputText) {
+      this.figInputText.setAttribute("value", val);
     }
   }
 }
@@ -1133,16 +1129,17 @@ class FigCheckbox extends HTMLElement {
   constructor() {
     super();
     this.input = document.createElement("input");
+    this.name = this.getAttribute("name") || "checkbox";
+    this.value = this.getAttribute("value") || "";
     this.input.setAttribute("id", uniqueId());
-    this.input.setAttribute("name", this.getAttribute("name") || "checkbox");
+    this.input.setAttribute("name", this.name);
     this.input.setAttribute("type", "checkbox");
     this.labelElement = document.createElement("label");
     this.labelElement.setAttribute("for", this.input.id);
   }
   connectedCallback() {
-    this.checked = this.input.checked = this.hasAttribute("checked")
-      ? this.getAttribute("checked").toLowerCase() === "true"
-      : false;
+    this.checked = this.input.checked =
+      this.hasAttribute("checked") && this.getAttribute("checked") !== "false";
     this.input.addEventListener("change", this.handleInput.bind(this));
 
     if (this.hasAttribute("disabled")) {
@@ -1159,7 +1156,7 @@ class FigCheckbox extends HTMLElement {
     this.render();
   }
   static get observedAttributes() {
-    return ["on", "disabled", "label", "checked"];
+    return ["disabled", "label", "checked", "name", "value"];
   }
 
   render() {}
@@ -1178,12 +1175,13 @@ class FigCheckbox extends HTMLElement {
         this.labelElement.innerText = newValue;
         break;
       case "checked":
-        this.checked = this.input.checked = this.hasAttribute("checked")
-          ? true
-          : false;
+        this.checked = this.input.checked =
+          this.hasAttribute("checked") &&
+          this.getAttribute("checked") !== "false";
+
         break;
-      case "name":
-      case "value":
+      default:
+        this.input[name] = newValue;
         this.input.setAttribute(name, newValue);
         break;
     }
@@ -1211,9 +1209,6 @@ window.customElements.define("fig-radio", FigRadio);
 class FigSwitch extends FigCheckbox {
   render() {
     this.input.setAttribute("class", "switch");
-    this.on = this.input.checked = this.hasAttribute("on")
-      ? this.getAttribute("on").toLowerCase() === "true"
-      : false;
   }
 }
 window.customElements.define("fig-switch", FigSwitch);

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.49"
+  "version": "1.0.51"
 }