@rogieking/figui3 1.0.44 → 1.0.46

package/example.html

@@ -31,10 +31,24 @@
             <fig-segment>Three</fig-segment>
         </fig-segmented-control>
         <br /><br />
+        <fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
+                   upload="true"></fig-image>
+        <fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
+                   upload="true"
+                   size="medium"></fig-image>
+        <fig-image upload="true"
+                   label="Upload image"
+                   size="large"></fig-image>
+        <br /><br />
         <hstack>
             <fig-button>Primary</fig-button>
             <fig-button variant="secondary">Secondary</fig-button>
             <fig-button variant="ghost">Ghost</fig-button>
+            <fig-button variant="ghost"
+                        type="upload">
+                Upload
+                <input type="file" />
+            </fig-button>
             <fig-button variant="ghost"
                         type="toggle"
                         icon="true">

package/fig.css

@@ -976,7 +976,19 @@ fig-chit {
       box-shadow: inset 0 0 0 1px var(--figma-color-border-selected),
         inset 0 0 0 3px var(--figma-color-bg);
     }
+    input[type="color"]::-webkit-color-swatch-wrapper {
+      border-radius: var(--radius-medium);
+    }
+
+    input[type="color"]::-moz-color-swatch {
+      border-radius: var(--radius-medium);
+    }
+
+    input[type="color"]::-webkit-color-swatch {
+      border-radius: var(--radius-medium);
+    }
   }
+
   &[disabled="true"] {
     input {
       pointer-events: none;
@@ -1039,6 +1051,36 @@ fig-chit {
   }
 }
 
+/* Fig Image */
+fig-image {
+  --image-size: 2rem;
+  display: inline-grid;
+  place-items: center;
+  width: var(--image-size);
+  height: var(--image-size);
+  > * {
+    grid-area: 1/1;
+  }
+  fig-chit {
+    --size: var(--image-size) !important;
+  }
+  fig-button {
+    opacity: 0;
+    pointer-events: none;
+  }
+  &:not([src]):not([src=""]) fig-button,
+  &:hover fig-button {
+    opacity: 1;
+    pointer-events: all;
+  }
+  &[size="medium"] {
+    --image-size: 4rem;
+  }
+  &[size="large"] {
+    --image-size: 8rem;
+  }
+}
+
 /* Combo input */
 .input-combo {
   display: inline-flex;
@@ -2041,7 +2083,6 @@ fig-segmented-control {
     justify-content: center;
     position: relative;
     appearance: none;
-    min-width: 1.5rem;
     padding: 0 var(--spacer-2);
 
     &[selected]:not([selected="false"]),

package/fig.js

@@ -1326,3 +1326,64 @@ class FigChit extends HTMLElement {
   }
 }
 window.customElements.define("fig-chit", FigChit);
+
+/* Upload */
+class FigImage extends HTMLElement {
+  constructor() {
+    super();
+  }
+  #getInnerHTML() {
+    return `<fig-chit type="image" size="large" ${
+      this.src ? `src="${this.src}"` : ""
+    } disabled="true"></fig-chit>${
+      this.upload
+        ? `<fig-button variant="primary" type="upload">
+          ${this.label} 
+          <input type="file" accept="image/*" />
+        </fig-button>`
+        : ""
+    }`;
+  }
+  connectedCallback() {
+    this.src = this.getAttribute("src") || "";
+    this.upload = this.getAttribute("upload") === "true";
+    this.label = this.getAttribute("label") || "Upload";
+    this.size = this.getAttribute("size") || "small";
+    this.innerHTML = this.#getInnerHTML();
+    this.#updateRefs();
+  }
+  #updateRefs() {
+    requestAnimationFrame(() => {
+      this.chit = this.querySelector("fig-chit");
+      this.uploadButton = this.querySelector("fig-button");
+      this.fileInput = this.uploadButton?.querySelector("input");
+
+      this.fileInput.addEventListener(
+        "change",
+        this.handleFileInput.bind(this)
+      );
+    });
+  }
+  handleFileInput(e) {
+    this.src = URL.createObjectURL(e.target.files[0]);
+    this.setAttribute("src", this.src);
+    this.chit.setAttribute("src", this.src);
+  }
+  static get observedAttributes() {
+    return ["src", "upload"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "src") {
+      this.src = newValue;
+    }
+    if (name === "upload") {
+      this.upload = newValue.toLowerCase() === "true";
+      this.innerHTML = this.#getInnerHTML();
+      this.#updateRefs();
+    }
+    if (name === "size") {
+      this.size = newValue;
+    }
+  }
+}
+window.customElements.define("fig-image", FigImage);

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.44"
+  "version": "1.0.46"
 }