@toolbox-web/grid 0.0.7 → 0.1.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/README.md +1 -1
- package/all.d.ts +156 -95
- package/all.js +1561 -1502
- package/all.js.map +1 -1
- package/custom-elements.json +89 -7
- package/index.d.ts +68 -23
- package/index.js +1617 -1388
- package/index.js.map +1 -1
- package/lib/plugins/clipboard/index.js +48 -49
- package/lib/plugins/clipboard/index.js.map +1 -1
- package/lib/plugins/column-virtualization/index.js +6 -6
- package/lib/plugins/column-virtualization/index.js.map +1 -1
- package/lib/plugins/context-menu/index.js +64 -109
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/export/index.js +7 -7
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/index.js +5 -38
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/index.js +4 -32
- package/lib/plugins/grouping-columns/index.js.map +1 -1
- package/lib/plugins/grouping-rows/index.js +8 -45
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/master-detail/index.js +7 -31
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js +19 -42
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/index.js +5 -6
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-rows/index.js +14 -88
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js +673 -145
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/reorder/index.js +22 -51
- package/lib/plugins/reorder/index.js.map +1 -1
- package/lib/plugins/selection/index.js +76 -83
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/server-side/index.js +2 -2
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/tree/index.js +6 -14
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/undo-redo/index.js +2 -3
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/index.js +13 -105
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +1 -1
- package/themes/dg-theme-bootstrap.css +73 -0
- package/themes/dg-theme-material.css +71 -0
- package/umd/grid.all.umd.js +43 -469
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +35 -66
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/clipboard.umd.js +4 -4
- package/umd/plugins/clipboard.umd.js.map +1 -1
- package/umd/plugins/column-virtualization.umd.js +1 -1
- package/umd/plugins/column-virtualization.umd.js.map +1 -1
- package/umd/plugins/context-menu.umd.js +1 -52
- package/umd/plugins/context-menu.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 +2 -34
- package/umd/plugins/filtering.umd.js.map +1 -1
- package/umd/plugins/grouping-columns.umd.js +1 -28
- package/umd/plugins/grouping-columns.umd.js.map +1 -1
- package/umd/plugins/grouping-rows.umd.js +1 -39
- package/umd/plugins/grouping-rows.umd.js.map +1 -1
- package/umd/plugins/master-detail.umd.js +1 -26
- package/umd/plugins/master-detail.umd.js.map +1 -1
- package/umd/plugins/multi-sort.umd.js +1 -25
- 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/pinned-rows.umd.js +1 -72
- package/umd/plugins/pinned-rows.umd.js.map +1 -1
- package/umd/plugins/pivot.umd.js +1 -7
- package/umd/plugins/pivot.umd.js.map +1 -1
- package/umd/plugins/reorder.umd.js +1 -30
- package/umd/plugins/reorder.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js +1 -33
- 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/tree.umd.js +1 -10
- package/umd/plugins/tree.umd.js.map +1 -1
- package/umd/plugins/undo-redo.umd.js +1 -1
- package/umd/plugins/undo-redo.umd.js.map +1 -1
- package/umd/plugins/visibility.umd.js +1 -93
- package/umd/plugins/visibility.umd.js.map +1 -1
package/index.js
CHANGED
|
@@ -1,100 +1,101 @@
|
|
|
1
|
-
const we = ":root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-accent);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 4px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell,:host .header-row>.cell.grouped.group-end{border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style}:host .data-grid-row:has(.editing){background:var(--tbw-editing-bg)}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell:focus-visible{outline:none}:host .data-grid-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{justify-content:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size)}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;max-width:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host .cell-focus,:host .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-row-alt);font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}:host .group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px)}:host .group-row .group-toggle{background:none;border:0;cursor:pointer;padding:0 4px 0 0;font:inherit}:host .group-row .group-count{margin-left:4px;opacity:.7}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.grid-container{position:relative;width:100%;height:100%}.grid-placeholder{padding:2rem;text-align:center;color:var(--tbw-color-fg);opacity:.6}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: .2s ease-out;--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden}:host .tbw-tool-panel{width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;flex-shrink:0}:host .tbw-tool-panel[data-position=left]{border-left:none;border-right:1px solid var(--tbw-tool-panel-border);order:-1}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto;padding:12px}:host .tbw-quick-filter-input{flex:1;max-width:300px;height:28px;padding:0 8px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:13px}:host .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}:host .tbw-selection-summary{font-size:13px;color:var(--tbw-color-fg-muted);white-space:nowrap}";
|
|
2
|
-
function
|
|
1
|
+
const Ce = ":root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-accent);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 4px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell,:host .header-row>.cell.grouped.group-end{border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style}:host .data-grid-row:has(.editing){background:var(--tbw-editing-bg)}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell.selected:focus-visible,:host .data-grid-row>.cell:focus-visible:not(.cell-focus){outline:none}:host .data-grid-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{justify-content:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size)}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;max-width:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host .cell-focus,:host .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-row-alt);font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}:host .group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px)}:host .group-row .group-toggle{background:none;border:0;cursor:pointer;padding:0 4px 0 0;font:inherit}:host .group-row .group-count{margin-left:4px;opacity:.7}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.grid-container{position:relative;width:100%;height:100%}.grid-placeholder{padding:2rem;text-align:center;color:var(--tbw-color-fg);opacity:.6}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: .2s ease-out;--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden}:host .tbw-tool-panel{position:absolute;top:0;bottom:0;right:0;width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;z-index:30;box-shadow:-2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel[data-position=left]{right:auto;left:0;border-left:none;border-right:1px solid var(--tbw-tool-panel-border);box-shadow:2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background .15s ease}:host .tbw-tool-panel-resize[data-handle-position=left]{left:0}:host .tbw-tool-panel-resize[data-handle-position=right]{right:0}:host .tbw-tool-panel-resize:hover,:host .tbw-tool-panel-resize.resizing{background:var(--tbw-color-accent)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto}:host .tbw-accordion{display:flex;flex-direction:column;gap:0}:host .tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border)}:host .tbw-accordion-section:last-child{border-bottom:none}:host .tbw-accordion-header{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:transparent;color:var(--tbw-color-fg);font-size:13px;font-weight:600;text-align:left;cursor:pointer;user-select:none}:host .tbw-accordion-header:hover{background:var(--tbw-color-row-hover)}:host .tbw-accordion-section.single .tbw-accordion-header{cursor:default}:host .tbw-accordion-section.single .tbw-accordion-header:hover{background:transparent}:host .tbw-accordion-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:var(--tbw-color-fg-muted);transition:transform .15s ease;flex-shrink:0}:host .tbw-accordion-section.expanded .tbw-accordion-chevron{transform:rotate(90deg)}:host .tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}:host .tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tbw-accordion-content{display:none}:host .tbw-accordion-section.expanded .tbw-accordion-content{display:block}:host .tbw-quick-filter-input{flex:1;max-width:300px;height:28px;padding:0 8px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:13px}:host .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}:host .tbw-selection-summary{font-size:13px;color:var(--tbw-color-fg-muted);white-space:nowrap}";
|
|
2
|
+
function Ee(t) {
|
|
3
3
|
const e = /* @__PURE__ */ new Map();
|
|
4
|
-
return
|
|
5
|
-
direction:
|
|
4
|
+
return t.sortState && e.set(t.sortState.field, {
|
|
5
|
+
direction: t.sortState.direction === 1 ? "asc" : "desc",
|
|
6
6
|
priority: 0
|
|
7
7
|
}), e;
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
const
|
|
9
|
+
function pe(t, e) {
|
|
10
|
+
const o = t._columns, n = Ee(t);
|
|
11
11
|
return {
|
|
12
|
-
columns:
|
|
12
|
+
columns: o.map((s, i) => {
|
|
13
13
|
const r = {
|
|
14
|
-
field:
|
|
15
|
-
order:
|
|
14
|
+
field: s.field,
|
|
15
|
+
order: i,
|
|
16
16
|
visible: !0
|
|
17
17
|
// If it's in _columns, it's visible (hidden columns are filtered out)
|
|
18
|
-
},
|
|
19
|
-
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
for (const
|
|
23
|
-
if (
|
|
24
|
-
const
|
|
25
|
-
|
|
18
|
+
}, l = s;
|
|
19
|
+
l.__renderedWidth !== void 0 ? r.width = l.__renderedWidth : s.width !== void 0 && (r.width = typeof s.width == "string" ? parseFloat(s.width) : s.width);
|
|
20
|
+
const a = n.get(s.field);
|
|
21
|
+
a && (r.sort = a);
|
|
22
|
+
for (const d of e)
|
|
23
|
+
if (d.getColumnState) {
|
|
24
|
+
const h = d.getColumnState(s.field);
|
|
25
|
+
h && Object.assign(r, h);
|
|
26
26
|
}
|
|
27
27
|
return r;
|
|
28
28
|
})
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
|
-
function
|
|
31
|
+
function Re(t, e, o, n) {
|
|
32
32
|
if (!e.columns || e.columns.length === 0) return;
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
if (!
|
|
36
|
-
const
|
|
37
|
-
return
|
|
33
|
+
const s = new Map(e.columns.map((l) => [l.field, l])), i = o.map((l) => {
|
|
34
|
+
const a = s.get(l.field);
|
|
35
|
+
if (!a) return l;
|
|
36
|
+
const d = { ...l };
|
|
37
|
+
return a.width !== void 0 && (d.width = a.width, d.__renderedWidth = a.width), a.visible !== void 0 && (d.hidden = !a.visible), d;
|
|
38
38
|
});
|
|
39
|
-
|
|
40
|
-
const
|
|
41
|
-
return
|
|
42
|
-
}),
|
|
43
|
-
const r = e.columns.filter((
|
|
39
|
+
i.sort((l, a) => {
|
|
40
|
+
const d = s.get(l.field)?.order ?? 1 / 0, h = s.get(a.field)?.order ?? 1 / 0;
|
|
41
|
+
return d - h;
|
|
42
|
+
}), t._columns = i;
|
|
43
|
+
const r = e.columns.filter((l) => l.sort !== void 0).sort((l, a) => (l.sort?.priority ?? 0) - (a.sort?.priority ?? 0));
|
|
44
44
|
if (r.length > 0) {
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
field:
|
|
48
|
-
direction:
|
|
45
|
+
const l = r[0];
|
|
46
|
+
l.sort && (t.sortState = {
|
|
47
|
+
field: l.field,
|
|
48
|
+
direction: l.sort.direction === "asc" ? 1 : -1
|
|
49
49
|
});
|
|
50
50
|
} else
|
|
51
|
-
|
|
52
|
-
for (const
|
|
53
|
-
if (
|
|
54
|
-
for (const
|
|
55
|
-
|
|
51
|
+
t.sortState = null;
|
|
52
|
+
for (const l of n)
|
|
53
|
+
if (l.applyColumnState)
|
|
54
|
+
for (const a of e.columns)
|
|
55
|
+
l.applyColumnState(a.field, a);
|
|
56
56
|
}
|
|
57
|
-
function
|
|
57
|
+
function _e(t, e, o) {
|
|
58
58
|
let n = null;
|
|
59
59
|
return () => {
|
|
60
60
|
n !== null && clearTimeout(n), n = setTimeout(() => {
|
|
61
61
|
n = null;
|
|
62
|
-
const
|
|
63
|
-
|
|
62
|
+
const s = pe(t, e());
|
|
63
|
+
o(s);
|
|
64
64
|
}, 100);
|
|
65
65
|
};
|
|
66
66
|
}
|
|
67
|
-
const
|
|
67
|
+
const q = {
|
|
68
68
|
STRETCH: "stretch",
|
|
69
69
|
FIXED: "fixed"
|
|
70
|
-
},
|
|
70
|
+
}, P = {
|
|
71
71
|
expand: "▶",
|
|
72
72
|
collapse: "▼",
|
|
73
73
|
sortAsc: "▲",
|
|
74
74
|
sortDesc: "▼",
|
|
75
75
|
sortNone: "⇅",
|
|
76
76
|
submenuArrow: "▶",
|
|
77
|
-
dragHandle: "⋮⋮"
|
|
77
|
+
dragHandle: "⋮⋮",
|
|
78
|
+
toolPanel: "☰"
|
|
78
79
|
};
|
|
79
|
-
function
|
|
80
|
-
return
|
|
80
|
+
function xe(t) {
|
|
81
|
+
return t == null ? "string" : typeof t == "number" ? "number" : typeof t == "boolean" ? "boolean" : t instanceof Date || typeof t == "string" && /\d{4}-\d{2}-\d{2}/.test(t) && !isNaN(Date.parse(t)) ? "date" : "string";
|
|
81
82
|
}
|
|
82
|
-
function
|
|
83
|
+
function we(t, e) {
|
|
83
84
|
if (e && e.length) {
|
|
84
|
-
const
|
|
85
|
+
const i = {};
|
|
85
86
|
return e.forEach((r) => {
|
|
86
|
-
r.type && (
|
|
87
|
-
}), { columns: e, typeMap:
|
|
88
|
-
}
|
|
89
|
-
const
|
|
90
|
-
const r =
|
|
91
|
-
return { field:
|
|
92
|
-
}),
|
|
93
|
-
return n.forEach((
|
|
94
|
-
i
|
|
95
|
-
}), { columns: n, typeMap:
|
|
96
|
-
}
|
|
97
|
-
const
|
|
87
|
+
r.type && (i[r.field] = r.type);
|
|
88
|
+
}), { columns: e, typeMap: i };
|
|
89
|
+
}
|
|
90
|
+
const o = t[0] || {}, n = Object.keys(o).map((i) => {
|
|
91
|
+
const r = o[i], l = xe(r);
|
|
92
|
+
return { field: i, header: i.charAt(0).toUpperCase() + i.slice(1), type: l };
|
|
93
|
+
}), s = {};
|
|
94
|
+
return n.forEach((i) => {
|
|
95
|
+
s[i.field] = i.type || "string";
|
|
96
|
+
}), { columns: n, typeMap: s };
|
|
97
|
+
}
|
|
98
|
+
const Ae = /{{\s*([^}]+)\s*}}/g, k = "__DG_EMPTY__", Se = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, Te = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, Le = /* @__PURE__ */ new Set([
|
|
98
99
|
"script",
|
|
99
100
|
"iframe",
|
|
100
101
|
"object",
|
|
@@ -119,977 +120,1093 @@ const Ee = /{{\s*([^}]+)\s*}}/g, A = "__DG_EMPTY__", ye = /^[\w$. '?+\-*/%:()!<>
|
|
|
119
120
|
"plaintext",
|
|
120
121
|
"xmp",
|
|
121
122
|
"listing"
|
|
122
|
-
]),
|
|
123
|
-
function
|
|
124
|
-
if (!
|
|
125
|
-
if (
|
|
123
|
+
]), te = /^on\w+$/i, ke = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), Pe = /^\s*(javascript|vbscript|data|blob):/i;
|
|
124
|
+
function K(t) {
|
|
125
|
+
if (!t || typeof t != "string") return "";
|
|
126
|
+
if (t.indexOf("<") === -1) return t;
|
|
126
127
|
const e = document.createElement("template");
|
|
127
|
-
return e.innerHTML =
|
|
128
|
+
return e.innerHTML = t, Me(e.content), e.innerHTML;
|
|
128
129
|
}
|
|
129
|
-
function
|
|
130
|
-
const e = [],
|
|
131
|
-
for (const n of
|
|
132
|
-
const
|
|
133
|
-
if (
|
|
130
|
+
function Me(t) {
|
|
131
|
+
const e = [], o = t.querySelectorAll("*");
|
|
132
|
+
for (const n of o) {
|
|
133
|
+
const s = n.tagName.toLowerCase();
|
|
134
|
+
if (Le.has(s)) {
|
|
134
135
|
e.push(n);
|
|
135
136
|
continue;
|
|
136
137
|
}
|
|
137
|
-
if ((
|
|
138
|
-
(
|
|
138
|
+
if ((s === "svg" || n.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(n.attributes).some(
|
|
139
|
+
(l) => te.test(l.name) || l.name === "href" || l.name === "xlink:href"
|
|
139
140
|
)) {
|
|
140
141
|
e.push(n);
|
|
141
142
|
continue;
|
|
142
143
|
}
|
|
143
|
-
const
|
|
144
|
+
const i = [];
|
|
144
145
|
for (const r of n.attributes) {
|
|
145
|
-
const
|
|
146
|
-
if (
|
|
147
|
-
|
|
146
|
+
const l = r.name.toLowerCase();
|
|
147
|
+
if (te.test(l)) {
|
|
148
|
+
i.push(r.name);
|
|
148
149
|
continue;
|
|
149
150
|
}
|
|
150
|
-
if (
|
|
151
|
-
|
|
151
|
+
if (ke.has(l) && Pe.test(r.value)) {
|
|
152
|
+
i.push(r.name);
|
|
152
153
|
continue;
|
|
153
154
|
}
|
|
154
|
-
if (
|
|
155
|
-
|
|
155
|
+
if (l === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(r.value)) {
|
|
156
|
+
i.push(r.name);
|
|
156
157
|
continue;
|
|
157
158
|
}
|
|
158
159
|
}
|
|
159
|
-
|
|
160
|
+
i.forEach((r) => n.removeAttribute(r));
|
|
160
161
|
}
|
|
161
162
|
e.forEach((n) => n.remove());
|
|
162
163
|
}
|
|
163
|
-
function
|
|
164
|
-
if (!
|
|
165
|
-
const
|
|
166
|
-
const
|
|
167
|
-
return
|
|
168
|
-
}),
|
|
169
|
-
return /Reflect\.|\bProxy\b|ownKeys\(/.test(
|
|
170
|
-
}
|
|
171
|
-
function
|
|
172
|
-
if (
|
|
173
|
-
if (
|
|
174
|
-
if (
|
|
175
|
-
const n =
|
|
176
|
-
return
|
|
177
|
-
}
|
|
178
|
-
if (
|
|
179
|
-
const
|
|
180
|
-
if (
|
|
164
|
+
function ge(t, e) {
|
|
165
|
+
if (!t || t.indexOf("{{") === -1) return t;
|
|
166
|
+
const o = [], n = t.replace(Ae, (l, a) => {
|
|
167
|
+
const d = De(a, e);
|
|
168
|
+
return o.push({ expr: a.trim(), result: d }), d;
|
|
169
|
+
}), s = Oe(n), i = o.length && o.every((l) => l.result === "" || l.result === k);
|
|
170
|
+
return /Reflect\.|\bProxy\b|ownKeys\(/.test(t) || i ? "" : s;
|
|
171
|
+
}
|
|
172
|
+
function De(t, e) {
|
|
173
|
+
if (t = (t || "").trim(), !t || /\b(Reflect|Proxy|ownKeys)\b/.test(t)) return k;
|
|
174
|
+
if (t === "value") return e.value == null ? k : String(e.value);
|
|
175
|
+
if (t.startsWith("row.") && !/[()?]/.test(t) && !t.includes(":")) {
|
|
176
|
+
const n = t.slice(4), s = e.row ? e.row[n] : void 0;
|
|
177
|
+
return s == null ? k : String(s);
|
|
178
|
+
}
|
|
179
|
+
if (t.length > 80 || !Se.test(t) || Te.test(t)) return k;
|
|
180
|
+
const o = t.match(/\./g);
|
|
181
|
+
if (o && o.length > 1) return k;
|
|
181
182
|
try {
|
|
182
|
-
const
|
|
183
|
-
return /Reflect|Proxy|ownKeys/.test(
|
|
183
|
+
const s = new Function("value", "row", `return (${t});`)(e.value, e.row), i = s == null ? "" : String(s);
|
|
184
|
+
return /Reflect|Proxy|ownKeys/.test(i) ? k : i || k;
|
|
184
185
|
} catch {
|
|
185
|
-
return
|
|
186
|
+
return k;
|
|
186
187
|
}
|
|
187
188
|
}
|
|
188
|
-
function
|
|
189
|
-
return
|
|
189
|
+
function Oe(t) {
|
|
190
|
+
return t && t.replace(new RegExp(k, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
|
|
190
191
|
}
|
|
191
|
-
function
|
|
192
|
-
if (/Reflect|Proxy|ownKeys/.test(
|
|
193
|
-
if (Array.from(
|
|
192
|
+
function He(t) {
|
|
193
|
+
if (/Reflect|Proxy|ownKeys/.test(t.textContent || "")) {
|
|
194
|
+
if (Array.from(t.childNodes).forEach((e) => {
|
|
194
195
|
e.nodeType === Node.TEXT_NODE && /Reflect|Proxy|ownKeys/.test(e.textContent || "") && (e.textContent = "");
|
|
195
|
-
}), /Reflect|Proxy|ownKeys/.test(
|
|
196
|
-
if (/Reflect|Proxy|ownKeys/.test(
|
|
197
|
-
for (;
|
|
198
|
-
|
|
196
|
+
}), /Reflect|Proxy|ownKeys/.test(t.textContent || "")) {
|
|
197
|
+
if (/Reflect|Proxy|ownKeys/.test(t.textContent || ""))
|
|
198
|
+
for (; t.firstChild; ) t.removeChild(t.firstChild);
|
|
199
|
+
t.textContent = (t.textContent || "").replace(/Reflect|Proxy|ownKeys/g, "");
|
|
199
200
|
}
|
|
200
|
-
(
|
|
201
|
+
(t.textContent || "").trim().length === 0 && (t.textContent = "");
|
|
201
202
|
}
|
|
202
203
|
}
|
|
203
|
-
function
|
|
204
|
-
const e = /Reflect\.|\bProxy\b|ownKeys\(/.test(
|
|
205
|
-
return
|
|
204
|
+
function oe(t) {
|
|
205
|
+
const e = /Reflect\.|\bProxy\b|ownKeys\(/.test(t), o = (n) => e ? "" : ge(t, n);
|
|
206
|
+
return o.__blocked = e, o;
|
|
206
207
|
}
|
|
207
|
-
function
|
|
208
|
-
return Array.from(
|
|
209
|
-
const n =
|
|
208
|
+
function ze(t) {
|
|
209
|
+
return Array.from(t.querySelectorAll("tbw-grid-column")).map((o) => {
|
|
210
|
+
const n = o.getAttribute("field") || "";
|
|
210
211
|
if (!n) return null;
|
|
211
|
-
const
|
|
212
|
-
|
|
213
|
-
const
|
|
214
|
-
|
|
215
|
-
const [
|
|
216
|
-
return { value:
|
|
212
|
+
const s = o.getAttribute("type") || void 0, r = s && (/* @__PURE__ */ new Set(["number", "string", "date", "boolean", "select", "typeahead"])).has(s) ? s : void 0, l = o.getAttribute("header") || void 0, a = o.hasAttribute("sortable"), d = o.hasAttribute("editable"), h = { field: n, type: r, header: l, sortable: a, editable: d };
|
|
213
|
+
o.hasAttribute("resizable") && (h.resizable = !0), o.hasAttribute("sizable") && (h.resizable = !0);
|
|
214
|
+
const p = o.getAttribute("options");
|
|
215
|
+
p && (h.options = p.split(",").map((f) => {
|
|
216
|
+
const [g, b] = f.includes(":") ? f.split(":") : [f.trim(), f.trim()];
|
|
217
|
+
return { value: g.trim(), label: b?.trim() || g.trim() };
|
|
217
218
|
}));
|
|
218
|
-
const
|
|
219
|
-
return
|
|
220
|
-
}).filter((
|
|
221
|
-
}
|
|
222
|
-
function
|
|
223
|
-
if ((!
|
|
224
|
-
if (!
|
|
225
|
-
if (!e || !e.length) return
|
|
226
|
-
const
|
|
227
|
-
e.forEach((
|
|
228
|
-
const n =
|
|
229
|
-
const
|
|
230
|
-
if (!
|
|
231
|
-
const r = { ...
|
|
232
|
-
return
|
|
219
|
+
const w = o.querySelector("tbw-grid-column-view"), c = o.querySelector("tbw-grid-column-editor"), u = o.querySelector("tbw-grid-column-header");
|
|
220
|
+
return w && (h.__viewTemplate = w), c && (h.__editorTemplate = c), u && (h.__headerTemplate = u), h;
|
|
221
|
+
}).filter((o) => !!o);
|
|
222
|
+
}
|
|
223
|
+
function Ne(t, e) {
|
|
224
|
+
if ((!t || !t.length) && (!e || !e.length)) return [];
|
|
225
|
+
if (!t || !t.length) return e || [];
|
|
226
|
+
if (!e || !e.length) return t;
|
|
227
|
+
const o = {};
|
|
228
|
+
e.forEach((s) => o[s.field] = s);
|
|
229
|
+
const n = t.map((s) => {
|
|
230
|
+
const i = o[s.field];
|
|
231
|
+
if (!i) return s;
|
|
232
|
+
const r = { ...s };
|
|
233
|
+
return i.header && !r.header && (r.header = i.header), i.type && !r.type && (r.type = i.type), r.sortable = s.sortable || i.sortable, (s.resizable === !0 || i.resizable === !0) && (r.resizable = !0), r.editable = s.editable || i.editable, i.__viewTemplate && (r.__viewTemplate = i.__viewTemplate), i.__editorTemplate && (r.__editorTemplate = i.__editorTemplate), i.__headerTemplate && (r.__headerTemplate = i.__headerTemplate), delete o[s.field], r;
|
|
233
234
|
});
|
|
234
|
-
return Object.keys(
|
|
235
|
+
return Object.keys(o).forEach((s) => n.push(o[s])), n;
|
|
235
236
|
}
|
|
236
|
-
function
|
|
237
|
+
function X(t, e) {
|
|
237
238
|
try {
|
|
238
|
-
|
|
239
|
+
t.part?.add?.(e);
|
|
239
240
|
} catch {
|
|
240
241
|
}
|
|
241
|
-
const
|
|
242
|
-
|
|
242
|
+
const o = t.getAttribute("part");
|
|
243
|
+
o ? o.split(/\s+/).includes(e) || t.setAttribute("part", o + " " + e) : t.setAttribute("part", e);
|
|
243
244
|
}
|
|
244
|
-
function
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
),
|
|
248
|
-
const e =
|
|
249
|
-
|
|
250
|
-
|
|
245
|
+
function qe(t) {
|
|
246
|
+
t.__lightDomColumnsCache || (t.__originalColumnNodes = Array.from(
|
|
247
|
+
t.querySelectorAll("tbw-grid-column")
|
|
248
|
+
), t.__lightDomColumnsCache = t.__originalColumnNodes.length ? ze(t) : []);
|
|
249
|
+
const e = t.__lightDomColumnsCache, o = Ne(t._columns, e);
|
|
250
|
+
o.forEach((s) => {
|
|
251
|
+
s.__viewTemplate && !s.__compiledView && (s.__compiledView = oe(s.__viewTemplate.innerHTML)), s.__editorTemplate && !s.__compiledEditor && (s.__compiledEditor = oe(s.__editorTemplate.innerHTML));
|
|
251
252
|
});
|
|
252
|
-
const { columns: n } =
|
|
253
|
-
|
|
254
|
-
}
|
|
255
|
-
function
|
|
256
|
-
const e =
|
|
257
|
-
if (e !==
|
|
258
|
-
const
|
|
259
|
-
if (!
|
|
253
|
+
const { columns: n } = we(t._rows, o);
|
|
254
|
+
t._columns = n;
|
|
255
|
+
}
|
|
256
|
+
function Ie(t) {
|
|
257
|
+
const e = t.effectiveConfig?.fitMode || t.fitMode || q.STRETCH;
|
|
258
|
+
if (e !== q.STRETCH && e !== q.FIXED || t.__didInitialAutoSize || !t.isConnected) return;
|
|
259
|
+
const o = t.headerRowEl?.children || [];
|
|
260
|
+
if (!o.length) return;
|
|
260
261
|
let n = !1;
|
|
261
|
-
|
|
262
|
-
if (
|
|
263
|
-
const r =
|
|
264
|
-
let
|
|
265
|
-
for (const
|
|
266
|
-
const
|
|
267
|
-
if (
|
|
268
|
-
const
|
|
269
|
-
|
|
262
|
+
t.visibleColumns.forEach((s, i) => {
|
|
263
|
+
if (s.width) return;
|
|
264
|
+
const r = o[i];
|
|
265
|
+
let l = r ? r.scrollWidth : 0;
|
|
266
|
+
for (const a of t.rowPool) {
|
|
267
|
+
const d = a.children[i];
|
|
268
|
+
if (d) {
|
|
269
|
+
const h = d.scrollWidth;
|
|
270
|
+
h > l && (l = h);
|
|
270
271
|
}
|
|
271
272
|
}
|
|
272
|
-
|
|
273
|
-
}), n &&
|
|
273
|
+
l > 0 && (s.width = l + 2, s.__autoSized = !0, n = !0);
|
|
274
|
+
}), n && be(t), t.__didInitialAutoSize = !0;
|
|
274
275
|
}
|
|
275
|
-
function
|
|
276
|
-
(
|
|
277
|
-
if (
|
|
278
|
-
const n =
|
|
276
|
+
function be(t) {
|
|
277
|
+
(t.effectiveConfig?.fitMode || t.fitMode || q.STRETCH) === q.STRETCH ? t.gridTemplate = t.visibleColumns.map((o) => {
|
|
278
|
+
if (o.width) return `${o.width}px`;
|
|
279
|
+
const n = o.minWidth;
|
|
279
280
|
return n != null ? `minmax(${n}px, 1fr)` : "1fr";
|
|
280
|
-
}).join(" ").trim() :
|
|
281
|
+
}).join(" ").trim() : t.gridTemplate = t.visibleColumns.map((o) => o.width ? `${o.width}px` : "max-content").join(" "), t.style.setProperty("--tbw-column-template", t.gridTemplate);
|
|
281
282
|
}
|
|
282
|
-
function
|
|
283
|
-
switch (
|
|
283
|
+
function $e(t) {
|
|
284
|
+
switch (t.type) {
|
|
284
285
|
case "number":
|
|
285
286
|
return (e) => {
|
|
286
|
-
const
|
|
287
|
-
return
|
|
288
|
-
n.key === "Enter" && e.commit(
|
|
289
|
-
}),
|
|
287
|
+
const o = document.createElement("input");
|
|
288
|
+
return o.type = "number", o.value = e.value ?? "", o.addEventListener("blur", () => e.commit(o.value === "" ? null : Number(o.value))), o.addEventListener("keydown", (n) => {
|
|
289
|
+
n.key === "Enter" && e.commit(o.value === "" ? null : Number(o.value)), n.key === "Escape" && e.cancel();
|
|
290
|
+
}), o.focus(), o;
|
|
290
291
|
};
|
|
291
292
|
case "boolean":
|
|
292
293
|
return (e) => {
|
|
293
|
-
const
|
|
294
|
-
return
|
|
294
|
+
const o = document.createElement("input");
|
|
295
|
+
return o.type = "checkbox", o.checked = !!e.value, o.addEventListener("change", () => e.commit(o.checked)), o.focus(), o;
|
|
295
296
|
};
|
|
296
297
|
case "date":
|
|
297
298
|
return (e) => {
|
|
298
|
-
const
|
|
299
|
-
return
|
|
299
|
+
const o = document.createElement("input");
|
|
300
|
+
return o.type = "date", e.value instanceof Date && (o.valueAsDate = e.value), o.addEventListener("change", () => e.commit(o.valueAsDate)), o.addEventListener("keydown", (n) => {
|
|
300
301
|
n.key === "Escape" && e.cancel();
|
|
301
|
-
}),
|
|
302
|
+
}), o.focus(), o;
|
|
302
303
|
};
|
|
303
304
|
case "select":
|
|
304
305
|
case "typeahead":
|
|
305
306
|
return (e) => {
|
|
306
|
-
const
|
|
307
|
-
e.column.multi && (
|
|
307
|
+
const o = document.createElement("select");
|
|
308
|
+
e.column.multi && (o.multiple = !0), (typeof e.column.options == "function" ? e.column.options() : e.column.options || []).forEach((i) => {
|
|
308
309
|
const r = document.createElement("option");
|
|
309
|
-
r.value = String(
|
|
310
|
+
r.value = String(i.value), r.textContent = i.label, (e.column.multi && Array.isArray(e.value) && e.value.includes(i.value) || !e.column.multi && e.value === i.value) && (r.selected = !0), o.appendChild(r);
|
|
310
311
|
});
|
|
311
|
-
const
|
|
312
|
+
const s = () => {
|
|
312
313
|
if (e.column.multi) {
|
|
313
|
-
const
|
|
314
|
-
Array.from(
|
|
315
|
-
|
|
316
|
-
}), e.commit(
|
|
314
|
+
const i = [];
|
|
315
|
+
Array.from(o.selectedOptions).forEach((r) => {
|
|
316
|
+
i.push(r.value);
|
|
317
|
+
}), e.commit(i);
|
|
317
318
|
} else
|
|
318
|
-
e.commit(
|
|
319
|
+
e.commit(o.value);
|
|
319
320
|
};
|
|
320
|
-
return
|
|
321
|
-
|
|
322
|
-
}),
|
|
321
|
+
return o.addEventListener("change", s), o.addEventListener("blur", s), o.addEventListener("keydown", (i) => {
|
|
322
|
+
i.key === "Escape" && e.cancel();
|
|
323
|
+
}), o.focus(), o;
|
|
323
324
|
};
|
|
324
325
|
default:
|
|
325
326
|
return (e) => {
|
|
326
|
-
const
|
|
327
|
-
return
|
|
328
|
-
n.key === "Enter" && e.commit(
|
|
329
|
-
}),
|
|
327
|
+
const o = document.createElement("input");
|
|
328
|
+
return o.type = "text", o.value = e.value ?? "", o.addEventListener("blur", () => e.commit(o.value)), o.addEventListener("keydown", (n) => {
|
|
329
|
+
n.key === "Enter" && e.commit(o.value), n.key === "Escape" && e.cancel();
|
|
330
|
+
}), o.focus(), o;
|
|
330
331
|
};
|
|
331
332
|
}
|
|
332
333
|
}
|
|
333
|
-
function
|
|
334
|
-
if (
|
|
334
|
+
function Be(t, e) {
|
|
335
|
+
if (t.dispatchKeyDown?.(e))
|
|
335
336
|
return;
|
|
336
|
-
const
|
|
337
|
-
if (!
|
|
338
|
-
const
|
|
339
|
-
return !!(
|
|
337
|
+
const o = t._rows.length - 1, n = t.visibleColumns.length - 1, s = t.activeEditRows !== void 0 && t.activeEditRows !== -1, r = t.visibleColumns[t.focusCol]?.type, l = e.composedPath ? e.composedPath() : [], a = l && l.length ? l[0] : e.target, d = (h) => {
|
|
338
|
+
if (!h) return !1;
|
|
339
|
+
const p = h.tagName;
|
|
340
|
+
return !!(p === "INPUT" || p === "SELECT" || p === "TEXTAREA" || h.isContentEditable);
|
|
340
341
|
};
|
|
341
|
-
if (!(
|
|
342
|
+
if (!(d(a) && (e.key === "Home" || e.key === "End")) && !(d(a) && (e.key === "ArrowUp" || e.key === "ArrowDown") && a.tagName === "INPUT" && a.type === "number") && !(d(a) && (e.key === "ArrowLeft" || e.key === "ArrowRight")) && !(d(a) && (e.key === "Enter" || e.key === "Escape")) && !(s && (r === "select" || r === "typeahead") && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
|
|
342
343
|
switch (e.key) {
|
|
343
344
|
case "Tab": {
|
|
344
|
-
e.preventDefault(), !e.shiftKey ?
|
|
345
|
+
e.preventDefault(), !e.shiftKey ? t.focusCol < n ? t.focusCol += 1 : (typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow < o && (t.focusRow += 1, t.focusCol = 0)) : t.focusCol > 0 ? t.focusCol -= 1 : t.focusRow > 0 && (typeof t.commitActiveRowEdit == "function" && t.activeEditRows === t.focusRow && t.commitActiveRowEdit(), t.focusRow -= 1, t.focusCol = n), I(t);
|
|
345
346
|
return;
|
|
346
347
|
}
|
|
347
348
|
case "ArrowDown":
|
|
348
|
-
|
|
349
|
+
s && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow = Math.min(o, t.focusRow + 1), e.preventDefault();
|
|
349
350
|
break;
|
|
350
351
|
case "ArrowUp":
|
|
351
|
-
|
|
352
|
+
s && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow = Math.max(0, t.focusRow - 1), e.preventDefault();
|
|
352
353
|
break;
|
|
353
354
|
case "ArrowRight":
|
|
354
|
-
|
|
355
|
+
t.focusCol = Math.min(n, t.focusCol + 1), e.preventDefault();
|
|
355
356
|
break;
|
|
356
357
|
case "ArrowLeft":
|
|
357
|
-
|
|
358
|
+
t.focusCol = Math.max(0, t.focusCol - 1), e.preventDefault();
|
|
358
359
|
break;
|
|
359
360
|
case "Home":
|
|
360
|
-
|
|
361
|
+
t.focusCol = 0, e.preventDefault();
|
|
361
362
|
break;
|
|
362
363
|
case "End":
|
|
363
|
-
|
|
364
|
+
t.focusCol = n, e.preventDefault();
|
|
364
365
|
break;
|
|
365
366
|
case "PageDown":
|
|
366
|
-
|
|
367
|
+
t.focusRow = Math.min(o, t.focusRow + 20), e.preventDefault();
|
|
367
368
|
break;
|
|
368
369
|
case "PageUp":
|
|
369
|
-
|
|
370
|
+
t.focusRow = Math.max(0, t.focusRow - 20), e.preventDefault();
|
|
370
371
|
break;
|
|
371
372
|
case "Enter":
|
|
372
|
-
return typeof
|
|
373
|
-
new CustomEvent("activate-cell", { detail: { row:
|
|
374
|
-
),
|
|
373
|
+
return typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(t.focusRow) : t.dispatchEvent(
|
|
374
|
+
new CustomEvent("activate-cell", { detail: { row: t.focusRow, col: t.focusCol } })
|
|
375
|
+
), I(t);
|
|
375
376
|
default:
|
|
376
377
|
return;
|
|
377
378
|
}
|
|
378
|
-
|
|
379
|
+
I(t);
|
|
379
380
|
}
|
|
380
381
|
}
|
|
381
|
-
function
|
|
382
|
-
if (
|
|
383
|
-
const { rowHeight: i } =
|
|
384
|
-
|
|
382
|
+
function I(t) {
|
|
383
|
+
if (t.virtualization?.enabled) {
|
|
384
|
+
const { rowHeight: i, container: r, viewportEl: l } = t.virtualization, a = r, d = l?.clientHeight ?? a?.clientHeight ?? 0;
|
|
385
|
+
if (a && d > 0) {
|
|
386
|
+
const h = t.focusRow * i;
|
|
387
|
+
h < a.scrollTop ? a.scrollTop = h : h + i > a.scrollTop + d && (a.scrollTop = h - d + i);
|
|
388
|
+
}
|
|
385
389
|
}
|
|
386
|
-
|
|
390
|
+
t.activeEditRows !== void 0 && t.activeEditRows !== -1 || t.refreshVirtualWindow(!1), Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((i) => i.classList.remove("cell-focus")), Array.from(t.bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((i) => {
|
|
387
391
|
i.setAttribute("aria-selected", "false");
|
|
388
392
|
});
|
|
389
|
-
const
|
|
390
|
-
if (
|
|
391
|
-
const
|
|
392
|
-
if (
|
|
393
|
-
if (
|
|
394
|
-
const
|
|
393
|
+
const o = t.focusRow, n = t.virtualization.start ?? 0, s = t.virtualization.end ?? t._rows.length;
|
|
394
|
+
if (o >= n && o < s) {
|
|
395
|
+
const r = t.bodyEl.querySelectorAll(".data-grid-row")[o - n]?.children[t.focusCol];
|
|
396
|
+
if (r) {
|
|
397
|
+
if (r.classList.add("cell-focus"), r.setAttribute("aria-selected", "true"), t.activeEditRows !== void 0 && t.activeEditRows !== -1 && r.classList.contains("editing")) {
|
|
398
|
+
const l = r.querySelector(
|
|
395
399
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
396
400
|
);
|
|
397
|
-
if (
|
|
401
|
+
if (l && document.activeElement !== l)
|
|
398
402
|
try {
|
|
399
|
-
|
|
403
|
+
l.focus();
|
|
400
404
|
} catch {
|
|
401
405
|
}
|
|
402
|
-
} else if (!
|
|
403
|
-
|
|
406
|
+
} else if (!r.contains(document.activeElement)) {
|
|
407
|
+
r.hasAttribute("tabindex") || r.setAttribute("tabindex", "-1");
|
|
404
408
|
try {
|
|
405
|
-
|
|
409
|
+
r.focus({ preventScroll: !0 });
|
|
406
410
|
} catch {
|
|
407
411
|
}
|
|
408
412
|
}
|
|
409
413
|
}
|
|
410
414
|
}
|
|
411
415
|
}
|
|
412
|
-
const
|
|
413
|
-
function j(
|
|
414
|
-
|
|
416
|
+
const Ke = "__cellDisplayCache", We = "__cellCacheEpoch";
|
|
417
|
+
function j(t) {
|
|
418
|
+
t[Ke] = void 0, t[We] = void 0, t.__hasSpecialColumns = void 0;
|
|
415
419
|
}
|
|
416
|
-
function
|
|
417
|
-
const
|
|
418
|
-
let
|
|
419
|
-
for (
|
|
420
|
-
const
|
|
421
|
-
|
|
420
|
+
function Fe(t, e, o, n, s) {
|
|
421
|
+
const i = Math.max(0, o - e), r = t.bodyEl, l = t.visibleColumns, a = l.length;
|
|
422
|
+
let d = t.__cachedHeaderRowCount;
|
|
423
|
+
for (d === void 0 && (d = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = d); t.rowPool.length < i; ) {
|
|
424
|
+
const p = document.createElement("div");
|
|
425
|
+
p.className = "data-grid-row", p.setAttribute("role", "row"), p.addEventListener("click", (w) => ne(t, w, p, !1)), p.addEventListener("dblclick", (w) => ne(t, w, p, !0)), t.rowPool.push(p);
|
|
422
426
|
}
|
|
423
|
-
if (
|
|
424
|
-
for (let
|
|
425
|
-
const
|
|
426
|
-
|
|
427
|
+
if (t.rowPool.length > i) {
|
|
428
|
+
for (let p = i; p < t.rowPool.length; p++) {
|
|
429
|
+
const w = t.rowPool[p];
|
|
430
|
+
w.parentNode === r && w.remove();
|
|
427
431
|
}
|
|
428
|
-
|
|
432
|
+
t.rowPool.length = i;
|
|
429
433
|
}
|
|
430
|
-
const
|
|
431
|
-
for (let
|
|
432
|
-
const
|
|
433
|
-
if (u.setAttribute("aria-rowindex", String(
|
|
434
|
+
const h = s && t.__hasRenderRowPlugins !== !1;
|
|
435
|
+
for (let p = 0; p < i; p++) {
|
|
436
|
+
const w = e + p, c = t._rows[w], u = t.rowPool[p];
|
|
437
|
+
if (u.setAttribute("aria-rowindex", String(w + d + 1)), h && s(c, u, w)) {
|
|
434
438
|
u.__epoch = n, u.__rowDataRef = c, u.parentNode !== r && r.appendChild(u);
|
|
435
439
|
continue;
|
|
436
440
|
}
|
|
437
|
-
const
|
|
438
|
-
let
|
|
439
|
-
if (
|
|
440
|
-
for (let
|
|
441
|
-
if (
|
|
442
|
-
|
|
441
|
+
const f = u.__epoch, g = u.__rowDataRef, b = u.children.length, A = f === n && b === a, _ = g !== c;
|
|
442
|
+
let T = !1;
|
|
443
|
+
if (A && _) {
|
|
444
|
+
for (let y = 0; y < a; y++)
|
|
445
|
+
if (l[y].externalView && !u.querySelector(`.cell[data-col="${y}"] [data-external-view]`)) {
|
|
446
|
+
T = !0;
|
|
443
447
|
break;
|
|
444
448
|
}
|
|
445
449
|
}
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
450
|
+
if (!A || T) {
|
|
451
|
+
const y = u.querySelector(".cell.editing"), E = t.activeEditRows === w;
|
|
452
|
+
if (y && !E)
|
|
453
|
+
u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), O(t, u, c, w), u.__epoch = n, u.__rowDataRef = c;
|
|
454
|
+
else if (y && E)
|
|
455
|
+
F(t, u, c, w), u.__rowDataRef = c;
|
|
456
|
+
else if (u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), O(t, u, c, w), u.__epoch = n, u.__rowDataRef = c, E) {
|
|
457
|
+
const R = u.children;
|
|
458
|
+
for (let C = 0; C < R.length; C++) {
|
|
459
|
+
const L = t.visibleColumns[C];
|
|
460
|
+
L && L.editable && M(t, c, w, L, R[C]);
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
} else if (_) {
|
|
464
|
+
const y = u.querySelector(".cell.editing"), E = t.activeEditRows === w;
|
|
465
|
+
if (y && !E)
|
|
466
|
+
O(t, u, c, w), u.__epoch = n, u.__rowDataRef = c;
|
|
467
|
+
else if (F(t, u, c, w), u.__rowDataRef = c, E && !y) {
|
|
468
|
+
const R = u.children;
|
|
469
|
+
for (let C = 0; C < R.length; C++) {
|
|
470
|
+
const L = t.visibleColumns[C];
|
|
471
|
+
L && L.editable && M(t, c, w, L, R[C]);
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
} else {
|
|
475
|
+
const y = u.querySelector(".cell.editing"), E = t.activeEditRows === w;
|
|
476
|
+
if (y && !E)
|
|
477
|
+
O(t, u, c, w), u.__epoch = n, u.__rowDataRef = c;
|
|
478
|
+
else if (F(t, u, c, w), E && !y) {
|
|
479
|
+
const R = u.children;
|
|
480
|
+
for (let C = 0; C < R.length; C++) {
|
|
481
|
+
const L = t.visibleColumns[C];
|
|
482
|
+
L && L.editable && M(t, c, w, L, R[C]);
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
const m = t._changedRowIndices.has(w), v = u.classList.contains("changed");
|
|
487
|
+
m !== v && u.classList.toggle("changed", m), u.parentNode !== r && r.appendChild(u);
|
|
449
488
|
}
|
|
450
489
|
}
|
|
451
|
-
function
|
|
452
|
-
const
|
|
453
|
-
let
|
|
454
|
-
if (
|
|
455
|
-
|
|
490
|
+
function F(t, e, o, n) {
|
|
491
|
+
const s = e.children, i = t.visibleColumns, r = i.length, l = s.length, a = r < l ? r : l, d = t.focusRow, h = t.focusCol;
|
|
492
|
+
let p = t.__hasSpecialColumns;
|
|
493
|
+
if (p === void 0) {
|
|
494
|
+
p = !1;
|
|
456
495
|
for (let c = 0; c < r; c++) {
|
|
457
|
-
const u =
|
|
496
|
+
const u = i[c];
|
|
458
497
|
if (u.__viewTemplate || u.__compiledView || u.viewRenderer || u.externalView || u.format || u.type === "date" || u.type === "boolean") {
|
|
459
|
-
|
|
498
|
+
p = !0;
|
|
460
499
|
break;
|
|
461
500
|
}
|
|
462
501
|
}
|
|
463
|
-
|
|
502
|
+
t.__hasSpecialColumns = p;
|
|
464
503
|
}
|
|
465
|
-
const
|
|
466
|
-
if (!
|
|
467
|
-
for (let c = 0; c <
|
|
468
|
-
const u =
|
|
469
|
-
u.textContent =
|
|
470
|
-
const
|
|
471
|
-
|
|
504
|
+
const w = String(n);
|
|
505
|
+
if (!p) {
|
|
506
|
+
for (let c = 0; c < a; c++) {
|
|
507
|
+
const u = s[c], f = o[i[c].field];
|
|
508
|
+
u.textContent = f == null ? "" : String(f), u.getAttribute("data-row") !== w && u.setAttribute("data-row", w);
|
|
509
|
+
const g = d === n && h === c, b = u.classList.contains("cell-focus");
|
|
510
|
+
g !== b && (u.classList.toggle("cell-focus", g), u.setAttribute("aria-selected", String(g)));
|
|
472
511
|
}
|
|
473
512
|
return;
|
|
474
513
|
}
|
|
475
|
-
for (let c = 0; c <
|
|
476
|
-
if (
|
|
477
|
-
|
|
514
|
+
for (let c = 0; c < a; c++)
|
|
515
|
+
if (i[c].externalView && !s[c].querySelector("[data-external-view]")) {
|
|
516
|
+
O(t, e, o, n);
|
|
478
517
|
return;
|
|
479
518
|
}
|
|
480
|
-
for (let c = 0; c <
|
|
481
|
-
const u =
|
|
482
|
-
|
|
483
|
-
const
|
|
484
|
-
if (
|
|
519
|
+
for (let c = 0; c < a; c++) {
|
|
520
|
+
const u = i[c], f = s[c];
|
|
521
|
+
f.getAttribute("data-row") !== w && f.setAttribute("data-row", w);
|
|
522
|
+
const g = d === n && h === c, b = f.classList.contains("cell-focus");
|
|
523
|
+
if (g !== b && (f.classList.toggle("cell-focus", g), f.setAttribute("aria-selected", String(g))), f.classList.contains("editing")) continue;
|
|
485
524
|
if (u.viewRenderer) {
|
|
486
|
-
const
|
|
487
|
-
typeof
|
|
525
|
+
const _ = o[u.field], T = u.viewRenderer({ row: o, value: _, field: u.field, column: u });
|
|
526
|
+
typeof T == "string" ? f.innerHTML = K(T) : T ? (f.innerHTML = "", f.appendChild(T)) : f.textContent = _ == null ? "" : String(_);
|
|
488
527
|
continue;
|
|
489
528
|
}
|
|
490
529
|
if (u.__viewTemplate || u.__compiledView || u.externalView)
|
|
491
530
|
continue;
|
|
492
|
-
const
|
|
493
|
-
let
|
|
531
|
+
const x = o[u.field];
|
|
532
|
+
let A;
|
|
494
533
|
if (u.format)
|
|
495
534
|
try {
|
|
496
|
-
const
|
|
497
|
-
|
|
535
|
+
const _ = u.format(x, o);
|
|
536
|
+
A = _ == null ? "" : String(_);
|
|
498
537
|
} catch {
|
|
499
|
-
|
|
538
|
+
A = x == null ? "" : String(x);
|
|
500
539
|
}
|
|
501
|
-
else if (u.type === "date")
|
|
502
|
-
if (
|
|
503
|
-
|
|
504
|
-
else if (
|
|
505
|
-
|
|
540
|
+
else if (u.type === "date") {
|
|
541
|
+
if (x == null || x === "")
|
|
542
|
+
A = "";
|
|
543
|
+
else if (x instanceof Date)
|
|
544
|
+
A = isNaN(x.getTime()) ? "" : x.toLocaleDateString();
|
|
506
545
|
else {
|
|
507
|
-
const
|
|
508
|
-
|
|
546
|
+
const _ = new Date(x);
|
|
547
|
+
A = isNaN(_.getTime()) ? "" : _.toLocaleDateString();
|
|
509
548
|
}
|
|
510
|
-
|
|
511
|
-
|
|
549
|
+
f.textContent = A;
|
|
550
|
+
} else if (u.type === "boolean") {
|
|
551
|
+
const _ = !!x;
|
|
552
|
+
f.innerHTML = `<span role="checkbox" aria-checked="${_}" aria-label="${_}">${_ ? "🗹" : "☐"}</span>`;
|
|
553
|
+
} else
|
|
554
|
+
A = x == null ? "" : String(x), f.textContent = A;
|
|
512
555
|
}
|
|
513
556
|
}
|
|
514
|
-
function
|
|
557
|
+
function O(t, e, o, n) {
|
|
515
558
|
e.innerHTML = "";
|
|
516
|
-
const
|
|
517
|
-
for (let
|
|
518
|
-
const
|
|
519
|
-
c.className = "cell",
|
|
520
|
-
const u =
|
|
559
|
+
const s = t.visibleColumns, i = s.length, r = t.focusRow, l = t.focusCol, a = t.effectiveConfig?.editOn || t.editOn, d = t, h = document.createDocumentFragment();
|
|
560
|
+
for (let p = 0; p < i; p++) {
|
|
561
|
+
const w = s[p], c = document.createElement("div");
|
|
562
|
+
c.className = "cell", X(c, "cell"), c.setAttribute("role", "gridcell"), c.setAttribute("aria-colindex", String(p + 1)), c.setAttribute("data-col", String(p)), c.setAttribute("data-row", String(n)), w.type, w.type && c.setAttribute("data-type", w.type);
|
|
563
|
+
const u = w.sticky;
|
|
521
564
|
u === "left" ? c.classList.add("sticky-left") : u === "right" && c.classList.add("sticky-right");
|
|
522
|
-
let
|
|
523
|
-
const
|
|
524
|
-
if (
|
|
565
|
+
let f = o[w.field];
|
|
566
|
+
const g = w.format;
|
|
567
|
+
if (g)
|
|
525
568
|
try {
|
|
526
|
-
|
|
569
|
+
f = g(f, o);
|
|
527
570
|
} catch {
|
|
528
571
|
}
|
|
529
|
-
const
|
|
530
|
-
let
|
|
531
|
-
if (
|
|
532
|
-
const
|
|
533
|
-
typeof
|
|
534
|
-
} else if (
|
|
535
|
-
const
|
|
536
|
-
v.setAttribute("data-external-view", ""), v.setAttribute("data-field",
|
|
537
|
-
const
|
|
538
|
-
if (
|
|
572
|
+
const b = w.__compiledView, x = w.__viewTemplate, A = w.viewRenderer, _ = w.externalView;
|
|
573
|
+
let T = !1;
|
|
574
|
+
if (A) {
|
|
575
|
+
const m = A({ row: o, value: f, field: w.field, column: w });
|
|
576
|
+
typeof m == "string" ? (c.innerHTML = K(m), T = !0) : m ? c.appendChild(m) : c.textContent = f == null ? "" : String(f);
|
|
577
|
+
} else if (_) {
|
|
578
|
+
const m = _, v = document.createElement("div");
|
|
579
|
+
v.setAttribute("data-external-view", ""), v.setAttribute("data-field", w.field), c.appendChild(v);
|
|
580
|
+
const y = { row: o, value: f, field: w.field, column: w };
|
|
581
|
+
if (m.mount)
|
|
539
582
|
try {
|
|
540
|
-
|
|
583
|
+
m.mount({ placeholder: v, context: y, spec: m });
|
|
541
584
|
} catch {
|
|
542
585
|
}
|
|
543
586
|
else
|
|
544
587
|
queueMicrotask(() => {
|
|
545
588
|
try {
|
|
546
|
-
|
|
589
|
+
d.dispatchEvent(
|
|
547
590
|
new CustomEvent("mount-external-view", {
|
|
548
591
|
bubbles: !0,
|
|
549
592
|
composed: !0,
|
|
550
|
-
detail: { placeholder: v, spec:
|
|
593
|
+
detail: { placeholder: v, spec: m, context: y }
|
|
551
594
|
})
|
|
552
595
|
);
|
|
553
596
|
} catch {
|
|
554
597
|
}
|
|
555
598
|
});
|
|
556
599
|
v.setAttribute("data-mounted", "");
|
|
557
|
-
} else if (
|
|
558
|
-
const
|
|
559
|
-
c.innerHTML = v ? "" :
|
|
560
|
-
} else if (
|
|
561
|
-
const
|
|
562
|
-
/Reflect\.|\bProxy\b|ownKeys\(/.test(
|
|
563
|
-
} else if (
|
|
564
|
-
if (
|
|
600
|
+
} else if (b) {
|
|
601
|
+
const m = b({ row: o, value: f, field: w.field, column: w }), v = b.__blocked;
|
|
602
|
+
c.innerHTML = v ? "" : K(m), T = !0, v && (c.textContent = "", c.setAttribute("data-blocked-template", ""));
|
|
603
|
+
} else if (x) {
|
|
604
|
+
const m = x.innerHTML;
|
|
605
|
+
/Reflect\.|\bProxy\b|ownKeys\(/.test(m) ? (c.textContent = "", c.setAttribute("data-blocked-template", "")) : (c.innerHTML = K(ge(m, { row: o, value: f })), T = !0);
|
|
606
|
+
} else if (w.type === "date")
|
|
607
|
+
if (f == null || f === "")
|
|
565
608
|
c.textContent = "";
|
|
566
609
|
else {
|
|
567
|
-
let
|
|
568
|
-
if (
|
|
569
|
-
else if (typeof
|
|
570
|
-
const v = new Date(
|
|
571
|
-
isNaN(v.getTime()) || (
|
|
610
|
+
let m = null;
|
|
611
|
+
if (f instanceof Date) m = f;
|
|
612
|
+
else if (typeof f == "number" || typeof f == "string") {
|
|
613
|
+
const v = new Date(f);
|
|
614
|
+
isNaN(v.getTime()) || (m = v);
|
|
572
615
|
}
|
|
573
|
-
c.textContent =
|
|
616
|
+
c.textContent = m ? m.toLocaleDateString() : "";
|
|
574
617
|
}
|
|
575
|
-
else if (
|
|
576
|
-
const
|
|
577
|
-
c.innerHTML =
|
|
618
|
+
else if (w.type === "boolean") {
|
|
619
|
+
const m = !!f;
|
|
620
|
+
c.innerHTML = `<span role="checkbox" aria-checked="${m}" aria-label="${m}">${m ? "🗹" : "☐"}</span>`;
|
|
578
621
|
} else
|
|
579
|
-
c.textContent =
|
|
580
|
-
if (
|
|
581
|
-
|
|
582
|
-
const
|
|
583
|
-
/Proxy|Reflect\.ownKeys/.test(
|
|
584
|
-
}
|
|
585
|
-
c.hasAttribute("data-blocked-template") && (c.textContent || "").trim().length && (c.textContent = ""),
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
})
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
622
|
+
c.textContent = f == null ? "" : String(f);
|
|
623
|
+
if (T) {
|
|
624
|
+
He(c);
|
|
625
|
+
const m = c.textContent || "";
|
|
626
|
+
/Proxy|Reflect\.ownKeys/.test(m) && (c.textContent = m.replace(/Proxy|Reflect\.ownKeys/g, "").trim(), /Proxy|Reflect\.ownKeys/.test(c.textContent || "") && (c.textContent = ""));
|
|
627
|
+
}
|
|
628
|
+
c.hasAttribute("data-blocked-template") && (c.textContent || "").trim().length && (c.textContent = ""), w.editable ? (c.tabIndex = 0, c.addEventListener("mousedown", () => {
|
|
629
|
+
if (c.classList.contains("editing")) return;
|
|
630
|
+
const m = Number(c.getAttribute("data-row")), v = Number(c.getAttribute("data-col"));
|
|
631
|
+
isNaN(m) || isNaN(v) || (t.focusRow = m, t.focusCol = v, I(t));
|
|
632
|
+
}), a === "click" ? c.addEventListener("click", (m) => {
|
|
633
|
+
if (c.classList.contains("editing")) return;
|
|
634
|
+
m.stopPropagation();
|
|
635
|
+
const v = Number(c.getAttribute("data-row")), y = Number(c.getAttribute("data-col"));
|
|
636
|
+
if (isNaN(v) || isNaN(y)) return;
|
|
637
|
+
const E = t._rows[v], R = t.visibleColumns[y];
|
|
638
|
+
!E || !R || (t.focusRow = v, t.focusCol = y, M(t, E, v, R, c));
|
|
639
|
+
}) : c.addEventListener("dblclick", (m) => {
|
|
640
|
+
m.stopPropagation();
|
|
641
|
+
const v = Number(c.getAttribute("data-row"));
|
|
642
|
+
if (isNaN(v)) return;
|
|
643
|
+
const y = t._rows[v];
|
|
644
|
+
if (!y) return;
|
|
645
|
+
H(t, v, y);
|
|
646
|
+
const E = t.findRenderedRowElement?.(v);
|
|
647
|
+
if (E) {
|
|
648
|
+
const R = E.children;
|
|
649
|
+
for (let C = 0; C < R.length; C++) {
|
|
650
|
+
const L = t.visibleColumns[C];
|
|
651
|
+
L && L.editable && M(t, y, v, L, R[C]);
|
|
597
652
|
}
|
|
598
653
|
}
|
|
599
|
-
}), c.addEventListener("keydown", (
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
o.activeEditRows !== n && T(o, n, t), $(o, n, h, v, t), c.innerHTML = v ? "🗹" : "☐", c.setAttribute("role", "checkbox"), c.setAttribute("aria-checked", String(!!v)), c.setAttribute("aria-label", String(!!v));
|
|
654
|
+
}), c.addEventListener("keydown", (m) => {
|
|
655
|
+
const v = Number(c.getAttribute("data-row")), y = Number(c.getAttribute("data-col"));
|
|
656
|
+
if (isNaN(v) || isNaN(y)) return;
|
|
657
|
+
const E = t._rows[v], R = t.visibleColumns[y];
|
|
658
|
+
if (!(!E || !R)) {
|
|
659
|
+
if ((R.type === "select" || R.type === "typeahead") && !c.classList.contains("editing") && m.key === "Enter") {
|
|
660
|
+
m.preventDefault(), t.activeEditRows !== v && H(t, v, E), M(t, E, v, R, c), setTimeout(() => {
|
|
661
|
+
const C = c.querySelector("select");
|
|
662
|
+
try {
|
|
663
|
+
C?.showPicker?.();
|
|
664
|
+
} catch {
|
|
665
|
+
}
|
|
666
|
+
C?.focus();
|
|
667
|
+
}, 0);
|
|
668
|
+
return;
|
|
669
|
+
}
|
|
670
|
+
if (R.type === "boolean" && m.key === " " && !c.classList.contains("editing")) {
|
|
671
|
+
m.preventDefault(), t.activeEditRows !== v && H(t, v, E);
|
|
672
|
+
const C = !E[R.field];
|
|
673
|
+
J(t, v, R, C, E), c.innerHTML = `<span role="checkbox" aria-checked="${C}" aria-label="${C}">${C ? "🗹" : "☐"}</span>`;
|
|
674
|
+
return;
|
|
675
|
+
}
|
|
676
|
+
if (m.key === "Enter" && !c.classList.contains("editing")) {
|
|
677
|
+
m.preventDefault(), m.stopPropagation(), t.focusRow = v, t.focusCol = y, typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(v) : M(t, E, v, R, c);
|
|
678
|
+
return;
|
|
679
|
+
}
|
|
680
|
+
if (m.key === "F2" && !c.classList.contains("editing")) {
|
|
681
|
+
m.preventDefault(), M(t, E, v, R, c);
|
|
682
|
+
return;
|
|
683
|
+
}
|
|
630
684
|
}
|
|
631
|
-
})), r === n &&
|
|
685
|
+
})) : w.type === "boolean" && (c.hasAttribute("tabindex") || (c.tabIndex = 0)), r === n && l === p ? c.setAttribute("aria-selected", "true") : c.setAttribute("aria-selected", "false"), h.appendChild(c);
|
|
632
686
|
}
|
|
633
|
-
e.appendChild(
|
|
687
|
+
e.appendChild(h);
|
|
634
688
|
}
|
|
635
|
-
function
|
|
689
|
+
function ne(t, e, o, n) {
|
|
636
690
|
if (e.target?.closest(".resize-handle")) return;
|
|
637
|
-
const
|
|
638
|
-
if (!
|
|
639
|
-
const
|
|
640
|
-
if (isNaN(
|
|
641
|
-
const r =
|
|
691
|
+
const s = o.querySelector(".cell[data-row]");
|
|
692
|
+
if (!s) return;
|
|
693
|
+
const i = Number(s.getAttribute("data-row"));
|
|
694
|
+
if (isNaN(i)) return;
|
|
695
|
+
const r = t._rows[i];
|
|
642
696
|
if (!r) return;
|
|
643
|
-
const
|
|
644
|
-
if (
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
697
|
+
const l = e.target?.closest(".cell[data-col]");
|
|
698
|
+
if (l) {
|
|
699
|
+
if (l.classList.contains("editing")) return;
|
|
700
|
+
const d = Number(l.getAttribute("data-col"));
|
|
701
|
+
if (!isNaN(d)) {
|
|
702
|
+
if (t.dispatchCellClick?.(e, i, d, l))
|
|
648
703
|
return;
|
|
649
|
-
|
|
704
|
+
t.focusRow = i, t.focusCol = d, I(t);
|
|
650
705
|
}
|
|
651
706
|
}
|
|
652
|
-
if (
|
|
653
|
-
const
|
|
707
|
+
if (o.querySelector(".cell.editing")) {
|
|
708
|
+
const d = o.querySelectorAll(".cell.editing");
|
|
654
709
|
if (!n) return;
|
|
655
|
-
|
|
710
|
+
d.forEach((h) => h.classList.remove("editing"));
|
|
656
711
|
}
|
|
657
|
-
const
|
|
658
|
-
if (
|
|
712
|
+
const a = t.effectiveConfig?.editOn || t.editOn || "doubleClick";
|
|
713
|
+
if (a === "click" || a === "doubleClick" && n) H(t, i, r);
|
|
659
714
|
else return;
|
|
660
|
-
Array.from(
|
|
661
|
-
const
|
|
662
|
-
|
|
663
|
-
}),
|
|
664
|
-
const
|
|
665
|
-
if (
|
|
666
|
-
const
|
|
715
|
+
Array.from(o.children).forEach((d, h) => {
|
|
716
|
+
const p = t.visibleColumns[h];
|
|
717
|
+
p && p.editable && M(t, r, i, p, d);
|
|
718
|
+
}), l && queueMicrotask(() => {
|
|
719
|
+
const d = o.querySelector(`.cell[data-col="${t.focusCol}"]`);
|
|
720
|
+
if (d?.classList.contains("editing")) {
|
|
721
|
+
const h = d.querySelector(
|
|
667
722
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
668
723
|
);
|
|
669
724
|
try {
|
|
670
|
-
|
|
725
|
+
h?.focus();
|
|
671
726
|
} catch {
|
|
672
727
|
}
|
|
673
728
|
}
|
|
674
729
|
});
|
|
675
730
|
}
|
|
676
|
-
function
|
|
677
|
-
|
|
678
|
-
}
|
|
679
|
-
function
|
|
680
|
-
if (
|
|
681
|
-
const n =
|
|
682
|
-
if (
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
const
|
|
686
|
-
|
|
731
|
+
function H(t, e, o) {
|
|
732
|
+
t.activeEditRows !== e && (t.rowEditSnapshots.set(e, { ...o }), t.activeEditRows = e);
|
|
733
|
+
}
|
|
734
|
+
function N(t, e, o) {
|
|
735
|
+
if (t.activeEditRows !== e) return;
|
|
736
|
+
const n = t.rowEditSnapshots.get(e), s = t._rows[e], i = t.findRenderedRowElement?.(e);
|
|
737
|
+
if (!o && i && s && i.querySelectorAll(".cell.editing").forEach((l) => {
|
|
738
|
+
const a = Number(l.getAttribute("data-col"));
|
|
739
|
+
if (isNaN(a)) return;
|
|
740
|
+
const d = t.visibleColumns[a];
|
|
741
|
+
if (!d) return;
|
|
742
|
+
const h = l.querySelector("input,textarea,select");
|
|
743
|
+
if (h) {
|
|
744
|
+
let p;
|
|
745
|
+
h instanceof HTMLInputElement && h.type === "checkbox" ? p = h.checked : (p = h.value, d.type === "number" && p !== "" && (p = Number(p))), s[d.field] !== p && J(t, e, d, p, s);
|
|
746
|
+
}
|
|
747
|
+
}), o && n && s)
|
|
748
|
+
Object.keys(n).forEach((r) => s[r] = n[r]), t._changedRowIndices.delete(e), j(t);
|
|
749
|
+
else if (!o) {
|
|
750
|
+
const r = t._changedRowIndices.has(e);
|
|
751
|
+
t.dispatchEvent(
|
|
687
752
|
new CustomEvent("row-commit", {
|
|
688
753
|
detail: {
|
|
689
754
|
rowIndex: e,
|
|
690
|
-
row:
|
|
755
|
+
row: s,
|
|
691
756
|
changed: r,
|
|
692
|
-
changedRows:
|
|
693
|
-
changedRowIndices:
|
|
757
|
+
changedRows: t.changedRows,
|
|
758
|
+
changedRowIndices: t.changedRowIndices
|
|
694
759
|
}
|
|
695
760
|
})
|
|
696
761
|
);
|
|
697
762
|
}
|
|
698
|
-
|
|
699
|
-
const s = o.findRenderedRowElement?.(e);
|
|
700
|
-
s && (F(o, s, o._rows[e], e), o._changedRowIndices.has(e) ? s.classList.add("changed") : s.classList.remove("changed")), t && queueMicrotask(() => {
|
|
763
|
+
t.rowEditSnapshots.delete(e), t.activeEditRows = -1, i && (O(t, i, t._rows[e], e), t._changedRowIndices.has(e) ? i.classList.add("changed") : i.classList.remove("changed")), queueMicrotask(() => {
|
|
701
764
|
try {
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
);
|
|
708
|
-
const f = l.querySelector(`.cell[data-row="${r}"][data-col="${a}"]`);
|
|
709
|
-
f && f.classList.add("cell-focus");
|
|
765
|
+
const r = t.focusRow, l = t.focusCol, a = t.findRenderedRowElement?.(r);
|
|
766
|
+
if (a) {
|
|
767
|
+
Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((h) => h.classList.remove("cell-focus"));
|
|
768
|
+
const d = a.querySelector(`.cell[data-row="${r}"][data-col="${l}"]`);
|
|
769
|
+
d && (d.classList.add("cell-focus"), d.setAttribute("aria-selected", "true"), d.hasAttribute("tabindex") || d.setAttribute("tabindex", "-1"), d.focus({ preventScroll: !0 }));
|
|
710
770
|
}
|
|
711
771
|
} catch {
|
|
712
772
|
}
|
|
713
773
|
});
|
|
714
774
|
}
|
|
715
|
-
function
|
|
716
|
-
const
|
|
717
|
-
if (i
|
|
718
|
-
i
|
|
719
|
-
const
|
|
720
|
-
|
|
721
|
-
const
|
|
722
|
-
|
|
775
|
+
function J(t, e, o, n, s) {
|
|
776
|
+
const i = o.field;
|
|
777
|
+
if (s[i] === n) return;
|
|
778
|
+
s[i] = n;
|
|
779
|
+
const l = !t._changedRowIndices.has(e);
|
|
780
|
+
t._changedRowIndices.add(e);
|
|
781
|
+
const a = t.findRenderedRowElement?.(e);
|
|
782
|
+
a && a.classList.add("changed"), t.dispatchEvent(
|
|
723
783
|
new CustomEvent("cell-commit", {
|
|
724
784
|
detail: {
|
|
725
|
-
row:
|
|
726
|
-
field:
|
|
785
|
+
row: s,
|
|
786
|
+
field: i,
|
|
727
787
|
value: n,
|
|
728
788
|
rowIndex: e,
|
|
729
|
-
changedRows:
|
|
730
|
-
changedRowIndices:
|
|
731
|
-
firstTimeForRow:
|
|
789
|
+
changedRows: t.changedRows,
|
|
790
|
+
changedRowIndices: t.changedRowIndices,
|
|
791
|
+
firstTimeForRow: l
|
|
732
792
|
}
|
|
733
793
|
})
|
|
734
794
|
);
|
|
735
795
|
}
|
|
736
|
-
function
|
|
737
|
-
if (!n.editable || (
|
|
738
|
-
const
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
796
|
+
function M(t, e, o, n, s) {
|
|
797
|
+
if (!n.editable || (t.activeEditRows !== o && H(t, o, e), s.classList.contains("editing"))) return;
|
|
798
|
+
const i = e[n.field];
|
|
799
|
+
s.classList.add("editing");
|
|
800
|
+
let r = !1;
|
|
801
|
+
const l = (c) => {
|
|
802
|
+
r || t.activeEditRows === -1 || J(t, o, n, c, e);
|
|
742
803
|
}, a = () => {
|
|
743
|
-
e[n.field] =
|
|
744
|
-
const
|
|
745
|
-
|
|
746
|
-
},
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
804
|
+
r = !0, e[n.field] = i;
|
|
805
|
+
const c = s.querySelector("input,textarea,select");
|
|
806
|
+
c && (typeof HTMLInputElement < "u" && c instanceof HTMLInputElement && c.type === "checkbox" ? c.checked = !!i : "value" in c && (c.value = i ?? ""));
|
|
807
|
+
}, d = document.createElement("div");
|
|
808
|
+
d.style.display = "contents", s.innerHTML = "", s.appendChild(d), d.addEventListener("keydown", (c) => {
|
|
809
|
+
c.key === "Enter" && (c.stopPropagation(), c.preventDefault(), r = !0, N(t, o, !1)), c.key === "Escape" && (c.stopPropagation(), c.preventDefault(), a(), N(t, o, !0));
|
|
810
|
+
});
|
|
811
|
+
const h = n.__editorTemplate, p = n.editor || (h ? "template" : $e(n)), w = i;
|
|
812
|
+
if (p === "template" && h) {
|
|
813
|
+
const c = h.cloneNode(!0), u = n.__compiledEditor;
|
|
814
|
+
u ? c.innerHTML = u({ row: e, value: i, field: n.field, column: n }) : c.querySelectorAll("*").forEach((g) => {
|
|
815
|
+
g.childNodes.length === 1 && g.firstChild?.nodeType === Node.TEXT_NODE && (g.textContent = g.textContent?.replace(/{{\s*value\s*}}/g, i == null ? "" : String(i)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (b, x) => {
|
|
816
|
+
const A = e[x];
|
|
817
|
+
return A == null ? "" : String(A);
|
|
755
818
|
}) || "");
|
|
756
819
|
});
|
|
757
|
-
const
|
|
758
|
-
if (
|
|
759
|
-
const
|
|
760
|
-
|
|
761
|
-
const b =
|
|
762
|
-
|
|
763
|
-
}),
|
|
820
|
+
const f = c.querySelector("input,textarea,select");
|
|
821
|
+
if (f) {
|
|
822
|
+
const g = typeof HTMLInputElement < "u";
|
|
823
|
+
g && f instanceof HTMLInputElement && f.type === "checkbox" ? f.checked = !!i : "value" in f && (f.value = i ?? ""), f.addEventListener("blur", () => {
|
|
824
|
+
const b = g && f instanceof HTMLInputElement && f.type === "checkbox" ? f.checked : f.value;
|
|
825
|
+
l(b);
|
|
826
|
+
}), f.addEventListener("keydown", (b) => {
|
|
764
827
|
if (b.key === "Enter") {
|
|
765
|
-
|
|
766
|
-
|
|
828
|
+
b.stopPropagation(), b.preventDefault(), r = !0;
|
|
829
|
+
const x = g && f instanceof HTMLInputElement && f.type === "checkbox" ? f.checked : f.value;
|
|
830
|
+
l(x), N(t, o, !1);
|
|
767
831
|
}
|
|
768
|
-
b.key === "Escape" && a();
|
|
769
|
-
}),
|
|
770
|
-
const b =
|
|
771
|
-
|
|
772
|
-
}), setTimeout(() =>
|
|
832
|
+
b.key === "Escape" && (b.stopPropagation(), b.preventDefault(), a(), N(t, o, !0));
|
|
833
|
+
}), g && f instanceof HTMLInputElement && f.type === "checkbox" && f.addEventListener("change", () => {
|
|
834
|
+
const b = f.checked;
|
|
835
|
+
l(b);
|
|
836
|
+
}), setTimeout(() => f.focus(), 0);
|
|
773
837
|
}
|
|
774
|
-
|
|
838
|
+
d.appendChild(c);
|
|
775
839
|
} else if (typeof p == "string") {
|
|
776
|
-
const
|
|
777
|
-
|
|
840
|
+
const c = document.createElement(p);
|
|
841
|
+
c.value = w, c.addEventListener("change", () => l(c.value)), d.appendChild(c);
|
|
778
842
|
} else if (typeof p == "function") {
|
|
779
|
-
const
|
|
780
|
-
typeof
|
|
843
|
+
const c = p({ row: e, value: w, field: n.field, column: n, commit: l, cancel: a });
|
|
844
|
+
typeof c == "string" ? d.innerHTML = c : d.appendChild(c);
|
|
781
845
|
} else if (p && typeof p == "object") {
|
|
782
|
-
const
|
|
783
|
-
|
|
784
|
-
const
|
|
846
|
+
const c = document.createElement("div");
|
|
847
|
+
c.setAttribute("data-external-editor", ""), c.setAttribute("data-field", n.field), d.appendChild(c);
|
|
848
|
+
const u = { row: e, value: w, field: n.field, column: n, commit: l, cancel: a };
|
|
785
849
|
if (p.mount)
|
|
786
850
|
try {
|
|
787
|
-
p.mount({ placeholder:
|
|
851
|
+
p.mount({ placeholder: c, context: u, spec: p });
|
|
788
852
|
} catch {
|
|
789
853
|
}
|
|
790
854
|
else
|
|
791
|
-
|
|
792
|
-
new CustomEvent("mount-external-editor", { detail: { placeholder:
|
|
855
|
+
t.dispatchEvent(
|
|
856
|
+
new CustomEvent("mount-external-editor", { detail: { placeholder: c, spec: p, context: u } })
|
|
793
857
|
);
|
|
794
858
|
}
|
|
795
859
|
}
|
|
796
|
-
function
|
|
797
|
-
!
|
|
798
|
-
n.getAttribute("aria-sort") ? (n.getAttribute("aria-sort") === "ascending" || n.getAttribute("aria-sort") === "descending") && (
|
|
799
|
-
}),
|
|
860
|
+
function se(t, e) {
|
|
861
|
+
!t.sortState || t.sortState.field !== e.field ? (t.sortState || (t.__originalOrder = t._rows.slice()), ie(t, e, 1)) : t.sortState.direction === 1 ? ie(t, e, -1) : (t.sortState = null, t.__rowRenderEpoch++, t.rowPool.forEach((n) => n.__epoch = -1), t._rows = t.__originalOrder.slice(), Q(t), t.headerRowEl?.querySelectorAll('[role="columnheader"].sortable')?.forEach((n) => {
|
|
862
|
+
n.getAttribute("aria-sort") ? (n.getAttribute("aria-sort") === "ascending" || n.getAttribute("aria-sort") === "descending") && (t.sortState || n.setAttribute("aria-sort", "none")) : n.setAttribute("aria-sort", "none");
|
|
863
|
+
}), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
800
864
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: 0 } })
|
|
801
|
-
),
|
|
802
|
-
}
|
|
803
|
-
function
|
|
804
|
-
|
|
805
|
-
const n = e.sortComparator || ((
|
|
806
|
-
|
|
807
|
-
new CustomEvent("sort-change", { detail: { field: e.field, direction:
|
|
808
|
-
),
|
|
809
|
-
}
|
|
810
|
-
function
|
|
811
|
-
typeof e == "string" ?
|
|
812
|
-
}
|
|
813
|
-
function
|
|
814
|
-
|
|
815
|
-
const e =
|
|
816
|
-
e.innerHTML = "",
|
|
817
|
-
const
|
|
818
|
-
|
|
819
|
-
const
|
|
820
|
-
if (
|
|
865
|
+
), t.requestStateChange?.());
|
|
866
|
+
}
|
|
867
|
+
function ie(t, e, o) {
|
|
868
|
+
t.sortState = { field: e.field, direction: o };
|
|
869
|
+
const n = e.sortComparator || ((s, i) => s == null && i == null ? 0 : s == null ? -1 : i == null || s > i ? 1 : s < i ? -1 : 0);
|
|
870
|
+
t._rows.sort((s, i) => n(s[e.field], i[e.field], s, i) * o), t.__rowRenderEpoch++, t.rowPool.forEach((s) => s.__epoch = -1), Q(t), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
871
|
+
new CustomEvent("sort-change", { detail: { field: e.field, direction: o } })
|
|
872
|
+
), t.requestStateChange?.();
|
|
873
|
+
}
|
|
874
|
+
function Ve(t, e) {
|
|
875
|
+
typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
|
|
876
|
+
}
|
|
877
|
+
function Q(t) {
|
|
878
|
+
t.headerRowEl = t.findHeaderRow();
|
|
879
|
+
const e = t.headerRowEl;
|
|
880
|
+
e.innerHTML = "", t.visibleColumns.forEach((o, n) => {
|
|
881
|
+
const s = document.createElement("div");
|
|
882
|
+
s.className = "cell", X(s, "header-cell"), s.setAttribute("role", "columnheader"), s.setAttribute("aria-colindex", String(n + 1)), s.setAttribute("data-field", o.field), s.setAttribute("data-col", String(n)), o.sticky === "left" ? s.classList.add("sticky-left") : o.sticky === "right" && s.classList.add("sticky-right");
|
|
883
|
+
const i = o.__headerTemplate;
|
|
884
|
+
if (i) Array.from(i.childNodes).forEach((r) => s.appendChild(r.cloneNode(!0)));
|
|
821
885
|
else {
|
|
822
|
-
const r =
|
|
823
|
-
|
|
886
|
+
const r = o.header || o.field, l = document.createElement("span");
|
|
887
|
+
l.textContent = r, s.appendChild(l);
|
|
824
888
|
}
|
|
825
|
-
if (
|
|
826
|
-
|
|
889
|
+
if (o.sortable) {
|
|
890
|
+
s.classList.add("sortable"), s.tabIndex = 0;
|
|
827
891
|
const r = document.createElement("span");
|
|
828
|
-
|
|
829
|
-
const
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
}),
|
|
833
|
-
if (
|
|
834
|
-
if (
|
|
835
|
-
|
|
892
|
+
X(r, "sort-indicator"), r.style.opacity = "0.6";
|
|
893
|
+
const l = t.sortState?.field === o.field ? t.sortState.direction : 0, a = { ...P, ...t.icons }, d = l === 1 ? a.sortAsc : l === -1 ? a.sortDesc : a.sortNone;
|
|
894
|
+
Ve(r, d), s.appendChild(r), s.setAttribute("aria-sort", l === 0 ? "none" : l === 1 ? "ascending" : "descending"), s.addEventListener("click", (h) => {
|
|
895
|
+
t.resizeController?.isResizing || t.dispatchHeaderClick?.(h, n, s) || se(t, o);
|
|
896
|
+
}), s.addEventListener("keydown", (h) => {
|
|
897
|
+
if (h.key === "Enter" || h.key === " ") {
|
|
898
|
+
if (h.preventDefault(), t.dispatchHeaderClick?.(h, n, s)) return;
|
|
899
|
+
se(t, o);
|
|
836
900
|
}
|
|
837
901
|
});
|
|
838
902
|
}
|
|
839
|
-
if (
|
|
840
|
-
|
|
903
|
+
if (o.resizable) {
|
|
904
|
+
o.sticky || (s.style.position = "relative");
|
|
841
905
|
const r = document.createElement("div");
|
|
842
|
-
r.className = "resize-handle", r.setAttribute("aria-hidden", "true"), r.addEventListener("mousedown", (
|
|
843
|
-
|
|
844
|
-
}),
|
|
906
|
+
r.className = "resize-handle", r.setAttribute("aria-hidden", "true"), r.addEventListener("mousedown", (l) => {
|
|
907
|
+
l.stopPropagation(), l.preventDefault(), t.resizeController.start(l, n, s);
|
|
908
|
+
}), s.appendChild(r);
|
|
845
909
|
}
|
|
846
|
-
e.appendChild(
|
|
910
|
+
e.appendChild(s);
|
|
847
911
|
});
|
|
848
912
|
try {
|
|
849
|
-
const
|
|
850
|
-
|
|
851
|
-
|
|
913
|
+
const o = t.shadowRoot;
|
|
914
|
+
o && o.querySelectorAll(".header-group-row .cell").forEach((s) => {
|
|
915
|
+
s.getAttribute("data-group") && s.classList.add("grouped");
|
|
852
916
|
});
|
|
853
917
|
} catch {
|
|
854
918
|
}
|
|
855
|
-
e.querySelectorAll(".cell.sortable").forEach((
|
|
856
|
-
|
|
857
|
-
});
|
|
919
|
+
e.querySelectorAll(".cell.sortable").forEach((o) => {
|
|
920
|
+
o.getAttribute("aria-sort") || o.setAttribute("aria-sort", "none");
|
|
921
|
+
}), e.children.length > 0 ? (e.setAttribute("role", "row"), e.setAttribute("aria-rowindex", "1")) : (e.removeAttribute("role"), e.removeAttribute("aria-rowindex"));
|
|
858
922
|
}
|
|
859
|
-
function
|
|
860
|
-
let e = null,
|
|
861
|
-
const
|
|
923
|
+
function Ge(t) {
|
|
924
|
+
let e = null, o = null, n = null, s = null;
|
|
925
|
+
const i = (a) => {
|
|
862
926
|
if (!e) return;
|
|
863
|
-
const
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
})),
|
|
867
|
-
new CustomEvent("column-resize", { detail: { field:
|
|
927
|
+
const d = a.clientX - e.startX, h = Math.max(40, e.startWidth + d), p = t.visibleColumns[e.colIndex];
|
|
928
|
+
p.width = h, p.__userResized = !0, p.__renderedWidth = h, o == null && (o = requestAnimationFrame(() => {
|
|
929
|
+
o = null, t.updateTemplate?.();
|
|
930
|
+
})), t.dispatchEvent(
|
|
931
|
+
new CustomEvent("column-resize", { detail: { field: p.field, width: h } })
|
|
868
932
|
);
|
|
869
933
|
};
|
|
870
934
|
let r = !1;
|
|
871
|
-
const
|
|
872
|
-
const
|
|
873
|
-
|
|
935
|
+
const l = () => {
|
|
936
|
+
const a = e !== null;
|
|
937
|
+
a && (r = !0, requestAnimationFrame(() => {
|
|
874
938
|
r = !1;
|
|
875
|
-
})), window.removeEventListener("mousemove",
|
|
939
|
+
})), window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", l), n !== null && (document.documentElement.style.cursor = n, n = null), s !== null && (document.body.style.userSelect = s, s = null), e = null, a && t.requestStateChange && t.requestStateChange();
|
|
876
940
|
};
|
|
877
941
|
return {
|
|
878
942
|
get isResizing() {
|
|
879
943
|
return e !== null || r;
|
|
880
944
|
},
|
|
881
|
-
start(
|
|
882
|
-
|
|
883
|
-
const
|
|
884
|
-
e = { startX:
|
|
945
|
+
start(a, d, h) {
|
|
946
|
+
a.preventDefault();
|
|
947
|
+
const p = h.getBoundingClientRect();
|
|
948
|
+
e = { startX: a.clientX, colIndex: d, startWidth: p.width }, window.addEventListener("mousemove", i), window.addEventListener("mouseup", l), n === null && (n = document.documentElement.style.cursor), document.documentElement.style.cursor = "e-resize", s === null && (s = document.body.style.userSelect), document.body.style.userSelect = "none";
|
|
885
949
|
},
|
|
886
950
|
dispose() {
|
|
887
|
-
|
|
951
|
+
l();
|
|
888
952
|
}
|
|
889
953
|
};
|
|
890
954
|
}
|
|
891
|
-
function
|
|
955
|
+
function $(t) {
|
|
956
|
+
return t ? typeof t == "string" ? t : t.outerHTML : "";
|
|
957
|
+
}
|
|
958
|
+
function Ue() {
|
|
892
959
|
return {
|
|
893
960
|
toolPanels: /* @__PURE__ */ new Map(),
|
|
894
961
|
headerContents: /* @__PURE__ */ new Map(),
|
|
895
962
|
toolbarButtons: /* @__PURE__ */ new Map(),
|
|
896
963
|
lightDomButtons: [],
|
|
897
964
|
lightDomHeaderContent: [],
|
|
898
|
-
|
|
965
|
+
isPanelOpen: !1,
|
|
966
|
+
expandedSections: /* @__PURE__ */ new Set(),
|
|
899
967
|
headerContentCleanups: /* @__PURE__ */ new Map(),
|
|
900
|
-
|
|
901
|
-
toolbarButtonCleanups: /* @__PURE__ */ new Map()
|
|
968
|
+
panelCleanups: /* @__PURE__ */ new Map(),
|
|
969
|
+
toolbarButtonCleanups: /* @__PURE__ */ new Map(),
|
|
970
|
+
// Deprecated - kept for backward compatibility
|
|
971
|
+
activePanel: null,
|
|
972
|
+
activePanelCleanup: null
|
|
902
973
|
};
|
|
903
974
|
}
|
|
904
|
-
function
|
|
905
|
-
return !!(
|
|
906
|
-
}
|
|
907
|
-
function
|
|
908
|
-
const
|
|
909
|
-
let
|
|
910
|
-
for (const
|
|
911
|
-
|
|
912
|
-
for (const
|
|
913
|
-
|
|
914
|
-
for (const
|
|
915
|
-
(
|
|
916
|
-
for (const
|
|
917
|
-
(
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
u += `<button class="tbw-toolbar-btn${b ? " active" : ""}" data-panel="${d.id}" title="${d.tooltip ?? d.title}" aria-label="${d.tooltip ?? d.title}" aria-pressed="${b}" aria-controls="tbw-panel-${d.id}">${d.icon}</button>`;
|
|
975
|
+
function Xe(t, e) {
|
|
976
|
+
return !!(t?.header?.title || t?.header?.toolbarButtons?.length || e.toolPanels.size > 0 || e.headerContents.size > 0 || e.toolbarButtons.size > 0 || e.lightDomButtons.length > 0 || e.lightDomHeaderContent.length > 0);
|
|
977
|
+
}
|
|
978
|
+
function je(t, e, o = "☰") {
|
|
979
|
+
const n = t?.header?.title ?? "", s = !!n, i = $(o), r = t?.header?.toolbarButtons ?? [], l = r.length > 0, a = e.toolbarButtons.size > 0, d = e.lightDomButtons.length > 0, h = e.toolPanels.size > 0, w = (l || a || d) && h, c = [...r].sort((g, b) => (g.order ?? 100) - (b.order ?? 100)), u = [...e.toolbarButtons.values()].sort((g, b) => (g.order ?? 100) - (b.order ?? 100));
|
|
980
|
+
let f = "";
|
|
981
|
+
for (const g of c)
|
|
982
|
+
g.icon && g.action && (f += `<button class="tbw-toolbar-btn" data-btn="${g.id}" title="${g.label}" aria-label="${g.label}"${g.disabled ? " disabled" : ""}>${g.icon}</button>`);
|
|
983
|
+
for (const g of u)
|
|
984
|
+
g.icon && g.action && (f += `<button class="tbw-toolbar-btn" data-btn="${g.id}" title="${g.label}" aria-label="${g.label}"${g.disabled ? " disabled" : ""}>${g.icon}</button>`);
|
|
985
|
+
for (const g of c)
|
|
986
|
+
(g.element || g.render) && (f += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${g.id}"></div>`);
|
|
987
|
+
for (const g of u)
|
|
988
|
+
(g.element || g.render) && (f += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${g.id}"></div>`);
|
|
989
|
+
if (d && (f += '<slot name="toolbar"></slot>'), w && (f += '<div class="tbw-toolbar-separator"></div>'), h) {
|
|
990
|
+
const g = e.isPanelOpen;
|
|
991
|
+
f += `<button class="tbw-toolbar-btn${g ? " active" : ""}" data-panel-toggle title="Settings" aria-label="Toggle settings panel" aria-pressed="${g}" aria-controls="tbw-tool-panel">${i}</button>`;
|
|
922
992
|
}
|
|
923
993
|
return `
|
|
924
|
-
<div class="tbw-shell-header" part="shell-header" role="
|
|
925
|
-
${
|
|
926
|
-
<div class="tbw-shell-content" part="shell-content" role="
|
|
994
|
+
<div class="tbw-shell-header" part="shell-header" role="presentation">
|
|
995
|
+
${s ? `<div class="tbw-shell-title">${n}</div>` : ""}
|
|
996
|
+
<div class="tbw-shell-content" part="shell-content" role="presentation">
|
|
927
997
|
<slot name="header-content"></slot>
|
|
928
998
|
</div>
|
|
929
|
-
<div class="tbw-shell-toolbar" part="shell-toolbar" role="
|
|
930
|
-
${
|
|
999
|
+
<div class="tbw-shell-toolbar" part="shell-toolbar" role="presentation">
|
|
1000
|
+
${f}
|
|
931
1001
|
</div>
|
|
932
1002
|
</div>
|
|
933
1003
|
`;
|
|
934
1004
|
}
|
|
935
|
-
function
|
|
936
|
-
const
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
1005
|
+
function Ye(t, e, o, n) {
|
|
1006
|
+
const s = t?.toolPanel?.position ?? "right", i = e.toolPanels.size > 0, r = e.isPanelOpen, l = $(n?.expand ?? P.expand), a = $(n?.collapse ?? P.collapse), d = [...e.toolPanels.values()].sort((u, f) => (u.order ?? 100) - (f.order ?? 100)), h = d.length === 1;
|
|
1007
|
+
let p = "";
|
|
1008
|
+
for (const u of d) {
|
|
1009
|
+
const f = e.expandedSections.has(u.id), g = u.icon ? `<span class="tbw-accordion-icon">${u.icon}</span>` : "", b = h ? "" : `<span class="tbw-accordion-chevron">${f ? a : l}</span>`;
|
|
1010
|
+
p += `
|
|
1011
|
+
<div class="${`tbw-accordion-section${f ? " expanded" : ""}${h ? " single" : ""}`}" data-section="${u.id}">
|
|
1012
|
+
<button class="tbw-accordion-header" aria-expanded="${f}" aria-controls="tbw-section-${u.id}"${h ? ' aria-disabled="true"' : ""}>
|
|
1013
|
+
${g}
|
|
1014
|
+
<span class="tbw-accordion-title">${u.title}</span>
|
|
1015
|
+
${b}
|
|
1016
|
+
</button>
|
|
1017
|
+
<div class="tbw-accordion-content" id="tbw-section-${u.id}" role="presentation"></div>
|
|
1018
|
+
</div>
|
|
1019
|
+
`;
|
|
1020
|
+
}
|
|
1021
|
+
const c = i ? `
|
|
1022
|
+
<aside class="tbw-tool-panel${r ? " open" : ""}" part="tool-panel" data-position="${s}" role="presentation" id="tbw-tool-panel">
|
|
1023
|
+
<div class="tbw-tool-panel-resize" data-resize-handle data-handle-position="${s === "left" ? "right" : "left"}" aria-hidden="true"></div>
|
|
1024
|
+
<div class="tbw-tool-panel-content" role="presentation">
|
|
1025
|
+
<div class="tbw-accordion">
|
|
1026
|
+
${p}
|
|
1027
|
+
</div>
|
|
941
1028
|
</div>
|
|
942
|
-
<div class="tbw-tool-panel-content" role="region"></div>
|
|
943
1029
|
</aside>
|
|
944
1030
|
` : "";
|
|
945
|
-
return
|
|
1031
|
+
return s === "left" ? `
|
|
946
1032
|
<div class="tbw-shell-body">
|
|
947
|
-
${
|
|
1033
|
+
${c}
|
|
948
1034
|
<div class="tbw-grid-content">
|
|
949
|
-
${
|
|
1035
|
+
${o}
|
|
950
1036
|
</div>
|
|
951
1037
|
</div>
|
|
952
1038
|
` : `
|
|
953
1039
|
<div class="tbw-shell-body">
|
|
954
1040
|
<div class="tbw-grid-content">
|
|
955
|
-
${
|
|
1041
|
+
${o}
|
|
956
1042
|
</div>
|
|
957
|
-
${
|
|
1043
|
+
${c}
|
|
958
1044
|
</div>
|
|
959
1045
|
`;
|
|
960
1046
|
}
|
|
961
|
-
function
|
|
962
|
-
const
|
|
963
|
-
if (!
|
|
964
|
-
|
|
965
|
-
const n =
|
|
966
|
-
e.lightDomHeaderContent = Array.from(n), e.lightDomHeaderContent.forEach((
|
|
967
|
-
|
|
1047
|
+
function re(t, e) {
|
|
1048
|
+
const o = t.querySelector("tbw-grid-header");
|
|
1049
|
+
if (!o) return;
|
|
1050
|
+
o.style.display = "none";
|
|
1051
|
+
const n = o.querySelectorAll("tbw-grid-header-content");
|
|
1052
|
+
e.lightDomHeaderContent = Array.from(n), e.lightDomHeaderContent.forEach((i) => {
|
|
1053
|
+
i.setAttribute("slot", "header-content");
|
|
968
1054
|
});
|
|
969
|
-
const
|
|
970
|
-
e.lightDomButtons = Array.from(
|
|
971
|
-
const
|
|
972
|
-
return
|
|
973
|
-
}), e.lightDomButtons.forEach((
|
|
974
|
-
|
|
1055
|
+
const s = o.querySelectorAll("tbw-grid-tool-button");
|
|
1056
|
+
e.lightDomButtons = Array.from(s), e.lightDomButtons.sort((i, r) => {
|
|
1057
|
+
const l = parseInt(i.getAttribute("order") ?? "100", 10), a = parseInt(r.getAttribute("order") ?? "100", 10);
|
|
1058
|
+
return l - a;
|
|
1059
|
+
}), e.lightDomButtons.forEach((i) => {
|
|
1060
|
+
i.setAttribute("slot", "toolbar");
|
|
975
1061
|
});
|
|
976
1062
|
}
|
|
977
|
-
function
|
|
978
|
-
const
|
|
979
|
-
|
|
980
|
-
const
|
|
981
|
-
if (l) {
|
|
982
|
-
|
|
983
|
-
p && n.onPanelToggle(p);
|
|
1063
|
+
function Ze(t, e, o, n) {
|
|
1064
|
+
const s = t.querySelector(".tbw-shell-toolbar");
|
|
1065
|
+
s && s.addEventListener("click", (r) => {
|
|
1066
|
+
const l = r.target;
|
|
1067
|
+
if (l.closest("[data-panel-toggle]")) {
|
|
1068
|
+
n.onPanelToggle();
|
|
984
1069
|
return;
|
|
985
1070
|
}
|
|
986
|
-
const
|
|
987
|
-
if (
|
|
988
|
-
const
|
|
989
|
-
|
|
1071
|
+
const d = l.closest("[data-btn]");
|
|
1072
|
+
if (d) {
|
|
1073
|
+
const h = d.getAttribute("data-btn");
|
|
1074
|
+
h && n.onToolbarButtonClick(h);
|
|
990
1075
|
}
|
|
991
1076
|
});
|
|
992
|
-
const
|
|
993
|
-
|
|
994
|
-
|
|
1077
|
+
const i = t.querySelector(".tbw-accordion");
|
|
1078
|
+
i && i.addEventListener("click", (r) => {
|
|
1079
|
+
const a = r.target.closest(".tbw-accordion-header");
|
|
1080
|
+
if (a) {
|
|
1081
|
+
const h = a.closest("[data-section]")?.getAttribute("data-section");
|
|
1082
|
+
h && n.onSectionToggle(h);
|
|
1083
|
+
}
|
|
995
1084
|
});
|
|
996
1085
|
}
|
|
997
|
-
function
|
|
998
|
-
const n =
|
|
1086
|
+
function Je(t, e, o) {
|
|
1087
|
+
const n = t.querySelector(".tbw-tool-panel"), s = t.querySelector("[data-resize-handle]"), i = t.querySelector(".tbw-shell-body");
|
|
1088
|
+
if (!n || !s || !i)
|
|
1089
|
+
return () => {
|
|
1090
|
+
};
|
|
1091
|
+
const r = e?.toolPanel?.position ?? "right", l = 200;
|
|
1092
|
+
let a = 0, d = 0, h = 0, p = !1;
|
|
1093
|
+
const w = (f) => {
|
|
1094
|
+
if (!p) return;
|
|
1095
|
+
f.preventDefault();
|
|
1096
|
+
const g = r === "left" ? f.clientX - a : a - f.clientX, b = Math.min(h, Math.max(l, d + g));
|
|
1097
|
+
n.style.width = `${b}px`;
|
|
1098
|
+
}, c = () => {
|
|
1099
|
+
if (!p) return;
|
|
1100
|
+
p = !1, s.classList.remove("resizing"), n.style.transition = "", document.body.style.cursor = "", document.body.style.userSelect = "";
|
|
1101
|
+
const f = n.getBoundingClientRect().width;
|
|
1102
|
+
o(f), document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", c);
|
|
1103
|
+
}, u = (f) => {
|
|
1104
|
+
f.preventDefault(), p = !0, a = f.clientX, d = n.getBoundingClientRect().width, h = i.getBoundingClientRect().width - 20, s.classList.add("resizing"), n.style.transition = "none", document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", w), document.addEventListener("mouseup", c);
|
|
1105
|
+
};
|
|
1106
|
+
return s.addEventListener("mousedown", u), () => {
|
|
1107
|
+
s.removeEventListener("mousedown", u), document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", c);
|
|
1108
|
+
};
|
|
1109
|
+
}
|
|
1110
|
+
function Qe(t, e, o) {
|
|
1111
|
+
const n = [...e?.header?.toolbarButtons ?? [], ...o.toolbarButtons.values()];
|
|
1112
|
+
for (const s of n) {
|
|
1113
|
+
const i = t.querySelector(`[data-btn-slot="${s.id}"]`);
|
|
1114
|
+
if (!i) continue;
|
|
1115
|
+
const r = o.toolbarButtonCleanups.get(s.id);
|
|
1116
|
+
if (r && (r(), o.toolbarButtonCleanups.delete(s.id)), s.element)
|
|
1117
|
+
i.appendChild(s.element);
|
|
1118
|
+
else if (s.render) {
|
|
1119
|
+
const l = s.render(i);
|
|
1120
|
+
l && o.toolbarButtonCleanups.set(s.id, l);
|
|
1121
|
+
}
|
|
1122
|
+
}
|
|
1123
|
+
}
|
|
1124
|
+
function le(t, e) {
|
|
1125
|
+
const o = t.querySelector(".tbw-shell-content");
|
|
1126
|
+
if (!o) return;
|
|
1127
|
+
const n = [...e.headerContents.values()].sort((i, r) => (i.order ?? 100) - (r.order ?? 100)), s = o.querySelector('slot[name="header-content"]');
|
|
999
1128
|
for (const i of n) {
|
|
1000
|
-
const
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1129
|
+
const r = e.headerContentCleanups.get(i.id);
|
|
1130
|
+
r && (r(), e.headerContentCleanups.delete(i.id));
|
|
1131
|
+
let l = o.querySelector(`[data-header-content="${i.id}"]`);
|
|
1132
|
+
l || (l = document.createElement("div"), l.setAttribute("data-header-content", i.id), s ? o.insertBefore(l, s) : o.appendChild(l));
|
|
1133
|
+
const a = i.render(l);
|
|
1134
|
+
a && e.headerContentCleanups.set(i.id, a);
|
|
1135
|
+
}
|
|
1136
|
+
}
|
|
1137
|
+
function et(t, e, o) {
|
|
1138
|
+
if (!e.isPanelOpen) return;
|
|
1139
|
+
const n = $(o?.expand ?? P.expand), s = $(o?.collapse ?? P.collapse);
|
|
1140
|
+
for (const [i, r] of e.toolPanels) {
|
|
1141
|
+
const l = e.expandedSections.has(i), a = t.querySelector(`[data-section="${i}"]`), d = a?.querySelector(".tbw-accordion-content");
|
|
1142
|
+
if (!a || !d) continue;
|
|
1143
|
+
a.classList.toggle("expanded", l);
|
|
1144
|
+
const h = a.querySelector(".tbw-accordion-header");
|
|
1145
|
+
h && h.setAttribute("aria-expanded", String(l));
|
|
1146
|
+
const p = a.querySelector(".tbw-accordion-chevron");
|
|
1147
|
+
if (p && (p.innerHTML = l ? s : n), l) {
|
|
1148
|
+
if (d.children.length === 0) {
|
|
1149
|
+
const w = r.render(d);
|
|
1150
|
+
w && e.panelCleanups.set(i, w);
|
|
1151
|
+
}
|
|
1152
|
+
} else {
|
|
1153
|
+
const w = e.panelCleanups.get(i);
|
|
1154
|
+
w && (w(), e.panelCleanups.delete(i)), d.innerHTML = "";
|
|
1008
1155
|
}
|
|
1009
1156
|
}
|
|
1010
1157
|
}
|
|
1011
|
-
function
|
|
1012
|
-
const
|
|
1013
|
-
|
|
1014
|
-
const n = [...e.headerContents.values()].sort((s, r) => (s.order ?? 100) - (r.order ?? 100)), i = t.querySelector('slot[name="header-content"]');
|
|
1015
|
-
for (const s of n) {
|
|
1016
|
-
const r = e.headerContentCleanups.get(s.id);
|
|
1017
|
-
r && (r(), e.headerContentCleanups.delete(s.id));
|
|
1018
|
-
let a = t.querySelector(`[data-header-content="${s.id}"]`);
|
|
1019
|
-
a || (a = document.createElement("div"), a.setAttribute("data-header-content", s.id), i ? t.insertBefore(a, i) : t.appendChild(a));
|
|
1020
|
-
const l = s.render(a);
|
|
1021
|
-
l && e.headerContentCleanups.set(s.id, l);
|
|
1022
|
-
}
|
|
1023
|
-
}
|
|
1024
|
-
function je(o, e) {
|
|
1025
|
-
if (!e.activePanel) return;
|
|
1026
|
-
const t = e.toolPanels.get(e.activePanel);
|
|
1027
|
-
if (!t) return;
|
|
1028
|
-
const n = o.querySelector(".tbw-tool-panel-content");
|
|
1029
|
-
if (!n) return;
|
|
1030
|
-
e.activePanelCleanup && (e.activePanelCleanup(), e.activePanelCleanup = null), n.innerHTML = "";
|
|
1031
|
-
const i = t.render(n);
|
|
1032
|
-
i && (e.activePanelCleanup = i);
|
|
1033
|
-
}
|
|
1034
|
-
function oe(o, e) {
|
|
1035
|
-
o.querySelectorAll("[data-panel]").forEach((n) => {
|
|
1036
|
-
const s = n.getAttribute("data-panel") === e.activePanel;
|
|
1037
|
-
n.classList.toggle("active", s), n.setAttribute("aria-pressed", String(s));
|
|
1038
|
-
});
|
|
1158
|
+
function ae(t, e) {
|
|
1159
|
+
const o = t.querySelector("[data-panel-toggle]");
|
|
1160
|
+
o && (o.classList.toggle("active", e.isPanelOpen), o.setAttribute("aria-pressed", String(e.isPanelOpen)));
|
|
1039
1161
|
}
|
|
1040
|
-
function
|
|
1041
|
-
const
|
|
1042
|
-
|
|
1043
|
-
const n = e.activePanel !== null;
|
|
1044
|
-
if (t.classList.toggle("open", n), n && e.activePanel) {
|
|
1045
|
-
const i = e.toolPanels.get(e.activePanel), s = t.querySelector(".tbw-tool-panel-title");
|
|
1046
|
-
s && (s.textContent = i?.title ?? ""), t.setAttribute("aria-label", `${i?.title ?? "Tool"} panel`), t.id = `tbw-panel-${e.activePanel}`;
|
|
1047
|
-
}
|
|
1162
|
+
function ce(t, e) {
|
|
1163
|
+
const o = t.querySelector(".tbw-tool-panel");
|
|
1164
|
+
o && (o.classList.toggle("open", e.isPanelOpen), e.isPanelOpen || (o.style.width = ""));
|
|
1048
1165
|
}
|
|
1049
|
-
function
|
|
1050
|
-
const
|
|
1051
|
-
for (const n of
|
|
1052
|
-
|
|
1166
|
+
function tt(t, e) {
|
|
1167
|
+
const o = [];
|
|
1168
|
+
for (const n of t?.header?.toolbarButtons ?? [])
|
|
1169
|
+
o.push({
|
|
1053
1170
|
id: n.id,
|
|
1054
1171
|
label: n.label,
|
|
1055
1172
|
disabled: n.disabled ?? !1,
|
|
1056
1173
|
source: "config"
|
|
1057
1174
|
});
|
|
1058
1175
|
for (const n of e.toolbarButtons.values())
|
|
1059
|
-
|
|
1176
|
+
o.push({
|
|
1060
1177
|
id: n.id,
|
|
1061
1178
|
label: n.label,
|
|
1062
1179
|
disabled: n.disabled ?? !1,
|
|
1063
1180
|
source: "config"
|
|
1064
1181
|
});
|
|
1065
1182
|
for (let n = 0; n < e.lightDomButtons.length; n++) {
|
|
1066
|
-
const
|
|
1067
|
-
|
|
1183
|
+
const i = e.lightDomButtons[n].querySelector("button");
|
|
1184
|
+
o.push({
|
|
1068
1185
|
id: `light-dom-${n}`,
|
|
1069
|
-
label:
|
|
1070
|
-
disabled:
|
|
1186
|
+
label: i?.getAttribute("title") ?? i?.getAttribute("aria-label") ?? "",
|
|
1187
|
+
disabled: i?.disabled ?? !1,
|
|
1071
1188
|
source: "light-dom"
|
|
1072
1189
|
});
|
|
1073
1190
|
}
|
|
1074
1191
|
for (const n of e.toolPanels.values())
|
|
1075
|
-
|
|
1192
|
+
o.push({
|
|
1076
1193
|
id: `panel-toggle-${n.id}`,
|
|
1077
1194
|
label: n.tooltip ?? n.title,
|
|
1078
1195
|
disabled: !1,
|
|
1079
1196
|
source: "panel-toggle",
|
|
1080
1197
|
panelId: n.id
|
|
1081
1198
|
});
|
|
1082
|
-
return
|
|
1199
|
+
return o;
|
|
1083
1200
|
}
|
|
1084
|
-
function
|
|
1085
|
-
for (const e of
|
|
1201
|
+
function ot(t) {
|
|
1202
|
+
for (const e of t.headerContentCleanups.values())
|
|
1086
1203
|
e();
|
|
1087
|
-
|
|
1088
|
-
for (const e of
|
|
1204
|
+
t.headerContentCleanups.clear(), t.activePanelCleanup && (t.activePanelCleanup(), t.activePanelCleanup = null);
|
|
1205
|
+
for (const e of t.toolbarButtonCleanups.values())
|
|
1089
1206
|
e();
|
|
1090
|
-
|
|
1207
|
+
t.toolbarButtonCleanups.clear(), t.activePanel && t.toolPanels.get(t.activePanel)?.onClose?.(), t.toolPanels.clear(), t.headerContents.clear(), t.toolbarButtons.clear(), t.lightDomButtons = [], t.lightDomHeaderContent = [], t.activePanel = null;
|
|
1091
1208
|
}
|
|
1092
|
-
class
|
|
1209
|
+
class nt {
|
|
1093
1210
|
constructor(e) {
|
|
1094
1211
|
this.grid = e;
|
|
1095
1212
|
}
|
|
@@ -1107,22 +1224,22 @@ class Je {
|
|
|
1107
1224
|
* Attach all plugins from the config.
|
|
1108
1225
|
*/
|
|
1109
1226
|
attachAll(e) {
|
|
1110
|
-
for (const
|
|
1111
|
-
this.attach(
|
|
1227
|
+
for (const o of e)
|
|
1228
|
+
this.attach(o);
|
|
1112
1229
|
}
|
|
1113
1230
|
/**
|
|
1114
1231
|
* Attach a plugin to this grid.
|
|
1115
1232
|
*/
|
|
1116
1233
|
attach(e) {
|
|
1117
1234
|
if (this.pluginMap.set(e.constructor, e), this.plugins.push(e), e.cellRenderers)
|
|
1118
|
-
for (const [
|
|
1119
|
-
this.cellRenderers.set(
|
|
1235
|
+
for (const [o, n] of Object.entries(e.cellRenderers))
|
|
1236
|
+
this.cellRenderers.set(o, n);
|
|
1120
1237
|
if (e.headerRenderers)
|
|
1121
|
-
for (const [
|
|
1122
|
-
this.headerRenderers.set(
|
|
1238
|
+
for (const [o, n] of Object.entries(e.headerRenderers))
|
|
1239
|
+
this.headerRenderers.set(o, n);
|
|
1123
1240
|
if (e.cellEditors)
|
|
1124
|
-
for (const [
|
|
1125
|
-
this.cellEditors.set(
|
|
1241
|
+
for (const [o, n] of Object.entries(e.cellEditors))
|
|
1242
|
+
this.cellEditors.set(o, n);
|
|
1126
1243
|
e.attach(this.grid);
|
|
1127
1244
|
}
|
|
1128
1245
|
/**
|
|
@@ -1143,7 +1260,7 @@ class Je {
|
|
|
1143
1260
|
* Get a plugin instance by its name.
|
|
1144
1261
|
*/
|
|
1145
1262
|
getPluginByName(e) {
|
|
1146
|
-
return this.plugins.find((
|
|
1263
|
+
return this.plugins.find((o) => o.name === e);
|
|
1147
1264
|
}
|
|
1148
1265
|
/**
|
|
1149
1266
|
* Check if a plugin is attached.
|
|
@@ -1187,19 +1304,19 @@ class Je {
|
|
|
1187
1304
|
* Execute processRows hook on all plugins.
|
|
1188
1305
|
*/
|
|
1189
1306
|
processRows(e) {
|
|
1190
|
-
let
|
|
1307
|
+
let o = [...e];
|
|
1191
1308
|
for (const n of this.plugins)
|
|
1192
|
-
n.processRows && (
|
|
1193
|
-
return
|
|
1309
|
+
n.processRows && (o = n.processRows(o));
|
|
1310
|
+
return o;
|
|
1194
1311
|
}
|
|
1195
1312
|
/**
|
|
1196
1313
|
* Execute processColumns hook on all plugins.
|
|
1197
1314
|
*/
|
|
1198
1315
|
processColumns(e) {
|
|
1199
|
-
let
|
|
1316
|
+
let o = [...e];
|
|
1200
1317
|
for (const n of this.plugins)
|
|
1201
|
-
n.processColumns && (
|
|
1202
|
-
return
|
|
1318
|
+
n.processColumns && (o = n.processColumns(o));
|
|
1319
|
+
return o;
|
|
1203
1320
|
}
|
|
1204
1321
|
/**
|
|
1205
1322
|
* Execute beforeRender hook on all plugins.
|
|
@@ -1229,8 +1346,8 @@ class Je {
|
|
|
1229
1346
|
*/
|
|
1230
1347
|
getExtraHeight() {
|
|
1231
1348
|
let e = 0;
|
|
1232
|
-
for (const
|
|
1233
|
-
typeof
|
|
1349
|
+
for (const o of this.plugins)
|
|
1350
|
+
typeof o.getExtraHeight == "function" && (e += o.getExtraHeight());
|
|
1234
1351
|
return e;
|
|
1235
1352
|
}
|
|
1236
1353
|
/**
|
|
@@ -1238,31 +1355,31 @@ class Je {
|
|
|
1238
1355
|
* Used by virtualization to correctly position the scroll window.
|
|
1239
1356
|
*/
|
|
1240
1357
|
getExtraHeightBefore(e) {
|
|
1241
|
-
let
|
|
1358
|
+
let o = 0;
|
|
1242
1359
|
for (const n of this.plugins)
|
|
1243
|
-
typeof n.getExtraHeightBefore == "function" && (
|
|
1244
|
-
return
|
|
1360
|
+
typeof n.getExtraHeightBefore == "function" && (o += n.getExtraHeightBefore(e));
|
|
1361
|
+
return o;
|
|
1245
1362
|
}
|
|
1246
1363
|
/**
|
|
1247
1364
|
* Adjust the virtualization start index based on plugin needs.
|
|
1248
1365
|
* Returns the minimum start index from all plugins.
|
|
1249
1366
|
*/
|
|
1250
|
-
adjustVirtualStart(e,
|
|
1251
|
-
let
|
|
1252
|
-
for (const
|
|
1253
|
-
if (typeof
|
|
1254
|
-
const r =
|
|
1255
|
-
r <
|
|
1367
|
+
adjustVirtualStart(e, o, n) {
|
|
1368
|
+
let s = e;
|
|
1369
|
+
for (const i of this.plugins)
|
|
1370
|
+
if (typeof i.adjustVirtualStart == "function") {
|
|
1371
|
+
const r = i.adjustVirtualStart(e, o, n);
|
|
1372
|
+
r < s && (s = r);
|
|
1256
1373
|
}
|
|
1257
|
-
return
|
|
1374
|
+
return s;
|
|
1258
1375
|
}
|
|
1259
1376
|
/**
|
|
1260
1377
|
* Execute renderRow hook on all plugins.
|
|
1261
1378
|
* Returns true if any plugin handled the row.
|
|
1262
1379
|
*/
|
|
1263
|
-
renderRow(e,
|
|
1264
|
-
for (const
|
|
1265
|
-
if (
|
|
1380
|
+
renderRow(e, o, n) {
|
|
1381
|
+
for (const s of this.plugins)
|
|
1382
|
+
if (s.renderRow?.(e, o, n))
|
|
1266
1383
|
return !0;
|
|
1267
1384
|
return !1;
|
|
1268
1385
|
}
|
|
@@ -1271,8 +1388,8 @@ class Je {
|
|
|
1271
1388
|
* Returns true if any plugin handled the event.
|
|
1272
1389
|
*/
|
|
1273
1390
|
onKeyDown(e) {
|
|
1274
|
-
for (const
|
|
1275
|
-
if (
|
|
1391
|
+
for (const o of this.plugins)
|
|
1392
|
+
if (o.onKeyDown?.(e))
|
|
1276
1393
|
return !0;
|
|
1277
1394
|
return !1;
|
|
1278
1395
|
}
|
|
@@ -1281,8 +1398,8 @@ class Je {
|
|
|
1281
1398
|
* Returns true if any plugin handled the event.
|
|
1282
1399
|
*/
|
|
1283
1400
|
onCellClick(e) {
|
|
1284
|
-
for (const
|
|
1285
|
-
if (
|
|
1401
|
+
for (const o of this.plugins)
|
|
1402
|
+
if (o.onCellClick?.(e))
|
|
1286
1403
|
return !0;
|
|
1287
1404
|
return !1;
|
|
1288
1405
|
}
|
|
@@ -1291,8 +1408,8 @@ class Je {
|
|
|
1291
1408
|
* Returns true if any plugin handled the event.
|
|
1292
1409
|
*/
|
|
1293
1410
|
onRowClick(e) {
|
|
1294
|
-
for (const
|
|
1295
|
-
if (
|
|
1411
|
+
for (const o of this.plugins)
|
|
1412
|
+
if (o.onRowClick?.(e))
|
|
1296
1413
|
return !0;
|
|
1297
1414
|
return !1;
|
|
1298
1415
|
}
|
|
@@ -1301,8 +1418,8 @@ class Je {
|
|
|
1301
1418
|
* Returns true if any plugin handled the event.
|
|
1302
1419
|
*/
|
|
1303
1420
|
onHeaderClick(e) {
|
|
1304
|
-
for (const
|
|
1305
|
-
if (
|
|
1421
|
+
for (const o of this.plugins)
|
|
1422
|
+
if (o.onHeaderClick?.(e))
|
|
1306
1423
|
return !0;
|
|
1307
1424
|
return !1;
|
|
1308
1425
|
}
|
|
@@ -1310,16 +1427,16 @@ class Je {
|
|
|
1310
1427
|
* Execute onScroll hook on all plugins.
|
|
1311
1428
|
*/
|
|
1312
1429
|
onScroll(e) {
|
|
1313
|
-
for (const
|
|
1314
|
-
|
|
1430
|
+
for (const o of this.plugins)
|
|
1431
|
+
o.onScroll?.(e);
|
|
1315
1432
|
}
|
|
1316
1433
|
/**
|
|
1317
1434
|
* Execute onCellMouseDown hook on all plugins.
|
|
1318
1435
|
* Returns true if any plugin handled the event.
|
|
1319
1436
|
*/
|
|
1320
1437
|
onCellMouseDown(e) {
|
|
1321
|
-
for (const
|
|
1322
|
-
if (
|
|
1438
|
+
for (const o of this.plugins)
|
|
1439
|
+
if (o.onCellMouseDown?.(e))
|
|
1323
1440
|
return !0;
|
|
1324
1441
|
return !1;
|
|
1325
1442
|
}
|
|
@@ -1328,8 +1445,8 @@ class Je {
|
|
|
1328
1445
|
* Returns true if any plugin handled the event.
|
|
1329
1446
|
*/
|
|
1330
1447
|
onCellMouseMove(e) {
|
|
1331
|
-
for (const
|
|
1332
|
-
if (
|
|
1448
|
+
for (const o of this.plugins)
|
|
1449
|
+
if (o.onCellMouseMove?.(e))
|
|
1333
1450
|
return !0;
|
|
1334
1451
|
return !1;
|
|
1335
1452
|
}
|
|
@@ -1338,8 +1455,8 @@ class Je {
|
|
|
1338
1455
|
* Returns true if any plugin handled the event.
|
|
1339
1456
|
*/
|
|
1340
1457
|
onCellMouseUp(e) {
|
|
1341
|
-
for (const
|
|
1342
|
-
if (
|
|
1458
|
+
for (const o of this.plugins)
|
|
1459
|
+
if (o.onCellMouseUp?.(e))
|
|
1343
1460
|
return !0;
|
|
1344
1461
|
return !1;
|
|
1345
1462
|
}
|
|
@@ -1347,12 +1464,12 @@ class Je {
|
|
|
1347
1464
|
* Collect context menu items from all plugins.
|
|
1348
1465
|
*/
|
|
1349
1466
|
getContextMenuItems(e) {
|
|
1350
|
-
const
|
|
1467
|
+
const o = [];
|
|
1351
1468
|
for (const n of this.plugins) {
|
|
1352
|
-
const
|
|
1353
|
-
|
|
1469
|
+
const s = n.getContextMenuItems?.(e);
|
|
1470
|
+
s && o.push(...s);
|
|
1354
1471
|
}
|
|
1355
|
-
return
|
|
1472
|
+
return o;
|
|
1356
1473
|
}
|
|
1357
1474
|
// ===== Shell Integration Hooks =====
|
|
1358
1475
|
/**
|
|
@@ -1361,11 +1478,11 @@ class Je {
|
|
|
1361
1478
|
*/
|
|
1362
1479
|
getToolPanels() {
|
|
1363
1480
|
const e = [];
|
|
1364
|
-
for (const
|
|
1365
|
-
const n =
|
|
1366
|
-
n && e.push({ plugin:
|
|
1481
|
+
for (const o of this.plugins) {
|
|
1482
|
+
const n = o.getToolPanel?.();
|
|
1483
|
+
n && e.push({ plugin: o, panel: n });
|
|
1367
1484
|
}
|
|
1368
|
-
return e.sort((
|
|
1485
|
+
return e.sort((o, n) => (o.panel.order ?? 0) - (n.panel.order ?? 0));
|
|
1369
1486
|
}
|
|
1370
1487
|
/**
|
|
1371
1488
|
* Collect header contents from all plugins.
|
|
@@ -1373,59 +1490,63 @@ class Je {
|
|
|
1373
1490
|
*/
|
|
1374
1491
|
getHeaderContents() {
|
|
1375
1492
|
const e = [];
|
|
1376
|
-
for (const
|
|
1377
|
-
const n =
|
|
1378
|
-
n && e.push({ plugin:
|
|
1493
|
+
for (const o of this.plugins) {
|
|
1494
|
+
const n = o.getHeaderContent?.();
|
|
1495
|
+
n && e.push({ plugin: o, content: n });
|
|
1379
1496
|
}
|
|
1380
|
-
return e.sort((
|
|
1497
|
+
return e.sort((o, n) => (o.content.order ?? 0) - (n.content.order ?? 0));
|
|
1381
1498
|
}
|
|
1382
1499
|
}
|
|
1383
|
-
class
|
|
1500
|
+
class V extends HTMLElement {
|
|
1384
1501
|
// TODO: Rename to 'data-grid' when migration is complete
|
|
1385
1502
|
static tagName = "tbw-grid";
|
|
1386
|
-
#
|
|
1387
|
-
#
|
|
1503
|
+
#t;
|
|
1504
|
+
#s = !1;
|
|
1388
1505
|
// ---------------- Ready Promise ----------------
|
|
1389
|
-
#
|
|
1390
|
-
|
|
1506
|
+
#I;
|
|
1507
|
+
#$;
|
|
1391
1508
|
// ================== INPUT PROPERTIES ==================
|
|
1392
1509
|
// These backing fields store raw user input. They are merged into
|
|
1393
1510
|
// #effectiveConfig by #mergeEffectiveConfig(). Never read directly
|
|
1394
1511
|
// for rendering logic - always use effectiveConfig or derived state.
|
|
1395
1512
|
#r = [];
|
|
1396
1513
|
#l;
|
|
1397
|
-
#
|
|
1514
|
+
#w;
|
|
1398
1515
|
#v;
|
|
1399
|
-
#
|
|
1516
|
+
#y;
|
|
1400
1517
|
// ================== SINGLE SOURCE OF TRUTH ==================
|
|
1401
1518
|
// All input sources converge here. This is the canonical config
|
|
1402
1519
|
// that all rendering and logic should read from.
|
|
1403
1520
|
#n = {};
|
|
1404
1521
|
#f = !1;
|
|
1405
1522
|
#p = 0;
|
|
1406
|
-
#
|
|
1407
|
-
#
|
|
1523
|
+
#C = null;
|
|
1524
|
+
#E = !1;
|
|
1408
1525
|
// Cached flag for plugin scroll handlers
|
|
1409
|
-
#
|
|
1526
|
+
#P;
|
|
1410
1527
|
// Cached hook to avoid closures
|
|
1411
1528
|
#R = !1;
|
|
1412
1529
|
#_ = null;
|
|
1530
|
+
#x = null;
|
|
1413
1531
|
#A = null;
|
|
1414
1532
|
#S = null;
|
|
1415
|
-
#x = null;
|
|
1416
1533
|
#a;
|
|
1417
|
-
#
|
|
1534
|
+
#g;
|
|
1418
1535
|
// ---------------- Plugin System ----------------
|
|
1419
|
-
#
|
|
1536
|
+
#o;
|
|
1420
1537
|
// ---------------- Column State ----------------
|
|
1421
|
-
#
|
|
1538
|
+
#M;
|
|
1422
1539
|
#h;
|
|
1423
1540
|
// ---------------- Shell State ----------------
|
|
1424
|
-
#e =
|
|
1541
|
+
#e = Ue();
|
|
1425
1542
|
#c = !1;
|
|
1543
|
+
#T;
|
|
1426
1544
|
// ================== DERIVED STATE ==================
|
|
1427
1545
|
// _rows: result of applying plugin processRows hooks
|
|
1428
1546
|
_rows = [];
|
|
1547
|
+
// _baseColumns: columns before plugin transformation (analogous to #rows for row processing)
|
|
1548
|
+
// This is the source of truth for processColumns - plugins transform these
|
|
1549
|
+
#D = [];
|
|
1429
1550
|
// _columns is a getter/setter that operates on effectiveConfig.columns
|
|
1430
1551
|
// This ensures effectiveConfig.columns is the single source of truth for columns
|
|
1431
1552
|
// _columns always contains ALL columns (including hidden)
|
|
@@ -1482,8 +1603,8 @@ class I extends HTMLElement {
|
|
|
1482
1603
|
return this._rows;
|
|
1483
1604
|
}
|
|
1484
1605
|
set rows(e) {
|
|
1485
|
-
const
|
|
1486
|
-
this.#r = e,
|
|
1606
|
+
const o = this.#r;
|
|
1607
|
+
this.#r = e, o !== e && this.#ee();
|
|
1487
1608
|
}
|
|
1488
1609
|
/**
|
|
1489
1610
|
* Get the original unfiltered/unprocessed rows.
|
|
@@ -1496,29 +1617,29 @@ class I extends HTMLElement {
|
|
|
1496
1617
|
return [...this._columns];
|
|
1497
1618
|
}
|
|
1498
1619
|
set columns(e) {
|
|
1499
|
-
const
|
|
1500
|
-
this.#l = e,
|
|
1620
|
+
const o = this.#l;
|
|
1621
|
+
this.#l = e, o !== e && this.#te();
|
|
1501
1622
|
}
|
|
1502
1623
|
get gridConfig() {
|
|
1503
1624
|
return this.#n;
|
|
1504
1625
|
}
|
|
1505
1626
|
set gridConfig(e) {
|
|
1506
|
-
const
|
|
1507
|
-
this.#
|
|
1627
|
+
const o = this.#w;
|
|
1628
|
+
this.#w = e, o !== e && this.#oe();
|
|
1508
1629
|
}
|
|
1509
1630
|
get fitMode() {
|
|
1510
1631
|
return this.#n.fitMode ?? "stretch";
|
|
1511
1632
|
}
|
|
1512
1633
|
set fitMode(e) {
|
|
1513
|
-
const
|
|
1514
|
-
this.#v = e,
|
|
1634
|
+
const o = this.#v;
|
|
1635
|
+
this.#v = e, o !== e && this.#J();
|
|
1515
1636
|
}
|
|
1516
1637
|
get editOn() {
|
|
1517
1638
|
return this.#n.editOn;
|
|
1518
1639
|
}
|
|
1519
1640
|
set editOn(e) {
|
|
1520
|
-
const
|
|
1521
|
-
this.#
|
|
1641
|
+
const o = this.#y;
|
|
1642
|
+
this.#y = e, o !== e && this.#Q();
|
|
1522
1643
|
}
|
|
1523
1644
|
// Effective config accessor for internal modules and plugins
|
|
1524
1645
|
// Returns the merged config (single source of truth) before plugin processing
|
|
@@ -1537,11 +1658,11 @@ class I extends HTMLElement {
|
|
|
1537
1658
|
return this.#a || (this.#a = new AbortController()), this.#a.signal;
|
|
1538
1659
|
}
|
|
1539
1660
|
constructor() {
|
|
1540
|
-
super(), this.#
|
|
1661
|
+
super(), this.#t = this.attachShadow({ mode: "open" }), this.#X(), this.#I = new Promise((e) => this.#$ = e);
|
|
1541
1662
|
}
|
|
1542
|
-
#
|
|
1663
|
+
#X() {
|
|
1543
1664
|
const e = new CSSStyleSheet();
|
|
1544
|
-
e.replaceSync(
|
|
1665
|
+
e.replaceSync(Ce), this.#t.adoptedStyleSheets = [e];
|
|
1545
1666
|
}
|
|
1546
1667
|
// ---------------- Plugin System ----------------
|
|
1547
1668
|
/**
|
|
@@ -1549,14 +1670,14 @@ class I extends HTMLElement {
|
|
|
1549
1670
|
* Used by plugins for inter-plugin communication.
|
|
1550
1671
|
*/
|
|
1551
1672
|
getPlugin(e) {
|
|
1552
|
-
return this.#
|
|
1673
|
+
return this.#o?.getPlugin(e);
|
|
1553
1674
|
}
|
|
1554
1675
|
/**
|
|
1555
1676
|
* Get a plugin instance by its name.
|
|
1556
1677
|
* Used for loose coupling between plugins (avoids static imports).
|
|
1557
1678
|
*/
|
|
1558
1679
|
getPluginByName(e) {
|
|
1559
|
-
return this.#
|
|
1680
|
+
return this.#o?.getPluginByName(e);
|
|
1560
1681
|
}
|
|
1561
1682
|
/**
|
|
1562
1683
|
* Request a full re-render of the grid.
|
|
@@ -1564,7 +1685,7 @@ class I extends HTMLElement {
|
|
|
1564
1685
|
* Note: This does NOT reset plugin state - just re-processes rows/columns and renders.
|
|
1565
1686
|
*/
|
|
1566
1687
|
requestRender() {
|
|
1567
|
-
this.#
|
|
1688
|
+
this.#k(), this.#O(), this.#L(), this.updateTemplate(), this.refreshVirtualWindow(!0);
|
|
1568
1689
|
}
|
|
1569
1690
|
/**
|
|
1570
1691
|
* Request a lightweight style update without rebuilding DOM.
|
|
@@ -1578,216 +1699,222 @@ class I extends HTMLElement {
|
|
|
1578
1699
|
* Initialize plugin system with instances from config.
|
|
1579
1700
|
* Plugins are class instances passed in gridConfig.plugins[].
|
|
1580
1701
|
*/
|
|
1581
|
-
#
|
|
1582
|
-
this.#
|
|
1583
|
-
const e = this.#n?.plugins,
|
|
1584
|
-
this.#
|
|
1702
|
+
#B() {
|
|
1703
|
+
this.#o = new nt(this);
|
|
1704
|
+
const e = this.#n?.plugins, o = Array.isArray(e) ? e : [];
|
|
1705
|
+
this.#o.attachAll(o);
|
|
1585
1706
|
}
|
|
1586
1707
|
/**
|
|
1587
1708
|
* Inject all plugin styles into the shadow DOM.
|
|
1588
1709
|
* Must be called after #render() since innerHTML wipes existing content.
|
|
1589
1710
|
*/
|
|
1590
|
-
#
|
|
1591
|
-
const e = this.#
|
|
1711
|
+
#K() {
|
|
1712
|
+
const e = this.#o?.getAllStyles() ?? "";
|
|
1592
1713
|
if (e) {
|
|
1593
|
-
const
|
|
1594
|
-
|
|
1714
|
+
const o = document.createElement("style");
|
|
1715
|
+
o.setAttribute("data-plugin", "all"), o.textContent = e, this.#t.appendChild(o);
|
|
1595
1716
|
}
|
|
1596
1717
|
}
|
|
1597
1718
|
/**
|
|
1598
1719
|
* Update plugins when grid config changes.
|
|
1599
1720
|
* With class-based plugins, we need to detach old and attach new.
|
|
1600
1721
|
*/
|
|
1601
|
-
#
|
|
1602
|
-
this.#
|
|
1722
|
+
#W() {
|
|
1723
|
+
this.#o && this.#o.detachAll(), this.#B(), this.#K(), this.#E = this.#o?.getAll().some((e) => e.onScroll) ?? !1;
|
|
1603
1724
|
}
|
|
1604
1725
|
/**
|
|
1605
1726
|
* Clean up plugin states when grid disconnects.
|
|
1606
1727
|
*/
|
|
1607
|
-
#
|
|
1608
|
-
this.#
|
|
1728
|
+
#j() {
|
|
1729
|
+
this.#o?.detachAll();
|
|
1609
1730
|
}
|
|
1610
1731
|
/**
|
|
1611
1732
|
* Collect tool panels and header content from all plugins.
|
|
1612
1733
|
* Called after plugins are attached but before render.
|
|
1613
1734
|
*/
|
|
1614
|
-
#
|
|
1615
|
-
if (!this.#
|
|
1616
|
-
const e = this.#
|
|
1735
|
+
#Y() {
|
|
1736
|
+
if (!this.#o) return;
|
|
1737
|
+
const e = this.#o.getToolPanels();
|
|
1617
1738
|
for (const { panel: n } of e)
|
|
1618
1739
|
this.#e.toolPanels.has(n.id) || this.#e.toolPanels.set(n.id, n);
|
|
1619
|
-
const
|
|
1620
|
-
for (const { content: n } of
|
|
1740
|
+
const o = this.#o.getHeaderContents();
|
|
1741
|
+
for (const { content: n } of o)
|
|
1621
1742
|
this.#e.headerContents.has(n.id) || this.#e.headerContents.set(n.id, n);
|
|
1622
1743
|
}
|
|
1623
1744
|
// ---------------- Lifecycle ----------------
|
|
1624
1745
|
connectedCallback() {
|
|
1625
|
-
this.hasAttribute("tabindex") || (this.tabIndex = 0), this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#a?.abort(), this.#a = new AbortController(), this.#u(), this.#
|
|
1746
|
+
this.hasAttribute("tabindex") || (this.tabIndex = 0), this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#a?.abort(), this.#a = new AbortController(), this.#u(), this.#B(), this.#Y(), this.#s || (this.#U(), this.#K(), this.#s = !0), this.#F();
|
|
1626
1747
|
}
|
|
1627
1748
|
disconnectedCallback() {
|
|
1628
|
-
this.#
|
|
1749
|
+
this.#j(), ot(this.#e), this.#c = !1, this.#T?.(), this.#T = void 0, this.#a && (this.#a.abort(), this.#a = void 0), this.resizeController && this.resizeController.dispose(), this.#g && (this.#g.disconnect(), this.#g = void 0), this.#f = !1;
|
|
1629
1750
|
}
|
|
1630
|
-
|
|
1631
|
-
const
|
|
1632
|
-
if (this.headerRowEl =
|
|
1633
|
-
|
|
1751
|
+
#F() {
|
|
1752
|
+
const o = this.#t.querySelector(".tbw-grid-content") ?? this.#t.querySelector(".tbw-grid-root");
|
|
1753
|
+
if (this.headerRowEl = o?.querySelector(".header-row"), this.virtualization.totalHeightEl = o?.querySelector(".faux-vscroll-spacer"), this.virtualization.viewportEl = o?.querySelector(".rows-viewport"), this.bodyEl = o?.querySelector(".rows"), this.#c) {
|
|
1754
|
+
le(this.#t, this.#e), Qe(this.#t, this.#n?.shell, this.#e);
|
|
1634
1755
|
const r = this.#n?.shell?.toolPanel?.defaultOpen;
|
|
1635
|
-
r && this.#e.toolPanels.has(r) && this.openToolPanel(r);
|
|
1756
|
+
r && this.#e.toolPanels.has(r) && (this.openToolPanel(), this.#e.expandedSections.add(r));
|
|
1636
1757
|
}
|
|
1637
|
-
this.setAttribute("data-upgraded", ""), this
|
|
1758
|
+
this.setAttribute("data-upgraded", ""), this.#f = !0;
|
|
1638
1759
|
const n = this.disconnectSignal;
|
|
1639
|
-
this.#d(), this.addEventListener("keydown", (r) =>
|
|
1760
|
+
this.#d(), this.addEventListener("keydown", (r) => Be(this, r), { signal: n }), document.addEventListener(
|
|
1640
1761
|
"keydown",
|
|
1641
1762
|
(r) => {
|
|
1642
|
-
r.key === "Escape" && this.activeEditRows !== -1 && this.#
|
|
1763
|
+
r.key === "Escape" && this.activeEditRows !== -1 && this.#z(this.activeEditRows, !0);
|
|
1643
1764
|
},
|
|
1644
1765
|
{ capture: !0, signal: n }
|
|
1645
1766
|
), document.addEventListener(
|
|
1646
1767
|
"mousedown",
|
|
1647
1768
|
(r) => {
|
|
1648
1769
|
if (this.activeEditRows === -1) return;
|
|
1649
|
-
const
|
|
1650
|
-
!
|
|
1770
|
+
const l = this.findRenderedRowElement(this.activeEditRows);
|
|
1771
|
+
!l || (r.composedPath && r.composedPath() || []).includes(l) || this.#z(this.activeEditRows, !1);
|
|
1651
1772
|
},
|
|
1652
1773
|
{ signal: n }
|
|
1653
1774
|
);
|
|
1654
|
-
const
|
|
1655
|
-
if (this.virtualization.container =
|
|
1656
|
-
|
|
1775
|
+
const s = o?.querySelector(".faux-vscroll"), i = o?.querySelector(".rows");
|
|
1776
|
+
if (this.virtualization.container = s ?? this, this.#E = this.#o?.getAll().some((r) => r.onScroll) ?? !1, s && i) {
|
|
1777
|
+
s.addEventListener(
|
|
1657
1778
|
"scroll",
|
|
1658
1779
|
() => {
|
|
1659
|
-
if (!this.virtualization.enabled && !this.#
|
|
1660
|
-
const
|
|
1661
|
-
|
|
1662
|
-
this.#p = 0, this.#
|
|
1780
|
+
if (!this.virtualization.enabled && !this.#E) return;
|
|
1781
|
+
const a = s.scrollTop, d = this.virtualization.rowHeight, h = Math.floor(a / d), p = h - h % 2, w = -(a - p * d);
|
|
1782
|
+
i.style.transform = `translateY(${w}px)`, this.#C = a, this.#p || (this.#p = requestAnimationFrame(() => {
|
|
1783
|
+
this.#p = 0, this.#C !== null && (this.#re(this.#C), this.#C = null);
|
|
1663
1784
|
}));
|
|
1664
1785
|
},
|
|
1665
1786
|
{ passive: !0, signal: n }
|
|
1666
1787
|
);
|
|
1667
|
-
const r = this.#
|
|
1788
|
+
const r = this.#t.querySelector(".tbw-grid-content"), l = this.#t.querySelector(".tbw-scroll-area");
|
|
1668
1789
|
r && (r.addEventListener(
|
|
1669
1790
|
"wheel",
|
|
1670
|
-
(
|
|
1671
|
-
|
|
1791
|
+
(a) => {
|
|
1792
|
+
a.preventDefault(), a.shiftKey || Math.abs(a.deltaX) > Math.abs(a.deltaY) ? l && (l.scrollLeft += a.shiftKey ? a.deltaY : a.deltaX) : s.scrollTop += a.deltaY;
|
|
1672
1793
|
},
|
|
1673
1794
|
{ passive: !1, signal: n }
|
|
1674
1795
|
), r.addEventListener(
|
|
1675
1796
|
"touchstart",
|
|
1676
|
-
(
|
|
1677
|
-
|
|
1797
|
+
(a) => {
|
|
1798
|
+
a.touches.length === 1 && (this.#_ = a.touches[0].clientY, this.#x = a.touches[0].clientX, this.#A = s.scrollTop, this.#S = l?.scrollLeft ?? 0);
|
|
1678
1799
|
},
|
|
1679
1800
|
{ passive: !0, signal: n }
|
|
1680
1801
|
), r.addEventListener(
|
|
1681
1802
|
"touchmove",
|
|
1682
|
-
(
|
|
1683
|
-
if (
|
|
1684
|
-
const
|
|
1685
|
-
|
|
1803
|
+
(a) => {
|
|
1804
|
+
if (a.touches.length === 1 && this.#_ !== null && this.#x !== null && this.#A !== null && this.#S !== null) {
|
|
1805
|
+
const d = this.#_ - a.touches[0].clientY, h = this.#x - a.touches[0].clientX;
|
|
1806
|
+
s.scrollTop = this.#A + d, l && (l.scrollLeft = this.#S + h), a.preventDefault();
|
|
1686
1807
|
}
|
|
1687
1808
|
},
|
|
1688
1809
|
{ passive: !1, signal: n }
|
|
1689
1810
|
), r.addEventListener(
|
|
1690
1811
|
"touchend",
|
|
1691
1812
|
() => {
|
|
1692
|
-
this.#_ = null, this.#
|
|
1813
|
+
this.#_ = null, this.#x = null, this.#A = null, this.#S = null;
|
|
1693
1814
|
},
|
|
1694
1815
|
{ passive: !0, signal: n }
|
|
1695
1816
|
));
|
|
1696
1817
|
}
|
|
1697
|
-
this.resizeController =
|
|
1818
|
+
this.resizeController = Ge(this), this.#t.addEventListener("mousedown", (r) => this.#le(r), { signal: n }), document.addEventListener("mousemove", (r) => this.#ae(r), { signal: n }), document.addEventListener("mouseup", (r) => this.#ce(r), { signal: n }), this.virtualization.enabled && requestAnimationFrame(() => this.refreshVirtualWindow(!0)), requestAnimationFrame(() => {
|
|
1698
1819
|
const r = this.bodyEl.querySelector(".data-grid-row");
|
|
1699
1820
|
if (r) {
|
|
1700
|
-
const
|
|
1701
|
-
|
|
1821
|
+
const l = r.getBoundingClientRect().height;
|
|
1822
|
+
l && Math.abs(l - this.virtualization.rowHeight) > 0.1 && (this.virtualization.rowHeight = l, this.refreshVirtualWindow(!0));
|
|
1702
1823
|
}
|
|
1703
|
-
}), this.virtualization.viewportEl && (this.#
|
|
1824
|
+
}), this.virtualization.viewportEl && (this.#g = new ResizeObserver(() => {
|
|
1704
1825
|
this.#p || (this.#p = requestAnimationFrame(() => {
|
|
1705
1826
|
this.#p = 0, this.refreshVirtualWindow(!0);
|
|
1706
1827
|
}));
|
|
1707
|
-
}), this.#
|
|
1828
|
+
}), this.#g.observe(this.virtualization.viewportEl)), queueMicrotask(() => this.#Z()), requestAnimationFrame(() => requestAnimationFrame(() => this.#$?.()));
|
|
1708
1829
|
}
|
|
1709
1830
|
// ---------------- Event Emitters ----------------
|
|
1710
|
-
#
|
|
1711
|
-
this.dispatchEvent(new CustomEvent(e, { detail:
|
|
1831
|
+
#i(e, o) {
|
|
1832
|
+
this.dispatchEvent(new CustomEvent(e, { detail: o, bubbles: !0, composed: !0 }));
|
|
1712
1833
|
}
|
|
1713
1834
|
emitCellCommit(e) {
|
|
1714
|
-
this.#
|
|
1835
|
+
this.#i("cell-commit", e);
|
|
1715
1836
|
}
|
|
1716
1837
|
emitRowCommit(e) {
|
|
1717
|
-
this.#
|
|
1838
|
+
this.#i("row-commit", e);
|
|
1718
1839
|
}
|
|
1719
1840
|
emitSortChange(e) {
|
|
1720
|
-
this.#
|
|
1841
|
+
this.#i("sort-change", e);
|
|
1721
1842
|
}
|
|
1722
1843
|
emitColumnResize(e) {
|
|
1723
|
-
this.#
|
|
1844
|
+
this.#i("column-resize", e);
|
|
1724
1845
|
}
|
|
1725
1846
|
emitActivateCell(e) {
|
|
1726
|
-
this.#
|
|
1847
|
+
this.#i("activate-cell", e);
|
|
1727
1848
|
}
|
|
1728
1849
|
/** Update ARIA selection attributes on rendered rows/cells */
|
|
1729
|
-
#
|
|
1730
|
-
this.bodyEl?.querySelectorAll(".data-grid-row")?.forEach((
|
|
1731
|
-
const
|
|
1732
|
-
|
|
1733
|
-
|
|
1850
|
+
#Z() {
|
|
1851
|
+
this.bodyEl?.querySelectorAll(".data-grid-row")?.forEach((o, n) => {
|
|
1852
|
+
const s = n === this.focusRow;
|
|
1853
|
+
o.setAttribute("aria-selected", String(s)), o.querySelectorAll(".cell").forEach((i, r) => {
|
|
1854
|
+
i.setAttribute("aria-selected", String(s && r === this.focusCol));
|
|
1734
1855
|
});
|
|
1735
1856
|
});
|
|
1736
1857
|
}
|
|
1737
1858
|
// ---------------- Watch Handlers ----------------
|
|
1738
|
-
#
|
|
1859
|
+
#J() {
|
|
1739
1860
|
if (!this.#f) return;
|
|
1740
|
-
this.#u(), this.#n.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, this.#
|
|
1741
|
-
!
|
|
1861
|
+
this.#u(), this.#n.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, this.#V()) : (this._columns.forEach((o) => {
|
|
1862
|
+
!o.__userResized && o.__autoSized && delete o.width;
|
|
1742
1863
|
}), this.updateTemplate());
|
|
1743
1864
|
}
|
|
1744
|
-
#
|
|
1865
|
+
#Q() {
|
|
1745
1866
|
this.#f && (this.#u(), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
|
|
1746
1867
|
}
|
|
1747
|
-
#
|
|
1748
|
-
this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#
|
|
1868
|
+
#ee() {
|
|
1869
|
+
this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#k(), !this.#l || Array.isArray(this.#l) && this.#l.length === 0 ? this.#d() : this.refreshVirtualWindow(!0);
|
|
1749
1870
|
}
|
|
1750
|
-
#
|
|
1871
|
+
#te() {
|
|
1751
1872
|
j(this), this.#f && (this.#u(), this.#d());
|
|
1752
1873
|
}
|
|
1753
|
-
#
|
|
1754
|
-
this.#f && (this.#u(), this.#
|
|
1874
|
+
#oe() {
|
|
1875
|
+
this.#f && (this.#u(), this.#W(), this.#k(), this.#O(), this.#L(), this.updateTemplate(), this.refreshVirtualWindow(!0));
|
|
1755
1876
|
}
|
|
1756
1877
|
// ---------------- Helper Wrappers ----------------
|
|
1757
|
-
#
|
|
1758
|
-
|
|
1878
|
+
#ne() {
|
|
1879
|
+
qe(this);
|
|
1759
1880
|
}
|
|
1760
|
-
#
|
|
1761
|
-
|
|
1881
|
+
#L() {
|
|
1882
|
+
Q(this);
|
|
1762
1883
|
}
|
|
1763
1884
|
updateTemplate() {
|
|
1764
|
-
|
|
1885
|
+
be(this);
|
|
1765
1886
|
}
|
|
1766
|
-
#
|
|
1767
|
-
|
|
1768
|
-
}
|
|
1769
|
-
#
|
|
1770
|
-
if (this.#
|
|
1771
|
-
const e = this._columns.filter((
|
|
1772
|
-
if (
|
|
1773
|
-
const
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1887
|
+
#V() {
|
|
1888
|
+
Ie(this);
|
|
1889
|
+
}
|
|
1890
|
+
#O() {
|
|
1891
|
+
if (this.#o) {
|
|
1892
|
+
const e = this.#D.length > 0 ? this.#D : this._columns, o = e.filter((i) => !i.hidden), n = e.filter((i) => i.hidden), s = this.#o.processColumns([...o]);
|
|
1893
|
+
if (s !== o) {
|
|
1894
|
+
const i = new Map(s.map((l, a) => [l.field, { col: l, order: a }]));
|
|
1895
|
+
if (!o.some((l) => i.has(l.field)) && s.length > 0)
|
|
1896
|
+
this._columns = [...s, ...n];
|
|
1897
|
+
else {
|
|
1898
|
+
const l = e.map((a) => {
|
|
1899
|
+
if (a.hidden) return a;
|
|
1900
|
+
const d = i.get(a.field);
|
|
1901
|
+
return d ? d.col : a;
|
|
1902
|
+
});
|
|
1903
|
+
this._columns = l;
|
|
1904
|
+
}
|
|
1905
|
+
} else
|
|
1906
|
+
this._columns = [...e];
|
|
1780
1907
|
}
|
|
1781
1908
|
}
|
|
1782
1909
|
/** Execute all plugin afterRender hooks */
|
|
1783
1910
|
#b() {
|
|
1784
|
-
this.#
|
|
1911
|
+
this.#o?.afterRender();
|
|
1785
1912
|
}
|
|
1786
1913
|
/** Recompute row model via plugin hooks (grouping, tree, filtering, etc.). */
|
|
1787
|
-
#
|
|
1914
|
+
#k() {
|
|
1788
1915
|
j(this);
|
|
1789
|
-
const e = Array.isArray(this.#r) ? [...this.#r] : [],
|
|
1790
|
-
this._rows =
|
|
1916
|
+
const e = Array.isArray(this.#r) ? [...this.#r] : [], o = this.#o?.processRows(e) ?? e;
|
|
1917
|
+
this._rows = o;
|
|
1791
1918
|
}
|
|
1792
1919
|
/**
|
|
1793
1920
|
* Build the canonical effective configuration by merging all input sources.
|
|
@@ -1808,92 +1935,92 @@ class I extends HTMLElement {
|
|
|
1808
1935
|
* - Plugins receive config via their attach() method
|
|
1809
1936
|
*/
|
|
1810
1937
|
#u() {
|
|
1811
|
-
const e = this.#
|
|
1812
|
-
let
|
|
1813
|
-
const n = (this.__lightDomColumnsCache || []).map((
|
|
1814
|
-
...
|
|
1938
|
+
const e = this.#w ? { ...this.#w } : {};
|
|
1939
|
+
let o = Array.isArray(e.columns) ? [...e.columns] : [];
|
|
1940
|
+
const n = (this.__lightDomColumnsCache || []).map((s) => ({
|
|
1941
|
+
...s
|
|
1815
1942
|
}));
|
|
1816
1943
|
if (n.length) {
|
|
1817
|
-
const
|
|
1818
|
-
|
|
1819
|
-
const r = i
|
|
1820
|
-
r ? (
|
|
1944
|
+
const s = {};
|
|
1945
|
+
o.forEach((i) => s[i.field] = i), n.forEach((i) => {
|
|
1946
|
+
const r = s[i.field];
|
|
1947
|
+
r ? (i.header && !r.header && (r.header = i.header), i.type && !r.type && (r.type = i.type), r.sortable = r.sortable || i.sortable, i.resizable && (r.resizable = !0), i.editable && (r.editable = !0)) : (o.push(i), s[i.field] = i);
|
|
1821
1948
|
});
|
|
1822
1949
|
}
|
|
1823
|
-
if (this.#l && this.#l.length && (
|
|
1824
|
-
|
|
1950
|
+
if (this.#l && this.#l.length && (o = [...this.#l]), (!o || o.length === 0) && this._rows.length && (o = we(this._rows).columns), o.length) {
|
|
1951
|
+
o.forEach((r) => {
|
|
1825
1952
|
r.sortable === void 0 && (r.sortable = !0), r.resizable === void 0 && (r.resizable = !0);
|
|
1826
1953
|
});
|
|
1827
|
-
const
|
|
1828
|
-
|
|
1954
|
+
const s = this.#n.columns;
|
|
1955
|
+
s?.some((r) => r.__compiledView || r.__compiledEditor) ? e.columns = s : e.columns = o;
|
|
1829
1956
|
} else {
|
|
1830
|
-
const
|
|
1831
|
-
|
|
1957
|
+
const s = this.#n.columns;
|
|
1958
|
+
s?.some((i) => i.__compiledView || i.__compiledEditor) && (e.columns = s);
|
|
1832
1959
|
}
|
|
1833
|
-
this.#v && (e.fitMode = this.#v), e.fitMode || (e.fitMode = "stretch"), this.#
|
|
1834
|
-
|
|
1960
|
+
this.#v && (e.fitMode = this.#v), e.fitMode || (e.fitMode = "stretch"), this.#y && (e.editOn = this.#y), e.columnState && !this.#h && (this.#h = e.columnState), this.#n = e, e.fitMode === "fixed" && this._columns.forEach((s) => {
|
|
1961
|
+
s.width == null && (s.width = 80);
|
|
1835
1962
|
});
|
|
1836
1963
|
}
|
|
1837
1964
|
// ---------------- Delegate Wrappers ----------------
|
|
1838
|
-
#H(e,
|
|
1839
|
-
this.#
|
|
1965
|
+
#H(e, o, n = this.__rowRenderEpoch) {
|
|
1966
|
+
this.#P || (this.#P = (s, i, r) => this.#o?.renderRow(s, i, r) ?? !1), Fe(this, e, o, n, this.#P);
|
|
1840
1967
|
}
|
|
1841
|
-
#
|
|
1842
|
-
|
|
1968
|
+
#se(e, o) {
|
|
1969
|
+
H(this, e, o);
|
|
1843
1970
|
}
|
|
1844
|
-
#
|
|
1845
|
-
|
|
1971
|
+
#z(e, o) {
|
|
1972
|
+
N(this, e, o);
|
|
1846
1973
|
}
|
|
1847
1974
|
// ---------------- Core Helpers ----------------
|
|
1848
1975
|
#d() {
|
|
1849
1976
|
if (!this.isConnected || !this.headerRowEl || !this.bodyEl)
|
|
1850
1977
|
return;
|
|
1851
|
-
const e = this.#
|
|
1978
|
+
const e = this.#w?.columns || this.#l || [];
|
|
1852
1979
|
if (e.length) {
|
|
1853
|
-
const n = new Map(this._columns.filter((
|
|
1854
|
-
...
|
|
1855
|
-
hidden: n.get(
|
|
1980
|
+
const n = new Map(this._columns.filter((i) => i.hidden).map((i) => [i.field, !0])), s = e.map((i) => ({
|
|
1981
|
+
...i,
|
|
1982
|
+
hidden: n.get(i.field) ?? i.hidden
|
|
1856
1983
|
}));
|
|
1857
|
-
this._columns =
|
|
1984
|
+
this._columns = s;
|
|
1858
1985
|
}
|
|
1859
|
-
if (this.#
|
|
1986
|
+
if (this.#ne(), this.#u(), this.#W(), this.#D = [...this._columns], this.#k(), this.#O(), this.#h) {
|
|
1860
1987
|
const n = this.#h;
|
|
1861
|
-
this.#h = void 0, this.#
|
|
1988
|
+
this.#h = void 0, this.#G(n);
|
|
1862
1989
|
}
|
|
1863
|
-
this.#
|
|
1990
|
+
this.#L(), this.updateTemplate(), this.refreshVirtualWindow(!0), this.#n.fitMode === "fixed" && !this.__didInitialAutoSize && requestAnimationFrame(() => this.#V()), this.bodyEl && (this.bodyEl.style.display = "", this.bodyEl.style.gridTemplateColumns = ""), queueMicrotask(() => this.#b());
|
|
1864
1991
|
}
|
|
1865
1992
|
/** Internal method to apply column state without triggering setup loop */
|
|
1866
|
-
#
|
|
1867
|
-
const
|
|
1868
|
-
|
|
1869
|
-
for (const
|
|
1870
|
-
const
|
|
1871
|
-
|
|
1993
|
+
#G(e) {
|
|
1994
|
+
const o = this.#n.columns ?? [], n = this.#o?.getAll() ?? [];
|
|
1995
|
+
Re(this, e, o, n);
|
|
1996
|
+
for (const s of e.columns) {
|
|
1997
|
+
const i = o.find((r) => r.field === s.field);
|
|
1998
|
+
i && (i.hidden = !s.visible);
|
|
1872
1999
|
}
|
|
1873
2000
|
}
|
|
1874
|
-
#
|
|
2001
|
+
#ie() {
|
|
1875
2002
|
return this._rows.length <= this.virtualization.bypassThreshold;
|
|
1876
2003
|
}
|
|
1877
|
-
#
|
|
1878
|
-
if (this.refreshVirtualWindow(!1), this.#
|
|
1879
|
-
const
|
|
2004
|
+
#re(e) {
|
|
2005
|
+
if (this.refreshVirtualWindow(!1), this.#o?.onScrollRender(), this.#E) {
|
|
2006
|
+
const o = this.virtualization.container, n = {
|
|
1880
2007
|
scrollTop: e,
|
|
1881
|
-
scrollLeft:
|
|
1882
|
-
scrollHeight:
|
|
1883
|
-
scrollWidth:
|
|
1884
|
-
clientHeight:
|
|
1885
|
-
clientWidth:
|
|
2008
|
+
scrollLeft: o?.scrollLeft ?? 0,
|
|
2009
|
+
scrollHeight: o?.scrollHeight ?? 0,
|
|
2010
|
+
scrollWidth: o?.scrollWidth ?? 0,
|
|
2011
|
+
clientHeight: o?.clientHeight ?? 0,
|
|
2012
|
+
clientWidth: o?.clientWidth ?? 0,
|
|
1886
2013
|
originalEvent: new Event("scroll")
|
|
1887
2014
|
};
|
|
1888
|
-
this.#
|
|
2015
|
+
this.#o?.onScroll(n);
|
|
1889
2016
|
}
|
|
1890
2017
|
}
|
|
1891
2018
|
findHeaderRow() {
|
|
1892
|
-
return this.#
|
|
2019
|
+
return this.#t.querySelector(".header-row");
|
|
1893
2020
|
}
|
|
1894
2021
|
findRenderedRowElement(e) {
|
|
1895
|
-
return Array.from(this.bodyEl.querySelectorAll(".data-grid-row")).find((
|
|
1896
|
-
const n =
|
|
2022
|
+
return Array.from(this.bodyEl.querySelectorAll(".data-grid-row")).find((o) => {
|
|
2023
|
+
const n = o.querySelector(".cell[data-row]");
|
|
1897
2024
|
return n && Number(n.getAttribute("data-row")) === e;
|
|
1898
2025
|
}) || null;
|
|
1899
2026
|
}
|
|
@@ -1901,93 +2028,93 @@ class I extends HTMLElement {
|
|
|
1901
2028
|
* Dispatch a cell click event to the plugin system.
|
|
1902
2029
|
* Returns true if any plugin handled the event.
|
|
1903
2030
|
*/
|
|
1904
|
-
dispatchCellClick(e,
|
|
1905
|
-
const
|
|
1906
|
-
if (!
|
|
1907
|
-
const
|
|
1908
|
-
row:
|
|
1909
|
-
rowIndex:
|
|
2031
|
+
dispatchCellClick(e, o, n, s) {
|
|
2032
|
+
const i = this._rows[o], r = this._columns[n];
|
|
2033
|
+
if (!i || !r) return !1;
|
|
2034
|
+
const l = {
|
|
2035
|
+
row: i,
|
|
2036
|
+
rowIndex: o,
|
|
1910
2037
|
colIndex: n,
|
|
1911
2038
|
field: r.field,
|
|
1912
|
-
value:
|
|
1913
|
-
cellEl:
|
|
2039
|
+
value: i[r.field],
|
|
2040
|
+
cellEl: s,
|
|
1914
2041
|
originalEvent: e
|
|
1915
2042
|
};
|
|
1916
|
-
return this.#
|
|
2043
|
+
return this.#o?.onCellClick(l) ?? !1;
|
|
1917
2044
|
}
|
|
1918
2045
|
/**
|
|
1919
2046
|
* Dispatch a header click event to the plugin system.
|
|
1920
2047
|
* Returns true if any plugin handled the event.
|
|
1921
2048
|
*/
|
|
1922
|
-
dispatchHeaderClick(e,
|
|
1923
|
-
const
|
|
1924
|
-
if (!
|
|
1925
|
-
const
|
|
1926
|
-
colIndex:
|
|
1927
|
-
field:
|
|
1928
|
-
column:
|
|
2049
|
+
dispatchHeaderClick(e, o, n) {
|
|
2050
|
+
const s = this._columns[o];
|
|
2051
|
+
if (!s) return !1;
|
|
2052
|
+
const i = {
|
|
2053
|
+
colIndex: o,
|
|
2054
|
+
field: s.field,
|
|
2055
|
+
column: s,
|
|
1929
2056
|
headerEl: n,
|
|
1930
2057
|
originalEvent: e
|
|
1931
2058
|
};
|
|
1932
|
-
return this.#
|
|
2059
|
+
return this.#o?.onHeaderClick(i) ?? !1;
|
|
1933
2060
|
}
|
|
1934
2061
|
/**
|
|
1935
2062
|
* Dispatch a keyboard event to the plugin system.
|
|
1936
2063
|
* Returns true if any plugin handled the event.
|
|
1937
2064
|
*/
|
|
1938
2065
|
dispatchKeyDown(e) {
|
|
1939
|
-
return this.#
|
|
2066
|
+
return this.#o?.onKeyDown(e) ?? !1;
|
|
1940
2067
|
}
|
|
1941
2068
|
/**
|
|
1942
2069
|
* Build a CellMouseEvent from a native MouseEvent.
|
|
1943
2070
|
* Extracts cell/row information from the event target.
|
|
1944
2071
|
*/
|
|
1945
|
-
#
|
|
2072
|
+
#N(e, o) {
|
|
1946
2073
|
let n = null;
|
|
1947
|
-
const
|
|
1948
|
-
if (
|
|
1949
|
-
const u = this.#
|
|
2074
|
+
const s = e.composedPath?.();
|
|
2075
|
+
if (s && s.length > 0 ? n = s[0] : n = e.target, n && !this.#t.contains(n)) {
|
|
2076
|
+
const u = this.#t.elementFromPoint(e.clientX, e.clientY);
|
|
1950
2077
|
u && (n = u);
|
|
1951
2078
|
}
|
|
1952
|
-
const
|
|
1953
|
-
let
|
|
1954
|
-
return
|
|
1955
|
-
type:
|
|
1956
|
-
row:
|
|
1957
|
-
rowIndex:
|
|
1958
|
-
colIndex:
|
|
1959
|
-
field:
|
|
1960
|
-
value:
|
|
2079
|
+
const i = n?.closest?.("[data-col]"), r = n?.closest?.(".data-grid-row"), l = n?.closest?.(".header-row");
|
|
2080
|
+
let a, d, h, p, w, c;
|
|
2081
|
+
return i && (a = parseInt(i.getAttribute("data-row") ?? "-1", 10), d = parseInt(i.getAttribute("data-col") ?? "-1", 10), a >= 0 && d >= 0 && (h = this._rows[a], c = this._columns[d], p = c?.field, w = h && p ? h[p] : void 0)), {
|
|
2082
|
+
type: o,
|
|
2083
|
+
row: h,
|
|
2084
|
+
rowIndex: a !== void 0 && a >= 0 ? a : void 0,
|
|
2085
|
+
colIndex: d !== void 0 && d >= 0 ? d : void 0,
|
|
2086
|
+
field: p,
|
|
2087
|
+
value: w,
|
|
1961
2088
|
column: c,
|
|
1962
2089
|
originalEvent: e,
|
|
1963
|
-
cellElement:
|
|
2090
|
+
cellElement: i ?? void 0,
|
|
1964
2091
|
rowElement: r ?? void 0,
|
|
1965
|
-
isHeader: !!
|
|
1966
|
-
cell:
|
|
2092
|
+
isHeader: !!l,
|
|
2093
|
+
cell: a !== void 0 && d !== void 0 && a >= 0 && d >= 0 ? { row: a, col: d } : void 0
|
|
1967
2094
|
};
|
|
1968
2095
|
}
|
|
1969
2096
|
/**
|
|
1970
2097
|
* Handle mousedown events and dispatch to plugin system.
|
|
1971
2098
|
*/
|
|
1972
|
-
#
|
|
1973
|
-
const
|
|
1974
|
-
(this.#
|
|
2099
|
+
#le(e) {
|
|
2100
|
+
const o = this.#N(e, "mousedown");
|
|
2101
|
+
(this.#o?.onCellMouseDown(o) ?? !1) && (this.#R = !0);
|
|
1975
2102
|
}
|
|
1976
2103
|
/**
|
|
1977
2104
|
* Handle mousemove events (only when dragging).
|
|
1978
2105
|
*/
|
|
1979
|
-
#
|
|
2106
|
+
#ae(e) {
|
|
1980
2107
|
if (!this.#R) return;
|
|
1981
|
-
const
|
|
1982
|
-
this.#
|
|
2108
|
+
const o = this.#N(e, "mousemove");
|
|
2109
|
+
this.#o?.onCellMouseMove(o);
|
|
1983
2110
|
}
|
|
1984
2111
|
/**
|
|
1985
2112
|
* Handle mouseup events.
|
|
1986
2113
|
*/
|
|
1987
|
-
#
|
|
2114
|
+
#ce(e) {
|
|
1988
2115
|
if (!this.#R) return;
|
|
1989
|
-
const
|
|
1990
|
-
this.#
|
|
2116
|
+
const o = this.#N(e, "mouseup");
|
|
2117
|
+
this.#o?.onCellMouseUp(o), this.#R = !1;
|
|
1991
2118
|
}
|
|
1992
2119
|
// API consumed by internal utils (rows.ts)
|
|
1993
2120
|
get changedRows() {
|
|
@@ -1997,16 +2124,37 @@ class I extends HTMLElement {
|
|
|
1997
2124
|
return Array.from(this._changedRowIndices);
|
|
1998
2125
|
}
|
|
1999
2126
|
async resetChangedRows(e) {
|
|
2000
|
-
this._changedRowIndices.clear(), e || this.#
|
|
2127
|
+
this._changedRowIndices.clear(), e || this.#i("changed-rows-reset", { rows: this.changedRows, indices: this.changedRowIndices }), this.rowPool.forEach((o) => o.classList.remove("changed"));
|
|
2001
2128
|
}
|
|
2002
2129
|
async beginBulkEdit(e) {
|
|
2003
|
-
this
|
|
2130
|
+
if (!this._columns.some((i) => i.editable)) return;
|
|
2131
|
+
const n = this._rows[e];
|
|
2132
|
+
this.#se(e, n);
|
|
2133
|
+
const s = this.findRenderedRowElement?.(e);
|
|
2134
|
+
s && (Array.from(s.children).forEach((i, r) => {
|
|
2135
|
+
const l = this.visibleColumns[r];
|
|
2136
|
+
if (l?.editable) {
|
|
2137
|
+
const a = i;
|
|
2138
|
+
a.classList.contains("editing") || M(this, n, e, l, a);
|
|
2139
|
+
}
|
|
2140
|
+
}), queueMicrotask(() => {
|
|
2141
|
+
const i = s.querySelector(`.cell[data-col="${this.focusCol}"]`);
|
|
2142
|
+
if (i?.classList.contains("editing")) {
|
|
2143
|
+
const r = i.querySelector(
|
|
2144
|
+
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
2145
|
+
);
|
|
2146
|
+
try {
|
|
2147
|
+
r?.focus();
|
|
2148
|
+
} catch {
|
|
2149
|
+
}
|
|
2150
|
+
}
|
|
2151
|
+
}));
|
|
2004
2152
|
}
|
|
2005
2153
|
async commitActiveRowEdit() {
|
|
2006
|
-
this.activeEditRows !== -1 && this.#
|
|
2154
|
+
this.activeEditRows !== -1 && this.#z(this.activeEditRows, !1);
|
|
2007
2155
|
}
|
|
2008
2156
|
async ready() {
|
|
2009
|
-
return this.#
|
|
2157
|
+
return this.#I;
|
|
2010
2158
|
}
|
|
2011
2159
|
async forceLayout() {
|
|
2012
2160
|
this.#d(), await new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(e)));
|
|
@@ -2022,15 +2170,15 @@ class I extends HTMLElement {
|
|
|
2022
2170
|
* @param visible - Whether the column should be visible
|
|
2023
2171
|
* @returns True if visibility was changed, false if column not found or locked
|
|
2024
2172
|
*/
|
|
2025
|
-
setColumnVisible(e,
|
|
2026
|
-
const n = this.#n.columns,
|
|
2027
|
-
if (!
|
|
2173
|
+
setColumnVisible(e, o) {
|
|
2174
|
+
const n = this.#n.columns, s = n?.find((l) => l.field === e);
|
|
2175
|
+
if (!s || !o && s.lockVisible || !o && (n ?? []).filter((a) => !a.hidden && a.field !== e).length === 0)
|
|
2028
2176
|
return !1;
|
|
2029
|
-
const
|
|
2030
|
-
return
|
|
2177
|
+
const i = !!s.hidden, r = !o;
|
|
2178
|
+
return i !== r ? (s.hidden = r, this.#i("column-visibility", {
|
|
2031
2179
|
field: e,
|
|
2032
|
-
visible:
|
|
2033
|
-
visibleColumns: (n ?? []).filter((
|
|
2180
|
+
visible: o,
|
|
2181
|
+
visibleColumns: (n ?? []).filter((l) => !l.hidden).map((l) => l.field)
|
|
2034
2182
|
}), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#d(), this.requestStateChange(), !0) : !1;
|
|
2035
2183
|
}
|
|
2036
2184
|
/**
|
|
@@ -2039,8 +2187,8 @@ class I extends HTMLElement {
|
|
|
2039
2187
|
* @returns True if visibility was toggled, false if column not found or locked
|
|
2040
2188
|
*/
|
|
2041
2189
|
toggleColumnVisibility(e) {
|
|
2042
|
-
const
|
|
2043
|
-
return this.setColumnVisible(e,
|
|
2190
|
+
const s = !!this.#n.columns?.find((i) => i.field === e)?.hidden;
|
|
2191
|
+
return this.setColumnVisible(e, s);
|
|
2044
2192
|
}
|
|
2045
2193
|
/**
|
|
2046
2194
|
* Check if a column is currently visible.
|
|
@@ -2048,7 +2196,7 @@ class I extends HTMLElement {
|
|
|
2048
2196
|
* @returns True if visible, false if hidden or not found
|
|
2049
2197
|
*/
|
|
2050
2198
|
isColumnVisible(e) {
|
|
2051
|
-
const n = this.#n.columns?.find((
|
|
2199
|
+
const n = this.#n.columns?.find((s) => s.field === e);
|
|
2052
2200
|
return n ? !n.hidden : !1;
|
|
2053
2201
|
}
|
|
2054
2202
|
/**
|
|
@@ -2058,7 +2206,7 @@ class I extends HTMLElement {
|
|
|
2058
2206
|
const e = this.#n.columns;
|
|
2059
2207
|
e?.some((n) => n.hidden) && (e?.forEach((n) => {
|
|
2060
2208
|
n.hidden = !1;
|
|
2061
|
-
}), this.#
|
|
2209
|
+
}), this.#i("column-visibility", {
|
|
2062
2210
|
visibleColumns: (e ?? []).map((n) => n.field)
|
|
2063
2211
|
}), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#d(), this.requestStateChange());
|
|
2064
2212
|
}
|
|
@@ -2069,11 +2217,11 @@ class I extends HTMLElement {
|
|
|
2069
2217
|
* @returns Array of all field names with their visibility status
|
|
2070
2218
|
*/
|
|
2071
2219
|
getAllColumns() {
|
|
2072
|
-
return (this.#n.columns ?? []).map((
|
|
2073
|
-
field:
|
|
2074
|
-
header:
|
|
2075
|
-
visible: !
|
|
2076
|
-
lockVisible:
|
|
2220
|
+
return (this.#n.columns ?? []).map((o) => ({
|
|
2221
|
+
field: o.field,
|
|
2222
|
+
header: o.header || o.field,
|
|
2223
|
+
visible: !o.hidden,
|
|
2224
|
+
lockVisible: o.lockVisible
|
|
2077
2225
|
}));
|
|
2078
2226
|
}
|
|
2079
2227
|
/**
|
|
@@ -2083,14 +2231,14 @@ class I extends HTMLElement {
|
|
|
2083
2231
|
*/
|
|
2084
2232
|
setColumnOrder(e) {
|
|
2085
2233
|
if (!e.length) return;
|
|
2086
|
-
const
|
|
2087
|
-
for (const
|
|
2088
|
-
const
|
|
2089
|
-
|
|
2234
|
+
const o = new Map(this._columns.map((s) => [s.field, s])), n = [];
|
|
2235
|
+
for (const s of e) {
|
|
2236
|
+
const i = o.get(s);
|
|
2237
|
+
i && (n.push(i), o.delete(s));
|
|
2090
2238
|
}
|
|
2091
|
-
for (const
|
|
2092
|
-
n.push(
|
|
2093
|
-
this._columns = n, this.#
|
|
2239
|
+
for (const s of o.values())
|
|
2240
|
+
n.push(s);
|
|
2241
|
+
this._columns = n, this.#L(), this.updateTemplate(), this.refreshVirtualWindow(!0);
|
|
2094
2242
|
}
|
|
2095
2243
|
/**
|
|
2096
2244
|
* Get the current column order as an array of field names.
|
|
@@ -2105,15 +2253,15 @@ class I extends HTMLElement {
|
|
|
2105
2253
|
* Returns a serializable object suitable for localStorage or database storage.
|
|
2106
2254
|
*/
|
|
2107
2255
|
getColumnState() {
|
|
2108
|
-
const e = this.#
|
|
2109
|
-
return
|
|
2256
|
+
const e = this.#o?.getAll() ?? [];
|
|
2257
|
+
return pe(this, e);
|
|
2110
2258
|
}
|
|
2111
2259
|
/**
|
|
2112
2260
|
* Set the column state, restoring order, width, visibility, sort, and plugin state.
|
|
2113
2261
|
* Use this to restore previously saved column state.
|
|
2114
2262
|
*/
|
|
2115
2263
|
set columnState(e) {
|
|
2116
|
-
e && (this.#h = e, this.#
|
|
2264
|
+
e && (this.#h = e, this.#s && this.#de(e));
|
|
2117
2265
|
}
|
|
2118
2266
|
/**
|
|
2119
2267
|
* Get the current column state.
|
|
@@ -2124,10 +2272,10 @@ class I extends HTMLElement {
|
|
|
2124
2272
|
/**
|
|
2125
2273
|
* Apply column state internally.
|
|
2126
2274
|
*/
|
|
2127
|
-
#
|
|
2275
|
+
#de(e) {
|
|
2128
2276
|
(this.#n.columns ?? []).forEach((n) => {
|
|
2129
2277
|
n.hidden = !1;
|
|
2130
|
-
}), this.#
|
|
2278
|
+
}), this.#G(e), this.#d();
|
|
2131
2279
|
}
|
|
2132
2280
|
/**
|
|
2133
2281
|
* Request a state change event to be emitted.
|
|
@@ -2136,11 +2284,11 @@ class I extends HTMLElement {
|
|
|
2136
2284
|
* The event is debounced to avoid excessive events during drag operations.
|
|
2137
2285
|
*/
|
|
2138
2286
|
requestStateChange() {
|
|
2139
|
-
this.#
|
|
2287
|
+
this.#M || (this.#M = _e(
|
|
2140
2288
|
this,
|
|
2141
|
-
() => this.#
|
|
2142
|
-
(e) => this.#
|
|
2143
|
-
)), this.#
|
|
2289
|
+
() => this.#o?.getAll() ?? [],
|
|
2290
|
+
(e) => this.#i("column-state-change", e)
|
|
2291
|
+
)), this.#M();
|
|
2144
2292
|
}
|
|
2145
2293
|
/**
|
|
2146
2294
|
* Reset column state to initial configuration.
|
|
@@ -2150,48 +2298,120 @@ class I extends HTMLElement {
|
|
|
2150
2298
|
this.#h = void 0, (this.#n.columns ?? []).forEach((n) => {
|
|
2151
2299
|
n.hidden = !1;
|
|
2152
2300
|
}), this.sortState = null, this.__originalOrder = [], this.#u(), this.#d();
|
|
2153
|
-
const
|
|
2154
|
-
for (const n of
|
|
2301
|
+
const o = this.#o?.getAll() ?? [];
|
|
2302
|
+
for (const n of o)
|
|
2155
2303
|
if (n.applyColumnState)
|
|
2156
|
-
for (const
|
|
2157
|
-
n.applyColumnState(
|
|
2158
|
-
field:
|
|
2304
|
+
for (const s of this._columns)
|
|
2305
|
+
n.applyColumnState(s.field, {
|
|
2306
|
+
field: s.field,
|
|
2159
2307
|
order: 0,
|
|
2160
2308
|
visible: !0
|
|
2161
2309
|
});
|
|
2162
2310
|
this.requestStateChange();
|
|
2163
2311
|
}
|
|
2164
2312
|
// ---------------- Shell / Tool Panel API ----------------
|
|
2313
|
+
/**
|
|
2314
|
+
* Check if the tool panel is currently open.
|
|
2315
|
+
*/
|
|
2316
|
+
get isToolPanelOpen() {
|
|
2317
|
+
return this.#e.isPanelOpen;
|
|
2318
|
+
}
|
|
2165
2319
|
/**
|
|
2166
2320
|
* Get the currently active tool panel ID, or null if none is open.
|
|
2321
|
+
* @deprecated Use isToolPanelOpen and expandedToolPanelSections instead.
|
|
2167
2322
|
*/
|
|
2168
2323
|
get activeToolPanel() {
|
|
2169
2324
|
return this.#e.activePanel;
|
|
2170
2325
|
}
|
|
2171
2326
|
/**
|
|
2172
|
-
*
|
|
2173
|
-
* Closes any currently open panel first.
|
|
2327
|
+
* Get the IDs of expanded accordion sections.
|
|
2174
2328
|
*/
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2329
|
+
get expandedToolPanelSections() {
|
|
2330
|
+
return [...this.#e.expandedSections];
|
|
2331
|
+
}
|
|
2332
|
+
/**
|
|
2333
|
+
* Open the tool panel (accordion view with all registered panels).
|
|
2334
|
+
*/
|
|
2335
|
+
openToolPanel() {
|
|
2336
|
+
if (this.#e.isPanelOpen) return;
|
|
2337
|
+
if (this.#e.isPanelOpen = !0, this.#e.expandedSections.size === 0 && this.#e.toolPanels.size > 0) {
|
|
2338
|
+
const n = [...this.#e.toolPanels.values()].sort(
|
|
2339
|
+
(s, i) => (s.order ?? 100) - (i.order ?? 100)
|
|
2340
|
+
)[0];
|
|
2341
|
+
n && this.#e.expandedSections.add(n.id);
|
|
2179
2342
|
}
|
|
2180
|
-
|
|
2343
|
+
ae(this.#t, this.#e), ce(this.#t, this.#e);
|
|
2344
|
+
const e = {
|
|
2345
|
+
expand: this.#n?.icons?.expand ?? P.expand,
|
|
2346
|
+
collapse: this.#n?.icons?.collapse ?? P.collapse
|
|
2347
|
+
};
|
|
2348
|
+
et(this.#t, this.#e, e), this.#i("tool-panel-open", { sections: this.expandedToolPanelSections });
|
|
2181
2349
|
}
|
|
2182
2350
|
/**
|
|
2183
|
-
* Close the
|
|
2351
|
+
* Close the tool panel.
|
|
2184
2352
|
*/
|
|
2185
2353
|
closeToolPanel() {
|
|
2186
|
-
if (
|
|
2187
|
-
|
|
2188
|
-
|
|
2354
|
+
if (this.#e.isPanelOpen) {
|
|
2355
|
+
for (const e of this.#e.panelCleanups.values())
|
|
2356
|
+
e();
|
|
2357
|
+
this.#e.panelCleanups.clear(), this.#e.activePanelCleanup && (this.#e.activePanelCleanup(), this.#e.activePanelCleanup = null);
|
|
2358
|
+
for (const e of this.#e.toolPanels.values())
|
|
2359
|
+
e.onClose?.();
|
|
2360
|
+
this.#e.isPanelOpen = !1, ae(this.#t, this.#e), ce(this.#t, this.#e), this.#i("tool-panel-close", {});
|
|
2361
|
+
}
|
|
2189
2362
|
}
|
|
2190
2363
|
/**
|
|
2191
|
-
* Toggle
|
|
2364
|
+
* Toggle the tool panel open/closed.
|
|
2192
2365
|
*/
|
|
2193
|
-
toggleToolPanel(
|
|
2194
|
-
this.#e.
|
|
2366
|
+
toggleToolPanel() {
|
|
2367
|
+
this.#e.isPanelOpen ? this.closeToolPanel() : this.openToolPanel();
|
|
2368
|
+
}
|
|
2369
|
+
/**
|
|
2370
|
+
* Toggle an accordion section expanded/collapsed.
|
|
2371
|
+
* Only one section can be expanded at a time (exclusive accordion).
|
|
2372
|
+
* When there's only one panel, toggling is disabled (always expanded).
|
|
2373
|
+
*/
|
|
2374
|
+
toggleToolPanelSection(e) {
|
|
2375
|
+
const o = this.#e.toolPanels.get(e);
|
|
2376
|
+
if (!o) {
|
|
2377
|
+
console.warn(`[tbw-grid] Tool panel section "${e}" not found`);
|
|
2378
|
+
return;
|
|
2379
|
+
}
|
|
2380
|
+
if (this.#e.toolPanels.size === 1)
|
|
2381
|
+
return;
|
|
2382
|
+
const n = this.#e.expandedSections.has(e);
|
|
2383
|
+
if (n) {
|
|
2384
|
+
const s = this.#e.panelCleanups.get(e);
|
|
2385
|
+
s && (s(), this.#e.panelCleanups.delete(e)), o.onClose?.(), this.#e.expandedSections.delete(e), this.#q(e, !1);
|
|
2386
|
+
} else {
|
|
2387
|
+
for (const [s, i] of this.#e.toolPanels)
|
|
2388
|
+
if (s !== e && this.#e.expandedSections.has(s)) {
|
|
2389
|
+
const r = this.#e.panelCleanups.get(s);
|
|
2390
|
+
r && (r(), this.#e.panelCleanups.delete(s)), i.onClose?.(), this.#e.expandedSections.delete(s), this.#q(s, !1);
|
|
2391
|
+
const l = this.#t.querySelector(`[data-section="${s}"] .tbw-accordion-content`);
|
|
2392
|
+
l && (l.innerHTML = "");
|
|
2393
|
+
}
|
|
2394
|
+
this.#e.expandedSections.add(e), this.#q(e, !0), this.#he(e);
|
|
2395
|
+
}
|
|
2396
|
+
this.#i("tool-panel-section-toggle", { id: e, expanded: !n });
|
|
2397
|
+
}
|
|
2398
|
+
/**
|
|
2399
|
+
* Update accordion section visual state.
|
|
2400
|
+
*/
|
|
2401
|
+
#q(e, o) {
|
|
2402
|
+
const n = this.#t.querySelector(`[data-section="${e}"]`);
|
|
2403
|
+
n && n.classList.toggle("expanded", o);
|
|
2404
|
+
}
|
|
2405
|
+
/**
|
|
2406
|
+
* Render content for a single accordion section.
|
|
2407
|
+
*/
|
|
2408
|
+
#he(e) {
|
|
2409
|
+
const o = this.#e.toolPanels.get(e);
|
|
2410
|
+
if (!o?.render) return;
|
|
2411
|
+
const n = this.#t.querySelector(`[data-section="${e}"] .tbw-accordion-content`);
|
|
2412
|
+
if (!n) return;
|
|
2413
|
+
const s = o.render(n);
|
|
2414
|
+
s && this.#e.panelCleanups.set(e, s);
|
|
2195
2415
|
}
|
|
2196
2416
|
/**
|
|
2197
2417
|
* Get registered tool panel definitions.
|
|
@@ -2229,20 +2449,20 @@ class I extends HTMLElement {
|
|
|
2229
2449
|
console.warn(`[tbw-grid] Header content "${e.id}" already registered`);
|
|
2230
2450
|
return;
|
|
2231
2451
|
}
|
|
2232
|
-
this.#e.headerContents.set(e.id, e), this.#c &&
|
|
2452
|
+
this.#e.headerContents.set(e.id, e), this.#c && le(this.#t, this.#e);
|
|
2233
2453
|
}
|
|
2234
2454
|
/**
|
|
2235
2455
|
* Unregister custom header content.
|
|
2236
2456
|
*/
|
|
2237
2457
|
unregisterHeaderContent(e) {
|
|
2238
|
-
const
|
|
2239
|
-
|
|
2458
|
+
const o = this.#e.headerContentCleanups.get(e);
|
|
2459
|
+
o && (o(), this.#e.headerContentCleanups.delete(e)), this.#e.headerContents.get(e)?.onDestroy?.(), this.#e.headerContents.delete(e), this.#t.querySelector(`[data-header-content="${e}"]`)?.remove();
|
|
2240
2460
|
}
|
|
2241
2461
|
/**
|
|
2242
2462
|
* Get all registered toolbar buttons.
|
|
2243
2463
|
*/
|
|
2244
2464
|
getToolbarButtons() {
|
|
2245
|
-
return
|
|
2465
|
+
return tt(this.#n?.shell, this.#e);
|
|
2246
2466
|
}
|
|
2247
2467
|
/**
|
|
2248
2468
|
* Register a custom toolbar button programmatically.
|
|
@@ -2258,17 +2478,17 @@ class I extends HTMLElement {
|
|
|
2258
2478
|
* Unregister a custom toolbar button.
|
|
2259
2479
|
*/
|
|
2260
2480
|
unregisterToolbarButton(e) {
|
|
2261
|
-
const
|
|
2262
|
-
|
|
2481
|
+
const o = this.#e.toolbarButtonCleanups.get(e);
|
|
2482
|
+
o && (o(), this.#e.toolbarButtonCleanups.delete(e)), this.#e.toolbarButtons.delete(e), this.#c && this.#m();
|
|
2263
2483
|
}
|
|
2264
2484
|
/**
|
|
2265
2485
|
* Enable/disable a toolbar button by ID.
|
|
2266
2486
|
*/
|
|
2267
|
-
setToolbarButtonDisabled(e,
|
|
2487
|
+
setToolbarButtonDisabled(e, o) {
|
|
2268
2488
|
const n = this.#e.toolbarButtons.get(e);
|
|
2269
|
-
n && (n.disabled =
|
|
2270
|
-
const
|
|
2271
|
-
|
|
2489
|
+
n && (n.disabled = o);
|
|
2490
|
+
const s = this.#t.querySelector(`[data-btn="${e}"]`);
|
|
2491
|
+
s && (s.disabled = o);
|
|
2272
2492
|
}
|
|
2273
2493
|
/**
|
|
2274
2494
|
* Re-parse light DOM shell elements and refresh shell header.
|
|
@@ -2281,7 +2501,7 @@ class I extends HTMLElement {
|
|
|
2281
2501
|
* Internal shell header refresh.
|
|
2282
2502
|
*/
|
|
2283
2503
|
#m() {
|
|
2284
|
-
|
|
2504
|
+
re(this, this.#e), this.#U(), this.#F();
|
|
2285
2505
|
}
|
|
2286
2506
|
// ---------------- Virtual Window ----------------
|
|
2287
2507
|
/**
|
|
@@ -2290,41 +2510,45 @@ class I extends HTMLElement {
|
|
|
2290
2510
|
*/
|
|
2291
2511
|
refreshVirtualWindow(e = !1) {
|
|
2292
2512
|
if (!this.bodyEl) return;
|
|
2293
|
-
const
|
|
2513
|
+
const o = this._rows.length;
|
|
2294
2514
|
if (!this.virtualization.enabled) {
|
|
2295
|
-
this.#H(0,
|
|
2515
|
+
this.#H(0, o), this.#b();
|
|
2296
2516
|
return;
|
|
2297
2517
|
}
|
|
2298
|
-
if (this.#
|
|
2299
|
-
this.virtualization.start = 0, this.virtualization.end =
|
|
2518
|
+
if (this.#ie()) {
|
|
2519
|
+
this.virtualization.start = 0, this.virtualization.end = o, this.bodyEl.style.transform = "translateY(0px)", this.#H(0, o, this.__rowRenderEpoch), this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${o * this.virtualization.rowHeight}px`);
|
|
2520
|
+
const _ = this.#t.querySelector(".rows-body");
|
|
2521
|
+
_?.setAttribute("aria-rowcount", String(o)), _?.setAttribute("aria-colcount", String(this.visibleColumns.length)), this.#b();
|
|
2300
2522
|
return;
|
|
2301
2523
|
}
|
|
2302
|
-
const n = this.virtualization.container ?? this,
|
|
2303
|
-
let
|
|
2304
|
-
const
|
|
2305
|
-
for (;
|
|
2306
|
-
const
|
|
2307
|
-
if (
|
|
2308
|
-
|
|
2309
|
-
}
|
|
2310
|
-
|
|
2311
|
-
const
|
|
2312
|
-
|
|
2313
|
-
const
|
|
2314
|
-
let c =
|
|
2315
|
-
c >
|
|
2316
|
-
const
|
|
2317
|
-
this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${
|
|
2318
|
-
const
|
|
2319
|
-
this.bodyEl.style.transform = `translateY(${
|
|
2524
|
+
const n = this.virtualization.container ?? this, i = (this.virtualization.viewportEl ?? n).clientHeight, r = this.virtualization.rowHeight, l = n.scrollTop;
|
|
2525
|
+
let a = Math.floor(l / r), d = 0;
|
|
2526
|
+
const h = 10;
|
|
2527
|
+
for (; d < h; ) {
|
|
2528
|
+
const _ = this.#o?.getExtraHeightBefore?.(a) ?? 0, T = Math.floor((l - _) / r);
|
|
2529
|
+
if (T >= a || T < 0) break;
|
|
2530
|
+
a = T, d++;
|
|
2531
|
+
}
|
|
2532
|
+
a = a - a % 2, a < 0 && (a = 0);
|
|
2533
|
+
const p = this.#o?.adjustVirtualStart(a, l, r);
|
|
2534
|
+
p !== void 0 && p < a && (a = p, a = a - a % 2, a < 0 && (a = 0));
|
|
2535
|
+
const w = Math.ceil(i / r) + 3;
|
|
2536
|
+
let c = a + w;
|
|
2537
|
+
c > o && (c = o), this.virtualization.start = a, this.virtualization.end = c;
|
|
2538
|
+
const f = this.#t.querySelector(".tbw-footer")?.offsetHeight ?? 0, g = this.#o?.getExtraHeight() ?? 0;
|
|
2539
|
+
this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${o * r + r + f + g}px`);
|
|
2540
|
+
const b = this.#o?.getExtraHeightBefore?.(a) ?? 0, x = -(l - a * r - b);
|
|
2541
|
+
this.bodyEl.style.transform = `translateY(${x}px)`, this.#H(a, c, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch);
|
|
2542
|
+
const A = this.#t.querySelector(".rows-body");
|
|
2543
|
+
A?.setAttribute("aria-rowcount", String(o)), A?.setAttribute("aria-colcount", String(this.visibleColumns.length)), e && this.#b();
|
|
2320
2544
|
}
|
|
2321
2545
|
// ---------------- Render ----------------
|
|
2322
|
-
#
|
|
2323
|
-
|
|
2324
|
-
const e = this.#n?.shell,
|
|
2546
|
+
#U() {
|
|
2547
|
+
re(this, this.#e);
|
|
2548
|
+
const e = this.#n?.shell, o = Xe(e, this.#e), n = `
|
|
2325
2549
|
<div class="tbw-scroll-area">
|
|
2326
2550
|
<div class="rows-body-wrapper">
|
|
2327
|
-
<div class="rows-body">
|
|
2551
|
+
<div class="rows-body" role="grid">
|
|
2328
2552
|
<div class="header">
|
|
2329
2553
|
<div class="header-row" part="header-row"></div>
|
|
2330
2554
|
</div>
|
|
@@ -2340,16 +2564,19 @@ class I extends HTMLElement {
|
|
|
2340
2564
|
<div class="faux-vscroll-spacer"></div>
|
|
2341
2565
|
</div>
|
|
2342
2566
|
`;
|
|
2343
|
-
if (
|
|
2344
|
-
const
|
|
2345
|
-
|
|
2567
|
+
if (o) {
|
|
2568
|
+
const s = this.#n?.icons?.toolPanel ?? P.toolPanel, i = {
|
|
2569
|
+
expand: this.#n?.icons?.expand ?? P.expand,
|
|
2570
|
+
collapse: this.#n?.icons?.collapse ?? P.collapse
|
|
2571
|
+
}, r = je(e, this.#e, s), l = Ye(e, this.#e, n, i);
|
|
2572
|
+
this.#t.innerHTML = `
|
|
2346
2573
|
<div class="tbw-grid-root has-shell">
|
|
2347
|
-
${
|
|
2348
|
-
${
|
|
2574
|
+
${r}
|
|
2575
|
+
${l}
|
|
2349
2576
|
</div>
|
|
2350
|
-
`, this.#
|
|
2577
|
+
`, this.#ue(), this.#c = !0;
|
|
2351
2578
|
} else
|
|
2352
|
-
this.#
|
|
2579
|
+
this.#t.innerHTML = `
|
|
2353
2580
|
<div class="tbw-grid-root">
|
|
2354
2581
|
<div class="tbw-grid-content">
|
|
2355
2582
|
${n}
|
|
@@ -2360,28 +2587,30 @@ class I extends HTMLElement {
|
|
|
2360
2587
|
/**
|
|
2361
2588
|
* Set up shell event listeners after render.
|
|
2362
2589
|
*/
|
|
2363
|
-
#
|
|
2364
|
-
|
|
2365
|
-
onPanelToggle: (
|
|
2366
|
-
|
|
2367
|
-
onToolbarButtonClick: (e) => this.#
|
|
2590
|
+
#ue() {
|
|
2591
|
+
Ze(this.#t, this.#n?.shell, this.#e, {
|
|
2592
|
+
onPanelToggle: () => this.toggleToolPanel(),
|
|
2593
|
+
onSectionToggle: (e) => this.toggleToolPanelSection(e),
|
|
2594
|
+
onToolbarButtonClick: (e) => this.#fe(e)
|
|
2595
|
+
}), this.#T?.(), this.#T = Je(this.#t, this.#n?.shell, (e) => {
|
|
2596
|
+
this.style.setProperty("--tbw-tool-panel-width", `${e}px`);
|
|
2368
2597
|
});
|
|
2369
2598
|
}
|
|
2370
2599
|
/**
|
|
2371
2600
|
* Handle toolbar button click (for config buttons with action).
|
|
2372
2601
|
*/
|
|
2373
|
-
#
|
|
2374
|
-
const n = (this.#n?.shell?.header?.toolbarButtons ?? []).find((
|
|
2602
|
+
#fe(e) {
|
|
2603
|
+
const n = (this.#n?.shell?.header?.toolbarButtons ?? []).find((i) => i.id === e);
|
|
2375
2604
|
if (n?.action) {
|
|
2376
2605
|
n.action();
|
|
2377
2606
|
return;
|
|
2378
2607
|
}
|
|
2379
|
-
const
|
|
2380
|
-
|
|
2608
|
+
const s = this.#e.toolbarButtons.get(e);
|
|
2609
|
+
s?.action && s.action();
|
|
2381
2610
|
}
|
|
2382
2611
|
}
|
|
2383
|
-
customElements.get(
|
|
2384
|
-
class
|
|
2612
|
+
customElements.get(V.tagName) || customElements.define(V.tagName, V);
|
|
2613
|
+
class me {
|
|
2385
2614
|
/** Plugin version - override in subclass if needed */
|
|
2386
2615
|
version = "1.0.0";
|
|
2387
2616
|
/** CSS styles to inject into the grid's shadow DOM */
|
|
@@ -2432,8 +2661,8 @@ class fe {
|
|
|
2432
2661
|
/**
|
|
2433
2662
|
* Emit a custom event from the grid.
|
|
2434
2663
|
*/
|
|
2435
|
-
emit(e,
|
|
2436
|
-
this.grid?.dispatchEvent?.(new CustomEvent(e, { detail:
|
|
2664
|
+
emit(e, o) {
|
|
2665
|
+
this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: o, bubbles: !0 }));
|
|
2437
2666
|
}
|
|
2438
2667
|
/**
|
|
2439
2668
|
* Request a re-render of the grid.
|
|
@@ -2506,7 +2735,7 @@ class fe {
|
|
|
2506
2735
|
*/
|
|
2507
2736
|
get gridIcons() {
|
|
2508
2737
|
const e = this.grid?.gridConfig?.icons ?? {};
|
|
2509
|
-
return { ...
|
|
2738
|
+
return { ...P, ...e };
|
|
2510
2739
|
}
|
|
2511
2740
|
/**
|
|
2512
2741
|
* Resolve an icon value to string or HTMLElement.
|
|
@@ -2516,8 +2745,8 @@ class fe {
|
|
|
2516
2745
|
* @param pluginOverride - Optional plugin-level override
|
|
2517
2746
|
* @returns The resolved icon value
|
|
2518
2747
|
*/
|
|
2519
|
-
resolveIcon(e,
|
|
2520
|
-
return
|
|
2748
|
+
resolveIcon(e, o) {
|
|
2749
|
+
return o !== void 0 ? o : this.gridIcons[e];
|
|
2521
2750
|
}
|
|
2522
2751
|
/**
|
|
2523
2752
|
* Set an icon value on an element.
|
|
@@ -2526,8 +2755,8 @@ class fe {
|
|
|
2526
2755
|
* @param element - The element to set the icon on
|
|
2527
2756
|
* @param icon - The icon value (string or HTMLElement)
|
|
2528
2757
|
*/
|
|
2529
|
-
setIcon(e,
|
|
2530
|
-
typeof
|
|
2758
|
+
setIcon(e, o) {
|
|
2759
|
+
typeof o == "string" ? e.innerHTML = o : o instanceof HTMLElement && (e.innerHTML = "", e.appendChild(o.cloneNode(!0)));
|
|
2531
2760
|
}
|
|
2532
2761
|
/**
|
|
2533
2762
|
* Log a warning message.
|
|
@@ -2536,57 +2765,58 @@ class fe {
|
|
|
2536
2765
|
console.warn(`[tbw-grid:${this.name}] ${e}`);
|
|
2537
2766
|
}
|
|
2538
2767
|
}
|
|
2539
|
-
function
|
|
2768
|
+
function W(t) {
|
|
2540
2769
|
return {
|
|
2541
|
-
startRow: Math.min(
|
|
2542
|
-
startCol: Math.min(
|
|
2543
|
-
endRow: Math.max(
|
|
2544
|
-
endCol: Math.max(
|
|
2770
|
+
startRow: Math.min(t.startRow, t.endRow),
|
|
2771
|
+
startCol: Math.min(t.startCol, t.endCol),
|
|
2772
|
+
endRow: Math.max(t.startRow, t.endRow),
|
|
2773
|
+
endCol: Math.max(t.startCol, t.endCol)
|
|
2545
2774
|
};
|
|
2546
2775
|
}
|
|
2547
|
-
function
|
|
2548
|
-
const e =
|
|
2776
|
+
function st(t) {
|
|
2777
|
+
const e = W(t);
|
|
2549
2778
|
return {
|
|
2550
2779
|
from: { row: e.startRow, col: e.startCol },
|
|
2551
2780
|
to: { row: e.endRow, col: e.endCol }
|
|
2552
2781
|
};
|
|
2553
2782
|
}
|
|
2554
|
-
function
|
|
2555
|
-
return
|
|
2783
|
+
function Y(t) {
|
|
2784
|
+
return t.map(st);
|
|
2556
2785
|
}
|
|
2557
|
-
function
|
|
2558
|
-
const n =
|
|
2559
|
-
return
|
|
2786
|
+
function it(t, e, o) {
|
|
2787
|
+
const n = W(o);
|
|
2788
|
+
return t >= n.startRow && t <= n.endRow && e >= n.startCol && e <= n.endCol;
|
|
2560
2789
|
}
|
|
2561
|
-
function
|
|
2562
|
-
return
|
|
2790
|
+
function de(t, e, o) {
|
|
2791
|
+
return o.some((n) => it(t, e, n));
|
|
2563
2792
|
}
|
|
2564
|
-
function
|
|
2565
|
-
const e = [],
|
|
2566
|
-
for (let n =
|
|
2567
|
-
for (let
|
|
2568
|
-
e.push({ row: n, col:
|
|
2793
|
+
function rt(t) {
|
|
2794
|
+
const e = [], o = W(t);
|
|
2795
|
+
for (let n = o.startRow; n <= o.endRow; n++)
|
|
2796
|
+
for (let s = o.startCol; s <= o.endCol; s++)
|
|
2797
|
+
e.push({ row: n, col: s });
|
|
2569
2798
|
return e;
|
|
2570
2799
|
}
|
|
2571
|
-
function
|
|
2800
|
+
function lt(t) {
|
|
2572
2801
|
const e = /* @__PURE__ */ new Map();
|
|
2573
|
-
for (const
|
|
2574
|
-
for (const n of
|
|
2802
|
+
for (const o of t)
|
|
2803
|
+
for (const n of rt(o))
|
|
2575
2804
|
e.set(`${n.row},${n.col}`, n);
|
|
2576
2805
|
return [...e.values()];
|
|
2577
2806
|
}
|
|
2578
|
-
function
|
|
2807
|
+
function G(t, e) {
|
|
2579
2808
|
return {
|
|
2580
|
-
startRow:
|
|
2581
|
-
startCol:
|
|
2809
|
+
startRow: t.row,
|
|
2810
|
+
startCol: t.col,
|
|
2582
2811
|
endRow: e.row,
|
|
2583
2812
|
endCol: e.col
|
|
2584
2813
|
};
|
|
2585
2814
|
}
|
|
2586
|
-
|
|
2587
|
-
|
|
2815
|
+
const at = ':host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}:host([data-selection-mode="row"]) .cell-focus{outline:none}:host .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}:host .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}';
|
|
2816
|
+
function ct(t, e, o) {
|
|
2817
|
+
if (t === "cell" && e.selectedCell)
|
|
2588
2818
|
return {
|
|
2589
|
-
mode:
|
|
2819
|
+
mode: t,
|
|
2590
2820
|
ranges: [
|
|
2591
2821
|
{
|
|
2592
2822
|
from: { row: e.selectedCell.row, col: e.selectedCell.col },
|
|
@@ -2594,16 +2824,16 @@ function nt(o, e, t) {
|
|
|
2594
2824
|
}
|
|
2595
2825
|
]
|
|
2596
2826
|
};
|
|
2597
|
-
if (
|
|
2598
|
-
const n = [...e.selected].map((
|
|
2599
|
-
from: { row:
|
|
2600
|
-
to: { row:
|
|
2827
|
+
if (t === "row" && e.selected.size > 0) {
|
|
2828
|
+
const n = [...e.selected].map((s) => ({
|
|
2829
|
+
from: { row: s, col: 0 },
|
|
2830
|
+
to: { row: s, col: o - 1 }
|
|
2601
2831
|
}));
|
|
2602
|
-
return { mode:
|
|
2832
|
+
return { mode: t, ranges: n };
|
|
2603
2833
|
}
|
|
2604
|
-
return
|
|
2834
|
+
return t === "range" && e.ranges.length > 0 ? { mode: t, ranges: Y(e.ranges) } : { mode: t, ranges: [] };
|
|
2605
2835
|
}
|
|
2606
|
-
class
|
|
2836
|
+
class wt extends me {
|
|
2607
2837
|
name = "selection";
|
|
2608
2838
|
version = "1.0.0";
|
|
2609
2839
|
get defaultConfig() {
|
|
@@ -2629,51 +2859,74 @@ class lt extends fe {
|
|
|
2629
2859
|
}
|
|
2630
2860
|
// ===== Event Handlers =====
|
|
2631
2861
|
onCellClick(e) {
|
|
2632
|
-
const { rowIndex:
|
|
2633
|
-
if (
|
|
2634
|
-
return this.selectedCell = { row:
|
|
2635
|
-
if (
|
|
2636
|
-
return this.selected.clear(), this.selected.add(
|
|
2637
|
-
if (
|
|
2638
|
-
const r =
|
|
2862
|
+
const { rowIndex: o, colIndex: n, originalEvent: s } = e, { mode: i } = this.config;
|
|
2863
|
+
if (i === "cell")
|
|
2864
|
+
return this.selectedCell = { row: o, col: n }, this.emit("selection-change", this.#s()), this.requestAfterRender(), !1;
|
|
2865
|
+
if (i === "row")
|
|
2866
|
+
return this.selected.clear(), this.selected.add(o), this.lastSelected = o, this.emit("selection-change", this.#s()), this.requestAfterRender(), !1;
|
|
2867
|
+
if (i === "range") {
|
|
2868
|
+
const r = s.shiftKey, l = s.ctrlKey || s.metaKey;
|
|
2639
2869
|
if (r && this.cellAnchor) {
|
|
2640
|
-
const
|
|
2641
|
-
|
|
2642
|
-
} else if (
|
|
2643
|
-
const
|
|
2644
|
-
startRow:
|
|
2870
|
+
const a = G(this.cellAnchor, { row: o, col: n });
|
|
2871
|
+
l ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = a : this.ranges.push(a) : this.ranges = [a], this.activeRange = a;
|
|
2872
|
+
} else if (l) {
|
|
2873
|
+
const a = {
|
|
2874
|
+
startRow: o,
|
|
2645
2875
|
startCol: n,
|
|
2646
|
-
endRow:
|
|
2876
|
+
endRow: o,
|
|
2647
2877
|
endCol: n
|
|
2648
2878
|
};
|
|
2649
|
-
this.ranges.push(
|
|
2879
|
+
this.ranges.push(a), this.activeRange = a, this.cellAnchor = { row: o, col: n };
|
|
2650
2880
|
} else {
|
|
2651
|
-
const
|
|
2652
|
-
startRow:
|
|
2881
|
+
const a = {
|
|
2882
|
+
startRow: o,
|
|
2653
2883
|
startCol: n,
|
|
2654
|
-
endRow:
|
|
2884
|
+
endRow: o,
|
|
2655
2885
|
endCol: n
|
|
2656
2886
|
};
|
|
2657
|
-
this.ranges = [
|
|
2887
|
+
this.ranges = [a], this.activeRange = a, this.cellAnchor = { row: o, col: n };
|
|
2658
2888
|
}
|
|
2659
|
-
return this.emit("selection-change", this.#
|
|
2889
|
+
return this.emit("selection-change", this.#s()), this.requestAfterRender(), !1;
|
|
2660
2890
|
}
|
|
2661
2891
|
return !1;
|
|
2662
2892
|
}
|
|
2663
2893
|
onKeyDown(e) {
|
|
2664
|
-
const { mode:
|
|
2894
|
+
const { mode: o } = this.config, s = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
|
|
2665
2895
|
if (e.key === "Escape")
|
|
2666
|
-
return
|
|
2667
|
-
if (
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2896
|
+
return o === "cell" ? this.selectedCell = null : o === "row" ? (this.selected.clear(), this.anchor = null) : o === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#s()), this.requestAfterRender(), !0;
|
|
2897
|
+
if (o === "cell" && s)
|
|
2898
|
+
return queueMicrotask(() => {
|
|
2899
|
+
const i = this.grid;
|
|
2900
|
+
this.selectedCell = { row: i.focusRow, col: i.focusCol }, this.emit("selection-change", this.#s()), this.requestAfterRender();
|
|
2901
|
+
}), !1;
|
|
2902
|
+
if (o === "row" && (e.key === "ArrowUp" || e.key === "ArrowDown"))
|
|
2903
|
+
return queueMicrotask(() => {
|
|
2904
|
+
const i = this.grid;
|
|
2905
|
+
this.selected.clear(), this.selected.add(i.focusRow), this.lastSelected = i.focusRow, this.emit("selection-change", this.#s()), this.requestAfterRender();
|
|
2906
|
+
}), !1;
|
|
2907
|
+
if (o === "range" && s) {
|
|
2908
|
+
const i = e.shiftKey;
|
|
2909
|
+
return queueMicrotask(() => {
|
|
2910
|
+
const r = this.grid, l = r.focusRow, a = r.focusCol;
|
|
2911
|
+
if (i) {
|
|
2912
|
+
this.cellAnchor || (this.cellAnchor = { row: l, col: a });
|
|
2913
|
+
const d = G(this.cellAnchor, { row: l, col: a });
|
|
2914
|
+
this.ranges = [d], this.activeRange = d;
|
|
2915
|
+
} else
|
|
2916
|
+
this.ranges = [], this.activeRange = null, this.cellAnchor = { row: l, col: a };
|
|
2917
|
+
this.emit("selection-change", this.#s()), this.requestAfterRender();
|
|
2918
|
+
}), !1;
|
|
2919
|
+
}
|
|
2920
|
+
if (o === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
|
|
2921
|
+
const i = this.rows.length, r = this.columns.length;
|
|
2922
|
+
if (i > 0 && r > 0) {
|
|
2923
|
+
const l = {
|
|
2671
2924
|
startRow: 0,
|
|
2672
2925
|
startCol: 0,
|
|
2673
|
-
endRow:
|
|
2674
|
-
endCol:
|
|
2926
|
+
endRow: i - 1,
|
|
2927
|
+
endCol: r - 1
|
|
2675
2928
|
};
|
|
2676
|
-
return this.ranges = [
|
|
2929
|
+
return this.ranges = [l], this.activeRange = l, this.emit("selection-change", this.#s()), this.requestAfterRender(), !0;
|
|
2677
2930
|
}
|
|
2678
2931
|
}
|
|
2679
2932
|
return !1;
|
|
@@ -2682,20 +2935,20 @@ class lt extends fe {
|
|
|
2682
2935
|
if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0 || e.originalEvent.shiftKey && this.cellAnchor)
|
|
2683
2936
|
return;
|
|
2684
2937
|
this.isDragging = !0;
|
|
2685
|
-
const
|
|
2686
|
-
this.cellAnchor = { row:
|
|
2687
|
-
const
|
|
2688
|
-
startRow:
|
|
2938
|
+
const o = e.rowIndex, n = e.colIndex;
|
|
2939
|
+
this.cellAnchor = { row: o, col: n }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
|
|
2940
|
+
const i = {
|
|
2941
|
+
startRow: o,
|
|
2689
2942
|
startCol: n,
|
|
2690
|
-
endRow:
|
|
2943
|
+
endRow: o,
|
|
2691
2944
|
endCol: n
|
|
2692
2945
|
};
|
|
2693
|
-
return this.ranges.push(
|
|
2946
|
+
return this.ranges.push(i), this.activeRange = i, this.emit("selection-change", this.#s()), this.requestAfterRender(), !0;
|
|
2694
2947
|
}
|
|
2695
2948
|
onCellMouseMove(e) {
|
|
2696
2949
|
if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
|
|
2697
|
-
const
|
|
2698
|
-
return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] =
|
|
2950
|
+
const o = G(this.cellAnchor, { row: e.rowIndex, col: e.colIndex });
|
|
2951
|
+
return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = o : this.ranges.push(o), this.activeRange = o, this.emit("selection-change", this.#s()), this.requestAfterRender(), !0;
|
|
2699
2952
|
}
|
|
2700
2953
|
onCellMouseUp(e) {
|
|
2701
2954
|
if (this.config.mode === "range" && this.isDragging)
|
|
@@ -2705,40 +2958,40 @@ class lt extends fe {
|
|
|
2705
2958
|
* Apply selection classes to visible cells/rows.
|
|
2706
2959
|
* Shared by afterRender and onScrollRender.
|
|
2707
2960
|
*/
|
|
2708
|
-
#
|
|
2961
|
+
#t() {
|
|
2709
2962
|
const e = this.shadowRoot;
|
|
2710
2963
|
if (!e) return;
|
|
2711
|
-
const { mode:
|
|
2712
|
-
e.querySelectorAll(".cell").forEach((
|
|
2713
|
-
|
|
2964
|
+
const { mode: o } = this.config;
|
|
2965
|
+
e.querySelectorAll(".cell").forEach((i) => {
|
|
2966
|
+
i.classList.remove("selected", "top", "bottom", "first", "last");
|
|
2714
2967
|
});
|
|
2715
|
-
const
|
|
2716
|
-
if (
|
|
2717
|
-
|
|
2718
|
-
}),
|
|
2719
|
-
const r =
|
|
2720
|
-
|
|
2721
|
-
}),
|
|
2722
|
-
const
|
|
2723
|
-
e.querySelectorAll(".cell[data-row][data-col]").forEach((
|
|
2724
|
-
const
|
|
2725
|
-
|
|
2968
|
+
const s = e.querySelectorAll(".data-grid-row");
|
|
2969
|
+
if (s.forEach((i) => {
|
|
2970
|
+
i.classList.remove("selected", "row-focus");
|
|
2971
|
+
}), o === "row" && (e.querySelectorAll(".cell-focus").forEach((i) => i.classList.remove("cell-focus")), s.forEach((i) => {
|
|
2972
|
+
const r = i.querySelector(".cell[data-row]"), l = parseInt(r?.getAttribute("data-row") ?? "-1", 10);
|
|
2973
|
+
l >= 0 && this.selected.has(l) && i.classList.add("selected", "row-focus");
|
|
2974
|
+
})), o === "range" && this.ranges.length > 0) {
|
|
2975
|
+
const i = this.activeRange ? W(this.activeRange) : null;
|
|
2976
|
+
e.querySelectorAll(".cell[data-row][data-col]").forEach((l) => {
|
|
2977
|
+
const a = parseInt(l.getAttribute("data-row") ?? "-1", 10), d = parseInt(l.getAttribute("data-col") ?? "-1", 10);
|
|
2978
|
+
a >= 0 && d >= 0 && de(a, d, this.ranges) && (l.classList.add("selected"), l.classList.remove("cell-focus"), i && (a === i.startRow && l.classList.add("top"), a === i.endRow && l.classList.add("bottom"), d === i.startCol && l.classList.add("first"), d === i.endCol && l.classList.add("last")));
|
|
2726
2979
|
});
|
|
2727
2980
|
}
|
|
2728
|
-
|
|
2981
|
+
o === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((i) => i.classList.remove("cell-focus"));
|
|
2729
2982
|
}
|
|
2730
2983
|
afterRender() {
|
|
2731
2984
|
const e = this.shadowRoot;
|
|
2732
2985
|
if (!e) return;
|
|
2733
|
-
const
|
|
2734
|
-
this.grid.setAttribute("data-selection-mode", n),
|
|
2986
|
+
const o = e.children[0], { mode: n } = this.config;
|
|
2987
|
+
this.grid.setAttribute("data-selection-mode", n), o && o.classList.toggle("selecting", this.isDragging), this.#t();
|
|
2735
2988
|
}
|
|
2736
2989
|
/**
|
|
2737
2990
|
* Called after scroll-triggered row rendering.
|
|
2738
2991
|
* Reapplies selection classes to recycled DOM elements.
|
|
2739
2992
|
*/
|
|
2740
2993
|
onScrollRender() {
|
|
2741
|
-
this.#
|
|
2994
|
+
this.#t();
|
|
2742
2995
|
}
|
|
2743
2996
|
// ===== Public API =====
|
|
2744
2997
|
/**
|
|
@@ -2757,19 +3010,19 @@ class lt extends fe {
|
|
|
2757
3010
|
* Get all selected cell ranges in public format.
|
|
2758
3011
|
*/
|
|
2759
3012
|
getRanges() {
|
|
2760
|
-
return
|
|
3013
|
+
return Y(this.ranges);
|
|
2761
3014
|
}
|
|
2762
3015
|
/**
|
|
2763
3016
|
* Get all selected cells across all ranges.
|
|
2764
3017
|
*/
|
|
2765
3018
|
getSelectedCells() {
|
|
2766
|
-
return
|
|
3019
|
+
return lt(this.ranges);
|
|
2767
3020
|
}
|
|
2768
3021
|
/**
|
|
2769
3022
|
* Check if a specific cell is in range selection.
|
|
2770
3023
|
*/
|
|
2771
|
-
isCellSelected(e,
|
|
2772
|
-
return
|
|
3024
|
+
isCellSelected(e, o) {
|
|
3025
|
+
return de(e, o, this.ranges);
|
|
2773
3026
|
}
|
|
2774
3027
|
/**
|
|
2775
3028
|
* Clear all selection.
|
|
@@ -2781,19 +3034,19 @@ class lt extends fe {
|
|
|
2781
3034
|
* Set selected ranges programmatically.
|
|
2782
3035
|
*/
|
|
2783
3036
|
setRanges(e) {
|
|
2784
|
-
this.ranges = e.map((
|
|
2785
|
-
startRow:
|
|
2786
|
-
startCol:
|
|
2787
|
-
endRow:
|
|
2788
|
-
endCol:
|
|
3037
|
+
this.ranges = e.map((o) => ({
|
|
3038
|
+
startRow: o.from.row,
|
|
3039
|
+
startCol: o.from.col,
|
|
3040
|
+
endRow: o.to.row,
|
|
3041
|
+
endCol: o.to.col
|
|
2789
3042
|
})), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
|
|
2790
3043
|
mode: this.config.mode,
|
|
2791
|
-
ranges:
|
|
3044
|
+
ranges: Y(this.ranges)
|
|
2792
3045
|
}), this.requestAfterRender();
|
|
2793
3046
|
}
|
|
2794
3047
|
// ===== Private Helpers =====
|
|
2795
|
-
#
|
|
2796
|
-
return
|
|
3048
|
+
#s() {
|
|
3049
|
+
return ct(
|
|
2797
3050
|
this.config.mode,
|
|
2798
3051
|
{
|
|
2799
3052
|
selectedCell: this.selectedCell,
|
|
@@ -2804,127 +3057,95 @@ class lt extends fe {
|
|
|
2804
3057
|
);
|
|
2805
3058
|
}
|
|
2806
3059
|
// ===== Styles =====
|
|
2807
|
-
styles =
|
|
2808
|
-
/* Prevent text selection during range drag */
|
|
2809
|
-
:host .selecting .data-grid-row > .cell {
|
|
2810
|
-
user-select: none;
|
|
2811
|
-
}
|
|
2812
|
-
|
|
2813
|
-
/* Row selection - use accent color for row focus */
|
|
2814
|
-
:host .data-grid-row.row-focus {
|
|
2815
|
-
background-color: var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%));
|
|
2816
|
-
}
|
|
2817
|
-
|
|
2818
|
-
/* Disable cell-focus outline in row mode - row is the focus unit */
|
|
2819
|
-
:host([data-selection-mode="row"]) .cell-focus {
|
|
2820
|
-
outline: none;
|
|
2821
|
-
}
|
|
2822
|
-
|
|
2823
|
-
/* Selection cell styles - for range mode */
|
|
2824
|
-
:host .data-grid-row > .cell.selected {
|
|
2825
|
-
background-color: var(--tbw-range-selection-bg);
|
|
2826
|
-
}
|
|
2827
|
-
:host .data-grid-row > .cell.selected.top {
|
|
2828
|
-
border-top: 2px solid var(--tbw-range-border-color);
|
|
2829
|
-
}
|
|
2830
|
-
:host .data-grid-row > .cell.selected.bottom {
|
|
2831
|
-
border-bottom: 2px solid var(--tbw-range-border-color);
|
|
2832
|
-
}
|
|
2833
|
-
:host .data-grid-row > .cell.selected.first {
|
|
2834
|
-
border-left: 2px solid var(--tbw-range-border-color);
|
|
2835
|
-
}
|
|
2836
|
-
:host .data-grid-row > .cell.selected.last {
|
|
2837
|
-
border-right: 2px solid var(--tbw-range-border-color);
|
|
2838
|
-
}
|
|
2839
|
-
`;
|
|
3060
|
+
styles = at;
|
|
2840
3061
|
}
|
|
2841
|
-
function
|
|
2842
|
-
return
|
|
3062
|
+
function ee(t, e, o) {
|
|
3063
|
+
return t.id !== void 0 ? String(t.id) : o ? `${o}-${e}` : String(e);
|
|
2843
3064
|
}
|
|
2844
|
-
function
|
|
2845
|
-
const
|
|
2846
|
-
for (let
|
|
2847
|
-
const
|
|
3065
|
+
function ve(t, e, o, n = null, s = 0) {
|
|
3066
|
+
const i = e.childrenField ?? "children", r = [];
|
|
3067
|
+
for (let l = 0; l < t.length; l++) {
|
|
3068
|
+
const a = t[l], d = ee(a, l, n), h = a[i], p = Array.isArray(h) && h.length > 0, w = o.has(d);
|
|
2848
3069
|
if (r.push({
|
|
2849
|
-
key:
|
|
2850
|
-
data:
|
|
2851
|
-
depth:
|
|
2852
|
-
hasChildren:
|
|
2853
|
-
isExpanded:
|
|
3070
|
+
key: d,
|
|
3071
|
+
data: a,
|
|
3072
|
+
depth: s,
|
|
3073
|
+
hasChildren: p,
|
|
3074
|
+
isExpanded: w,
|
|
2854
3075
|
parentKey: n
|
|
2855
|
-
}),
|
|
2856
|
-
const c =
|
|
3076
|
+
}), p && w) {
|
|
3077
|
+
const c = ve(h, e, o, d, s + 1);
|
|
2857
3078
|
r.push(...c);
|
|
2858
3079
|
}
|
|
2859
3080
|
}
|
|
2860
3081
|
return r;
|
|
2861
3082
|
}
|
|
2862
|
-
function
|
|
2863
|
-
const
|
|
2864
|
-
return
|
|
3083
|
+
function he(t, e) {
|
|
3084
|
+
const o = new Set(t);
|
|
3085
|
+
return o.has(e) ? o.delete(e) : o.add(e), o;
|
|
2865
3086
|
}
|
|
2866
|
-
function
|
|
2867
|
-
const
|
|
2868
|
-
for (let r = 0; r <
|
|
2869
|
-
const
|
|
2870
|
-
if (Array.isArray(
|
|
2871
|
-
|
|
2872
|
-
const
|
|
2873
|
-
for (const
|
|
3087
|
+
function Z(t, e, o = null, n = 0) {
|
|
3088
|
+
const s = e.childrenField ?? "children", i = /* @__PURE__ */ new Set();
|
|
3089
|
+
for (let r = 0; r < t.length; r++) {
|
|
3090
|
+
const l = t[r], a = ee(l, r, o), d = l[s];
|
|
3091
|
+
if (Array.isArray(d) && d.length > 0) {
|
|
3092
|
+
i.add(a);
|
|
3093
|
+
const h = Z(d, e, a, n + 1);
|
|
3094
|
+
for (const p of h) i.add(p);
|
|
2874
3095
|
}
|
|
2875
3096
|
}
|
|
2876
|
-
return
|
|
3097
|
+
return i;
|
|
2877
3098
|
}
|
|
2878
|
-
function
|
|
3099
|
+
function dt() {
|
|
2879
3100
|
return /* @__PURE__ */ new Set();
|
|
2880
3101
|
}
|
|
2881
|
-
function
|
|
2882
|
-
const
|
|
2883
|
-
for (let r = 0; r <
|
|
2884
|
-
const
|
|
2885
|
-
if (
|
|
2886
|
-
return [
|
|
2887
|
-
const
|
|
2888
|
-
if (Array.isArray(
|
|
2889
|
-
const
|
|
2890
|
-
if (
|
|
2891
|
-
return [
|
|
3102
|
+
function ye(t, e, o, n = null, s = 0) {
|
|
3103
|
+
const i = o.childrenField ?? "children";
|
|
3104
|
+
for (let r = 0; r < t.length; r++) {
|
|
3105
|
+
const l = t[r], a = ee(l, r, n);
|
|
3106
|
+
if (a === e)
|
|
3107
|
+
return [a];
|
|
3108
|
+
const d = l[i];
|
|
3109
|
+
if (Array.isArray(d) && d.length > 0) {
|
|
3110
|
+
const h = ye(d, e, o, a, s + 1);
|
|
3111
|
+
if (h)
|
|
3112
|
+
return [a, ...h];
|
|
2892
3113
|
}
|
|
2893
3114
|
}
|
|
2894
3115
|
return null;
|
|
2895
3116
|
}
|
|
2896
|
-
function
|
|
2897
|
-
const
|
|
2898
|
-
if (!
|
|
2899
|
-
const
|
|
2900
|
-
for (let r = 0; r <
|
|
2901
|
-
|
|
2902
|
-
return
|
|
2903
|
-
}
|
|
2904
|
-
function
|
|
2905
|
-
if (!Array.isArray(
|
|
2906
|
-
for (const
|
|
2907
|
-
if (
|
|
3117
|
+
function ht(t, e, o, n) {
|
|
3118
|
+
const s = ye(t, e, o);
|
|
3119
|
+
if (!s) return n;
|
|
3120
|
+
const i = new Set(n);
|
|
3121
|
+
for (let r = 0; r < s.length - 1; r++)
|
|
3122
|
+
i.add(s[r]);
|
|
3123
|
+
return i;
|
|
3124
|
+
}
|
|
3125
|
+
function ue(t, e = "children") {
|
|
3126
|
+
if (!Array.isArray(t) || t.length === 0) return !1;
|
|
3127
|
+
for (const o of t)
|
|
3128
|
+
if (o && Array.isArray(o[e]) && o[e].length > 0)
|
|
2908
3129
|
return !0;
|
|
2909
3130
|
return !1;
|
|
2910
3131
|
}
|
|
2911
|
-
function
|
|
2912
|
-
if (!Array.isArray(
|
|
3132
|
+
function ut(t) {
|
|
3133
|
+
if (!Array.isArray(t) || t.length === 0) return null;
|
|
2913
3134
|
const e = ["children", "items", "nodes", "subRows", "nested"];
|
|
2914
|
-
for (const
|
|
2915
|
-
if (!(!
|
|
3135
|
+
for (const o of t)
|
|
3136
|
+
if (!(!o || typeof o != "object")) {
|
|
2916
3137
|
for (const n of e)
|
|
2917
|
-
if (Array.isArray(
|
|
3138
|
+
if (Array.isArray(o[n]) && o[n].length > 0)
|
|
2918
3139
|
return n;
|
|
2919
3140
|
}
|
|
2920
3141
|
return null;
|
|
2921
3142
|
}
|
|
2922
|
-
|
|
3143
|
+
const ft = ".tree-toggle{cursor:pointer;user-select:none;transition:transform .2s}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}";
|
|
3144
|
+
class gt extends me {
|
|
2923
3145
|
name = "tree";
|
|
2924
3146
|
version = "1.0.0";
|
|
2925
3147
|
get defaultConfig() {
|
|
2926
3148
|
return {
|
|
2927
|
-
enabled: !0,
|
|
2928
3149
|
childrenField: "children",
|
|
2929
3150
|
autoDetect: !0,
|
|
2930
3151
|
defaultExpanded: !1,
|
|
@@ -2952,15 +3173,15 @@ class at extends fe {
|
|
|
2952
3173
|
*/
|
|
2953
3174
|
detect(e) {
|
|
2954
3175
|
if (!this.config.autoDetect) return !1;
|
|
2955
|
-
const
|
|
2956
|
-
return
|
|
3176
|
+
const o = this.config.childrenField ?? ut(e) ?? "children";
|
|
3177
|
+
return ue(e, o);
|
|
2957
3178
|
}
|
|
2958
3179
|
// ===== Data Processing =====
|
|
2959
3180
|
processRows(e) {
|
|
2960
|
-
const
|
|
2961
|
-
if (!
|
|
3181
|
+
const o = this.config.childrenField ?? "children";
|
|
3182
|
+
if (!ue(e, o))
|
|
2962
3183
|
return this.flattenedRows = [], this.rowKeyMap.clear(), [...e];
|
|
2963
|
-
this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys =
|
|
3184
|
+
this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = Z(e, this.config), this.initialExpansionDone = !0), this.flattenedRows = ve(e, this.config, this.expandedKeys), this.rowKeyMap.clear();
|
|
2964
3185
|
for (const n of this.flattenedRows)
|
|
2965
3186
|
this.rowKeyMap.set(n.key, n);
|
|
2966
3187
|
return this.flattenedRows.map((n) => ({
|
|
@@ -2973,44 +3194,44 @@ class at extends fe {
|
|
|
2973
3194
|
}
|
|
2974
3195
|
processColumns(e) {
|
|
2975
3196
|
if (this.flattenedRows.length === 0) return [...e];
|
|
2976
|
-
const
|
|
2977
|
-
if (
|
|
2978
|
-
const
|
|
3197
|
+
const o = this.config.indentWidth ?? 20, n = this.config.showExpandIcons ?? !0, s = [...e];
|
|
3198
|
+
if (s.length > 0) {
|
|
3199
|
+
const i = { ...s[0] }, r = i.viewRenderer;
|
|
2979
3200
|
if (r?.__treeWrapped)
|
|
2980
|
-
return
|
|
2981
|
-
const
|
|
2982
|
-
const { value:
|
|
2983
|
-
if (
|
|
2984
|
-
const
|
|
2985
|
-
|
|
3201
|
+
return s;
|
|
3202
|
+
const l = (a) => {
|
|
3203
|
+
const { value: d, row: h, column: p } = a, w = h.__treeDepth ?? 0, c = h.__treeHasChildren ?? !1, u = h.__treeExpanded ?? !1, f = document.createElement("span");
|
|
3204
|
+
if (f.style.display = "flex", f.style.alignItems = "center", f.style.paddingLeft = `${w * o}px`, c && n) {
|
|
3205
|
+
const b = document.createElement("span");
|
|
3206
|
+
b.className = "tree-toggle", this.setIcon(b, this.resolveIcon(u ? "collapse" : "expand")), b.style.cursor = "pointer", b.style.marginRight = "4px", b.style.fontSize = "10px", b.setAttribute("data-tree-key", h.__treeKey), f.appendChild(b);
|
|
2986
3207
|
} else if (n) {
|
|
2987
|
-
const
|
|
2988
|
-
|
|
3208
|
+
const b = document.createElement("span");
|
|
3209
|
+
b.style.width = "14px", b.style.display = "inline-block", f.appendChild(b);
|
|
2989
3210
|
}
|
|
2990
|
-
const
|
|
3211
|
+
const g = document.createElement("span");
|
|
2991
3212
|
if (r) {
|
|
2992
|
-
const
|
|
2993
|
-
|
|
3213
|
+
const b = r(a);
|
|
3214
|
+
b instanceof Node ? g.appendChild(b) : g.textContent = String(b ?? d ?? "");
|
|
2994
3215
|
} else
|
|
2995
|
-
|
|
2996
|
-
return
|
|
3216
|
+
g.textContent = String(d ?? "");
|
|
3217
|
+
return f.appendChild(g), f;
|
|
2997
3218
|
};
|
|
2998
|
-
|
|
3219
|
+
l.__treeWrapped = !0, i.viewRenderer = l, s[0] = i;
|
|
2999
3220
|
}
|
|
3000
|
-
return
|
|
3221
|
+
return s;
|
|
3001
3222
|
}
|
|
3002
3223
|
// ===== Event Handlers =====
|
|
3003
3224
|
onCellClick(e) {
|
|
3004
|
-
const
|
|
3005
|
-
if (!
|
|
3006
|
-
const n =
|
|
3225
|
+
const o = e.originalEvent?.target;
|
|
3226
|
+
if (!o?.classList.contains("tree-toggle")) return !1;
|
|
3227
|
+
const n = o.getAttribute("data-tree-key");
|
|
3007
3228
|
if (!n) return !1;
|
|
3008
|
-
const
|
|
3009
|
-
return
|
|
3229
|
+
const s = this.rowKeyMap.get(n);
|
|
3230
|
+
return s ? (this.expandedKeys = he(this.expandedKeys, n), this.emit("tree-expand", {
|
|
3010
3231
|
key: n,
|
|
3011
|
-
row:
|
|
3232
|
+
row: s.data,
|
|
3012
3233
|
expanded: this.expandedKeys.has(n),
|
|
3013
|
-
depth:
|
|
3234
|
+
depth: s.depth
|
|
3014
3235
|
}), this.requestRender(), !0) : !1;
|
|
3015
3236
|
}
|
|
3016
3237
|
// ===== Public API =====
|
|
@@ -3030,19 +3251,19 @@ class at extends fe {
|
|
|
3030
3251
|
* Toggle the expansion state of a node.
|
|
3031
3252
|
*/
|
|
3032
3253
|
toggle(e) {
|
|
3033
|
-
this.expandedKeys =
|
|
3254
|
+
this.expandedKeys = he(this.expandedKeys, e), this.requestRender();
|
|
3034
3255
|
}
|
|
3035
3256
|
/**
|
|
3036
3257
|
* Expand all nodes in the tree.
|
|
3037
3258
|
*/
|
|
3038
3259
|
expandAll() {
|
|
3039
|
-
this.expandedKeys =
|
|
3260
|
+
this.expandedKeys = Z(this.rows, this.config), this.requestRender();
|
|
3040
3261
|
}
|
|
3041
3262
|
/**
|
|
3042
3263
|
* Collapse all nodes in the tree.
|
|
3043
3264
|
*/
|
|
3044
3265
|
collapseAll() {
|
|
3045
|
-
this.expandedKeys =
|
|
3266
|
+
this.expandedKeys = dt(), this.requestRender();
|
|
3046
3267
|
}
|
|
3047
3268
|
/**
|
|
3048
3269
|
* Check if a node is currently expanded.
|
|
@@ -3072,21 +3293,12 @@ class at extends fe {
|
|
|
3072
3293
|
* Expand all ancestors of a node to make it visible.
|
|
3073
3294
|
*/
|
|
3074
3295
|
expandToKey(e) {
|
|
3075
|
-
this.expandedKeys =
|
|
3296
|
+
this.expandedKeys = ht(this.rows, e, this.config, this.expandedKeys), this.requestRender();
|
|
3076
3297
|
}
|
|
3077
3298
|
// ===== Styles =====
|
|
3078
|
-
styles =
|
|
3079
|
-
.tree-toggle {
|
|
3080
|
-
cursor: pointer;
|
|
3081
|
-
user-select: none;
|
|
3082
|
-
transition: transform 0.2s;
|
|
3083
|
-
}
|
|
3084
|
-
.tree-toggle:hover {
|
|
3085
|
-
color: var(--tbw-tree-accent, var(--tbw-color-accent));
|
|
3086
|
-
}
|
|
3087
|
-
`;
|
|
3299
|
+
styles = ft;
|
|
3088
3300
|
}
|
|
3089
|
-
const
|
|
3301
|
+
const S = {
|
|
3090
3302
|
// Root structure
|
|
3091
3303
|
ROOT: "tbw-grid-root",
|
|
3092
3304
|
HEADER: "header",
|
|
@@ -3131,31 +3343,31 @@ const y = {
|
|
|
3131
3343
|
// Selection
|
|
3132
3344
|
RANGE_SELECTION: "range-selection",
|
|
3133
3345
|
SELECTION_OVERLAY: "selection-overlay"
|
|
3134
|
-
},
|
|
3346
|
+
}, B = {
|
|
3135
3347
|
ROW_INDEX: "data-row-index",
|
|
3136
3348
|
COL_INDEX: "data-col-index",
|
|
3137
3349
|
FIELD: "data-field",
|
|
3138
3350
|
GROUP_KEY: "data-group-key",
|
|
3139
3351
|
TREE_LEVEL: "data-tree-level",
|
|
3140
3352
|
STICKY: "data-sticky"
|
|
3141
|
-
},
|
|
3142
|
-
ROOT: `.${
|
|
3143
|
-
HEADER: `.${
|
|
3144
|
-
HEADER_ROW: `.${
|
|
3145
|
-
HEADER_CELL: `.${
|
|
3146
|
-
ROWS_VIEWPORT: `.${
|
|
3147
|
-
ROWS_CONTAINER: `.${
|
|
3148
|
-
DATA_ROW: `.${
|
|
3149
|
-
DATA_CELL: `.${
|
|
3150
|
-
GROUP_ROW: `.${
|
|
3353
|
+
}, bt = {
|
|
3354
|
+
ROOT: `.${S.ROOT}`,
|
|
3355
|
+
HEADER: `.${S.HEADER}`,
|
|
3356
|
+
HEADER_ROW: `.${S.HEADER_ROW}`,
|
|
3357
|
+
HEADER_CELL: `.${S.HEADER_CELL}`,
|
|
3358
|
+
ROWS_VIEWPORT: `.${S.ROWS_VIEWPORT}`,
|
|
3359
|
+
ROWS_CONTAINER: `.${S.ROWS_CONTAINER}`,
|
|
3360
|
+
DATA_ROW: `.${S.DATA_ROW}`,
|
|
3361
|
+
DATA_CELL: `.${S.DATA_CELL}`,
|
|
3362
|
+
GROUP_ROW: `.${S.GROUP_ROW}`,
|
|
3151
3363
|
// By data attribute
|
|
3152
|
-
ROW_BY_INDEX: (
|
|
3153
|
-
CELL_BY_FIELD: (
|
|
3154
|
-
CELL_AT: (
|
|
3364
|
+
ROW_BY_INDEX: (t) => `.${S.DATA_ROW}[${B.ROW_INDEX}="${t}"]`,
|
|
3365
|
+
CELL_BY_FIELD: (t) => `.${S.DATA_CELL}[${B.FIELD}="${t}"]`,
|
|
3366
|
+
CELL_AT: (t, e) => `.${S.DATA_ROW}[${B.ROW_INDEX}="${t}"] .${S.DATA_CELL}[${B.COL_INDEX}="${e}"]`,
|
|
3155
3367
|
// State selectors
|
|
3156
|
-
SELECTED_ROWS: `.${
|
|
3157
|
-
EDITING_CELL: `.${
|
|
3158
|
-
},
|
|
3368
|
+
SELECTED_ROWS: `.${S.DATA_ROW}.${S.SELECTED}`,
|
|
3369
|
+
EDITING_CELL: `.${S.DATA_CELL}.${S.EDITING}`
|
|
3370
|
+
}, mt = {
|
|
3159
3371
|
// Colors
|
|
3160
3372
|
COLOR_BG: "--tbw-color-bg",
|
|
3161
3373
|
COLOR_FG: "--tbw-color-fg",
|
|
@@ -3177,7 +3389,7 @@ const y = {
|
|
|
3177
3389
|
// Borders
|
|
3178
3390
|
BORDER_RADIUS: "--tbw-border-radius",
|
|
3179
3391
|
FOCUS_OUTLINE: "--tbw-focus-outline"
|
|
3180
|
-
},
|
|
3392
|
+
}, vt = {
|
|
3181
3393
|
CELL_COMMIT: "cell-commit",
|
|
3182
3394
|
ROW_COMMIT: "row-commit",
|
|
3183
3395
|
CHANGED_ROWS_RESET: "changed-rows-reset",
|
|
@@ -3188,7 +3400,7 @@ const y = {
|
|
|
3188
3400
|
ACTIVATE_CELL: "activate-cell",
|
|
3189
3401
|
GROUP_TOGGLE: "group-toggle",
|
|
3190
3402
|
COLUMN_STATE_CHANGE: "column-state-change"
|
|
3191
|
-
},
|
|
3403
|
+
}, yt = {
|
|
3192
3404
|
// Selection plugin
|
|
3193
3405
|
SELECTION_CHANGE: "selection-change",
|
|
3194
3406
|
// Tree plugin
|
|
@@ -3219,77 +3431,94 @@ const y = {
|
|
|
3219
3431
|
DETAIL_EXPAND: "detail-expand",
|
|
3220
3432
|
// Grouping rows plugin
|
|
3221
3433
|
GROUP_EXPAND: "group-expand"
|
|
3222
|
-
},
|
|
3223
|
-
sum: (
|
|
3224
|
-
avg: (
|
|
3225
|
-
const
|
|
3226
|
-
return
|
|
3434
|
+
}, U = {
|
|
3435
|
+
sum: (t, e) => t.reduce((o, n) => o + (Number(n[e]) || 0), 0),
|
|
3436
|
+
avg: (t, e) => {
|
|
3437
|
+
const o = t.reduce((n, s) => n + (Number(s[e]) || 0), 0);
|
|
3438
|
+
return t.length ? o / t.length : 0;
|
|
3227
3439
|
},
|
|
3228
|
-
count: (
|
|
3229
|
-
min: (
|
|
3230
|
-
max: (
|
|
3231
|
-
first: (
|
|
3232
|
-
last: (
|
|
3233
|
-
},
|
|
3440
|
+
count: (t) => t.length,
|
|
3441
|
+
min: (t, e) => Math.min(...t.map((o) => Number(o[e]) || 1 / 0)),
|
|
3442
|
+
max: (t, e) => Math.max(...t.map((o) => Number(o[e]) || -1 / 0)),
|
|
3443
|
+
first: (t, e) => t[0]?.[e],
|
|
3444
|
+
last: (t, e) => t[t.length - 1]?.[e]
|
|
3445
|
+
}, z = /* @__PURE__ */ new Map(), D = {
|
|
3234
3446
|
/**
|
|
3235
3447
|
* Register a custom aggregator function.
|
|
3236
3448
|
*/
|
|
3237
|
-
register(
|
|
3238
|
-
|
|
3449
|
+
register(t, e) {
|
|
3450
|
+
z.set(t, e);
|
|
3239
3451
|
},
|
|
3240
3452
|
/**
|
|
3241
3453
|
* Unregister a custom aggregator function.
|
|
3242
3454
|
*/
|
|
3243
|
-
unregister(
|
|
3244
|
-
|
|
3455
|
+
unregister(t) {
|
|
3456
|
+
z.delete(t);
|
|
3245
3457
|
},
|
|
3246
3458
|
/**
|
|
3247
3459
|
* Get an aggregator function by reference.
|
|
3248
3460
|
*/
|
|
3249
|
-
get(
|
|
3250
|
-
if (
|
|
3251
|
-
return typeof
|
|
3461
|
+
get(t) {
|
|
3462
|
+
if (t !== void 0)
|
|
3463
|
+
return typeof t == "function" ? t : z.get(t) ?? U[t];
|
|
3252
3464
|
},
|
|
3253
3465
|
/**
|
|
3254
3466
|
* Run an aggregator on a set of rows.
|
|
3255
3467
|
*/
|
|
3256
|
-
run(
|
|
3257
|
-
const
|
|
3258
|
-
return
|
|
3468
|
+
run(t, e, o, n) {
|
|
3469
|
+
const s = this.get(t);
|
|
3470
|
+
return s ? s(e, o, n) : void 0;
|
|
3259
3471
|
},
|
|
3260
3472
|
/**
|
|
3261
3473
|
* Check if an aggregator exists.
|
|
3262
3474
|
*/
|
|
3263
|
-
has(
|
|
3264
|
-
return
|
|
3475
|
+
has(t) {
|
|
3476
|
+
return z.has(t) || t in U;
|
|
3265
3477
|
},
|
|
3266
3478
|
/**
|
|
3267
3479
|
* List all available aggregator names.
|
|
3268
3480
|
*/
|
|
3269
3481
|
list() {
|
|
3270
|
-
return [...Object.keys(
|
|
3271
|
-
}
|
|
3272
|
-
},
|
|
3482
|
+
return [...Object.keys(U), ...z.keys()];
|
|
3483
|
+
}
|
|
3484
|
+
}, fe = {
|
|
3485
|
+
sum: (t) => t.reduce((e, o) => e + o, 0),
|
|
3486
|
+
avg: (t) => t.length ? t.reduce((e, o) => e + o, 0) / t.length : 0,
|
|
3487
|
+
count: (t) => t.length,
|
|
3488
|
+
min: (t) => t.length ? Math.min(...t) : 0,
|
|
3489
|
+
max: (t) => t.length ? Math.max(...t) : 0,
|
|
3490
|
+
first: (t) => t[0] ?? 0,
|
|
3491
|
+
last: (t) => t[t.length - 1] ?? 0
|
|
3492
|
+
};
|
|
3493
|
+
function pt(t) {
|
|
3494
|
+
return fe[t] ?? fe.sum;
|
|
3495
|
+
}
|
|
3496
|
+
function Ct(t, e) {
|
|
3497
|
+
return pt(t)(e);
|
|
3498
|
+
}
|
|
3499
|
+
const Et = D.register.bind(D), Rt = D.unregister.bind(D), _t = D.get.bind(D), xt = D.run.bind(D), At = D.list.bind(D);
|
|
3273
3500
|
export {
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
3281
|
-
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3501
|
+
me as BaseGridPlugin,
|
|
3502
|
+
P as DEFAULT_GRID_ICONS,
|
|
3503
|
+
vt as DGEvents,
|
|
3504
|
+
V as DataGridElement,
|
|
3505
|
+
q as FitModeEnum,
|
|
3506
|
+
mt as GridCSSVars,
|
|
3507
|
+
S as GridClasses,
|
|
3508
|
+
B as GridDataAttrs,
|
|
3509
|
+
V as GridElement,
|
|
3510
|
+
bt as GridSelectors,
|
|
3511
|
+
yt as PluginEvents,
|
|
3512
|
+
nt as PluginManager,
|
|
3513
|
+
wt as SelectionPlugin,
|
|
3514
|
+
gt as TreePlugin,
|
|
3515
|
+
D as aggregatorRegistry,
|
|
3516
|
+
_t as getAggregator,
|
|
3517
|
+
pt as getValueAggregator,
|
|
3518
|
+
At as listAggregators,
|
|
3519
|
+
Et as registerAggregator,
|
|
3520
|
+
xt as runAggregator,
|
|
3521
|
+
Ct as runValueAggregator,
|
|
3522
|
+
Rt as unregisterAggregator
|
|
3294
3523
|
};
|
|
3295
3524
|
//# sourceMappingURL=index.js.map
|