@rogieking/figui3 1.8.0 → 1.8.2

package/example.html

@@ -26,6 +26,8 @@
         <h2><label>Effects/</label>UI3 Components</h2>
     </fig-header>
 
+
+
     <fig-input-text disabled
                     value="Disabled"><span slot="append">%</span></fig-input-text>
 
@@ -71,7 +73,10 @@
 
     <fig-content>
 
+
         <br /><br /><br /><br /><br /><br /><br /><br /><br />
+
+
         <hstack>
             <fig-tooltip text="Tooltip"
                          delay="0">
@@ -112,6 +117,7 @@
 
         </hstack>
         <br /><br /><br /><br /><br /><br /><br /><br /><br />
+
         <fig-button type="link"
                     href="https://www.google.com">
             <svg width="24"
@@ -284,6 +290,17 @@
                        label="Upload image"
                        size="large"></fig-image>
         </fig-field>
+        <script>
+            function updateImages() {
+                const images = document.querySelectorAll('fig-image');
+                images.forEach(image => {
+                    //image.setAttribute("src", "https://picsum.photos/200?random=" + Math.random());
+                    image.src = "https://picsum.photos/200?random=" + Math.random();
+                });
+            }
+        </script>
+
+        <button onclick="updateImages()">Change src</button>
 
         <br /><br />
         <fig-header>

package/fig.js

@@ -292,14 +292,23 @@ class FigTooltip extends HTMLElement {
     }
     document.body.addEventListener("click", this.hidePopupOutsideClick);
   }
+  isTouchDevice() {
+    return (
+      "ontouchstart" in window ||
+      navigator.maxTouchPoints > 0 ||
+      navigator.msMaxTouchPoints > 0
+    );
+  }
 
   setupEventListeners() {
     if (this.action === "hover") {
-      this.addEventListener("pointerenter", this.showDelayedPopup.bind(this));
-      this.addEventListener(
-        "pointerleave",
-        this.#handlePointerLeave.bind(this)
-      );
+      if (!this.isTouchDevice()) {
+        this.addEventListener("pointerenter", this.showDelayedPopup.bind(this));
+        this.addEventListener(
+          "pointerleave",
+          this.#handlePointerLeave.bind(this)
+        );
+      }
       // Add mousedown listener instead of dragstart
       this.addEventListener("mousedown", this.#boundHideOnDragStart);
 
@@ -1860,12 +1869,13 @@ window.customElements.define("fig-combo-input", FigComboInput);
  * @attr {boolean} disabled - Whether the chip is disabled
  */
 class FigChit extends HTMLElement {
+  #src = null;
   constructor() {
     super();
   }
   connectedCallback() {
     this.type = this.getAttribute("type") || "color";
-    this.src = this.getAttribute("src") || "";
+    this.#src = this.getAttribute("src") || "";
     this.value = this.getAttribute("value") || "#000000";
     this.size = this.getAttribute("size") || "small";
     this.disabled = this.getAttribute("disabled") === "true";
@@ -1878,15 +1888,23 @@ class FigChit extends HTMLElement {
   }
   #updateSrc(src) {
     if (src) {
-      this.src = src;
+      this.#src = src;
       this.style.setProperty("--src", `url(${src})`);
     } else {
       this.style.removeProperty("--src");
+      this.#src = null;
     }
   }
   static get observedAttributes() {
     return ["src", "value", "disabled"];
   }
+  get src() {
+    return this.#src;
+  }
+  set src(value) {
+    this.#src = value;
+    this.setAttribute("src", value);
+  }
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
       case "src":
@@ -1939,12 +1957,13 @@ class FigImage extends HTMLElement {
     }</div>`;
   }
   connectedCallback() {
-    this.src = this.getAttribute("src") || "";
+    this.#src = this.getAttribute("src") || "";
     this.upload = this.getAttribute("upload") === "true";
     this.download = this.getAttribute("download") === "true";
     this.label = this.getAttribute("label") || "Upload";
     this.size = this.getAttribute("size") || "small";
     this.innerHTML = this.#getInnerHTML();
+    this.#updateRefs();
   }
   disconnectedCallback() {
     this.fileInput.removeEventListener(
@@ -1969,7 +1988,6 @@ class FigImage extends HTMLElement {
         );
       }
       if (this.download) {
-        console.log("binding download");
         this.downloadButton = this.querySelector("fig-button[type='download']");
         this.downloadButton.removeEventListener(
           "click",
@@ -2070,11 +2088,12 @@ class FigImage extends HTMLElement {
   }
   set src(value) {
     this.#src = value;
+    this.setAttribute("src", value);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "src") {
-      this.src = newValue;
+      //this.src = newValue;
       if (this.chit) {
         this.chit.setAttribute("src", this.#src);
       }

package/package.json

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