@kubex/zinc 0.0.3 → 1.0.0

package/src/components/order-table/order-table.component.ts

@@ -0,0 +1,323 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './order-table.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/order-table
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnOrderTable extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: Object, reflect: true}) data: Object;
+
+  private isMobile: boolean = false;
+  private modifiedData: any = null;
+
+  constructor() {
+    super();
+    this.modifiedData = this.data;
+  }
+
+
+  connectedCallback() {
+    this.isMobile = window.innerWidth < 768;
+
+    window.addEventListener('resize', () => {
+      if (window.innerWidth < 768 && !this.isMobile) {
+        this.isMobile = true;
+        this.requestUpdate();
+      } else if (window.innerWidth >= 768 && this.isMobile) {
+        this.isMobile = false;
+        this.requestUpdate();
+      }
+    });
+
+    if (this.data === null || this.data === undefined) {
+      if (this.childNodes.length > 0 && this.childNodes[0].nodeType === 3) {
+        const data: any = this.childNodes[0];
+        try {
+          this.data = JSON.parse(data.textContent);
+        } catch (e) { /* empty */
+        }
+      }
+    }
+
+    super.connectedCallback();
+  }
+
+  render() {
+    this.modifiedData = this.data;
+    if (this.isMobile) {
+      return html`
+        <div class="mobile-table">
+          ${this.getMobileRows()}
+        </div>
+        ${this.getSummary()}
+      `;
+    }
+
+    return html`
+      <div class="table">
+        ${this.getHeaders()}
+        ${this.getRows()}
+      </div>
+      ${this.getSummary()}
+    `;
+  }
+
+  getHeaders() {
+    const data = this.modifiedData;
+    const headers = [];
+
+    if (data && data['headers']) {
+      for (const header of data['headers']) {
+        headers.push(header);
+      }
+    }
+
+    return html`
+      <div class="header">
+        ${headers.map(header => html`
+          <div class="header-item">
+            ${header}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  getRows() {
+    const data = this.modifiedData;
+    const rows = [];
+
+
+    if (data && data['items']) {
+      for (const item of data['items']) {
+        const caption = this.getCaption(item);
+        const rowData = item['data'];
+
+        rows.push(html`
+          <div class="row">
+            ${caption}
+            ${rowData.map((row: any) => html`
+              <div class="row-item">
+                <div class="content">
+                  ${row}
+                </div>
+              </div>
+            `)}
+          </div>
+          ${this.getSubItems(item)}
+        `);
+      }
+    }
+
+    return html`
+      <div class="rows">
+        ${rows}
+      </div>
+    `;
+  }
+
+  getCaption(item: any) {
+    const caption = item['caption'];
+    const summary = item['summary'];
+
+    return html`
+      <div class="row-item row-caption">
+        <div class="content">
+          ${caption ? html`
+            <div>${caption}</div>` : ''}
+          ${summary ? html`
+            <div>${summary}</div>` : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  getSubItems(item: any) {
+    const subItems = item['sub'];
+
+    const rows: any = [];
+    if (subItems) {
+      subItems.forEach((subitem: any) => {
+        const caption = this.getCaption(subitem);
+        const rowData = subitem['data'];
+
+        rows.push(html`
+          <div class="sub-row">
+            ${caption}
+            ${rowData.map((row: any) => html`
+              <div class="row-item">
+                <div class="content">
+                  ${row}
+                </div>
+              </div>
+            `)}
+          </div>
+        `);
+      });
+    }
+
+    return html`
+      <div class="sub">
+        ${rows}
+      </div>
+    `;
+  }
+
+  getSummary() {
+    let tax = html``;
+    if (this.modifiedData && this.modifiedData['tax']) {
+      tax = html`
+        <div class="summary-item">
+          <div class="summary-item-title">Tax</div>
+          <div class="summary-item-value">${this.modifiedData['tax']}</div>
+        </div>`;
+    }
+
+    let discount = html``;
+    if (this.modifiedData && this.modifiedData['discount']) {
+      discount = html`
+        <div class="summary-item">
+          <div class="summary-item-title">Discount</div>
+          <div class="summary-item-value">${this.modifiedData['discount']}</div>
+        </div>`;
+    }
+
+    let total = html``;
+    if (this.modifiedData && this.modifiedData['total']) {
+      total = html`
+        <div class="summary-item">
+          <div class="summary-item-title">Grand Total</div>
+          <div class="summary-item-value">${this.modifiedData['total']}</div>
+        </div>`;
+    }
+
+
+    let paid = html``;
+    if (this.modifiedData && this.modifiedData['paid']) {
+      paid = html`
+        <div class="summary-item">
+          <div class="summary-item-title">Amount Paid</div>
+          <div class="summary-item-value">${this.modifiedData['paid']}</div>
+        </div>`;
+    }
+
+
+    let remaining = html``;
+    if (this.modifiedData && this.modifiedData['remaining']) {
+      remaining = html`
+        <div class="summary-item">
+          <div class="summary-item-title">Amount Outstanding</div>
+          <div class="summary-item-value">${this.modifiedData['remaining']}</div>
+        </div>`;
+    }
+
+    return html`
+      <div class="summary">
+        ${tax}
+        <div class="summary-divide"></div>
+        ${discount}
+        ${total}
+        ${paid}
+        ${remaining}
+      </div>
+    `;
+  }
+
+  private getMobileRows() {
+    const data = this.modifiedData;
+    const rows = [];
+
+    if (data && data['items']) {
+      for (const item of data['items']) {
+        const caption = this.getMobileCaption(item, null);
+        const rowData = item['data'];
+
+        rows.push(html`
+          <div class="row">
+            ${caption}
+            <div class="row-item">
+              ${rowData.map((row: any) => {
+                if (row === '-') return;
+                return html`
+                  <span>${row}</span>
+                `;
+              })}
+            </div>
+          </div>
+          ${this.getMobileSubItems(item)}
+        `);
+      }
+    }
+
+    return html`
+      <div class="rows">
+        ${rows}
+      </div>
+    `;
+  }
+
+  getMobileSubItems(item: any) {
+    const subitems = item['sub'];
+    const rows: any[] = [];
+    if (subitems) {
+      subitems.forEach((subitem: any) => {
+        const caption = this.getMobileCaption(subitem, subitem['data'][0]);
+        const rowData = subitem['data'];
+
+        rows.push(html`
+          <div class="sub-row">
+            ${caption}
+            <div class="row-item">
+              ${rowData.map((row: any, index: any) => index === 0 ? '' : html`
+                <span>${row}</span>`
+              )}
+            </div>
+          </div>
+        `);
+      });
+    }
+
+    return html`
+      <div class="sub">
+        ${rows}
+      </div>
+    `;
+  }
+
+  getMobileCaption(item: any, extra: any) {
+    const caption = item['caption'];
+    const summary = item['summary'];
+
+    return html`
+      <div class="row-item row-caption">
+        <div class="content">
+          ${caption ? html`
+            <div>${caption}</div>` : ''}
+          ${summary ? html`
+            <div>${summary}</div>` : ''}
+          ${extra ? html`
+            <div>${extra}</div>` : ''}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/order-table/order-table.scss

@@ -0,0 +1,154 @@
+@use "../../wc";
+
+
+.table {
+  display: table;
+  width: 100%;
+}
+
+
+.header {
+  display: table-header-group;
+}
+
+.header-item, .row-item {
+  padding: 10px 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+  gap: var(--zn-spacing-small);
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--zn-spacing-small);
+  }
+
+  &:last-child {
+    flex-direction: column-reverse;
+  }
+
+  @include wc.container-query(md) {
+    display: table-cell;
+    border-bottom: 1px solid rgb(var(--zn-border-color));
+
+    &:first-child {
+      width: 50%;
+    }
+
+    &:last-child {
+      text-align: right;
+    }
+  }
+}
+
+.sub-row:last-of-type {
+  border-bottom: 2px solid rgb(var(--zn-border-color));
+
+  @include wc.container-query(md) {
+    border-bottom: none;
+
+    .row-item {
+      border-bottom: 2px solid rgb(var(--zn-border-color));
+    }
+  }
+}
+
+.row {
+  background-color: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity, 1));
+  margin-top: 20px;
+}
+
+.header-item {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgb(var(--zn-text-heading));
+}
+
+.row-caption .content {
+  div:first-of-type {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgb(var(--zn-text-heading));
+  }
+}
+
+.rows {
+  width: 100%;
+
+  @include wc.container-query(md) {
+    display: table-row-group;
+  }
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+  width: 100%;
+
+  @include wc.container-query(md) {
+    display: table-row;
+    border-bottom: none;
+  }
+}
+
+.sub {
+  width: 100%;
+
+  @include wc.container-query(md) {
+    display: contents;
+  }
+}
+
+.sub-row {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+  width: 100%;
+
+  @include wc.container-query(md) {
+    display: table-row;
+    border-bottom: none;
+  }
+}
+
+.summary {
+  width: 100%;
+  padding-top: 10px;
+  margin-left: auto;
+
+  @include wc.container-query(md) {
+    width: 50%;
+  }
+}
+
+.summary-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: 600;
+  color: rgb(var(--zn-text-heading));
+
+  &:first-of-type {
+    .summary-item-value {
+      font-weight: 400;
+    }
+  }
+}
+
+.summary-divide {
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+}
+
+.summary-item-title, .summary-item-value {
+  padding: 10px 20px;
+
+  @include wc.container-query(md) {
+    padding: 10px;
+  }
+}

package/src/components/order-table/order-table.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-order-table>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-order-table></zn-order-table> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/page-nav/index.ts

@@ -0,0 +1,12 @@
+import ZnPageNav from './page-nav.component';
+
+export * from './page-nav.component';
+export default ZnPageNav;
+
+ZnPageNav.define('zn-page-nav');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-page-nav': ZnPageNav;
+  }
+}

package/src/components/page-nav/page-nav.component.ts

@@ -0,0 +1,117 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import ZnTabs from "../tabs";
+
+import styles from './page-nav.scss';
+
+interface PageNavData {
+  data: PageNavigation[];
+}
+
+interface PageNavigation {
+  title: string;
+  items: PageNavigationItem[];
+}
+
+interface PageNavigationItem {
+  icon: string;
+  label: string;
+  uri: string;
+}
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/page-nav
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnPageNav extends ZnTabs {
+  static styles: CSSResultGroup = [ZnTabs.styles, unsafeCSS(styles)];
+
+  @property({type: Object}) navigation: PageNavData;
+
+  @state() breadcrumb: string
+
+  toggleNavigation() {
+    const navigationElement = this.shadowRoot?.querySelector('.navigation');
+    if (navigationElement) {
+      // Toggle the 'active' class to show/hide the navigation
+      navigationElement.classList.toggle('active');
+    }
+    // toggle menu overlay
+    const menuOverlay = this.shadowRoot?.querySelector('.menu-overlay');
+    if (menuOverlay) {
+      menuOverlay.classList.toggle('active');
+    }
+  }
+
+  setActiveTab(tabName: string, store: boolean, refresh: boolean, refTab: string | null = null) {
+    super.setActiveTab(tabName, store, refresh, refTab);
+
+    const firstTab = this.shadowRoot?.querySelector('.navigation-item.active');
+    if (firstTab) {
+      this.breadcrumb = firstTab.textContent?.trim() || '';
+    } else {
+      this.breadcrumb = '';
+    }
+  }
+
+  clickTab(target: HTMLElement, refresh: boolean, close = true) {
+    super.clickTab(target, refresh);
+    this.breadcrumb = target.textContent?.trim() || '';
+    if(close) {
+      this.toggleNavigation();
+    }
+  }
+
+  render() {
+    if (!this.navigation) {
+      return html`<p>No navigation data available.</p>`;
+    }
+
+    const navItems = this.navigation.data.map(data => {
+      return html`
+        <div class="navigation-group">
+          ${data.title ? html`<h4>${data.title}</h4>` : ''}
+          ${data.items.map(item => html`
+            <div tab-uri="${item.uri}" class="navigation-item">
+              <zn-icon src="${item.icon}" size="24"></zn-icon>
+              ${item.label}
+            </div>
+          `)}
+        </div>
+      `;
+    });
+
+    return html`
+      <div class="breadcrumb">
+        <div @click="${this.toggleNavigation}" class="breadcrumb-menu-toggle">
+          <zn-icon src="menu" size="24"></zn-icon>
+          <span>${this.breadcrumb}</span>
+        </div>
+      </div>
+      <div class="tabs">
+        <div class="navigation">
+          ${navItems}
+        </div>
+        <div class="menu-overlay" @click="${this.toggleNavigation}"></div>
+        <div id="mid" part="mid">
+          <div id="content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}