@rogieking/figui3 1.6.5 → 1.6.7

package/components.css

@@ -1190,6 +1190,7 @@ fig-image {
   place-items: center;
   width: var(--image-size);
   height: var(--image-size);
+  aspect-ratio: 1 / 1;
   > * {
     grid-area: 1/1;
   }
@@ -1211,6 +1212,16 @@ fig-image {
   &[size="large"] {
     --image-size: 8rem;
   }
+  &[aspect-ratio="auto"] {
+    aspect-ratio: var(--aspect-ratio);
+    height: auto;
+    fig-chit,
+    fig-chit::after,
+    input {
+      height: auto !important;
+      aspect-ratio: var(--aspect-ratio) !important;
+    }
+  }
 }
 
 /* Combo input */
@@ -1856,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);
@@ -1970,7 +1982,8 @@ dialog[is="fig-dialog"] {
 }
 
 /* Tooltip */
-fig-tooltip {
+fig-tooltip,
+fig-popover {
   display: contents;
 }
 .fig-tooltip {

package/example.html

@@ -25,6 +25,19 @@
 
         <h2><label>Effects/</label>UI3 Components</h2>
     </fig-header>
+
+    <fig-popover action="click"
+                 size="large">
+        <fig-button>
+            Hover me
+        </fig-button>
+        <div popover>
+            <fig-button>
+                Test
+            </fig-button>
+        </div>
+    </fig-popover>
+
     <fig-content>
 
         <br /><br /><br /><br /><br /><br /><br /><br /><br />
@@ -233,6 +246,15 @@
                        size="large"></fig-image>
         </fig-field>
         <br /><br />
+        <fig-field>
+            <label>Large (with upload)</label>
+            <fig-image upload="true"
+                       label="Change image"
+                       aspect-ratio="auto"
+                       src="charli.jpeg"
+                       size="large"></fig-image>
+        </fig-field>
+        <br /><br />
         <fig-header>
             <h2>Button</h2>
         </fig-header>

package/fig.js

@@ -411,15 +411,13 @@ class FigPopover extends FigTooltip {
     this.delay = parseInt(this.getAttribute("delay")) || 0;
   }
   render() {
-    //this.destroy()
-    //if (!this.popup) {
+    this.destroy();
     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() {}
@@ -1805,6 +1803,12 @@ class FigImage extends HTMLElement {
     this.innerHTML = this.#getInnerHTML();
     this.#updateRefs();
   }
+  disconnectedCallback() {
+    this.fileInput.removeEventListener(
+      "change",
+      this.#handleFileInput.bind(this)
+    );
+  }
 
   #updateRefs() {
     requestAnimationFrame(() => {
@@ -1815,12 +1819,47 @@ class FigImage extends HTMLElement {
 
         this.fileInput.addEventListener(
           "change",
-          this.handleFileInput.bind(this)
+          this.#handleFileInput.bind(this)
         );
       }
+      if (this.src) {
+        this.#loadImage(this.src);
+      }
+    });
+  }
+  async #loadImage(src) {
+    // Get blob from canvas
+    await new Promise((resolve) => {
+      this.image = new Image();
+      this.image.crossOrigin = "Anonymous";
+
+      this.image.onload = async () => {
+        this.aspectRatio = this.image.width / this.image.height;
+        this.style.setProperty(
+          "--aspect-ratio",
+          `${this.image.width}/${this.image.height}`
+        );
+        resolve();
+
+        // Create canvas to extract blob and base64 from image
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        canvas.width = this.image.width;
+        canvas.height = this.image.height;
+        ctx.drawImage(this.image, 0, 0);
+
+        // Get base64 from canvas
+        this.base64 = canvas.toDataURL();
+
+        // Get blob from canvas
+        canvas.toBlob((blob) => {
+          this.blob = URL.createObjectURL(blob);
+        });
+      };
+      this.image.src = src;
     });
   }
-  async handleFileInput(e) {
+  async #handleFileInput(e) {
     this.blob = URL.createObjectURL(e.target.files[0]);
     //set base64 url
     const reader = new FileReader();

package/package.json

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