@kubex/zinc 1.0.13 → 1.0.15

package/docs/pages/components/note.md

@@ -9,7 +9,17 @@ layout: component
 
 <zn-note color="gray">
   <span slot="caption">The caption</span>
-  <span>The body</span>
+  <div slot="snippet">This is a short version of the below.</div>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, autem deleniti, dolore dolores ea enim fugit
+  harum incidunt minima numquam possimus praesentium quaerat quasi sequi sunt temporibus ut velit, veniam. Aut dolor
+  eius quae. Consequatur deleniti ipsum itaque pariatur ullam velit! Alias aut delectus dolores esse fuga iure laborum
+  magnam maiores minima, minus, natus placeat provident quasi ratione ullam ut? Fugit nisi placeat quidem suscipit
+  voluptatum? Adipisci aspernatur assumenda consequatur dolore ea esse exercitationem ipsum maiores minima neque saepe,
+  voluptates voluptatibus! A ab adipisci consequatur, esse eveniet itaque sed soluta! Aliquid animi blanditiis dolores
+  dolorum eum facere fugit harum id illo, laboriosam laborum libero magni minus natus nihil perspiciatis porro quae
+  quisquam, ratione rem repellat sequi sit suscipit voluptas voluptatum. Atque delectus eos fugit illo sit soluta
+  suscipit vero? At consectetur culpa dolor, dolores ea earum enim error et expedita iste laudantium nam necessitatibus
+  quaerat, quis sed tempora vel voluptatum?
   <span slot="date">
     <small>11/10/24</small>
   </span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/content-block/content-block.scss

@@ -73,52 +73,59 @@ zn-panel:not(.content-block--short) zn-header::part(header-description) {
   display: none;
 }
 
-li[data-list="ordered"] {
-  counter-increment: list-0 1;
+ol {
+  counter-reset: list-0 0;
 }
 
 @supports (counter-set:none) {
-  li[data-list] {
+  ol li, ul li {
     counter-set: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0;
   }
 }
 
-li[data-list=bullet] > .ql-ui:before {
-  content: "•";
+ol, ul {
+  padding: 0;
+  margin: 0;
 }
 
-li[data-list=checked] > .ql-ui:before {
-  content: "☑";
+li[data-list=checked] > .ql-ui, li[data-list=unchecked] > .ql-ui {
+  color: #777;
 }
 
-li[data-list=unchecked] > .ql-ui:before {
-  content: "☐";
+li {
+  list-style-type: none;
+  padding-left: 1em;
+  position: relative;
 }
 
-li[data-list="ordered"] > .ql-ui::before {
-  content: counter(list-0) ". ";
+ul > li::before {
+  content: "•";
 }
 
-ol {
-  padding: 0;
-  margin: 0;
+ol > li {
+  counter-increment: list-0;
 }
 
-li[data-list=checked] > .ql-ui, li[data-list=unchecked] > .ql-ui {
-  color: #777;
+ol > li::before {
+  content: counter(list-0) ". ";
 }
 
-.ql-ui {
-  position: absolute;
+/* Checkbox list markers */
+li[data-list="checked"]::before {
+  content: "☑";
 }
 
-li {
-  list-style-type: none;
-  padding-left: 1em;
-  position: relative;
+li[data-list="unchecked"]::before {
+  content: "☐";
+}
+
+li[data-list="checked"]::before,
+li[data-list="unchecked"]::before {
+  color: #777;
 }
 
-li > .ql-ui::before {
+ol li::before,
+ul li::before {
   display: inline-block;
   margin-left: -1.5em;
   margin-right: 0.3em;
@@ -126,3 +133,8 @@ li > .ql-ui::before {
   white-space: nowrap;
   width: 1.2em;
 }
+
+li:has(> .ql-ui)::before {
+  content: none;
+  display: none;
+}

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

@@ -92,6 +92,7 @@ interface HeaderConfig {
   filterable?: boolean;
   hideHeader?: boolean;
   hideColumn?: boolean;
+  secondary?: boolean;
 }
 
 interface DataRequest {
@@ -157,6 +158,7 @@ export default class ZnDataTable extends ZincElement {
   @property({attribute: 'data', type: Object, reflect: true}) data: any;
   @property({attribute: 'sort-column'}) sortColumn: string;
   @property({attribute: 'sort-direction'}) sortDirection: string = "asc";
+  @property({attribute: 'local-sort', type: Boolean}) localSort: boolean = false;
   @property({attribute: 'filter'}) filter: string = '';
   @property({attribute: 'wide-column'}) wideColumn: string;
   @property({attribute: 'key'}) key: string = 'id';
@@ -252,7 +254,7 @@ export default class ZnDataTable extends ZincElement {
       const params: Record<string, any> = {};
       if (inputs) {
         inputs.forEach((input) => {
-          const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'input', 'select', 'textarea'];
+          const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'zn-datepicker', 'input', 'select', 'textarea'];
           if (allowedInputs.includes(input.tagName.toLowerCase())) {
             const value = (input as AllowedInputElement).value as string || input.getAttribute('value');
             const name = (input as AllowedInputElement).name || input.getAttribute('name');
@@ -289,6 +291,10 @@ export default class ZnDataTable extends ZincElement {
 
   private rowHasActions: boolean = false;
 
+  private _expandedRows: Set<string> = new Set();
+  private _hiddenCells: Map<string, Cell[]> = new Map();
+  private _secondaryHeaders: HeaderConfig[];
+
   requestParams: Record<string, any> = {};
 
   refresh() {
@@ -458,22 +464,40 @@ export default class ZnDataTable extends ZincElement {
   }
 
   public renderTableData(data: any) {
+    // Primary (visible) headers exclude those explicitly hidden and those marked as secondary
     const filteredHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
-      if (header.hideHeader || header.hideColumn) {
-        return false;
-      }
-      return !Object.values(this.hiddenColumns).includes(header.key);
+      if (header.hideHeader || header.hideColumn) return false;
+
+      if (Object.values(this.hiddenColumns).includes(header.key)) return false;
+
+      return !header.secondary;
+    });
+
+    // Secondary headers (shown in expandable details)
+    this._secondaryHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
+      if (header.hideColumn) return false;
+
+      if (Object.values(this.hiddenColumns).includes(header.key)) return false;
+
+      return header.secondary === true;
     });
 
     this.rowHasActions = this._rows.some((row: Row) => row.actions && row.actions.length > 0);
 
-    // To make sure the cells are in the same order as the headers, we need to map them cell.col to heading.key
+    // Compute and store hidden cells per row (secondary items only), and reorder visible cells to match header order
+    const secondaryKeys = new Set(this._secondaryHeaders.map(h => h.key));
+    this._hiddenCells.clear();
+    const visibleRowCells: Map<string, Cell[]> = new Map();
+
     this._rows.forEach((row: Row) => {
+      const originalCells = Array.isArray(row.cells) ? row.cells : [];
       const orderedCells: Cell[] = [];
-      // const unorderedCells = row.cells.filter((c: Cell) => !filteredHeaders.some((h: HeaderConfig) => h.key === c.column));
+
+      const hiddenCells = originalCells.filter((c: Cell) => secondaryKeys.has(c.column));
+      this._hiddenCells.set(row.id, hiddenCells);
 
       filteredHeaders.forEach((header: HeaderConfig) => {
-        const cell = row.cells.find((c: Cell) => c.column === header.key);
+        const cell = originalCells.find((c: Cell) => c.column === header.key);
         if (cell) {
           orderedCells.push(cell);
         } else {
@@ -481,9 +505,12 @@ export default class ZnDataTable extends ZincElement {
         }
       });
 
-      row.cells = orderedCells;//.concat(unorderedCells);
+      visibleRowCells.set(row.id, orderedCells);
     });
 
+    const anyHidden = this.hasHiddenColumns();
+    const colCount = filteredHeaders.length + (this.rowHasActions ? 1 : 0) + (anyHidden ? 1 : 0);
+
     return html`
       <div style="overflow-x: auto">
         <table class="${classMap({
@@ -493,17 +520,27 @@ export default class ZnDataTable extends ZincElement {
         })}">
           <thead>
           <tr>
+            ${anyHidden ? html`
+              <th class="table__head table__head--expander"></th>` : nothing}
             ${filteredHeaders.map((header: HeaderConfig) => this.renderCellHeader(header))}
             ${this.rowHasActions ? html`
               <th></th>` : html``}
           </tr>
           </thead>
           <tbody>
-          ${data.map((row: Row) => html`
-            <tr class="${classMap({'table__row--selected': this.isRowSelected(row)})}">
-              ${row.cells.map((value: Cell, index: number) => this.renderCellBody(index, value))}
-              ${this.rowHasActions ? this.renderActions(row) : null}
-            </tr>`)}
+          ${(data as Row[]).map((row: Row, rowIndex: number) => html`
+            <tr class="${classMap({
+              'table__row--selected': this.isRowSelected(row),
+              'table__row--data': true,
+              'table__row--even': (rowIndex % 2) === 0,
+              'table__row--odd': (rowIndex % 2) === 1,
+            })}" data-row-id="${row.id}">
+              ${anyHidden ? this.renderExpanderCell(row) : nothing}
+              ${(visibleRowCells.get(row.id) || row.cells).map((value: Cell, index: number) => this.renderCellBody(index, value))}
+              ${this.rowHasActions ? this.renderActions(row) : nothing}
+            </tr>
+            ${this._expandedRows.has(row.id) ? this.renderDetailsRow(row, colCount) : nothing}
+          `)}
           </tbody>
         </table>
       </div>
@@ -743,7 +780,7 @@ export default class ZnDataTable extends ZincElement {
       return;
     }
 
-    const rows = Array.from(this.renderRoot.querySelectorAll('tbody tr'));
+    const rows = Array.from(this.renderRoot.querySelectorAll('tbody tr:not([data-details="true"])'));
     const index = rows.indexOf(parent as HTMLTableRowElement);
     if (index === -1) return;
 
@@ -777,7 +814,13 @@ export default class ZnDataTable extends ZincElement {
     return () => {
       this.sortColumn = key;
       this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
-      this._dataTask.run().then(r => r);
+
+      if (this.localSort) {
+        this._rows = this.sortLocalData(this._rows as Row[]);
+        this.requestUpdate();
+      } else {
+        this._dataTask.run().then(r => r);
+      }
     };
   }
 
@@ -900,15 +943,24 @@ export default class ZnDataTable extends ZincElement {
 
   private renderCellHeader(header: HeaderConfig) {
     const sortable = !Object.values(this.unsortableHeaders).includes(header.key) && !Object.values(this.hiddenHeaders).includes(header.key) && !this.unsortable;
-    const lastHeader = Object.keys(this.headers).filter((key) => !Object.values(this.hiddenColumns).includes(key)).slice(-1)[0];
-    const lastHeaderKey = lastHeader ? this.headers[lastHeader].key : '';
+
+    // Determine the last visible header considering secondary flags and hidden columns
+    const lastVisibleHeaderKey = Object.values(this.headers)
+      .filter((h: HeaderConfig) => {
+        if (h.hideHeader || h.hideColumn) return false;
+
+        if (Object.values(this.hiddenColumns).includes(h.key)) return false;
+
+        return !h.secondary;
+      })
+      .slice(-1)[0]?.key;
 
     return html`
       <th
         class="${classMap({
           'table__head': true,
           'table__head--wide': header.key === this.wideColumn,
-          'table__head--last': header.key === lastHeaderKey,
+          'table__head--last': header.key === lastVisibleHeaderKey,
           'table__head--hidden': Object.values(this.hiddenHeaders).includes(header.key),
         })}"
         @click="${sortable ? this.updateSort(header.key) : undefined}">
@@ -922,16 +974,13 @@ export default class ZnDataTable extends ZincElement {
 
   private renderCellBody(index: number, value: Cell) {
     const filteredHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
-      if (header.hideHeader || header.hideColumn) {
-        return false;
-      }
-      return !Object.values(this.hiddenColumns).includes(header.key);
-    });
+      if (header.hideHeader || header.hideColumn) return false;
 
-    const headerKeys: string[] = Object.keys(this.headers).filter(
-      (key) => !Object.values(this.hiddenColumns).includes(key)
-    );
-    const headerKey: string = headerKeys[index];
+      if (Object.values(this.hiddenColumns).includes(header.key)) return false;
+
+      return !header.secondary;
+    });
+    const headerKey: string = filteredHeaders[index]?.key;
 
     return html`
       <td
@@ -945,28 +994,75 @@ export default class ZnDataTable extends ZincElement {
       </td>`;
   }
 
+  private hasHiddenColumns(): boolean {
+    return this._secondaryHeaders.length > 0;
+  }
+
+  private renderExpanderCell(row: Row) {
+    const hasHidden = (this._hiddenCells.get(row.id) || []).length > 0;
+    if (!hasHidden) return html`
+      <td class="table__cell table__cell--expander"></td>`;
+
+    const expanded = this._expandedRows.has(row.id);
+    const icon = expanded ? 'expand_more' : 'chevron_right';
+
+    return html`
+      <td class="table__cell table__cell--expander">
+        <zn-button
+          color="transparent"
+          size="x-small"
+          icon="${icon}"
+          icon-size="18"
+          aria-label="${expanded ? 'Collapse row' : 'Expand row'}"
+          @click="${(e: Event) => this.toggleRowExpansion(e, row)}">
+        </zn-button>
+      </td>`;
+  }
+
+  private renderDetailsRow(row: Row, colSpan: number) {
+    const hiddenCells = this._hiddenCells.get(row.id) || [];
+    if (hiddenCells.length === 0) return html``;
+
+    return html`
+      <tr class="table__row--details" data-details="true">
+        <td colspan="${colSpan}">
+          <div class="table__details">
+            ${hiddenCells.map((cell: Cell) => {
+              const header = Object.values(this.headers).find((h: HeaderConfig) => h.key === cell.column);
+              const label = header?.label || this.humanize(cell.column);
+              return html`
+                <div class="table__details__item">
+                  <div class="table__details__label">${label}</div>
+                  <div class="table__details__value">${this.renderCell(cell)}</div>
+                </div>`;
+            })}
+          </div>
+        </td>
+      </tr>`;
+  }
+
+  private toggleRowExpansion(e: Event, row: Row) {
+    e.stopPropagation();
+
+    if (this._expandedRows.has(row.id)) {
+      this._expandedRows.delete(row.id);
+    } else {
+      this._expandedRows.add(row.id);
+    }
+
+    this.requestUpdate();
+  }
+
   private isRowSelected(row: Row): boolean {
     return this.selectedRows.some((r: Row) => r.id === row.id);
   }
 
   private getRows(data: Response): Row[] {
-    const sourceRows = data.rows;
-
-    if (this.sortColumn) {
-      const headerKeys = Object.keys(this.headers);
-      const sortIndex = headerKeys.indexOf(this.sortColumn);
-
-      sourceRows.sort((rowA: Row, rowB: Row) => {
-        const getCellForSort = (row: Row): Cell => {
-          const byHeading = row.cells.find((cell: Cell) => cell.column === this.sortColumn);
-          if (byHeading !== undefined) return byHeading as unknown as Cell;
-          return row.cells[sortIndex];
-        };
-
-        const aVal = getCellForSort(rowA);
-        const bVal = getCellForSort(rowB);
-        return this.sortData(aVal, bVal);
-      });
+    // Copy rows to avoid mutating original data
+    const sourceRows = Array.isArray(data.rows) ? data.rows.slice() : [];
+
+    if (this.localSort && this.sortColumn) {
+      return this.sortLocalData(sourceRows);
     }
 
     return sourceRows;
@@ -1035,6 +1131,25 @@ export default class ZnDataTable extends ZincElement {
     return aNormal < bNormal ? 1 : aNormal > bNormal ? -1 : 0;
   }
 
+  private sortLocalData(rows: Row[]): Row[] {
+    if (!this.sortColumn) return rows;
+
+    const headerKeys = Object.keys(this.headers);
+    const sortIndex = headerKeys.indexOf(this.sortColumn);
+
+    const getCellForSort = (row: Row): Cell => {
+      const byHeading = row.cells.find((cell: Cell) => cell.column === this.sortColumn);
+      if (byHeading !== undefined) return byHeading as unknown as Cell;
+      return row.cells[sortIndex];
+    };
+
+    return rows.slice().sort((rowA: Row, rowB: Row) => {
+      const aVal = getCellForSort(rowA);
+      const bVal = getCellForSort(rowB);
+      return this.sortData(aVal, bVal);
+    });
+  }
+
   private loadingTable() {
     return html`
       <div class="table-container">

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

@@ -18,6 +18,18 @@ table {
   table-layout: auto;
   text-align: left;
 
+  tbody tr:nth-of-type(even) {
+    background-color: unset !important;
+  }
+
+  tbody tr.table__row--data.table__row--odd:not(.table__row--selected) td {
+    background-color: rgba(var(--zn-body));
+  }
+
+  tbody tr.table__row--details td {
+    background-color: rgb(var(--zn-shadow));
+  }
+
   &.table--standalone {
     background-color: rgb(var(--zn-panel));
     border-radius: var(--zn-border-radius-large);
@@ -34,11 +46,16 @@ table {
     border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
   }
 
-  &.with-hover tbody tr:hover {
+  &.with-hover tbody tr.table__row--data:not(.table__row--selected):hover td {
     background-color: rgba(var(--zn-primary), 0.05) !important;
     cursor: pointer;
   }
 
+  &.with-hover tbody tr.table__row--details:hover {
+    background-color: inherit;
+    cursor: default;
+  }
+
   tbody tr td {
     border-top: 1px solid rgb(var(--zn-border-color)) !important;
   }
@@ -47,10 +64,6 @@ table {
     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;
@@ -169,6 +182,12 @@ table {
         visibility: hidden;
       }
     }
+
+    &--expander {
+      width: 28px;
+      min-width: 28px;
+      padding-right: 0;
+    }
   }
 
   &__cell {
@@ -232,6 +251,11 @@ table {
         gap: var(--zn-spacing-small);
       }
     }
+
+    &--expander {
+      width: 28px;
+      min-width: 28px;
+    }
   }
 
   &__header {
@@ -306,6 +330,28 @@ table {
       }
     }
   }
+
+  &__details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: var(--zn-spacing-x-large) !important;
+
+    &__item {
+      display: flex;
+      flex-direction: column;
+      gap: var(--zn-spacing-2x-small, 4px);
+    }
+
+    &__label {
+      font-size: 12px;
+      color: rgb(var(--zn-text-subtle, var(--zn-text)));
+      opacity: 0.8;
+    }
+
+    &__value {
+      font-size: 14px;
+    }
+  }
 }
 
 .reduced-opacity .table tbody {
@@ -335,10 +381,6 @@ table {
 table tbody tr.table__row--selected {
   background-color: var(--zn-color-purple-100);
 
-  &:nth-of-type(even) {
-    background-color: hsla(from var(--zn-color-purple-200) h s l / 0.8);
-  }
-
   &:hover {
     background-color: var(--zn-color-purple-200) !important;
   }
@@ -393,13 +435,16 @@ table tbody tr.table__row--selected {
       border-bottom-right-radius: 0;
     }
   }
+
+  &.table__row--odd {
+    background-color: hsla(from var(--zn-color-purple-200) h s l / 0.8);
+  }
 }
 
 table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
   border-bottom-color: var(--zn-color-purple-600) !important;
 }
 
-
 .table-group__title {
   font-weight: var(--zn-font-weight-semibold);
   font-size: var(--zn-font-size-large);
@@ -411,3 +456,4 @@ table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+

package/src/components/editor/editor.component.ts

@@ -374,7 +374,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   }
 
   private _handleTextChange() {
-    this.value = this.quillElement.root.innerHTML;
+    this.value = this.quillElement.getSemanticHTML();
     this.editorHtml.value = this.value;
     this.emit('zn-change');
   }

package/src/components/filter-container/filter-container.component.ts

@@ -1,5 +1,5 @@
-import {property} from 'lit/decorators.js';
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './filter-container.scss';

package/src/components/filter-wrapper/filter-wrapper.component.ts

@@ -47,7 +47,7 @@ export default class ZnFilterWrapper extends ZincElement {
     event.preventDefault();
     const dataTable: ZnDataTable | null = this.closest('zn-data-table');
     if (dataTable) {
-      const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-data-select', 'input', 'select', 'textarea'];
+      const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-data-select', 'zn-datepicker', 'input', 'select', 'textarea'];
       const inputs = Array.from(this.querySelectorAll(allowedInputs.join(','))) as AllowedInputElement[];
       const params: Record<string, any> = {};
       inputs.forEach(input => {

package/src/components/form-group/form-group.component.ts

@@ -35,7 +35,6 @@ export default class ZnFormGroup extends ZincElement {
   /** The form groups help text. If you need to display HTML, use the `help-text` slot instead. */
   @property({attribute: 'help-text'}) helpText = '';
 
-
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabelTooltipSlot = this.hasSlotController.test('label-tooltip');

package/src/components/form-group/form-group.scss

@@ -43,7 +43,6 @@
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--zn-spacing-medium) var(--zn-spacing-small);
-  flex: 1 1 auto;
 
   @include wc.media-query(md) {
     grid-template-columns: repeat(6, 1fr);