@toolbox-web/grid 2.0.0-rc.1 → 2.0.0-rc.3
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/README.md +23 -6
- 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/internal/diagnostics.d.ts +9 -1
- package/lib/core/internal/sorting.d.ts +4 -0
- package/lib/core/plugin/base-plugin.d.ts +31 -0
- package/lib/core/plugin/plugin-manager.d.ts +4 -1
- package/lib/core/plugin/types.d.ts +2 -0
- package/lib/core/types.d.ts +20 -1
- package/lib/features/registry.js.map +1 -1
- package/lib/plugins/clipboard/ClipboardPlugin.d.ts +8 -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/export/ExportPlugin.d.ts +8 -1
- 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/GroupingRowsPlugin.d.ts +46 -22
- package/lib/plugins/grouping-rows/grouping-rows.d.ts +15 -1
- package/lib/plugins/grouping-rows/index.js +2 -2
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/grouping-rows/types.d.ts +7 -35
- package/lib/plugins/master-detail/MasterDetailPlugin.d.ts +30 -0
- 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/PivotPlugin.d.ts +10 -0
- 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/RowReorderPlugin.d.ts +3 -0
- 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/ServerSidePlugin.d.ts +48 -14
- package/lib/plugins/server-side/datasource-types.d.ts +189 -0
- package/lib/plugins/server-side/datasource.d.ts +5 -5
- package/lib/plugins/server-side/index.d.ts +1 -1
- package/lib/plugins/server-side/index.js +1 -1
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/server-side/types.d.ts +8 -82
- package/lib/plugins/tooltip/index.js +1 -1
- package/lib/plugins/tooltip/index.js.map +1 -1
- package/lib/plugins/tree/TreePlugin.d.ts +26 -4
- package/lib/plugins/tree/index.js +1 -1
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/tree/tree-datasource.d.ts +13 -0
- package/lib/plugins/tree/types.d.ts +19 -0
- 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/public.d.ts +3 -0
- 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/export.umd.js +1 -1
- package/umd/plugins/export.umd.js.map +1 -1
- package/umd/plugins/filtering.umd.js +1 -1
- package/umd/plugins/filtering.umd.js.map +1 -1
- package/umd/plugins/grouping-rows.umd.js +1 -1
- package/umd/plugins/grouping-rows.umd.js.map +1 -1
- package/umd/plugins/master-detail.umd.js +1 -1
- package/umd/plugins/master-detail.umd.js.map +1 -1
- package/umd/plugins/multi-sort.umd.js +1 -1
- package/umd/plugins/multi-sort.umd.js.map +1 -1
- package/umd/plugins/pinned-columns.umd.js +1 -1
- package/umd/plugins/pinned-columns.umd.js.map +1 -1
- package/umd/plugins/pivot.umd.js +1 -1
- package/umd/plugins/pivot.umd.js.map +1 -1
- package/umd/plugins/reorder-rows.umd.js +1 -1
- package/umd/plugins/reorder-rows.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js +1 -1
- package/umd/plugins/selection.umd.js.map +1 -1
- package/umd/plugins/server-side.umd.js +1 -1
- package/umd/plugins/server-side.umd.js.map +1 -1
- package/umd/plugins/tooltip.umd.js +1 -1
- package/umd/plugins/tooltip.umd.js.map +1 -1
- package/umd/plugins/tree.umd.js +1 -1
- package/umd/plugins/tree.umd.js.map +1 -1
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import { ServerSideDataSource } from './datasource-types';
|
|
2
|
+
export type { DataRequestModel, DataSourceChildrenDetail, DataSourceDataDetail, DataSourceErrorDetail, DataSourceLoadingDetail, FetchChildrenQuery, GetChildRowsParams, GetChildRowsResult, GetRowsParams, GetRowsResult, ServerSideDataSource, ViewportMappingQuery, ViewportMappingResponse, } from './datasource-types';
|
|
1
3
|
/**
|
|
2
4
|
* Configuration for the server-side data plugin.
|
|
3
5
|
*
|
|
4
6
|
* Controls how the grid fetches, caches, and paginates data from a remote source.
|
|
5
|
-
* The grid requests data in **blocks** (contiguous
|
|
7
|
+
* The grid requests data in **blocks** (contiguous node ranges) as the user scrolls,
|
|
6
8
|
* caching them locally to avoid redundant network requests.
|
|
7
9
|
*
|
|
8
10
|
* @example
|
|
@@ -16,14 +18,14 @@
|
|
|
16
18
|
*/
|
|
17
19
|
export interface ServerSideConfig {
|
|
18
20
|
/**
|
|
19
|
-
* Number of
|
|
20
|
-
* This determines the `
|
|
21
|
+
* Number of nodes to request per fetch.
|
|
22
|
+
* This determines the `endNode - startNode` range passed to `getRows()`.
|
|
21
23
|
* Smaller values mean faster initial loads but more frequent requests while scrolling.
|
|
22
24
|
* @default 100
|
|
23
25
|
*/
|
|
24
26
|
pageSize?: number;
|
|
25
27
|
/**
|
|
26
|
-
* Number of
|
|
28
|
+
* Number of nodes kept in each cache block.
|
|
27
29
|
* When a block is evicted (e.g. scrolled far away), re-scrolling back triggers a new fetch.
|
|
28
30
|
* Should be ≥ `pageSize`; larger values reduce re-fetches at the cost of memory.
|
|
29
31
|
* @default 200
|
|
@@ -37,90 +39,14 @@ export interface ServerSideConfig {
|
|
|
37
39
|
*/
|
|
38
40
|
maxConcurrentRequests?: number;
|
|
39
41
|
}
|
|
40
|
-
/**
|
|
41
|
-
* Data source contract for server-side row loading.
|
|
42
|
-
*
|
|
43
|
-
* Implement this interface to supply rows from a remote API, database, or any
|
|
44
|
-
* asynchronous provider. The grid calls `getRows()` whenever it needs a new
|
|
45
|
-
* block of rows (on initial load, scroll, sort change, or filter change).
|
|
46
|
-
*
|
|
47
|
-
* @example
|
|
48
|
-
* ```typescript
|
|
49
|
-
* const dataSource: ServerSideDataSource = {
|
|
50
|
-
* async getRows(params) {
|
|
51
|
-
* const res = await fetch(`/api/employees?start=${params.startRow}&end=${params.endRow}`);
|
|
52
|
-
* const data = await res.json();
|
|
53
|
-
* return { rows: data.items, totalRowCount: data.total };
|
|
54
|
-
* }
|
|
55
|
-
* };
|
|
56
|
-
* ```
|
|
57
|
-
*/
|
|
58
|
-
export interface ServerSideDataSource {
|
|
59
|
-
getRows(params: GetRowsParams): Promise<GetRowsResult>;
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* Parameters passed to {@link ServerSideDataSource.getRows} for each data request.
|
|
63
|
-
*
|
|
64
|
-
* The grid provides the row range to fetch plus any active sort/filter state,
|
|
65
|
-
* allowing the server to apply pagination, sorting, and filtering on the backend.
|
|
66
|
-
*/
|
|
67
|
-
export interface GetRowsParams {
|
|
68
|
-
/** Zero-based index of the first row to fetch (inclusive). */
|
|
69
|
-
startRow: number;
|
|
70
|
-
/** Zero-based index of the last row to fetch (exclusive). `endRow - startRow` equals the block size. */
|
|
71
|
-
endRow: number;
|
|
72
|
-
/** Active sort columns, in priority order. Empty array when unsorted. */
|
|
73
|
-
sortModel?: Array<{
|
|
74
|
-
field: string;
|
|
75
|
-
direction: 'asc' | 'desc';
|
|
76
|
-
}>;
|
|
77
|
-
/** Active filter model keyed by field name. Empty object when no filters are applied. */
|
|
78
|
-
filterModel?: Record<string, any>;
|
|
79
|
-
}
|
|
80
|
-
/**
|
|
81
|
-
* Result returned from {@link ServerSideDataSource.getRows}.
|
|
82
|
-
*
|
|
83
|
-
* @example
|
|
84
|
-
* ```typescript
|
|
85
|
-
* // Known total (pagination-style)
|
|
86
|
-
* return { rows: pageData, totalRowCount: 5000 };
|
|
87
|
-
*
|
|
88
|
-
* // Infinite scroll — set lastRow when the final page is reached
|
|
89
|
-
* return { rows: pageData, totalRowCount: -1, lastRow: absoluteLastIndex };
|
|
90
|
-
* ```
|
|
91
|
-
*/
|
|
92
|
-
export interface GetRowsResult {
|
|
93
|
-
/** The fetched row objects for the requested range. */
|
|
94
|
-
rows: any[];
|
|
95
|
-
/** Total number of rows available on the server. Use `-1` if unknown (infinite scroll mode). */
|
|
96
|
-
totalRowCount: number;
|
|
97
|
-
/**
|
|
98
|
-
* The absolute index of the last row in the dataset.
|
|
99
|
-
* Only needed for **infinite scroll** when `totalRowCount` is `-1`.
|
|
100
|
-
* Once the server returns the final page, set this so the grid knows
|
|
101
|
-
* scrolling has reached the end and stops requesting further blocks.
|
|
102
|
-
*/
|
|
103
|
-
lastRow?: number;
|
|
104
|
-
}
|
|
105
42
|
export interface ServerSideState {
|
|
106
43
|
dataSource: ServerSideDataSource | null;
|
|
107
|
-
|
|
108
|
-
loadedBlocks: Map<number,
|
|
44
|
+
totalNodeCount: number;
|
|
45
|
+
loadedBlocks: Map<number, unknown[]>;
|
|
109
46
|
loadingBlocks: Set<number>;
|
|
110
47
|
lastRequestId: number;
|
|
111
48
|
/** Scroll debounce timer for scroll-end detection */
|
|
112
49
|
scrollDebounceTimer?: ReturnType<typeof setTimeout>;
|
|
113
|
-
/** Cached grid reference for getting fresh viewport */
|
|
114
|
-
gridRef?: {
|
|
115
|
-
virtualization: {
|
|
116
|
-
start: number;
|
|
117
|
-
end: number;
|
|
118
|
-
};
|
|
119
|
-
};
|
|
120
|
-
/** Cached config reference */
|
|
121
|
-
configRef?: ServerSideConfig;
|
|
122
|
-
/** Cached request render function */
|
|
123
|
-
requestRenderRef?: () => void;
|
|
124
50
|
}
|
|
125
51
|
declare module '../../core/types' {
|
|
126
52
|
interface PluginNameMap {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function t(t,e){return`[tbw-grid${t?`#${t}`:""}${e?`:${e}`:""}]`}function e(e,o,r,i){return`${t(r,i)} ${e}: ${o}\n\n → More info: ${function(t){return`https://toolboxjs.com/grid/errors#${t.toLowerCase()}`}(e)}`}["__otorp__","__retteGenifed__","__retteSenifed__","rotcurtsnoc","wodniw","sihTlabolg","labolg","ssecorp","noitcnuF","tropmi","lave","tcelfeR","yxorP","rorrE","stnemugra","tnemucod","noitacol","eikooc","egarotSlacol","egarotSnoisses","BDdexedni","hctef","tseuqeRpttHLMX","tekcoSbeW","rekroW","rekroWderahS","rekroWecivreS","renepo","tnerap","pot","semarf","fles"].map(t=>t.split("").reverse().join(""));const o=/* @__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"]),n=/^\s*(javascript|vbscript|data|blob):/i;function s(t){if(!t||"string"!=typeof t)return"";if(-1===t.indexOf("<"))return t;const e=document.createElement("template");return e.innerHTML=t,function(t){const e=[],s=t.querySelectorAll("*");for(const a of s){const t=a.tagName.toLowerCase();if(o.has(t)){e.push(a);continue}if("svg"===t||"http://www.w3.org/2000/svg"===a.namespaceURI){if(Array.from(a.attributes).some(t=>r.test(t.name)||"href"===t.name||"xlink:href"===t.name)){e.push(a);continue}}const s=[];for(const e of a.attributes){const t=e.name.toLowerCase();r.test(t)?s.push(e.name):(i.has(t)&&n.test(e.value)||"style"===t&&/expression\s*\(|javascript:|behavior\s*:/i.test(e.value))&&s.push(e.name)}s.forEach(t=>a.removeAttribute(t))}e.forEach(t=>t.remove())}(e.content),e.innerHTML}const a='<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>',l={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:a,filterActive:a,print:"🖨️"};class p{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#t;get defaultConfig(){return{}}constructor(t={}){this.userConfig=t}attach(t){this.#t?.abort(),this.#t=new AbortController,this.grid=t,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#t?.abort(),this.#t=void 0}getPlugin(t){return this.grid?.getPlugin(t)}emit(t,e){this.grid?.dispatchEvent?.(new CustomEvent(t,{detail:e,bubbles:!0}))}emitCancelable(t,e){const o=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(o),o.defaultPrevented}on(t,e){this.grid?._pluginManager?.subscribe(this,t,e)}off(t){this.grid?._pluginManager?.unsubscribe(this,t)}emitPluginEvent(t,e){this.grid?._pluginManager?.emitPluginEvent(t,e)}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.#t?.signal??this.grid?.disconnectSignal}get gridIcons(){const t=this.grid?.gridConfig?.icons??{};return{...l,...t}}get isAnimationEnabled(){const t=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===t||"off"===t)return!1;if(!0===t||"on"===t)return!0;const e=this.gridElement;if(e){return"0"!==getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const t=this.gridElement;if(t){const e=getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(),o=parseInt(e,10);if(!isNaN(o))return o}return 200}setIcon(t,e,o){t.dataset.icon=e.replace(/([A-Z])/g,"-$1").toLowerCase(),"collapse"===e?t.dataset.expanded="":"expand"===e&&delete t.dataset.expanded;const r=this.#e(e,o);void 0!==r?"string"==typeof r?t.innerHTML=s(r):r instanceof HTMLElement&&(t.innerHTML="",t.appendChild(r.cloneNode(!0))):t.innerHTML=""}#e(t,e){return void 0!==e?e:this.grid?.gridConfig?.icons?.[t]}updateSortIndicator(t,e){t.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove();const o=document.createElement("span");o.setAttribute("part","sort-indicator"),o.className="sort-indicator",e?(t.setAttribute("aria-sort","asc"===e?"ascending":"descending"),t.setAttribute("data-sort",e),this.setIcon(o,"asc"===e?"sortAsc":"sortDesc")):(t.setAttribute("aria-sort","none"),t.removeAttribute("data-sort"),this.setIcon(o,"sortNone"));const r=t.querySelector(".tbw-filter-btn")??t.querySelector(".resize-handle");return r?t.insertBefore(o,r):t.appendChild(o),o}warn(o,r){void 0!==r?console.warn(e(o,r,this.gridElement.id,this.name)):console.warn(`${t(this.gridElement.id,this.name)} ${o}`)}throwDiagnostic(t,o){throw new Error(e(t,o,this.gridElement.id,this.name))}}function c(t){return t.scrollWidth>t.clientWidth}function d(){return"function"==typeof HTMLElement.prototype?.showPopover}class h extends p{name="tooltip";styles='@layer tbw-plugins{.tbw-tooltip-popover{margin:0;padding:var(--tbw-tooltip-padding, var(--tbw-spacing-sm, .375rem) var(--tbw-spacing-md, .5rem));background:var(--tbw-tooltip-bg, light-dark(#333338, #484850));color:var(--tbw-tooltip-fg, light-dark(#f5f5f5, #f0f0f0));border:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72));border-radius:var(--tbw-tooltip-radius, var(--tbw-border-radius, .25rem));box-shadow:none;filter:var(--tbw-tooltip-shadow, drop-shadow(0 4px 4px rgba(0, 0, 0, .45)));font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-tooltip-font-size, var(--tbw-font-size-sm, .9285em));max-width:var(--tbw-tooltip-max-width, 300px);white-space:pre-line;word-wrap:break-word;overflow-wrap:break-word;pointer-events:none;z-index:10001}.tbw-tooltip-popover:after{content:"";position:absolute;width:var(--tbw-tooltip-arrow-size, 14px);height:var(--tbw-tooltip-arrow-size, 14px);left:var(--tbw-tooltip-arrow-offset, 16px);background:inherit;pointer-events:none}.tbw-tooltip-popover:not(.tbw-tooltip-above):after{top:calc(var(--tbw-tooltip-arrow-size, 14px) / -2);transform:rotate(45deg);border-top:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72));border-left:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72))}.tbw-tooltip-popover.tbw-tooltip-above:after{bottom:calc(var(--tbw-tooltip-arrow-size, 14px) / -2);transform:rotate(45deg);border-bottom:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72));border-right:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72))}@supports (anchor-name: --test){.tbw-tooltip-popover{position-anchor:--tbw-tooltip-anchor;top:calc(anchor(bottom) + 11px);left:anchor(left);position-try-fallbacks:--tbw-tooltip-flip-above}@position-try --tbw-tooltip-flip-above{top:auto;bottom:calc(anchor(top) + 11px)}}}';static manifest={ownedProperties:[{property:"cellTooltip",level:"column",description:'the "cellTooltip" column property'},{property:"headerTooltip",level:"column",description:'the "headerTooltip" column property'}],configRules:[]};#o=null;#r=null;#i=!1;get#n(){return!1!==this.config.header}get#s(){return!1!==this.config.cell}attach(t){super.attach(t)}detach(){this.#a(),this.#o?.remove(),this.#o=null,this.#i=!1,super.detach()}afterRender(){this.#l(),this.#p()}#l(){if(this.#o)return;const t=document.createElement("div");t.className="tbw-tooltip-popover",t.setAttribute("popover","hint"),t.style.overflow="visible",t.style.margin="0",document.body.appendChild(t),this.#o=t}#c(t,e){if(this.#o){if(this.#d(),t.style.setProperty("anchor-name","--tbw-tooltip-anchor"),this.#r=t,this.#o.textContent=e,d())try{this.#o.showPopover()}catch{}"undefined"!=typeof CSS&&!0===CSS.supports?.("anchor-name","--test")?requestAnimationFrame(()=>this.#h(t)):this.#u(t)}}#a(){if(this.#o){if(d())try{this.#o.hidePopover()}catch{}this.#o.classList.remove("tbw-tooltip-above")}this.#d()}#d(){this.#r&&(this.#r.style.removeProperty("anchor-name"),this.#r=null)}#u(t){if(!this.#o)return;const e=t.getBoundingClientRect();this.#o.style.position="fixed",this.#o.style.left=`${e.left}px`;window.innerHeight-e.bottom<80?(this.#o.style.top="",this.#o.style.bottom=window.innerHeight-e.top+11+"px",this.#o.classList.add("tbw-tooltip-above")):(this.#o.style.top=`${e.bottom+11}px`,this.#o.style.bottom="",this.#o.classList.remove("tbw-tooltip-above"))}#h(t){if(!this.#o)return;const e=t.getBoundingClientRect(),o=this.#o.getBoundingClientRect();this.#o.classList.toggle("tbw-tooltip-above",o.bottom<=e.top)}#p(){if(this.#i)return;const t=this.gridElement?.querySelector(".tbw-grid-root");t&&(this.#i=!0,t.addEventListener("mouseover",t=>this.#f(t),{signal:this.disconnectSignal}),t.addEventListener("mouseout",t=>this.#b(t),{signal:this.disconnectSignal}))}#f(t){const e=t.target;if(!e?.closest)return;const o=e.closest('[part~="header-cell"]');if(o&&this.#n)return void this.#g(o);const r=e.closest("[data-row][data-col]");r&&this.#s&&this.#m(r)}#b(t){const e=t.target;if(!e?.closest)return;const o=e.closest('[part~="header-cell"], [data-row][data-col]');if(!o)return;const r=t.relatedTarget;r&&o.contains(r)||this.#a()}#g(t){const e=parseInt(t.getAttribute("data-col")??"-1",10);if(e<0)return;const o=this.visibleColumns[e];if(!o)return;const r=function(t,e){const o=t.headerTooltip;if(!1===o)return null;if("string"==typeof o)return o;if("function"==typeof o)return o({column:t,value:t.header??t.field});const r=e.querySelector("span:first-child")??e;return c(r)&&r.textContent?.trim()||null}(o,t);r&&this.#c(t,r)}#m(t){const e=parseInt(t.getAttribute("data-row")??"-1",10),o=parseInt(t.getAttribute("data-col")??"-1",10);if(e<0||o<0)return;const r=this.visibleColumns[o];if(!r)return;const i=this.rows[e],n=i?.[r.field],s=function(t,e,o,r){const i=t.cellTooltip;if(!1===i)return null;if("string"==typeof i)return i;if("function"==typeof i)return i({value:r,row:o,column:t,field:t.field});return c(e)&&e.textContent?.trim()||null}(r,t,i,n);s&&this.#c(t,s)}}export{h as TooltipPlugin};
|
|
1
|
+
function t(t,e){return`[tbw-grid${t?`#${t}`:""}${e?`:${e}`:""}]`}function e(e,o,r,i){return`${t(r,i)} ${e}: ${o}\n\n → More info: ${function(t){return`https://toolboxjs.com/grid/errors#${t.toLowerCase()}`}(e)}`}["__otorp__","__retteGenifed__","__retteSenifed__","rotcurtsnoc","wodniw","sihTlabolg","labolg","ssecorp","noitcnuF","tropmi","lave","tcelfeR","yxorP","rorrE","stnemugra","tnemucod","noitacol","eikooc","egarotSlacol","egarotSnoisses","BDdexedni","hctef","tseuqeRpttHLMX","tekcoSbeW","rekroW","rekroWderahS","rekroWecivreS","renepo","tnerap","pot","semarf","fles"].map(t=>t.split("").reverse().join(""));const o=/* @__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"]),n=/^\s*(javascript|vbscript|data|blob):/i;function s(t){if(!t||"string"!=typeof t)return"";if(-1===t.indexOf("<"))return t;const e=document.createElement("template");return e.innerHTML=t,function(t){const e=[],s=t.querySelectorAll("*");for(const a of s){const t=a.tagName.toLowerCase();if(o.has(t)){e.push(a);continue}if("svg"===t||"http://www.w3.org/2000/svg"===a.namespaceURI){if(Array.from(a.attributes).some(t=>r.test(t.name)||"href"===t.name||"xlink:href"===t.name)){e.push(a);continue}}const s=[];for(const e of a.attributes){const t=e.name.toLowerCase();r.test(t)?s.push(e.name):(i.has(t)&&n.test(e.value)||"style"===t&&/expression\s*\(|javascript:|behavior\s*:/i.test(e.value))&&s.push(e.name)}s.forEach(t=>a.removeAttribute(t))}e.forEach(t=>t.remove())}(e.content),e.innerHTML}const a='<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>',l={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:a,filterActive:a,print:"🖨️"};class p{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#t;get defaultConfig(){return{}}constructor(t={}){this.userConfig=t}attach(t){this.#t?.abort(),this.#t=new AbortController,this.grid=t,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#t?.abort(),this.#t=void 0}getPlugin(t){return this.grid?.getPlugin(t)}emit(t,e){this.grid?.dispatchEvent?.(new CustomEvent(t,{detail:e,bubbles:!0}))}emitCancelable(t,e){const o=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(o),o.defaultPrevented}on(t,e){this.grid?._pluginManager?.subscribe(this,t,e)}off(t){this.grid?._pluginManager?.unsubscribe(this,t)}emitPluginEvent(t,e){this.grid?._pluginManager?.emitPluginEvent(t,e)}broadcast(t,e){this.emitPluginEvent(t,e),this.emit(t,e)}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.#t?.signal??this.grid?.disconnectSignal}get gridIcons(){const t=this.grid?.gridConfig?.icons??{};return{...l,...t}}get isAnimationEnabled(){const t=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===t||"off"===t)return!1;if(!0===t||"on"===t)return!0;const e=this.gridElement;if(e){return"0"!==getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const t=this.gridElement;if(t){const e=getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(),o=parseInt(e,10);if(!isNaN(o))return o}return 200}setIcon(t,e,o){t.dataset.icon=e.replace(/([A-Z])/g,"-$1").toLowerCase(),"collapse"===e?t.dataset.expanded="":"expand"===e&&delete t.dataset.expanded;const r=this.#e(e,o);void 0!==r?"string"==typeof r?t.innerHTML=s(r):r instanceof HTMLElement&&(t.innerHTML="",t.appendChild(r.cloneNode(!0))):t.innerHTML=""}#e(t,e){return void 0!==e?e:this.grid?.gridConfig?.icons?.[t]}updateSortIndicator(t,e){t.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove();const o=document.createElement("span");o.setAttribute("part","sort-indicator"),o.className="sort-indicator",e?(t.setAttribute("aria-sort","asc"===e?"ascending":"descending"),t.setAttribute("data-sort",e),this.setIcon(o,"asc"===e?"sortAsc":"sortDesc")):(t.setAttribute("aria-sort","none"),t.removeAttribute("data-sort"),this.setIcon(o,"sortNone"));const r=t.querySelector(".tbw-filter-btn")??t.querySelector(".resize-handle");return r?t.insertBefore(o,r):t.appendChild(o),o}warn(o,r){void 0!==r?console.warn(e(o,r,this.gridElement.id,this.name)):console.warn(`${t(this.gridElement.id,this.name)} ${o}`)}throwDiagnostic(t,o){throw new Error(e(t,o,this.gridElement.id,this.name))}}function c(t){return t.scrollWidth>t.clientWidth}function d(){return"function"==typeof HTMLElement.prototype?.showPopover}class h extends p{name="tooltip";styles='@layer tbw-plugins{.tbw-tooltip-popover{margin:0;padding:var(--tbw-tooltip-padding, var(--tbw-spacing-sm, .375rem) var(--tbw-spacing-md, .5rem));background:var(--tbw-tooltip-bg, light-dark(#333338, #484850));color:var(--tbw-tooltip-fg, light-dark(#f5f5f5, #f0f0f0));border:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72));border-radius:var(--tbw-tooltip-radius, var(--tbw-border-radius, .25rem));box-shadow:none;filter:var(--tbw-tooltip-shadow, drop-shadow(0 4px 4px rgba(0, 0, 0, .45)));font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-tooltip-font-size, var(--tbw-font-size-sm, .9285em));max-width:var(--tbw-tooltip-max-width, 300px);white-space:pre-line;word-wrap:break-word;overflow-wrap:break-word;pointer-events:none;z-index:10001}.tbw-tooltip-popover:after{content:"";position:absolute;width:var(--tbw-tooltip-arrow-size, 14px);height:var(--tbw-tooltip-arrow-size, 14px);left:var(--tbw-tooltip-arrow-offset, 16px);background:inherit;pointer-events:none}.tbw-tooltip-popover:not(.tbw-tooltip-above):after{top:calc(var(--tbw-tooltip-arrow-size, 14px) / -2);transform:rotate(45deg);border-top:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72));border-left:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72))}.tbw-tooltip-popover.tbw-tooltip-above:after{bottom:calc(var(--tbw-tooltip-arrow-size, 14px) / -2);transform:rotate(45deg);border-bottom:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72));border-right:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72))}@supports (anchor-name: --test){.tbw-tooltip-popover{position-anchor:--tbw-tooltip-anchor;top:calc(anchor(bottom) + 11px);left:anchor(left);position-try-fallbacks:--tbw-tooltip-flip-above}@position-try --tbw-tooltip-flip-above{top:auto;bottom:calc(anchor(top) + 11px)}}}';static manifest={ownedProperties:[{property:"cellTooltip",level:"column",description:'the "cellTooltip" column property'},{property:"headerTooltip",level:"column",description:'the "headerTooltip" column property'}],configRules:[]};#o=null;#r=null;#i=!1;get#n(){return!1!==this.config.header}get#s(){return!1!==this.config.cell}attach(t){super.attach(t)}detach(){this.#a(),this.#o?.remove(),this.#o=null,this.#i=!1,super.detach()}afterRender(){this.#l(),this.#p()}#l(){if(this.#o)return;const t=document.createElement("div");t.className="tbw-tooltip-popover",t.setAttribute("popover","hint"),t.style.overflow="visible",t.style.margin="0",document.body.appendChild(t),this.#o=t}#c(t,e){if(this.#o){if(this.#d(),t.style.setProperty("anchor-name","--tbw-tooltip-anchor"),this.#r=t,this.#o.textContent=e,d())try{this.#o.showPopover()}catch{}"undefined"!=typeof CSS&&!0===CSS.supports?.("anchor-name","--test")?requestAnimationFrame(()=>this.#h(t)):this.#u(t)}}#a(){if(this.#o){if(d())try{this.#o.hidePopover()}catch{}this.#o.classList.remove("tbw-tooltip-above")}this.#d()}#d(){this.#r&&("--tbw-tooltip-anchor"===this.#r.style.getPropertyValue("anchor-name")&&this.#r.style.removeProperty("anchor-name"),this.#r=null)}#u(t){if(!this.#o)return;const e=t.getBoundingClientRect();this.#o.style.position="fixed",this.#o.style.left=`${e.left}px`;window.innerHeight-e.bottom<80?(this.#o.style.top="",this.#o.style.bottom=window.innerHeight-e.top+11+"px",this.#o.classList.add("tbw-tooltip-above")):(this.#o.style.top=`${e.bottom+11}px`,this.#o.style.bottom="",this.#o.classList.remove("tbw-tooltip-above"))}#h(t){if(!this.#o)return;const e=t.getBoundingClientRect(),o=this.#o.getBoundingClientRect();this.#o.classList.toggle("tbw-tooltip-above",o.bottom<=e.top)}#p(){if(this.#i)return;const t=this.gridElement?.querySelector(".tbw-grid-root");t&&(this.#i=!0,t.addEventListener("mouseover",t=>this.#f(t),{signal:this.disconnectSignal}),t.addEventListener("mouseout",t=>this.#b(t),{signal:this.disconnectSignal}))}#f(t){const e=t.target;if(!e?.closest)return;const o=e.closest('[part~="header-cell"]');if(o&&this.#n)return void this.#g(o);const r=e.closest("[data-row][data-col]");r&&this.#s&&!r.style.getPropertyValue("anchor-name")&&this.#m(r)}#b(t){const e=t.target;if(!e?.closest)return;const o=e.closest('[part~="header-cell"], [data-row][data-col]');if(!o)return;const r=t.relatedTarget;r&&o.contains(r)||this.#a()}#g(t){const e=parseInt(t.getAttribute("data-col")??"-1",10);if(e<0)return;const o=this.visibleColumns[e];if(!o)return;const r=function(t,e){const o=t.headerTooltip;if(!1===o)return null;if("string"==typeof o)return o;if("function"==typeof o)return o({column:t,value:t.header??t.field});const r=e.querySelector("span:first-child")??e;return c(r)&&r.textContent?.trim()||null}(o,t);r&&this.#c(t,r)}#m(t){const e=parseInt(t.getAttribute("data-row")??"-1",10),o=parseInt(t.getAttribute("data-col")??"-1",10);if(e<0||o<0)return;const r=this.visibleColumns[o];if(!r)return;const i=this.rows[e],n=i?.[r.field],s=function(t,e,o,r){const i=t.cellTooltip;if(!1===i)return null;if("string"==typeof i)return i;if("function"==typeof i)return i({value:r,row:o,column:t,field:t.field});return c(e)&&e.textContent?.trim()||null}(r,t,i,n);s&&this.#c(t,s)}}export{h as TooltipPlugin};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|