@kubex/zinc 1.0.7 → 1.0.8

package/docs/data/products-table.json

@@ -28,6 +28,209 @@
           "text": "99"
         }
       ]
+    },
+    {
+      "id": "2",
+      "cells": [
+        {
+          "column": "name",
+          "text": "Furminator deShedding Tool for Small Dogs"
+        },
+        {
+          "column": "category",
+          "text": "pets"
+        },
+        {
+          "column": "price",
+          "text": "£28.99"
+        },
+        {
+          "column": "discountPercentage",
+          "text": "6.19"
+        },
+        {
+          "column": "rating",
+          "text": "9.32"
+        },
+        {
+          "column": "stock",
+          "text": "61"
+        }
+      ]
+    },
+    {
+      "id": "3",
+      "cells": [
+        {
+          "column": "name",
+          "text": "HP Pavilion 15-DK1056WM"
+        },
+        {
+          "column": "category",
+          "text": "laptops"
+        },
+        {
+          "column": "price",
+          "text": "£749.99"
+        },
+        {
+          "column": "discountPercentage",
+          "text": "10.23"
+        },
+        {
+          "column": "rating",
+          "text": "9.43"
+        },
+        {
+          "column": "stock",
+          "text": "89"
+        }
+      ]
+    },
+    {
+      "id": "4",
+      "cells": [
+        {
+          "column": "name",
+          "text": "Samsung Galaxy Book S"
+        },
+        {
+          "column": "category",
+          "text": "laptops"
+        },
+        {
+          "column": "price",
+          "text": "£819.99"
+        },
+        {
+          "column": "discountPercentage",
+          "text": "4.15"
+        },
+        {
+          "column": "rating",
+          "text": "9.57"
+        },
+        {
+          "column": "stock",
+          "text": "115"
+        }
+      ]
+    },
+    {
+      "id": "5",
+      "cells": [
+        {
+          "column": "name",
+          "text": "Infinix INBOOK"
+        },
+        {
+          "column": "category",
+          "text": "laptops"
+        },
+        {
+          "column": "price",
+          "text": "£409.99"
+        },
+        {
+          "column": "discountPercentage",
+          "text": "11.54"
+        },
+        {
+          "column": "rating",
+          "text": "8.91"
+        },
+        {
+          "column": "stock",
+          "text": "96"
+        }
+      ]
+    },
+    {
+      "id": "6",
+      "cells": [
+        {
+          "column": "name",
+          "text": "HP Pavilion 15-DK1056WM"
+        },
+        {
+          "column": "category",
+          "text": "laptops"
+        },
+        {
+          "column": "price",
+          "text": "£749.99"
+        },
+        {
+          "column": "discountPercentage",
+          "text": "10.23"
+        },
+        {
+          "column": "rating",
+          "text": "9.43"
+        },
+        {
+          "column": "stock",
+          "text": "89"
+        }
+      ]
+    },
+    {
+      "id": "7",
+      "cells": [
+        {
+          "column": "name",
+          "text": "Samsung Galaxy Book S"
+        },
+        {
+          "column": "category",
+          "text": "laptops"
+        },
+        {
+          "column": "price",
+          "text": "£819.99"
+        },
+        {
+          "column": "discountPercentage",
+          "text": "4.15"
+        },
+        {
+          "column": "rating",
+          "text": "9.57"
+        },
+        {
+          "column": "stock",
+          "text": "115"
+        }
+      ]
+    },
+    {
+      "id": "8",
+      "cells": [
+        {
+          "column": "name",
+          "text": "Infinix INBOOK"
+        },
+        {
+          "column": "category",
+          "text": "pets"
+        },
+        {
+          "column": "price",
+          "text": "£409.99"
+        },
+        {
+          "column": "discountPercentage",
+          "text": "11.54"
+        },
+        {
+          "column": "rating",
+          "text": "8.91"
+        },
+        {
+          "column": "stock",
+          "text": "96"
+        }
+      ]
     }
   ],
   "perPage": 10,

package/docs/pages/components/button.md

@@ -11,6 +11,31 @@ layout: component
 
 ## Examples
 
+### Auto Click
+
+The `auto-click` attribute can be added to a button to make it automatically click after a given time
+
+```html:preview
+<zn-button auto-click>
+  Test Auto Button
+</zn-button auto-click>
+
+<br>
+<br>
+
+<zn-button color="transparent" auto-click auto-click-delay="5000">
+  Test Auto Button
+
+  <zn-button
+    slot="cancel"
+    icon="close"
+    icon-size="18"
+    type="button"
+    color="transparent"
+  ></zn-button>
+</zn-button auto-click>
+```
+
 ### Variants
 
 Use the `color` attribute to set the button's color.

package/docs/pages/components/data-table.md

@@ -30,6 +30,27 @@ fullWidth: true
 
 ## Examples
 
+### Grouping Split Tables
+
+Splits table into groups based on a specified column. (Will request all data upfront)
+
+```html:preview
+
+<zn-data-table data-uri="/data/products-table.json" method="GET" group="category"
+               headers="[{&quot;key&quot;:&quot;name&quot;,&quot;label&quot;:&quot;Name&quot;},
+  {&quot;key&quot;:&quot;category&quot;,&quot;label&quot;:&quot;Category&quot;},
+  {&quot;key&quot;:&quot;price&quot;,&quot;label&quot;:&quot;Price&quot;},
+  {&quot;key&quot;:&quot;discountPercentage&quot;,&quot;label&quot;:&quot;Discount %&quot;},
+  {&quot;key&quot;:&quot;stock&quot;,&quot;label&quot;:&quot;Stock&quot;},
+  {&quot;key&quot;:&quot;rating&quot;,&quot;label&quot;:&quot;Rating&quot;}]">
+
+  <zn-empty-state slot="empty-state" icon="inventory_2" caption="No products found">
+    <p>Use the filters to search for products</p>
+  </zn-empty-state>
+
+</zn-data-table>
+```
+
 ### Filter-top Slot
 
 Add complex filtering options to the top of the table using the `filter-top` slot.

package/docs/pages/components/header.md

@@ -37,6 +37,13 @@ layout: component
   <zn-header caption="John Jones" description="This is the description of the header"></zn-header>
 </div>
 ```
+### Simple Header with Icon
+
+```html:preview
+<div style="background-color: #f5f5f5; padding: 20px;">
+  <zn-header icon="person" caption="John Jones" description="This is the description of the header"></zn-header>
+</div>
+```
 
 
 ### Simple Header with actions

package/docs/pages/components/order-table.md

@@ -1,21 +1,98 @@
 ---
 meta:
-  title: Order Table
-  description:
+title: OrderTable
+description:
 layout: component
+fullWidth: true
 ---
 
 ```html:preview
-<zn-order-table></zn-order-table>
+<zn-order-table data="{
+  &quot;headers&quot;: [&quot;Product&quot;, &quot;SKU&quot;, &quot;Quantity&quot;, &quot;Unit Price&quot;, &quot;Subtotal&quot;, &quot;Total&quot;],
+  &quot;items&quot;: [
+    {
+      &quot;caption&quot;: &quot;Electronics&quot;,
+      &quot;summary&quot;: &quot;Devices and accessories&quot;,
+      &quot;data&quot;: [],
+      &quot;sub&quot;: [
+        {
+          &quot;caption&quot;: &quot;Wireless Headphones&quot;,
+          &quot;summary&quot;: &quot;Noise-cancelling over-ear model&quot;,
+          &quot;data&quot;: [&quot;ELC-1021&quot;, &quot;Wireless Headphones&quot;, &quot;1&quot;, &quot;£120.00&quot;, &quot;£120.00&quot;]
+        },
+        {
+          &quot;caption&quot;: &quot;USB-C Charger&quot;,
+          &quot;summary&quot;: &quot;Fast-charging 65W adapter&quot;,
+          &quot;data&quot;: [&quot;ELC-3054&quot;, &quot;USB-C Charger&quot;, &quot;2&quot;, &quot;£25.00&quot;, &quot;£50.00&quot;]
+        },
+        {
+          &quot;caption&quot;: &quot;Bluetooth Speaker&quot;,
+          &quot;summary&quot;: &quot;Portable waterproof mini speaker&quot;,
+          &quot;data&quot;: [&quot;ELC-4092&quot;, &quot;Bluetooth Speaker&quot;, &quot;1&quot;, &quot;£55.00&quot;, &quot;£55.00&quot;]
+        }
+      ]
+    },
+    {
+      &quot;caption&quot;: &quot;Home &amp; Kitchen&quot;,
+      &quot;summary&quot;: &quot;Appliances and essentials&quot;,
+      &quot;data&quot;: [],
+      &quot;sub&quot;: [
+        {
+          &quot;caption&quot;: &quot;Electric Kettle&quot;,
+          &quot;summary&quot;: &quot;1.7L stainless steel kettle&quot;,
+          &quot;data&quot;: [&quot;HMK-2210&quot;, &quot;Electric Kettle&quot;, &quot;1&quot;, &quot;£35.00&quot;, &quot;£35.00&quot;]
+        },
+        {
+          &quot;caption&quot;: &quot;Coffee Grinder&quot;,
+          &quot;summary&quot;: &quot;Adjustable ceramic burr grinder&quot;,
+          &quot;data&quot;: [&quot;HMK-2278&quot;, &quot;Coffee Grinder&quot;, &quot;1&quot;, &quot;£40.00&quot;, &quot;£40.00&quot;]
+        },
+        {
+          &quot;caption&quot;: &quot;Kitchen Scale&quot;,
+          &quot;summary&quot;: &quot;Digital scale, 5kg capacity&quot;,
+          &quot;data&quot;: [&quot;HMK-2321&quot;, &quot;Kitchen Scale&quot;, &quot;1&quot;, &quot;£22.00&quot;, &quot;£22.00&quot;]
+        }
+      ]
+    },
+    {
+      &quot;caption&quot;: &quot;Office Supplies&quot;,
+      &quot;summary&quot;: &quot;Daily work essentials&quot;,
+      &quot;data&quot;: [],
+      &quot;sub&quot;: [
+        {
+          &quot;caption&quot;: &quot;A4 Notebook&quot;,
+          &quot;summary&quot;: &quot;200 pages, ruled&quot;,
+          &quot;data&quot;: [&quot;OFC-1003&quot;, &quot;A4 Notebook&quot;, &quot;3&quot;, &quot;£4.00&quot;, &quot;£12.00&quot;]
+        },
+        {
+          &quot;caption&quot;: &quot;Ballpoint Pen Set&quot;,
+          &quot;summary&quot;: &quot;Pack of 10 blue pens&quot;,
+          &quot;data&quot;: [&quot;OFC-1045&quot;, &quot;Ballpoint Pen Set&quot;, &quot;1&quot;, &quot;£6.00&quot;, &quot;£6.00&quot;]
+        },
+        {
+          &quot;caption&quot;: &quot;Desk Organizer&quot;,
+          &quot;summary&quot;: &quot;Metal mesh, 5 compartments&quot;,
+          &quot;data&quot;: [&quot;OFC-1089&quot;, &quot;Desk Organizer&quot;, &quot;1&quot;, &quot;£18.00&quot;, &quot;£18.00&quot;]
+        }
+      ]
+    }
+  ],
+  &quot;tax&quot;: &quot;£34.80&quot;,
+  &quot;discount&quot;: &quot;£15.00&quot;,
+  &quot;total&quot;: &quot;£368.80&quot;,
+  &quot;paid&quot;: &quot;£250.00&quot;,
+  &quot;remaining&quot;: &quot;£118.80&quot;
+}
+"></zn-order-table>
 ```
 
 ## Examples
 
-### First Example
+### FirstExample
 
 TODO
 
-### Second Example
+### SecondExample
 
 TODO
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/button/button.component.ts

@@ -4,7 +4,7 @@ import {FormControlController, validValidityState} from "../../internal/form";
 import {HasSlotController} from '../../internal/slot';
 import {html, literal} from 'lit/static-html.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
-import {property, query} from 'lit/decorators.js';
+import {property, query, queryAll} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnDropdown from "../dropdown";
 import ZnIcon from "../icon";
@@ -30,6 +30,7 @@ import styles from './button.scss';
  * @slot - The button's label.
  * @slot prefix - A presentational prefix icon or similar element.
  * @slot suffix - A presentational suffix icon or similar element.
+ * @slot cancel - Slot for custom cancel button/content when autoClick is active.
  *
  * @csspart base - The component's base wrapper.
  * @csspart prefix - The container that wraps the prefix.
@@ -47,8 +48,14 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
 
   private readonly formControlController = new FormControlController(this);
   private readonly hasSlotController = new HasSlotController(this, '[default]');
+  private _autoClickTimeout: number | undefined;
+  private _loadingState = {
+    countdown: null as number | null,
+    interval: undefined as number | undefined,
+  };
 
   @query('.button') button: HTMLButtonElement;
+  @queryAll('.loading-countdown') countdownContainer: HTMLElement[];
 
   @property({}) color: 'default' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |
     'transparent' | 'star' = 'default';
@@ -59,7 +66,6 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   @property({type: Boolean}) grow = false;
   @property({type: Boolean}) square = false;
 
-
   @property({attribute: 'dropdown-closer', type: Boolean}) dropdownCloser = false;
 
   @property({type: Number}) notification: number;
@@ -94,6 +100,16 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   // Tooltip Specific
   @property() tooltip: string;
 
+  // Auto Click Specific
+  @property({type: Boolean, attribute: 'auto-click'}) autoClick = false;
+  @property({type: Number, attribute: 'auto-click-delay'}) autoClickDelay = 2000;
+  @property({type: String, attribute: 'loading-text'}) loadingText = 'Loading...';
+  @property({
+    type: String,
+    attribute: 'loading-text-position'
+  }) loadingTextPosition: 'left' | 'right' | 'center' | string = 'center';
+  @property({type: Boolean}) loading = false;
+
   get validity() {
     if (this._isButton() && this.button) {
       return (this.button as HTMLButtonElement).validity;
@@ -102,7 +118,6 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
     return validValidityState;
   }
 
-
   get validationMessage() {
     if (this._isButton() && this.button) {
       return (this.button as HTMLButtonElement).validationMessage;
@@ -117,6 +132,47 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.teardownAutoClick();
+  }
+
+  protected updated(changedProps: Map<string, any>) {
+    super.updated(changedProps);
+    if (changedProps.has('autoClick')) {
+      if (this.autoClick) {
+        this.setupAutoClick();
+      }
+    }
+    if (this.button) {
+      const oldOverlay = this.button.querySelector('.button--loading-fill');
+      if (oldOverlay) {
+        oldOverlay.remove();
+      }
+
+      if (this.loading) {
+        // Add loading overlay
+        const duration = `${this.autoClickDelay / 1000}s`;
+        const overlay = document.createElement('div');
+        overlay.classList.add('button--loading-fill');
+        overlay.setAttribute('style', `--loading-duration: ${duration}`);
+
+        if (this.button.classList.contains('button--transparent')) {
+          overlay.classList.add('button--loading-fill-transparent');
+          this.button.classList.add('button--loading-bg-transparent');
+        }
+
+        this.button.prepend(overlay);
+        this.button.classList.add('button--loading-bg');
+      } else {
+        this.button.classList.remove('button--loading-bg');
+        this.button.classList.remove('button--loading-bg-transparent');
+      }
+
+      this.updateCountdownText();
+    }
+  }
+
   checkValidity() {
     if (this._isButton() && this.button) {
       return (this.button as HTMLButtonElement).checkValidity();
@@ -180,16 +236,82 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
     return !this._isLink();
   }
 
-  protected render(): unknown {
-    const isLink = this._isLink();
+  setupAutoClick() {
+    if (!this.button) return;
+
+    if (this._autoClickTimeout) {
+      window.clearTimeout(this._autoClickTimeout);
+      this._autoClickTimeout = undefined;
+    }
+
+    if (this._loadingState.interval) {
+      window.clearInterval(this._loadingState.interval);
+      this._loadingState.interval = undefined;
+    }
+
+    this.loading = true;
+    this._loadingState.countdown = Math.ceil(this.autoClickDelay / 1000);
+    this.updateCountdownText();
+
+    this._loadingState.interval = window.setInterval(() => {
+      if (this._loadingState.countdown && this._loadingState.countdown > 0) {
+        this._loadingState.countdown--;
+        this.updateCountdownText();
+      }
+    }, 1000);
+
+    this._autoClickTimeout = window.setTimeout(() => {
+      this.loading = false;
+      this._loadingState.countdown = null;
+      this.updateCountdownText();
+
+      if (this._loadingState.interval) {
+        window.clearInterval(this._loadingState.interval);
+        this._loadingState.interval = undefined;
+      }
+
+      this.button?.click();
+    }, this.autoClickDelay);
+  }
 
-    const icon = this.icon ? html`
-      <zn-icon part="icon" src="${this.icon}" id="xy2" size="${this.iconSize ? this.iconSize : 16}"
-               color="${this.iconColor ? this.iconColor : null}"></zn-icon>` : '';
+  updateCountdownText() {
+    const text = this._loadingState.countdown && this._loadingState.countdown > 0 ? ` (${this._loadingState.countdown}s)` : '';
+    if (this.countdownContainer) {
+      for (const container of this.countdownContainer) {
+        container.textContent = text;
+      }
+    }
+  }
 
+  teardownAutoClick() {
+    if (this._autoClickTimeout) {
+      window.clearTimeout(this._autoClickTimeout);
+      this._autoClickTimeout = undefined;
+    }
+
+    if (this._loadingState.interval) {
+      window.clearInterval(this._loadingState.interval);
+      this._loadingState.interval = undefined;
+    }
+
+    this.loading = false;
+    this._loadingState.countdown = null;
+
+    if (this.button) {
+      this.button.style.width = '';
+    }
+  }
+
+  protected render(): unknown {
+    const isLink = this._isLink();
+    const showCancel = this.loading && this.autoClick;
+    const icon = this.icon && !this.loading ? html`
+        <zn-icon part="icon" src="${this.icon}" id="xy2" size="${this.iconSize ? this.iconSize : 16}"
+                 color="${this.iconColor ? this.iconColor : null}"></zn-icon>`
+      : '';
     const tag = isLink ? literal`a` : literal`button`;
 
-    let content = html`
+    const buttonContent = html`
       <${tag}
         part="base"
         class="${classMap({
@@ -230,10 +352,46 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
         data-notification="${ifDefined(this.notification)}"
         @click="${this.handleClick}">
         ${this.iconPosition === 'left' ? icon : ''}
-        <slot part="label" class="button__label">${this.content}</slot>
+        <slot part="label"
+              class="${classMap({
+                'button__label': true,
+                'button__label--hidden': this.loading
+              })}"
+              style="--loading-duration: ${this.autoClickDelay / 1000}s">
+          ${this.content}
+        </slot>
         ${this.iconPosition === 'right' ? icon : ''}
+        ${this.loading ? html`
+          <div class="button--loading-container">
+            <span
+              class=${classMap({
+                'button--loading-text-bottom': true,
+                'button--loading-text-bottom-transparent': this.color === 'transparent',
+                [`button--loading-text-bottom-${this.loadingTextPosition}`]: !!this.loadingTextPosition,
+              })}>
+              ${this.loadingText}<span class="loading-countdown"></span>
+            </span>
+            <span
+              class=${classMap({
+                'button--loading-text-top': true,
+                'button--loading-text-top-transparent': this.color === 'transparent',
+                [`button--loading-text-top-${this.loadingTextPosition}`]: !!this.loadingTextPosition,
+              })}>
+              ${this.loadingText}<span class="loading-countdown"></span>
+            </span>
+          </div>
+        ` : null}
       </${tag}>`;
 
+    let content = this.autoClick ? html`
+      <div class="button--relative-wrapper">
+        ${buttonContent}
+        ${showCancel ? html`
+          <slot name="cancel" @click="${this.teardownAutoClick}"></slot>
+        ` : null}
+      </div>
+    ` : buttonContent;
+
     if (this.tooltip !== undefined) {
       content = html`
         <zn-tooltip placement="top" content="${this.tooltip}">