@rogieking/figui3 1.6.9 → 1.7.1

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;
@@ -956,6 +982,11 @@ fig-tabs,
   gap: var(--spacer-2);
 }
 
+fig-tab-content,
+.fig-tab-content {
+  display: none;
+}
+
 /* Avatar */
 fig-avatar,
 .fig-avatar {

package/example.html

@@ -240,9 +240,16 @@
         </fig-header>
         <fig-field>
             <fig-tabs>
-                <fig-tab selected>Tab #1</fig-tab>
-                <fig-tab>Tab #2</fig-tab>
+                <fig-tab selected
+                         content="#tab-1-content">Tab #1</fig-tab>
+                <fig-tab content="#tab-2-content">Tab #2</fig-tab>
             </fig-tabs>
+            <fig-tab-content id="tab-1-content">
+                Content for Tab #1
+            </fig-tab-content>
+            <fig-tab-content id="tab-2-content">
+                Content for Tab #2
+            </fig-tab-content>
         </fig-field>
         <fig-header>
             <h2>Segmented control</h2>
@@ -272,15 +279,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 +574,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 +920,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();
     });
@@ -530,18 +529,53 @@ window.customElements.define("fig-popover-2", FigPopover2);
  * @attr {boolean} selected - Whether the tab is currently selected
  */
 class FigTab extends HTMLElement {
+  #selected;
   constructor() {
     super();
+    this.content = null;
+    this.#selected = false;
   }
   connectedCallback() {
     this.setAttribute("label", this.innerText);
     this.addEventListener("click", this.handleClick.bind(this));
+
+    requestAnimationFrame(() => {
+      if (typeof this.getAttribute("content") === "string") {
+        this.content = document.querySelector(this.getAttribute("content"));
+        if (this.#selected) {
+          this.content.style.display = "block";
+        } else {
+          this.content.style.display = "none";
+        }
+      }
+    });
+  }
+  get selected() {
+    return this.#selected;
+  }
+  set selected(value) {
+    this.setAttribute("selected", value ? "true" : "false");
   }
   disconnectedCallback() {
     this.removeEventListener("click", this.handleClick);
   }
   handleClick() {
-    this.setAttribute("selected", "true");
+    this.selected = true;
+    if (this.content) {
+      this.content.style.display = "block";
+    }
+  }
+
+  static get observedAttributes() {
+    return ["selected"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "selected") {
+      this.#selected = newValue !== null && newValue !== "false";
+      if (this?.content) {
+        this.content.style.display = this.#selected ? "block" : "none";
+      }
+    }
   }
 }
 window.customElements.define("fig-tab", FigTab);
@@ -983,8 +1017,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;
 
@@ -1845,7 +1879,6 @@ class FigImage extends HTMLElement {
     await new Promise((resolve) => {
       this.image = new Image();
       this.image.crossOrigin = "Anonymous";
-      console.log("loading image", this.src);
       this.image.onload = async () => {
         this.aspectRatio = this.image.width / this.image.height;
         this.style.setProperty(

package/package.json

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