@rogieking/figui3 1.6.4 → 1.6.6

package/components.css

@@ -664,10 +664,6 @@ select {
   padding-right: 1.5rem;
 }
 
-fig-dialog > *:not(dialog) {
-  display: none !important;
-}
-
 /* Dropdown */
 fig-dropdown,
 .fig-dropdown {
@@ -1194,6 +1190,7 @@ fig-image {
   place-items: center;
   width: var(--image-size);
   height: var(--image-size);
+  aspect-ratio: 1 / 1;
   > * {
     grid-area: 1/1;
   }
@@ -1215,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 */
@@ -1938,49 +1945,38 @@ dialog,
     }
   }
 }
-fig-dialog,
-.fig-dialog {
-  display: contents;
+dialog[is="fig-dialog"] {
   --offset: 1rem;
   --translate-x: -50%;
   --translate-y: -50%;
+  --z-index: 999999;
 
-  dialog {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    margin: 0;
-    z-index: 999999;
-    transform: translate(var(--translate-x), var(--translate-y));
-  }
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin: 0;
+  z-index: var(--z-index);
+  transform: translate(var(--translate-x), var(--translate-y));
 
   &[position*="bottom"] {
-    dialog {
-      bottom: var(--offset);
-      top: auto;
-      --translate-y: 0;
-    }
+    bottom: var(--offset);
+    top: auto;
+    --translate-y: 0;
   }
   &[position*="top"] {
-    dialog {
-      top: var(--offset);
-      bottom: auto;
-      --translate-y: 0;
-    }
+    top: var(--offset);
+    bottom: auto;
+    --translate-y: 0;
   }
   &[position*="right"] {
-    dialog {
-      right: var(--offset);
-      left: auto;
-      --translate-x: 0;
-    }
+    right: var(--offset);
+    left: auto;
+    --translate-x: 0;
   }
   &[position*="left"] {
-    dialog {
-      left: var(--offset);
-      right: auto;
-      --translate-: 0;
-    }
+    left: var(--offset);
+    right: auto;
+    --translate-x: 0;
   }
 }
 

package/example.html

@@ -233,6 +233,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>
@@ -435,8 +444,9 @@
             </fig-tooltip>
         </fig-field>
 
-        <fig-dialog open="true"
-                    position="bottom right">
+        <dialog open="true"
+                position="bottom right"
+                is="fig-dialog">
             <fig-header>
                 <h3>Dialog</h3>
                 <fig-button variant="ghost"
@@ -458,13 +468,25 @@
             </fig-header>
             <fig-content>
                 <p>Some content here</p>
+                <fig-field direction="horizontal">
+                    <label for="colorLevels">Color Levels</label>
+                    <fig-slider id="colorLevels"
+                                min="2"
+                                max="16"
+                                value="4"
+                                variant="minimal"
+                                step="1"
+                                text="true"
+                                style="flex: 1; max-width: 200px;">
+                    </fig-slider>
+                </fig-field>
             </fig-content>
             <footer>
                 <fig-button variant="secondary"
                             close-dialog>Cancel</fig-button>
                 <fig-button>Save</fig-button>
             </footer>
-        </fig-dialog>
+        </dialog>
         <fig-header>
             <h2>Dropdown</h2>
         </fig-header>

package/fig.js

@@ -432,20 +432,10 @@ customElements.define("fig-popover", FigPopover);
  * @attr {boolean} open - Whether the dialog is visible
  * @attr {boolean} modal - Whether the dialog should be modal
  */
-class FigDialog extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this.dialog = document.createElement("dialog");
-    this.contentSlot = document.createElement("slot");
-  }
-
+class FigDialog extends HTMLDialogElement {
   connectedCallback() {
     this.modal =
       this.hasAttribute("modal") && this.getAttribute("modal") !== "false";
-    this.appendChild(this.dialog);
-    this.shadowRoot.appendChild(this.contentSlot);
-    this.contentSlot.addEventListener("slotchange", this.slotChange.bind(this));
 
     requestAnimationFrame(() => {
       this.#addCloseListeners();
@@ -453,61 +443,13 @@ class FigDialog extends HTMLElement {
   }
 
   #addCloseListeners() {
-    this.dialog
-      .querySelectorAll("fig-button[close-dialog]")
-      .forEach((button) => {
-        button.removeEventListener("click", this.close);
-        button.addEventListener("click", this.close.bind(this));
-      });
-  }
-
-  disconnectedCallback() {
-    this.contentSlot.removeEventListener("slotchange", this.slotChange);
-  }
-
-  slotChange() {
-    while (this.dialog.firstChild) {
-      this.dialog.firstChild.remove();
-    }
-    this.contentSlot.assignedNodes().forEach((node) => {
-      if (node !== this.dialog) {
-        this.dialog.appendChild(node.cloneNode(true));
-      }
+    this.querySelectorAll("fig-button[close-dialog]").forEach((button) => {
+      button.removeEventListener("click", this.close);
+      button.addEventListener("click", this.close.bind(this));
     });
-    this.#addCloseListeners();
-  }
-
-  static get observedAttributes() {
-    return ["open", "modal"];
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    switch (name) {
-      case "open":
-        this.open = newValue === "true" && newValue !== "false";
-        if (this?.show) {
-          this[this.open ? "show" : "close"]();
-        }
-        break;
-      case "modal":
-        this.modal = newValue === "true" && newValue !== "false";
-        break;
-    }
-  }
-
-  /* Public methods */
-  show() {
-    if (this.modal) {
-      this.dialog.showModal();
-    } else {
-      this.dialog.show();
-    }
-  }
-  close() {
-    this.dialog.close();
   }
 }
-customElements.define("fig-dialog", FigDialog);
+customElements.define("fig-dialog", FigDialog, { extends: "dialog" });
 
 class FigPopover2 extends HTMLElement {
   #popover;
@@ -1863,6 +1805,12 @@ class FigImage extends HTMLElement {
     this.innerHTML = this.#getInnerHTML();
     this.#updateRefs();
   }
+  disconnectedCallback() {
+    this.fileInput.removeEventListener(
+      "change",
+      this.#handleFileInput.bind(this)
+    );
+  }
 
   #updateRefs() {
     requestAnimationFrame(() => {
@@ -1873,12 +1821,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.4",
+  "version": "1.6.6",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {