@toolbox-web/grid 0.5.0 → 1.0.0

package/lib/plugins/multi-sort/MultiSortPlugin.d.ts

@@ -4,19 +4,98 @@ import { MultiSortConfig, SortModel } from './types';
 /**
  * Multi-Sort Plugin for tbw-grid
  *
- * @example
+ * Enables sorting by multiple columns at once—hold Shift and click additional column
+ * headers to build up a sort stack. Priority badges show the sort order, so users
+ * always know which column takes precedence.
+ *
+ * ## Installation
+ *
+ * ```ts
+ * import { MultiSortPlugin } from '@toolbox-web/grid/plugins/multi-sort';
+ * ```
+ *
+ * ## Configuration Options
+ *
+ * | Option | Type | Default | Description |
+ * |--------|------|---------|-------------|
+ * | `maxSortColumns` | `number` | `3` | Maximum columns to sort by |
+ * | `showSortIndex` | `boolean` | `true` | Show sort priority badges |
+ * | `initialSort` | `SortModel[]` | - | Pre-configured sort order on load |
+ *
+ * ## Keyboard Shortcuts
+ *
+ * | Shortcut | Action |
+ * |----------|--------|
+ * | `Click header` | Sort by column (clears other sorts) |
+ * | `Shift + Click` | Add column to multi-sort stack |
+ * | `Ctrl + Click` | Toggle sort direction |
+ *
+ * ## Events
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `sort-change` | `{ sortModel: SortModel[] }` | Fired when sort changes |
+ *
+ * ## Programmatic API
+ *
+ * | Method | Signature | Description |
+ * |--------|-----------|-------------|
+ * | `setSort` | `(sortModel: SortModel[]) => void` | Set sort programmatically |
+ * | `getSortModel` | `() => SortModel[]` | Get current sort model |
+ * | `clearSort` | `() => void` | Clear all sorting |
+ * | `addSort` | `(field, direction) => void` | Add a column to sort |
+ * | `removeSort` | `(field) => void` | Remove a column from sort |
+ *
+ * @example Basic Multi-Column Sorting
+ * ```ts
+ * import '@toolbox-web/grid';
+ * import { MultiSortPlugin } from '@toolbox-web/grid/plugins/multi-sort';
+ *
+ * const grid = document.querySelector('tbw-grid');
+ * grid.gridConfig = {
+ *   columns: [
+ *     { field: 'name', header: 'Name', sortable: true },
+ *     { field: 'department', header: 'Department', sortable: true },
+ *     { field: 'salary', header: 'Salary', type: 'number', sortable: true },
+ *   ],
+ *   plugins: [new MultiSortPlugin({ maxSortColumns: 3, showSortIndex: true })],
+ * };
+ *
+ * grid.addEventListener('sort-change', (e) => {
+ *   console.log('Active sorts:', e.detail.sortModel);
+ * });
+ * ```
+ *
+ * @example Initial Sort Configuration
  * ```ts
- * new MultiSortPlugin({ maxSortColumns: 3, showSortIndex: true })
+ * new MultiSortPlugin({
+ *   initialSort: [
+ *     { field: 'department', direction: 'asc' },
+ *     { field: 'salary', direction: 'desc' },
+ *   ],
+ * })
  * ```
+ *
+ * @see {@link MultiSortConfig} for all configuration options
+ * @see {@link SortModel} for the sort model structure
+ *
+ * @internal Extends BaseGridPlugin
  */
 export declare class MultiSortPlugin extends BaseGridPlugin<MultiSortConfig> {
+    /** @internal */
     readonly name = "multiSort";
+    /** @internal */
     readonly styles: string;
+    /** @internal */
     protected get defaultConfig(): Partial<MultiSortConfig>;
     private sortModel;
+    /** @internal */
     detach(): void;
+    /** @internal */
     processRows(rows: readonly unknown[]): unknown[];
+    /** @internal */
     onHeaderClick(event: HeaderClickEvent): boolean;
+    /** @internal */
     afterRender(): void;
     /**
      * Get the current sort model.
@@ -46,11 +125,13 @@ export declare class MultiSortPlugin extends BaseGridPlugin<MultiSortConfig> {
     getSortDirection(field: string): 'asc' | 'desc' | undefined;
     /**
      * Return sort state for a column if it's in the sort model.
+     * @internal
      */
     getColumnState(field: string): Partial<ColumnState> | undefined;
     /**
      * Apply sort state from column state.
      * Rebuilds the sort model from all column states.
+     * @internal
      */
     applyColumnState(field: string, state: ColumnState): void;
 }

package/lib/plugins/multi-sort/MultiSortPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSortPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/multi-sort/MultiSortPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;;;;GAOG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,QAAQ,CAAC,IAAI,eAAe;IAC5B,SAAkB,MAAM,SAAU;IAElC,cAAuB,aAAa,IAAI,OAAO,CAAC,eAAe,CAAC,CAK/D;IAGD,OAAO,CAAC,SAAS,CAAmB;IAK3B,MAAM,IAAI,IAAI;IAOd,WAAW,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,GAAG,OAAO,EAAE;IAOhD,aAAa,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO;IAe/C,WAAW,IAAI,IAAI;IAiE5B;;;OAGG;IACH,YAAY,IAAI,SAAS,EAAE;IAI3B;;;OAGG;IACH,YAAY,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI;IAMtC;;OAEG;IACH,SAAS,IAAI,IAAI;IAMjB;;;;OAIG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAI/C;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS;IAO3D;;OAEG;IACM,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,SAAS;IAaxE;;;OAGG;IACM,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,IAAI;CA2BnE"}
+{"version":3,"file":"MultiSortPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/multi-sort/MultiSortPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,gBAAgB;IAChB,QAAQ,CAAC,IAAI,eAAe;IAC5B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,eAAe,CAAC,CAK/D;IAGD,OAAO,CAAC,SAAS,CAAmB;IAKpC,gBAAgB;IACP,MAAM,IAAI,IAAI;IAOvB,gBAAgB;IACP,WAAW,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,GAAG,OAAO,EAAE;IAOzD,gBAAgB;IACP,aAAa,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO;IAexD,gBAAgB;IACP,WAAW,IAAI,IAAI;IAiE5B;;;OAGG;IACH,YAAY,IAAI,SAAS,EAAE;IAI3B;;;OAGG;IACH,YAAY,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI;IAMtC;;OAEG;IACH,SAAS,IAAI,IAAI;IAMjB;;;;OAIG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAI/C;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS;IAO3D;;;OAGG;IACM,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,SAAS;IAaxE;;;;OAIG;IACM,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,IAAI;CA2BnE"}

package/lib/plugins/multi-sort/index.d.ts

@@ -1,6 +1,8 @@
 /**
  * Multi Sort Plugin Entry Point
  * Re-exports plugin class and types for tree-shakeable imports.
+ *
+ * @module Plugins/Multi-Sort
  */
 export { MultiSortPlugin } from './MultiSortPlugin';
 export type { MultiSortConfig, SortModel } from './types';

package/lib/plugins/multi-sort/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/multi-sort/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/multi-sort/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/lib/plugins/multi-sort/index.js

@@ -184,23 +184,6 @@ class x {
   get gridElement() {
     return this.grid;
   }
-  /**
-   * Get the render root of the grid for DOM queries.
-   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
-   *
-   * With Shadow DOM removed, the grid element itself is the render root.
-   * All new code should use `this.gridElement` for DOM queries.
-   *
-   * @example
-   * // OLD (deprecated)
-   * const rows = this.shadowRoot?.querySelector('.rows');
-   *
-   * // NEW (preferred)
-   * const rows = this.gridElement.querySelector('.rows');
-   */
-  get shadowRoot() {
-    return this.gridElement;
-  }
   /**
    * Get the disconnect signal for event listener cleanup.
    * This signal is aborted when the grid disconnects from the DOM.
@@ -328,9 +311,12 @@ function m(r, t) {
   return r.find((e) => e.field === t)?.direction;
 }
 const M = '@layer tbw-plugins{.header-cell[data-sort=asc]:after{content:"↑";margin-left:4px;opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:4px;opacity:.8}.sort-indicator{margin-left:4px;opacity:.8}.sort-index{font-size:10px;background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;margin-left:2px;font-weight:600}}';
-class w extends x {
+class I extends x {
+  /** @internal */
   name = "multiSort";
+  /** @internal */
   styles = M;
+  /** @internal */
   get defaultConfig() {
     return {
       maxSortColumns: 3,
@@ -341,19 +327,23 @@ class w extends x {
   sortModel = [];
   // #endregion
   // #region Lifecycle
+  /** @internal */
   detach() {
     this.sortModel = [];
   }
   // #endregion
   // #region Hooks
+  /** @internal */
   processRows(t) {
     return this.sortModel.length === 0 ? [...t] : S([...t], this.sortModel, [...this.columns]);
   }
+  /** @internal */
   onHeaderClick(t) {
     if (!this.columns.find((n) => n.field === t.field)?.sortable) return !1;
     const o = t.originalEvent.shiftKey, i = this.config.maxSortColumns ?? 3;
     return this.sortModel = C(this.sortModel, t.field, o, i), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
   }
+  /** @internal */
   afterRender() {
     const t = this.gridElement;
     if (!t) return;
@@ -417,6 +407,7 @@ class w extends x {
   // #region Column State Hooks
   /**
    * Return sort state for a column if it's in the sort model.
+   * @internal
    */
   getColumnState(t) {
     const e = this.sortModel.findIndex((i) => i.field === t);
@@ -430,6 +421,7 @@ class w extends x {
   /**
    * Apply sort state from column state.
    * Rebuilds the sort model from all column states.
+   * @internal
    */
   applyColumnState(t, e) {
     if (!e.sort) {
@@ -445,6 +437,6 @@ class w extends x {
   // #endregion
 }
 export {
-  w as MultiSortPlugin
+  I as MultiSortPlugin
 };
 //# sourceMappingURL=index.js.map