@kubex/zinc 0.0.2 → 1.0.0

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

@@ -0,0 +1,330 @@
+@use "../../wc";
+@use "../../../scss/boot"; // Tables load in such a way we need to include the global styles on them again
+
+:host {
+  display: block;
+  @include wc.scrollbars;
+}
+
+.table-container {
+  overflow: auto;
+}
+
+table {
+  border-collapse: separate !important;
+  border-spacing: 0;
+  width: 100%;
+  max-width: 100%;
+  table-layout: auto;
+  text-align: left;
+
+  &.table--standalone {
+    background-color: rgb(var(--zn-panel));
+    border-radius: var(--zn-border-radius-large);
+    box-shadow: var(--zn-shadow-medium);
+    border: 1px solid rgb(var(--zn-border-color));
+    overflow: hidden;
+  }
+
+  thead {
+    color: rgb(var(--zn-text-heading));
+    font-weight: 500;
+  }
+
+  thead tr th {
+    border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
+  }
+
+  .table--with-checkboxes tbody tr:hover {
+    background-color: rgba(var(--zn-primary), 0.05) !important;
+    cursor: pointer;
+  }
+
+  tbody tr td {
+    border-top: 1px solid rgb(var(--zn-border-color)) !important;
+  }
+
+  tbody tr:first-of-type td {
+    border-top: 0 !important;
+  }
+
+  tbody tr:nth-of-type(even) {
+    background-color: rgba(var(--zn-body));
+  }
+
+  thead tr th:first-of-type,
+  tbody tr td:first-of-type {
+    padding-left: 14px;
+  }
+
+  thead tr th:last-of-type,
+  tbody tr td:last-of-type {
+    padding-right: 14px;
+  }
+
+  th, td {
+    padding: var(--zn-spacing-medium);
+    min-width: 90px;
+    white-space: nowrap;
+
+    span {
+      white-space: normal;
+    }
+
+    &:first-child {
+      padding-left: 0;
+    }
+  }
+
+  th {
+    padding-bottom: 0;
+    border-bottom: 1px solid rgb(var(--zn-border-color));
+  }
+}
+
+.zn-table-fixed {
+  table-layout: fixed;
+}
+
+
+.table { // The container element that holds the table and the filters
+
+  tr th {
+    padding-top: var(--zn-spacing-large);
+    padding-bottom: var(--zn-spacing-large);
+  }
+
+  tr th, tr td {
+    min-width: 50px;
+
+    > div {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      gap: var(--zn-spacing-x-small);
+
+      > code {
+        font-size: 10px;
+        display: block;
+        max-width: 420px;
+        float: right;
+        max-height: 100px;
+        white-space: pre;
+        overflow-x: scroll;
+      }
+    }
+
+    &:first-of-type > div:has(input[type="checkbox"]) {
+      justify-content: center;
+
+      input[type="checkbox"] {
+        margin: 0;
+      }
+    }
+  }
+
+  &__head {
+    &:hover {
+      .table__head__sort {
+        opacity: 1;
+      }
+    }
+
+    &__sort {
+      margin-left: var(--zn-spacing-small);
+      opacity: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+
+      &--active {
+        opacity: 1 !important;
+      }
+    }
+
+    &--wide {
+      width: 100%;
+    }
+
+    &--last div {
+      justify-content: flex-end;
+    }
+
+    &--left div {
+      justify-content: flex-start;
+    }
+
+    &--right div {
+      justify-content: flex-end;
+    }
+
+    &--center div {
+      justify-content: center;
+    }
+
+    &--hidden {
+      > div {
+        visibility: hidden;
+      }
+    }
+  }
+
+  &__cell {
+    &--wide {
+      width: 100%;
+    }
+
+    &--last div {
+      justify-content: flex-end;
+    }
+
+    &--left div {
+      justify-content: flex-start;
+    }
+
+    &--right div {
+      justify-content: flex-end;
+    }
+
+    &--center div {
+      justify-content: center;
+    }
+
+    .caption {
+      flex-grow: 1;
+      flex-direction: column;
+
+      span {
+        display: block;
+      }
+
+      .title:empty, .summary:empty {
+        display: none;
+      }
+
+      .title {
+        font-weight: 600;
+        color: rgb(var(--zn-text-heading));
+        font-size: 14px;
+        text-decoration: none;
+      }
+
+      a.title {
+        color: rgb(var(--zn-primary));
+      }
+
+      .summary {
+        font-size: 90%;
+        text-wrap: initial;
+        color: rgb(var(--zn-text));
+      }
+
+      &--icon {
+        display: flex;
+        flex-direction: row;
+        gap: var(--zn-spacing-small);
+      }
+    }
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+    padding: var(--zn-spacing-small);
+    gap: var(--zn-spacing-small);
+
+    &__actions,
+    &__query-builder {
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      gap: var(--zn-spacing-small);
+    }
+
+    &__right {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--zn-spacing-x-small);
+      margin-left: auto;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: var(--zn-spacing-medium) var(--zn-spacing-medium);
+
+    &__right, &__left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--zn-spacing-large);
+    }
+
+    &__rows-per-page {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      opacity: 0.8;
+      gap: var(--zn-spacing-x-small);
+
+      zn-select[name="rowPerPage"] {
+        max-width: 75px;
+      }
+    }
+
+    &__pagination-count {
+
+    }
+
+    &__pagination-buttons {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--zn-spacing-x-small);
+
+      button {
+        border: 1px solid rgb(var(--zn-border-color));
+        border-radius: 5px;
+        padding: var(--zn-spacing-x-small);
+
+        &[disabled] {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+      }
+    }
+
+  }
+
+}
+
+.reduced-opacity .table tbody {
+  opacity: 0.5;
+}
+
+.hidden {
+  display: none;
+}
+
+.dropdown__query-builder {
+  display: block;
+  position: relative;
+  padding: var(--zn-spacing-large);
+  border-width: 1px;
+  border-radius: 5px;
+  width: fit-content;
+  min-width: var(--zn-spacing-small-panel);
+  max-height: 650px;
+  overflow: auto;
+  overscroll-behavior: none;
+  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  background-color: rgb(var(--zn-panel, 255, 255, 255));
+}

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

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

package/src/components/data-table/index.ts

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

package/src/components/data-table-filter/data-table-filter.component.ts

@@ -0,0 +1,126 @@
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {FormControlController, validValidityState} from "../../internal/form";
+import {property} from 'lit/decorators.js';
+import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
+
+
+import styles from './data-table-filter.scss';
+
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/data-table-filter
+ * @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 ZnDataTableFilter extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private _formController: FormControlController = new FormControlController(this, {});
+
+  @property() filters = "";
+
+  @property() name: string = "data-table-filter";
+
+  @property() value: string;
+
+  get validationMessage(): string {
+    return '';
+  }
+
+  get validity(): ValidityState {
+    return validValidityState;
+  }
+
+  checkValidity(): boolean {
+    return true;
+  }
+
+  getForm(): HTMLFormElement | null {
+    return this._formController.getForm();
+  }
+
+  reportValidity(): boolean {
+    return true;
+  }
+
+  setCustomValidity(): void {
+    this._formController.updateValidity();
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    this._formController.updateValidity();
+  }
+
+  handleQBClear = () => {
+    const builder = this.shadowRoot?.querySelector('zn-query-builder');
+    if (!builder) {
+      return;
+    }
+
+    builder.clear();
+  }
+
+  handleQBReset = () => {
+    const builder = this.shadowRoot?.querySelector('zn-query-builder');
+    if (!builder) {
+      return;
+    }
+
+    builder.reset();
+  }
+
+  handleQBUpdate = () => {
+    const builder = this.shadowRoot?.querySelector('zn-query-builder');
+    if (!builder) {
+      return;
+    }
+
+    this.value = builder.value as string;
+
+    this.closeSlideout();
+    this._formController.updateValidity();
+    this.emit('zn-filter-change');
+  }
+
+  closeSlideout() {
+    const slideout = this.shadowRoot?.querySelector('zn-slideout');
+    if (slideout) {
+      slideout.hide();
+    }
+  }
+
+  render() {
+    return html`
+      <zn-button id="slideout-trigger" color="transparent" size="x-small" icon="filter_alt" icon-size="22"
+                 slot="trigger"
+                 tooltip="Open Filter">Filter
+      </zn-button>
+      <zn-slideout class="slideout-basic" trigger="slideout-trigger" label="Filters">
+
+        <div class="data-table-filter">
+          <zn-query-builder filters="${this.filters}"></zn-query-builder>
+        </div>
+
+        <zn-button color="secondary" slot="footer" slideout-closer @click=${this.handleQBReset}>Cancel
+        </zn-button>
+        <div slot="footer">
+          <zn-button color="transparent" slot="footer" @click=${this.handleQBClear}>Clear</zn-button>
+          <zn-button color="default" slot="footer" @click=${this.handleQBUpdate}>Show Results</zn-button>
+        </div>
+      </zn-slideout>
+    `;
+  }
+}

package/src/components/data-table-filter/data-table-filter.scss

@@ -0,0 +1,22 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.data-table-filter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-small);
+
+  &__item {
+    display: flex;
+    justify-content: space-between;
+
+    &__name {
+      font-weight: 500;
+      color: rgb(var(--zn-text-heading));
+      width: 100%;
+    }
+  }
+}

package/src/components/data-table-filter/data-table-filter.test.ts

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

package/src/components/data-table-filter/index.ts

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

package/src/components/data-table-sort/data-table-sort.component.ts

@@ -0,0 +1,56 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './data-table-sort.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/data-table-sort
+ * @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 ZnDataTableSort extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  render() {
+    return html`
+      <zn-dropdown distance="50" placement="bottom-start" class="data-table-sort">
+        <zn-button color="transparent" size="x-small" icon="sort" icon-size="22" slot="trigger" tooltip="Open Sort">
+          Sort
+        </zn-button>
+
+        <div class="data-table-sort__dropdown">
+          <span class="data-table-sort__header">Sort by:</span>
+
+          <div class="data-table-sort__controls">
+            <zn-select>
+              <zn-option value="0">Option 1</zn-option>
+              <zn-option value="1">Option 2</zn-option>
+            </zn-select>
+            <zn-select value="ASC">
+              <zn-option value="ASC">Ascending</zn-option>
+              <zn-option value="DESC">Descending</zn-option>
+            </zn-select>
+          </div>
+
+          <div class="data-table-sort__btn-group">
+            <zn-button color="secondary" slot="footer">Cancel</zn-button>
+            <div>
+              <zn-button color="transparent" size="x-small" slot="footer">Clear</zn-button>
+              <zn-button color="default" slot="footer">Update</zn-button>
+            </div>
+          </div>
+      </zn-dropdown>`;
+  }
+}

package/src/components/data-table-sort/data-table-sort.scss

@@ -0,0 +1,37 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+
+.data-table-sort {
+  &__dropdown {
+    background-color: rgb(var(--zn-panel));
+    border: solid 1px rgb(var(--zn-border-color));
+    border-radius: var(--zn-border-radius-large);
+    box-shadow: var(--zn-shadow-large);
+    padding: var(--zn-spacing-medium);
+    width: 300px;
+  }
+
+  &__header {
+    font-weight: 500;
+    color: rgb(var(--zn-text-heading));
+    font-size: var(--zn-font-size-medium);
+  }
+
+  &__controls {
+    display: flex;
+    flex-direction: column;
+    gap: var(--zn-spacing-small);
+    margin: var(--zn-spacing-small) 0;
+  }
+
+  &__btn-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: var(--zn-spacing-small);
+  }
+}

package/src/components/data-table-sort/data-table-sort.test.ts

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

package/src/components/data-table-sort/index.ts

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