@rogieking/figui3 1.6.7 → 1.6.8

package/example.html

@@ -26,15 +26,42 @@
         <h2><label>Effects/</label>UI3 Components</h2>
     </fig-header>
 
-    <fig-popover action="click"
+    <fig-popover action="manual"
+                 open="true"
                  size="large">
         <fig-button>
             Hover me
         </fig-button>
         <div popover>
-            <fig-button>
-                Test
-            </fig-button>
+            <fig-header>
+                <h2>Slider</h2>
+            </fig-header>
+            <fig-dropdown>
+                <option>One</option>
+                <option>Two</option>
+            </fig-dropdown>
+            <fig-field direction="horizontal">
+                <label>Slider</label>
+                <fig-slider min="1"
+                            max="100"
+                            value="50"
+                            step="1"
+                            units="%"
+                            transform="100">
+                </fig-slider>
+            </fig-field>
+            <br />
+            <fig-field direction="horizontal">
+                <label>Slider</label>
+                <fig-slider min="1"
+                            max="100"
+                            value="50"
+                            step="1"
+                            units="%"
+                            transform="100">
+                </fig-slider>
+
+            </fig-field>
         </div>
     </fig-popover>
 

package/fig.js

@@ -225,7 +225,6 @@ class FigTooltip extends HTMLElement {
     this.action = this.getAttribute("action") || "hover";
     let delay = parseInt(this.getAttribute("delay"));
     this.delay = !isNaN(delay) ? delay : 500;
-    this.isOpen = false;
 
     // Bind methods that will be used as event listeners
     this.#boundHideOnChromeOpen = this.#hideOnChromeOpen.bind(this);
@@ -366,7 +365,13 @@ class FigTooltip extends HTMLElement {
     }
   }
   static get observedAttributes() {
-    return ["action", "delay"];
+    return ["action", "delay", "open"];
+  }
+  get open() {
+    return this.hasAttribute("open") && this.getAttribute("open") === "true";
+  }
+  set open(value) {
+    this.setAttribute("open", value);
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "action") {
@@ -376,6 +381,17 @@ class FigTooltip extends HTMLElement {
       let delay = parseInt(newValue);
       this.delay = !isNaN(delay) ? delay : 500;
     }
+    if (name === "open") {
+      if (newValue === "true") {
+        requestAnimationFrame(() => {
+          this.showDelayedPopup();
+        });
+      } else {
+        requestAnimationFrame(() => {
+          this.hidePopup();
+        });
+      }
+    }
   }
 
   #hideOnChromeOpen(e) {
@@ -383,11 +399,16 @@ class FigTooltip extends HTMLElement {
 
     // Check if the clicked element is a select or opens a dialog
     const target = e.target;
+
+    // If the target is a child of this.popup, return early
+    if (this.popup && this.popup.contains(target)) {
+      return;
+    }
+
     if (
       target.tagName === "SELECT" ||
       target.hasAttribute("popover") ||
-      target.closest("dialog") ||
-      target.onclick?.toString().includes("alert")
+      target.closest("dialog")
     ) {
       this.hidePopup();
     }
@@ -403,15 +424,12 @@ customElements.define("fig-tooltip", FigTooltip);
  * @attr {string} size - The size of the popover
  */
 class FigPopover extends FigTooltip {
-  static observedAttributes = ["action", "size"];
-
   constructor() {
     super();
     this.action = this.getAttribute("action") || "click";
     this.delay = parseInt(this.getAttribute("delay")) || 0;
   }
   render() {
-    this.destroy();
     this.popup = this.popup || this.querySelector("[popover]");
     this.popup.setAttribute("class", "fig-popover");
     this.popup.style.position = "fixed";
@@ -419,8 +437,6 @@ class FigPopover extends FigTooltip {
     this.popup.style.display = "inline-flex";
     document.body.append(this.popup);
   }
-
-  destroy() {}
 }
 customElements.define("fig-popover", FigPopover);
 
@@ -669,6 +685,7 @@ class FigSlider extends HTMLElement {
 
   constructor() {
     super();
+    this.initialInnerHTML = this.innerHTML;
 
     // Bind the event handlers
     this.#boundHandleInput = (e) => {
@@ -798,7 +815,6 @@ class FigSlider extends HTMLElement {
   }
 
   connectedCallback() {
-    this.initialInnerHTML = this.innerHTML;
     this.#regenerateInnerHTML();
   }
 

package/glitch.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+    <title>Figma UI3 Web Components</title>
+    <link rel="stylesheet"
+          type="text/css"
+          href="fig.css">
+    <script src="fig.js"></script>
+    <style>
+        body {
+            width: 480px;
+            margin: 0 auto;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <fig-header>
+
+        <h2><label>Effects/</label>UI3 Components</h2>
+    </fig-header>
+
+    <fig-popover action="manual"
+                 open="true"
+                 size="large">
+        <fig-button>
+            Hover me
+        </fig-button>
+        <div popover>
+            <fig-header>
+                <h2>Slider</h2>
+            </fig-header>
+            <fig-dropdown>
+                <option>One</option>
+                <option>Two</option>
+            </fig-dropdown>
+            <fig-field direction="horizontal">
+                <label>Slider</label>
+                <fig-slider min="1"
+                            max="100"
+                            value="50"
+                            step="1"
+                            units="%"
+                            transform="100">
+                </fig-slider>
+            </fig-field>
+            <br />
+            <fig-field direction="horizontal">
+                <label>Slider</label>
+                <fig-slider min="1"
+                            max="100"
+                            value="50"
+                            step="1"
+                            units="%"
+                            transform="100">
+                </fig-slider>
+
+            </fig-field>
+        </div>
+    </fig-popover>
+
+</body>
+
+</html>

package/package.json

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