@rogieking/figui3 1.0.36 → 1.0.38

package/example.html

@@ -16,6 +16,9 @@
     <fig-header>
         <h3>UI3 Components</h3>
     </fig-header>
+    <fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
+                name="John Doe"></fig-avatar>
+    <fig-avatar name="John Doe"></fig-avatar>
     <fig-content>
         <fig-tabs>
             <fig-tab selected>Tab #1</fig-tab>
@@ -66,10 +69,18 @@
             </fig-tooltip>
         </hstack>
         <br />
-        <fig-dropdown>
-            <option>One</option>
-            <option>Two</option>
-        </fig-dropdown>
+        <fig-field direction="horizontal">
+            <label>Dropdown</label>
+            <fig-dropdown>
+                <option>One</option>
+                <option>Two</option>
+            </fig-dropdown>
+        </fig-field>
+        <br />
+        <fig-combo-input options="House, Apartment, Condo, Other"
+                         placeholder="Type of residence">
+
+        </fig-combo-input>
         <br />
         <fig-tooltip text="Tooltip text">
             <p>Tooltip</p>
@@ -114,6 +125,11 @@
         <fig-input-text type="number"
                         value="10"></fig-input-text>
         <br /><br />
+        <fig-input-text value=""
+                        placeholder="Number">
+            <span slot="prepend">X</span>
+        </fig-input-text>
+        <br /><br />
         <fig-field direction="horizontal">
             <label>Field label</label>
             <fig-input-text value=""
@@ -126,12 +142,15 @@
         </fig-field>
         <fig-field>
             <label>Default slider</label>
-            <fig-slider></fig-slider>
+            <fig-slider default="25"
+                        min="0"
+                        max="500"></fig-slider>
         </fig-field>
 
         <fig-field>
             <label>Number slider (with number input)</label>
             <fig-slider text="true"
+                        default="50"
                         value="50"></fig-slider>
         </fig-field>
 
@@ -151,7 +170,9 @@
 
         <fig-field>
             <label>Stepper slider</label>
-            <fig-slider value="50"
+            <fig-slider type="stepper"
+                        value="25"
+                        default="50"
                         step="25">
                 <datalist id="markers">
                     <option value="0"></option>

package/fig.css

@@ -684,6 +684,12 @@ fig-button {
     }
   }
 
+  /* Variant: Input */
+  &[variant="input"] {
+    background-color: var(--figma-color-bg-secondary);
+    box-shadow: none;
+  }
+
   /* Icon only */
   &[icon],
   &[icon] > button {
@@ -841,7 +847,8 @@ fig-tabs,
 }
 
 /* Avatar */
-.avatar {
+fig-avatar,
+.fig-avatar {
   width: 1.5rem;
   display: inline-grid;
   place-items: center;
@@ -858,7 +865,8 @@ fig-tabs,
   }
 }
 
-.avatar img {
+fig-avatar img,
+.fig-avatar img {
   position: absolute;
   background: var(--checkerboard);
   width: 1.5rem;
@@ -867,7 +875,8 @@ fig-tabs,
   box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
 }
 
-.avatar::after {
+fig-avatar::after,
+.fig-avatar::after {
   content: attr(initials);
 }
 
@@ -1098,9 +1107,9 @@ input[type="radio"] {
 
   &::after {
     content: "";
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 0.25rem;
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 100%;
     background-color: var(--figma-color-text-onbrand);
     transform: scale(0);
     box-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
@@ -1274,8 +1283,26 @@ fig-slider {
       max-width: 100%;
     }
   }
+  &[type="stepper"] {
+    .fig-slider-input-container {
+      &::before {
+        display: none;
+      }
+      /* Default tick */
+      &::after {
+        content: "";
+        display: block;
+        width: var(--slider-tick-size);
+        height: var(--slider-tick-size);
+        border-radius: 100%;
+        background: var(--figma-color-icon);
+        position: absolute;
+        left: calc(var(--default) * 100% - var(--slider-tick-size) / 2);
+        top: calc(50% - var(--slider-tick-size) / 2);
+      }
+    }
+  }
 
-  /* TODO: Delta sizing */
   &[type="delta"] {
     .fig-slider-input-container {
       &::before {
@@ -1353,6 +1380,7 @@ fig-slider {
       aspect-ratio: 1;
       border: none;
       position: relative;
+      z-index: 1;
       box-shadow: var(--slider-handle-shadow);
     }
 
@@ -1420,6 +1448,7 @@ fig-slider {
       aspect-ratio: 1;
       border: none;
       position: relative;
+      z-index: 1;
       box-shadow: var(--slider-handle-shadow);
     }
 
@@ -1783,18 +1812,19 @@ fig-input-text {
   }
 
   & [slot] {
-    padding: 0.25rem 0.5rem;
-    flex: 0;
     user-select: none;
+    width: 1.5rem;
     color: var(--figma-color-text-secondary);
   }
 
   & [slot="prepend"] {
     padding-right: 0;
+    margin-right: calc(var(--spacer-2) * -1);
   }
 
   & [slot="append"] {
     padding-left: 0;
+    margin-left: calc(var(--spacer-2) * -1);
   }
 
   & input {

package/fig.js

@@ -100,6 +100,7 @@ class FigDropdown extends HTMLElement {
   }
 
   render() {
+    this.type = this.getAttribute("type") || "select";
     this.select = document.createElement("select");
     this.optionsSlot = document.createElement("slot");
 
@@ -108,16 +109,32 @@ class FigDropdown extends HTMLElement {
 
     // Move slotted options into the select element
     this.optionsSlot.addEventListener("slotchange", this.slotChange.bind(this));
+
+    this.select.addEventListener("change", this.handleChange.bind(this));
   }
   slotChange() {
     while (this.select.firstChild) {
       this.select.firstChild.remove();
     }
+    if (this.type === "dropdown") {
+      const hiddenOption = document.createElement("option");
+      hiddenOption.setAttribute("hidden", "true");
+      hiddenOption.setAttribute("selected", "true");
+      this.select.appendChild(hiddenOption);
+    }
     this.optionsSlot.assignedNodes().forEach((node) => {
       if (node.nodeName === "OPTION") {
         this.select.appendChild(node.cloneNode(true));
       }
     });
+    if (this.type === "dropdown") {
+      this.select.selectedIndex = -1;
+    }
+  }
+  handleChange() {
+    if (this.type === "dropdown") {
+      this.select.selectedIndex = -1;
+    }
   }
 }
 
@@ -318,7 +335,6 @@ class FigDialog extends HTMLElement {
 
   /* Public methods */
   show() {
-    console.log("show dialog", this.dialog, this.dialog?.show);
     this.dialog.show();
   }
   close() {
@@ -554,6 +570,7 @@ class FigSlider extends HTMLElement {
     range: { min: 0, max: 100, step: 1 },
     hue: { min: 0, max: 255, step: 1 },
     delta: { min: -100, max: 100, step: 1 },
+    stepper: { min: 0, max: 100, step: 25 },
     opacity: { min: 0, max: 1, step: 0.01, color: "#FF0000" },
   };
   constructor() {
@@ -681,7 +698,6 @@ class FigSlider extends HTMLElement {
 
   handleInput() {
     let val = Number(this.input.value);
-    console.log(val);
     this.value = val;
     let complete = this.calculateNormal(val);
     let defaultValue = this.calculateNormal(this.default);
@@ -700,10 +716,8 @@ class FigInputText extends HTMLElement {
     super();
   }
   connectedCallback() {
-    const append = this.querySelector("[slot=append]");
-    const prepend = this.querySelector("[slot=prepend]");
     this.multiline = this.hasAttribute("multiline") || false;
-    this.value = this.getAttribute("value");
+    this.value = this.getAttribute("value") || "";
     this.type = this.getAttribute("type") || "text";
     this.placeholder = this.getAttribute("placeholder");
 
@@ -715,19 +729,23 @@ class FigInputText extends HTMLElement {
       html = `<textarea  
       placeholder="${this.placeholder}">${this.value}</textarea>`;
     }
-    this.innerHTML = html;
-
-    if (prepend) {
-      prepend.addEventListener("click", this.focus.bind(this));
-      this.prepend(prepend);
-    }
-    if (append) {
-      append.addEventListener("click", this.focus.bind(this));
-      this.append(append);
-    }
 
     //child nodes hack
     requestAnimationFrame(() => {
+      const append = this.querySelector("[slot=append]");
+      const prepend = this.querySelector("[slot=prepend]");
+
+      this.innerHTML = html;
+
+      if (prepend) {
+        prepend.addEventListener("click", this.focus.bind(this));
+        this.prepend(prepend);
+      }
+      if (append) {
+        append.addEventListener("click", this.focus.bind(this));
+        this.append(append);
+      }
+
       this.input = this.querySelector("input,textarea");
 
       if (this.getAttribute("min")) {
@@ -778,6 +796,55 @@ class FigInputText extends HTMLElement {
 }
 window.customElements.define("fig-input-text", FigInputText);
 
+/* Avatar */
+class FigAvatar extends HTMLElement {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.src = this.getAttribute("src");
+    this.name = this.getAttribute("name");
+    this.initials = this.getInitials(this.name);
+    this.setAttribute("initials", this.initials);
+    this.setSrc(this.src);
+    requestAnimationFrame(() => {
+      this.img = this.querySelector("img");
+    });
+  }
+  setSrc(src) {
+    this.src = src;
+    if (src) {
+      this.innerHTML = `<img src="${this.src}" ${
+        this.name ? `alt="${this.name}"` : ""
+      } />`;
+    }
+  }
+  getInitials(name) {
+    return name
+      ? name
+          .split(" ")
+          .map((n) => n[0])
+          .join("")
+      : "";
+  }
+  static get observedAttributes() {
+    return ["src", "href", "name"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this[name] = newValue;
+    if (name === "name") {
+      this.img?.setAttribute("alt", newValue);
+      this.name = newValue;
+      this.initials = this.getInitials(this.name);
+      this.setAttribute("initials", this.initials);
+    } else if (name === "src") {
+      this.src = newValue;
+      this.setSrc(this.src);
+    }
+  }
+}
+window.customElements.define("fig-avatar", FigAvatar);
+
 /* Form Field */
 class FigField extends HTMLElement {
   constructor() {
@@ -851,26 +918,28 @@ class FigInputColor extends HTMLElement {
 
     this.style.setProperty("--alpha", this.#rgba.a);
 
-    this.#swatch = this.querySelector("[type=color]");
-    this.textInput = this.querySelector("[type=text]");
-    this.#alphaInput = this.querySelector("[type=number]");
+    requestAnimationFrame(() => {
+      this.#swatch = this.querySelector("[type=color]");
+      this.textInput = this.querySelector("[type=text]");
+      this.#alphaInput = this.querySelector("[type=number]");
 
-    this.#swatch.disabled = this.hasAttribute("disabled");
-    this.#swatch.addEventListener("input", this.handleInput.bind(this));
+      this.#swatch.disabled = this.hasAttribute("disabled");
+      this.#swatch.addEventListener("input", this.handleInput.bind(this));
 
-    if (this.textInput) {
-      this.textInput.value = this.#swatch.value = this.rgbAlphaToHex(
-        this.#rgba,
-        1
-      );
-    }
+      if (this.textInput) {
+        this.textInput.value = this.#swatch.value = this.rgbAlphaToHex(
+          this.#rgba,
+          1
+        );
+      }
 
-    if (this.#alphaInput) {
-      this.#alphaInput.addEventListener(
-        "input",
-        this.handleAlphaInput.bind(this)
-      );
-    }
+      if (this.#alphaInput) {
+        this.#alphaInput.addEventListener(
+          "input",
+          this.handleAlphaInput.bind(this)
+        );
+      }
+    });
   }
   handleAlphaInput(event) {
     //do not propagate to onInput handler for web component
@@ -1123,3 +1192,94 @@ class FigSwitch extends FigCheckbox {
   }
 }
 window.customElements.define("fig-switch", FigSwitch);
+
+/* Bell */
+class FigBell extends HTMLElement {
+  constructor() {
+    super();
+  }
+}
+window.customElements.define("fig-bell", FigBell);
+
+/* Badge */
+class FigBadge extends HTMLElement {
+  constructor() {
+    super();
+  }
+}
+window.customElements.define("fig-badge", FigBadge);
+
+/* Accordion */
+class FigAccordion extends HTMLElement {
+  constructor() {
+    super();
+  }
+}
+window.customElements.define("fig-accordion", FigAccordion);
+
+/* Combo Input */
+class FigComboInput extends HTMLElement {
+  constructor() {
+    super();
+  }
+  getOptionsFromAttribute() {
+    return (this.getAttribute("options") || "").split(",");
+  }
+  connectedCallback() {
+    this.options = this.getOptionsFromAttribute();
+    this.placeholder = this.getAttribute("placeholder") || "";
+    this.value = this.getAttribute("value") || "";
+    this.innerHTML = `<div class="input-combo">
+                        <fig-input-text placeholder="${this.placeholder}">
+                        </fig-input-text> 
+                        <fig-button type="select" variant="input" icon>
+                            <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+  <path d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='currentColor' stroke-opacity="0.5" stroke-linecap='round'/>
+</svg>
+                            <fig-dropdown type="dropdown">
+                            ${this.options
+                              .map((option) => `<option>${option}</option>`)
+                              .join("")}
+                        </fig-dropdown>
+                        </fig-button>
+                    </div>`;
+    requestAnimationFrame(() => {
+      this.input = this.querySelector("fig-input-text");
+      this.dropdown = this.querySelector("fig-dropdown");
+
+      this.dropdown.addEventListener(
+        "input",
+        this.handleDropdownChange.bind(this)
+      );
+    });
+  }
+  handleDropdownChange(e) {
+    console.log(e.target.value);
+    this.value = e.target.value;
+    this.setAttribute("value", this.value);
+  }
+  handleInput(e) {
+    this.value = this.input.value;
+  }
+  static get observedAttributes() {
+    return ["options", "placeholder", "value"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "options") {
+      this.options = newValue.split(",");
+      if (this.dropdown) {
+        this.dropdown.innerHTML = this.options
+          .map((option) => `<option>${option}</option>`)
+          .join("");
+      }
+    }
+    if (name === "placeholder") {
+      this.placeholder = newValue;
+    }
+    if (name === "value") {
+      this.value = newValue;
+      this.input.setAttribute("value", newValue);
+    }
+  }
+}
+window.customElements.define("fig-combo-input", FigComboInput);

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.36"
+  "version": "1.0.38"
 }