@rogieking/figui3 1.6.6 → 1.6.8

package/components.css

@@ -1867,6 +1867,7 @@ dialog,
   padding: 0;
   outline: 0;
   border: 0;
+  inset: auto;
   color: var(--figma-color-text);
   border-radius: var(--radius-large, 0.8125rem);
   background: var(--figma-color-bg);
@@ -1981,7 +1982,8 @@ dialog[is="fig-dialog"] {
 }
 
 /* Tooltip */
-fig-tooltip {
+fig-tooltip,
+fig-popover {
   display: contents;
 }
 .fig-tooltip {

package/example.html

@@ -25,6 +25,46 @@
 
         <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>
+
     <fig-content>
 
         <br /><br /><br /><br /><br /><br /><br /><br /><br />

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,26 +424,19 @@ 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()
-    //if (!this.popup) {
     this.popup = this.popup || this.querySelector("[popover]");
     this.popup.setAttribute("class", "fig-popover");
     this.popup.style.position = "fixed";
-    this.popup.style.display = "block";
-    this.popup.style.pointerEvents = "none";
+    this.popup.style.visibility = "hidden";
+    this.popup.style.display = "inline-flex";
     document.body.append(this.popup);
-    //}
   }
-
-  destroy() {}
 }
 customElements.define("fig-popover", FigPopover);
 
@@ -671,6 +685,7 @@ class FigSlider extends HTMLElement {
 
   constructor() {
     super();
+    this.initialInnerHTML = this.innerHTML;
 
     // Bind the event handlers
     this.#boundHandleInput = (e) => {
@@ -800,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.6",
+  "version": "1.6.8",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {