@zywave/zui-table 4.4.2-pre.1 → 4.5.0-pre.0

package/dist/custom-elements.json

@@ -464,7 +464,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A standardized responsive table component.",
+          "description": "A standardized responsive table component. Build rows with `<zui-table-row>` and `<zui-table-cell>`; optionally add `<zui-table-topbar>` and `<zui-table-footer>`.",
           "name": "ZuiTableElement",
           "cssProperties": [
             {

package/dist/zui-table.d.ts

@@ -4,7 +4,7 @@ import type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cel
 import type { PropertyValues } from 'lit';
 type ZuiTableMode = 'default' | 'fixed-sizing';
 /**
- * A standardized responsive table component.
+ * A standardized responsive table component. Build rows with `<zui-table-row>` and `<zui-table-cell>`; optionally add `<zui-table-topbar>` and `<zui-table-footer>`.
  *
  * @element zui-table
  *

package/dist/zui-table.js

@@ -11,7 +11,7 @@ import { style } from './zui-table-css.js';
 import '@zywave/zui-spinner';
 import { updateCustomState } from '@zywave/zui-base/dist/utils/update-custom-state.js';
 /**
- * A standardized responsive table component.
+ * A standardized responsive table component. Build rows with `<zui-table-row>` and `<zui-table-cell>`; optionally add `<zui-table-topbar>` and `<zui-table-footer>`.
  *
  * @element zui-table
  *

package/dist/zui-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement, TableElementConnectedEvent } from './base.js';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-css.js';\nimport '@zywave/zui-spinner';\nimport { updateCustomState } from '@zywave/zui-base/dist/utils/update-custom-state.js';\nimport type { ZuiTableRowElement } from './zui-table-row.js';\nimport type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';\nimport type { PropertyValues } from 'lit';\n\ntype ZuiTableMode = 'default' | 'fixed-sizing';\n\n/**\n * A standardized responsive table component.\n *\n * @element zui-table\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`\n * @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>`\n * @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.\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @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.\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n * @cssprop [--zui-table-max-height=none] - Set the maximum height of the table when table `mode` is set to `fixed-sizing`. Required for vertical scrolling to work.\n * @cssprop [--zui-table-max-width=none] - Set the maximum width of the table when table `mode` is set to `fixed-sizing`, but not required for horizontal scrolling to work.\n * @cssprop [--zui-table-loading-min-height=20rem] - Override the minimum height of the table body when in a loading state\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color\n *\n * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.\n *\n * @cssState mobile - Applied when the table is rendered in mobile mode\n */\nexport class ZuiTableElement extends ZuiTableBaseElement {\n  /**\n   * Set for alternating table row background colors\n   */\n  @property({ type: Boolean, reflect: true })\n  banded = false;\n\n  /**\n   * Ability to modify the table's layout behavior. The supported values are:\n   * - `default` (default): Table width is determined by its content. Columns will expand to fit the content within them.\n   * - `fixed-sizing`: Opts-in to constrainig dimensions by the `--zui-table-max-width` and `--zui-table-max-height` CSS properties. This unlocks the ability to make a table vertically and horizontally scrollable within a container. The following CSS properties are required: `--zui-table-columns-template`. You should set at least one of the following: `--zui-table-max-width`, `--zui-table-max-height`.\n   * @type { 'default' | 'fixed-sizing' }\n   */\n  @property({ reflect: true })\n  mode: ZuiTableMode = 'default';\n\n  // TODO: add divided prop so all table cells will have 1px border\n\n  /**\n   * 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\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-results' })\n  noResults = false;\n\n  /**\n   * Set to show a loading spinner in the table\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @queryAssignedElements({ selector: 'zui-table-row' })\n  private _rows: Array<ZuiTableRowElement>;\n\n  #internals: ElementInternals;\n  #sortLock = false;\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  constructor() {\n    super();\n\n    this.#internals = this.attachInternals();\n    this.#internals.role = 'table';\n\n    ZuiTableBaseElement._globalChannel.addEventListener('connected', (event: TableElementConnectedEvent) => {\n      if (this.contains(event.detail.element)) {\n        this._associateElement(event.detail.element);\n      }\n    });\n\n    this._state.channel.addEventListener('sort', (event: CustomEvent<SortEventDetail>) => {\n      if (this.#sortLock) {\n        return;\n      }\n      this.#sortLock = true;\n      this.dispatchEvent(new CustomEvent<SortEventDetail>('sort', { detail: event.detail, bubbles: true }));\n      setTimeout(() => (this.#sortLock = false), 0);\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n  }\n\n  firstUpdated(changedProperties: PropertyValues<this>) {\n    super.firstUpdated(changedProperties);\n    this.#addRowHeadersToCells();\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    const footer = this.querySelector('zui-table-footer:not([slot])');\n    const header = this.querySelector('zui-table-row[header]:not([slot])');\n    const topbar = this.querySelector('zui-table-topbar:not([slot])');\n    const summary = this.querySelector('zui-table-row[summary]:not([slot])');\n    footer?.setAttribute('slot', 'footer');\n    header?.setAttribute('slot', 'header');\n    topbar?.setAttribute('slot', 'topbar');\n    summary?.setAttribute('slot', 'summary');\n  }\n\n  render() {\n    return html`<div class=\"wrapper\">\n        <slot name=\"topbar\"></slot>\n        <div class=\"table-wrapper\">\n          <div class=\"table\" role=\"rowgroup\">\n            <slot name=\"header\" @slotchange=\"${this.#onSlotChange}\"></slot>\n            <div class=\"body\">\n              <slot @slotchange=\"${this.#onSlotChange}\"></slot>\n              ${this.loading ? html`<zui-spinner active=\"\" part=\"loader\"></zui-spinner>` : html``}\n              <div class=\"no-results\"><slot name=\"no-results-message\"></slot></div>\n            </div>\n          </div>\n          <slot name=\"summary\"></slot>\n        </div>\n      </div>\n      <div><slot name=\"footer\"></slot></div>`;\n  }\n\n  #onSlotChange() {\n    this.#addRowHeadersToCells();\n    this.requestUpdate();\n  }\n\n  async #addRowHeadersToCells() {\n    const headerRow = this.querySelector('zui-table-row[header]');\n\n    if (headerRow) {\n      const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n      for (const row of rowBodyList) {\n        for (let i = 0; i < row.children.length; i++) {\n          const cell = row.children[i];\n          (cell as ZuiTableCellWithState)._header = headerRow.children?.[i]?.textContent ?? '';\n        }\n      }\n    }\n\n    updateCustomState(this.#internals, 'add', 'mobile');\n  }\n}\n\nwindow.customElements.define('zui-table', ZuiTableElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table': ZuiTableElement;\n  }\n}\n\nexport type SortEventDetail = { sort: ZuiTableSortDirection; cell: ZuiTableCellElement };\n\ntype ZuiTableCellWithState = HTMLElement & { _header: string };\n"]}
+{"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement, TableElementConnectedEvent } from './base.js';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-css.js';\nimport '@zywave/zui-spinner';\nimport { updateCustomState } from '@zywave/zui-base/dist/utils/update-custom-state.js';\nimport type { ZuiTableRowElement } from './zui-table-row.js';\nimport type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';\nimport type { PropertyValues } from 'lit';\n\ntype ZuiTableMode = 'default' | 'fixed-sizing';\n\n/**\n * A standardized responsive table component. Build rows with `<zui-table-row>` and `<zui-table-cell>`; optionally add `<zui-table-topbar>` and `<zui-table-footer>`.\n *\n * @element zui-table\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`\n * @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>`\n * @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.\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @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.\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n * @cssprop [--zui-table-max-height=none] - Set the maximum height of the table when table `mode` is set to `fixed-sizing`. Required for vertical scrolling to work.\n * @cssprop [--zui-table-max-width=none] - Set the maximum width of the table when table `mode` is set to `fixed-sizing`, but not required for horizontal scrolling to work.\n * @cssprop [--zui-table-loading-min-height=20rem] - Override the minimum height of the table body when in a loading state\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color\n *\n * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.\n *\n * @cssState mobile - Applied when the table is rendered in mobile mode\n */\nexport class ZuiTableElement extends ZuiTableBaseElement {\n  /**\n   * Set for alternating table row background colors\n   */\n  @property({ type: Boolean, reflect: true })\n  banded = false;\n\n  /**\n   * Ability to modify the table's layout behavior. The supported values are:\n   * - `default` (default): Table width is determined by its content. Columns will expand to fit the content within them.\n   * - `fixed-sizing`: Opts-in to constrainig dimensions by the `--zui-table-max-width` and `--zui-table-max-height` CSS properties. This unlocks the ability to make a table vertically and horizontally scrollable within a container. The following CSS properties are required: `--zui-table-columns-template`. You should set at least one of the following: `--zui-table-max-width`, `--zui-table-max-height`.\n   * @type { 'default' | 'fixed-sizing' }\n   */\n  @property({ reflect: true })\n  mode: ZuiTableMode = 'default';\n\n  // TODO: add divided prop so all table cells will have 1px border\n\n  /**\n   * 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\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-results' })\n  noResults = false;\n\n  /**\n   * Set to show a loading spinner in the table\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @queryAssignedElements({ selector: 'zui-table-row' })\n  private _rows: Array<ZuiTableRowElement>;\n\n  #internals: ElementInternals;\n  #sortLock = false;\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  constructor() {\n    super();\n\n    this.#internals = this.attachInternals();\n    this.#internals.role = 'table';\n\n    ZuiTableBaseElement._globalChannel.addEventListener('connected', (event: TableElementConnectedEvent) => {\n      if (this.contains(event.detail.element)) {\n        this._associateElement(event.detail.element);\n      }\n    });\n\n    this._state.channel.addEventListener('sort', (event: CustomEvent<SortEventDetail>) => {\n      if (this.#sortLock) {\n        return;\n      }\n      this.#sortLock = true;\n      this.dispatchEvent(new CustomEvent<SortEventDetail>('sort', { detail: event.detail, bubbles: true }));\n      setTimeout(() => (this.#sortLock = false), 0);\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n  }\n\n  firstUpdated(changedProperties: PropertyValues<this>) {\n    super.firstUpdated(changedProperties);\n    this.#addRowHeadersToCells();\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    const footer = this.querySelector('zui-table-footer:not([slot])');\n    const header = this.querySelector('zui-table-row[header]:not([slot])');\n    const topbar = this.querySelector('zui-table-topbar:not([slot])');\n    const summary = this.querySelector('zui-table-row[summary]:not([slot])');\n    footer?.setAttribute('slot', 'footer');\n    header?.setAttribute('slot', 'header');\n    topbar?.setAttribute('slot', 'topbar');\n    summary?.setAttribute('slot', 'summary');\n  }\n\n  render() {\n    return html`<div class=\"wrapper\">\n        <slot name=\"topbar\"></slot>\n        <div class=\"table-wrapper\">\n          <div class=\"table\" role=\"rowgroup\">\n            <slot name=\"header\" @slotchange=\"${this.#onSlotChange}\"></slot>\n            <div class=\"body\">\n              <slot @slotchange=\"${this.#onSlotChange}\"></slot>\n              ${this.loading ? html`<zui-spinner active=\"\" part=\"loader\"></zui-spinner>` : html``}\n              <div class=\"no-results\"><slot name=\"no-results-message\"></slot></div>\n            </div>\n          </div>\n          <slot name=\"summary\"></slot>\n        </div>\n      </div>\n      <div><slot name=\"footer\"></slot></div>`;\n  }\n\n  #onSlotChange() {\n    this.#addRowHeadersToCells();\n    this.requestUpdate();\n  }\n\n  async #addRowHeadersToCells() {\n    const headerRow = this.querySelector('zui-table-row[header]');\n\n    if (headerRow) {\n      const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n      for (const row of rowBodyList) {\n        for (let i = 0; i < row.children.length; i++) {\n          const cell = row.children[i];\n          (cell as ZuiTableCellWithState)._header = headerRow.children?.[i]?.textContent ?? '';\n        }\n      }\n    }\n\n    updateCustomState(this.#internals, 'add', 'mobile');\n  }\n}\n\nwindow.customElements.define('zui-table', ZuiTableElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table': ZuiTableElement;\n  }\n}\n\nexport type SortEventDetail = { sort: ZuiTableSortDirection; cell: ZuiTableCellElement };\n\ntype ZuiTableCellWithState = HTMLElement & { _header: string };\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-table",
-  "version": "4.4.2-pre.1",
+  "version": "4.5.0-pre.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -29,5 +29,5 @@
   "devDependencies": {
     "@zywave/zui-button": "^4.2.1-pre.1"
   },
-  "gitHead": "4d42d6f34c560d2826d882394214b3aa46fb9e3f"
+  "gitHead": "a0cddeabb5ec57cdd40bc06c1d106536e3e20642"
 }

package/src/zui-table.ts

@@ -11,7 +11,7 @@ import type { PropertyValues } from 'lit';
 type ZuiTableMode = 'default' | 'fixed-sizing';
 
 /**
- * A standardized responsive table component.
+ * A standardized responsive table component. Build rows with `<zui-table-row>` and `<zui-table-cell>`; optionally add `<zui-table-topbar>` and `<zui-table-footer>`.
  *
  * @element zui-table
  *