@zywave/zui-table 4.0.2-pre.1 → 4.0.2-pre.2

package/src/zui-table-topbar.scss

@@ -9,12 +9,14 @@
   display: flex;
   width: 100%;
   min-height: rem(60);
+  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
-  padding: rem(10) rem(20);
-  background-color: var(--zui-gray-25);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
 
   @media (min-width: $bp-xs) {
+    flex-wrap: nowrap;
+    padding: rem(10) rem(20);
+    background-color: var(--zui-gray-25);
     box-shadow: none;
   }
 }
@@ -23,28 +25,94 @@
   display: flex;
   flex: 1;
   align-items: center;
+  order: 1;
+  margin-bottom: rem(20);
+
+  @media (min-width: $bp-xxs) {
+    flex: auto;
+    order: 0;
+  }
+
+  @media (min-width: $bp-xs) {
+    margin-bottom: 0;
+  }
 
   ::slotted(zui-search) {
     --zui-search-border-color: var(--zui-gray-50);
+    width: 100%;
+
+    @media (min-width: $bp-xs) {
+      width: auto;
+    }
   }
 }
 
 .counter {
+  display: flex;
+  width: 100%;
   flex-shrink: 0;
+  justify-content: flex-end;
+  order: 2;
+  margin-bottom: rem(10);
   margin-left: auto;
   padding-left: rem(10);
   font-size: rem(12);
   color: var(--zui-gray-400);
+
+  @media (min-width: $bp-xs) {
+    width: auto;
+    margin-bottom: 0;
+  }
 }
 
 .action {
-  margin-left: rem(10);
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  margin-bottom: rem(20);
 
-  ::slotted(zui-button:not(:first-of-type)) {
-    margin-left: rem(10);
+  @media (min-width: $bp-xxs) {
+    width: auto;
   }
-}
 
-slot[name='action'] {
-  display: flex;
+  @media (min-width: $bp-xs) {
+    margin-bottom: 0;
+  }
+
+  slot[name='action'] {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+
+    @media (min-width: $bp-xxs) {
+      flex-direction: row;
+    }
+  }
+
+  ::slotted(zui-button) {
+    width: 100%;
+
+    @media (min-width: $bp-xxs) {
+      width: auto;
+    }
+  }
+
+  ::slotted(zui-button:first-of-type) {
+    @media (min-width: $bp-xxs) {
+      margin-left: rem(20);
+    }
+
+    @media (min-width: $bp-xs) {
+      margin-left: rem(10);
+    }
+  }
+
+  ::slotted(zui-button:not(:first-of-type)) {
+    margin-top: rem(10);
+
+    @media (min-width: $bp-xxs) {
+      margin-top: 0;
+      margin-left: rem(10);
+    }
+  }
 }

package/src/zui-table-topbar.ts

@@ -1,26 +1,127 @@
-import { ZuiBaseElement } from '@zywave/zui-base';
+import { ZuiTableBaseElement } from './base.js';
 import { html } from 'lit';
+import { queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js';
 import { style } from './zui-table-topbar-css.js';
+import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
+import type { ZuiButton } from '@zywave/zui-button/dist/zui-button.js';
 
 /**
+ * Used to house table related pieces such as a search input or `zui-search`, and other up front information.
+ *
  * @element zui-table-topbar
  *
- * @slot - Default slot; table cell content goes here
+ * @slot - Unnamed slot, table cell content goes here
  * @slot counter - Total number of results from table goes here
  * @slot action - Action(s) that affect the whole table goes here
  */
-export class ZuiTableTopbarElement extends ZuiBaseElement {
+export class ZuiTableTopbarElement extends ZuiTableBaseElement {
+  @queryAssignedElements({ slot: 'action' })
+  private _actionSlottedElements: Array<HTMLCollection>;
+
+  @queryAssignedNodes({ slot: 'counter' })
+  private _counterSlottedNodes: Array<HTMLCollection>;
+
+  @queryAssignedElements({ selector: 'zui-button', slot: 'action' })
+  private _actionButtons: Array<ZuiButton>;
+
+  #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);
+
+  #mobileTopbarActionButtonsEvent = (b: MediaQueryListEvent) => {
+    b.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();
+  };
+
   static get styles() {
     return [super.styles, style];
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (this.#mobileBreakpoint.addEventListener) {
+      this.#mobileBreakpoint.addEventListener('change', this.#mobileTopbarActionButtonsEvent);
+    } else {
+      this.#mobileBreakpoint.addListener(this.#mobileTopbarActionButtonsEvent);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this.#mobileBreakpoint.addEventListener) {
+      this.#mobileBreakpoint.removeEventListener('change', this.#mobileTopbarActionButtonsEvent);
+    } else if (this.#mobileBreakpoint.addListener) {
+      this.#mobileBreakpoint.removeListener(this.#mobileTopbarActionButtonsEvent);
+    }
+  }
+
+  firstUpdated() {
+    this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();
+    this.#toggleActionDivDisplay();
+    this.#toggleCounterDivDisplay();
+  }
+
   render() {
     return html`<div class="topbar">
       <div class="content"><slot></slot></div>
-      <div class="counter"><slot name="counter"></slot></div>
-      <div class="action"><slot name="action"></slot></div>
+      <div class="counter"><slot name="counter" @slotchange="${this.#toggleCounterDivDisplay}"></slot></div>
+      <div class="action"
+        ><slot
+          name="action"
+          @slotchange="${this.#toggleActionDivDisplay} ${this.#mobileBreakpoint.matches
+            ? this.#addBlockStylingToButtons
+            : this.#removeBlockStylingFromButtons}"
+        ></slot
+      ></div>
     </div>`;
   }
+
+  #addBlockStylingToButtons() {
+    if (this._actionButtons.length > 0) {
+      for (const button of this._actionButtons) {
+        if (!button.hasAttribute('block')) {
+          button.setAttribute('block', '');
+        }
+      }
+    }
+
+    this.requestUpdate();
+  }
+
+  #removeBlockStylingFromButtons() {
+    if (this._actionButtons.length > 0) {
+      for (const button of this._actionButtons) {
+        if (button.hasAttribute('block')) {
+          button.removeAttribute('block');
+        }
+      }
+    }
+
+    this.requestUpdate();
+  }
+
+  #toggleCounterDivDisplay() {
+    const counter: HTMLElement = this.shadowRoot.querySelector('.counter');
+
+    if (this._counterSlottedNodes.length === 0) {
+      counter.style.display = 'none';
+    } else if (this._counterSlottedNodes.length > 0 && counter.style.display === 'none') {
+      counter.style.removeProperty('display');
+    }
+
+    this.requestUpdate();
+  }
+
+  #toggleActionDivDisplay() {
+    const action: HTMLElement = this.shadowRoot.querySelector('.action');
+
+    if (this._actionSlottedElements.length === 0) {
+      action.style.display = 'none';
+    } else if (this._actionSlottedElements.length > 0 && action.style.display === 'none') {
+      action.style.removeProperty('display');
+    }
+
+    this.requestUpdate();
+  }
 }
 
 window.customElements.define('zui-table-topbar', ZuiTableTopbarElement);

package/src/zui-table.scss

@@ -30,7 +30,7 @@
 }
 
 ::slotted(zui-table-row:not([header])) {
-  border-bottom: 3px solid var(--zui-gray-100);
+  border-bottom: 2px solid var(--zui-gray-100);
 
   @media (min-width: $bp-xs) {
     border-bottom-width: 1px;
@@ -45,11 +45,11 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
   border-collapse: collapse;
   border-spacing: 0;
 
   @media (min-width: $bp-xs) {
     background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
   }
 }

package/src/zui-table.ts

@@ -1,4 +1,4 @@
-import { ZuiBaseElement } from '@zywave/zui-base';
+import { ZuiTableBaseElement, TableElementConnectedEvent } from './base.js';
 import { html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { style } from './zui-table-css.js';
@@ -7,20 +7,22 @@ import type { ZuiTableRowElement } from './zui-table-row.js';
 import type { ZuiTableFooterElement } from './zui-table-footer.js';
 
 /**
+ * A standardized responsive table component.
+ *
  * @element zui-table
  *
- * @slot - Default slot; all table content will appear here, such as table rows
+ * @slot - Unnamed slot, all table content will appear here, such as table rows
  * @slot no-results-message - Customize the no results message that is shown when the `no-results` attribute is set on `<zui-table>`: `<zui-table no-results>`
  * @slot footer - Only for `<zui-table-footer>`. When there is a `<zui-table-footer>` present inside `<zui-table>`, it will be auto-assigned to this slot in order to place it outside of the rendered table for styling purposes.
  *
  * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
- * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns} for more information on valid values.
+ * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
  * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
  * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
  */
 
-export class ZuiTableElement extends ZuiBaseElement {
+export class ZuiTableElement extends ZuiTableBaseElement {
   /**
    * Set for alternating table row background colors
    */
@@ -30,7 +32,7 @@ export class ZuiTableElement extends ZuiBaseElement {
   // TODO: add divided prop so all table cells will have 1px border
 
   /**
-   * Set to show or hide no results message when there are no results; use in conjunction with the assigned slot "no-results-message" to include a no results message
+   * Set to show or hide no results message when there are no results; use in conjunction with the assigned slot `no-results-message` to include a no results message
    */
   @property({ type: Boolean, reflect: true, attribute: 'no-results' })
   noResults = false;
@@ -42,8 +44,8 @@ export class ZuiTableElement extends ZuiBaseElement {
   private _footer: Array<ZuiTableFooterElement>;
 
   #internals?: ElementInternals;
-
   #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);
+  #sortLock = false;
 
   #mobileHeadersEvent = (b: MediaQueryListEvent) => {
     b.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();
@@ -57,6 +59,21 @@ export class ZuiTableElement extends ZuiBaseElement {
     super();
 
     this.#internals = this.attachInternals?.();
+
+    ZuiTableBaseElement._globalChannel.addEventListener('connected', (event: TableElementConnectedEvent) => {
+      if (this.contains(event.detail.element)) {
+        this._associateElement(event.detail.element);
+      }
+    });
+
+    this._state.channel.addEventListener('sort', (event: CustomEvent) => {
+      if (this.#sortLock) {
+        return;
+      }
+      this.#sortLock = true;
+      this.dispatchEvent(new CustomEvent('sort', { detail: event.detail }));
+      setTimeout(() => (this.#sortLock = false), 0);
+    });
   }
 
   connectedCallback() {
@@ -89,9 +106,7 @@ export class ZuiTableElement extends ZuiBaseElement {
   render() {
     return html`<div class="table">
         <slot
-          @slotchange="${this.#mobileBreakpoint.matches
-            ? this.#addRowHeadersToCells()
-            : this.#removeRowHeadersFromCells()}"
+          @slotchange="${this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells : this.#removeRowHeadersFromCells}"
         ></slot>
         ${this.noResults ? this.#renderNoResultsView() : ``}</div
       >

package/test/zui-table.test.ts

@@ -7,12 +7,13 @@ import {
   ZuiTableCellElement,
   ZuiTableTopbarElement,
   ZuiTableFooterElement,
+  ZuiTableSortDirection,
 } from '@zywave/zui-table';
 import { assert } from '@esm-bundle/chai';
 import { setViewport } from '@web/test-runner-commands';
-import { isMobile } from '../../../../test/src/util/isMobile';
-import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
-import { sleep } from '@zywave/../../test/src/util/helpers';
+import { isMobile } from '../../../../test/src/util/isMobile.js';
+import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints.js';
+import { sleep } from '@zywave/../../test/src/util/helpers.js';
 
 suite('zui-table', () => {
   let table: ZuiTableElement;
@@ -115,6 +116,28 @@ suite('zui-table', () => {
     assert.isTrue(footerSlot, 'Expected zui-table-footer to be assigned to a slot');
   });
 
+  test('hide counter and action divs in ZuiTableTopbar if empty', async () => {
+    const zuiSearch = document.createElement('zui-search');
+    topbar.appendChild(zuiSearch);
+
+    await table.updateComplete;
+
+    const counter = topbar.shadowRoot!.querySelector('.counter');
+    const counterSlot: HTMLSlotElement = counter.querySelector('slot[name="counter"]');
+    const counterSlotLength = counterSlot.assignedElements().length;
+    const counterComputedDisplayStyle = window.getComputedStyle(counter).getPropertyValue('display');
+
+    const action = topbar.shadowRoot!.querySelector('.action');
+    const actionSlot: HTMLSlotElement = action.querySelector('slot[name="action"]');
+    const actionSlotLength = actionSlot.assignedElements().length;
+    const actionComputedDisplayStyle = window.getComputedStyle(action).getPropertyValue('display');
+
+    assert.equal(counterSlotLength, 0, 'Expected counter slot length to be 0 when empty');
+    assert.equal(counterComputedDisplayStyle, 'none', 'Expected counter div to be hidden on mobile if empty');
+    assert.equal(actionSlotLength, 0, 'Expected action slot length to be 0 when empty');
+    assert.equal(actionComputedDisplayStyle, 'none', 'Expected counter div to be hidden on mobile if empty');
+  });
+
   test('mobile table with headers in cell', async () => {
     const rowHeader = document.createElement('zui-table-row');
     const rowHeaderCell = document.createElement('zui-table-cell');
@@ -128,7 +151,7 @@ suite('zui-table', () => {
     // TODO: Investigate why setting viewport prior to table update completion fails
     await table.updateComplete;
     await sleep(100);
-    await setViewport({ width: 480, height: 640 });
+    await setViewport({ width: 479, height: 640 });
 
     const rowHeaderComputedDisplayStyle = window.getComputedStyle(rowHeader).getPropertyValue('display');
     const rowHeaderText = rowHeaderCell.textContent;
@@ -146,4 +169,123 @@ suite('zui-table', () => {
       `Expected table body cell text (${bodyCellHeaderText}) to have header text (${rowHeaderText}) in it`
     );
   });
+
+  test('ZuiButtons in the ZuiTableTopbar action slot switches to block style on mobile', async () => {
+    const actionButton = document.createElement('zui-button');
+    actionButton.innerText = 'Add a new entry';
+    actionButton.setAttribute('slot', 'action');
+    topbar.appendChild(actionButton);
+
+    // Order matters here
+    // TODO: Investigate why setting viewport prior to table update completion fails
+    await table.updateComplete;
+    await sleep(100);
+    await setViewport({ width: 479, height: 640 });
+
+    const actionButtonStyle = actionButton.hasAttribute('block');
+
+    assert.isTrue(isMobile(), `Expected viewport to be <${screenBreakpoints.xsmall}`);
+    assert.isTrue(actionButtonStyle);
+  });
+
+  suite('sort', () => {
+    test('cell can only be sortable when in header row', async () => {
+      row.remove();
+
+      const newRow = document.createElement('zui-table-row');
+      const sortableCell = document.createElement('zui-table-cell');
+      sortableCell.setAttribute('sortable', '');
+
+      newRow.appendChild(sortableCell);
+      table.append(newRow);
+
+      await sortableCell.updateComplete;
+
+      assert.isFalse(sortableCell.sortable);
+
+      newRow.setAttribute('header', '');
+
+      await sortableCell.updateComplete;
+      assert.isTrue(sortableCell.sortable);
+    });
+
+    test('clicking sortable cell dispatches sort event', async () => {
+      let sortEvent: CustomEvent<{ sort: ZuiTableSortDirection; cell: ZuiTableCellElement }> | undefined;
+      let dispatchedSortEventsCounter = 0;
+      cell.setAttribute('sortable', '');
+      row.setAttribute('header', '');
+      await cell.updateComplete;
+
+      table.addEventListener(
+        'sort',
+        (event: CustomEvent<{ sort: ZuiTableSortDirection; cell: ZuiTableCellElement }>) => {
+          sortEvent = event;
+          dispatchedSortEventsCounter++;
+        }
+      );
+
+      cell.click();
+
+      assert.exists(sortEvent);
+      assert.equal(sortEvent.detail.sort, 'ascending');
+      assert.equal(sortEvent.detail.cell, cell);
+
+      await sleep(100);
+
+      assert.equal(dispatchedSortEventsCounter, 1);
+    });
+
+    test('clicking sortable cell changes direction', async () => {
+      cell.setAttribute('sortable', '');
+      row.setAttribute('header', '');
+      await cell.updateComplete;
+
+      assert.equal(cell.sort, null);
+
+      cell.click();
+      assert.equal(cell.sort, 'ascending');
+
+      cell.click();
+      assert.equal(cell.sort, 'descending');
+
+      cell.click();
+      assert.equal(cell.sort, null);
+    });
+
+    test('clicking sibling sortable cell resets direction', async () => {
+      cell.setAttribute('sortable', '');
+      cell.setAttribute('sort', 'ascending');
+
+      const otherCell = document.createElement('zui-table-cell');
+      otherCell.setAttribute('sortable', '');
+
+      row.setAttribute('header', '');
+      row.appendChild(otherCell);
+      await cell.updateComplete;
+
+      assert.equal(cell.sort, 'ascending');
+      assert.equal(otherCell.sort, null);
+
+      otherCell.click();
+      assert.equal(cell.sort, null);
+      assert.equal(otherCell.sort, 'ascending');
+    });
+
+    test('multiple header cells with directions set are reset except first', async () => {
+      cell.setAttribute('sortable', '');
+      cell.setAttribute('sort', 'ascending');
+      row.setAttribute('header', '');
+
+      const otherCell = document.createElement('zui-table-cell');
+      otherCell.setAttribute('sortable', '');
+      otherCell.setAttribute('sort', 'ascending');
+      row.appendChild(otherCell);
+
+      await cell.updateComplete;
+
+      assert.equal(cell.sort, 'ascending');
+      assert.equal(otherCell.sort, null);
+      assert.isFalse(otherCell.hasAttribute('sort'));
+    });
+  });
 });