@kubex/zinc 0.0.3 → 1.0.0

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

@@ -0,0 +1,297 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {ifDefined} from "lit/directives/if-defined.js";
+import {property} from 'lit/decorators.js';
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './table.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/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 ZnTable extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({attribute: 'fixed-first', type: Boolean, reflect: true}) fixedFirst: boolean = false;
+  @property({attribute: 'has-actions', type: Boolean, reflect: true}) hasActions: boolean = false;
+  @property({attribute: 'headless', type: Boolean, reflect: true}) headless: boolean = false;
+  @property({attribute: 'left-align', type: Boolean, reflect: true}) allLeft: boolean = false;
+  @property({attribute: 'data', type: Object, reflect: true}) data: any;
+  @property({attribute: 'bool-icons', type: Boolean}) boolIcons: boolean = false;
+
+
+  private columns: any = [];
+  private columnDisplay: any = [];
+  private wideColumn: any = [];
+  private rows: any = [];
+
+
+  resizing() {
+    // TODO Resizing event
+  }
+
+  connectedCallback() {
+    if (this.fixedFirst) {
+      new ResizeObserver((_) => this.resizing).observe(this.parentElement as Element);
+    }
+
+    if (this.data === null || this.data === undefined) {
+      if (this.childNodes.length > 0 && this.childNodes[0].nodeType === 3) {
+        // merge all nodes into one
+        const nodes = this.childNodes;
+        let text = '';
+        for (const node of nodes) {
+          text += node.textContent;
+        }
+
+        // remove all \n
+        text = text.replace(/\n/g, '');
+
+        try {
+          this.data = JSON.parse(text);
+          this.innerText = '';
+        } catch (e) { /* empty */
+          console.error('Error parsing JSON', e);
+        }
+      }
+    }
+
+    if (this.data !== null && this.data !== undefined) {
+      if (this.data.hasOwnProperty('header')) {
+        this.data['header'].forEach((col: any) => {
+          if (typeof col == 'string') {
+            col = {name: col};
+          }
+          this.columns.push(col.hasOwnProperty('name') ? col['name'] : '');
+          this.columnDisplay.push(col.hasOwnProperty('display') ? col['display'] : '');
+          this.wideColumn.push(col.hasOwnProperty('wide') ? col['wide'] : '');
+        });
+      }
+      if (this.data.hasOwnProperty('items') && this.data['items'] != null) {
+        this.rows = this.data['items'];
+      }
+
+      if (this.rows.length == 0 && this.columns.length == 0) {
+        this.columns.push('');
+        for (const row in this.data) {
+          for (const column in this.data[row]) {
+            const colName = column.replace(/([A-Z]+)/g, " $1").replace(/([A-Z][a-z])/g, " $1");
+            if (!this.columns.includes(colName)) {
+              this.columns.push(colName);
+            }
+          }
+          this.rows.push({data: Object.values(this.data[row])});
+        }
+      }
+    }
+
+    return super.connectedCallback();
+  }
+
+  _handleMenu(e: any) {
+    e.target.closest('.actions').querySelector('zn-menu').toggleAttribute('hidden');
+  }
+
+  menuClick(e: any) {
+    const menu = e.target.closest('.actions').querySelector('zn-menu');
+    menu.style.top = (e.clientY - this.clientTop) + 'px';
+    menu.style.left = (e.clientX - this.clientLeft) + 'px';
+  }
+
+  tableHead() {
+    if (this.headless) return;
+
+    const headers: any = [];
+    this.columns.forEach((col: any, k: number) => {
+
+      if (col === "") {
+        return;
+      }
+
+      if (col === "_") {
+        col = "";
+      }
+
+      const minDisplay = this.columnDisplay[k];
+      if (k == 0) {
+        headers.push(html`
+          <th>${col}</th>`);
+      } else {
+        let cellClass = "";
+        if (minDisplay != "" && minDisplay != undefined) {
+          cellClass = "hidden " + minDisplay + ":table-cell";
+        }
+
+        if (this.wideColumn[k]) {
+          cellClass += " wide-column";
+        }
+
+        headers.push(html`
+          <th class="${cellClass}">${col}</th>`);
+      }
+    });
+
+    return html`
+      <thead>
+      <tr>${headers}</tr>
+      </thead>`;
+  }
+
+  tableBody() {
+    const rows: any = [];
+    this.hasActions = false;
+    this.rows.forEach((row: any, _: any) => {
+      const rowHtml = [];
+      const basicData = !row.hasOwnProperty('caption') && !row.hasOwnProperty('data');
+
+      if (basicData) {
+        row["data"] = row;
+      }
+
+      const actions = row.hasOwnProperty('actions') ? row['actions'] : [];
+      const uri = row.hasOwnProperty('uri') ? row['uri'] : [];
+      const target = row.hasOwnProperty('target') ? row['target'] : [];
+      let caption = row.hasOwnProperty('caption') ? this.columnContent(row['caption']) : '';
+      const summary = row.hasOwnProperty('summary') ? this.columnContent(row['summary']) : '';
+      let icon = row.hasOwnProperty('icon') ? row['icon'] : '';
+      let iconSize = row.hasOwnProperty('iconSize') ? row['iconSize'] : '';
+      const id: string = row.hasOwnProperty('id') ? row['id'] : '';
+      const color = row.hasOwnProperty('color') ? row['color'] : '';
+      const nested: boolean = row.hasOwnProperty('nested') ? row['nested'] === 'true' : false;
+
+      this.hasActions = this.hasActions || (actions && actions.length > 0);
+
+      if (uri != "") {
+        caption = html`<a data-target="${ifDefined(target)}" href="${uri}">${caption}</a>`;
+      }
+
+      if (nested) {
+        icon = "subdirectory_arrow_right";
+      }
+
+      let iconHtml = html``;
+      if (icon != '') {
+        iconSize = iconSize ? iconSize : summary == '' ? 20 : 40;
+        iconHtml = html`
+          <zn-icon size="${iconSize}" src="${icon}"></zn-icon>`;
+      }
+      let actionsHtml = html`
+        <div class="actions"></div>`;
+      if (actions && actions.length > 0) {
+        actionsHtml = html`
+          <div class="actions">
+            <zn-dropdown>
+              <zn-menu actions="${JSON.stringify(actions)}"></zn-menu>
+              <button slot="trigger">
+                <zn-icon src="more_vert"></zn-icon>
+              </button>
+            </zn-dropdown>
+          </div>`;
+      }
+
+      if (!basicData && (caption + summary + icon + this.columns[0]) != "") {
+        rowHtml.push(html`
+          <td class="capcol">
+            <div>
+              ${actionsHtml} ${iconHtml}
+              <div class="capd"><span class="caption">${caption}</span><span class="summary">${summary}</span></div>
+            </div>
+          </td>`);
+      }
+
+      if (row.hasOwnProperty('data') && row['data'] != null) {
+        row['data'].forEach((col: any, ck: any) => {
+          const minDisplay = this.columnDisplay[ck + 1];
+          let cellClass = "";
+          if (minDisplay != "" && minDisplay != undefined) {
+            cellClass = "hidden " + minDisplay + ":table-cell";
+          }
+          col = this.columnContent(col);
+
+          rowHtml.push(html`
+            <td class="${cellClass}">${typeof col == 'string' ? unsafeHTML(col) : col}</td>`);
+        });
+      }
+
+      rows.push(html`
+        <tr .id=${ifDefined(id)} class="${classMap({
+        'table-row': true,
+        'table-row--nested': nested,
+        'table-row--error': color === 'error',
+        'table-row--info': color === 'info',
+        'table-row--warning': color === 'warning',
+        'table-row--success': color === 'success',
+      })}">${rowHtml}
+        </tr>`);
+    });
+
+    return html`
+      <tbody>${rows}</tbody>`;
+  }
+
+  columnContent(col: any) {
+    if (typeof col !== 'object' || col === null) {
+      if (this.boolIcons && (col.toString() === 'true' || col.toString() === 'false')) {
+        return html`
+          <zn-icon src="${col ? 'check' : 'close'}" size="16"></zn-icon>`;
+      }
+
+      return col;
+    }
+
+    if (col.hasOwnProperty('chips')) {
+      const colContent = col['chips'].map((chip: any) => {
+        return html`
+          <zn-chip type="${chip['state']}">${chip['chip']}</zn-chip>`;
+      });
+
+      col = html`
+        <span>${colContent}</span>`;
+    } else if (col.hasOwnProperty('chip')) {
+      let chipState = "";
+      if (col.hasOwnProperty('state')) {
+        chipState = col['state'];
+      }
+      col = html`
+        <zn-chip type="${chipState}">${col['chip']}</zn-chip>`;
+    } else if (col.hasOwnProperty('href')) {
+      const url = col['href'];
+      const text = col.hasOwnProperty('text') ? col['text'] : url;
+      const target = col.hasOwnProperty('target') ? col['target'] : '';
+      const gaid = col.hasOwnProperty('gaid') ? col['gaid'] : '';
+      col = html`
+        <a href="${url}" data-target="${target}" gaid=${gaid}>${text}</a>`;
+    }
+
+    return col;
+  }
+
+  render() {
+    return html`
+      <div class="table-wrapper">
+        <table class="${classMap({
+          'table': true,
+          'table--last-right': !this.allLeft,
+        })}">
+          ${this.tableHead()}
+          ${this.tableBody()}
+        </table>
+      </div>
+    `;
+  }
+}

package/src/components/table/table.scss

@@ -0,0 +1,209 @@
+@use "../../wc";
+@use "../../../scss/shared/table";
+
+:host {
+  @include wc.scrollbars;
+  display: block;
+}
+
+.table-wrapper {
+  max-width: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+zn-checkbox {
+  padding: 0;
+}
+
+zn-menu {
+  position: absolute;
+}
+
+zn-icon[src="more_vert"] {
+  cursor: pointer;
+}
+
+thead {
+  color: rgb(var(--zn-text-heading));
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.table-wrapper {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  display: block;
+}
+
+table, thead, tbody, tr, td, th {
+  box-sizing: border-box;
+}
+
+tr td {
+  min-height: 40px;
+  height: 52px;
+}
+
+tr.with-summary td {
+  min-height: 80px;
+  height: 80px;
+}
+
+.table-row.table-row--error {
+  color: rgb(var(--zn-color-error));
+  border-color: rgb(var(--zn-color-error));
+  background: rgba(var(--zn-color-error), .10);
+}
+
+.table-row.table-row--info {
+  color: rgb(var(--zn-color-info));
+  border-color: rgb(var(--zn-color-info));
+  background: rgba(var(--zn-color-info), .10);
+}
+
+.table-row.table-row--warning {
+  color: rgb(var(--zn-color-warning));
+  border-color: rgb(var(--zn-color-warning));
+  background: rgba(var(--zn-color-warning), .10);
+}
+
+.table-row.table-row--success {
+  color: rgb(var(--zn-color-success)) !important;
+  border-color: rgb(var(--zn-color-success));
+  background: rgba(var(--zn-color-success), .10);
+}
+
+.table-row.table-row--nested td:first-of-type {
+  padding-left: var(--zn-spacing-medium);
+
+  zn-icon {
+    --icon-color: rgb(var(--zn-text-heading));
+  }
+}
+
+th.wide-column {
+  width: 60%;
+}
+
+td.capcol {
+
+  .actions:empty {
+    display: none;
+  }
+
+  .actions button {
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: transparent;
+    color: rgb(var(--zn-text));
+  }
+
+  & > div {
+    display: flex;
+    column-gap: var(--zn-spacing-small);
+    align-items: center;
+
+    div {
+      display: flex;
+      justify-items: center;
+    }
+
+    div.capd {
+      flex-grow: 1;
+      flex-direction: column;
+
+      span {
+        display: block;
+      }
+
+      .caption:empty, .summary:empty {
+        display: none;
+      }
+
+      .caption {
+        font-weight: 600;
+        color: rgb(var(--zn-text-heading));
+        font-size: 14px;
+        text-decoration: none;
+
+        a {
+          color: inherit;
+          text-decoration: inherit;
+        }
+      }
+
+      .summary {
+        font-size: 90%;
+        text-wrap: initial;
+      }
+    }
+  }
+}
+
+.table--last-right {
+  tr td, tr th {
+    &:last-of-type {
+      text-align: right;
+    }
+  }
+}
+
+zn-table[fixed-first] {
+  --capcol-width: 250px;
+
+  tbody tr:nth-of-type(even) td.capcol {
+    background-color: rgba(var(--zn-body));
+  }
+
+  thead th:first-of-type, td.capcol {
+    position: sticky;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+
+    background-color: rgba(var(--zn-panel));
+    min-width: var(--capcol-width);
+    max-width: var(--capcol-width);
+    border-right: 1px solid rgb(var(--zn-border-color));
+  }
+
+}
+
+zn-table[borders] {
+
+  tr, td {
+    margin: 0;
+  }
+
+  tbody tr td:last-of-type {
+    border-right-width: 1px !important;
+  }
+
+  tbody tr td:first-of-type {
+    border-left-width: 1px !important;
+  }
+
+  tbody tr:first-of-type td {
+    border-top-width: 1px !important;
+  }
+
+  tbody tr:last-of-type td {
+    border-bottom-width: 1px !important;
+  }
+}
+
+zn-table[cborders] {
+  tbody tr td {
+    border-left-width: 1px !important;
+  }
+}
+
+zn-table[fixed] {
+  table {
+    table-layout: fixed;
+  }
+}

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

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

package/src/components/tabs/index.ts

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