@rogieking/figui3 1.5.6 → 1.5.8

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

package/components.css

@@ -1967,17 +1967,27 @@ fig-tooltip {
 }
 .fig-tooltip {
   inset: unset;
-  display: block;
+  display: inline-block;
   color: var(--color-tooltip);
   background-color: var(--bg-tooltip);
   padding: var(--spacer-1) var(--spacer-2);
   line-height: 1rem !important;
-  display: inline-flex;
   font-weight: inherit;
   border-radius: var(--radius-medium, 0.3125rem);
-
-  font: inherit;
-  font-weight: normal;
+  max-width: 180px;
+  width: max-content;
+
+  & > span {
+    text-wrap: balance;
+    max-height: 2.5rem;
+    overflow-y: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-clamp: 2;
+    text-overflow: ellipsis;
+    width: auto;
+  }
 
   &:after {
     content: "";

package/example.html

@@ -26,7 +26,49 @@
         <h2><label>Effects/</label>UI3 Components</h2>
     </fig-header>
     <fig-content>
-        <fig-button type="button"
+
+        <br /><br /><br /><br /><br /><br /><br /><br /><br />
+        <hstack>
+            <fig-tooltip text="Tooltip"
+                         delay="0">
+                <fig-button>
+                    Test
+                </fig-button>
+            </fig-tooltip>
+            <fig-tooltip text="Tooltip that is a bit longer"
+                         delay="0">
+                <fig-button>
+                    Test
+                </fig-button>
+            </fig-tooltip>
+            <fig-tooltip text="Tooltip that is a bit longer ish"
+                         delay="0">
+                <fig-button>
+                    Test
+                </fig-button>
+            </fig-tooltip>
+            <fig-tooltip text="Tooltip that is a bit longer ish yet"
+                         delay="0">
+                <fig-button>
+                    Test
+                </fig-button>
+            </fig-tooltip>
+            <fig-tooltip text="Tooltip that is a bit longer and has a lot of text and even more text"
+                         delay="0">
+                <fig-button>
+                    Test
+                </fig-button>
+            </fig-tooltip>
+            <fig-tooltip text="Super mega fuckin long ass tooltip that likely shouldn't even be possible to fit in the space"
+                         delay="0">
+                <fig-button>
+                    Test
+                </fig-button>
+            </fig-tooltip>
+
+        </hstack>
+        <br /><br /><br /><br /><br /><br /><br /><br /><br />
+        <fig-button type="link"
                     href="https://www.google.com">
             <svg width="24"
                  height="24"
@@ -39,7 +81,8 @@
             </svg>
 
             Install</fig-button>
-        <fig-button type="button"
+        <fig-button type="link"
+                    target="_blank"
                     size="large"
                     href="https://www.google.com">
             <svg width="24"

package/fig.js

@@ -77,8 +77,13 @@ class FigButton extends HTMLElement {
     }
     if (this.type === "link") {
       const href = this.getAttribute("href");
+      const target = this.getAttribute("target");
       if (href) {
-        window.open(href, "_blank");
+        if (target) {
+          window.open(href, target);
+        } else {
+          window.location.href = href;
+        }
       }
     }
   }
@@ -249,14 +254,24 @@ class FigTooltip extends HTMLElement {
 
   render() {
     this.destroy();
+    let content = document.createElement("span");
     this.popup = document.createElement("span");
     this.popup.setAttribute("class", "fig-tooltip");
     this.popup.style.position = "fixed";
     this.popup.style.visibility = "hidden";
     this.popup.style.display = "inline-flex";
     this.popup.style.pointerEvents = "none";
-    this.popup.innerText = this.getAttribute("text");
+    this.popup.append(content);
+    content.innerText = this.getAttribute("text");
     document.body.append(this.popup);
+    const text = content.childNodes[0];
+    if (text) {
+      const range = document.createRange();
+      range.setStartBefore(text);
+      range.setEndAfter(text);
+      const clientRect = range.getBoundingClientRect();
+      content.style.width = `${clientRect.width}px`;
+    }
   }
 
   destroy() {
@@ -1910,8 +1925,30 @@ class FigImage extends HTMLElement {
       }
     });
   }
-  handleFileInput(e) {
-    this.src = URL.createObjectURL(e.target.files[0]);
+  async handleFileInput(e) {
+    this.blob = URL.createObjectURL(e.target.files[0]);
+    //set base64 url
+    const reader = new FileReader();
+    reader.readAsDataURL(e.target.files[0]);
+    //await this data url to be set
+    await new Promise((resolve) => {
+      reader.onload = (e) => {
+        this.base64 = e.target.result;
+        resolve();
+      };
+    });
+    //emit event for loaded
+    this.dispatchEvent(
+      new CustomEvent("load", {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          blob: this.blob,
+          base64: this.base64,
+        },
+      })
+    );
+    this.src = this.blob;
     this.setAttribute("src", this.src);
     this.chit.setAttribute("src", this.src);
   }

package/package.json

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