@kubex/zinc 1.0.14 → 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.14",
+  "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/data-table/data-table.component.ts

@@ -158,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';
@@ -813,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);
+      }
     };
   }
 
@@ -1051,23 +1058,11 @@ export default class ZnDataTable extends ZincElement {
   }
 
   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;
@@ -1136,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/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/note/note.component.ts

@@ -5,6 +5,7 @@ import {property, state} from "lit/decorators.js";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './note.scss';
+import {HasSlotController} from "../../internal/slot";
 
 /**
  * @summary Short summary of the component's intended use.
@@ -32,36 +33,19 @@ export default class ZnNote extends ZincElement {
   @property({reflect: true}) date: string = '';
   @property({type: HTMLElement, reflect: true}) body: string = '';
 
-  // Number of lines at which the note body collapses; 0 disables collapsing
-  @property({type: Number, attribute: 'collapse-at-lines', reflect: true}) collapseAtLines: number = 3;
+  private readonly hasSlotController = new HasSlotController(this, 'caption', 'date', '[default]', 'snippet', 'footer');
 
-  // Internal state: whether the body is currently expanded
-  @state() private expanded = false;
+  @state()
+  private expanded: boolean = false;
 
-  private _toggleExpand = () => {
+  private _toggleExpand(): void {
     this.expanded = !this.expanded;
-    this.updateComplete.then(() => this._measureOverflow());
-  }
-
-  private _measureOverflow() {
-    const container = this.shadowRoot?.querySelector('.note__body-container') as HTMLElement | null;
-    if (!container || this.collapseAtLines <= 0) {
-      return;
-    }
-
-    container.style.setProperty('--note-collapse-lines', String(this.collapseAtLines));
-    container.classList.toggle('note__body--clamped', !this.expanded);
-  }
-
-  protected firstUpdated() {
-    this._measureOverflow();
-  }
-
-  protected updated() {
-    this._measureOverflow();
   }
 
   protected render(): unknown {
+    const showExpandableButton: boolean = this.hasSlotController.test('snippet')
+      && this.hasSlotController.test('[default]');
+
     return html`
       <div class="${classMap({
         'note': true,
@@ -80,15 +64,18 @@ export default class ZnNote extends ZincElement {
           <slot name="date" class="note__header__date">
             <small>${this.date}</small>
           </slot>
-          <slot name="action"></slot>
-        </div>
-        <div class="${classMap({
-          'note__body-container': true,
-          'note__body--clamped': this.collapseAtLines > 0 && !this.expanded
-        })}" style="--note-collapse-lines: ${this.collapseAtLines}">
-          <slot class="note__body"></slot>
         </div>
-        ${this.collapseAtLines > 0 ? html`
+
+        ${this.expanded && showExpandableButton ?
+          html`
+            <slot class="note__body"></slot>` :
+          html`
+            <slot name="snippet" class="note__snippet"></slot>`}
+
+        ${!showExpandableButton ? html`
+          <slot class="note__body"></slot>` : ' '}
+
+        ${!showExpandableButton ? '' : html`
           <div class="note__toggle">
             <zn-button color="transparent"
                        size="content"
@@ -97,8 +84,7 @@ export default class ZnNote extends ZincElement {
                        aria-expanded="${String(this.expanded)}">
               ${this.expanded ? 'Show less' : 'Show more'}
             </zn-button>
-          </div>
-        ` : ''}
+          </div>`}
         <slot name="footer" class="note__footer"></slot>
       </div>
     `;

package/src/components/note/note.scss

@@ -64,6 +64,14 @@ $colors: (
     padding: 0;
   }
 
+  &__body--clamped {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--note-collapse-lines, 0);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   @each $name, $color in $colors {
     &--#{'' + $name} {
       .note__header__caption {