@toolbox-web/grid 1.27.2 → 1.28.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.d.ts +1 -0
- package/all.js +2 -2
- package/all.js.map +1 -1
- package/index.js +1 -1
- package/index.js.map +1 -1
- package/lib/core/types.d.ts +0 -2
- package/lib/features/tooltip.d.ts +7 -0
- package/lib/features/tooltip.js +2 -0
- package/lib/features/tooltip.js.map +1 -0
- package/lib/plugins/clipboard/ClipboardPlugin.d.ts +1 -1
- package/lib/plugins/clipboard/index.js +1 -1
- package/lib/plugins/clipboard/index.js.map +1 -1
- package/lib/plugins/column-virtualization/index.js +1 -1
- package/lib/plugins/column-virtualization/index.js.map +1 -1
- package/lib/plugins/context-menu/index.js +1 -1
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/editing/index.js +1 -1
- package/lib/plugins/editing/index.js.map +1 -1
- package/lib/plugins/editing/types.d.ts +2 -0
- package/lib/plugins/export/index.js +1 -1
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/index.js +1 -1
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/index.js +1 -1
- package/lib/plugins/grouping-columns/index.js.map +1 -1
- package/lib/plugins/grouping-rows/index.js +2 -2
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/master-detail/index.js +1 -1
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js +1 -1
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/index.js +1 -1
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-rows/index.js +1 -1
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js +1 -1
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/print/index.js +1 -1
- package/lib/plugins/print/index.js.map +1 -1
- package/lib/plugins/reorder-columns/index.js +1 -1
- package/lib/plugins/reorder-columns/index.js.map +1 -1
- package/lib/plugins/reorder-rows/index.js +1 -1
- package/lib/plugins/reorder-rows/index.js.map +1 -1
- package/lib/plugins/responsive/index.js +1 -1
- package/lib/plugins/responsive/index.js.map +1 -1
- package/lib/plugins/selection/index.js +1 -1
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/server-side/index.js +1 -1
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/tooltip/TooltipPlugin.d.ts +52 -0
- package/lib/plugins/tooltip/index.d.ts +8 -0
- package/lib/plugins/tooltip/index.js +2 -0
- package/lib/plugins/tooltip/index.js.map +1 -0
- package/lib/plugins/tooltip/types.d.ts +78 -0
- package/lib/plugins/tree/index.js +1 -1
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/undo-redo/index.js +1 -1
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/index.js +1 -1
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +1 -1
- package/umd/grid.all.umd.js +1 -1
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +1 -1
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/clipboard.umd.js +1 -1
- package/umd/plugins/clipboard.umd.js.map +1 -1
- package/umd/plugins/context-menu.umd.js +1 -1
- package/umd/plugins/context-menu.umd.js.map +1 -1
- package/umd/plugins/editing.umd.js +1 -1
- package/umd/plugins/editing.umd.js.map +1 -1
- package/umd/plugins/tooltip.umd.js +2 -0
- package/umd/plugins/tooltip.umd.js.map +1 -0
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { TooltipPlugin } from './TooltipPlugin';
|
|
2
|
+
declare module '../../core/types' {
|
|
3
|
+
interface BaseColumnConfig<TRow, TValue> {
|
|
4
|
+
/**
|
|
5
|
+
* Cell tooltip configuration. Requires TooltipPlugin.
|
|
6
|
+
*
|
|
7
|
+
* - `false` — disable cell tooltips for this column
|
|
8
|
+
* - `string` — static tooltip text for all cells in this column
|
|
9
|
+
* - `(ctx) => string | null` — dynamic tooltip from row data; return `null` to suppress
|
|
10
|
+
*
|
|
11
|
+
* When omitted, the plugin uses the cell's `textContent` on overflow (if `cell` is enabled).
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```typescript
|
|
15
|
+
* // Static tooltip
|
|
16
|
+
* { field: 'status', cellTooltip: 'Current status of the record' }
|
|
17
|
+
*
|
|
18
|
+
* // Dynamic tooltip from row data
|
|
19
|
+
* { field: 'name', cellTooltip: (ctx) => `${ctx.row.firstName} ${ctx.row.lastName}\nDept: ${ctx.row.department}` }
|
|
20
|
+
*
|
|
21
|
+
* // Disable for this column
|
|
22
|
+
* { field: 'actions', cellTooltip: false }
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
cellTooltip?: false | string | ((ctx: CellRenderContext<TRow, TValue>) => string | null);
|
|
26
|
+
/**
|
|
27
|
+
* Header tooltip configuration. Requires TooltipPlugin.
|
|
28
|
+
*
|
|
29
|
+
* - `false` — disable header tooltip for this column
|
|
30
|
+
* - `string` — static tooltip text
|
|
31
|
+
* - `(ctx) => string | null` — dynamic tooltip; return `null` to suppress
|
|
32
|
+
*
|
|
33
|
+
* When omitted, the plugin uses the column `header` text on overflow (if `header` is enabled).
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```typescript
|
|
37
|
+
* // Custom header tooltip with description
|
|
38
|
+
* { field: 'revenue', headerTooltip: 'Total revenue in USD (before tax)' }
|
|
39
|
+
*
|
|
40
|
+
* // Disable for this column
|
|
41
|
+
* { field: 'id', headerTooltip: false }
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
headerTooltip?: false | string | ((ctx: HeaderLabelContext<TRow>) => string | null);
|
|
45
|
+
}
|
|
46
|
+
interface PluginNameMap {
|
|
47
|
+
tooltip: TooltipPlugin;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Configuration for the Tooltip plugin.
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```typescript
|
|
55
|
+
* // Enable both header and cell tooltips (default)
|
|
56
|
+
* new TooltipPlugin()
|
|
57
|
+
*
|
|
58
|
+
* // Header tooltips only
|
|
59
|
+
* new TooltipPlugin({ cell: false })
|
|
60
|
+
*
|
|
61
|
+
* // Disable all tooltips temporarily
|
|
62
|
+
* new TooltipPlugin({ header: false, cell: false })
|
|
63
|
+
* ```
|
|
64
|
+
*/
|
|
65
|
+
export interface TooltipConfig {
|
|
66
|
+
/**
|
|
67
|
+
* Enable automatic header tooltips when text overflows.
|
|
68
|
+
* Individual columns can override with `headerTooltip`.
|
|
69
|
+
* @default true
|
|
70
|
+
*/
|
|
71
|
+
header?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Enable automatic cell tooltips when text overflows.
|
|
74
|
+
* Individual columns can override with `cellTooltip`.
|
|
75
|
+
* @default true
|
|
76
|
+
*/
|
|
77
|
+
cell?: boolean;
|
|
78
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function e(e,t){return`[tbw-grid${e?`#${e}`:""}${t?`:${t}`:""}]`}function t(t,n,i,r){return`${e(i,r)} ${t}: ${n}\n\n → More info: ${function(e){return`https://toolboxjs.com/grid/errors#${e.toLowerCase()}`}(t)}`}const n='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',i={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:n,filterActive:n,print:"🖨️"};class r{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const n=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(n),n.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...i,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),n=parseInt(t,10);if(!isNaN(n))return n}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(n,i){void 0!==i?console.warn(t(n,i,this.gridElement.id,this.name)):console.warn(`${e(this.gridElement.id,this.name)} ${n}`)}throwDiagnostic(e,n){throw new Error(t(e,n,this.gridElement.id,this.name))}}function s(e,t,n){return void 0!==e.id?String(e.id):n?`${n}-${t}`:String(t)}function a(e,t){const n=new Set(e);return n.has(t)?n.delete(t):n.add(t),n}function o(e,t,n=null,i=0){const r=t.childrenField??"children",a=/* @__PURE__ */new Set;for(let d=0;d<e.length;d++){const l=e[d],h=s(l,d,n),c=l[r];if(Array.isArray(c)&&c.length>0){a.add(h);const e=o(c,t,h,i+1);for(const t of e)a.add(t)}}return a}function d(e,t,n,i=null,r=0){const a=n.childrenField??"children";for(let o=0;o<e.length;o++){const l=e[o],h=s(l,o,i);if(h===t)return[h];const c=l[a];if(Array.isArray(c)&&c.length>0){const e=d(c,t,n,h,r+1);if(e)return[h,...e]}}return null}function l(e,t,n,i){const r=d(e,t,n);if(!r)return i;const s=new Set(i);for(let a=0;a<r.length-1;a++)s.add(r[a]);return s}function h(e,t="children"){if(!Array.isArray(e)||0===e.length)return!1;for(const n of e){if(!n)continue;const e=n[t];if(Array.isArray(e)&&e.length>0)return!0}return!1}class c extends r{static manifest={incompatibleWith:[{name:"groupingRows",reason:"Both plugins transform the entire row model. TreePlugin flattens nested hierarchies while GroupingRowsPlugin groups flat rows with synthetic headers. Use one approach per grid."},{name:"pivot",reason:"PivotPlugin replaces the entire row and column structure with aggregated pivot data. Tree hierarchy cannot coexist with pivot aggregation."},{name:"serverSide",reason:"TreePlugin requires the full hierarchy to flatten and manage expansion state. ServerSidePlugin lazy-loads rows in blocks and cannot provide nested children on demand."}],events:[{type:"tree-state-change",description:"Emitted when tree expansion state changes (toggle, expand all, collapse all)"}],queries:[{type:"canMoveRow",description:"Returns false for rows with children (parent nodes cannot be reordered)"}]};name="tree";styles="@layer tbw-plugins{tbw-grid .cell[data-field=__tbw_expander]{border-inline-end:none!important;padding:0;display:flex;align-items:center;justify-content:flex-start}tbw-grid .header-row .cell[data-field=__tbw_expander]{display:none}tbw-grid .header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}tbw-grid .tree-cell-wrapper{display:inline-flex;align-items:center;padding-inline-start:calc(var(--tbw-tree-depth, 0) * var(--tbw-tree-indent-width, var(--tbw-tree-toggle-size, 1.25em)))}tbw-grid .tree-expander{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;box-sizing:border-box}tbw-grid .tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-tree-toggle-size, 1.25em);height:var(--tbw-tree-toggle-size, 1.25em);flex-shrink:0}tbw-grid .tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}tbw-grid .tree-spacer{width:var(--tbw-tree-toggle-size, 1.25em);display:inline-block;flex-shrink:0}tbw-grid .data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}tbw-grid .data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}}";get defaultConfig(){return{childrenField:"children",autoDetect:!0,defaultExpanded:!1,indentWidth:20,showExpandIcons:!0,animation:"slide"}}expandedKeys=/* @__PURE__ */new Set;initialExpansionDone=!1;flattenedRows=[];rowKeyMap=/* @__PURE__ */new Map;previousVisibleKeys=/* @__PURE__ */new Set;keysToAnimate=/* @__PURE__ */new Set;sortState=null;detach(){this.expandedKeys.clear(),this.initialExpansionDone=!1,this.flattenedRows=[],this.rowKeyMap.clear(),this.previousVisibleKeys.clear(),this.keysToAnimate.clear(),this.sortState=null}handleQuery(e){if("canMoveRow"===e.type){const t=e.context,n=this.config.childrenField??"children",i=t?.[n];if(Array.isArray(i)&&i.length>0)return!1}}get animationStyle(){return!!this.isAnimationEnabled&&(this.config.animation??"slide")}detect(e){if(!this.config.autoDetect)return!1;const t=e,n=this.config.childrenField??function(e){if(!Array.isArray(e)||0===e.length)return null;const t=["children","items","nodes","subRows","nested"];for(const n of e)if(n&&"object"==typeof n)for(const e of t){const t=n[e];if(Array.isArray(t)&&t.length>0)return e}return null}(t)??"children";return h(t,n)}processRows(e){const t=e;if(!h(t,this.config.childrenField??"children"))return this.flattenedRows=[],this.rowKeyMap.clear(),this.previousVisibleKeys.clear(),[...e];let n=this.withStableKeys(t);this.sortState&&(n=this.sortTree(n,this.sortState.field,this.sortState.direction)),this.config.defaultExpanded&&!this.initialExpansionDone&&(this.expandedKeys=o(n,this.config),this.initialExpansionDone=!0),this.flattenedRows=this.flattenTree(n,this.expandedKeys),this.rowKeyMap.clear(),this.keysToAnimate.clear();const i=/* @__PURE__ */new Set;for(const r of this.flattenedRows)this.rowKeyMap.set(r.key,r),i.add(r.key),!this.previousVisibleKeys.has(r.key)&&r.depth>0&&this.keysToAnimate.add(r.key);return this.previousVisibleKeys=i,this.flattenedRows.map(e=>({...e.data,__treeKey:e.key,__treeDepth:e.depth,__treeHasChildren:e.hasChildren,__treeExpanded:e.isExpanded}))}withStableKeys(e,t=null){const n=this.config.childrenField??"children";return e.map((e,i)=>{const r=e.__stableKey,s=void 0!==e.id?String(e.id):r??(t?`${t}-${i}`:String(i)),a=e[n],o=Array.isArray(a)&&a.length>0;return{...e,__stableKey:s,...o?{[n]:this.withStableKeys(a,s)}:{}}})}flattenTree(e,t,n=0){const i=this.config.childrenField??"children",r=[];for(const s of e){const e=s.__stableKey??String(s.id??"?"),a=s[i],o=Array.isArray(a)&&a.length>0,d=t.has(e);r.push({key:e,data:s,depth:n,hasChildren:o,isExpanded:d,parentKey:n>0&&e.substring(0,e.lastIndexOf("-"))||null}),o&&d&&r.push(...this.flattenTree(a,t,n+1))}return r}sortTree(e,t,n){const i=this.config.childrenField??"children";return[...e].sort((e,i)=>{const r=e[t],s=i[t];return null==r&&null==s?0:null==r?-1:null==s?1:r>s?n:r<s?-n:0}).map(e=>{const r=e[i];return Array.isArray(r)&&r.length>0?{...e,[i]:this.sortTree(r,t,n)}:e})}processColumns(e){if(0===this.flattenedRows.length)return[...e];const t=[...e];if(0===t.length)return t;const n=t[0],i=n.viewRenderer,r=()=>this.config,s=this.setIcon.bind(this),a=this.resolveIcon.bind(this);return t[0]={...n,viewRenderer:e=>{const{row:t,value:n}=e,{showExpandIcons:o=!0,indentWidth:d}=r(),l=t,h=l.__treeDepth??0,c=document.createElement("span");if(c.className="tree-cell-wrapper",c.style.setProperty("--tbw-tree-depth",String(h)),void 0!==d&&c.style.setProperty("--tbw-tree-indent-width",`${d}px`),o)if(l.__treeHasChildren){const e=document.createElement("span");e.className="tree-toggle"+(l.__treeExpanded?" expanded":""),s(e,a(l.__treeExpanded?"collapse":"expand")),e.setAttribute("data-tree-key",String(l.__treeKey??"")),c.appendChild(e)}else{const e=document.createElement("span");e.className="tree-spacer",c.appendChild(e)}const u=document.createElement("span");if(u.className="tree-content",i){const t=i(e);t instanceof Node?u.appendChild(t):"string"==typeof t&&(u.innerHTML=t)}else u.textContent=null!=n?String(n):"";return c.appendChild(u),c}},t}onCellClick(e){const t=e.originalEvent?.target;if(!t?.classList.contains("tree-toggle"))return!1;const n=t.getAttribute("data-tree-key");if(!n)return!1;const i=this.rowKeyMap.get(n);return!!i&&(this.expandedKeys=a(this.expandedKeys,n),this.emit("tree-expand",{key:n,row:i.data,expanded:this.expandedKeys.has(n),depth:i.depth}),this.requestRender(),!0)}onKeyDown(e){if(" "!==e.key)return;const t=this.grid._focusRow,n=this.flattenedRows[t];return n?.hasChildren?(e.preventDefault(),this.expandedKeys=a(this.expandedKeys,n.key),this.emit("tree-expand",{key:n.key,row:n.data,expanded:this.expandedKeys.has(n.key),depth:n.depth}),this.requestRenderWithFocus(),!0):void 0}onHeaderClick(e){if(0===this.flattenedRows.length||!e.column.sortable)return!1;const{field:t}=e.column;this.sortState&&this.sortState.field===t?1===this.sortState.direction?this.sortState={field:t,direction:-1}:this.sortState=null:this.sortState={field:t,direction:1};const n=this.grid;return void 0!==n._sortState&&(n._sortState=this.sortState?{...this.sortState}:null),this.emit("sort-change",{field:t,direction:this.sortState?.direction??0}),this.requestRender(),!0}afterRender(){const e=this.gridElement?.querySelector(".rows");if(!e)return;const t=this.animationStyle,n=!1!==t&&this.keysToAnimate.size>0,i="fade"===t?"tbw-tree-fade-in":"tbw-tree-slide-in";for(const r of e.querySelectorAll(".data-grid-row")){const e=r.querySelector(".cell[data-row]"),t=e?parseInt(e.getAttribute("data-row")??"-1",10):-1,s=this.flattenedRows[t];s?.hasChildren&&r.setAttribute("aria-expanded",String(s.isExpanded)),n&&s?.key&&this.keysToAnimate.has(s.key)&&(r.classList.add(i),r.addEventListener("animationend",()=>r.classList.remove(i),{once:!0}))}this.keysToAnimate.clear()}expand(e){this.expandedKeys.add(e),this.requestRender()}collapse(e){this.expandedKeys.delete(e),this.requestRender()}toggle(e){this.expandedKeys=a(this.expandedKeys,e),this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}expandAll(){this.expandedKeys=o(this.rows,this.config),this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}collapseAll(){this.expandedKeys=/* @__PURE__ */new Set,this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}isExpanded(e){return this.expandedKeys.has(e)}getExpandedKeys(){return[...this.expandedKeys]}getFlattenedRows(){return[...this.flattenedRows]}getRowByKey(e){return this.rowKeyMap.get(e)?.data}expandToKey(e){this.expandedKeys=l(this.rows,e,this.config,this.expandedKeys),this.requestRender()}}export{c as TreePlugin};
|
|
1
|
+
function e(e,t){return`[tbw-grid${e?`#${e}`:""}${t?`:${t}`:""}]`}function t(t,n,r,i){return`${e(r,i)} ${t}: ${n}\n\n → More info: ${function(e){return`https://toolboxjs.com/grid/errors#${e.toLowerCase()}`}(t)}`}const n=/* @__PURE__ */new Set(["script","iframe","object","embed","form","input","button","textarea","select","link","meta","base","style","template","slot","portal","frame","frameset","applet","noscript","noembed","plaintext","xmp","listing"]),r=/^on\w+$/i,i=/* @__PURE__ */new Set(["href","src","action","formaction","data","srcdoc","xlink:href","poster","srcset"]),s=/^\s*(javascript|vbscript|data|blob):/i;function a(e){if(!e||"string"!=typeof e)return"";if(-1===e.indexOf("<"))return e;const t=document.createElement("template");return t.innerHTML=e,function(e){const t=[],a=e.querySelectorAll("*");for(const o of a){const e=o.tagName.toLowerCase();if(n.has(e)){t.push(o);continue}if("svg"===e||"http://www.w3.org/2000/svg"===o.namespaceURI){if(Array.from(o.attributes).some(e=>r.test(e.name)||"href"===e.name||"xlink:href"===e.name)){t.push(o);continue}}const a=[];for(const t of o.attributes){const e=t.name.toLowerCase();r.test(e)?a.push(t.name):(i.has(e)&&s.test(t.value)||"style"===e&&/expression\s*\(|javascript:|behavior\s*:/i.test(t.value))&&a.push(t.name)}a.forEach(e=>o.removeAttribute(e))}t.forEach(e=>e.remove())}(t.content),t.innerHTML}const o='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',d={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:o,filterActive:o,print:"🖨️"};class l{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const n=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(n),n.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...d,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),n=parseInt(t,10);if(!isNaN(n))return n}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=a(t):t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(n,r){void 0!==r?console.warn(t(n,r,this.gridElement.id,this.name)):console.warn(`${e(this.gridElement.id,this.name)} ${n}`)}throwDiagnostic(e,n){throw new Error(t(e,n,this.gridElement.id,this.name))}}function h(e,t,n){return void 0!==e.id?String(e.id):n?`${n}-${t}`:String(t)}function c(e,t){const n=new Set(e);return n.has(t)?n.delete(t):n.add(t),n}function u(e,t,n=null,r=0){const i=t.childrenField??"children",s=/* @__PURE__ */new Set;for(let a=0;a<e.length;a++){const o=e[a],d=h(o,a,n),l=o[i];if(Array.isArray(l)&&l.length>0){s.add(d);const e=u(l,t,d,r+1);for(const t of e)s.add(t)}}return s}function g(e,t,n,r=null,i=0){const s=n.childrenField??"children";for(let a=0;a<e.length;a++){const o=e[a],d=h(o,a,r);if(d===t)return[d];const l=o[s];if(Array.isArray(l)&&l.length>0){const e=g(l,t,n,d,i+1);if(e)return[d,...e]}}return null}function p(e,t,n,r){const i=g(e,t,n);if(!i)return r;const s=new Set(r);for(let a=0;a<i.length-1;a++)s.add(i[a]);return s}function f(e,t="children"){if(!Array.isArray(e)||0===e.length)return!1;for(const n of e){if(!n)continue;const e=n[t];if(Array.isArray(e)&&e.length>0)return!0}return!1}class w extends l{static manifest={incompatibleWith:[{name:"groupingRows",reason:"Both plugins transform the entire row model. TreePlugin flattens nested hierarchies while GroupingRowsPlugin groups flat rows with synthetic headers. Use one approach per grid."},{name:"pivot",reason:"PivotPlugin replaces the entire row and column structure with aggregated pivot data. Tree hierarchy cannot coexist with pivot aggregation."},{name:"serverSide",reason:"TreePlugin requires the full hierarchy to flatten and manage expansion state. ServerSidePlugin lazy-loads rows in blocks and cannot provide nested children on demand."}],events:[{type:"tree-state-change",description:"Emitted when tree expansion state changes (toggle, expand all, collapse all)"}],queries:[{type:"canMoveRow",description:"Returns false for rows with children (parent nodes cannot be reordered)"}]};name="tree";styles="@layer tbw-plugins{tbw-grid .cell[data-field=__tbw_expander]{border-inline-end:none!important;padding:0;display:flex;align-items:center;justify-content:flex-start}tbw-grid .header-row .cell[data-field=__tbw_expander]{display:none}tbw-grid .header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}tbw-grid .tree-cell-wrapper{display:inline-flex;align-items:center;padding-inline-start:calc(var(--tbw-tree-depth, 0) * var(--tbw-tree-indent-width, var(--tbw-tree-toggle-size, 1.25em)))}tbw-grid .tree-expander{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;box-sizing:border-box}tbw-grid .tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-tree-toggle-size, 1.25em);height:var(--tbw-tree-toggle-size, 1.25em);flex-shrink:0}tbw-grid .tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}tbw-grid .tree-spacer{width:var(--tbw-tree-toggle-size, 1.25em);display:inline-block;flex-shrink:0}tbw-grid .data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}tbw-grid .data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}}";get defaultConfig(){return{childrenField:"children",autoDetect:!0,defaultExpanded:!1,indentWidth:20,showExpandIcons:!0,animation:"slide"}}expandedKeys=/* @__PURE__ */new Set;initialExpansionDone=!1;flattenedRows=[];rowKeyMap=/* @__PURE__ */new Map;previousVisibleKeys=/* @__PURE__ */new Set;keysToAnimate=/* @__PURE__ */new Set;sortState=null;detach(){this.expandedKeys.clear(),this.initialExpansionDone=!1,this.flattenedRows=[],this.rowKeyMap.clear(),this.previousVisibleKeys.clear(),this.keysToAnimate.clear(),this.sortState=null}handleQuery(e){if("canMoveRow"===e.type){const t=e.context,n=this.config.childrenField??"children",r=t?.[n];if(Array.isArray(r)&&r.length>0)return!1}}get animationStyle(){return!!this.isAnimationEnabled&&(this.config.animation??"slide")}detect(e){if(!this.config.autoDetect)return!1;const t=e,n=this.config.childrenField??function(e){if(!Array.isArray(e)||0===e.length)return null;const t=["children","items","nodes","subRows","nested"];for(const n of e)if(n&&"object"==typeof n)for(const e of t){const t=n[e];if(Array.isArray(t)&&t.length>0)return e}return null}(t)??"children";return f(t,n)}processRows(e){const t=e;if(!f(t,this.config.childrenField??"children"))return this.flattenedRows=[],this.rowKeyMap.clear(),this.previousVisibleKeys.clear(),[...e];let n=this.withStableKeys(t);this.sortState&&(n=this.sortTree(n,this.sortState.field,this.sortState.direction)),this.config.defaultExpanded&&!this.initialExpansionDone&&(this.expandedKeys=u(n,this.config),this.initialExpansionDone=!0),this.flattenedRows=this.flattenTree(n,this.expandedKeys),this.rowKeyMap.clear(),this.keysToAnimate.clear();const r=/* @__PURE__ */new Set;for(const i of this.flattenedRows)this.rowKeyMap.set(i.key,i),r.add(i.key),!this.previousVisibleKeys.has(i.key)&&i.depth>0&&this.keysToAnimate.add(i.key);return this.previousVisibleKeys=r,this.flattenedRows.map(e=>({...e.data,__treeKey:e.key,__treeDepth:e.depth,__treeHasChildren:e.hasChildren,__treeExpanded:e.isExpanded}))}withStableKeys(e,t=null){const n=this.config.childrenField??"children";return e.map((e,r)=>{const i=e.__stableKey,s=void 0!==e.id?String(e.id):i??(t?`${t}-${r}`:String(r)),a=e[n],o=Array.isArray(a)&&a.length>0;return{...e,__stableKey:s,...o?{[n]:this.withStableKeys(a,s)}:{}}})}flattenTree(e,t,n=0){const r=this.config.childrenField??"children",i=[];for(const s of e){const e=s.__stableKey??String(s.id??"?"),a=s[r],o=Array.isArray(a)&&a.length>0,d=t.has(e);i.push({key:e,data:s,depth:n,hasChildren:o,isExpanded:d,parentKey:n>0&&e.substring(0,e.lastIndexOf("-"))||null}),o&&d&&i.push(...this.flattenTree(a,t,n+1))}return i}sortTree(e,t,n){const r=this.config.childrenField??"children";return[...e].sort((e,r)=>{const i=e[t],s=r[t];return null==i&&null==s?0:null==i?-1:null==s?1:i>s?n:i<s?-n:0}).map(e=>{const i=e[r];return Array.isArray(i)&&i.length>0?{...e,[r]:this.sortTree(i,t,n)}:e})}processColumns(e){if(0===this.flattenedRows.length)return[...e];const t=[...e];if(0===t.length)return t;const n=t[0],r=n.viewRenderer,i=()=>this.config,s=this.setIcon.bind(this),a=this.resolveIcon.bind(this);return t[0]={...n,viewRenderer:e=>{const{row:t,value:n}=e,{showExpandIcons:o=!0,indentWidth:d}=i(),l=t,h=l.__treeDepth??0,c=document.createElement("span");if(c.className="tree-cell-wrapper",c.style.setProperty("--tbw-tree-depth",String(h)),void 0!==d&&c.style.setProperty("--tbw-tree-indent-width",`${d}px`),o)if(l.__treeHasChildren){const e=document.createElement("span");e.className="tree-toggle"+(l.__treeExpanded?" expanded":""),s(e,a(l.__treeExpanded?"collapse":"expand")),e.setAttribute("data-tree-key",String(l.__treeKey??"")),c.appendChild(e)}else{const e=document.createElement("span");e.className="tree-spacer",c.appendChild(e)}const u=document.createElement("span");if(u.className="tree-content",r){const t=r(e);t instanceof Node?u.appendChild(t):"string"==typeof t&&(u.innerHTML=t)}else u.textContent=null!=n?String(n):"";return c.appendChild(u),c}},t}onCellClick(e){const t=e.originalEvent?.target;if(!t?.classList.contains("tree-toggle"))return!1;const n=t.getAttribute("data-tree-key");if(!n)return!1;const r=this.rowKeyMap.get(n);return!!r&&(this.expandedKeys=c(this.expandedKeys,n),this.emit("tree-expand",{key:n,row:r.data,expanded:this.expandedKeys.has(n),depth:r.depth}),this.requestRender(),!0)}onKeyDown(e){if(" "!==e.key)return;const t=this.grid._focusRow,n=this.flattenedRows[t];return n?.hasChildren?(e.preventDefault(),this.expandedKeys=c(this.expandedKeys,n.key),this.emit("tree-expand",{key:n.key,row:n.data,expanded:this.expandedKeys.has(n.key),depth:n.depth}),this.requestRenderWithFocus(),!0):void 0}onHeaderClick(e){if(0===this.flattenedRows.length||!e.column.sortable)return!1;const{field:t}=e.column;this.sortState&&this.sortState.field===t?1===this.sortState.direction?this.sortState={field:t,direction:-1}:this.sortState=null:this.sortState={field:t,direction:1};const n=this.grid;return void 0!==n._sortState&&(n._sortState=this.sortState?{...this.sortState}:null),this.emit("sort-change",{field:t,direction:this.sortState?.direction??0}),this.requestRender(),!0}afterRender(){const e=this.gridElement?.querySelector(".rows");if(!e)return;const t=this.animationStyle,n=!1!==t&&this.keysToAnimate.size>0,r="fade"===t?"tbw-tree-fade-in":"tbw-tree-slide-in";for(const i of e.querySelectorAll(".data-grid-row")){const e=i.querySelector(".cell[data-row]"),t=e?parseInt(e.getAttribute("data-row")??"-1",10):-1,s=this.flattenedRows[t];s?.hasChildren&&i.setAttribute("aria-expanded",String(s.isExpanded)),n&&s?.key&&this.keysToAnimate.has(s.key)&&(i.classList.add(r),i.addEventListener("animationend",()=>i.classList.remove(r),{once:!0}))}this.keysToAnimate.clear()}expand(e){this.expandedKeys.add(e),this.requestRender()}collapse(e){this.expandedKeys.delete(e),this.requestRender()}toggle(e){this.expandedKeys=c(this.expandedKeys,e),this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}expandAll(){this.expandedKeys=u(this.rows,this.config),this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}collapseAll(){this.expandedKeys=/* @__PURE__ */new Set,this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}isExpanded(e){return this.expandedKeys.has(e)}getExpandedKeys(){return[...this.expandedKeys]}getFlattenedRows(){return[...this.flattenedRows]}getRowByKey(e){return this.rowKeyMap.get(e)?.data}expandToKey(e){this.expandedKeys=p(this.rows,e,this.config,this.expandedKeys),this.requestRender()}}export{w as TreePlugin};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|