@rogieking/figui3 1.6.8 → 1.7.0

package/components.css

@@ -437,6 +437,8 @@
   /* Icons */
   --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(0 0 0 / 90%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
   --icon-checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7773 4.08403C12.0071 4.2372 12.0692 4.54764 11.916 4.7774L7.91603 10.7774C7.83293 10.902 7.69834 10.9829 7.54927 10.9976C7.4002 11.0124 7.25237 10.9595 7.14645 10.8536L4.14645 7.85361C3.95118 7.65834 3.95118 7.34176 4.14645 7.1465C4.34171 6.95124 4.65829 6.95124 4.85355 7.1465L7.42229 9.71523L11.084 4.2227C11.2372 3.99294 11.5476 3.93085 11.7773 4.08403Z' fill='white'/%3E%3C/svg%3E%0A");
+  --icon-steppers: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");
+
   /* Elevations */
   --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.3),
     0px 1px 3px 0px rgba(0, 0, 0, 0.15);
@@ -451,6 +453,7 @@
 
 :root.figma-dark {
   --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(255 255 255 / 100%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+
   --handle-shadow: 0px 0 0 0.75px 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
     0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
   --figma-color-bg-ghost-hover: rgba(255, 255, 255, 0.05);
@@ -506,10 +509,33 @@ input[type="password"],
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     display: none;
+    -webkit-appearance: none;
     margin: 0;
   }
 }
 
+fig-input-text {
+  &:has([slot="append"]) input[type="number"] {
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      display: none;
+      margin: 0;
+      opacity: 0;
+    }
+  }
+  &[steppers="true"] {
+    input[type="number"]::-webkit-inner-spin-button {
+      display: block;
+      opacity: 1;
+      height: 1.5rem;
+      width: 1.5rem;
+      margin-right: calc(var(--spacer-2) * -1);
+      background-color: var(--figma-color-text-secondary);
+      mask-image: var(--icon-steppers);
+    }
+  }
+}
+
 /* Textarea */
 textarea {
   min-height: 2rem;

package/example.html

@@ -272,15 +272,7 @@
                        label="Upload image"
                        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>
@@ -575,7 +567,8 @@
         <fig-field>
             <label>Numeric input</label>
             <fig-input-text placeholder="###"
-                            type="number"></fig-input-text>
+                            type="number"
+                            steppers="true"></fig-input-text>
         </fig-field>
         <fig-field>
             <label>Password input</label>
@@ -920,15 +913,7 @@
             </fig-button>
         </fig-field>
     </fig-content>
-    <script>
-        let elements = Array.from(document.querySelectorAll('*'));
-        elements.filter(n => n.tagName.toLowerCase().indexOf("fig-slider") > -1).forEach(n => n.addEventListener('input', (e) => {
-            console.log('input:', n.tagName, e.target)
-        }))
-        document.querySelectorAll('fig-input-color').forEach(n => n.addEventListener('change', (e) => {
-            console.log('change:', n.tagName, e.target.value)
-        }))
-    </script>
+
 </body>
 
 </html>

package/fig.js

@@ -450,7 +450,6 @@ class FigDialog extends HTMLDialogElement {
   connectedCallback() {
     this.modal =
       this.hasAttribute("modal") && this.getAttribute("modal") !== "false";
-
     requestAnimationFrame(() => {
       this.#addCloseListeners();
     });
@@ -983,8 +982,8 @@ class FigInputText extends HTMLElement {
 
     //child nodes hack
     requestAnimationFrame(() => {
-      const append = this.querySelector("[slot=append]");
-      const prepend = this.querySelector("[slot=prepend]");
+      let append = this.querySelector("[slot=append]");
+      let prepend = this.querySelector("[slot=prepend]");
 
       this.innerHTML = html;
 
@@ -1031,7 +1030,6 @@ class FigInputText extends HTMLElement {
     if (this.type === "number") {
       value = value / (this.transform || 1);
       value = this.#sanitizeInput(value, false);
-      console.log("sanitizeInput", value);
       valueTransformed = value * (this.transform || 1);
     }
     this.value = value;
@@ -1796,6 +1794,7 @@ window.customElements.define("fig-chit", FigChit);
  * @attr {string} size - Size of the image preview
  */
 class FigImage extends HTMLElement {
+  #src = null;
   constructor() {
     super();
   }
@@ -1838,9 +1837,6 @@ class FigImage extends HTMLElement {
           this.#handleFileInput.bind(this)
         );
       }
-      if (this.src) {
-        this.#loadImage(this.src);
-      }
     });
   }
   async #loadImage(src) {
@@ -1848,13 +1844,22 @@ class FigImage extends HTMLElement {
     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}`
         );
+        this.dispatchEvent(
+          new CustomEvent("loaded", {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+              blob: this.blob,
+              base64: this.base64,
+            },
+          })
+        );
         resolve();
 
         // Create canvas to extract blob and base64 from image
@@ -1905,18 +1910,26 @@ class FigImage extends HTMLElement {
         cancelable: true,
       })
     );
-    this.src = this.blob;
-    this.setAttribute("src", this.src);
-    this.chit.setAttribute("src", this.src);
+    this.setAttribute("src", this.blob);
   }
   static get observedAttributes() {
     return ["src", "upload"];
   }
+  get src() {
+    return this.#src;
+  }
+  set src(value) {
+    this.#src = value;
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "src") {
       this.src = newValue;
       if (this.chit) {
-        this.chit.setAttribute("src", this.src);
+        this.chit.setAttribute("src", this.#src);
+      }
+      if (this.#src) {
+        this.#loadImage(this.#src);
       }
     }
     if (name === "upload") {

package/package.json

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

package/end-points/chevron.svg

@@ -1,9 +0,0 @@
-<svg width="24"
-                     height="24"
-                     viewBox="0 0 24 24"
-                     fill="none"
-                     xmlns="http://www.w3.org/2000/svg">
-                    <path d="M13.6465 11.1465C13.8417 10.9512 14.1583 10.9512 14.3535 11.1465C14.5488 11.3417 14.5488 11.6583 14.3535 11.8535L12.3535 13.8535C12.1583 14.0488 11.8417 14.0488 11.6465 13.8535L9.64648 11.8535C9.45122 11.6583 9.45122 11.3417 9.64648 11.1465C9.84175 10.9512 10.1583 10.9512 10.3535 11.1465L12 12.793L13.6465 11.1465Z"
-                          fill="black"
-                          fill-opacity="0.9" />
-                </svg>

package/end-points/end-points.html

@@ -1,114 +0,0 @@
-<!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="https://unpkg.com/@rogieking/figui3@latest/fig.css">
-    <style>
-        /* Ignore these styles. They are mostly used to recreate the look of a dropdown */
-        body {
-            width: 480px;
-            margin: 0 auto;
-            padding: 0 2rem;
-        }
-
-        .dropdown {
-
-            height: var(--spacer-4);
-            padding: 0;
-            border-radius: var(--radius-medium);
-            display: inline-flex;
-            appearance: none;
-            align-items: center;
-            width: 40vw;
-            flex: 1 0 0;
-            border: 0;
-            color: var(--figma-color-text);
-            background-color: var(--figma-color-bg);
-            box-shadow: inset 0 0 0 1px var(--figma-color-border);
-            accent-color: var(--figma-color-bg-brand);
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            background-image: url(chevron.svg);
-            background-repeat: no-repeat;
-            background-position: right center;
-            background-size: 24px;
-            padding-right: 24px;
-            margin: 0.5rem 0;
-
-            label {
-                display: block;
-                flex-grow: 1;
-                flex-shrink: 1;
-                text-align: left;
-                overflow: hidden;
-                padding: 0;
-                color: var(--figma-color-text);
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        /* Style to reference */
-        .stretch-icon {
-            display: block;
-            flex-shrink: 0;
-            flex-basis: 24px;
-            width: 24px;
-            border: 12px solid black;
-            box-sizing: border-box;
-            /* top | right | bottom | left */
-            border-image-slice: 12;
-            border-image-repeat: repeat;
-
-            &.cap-diamond {
-                border-image-source: url(icon.24.stroke-diamond-arrow.svg);
-            }
-
-            &.cap-round {
-                border-image-source: url(icon.24.stroke.cap-round.svg);
-            }
-
-            &.grow {
-                flex-grow: 1;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <fig-content>
-
-        <div class="dropdown">
-            <div class="stretch-icon cap-diamond"></div>
-            <label>Diamond arrow with a label</label>
-        </div>
-        <br />
-        <div class="dropdown">
-            <div class="stretch-icon cap-diamond grow"></div>
-        </div>
-        <br />
-        <div class="dropdown">
-            <div class="stretch-icon cap-round">
-            </div>
-            <label>Round with a label</label>
-        </div>
-        <br />
-        <div class="dropdown">
-            <div class="stretch-icon cap-round grow">
-            </div>
-        </div>
-
-    </fig-content>
-
-
-
-</body>
-
-</html>

package/end-points/icon.24.stroke-diamond-arrow.svg

@@ -1,3 +0,0 @@
-<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.79297 7.29297C7.18349 6.90244 7.81651 6.90244 8.20703 7.29297L11.9141 11H28.5C28.7761 11 28.9999 11.2239 29 11.5C29 11.7761 28.7761 12 28.5 12H11.9141L8.20703 15.707C7.81651 16.0976 7.18349 16.0976 6.79297 15.707L3.29297 12.207L3.22461 12.1309C2.90426 11.7381 2.92685 11.1591 3.29297 10.793L6.79297 7.29297ZM4 11.5L7.5 15L11 11.5L7.5 8L4 11.5Z" fill="black" fill-opacity="0.9"/>
-</svg>

package/end-points/icon.24.stroke.cap-round.svg

@@ -1,4 +0,0 @@
-<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 7C7.23858 7 5 9.23858 5 12C5 14.7614 7.23858 17 10 17H26.5C26.7761 17 27 16.7761 27 16.5C27 16.2239 26.7761 16 26.5 16H10C7.79086 16 6 14.2091 6 12C6 9.79086 7.79086 8 10 8H26.5C26.7761 8 27 7.77614 27 7.5C27 7.22386 26.7761 7 26.5 7H10Z" fill="black" fill-opacity="0.9"/>
-<path d="M25.7734 11.5C25.4973 11.5 25.2734 11.7239 25.2734 12C25.2734 12.2761 25.4973 12.5 25.7734 12.5H26.5C26.7761 12.5 27 12.2761 27 12C27 11.7239 26.7761 11.5 26.5 11.5H25.7734ZM21.8984 11.5C21.6223 11.5 21.3984 11.7239 21.3984 12C21.3984 12.2761 21.6223 12.5 21.8984 12.5H23.3516C23.6277 12.5 23.8516 12.2761 23.8516 12C23.8516 11.7239 23.6277 11.5 23.3516 11.5H21.8984ZM18.0234 11.5C17.7473 11.5 17.5234 11.7239 17.5234 12C17.5234 12.2761 17.7473 12.5 18.0234 12.5H19.4766C19.7527 12.5 19.9766 12.2761 19.9766 12C19.9766 11.7239 19.7527 11.5 19.4766 11.5H18.0234ZM14.1484 11.5C13.8723 11.5 13.6484 11.7239 13.6484 12C13.6484 12.2761 13.8723 12.5 14.1484 12.5H15.6016C15.8777 12.5 16.1016 12.2761 16.1016 12C16.1016 11.7239 15.8777 11.5 15.6016 11.5H14.1484ZM11 11.5C10.7239 11.5 10.5 11.7239 10.5 12C10.5 12.2761 10.7239 12.5 11 12.5H11.7266C12.0027 12.5 12.2266 12.2761 12.2266 12C12.2266 11.7239 12.0027 11.5 11.7266 11.5H11Z" fill="black" fill-opacity="0.3"/>
-</svg>