@toolbox-web/grid 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +96 -59
- package/all.d.ts +328 -225
- package/all.js +522 -525
- package/all.js.map +1 -1
- package/index.d.ts +220 -160
- package/index.js +1197 -1112
- package/index.js.map +1 -1
- package/lib/plugins/clipboard/index.js +11 -5
- package/lib/plugins/clipboard/index.js.map +1 -1
- package/lib/plugins/column-virtualization/index.js +9 -4
- package/lib/plugins/column-virtualization/index.js.map +1 -1
- package/lib/plugins/context-menu/index.js +11 -5
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/export/index.js +7 -3
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/index.js +16 -149
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/index.js +13 -6
- package/lib/plugins/grouping-columns/index.js.map +1 -1
- package/lib/plugins/grouping-rows/index.js +13 -6
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/master-detail/index.js +11 -5
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js +13 -6
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/index.js +102 -53
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-rows/index.js +13 -6
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js +19 -9
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/reorder/index.js +49 -40
- package/lib/plugins/reorder/index.js.map +1 -1
- package/lib/plugins/selection/index.js +13 -6
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/server-side/index.js +11 -5
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/tree/index.js +15 -7
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/undo-redo/index.js +3 -1
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/index.js +13 -6
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +1 -1
- package/umd/grid.all.umd.js +19 -160
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +16 -16
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/clipboard.umd.js.map +1 -1
- package/umd/plugins/column-virtualization.umd.js.map +1 -1
- package/umd/plugins/context-menu.umd.js.map +1 -1
- package/umd/plugins/export.umd.js.map +1 -1
- package/umd/plugins/filtering.umd.js +1 -142
- package/umd/plugins/filtering.umd.js.map +1 -1
- package/umd/plugins/grouping-columns.umd.js.map +1 -1
- package/umd/plugins/grouping-rows.umd.js.map +1 -1
- package/umd/plugins/master-detail.umd.js.map +1 -1
- package/umd/plugins/multi-sort.umd.js.map +1 -1
- package/umd/plugins/pinned-columns.umd.js +1 -1
- package/umd/plugins/pinned-columns.umd.js.map +1 -1
- package/umd/plugins/pinned-rows.umd.js.map +1 -1
- package/umd/plugins/pivot.umd.js.map +1 -1
- package/umd/plugins/reorder.umd.js +1 -1
- package/umd/plugins/reorder.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js.map +1 -1
- package/umd/plugins/server-side.umd.js.map +1 -1
- package/umd/plugins/tree.umd.js.map +1 -1
- package/umd/plugins/undo-redo.umd.js.map +1 -1
- package/umd/plugins/visibility.umd.js.map +1 -1
package/index.js
CHANGED
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
const de = ":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
|
|
1
|
+
const fe = ":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-cell-white-space: nowrap;--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:block;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);line-height:calc(var(--tbw-row-height) - 5px);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0;white-space:var(--tbw-cell-white-space, nowrap);text-overflow:ellipsis}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:inherit;min-width:0}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{text-align:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size);vertical-align:middle}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex}: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 pe(t) {
|
|
3
3
|
const e = /* @__PURE__ */ new Map();
|
|
4
4
|
return t.sortState && e.set(t.sortState.field, {
|
|
5
5
|
direction: t.sortState.direction === 1 ? "asc" : "desc",
|
|
6
6
|
priority: 0
|
|
7
7
|
}), e;
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
const o = t._columns,
|
|
9
|
+
function ce(t, e) {
|
|
10
|
+
const o = t._columns, i = pe(t);
|
|
11
11
|
return {
|
|
12
|
-
columns: o.map((
|
|
12
|
+
columns: o.map((n, s) => {
|
|
13
13
|
const r = {
|
|
14
|
-
field:
|
|
14
|
+
field: n.field,
|
|
15
15
|
order: s,
|
|
16
16
|
visible: !0
|
|
17
17
|
// If it's in _columns, it's visible (hidden columns are filtered out)
|
|
18
|
-
}, l =
|
|
19
|
-
l.__renderedWidth !== void 0 ? r.width = l.__renderedWidth :
|
|
20
|
-
const a =
|
|
18
|
+
}, l = n;
|
|
19
|
+
l.__renderedWidth !== void 0 ? r.width = l.__renderedWidth : n.width !== void 0 && (r.width = typeof n.width == "string" ? parseFloat(n.width) : n.width);
|
|
20
|
+
const a = i.get(n.field);
|
|
21
21
|
a && (r.sort = a);
|
|
22
22
|
for (const d of e)
|
|
23
23
|
if (d.getColumnState) {
|
|
24
|
-
const
|
|
25
|
-
|
|
24
|
+
const f = d.getColumnState(n.field);
|
|
25
|
+
f && Object.assign(r, f);
|
|
26
26
|
}
|
|
27
27
|
return r;
|
|
28
28
|
})
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
|
-
function
|
|
31
|
+
function be(t, e, o, i) {
|
|
32
32
|
if (!e.columns || e.columns.length === 0) return;
|
|
33
|
-
const
|
|
34
|
-
const a =
|
|
33
|
+
const n = new Map(e.columns.map((l) => [l.field, l])), s = o.map((l) => {
|
|
34
|
+
const a = n.get(l.field);
|
|
35
35
|
if (!a) return l;
|
|
36
36
|
const d = { ...l };
|
|
37
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
39
|
s.sort((l, a) => {
|
|
40
|
-
const d =
|
|
41
|
-
return d -
|
|
40
|
+
const d = n.get(l.field)?.order ?? 1 / 0, f = n.get(a.field)?.order ?? 1 / 0;
|
|
41
|
+
return d - f;
|
|
42
42
|
}), t._columns = s;
|
|
43
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) {
|
|
@@ -49,25 +49,25 @@ function he(t, e, o, n) {
|
|
|
49
49
|
});
|
|
50
50
|
} else
|
|
51
51
|
t.sortState = null;
|
|
52
|
-
for (const l of
|
|
52
|
+
for (const l of i)
|
|
53
53
|
if (l.applyColumnState)
|
|
54
54
|
for (const a of e.columns)
|
|
55
55
|
l.applyColumnState(a.field, a);
|
|
56
56
|
}
|
|
57
|
-
function
|
|
58
|
-
let
|
|
57
|
+
function we(t, e, o) {
|
|
58
|
+
let i = null;
|
|
59
59
|
return () => {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
const
|
|
63
|
-
o(
|
|
60
|
+
i !== null && clearTimeout(i), i = setTimeout(() => {
|
|
61
|
+
i = null;
|
|
62
|
+
const n = ce(t, e());
|
|
63
|
+
o(n);
|
|
64
64
|
}, 100);
|
|
65
65
|
};
|
|
66
66
|
}
|
|
67
|
-
const
|
|
67
|
+
const $ = {
|
|
68
68
|
STRETCH: "stretch",
|
|
69
69
|
FIXED: "fixed"
|
|
70
|
-
},
|
|
70
|
+
}, H = {
|
|
71
71
|
expand: "▶",
|
|
72
72
|
collapse: "▼",
|
|
73
73
|
sortAsc: "▲",
|
|
@@ -77,25 +77,25 @@ const q = {
|
|
|
77
77
|
dragHandle: "⋮⋮",
|
|
78
78
|
toolPanel: "☰"
|
|
79
79
|
};
|
|
80
|
-
function
|
|
80
|
+
function ge(t) {
|
|
81
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";
|
|
82
82
|
}
|
|
83
|
-
function
|
|
83
|
+
function de(t, e) {
|
|
84
84
|
if (e && e.length) {
|
|
85
85
|
const s = {};
|
|
86
86
|
return e.forEach((r) => {
|
|
87
87
|
r.type && (s[r.field] = r.type);
|
|
88
88
|
}), { columns: e, typeMap: s };
|
|
89
89
|
}
|
|
90
|
-
const o = t[0] || {},
|
|
91
|
-
const r = o[s], l =
|
|
90
|
+
const o = t[0] || {}, i = Object.keys(o).map((s) => {
|
|
91
|
+
const r = o[s], l = ge(r);
|
|
92
92
|
return { field: s, header: s.charAt(0).toUpperCase() + s.slice(1), type: l };
|
|
93
|
-
}),
|
|
94
|
-
return
|
|
95
|
-
|
|
96
|
-
}), { columns:
|
|
93
|
+
}), n = {};
|
|
94
|
+
return i.forEach((s) => {
|
|
95
|
+
n[s.field] = s.type || "string";
|
|
96
|
+
}), { columns: i, typeMap: n };
|
|
97
97
|
}
|
|
98
|
-
const
|
|
98
|
+
const me = /{{\s*([^}]+)\s*}}/g, L = "__DG_EMPTY__", ve = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, Ee = /__(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/, Ce = /* @__PURE__ */ new Set([
|
|
99
99
|
"script",
|
|
100
100
|
"iframe",
|
|
101
101
|
"object",
|
|
@@ -120,35 +120,35 @@ const be = /{{\s*([^}]+)\s*}}/g, k = "__DG_EMPTY__", we = /^[\w$. '?+\-*/%:()!<>
|
|
|
120
120
|
"plaintext",
|
|
121
121
|
"xmp",
|
|
122
122
|
"listing"
|
|
123
|
-
]),
|
|
124
|
-
function
|
|
123
|
+
]), J = /^on\w+$/i, ye = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), Re = /^\s*(javascript|vbscript|data|blob):/i;
|
|
124
|
+
function F(t) {
|
|
125
125
|
if (!t || typeof t != "string") return "";
|
|
126
126
|
if (t.indexOf("<") === -1) return t;
|
|
127
127
|
const e = document.createElement("template");
|
|
128
|
-
return e.innerHTML = t,
|
|
128
|
+
return e.innerHTML = t, _e(e.content), e.innerHTML;
|
|
129
129
|
}
|
|
130
|
-
function
|
|
130
|
+
function _e(t) {
|
|
131
131
|
const e = [], o = t.querySelectorAll("*");
|
|
132
|
-
for (const
|
|
133
|
-
const
|
|
134
|
-
if (
|
|
135
|
-
e.push(
|
|
132
|
+
for (const i of o) {
|
|
133
|
+
const n = i.tagName.toLowerCase();
|
|
134
|
+
if (Ce.has(n)) {
|
|
135
|
+
e.push(i);
|
|
136
136
|
continue;
|
|
137
137
|
}
|
|
138
|
-
if ((
|
|
139
|
-
(l) =>
|
|
138
|
+
if ((n === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
|
|
139
|
+
(l) => J.test(l.name) || l.name === "href" || l.name === "xlink:href"
|
|
140
140
|
)) {
|
|
141
|
-
e.push(
|
|
141
|
+
e.push(i);
|
|
142
142
|
continue;
|
|
143
143
|
}
|
|
144
144
|
const s = [];
|
|
145
|
-
for (const r of
|
|
145
|
+
for (const r of i.attributes) {
|
|
146
146
|
const l = r.name.toLowerCase();
|
|
147
|
-
if (
|
|
147
|
+
if (J.test(l)) {
|
|
148
148
|
s.push(r.name);
|
|
149
149
|
continue;
|
|
150
150
|
}
|
|
151
|
-
if (
|
|
151
|
+
if (ye.has(l) && Re.test(r.value)) {
|
|
152
152
|
s.push(r.name);
|
|
153
153
|
continue;
|
|
154
154
|
}
|
|
@@ -157,39 +157,39 @@ function Ce(t) {
|
|
|
157
157
|
continue;
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
|
-
s.forEach((r) =>
|
|
160
|
+
s.forEach((r) => i.removeAttribute(r));
|
|
161
161
|
}
|
|
162
|
-
e.forEach((
|
|
162
|
+
e.forEach((i) => i.remove());
|
|
163
163
|
}
|
|
164
|
-
function
|
|
164
|
+
function ue(t, e) {
|
|
165
165
|
if (!t || t.indexOf("{{") === -1) return t;
|
|
166
|
-
const o = [],
|
|
167
|
-
const d =
|
|
166
|
+
const o = [], i = t.replace(me, (l, a) => {
|
|
167
|
+
const d = Se(a, e);
|
|
168
168
|
return o.push({ expr: a.trim(), result: d }), d;
|
|
169
|
-
}),
|
|
170
|
-
return /Reflect\.|\bProxy\b|ownKeys\(/.test(t) || s ? "" :
|
|
169
|
+
}), n = xe(i), s = o.length && o.every((l) => l.result === "" || l.result === L);
|
|
170
|
+
return /Reflect\.|\bProxy\b|ownKeys\(/.test(t) || s ? "" : n;
|
|
171
171
|
}
|
|
172
|
-
function
|
|
173
|
-
if (t = (t || "").trim(), !t || /\b(Reflect|Proxy|ownKeys)\b/.test(t)) return
|
|
174
|
-
if (t === "value") return e.value == null ?
|
|
172
|
+
function Se(t, e) {
|
|
173
|
+
if (t = (t || "").trim(), !t || /\b(Reflect|Proxy|ownKeys)\b/.test(t)) return L;
|
|
174
|
+
if (t === "value") return e.value == null ? L : String(e.value);
|
|
175
175
|
if (t.startsWith("row.") && !/[()?]/.test(t) && !t.includes(":")) {
|
|
176
|
-
const
|
|
177
|
-
return
|
|
176
|
+
const i = t.slice(4), n = e.row ? e.row[i] : void 0;
|
|
177
|
+
return n == null ? L : String(n);
|
|
178
178
|
}
|
|
179
|
-
if (t.length > 80 || !
|
|
179
|
+
if (t.length > 80 || !ve.test(t) || Ee.test(t)) return L;
|
|
180
180
|
const o = t.match(/\./g);
|
|
181
|
-
if (o && o.length > 1) return
|
|
181
|
+
if (o && o.length > 1) return L;
|
|
182
182
|
try {
|
|
183
|
-
const
|
|
184
|
-
return /Reflect|Proxy|ownKeys/.test(s) ?
|
|
183
|
+
const n = new Function("value", "row", `return (${t});`)(e.value, e.row), s = n == null ? "" : String(n);
|
|
184
|
+
return /Reflect|Proxy|ownKeys/.test(s) ? L : s || L;
|
|
185
185
|
} catch {
|
|
186
|
-
return
|
|
186
|
+
return L;
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
|
-
function
|
|
190
|
-
return t && t.replace(new RegExp(
|
|
189
|
+
function xe(t) {
|
|
190
|
+
return t && t.replace(new RegExp(L, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
|
|
191
191
|
}
|
|
192
|
-
function
|
|
192
|
+
function Ae(t) {
|
|
193
193
|
if (/Reflect|Proxy|ownKeys/.test(t.textContent || "")) {
|
|
194
194
|
if (Array.from(t.childNodes).forEach((e) => {
|
|
195
195
|
e.nodeType === Node.TEXT_NODE && /Reflect|Proxy|ownKeys/.test(e.textContent || "") && (e.textContent = "");
|
|
@@ -201,40 +201,40 @@ function Re(t) {
|
|
|
201
201
|
(t.textContent || "").trim().length === 0 && (t.textContent = "");
|
|
202
202
|
}
|
|
203
203
|
}
|
|
204
|
-
function
|
|
205
|
-
const e = /Reflect\.|\bProxy\b|ownKeys\(/.test(t), o = (
|
|
204
|
+
function ee(t) {
|
|
205
|
+
const e = /Reflect\.|\bProxy\b|ownKeys\(/.test(t), o = (i) => e ? "" : ue(t, i);
|
|
206
206
|
return o.__blocked = e, o;
|
|
207
207
|
}
|
|
208
|
-
function
|
|
208
|
+
function Te(t) {
|
|
209
209
|
return Array.from(t.querySelectorAll("tbw-grid-column")).map((o) => {
|
|
210
|
-
const
|
|
211
|
-
if (!
|
|
212
|
-
const
|
|
213
|
-
o.hasAttribute("resizable") && (
|
|
214
|
-
const
|
|
215
|
-
|
|
216
|
-
const [w, v] =
|
|
210
|
+
const i = o.getAttribute("field") || "";
|
|
211
|
+
if (!i) return null;
|
|
212
|
+
const n = o.getAttribute("type") || void 0, r = n && (/* @__PURE__ */ new Set(["number", "string", "date", "boolean", "select", "typeahead"])).has(n) ? n : void 0, l = o.getAttribute("header") || void 0, a = o.hasAttribute("sortable"), d = o.hasAttribute("editable"), f = { field: i, type: r, header: l, sortable: a, editable: d };
|
|
213
|
+
o.hasAttribute("resizable") && (f.resizable = !0), o.hasAttribute("sizable") && (f.resizable = !0);
|
|
214
|
+
const h = o.getAttribute("options");
|
|
215
|
+
h && (f.options = h.split(",").map((b) => {
|
|
216
|
+
const [w, v] = b.includes(":") ? b.split(":") : [b.trim(), b.trim()];
|
|
217
217
|
return { value: w.trim(), label: v?.trim() || w.trim() };
|
|
218
218
|
}));
|
|
219
|
-
const
|
|
220
|
-
return
|
|
219
|
+
const p = o.querySelector("tbw-grid-column-view"), c = o.querySelector("tbw-grid-column-editor"), u = o.querySelector("tbw-grid-column-header");
|
|
220
|
+
return p && (f.__viewTemplate = p), c && (f.__editorTemplate = c), u && (f.__headerTemplate = u), f;
|
|
221
221
|
}).filter((o) => !!o);
|
|
222
222
|
}
|
|
223
|
-
function
|
|
223
|
+
function Le(t, e) {
|
|
224
224
|
if ((!t || !t.length) && (!e || !e.length)) return [];
|
|
225
225
|
if (!t || !t.length) return e || [];
|
|
226
226
|
if (!e || !e.length) return t;
|
|
227
227
|
const o = {};
|
|
228
|
-
e.forEach((
|
|
229
|
-
const
|
|
230
|
-
const s = o[
|
|
231
|
-
if (!s) return
|
|
232
|
-
const r = { ...
|
|
233
|
-
return s.header && !r.header && (r.header = s.header), s.type && !r.type && (r.type = s.type), r.sortable =
|
|
228
|
+
e.forEach((n) => o[n.field] = n);
|
|
229
|
+
const i = t.map((n) => {
|
|
230
|
+
const s = o[n.field];
|
|
231
|
+
if (!s) return n;
|
|
232
|
+
const r = { ...n };
|
|
233
|
+
return s.header && !r.header && (r.header = s.header), s.type && !r.type && (r.type = s.type), r.sortable = n.sortable || s.sortable, (n.resizable === !0 || s.resizable === !0) && (r.resizable = !0), r.editable = n.editable || s.editable, s.__viewTemplate && (r.__viewTemplate = s.__viewTemplate), s.__editorTemplate && (r.__editorTemplate = s.__editorTemplate), s.__headerTemplate && (r.__headerTemplate = s.__headerTemplate), delete o[n.field], r;
|
|
234
234
|
});
|
|
235
|
-
return Object.keys(o).forEach((
|
|
235
|
+
return Object.keys(o).forEach((n) => i.push(o[n])), i;
|
|
236
236
|
}
|
|
237
|
-
function
|
|
237
|
+
function j(t, e) {
|
|
238
238
|
try {
|
|
239
239
|
t.part?.add?.(e);
|
|
240
240
|
} catch {
|
|
@@ -242,51 +242,51 @@ function U(t, e) {
|
|
|
242
242
|
const o = t.getAttribute("part");
|
|
243
243
|
o ? o.split(/\s+/).includes(e) || t.setAttribute("part", o + " " + e) : t.setAttribute("part", e);
|
|
244
244
|
}
|
|
245
|
-
function
|
|
245
|
+
function Pe(t) {
|
|
246
246
|
t.__lightDomColumnsCache || (t.__originalColumnNodes = Array.from(
|
|
247
247
|
t.querySelectorAll("tbw-grid-column")
|
|
248
|
-
), t.__lightDomColumnsCache = t.__originalColumnNodes.length ?
|
|
249
|
-
const e = t.__lightDomColumnsCache, o =
|
|
250
|
-
o.forEach((
|
|
251
|
-
|
|
248
|
+
), t.__lightDomColumnsCache = t.__originalColumnNodes.length ? Te(t) : []);
|
|
249
|
+
const e = t.__lightDomColumnsCache, o = Le(t._columns, e);
|
|
250
|
+
o.forEach((n) => {
|
|
251
|
+
n.__viewTemplate && !n.__compiledView && (n.__compiledView = ee(n.__viewTemplate.innerHTML)), n.__editorTemplate && !n.__compiledEditor && (n.__compiledEditor = ee(n.__editorTemplate.innerHTML));
|
|
252
252
|
});
|
|
253
|
-
const { columns:
|
|
254
|
-
t._columns =
|
|
253
|
+
const { columns: i } = de(t._rows, o);
|
|
254
|
+
t._columns = i;
|
|
255
255
|
}
|
|
256
|
-
function
|
|
257
|
-
const e = t.effectiveConfig?.fitMode || t.fitMode ||
|
|
258
|
-
if (e !==
|
|
256
|
+
function te(t) {
|
|
257
|
+
const e = t.effectiveConfig?.fitMode || t.fitMode || $.STRETCH;
|
|
258
|
+
if (e !== $.STRETCH && e !== $.FIXED || t.__didInitialAutoSize || !t.isConnected) return;
|
|
259
259
|
const o = t.headerRowEl?.children || [];
|
|
260
260
|
if (!o.length) return;
|
|
261
|
-
let
|
|
262
|
-
t.visibleColumns.forEach((
|
|
263
|
-
if (
|
|
261
|
+
let i = !1;
|
|
262
|
+
t.visibleColumns.forEach((n, s) => {
|
|
263
|
+
if (n.width) return;
|
|
264
264
|
const r = o[s];
|
|
265
265
|
let l = r ? r.scrollWidth : 0;
|
|
266
266
|
for (const a of t.rowPool) {
|
|
267
267
|
const d = a.children[s];
|
|
268
268
|
if (d) {
|
|
269
|
-
const
|
|
270
|
-
|
|
269
|
+
const f = d.scrollWidth;
|
|
270
|
+
f > l && (l = f);
|
|
271
271
|
}
|
|
272
272
|
}
|
|
273
|
-
l > 0 && (
|
|
274
|
-
}),
|
|
273
|
+
l > 0 && (n.width = l + 2, n.__autoSized = !0, i = !0);
|
|
274
|
+
}), i && D(t), t.__didInitialAutoSize = !0;
|
|
275
275
|
}
|
|
276
|
-
function
|
|
277
|
-
(t.effectiveConfig?.fitMode || t.fitMode ||
|
|
276
|
+
function D(t) {
|
|
277
|
+
(t.effectiveConfig?.fitMode || t.fitMode || $.STRETCH) === $.STRETCH ? t.gridTemplate = t.visibleColumns.map((o) => {
|
|
278
278
|
if (o.width) return `${o.width}px`;
|
|
279
|
-
const
|
|
280
|
-
return
|
|
279
|
+
const i = o.minWidth;
|
|
280
|
+
return i != null ? `minmax(${i}px, 1fr)` : "1fr";
|
|
281
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);
|
|
282
282
|
}
|
|
283
|
-
function
|
|
283
|
+
function He(t) {
|
|
284
284
|
switch (t.type) {
|
|
285
285
|
case "number":
|
|
286
286
|
return (e) => {
|
|
287
287
|
const o = document.createElement("input");
|
|
288
|
-
return o.type = "number", o.value = e.value
|
|
289
|
-
|
|
288
|
+
return o.type = "number", o.value = e.value != null ? String(e.value) : "", o.addEventListener("blur", () => e.commit(o.value === "" ? null : Number(o.value))), o.addEventListener("keydown", (i) => {
|
|
289
|
+
i.key === "Enter" && e.commit(o.value === "" ? null : Number(o.value)), i.key === "Escape" && e.cancel();
|
|
290
290
|
}), o.focus(), o;
|
|
291
291
|
};
|
|
292
292
|
case "boolean":
|
|
@@ -297,8 +297,8 @@ function Le(t) {
|
|
|
297
297
|
case "date":
|
|
298
298
|
return (e) => {
|
|
299
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", (
|
|
301
|
-
|
|
300
|
+
return o.type = "date", e.value instanceof Date && (o.valueAsDate = e.value), o.addEventListener("change", () => e.commit(o.valueAsDate)), o.addEventListener("keydown", (i) => {
|
|
301
|
+
i.key === "Escape" && e.cancel();
|
|
302
302
|
}), o.focus(), o;
|
|
303
303
|
};
|
|
304
304
|
case "select":
|
|
@@ -309,7 +309,7 @@ function Le(t) {
|
|
|
309
309
|
const r = document.createElement("option");
|
|
310
310
|
r.value = String(s.value), r.textContent = s.label, (e.column.multi && Array.isArray(e.value) && e.value.includes(s.value) || !e.column.multi && e.value === s.value) && (r.selected = !0), o.appendChild(r);
|
|
311
311
|
});
|
|
312
|
-
const
|
|
312
|
+
const n = () => {
|
|
313
313
|
if (e.column.multi) {
|
|
314
314
|
const s = [];
|
|
315
315
|
Array.from(o.selectedOptions).forEach((r) => {
|
|
@@ -318,15 +318,15 @@ function Le(t) {
|
|
|
318
318
|
} else
|
|
319
319
|
e.commit(o.value);
|
|
320
320
|
};
|
|
321
|
-
return o.addEventListener("change",
|
|
321
|
+
return o.addEventListener("change", n), o.addEventListener("blur", n), o.addEventListener("keydown", (s) => {
|
|
322
322
|
s.key === "Escape" && e.cancel();
|
|
323
323
|
}), o.focus(), o;
|
|
324
324
|
};
|
|
325
325
|
default:
|
|
326
326
|
return (e) => {
|
|
327
327
|
const o = document.createElement("input");
|
|
328
|
-
return o.type = "text", o.value = e.value
|
|
329
|
-
|
|
328
|
+
return o.type = "text", o.value = e.value != null ? String(e.value) : "", o.addEventListener("blur", () => e.commit(o.value)), o.addEventListener("keydown", (i) => {
|
|
329
|
+
i.key === "Enter" && e.commit(o.value), i.key === "Escape" && e.cancel();
|
|
330
330
|
}), o.focus(), o;
|
|
331
331
|
};
|
|
332
332
|
}
|
|
@@ -334,35 +334,35 @@ function Le(t) {
|
|
|
334
334
|
function ke(t, e) {
|
|
335
335
|
if (t.dispatchKeyDown?.(e))
|
|
336
336
|
return;
|
|
337
|
-
const o = t._rows.length - 1,
|
|
338
|
-
if (!
|
|
339
|
-
const
|
|
340
|
-
return !!(
|
|
337
|
+
const o = t._rows.length - 1, i = t.visibleColumns.length - 1, n = 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 = (f) => {
|
|
338
|
+
if (!f) return !1;
|
|
339
|
+
const h = f.tagName;
|
|
340
|
+
return !!(h === "INPUT" || h === "SELECT" || h === "TEXTAREA" || f.isContentEditable);
|
|
341
341
|
};
|
|
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")) && !(
|
|
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")) && !(n && (r === "select" || r === "typeahead") && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
|
|
343
343
|
switch (e.key) {
|
|
344
344
|
case "Tab": {
|
|
345
|
-
e.preventDefault(), !e.shiftKey ? t.focusCol <
|
|
345
|
+
e.preventDefault(), !e.shiftKey ? t.focusCol < i ? 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 = i), z(t);
|
|
346
346
|
return;
|
|
347
347
|
}
|
|
348
348
|
case "ArrowDown":
|
|
349
|
-
|
|
349
|
+
n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow = Math.min(o, t.focusRow + 1), e.preventDefault();
|
|
350
350
|
break;
|
|
351
351
|
case "ArrowUp":
|
|
352
|
-
|
|
352
|
+
n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow = Math.max(0, t.focusRow - 1), e.preventDefault();
|
|
353
353
|
break;
|
|
354
354
|
case "ArrowRight":
|
|
355
|
-
t.focusCol = Math.min(
|
|
355
|
+
t.focusCol = Math.min(i, t.focusCol + 1), e.preventDefault();
|
|
356
356
|
break;
|
|
357
357
|
case "ArrowLeft":
|
|
358
358
|
t.focusCol = Math.max(0, t.focusCol - 1), e.preventDefault();
|
|
359
359
|
break;
|
|
360
360
|
case "Home":
|
|
361
|
-
t.focusCol = 0, e.preventDefault();
|
|
362
|
-
|
|
361
|
+
(e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow = 0), t.focusCol = 0, e.preventDefault(), z(t, { forceScrollLeft: !0 });
|
|
362
|
+
return;
|
|
363
363
|
case "End":
|
|
364
|
-
t.focusCol =
|
|
365
|
-
|
|
364
|
+
(e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow = o), t.focusCol = i, e.preventDefault(), z(t, { forceScrollRight: !0 });
|
|
365
|
+
return;
|
|
366
366
|
case "PageDown":
|
|
367
367
|
t.focusRow = Math.min(o, t.focusRow + 20), e.preventDefault();
|
|
368
368
|
break;
|
|
@@ -372,215 +372,227 @@ function ke(t, e) {
|
|
|
372
372
|
case "Enter":
|
|
373
373
|
return typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(t.focusRow) : t.dispatchEvent(
|
|
374
374
|
new CustomEvent("activate-cell", { detail: { row: t.focusRow, col: t.focusCol } })
|
|
375
|
-
),
|
|
375
|
+
), z(t);
|
|
376
376
|
default:
|
|
377
377
|
return;
|
|
378
378
|
}
|
|
379
|
-
|
|
379
|
+
z(t);
|
|
380
380
|
}
|
|
381
381
|
}
|
|
382
|
-
function
|
|
382
|
+
function z(t, e) {
|
|
383
383
|
if (t.virtualization?.enabled) {
|
|
384
|
-
const { rowHeight:
|
|
385
|
-
if (
|
|
386
|
-
const h = t.focusRow *
|
|
387
|
-
h <
|
|
384
|
+
const { rowHeight: r, container: l, viewportEl: a } = t.virtualization, d = l, f = a?.clientHeight ?? d?.clientHeight ?? 0;
|
|
385
|
+
if (d && f > 0) {
|
|
386
|
+
const h = t.focusRow * r;
|
|
387
|
+
h < d.scrollTop ? d.scrollTop = h : h + r > d.scrollTop + f && (d.scrollTop = h - f + r);
|
|
388
388
|
}
|
|
389
389
|
}
|
|
390
|
-
t.activeEditRows !== void 0 && t.activeEditRows !== -1 || t.refreshVirtualWindow(!1), Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((
|
|
391
|
-
|
|
390
|
+
t.activeEditRows !== void 0 && t.activeEditRows !== -1 || t.refreshVirtualWindow(!1), Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((r) => r.classList.remove("cell-focus")), Array.from(t.bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((r) => {
|
|
391
|
+
r.setAttribute("aria-selected", "false");
|
|
392
392
|
});
|
|
393
|
-
const
|
|
394
|
-
if (
|
|
395
|
-
const r = t.bodyEl.querySelectorAll(".data-grid-row")[
|
|
396
|
-
if (
|
|
397
|
-
|
|
398
|
-
|
|
393
|
+
const i = t.focusRow, n = t.virtualization.start ?? 0, s = t.virtualization.end ?? t._rows.length;
|
|
394
|
+
if (i >= n && i < s) {
|
|
395
|
+
const r = t.bodyEl.querySelectorAll(".data-grid-row")[i - n], l = r?.children[t.focusCol];
|
|
396
|
+
if (l) {
|
|
397
|
+
l.classList.add("cell-focus"), l.setAttribute("aria-selected", "true");
|
|
398
|
+
const a = t.shadowRoot?.querySelector(".tbw-scroll-area");
|
|
399
|
+
if (a && l)
|
|
400
|
+
if (e?.forceScrollLeft)
|
|
401
|
+
a.scrollLeft = 0;
|
|
402
|
+
else if (e?.forceScrollRight)
|
|
403
|
+
a.scrollLeft = a.scrollWidth - a.clientWidth;
|
|
404
|
+
else {
|
|
405
|
+
const d = t.getHorizontalScrollOffsets?.(r ?? void 0, l) ?? { left: 0, right: 0 };
|
|
406
|
+
if (!d.skipScroll) {
|
|
407
|
+
const f = l.getBoundingClientRect(), h = a.getBoundingClientRect(), p = f.left - h.left + a.scrollLeft, c = p + f.width, u = a.scrollLeft + d.left, b = a.scrollLeft + a.clientWidth - d.right;
|
|
408
|
+
p < u ? a.scrollLeft = p - d.left : c > b && (a.scrollLeft = c - a.clientWidth + d.right);
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
if (t.activeEditRows !== void 0 && t.activeEditRows !== -1 && l.classList.contains("editing")) {
|
|
412
|
+
const d = l.querySelector(
|
|
399
413
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
400
414
|
);
|
|
401
|
-
if (
|
|
415
|
+
if (d && document.activeElement !== d)
|
|
402
416
|
try {
|
|
403
|
-
|
|
417
|
+
d.focus();
|
|
404
418
|
} catch {
|
|
405
419
|
}
|
|
406
|
-
} else if (!
|
|
407
|
-
|
|
420
|
+
} else if (!l.contains(document.activeElement)) {
|
|
421
|
+
l.hasAttribute("tabindex") || l.setAttribute("tabindex", "-1");
|
|
408
422
|
try {
|
|
409
|
-
|
|
423
|
+
l.focus({ preventScroll: !0 });
|
|
410
424
|
} catch {
|
|
411
425
|
}
|
|
412
426
|
}
|
|
413
427
|
}
|
|
414
428
|
}
|
|
415
429
|
}
|
|
416
|
-
const
|
|
417
|
-
function
|
|
418
|
-
t[
|
|
430
|
+
const Oe = "__cellDisplayCache", ze = "__cellCacheEpoch";
|
|
431
|
+
function Y(t) {
|
|
432
|
+
t[Oe] = void 0, t[ze] = void 0, t.__hasSpecialColumns = void 0;
|
|
419
433
|
}
|
|
420
|
-
function
|
|
434
|
+
function Me(t, e, o, i, n) {
|
|
421
435
|
const s = Math.max(0, o - e), r = t.bodyEl, l = t.visibleColumns, a = l.length;
|
|
422
436
|
let d = t.__cachedHeaderRowCount;
|
|
423
437
|
for (d === void 0 && (d = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = d); t.rowPool.length < s; ) {
|
|
424
|
-
const
|
|
425
|
-
|
|
438
|
+
const h = document.createElement("div");
|
|
439
|
+
h.className = "data-grid-row", h.setAttribute("role", "row"), h.addEventListener("click", (p) => oe(t, p, h, !1)), h.addEventListener("dblclick", (p) => oe(t, p, h, !0)), t.rowPool.push(h);
|
|
426
440
|
}
|
|
427
441
|
if (t.rowPool.length > s) {
|
|
428
|
-
for (let
|
|
429
|
-
const
|
|
430
|
-
|
|
442
|
+
for (let h = s; h < t.rowPool.length; h++) {
|
|
443
|
+
const p = t.rowPool[h];
|
|
444
|
+
p.parentNode === r && p.remove();
|
|
431
445
|
}
|
|
432
446
|
t.rowPool.length = s;
|
|
433
447
|
}
|
|
434
|
-
const
|
|
435
|
-
for (let
|
|
436
|
-
const
|
|
437
|
-
if (u.setAttribute("aria-rowindex", String(
|
|
438
|
-
u.__epoch =
|
|
448
|
+
const f = n && t.__hasRenderRowPlugins !== !1;
|
|
449
|
+
for (let h = 0; h < s; h++) {
|
|
450
|
+
const p = e + h, c = t._rows[p], u = t.rowPool[h];
|
|
451
|
+
if (u.setAttribute("aria-rowindex", String(p + d + 1)), f && n(c, u, p)) {
|
|
452
|
+
u.__epoch = i, u.__rowDataRef = c, u.parentNode !== r && r.appendChild(u);
|
|
439
453
|
continue;
|
|
440
454
|
}
|
|
441
|
-
const
|
|
442
|
-
let
|
|
443
|
-
if (x &&
|
|
455
|
+
const b = u.__epoch, w = u.__rowDataRef, v = u.children.length, x = b === i && v === a, _ = w !== c;
|
|
456
|
+
let g = !1;
|
|
457
|
+
if (x && _) {
|
|
444
458
|
for (let E = 0; E < a; E++)
|
|
445
459
|
if (l[E].externalView && !u.querySelector(`.cell[data-col="${E}"] [data-external-view]`)) {
|
|
446
|
-
|
|
460
|
+
g = !0;
|
|
447
461
|
break;
|
|
448
462
|
}
|
|
449
463
|
}
|
|
450
|
-
if (!x ||
|
|
451
|
-
const E = u.querySelector(".cell.editing"),
|
|
452
|
-
if (E && !
|
|
453
|
-
u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1),
|
|
454
|
-
else if (E &&
|
|
455
|
-
|
|
456
|
-
else if (u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1),
|
|
457
|
-
const
|
|
458
|
-
for (let
|
|
459
|
-
const
|
|
460
|
-
|
|
464
|
+
if (!x || g) {
|
|
465
|
+
const E = u.querySelector(".cell.editing"), C = t.activeEditRows === p;
|
|
466
|
+
if (E && !C)
|
|
467
|
+
u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
|
|
468
|
+
else if (E && C)
|
|
469
|
+
U(t, u, c, p), u.__rowDataRef = c;
|
|
470
|
+
else if (u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c, C) {
|
|
471
|
+
const S = u.children;
|
|
472
|
+
for (let A = 0; A < S.length; A++) {
|
|
473
|
+
const P = t.visibleColumns[A];
|
|
474
|
+
P && P.editable && k(t, c, p, P, S[A]);
|
|
461
475
|
}
|
|
462
476
|
}
|
|
463
|
-
} else if (
|
|
464
|
-
const E = u.querySelector(".cell.editing"),
|
|
465
|
-
if (E && !
|
|
466
|
-
|
|
467
|
-
else if (
|
|
468
|
-
const
|
|
469
|
-
for (let
|
|
470
|
-
const
|
|
471
|
-
|
|
477
|
+
} else if (_) {
|
|
478
|
+
const E = u.querySelector(".cell.editing"), C = t.activeEditRows === p;
|
|
479
|
+
if (E && !C)
|
|
480
|
+
N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
|
|
481
|
+
else if (U(t, u, c, p), u.__rowDataRef = c, C && !E) {
|
|
482
|
+
const S = u.children;
|
|
483
|
+
for (let A = 0; A < S.length; A++) {
|
|
484
|
+
const P = t.visibleColumns[A];
|
|
485
|
+
P && P.editable && k(t, c, p, P, S[A]);
|
|
472
486
|
}
|
|
473
487
|
}
|
|
474
488
|
} else {
|
|
475
|
-
const E = u.querySelector(".cell.editing"),
|
|
476
|
-
if (E && !
|
|
477
|
-
|
|
478
|
-
else if (
|
|
479
|
-
const
|
|
480
|
-
for (let
|
|
481
|
-
const
|
|
482
|
-
|
|
489
|
+
const E = u.querySelector(".cell.editing"), C = t.activeEditRows === p;
|
|
490
|
+
if (E && !C)
|
|
491
|
+
N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
|
|
492
|
+
else if (U(t, u, c, p), C && !E) {
|
|
493
|
+
const S = u.children;
|
|
494
|
+
for (let A = 0; A < S.length; A++) {
|
|
495
|
+
const P = t.visibleColumns[A];
|
|
496
|
+
P && P.editable && k(t, c, p, P, S[A]);
|
|
483
497
|
}
|
|
484
498
|
}
|
|
485
499
|
}
|
|
486
|
-
const
|
|
487
|
-
|
|
500
|
+
const m = t._changedRowIndices.has(p), y = u.classList.contains("changed");
|
|
501
|
+
m !== y && u.classList.toggle("changed", m), u.parentNode !== r && r.appendChild(u);
|
|
488
502
|
}
|
|
489
503
|
}
|
|
490
|
-
function
|
|
491
|
-
const
|
|
492
|
-
let
|
|
493
|
-
if (
|
|
494
|
-
|
|
504
|
+
function U(t, e, o, i) {
|
|
505
|
+
const n = e.children, s = t.visibleColumns, r = s.length, l = n.length, a = r < l ? r : l, d = t.focusRow, f = t.focusCol;
|
|
506
|
+
let h = t.__hasSpecialColumns;
|
|
507
|
+
if (h === void 0) {
|
|
508
|
+
h = !1;
|
|
495
509
|
for (let c = 0; c < r; c++) {
|
|
496
510
|
const u = s[c];
|
|
497
511
|
if (u.__viewTemplate || u.__compiledView || u.viewRenderer || u.externalView || u.format || u.type === "date" || u.type === "boolean") {
|
|
498
|
-
|
|
512
|
+
h = !0;
|
|
499
513
|
break;
|
|
500
514
|
}
|
|
501
515
|
}
|
|
502
|
-
t.__hasSpecialColumns =
|
|
516
|
+
t.__hasSpecialColumns = h;
|
|
503
517
|
}
|
|
504
|
-
const
|
|
505
|
-
if (!
|
|
518
|
+
const p = String(i);
|
|
519
|
+
if (!h) {
|
|
506
520
|
for (let c = 0; c < a; c++) {
|
|
507
|
-
const u =
|
|
508
|
-
u.textContent =
|
|
509
|
-
const w = d ===
|
|
521
|
+
const u = n[c], b = o[s[c].field];
|
|
522
|
+
u.textContent = b == null ? "" : String(b), u.getAttribute("data-row") !== p && u.setAttribute("data-row", p);
|
|
523
|
+
const w = d === i && f === c, v = u.classList.contains("cell-focus");
|
|
510
524
|
w !== v && (u.classList.toggle("cell-focus", w), u.setAttribute("aria-selected", String(w)));
|
|
511
525
|
}
|
|
512
526
|
return;
|
|
513
527
|
}
|
|
514
528
|
for (let c = 0; c < a; c++)
|
|
515
|
-
if (s[c].externalView && !
|
|
516
|
-
|
|
529
|
+
if (s[c].externalView && !n[c].querySelector("[data-external-view]")) {
|
|
530
|
+
N(t, e, o, i);
|
|
517
531
|
return;
|
|
518
532
|
}
|
|
519
533
|
for (let c = 0; c < a; c++) {
|
|
520
|
-
const u = s[c],
|
|
521
|
-
|
|
522
|
-
const w = d ===
|
|
523
|
-
if (w !== v && (
|
|
534
|
+
const u = s[c], b = n[c];
|
|
535
|
+
b.getAttribute("data-row") !== p && b.setAttribute("data-row", p);
|
|
536
|
+
const w = d === i && f === c, v = b.classList.contains("cell-focus");
|
|
537
|
+
if (w !== v && (b.classList.toggle("cell-focus", w), b.setAttribute("aria-selected", String(w))), b.classList.contains("editing")) continue;
|
|
524
538
|
if (u.viewRenderer) {
|
|
525
|
-
const
|
|
526
|
-
typeof
|
|
539
|
+
const _ = o[u.field], g = u.viewRenderer({ row: o, value: _, field: u.field, column: u });
|
|
540
|
+
typeof g == "string" ? b.innerHTML = F(g) : g ? (b.innerHTML = "", b.appendChild(g)) : b.textContent = _ == null ? "" : String(_);
|
|
527
541
|
continue;
|
|
528
542
|
}
|
|
529
543
|
if (u.__viewTemplate || u.__compiledView || u.externalView)
|
|
530
544
|
continue;
|
|
531
|
-
const
|
|
545
|
+
const R = o[u.field];
|
|
532
546
|
let x;
|
|
533
547
|
if (u.format)
|
|
534
548
|
try {
|
|
535
|
-
const
|
|
536
|
-
x =
|
|
549
|
+
const _ = u.format(R, o);
|
|
550
|
+
x = _ == null ? "" : String(_);
|
|
537
551
|
} catch {
|
|
538
|
-
x =
|
|
552
|
+
x = R == null ? "" : String(R);
|
|
539
553
|
}
|
|
540
554
|
else if (u.type === "date") {
|
|
541
|
-
if (
|
|
555
|
+
if (R == null || R === "")
|
|
542
556
|
x = "";
|
|
543
|
-
else if (
|
|
544
|
-
x = isNaN(S.getTime()) ? "" : S.toLocaleDateString();
|
|
545
|
-
else {
|
|
546
|
-
const R = new Date(S);
|
|
557
|
+
else if (R instanceof Date)
|
|
547
558
|
x = isNaN(R.getTime()) ? "" : R.toLocaleDateString();
|
|
559
|
+
else {
|
|
560
|
+
const _ = new Date(R);
|
|
561
|
+
x = isNaN(_.getTime()) ? "" : _.toLocaleDateString();
|
|
548
562
|
}
|
|
549
|
-
|
|
563
|
+
b.textContent = x;
|
|
550
564
|
} else if (u.type === "boolean") {
|
|
551
|
-
const
|
|
552
|
-
|
|
565
|
+
const _ = !!R;
|
|
566
|
+
b.innerHTML = `<span role="checkbox" aria-checked="${_}" aria-label="${_}">${_ ? "🗹" : "☐"}</span>`;
|
|
553
567
|
} else
|
|
554
|
-
x =
|
|
568
|
+
x = R == null ? "" : String(R), b.textContent = x;
|
|
555
569
|
}
|
|
556
570
|
}
|
|
557
|
-
function
|
|
571
|
+
function N(t, e, o, i) {
|
|
558
572
|
e.innerHTML = "";
|
|
559
|
-
const
|
|
560
|
-
for (let
|
|
561
|
-
const
|
|
562
|
-
c.className = "cell",
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
const w = b.format;
|
|
567
|
-
if (w)
|
|
573
|
+
const n = t.visibleColumns, s = n.length, r = t.focusRow, l = t.focusCol, a = t.effectiveConfig?.editOn || t.editOn, d = t, f = document.createDocumentFragment();
|
|
574
|
+
for (let h = 0; h < s; h++) {
|
|
575
|
+
const p = n[h], c = document.createElement("div");
|
|
576
|
+
c.className = "cell", j(c, "cell"), c.setAttribute("role", "gridcell"), c.setAttribute("aria-colindex", String(h + 1)), c.setAttribute("data-col", String(h)), c.setAttribute("data-row", String(i)), p.type, p.type && c.setAttribute("data-type", p.type);
|
|
577
|
+
let u = o[p.field];
|
|
578
|
+
const b = p.format;
|
|
579
|
+
if (b)
|
|
568
580
|
try {
|
|
569
|
-
|
|
581
|
+
u = b(u, o);
|
|
570
582
|
} catch {
|
|
571
583
|
}
|
|
572
|
-
const
|
|
573
|
-
let
|
|
574
|
-
if (
|
|
575
|
-
const g =
|
|
576
|
-
typeof g == "string" ? (c.innerHTML =
|
|
577
|
-
} else if (
|
|
578
|
-
const g =
|
|
579
|
-
m.setAttribute("data-external-view", ""), m.setAttribute("data-field",
|
|
580
|
-
const
|
|
584
|
+
const w = p.__compiledView, v = p.__viewTemplate, R = p.viewRenderer, x = p.externalView;
|
|
585
|
+
let _ = !1;
|
|
586
|
+
if (R) {
|
|
587
|
+
const g = R({ row: o, value: u, field: p.field, column: p });
|
|
588
|
+
typeof g == "string" ? (c.innerHTML = F(g), _ = !0) : g ? c.appendChild(g) : c.textContent = u == null ? "" : String(u);
|
|
589
|
+
} else if (x) {
|
|
590
|
+
const g = x, m = document.createElement("div");
|
|
591
|
+
m.setAttribute("data-external-view", ""), m.setAttribute("data-field", p.field), c.appendChild(m);
|
|
592
|
+
const y = { row: o, value: u, field: p.field, column: p };
|
|
581
593
|
if (g.mount)
|
|
582
594
|
try {
|
|
583
|
-
g.mount({ placeholder: m, context:
|
|
595
|
+
g.mount({ placeholder: m, context: y, spec: g });
|
|
584
596
|
} catch {
|
|
585
597
|
}
|
|
586
598
|
else
|
|
@@ -590,107 +602,107 @@ function M(t, e, o, n) {
|
|
|
590
602
|
new CustomEvent("mount-external-view", {
|
|
591
603
|
bubbles: !0,
|
|
592
604
|
composed: !0,
|
|
593
|
-
detail: { placeholder: m, spec: g, context:
|
|
605
|
+
detail: { placeholder: m, spec: g, context: y }
|
|
594
606
|
})
|
|
595
607
|
);
|
|
596
608
|
} catch {
|
|
597
609
|
}
|
|
598
610
|
});
|
|
599
611
|
m.setAttribute("data-mounted", "");
|
|
612
|
+
} else if (w) {
|
|
613
|
+
const g = w({ row: o, value: u, field: p.field, column: p }), m = w.__blocked;
|
|
614
|
+
c.innerHTML = m ? "" : F(g), _ = !0, m && (c.textContent = "", c.setAttribute("data-blocked-template", ""));
|
|
600
615
|
} else if (v) {
|
|
601
|
-
const g = v
|
|
602
|
-
|
|
603
|
-
} else if (
|
|
604
|
-
|
|
605
|
-
/Reflect\.|\bProxy\b|ownKeys\(/.test(g) ? (c.textContent = "", c.setAttribute("data-blocked-template", "")) : (c.innerHTML = V(ae(g, { row: o, value: f })), T = !0);
|
|
606
|
-
} else if (b.type === "date")
|
|
607
|
-
if (f == null || f === "")
|
|
616
|
+
const g = v.innerHTML;
|
|
617
|
+
/Reflect\.|\bProxy\b|ownKeys\(/.test(g) ? (c.textContent = "", c.setAttribute("data-blocked-template", "")) : (c.innerHTML = F(ue(g, { row: o, value: u })), _ = !0);
|
|
618
|
+
} else if (p.type === "date")
|
|
619
|
+
if (u == null || u === "")
|
|
608
620
|
c.textContent = "";
|
|
609
621
|
else {
|
|
610
622
|
let g = null;
|
|
611
|
-
if (
|
|
612
|
-
else if (typeof
|
|
613
|
-
const m = new Date(
|
|
623
|
+
if (u instanceof Date) g = u;
|
|
624
|
+
else if (typeof u == "number" || typeof u == "string") {
|
|
625
|
+
const m = new Date(u);
|
|
614
626
|
isNaN(m.getTime()) || (g = m);
|
|
615
627
|
}
|
|
616
628
|
c.textContent = g ? g.toLocaleDateString() : "";
|
|
617
629
|
}
|
|
618
|
-
else if (
|
|
619
|
-
const g = !!
|
|
630
|
+
else if (p.type === "boolean") {
|
|
631
|
+
const g = !!u;
|
|
620
632
|
c.innerHTML = `<span role="checkbox" aria-checked="${g}" aria-label="${g}">${g ? "🗹" : "☐"}</span>`;
|
|
621
633
|
} else
|
|
622
|
-
c.textContent =
|
|
623
|
-
if (
|
|
624
|
-
|
|
634
|
+
c.textContent = u == null ? "" : String(u);
|
|
635
|
+
if (_) {
|
|
636
|
+
Ae(c);
|
|
625
637
|
const g = c.textContent || "";
|
|
626
638
|
/Proxy|Reflect\.ownKeys/.test(g) && (c.textContent = g.replace(/Proxy|Reflect\.ownKeys/g, "").trim(), /Proxy|Reflect\.ownKeys/.test(c.textContent || "") && (c.textContent = ""));
|
|
627
639
|
}
|
|
628
|
-
c.hasAttribute("data-blocked-template") && (c.textContent || "").trim().length && (c.textContent = ""),
|
|
640
|
+
c.hasAttribute("data-blocked-template") && (c.textContent || "").trim().length && (c.textContent = ""), p.editable ? (c.tabIndex = 0, c.addEventListener("mousedown", () => {
|
|
629
641
|
if (c.classList.contains("editing")) return;
|
|
630
642
|
const g = Number(c.getAttribute("data-row")), m = Number(c.getAttribute("data-col"));
|
|
631
|
-
isNaN(g) || isNaN(m) || (t.focusRow = g, t.focusCol = m,
|
|
643
|
+
isNaN(g) || isNaN(m) || (t.focusRow = g, t.focusCol = m, z(t));
|
|
632
644
|
}), a === "click" ? c.addEventListener("click", (g) => {
|
|
633
645
|
if (c.classList.contains("editing")) return;
|
|
634
646
|
g.stopPropagation();
|
|
635
|
-
const m = Number(c.getAttribute("data-row")),
|
|
636
|
-
if (isNaN(m) || isNaN(
|
|
637
|
-
const
|
|
638
|
-
!
|
|
647
|
+
const m = Number(c.getAttribute("data-row")), y = Number(c.getAttribute("data-col"));
|
|
648
|
+
if (isNaN(m) || isNaN(y)) return;
|
|
649
|
+
const E = t._rows[m], C = t.visibleColumns[y];
|
|
650
|
+
!E || !C || (t.focusRow = m, t.focusCol = y, k(t, E, m, C, c));
|
|
639
651
|
}) : c.addEventListener("dblclick", (g) => {
|
|
640
652
|
g.stopPropagation();
|
|
641
653
|
const m = Number(c.getAttribute("data-row"));
|
|
642
654
|
if (isNaN(m)) return;
|
|
643
|
-
const
|
|
644
|
-
if (!
|
|
645
|
-
|
|
646
|
-
const
|
|
647
|
-
if (
|
|
648
|
-
const
|
|
649
|
-
for (let
|
|
650
|
-
const
|
|
651
|
-
|
|
655
|
+
const y = t._rows[m];
|
|
656
|
+
if (!y) return;
|
|
657
|
+
B(t, m, y);
|
|
658
|
+
const E = t.findRenderedRowElement?.(m);
|
|
659
|
+
if (E) {
|
|
660
|
+
const C = E.children;
|
|
661
|
+
for (let S = 0; S < C.length; S++) {
|
|
662
|
+
const A = t.visibleColumns[S];
|
|
663
|
+
A && A.editable && k(t, y, m, A, C[S]);
|
|
652
664
|
}
|
|
653
665
|
}
|
|
654
666
|
}), c.addEventListener("keydown", (g) => {
|
|
655
|
-
const m = Number(c.getAttribute("data-row")),
|
|
656
|
-
if (isNaN(m) || isNaN(
|
|
657
|
-
const
|
|
658
|
-
if (!(!
|
|
659
|
-
if ((
|
|
660
|
-
g.preventDefault(), t.activeEditRows !== m &&
|
|
661
|
-
const
|
|
667
|
+
const m = Number(c.getAttribute("data-row")), y = Number(c.getAttribute("data-col"));
|
|
668
|
+
if (isNaN(m) || isNaN(y)) return;
|
|
669
|
+
const E = t._rows[m], C = t.visibleColumns[y];
|
|
670
|
+
if (!(!E || !C)) {
|
|
671
|
+
if ((C.type === "select" || C.type === "typeahead") && !c.classList.contains("editing") && g.key === "Enter") {
|
|
672
|
+
g.preventDefault(), t.activeEditRows !== m && B(t, m, E), k(t, E, m, C, c), setTimeout(() => {
|
|
673
|
+
const S = c.querySelector("select");
|
|
662
674
|
try {
|
|
663
|
-
|
|
675
|
+
S?.showPicker?.();
|
|
664
676
|
} catch {
|
|
665
677
|
}
|
|
666
|
-
|
|
678
|
+
S?.focus();
|
|
667
679
|
}, 0);
|
|
668
680
|
return;
|
|
669
681
|
}
|
|
670
|
-
if (
|
|
671
|
-
g.preventDefault(), t.activeEditRows !== m &&
|
|
672
|
-
const
|
|
673
|
-
|
|
682
|
+
if (C.type === "boolean" && g.key === " " && !c.classList.contains("editing")) {
|
|
683
|
+
g.preventDefault(), t.activeEditRows !== m && B(t, m, E);
|
|
684
|
+
const S = !E[C.field];
|
|
685
|
+
Q(t, m, C, S, E), c.innerHTML = `<span role="checkbox" aria-checked="${S}" aria-label="${S}">${S ? "🗹" : "☐"}</span>`;
|
|
674
686
|
return;
|
|
675
687
|
}
|
|
676
688
|
if (g.key === "Enter" && !c.classList.contains("editing")) {
|
|
677
|
-
g.preventDefault(), g.stopPropagation(), t.focusRow = m, t.focusCol =
|
|
689
|
+
g.preventDefault(), g.stopPropagation(), t.focusRow = m, t.focusCol = y, typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(m) : k(t, E, m, C, c);
|
|
678
690
|
return;
|
|
679
691
|
}
|
|
680
692
|
if (g.key === "F2" && !c.classList.contains("editing")) {
|
|
681
|
-
g.preventDefault(),
|
|
693
|
+
g.preventDefault(), k(t, E, m, C, c);
|
|
682
694
|
return;
|
|
683
695
|
}
|
|
684
696
|
}
|
|
685
|
-
})) :
|
|
697
|
+
})) : p.type === "boolean" && (c.hasAttribute("tabindex") || (c.tabIndex = 0)), r === i && l === h ? (c.classList.add("cell-focus"), c.setAttribute("aria-selected", "true")) : c.setAttribute("aria-selected", "false"), f.appendChild(c);
|
|
686
698
|
}
|
|
687
|
-
e.appendChild(
|
|
699
|
+
e.appendChild(f);
|
|
688
700
|
}
|
|
689
|
-
function
|
|
701
|
+
function oe(t, e, o, i) {
|
|
690
702
|
if (e.target?.closest(".resize-handle")) return;
|
|
691
|
-
const
|
|
692
|
-
if (!
|
|
693
|
-
const s = Number(
|
|
703
|
+
const n = o.querySelector(".cell[data-row]");
|
|
704
|
+
if (!n) return;
|
|
705
|
+
const s = Number(n.getAttribute("data-row"));
|
|
694
706
|
if (isNaN(s)) return;
|
|
695
707
|
const r = t._rows[s];
|
|
696
708
|
if (!r) return;
|
|
@@ -701,58 +713,61 @@ function J(t, e, o, n) {
|
|
|
701
713
|
if (!isNaN(d)) {
|
|
702
714
|
if (t.dispatchCellClick?.(e, s, d, l))
|
|
703
715
|
return;
|
|
704
|
-
t.focusRow = s, t.focusCol = d,
|
|
716
|
+
t.focusRow = s, t.focusCol = d, z(t);
|
|
705
717
|
}
|
|
706
718
|
}
|
|
707
719
|
if (o.querySelector(".cell.editing")) {
|
|
708
720
|
const d = o.querySelectorAll(".cell.editing");
|
|
709
|
-
if (!
|
|
710
|
-
d.forEach((
|
|
721
|
+
if (!i) return;
|
|
722
|
+
d.forEach((f) => f.classList.remove("editing"));
|
|
711
723
|
}
|
|
712
724
|
const a = t.effectiveConfig?.editOn || t.editOn || "doubleClick";
|
|
713
|
-
if (a === "click" || a === "doubleClick" &&
|
|
725
|
+
if (a === "click" || a === "doubleClick" && i) B(t, s, r);
|
|
714
726
|
else return;
|
|
715
|
-
Array.from(o.children).forEach((d,
|
|
716
|
-
const
|
|
717
|
-
|
|
727
|
+
Array.from(o.children).forEach((d, f) => {
|
|
728
|
+
const h = t.visibleColumns[f];
|
|
729
|
+
h && h.editable && k(t, r, s, h, d);
|
|
718
730
|
}), l && queueMicrotask(() => {
|
|
719
731
|
const d = o.querySelector(`.cell[data-col="${t.focusCol}"]`);
|
|
720
732
|
if (d?.classList.contains("editing")) {
|
|
721
|
-
const
|
|
733
|
+
const f = d.querySelector(
|
|
722
734
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
723
735
|
);
|
|
724
736
|
try {
|
|
725
|
-
|
|
737
|
+
f?.focus();
|
|
726
738
|
} catch {
|
|
727
739
|
}
|
|
728
740
|
}
|
|
729
741
|
});
|
|
730
742
|
}
|
|
731
|
-
function
|
|
743
|
+
function Z(t) {
|
|
744
|
+
return !(t === "__proto__" || t === "constructor" || t === "prototype");
|
|
745
|
+
}
|
|
746
|
+
function B(t, e, o) {
|
|
732
747
|
t.activeEditRows !== e && (t.rowEditSnapshots.set(e, { ...o }), t.activeEditRows = e);
|
|
733
748
|
}
|
|
734
|
-
function
|
|
749
|
+
function M(t, e, o) {
|
|
735
750
|
if (t.activeEditRows !== e) return;
|
|
736
|
-
const
|
|
737
|
-
if (!o && s &&
|
|
751
|
+
const i = t.rowEditSnapshots.get(e), n = t._rows[e], s = t.findRenderedRowElement?.(e);
|
|
752
|
+
if (!o && s && n && s.querySelectorAll(".cell.editing").forEach((l) => {
|
|
738
753
|
const a = Number(l.getAttribute("data-col"));
|
|
739
754
|
if (isNaN(a)) return;
|
|
740
755
|
const d = t.visibleColumns[a];
|
|
741
756
|
if (!d) return;
|
|
742
|
-
const
|
|
743
|
-
if (
|
|
744
|
-
let
|
|
745
|
-
|
|
757
|
+
const f = l.querySelector("input,textarea,select");
|
|
758
|
+
if (f) {
|
|
759
|
+
let h;
|
|
760
|
+
f instanceof HTMLInputElement && f.type === "checkbox" ? h = f.checked : (h = f.value, d.type === "number" && h !== "" && (h = Number(h))), n[d.field] !== h && Q(t, e, d, h, n);
|
|
746
761
|
}
|
|
747
|
-
}), o &&
|
|
748
|
-
Object.keys(
|
|
762
|
+
}), o && i && n)
|
|
763
|
+
Object.keys(i).forEach((r) => n[r] = i[r]), t._changedRowIndices.delete(e), Y(t);
|
|
749
764
|
else if (!o) {
|
|
750
765
|
const r = t._changedRowIndices.has(e);
|
|
751
766
|
t.dispatchEvent(
|
|
752
767
|
new CustomEvent("row-commit", {
|
|
753
768
|
detail: {
|
|
754
769
|
rowIndex: e,
|
|
755
|
-
row:
|
|
770
|
+
row: n,
|
|
756
771
|
changed: r,
|
|
757
772
|
changedRows: t.changedRows,
|
|
758
773
|
changedRowIndices: t.changedRowIndices
|
|
@@ -760,11 +775,11 @@ function N(t, e, o) {
|
|
|
760
775
|
})
|
|
761
776
|
);
|
|
762
777
|
}
|
|
763
|
-
t.rowEditSnapshots.delete(e), t.activeEditRows = -1, s && (
|
|
778
|
+
t.rowEditSnapshots.delete(e), t.activeEditRows = -1, s && (N(t, s, t._rows[e], e), t._changedRowIndices.has(e) ? s.classList.add("changed") : s.classList.remove("changed")), queueMicrotask(() => {
|
|
764
779
|
try {
|
|
765
780
|
const r = t.focusRow, l = t.focusCol, a = t.findRenderedRowElement?.(r);
|
|
766
781
|
if (a) {
|
|
767
|
-
Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((
|
|
782
|
+
Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((f) => f.classList.remove("cell-focus"));
|
|
768
783
|
const d = a.querySelector(`.cell[data-row="${r}"][data-col="${l}"]`);
|
|
769
784
|
d && (d.classList.add("cell-focus"), d.setAttribute("aria-selected", "true"), d.hasAttribute("tabindex") || d.setAttribute("tabindex", "-1"), d.focus({ preventScroll: !0 }));
|
|
770
785
|
}
|
|
@@ -772,19 +787,19 @@ function N(t, e, o) {
|
|
|
772
787
|
}
|
|
773
788
|
});
|
|
774
789
|
}
|
|
775
|
-
function
|
|
790
|
+
function Q(t, e, o, i, n) {
|
|
776
791
|
const s = o.field;
|
|
777
|
-
if (
|
|
778
|
-
|
|
792
|
+
if (!Z(s) || n[s] === i) return;
|
|
793
|
+
n[s] = i;
|
|
779
794
|
const l = !t._changedRowIndices.has(e);
|
|
780
795
|
t._changedRowIndices.add(e);
|
|
781
796
|
const a = t.findRenderedRowElement?.(e);
|
|
782
797
|
a && a.classList.add("changed"), t.dispatchEvent(
|
|
783
798
|
new CustomEvent("cell-commit", {
|
|
784
799
|
detail: {
|
|
785
|
-
row:
|
|
800
|
+
row: n,
|
|
786
801
|
field: s,
|
|
787
|
-
value:
|
|
802
|
+
value: i,
|
|
788
803
|
rowIndex: e,
|
|
789
804
|
changedRows: t.changedRows,
|
|
790
805
|
changedRowIndices: t.changedRowIndices,
|
|
@@ -793,142 +808,134 @@ function j(t, e, o, n, i) {
|
|
|
793
808
|
})
|
|
794
809
|
);
|
|
795
810
|
}
|
|
796
|
-
function
|
|
797
|
-
if (!
|
|
798
|
-
const s = e[
|
|
799
|
-
|
|
811
|
+
function k(t, e, o, i, n) {
|
|
812
|
+
if (!i.editable || (t.activeEditRows !== o && B(t, o, e), n.classList.contains("editing"))) return;
|
|
813
|
+
const s = Z(i.field) ? e[i.field] : void 0;
|
|
814
|
+
n.classList.add("editing");
|
|
800
815
|
let r = !1;
|
|
801
816
|
const l = (c) => {
|
|
802
|
-
r || t.activeEditRows === -1 ||
|
|
817
|
+
r || t.activeEditRows === -1 || Q(t, o, i, c, e);
|
|
803
818
|
}, a = () => {
|
|
804
|
-
r = !0, e[
|
|
805
|
-
const c =
|
|
819
|
+
r = !0, e[i.field] = Z(i.field) ? s : void 0;
|
|
820
|
+
const c = n.querySelector("input,textarea,select");
|
|
806
821
|
c && (typeof HTMLInputElement < "u" && c instanceof HTMLInputElement && c.type === "checkbox" ? c.checked = !!s : "value" in c && (c.value = s ?? ""));
|
|
807
822
|
}, d = document.createElement("div");
|
|
808
|
-
d.style.display = "contents",
|
|
809
|
-
c.key === "Enter" && (c.stopPropagation(), c.preventDefault(), r = !0,
|
|
823
|
+
d.style.display = "contents", n.innerHTML = "", n.appendChild(d), d.addEventListener("keydown", (c) => {
|
|
824
|
+
c.key === "Enter" && (c.stopPropagation(), c.preventDefault(), r = !0, M(t, o, !1)), c.key === "Escape" && (c.stopPropagation(), c.preventDefault(), a(), M(t, o, !0));
|
|
810
825
|
});
|
|
811
|
-
const
|
|
812
|
-
if (
|
|
813
|
-
const c =
|
|
814
|
-
u ? c.innerHTML = u({ row: e, value: s, field:
|
|
815
|
-
w.childNodes.length === 1 && w.firstChild?.nodeType === Node.TEXT_NODE && (w.textContent = w.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (v,
|
|
816
|
-
const x = e[
|
|
826
|
+
const f = i.__editorTemplate, h = i.editor || (f ? "template" : He(i)), p = s;
|
|
827
|
+
if (h === "template" && f) {
|
|
828
|
+
const c = f.cloneNode(!0), u = i.__compiledEditor;
|
|
829
|
+
u ? c.innerHTML = u({ row: e, value: s, field: i.field, column: i }) : c.querySelectorAll("*").forEach((w) => {
|
|
830
|
+
w.childNodes.length === 1 && w.firstChild?.nodeType === Node.TEXT_NODE && (w.textContent = w.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (v, R) => {
|
|
831
|
+
const x = e[R];
|
|
817
832
|
return x == null ? "" : String(x);
|
|
818
833
|
}) || "");
|
|
819
834
|
});
|
|
820
|
-
const
|
|
821
|
-
if (
|
|
835
|
+
const b = c.querySelector("input,textarea,select");
|
|
836
|
+
if (b) {
|
|
822
837
|
const w = typeof HTMLInputElement < "u";
|
|
823
|
-
w &&
|
|
824
|
-
const v = w &&
|
|
838
|
+
w && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked = !!s : "value" in b && (b.value = s ?? ""), b.addEventListener("blur", () => {
|
|
839
|
+
const v = w && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked : b.value;
|
|
825
840
|
l(v);
|
|
826
|
-
}),
|
|
841
|
+
}), b.addEventListener("keydown", (v) => {
|
|
827
842
|
if (v.key === "Enter") {
|
|
828
843
|
v.stopPropagation(), v.preventDefault(), r = !0;
|
|
829
|
-
const
|
|
830
|
-
l(
|
|
844
|
+
const R = w && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked : b.value;
|
|
845
|
+
l(R), M(t, o, !1);
|
|
831
846
|
}
|
|
832
|
-
v.key === "Escape" && (v.stopPropagation(), v.preventDefault(), a(),
|
|
833
|
-
}), w &&
|
|
834
|
-
const v =
|
|
847
|
+
v.key === "Escape" && (v.stopPropagation(), v.preventDefault(), a(), M(t, o, !0));
|
|
848
|
+
}), w && b instanceof HTMLInputElement && b.type === "checkbox" && b.addEventListener("change", () => {
|
|
849
|
+
const v = b.checked;
|
|
835
850
|
l(v);
|
|
836
|
-
}), setTimeout(() =>
|
|
851
|
+
}), setTimeout(() => b.focus(), 0);
|
|
837
852
|
}
|
|
838
853
|
d.appendChild(c);
|
|
839
|
-
} else if (typeof
|
|
840
|
-
const c = document.createElement(
|
|
841
|
-
c.value =
|
|
842
|
-
} else if (typeof
|
|
843
|
-
const c =
|
|
854
|
+
} else if (typeof h == "string") {
|
|
855
|
+
const c = document.createElement(h);
|
|
856
|
+
c.value = p, c.addEventListener("change", () => l(c.value)), d.appendChild(c);
|
|
857
|
+
} else if (typeof h == "function") {
|
|
858
|
+
const c = h({ row: e, value: p, field: i.field, column: i, commit: l, cancel: a });
|
|
844
859
|
typeof c == "string" ? d.innerHTML = c : d.appendChild(c);
|
|
845
|
-
} else if (
|
|
860
|
+
} else if (h && typeof h == "object") {
|
|
846
861
|
const c = document.createElement("div");
|
|
847
|
-
c.setAttribute("data-external-editor", ""), c.setAttribute("data-field",
|
|
848
|
-
const u = { row: e, value:
|
|
849
|
-
if (
|
|
862
|
+
c.setAttribute("data-external-editor", ""), c.setAttribute("data-field", i.field), d.appendChild(c);
|
|
863
|
+
const u = { row: e, value: p, field: i.field, column: i, commit: l, cancel: a };
|
|
864
|
+
if (h.mount)
|
|
850
865
|
try {
|
|
851
|
-
|
|
866
|
+
h.mount({ placeholder: c, context: u, spec: h });
|
|
852
867
|
} catch {
|
|
853
868
|
}
|
|
854
869
|
else
|
|
855
870
|
t.dispatchEvent(
|
|
856
|
-
new CustomEvent("mount-external-editor", { detail: { placeholder: c, spec:
|
|
871
|
+
new CustomEvent("mount-external-editor", { detail: { placeholder: c, spec: h, context: u } })
|
|
857
872
|
);
|
|
858
873
|
}
|
|
859
874
|
}
|
|
860
|
-
function
|
|
861
|
-
!t.sortState || t.sortState.field !== e.field ? (t.sortState || (t.__originalOrder = t._rows.slice()),
|
|
862
|
-
|
|
875
|
+
function ne(t, e) {
|
|
876
|
+
!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((i) => i.__epoch = -1), t._rows = t.__originalOrder.slice(), q(t), t.headerRowEl?.querySelectorAll('[role="columnheader"].sortable')?.forEach((i) => {
|
|
877
|
+
i.getAttribute("aria-sort") ? (i.getAttribute("aria-sort") === "ascending" || i.getAttribute("aria-sort") === "descending") && (t.sortState || i.setAttribute("aria-sort", "none")) : i.setAttribute("aria-sort", "none");
|
|
863
878
|
}), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
864
879
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: 0 } })
|
|
865
880
|
), t.requestStateChange?.());
|
|
866
881
|
}
|
|
867
|
-
function
|
|
882
|
+
function ie(t, e, o) {
|
|
868
883
|
t.sortState = { field: e.field, direction: o };
|
|
869
|
-
const
|
|
870
|
-
t._rows.sort((
|
|
884
|
+
const i = e.sortComparator || ((n, s) => n == null && s == null ? 0 : n == null ? -1 : s == null || n > s ? 1 : n < s ? -1 : 0);
|
|
885
|
+
t._rows.sort((n, s) => i(n[e.field], s[e.field], n, s) * o), t.__rowRenderEpoch++, t.rowPool.forEach((n) => n.__epoch = -1), q(t), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
871
886
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: o } })
|
|
872
887
|
), t.requestStateChange?.();
|
|
873
888
|
}
|
|
874
|
-
function
|
|
889
|
+
function De(t, e) {
|
|
875
890
|
typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
|
|
876
891
|
}
|
|
877
|
-
function
|
|
892
|
+
function q(t) {
|
|
878
893
|
t.headerRowEl = t.findHeaderRow();
|
|
879
894
|
const e = t.headerRowEl;
|
|
880
|
-
e.innerHTML = "", t.visibleColumns.forEach((o,
|
|
881
|
-
const
|
|
882
|
-
|
|
895
|
+
e.innerHTML = "", t.visibleColumns.forEach((o, i) => {
|
|
896
|
+
const n = document.createElement("div");
|
|
897
|
+
n.className = "cell", j(n, "header-cell"), n.setAttribute("role", "columnheader"), n.setAttribute("aria-colindex", String(i + 1)), n.setAttribute("data-field", o.field), n.setAttribute("data-col", String(i));
|
|
883
898
|
const s = o.__headerTemplate;
|
|
884
|
-
if (s) Array.from(s.childNodes).forEach((r) =>
|
|
899
|
+
if (s) Array.from(s.childNodes).forEach((r) => n.appendChild(r.cloneNode(!0)));
|
|
885
900
|
else {
|
|
886
901
|
const r = o.header || o.field, l = document.createElement("span");
|
|
887
|
-
l.textContent = r,
|
|
902
|
+
l.textContent = r, n.appendChild(l);
|
|
888
903
|
}
|
|
889
904
|
if (o.sortable) {
|
|
890
|
-
|
|
905
|
+
n.classList.add("sortable"), n.tabIndex = 0;
|
|
891
906
|
const r = document.createElement("span");
|
|
892
|
-
|
|
893
|
-
const l = t.sortState?.field === o.field ? t.sortState.direction : 0, a = { ...
|
|
894
|
-
|
|
895
|
-
t.resizeController?.isResizing || t.dispatchHeaderClick?.(
|
|
896
|
-
}),
|
|
897
|
-
if (
|
|
898
|
-
if (
|
|
899
|
-
|
|
907
|
+
j(r, "sort-indicator"), r.style.opacity = "0.6";
|
|
908
|
+
const l = t.sortState?.field === o.field ? t.sortState.direction : 0, a = { ...H, ...t.icons }, d = l === 1 ? a.sortAsc : l === -1 ? a.sortDesc : a.sortNone;
|
|
909
|
+
De(r, d), n.appendChild(r), n.setAttribute("aria-sort", l === 0 ? "none" : l === 1 ? "ascending" : "descending"), n.addEventListener("click", (f) => {
|
|
910
|
+
t.resizeController?.isResizing || t.dispatchHeaderClick?.(f, i, n) || ne(t, o);
|
|
911
|
+
}), n.addEventListener("keydown", (f) => {
|
|
912
|
+
if (f.key === "Enter" || f.key === " ") {
|
|
913
|
+
if (f.preventDefault(), t.dispatchHeaderClick?.(f, i, n)) return;
|
|
914
|
+
ne(t, o);
|
|
900
915
|
}
|
|
901
916
|
});
|
|
902
917
|
}
|
|
903
918
|
if (o.resizable) {
|
|
904
|
-
|
|
919
|
+
n.style.position = "relative";
|
|
905
920
|
const r = document.createElement("div");
|
|
906
921
|
r.className = "resize-handle", r.setAttribute("aria-hidden", "true"), r.addEventListener("mousedown", (l) => {
|
|
907
|
-
l.stopPropagation(), l.preventDefault(), t.resizeController.start(l,
|
|
908
|
-
}),
|
|
922
|
+
l.stopPropagation(), l.preventDefault(), t.resizeController.start(l, i, n);
|
|
923
|
+
}), n.appendChild(r);
|
|
909
924
|
}
|
|
910
|
-
e.appendChild(
|
|
911
|
-
})
|
|
912
|
-
try {
|
|
913
|
-
const o = t.shadowRoot;
|
|
914
|
-
o && o.querySelectorAll(".header-group-row .cell").forEach((i) => {
|
|
915
|
-
i.getAttribute("data-group") && i.classList.add("grouped");
|
|
916
|
-
});
|
|
917
|
-
} catch {
|
|
918
|
-
}
|
|
919
|
-
e.querySelectorAll(".cell.sortable").forEach((o) => {
|
|
925
|
+
e.appendChild(n);
|
|
926
|
+
}), e.querySelectorAll(".cell.sortable").forEach((o) => {
|
|
920
927
|
o.getAttribute("aria-sort") || o.setAttribute("aria-sort", "none");
|
|
921
928
|
}), e.children.length > 0 ? (e.setAttribute("role", "row"), e.setAttribute("aria-rowindex", "1")) : (e.removeAttribute("role"), e.removeAttribute("aria-rowindex"));
|
|
922
929
|
}
|
|
923
|
-
function
|
|
924
|
-
let e = null, o = null,
|
|
930
|
+
function Ne(t) {
|
|
931
|
+
let e = null, o = null, i = null, n = null;
|
|
925
932
|
const s = (a) => {
|
|
926
933
|
if (!e) return;
|
|
927
|
-
const d = a.clientX - e.startX,
|
|
928
|
-
|
|
934
|
+
const d = a.clientX - e.startX, f = Math.max(40, e.startWidth + d), h = t.visibleColumns[e.colIndex];
|
|
935
|
+
h.width = f, h.__userResized = !0, h.__renderedWidth = f, o == null && (o = requestAnimationFrame(() => {
|
|
929
936
|
o = null, t.updateTemplate?.();
|
|
930
937
|
})), t.dispatchEvent(
|
|
931
|
-
new CustomEvent("column-resize", { detail: { field:
|
|
938
|
+
new CustomEvent("column-resize", { detail: { field: h.field, width: f } })
|
|
932
939
|
);
|
|
933
940
|
};
|
|
934
941
|
let r = !1;
|
|
@@ -936,26 +943,26 @@ function ze(t) {
|
|
|
936
943
|
const a = e !== null;
|
|
937
944
|
a && (r = !0, requestAnimationFrame(() => {
|
|
938
945
|
r = !1;
|
|
939
|
-
})), window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", l),
|
|
946
|
+
})), window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", l), i !== null && (document.documentElement.style.cursor = i, i = null), n !== null && (document.body.style.userSelect = n, n = null), e = null, a && t.requestStateChange && t.requestStateChange();
|
|
940
947
|
};
|
|
941
948
|
return {
|
|
942
949
|
get isResizing() {
|
|
943
950
|
return e !== null || r;
|
|
944
951
|
},
|
|
945
|
-
start(a, d,
|
|
952
|
+
start(a, d, f) {
|
|
946
953
|
a.preventDefault();
|
|
947
|
-
const
|
|
948
|
-
e = { startX: a.clientX, colIndex: d, startWidth:
|
|
954
|
+
const h = f.getBoundingClientRect();
|
|
955
|
+
e = { startX: a.clientX, colIndex: d, startWidth: h.width }, window.addEventListener("mousemove", s), window.addEventListener("mouseup", l), i === null && (i = document.documentElement.style.cursor), document.documentElement.style.cursor = "e-resize", n === null && (n = document.body.style.userSelect), document.body.style.userSelect = "none";
|
|
949
956
|
},
|
|
950
957
|
dispose() {
|
|
951
958
|
l();
|
|
952
959
|
}
|
|
953
960
|
};
|
|
954
961
|
}
|
|
955
|
-
function
|
|
962
|
+
function V(t) {
|
|
956
963
|
return t ? typeof t == "string" ? t : t.outerHTML : "";
|
|
957
964
|
}
|
|
958
|
-
function
|
|
965
|
+
function qe() {
|
|
959
966
|
return {
|
|
960
967
|
toolPanels: /* @__PURE__ */ new Map(),
|
|
961
968
|
headerContents: /* @__PURE__ */ new Map(),
|
|
@@ -972,44 +979,44 @@ function De() {
|
|
|
972
979
|
activePanelCleanup: null
|
|
973
980
|
};
|
|
974
981
|
}
|
|
975
|
-
function
|
|
982
|
+
function Be(t, e) {
|
|
976
983
|
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
984
|
}
|
|
978
|
-
function
|
|
979
|
-
const
|
|
980
|
-
let
|
|
985
|
+
function Ie(t, e, o = "☰") {
|
|
986
|
+
const i = t?.header?.title ?? "", n = !!i, s = V(o), r = t?.header?.toolbarButtons ?? [], l = r.length > 0, a = e.toolbarButtons.size > 0, d = e.lightDomButtons.length > 0, f = e.toolPanels.size > 0, p = (l || a || d) && f, c = [...r].sort((w, v) => (w.order ?? 100) - (v.order ?? 100)), u = [...e.toolbarButtons.values()].sort((w, v) => (w.order ?? 100) - (v.order ?? 100));
|
|
987
|
+
let b = "";
|
|
981
988
|
for (const w of c)
|
|
982
|
-
w.icon && w.action && (
|
|
989
|
+
w.icon && w.action && (b += `<button class="tbw-toolbar-btn" data-btn="${w.id}" title="${w.label}" aria-label="${w.label}"${w.disabled ? " disabled" : ""}>${w.icon}</button>`);
|
|
983
990
|
for (const w of u)
|
|
984
|
-
w.icon && w.action && (
|
|
991
|
+
w.icon && w.action && (b += `<button class="tbw-toolbar-btn" data-btn="${w.id}" title="${w.label}" aria-label="${w.label}"${w.disabled ? " disabled" : ""}>${w.icon}</button>`);
|
|
985
992
|
for (const w of c)
|
|
986
|
-
(w.element || w.render) && (
|
|
993
|
+
(w.element || w.render) && (b += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${w.id}"></div>`);
|
|
987
994
|
for (const w of u)
|
|
988
|
-
(w.element || w.render) && (
|
|
989
|
-
if (d && (
|
|
995
|
+
(w.element || w.render) && (b += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${w.id}"></div>`);
|
|
996
|
+
if (d && (b += '<slot name="toolbar"></slot>'), p && (b += '<div class="tbw-toolbar-separator"></div>'), f) {
|
|
990
997
|
const w = e.isPanelOpen;
|
|
991
|
-
|
|
998
|
+
b += `<button class="tbw-toolbar-btn${w ? " active" : ""}" data-panel-toggle title="Settings" aria-label="Toggle settings panel" aria-pressed="${w}" aria-controls="tbw-tool-panel">${s}</button>`;
|
|
992
999
|
}
|
|
993
1000
|
return `
|
|
994
1001
|
<div class="tbw-shell-header" part="shell-header" role="presentation">
|
|
995
|
-
${
|
|
1002
|
+
${n ? `<div class="tbw-shell-title">${i}</div>` : ""}
|
|
996
1003
|
<div class="tbw-shell-content" part="shell-content" role="presentation">
|
|
997
1004
|
<slot name="header-content"></slot>
|
|
998
1005
|
</div>
|
|
999
1006
|
<div class="tbw-shell-toolbar" part="shell-toolbar" role="presentation">
|
|
1000
|
-
${
|
|
1007
|
+
${b}
|
|
1001
1008
|
</div>
|
|
1002
1009
|
</div>
|
|
1003
1010
|
`;
|
|
1004
1011
|
}
|
|
1005
|
-
function $e(t, e, o,
|
|
1006
|
-
const
|
|
1007
|
-
let
|
|
1012
|
+
function $e(t, e, o, i) {
|
|
1013
|
+
const n = t?.toolPanel?.position ?? "right", s = e.toolPanels.size > 0, r = e.isPanelOpen, l = V(i?.expand ?? H.expand), a = V(i?.collapse ?? H.collapse), d = [...e.toolPanels.values()].sort((u, b) => (u.order ?? 100) - (b.order ?? 100)), f = d.length === 1;
|
|
1014
|
+
let h = "";
|
|
1008
1015
|
for (const u of d) {
|
|
1009
|
-
const
|
|
1010
|
-
|
|
1011
|
-
<div class="${`tbw-accordion-section${
|
|
1012
|
-
<button class="tbw-accordion-header" aria-expanded="${
|
|
1016
|
+
const b = e.expandedSections.has(u.id), w = u.icon ? `<span class="tbw-accordion-icon">${u.icon}</span>` : "", v = f ? "" : `<span class="tbw-accordion-chevron">${b ? a : l}</span>`;
|
|
1017
|
+
h += `
|
|
1018
|
+
<div class="${`tbw-accordion-section${b ? " expanded" : ""}${f ? " single" : ""}`}" data-section="${u.id}">
|
|
1019
|
+
<button class="tbw-accordion-header" aria-expanded="${b}" aria-controls="tbw-section-${u.id}"${f ? ' aria-disabled="true"' : ""}>
|
|
1013
1020
|
${w}
|
|
1014
1021
|
<span class="tbw-accordion-title">${u.title}</span>
|
|
1015
1022
|
${v}
|
|
@@ -1019,16 +1026,16 @@ function $e(t, e, o, n) {
|
|
|
1019
1026
|
`;
|
|
1020
1027
|
}
|
|
1021
1028
|
const c = s ? `
|
|
1022
|
-
<aside class="tbw-tool-panel${r ? " open" : ""}" part="tool-panel" data-position="${
|
|
1023
|
-
<div class="tbw-tool-panel-resize" data-resize-handle data-handle-position="${
|
|
1029
|
+
<aside class="tbw-tool-panel${r ? " open" : ""}" part="tool-panel" data-position="${n}" role="presentation" id="tbw-tool-panel">
|
|
1030
|
+
<div class="tbw-tool-panel-resize" data-resize-handle data-handle-position="${n === "left" ? "right" : "left"}" aria-hidden="true"></div>
|
|
1024
1031
|
<div class="tbw-tool-panel-content" role="presentation">
|
|
1025
1032
|
<div class="tbw-accordion">
|
|
1026
|
-
${
|
|
1033
|
+
${h}
|
|
1027
1034
|
</div>
|
|
1028
1035
|
</div>
|
|
1029
1036
|
</aside>
|
|
1030
1037
|
` : "";
|
|
1031
|
-
return
|
|
1038
|
+
return n === "left" ? `
|
|
1032
1039
|
<div class="tbw-shell-body">
|
|
1033
1040
|
${c}
|
|
1034
1041
|
<div class="tbw-grid-content">
|
|
@@ -1044,161 +1051,161 @@ function $e(t, e, o, n) {
|
|
|
1044
1051
|
</div>
|
|
1045
1052
|
`;
|
|
1046
1053
|
}
|
|
1047
|
-
function
|
|
1054
|
+
function se(t, e) {
|
|
1048
1055
|
const o = t.querySelector("tbw-grid-header");
|
|
1049
1056
|
if (!o) return;
|
|
1050
1057
|
o.style.display = "none";
|
|
1051
|
-
const
|
|
1052
|
-
e.lightDomHeaderContent = Array.from(
|
|
1058
|
+
const i = o.querySelectorAll("tbw-grid-header-content");
|
|
1059
|
+
e.lightDomHeaderContent = Array.from(i), e.lightDomHeaderContent.forEach((s) => {
|
|
1053
1060
|
s.setAttribute("slot", "header-content");
|
|
1054
1061
|
});
|
|
1055
|
-
const
|
|
1056
|
-
e.lightDomButtons = Array.from(
|
|
1062
|
+
const n = o.querySelectorAll("tbw-grid-tool-button");
|
|
1063
|
+
e.lightDomButtons = Array.from(n), e.lightDomButtons.sort((s, r) => {
|
|
1057
1064
|
const l = parseInt(s.getAttribute("order") ?? "100", 10), a = parseInt(r.getAttribute("order") ?? "100", 10);
|
|
1058
1065
|
return l - a;
|
|
1059
1066
|
}), e.lightDomButtons.forEach((s) => {
|
|
1060
1067
|
s.setAttribute("slot", "toolbar");
|
|
1061
1068
|
});
|
|
1062
1069
|
}
|
|
1063
|
-
function
|
|
1064
|
-
const
|
|
1065
|
-
|
|
1070
|
+
function We(t, e, o, i) {
|
|
1071
|
+
const n = t.querySelector(".tbw-shell-toolbar");
|
|
1072
|
+
n && n.addEventListener("click", (r) => {
|
|
1066
1073
|
const l = r.target;
|
|
1067
1074
|
if (l.closest("[data-panel-toggle]")) {
|
|
1068
|
-
|
|
1075
|
+
i.onPanelToggle();
|
|
1069
1076
|
return;
|
|
1070
1077
|
}
|
|
1071
1078
|
const d = l.closest("[data-btn]");
|
|
1072
1079
|
if (d) {
|
|
1073
|
-
const
|
|
1074
|
-
|
|
1080
|
+
const f = d.getAttribute("data-btn");
|
|
1081
|
+
f && i.onToolbarButtonClick(f);
|
|
1075
1082
|
}
|
|
1076
1083
|
});
|
|
1077
1084
|
const s = t.querySelector(".tbw-accordion");
|
|
1078
1085
|
s && s.addEventListener("click", (r) => {
|
|
1079
1086
|
const a = r.target.closest(".tbw-accordion-header");
|
|
1080
1087
|
if (a) {
|
|
1081
|
-
const
|
|
1082
|
-
|
|
1088
|
+
const f = a.closest("[data-section]")?.getAttribute("data-section");
|
|
1089
|
+
f && i.onSectionToggle(f);
|
|
1083
1090
|
}
|
|
1084
1091
|
});
|
|
1085
1092
|
}
|
|
1086
|
-
function
|
|
1087
|
-
const
|
|
1088
|
-
if (!
|
|
1093
|
+
function Ve(t, e, o) {
|
|
1094
|
+
const i = t.querySelector(".tbw-tool-panel"), n = t.querySelector("[data-resize-handle]"), s = t.querySelector(".tbw-shell-body");
|
|
1095
|
+
if (!i || !n || !s)
|
|
1089
1096
|
return () => {
|
|
1090
1097
|
};
|
|
1091
1098
|
const r = e?.toolPanel?.position ?? "right", l = 200;
|
|
1092
|
-
let a = 0, d = 0,
|
|
1093
|
-
const
|
|
1094
|
-
if (!
|
|
1095
|
-
|
|
1096
|
-
const w = r === "left" ?
|
|
1097
|
-
|
|
1099
|
+
let a = 0, d = 0, f = 0, h = !1;
|
|
1100
|
+
const p = (b) => {
|
|
1101
|
+
if (!h) return;
|
|
1102
|
+
b.preventDefault();
|
|
1103
|
+
const w = r === "left" ? b.clientX - a : a - b.clientX, v = Math.min(f, Math.max(l, d + w));
|
|
1104
|
+
i.style.width = `${v}px`;
|
|
1098
1105
|
}, c = () => {
|
|
1099
|
-
if (!
|
|
1100
|
-
|
|
1101
|
-
const
|
|
1102
|
-
o(
|
|
1103
|
-
}, u = (
|
|
1104
|
-
|
|
1106
|
+
if (!h) return;
|
|
1107
|
+
h = !1, n.classList.remove("resizing"), i.style.transition = "", document.body.style.cursor = "", document.body.style.userSelect = "";
|
|
1108
|
+
const b = i.getBoundingClientRect().width;
|
|
1109
|
+
o(b), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", c);
|
|
1110
|
+
}, u = (b) => {
|
|
1111
|
+
b.preventDefault(), h = !0, a = b.clientX, d = i.getBoundingClientRect().width, f = s.getBoundingClientRect().width - 20, n.classList.add("resizing"), i.style.transition = "none", document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", p), document.addEventListener("mouseup", c);
|
|
1105
1112
|
};
|
|
1106
|
-
return
|
|
1107
|
-
|
|
1113
|
+
return n.addEventListener("mousedown", u), () => {
|
|
1114
|
+
n.removeEventListener("mousedown", u), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", c);
|
|
1108
1115
|
};
|
|
1109
1116
|
}
|
|
1110
|
-
function
|
|
1111
|
-
const
|
|
1112
|
-
for (const
|
|
1113
|
-
const s = t.querySelector(`[data-btn-slot="${
|
|
1117
|
+
function Ge(t, e, o) {
|
|
1118
|
+
const i = [...e?.header?.toolbarButtons ?? [], ...o.toolbarButtons.values()];
|
|
1119
|
+
for (const n of i) {
|
|
1120
|
+
const s = t.querySelector(`[data-btn-slot="${n.id}"]`);
|
|
1114
1121
|
if (!s) continue;
|
|
1115
|
-
const r = o.toolbarButtonCleanups.get(
|
|
1116
|
-
if (r && (r(), o.toolbarButtonCleanups.delete(
|
|
1117
|
-
s.appendChild(
|
|
1118
|
-
else if (
|
|
1119
|
-
const l =
|
|
1120
|
-
l && o.toolbarButtonCleanups.set(
|
|
1122
|
+
const r = o.toolbarButtonCleanups.get(n.id);
|
|
1123
|
+
if (r && (r(), o.toolbarButtonCleanups.delete(n.id)), n.element)
|
|
1124
|
+
s.appendChild(n.element);
|
|
1125
|
+
else if (n.render) {
|
|
1126
|
+
const l = n.render(s);
|
|
1127
|
+
l && o.toolbarButtonCleanups.set(n.id, l);
|
|
1121
1128
|
}
|
|
1122
1129
|
}
|
|
1123
1130
|
}
|
|
1124
|
-
function
|
|
1131
|
+
function he(t, e) {
|
|
1125
1132
|
const o = t.querySelector(".tbw-shell-content");
|
|
1126
1133
|
if (!o) return;
|
|
1127
|
-
const
|
|
1128
|
-
for (const s of
|
|
1134
|
+
const i = [...e.headerContents.values()].sort((s, r) => (s.order ?? 100) - (r.order ?? 100)), n = o.querySelector('slot[name="header-content"]');
|
|
1135
|
+
for (const s of i) {
|
|
1129
1136
|
const r = e.headerContentCleanups.get(s.id);
|
|
1130
1137
|
r && (r(), e.headerContentCleanups.delete(s.id));
|
|
1131
1138
|
let l = o.querySelector(`[data-header-content="${s.id}"]`);
|
|
1132
|
-
l || (l = document.createElement("div"), l.setAttribute("data-header-content", s.id),
|
|
1139
|
+
l || (l = document.createElement("div"), l.setAttribute("data-header-content", s.id), n ? o.insertBefore(l, n) : o.appendChild(l));
|
|
1133
1140
|
const a = s.render(l);
|
|
1134
1141
|
a && e.headerContentCleanups.set(s.id, a);
|
|
1135
1142
|
}
|
|
1136
1143
|
}
|
|
1137
|
-
function
|
|
1144
|
+
function Fe(t, e, o) {
|
|
1138
1145
|
if (!e.isPanelOpen) return;
|
|
1139
|
-
const
|
|
1146
|
+
const i = V(o?.expand ?? H.expand), n = V(o?.collapse ?? H.collapse);
|
|
1140
1147
|
for (const [s, r] of e.toolPanels) {
|
|
1141
1148
|
const l = e.expandedSections.has(s), a = t.querySelector(`[data-section="${s}"]`), d = a?.querySelector(".tbw-accordion-content");
|
|
1142
1149
|
if (!a || !d) continue;
|
|
1143
1150
|
a.classList.toggle("expanded", l);
|
|
1144
|
-
const
|
|
1145
|
-
|
|
1146
|
-
const
|
|
1147
|
-
if (
|
|
1151
|
+
const f = a.querySelector(".tbw-accordion-header");
|
|
1152
|
+
f && f.setAttribute("aria-expanded", String(l));
|
|
1153
|
+
const h = a.querySelector(".tbw-accordion-chevron");
|
|
1154
|
+
if (h && (h.innerHTML = l ? n : i), l) {
|
|
1148
1155
|
if (d.children.length === 0) {
|
|
1149
|
-
const
|
|
1150
|
-
|
|
1156
|
+
const p = r.render(d);
|
|
1157
|
+
p && e.panelCleanups.set(s, p);
|
|
1151
1158
|
}
|
|
1152
1159
|
} else {
|
|
1153
|
-
const
|
|
1154
|
-
|
|
1160
|
+
const p = e.panelCleanups.get(s);
|
|
1161
|
+
p && (p(), e.panelCleanups.delete(s)), d.innerHTML = "";
|
|
1155
1162
|
}
|
|
1156
1163
|
}
|
|
1157
1164
|
}
|
|
1158
|
-
function
|
|
1165
|
+
function re(t, e) {
|
|
1159
1166
|
const o = t.querySelector("[data-panel-toggle]");
|
|
1160
1167
|
o && (o.classList.toggle("active", e.isPanelOpen), o.setAttribute("aria-pressed", String(e.isPanelOpen)));
|
|
1161
1168
|
}
|
|
1162
|
-
function
|
|
1169
|
+
function le(t, e) {
|
|
1163
1170
|
const o = t.querySelector(".tbw-tool-panel");
|
|
1164
1171
|
o && (o.classList.toggle("open", e.isPanelOpen), e.isPanelOpen || (o.style.width = ""));
|
|
1165
1172
|
}
|
|
1166
|
-
function
|
|
1173
|
+
function Ue(t, e) {
|
|
1167
1174
|
const o = [];
|
|
1168
|
-
for (const
|
|
1175
|
+
for (const i of t?.header?.toolbarButtons ?? [])
|
|
1169
1176
|
o.push({
|
|
1170
|
-
id:
|
|
1171
|
-
label:
|
|
1172
|
-
disabled:
|
|
1177
|
+
id: i.id,
|
|
1178
|
+
label: i.label,
|
|
1179
|
+
disabled: i.disabled ?? !1,
|
|
1173
1180
|
source: "config"
|
|
1174
1181
|
});
|
|
1175
|
-
for (const
|
|
1182
|
+
for (const i of e.toolbarButtons.values())
|
|
1176
1183
|
o.push({
|
|
1177
|
-
id:
|
|
1178
|
-
label:
|
|
1179
|
-
disabled:
|
|
1184
|
+
id: i.id,
|
|
1185
|
+
label: i.label,
|
|
1186
|
+
disabled: i.disabled ?? !1,
|
|
1180
1187
|
source: "config"
|
|
1181
1188
|
});
|
|
1182
|
-
for (let
|
|
1183
|
-
const s = e.lightDomButtons[
|
|
1189
|
+
for (let i = 0; i < e.lightDomButtons.length; i++) {
|
|
1190
|
+
const s = e.lightDomButtons[i].querySelector("button");
|
|
1184
1191
|
o.push({
|
|
1185
|
-
id: `light-dom-${
|
|
1192
|
+
id: `light-dom-${i}`,
|
|
1186
1193
|
label: s?.getAttribute("title") ?? s?.getAttribute("aria-label") ?? "",
|
|
1187
1194
|
disabled: s?.disabled ?? !1,
|
|
1188
1195
|
source: "light-dom"
|
|
1189
1196
|
});
|
|
1190
1197
|
}
|
|
1191
|
-
for (const
|
|
1198
|
+
for (const i of e.toolPanels.values())
|
|
1192
1199
|
o.push({
|
|
1193
|
-
id: `panel-toggle-${
|
|
1194
|
-
label:
|
|
1200
|
+
id: `panel-toggle-${i.id}`,
|
|
1201
|
+
label: i.tooltip ?? i.title,
|
|
1195
1202
|
disabled: !1,
|
|
1196
1203
|
source: "panel-toggle",
|
|
1197
|
-
panelId:
|
|
1204
|
+
panelId: i.id
|
|
1198
1205
|
});
|
|
1199
1206
|
return o;
|
|
1200
1207
|
}
|
|
1201
|
-
function
|
|
1208
|
+
function Xe(t) {
|
|
1202
1209
|
for (const e of t.headerContentCleanups.values())
|
|
1203
1210
|
e();
|
|
1204
1211
|
t.headerContentCleanups.clear(), t.activePanelCleanup && (t.activePanelCleanup(), t.activePanelCleanup = null);
|
|
@@ -1206,7 +1213,142 @@ function Fe(t) {
|
|
|
1206
1213
|
e();
|
|
1207
1214
|
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;
|
|
1208
1215
|
}
|
|
1209
|
-
|
|
1216
|
+
function Ke(t, e) {
|
|
1217
|
+
let o = !1;
|
|
1218
|
+
const i = {
|
|
1219
|
+
get isInitialized() {
|
|
1220
|
+
return o;
|
|
1221
|
+
},
|
|
1222
|
+
setInitialized(n) {
|
|
1223
|
+
o = n;
|
|
1224
|
+
},
|
|
1225
|
+
get isPanelOpen() {
|
|
1226
|
+
return t.isPanelOpen;
|
|
1227
|
+
},
|
|
1228
|
+
get activePanel() {
|
|
1229
|
+
return t.isPanelOpen && t.expandedSections.size > 0 ? [...t.expandedSections][0] : null;
|
|
1230
|
+
},
|
|
1231
|
+
get expandedSections() {
|
|
1232
|
+
return [...t.expandedSections];
|
|
1233
|
+
},
|
|
1234
|
+
openToolPanel() {
|
|
1235
|
+
if (t.isPanelOpen) return;
|
|
1236
|
+
if (t.toolPanels.size === 0) {
|
|
1237
|
+
console.warn("[tbw-grid] No tool panels registered");
|
|
1238
|
+
return;
|
|
1239
|
+
}
|
|
1240
|
+
if (t.isPanelOpen = !0, t.expandedSections.size === 0 && t.toolPanels.size > 0) {
|
|
1241
|
+
const r = [...t.toolPanels.values()].sort((l, a) => (l.order ?? 100) - (a.order ?? 100))[0];
|
|
1242
|
+
r && t.expandedSections.add(r.id);
|
|
1243
|
+
}
|
|
1244
|
+
const n = e.getShadow();
|
|
1245
|
+
re(n, t), le(n, t), Fe(n, t, e.getAccordionIcons()), e.emit("tool-panel-open", { sections: i.expandedSections });
|
|
1246
|
+
},
|
|
1247
|
+
closeToolPanel() {
|
|
1248
|
+
if (!t.isPanelOpen) return;
|
|
1249
|
+
for (const s of t.panelCleanups.values())
|
|
1250
|
+
s();
|
|
1251
|
+
t.panelCleanups.clear(), t.activePanelCleanup && (t.activePanelCleanup(), t.activePanelCleanup = null);
|
|
1252
|
+
for (const s of t.toolPanels.values())
|
|
1253
|
+
s.onClose?.();
|
|
1254
|
+
t.isPanelOpen = !1;
|
|
1255
|
+
const n = e.getShadow();
|
|
1256
|
+
re(n, t), le(n, t), e.emit("tool-panel-close", {});
|
|
1257
|
+
},
|
|
1258
|
+
toggleToolPanel() {
|
|
1259
|
+
t.isPanelOpen ? i.closeToolPanel() : i.openToolPanel();
|
|
1260
|
+
},
|
|
1261
|
+
toggleToolPanelSection(n) {
|
|
1262
|
+
const s = t.toolPanels.get(n);
|
|
1263
|
+
if (!s) {
|
|
1264
|
+
console.warn(`[tbw-grid] Tool panel section "${n}" not found`);
|
|
1265
|
+
return;
|
|
1266
|
+
}
|
|
1267
|
+
if (t.toolPanels.size === 1)
|
|
1268
|
+
return;
|
|
1269
|
+
const r = e.getShadow(), l = t.expandedSections.has(n);
|
|
1270
|
+
if (l) {
|
|
1271
|
+
const a = t.panelCleanups.get(n);
|
|
1272
|
+
a && (a(), t.panelCleanups.delete(n)), s.onClose?.(), t.expandedSections.delete(n), X(r, n, !1);
|
|
1273
|
+
} else {
|
|
1274
|
+
for (const [a, d] of t.toolPanels)
|
|
1275
|
+
if (a !== n && t.expandedSections.has(a)) {
|
|
1276
|
+
const f = t.panelCleanups.get(a);
|
|
1277
|
+
f && (f(), t.panelCleanups.delete(a)), d.onClose?.(), t.expandedSections.delete(a), X(r, a, !1);
|
|
1278
|
+
const h = r.querySelector(`[data-section="${a}"] .tbw-accordion-content`);
|
|
1279
|
+
h && (h.innerHTML = "");
|
|
1280
|
+
}
|
|
1281
|
+
t.expandedSections.add(n), X(r, n, !0), je(r, t, n);
|
|
1282
|
+
}
|
|
1283
|
+
e.emit("tool-panel-section-toggle", { id: n, expanded: !l });
|
|
1284
|
+
},
|
|
1285
|
+
getToolPanels() {
|
|
1286
|
+
return [...t.toolPanels.values()];
|
|
1287
|
+
},
|
|
1288
|
+
registerToolPanel(n) {
|
|
1289
|
+
if (t.toolPanels.has(n.id)) {
|
|
1290
|
+
console.warn(`[tbw-grid] Tool panel "${n.id}" already registered`);
|
|
1291
|
+
return;
|
|
1292
|
+
}
|
|
1293
|
+
t.toolPanels.set(n.id, n), o && e.refreshShellHeader();
|
|
1294
|
+
},
|
|
1295
|
+
unregisterToolPanel(n) {
|
|
1296
|
+
if (t.expandedSections.has(n)) {
|
|
1297
|
+
const s = t.panelCleanups.get(n);
|
|
1298
|
+
s && (s(), t.panelCleanups.delete(n)), t.expandedSections.delete(n);
|
|
1299
|
+
}
|
|
1300
|
+
t.toolPanels.delete(n), o && e.refreshShellHeader();
|
|
1301
|
+
},
|
|
1302
|
+
getHeaderContents() {
|
|
1303
|
+
return [...t.headerContents.values()];
|
|
1304
|
+
},
|
|
1305
|
+
registerHeaderContent(n) {
|
|
1306
|
+
if (t.headerContents.has(n.id)) {
|
|
1307
|
+
console.warn(`[tbw-grid] Header content "${n.id}" already registered`);
|
|
1308
|
+
return;
|
|
1309
|
+
}
|
|
1310
|
+
t.headerContents.set(n.id, n), o && he(e.getShadow(), t);
|
|
1311
|
+
},
|
|
1312
|
+
unregisterHeaderContent(n) {
|
|
1313
|
+
const s = t.headerContentCleanups.get(n);
|
|
1314
|
+
s && (s(), t.headerContentCleanups.delete(n)), t.headerContents.get(n)?.onDestroy?.(), t.headerContents.delete(n), e.getShadow().querySelector(`[data-header-content="${n}"]`)?.remove();
|
|
1315
|
+
},
|
|
1316
|
+
getToolbarButtons() {
|
|
1317
|
+
return Ue(e.getShellConfig(), t);
|
|
1318
|
+
},
|
|
1319
|
+
registerToolbarButton(n) {
|
|
1320
|
+
if (t.toolbarButtons.has(n.id)) {
|
|
1321
|
+
console.warn(`[tbw-grid] Toolbar button "${n.id}" already registered`);
|
|
1322
|
+
return;
|
|
1323
|
+
}
|
|
1324
|
+
t.toolbarButtons.set(n.id, n), o && e.refreshShellHeader();
|
|
1325
|
+
},
|
|
1326
|
+
unregisterToolbarButton(n) {
|
|
1327
|
+
const s = t.toolbarButtonCleanups.get(n);
|
|
1328
|
+
s && (s(), t.toolbarButtonCleanups.delete(n)), t.toolbarButtons.delete(n), o && e.refreshShellHeader();
|
|
1329
|
+
},
|
|
1330
|
+
setToolbarButtonDisabled(n, s) {
|
|
1331
|
+
const r = t.toolbarButtons.get(n);
|
|
1332
|
+
r && (r.disabled = s);
|
|
1333
|
+
const l = e.getShadow().querySelector(`[data-btn="${n}"]`);
|
|
1334
|
+
l && (l.disabled = s);
|
|
1335
|
+
}
|
|
1336
|
+
};
|
|
1337
|
+
return i;
|
|
1338
|
+
}
|
|
1339
|
+
function X(t, e, o) {
|
|
1340
|
+
const i = t.querySelector(`[data-section="${e}"]`);
|
|
1341
|
+
i && i.classList.toggle("expanded", o);
|
|
1342
|
+
}
|
|
1343
|
+
function je(t, e, o) {
|
|
1344
|
+
const i = e.toolPanels.get(o);
|
|
1345
|
+
if (!i?.render) return;
|
|
1346
|
+
const n = t.querySelector(`[data-section="${o}"] .tbw-accordion-content`);
|
|
1347
|
+
if (!n) return;
|
|
1348
|
+
const s = i.render(n);
|
|
1349
|
+
s && e.panelCleanups.set(o, s);
|
|
1350
|
+
}
|
|
1351
|
+
class Ye {
|
|
1210
1352
|
constructor(e) {
|
|
1211
1353
|
this.grid = e;
|
|
1212
1354
|
}
|
|
@@ -1232,14 +1374,14 @@ class Ue {
|
|
|
1232
1374
|
*/
|
|
1233
1375
|
attach(e) {
|
|
1234
1376
|
if (this.pluginMap.set(e.constructor, e), this.plugins.push(e), e.cellRenderers)
|
|
1235
|
-
for (const [o,
|
|
1236
|
-
this.cellRenderers.set(o,
|
|
1377
|
+
for (const [o, i] of Object.entries(e.cellRenderers))
|
|
1378
|
+
this.cellRenderers.set(o, i);
|
|
1237
1379
|
if (e.headerRenderers)
|
|
1238
|
-
for (const [o,
|
|
1239
|
-
this.headerRenderers.set(o,
|
|
1380
|
+
for (const [o, i] of Object.entries(e.headerRenderers))
|
|
1381
|
+
this.headerRenderers.set(o, i);
|
|
1240
1382
|
if (e.cellEditors)
|
|
1241
|
-
for (const [o,
|
|
1242
|
-
this.cellEditors.set(o,
|
|
1383
|
+
for (const [o, i] of Object.entries(e.cellEditors))
|
|
1384
|
+
this.cellEditors.set(o, i);
|
|
1243
1385
|
e.attach(this.grid);
|
|
1244
1386
|
}
|
|
1245
1387
|
/**
|
|
@@ -1299,14 +1441,14 @@ class Ue {
|
|
|
1299
1441
|
return this.plugins.filter((e) => e.styles).map((e) => e.styles).join(`
|
|
1300
1442
|
`);
|
|
1301
1443
|
}
|
|
1302
|
-
//
|
|
1444
|
+
// #region Hook execution methods
|
|
1303
1445
|
/**
|
|
1304
1446
|
* Execute processRows hook on all plugins.
|
|
1305
1447
|
*/
|
|
1306
1448
|
processRows(e) {
|
|
1307
1449
|
let o = [...e];
|
|
1308
|
-
for (const
|
|
1309
|
-
|
|
1450
|
+
for (const i of this.plugins)
|
|
1451
|
+
i.processRows && (o = i.processRows(o));
|
|
1310
1452
|
return o;
|
|
1311
1453
|
}
|
|
1312
1454
|
/**
|
|
@@ -1314,8 +1456,8 @@ class Ue {
|
|
|
1314
1456
|
*/
|
|
1315
1457
|
processColumns(e) {
|
|
1316
1458
|
let o = [...e];
|
|
1317
|
-
for (const
|
|
1318
|
-
|
|
1459
|
+
for (const i of this.plugins)
|
|
1460
|
+
i.processColumns && (o = i.processColumns(o));
|
|
1319
1461
|
return o;
|
|
1320
1462
|
}
|
|
1321
1463
|
/**
|
|
@@ -1356,33 +1498,50 @@ class Ue {
|
|
|
1356
1498
|
*/
|
|
1357
1499
|
getExtraHeightBefore(e) {
|
|
1358
1500
|
let o = 0;
|
|
1359
|
-
for (const
|
|
1360
|
-
typeof
|
|
1501
|
+
for (const i of this.plugins)
|
|
1502
|
+
typeof i.getExtraHeightBefore == "function" && (o += i.getExtraHeightBefore(e));
|
|
1361
1503
|
return o;
|
|
1362
1504
|
}
|
|
1363
1505
|
/**
|
|
1364
1506
|
* Adjust the virtualization start index based on plugin needs.
|
|
1365
1507
|
* Returns the minimum start index from all plugins.
|
|
1366
1508
|
*/
|
|
1367
|
-
adjustVirtualStart(e, o,
|
|
1368
|
-
let
|
|
1509
|
+
adjustVirtualStart(e, o, i) {
|
|
1510
|
+
let n = e;
|
|
1369
1511
|
for (const s of this.plugins)
|
|
1370
1512
|
if (typeof s.adjustVirtualStart == "function") {
|
|
1371
|
-
const r = s.adjustVirtualStart(e, o,
|
|
1372
|
-
r <
|
|
1513
|
+
const r = s.adjustVirtualStart(e, o, i);
|
|
1514
|
+
r < n && (n = r);
|
|
1373
1515
|
}
|
|
1374
|
-
return
|
|
1516
|
+
return n;
|
|
1375
1517
|
}
|
|
1376
1518
|
/**
|
|
1377
1519
|
* Execute renderRow hook on all plugins.
|
|
1378
1520
|
* Returns true if any plugin handled the row.
|
|
1379
1521
|
*/
|
|
1380
|
-
renderRow(e, o,
|
|
1381
|
-
for (const
|
|
1382
|
-
if (
|
|
1522
|
+
renderRow(e, o, i) {
|
|
1523
|
+
for (const n of this.plugins)
|
|
1524
|
+
if (n.renderRow?.(e, o, i))
|
|
1383
1525
|
return !0;
|
|
1384
1526
|
return !1;
|
|
1385
1527
|
}
|
|
1528
|
+
/**
|
|
1529
|
+
* Query all plugins with a generic query and collect responses.
|
|
1530
|
+
* This enables inter-plugin communication without the core knowing plugin-specific concepts.
|
|
1531
|
+
*
|
|
1532
|
+
* Common query types are defined in PLUGIN_QUERIES, but plugins can define their own.
|
|
1533
|
+
*
|
|
1534
|
+
* @param query - The query object containing type and context
|
|
1535
|
+
* @returns Array of non-undefined responses from plugins
|
|
1536
|
+
*/
|
|
1537
|
+
queryPlugins(e) {
|
|
1538
|
+
const o = [];
|
|
1539
|
+
for (const i of this.plugins) {
|
|
1540
|
+
const n = i.onPluginQuery?.(e);
|
|
1541
|
+
n !== void 0 && o.push(n);
|
|
1542
|
+
}
|
|
1543
|
+
return o;
|
|
1544
|
+
}
|
|
1386
1545
|
/**
|
|
1387
1546
|
* Execute onKeyDown hook on all plugins.
|
|
1388
1547
|
* Returns true if any plugin handled the event.
|
|
@@ -1460,18 +1619,26 @@ class Ue {
|
|
|
1460
1619
|
return !0;
|
|
1461
1620
|
return !1;
|
|
1462
1621
|
}
|
|
1622
|
+
// #endregion
|
|
1623
|
+
// #region Scroll Boundary Hooks
|
|
1463
1624
|
/**
|
|
1464
|
-
* Collect
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1625
|
+
* Collect horizontal scroll boundary offsets from all plugins.
|
|
1626
|
+
* Combines offsets from all plugins that report them.
|
|
1627
|
+
*
|
|
1628
|
+
* @param rowEl - The row element (optional, for calculating widths from rendered cells)
|
|
1629
|
+
* @param focusedCell - The currently focused cell element (optional, to determine if scrolling should be skipped)
|
|
1630
|
+
* @returns Combined left and right pixel offsets, plus skipScroll if any plugin requests it
|
|
1631
|
+
*/
|
|
1632
|
+
getHorizontalScrollOffsets(e, o) {
|
|
1633
|
+
let i = 0, n = 0, s = !1;
|
|
1634
|
+
for (const r of this.plugins) {
|
|
1635
|
+
const l = r.getHorizontalScrollOffsets?.(e, o);
|
|
1636
|
+
l && (i += l.left, n += l.right, l.skipScroll && (s = !0));
|
|
1471
1637
|
}
|
|
1472
|
-
return
|
|
1638
|
+
return { left: i, right: n, skipScroll: s };
|
|
1473
1639
|
}
|
|
1474
|
-
//
|
|
1640
|
+
// #endregion
|
|
1641
|
+
// #region Shell Integration Hooks
|
|
1475
1642
|
/**
|
|
1476
1643
|
* Collect tool panels from all plugins.
|
|
1477
1644
|
* Returns panels sorted by order (ascending).
|
|
@@ -1479,10 +1646,10 @@ class Ue {
|
|
|
1479
1646
|
getToolPanels() {
|
|
1480
1647
|
const e = [];
|
|
1481
1648
|
for (const o of this.plugins) {
|
|
1482
|
-
const
|
|
1483
|
-
|
|
1649
|
+
const i = o.getToolPanel?.();
|
|
1650
|
+
i && e.push({ plugin: o, panel: i });
|
|
1484
1651
|
}
|
|
1485
|
-
return e.sort((o,
|
|
1652
|
+
return e.sort((o, i) => (o.panel.order ?? 0) - (i.panel.order ?? 0));
|
|
1486
1653
|
}
|
|
1487
1654
|
/**
|
|
1488
1655
|
* Collect header contents from all plugins.
|
|
@@ -1491,77 +1658,82 @@ class Ue {
|
|
|
1491
1658
|
getHeaderContents() {
|
|
1492
1659
|
const e = [];
|
|
1493
1660
|
for (const o of this.plugins) {
|
|
1494
|
-
const
|
|
1495
|
-
|
|
1661
|
+
const i = o.getHeaderContent?.();
|
|
1662
|
+
i && e.push({ plugin: o, content: i });
|
|
1496
1663
|
}
|
|
1497
|
-
return e.sort((o,
|
|
1664
|
+
return e.sort((o, i) => (o.content.order ?? 0) - (i.content.order ?? 0));
|
|
1498
1665
|
}
|
|
1666
|
+
// #endregion
|
|
1499
1667
|
}
|
|
1500
|
-
class
|
|
1668
|
+
class W extends HTMLElement {
|
|
1501
1669
|
// TODO: Rename to 'data-grid' when migration is complete
|
|
1502
1670
|
static tagName = "tbw-grid";
|
|
1503
|
-
|
|
1504
|
-
#
|
|
1671
|
+
static version = "0.2.3";
|
|
1672
|
+
#o;
|
|
1673
|
+
#A = !1;
|
|
1505
1674
|
// ---------------- Ready Promise ----------------
|
|
1506
|
-
|
|
1507
|
-
#
|
|
1508
|
-
//
|
|
1675
|
+
#z;
|
|
1676
|
+
#M;
|
|
1677
|
+
// #region Input Properties
|
|
1509
1678
|
// These backing fields store raw user input. They are merged into
|
|
1510
1679
|
// #effectiveConfig by #mergeEffectiveConfig(). Never read directly
|
|
1511
1680
|
// for rendering logic - always use effectiveConfig or derived state.
|
|
1512
|
-
#
|
|
1513
|
-
#
|
|
1681
|
+
#r = [];
|
|
1682
|
+
#l;
|
|
1514
1683
|
#p;
|
|
1515
|
-
#
|
|
1516
|
-
#
|
|
1517
|
-
//
|
|
1684
|
+
#w;
|
|
1685
|
+
#g;
|
|
1686
|
+
// #endregion
|
|
1687
|
+
// #region Single Source of Truth
|
|
1518
1688
|
// All input sources converge here. This is the canonical config
|
|
1519
1689
|
// that all rendering and logic should read from.
|
|
1520
|
-
#
|
|
1690
|
+
#t = {};
|
|
1521
1691
|
#h = !1;
|
|
1522
1692
|
#f = 0;
|
|
1523
|
-
#
|
|
1524
|
-
#
|
|
1693
|
+
#m = null;
|
|
1694
|
+
#v = !1;
|
|
1525
1695
|
// Cached flag for plugin scroll handlers
|
|
1526
|
-
#
|
|
1696
|
+
#T;
|
|
1527
1697
|
// Cached hook to avoid closures
|
|
1528
|
-
#
|
|
1529
|
-
#
|
|
1698
|
+
#E = !1;
|
|
1699
|
+
#C = null;
|
|
1700
|
+
#y = null;
|
|
1530
1701
|
#R = null;
|
|
1531
|
-
#
|
|
1532
|
-
#
|
|
1533
|
-
#l;
|
|
1702
|
+
#_ = null;
|
|
1703
|
+
#a;
|
|
1534
1704
|
#b;
|
|
1535
1705
|
// ---------------- Plugin System ----------------
|
|
1536
|
-
#
|
|
1706
|
+
#e;
|
|
1537
1707
|
// ---------------- Column State ----------------
|
|
1538
|
-
#
|
|
1708
|
+
#L;
|
|
1539
1709
|
#d;
|
|
1540
1710
|
// ---------------- Shell State ----------------
|
|
1541
|
-
#
|
|
1542
|
-
#
|
|
1543
|
-
#
|
|
1544
|
-
//
|
|
1711
|
+
#i = qe();
|
|
1712
|
+
#n;
|
|
1713
|
+
#S;
|
|
1714
|
+
// #endregion
|
|
1715
|
+
// #region Derived State
|
|
1545
1716
|
// _rows: result of applying plugin processRows hooks
|
|
1546
1717
|
_rows = [];
|
|
1547
1718
|
// _baseColumns: columns before plugin transformation (analogous to #rows for row processing)
|
|
1548
1719
|
// This is the source of truth for processColumns - plugins transform these
|
|
1549
|
-
#
|
|
1720
|
+
#P = [];
|
|
1550
1721
|
// _columns is a getter/setter that operates on effectiveConfig.columns
|
|
1551
1722
|
// This ensures effectiveConfig.columns is the single source of truth for columns
|
|
1552
1723
|
// _columns always contains ALL columns (including hidden)
|
|
1553
1724
|
get _columns() {
|
|
1554
|
-
return this.#
|
|
1725
|
+
return this.#t.columns ?? [];
|
|
1555
1726
|
}
|
|
1556
1727
|
set _columns(e) {
|
|
1557
|
-
this.#
|
|
1728
|
+
this.#t.columns = e;
|
|
1558
1729
|
}
|
|
1559
1730
|
// visibleColumns returns only visible columns for rendering
|
|
1560
1731
|
// This is what header/row rendering should use
|
|
1561
1732
|
get visibleColumns() {
|
|
1562
1733
|
return this._columns.filter((e) => !e.hidden);
|
|
1563
1734
|
}
|
|
1564
|
-
//
|
|
1735
|
+
// #endregion
|
|
1736
|
+
// #region Runtime State
|
|
1565
1737
|
// User-driven state changes at runtime (sort, etc.)
|
|
1566
1738
|
// Visibility is stored in effectiveConfig.columns[].hidden
|
|
1567
1739
|
rowPool = [];
|
|
@@ -1595,6 +1767,7 @@ class G extends HTMLElement {
|
|
|
1595
1767
|
gridTemplate = "";
|
|
1596
1768
|
rowEditSnapshots = /* @__PURE__ */ new Map();
|
|
1597
1769
|
_changedRowIndices = /* @__PURE__ */ new Set();
|
|
1770
|
+
// #endregion
|
|
1598
1771
|
// ---------------- Public API Props (getters/setters) ----------------
|
|
1599
1772
|
// Getters return the EFFECTIVE value (after merging), not the raw input.
|
|
1600
1773
|
// This is what consumers and plugins need - the current resolved state.
|
|
@@ -1603,49 +1776,49 @@ class G extends HTMLElement {
|
|
|
1603
1776
|
return this._rows;
|
|
1604
1777
|
}
|
|
1605
1778
|
set rows(e) {
|
|
1606
|
-
const o = this.#
|
|
1607
|
-
this.#
|
|
1779
|
+
const o = this.#r;
|
|
1780
|
+
this.#r = e, o !== e && this.#K();
|
|
1608
1781
|
}
|
|
1609
1782
|
/**
|
|
1610
1783
|
* Get the original unfiltered/unprocessed rows.
|
|
1611
1784
|
* Use this when you need access to all source data regardless of active filters.
|
|
1612
1785
|
*/
|
|
1613
1786
|
get sourceRows() {
|
|
1614
|
-
return this.#
|
|
1787
|
+
return this.#r;
|
|
1615
1788
|
}
|
|
1616
1789
|
get columns() {
|
|
1617
1790
|
return [...this._columns];
|
|
1618
1791
|
}
|
|
1619
1792
|
set columns(e) {
|
|
1620
|
-
const o = this.#
|
|
1621
|
-
this.#
|
|
1793
|
+
const o = this.#l;
|
|
1794
|
+
this.#l = e, o !== e && this.#j();
|
|
1622
1795
|
}
|
|
1623
1796
|
get gridConfig() {
|
|
1624
|
-
return this.#
|
|
1797
|
+
return this.#t;
|
|
1625
1798
|
}
|
|
1626
1799
|
set gridConfig(e) {
|
|
1627
1800
|
const o = this.#p;
|
|
1628
|
-
this.#p = e, o !== e && this.#
|
|
1801
|
+
this.#p = e, o !== e && this.#Y();
|
|
1629
1802
|
}
|
|
1630
1803
|
get fitMode() {
|
|
1631
|
-
return this.#
|
|
1804
|
+
return this.#t.fitMode ?? "stretch";
|
|
1632
1805
|
}
|
|
1633
1806
|
set fitMode(e) {
|
|
1634
|
-
const o = this.#
|
|
1635
|
-
this.#
|
|
1807
|
+
const o = this.#w;
|
|
1808
|
+
this.#w = e, o !== e && this.#U();
|
|
1636
1809
|
}
|
|
1637
1810
|
get editOn() {
|
|
1638
|
-
return this.#
|
|
1811
|
+
return this.#t.editOn;
|
|
1639
1812
|
}
|
|
1640
1813
|
set editOn(e) {
|
|
1641
|
-
const o = this.#
|
|
1642
|
-
this.#
|
|
1814
|
+
const o = this.#g;
|
|
1815
|
+
this.#g = e, o !== e && this.#X();
|
|
1643
1816
|
}
|
|
1644
1817
|
// Effective config accessor for internal modules and plugins
|
|
1645
1818
|
// Returns the merged config (single source of truth) before plugin processing
|
|
1646
1819
|
// Use this when you need the raw merged config (e.g., for column definitions including hidden)
|
|
1647
1820
|
get effectiveConfig() {
|
|
1648
|
-
return this.#
|
|
1821
|
+
return this.#t;
|
|
1649
1822
|
}
|
|
1650
1823
|
/**
|
|
1651
1824
|
* Get the disconnect signal for event listener cleanup.
|
|
@@ -1655,14 +1828,23 @@ class G extends HTMLElement {
|
|
|
1655
1828
|
* element.addEventListener('click', handler, { signal: this.grid.disconnectSignal });
|
|
1656
1829
|
*/
|
|
1657
1830
|
get disconnectSignal() {
|
|
1658
|
-
return this.#
|
|
1831
|
+
return this.#a || (this.#a = new AbortController()), this.#a.signal;
|
|
1659
1832
|
}
|
|
1660
1833
|
constructor() {
|
|
1661
|
-
super(), this.#
|
|
1834
|
+
super(), this.#o = this.attachShadow({ mode: "open" }), this.#W(), this.#z = new Promise((e) => this.#M = e), this.#n = Ke(this.#i, {
|
|
1835
|
+
getShadow: () => this.#o,
|
|
1836
|
+
getShellConfig: () => this.#t?.shell,
|
|
1837
|
+
getAccordionIcons: () => ({
|
|
1838
|
+
expand: this.#t?.icons?.expand ?? H.expand,
|
|
1839
|
+
collapse: this.#t?.icons?.collapse ?? H.collapse
|
|
1840
|
+
}),
|
|
1841
|
+
emit: (e, o) => this.#s(e, o),
|
|
1842
|
+
refreshShellHeader: () => this.refreshShellHeader()
|
|
1843
|
+
});
|
|
1662
1844
|
}
|
|
1663
|
-
#
|
|
1845
|
+
#W() {
|
|
1664
1846
|
const e = new CSSStyleSheet();
|
|
1665
|
-
e.replaceSync(
|
|
1847
|
+
e.replaceSync(fe), this.#o.adoptedStyleSheets = [e];
|
|
1666
1848
|
}
|
|
1667
1849
|
// ---------------- Plugin System ----------------
|
|
1668
1850
|
/**
|
|
@@ -1670,14 +1852,14 @@ class G extends HTMLElement {
|
|
|
1670
1852
|
* Used by plugins for inter-plugin communication.
|
|
1671
1853
|
*/
|
|
1672
1854
|
getPlugin(e) {
|
|
1673
|
-
return this.#
|
|
1855
|
+
return this.#e?.getPlugin(e);
|
|
1674
1856
|
}
|
|
1675
1857
|
/**
|
|
1676
1858
|
* Get a plugin instance by its name.
|
|
1677
1859
|
* Used for loose coupling between plugins (avoids static imports).
|
|
1678
1860
|
*/
|
|
1679
1861
|
getPluginByName(e) {
|
|
1680
|
-
return this.#
|
|
1862
|
+
return this.#e?.getPluginByName(e);
|
|
1681
1863
|
}
|
|
1682
1864
|
/**
|
|
1683
1865
|
* Request a full re-render of the grid.
|
|
@@ -1685,7 +1867,7 @@ class G extends HTMLElement {
|
|
|
1685
1867
|
* Note: This does NOT reset plugin state - just re-processes rows/columns and renders.
|
|
1686
1868
|
*/
|
|
1687
1869
|
requestRender() {
|
|
1688
|
-
this.#
|
|
1870
|
+
this.#x(), this.#H(), q(this), D(this), this.refreshVirtualWindow(!0);
|
|
1689
1871
|
}
|
|
1690
1872
|
/**
|
|
1691
1873
|
* Request a lightweight style update without rebuilding DOM.
|
|
@@ -1693,207 +1875,196 @@ class G extends HTMLElement {
|
|
|
1693
1875
|
* This runs all plugin afterRender hooks without rebuilding row/column DOM.
|
|
1694
1876
|
*/
|
|
1695
1877
|
requestAfterRender() {
|
|
1696
|
-
this.#
|
|
1878
|
+
this.#e?.afterRender();
|
|
1697
1879
|
}
|
|
1698
1880
|
/**
|
|
1699
1881
|
* Initialize plugin system with instances from config.
|
|
1700
1882
|
* Plugins are class instances passed in gridConfig.plugins[].
|
|
1701
1883
|
*/
|
|
1702
|
-
#
|
|
1703
|
-
this.#
|
|
1704
|
-
const e = this.#
|
|
1705
|
-
this.#
|
|
1884
|
+
#D() {
|
|
1885
|
+
this.#e = new Ye(this);
|
|
1886
|
+
const e = this.#t?.plugins, o = Array.isArray(e) ? e : [];
|
|
1887
|
+
this.#e.attachAll(o);
|
|
1706
1888
|
}
|
|
1707
1889
|
/**
|
|
1708
1890
|
* Inject all plugin styles into the shadow DOM.
|
|
1709
1891
|
* Must be called after #render() since innerHTML wipes existing content.
|
|
1710
1892
|
*/
|
|
1711
|
-
#
|
|
1712
|
-
const e = this.#
|
|
1893
|
+
#N() {
|
|
1894
|
+
const e = this.#e?.getAllStyles() ?? "";
|
|
1713
1895
|
if (e) {
|
|
1714
1896
|
const o = document.createElement("style");
|
|
1715
|
-
o.setAttribute("data-plugin", "all"), o.textContent = e, this.#
|
|
1897
|
+
o.setAttribute("data-plugin", "all"), o.textContent = e, this.#o.appendChild(o);
|
|
1716
1898
|
}
|
|
1717
1899
|
}
|
|
1718
1900
|
/**
|
|
1719
1901
|
* Update plugins when grid config changes.
|
|
1720
1902
|
* With class-based plugins, we need to detach old and attach new.
|
|
1721
1903
|
*/
|
|
1722
|
-
#
|
|
1723
|
-
this.#
|
|
1904
|
+
#q() {
|
|
1905
|
+
this.#e && this.#e.detachAll(), this.#D(), this.#N(), this.#v = this.#e?.getAll().some((e) => e.onScroll) ?? !1;
|
|
1724
1906
|
}
|
|
1725
1907
|
/**
|
|
1726
1908
|
* Clean up plugin states when grid disconnects.
|
|
1727
1909
|
*/
|
|
1728
|
-
#
|
|
1729
|
-
this.#
|
|
1910
|
+
#V() {
|
|
1911
|
+
this.#e?.detachAll();
|
|
1730
1912
|
}
|
|
1731
1913
|
/**
|
|
1732
1914
|
* Collect tool panels and header content from all plugins.
|
|
1733
1915
|
* Called after plugins are attached but before render.
|
|
1734
1916
|
*/
|
|
1735
|
-
#
|
|
1736
|
-
if (!this.#
|
|
1737
|
-
const e = this.#
|
|
1738
|
-
for (const { panel:
|
|
1739
|
-
this.#
|
|
1740
|
-
const o = this.#
|
|
1741
|
-
for (const { content:
|
|
1742
|
-
this.#
|
|
1917
|
+
#G() {
|
|
1918
|
+
if (!this.#e) return;
|
|
1919
|
+
const e = this.#e.getToolPanels();
|
|
1920
|
+
for (const { panel: i } of e)
|
|
1921
|
+
this.#i.toolPanels.has(i.id) || this.#i.toolPanels.set(i.id, i);
|
|
1922
|
+
const o = this.#e.getHeaderContents();
|
|
1923
|
+
for (const { content: i } of o)
|
|
1924
|
+
this.#i.headerContents.has(i.id) || this.#i.headerContents.set(i.id, i);
|
|
1743
1925
|
}
|
|
1744
1926
|
// ---------------- Lifecycle ----------------
|
|
1745
1927
|
connectedCallback() {
|
|
1746
|
-
this.hasAttribute("tabindex") || (this.tabIndex = 0), this._rows = Array.isArray(this.#
|
|
1928
|
+
this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version", W.version), this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#a?.abort(), this.#a = new AbortController(), this.#u(), this.#D(), this.#G(), this.#A || (this.#$(), this.#N(), this.#A = !0), this.#B();
|
|
1747
1929
|
}
|
|
1748
1930
|
disconnectedCallback() {
|
|
1749
|
-
this.#
|
|
1931
|
+
this.#V(), Xe(this.#i), this.#n.setInitialized(!1), this.#S?.(), this.#S = void 0, this.#a && (this.#a.abort(), this.#a = void 0), this.resizeController && this.resizeController.dispose(), this.#b && (this.#b.disconnect(), this.#b = void 0), this.#h = !1;
|
|
1750
1932
|
}
|
|
1751
|
-
#
|
|
1752
|
-
const o = this.#
|
|
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.#
|
|
1754
|
-
|
|
1755
|
-
const
|
|
1756
|
-
|
|
1933
|
+
#B() {
|
|
1934
|
+
const o = this.#o.querySelector(".tbw-grid-content") ?? this.#o.querySelector(".tbw-grid-root");
|
|
1935
|
+
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.#n.isInitialized) {
|
|
1936
|
+
he(this.#o, this.#i), Ge(this.#o, this.#t?.shell, this.#i);
|
|
1937
|
+
const l = this.#t?.shell?.toolPanel?.defaultOpen;
|
|
1938
|
+
l && this.#i.toolPanels.has(l) && (this.openToolPanel(), this.#i.expandedSections.add(l));
|
|
1757
1939
|
}
|
|
1758
1940
|
this.setAttribute("data-upgraded", ""), this.#h = !0;
|
|
1759
|
-
const
|
|
1760
|
-
this.#c(), this.addEventListener("keydown", (
|
|
1941
|
+
const i = this.disconnectSignal;
|
|
1942
|
+
this.#c(), this.addEventListener("keydown", (l) => ke(this, l), { signal: i }), document.addEventListener(
|
|
1761
1943
|
"keydown",
|
|
1762
|
-
(
|
|
1763
|
-
|
|
1944
|
+
(l) => {
|
|
1945
|
+
l.key === "Escape" && this.activeEditRows !== -1 && M(this, this.activeEditRows, !0);
|
|
1764
1946
|
},
|
|
1765
|
-
{ capture: !0, signal:
|
|
1947
|
+
{ capture: !0, signal: i }
|
|
1766
1948
|
), document.addEventListener(
|
|
1767
1949
|
"mousedown",
|
|
1768
|
-
(
|
|
1950
|
+
(l) => {
|
|
1769
1951
|
if (this.activeEditRows === -1) return;
|
|
1770
|
-
const
|
|
1771
|
-
!
|
|
1952
|
+
const a = this.findRenderedRowElement(this.activeEditRows);
|
|
1953
|
+
!a || (l.composedPath && l.composedPath() || []).includes(a) || M(this, this.activeEditRows, !1);
|
|
1772
1954
|
},
|
|
1773
|
-
{ signal:
|
|
1955
|
+
{ signal: i }
|
|
1774
1956
|
);
|
|
1775
|
-
const
|
|
1776
|
-
if (this.virtualization.container =
|
|
1777
|
-
|
|
1957
|
+
const n = o?.querySelector(".faux-vscroll"), s = o?.querySelector(".rows");
|
|
1958
|
+
if (this.virtualization.container = n ?? this, this.#v = this.#e?.getAll().some((l) => l.onScroll) ?? !1, n && s) {
|
|
1959
|
+
n.addEventListener(
|
|
1778
1960
|
"scroll",
|
|
1779
1961
|
() => {
|
|
1780
|
-
if (!this.virtualization.enabled && !this.#
|
|
1781
|
-
const
|
|
1782
|
-
s.style.transform = `translateY(${
|
|
1783
|
-
this.#f = 0, this.#
|
|
1962
|
+
if (!this.virtualization.enabled && !this.#v) return;
|
|
1963
|
+
const d = n.scrollTop, f = this.virtualization.rowHeight, h = Math.floor(d / f), p = h - h % 2, c = -(d - p * f);
|
|
1964
|
+
s.style.transform = `translateY(${c}px)`, this.#m = d, this.#f || (this.#f = requestAnimationFrame(() => {
|
|
1965
|
+
this.#f = 0, this.#m !== null && (this.#Z(this.#m), this.#m = null);
|
|
1784
1966
|
}));
|
|
1785
1967
|
},
|
|
1786
|
-
{ passive: !0, signal:
|
|
1968
|
+
{ passive: !0, signal: i }
|
|
1787
1969
|
);
|
|
1788
|
-
const
|
|
1789
|
-
|
|
1970
|
+
const l = this.#o.querySelector(".tbw-grid-content"), a = this.#o.querySelector(".tbw-scroll-area");
|
|
1971
|
+
l && (l.addEventListener(
|
|
1790
1972
|
"wheel",
|
|
1791
|
-
(
|
|
1792
|
-
|
|
1973
|
+
(d) => {
|
|
1974
|
+
d.preventDefault(), d.shiftKey || Math.abs(d.deltaX) > Math.abs(d.deltaY) ? a && (a.scrollLeft += d.shiftKey ? d.deltaY : d.deltaX) : n.scrollTop += d.deltaY;
|
|
1793
1975
|
},
|
|
1794
|
-
{ passive: !1, signal:
|
|
1795
|
-
),
|
|
1976
|
+
{ passive: !1, signal: i }
|
|
1977
|
+
), l.addEventListener(
|
|
1796
1978
|
"touchstart",
|
|
1797
|
-
(
|
|
1798
|
-
|
|
1979
|
+
(d) => {
|
|
1980
|
+
d.touches.length === 1 && (this.#C = d.touches[0].clientY, this.#y = d.touches[0].clientX, this.#R = n.scrollTop, this.#_ = a?.scrollLeft ?? 0);
|
|
1799
1981
|
},
|
|
1800
|
-
{ passive: !0, signal:
|
|
1801
|
-
),
|
|
1982
|
+
{ passive: !0, signal: i }
|
|
1983
|
+
), l.addEventListener(
|
|
1802
1984
|
"touchmove",
|
|
1803
|
-
(
|
|
1804
|
-
if (
|
|
1805
|
-
const
|
|
1806
|
-
|
|
1985
|
+
(d) => {
|
|
1986
|
+
if (d.touches.length === 1 && this.#C !== null && this.#y !== null && this.#R !== null && this.#_ !== null) {
|
|
1987
|
+
const f = this.#C - d.touches[0].clientY, h = this.#y - d.touches[0].clientX;
|
|
1988
|
+
n.scrollTop = this.#R + f, a && (a.scrollLeft = this.#_ + h), d.preventDefault();
|
|
1807
1989
|
}
|
|
1808
1990
|
},
|
|
1809
|
-
{ passive: !1, signal:
|
|
1810
|
-
),
|
|
1991
|
+
{ passive: !1, signal: i }
|
|
1992
|
+
), l.addEventListener(
|
|
1811
1993
|
"touchend",
|
|
1812
1994
|
() => {
|
|
1813
|
-
this.#
|
|
1995
|
+
this.#C = null, this.#y = null, this.#R = null, this.#_ = null;
|
|
1814
1996
|
},
|
|
1815
|
-
{ passive: !0, signal:
|
|
1997
|
+
{ passive: !0, signal: i }
|
|
1816
1998
|
));
|
|
1817
1999
|
}
|
|
1818
|
-
this.resizeController =
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
2000
|
+
this.resizeController = Ne(this), this.#o.addEventListener("mousedown", (l) => this.#Q(l), { signal: i }), document.addEventListener("mousemove", (l) => this.#J(l), { signal: i }), document.addEventListener("mouseup", (l) => this.#ee(l), { signal: i }), this.virtualization.enabled && requestAnimationFrame(() => this.refreshVirtualWindow(!0));
|
|
2001
|
+
const r = this.#t.rowHeight;
|
|
2002
|
+
r && r > 0 ? this.virtualization.rowHeight = r : requestAnimationFrame(() => {
|
|
2003
|
+
const l = this.bodyEl?.querySelector(".data-grid-row");
|
|
2004
|
+
if (l) {
|
|
2005
|
+
const a = l.getBoundingClientRect().height;
|
|
2006
|
+
a > 0 && (this.virtualization.rowHeight = a, this.refreshVirtualWindow(!0));
|
|
1823
2007
|
}
|
|
1824
2008
|
}), this.virtualization.viewportEl && (this.#b = new ResizeObserver(() => {
|
|
1825
2009
|
this.#f || (this.#f = requestAnimationFrame(() => {
|
|
1826
|
-
this.#f = 0, this.refreshVirtualWindow(!0);
|
|
2010
|
+
this.#f = 0, this.refreshVirtualWindow(!0), z(this);
|
|
1827
2011
|
}));
|
|
1828
|
-
}), this.#b.observe(this.virtualization.viewportEl)), queueMicrotask(() => this.#
|
|
2012
|
+
}), this.#b.observe(this.virtualization.viewportEl)), queueMicrotask(() => this.#F()), requestAnimationFrame(() => requestAnimationFrame(() => this.#M?.()));
|
|
1829
2013
|
}
|
|
1830
2014
|
// ---------------- Event Emitters ----------------
|
|
1831
|
-
#
|
|
2015
|
+
#s(e, o) {
|
|
1832
2016
|
this.dispatchEvent(new CustomEvent(e, { detail: o, bubbles: !0, composed: !0 }));
|
|
1833
2017
|
}
|
|
1834
2018
|
emitCellCommit(e) {
|
|
1835
|
-
this.#
|
|
2019
|
+
this.#s("cell-commit", e);
|
|
1836
2020
|
}
|
|
1837
2021
|
emitRowCommit(e) {
|
|
1838
|
-
this.#
|
|
2022
|
+
this.#s("row-commit", e);
|
|
1839
2023
|
}
|
|
1840
2024
|
emitSortChange(e) {
|
|
1841
|
-
this.#
|
|
2025
|
+
this.#s("sort-change", e);
|
|
1842
2026
|
}
|
|
1843
2027
|
emitColumnResize(e) {
|
|
1844
|
-
this.#
|
|
2028
|
+
this.#s("column-resize", e);
|
|
1845
2029
|
}
|
|
1846
2030
|
emitActivateCell(e) {
|
|
1847
|
-
this.#
|
|
2031
|
+
this.#s("activate-cell", e);
|
|
1848
2032
|
}
|
|
1849
2033
|
/** Update ARIA selection attributes on rendered rows/cells */
|
|
1850
|
-
#
|
|
1851
|
-
this.bodyEl?.querySelectorAll(".data-grid-row")?.forEach((o,
|
|
1852
|
-
const
|
|
1853
|
-
o.setAttribute("aria-selected", String(
|
|
1854
|
-
s.setAttribute("aria-selected", String(
|
|
2034
|
+
#F() {
|
|
2035
|
+
this.bodyEl?.querySelectorAll(".data-grid-row")?.forEach((o, i) => {
|
|
2036
|
+
const n = i === this.focusRow;
|
|
2037
|
+
o.setAttribute("aria-selected", String(n)), o.querySelectorAll(".cell").forEach((s, r) => {
|
|
2038
|
+
s.setAttribute("aria-selected", String(n && r === this.focusCol));
|
|
1855
2039
|
});
|
|
1856
2040
|
});
|
|
1857
2041
|
}
|
|
1858
2042
|
// ---------------- Watch Handlers ----------------
|
|
1859
|
-
#
|
|
2043
|
+
#U() {
|
|
1860
2044
|
if (!this.#h) return;
|
|
1861
|
-
this.#u(), this.#
|
|
2045
|
+
this.#u(), this.#t.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, te(this)) : (this._columns.forEach((o) => {
|
|
1862
2046
|
!o.__userResized && o.__autoSized && delete o.width;
|
|
1863
|
-
}), this
|
|
2047
|
+
}), D(this));
|
|
1864
2048
|
}
|
|
1865
|
-
#
|
|
2049
|
+
#X() {
|
|
1866
2050
|
this.#h && (this.#u(), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
|
|
1867
2051
|
}
|
|
1868
|
-
#
|
|
1869
|
-
this._rows = Array.isArray(this.#
|
|
1870
|
-
}
|
|
1871
|
-
#te() {
|
|
1872
|
-
X(this), this.#h && (this.#u(), this.#c());
|
|
1873
|
-
}
|
|
1874
|
-
#oe() {
|
|
1875
|
-
this.#h && (this.#u(), this.#W(), this.#L(), this.#M(), this.#T(), this.updateTemplate(), this.refreshVirtualWindow(!0));
|
|
1876
|
-
}
|
|
1877
|
-
// ---------------- Helper Wrappers ----------------
|
|
1878
|
-
#ne() {
|
|
1879
|
-
Ae(this);
|
|
1880
|
-
}
|
|
1881
|
-
#T() {
|
|
1882
|
-
K(this);
|
|
2052
|
+
#K() {
|
|
2053
|
+
this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#x(), !this.#l || Array.isArray(this.#l) && this.#l.length === 0 ? this.#c() : this.refreshVirtualWindow(!0);
|
|
1883
2054
|
}
|
|
1884
|
-
|
|
1885
|
-
|
|
2055
|
+
#j() {
|
|
2056
|
+
Y(this), this.#h && (this.#u(), this.#c());
|
|
1886
2057
|
}
|
|
1887
|
-
#
|
|
1888
|
-
|
|
1889
|
-
}
|
|
1890
|
-
#
|
|
1891
|
-
if (this.#
|
|
1892
|
-
const e = this.#
|
|
1893
|
-
if (
|
|
1894
|
-
const s = new Map(
|
|
1895
|
-
if (!o.some((l) => s.has(l.field)) &&
|
|
1896
|
-
this._columns = [...
|
|
2058
|
+
#Y() {
|
|
2059
|
+
this.#h && (this.#u(), this.#q(), this.#x(), this.#H(), q(this), D(this), this.refreshVirtualWindow(!0));
|
|
2060
|
+
}
|
|
2061
|
+
#H() {
|
|
2062
|
+
if (this.#e) {
|
|
2063
|
+
const e = this.#P.length > 0 ? this.#P : this._columns, o = e.filter((s) => !s.hidden), i = e.filter((s) => s.hidden), n = this.#e.processColumns([...o]);
|
|
2064
|
+
if (n !== o) {
|
|
2065
|
+
const s = new Map(n.map((l, a) => [l.field, { col: l, order: a }]));
|
|
2066
|
+
if (!o.some((l) => s.has(l.field)) && n.length > 0)
|
|
2067
|
+
this._columns = [...n, ...i];
|
|
1897
2068
|
else {
|
|
1898
2069
|
const l = e.map((a) => {
|
|
1899
2070
|
if (a.hidden) return a;
|
|
@@ -1906,14 +2077,10 @@ class G extends HTMLElement {
|
|
|
1906
2077
|
this._columns = [...e];
|
|
1907
2078
|
}
|
|
1908
2079
|
}
|
|
1909
|
-
/** Execute all plugin afterRender hooks */
|
|
1910
|
-
#w() {
|
|
1911
|
-
this.#t?.afterRender();
|
|
1912
|
-
}
|
|
1913
2080
|
/** Recompute row model via plugin hooks (grouping, tree, filtering, etc.). */
|
|
1914
|
-
#
|
|
1915
|
-
|
|
1916
|
-
const e = Array.isArray(this.#
|
|
2081
|
+
#x() {
|
|
2082
|
+
Y(this);
|
|
2083
|
+
const e = Array.isArray(this.#r) ? [...this.#r] : [], o = this.#e?.processRows(e) ?? e;
|
|
1917
2084
|
this._rows = o;
|
|
1918
2085
|
}
|
|
1919
2086
|
/**
|
|
@@ -1937,73 +2104,64 @@ class G extends HTMLElement {
|
|
|
1937
2104
|
#u() {
|
|
1938
2105
|
const e = this.#p ? { ...this.#p } : {};
|
|
1939
2106
|
let o = Array.isArray(e.columns) ? [...e.columns] : [];
|
|
1940
|
-
const
|
|
1941
|
-
...
|
|
2107
|
+
const i = (this.__lightDomColumnsCache || []).map((n) => ({
|
|
2108
|
+
...n
|
|
1942
2109
|
}));
|
|
1943
|
-
if (
|
|
1944
|
-
const
|
|
1945
|
-
o.forEach((s) =>
|
|
1946
|
-
const r =
|
|
1947
|
-
r ? (s.header && !r.header && (r.header = s.header), s.type && !r.type && (r.type = s.type), r.sortable = r.sortable || s.sortable, s.resizable && (r.resizable = !0), s.editable && (r.editable = !0)) : (o.push(s),
|
|
2110
|
+
if (i.length) {
|
|
2111
|
+
const n = {};
|
|
2112
|
+
o.forEach((s) => n[s.field] = s), i.forEach((s) => {
|
|
2113
|
+
const r = n[s.field];
|
|
2114
|
+
r ? (s.header && !r.header && (r.header = s.header), s.type && !r.type && (r.type = s.type), r.sortable = r.sortable || s.sortable, s.resizable && (r.resizable = !0), s.editable && (r.editable = !0)) : (o.push(s), n[s.field] = s);
|
|
1948
2115
|
});
|
|
1949
2116
|
}
|
|
1950
|
-
if (this.#
|
|
2117
|
+
if (this.#l && this.#l.length && (o = [...this.#l]), (!o || o.length === 0) && this._rows.length && (o = de(this._rows).columns), o.length) {
|
|
1951
2118
|
o.forEach((r) => {
|
|
1952
2119
|
r.sortable === void 0 && (r.sortable = !0), r.resizable === void 0 && (r.resizable = !0);
|
|
1953
2120
|
});
|
|
1954
|
-
const
|
|
1955
|
-
|
|
2121
|
+
const n = this.#t.columns;
|
|
2122
|
+
n?.some((r) => r.__compiledView || r.__compiledEditor) ? e.columns = n : e.columns = o;
|
|
1956
2123
|
} else {
|
|
1957
|
-
const
|
|
1958
|
-
|
|
2124
|
+
const n = this.#t.columns;
|
|
2125
|
+
n?.some((s) => s.__compiledView || s.__compiledEditor) && (e.columns = n);
|
|
1959
2126
|
}
|
|
1960
|
-
this.#
|
|
1961
|
-
|
|
2127
|
+
this.#w && (e.fitMode = this.#w), e.fitMode || (e.fitMode = "stretch"), this.#g && (e.editOn = this.#g), e.rowHeight && e.rowHeight > 0 && (this.virtualization.rowHeight = e.rowHeight), e.columnState && !this.#d && (this.#d = e.columnState), this.#t = e, e.fitMode === "fixed" && this._columns.forEach((n) => {
|
|
2128
|
+
n.width == null && (n.width = 80);
|
|
1962
2129
|
});
|
|
1963
2130
|
}
|
|
1964
2131
|
// ---------------- Delegate Wrappers ----------------
|
|
1965
|
-
#
|
|
1966
|
-
this.#
|
|
1967
|
-
}
|
|
1968
|
-
#ie(e, o) {
|
|
1969
|
-
z(this, e, o);
|
|
1970
|
-
}
|
|
1971
|
-
#D(e, o) {
|
|
1972
|
-
N(this, e, o);
|
|
2132
|
+
#k(e, o, i = this.__rowRenderEpoch) {
|
|
2133
|
+
this.#T || (this.#T = (n, s, r) => this.#e?.renderRow(n, s, r) ?? !1), Me(this, e, o, i, this.#T);
|
|
1973
2134
|
}
|
|
1974
2135
|
// ---------------- Core Helpers ----------------
|
|
1975
2136
|
#c() {
|
|
1976
2137
|
if (!this.isConnected || !this.headerRowEl || !this.bodyEl)
|
|
1977
2138
|
return;
|
|
1978
|
-
const e = this.#p?.columns || this.#
|
|
2139
|
+
const e = this.#p?.columns || this.#l || [];
|
|
1979
2140
|
if (e.length) {
|
|
1980
|
-
const
|
|
2141
|
+
const i = new Map(this._columns.filter((s) => s.hidden).map((s) => [s.field, !0])), n = e.map((s) => ({
|
|
1981
2142
|
...s,
|
|
1982
|
-
hidden:
|
|
2143
|
+
hidden: i.get(s.field) ?? s.hidden
|
|
1983
2144
|
}));
|
|
1984
|
-
this._columns =
|
|
2145
|
+
this._columns = n;
|
|
1985
2146
|
}
|
|
1986
|
-
if (this
|
|
1987
|
-
const
|
|
1988
|
-
this.#d = void 0, this.#
|
|
2147
|
+
if (Pe(this), this.#u(), this.#q(), this.#P = [...this._columns], this.#x(), this.#H(), this.#d) {
|
|
2148
|
+
const i = this.#d;
|
|
2149
|
+
this.#d = void 0, this.#I(i);
|
|
1989
2150
|
}
|
|
1990
|
-
this
|
|
2151
|
+
q(this), D(this), this.refreshVirtualWindow(!0), this.#t.fitMode === "fixed" && !this.__didInitialAutoSize && requestAnimationFrame(() => te(this)), this.bodyEl && (this.bodyEl.style.display = "", this.bodyEl.style.gridTemplateColumns = ""), queueMicrotask(() => this.#e?.afterRender());
|
|
1991
2152
|
}
|
|
1992
2153
|
/** Internal method to apply column state without triggering setup loop */
|
|
1993
|
-
#
|
|
1994
|
-
const o = this.#
|
|
1995
|
-
|
|
1996
|
-
for (const
|
|
1997
|
-
const s = o.find((r) => r.field ===
|
|
1998
|
-
s && (s.hidden = !
|
|
2154
|
+
#I(e) {
|
|
2155
|
+
const o = this.#t.columns ?? [], i = this.#e?.getAll() ?? [];
|
|
2156
|
+
be(this, e, o, i);
|
|
2157
|
+
for (const n of e.columns) {
|
|
2158
|
+
const s = o.find((r) => r.field === n.field);
|
|
2159
|
+
s && (s.hidden = !n.visible);
|
|
1999
2160
|
}
|
|
2000
2161
|
}
|
|
2001
|
-
#
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
#re(e) {
|
|
2005
|
-
if (this.refreshVirtualWindow(!1), this.#t?.onScrollRender(), this.#C) {
|
|
2006
|
-
const o = this.virtualization.container, n = {
|
|
2162
|
+
#Z(e) {
|
|
2163
|
+
if (this.refreshVirtualWindow(!1), this.#e?.onScrollRender(), this.#v) {
|
|
2164
|
+
const o = this.virtualization.container, i = {
|
|
2007
2165
|
scrollTop: e,
|
|
2008
2166
|
scrollLeft: o?.scrollLeft ?? 0,
|
|
2009
2167
|
scrollHeight: o?.scrollHeight ?? 0,
|
|
@@ -2012,79 +2170,99 @@ class G extends HTMLElement {
|
|
|
2012
2170
|
clientWidth: o?.clientWidth ?? 0,
|
|
2013
2171
|
originalEvent: new Event("scroll")
|
|
2014
2172
|
};
|
|
2015
|
-
this.#
|
|
2173
|
+
this.#e?.onScroll(i);
|
|
2016
2174
|
}
|
|
2017
2175
|
}
|
|
2018
2176
|
findHeaderRow() {
|
|
2019
|
-
return this.#
|
|
2177
|
+
return this.#o.querySelector(".header-row");
|
|
2020
2178
|
}
|
|
2021
2179
|
findRenderedRowElement(e) {
|
|
2022
2180
|
return Array.from(this.bodyEl.querySelectorAll(".data-grid-row")).find((o) => {
|
|
2023
|
-
const
|
|
2024
|
-
return
|
|
2181
|
+
const i = o.querySelector(".cell[data-row]");
|
|
2182
|
+
return i && Number(i.getAttribute("data-row")) === e;
|
|
2025
2183
|
}) || null;
|
|
2026
2184
|
}
|
|
2027
2185
|
/**
|
|
2028
2186
|
* Dispatch a cell click event to the plugin system.
|
|
2029
2187
|
* Returns true if any plugin handled the event.
|
|
2030
2188
|
*/
|
|
2031
|
-
dispatchCellClick(e, o,
|
|
2032
|
-
const s = this._rows[o], r = this._columns[
|
|
2189
|
+
dispatchCellClick(e, o, i, n) {
|
|
2190
|
+
const s = this._rows[o], r = this._columns[i];
|
|
2033
2191
|
if (!s || !r) return !1;
|
|
2034
2192
|
const l = {
|
|
2035
2193
|
row: s,
|
|
2036
2194
|
rowIndex: o,
|
|
2037
|
-
colIndex:
|
|
2195
|
+
colIndex: i,
|
|
2038
2196
|
field: r.field,
|
|
2039
2197
|
value: s[r.field],
|
|
2040
|
-
cellEl:
|
|
2198
|
+
cellEl: n,
|
|
2041
2199
|
originalEvent: e
|
|
2042
2200
|
};
|
|
2043
|
-
return this.#
|
|
2201
|
+
return this.#e?.onCellClick(l) ?? !1;
|
|
2044
2202
|
}
|
|
2045
2203
|
/**
|
|
2046
2204
|
* Dispatch a header click event to the plugin system.
|
|
2047
2205
|
* Returns true if any plugin handled the event.
|
|
2048
2206
|
*/
|
|
2049
|
-
dispatchHeaderClick(e, o,
|
|
2050
|
-
const
|
|
2051
|
-
if (!
|
|
2207
|
+
dispatchHeaderClick(e, o, i) {
|
|
2208
|
+
const n = this._columns[o];
|
|
2209
|
+
if (!n) return !1;
|
|
2052
2210
|
const s = {
|
|
2053
2211
|
colIndex: o,
|
|
2054
|
-
field:
|
|
2055
|
-
column:
|
|
2056
|
-
headerEl:
|
|
2212
|
+
field: n.field,
|
|
2213
|
+
column: n,
|
|
2214
|
+
headerEl: i,
|
|
2057
2215
|
originalEvent: e
|
|
2058
2216
|
};
|
|
2059
|
-
return this.#
|
|
2217
|
+
return this.#e?.onHeaderClick(s) ?? !1;
|
|
2060
2218
|
}
|
|
2061
2219
|
/**
|
|
2062
2220
|
* Dispatch a keyboard event to the plugin system.
|
|
2063
2221
|
* Returns true if any plugin handled the event.
|
|
2064
2222
|
*/
|
|
2065
2223
|
dispatchKeyDown(e) {
|
|
2066
|
-
return this.#
|
|
2224
|
+
return this.#e?.onKeyDown(e) ?? !1;
|
|
2225
|
+
}
|
|
2226
|
+
/**
|
|
2227
|
+
* Get horizontal scroll boundary offsets from plugins.
|
|
2228
|
+
* Used by keyboard navigation to ensure focused cells are fully visible
|
|
2229
|
+
* when plugins like pinned columns obscure part of the scroll area.
|
|
2230
|
+
*/
|
|
2231
|
+
getHorizontalScrollOffsets(e, o) {
|
|
2232
|
+
return this.#e?.getHorizontalScrollOffsets(e, o) ?? { left: 0, right: 0 };
|
|
2233
|
+
}
|
|
2234
|
+
/**
|
|
2235
|
+
* Query all plugins with a generic query and collect responses.
|
|
2236
|
+
* This enables inter-plugin communication without the core knowing plugin-specific concepts.
|
|
2237
|
+
*
|
|
2238
|
+
* @example
|
|
2239
|
+
* // Check if any plugin vetoes moving a column
|
|
2240
|
+
* const responses = grid.queryPlugins<boolean>({ type: PLUGIN_QUERIES.CAN_MOVE_COLUMN, context: column });
|
|
2241
|
+
* const canMove = !responses.includes(false);
|
|
2242
|
+
*/
|
|
2243
|
+
queryPlugins(e) {
|
|
2244
|
+
return this.#e?.queryPlugins(e) ?? [];
|
|
2067
2245
|
}
|
|
2068
2246
|
/**
|
|
2069
2247
|
* Build a CellMouseEvent from a native MouseEvent.
|
|
2070
2248
|
* Extracts cell/row information from the event target.
|
|
2071
2249
|
*/
|
|
2072
|
-
#
|
|
2073
|
-
let
|
|
2074
|
-
const
|
|
2075
|
-
if (
|
|
2076
|
-
const u = this.#
|
|
2077
|
-
u && (
|
|
2250
|
+
#O(e, o) {
|
|
2251
|
+
let i = null;
|
|
2252
|
+
const n = e.composedPath?.();
|
|
2253
|
+
if (n && n.length > 0 ? i = n[0] : i = e.target, i && !this.#o.contains(i)) {
|
|
2254
|
+
const u = this.#o.elementFromPoint(e.clientX, e.clientY);
|
|
2255
|
+
u && (i = u);
|
|
2078
2256
|
}
|
|
2079
|
-
const s =
|
|
2080
|
-
let a, d, h, p,
|
|
2081
|
-
return s && (a = parseInt(s.getAttribute("data-row") ?? "-1", 10), d = parseInt(s.getAttribute("data-col") ?? "-1", 10), a >= 0 && d >= 0 && (
|
|
2257
|
+
const s = i?.closest?.("[data-col]"), r = i?.closest?.(".data-grid-row"), l = i?.closest?.(".header-row");
|
|
2258
|
+
let a, d, f, h, p, c;
|
|
2259
|
+
return s && (a = parseInt(s.getAttribute("data-row") ?? "-1", 10), d = parseInt(s.getAttribute("data-col") ?? "-1", 10), a >= 0 && d >= 0 && (f = this._rows[a], c = this._columns[d], h = c?.field, p = f && h ? f[h] : void 0)), {
|
|
2082
2260
|
type: o,
|
|
2083
|
-
row:
|
|
2261
|
+
row: f,
|
|
2084
2262
|
rowIndex: a !== void 0 && a >= 0 ? a : void 0,
|
|
2085
2263
|
colIndex: d !== void 0 && d >= 0 ? d : void 0,
|
|
2086
|
-
field:
|
|
2087
|
-
value:
|
|
2264
|
+
field: h,
|
|
2265
|
+
value: p,
|
|
2088
2266
|
column: c,
|
|
2089
2267
|
originalEvent: e,
|
|
2090
2268
|
cellElement: s ?? void 0,
|
|
@@ -2096,25 +2274,25 @@ class G extends HTMLElement {
|
|
|
2096
2274
|
/**
|
|
2097
2275
|
* Handle mousedown events and dispatch to plugin system.
|
|
2098
2276
|
*/
|
|
2099
|
-
#
|
|
2100
|
-
const o = this.#
|
|
2101
|
-
(this.#
|
|
2277
|
+
#Q(e) {
|
|
2278
|
+
const o = this.#O(e, "mousedown");
|
|
2279
|
+
(this.#e?.onCellMouseDown(o) ?? !1) && (this.#E = !0);
|
|
2102
2280
|
}
|
|
2103
2281
|
/**
|
|
2104
2282
|
* Handle mousemove events (only when dragging).
|
|
2105
2283
|
*/
|
|
2106
|
-
#
|
|
2107
|
-
if (!this.#
|
|
2108
|
-
const o = this.#
|
|
2109
|
-
this.#
|
|
2284
|
+
#J(e) {
|
|
2285
|
+
if (!this.#E) return;
|
|
2286
|
+
const o = this.#O(e, "mousemove");
|
|
2287
|
+
this.#e?.onCellMouseMove(o);
|
|
2110
2288
|
}
|
|
2111
2289
|
/**
|
|
2112
2290
|
* Handle mouseup events.
|
|
2113
2291
|
*/
|
|
2114
|
-
#
|
|
2115
|
-
if (!this.#
|
|
2116
|
-
const o = this.#
|
|
2117
|
-
this.#
|
|
2292
|
+
#ee(e) {
|
|
2293
|
+
if (!this.#E) return;
|
|
2294
|
+
const o = this.#O(e, "mouseup");
|
|
2295
|
+
this.#e?.onCellMouseUp(o), this.#E = !1;
|
|
2118
2296
|
}
|
|
2119
2297
|
// API consumed by internal utils (rows.ts)
|
|
2120
2298
|
get changedRows() {
|
|
@@ -2124,21 +2302,21 @@ class G extends HTMLElement {
|
|
|
2124
2302
|
return Array.from(this._changedRowIndices);
|
|
2125
2303
|
}
|
|
2126
2304
|
async resetChangedRows(e) {
|
|
2127
|
-
this._changedRowIndices.clear(), e || this.#
|
|
2305
|
+
this._changedRowIndices.clear(), e || this.#s("changed-rows-reset", { rows: this.changedRows, indices: this.changedRowIndices }), this.rowPool.forEach((o) => o.classList.remove("changed"));
|
|
2128
2306
|
}
|
|
2129
2307
|
async beginBulkEdit(e) {
|
|
2130
2308
|
if (!this._columns.some((s) => s.editable)) return;
|
|
2131
|
-
const
|
|
2132
|
-
this
|
|
2133
|
-
const
|
|
2134
|
-
|
|
2309
|
+
const i = this._rows[e];
|
|
2310
|
+
B(this, e, i);
|
|
2311
|
+
const n = this.findRenderedRowElement?.(e);
|
|
2312
|
+
n && (Array.from(n.children).forEach((s, r) => {
|
|
2135
2313
|
const l = this.visibleColumns[r];
|
|
2136
2314
|
if (l?.editable) {
|
|
2137
2315
|
const a = s;
|
|
2138
|
-
a.classList.contains("editing") ||
|
|
2316
|
+
a.classList.contains("editing") || k(this, i, e, l, a);
|
|
2139
2317
|
}
|
|
2140
2318
|
}), queueMicrotask(() => {
|
|
2141
|
-
const s =
|
|
2319
|
+
const s = n.querySelector(`.cell[data-col="${this.focusCol}"]`);
|
|
2142
2320
|
if (s?.classList.contains("editing")) {
|
|
2143
2321
|
const r = s.querySelector(
|
|
2144
2322
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
@@ -2151,17 +2329,17 @@ class G extends HTMLElement {
|
|
|
2151
2329
|
}));
|
|
2152
2330
|
}
|
|
2153
2331
|
async commitActiveRowEdit() {
|
|
2154
|
-
this.activeEditRows !== -1 &&
|
|
2332
|
+
this.activeEditRows !== -1 && M(this, this.activeEditRows, !1);
|
|
2155
2333
|
}
|
|
2156
2334
|
async ready() {
|
|
2157
|
-
return this
|
|
2335
|
+
return this.#z;
|
|
2158
2336
|
}
|
|
2159
2337
|
async forceLayout() {
|
|
2160
2338
|
this.#c(), await new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(e)));
|
|
2161
2339
|
}
|
|
2162
2340
|
/** Public method: returns a frozen snapshot of the merged effective configuration */
|
|
2163
2341
|
async getConfig() {
|
|
2164
|
-
return Object.freeze({ ...this.#
|
|
2342
|
+
return Object.freeze({ ...this.#t || {} });
|
|
2165
2343
|
}
|
|
2166
2344
|
// ---------------- Column Visibility API ----------------
|
|
2167
2345
|
/**
|
|
@@ -2171,14 +2349,14 @@ class G extends HTMLElement {
|
|
|
2171
2349
|
* @returns True if visibility was changed, false if column not found or locked
|
|
2172
2350
|
*/
|
|
2173
2351
|
setColumnVisible(e, o) {
|
|
2174
|
-
const
|
|
2175
|
-
if (!
|
|
2352
|
+
const i = this.#t.columns, n = i?.find((l) => l.field === e);
|
|
2353
|
+
if (!n || !o && n.lockVisible || !o && (i ?? []).filter((a) => !a.hidden && a.field !== e).length === 0)
|
|
2176
2354
|
return !1;
|
|
2177
|
-
const s = !!
|
|
2178
|
-
return s !== r ? (
|
|
2355
|
+
const s = !!n.hidden, r = !o;
|
|
2356
|
+
return s !== r ? (n.hidden = r, this.#s("column-visibility", {
|
|
2179
2357
|
field: e,
|
|
2180
2358
|
visible: o,
|
|
2181
|
-
visibleColumns: (
|
|
2359
|
+
visibleColumns: (i ?? []).filter((l) => !l.hidden).map((l) => l.field)
|
|
2182
2360
|
}), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange(), !0) : !1;
|
|
2183
2361
|
}
|
|
2184
2362
|
/**
|
|
@@ -2187,8 +2365,8 @@ class G extends HTMLElement {
|
|
|
2187
2365
|
* @returns True if visibility was toggled, false if column not found or locked
|
|
2188
2366
|
*/
|
|
2189
2367
|
toggleColumnVisibility(e) {
|
|
2190
|
-
const
|
|
2191
|
-
return this.setColumnVisible(e,
|
|
2368
|
+
const n = !!this.#t.columns?.find((s) => s.field === e)?.hidden;
|
|
2369
|
+
return this.setColumnVisible(e, n);
|
|
2192
2370
|
}
|
|
2193
2371
|
/**
|
|
2194
2372
|
* Check if a column is currently visible.
|
|
@@ -2196,18 +2374,18 @@ class G extends HTMLElement {
|
|
|
2196
2374
|
* @returns True if visible, false if hidden or not found
|
|
2197
2375
|
*/
|
|
2198
2376
|
isColumnVisible(e) {
|
|
2199
|
-
const
|
|
2200
|
-
return
|
|
2377
|
+
const i = this.#t.columns?.find((n) => n.field === e);
|
|
2378
|
+
return i ? !i.hidden : !1;
|
|
2201
2379
|
}
|
|
2202
2380
|
/**
|
|
2203
2381
|
* Show all columns.
|
|
2204
2382
|
*/
|
|
2205
2383
|
showAllColumns() {
|
|
2206
|
-
const e = this.#
|
|
2207
|
-
e?.some((
|
|
2208
|
-
|
|
2209
|
-
}), this.#
|
|
2210
|
-
visibleColumns: (e ?? []).map((
|
|
2384
|
+
const e = this.#t.columns;
|
|
2385
|
+
e?.some((i) => i.hidden) && (e?.forEach((i) => {
|
|
2386
|
+
i.hidden = !1;
|
|
2387
|
+
}), this.#s("column-visibility", {
|
|
2388
|
+
visibleColumns: (e ?? []).map((i) => i.field)
|
|
2211
2389
|
}), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange());
|
|
2212
2390
|
}
|
|
2213
2391
|
/**
|
|
@@ -2217,7 +2395,7 @@ class G extends HTMLElement {
|
|
|
2217
2395
|
* @returns Array of all field names with their visibility status
|
|
2218
2396
|
*/
|
|
2219
2397
|
getAllColumns() {
|
|
2220
|
-
return (this.#
|
|
2398
|
+
return (this.#t.columns ?? []).map((o) => ({
|
|
2221
2399
|
field: o.field,
|
|
2222
2400
|
header: o.header || o.field,
|
|
2223
2401
|
visible: !o.hidden,
|
|
@@ -2231,14 +2409,14 @@ class G extends HTMLElement {
|
|
|
2231
2409
|
*/
|
|
2232
2410
|
setColumnOrder(e) {
|
|
2233
2411
|
if (!e.length) return;
|
|
2234
|
-
const o = new Map(this._columns.map((
|
|
2235
|
-
for (const
|
|
2236
|
-
const s = o.get(
|
|
2237
|
-
s && (
|
|
2412
|
+
const o = new Map(this._columns.map((n) => [n.field, n])), i = [];
|
|
2413
|
+
for (const n of e) {
|
|
2414
|
+
const s = o.get(n);
|
|
2415
|
+
s && (i.push(s), o.delete(n));
|
|
2238
2416
|
}
|
|
2239
|
-
for (const
|
|
2240
|
-
|
|
2241
|
-
this._columns =
|
|
2417
|
+
for (const n of o.values())
|
|
2418
|
+
i.push(n);
|
|
2419
|
+
this._columns = i, q(this), D(this), this.refreshVirtualWindow(!0);
|
|
2242
2420
|
}
|
|
2243
2421
|
/**
|
|
2244
2422
|
* Get the current column order as an array of field names.
|
|
@@ -2253,15 +2431,15 @@ class G extends HTMLElement {
|
|
|
2253
2431
|
* Returns a serializable object suitable for localStorage or database storage.
|
|
2254
2432
|
*/
|
|
2255
2433
|
getColumnState() {
|
|
2256
|
-
const e = this.#
|
|
2257
|
-
return
|
|
2434
|
+
const e = this.#e?.getAll() ?? [];
|
|
2435
|
+
return ce(this, e);
|
|
2258
2436
|
}
|
|
2259
2437
|
/**
|
|
2260
2438
|
* Set the column state, restoring order, width, visibility, sort, and plugin state.
|
|
2261
2439
|
* Use this to restore previously saved column state.
|
|
2262
2440
|
*/
|
|
2263
2441
|
set columnState(e) {
|
|
2264
|
-
e && (this.#d = e, this.#
|
|
2442
|
+
e && (this.#d = e, this.#A && this.#te(e));
|
|
2265
2443
|
}
|
|
2266
2444
|
/**
|
|
2267
2445
|
* Get the current column state.
|
|
@@ -2272,10 +2450,10 @@ class G extends HTMLElement {
|
|
|
2272
2450
|
/**
|
|
2273
2451
|
* Apply column state internally.
|
|
2274
2452
|
*/
|
|
2275
|
-
#
|
|
2276
|
-
(this.#
|
|
2277
|
-
|
|
2278
|
-
}), this.#
|
|
2453
|
+
#te(e) {
|
|
2454
|
+
(this.#t.columns ?? []).forEach((i) => {
|
|
2455
|
+
i.hidden = !1;
|
|
2456
|
+
}), this.#I(e), this.#c();
|
|
2279
2457
|
}
|
|
2280
2458
|
/**
|
|
2281
2459
|
* Request a state change event to be emitted.
|
|
@@ -2284,224 +2462,112 @@ class G extends HTMLElement {
|
|
|
2284
2462
|
* The event is debounced to avoid excessive events during drag operations.
|
|
2285
2463
|
*/
|
|
2286
2464
|
requestStateChange() {
|
|
2287
|
-
this.#
|
|
2465
|
+
this.#L || (this.#L = we(
|
|
2288
2466
|
this,
|
|
2289
|
-
() => this.#
|
|
2290
|
-
(e) => this.#
|
|
2291
|
-
)), this.#
|
|
2467
|
+
() => this.#e?.getAll() ?? [],
|
|
2468
|
+
(e) => this.#s("column-state-change", e)
|
|
2469
|
+
)), this.#L();
|
|
2292
2470
|
}
|
|
2293
2471
|
/**
|
|
2294
2472
|
* Reset column state to initial configuration.
|
|
2295
2473
|
* Clears all user modifications (order, width, visibility, sort).
|
|
2296
2474
|
*/
|
|
2297
2475
|
resetColumnState() {
|
|
2298
|
-
this.#d = void 0, (this.#
|
|
2299
|
-
|
|
2476
|
+
this.#d = void 0, (this.#t.columns ?? []).forEach((i) => {
|
|
2477
|
+
i.hidden = !1;
|
|
2300
2478
|
}), this.sortState = null, this.__originalOrder = [], this.#u(), this.#c();
|
|
2301
|
-
const o = this.#
|
|
2302
|
-
for (const
|
|
2303
|
-
if (
|
|
2304
|
-
for (const
|
|
2305
|
-
|
|
2306
|
-
field:
|
|
2479
|
+
const o = this.#e?.getAll() ?? [];
|
|
2480
|
+
for (const i of o)
|
|
2481
|
+
if (i.applyColumnState)
|
|
2482
|
+
for (const n of this._columns)
|
|
2483
|
+
i.applyColumnState(n.field, {
|
|
2484
|
+
field: n.field,
|
|
2307
2485
|
order: 0,
|
|
2308
2486
|
visible: !0
|
|
2309
2487
|
});
|
|
2310
2488
|
this.requestStateChange();
|
|
2311
2489
|
}
|
|
2312
2490
|
// ---------------- Shell / Tool Panel API ----------------
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2491
|
+
// These methods delegate to ShellController for implementation.
|
|
2492
|
+
// The controller encapsulates all tool panel logic while grid.ts
|
|
2493
|
+
// exposes the public API surface.
|
|
2494
|
+
/** Check if the tool panel is currently open. */
|
|
2316
2495
|
get isToolPanelOpen() {
|
|
2317
|
-
return this.#
|
|
2496
|
+
return this.#n.isPanelOpen;
|
|
2318
2497
|
}
|
|
2319
2498
|
/**
|
|
2320
2499
|
* Get the currently active tool panel ID, or null if none is open.
|
|
2321
2500
|
* @deprecated Use isToolPanelOpen and expandedToolPanelSections instead.
|
|
2322
2501
|
*/
|
|
2323
2502
|
get activeToolPanel() {
|
|
2324
|
-
return this.#
|
|
2503
|
+
return this.#n.activePanel;
|
|
2325
2504
|
}
|
|
2326
|
-
/**
|
|
2327
|
-
* Get the IDs of expanded accordion sections.
|
|
2328
|
-
*/
|
|
2505
|
+
/** Get the IDs of expanded accordion sections. */
|
|
2329
2506
|
get expandedToolPanelSections() {
|
|
2330
|
-
return
|
|
2507
|
+
return this.#n.expandedSections;
|
|
2331
2508
|
}
|
|
2332
|
-
/**
|
|
2333
|
-
* Open the tool panel (accordion view with all registered panels).
|
|
2334
|
-
*/
|
|
2509
|
+
/** Open the tool panel (accordion view with all registered panels). */
|
|
2335
2510
|
openToolPanel() {
|
|
2336
|
-
|
|
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
|
-
(i, s) => (i.order ?? 100) - (s.order ?? 100)
|
|
2340
|
-
)[0];
|
|
2341
|
-
n && this.#e.expandedSections.add(n.id);
|
|
2342
|
-
}
|
|
2343
|
-
ne(this.#n, this.#e), ie(this.#n, this.#e);
|
|
2344
|
-
const e = {
|
|
2345
|
-
expand: this.#o?.icons?.expand ?? P.expand,
|
|
2346
|
-
collapse: this.#o?.icons?.collapse ?? P.collapse
|
|
2347
|
-
};
|
|
2348
|
-
We(this.#n, this.#e, e), this.#i("tool-panel-open", { sections: this.expandedToolPanelSections });
|
|
2511
|
+
this.#n.openToolPanel();
|
|
2349
2512
|
}
|
|
2350
|
-
/**
|
|
2351
|
-
* Close the tool panel.
|
|
2352
|
-
*/
|
|
2513
|
+
/** Close the tool panel. */
|
|
2353
2514
|
closeToolPanel() {
|
|
2354
|
-
|
|
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, ne(this.#n, this.#e), ie(this.#n, this.#e), this.#i("tool-panel-close", {});
|
|
2361
|
-
}
|
|
2515
|
+
this.#n.closeToolPanel();
|
|
2362
2516
|
}
|
|
2363
|
-
/**
|
|
2364
|
-
* Toggle the tool panel open/closed.
|
|
2365
|
-
*/
|
|
2517
|
+
/** Toggle the tool panel open/closed. */
|
|
2366
2518
|
toggleToolPanel() {
|
|
2367
|
-
this.#
|
|
2519
|
+
this.#n.toggleToolPanel();
|
|
2368
2520
|
}
|
|
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
|
-
*/
|
|
2521
|
+
/** Toggle an accordion section expanded/collapsed. */
|
|
2374
2522
|
toggleToolPanelSection(e) {
|
|
2375
|
-
|
|
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 i = this.#e.panelCleanups.get(e);
|
|
2385
|
-
i && (i(), this.#e.panelCleanups.delete(e)), o.onClose?.(), this.#e.expandedSections.delete(e), this.#q(e, !1);
|
|
2386
|
-
} else {
|
|
2387
|
-
for (const [i, s] of this.#e.toolPanels)
|
|
2388
|
-
if (i !== e && this.#e.expandedSections.has(i)) {
|
|
2389
|
-
const r = this.#e.panelCleanups.get(i);
|
|
2390
|
-
r && (r(), this.#e.panelCleanups.delete(i)), s.onClose?.(), this.#e.expandedSections.delete(i), this.#q(i, !1);
|
|
2391
|
-
const l = this.#n.querySelector(`[data-section="${i}"] .tbw-accordion-content`);
|
|
2392
|
-
l && (l.innerHTML = "");
|
|
2393
|
-
}
|
|
2394
|
-
this.#e.expandedSections.add(e), this.#q(e, !0), this.#ue(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.#n.querySelector(`[data-section="${e}"]`);
|
|
2403
|
-
n && n.classList.toggle("expanded", o);
|
|
2523
|
+
this.#n.toggleToolPanelSection(e);
|
|
2404
2524
|
}
|
|
2405
|
-
/**
|
|
2406
|
-
* Render content for a single accordion section.
|
|
2407
|
-
*/
|
|
2408
|
-
#ue(e) {
|
|
2409
|
-
const o = this.#e.toolPanels.get(e);
|
|
2410
|
-
if (!o?.render) return;
|
|
2411
|
-
const n = this.#n.querySelector(`[data-section="${e}"] .tbw-accordion-content`);
|
|
2412
|
-
if (!n) return;
|
|
2413
|
-
const i = o.render(n);
|
|
2414
|
-
i && this.#e.panelCleanups.set(e, i);
|
|
2415
|
-
}
|
|
2416
|
-
/**
|
|
2417
|
-
* Get registered tool panel definitions.
|
|
2418
|
-
*/
|
|
2525
|
+
/** Get registered tool panel definitions. */
|
|
2419
2526
|
getToolPanels() {
|
|
2420
|
-
return
|
|
2527
|
+
return this.#n.getToolPanels();
|
|
2421
2528
|
}
|
|
2422
|
-
/**
|
|
2423
|
-
* Register a custom tool panel (without creating a plugin).
|
|
2424
|
-
*/
|
|
2529
|
+
/** Register a custom tool panel (without creating a plugin). */
|
|
2425
2530
|
registerToolPanel(e) {
|
|
2426
|
-
|
|
2427
|
-
console.warn(`[tbw-grid] Tool panel "${e.id}" already registered`);
|
|
2428
|
-
return;
|
|
2429
|
-
}
|
|
2430
|
-
this.#e.toolPanels.set(e.id, e), this.#a && this.#g();
|
|
2531
|
+
this.#n.registerToolPanel(e);
|
|
2431
2532
|
}
|
|
2432
|
-
/**
|
|
2433
|
-
* Unregister a custom tool panel.
|
|
2434
|
-
*/
|
|
2533
|
+
/** Unregister a custom tool panel. */
|
|
2435
2534
|
unregisterToolPanel(e) {
|
|
2436
|
-
this.#
|
|
2535
|
+
this.#n.unregisterToolPanel(e);
|
|
2437
2536
|
}
|
|
2438
|
-
/**
|
|
2439
|
-
* Get registered header content definitions.
|
|
2440
|
-
*/
|
|
2537
|
+
/** Get registered header content definitions. */
|
|
2441
2538
|
getHeaderContents() {
|
|
2442
|
-
return
|
|
2539
|
+
return this.#n.getHeaderContents();
|
|
2443
2540
|
}
|
|
2444
|
-
/**
|
|
2445
|
-
* Register custom header content (without creating a plugin).
|
|
2446
|
-
*/
|
|
2541
|
+
/** Register custom header content (without creating a plugin). */
|
|
2447
2542
|
registerHeaderContent(e) {
|
|
2448
|
-
|
|
2449
|
-
console.warn(`[tbw-grid] Header content "${e.id}" already registered`);
|
|
2450
|
-
return;
|
|
2451
|
-
}
|
|
2452
|
-
this.#e.headerContents.set(e.id, e), this.#a && oe(this.#n, this.#e);
|
|
2543
|
+
this.#n.registerHeaderContent(e);
|
|
2453
2544
|
}
|
|
2454
|
-
/**
|
|
2455
|
-
* Unregister custom header content.
|
|
2456
|
-
*/
|
|
2545
|
+
/** Unregister custom header content. */
|
|
2457
2546
|
unregisterHeaderContent(e) {
|
|
2458
|
-
|
|
2459
|
-
o && (o(), this.#e.headerContentCleanups.delete(e)), this.#e.headerContents.get(e)?.onDestroy?.(), this.#e.headerContents.delete(e), this.#n.querySelector(`[data-header-content="${e}"]`)?.remove();
|
|
2547
|
+
this.#n.unregisterHeaderContent(e);
|
|
2460
2548
|
}
|
|
2461
|
-
/**
|
|
2462
|
-
* Get all registered toolbar buttons.
|
|
2463
|
-
*/
|
|
2549
|
+
/** Get all registered toolbar buttons. */
|
|
2464
2550
|
getToolbarButtons() {
|
|
2465
|
-
return
|
|
2551
|
+
return this.#n.getToolbarButtons();
|
|
2466
2552
|
}
|
|
2467
|
-
/**
|
|
2468
|
-
* Register a custom toolbar button programmatically.
|
|
2469
|
-
*/
|
|
2553
|
+
/** Register a custom toolbar button programmatically. */
|
|
2470
2554
|
registerToolbarButton(e) {
|
|
2471
|
-
|
|
2472
|
-
console.warn(`[tbw-grid] Toolbar button "${e.id}" already registered`);
|
|
2473
|
-
return;
|
|
2474
|
-
}
|
|
2475
|
-
this.#e.toolbarButtons.set(e.id, e), this.#a && this.#g();
|
|
2555
|
+
this.#n.registerToolbarButton(e);
|
|
2476
2556
|
}
|
|
2477
|
-
/**
|
|
2478
|
-
* Unregister a custom toolbar button.
|
|
2479
|
-
*/
|
|
2557
|
+
/** Unregister a custom toolbar button. */
|
|
2480
2558
|
unregisterToolbarButton(e) {
|
|
2481
|
-
|
|
2482
|
-
o && (o(), this.#e.toolbarButtonCleanups.delete(e)), this.#e.toolbarButtons.delete(e), this.#a && this.#g();
|
|
2559
|
+
this.#n.unregisterToolbarButton(e);
|
|
2483
2560
|
}
|
|
2484
|
-
/**
|
|
2485
|
-
* Enable/disable a toolbar button by ID.
|
|
2486
|
-
*/
|
|
2561
|
+
/** Enable/disable a toolbar button by ID. */
|
|
2487
2562
|
setToolbarButtonDisabled(e, o) {
|
|
2488
|
-
|
|
2489
|
-
n && (n.disabled = o);
|
|
2490
|
-
const i = this.#n.querySelector(`[data-btn="${e}"]`);
|
|
2491
|
-
i && (i.disabled = o);
|
|
2563
|
+
this.#n.setToolbarButtonDisabled(e, o);
|
|
2492
2564
|
}
|
|
2493
2565
|
/**
|
|
2494
2566
|
* Re-parse light DOM shell elements and refresh shell header.
|
|
2495
2567
|
* Call this after dynamically modifying <tbw-grid-header> children.
|
|
2496
2568
|
*/
|
|
2497
2569
|
refreshShellHeader() {
|
|
2498
|
-
this.#
|
|
2499
|
-
}
|
|
2500
|
-
/**
|
|
2501
|
-
* Internal shell header refresh.
|
|
2502
|
-
*/
|
|
2503
|
-
#g() {
|
|
2504
|
-
te(this, this.#e), this.#X(), this.#G();
|
|
2570
|
+
se(this, this.#i), this.#$(), this.#B();
|
|
2505
2571
|
}
|
|
2506
2572
|
// ---------------- Virtual Window ----------------
|
|
2507
2573
|
/**
|
|
@@ -2512,40 +2578,43 @@ class G extends HTMLElement {
|
|
|
2512
2578
|
if (!this.bodyEl) return;
|
|
2513
2579
|
const o = this._rows.length;
|
|
2514
2580
|
if (!this.virtualization.enabled) {
|
|
2515
|
-
this.#
|
|
2581
|
+
this.#k(0, o), this.#e?.afterRender();
|
|
2516
2582
|
return;
|
|
2517
2583
|
}
|
|
2518
|
-
if (this
|
|
2519
|
-
this.virtualization.start = 0, this.virtualization.end = o, this.bodyEl.style.transform = "translateY(0px)", this.#
|
|
2520
|
-
|
|
2521
|
-
|
|
2584
|
+
if (this._rows.length <= this.virtualization.bypassThreshold) {
|
|
2585
|
+
if (this.virtualization.start = 0, this.virtualization.end = o, this.bodyEl.style.transform = "translateY(0px)", this.#k(0, o, this.__rowRenderEpoch), this.virtualization.totalHeightEl) {
|
|
2586
|
+
const y = this.#o.querySelector(".tbw-scroll-area"), E = y ? y.offsetHeight - y.clientHeight : 0;
|
|
2587
|
+
this.virtualization.totalHeightEl.style.height = `${o * this.virtualization.rowHeight + E}px`;
|
|
2588
|
+
}
|
|
2589
|
+
const m = this.#o.querySelector(".rows-body");
|
|
2590
|
+
m?.setAttribute("aria-rowcount", String(o)), m?.setAttribute("aria-colcount", String(this.visibleColumns.length)), this.#e?.afterRender();
|
|
2522
2591
|
return;
|
|
2523
2592
|
}
|
|
2524
|
-
const
|
|
2593
|
+
const i = this.virtualization.container ?? this, s = (this.virtualization.viewportEl ?? i).clientHeight, r = this.virtualization.rowHeight, l = i.scrollTop;
|
|
2525
2594
|
let a = Math.floor(l / r), d = 0;
|
|
2526
|
-
const
|
|
2527
|
-
for (; d <
|
|
2528
|
-
const
|
|
2529
|
-
if (
|
|
2530
|
-
a =
|
|
2595
|
+
const f = 10;
|
|
2596
|
+
for (; d < f; ) {
|
|
2597
|
+
const m = this.#e?.getExtraHeightBefore?.(a) ?? 0, y = Math.floor((l - m) / r);
|
|
2598
|
+
if (y >= a || y < 0) break;
|
|
2599
|
+
a = y, d++;
|
|
2531
2600
|
}
|
|
2532
2601
|
a = a - a % 2, a < 0 && (a = 0);
|
|
2533
|
-
const
|
|
2534
|
-
|
|
2535
|
-
const
|
|
2536
|
-
let c = a +
|
|
2602
|
+
const h = this.#e?.adjustVirtualStart(a, l, r);
|
|
2603
|
+
h !== void 0 && h < a && (a = h, a = a - a % 2, a < 0 && (a = 0));
|
|
2604
|
+
const p = Math.ceil(s / r) + 3;
|
|
2605
|
+
let c = a + p;
|
|
2537
2606
|
c > o && (c = o), this.virtualization.start = a, this.virtualization.end = c;
|
|
2538
|
-
const
|
|
2539
|
-
this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${o * r + r +
|
|
2540
|
-
const
|
|
2541
|
-
this.bodyEl.style.transform = `translateY(${
|
|
2542
|
-
const
|
|
2543
|
-
|
|
2607
|
+
const b = this.#o.querySelector(".tbw-footer")?.offsetHeight ?? 0, w = this.#e?.getExtraHeight() ?? 0, v = this.#o.querySelector(".tbw-scroll-area"), R = v ? v.offsetHeight - v.clientHeight : 0;
|
|
2608
|
+
this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${o * r + r + b + w + R}px`);
|
|
2609
|
+
const x = this.#e?.getExtraHeightBefore?.(a) ?? 0, _ = -(l - a * r - x);
|
|
2610
|
+
this.bodyEl.style.transform = `translateY(${_}px)`, this.#k(a, c, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch);
|
|
2611
|
+
const g = this.#o.querySelector(".rows-body");
|
|
2612
|
+
g?.setAttribute("aria-rowcount", String(o)), g?.setAttribute("aria-colcount", String(this.visibleColumns.length)), e && this.#e?.afterRender();
|
|
2544
2613
|
}
|
|
2545
2614
|
// ---------------- Render ----------------
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
const e = this.#
|
|
2615
|
+
#$() {
|
|
2616
|
+
se(this, this.#i);
|
|
2617
|
+
const e = this.#t?.shell, o = Be(e, this.#i), i = `
|
|
2549
2618
|
<div class="tbw-scroll-area">
|
|
2550
2619
|
<div class="rows-body-wrapper">
|
|
2551
2620
|
<div class="rows-body" role="grid">
|
|
@@ -2565,21 +2634,21 @@ class G extends HTMLElement {
|
|
|
2565
2634
|
</div>
|
|
2566
2635
|
`;
|
|
2567
2636
|
if (o) {
|
|
2568
|
-
const
|
|
2569
|
-
expand: this.#
|
|
2570
|
-
collapse: this.#
|
|
2571
|
-
}, r =
|
|
2572
|
-
this.#
|
|
2637
|
+
const n = this.#t?.icons?.toolPanel ?? H.toolPanel, s = {
|
|
2638
|
+
expand: this.#t?.icons?.expand ?? H.expand,
|
|
2639
|
+
collapse: this.#t?.icons?.collapse ?? H.collapse
|
|
2640
|
+
}, r = Ie(e, this.#i, n), l = $e(e, this.#i, i, s);
|
|
2641
|
+
this.#o.innerHTML = `
|
|
2573
2642
|
<div class="tbw-grid-root has-shell">
|
|
2574
2643
|
${r}
|
|
2575
2644
|
${l}
|
|
2576
2645
|
</div>
|
|
2577
|
-
`, this.#
|
|
2646
|
+
`, this.#oe(), this.#n.setInitialized(!0);
|
|
2578
2647
|
} else
|
|
2579
|
-
this.#
|
|
2648
|
+
this.#o.innerHTML = `
|
|
2580
2649
|
<div class="tbw-grid-root">
|
|
2581
2650
|
<div class="tbw-grid-content">
|
|
2582
|
-
${
|
|
2651
|
+
${i}
|
|
2583
2652
|
</div>
|
|
2584
2653
|
</div>
|
|
2585
2654
|
`;
|
|
@@ -2587,30 +2656,36 @@ class G extends HTMLElement {
|
|
|
2587
2656
|
/**
|
|
2588
2657
|
* Set up shell event listeners after render.
|
|
2589
2658
|
*/
|
|
2590
|
-
#
|
|
2591
|
-
|
|
2659
|
+
#oe() {
|
|
2660
|
+
We(this.#o, this.#t?.shell, this.#i, {
|
|
2592
2661
|
onPanelToggle: () => this.toggleToolPanel(),
|
|
2593
2662
|
onSectionToggle: (e) => this.toggleToolPanelSection(e),
|
|
2594
|
-
onToolbarButtonClick: (e) => this.#
|
|
2595
|
-
}), this.#
|
|
2663
|
+
onToolbarButtonClick: (e) => this.#ne(e)
|
|
2664
|
+
}), this.#S?.(), this.#S = Ve(this.#o, this.#t?.shell, (e) => {
|
|
2596
2665
|
this.style.setProperty("--tbw-tool-panel-width", `${e}px`);
|
|
2597
2666
|
});
|
|
2598
2667
|
}
|
|
2599
2668
|
/**
|
|
2600
2669
|
* Handle toolbar button click (for config buttons with action).
|
|
2601
2670
|
*/
|
|
2602
|
-
#
|
|
2603
|
-
const
|
|
2604
|
-
if (
|
|
2605
|
-
|
|
2671
|
+
#ne(e) {
|
|
2672
|
+
const i = (this.#t?.shell?.header?.toolbarButtons ?? []).find((s) => s.id === e);
|
|
2673
|
+
if (i?.action) {
|
|
2674
|
+
i.action();
|
|
2606
2675
|
return;
|
|
2607
2676
|
}
|
|
2608
|
-
const
|
|
2609
|
-
|
|
2677
|
+
const n = this.#i.toolbarButtons.get(e);
|
|
2678
|
+
n?.action && n.action();
|
|
2610
2679
|
}
|
|
2611
2680
|
}
|
|
2612
|
-
customElements.get(
|
|
2613
|
-
|
|
2681
|
+
customElements.get(W.tagName) || customElements.define(W.tagName, W);
|
|
2682
|
+
const Qe = {
|
|
2683
|
+
/** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
|
|
2684
|
+
CAN_MOVE_COLUMN: "canMoveColumn",
|
|
2685
|
+
/** Get context menu items. Context: ContextMenuParams. Response: ContextMenuItem[] */
|
|
2686
|
+
GET_CONTEXT_MENU_ITEMS: "getContextMenuItems"
|
|
2687
|
+
};
|
|
2688
|
+
class Je {
|
|
2614
2689
|
/** Plugin version - override in subclass if needed */
|
|
2615
2690
|
version = "1.0.0";
|
|
2616
2691
|
/** CSS styles to inject into the grid's shadow DOM */
|
|
@@ -2735,7 +2810,7 @@ class je {
|
|
|
2735
2810
|
*/
|
|
2736
2811
|
get gridIcons() {
|
|
2737
2812
|
const e = this.grid?.gridConfig?.icons ?? {};
|
|
2738
|
-
return { ...
|
|
2813
|
+
return { ...H, ...e };
|
|
2739
2814
|
}
|
|
2740
2815
|
/**
|
|
2741
2816
|
* Resolve an icon value to string or HTMLElement.
|
|
@@ -2764,9 +2839,10 @@ class je {
|
|
|
2764
2839
|
warn(e) {
|
|
2765
2840
|
console.warn(`[tbw-grid:${this.name}] ${e}`);
|
|
2766
2841
|
}
|
|
2842
|
+
// #endregion
|
|
2767
2843
|
}
|
|
2768
|
-
const
|
|
2769
|
-
//
|
|
2844
|
+
const T = {
|
|
2845
|
+
// ─── Core Structure ───────────────────────────────────────────────
|
|
2770
2846
|
ROOT: "tbw-grid-root",
|
|
2771
2847
|
HEADER: "header",
|
|
2772
2848
|
HEADER_ROW: "header-row",
|
|
@@ -2780,7 +2856,7 @@ const A = {
|
|
|
2780
2856
|
GROUP_ROW: "group-row",
|
|
2781
2857
|
// Cell elements
|
|
2782
2858
|
DATA_CELL: "data-cell",
|
|
2783
|
-
// States
|
|
2859
|
+
// ─── Core States ──────────────────────────────────────────────────
|
|
2784
2860
|
SELECTED: "selected",
|
|
2785
2861
|
FOCUSED: "focused",
|
|
2786
2862
|
EDITING: "editing",
|
|
@@ -2788,53 +2864,61 @@ const A = {
|
|
|
2788
2864
|
COLLAPSED: "collapsed",
|
|
2789
2865
|
DRAGGING: "dragging",
|
|
2790
2866
|
RESIZING: "resizing",
|
|
2791
|
-
// Sorting
|
|
2867
|
+
// Sorting (core feature)
|
|
2792
2868
|
SORTABLE: "sortable",
|
|
2793
2869
|
SORTED_ASC: "sorted-asc",
|
|
2794
2870
|
SORTED_DESC: "sorted-desc",
|
|
2795
2871
|
// Visibility
|
|
2796
2872
|
HIDDEN: "hidden",
|
|
2797
|
-
//
|
|
2873
|
+
// ─── Shared Classes (used by plugins, styled by core CSS) ────────
|
|
2874
|
+
// These are defined here because core CSS provides the base styling.
|
|
2875
|
+
// Plugins apply these classes; core CSS defines how they look.
|
|
2876
|
+
// Sticky positioning (PinnedColumnsPlugin applies, core CSS styles)
|
|
2798
2877
|
STICKY_LEFT: "sticky-left",
|
|
2799
2878
|
STICKY_RIGHT: "sticky-right",
|
|
2800
|
-
//
|
|
2879
|
+
// Pinned rows (PinnedRowsPlugin applies, core CSS styles)
|
|
2801
2880
|
PINNED_TOP: "pinned-top",
|
|
2802
2881
|
PINNED_BOTTOM: "pinned-bottom",
|
|
2803
|
-
// Tree
|
|
2882
|
+
// Tree structure (TreePlugin applies, core CSS styles)
|
|
2804
2883
|
TREE_TOGGLE: "tree-toggle",
|
|
2805
2884
|
TREE_INDENT: "tree-indent",
|
|
2806
|
-
// Grouping
|
|
2885
|
+
// Grouping (GroupingRowsPlugin applies, core CSS styles)
|
|
2807
2886
|
GROUP_TOGGLE: "group-toggle",
|
|
2808
2887
|
GROUP_LABEL: "group-label",
|
|
2809
2888
|
GROUP_COUNT: "group-count",
|
|
2810
|
-
// Selection
|
|
2889
|
+
// Selection (SelectionPlugin applies, core CSS styles)
|
|
2811
2890
|
RANGE_SELECTION: "range-selection",
|
|
2812
2891
|
SELECTION_OVERLAY: "selection-overlay"
|
|
2813
|
-
},
|
|
2892
|
+
}, G = {
|
|
2893
|
+
// ─── Core Attributes ──────────────────────────────────────────────
|
|
2814
2894
|
ROW_INDEX: "data-row-index",
|
|
2815
2895
|
COL_INDEX: "data-col-index",
|
|
2816
2896
|
FIELD: "data-field",
|
|
2897
|
+
// ─── Shared Attributes (used by plugins) ──────────────────────────
|
|
2817
2898
|
GROUP_KEY: "data-group-key",
|
|
2899
|
+
// GroupingRowsPlugin
|
|
2818
2900
|
TREE_LEVEL: "data-tree-level",
|
|
2901
|
+
// TreePlugin
|
|
2819
2902
|
STICKY: "data-sticky"
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2903
|
+
// PinnedColumnsPlugin
|
|
2904
|
+
}, et = {
|
|
2905
|
+
ROOT: `.${T.ROOT}`,
|
|
2906
|
+
HEADER: `.${T.HEADER}`,
|
|
2907
|
+
HEADER_ROW: `.${T.HEADER_ROW}`,
|
|
2908
|
+
HEADER_CELL: `.${T.HEADER_CELL}`,
|
|
2909
|
+
ROWS_VIEWPORT: `.${T.ROWS_VIEWPORT}`,
|
|
2910
|
+
ROWS_CONTAINER: `.${T.ROWS_CONTAINER}`,
|
|
2911
|
+
DATA_ROW: `.${T.DATA_ROW}`,
|
|
2912
|
+
DATA_CELL: `.${T.DATA_CELL}`,
|
|
2913
|
+
GROUP_ROW: `.${T.GROUP_ROW}`,
|
|
2830
2914
|
// By data attribute
|
|
2831
|
-
ROW_BY_INDEX: (t) => `.${
|
|
2832
|
-
CELL_BY_FIELD: (t) => `.${
|
|
2833
|
-
CELL_AT: (t, e) => `.${
|
|
2915
|
+
ROW_BY_INDEX: (t) => `.${T.DATA_ROW}[${G.ROW_INDEX}="${t}"]`,
|
|
2916
|
+
CELL_BY_FIELD: (t) => `.${T.DATA_CELL}[${G.FIELD}="${t}"]`,
|
|
2917
|
+
CELL_AT: (t, e) => `.${T.DATA_ROW}[${G.ROW_INDEX}="${t}"] .${T.DATA_CELL}[${G.COL_INDEX}="${e}"]`,
|
|
2834
2918
|
// State selectors
|
|
2835
|
-
SELECTED_ROWS: `.${
|
|
2836
|
-
EDITING_CELL: `.${
|
|
2837
|
-
},
|
|
2919
|
+
SELECTED_ROWS: `.${T.DATA_ROW}.${T.SELECTED}`,
|
|
2920
|
+
EDITING_CELL: `.${T.DATA_CELL}.${T.EDITING}`
|
|
2921
|
+
}, tt = {
|
|
2838
2922
|
// Colors
|
|
2839
2923
|
COLOR_BG: "--tbw-color-bg",
|
|
2840
2924
|
COLOR_FG: "--tbw-color-fg",
|
|
@@ -2856,7 +2940,7 @@ const A = {
|
|
|
2856
2940
|
// Borders
|
|
2857
2941
|
BORDER_RADIUS: "--tbw-border-radius",
|
|
2858
2942
|
FOCUS_OUTLINE: "--tbw-focus-outline"
|
|
2859
|
-
},
|
|
2943
|
+
}, ot = {
|
|
2860
2944
|
CELL_COMMIT: "cell-commit",
|
|
2861
2945
|
ROW_COMMIT: "row-commit",
|
|
2862
2946
|
CHANGED_ROWS_RESET: "changed-rows-reset",
|
|
@@ -2867,7 +2951,7 @@ const A = {
|
|
|
2867
2951
|
ACTIVATE_CELL: "activate-cell",
|
|
2868
2952
|
GROUP_TOGGLE: "group-toggle",
|
|
2869
2953
|
COLUMN_STATE_CHANGE: "column-state-change"
|
|
2870
|
-
},
|
|
2954
|
+
}, nt = {
|
|
2871
2955
|
// Selection plugin
|
|
2872
2956
|
SELECTION_CHANGE: "selection-change",
|
|
2873
2957
|
// Tree plugin
|
|
@@ -2898,10 +2982,10 @@ const A = {
|
|
|
2898
2982
|
DETAIL_EXPAND: "detail-expand",
|
|
2899
2983
|
// Grouping rows plugin
|
|
2900
2984
|
GROUP_EXPAND: "group-expand"
|
|
2901
|
-
},
|
|
2902
|
-
sum: (t, e) => t.reduce((o,
|
|
2985
|
+
}, K = {
|
|
2986
|
+
sum: (t, e) => t.reduce((o, i) => o + (Number(i[e]) || 0), 0),
|
|
2903
2987
|
avg: (t, e) => {
|
|
2904
|
-
const o = t.reduce((
|
|
2988
|
+
const o = t.reduce((i, n) => i + (Number(n[e]) || 0), 0);
|
|
2905
2989
|
return t.length ? o / t.length : 0;
|
|
2906
2990
|
},
|
|
2907
2991
|
count: (t) => t.length,
|
|
@@ -2909,46 +2993,46 @@ const A = {
|
|
|
2909
2993
|
max: (t, e) => Math.max(...t.map((o) => Number(o[e]) || -1 / 0)),
|
|
2910
2994
|
first: (t, e) => t[0]?.[e],
|
|
2911
2995
|
last: (t, e) => t[t.length - 1]?.[e]
|
|
2912
|
-
},
|
|
2996
|
+
}, I = /* @__PURE__ */ new Map(), O = {
|
|
2913
2997
|
/**
|
|
2914
2998
|
* Register a custom aggregator function.
|
|
2915
2999
|
*/
|
|
2916
3000
|
register(t, e) {
|
|
2917
|
-
|
|
3001
|
+
I.set(t, e);
|
|
2918
3002
|
},
|
|
2919
3003
|
/**
|
|
2920
3004
|
* Unregister a custom aggregator function.
|
|
2921
3005
|
*/
|
|
2922
3006
|
unregister(t) {
|
|
2923
|
-
|
|
3007
|
+
I.delete(t);
|
|
2924
3008
|
},
|
|
2925
3009
|
/**
|
|
2926
3010
|
* Get an aggregator function by reference.
|
|
2927
3011
|
*/
|
|
2928
3012
|
get(t) {
|
|
2929
3013
|
if (t !== void 0)
|
|
2930
|
-
return typeof t == "function" ? t :
|
|
3014
|
+
return typeof t == "function" ? t : I.get(t) ?? K[t];
|
|
2931
3015
|
},
|
|
2932
3016
|
/**
|
|
2933
3017
|
* Run an aggregator on a set of rows.
|
|
2934
3018
|
*/
|
|
2935
|
-
run(t, e, o,
|
|
2936
|
-
const
|
|
2937
|
-
return
|
|
3019
|
+
run(t, e, o, i) {
|
|
3020
|
+
const n = this.get(t);
|
|
3021
|
+
return n ? n(e, o, i) : void 0;
|
|
2938
3022
|
},
|
|
2939
3023
|
/**
|
|
2940
3024
|
* Check if an aggregator exists.
|
|
2941
3025
|
*/
|
|
2942
3026
|
has(t) {
|
|
2943
|
-
return
|
|
3027
|
+
return I.has(t) || t in K;
|
|
2944
3028
|
},
|
|
2945
3029
|
/**
|
|
2946
3030
|
* List all available aggregator names.
|
|
2947
3031
|
*/
|
|
2948
3032
|
list() {
|
|
2949
|
-
return [...Object.keys(
|
|
3033
|
+
return [...Object.keys(K), ...I.keys()];
|
|
2950
3034
|
}
|
|
2951
|
-
},
|
|
3035
|
+
}, ae = {
|
|
2952
3036
|
sum: (t) => t.reduce((e, o) => e + o, 0),
|
|
2953
3037
|
avg: (t) => t.length ? t.reduce((e, o) => e + o, 0) / t.length : 0,
|
|
2954
3038
|
count: (t) => t.length,
|
|
@@ -2957,33 +3041,34 @@ const A = {
|
|
|
2957
3041
|
first: (t) => t[0] ?? 0,
|
|
2958
3042
|
last: (t) => t[t.length - 1] ?? 0
|
|
2959
3043
|
};
|
|
2960
|
-
function
|
|
2961
|
-
return
|
|
3044
|
+
function Ze(t) {
|
|
3045
|
+
return ae[t] ?? ae.sum;
|
|
2962
3046
|
}
|
|
2963
|
-
function
|
|
2964
|
-
return
|
|
3047
|
+
function it(t, e) {
|
|
3048
|
+
return Ze(t)(e);
|
|
2965
3049
|
}
|
|
2966
|
-
const
|
|
3050
|
+
const st = O.register.bind(O), rt = O.unregister.bind(O), lt = O.get.bind(O), at = O.run.bind(O), ct = O.list.bind(O);
|
|
2967
3051
|
export {
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
3052
|
+
Je as BaseGridPlugin,
|
|
3053
|
+
H as DEFAULT_GRID_ICONS,
|
|
3054
|
+
ot as DGEvents,
|
|
3055
|
+
W as DataGridElement,
|
|
3056
|
+
$ as FitModeEnum,
|
|
3057
|
+
tt as GridCSSVars,
|
|
3058
|
+
T as GridClasses,
|
|
3059
|
+
G as GridDataAttrs,
|
|
3060
|
+
W as GridElement,
|
|
3061
|
+
et as GridSelectors,
|
|
3062
|
+
Qe as PLUGIN_QUERIES,
|
|
3063
|
+
nt as PluginEvents,
|
|
3064
|
+
Ye as PluginManager,
|
|
3065
|
+
O as aggregatorRegistry,
|
|
3066
|
+
lt as getAggregator,
|
|
3067
|
+
Ze as getValueAggregator,
|
|
3068
|
+
ct as listAggregators,
|
|
3069
|
+
st as registerAggregator,
|
|
3070
|
+
at as runAggregator,
|
|
3071
|
+
it as runValueAggregator,
|
|
3072
|
+
rt as unregisterAggregator
|
|
2988
3073
|
};
|
|
2989
3074
|
//# sourceMappingURL=index.js.map
|