@rogieking/figui3 1.1.4 → 1.1.6

package/README.md

@@ -36,7 +36,7 @@ The library includes the following components:
 ## Installation
 
 ```bash
-npm install fig-js
+npm install @rogieking/figui3
 ```
 
 ```jsx
@@ -74,7 +74,7 @@ or
 
 ## Documentation
 
-For detailed documentation and examples, visit our [documentation site](https://your-docs-site.com).
+For detailed documentation and examples, visit our [documentation site](https://github.com/rogie/figui3#readme).
 
 ## Browser Support
 

package/example.html

@@ -471,9 +471,11 @@
                       size="large"></fig-chit>
         </hstack>
         <br />
-        <fig-tooltip text="Tooltip text">
-            <p>Tooltip</p>
-        </fig-tooltip>
+        <p>Some paragraph text here with a
+            <fig-tooltip text="Tooltip text">
+                <em>Tooltip</em>
+            </fig-tooltip> for more information.
+        </p>
         <br /><br />
         <hstack>
             <input type="radio"

package/fig.js

@@ -1112,29 +1112,22 @@ window.customElements.define("fig-field", FigField);
 
 /* Color swatch */
 class FigInputColor extends HTMLElement {
-  #rgba;
+  rgba;
+  hex;
+  alpha;
   #swatch;
-  textInput;
+  #textInput;
   #alphaInput;
   constructor() {
     super();
   }
   connectedCallback() {
-    this.#rgba = this.convertToRGBA(this.getAttribute("value"));
-    const alpha = (this.#rgba.a * 100).toFixed(0);
-    this.value = this.rgbAlphaToHex(
-      {
-        r: this.#rgba.r,
-        g: this.#rgba.g,
-        b: this.#rgba.b,
-      },
-      alpha
-    );
+    this.#syncHex(this.getAttribute("value"));
+    this.value = this.hex;
+
     let html = ``;
     if (this.getAttribute("text")) {
-      let label = `<fig-input-text type="text" placeholder="Text" value="${this.getAttribute(
-        "value"
-      )}"></fig-input-text>`;
+      let label = `<fig-input-text type="text" placeholder="Text" value="${this.hex}"></fig-input-text>`;
       if (this.getAttribute("alpha") === "true") {
         label += `<fig-tooltip text="Opacity">
                     <fig-input-text 
@@ -1142,36 +1135,35 @@ class FigInputColor extends HTMLElement {
                         type="number"
                         min="0"
                         max="100"
-                        value="${alpha}">
+                        value="${this.alpha}">
                         <span slot="append">%</slot>
                     </fig-input-text>
                 </fig-tooltip>`;
       }
       html = `<div class="input-combo">
-                <fig-chit type="color" disabled="false" value="${this.value}"></fig-chit>
+                <fig-chit type="color" disabled="false" value="${this.hex}"></fig-chit>
                 ${label}
             </div>`;
     } else {
-      html = `<fig-chit type="color" disabled="false" value="${this.value}"></fig-chit>`;
+      html = `<fig-chit type="color" disabled="false" value="${this.hex}"></fig-chit>`;
     }
     this.innerHTML = html;
-
-    this.style.setProperty("--alpha", this.#rgba.a);
+    this.style.setProperty("--alpha", this.rgba.a);
 
     requestAnimationFrame(() => {
-      this.#swatch = this.querySelector("input[type=color]");
-      this.textInput = this.querySelector("fig-input-text:not([type=number])");
+      this.#swatch = this.querySelector("fig-chit[type=color]");
+      this.#textInput = this.querySelector("fig-input-text:not([type=number])");
       this.#alphaInput = this.querySelector("fig-input-text[type=number]");
 
       this.#swatch.disabled = this.hasAttribute("disabled");
       this.#swatch.addEventListener("input", this.handleInput.bind(this));
 
-      if (this.textInput) {
-        this.textInput.value = this.#swatch.value = this.rgbAlphaToHex(
-          this.#rgba,
+      if (this.#textInput) {
+        this.#textInput.value = this.#swatch.value = this.rgbAlphaToHex(
+          this.rgba,
           1
         );
-        this.textInput.addEventListener(
+        this.#textInput.addEventListener(
           "input",
           this.#handleTextInput.bind(this)
         );
@@ -1185,26 +1177,47 @@ class FigInputColor extends HTMLElement {
       }
     });
   }
+  #syncHex(hexValue) {
+    this.rgba = this.convertToRGBA(hexValue);
+    this.hex = this.rgbAlphaToHex(
+      {
+        r: this.rgba.r,
+        g: this.rgba.g,
+        b: this.rgba.b,
+      },
+      1
+    );
+    this.alpha = (this.rgba.a * 100).toFixed(0);
+  }
+
   #handleTextInput(event) {
     //do not propagate to onInput handler for web component
     event.stopPropagation();
-    this.value = this.#swatch.value = this.textInput.value;
-    this.setAttribute("value", this.value);
+    this.#syncHex(event.target.value);
+    this.value = this.hex;
+    if (this.#alphaInput) {
+      this.#alphaInput.setAttribute("value", this.alpha);
+    }
+    if (this.#swatch) {
+      this.#swatch.setAttribute("value", this.hex);
+    }
+    this.style.setProperty("--alpha", this.rgba.a);
   }
+
   handleAlphaInput(event) {
     //do not propagate to onInput handler for web component
     event.stopPropagation();
-    this.#rgba = this.convertToRGBA(this.#swatch.value);
-    this.#rgba.a = Number(this.#alphaInput.value) / 100;
+    this.rgba = this.convertToRGBA(this.#swatch.value);
+    this.rgba.a = Number(this.#alphaInput.value) / 100;
     this.value = this.rgbAlphaToHex(
       {
-        r: this.#rgba.r,
-        g: this.#rgba.g,
-        b: this.#rgba.b,
+        r: this.rgba.r,
+        g: this.rgba.g,
+        b: this.rgba.b,
       },
-      this.#rgba.a
+      1
     );
-    this.style.setProperty("--alpha", this.#rgba.a);
+    this.style.setProperty("--alpha", this.rgba.a);
     const e = new CustomEvent("input", {
       bubbles: true,
       cancelable: true,
@@ -1219,25 +1232,12 @@ class FigInputColor extends HTMLElement {
   handleInput(event) {
     //do not propagate to onInput handler for web component
     event.stopPropagation();
-
-    let alpha = this.#rgba.a;
-    this.#rgba = this.convertToRGBA(this.#swatch.value);
-    this.#rgba.a = alpha;
-    if (this.textInput) {
-      this.textInput.value = this.#swatch.value;
-    }
-    this.style.setProperty("--alpha", this.#rgba.a);
-    this.value = this.rgbAlphaToHex(
-      {
-        r: this.#rgba.r,
-        g: this.#rgba.g,
-        b: this.#rgba.b,
-      },
-      alpha
-    );
+    let alpha = this.alpha;
+    this.#syncHex(event.target.value);
     this.alpha = alpha;
-    if (this.#alphaInput) {
-      this.#alphaInput.value = this.#rgba.a.toFixed(0);
+    this.value = this.hex;
+    if (this.#textInput) {
+      this.#textInput.setAttribute("value", this.value);
     }
     const e = new CustomEvent("input", {
       bubbles: true,
@@ -1253,11 +1253,18 @@ class FigInputColor extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
       case "value":
-        if (this.textInput) {
-          this.value = this.#swatch.value = this.textInput.value = newValue;
-        } else {
-          this.value = newValue;
+        this.#syncHex(newValue);
+        if (this.#textInput) {
+          this.#textInput.setAttribute("value", this.hex);
         }
+        if (this.#swatch) {
+          this.#swatch.setAttribute("value", this.hex);
+        }
+        if (this.#alphaInput) {
+          this.#alphaInput.setAttribute("value", this.alpha);
+        }
+        this.value = this.hex;
+        this.style.setProperty("--alpha", this.rgba.a);
         this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
         break;
     }
@@ -1279,13 +1286,13 @@ class FigInputColor extends HTMLElement {
 
     // If alpha is 1, return 6-digit hex
     if (a === 1) {
-      return `#${hexR}${hexG}${hexB}`;
+      return `#${hexR}${hexG}${hexB}`.toUpperCase();
     }
 
     // Otherwise, include alpha in 8-digit hex
     const alpha = Math.round(a * 255);
     const hexA = alpha.toString(16).padStart(2, "0");
-    return `#${hexR}${hexG}${hexB}${hexA}`;
+    return `#${hexR}${hexG}${hexB}${hexA}`.toUpperCase();
   }
 
   convertToRGBA(color) {
@@ -1548,7 +1555,7 @@ class FigChit extends HTMLElement {
   connectedCallback() {
     this.type = this.getAttribute("type") || "color";
     this.src = this.getAttribute("src") || "";
-    this.value = this.getAttribute("value") || "";
+    this.value = this.getAttribute("value") || "#000000";
     this.size = this.getAttribute("size") || "small";
     this.disabled = this.getAttribute("disabled") === "true";
     this.innerHTML = `<input type="color" value="${this.value}" />`;

package/package.json

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