@rogieking/figui3 1.0.86 → 1.0.88

package/README.md

@@ -1,89 +1,253 @@
-# Figma UI3 Web Components
+# Fig.js
 
-figUI3 is a collection of custom web components that provide various UI elements and functionality for web applications. These components are designed to be easily integrated into your projects, offering a set of reusable and customizable UI elements.
+A lightweight, customizable web component library that provides Figma-inspired UI elements for modern web applications.
 
-## Table of Contents
+## Features
 
-- [Components](#components)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Contributing](#contributing)
-- [License](#license)
+- 🎨 Figma-inspired design system
+- 📦 Zero dependencies
+- 🚀 Lightweight and performant
+- 🎯 Built with Web Components
+- 🔧 Highly customizable
+- 🌐 Framework agnostic
 
 ## Components
 
-The Fig Components library includes the following custom elements:
-
-1. `<fig-button>`: A customizable button component.
-2. `<fig-dropdown>`: A dropdown select component.
-3. `<fig-tooltip>`: A tooltip component that can be triggered by hover or click.
-4. `<fig-popover>`: A popover component similar to tooltip but with more flexibility.
-5. `<fig-dialog>`: A dialog/modal component.
-6. `<fig-tabs>`: A tabbed interface component.
-7. `<fig-segmented-control>`: A segmented control component for mutually exclusive options.
-8. `<fig-slider>`: A slider input component with optional text input.
-9. `<fig-input-text>`: A text input component with optional append and prepend slots.
-10. `<fig-field>`: A form field wrapper component.
-11. `<fig-input-color>`: A color input component with optional text and alpha inputs.
-12. `<fig-checkbox>`: A checkbox input component.
-13. `<fig-switch>`: A switch/toggle input component.
+The library includes the following components:
+
+- `<fig-button>` - Versatile button component with multiple variants
+- `<fig-slider>` - Input slider with optional text input and units
+- `<fig-field>` - Form field wrapper with flexible layout options
+- `<fig-dropdown>` - Customizable dropdown select
+- `<fig-tooltip>` - Hover and click-triggered tooltips
+- `<fig-dialog>` - Modal dialog component
+- `<fig-input-color>` - Color picker with hex/rgba support
+- And more...
 
 ## Installation
 
-To use Fig Components in your project, include the JavaScript file in your HTML:
+```bash
+npm install fig-js
+```
+
+Or include directly in your HTML:
 
 ```html
-<script src="path/to/fig-components.js"></script>
+<script src="https://unpkg.com/fig-js@latest/dist/fig.js"></script>
 ```
 
-Make sure to replace `path/to/fig-components.js` with the actual path to the JavaScript file containing the component definitions.
-
 ## Usage
 
-After including the Fig Components script in your HTML, you can use the custom elements in your markup. Here are some examples:
+```html
+<!-- Basic button -->
+<fig-button>Click me</fig-button>
+
+<!-- Slider with text input -->
+<fig-field direction="horizontal">
+  <label>Opacity</label>
+  <fig-slider type="opacity" value="0.75" color="#ff0000" units="%" text="true">
+  </fig-slider>
+</fig-field>
+```
+
+## Documentation
 
-### Button
+For detailed documentation and examples, visit our [documentation site](https://your-docs-site.com).
+
+## Browser Support
+
+Fig.js supports all modern browsers that implement the Web Components standard:
+
+- Chrome/Edge (Chromium) 67+
+- Firefox 63+
+- Safari 10.1+
+
+## Contributing
+
+Contributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) before submitting a pull request.
+
+## License
+
+[MIT License](LICENSE)
+
+## Component Examples
+
+### Button (`<fig-button>`)
 
 ```html
+<!-- Basic button -->
 <fig-button>Click me</fig-button>
+
+<!-- Ghost variant with icon -->
+<fig-button variant="ghost" icon="true">
+  <svg><!-- your icon svg --></svg>
+</fig-button>
+
+<!-- Disabled state -->
+<fig-button disabled>Disabled</fig-button>
+
+<!-- Toggle button -->
+<fig-button type="toggle">Toggle Me</fig-button>
 ```
 
-### Dropdown
+### Dropdown (`<fig-dropdown>`)
 
 ```html
+<!-- Basic dropdown -->
 <fig-dropdown>
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
 </fig-dropdown>
+
+<!-- With default selection -->
+<fig-dropdown value="2">
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+  <option value="3">Option 3</option>
+</fig-dropdown>
 ```
 
-### Tooltip
+### Tooltip (`<fig-tooltip>`)
 
 ```html
+<!-- Hover tooltip -->
 <fig-tooltip text="This is a tooltip" action="hover">
   Hover over me
 </fig-tooltip>
+
+<!-- Click tooltip -->
+<fig-tooltip text="Click tooltip" action="click"> Click me </fig-tooltip>
 ```
 
-### Slider
+### Popover (`<fig-popover>`)
 
 ```html
-<fig-slider min="0" max="100" value="50" text></fig-slider>
+<!-- Basic popover -->
+<fig-popover>
+  <button slot="trigger">Open Popover</button>
+  <div slot="content">
+    <h3>Popover Title</h3>
+    <p>This is the popover content.</p>
+  </div>
+</fig-popover>
 ```
 
-### Color Input
+### Dialog (`<fig-dialog>`)
 
 ```html
-<fig-input-color value="#ff0000" text alpha></fig-input-color>
+<!-- Basic dialog -->
+<fig-dialog>
+  <h2 slot="header">Dialog Title</h2>
+  <div slot="content">
+    <p>Dialog content goes here.</p>
+  </div>
+  <div slot="footer">
+    <fig-button>Cancel</fig-button>
+    <fig-button variant="primary">Confirm</fig-button>
+  </div>
+</fig-dialog>
 ```
 
-For more detailed usage instructions and examples for each component, please refer to the individual component documentation.
+### Tabs (`<fig-tabs>`)
 
-## Contributing
+```html
+<fig-tabs>
+  <fig-tab label="Tab 1">Content 1</fig-tab>
+  <fig-tab label="Tab 2">Content 2</fig-tab>
+  <fig-tab label="Tab 3">Content 3</fig-tab>
+</fig-tabs>
+```
 
-Contributions to Fig Components are welcome! Please feel free to submit a Pull Request.
+### Segmented Control (`<fig-segmented-control>`)
 
-## License
+```html
+<fig-segmented-control>
+  <button value="1">Option 1</button>
+  <button value="2">Option 2</button>
+  <button value="3">Option 3</button>
+</fig-segmented-control>
+```
 
-[MIT License](LICENSE)
+### Slider (`<fig-slider>`)
+
+```html
+<!-- Basic slider -->
+<fig-slider min="0" max="100" value="50"></fig-slider>
+
+<!-- Slider with text input and units -->
+<fig-slider min="0" max="100" value="75" text="true" units="%"> </fig-slider>
+
+<!-- Opacity slider with color -->
+<fig-slider type="opacity" value="0.75" color="#ff0000" units="%" text="true">
+</fig-slider>
+```
+
+### Text Input (`<fig-input-text>`)
+
+```html
+<!-- Basic text input -->
+<fig-input-text value="Hello World"></fig-input-text>
+
+<!-- With placeholder -->
+<fig-input-text placeholder="Enter text..."></fig-input-text>
+
+<!-- With prepend and append slots -->
+<fig-input-text>
+  <span slot="prepend">$</span>
+  <span slot="append">.00</span>
+</fig-input-text>
+```
+
+### Field (`<fig-field>`)
+
+```html
+<!-- Vertical layout -->
+<fig-field>
+  <label>Username</label>
+  <fig-input-text></fig-input-text>
+  <span class="help">Enter your username</span>
+</fig-field>
+
+<!-- Horizontal layout -->
+<fig-field direction="horizontal">
+  <label>Volume</label>
+  <fig-slider min="0" max="100" value="50"></fig-slider>
+</fig-field>
+```
+
+### Color Input (`<fig-input-color>`)
+
+```html
+<!-- Basic color picker -->
+<fig-input-color value="#ff0000"></fig-input-color>
+
+<!-- With text input and alpha channel -->
+<fig-input-color value="#ff0000" text="true" alpha="true"> </fig-input-color>
+```
+
+### Checkbox (`<fig-checkbox>`)
+
+```html
+<!-- Basic checkbox -->
+<fig-checkbox>Accept terms</fig-checkbox>
+
+<!-- Checked state -->
+<fig-checkbox checked>Selected option</fig-checkbox>
+
+<!-- Indeterminate state -->
+<fig-checkbox indeterminate>Parent option</fig-checkbox>
+```
+
+### Switch (`<fig-switch>`)
+
+```html
+<!-- Basic switch -->
+<fig-switch></fig-switch>
+
+<!-- With label -->
+<fig-switch>Enable notifications</fig-switch>
+
+<!-- Checked state -->
+<fig-switch checked>Active</fig-switch>
+```

package/fig.js

@@ -100,6 +100,14 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
       this.attachShadow({ mode: "open" });
     }
 
+    #addEventListeners() {
+      this.select.addEventListener("input", this.#handleSelectInput.bind(this));
+      this.select.addEventListener(
+        "change",
+        this.#handleSelectChange.bind(this)
+      );
+    }
+
     connectedCallback() {
       this.type = this.getAttribute("type") || "select";
 
@@ -111,17 +119,14 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
         this.slotChange.bind(this)
       );
 
-      this.select.addEventListener("input", this.#handleSelectInput.bind(this));
-      this.select.addEventListener(
-        "change",
-        this.#handleSelectChange.bind(this)
-      );
+      this.#addEventListeners();
     }
 
     slotChange() {
       while (this.select.firstChild) {
         this.select.firstChild.remove();
       }
+
       if (this.type === "dropdown") {
         const hiddenOption = document.createElement("option");
         hiddenOption.setAttribute("hidden", "true");
@@ -133,6 +138,7 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
           this.select.appendChild(option.cloneNode(true));
         }
       });
+      this.#syncSelectedValue(this.value);
       if (this.type === "dropdown") {
         this.select.selectedIndex = -1;
       }
@@ -159,16 +165,23 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
     }
     set value(value) {
       this.setAttribute("value", value);
-      this.select.value = value;
-      this.select.setAttribute("value", value);
     }
     static get observedAttributes() {
       return ["value", "type"];
     }
+    #syncSelectedValue(value) {
+      if (this.select) {
+        this.select.querySelectorAll("option").forEach((o, i) => {
+          if (o.value === this.getAttribute("value")) {
+            this.select.selectedIndex = i;
+          }
+        });
+      }
+    }
     attributeChangedCallback(name, oldValue, newValue) {
       if (name === "value") {
-        this.select.value = newValue;
-        this.select.setAttribute("value", newValue);
+        this.#syncSelectedValue(newValue);
+        console.log("val:", this.value);
       }
       if (name === "type") {
         this.type = newValue;

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.86"
+  "version": "1.0.88"
 }