@toolbox-web/grid 0.2.2 → 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 +46 -0
- package/all.d.ts +327 -178
- package/all.js +328 -287
- package/all.js.map +1 -1
- package/index.d.ts +219 -113
- package/index.js +1182 -1108
- package/index.js.map +1 -1
- package/lib/plugins/clipboard/index.js.map +1 -1
- package/lib/plugins/column-virtualization/index.js.map +1 -1
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/index.js.map +1 -1
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/index.js +91 -48
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/reorder/index.js +38 -35
- package/lib/plugins/reorder/index.js.map +1 -1
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +1 -1
- package/umd/grid.all.umd.js +19 -19
- 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/pinned-columns.umd.js +1 -1
- package/umd/plugins/pinned-columns.umd.js.map +1 -1
- package/umd/plugins/reorder.umd.js +1 -1
- package/umd/plugins/reorder.umd.js.map +1 -1
package/index.js
CHANGED
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
const ue = ":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 fe(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 we = /{{\s*([^}]+)\s*}}/g, k = "__DG_EMPTY__", ge = /^[\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 ye(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 Se(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 ke(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 ke(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,51 +318,51 @@ function ke(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
|
}
|
|
333
333
|
}
|
|
334
|
-
function
|
|
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 Pe(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 Oe = "__cellDisplayCache",
|
|
417
|
-
function
|
|
418
|
-
t[Oe] = void 0, 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 Me(t, e, o,
|
|
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 = W(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,61 +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) {
|
|
732
744
|
return !(t === "__proto__" || t === "constructor" || t === "prototype");
|
|
733
745
|
}
|
|
734
|
-
function
|
|
746
|
+
function B(t, e, o) {
|
|
735
747
|
t.activeEditRows !== e && (t.rowEditSnapshots.set(e, { ...o }), t.activeEditRows = e);
|
|
736
748
|
}
|
|
737
|
-
function
|
|
749
|
+
function M(t, e, o) {
|
|
738
750
|
if (t.activeEditRows !== e) return;
|
|
739
|
-
const
|
|
740
|
-
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) => {
|
|
741
753
|
const a = Number(l.getAttribute("data-col"));
|
|
742
754
|
if (isNaN(a)) return;
|
|
743
755
|
const d = t.visibleColumns[a];
|
|
744
756
|
if (!d) return;
|
|
745
|
-
const
|
|
746
|
-
if (
|
|
747
|
-
let
|
|
748
|
-
|
|
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);
|
|
749
761
|
}
|
|
750
|
-
}), o &&
|
|
751
|
-
Object.keys(
|
|
762
|
+
}), o && i && n)
|
|
763
|
+
Object.keys(i).forEach((r) => n[r] = i[r]), t._changedRowIndices.delete(e), Y(t);
|
|
752
764
|
else if (!o) {
|
|
753
765
|
const r = t._changedRowIndices.has(e);
|
|
754
766
|
t.dispatchEvent(
|
|
755
767
|
new CustomEvent("row-commit", {
|
|
756
768
|
detail: {
|
|
757
769
|
rowIndex: e,
|
|
758
|
-
row:
|
|
770
|
+
row: n,
|
|
759
771
|
changed: r,
|
|
760
772
|
changedRows: t.changedRows,
|
|
761
773
|
changedRowIndices: t.changedRowIndices
|
|
@@ -763,11 +775,11 @@ function N(t, e, o) {
|
|
|
763
775
|
})
|
|
764
776
|
);
|
|
765
777
|
}
|
|
766
|
-
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(() => {
|
|
767
779
|
try {
|
|
768
780
|
const r = t.focusRow, l = t.focusCol, a = t.findRenderedRowElement?.(r);
|
|
769
781
|
if (a) {
|
|
770
|
-
Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((
|
|
782
|
+
Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((f) => f.classList.remove("cell-focus"));
|
|
771
783
|
const d = a.querySelector(`.cell[data-row="${r}"][data-col="${l}"]`);
|
|
772
784
|
d && (d.classList.add("cell-focus"), d.setAttribute("aria-selected", "true"), d.hasAttribute("tabindex") || d.setAttribute("tabindex", "-1"), d.focus({ preventScroll: !0 }));
|
|
773
785
|
}
|
|
@@ -775,19 +787,19 @@ function N(t, e, o) {
|
|
|
775
787
|
}
|
|
776
788
|
});
|
|
777
789
|
}
|
|
778
|
-
function
|
|
790
|
+
function Q(t, e, o, i, n) {
|
|
779
791
|
const s = o.field;
|
|
780
|
-
if (!
|
|
781
|
-
|
|
792
|
+
if (!Z(s) || n[s] === i) return;
|
|
793
|
+
n[s] = i;
|
|
782
794
|
const l = !t._changedRowIndices.has(e);
|
|
783
795
|
t._changedRowIndices.add(e);
|
|
784
796
|
const a = t.findRenderedRowElement?.(e);
|
|
785
797
|
a && a.classList.add("changed"), t.dispatchEvent(
|
|
786
798
|
new CustomEvent("cell-commit", {
|
|
787
799
|
detail: {
|
|
788
|
-
row:
|
|
800
|
+
row: n,
|
|
789
801
|
field: s,
|
|
790
|
-
value:
|
|
802
|
+
value: i,
|
|
791
803
|
rowIndex: e,
|
|
792
804
|
changedRows: t.changedRows,
|
|
793
805
|
changedRowIndices: t.changedRowIndices,
|
|
@@ -796,142 +808,134 @@ function j(t, e, o, n, i) {
|
|
|
796
808
|
})
|
|
797
809
|
);
|
|
798
810
|
}
|
|
799
|
-
function
|
|
800
|
-
if (!
|
|
801
|
-
const s = e[
|
|
802
|
-
|
|
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");
|
|
803
815
|
let r = !1;
|
|
804
816
|
const l = (c) => {
|
|
805
|
-
r || t.activeEditRows === -1 ||
|
|
817
|
+
r || t.activeEditRows === -1 || Q(t, o, i, c, e);
|
|
806
818
|
}, a = () => {
|
|
807
|
-
r = !0,
|
|
808
|
-
const c =
|
|
819
|
+
r = !0, e[i.field] = Z(i.field) ? s : void 0;
|
|
820
|
+
const c = n.querySelector("input,textarea,select");
|
|
809
821
|
c && (typeof HTMLInputElement < "u" && c instanceof HTMLInputElement && c.type === "checkbox" ? c.checked = !!s : "value" in c && (c.value = s ?? ""));
|
|
810
822
|
}, d = document.createElement("div");
|
|
811
|
-
d.style.display = "contents",
|
|
812
|
-
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));
|
|
813
825
|
});
|
|
814
|
-
const
|
|
815
|
-
if (
|
|
816
|
-
const c =
|
|
817
|
-
u ? c.innerHTML = u({ row: e, value: s, field:
|
|
818
|
-
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,
|
|
819
|
-
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];
|
|
820
832
|
return x == null ? "" : String(x);
|
|
821
833
|
}) || "");
|
|
822
834
|
});
|
|
823
|
-
const
|
|
824
|
-
if (
|
|
835
|
+
const b = c.querySelector("input,textarea,select");
|
|
836
|
+
if (b) {
|
|
825
837
|
const w = typeof HTMLInputElement < "u";
|
|
826
|
-
w &&
|
|
827
|
-
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;
|
|
828
840
|
l(v);
|
|
829
|
-
}),
|
|
841
|
+
}), b.addEventListener("keydown", (v) => {
|
|
830
842
|
if (v.key === "Enter") {
|
|
831
843
|
v.stopPropagation(), v.preventDefault(), r = !0;
|
|
832
|
-
const
|
|
833
|
-
l(
|
|
844
|
+
const R = w && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked : b.value;
|
|
845
|
+
l(R), M(t, o, !1);
|
|
834
846
|
}
|
|
835
|
-
v.key === "Escape" && (v.stopPropagation(), v.preventDefault(), a(),
|
|
836
|
-
}), w &&
|
|
837
|
-
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;
|
|
838
850
|
l(v);
|
|
839
|
-
}), setTimeout(() =>
|
|
851
|
+
}), setTimeout(() => b.focus(), 0);
|
|
840
852
|
}
|
|
841
853
|
d.appendChild(c);
|
|
842
|
-
} else if (typeof
|
|
843
|
-
const c = document.createElement(
|
|
844
|
-
c.value =
|
|
845
|
-
} else if (typeof
|
|
846
|
-
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 });
|
|
847
859
|
typeof c == "string" ? d.innerHTML = c : d.appendChild(c);
|
|
848
|
-
} else if (
|
|
860
|
+
} else if (h && typeof h == "object") {
|
|
849
861
|
const c = document.createElement("div");
|
|
850
|
-
c.setAttribute("data-external-editor", ""), c.setAttribute("data-field",
|
|
851
|
-
const u = { row: e, value:
|
|
852
|
-
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)
|
|
853
865
|
try {
|
|
854
|
-
|
|
866
|
+
h.mount({ placeholder: c, context: u, spec: h });
|
|
855
867
|
} catch {
|
|
856
868
|
}
|
|
857
869
|
else
|
|
858
870
|
t.dispatchEvent(
|
|
859
|
-
new CustomEvent("mount-external-editor", { detail: { placeholder: c, spec:
|
|
871
|
+
new CustomEvent("mount-external-editor", { detail: { placeholder: c, spec: h, context: u } })
|
|
860
872
|
);
|
|
861
873
|
}
|
|
862
874
|
}
|
|
863
|
-
function
|
|
864
|
-
!t.sortState || t.sortState.field !== e.field ? (t.sortState || (t.__originalOrder = t._rows.slice()),
|
|
865
|
-
|
|
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");
|
|
866
878
|
}), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
867
879
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: 0 } })
|
|
868
880
|
), t.requestStateChange?.());
|
|
869
881
|
}
|
|
870
|
-
function
|
|
882
|
+
function ie(t, e, o) {
|
|
871
883
|
t.sortState = { field: e.field, direction: o };
|
|
872
|
-
const
|
|
873
|
-
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(
|
|
874
886
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: o } })
|
|
875
887
|
), t.requestStateChange?.();
|
|
876
888
|
}
|
|
877
|
-
function
|
|
889
|
+
function De(t, e) {
|
|
878
890
|
typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
|
|
879
891
|
}
|
|
880
|
-
function
|
|
892
|
+
function q(t) {
|
|
881
893
|
t.headerRowEl = t.findHeaderRow();
|
|
882
894
|
const e = t.headerRowEl;
|
|
883
|
-
e.innerHTML = "", t.visibleColumns.forEach((o,
|
|
884
|
-
const
|
|
885
|
-
|
|
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));
|
|
886
898
|
const s = o.__headerTemplate;
|
|
887
|
-
if (s) Array.from(s.childNodes).forEach((r) =>
|
|
899
|
+
if (s) Array.from(s.childNodes).forEach((r) => n.appendChild(r.cloneNode(!0)));
|
|
888
900
|
else {
|
|
889
901
|
const r = o.header || o.field, l = document.createElement("span");
|
|
890
|
-
l.textContent = r,
|
|
902
|
+
l.textContent = r, n.appendChild(l);
|
|
891
903
|
}
|
|
892
904
|
if (o.sortable) {
|
|
893
|
-
|
|
905
|
+
n.classList.add("sortable"), n.tabIndex = 0;
|
|
894
906
|
const r = document.createElement("span");
|
|
895
|
-
|
|
896
|
-
const l = t.sortState?.field === o.field ? t.sortState.direction : 0, a = { ...
|
|
897
|
-
|
|
898
|
-
t.resizeController?.isResizing || t.dispatchHeaderClick?.(
|
|
899
|
-
}),
|
|
900
|
-
if (
|
|
901
|
-
if (
|
|
902
|
-
|
|
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);
|
|
903
915
|
}
|
|
904
916
|
});
|
|
905
917
|
}
|
|
906
918
|
if (o.resizable) {
|
|
907
|
-
|
|
919
|
+
n.style.position = "relative";
|
|
908
920
|
const r = document.createElement("div");
|
|
909
921
|
r.className = "resize-handle", r.setAttribute("aria-hidden", "true"), r.addEventListener("mousedown", (l) => {
|
|
910
|
-
l.stopPropagation(), l.preventDefault(), t.resizeController.start(l,
|
|
911
|
-
}),
|
|
922
|
+
l.stopPropagation(), l.preventDefault(), t.resizeController.start(l, i, n);
|
|
923
|
+
}), n.appendChild(r);
|
|
912
924
|
}
|
|
913
|
-
e.appendChild(
|
|
914
|
-
})
|
|
915
|
-
try {
|
|
916
|
-
const o = t.shadowRoot;
|
|
917
|
-
o && o.querySelectorAll(".header-group-row .cell").forEach((i) => {
|
|
918
|
-
i.getAttribute("data-group") && i.classList.add("grouped");
|
|
919
|
-
});
|
|
920
|
-
} catch {
|
|
921
|
-
}
|
|
922
|
-
e.querySelectorAll(".cell.sortable").forEach((o) => {
|
|
925
|
+
e.appendChild(n);
|
|
926
|
+
}), e.querySelectorAll(".cell.sortable").forEach((o) => {
|
|
923
927
|
o.getAttribute("aria-sort") || o.setAttribute("aria-sort", "none");
|
|
924
928
|
}), e.children.length > 0 ? (e.setAttribute("role", "row"), e.setAttribute("aria-rowindex", "1")) : (e.removeAttribute("role"), e.removeAttribute("aria-rowindex"));
|
|
925
929
|
}
|
|
926
|
-
function
|
|
927
|
-
let e = null, o = null,
|
|
930
|
+
function Ne(t) {
|
|
931
|
+
let e = null, o = null, i = null, n = null;
|
|
928
932
|
const s = (a) => {
|
|
929
933
|
if (!e) return;
|
|
930
|
-
const d = a.clientX - e.startX,
|
|
931
|
-
|
|
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(() => {
|
|
932
936
|
o = null, t.updateTemplate?.();
|
|
933
937
|
})), t.dispatchEvent(
|
|
934
|
-
new CustomEvent("column-resize", { detail: { field:
|
|
938
|
+
new CustomEvent("column-resize", { detail: { field: h.field, width: f } })
|
|
935
939
|
);
|
|
936
940
|
};
|
|
937
941
|
let r = !1;
|
|
@@ -939,26 +943,26 @@ function De(t) {
|
|
|
939
943
|
const a = e !== null;
|
|
940
944
|
a && (r = !0, requestAnimationFrame(() => {
|
|
941
945
|
r = !1;
|
|
942
|
-
})), 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();
|
|
943
947
|
};
|
|
944
948
|
return {
|
|
945
949
|
get isResizing() {
|
|
946
950
|
return e !== null || r;
|
|
947
951
|
},
|
|
948
|
-
start(a, d,
|
|
952
|
+
start(a, d, f) {
|
|
949
953
|
a.preventDefault();
|
|
950
|
-
const
|
|
951
|
-
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";
|
|
952
956
|
},
|
|
953
957
|
dispose() {
|
|
954
958
|
l();
|
|
955
959
|
}
|
|
956
960
|
};
|
|
957
961
|
}
|
|
958
|
-
function
|
|
962
|
+
function V(t) {
|
|
959
963
|
return t ? typeof t == "string" ? t : t.outerHTML : "";
|
|
960
964
|
}
|
|
961
|
-
function
|
|
965
|
+
function qe() {
|
|
962
966
|
return {
|
|
963
967
|
toolPanels: /* @__PURE__ */ new Map(),
|
|
964
968
|
headerContents: /* @__PURE__ */ new Map(),
|
|
@@ -975,44 +979,44 @@ function Ne() {
|
|
|
975
979
|
activePanelCleanup: null
|
|
976
980
|
};
|
|
977
981
|
}
|
|
978
|
-
function
|
|
982
|
+
function Be(t, e) {
|
|
979
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);
|
|
980
984
|
}
|
|
981
|
-
function
|
|
982
|
-
const
|
|
983
|
-
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 = "";
|
|
984
988
|
for (const w of c)
|
|
985
|
-
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>`);
|
|
986
990
|
for (const w of u)
|
|
987
|
-
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>`);
|
|
988
992
|
for (const w of c)
|
|
989
|
-
(w.element || w.render) && (
|
|
993
|
+
(w.element || w.render) && (b += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${w.id}"></div>`);
|
|
990
994
|
for (const w of u)
|
|
991
|
-
(w.element || w.render) && (
|
|
992
|
-
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) {
|
|
993
997
|
const w = e.isPanelOpen;
|
|
994
|
-
|
|
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>`;
|
|
995
999
|
}
|
|
996
1000
|
return `
|
|
997
1001
|
<div class="tbw-shell-header" part="shell-header" role="presentation">
|
|
998
|
-
${
|
|
1002
|
+
${n ? `<div class="tbw-shell-title">${i}</div>` : ""}
|
|
999
1003
|
<div class="tbw-shell-content" part="shell-content" role="presentation">
|
|
1000
1004
|
<slot name="header-content"></slot>
|
|
1001
1005
|
</div>
|
|
1002
1006
|
<div class="tbw-shell-toolbar" part="shell-toolbar" role="presentation">
|
|
1003
|
-
${
|
|
1007
|
+
${b}
|
|
1004
1008
|
</div>
|
|
1005
1009
|
</div>
|
|
1006
1010
|
`;
|
|
1007
1011
|
}
|
|
1008
|
-
function
|
|
1009
|
-
const
|
|
1010
|
-
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 = "";
|
|
1011
1015
|
for (const u of d) {
|
|
1012
|
-
const
|
|
1013
|
-
|
|
1014
|
-
<div class="${`tbw-accordion-section${
|
|
1015
|
-
<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"' : ""}>
|
|
1016
1020
|
${w}
|
|
1017
1021
|
<span class="tbw-accordion-title">${u.title}</span>
|
|
1018
1022
|
${v}
|
|
@@ -1022,16 +1026,16 @@ function Ie(t, e, o, n) {
|
|
|
1022
1026
|
`;
|
|
1023
1027
|
}
|
|
1024
1028
|
const c = s ? `
|
|
1025
|
-
<aside class="tbw-tool-panel${r ? " open" : ""}" part="tool-panel" data-position="${
|
|
1026
|
-
<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>
|
|
1027
1031
|
<div class="tbw-tool-panel-content" role="presentation">
|
|
1028
1032
|
<div class="tbw-accordion">
|
|
1029
|
-
${
|
|
1033
|
+
${h}
|
|
1030
1034
|
</div>
|
|
1031
1035
|
</div>
|
|
1032
1036
|
</aside>
|
|
1033
1037
|
` : "";
|
|
1034
|
-
return
|
|
1038
|
+
return n === "left" ? `
|
|
1035
1039
|
<div class="tbw-shell-body">
|
|
1036
1040
|
${c}
|
|
1037
1041
|
<div class="tbw-grid-content">
|
|
@@ -1047,161 +1051,161 @@ function Ie(t, e, o, n) {
|
|
|
1047
1051
|
</div>
|
|
1048
1052
|
`;
|
|
1049
1053
|
}
|
|
1050
|
-
function
|
|
1054
|
+
function se(t, e) {
|
|
1051
1055
|
const o = t.querySelector("tbw-grid-header");
|
|
1052
1056
|
if (!o) return;
|
|
1053
1057
|
o.style.display = "none";
|
|
1054
|
-
const
|
|
1055
|
-
e.lightDomHeaderContent = Array.from(
|
|
1058
|
+
const i = o.querySelectorAll("tbw-grid-header-content");
|
|
1059
|
+
e.lightDomHeaderContent = Array.from(i), e.lightDomHeaderContent.forEach((s) => {
|
|
1056
1060
|
s.setAttribute("slot", "header-content");
|
|
1057
1061
|
});
|
|
1058
|
-
const
|
|
1059
|
-
e.lightDomButtons = Array.from(
|
|
1062
|
+
const n = o.querySelectorAll("tbw-grid-tool-button");
|
|
1063
|
+
e.lightDomButtons = Array.from(n), e.lightDomButtons.sort((s, r) => {
|
|
1060
1064
|
const l = parseInt(s.getAttribute("order") ?? "100", 10), a = parseInt(r.getAttribute("order") ?? "100", 10);
|
|
1061
1065
|
return l - a;
|
|
1062
1066
|
}), e.lightDomButtons.forEach((s) => {
|
|
1063
1067
|
s.setAttribute("slot", "toolbar");
|
|
1064
1068
|
});
|
|
1065
1069
|
}
|
|
1066
|
-
function
|
|
1067
|
-
const
|
|
1068
|
-
|
|
1070
|
+
function We(t, e, o, i) {
|
|
1071
|
+
const n = t.querySelector(".tbw-shell-toolbar");
|
|
1072
|
+
n && n.addEventListener("click", (r) => {
|
|
1069
1073
|
const l = r.target;
|
|
1070
1074
|
if (l.closest("[data-panel-toggle]")) {
|
|
1071
|
-
|
|
1075
|
+
i.onPanelToggle();
|
|
1072
1076
|
return;
|
|
1073
1077
|
}
|
|
1074
1078
|
const d = l.closest("[data-btn]");
|
|
1075
1079
|
if (d) {
|
|
1076
|
-
const
|
|
1077
|
-
|
|
1080
|
+
const f = d.getAttribute("data-btn");
|
|
1081
|
+
f && i.onToolbarButtonClick(f);
|
|
1078
1082
|
}
|
|
1079
1083
|
});
|
|
1080
1084
|
const s = t.querySelector(".tbw-accordion");
|
|
1081
1085
|
s && s.addEventListener("click", (r) => {
|
|
1082
1086
|
const a = r.target.closest(".tbw-accordion-header");
|
|
1083
1087
|
if (a) {
|
|
1084
|
-
const
|
|
1085
|
-
|
|
1088
|
+
const f = a.closest("[data-section]")?.getAttribute("data-section");
|
|
1089
|
+
f && i.onSectionToggle(f);
|
|
1086
1090
|
}
|
|
1087
1091
|
});
|
|
1088
1092
|
}
|
|
1089
1093
|
function Ve(t, e, o) {
|
|
1090
|
-
const
|
|
1091
|
-
if (!
|
|
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)
|
|
1092
1096
|
return () => {
|
|
1093
1097
|
};
|
|
1094
1098
|
const r = e?.toolPanel?.position ?? "right", l = 200;
|
|
1095
|
-
let a = 0, d = 0,
|
|
1096
|
-
const
|
|
1097
|
-
if (!
|
|
1098
|
-
|
|
1099
|
-
const w = r === "left" ?
|
|
1100
|
-
|
|
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`;
|
|
1101
1105
|
}, c = () => {
|
|
1102
|
-
if (!
|
|
1103
|
-
|
|
1104
|
-
const
|
|
1105
|
-
o(
|
|
1106
|
-
}, u = (
|
|
1107
|
-
|
|
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);
|
|
1108
1112
|
};
|
|
1109
|
-
return
|
|
1110
|
-
|
|
1113
|
+
return n.addEventListener("mousedown", u), () => {
|
|
1114
|
+
n.removeEventListener("mousedown", u), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", c);
|
|
1111
1115
|
};
|
|
1112
1116
|
}
|
|
1113
|
-
function
|
|
1114
|
-
const
|
|
1115
|
-
for (const
|
|
1116
|
-
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}"]`);
|
|
1117
1121
|
if (!s) continue;
|
|
1118
|
-
const r = o.toolbarButtonCleanups.get(
|
|
1119
|
-
if (r && (r(), o.toolbarButtonCleanups.delete(
|
|
1120
|
-
s.appendChild(
|
|
1121
|
-
else if (
|
|
1122
|
-
const l =
|
|
1123
|
-
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);
|
|
1124
1128
|
}
|
|
1125
1129
|
}
|
|
1126
1130
|
}
|
|
1127
|
-
function
|
|
1131
|
+
function he(t, e) {
|
|
1128
1132
|
const o = t.querySelector(".tbw-shell-content");
|
|
1129
1133
|
if (!o) return;
|
|
1130
|
-
const
|
|
1131
|
-
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) {
|
|
1132
1136
|
const r = e.headerContentCleanups.get(s.id);
|
|
1133
1137
|
r && (r(), e.headerContentCleanups.delete(s.id));
|
|
1134
1138
|
let l = o.querySelector(`[data-header-content="${s.id}"]`);
|
|
1135
|
-
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));
|
|
1136
1140
|
const a = s.render(l);
|
|
1137
1141
|
a && e.headerContentCleanups.set(s.id, a);
|
|
1138
1142
|
}
|
|
1139
1143
|
}
|
|
1140
|
-
function
|
|
1144
|
+
function Fe(t, e, o) {
|
|
1141
1145
|
if (!e.isPanelOpen) return;
|
|
1142
|
-
const
|
|
1146
|
+
const i = V(o?.expand ?? H.expand), n = V(o?.collapse ?? H.collapse);
|
|
1143
1147
|
for (const [s, r] of e.toolPanels) {
|
|
1144
1148
|
const l = e.expandedSections.has(s), a = t.querySelector(`[data-section="${s}"]`), d = a?.querySelector(".tbw-accordion-content");
|
|
1145
1149
|
if (!a || !d) continue;
|
|
1146
1150
|
a.classList.toggle("expanded", l);
|
|
1147
|
-
const
|
|
1148
|
-
|
|
1149
|
-
const
|
|
1150
|
-
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) {
|
|
1151
1155
|
if (d.children.length === 0) {
|
|
1152
|
-
const
|
|
1153
|
-
|
|
1156
|
+
const p = r.render(d);
|
|
1157
|
+
p && e.panelCleanups.set(s, p);
|
|
1154
1158
|
}
|
|
1155
1159
|
} else {
|
|
1156
|
-
const
|
|
1157
|
-
|
|
1160
|
+
const p = e.panelCleanups.get(s);
|
|
1161
|
+
p && (p(), e.panelCleanups.delete(s)), d.innerHTML = "";
|
|
1158
1162
|
}
|
|
1159
1163
|
}
|
|
1160
1164
|
}
|
|
1161
|
-
function
|
|
1165
|
+
function re(t, e) {
|
|
1162
1166
|
const o = t.querySelector("[data-panel-toggle]");
|
|
1163
1167
|
o && (o.classList.toggle("active", e.isPanelOpen), o.setAttribute("aria-pressed", String(e.isPanelOpen)));
|
|
1164
1168
|
}
|
|
1165
|
-
function
|
|
1169
|
+
function le(t, e) {
|
|
1166
1170
|
const o = t.querySelector(".tbw-tool-panel");
|
|
1167
1171
|
o && (o.classList.toggle("open", e.isPanelOpen), e.isPanelOpen || (o.style.width = ""));
|
|
1168
1172
|
}
|
|
1169
|
-
function
|
|
1173
|
+
function Ue(t, e) {
|
|
1170
1174
|
const o = [];
|
|
1171
|
-
for (const
|
|
1175
|
+
for (const i of t?.header?.toolbarButtons ?? [])
|
|
1172
1176
|
o.push({
|
|
1173
|
-
id:
|
|
1174
|
-
label:
|
|
1175
|
-
disabled:
|
|
1177
|
+
id: i.id,
|
|
1178
|
+
label: i.label,
|
|
1179
|
+
disabled: i.disabled ?? !1,
|
|
1176
1180
|
source: "config"
|
|
1177
1181
|
});
|
|
1178
|
-
for (const
|
|
1182
|
+
for (const i of e.toolbarButtons.values())
|
|
1179
1183
|
o.push({
|
|
1180
|
-
id:
|
|
1181
|
-
label:
|
|
1182
|
-
disabled:
|
|
1184
|
+
id: i.id,
|
|
1185
|
+
label: i.label,
|
|
1186
|
+
disabled: i.disabled ?? !1,
|
|
1183
1187
|
source: "config"
|
|
1184
1188
|
});
|
|
1185
|
-
for (let
|
|
1186
|
-
const s = e.lightDomButtons[
|
|
1189
|
+
for (let i = 0; i < e.lightDomButtons.length; i++) {
|
|
1190
|
+
const s = e.lightDomButtons[i].querySelector("button");
|
|
1187
1191
|
o.push({
|
|
1188
|
-
id: `light-dom-${
|
|
1192
|
+
id: `light-dom-${i}`,
|
|
1189
1193
|
label: s?.getAttribute("title") ?? s?.getAttribute("aria-label") ?? "",
|
|
1190
1194
|
disabled: s?.disabled ?? !1,
|
|
1191
1195
|
source: "light-dom"
|
|
1192
1196
|
});
|
|
1193
1197
|
}
|
|
1194
|
-
for (const
|
|
1198
|
+
for (const i of e.toolPanels.values())
|
|
1195
1199
|
o.push({
|
|
1196
|
-
id: `panel-toggle-${
|
|
1197
|
-
label:
|
|
1200
|
+
id: `panel-toggle-${i.id}`,
|
|
1201
|
+
label: i.tooltip ?? i.title,
|
|
1198
1202
|
disabled: !1,
|
|
1199
1203
|
source: "panel-toggle",
|
|
1200
|
-
panelId:
|
|
1204
|
+
panelId: i.id
|
|
1201
1205
|
});
|
|
1202
1206
|
return o;
|
|
1203
1207
|
}
|
|
1204
|
-
function
|
|
1208
|
+
function Xe(t) {
|
|
1205
1209
|
for (const e of t.headerContentCleanups.values())
|
|
1206
1210
|
e();
|
|
1207
1211
|
t.headerContentCleanups.clear(), t.activePanelCleanup && (t.activePanelCleanup(), t.activePanelCleanup = null);
|
|
@@ -1209,7 +1213,142 @@ function Ue(t) {
|
|
|
1209
1213
|
e();
|
|
1210
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;
|
|
1211
1215
|
}
|
|
1212
|
-
|
|
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 {
|
|
1213
1352
|
constructor(e) {
|
|
1214
1353
|
this.grid = e;
|
|
1215
1354
|
}
|
|
@@ -1235,14 +1374,14 @@ class Xe {
|
|
|
1235
1374
|
*/
|
|
1236
1375
|
attach(e) {
|
|
1237
1376
|
if (this.pluginMap.set(e.constructor, e), this.plugins.push(e), e.cellRenderers)
|
|
1238
|
-
for (const [o,
|
|
1239
|
-
this.cellRenderers.set(o,
|
|
1377
|
+
for (const [o, i] of Object.entries(e.cellRenderers))
|
|
1378
|
+
this.cellRenderers.set(o, i);
|
|
1240
1379
|
if (e.headerRenderers)
|
|
1241
|
-
for (const [o,
|
|
1242
|
-
this.headerRenderers.set(o,
|
|
1380
|
+
for (const [o, i] of Object.entries(e.headerRenderers))
|
|
1381
|
+
this.headerRenderers.set(o, i);
|
|
1243
1382
|
if (e.cellEditors)
|
|
1244
|
-
for (const [o,
|
|
1245
|
-
this.cellEditors.set(o,
|
|
1383
|
+
for (const [o, i] of Object.entries(e.cellEditors))
|
|
1384
|
+
this.cellEditors.set(o, i);
|
|
1246
1385
|
e.attach(this.grid);
|
|
1247
1386
|
}
|
|
1248
1387
|
/**
|
|
@@ -1308,8 +1447,8 @@ class Xe {
|
|
|
1308
1447
|
*/
|
|
1309
1448
|
processRows(e) {
|
|
1310
1449
|
let o = [...e];
|
|
1311
|
-
for (const
|
|
1312
|
-
|
|
1450
|
+
for (const i of this.plugins)
|
|
1451
|
+
i.processRows && (o = i.processRows(o));
|
|
1313
1452
|
return o;
|
|
1314
1453
|
}
|
|
1315
1454
|
/**
|
|
@@ -1317,8 +1456,8 @@ class Xe {
|
|
|
1317
1456
|
*/
|
|
1318
1457
|
processColumns(e) {
|
|
1319
1458
|
let o = [...e];
|
|
1320
|
-
for (const
|
|
1321
|
-
|
|
1459
|
+
for (const i of this.plugins)
|
|
1460
|
+
i.processColumns && (o = i.processColumns(o));
|
|
1322
1461
|
return o;
|
|
1323
1462
|
}
|
|
1324
1463
|
/**
|
|
@@ -1359,33 +1498,50 @@ class Xe {
|
|
|
1359
1498
|
*/
|
|
1360
1499
|
getExtraHeightBefore(e) {
|
|
1361
1500
|
let o = 0;
|
|
1362
|
-
for (const
|
|
1363
|
-
typeof
|
|
1501
|
+
for (const i of this.plugins)
|
|
1502
|
+
typeof i.getExtraHeightBefore == "function" && (o += i.getExtraHeightBefore(e));
|
|
1364
1503
|
return o;
|
|
1365
1504
|
}
|
|
1366
1505
|
/**
|
|
1367
1506
|
* Adjust the virtualization start index based on plugin needs.
|
|
1368
1507
|
* Returns the minimum start index from all plugins.
|
|
1369
1508
|
*/
|
|
1370
|
-
adjustVirtualStart(e, o,
|
|
1371
|
-
let
|
|
1509
|
+
adjustVirtualStart(e, o, i) {
|
|
1510
|
+
let n = e;
|
|
1372
1511
|
for (const s of this.plugins)
|
|
1373
1512
|
if (typeof s.adjustVirtualStart == "function") {
|
|
1374
|
-
const r = s.adjustVirtualStart(e, o,
|
|
1375
|
-
r <
|
|
1513
|
+
const r = s.adjustVirtualStart(e, o, i);
|
|
1514
|
+
r < n && (n = r);
|
|
1376
1515
|
}
|
|
1377
|
-
return
|
|
1516
|
+
return n;
|
|
1378
1517
|
}
|
|
1379
1518
|
/**
|
|
1380
1519
|
* Execute renderRow hook on all plugins.
|
|
1381
1520
|
* Returns true if any plugin handled the row.
|
|
1382
1521
|
*/
|
|
1383
|
-
renderRow(e, o,
|
|
1384
|
-
for (const
|
|
1385
|
-
if (
|
|
1522
|
+
renderRow(e, o, i) {
|
|
1523
|
+
for (const n of this.plugins)
|
|
1524
|
+
if (n.renderRow?.(e, o, i))
|
|
1386
1525
|
return !0;
|
|
1387
1526
|
return !1;
|
|
1388
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
|
+
}
|
|
1389
1545
|
/**
|
|
1390
1546
|
* Execute onKeyDown hook on all plugins.
|
|
1391
1547
|
* Returns true if any plugin handled the event.
|
|
@@ -1463,16 +1619,23 @@ class Xe {
|
|
|
1463
1619
|
return !0;
|
|
1464
1620
|
return !1;
|
|
1465
1621
|
}
|
|
1622
|
+
// #endregion
|
|
1623
|
+
// #region Scroll Boundary Hooks
|
|
1466
1624
|
/**
|
|
1467
|
-
* Collect
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
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));
|
|
1474
1637
|
}
|
|
1475
|
-
return
|
|
1638
|
+
return { left: i, right: n, skipScroll: s };
|
|
1476
1639
|
}
|
|
1477
1640
|
// #endregion
|
|
1478
1641
|
// #region Shell Integration Hooks
|
|
@@ -1483,10 +1646,10 @@ class Xe {
|
|
|
1483
1646
|
getToolPanels() {
|
|
1484
1647
|
const e = [];
|
|
1485
1648
|
for (const o of this.plugins) {
|
|
1486
|
-
const
|
|
1487
|
-
|
|
1649
|
+
const i = o.getToolPanel?.();
|
|
1650
|
+
i && e.push({ plugin: o, panel: i });
|
|
1488
1651
|
}
|
|
1489
|
-
return e.sort((o,
|
|
1652
|
+
return e.sort((o, i) => (o.panel.order ?? 0) - (i.panel.order ?? 0));
|
|
1490
1653
|
}
|
|
1491
1654
|
/**
|
|
1492
1655
|
* Collect header contents from all plugins.
|
|
@@ -1495,74 +1658,74 @@ class Xe {
|
|
|
1495
1658
|
getHeaderContents() {
|
|
1496
1659
|
const e = [];
|
|
1497
1660
|
for (const o of this.plugins) {
|
|
1498
|
-
const
|
|
1499
|
-
|
|
1661
|
+
const i = o.getHeaderContent?.();
|
|
1662
|
+
i && e.push({ plugin: o, content: i });
|
|
1500
1663
|
}
|
|
1501
|
-
return e.sort((o,
|
|
1664
|
+
return e.sort((o, i) => (o.content.order ?? 0) - (i.content.order ?? 0));
|
|
1502
1665
|
}
|
|
1503
1666
|
// #endregion
|
|
1504
1667
|
}
|
|
1505
|
-
class
|
|
1668
|
+
class W extends HTMLElement {
|
|
1506
1669
|
// TODO: Rename to 'data-grid' when migration is complete
|
|
1507
1670
|
static tagName = "tbw-grid";
|
|
1508
|
-
static version = "0.2.
|
|
1509
|
-
#
|
|
1510
|
-
#
|
|
1671
|
+
static version = "0.2.3";
|
|
1672
|
+
#o;
|
|
1673
|
+
#A = !1;
|
|
1511
1674
|
// ---------------- Ready Promise ----------------
|
|
1512
|
-
|
|
1513
|
-
#
|
|
1675
|
+
#z;
|
|
1676
|
+
#M;
|
|
1514
1677
|
// #region Input Properties
|
|
1515
1678
|
// These backing fields store raw user input. They are merged into
|
|
1516
1679
|
// #effectiveConfig by #mergeEffectiveConfig(). Never read directly
|
|
1517
1680
|
// for rendering logic - always use effectiveConfig or derived state.
|
|
1518
|
-
#
|
|
1519
|
-
#
|
|
1681
|
+
#r = [];
|
|
1682
|
+
#l;
|
|
1520
1683
|
#p;
|
|
1521
|
-
#
|
|
1522
|
-
#
|
|
1684
|
+
#w;
|
|
1685
|
+
#g;
|
|
1523
1686
|
// #endregion
|
|
1524
1687
|
// #region Single Source of Truth
|
|
1525
1688
|
// All input sources converge here. This is the canonical config
|
|
1526
1689
|
// that all rendering and logic should read from.
|
|
1527
|
-
#
|
|
1690
|
+
#t = {};
|
|
1528
1691
|
#h = !1;
|
|
1529
1692
|
#f = 0;
|
|
1530
|
-
#
|
|
1531
|
-
#
|
|
1693
|
+
#m = null;
|
|
1694
|
+
#v = !1;
|
|
1532
1695
|
// Cached flag for plugin scroll handlers
|
|
1533
|
-
#
|
|
1696
|
+
#T;
|
|
1534
1697
|
// Cached hook to avoid closures
|
|
1535
|
-
#
|
|
1536
|
-
#
|
|
1698
|
+
#E = !1;
|
|
1699
|
+
#C = null;
|
|
1700
|
+
#y = null;
|
|
1537
1701
|
#R = null;
|
|
1538
|
-
#
|
|
1539
|
-
#
|
|
1540
|
-
#l;
|
|
1702
|
+
#_ = null;
|
|
1703
|
+
#a;
|
|
1541
1704
|
#b;
|
|
1542
1705
|
// ---------------- Plugin System ----------------
|
|
1543
|
-
#
|
|
1706
|
+
#e;
|
|
1544
1707
|
// ---------------- Column State ----------------
|
|
1545
|
-
#
|
|
1708
|
+
#L;
|
|
1546
1709
|
#d;
|
|
1547
1710
|
// ---------------- Shell State ----------------
|
|
1548
|
-
#
|
|
1549
|
-
#
|
|
1550
|
-
#
|
|
1711
|
+
#i = qe();
|
|
1712
|
+
#n;
|
|
1713
|
+
#S;
|
|
1551
1714
|
// #endregion
|
|
1552
1715
|
// #region Derived State
|
|
1553
1716
|
// _rows: result of applying plugin processRows hooks
|
|
1554
1717
|
_rows = [];
|
|
1555
1718
|
// _baseColumns: columns before plugin transformation (analogous to #rows for row processing)
|
|
1556
1719
|
// This is the source of truth for processColumns - plugins transform these
|
|
1557
|
-
#
|
|
1720
|
+
#P = [];
|
|
1558
1721
|
// _columns is a getter/setter that operates on effectiveConfig.columns
|
|
1559
1722
|
// This ensures effectiveConfig.columns is the single source of truth for columns
|
|
1560
1723
|
// _columns always contains ALL columns (including hidden)
|
|
1561
1724
|
get _columns() {
|
|
1562
|
-
return this.#
|
|
1725
|
+
return this.#t.columns ?? [];
|
|
1563
1726
|
}
|
|
1564
1727
|
set _columns(e) {
|
|
1565
|
-
this.#
|
|
1728
|
+
this.#t.columns = e;
|
|
1566
1729
|
}
|
|
1567
1730
|
// visibleColumns returns only visible columns for rendering
|
|
1568
1731
|
// This is what header/row rendering should use
|
|
@@ -1613,49 +1776,49 @@ class I extends HTMLElement {
|
|
|
1613
1776
|
return this._rows;
|
|
1614
1777
|
}
|
|
1615
1778
|
set rows(e) {
|
|
1616
|
-
const o = this.#
|
|
1617
|
-
this.#
|
|
1779
|
+
const o = this.#r;
|
|
1780
|
+
this.#r = e, o !== e && this.#K();
|
|
1618
1781
|
}
|
|
1619
1782
|
/**
|
|
1620
1783
|
* Get the original unfiltered/unprocessed rows.
|
|
1621
1784
|
* Use this when you need access to all source data regardless of active filters.
|
|
1622
1785
|
*/
|
|
1623
1786
|
get sourceRows() {
|
|
1624
|
-
return this.#
|
|
1787
|
+
return this.#r;
|
|
1625
1788
|
}
|
|
1626
1789
|
get columns() {
|
|
1627
1790
|
return [...this._columns];
|
|
1628
1791
|
}
|
|
1629
1792
|
set columns(e) {
|
|
1630
|
-
const o = this.#
|
|
1631
|
-
this.#
|
|
1793
|
+
const o = this.#l;
|
|
1794
|
+
this.#l = e, o !== e && this.#j();
|
|
1632
1795
|
}
|
|
1633
1796
|
get gridConfig() {
|
|
1634
|
-
return this.#
|
|
1797
|
+
return this.#t;
|
|
1635
1798
|
}
|
|
1636
1799
|
set gridConfig(e) {
|
|
1637
1800
|
const o = this.#p;
|
|
1638
|
-
this.#p = e, o !== e && this.#
|
|
1801
|
+
this.#p = e, o !== e && this.#Y();
|
|
1639
1802
|
}
|
|
1640
1803
|
get fitMode() {
|
|
1641
|
-
return this.#
|
|
1804
|
+
return this.#t.fitMode ?? "stretch";
|
|
1642
1805
|
}
|
|
1643
1806
|
set fitMode(e) {
|
|
1644
|
-
const o = this.#
|
|
1645
|
-
this.#
|
|
1807
|
+
const o = this.#w;
|
|
1808
|
+
this.#w = e, o !== e && this.#U();
|
|
1646
1809
|
}
|
|
1647
1810
|
get editOn() {
|
|
1648
|
-
return this.#
|
|
1811
|
+
return this.#t.editOn;
|
|
1649
1812
|
}
|
|
1650
1813
|
set editOn(e) {
|
|
1651
|
-
const o = this.#
|
|
1652
|
-
this.#
|
|
1814
|
+
const o = this.#g;
|
|
1815
|
+
this.#g = e, o !== e && this.#X();
|
|
1653
1816
|
}
|
|
1654
1817
|
// Effective config accessor for internal modules and plugins
|
|
1655
1818
|
// Returns the merged config (single source of truth) before plugin processing
|
|
1656
1819
|
// Use this when you need the raw merged config (e.g., for column definitions including hidden)
|
|
1657
1820
|
get effectiveConfig() {
|
|
1658
|
-
return this.#
|
|
1821
|
+
return this.#t;
|
|
1659
1822
|
}
|
|
1660
1823
|
/**
|
|
1661
1824
|
* Get the disconnect signal for event listener cleanup.
|
|
@@ -1665,14 +1828,23 @@ class I extends HTMLElement {
|
|
|
1665
1828
|
* element.addEventListener('click', handler, { signal: this.grid.disconnectSignal });
|
|
1666
1829
|
*/
|
|
1667
1830
|
get disconnectSignal() {
|
|
1668
|
-
return this.#
|
|
1831
|
+
return this.#a || (this.#a = new AbortController()), this.#a.signal;
|
|
1669
1832
|
}
|
|
1670
1833
|
constructor() {
|
|
1671
|
-
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
|
+
});
|
|
1672
1844
|
}
|
|
1673
|
-
#
|
|
1845
|
+
#W() {
|
|
1674
1846
|
const e = new CSSStyleSheet();
|
|
1675
|
-
e.replaceSync(
|
|
1847
|
+
e.replaceSync(fe), this.#o.adoptedStyleSheets = [e];
|
|
1676
1848
|
}
|
|
1677
1849
|
// ---------------- Plugin System ----------------
|
|
1678
1850
|
/**
|
|
@@ -1680,14 +1852,14 @@ class I extends HTMLElement {
|
|
|
1680
1852
|
* Used by plugins for inter-plugin communication.
|
|
1681
1853
|
*/
|
|
1682
1854
|
getPlugin(e) {
|
|
1683
|
-
return this.#
|
|
1855
|
+
return this.#e?.getPlugin(e);
|
|
1684
1856
|
}
|
|
1685
1857
|
/**
|
|
1686
1858
|
* Get a plugin instance by its name.
|
|
1687
1859
|
* Used for loose coupling between plugins (avoids static imports).
|
|
1688
1860
|
*/
|
|
1689
1861
|
getPluginByName(e) {
|
|
1690
|
-
return this.#
|
|
1862
|
+
return this.#e?.getPluginByName(e);
|
|
1691
1863
|
}
|
|
1692
1864
|
/**
|
|
1693
1865
|
* Request a full re-render of the grid.
|
|
@@ -1695,7 +1867,7 @@ class I extends HTMLElement {
|
|
|
1695
1867
|
* Note: This does NOT reset plugin state - just re-processes rows/columns and renders.
|
|
1696
1868
|
*/
|
|
1697
1869
|
requestRender() {
|
|
1698
|
-
this.#
|
|
1870
|
+
this.#x(), this.#H(), q(this), D(this), this.refreshVirtualWindow(!0);
|
|
1699
1871
|
}
|
|
1700
1872
|
/**
|
|
1701
1873
|
* Request a lightweight style update without rebuilding DOM.
|
|
@@ -1703,207 +1875,196 @@ class I extends HTMLElement {
|
|
|
1703
1875
|
* This runs all plugin afterRender hooks without rebuilding row/column DOM.
|
|
1704
1876
|
*/
|
|
1705
1877
|
requestAfterRender() {
|
|
1706
|
-
this.#
|
|
1878
|
+
this.#e?.afterRender();
|
|
1707
1879
|
}
|
|
1708
1880
|
/**
|
|
1709
1881
|
* Initialize plugin system with instances from config.
|
|
1710
1882
|
* Plugins are class instances passed in gridConfig.plugins[].
|
|
1711
1883
|
*/
|
|
1712
|
-
#
|
|
1713
|
-
this.#
|
|
1714
|
-
const e = this.#
|
|
1715
|
-
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);
|
|
1716
1888
|
}
|
|
1717
1889
|
/**
|
|
1718
1890
|
* Inject all plugin styles into the shadow DOM.
|
|
1719
1891
|
* Must be called after #render() since innerHTML wipes existing content.
|
|
1720
1892
|
*/
|
|
1721
|
-
#
|
|
1722
|
-
const e = this.#
|
|
1893
|
+
#N() {
|
|
1894
|
+
const e = this.#e?.getAllStyles() ?? "";
|
|
1723
1895
|
if (e) {
|
|
1724
1896
|
const o = document.createElement("style");
|
|
1725
|
-
o.setAttribute("data-plugin", "all"), o.textContent = e, this.#
|
|
1897
|
+
o.setAttribute("data-plugin", "all"), o.textContent = e, this.#o.appendChild(o);
|
|
1726
1898
|
}
|
|
1727
1899
|
}
|
|
1728
1900
|
/**
|
|
1729
1901
|
* Update plugins when grid config changes.
|
|
1730
1902
|
* With class-based plugins, we need to detach old and attach new.
|
|
1731
1903
|
*/
|
|
1732
|
-
#
|
|
1733
|
-
this.#
|
|
1904
|
+
#q() {
|
|
1905
|
+
this.#e && this.#e.detachAll(), this.#D(), this.#N(), this.#v = this.#e?.getAll().some((e) => e.onScroll) ?? !1;
|
|
1734
1906
|
}
|
|
1735
1907
|
/**
|
|
1736
1908
|
* Clean up plugin states when grid disconnects.
|
|
1737
1909
|
*/
|
|
1738
|
-
#
|
|
1739
|
-
this.#
|
|
1910
|
+
#V() {
|
|
1911
|
+
this.#e?.detachAll();
|
|
1740
1912
|
}
|
|
1741
1913
|
/**
|
|
1742
1914
|
* Collect tool panels and header content from all plugins.
|
|
1743
1915
|
* Called after plugins are attached but before render.
|
|
1744
1916
|
*/
|
|
1745
|
-
#
|
|
1746
|
-
if (!this.#
|
|
1747
|
-
const e = this.#
|
|
1748
|
-
for (const { panel:
|
|
1749
|
-
this.#
|
|
1750
|
-
const o = this.#
|
|
1751
|
-
for (const { content:
|
|
1752
|
-
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);
|
|
1753
1925
|
}
|
|
1754
1926
|
// ---------------- Lifecycle ----------------
|
|
1755
1927
|
connectedCallback() {
|
|
1756
|
-
this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version",
|
|
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();
|
|
1757
1929
|
}
|
|
1758
1930
|
disconnectedCallback() {
|
|
1759
|
-
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;
|
|
1760
1932
|
}
|
|
1761
|
-
#
|
|
1762
|
-
const o = this.#
|
|
1763
|
-
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.#
|
|
1764
|
-
|
|
1765
|
-
const
|
|
1766
|
-
|
|
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));
|
|
1767
1939
|
}
|
|
1768
1940
|
this.setAttribute("data-upgraded", ""), this.#h = !0;
|
|
1769
|
-
const
|
|
1770
|
-
this.#c(), this.addEventListener("keydown", (
|
|
1941
|
+
const i = this.disconnectSignal;
|
|
1942
|
+
this.#c(), this.addEventListener("keydown", (l) => ke(this, l), { signal: i }), document.addEventListener(
|
|
1771
1943
|
"keydown",
|
|
1772
|
-
(
|
|
1773
|
-
|
|
1944
|
+
(l) => {
|
|
1945
|
+
l.key === "Escape" && this.activeEditRows !== -1 && M(this, this.activeEditRows, !0);
|
|
1774
1946
|
},
|
|
1775
|
-
{ capture: !0, signal:
|
|
1947
|
+
{ capture: !0, signal: i }
|
|
1776
1948
|
), document.addEventListener(
|
|
1777
1949
|
"mousedown",
|
|
1778
|
-
(
|
|
1950
|
+
(l) => {
|
|
1779
1951
|
if (this.activeEditRows === -1) return;
|
|
1780
|
-
const
|
|
1781
|
-
!
|
|
1952
|
+
const a = this.findRenderedRowElement(this.activeEditRows);
|
|
1953
|
+
!a || (l.composedPath && l.composedPath() || []).includes(a) || M(this, this.activeEditRows, !1);
|
|
1782
1954
|
},
|
|
1783
|
-
{ signal:
|
|
1955
|
+
{ signal: i }
|
|
1784
1956
|
);
|
|
1785
|
-
const
|
|
1786
|
-
if (this.virtualization.container =
|
|
1787
|
-
|
|
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(
|
|
1788
1960
|
"scroll",
|
|
1789
1961
|
() => {
|
|
1790
|
-
if (!this.virtualization.enabled && !this.#
|
|
1791
|
-
const
|
|
1792
|
-
s.style.transform = `translateY(${
|
|
1793
|
-
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);
|
|
1794
1966
|
}));
|
|
1795
1967
|
},
|
|
1796
|
-
{ passive: !0, signal:
|
|
1968
|
+
{ passive: !0, signal: i }
|
|
1797
1969
|
);
|
|
1798
|
-
const
|
|
1799
|
-
|
|
1970
|
+
const l = this.#o.querySelector(".tbw-grid-content"), a = this.#o.querySelector(".tbw-scroll-area");
|
|
1971
|
+
l && (l.addEventListener(
|
|
1800
1972
|
"wheel",
|
|
1801
|
-
(
|
|
1802
|
-
|
|
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;
|
|
1803
1975
|
},
|
|
1804
|
-
{ passive: !1, signal:
|
|
1805
|
-
),
|
|
1976
|
+
{ passive: !1, signal: i }
|
|
1977
|
+
), l.addEventListener(
|
|
1806
1978
|
"touchstart",
|
|
1807
|
-
(
|
|
1808
|
-
|
|
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);
|
|
1809
1981
|
},
|
|
1810
|
-
{ passive: !0, signal:
|
|
1811
|
-
),
|
|
1982
|
+
{ passive: !0, signal: i }
|
|
1983
|
+
), l.addEventListener(
|
|
1812
1984
|
"touchmove",
|
|
1813
|
-
(
|
|
1814
|
-
if (
|
|
1815
|
-
const
|
|
1816
|
-
|
|
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();
|
|
1817
1989
|
}
|
|
1818
1990
|
},
|
|
1819
|
-
{ passive: !1, signal:
|
|
1820
|
-
),
|
|
1991
|
+
{ passive: !1, signal: i }
|
|
1992
|
+
), l.addEventListener(
|
|
1821
1993
|
"touchend",
|
|
1822
1994
|
() => {
|
|
1823
|
-
this.#
|
|
1995
|
+
this.#C = null, this.#y = null, this.#R = null, this.#_ = null;
|
|
1824
1996
|
},
|
|
1825
|
-
{ passive: !0, signal:
|
|
1997
|
+
{ passive: !0, signal: i }
|
|
1826
1998
|
));
|
|
1827
1999
|
}
|
|
1828
|
-
this.resizeController =
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
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));
|
|
1833
2007
|
}
|
|
1834
2008
|
}), this.virtualization.viewportEl && (this.#b = new ResizeObserver(() => {
|
|
1835
2009
|
this.#f || (this.#f = requestAnimationFrame(() => {
|
|
1836
|
-
this.#f = 0, this.refreshVirtualWindow(!0);
|
|
2010
|
+
this.#f = 0, this.refreshVirtualWindow(!0), z(this);
|
|
1837
2011
|
}));
|
|
1838
|
-
}), this.#b.observe(this.virtualization.viewportEl)), queueMicrotask(() => this.#
|
|
2012
|
+
}), this.#b.observe(this.virtualization.viewportEl)), queueMicrotask(() => this.#F()), requestAnimationFrame(() => requestAnimationFrame(() => this.#M?.()));
|
|
1839
2013
|
}
|
|
1840
2014
|
// ---------------- Event Emitters ----------------
|
|
1841
|
-
#
|
|
2015
|
+
#s(e, o) {
|
|
1842
2016
|
this.dispatchEvent(new CustomEvent(e, { detail: o, bubbles: !0, composed: !0 }));
|
|
1843
2017
|
}
|
|
1844
2018
|
emitCellCommit(e) {
|
|
1845
|
-
this.#
|
|
2019
|
+
this.#s("cell-commit", e);
|
|
1846
2020
|
}
|
|
1847
2021
|
emitRowCommit(e) {
|
|
1848
|
-
this.#
|
|
2022
|
+
this.#s("row-commit", e);
|
|
1849
2023
|
}
|
|
1850
2024
|
emitSortChange(e) {
|
|
1851
|
-
this.#
|
|
2025
|
+
this.#s("sort-change", e);
|
|
1852
2026
|
}
|
|
1853
2027
|
emitColumnResize(e) {
|
|
1854
|
-
this.#
|
|
2028
|
+
this.#s("column-resize", e);
|
|
1855
2029
|
}
|
|
1856
2030
|
emitActivateCell(e) {
|
|
1857
|
-
this.#
|
|
2031
|
+
this.#s("activate-cell", e);
|
|
1858
2032
|
}
|
|
1859
2033
|
/** Update ARIA selection attributes on rendered rows/cells */
|
|
1860
|
-
#
|
|
1861
|
-
this.bodyEl?.querySelectorAll(".data-grid-row")?.forEach((o,
|
|
1862
|
-
const
|
|
1863
|
-
o.setAttribute("aria-selected", String(
|
|
1864
|
-
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));
|
|
1865
2039
|
});
|
|
1866
2040
|
});
|
|
1867
2041
|
}
|
|
1868
2042
|
// ---------------- Watch Handlers ----------------
|
|
1869
|
-
#
|
|
2043
|
+
#U() {
|
|
1870
2044
|
if (!this.#h) return;
|
|
1871
|
-
this.#u(), this.#
|
|
2045
|
+
this.#u(), this.#t.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, te(this)) : (this._columns.forEach((o) => {
|
|
1872
2046
|
!o.__userResized && o.__autoSized && delete o.width;
|
|
1873
|
-
}), this
|
|
2047
|
+
}), D(this));
|
|
1874
2048
|
}
|
|
1875
|
-
#
|
|
2049
|
+
#X() {
|
|
1876
2050
|
this.#h && (this.#u(), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
|
|
1877
2051
|
}
|
|
1878
|
-
#
|
|
1879
|
-
this._rows = Array.isArray(this.#
|
|
1880
|
-
}
|
|
1881
|
-
#te() {
|
|
1882
|
-
X(this), this.#h && (this.#u(), this.#c());
|
|
1883
|
-
}
|
|
1884
|
-
#oe() {
|
|
1885
|
-
this.#h && (this.#u(), this.#W(), this.#L(), this.#M(), this.#T(), this.updateTemplate(), this.refreshVirtualWindow(!0));
|
|
1886
|
-
}
|
|
1887
|
-
// ---------------- Helper Wrappers ----------------
|
|
1888
|
-
#ne() {
|
|
1889
|
-
Te(this);
|
|
1890
|
-
}
|
|
1891
|
-
#T() {
|
|
1892
|
-
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);
|
|
1893
2054
|
}
|
|
1894
|
-
|
|
1895
|
-
|
|
2055
|
+
#j() {
|
|
2056
|
+
Y(this), this.#h && (this.#u(), this.#c());
|
|
1896
2057
|
}
|
|
1897
|
-
#
|
|
1898
|
-
|
|
1899
|
-
}
|
|
1900
|
-
#
|
|
1901
|
-
if (this.#
|
|
1902
|
-
const e = this.#
|
|
1903
|
-
if (
|
|
1904
|
-
const s = new Map(
|
|
1905
|
-
if (!o.some((l) => s.has(l.field)) &&
|
|
1906
|
-
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];
|
|
1907
2068
|
else {
|
|
1908
2069
|
const l = e.map((a) => {
|
|
1909
2070
|
if (a.hidden) return a;
|
|
@@ -1916,14 +2077,10 @@ class I extends HTMLElement {
|
|
|
1916
2077
|
this._columns = [...e];
|
|
1917
2078
|
}
|
|
1918
2079
|
}
|
|
1919
|
-
/** Execute all plugin afterRender hooks */
|
|
1920
|
-
#w() {
|
|
1921
|
-
this.#t?.afterRender();
|
|
1922
|
-
}
|
|
1923
2080
|
/** Recompute row model via plugin hooks (grouping, tree, filtering, etc.). */
|
|
1924
|
-
#
|
|
1925
|
-
|
|
1926
|
-
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;
|
|
1927
2084
|
this._rows = o;
|
|
1928
2085
|
}
|
|
1929
2086
|
/**
|
|
@@ -1947,73 +2104,64 @@ class I extends HTMLElement {
|
|
|
1947
2104
|
#u() {
|
|
1948
2105
|
const e = this.#p ? { ...this.#p } : {};
|
|
1949
2106
|
let o = Array.isArray(e.columns) ? [...e.columns] : [];
|
|
1950
|
-
const
|
|
1951
|
-
...
|
|
2107
|
+
const i = (this.__lightDomColumnsCache || []).map((n) => ({
|
|
2108
|
+
...n
|
|
1952
2109
|
}));
|
|
1953
|
-
if (
|
|
1954
|
-
const
|
|
1955
|
-
o.forEach((s) =>
|
|
1956
|
-
const r =
|
|
1957
|
-
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);
|
|
1958
2115
|
});
|
|
1959
2116
|
}
|
|
1960
|
-
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) {
|
|
1961
2118
|
o.forEach((r) => {
|
|
1962
2119
|
r.sortable === void 0 && (r.sortable = !0), r.resizable === void 0 && (r.resizable = !0);
|
|
1963
2120
|
});
|
|
1964
|
-
const
|
|
1965
|
-
|
|
2121
|
+
const n = this.#t.columns;
|
|
2122
|
+
n?.some((r) => r.__compiledView || r.__compiledEditor) ? e.columns = n : e.columns = o;
|
|
1966
2123
|
} else {
|
|
1967
|
-
const
|
|
1968
|
-
|
|
2124
|
+
const n = this.#t.columns;
|
|
2125
|
+
n?.some((s) => s.__compiledView || s.__compiledEditor) && (e.columns = n);
|
|
1969
2126
|
}
|
|
1970
|
-
this.#
|
|
1971
|
-
|
|
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);
|
|
1972
2129
|
});
|
|
1973
2130
|
}
|
|
1974
2131
|
// ---------------- Delegate Wrappers ----------------
|
|
1975
|
-
#
|
|
1976
|
-
this.#
|
|
1977
|
-
}
|
|
1978
|
-
#ie(e, o) {
|
|
1979
|
-
z(this, e, o);
|
|
1980
|
-
}
|
|
1981
|
-
#D(e, o) {
|
|
1982
|
-
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);
|
|
1983
2134
|
}
|
|
1984
2135
|
// ---------------- Core Helpers ----------------
|
|
1985
2136
|
#c() {
|
|
1986
2137
|
if (!this.isConnected || !this.headerRowEl || !this.bodyEl)
|
|
1987
2138
|
return;
|
|
1988
|
-
const e = this.#p?.columns || this.#
|
|
2139
|
+
const e = this.#p?.columns || this.#l || [];
|
|
1989
2140
|
if (e.length) {
|
|
1990
|
-
const
|
|
2141
|
+
const i = new Map(this._columns.filter((s) => s.hidden).map((s) => [s.field, !0])), n = e.map((s) => ({
|
|
1991
2142
|
...s,
|
|
1992
|
-
hidden:
|
|
2143
|
+
hidden: i.get(s.field) ?? s.hidden
|
|
1993
2144
|
}));
|
|
1994
|
-
this._columns =
|
|
2145
|
+
this._columns = n;
|
|
1995
2146
|
}
|
|
1996
|
-
if (this
|
|
1997
|
-
const
|
|
1998
|
-
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);
|
|
1999
2150
|
}
|
|
2000
|
-
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());
|
|
2001
2152
|
}
|
|
2002
2153
|
/** Internal method to apply column state without triggering setup loop */
|
|
2003
|
-
#
|
|
2004
|
-
const o = this.#
|
|
2005
|
-
|
|
2006
|
-
for (const
|
|
2007
|
-
const s = o.find((r) => r.field ===
|
|
2008
|
-
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);
|
|
2009
2160
|
}
|
|
2010
2161
|
}
|
|
2011
|
-
#
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
#re(e) {
|
|
2015
|
-
if (this.refreshVirtualWindow(!1), this.#t?.onScrollRender(), this.#C) {
|
|
2016
|
-
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 = {
|
|
2017
2165
|
scrollTop: e,
|
|
2018
2166
|
scrollLeft: o?.scrollLeft ?? 0,
|
|
2019
2167
|
scrollHeight: o?.scrollHeight ?? 0,
|
|
@@ -2022,79 +2170,99 @@ class I extends HTMLElement {
|
|
|
2022
2170
|
clientWidth: o?.clientWidth ?? 0,
|
|
2023
2171
|
originalEvent: new Event("scroll")
|
|
2024
2172
|
};
|
|
2025
|
-
this.#
|
|
2173
|
+
this.#e?.onScroll(i);
|
|
2026
2174
|
}
|
|
2027
2175
|
}
|
|
2028
2176
|
findHeaderRow() {
|
|
2029
|
-
return this.#
|
|
2177
|
+
return this.#o.querySelector(".header-row");
|
|
2030
2178
|
}
|
|
2031
2179
|
findRenderedRowElement(e) {
|
|
2032
2180
|
return Array.from(this.bodyEl.querySelectorAll(".data-grid-row")).find((o) => {
|
|
2033
|
-
const
|
|
2034
|
-
return
|
|
2181
|
+
const i = o.querySelector(".cell[data-row]");
|
|
2182
|
+
return i && Number(i.getAttribute("data-row")) === e;
|
|
2035
2183
|
}) || null;
|
|
2036
2184
|
}
|
|
2037
2185
|
/**
|
|
2038
2186
|
* Dispatch a cell click event to the plugin system.
|
|
2039
2187
|
* Returns true if any plugin handled the event.
|
|
2040
2188
|
*/
|
|
2041
|
-
dispatchCellClick(e, o,
|
|
2042
|
-
const s = this._rows[o], r = this._columns[
|
|
2189
|
+
dispatchCellClick(e, o, i, n) {
|
|
2190
|
+
const s = this._rows[o], r = this._columns[i];
|
|
2043
2191
|
if (!s || !r) return !1;
|
|
2044
2192
|
const l = {
|
|
2045
2193
|
row: s,
|
|
2046
2194
|
rowIndex: o,
|
|
2047
|
-
colIndex:
|
|
2195
|
+
colIndex: i,
|
|
2048
2196
|
field: r.field,
|
|
2049
2197
|
value: s[r.field],
|
|
2050
|
-
cellEl:
|
|
2198
|
+
cellEl: n,
|
|
2051
2199
|
originalEvent: e
|
|
2052
2200
|
};
|
|
2053
|
-
return this.#
|
|
2201
|
+
return this.#e?.onCellClick(l) ?? !1;
|
|
2054
2202
|
}
|
|
2055
2203
|
/**
|
|
2056
2204
|
* Dispatch a header click event to the plugin system.
|
|
2057
2205
|
* Returns true if any plugin handled the event.
|
|
2058
2206
|
*/
|
|
2059
|
-
dispatchHeaderClick(e, o,
|
|
2060
|
-
const
|
|
2061
|
-
if (!
|
|
2207
|
+
dispatchHeaderClick(e, o, i) {
|
|
2208
|
+
const n = this._columns[o];
|
|
2209
|
+
if (!n) return !1;
|
|
2062
2210
|
const s = {
|
|
2063
2211
|
colIndex: o,
|
|
2064
|
-
field:
|
|
2065
|
-
column:
|
|
2066
|
-
headerEl:
|
|
2212
|
+
field: n.field,
|
|
2213
|
+
column: n,
|
|
2214
|
+
headerEl: i,
|
|
2067
2215
|
originalEvent: e
|
|
2068
2216
|
};
|
|
2069
|
-
return this.#
|
|
2217
|
+
return this.#e?.onHeaderClick(s) ?? !1;
|
|
2070
2218
|
}
|
|
2071
2219
|
/**
|
|
2072
2220
|
* Dispatch a keyboard event to the plugin system.
|
|
2073
2221
|
* Returns true if any plugin handled the event.
|
|
2074
2222
|
*/
|
|
2075
2223
|
dispatchKeyDown(e) {
|
|
2076
|
-
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) ?? [];
|
|
2077
2245
|
}
|
|
2078
2246
|
/**
|
|
2079
2247
|
* Build a CellMouseEvent from a native MouseEvent.
|
|
2080
2248
|
* Extracts cell/row information from the event target.
|
|
2081
2249
|
*/
|
|
2082
|
-
#
|
|
2083
|
-
let
|
|
2084
|
-
const
|
|
2085
|
-
if (
|
|
2086
|
-
const u = this.#
|
|
2087
|
-
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);
|
|
2088
2256
|
}
|
|
2089
|
-
const s =
|
|
2090
|
-
let a, d, h, p,
|
|
2091
|
-
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)), {
|
|
2092
2260
|
type: o,
|
|
2093
|
-
row:
|
|
2261
|
+
row: f,
|
|
2094
2262
|
rowIndex: a !== void 0 && a >= 0 ? a : void 0,
|
|
2095
2263
|
colIndex: d !== void 0 && d >= 0 ? d : void 0,
|
|
2096
|
-
field:
|
|
2097
|
-
value:
|
|
2264
|
+
field: h,
|
|
2265
|
+
value: p,
|
|
2098
2266
|
column: c,
|
|
2099
2267
|
originalEvent: e,
|
|
2100
2268
|
cellElement: s ?? void 0,
|
|
@@ -2106,25 +2274,25 @@ class I extends HTMLElement {
|
|
|
2106
2274
|
/**
|
|
2107
2275
|
* Handle mousedown events and dispatch to plugin system.
|
|
2108
2276
|
*/
|
|
2109
|
-
#
|
|
2110
|
-
const o = this.#
|
|
2111
|
-
(this.#
|
|
2277
|
+
#Q(e) {
|
|
2278
|
+
const o = this.#O(e, "mousedown");
|
|
2279
|
+
(this.#e?.onCellMouseDown(o) ?? !1) && (this.#E = !0);
|
|
2112
2280
|
}
|
|
2113
2281
|
/**
|
|
2114
2282
|
* Handle mousemove events (only when dragging).
|
|
2115
2283
|
*/
|
|
2116
|
-
#
|
|
2117
|
-
if (!this.#
|
|
2118
|
-
const o = this.#
|
|
2119
|
-
this.#
|
|
2284
|
+
#J(e) {
|
|
2285
|
+
if (!this.#E) return;
|
|
2286
|
+
const o = this.#O(e, "mousemove");
|
|
2287
|
+
this.#e?.onCellMouseMove(o);
|
|
2120
2288
|
}
|
|
2121
2289
|
/**
|
|
2122
2290
|
* Handle mouseup events.
|
|
2123
2291
|
*/
|
|
2124
|
-
#
|
|
2125
|
-
if (!this.#
|
|
2126
|
-
const o = this.#
|
|
2127
|
-
this.#
|
|
2292
|
+
#ee(e) {
|
|
2293
|
+
if (!this.#E) return;
|
|
2294
|
+
const o = this.#O(e, "mouseup");
|
|
2295
|
+
this.#e?.onCellMouseUp(o), this.#E = !1;
|
|
2128
2296
|
}
|
|
2129
2297
|
// API consumed by internal utils (rows.ts)
|
|
2130
2298
|
get changedRows() {
|
|
@@ -2134,21 +2302,21 @@ class I extends HTMLElement {
|
|
|
2134
2302
|
return Array.from(this._changedRowIndices);
|
|
2135
2303
|
}
|
|
2136
2304
|
async resetChangedRows(e) {
|
|
2137
|
-
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"));
|
|
2138
2306
|
}
|
|
2139
2307
|
async beginBulkEdit(e) {
|
|
2140
2308
|
if (!this._columns.some((s) => s.editable)) return;
|
|
2141
|
-
const
|
|
2142
|
-
this
|
|
2143
|
-
const
|
|
2144
|
-
|
|
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) => {
|
|
2145
2313
|
const l = this.visibleColumns[r];
|
|
2146
2314
|
if (l?.editable) {
|
|
2147
2315
|
const a = s;
|
|
2148
|
-
a.classList.contains("editing") ||
|
|
2316
|
+
a.classList.contains("editing") || k(this, i, e, l, a);
|
|
2149
2317
|
}
|
|
2150
2318
|
}), queueMicrotask(() => {
|
|
2151
|
-
const s =
|
|
2319
|
+
const s = n.querySelector(`.cell[data-col="${this.focusCol}"]`);
|
|
2152
2320
|
if (s?.classList.contains("editing")) {
|
|
2153
2321
|
const r = s.querySelector(
|
|
2154
2322
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
@@ -2161,17 +2329,17 @@ class I extends HTMLElement {
|
|
|
2161
2329
|
}));
|
|
2162
2330
|
}
|
|
2163
2331
|
async commitActiveRowEdit() {
|
|
2164
|
-
this.activeEditRows !== -1 &&
|
|
2332
|
+
this.activeEditRows !== -1 && M(this, this.activeEditRows, !1);
|
|
2165
2333
|
}
|
|
2166
2334
|
async ready() {
|
|
2167
|
-
return this
|
|
2335
|
+
return this.#z;
|
|
2168
2336
|
}
|
|
2169
2337
|
async forceLayout() {
|
|
2170
2338
|
this.#c(), await new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(e)));
|
|
2171
2339
|
}
|
|
2172
2340
|
/** Public method: returns a frozen snapshot of the merged effective configuration */
|
|
2173
2341
|
async getConfig() {
|
|
2174
|
-
return Object.freeze({ ...this.#
|
|
2342
|
+
return Object.freeze({ ...this.#t || {} });
|
|
2175
2343
|
}
|
|
2176
2344
|
// ---------------- Column Visibility API ----------------
|
|
2177
2345
|
/**
|
|
@@ -2181,14 +2349,14 @@ class I extends HTMLElement {
|
|
|
2181
2349
|
* @returns True if visibility was changed, false if column not found or locked
|
|
2182
2350
|
*/
|
|
2183
2351
|
setColumnVisible(e, o) {
|
|
2184
|
-
const
|
|
2185
|
-
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)
|
|
2186
2354
|
return !1;
|
|
2187
|
-
const s = !!
|
|
2188
|
-
return s !== r ? (
|
|
2355
|
+
const s = !!n.hidden, r = !o;
|
|
2356
|
+
return s !== r ? (n.hidden = r, this.#s("column-visibility", {
|
|
2189
2357
|
field: e,
|
|
2190
2358
|
visible: o,
|
|
2191
|
-
visibleColumns: (
|
|
2359
|
+
visibleColumns: (i ?? []).filter((l) => !l.hidden).map((l) => l.field)
|
|
2192
2360
|
}), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange(), !0) : !1;
|
|
2193
2361
|
}
|
|
2194
2362
|
/**
|
|
@@ -2197,8 +2365,8 @@ class I extends HTMLElement {
|
|
|
2197
2365
|
* @returns True if visibility was toggled, false if column not found or locked
|
|
2198
2366
|
*/
|
|
2199
2367
|
toggleColumnVisibility(e) {
|
|
2200
|
-
const
|
|
2201
|
-
return this.setColumnVisible(e,
|
|
2368
|
+
const n = !!this.#t.columns?.find((s) => s.field === e)?.hidden;
|
|
2369
|
+
return this.setColumnVisible(e, n);
|
|
2202
2370
|
}
|
|
2203
2371
|
/**
|
|
2204
2372
|
* Check if a column is currently visible.
|
|
@@ -2206,18 +2374,18 @@ class I extends HTMLElement {
|
|
|
2206
2374
|
* @returns True if visible, false if hidden or not found
|
|
2207
2375
|
*/
|
|
2208
2376
|
isColumnVisible(e) {
|
|
2209
|
-
const
|
|
2210
|
-
return
|
|
2377
|
+
const i = this.#t.columns?.find((n) => n.field === e);
|
|
2378
|
+
return i ? !i.hidden : !1;
|
|
2211
2379
|
}
|
|
2212
2380
|
/**
|
|
2213
2381
|
* Show all columns.
|
|
2214
2382
|
*/
|
|
2215
2383
|
showAllColumns() {
|
|
2216
|
-
const e = this.#
|
|
2217
|
-
e?.some((
|
|
2218
|
-
|
|
2219
|
-
}), this.#
|
|
2220
|
-
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)
|
|
2221
2389
|
}), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange());
|
|
2222
2390
|
}
|
|
2223
2391
|
/**
|
|
@@ -2227,7 +2395,7 @@ class I extends HTMLElement {
|
|
|
2227
2395
|
* @returns Array of all field names with their visibility status
|
|
2228
2396
|
*/
|
|
2229
2397
|
getAllColumns() {
|
|
2230
|
-
return (this.#
|
|
2398
|
+
return (this.#t.columns ?? []).map((o) => ({
|
|
2231
2399
|
field: o.field,
|
|
2232
2400
|
header: o.header || o.field,
|
|
2233
2401
|
visible: !o.hidden,
|
|
@@ -2241,14 +2409,14 @@ class I extends HTMLElement {
|
|
|
2241
2409
|
*/
|
|
2242
2410
|
setColumnOrder(e) {
|
|
2243
2411
|
if (!e.length) return;
|
|
2244
|
-
const o = new Map(this._columns.map((
|
|
2245
|
-
for (const
|
|
2246
|
-
const s = o.get(
|
|
2247
|
-
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));
|
|
2248
2416
|
}
|
|
2249
|
-
for (const
|
|
2250
|
-
|
|
2251
|
-
this._columns =
|
|
2417
|
+
for (const n of o.values())
|
|
2418
|
+
i.push(n);
|
|
2419
|
+
this._columns = i, q(this), D(this), this.refreshVirtualWindow(!0);
|
|
2252
2420
|
}
|
|
2253
2421
|
/**
|
|
2254
2422
|
* Get the current column order as an array of field names.
|
|
@@ -2263,15 +2431,15 @@ class I extends HTMLElement {
|
|
|
2263
2431
|
* Returns a serializable object suitable for localStorage or database storage.
|
|
2264
2432
|
*/
|
|
2265
2433
|
getColumnState() {
|
|
2266
|
-
const e = this.#
|
|
2267
|
-
return
|
|
2434
|
+
const e = this.#e?.getAll() ?? [];
|
|
2435
|
+
return ce(this, e);
|
|
2268
2436
|
}
|
|
2269
2437
|
/**
|
|
2270
2438
|
* Set the column state, restoring order, width, visibility, sort, and plugin state.
|
|
2271
2439
|
* Use this to restore previously saved column state.
|
|
2272
2440
|
*/
|
|
2273
2441
|
set columnState(e) {
|
|
2274
|
-
e && (this.#d = e, this.#
|
|
2442
|
+
e && (this.#d = e, this.#A && this.#te(e));
|
|
2275
2443
|
}
|
|
2276
2444
|
/**
|
|
2277
2445
|
* Get the current column state.
|
|
@@ -2282,10 +2450,10 @@ class I extends HTMLElement {
|
|
|
2282
2450
|
/**
|
|
2283
2451
|
* Apply column state internally.
|
|
2284
2452
|
*/
|
|
2285
|
-
#
|
|
2286
|
-
(this.#
|
|
2287
|
-
|
|
2288
|
-
}), this.#
|
|
2453
|
+
#te(e) {
|
|
2454
|
+
(this.#t.columns ?? []).forEach((i) => {
|
|
2455
|
+
i.hidden = !1;
|
|
2456
|
+
}), this.#I(e), this.#c();
|
|
2289
2457
|
}
|
|
2290
2458
|
/**
|
|
2291
2459
|
* Request a state change event to be emitted.
|
|
@@ -2294,224 +2462,112 @@ class I extends HTMLElement {
|
|
|
2294
2462
|
* The event is debounced to avoid excessive events during drag operations.
|
|
2295
2463
|
*/
|
|
2296
2464
|
requestStateChange() {
|
|
2297
|
-
this.#
|
|
2465
|
+
this.#L || (this.#L = we(
|
|
2298
2466
|
this,
|
|
2299
|
-
() => this.#
|
|
2300
|
-
(e) => this.#
|
|
2301
|
-
)), this.#
|
|
2467
|
+
() => this.#e?.getAll() ?? [],
|
|
2468
|
+
(e) => this.#s("column-state-change", e)
|
|
2469
|
+
)), this.#L();
|
|
2302
2470
|
}
|
|
2303
2471
|
/**
|
|
2304
2472
|
* Reset column state to initial configuration.
|
|
2305
2473
|
* Clears all user modifications (order, width, visibility, sort).
|
|
2306
2474
|
*/
|
|
2307
2475
|
resetColumnState() {
|
|
2308
|
-
this.#d = void 0, (this.#
|
|
2309
|
-
|
|
2476
|
+
this.#d = void 0, (this.#t.columns ?? []).forEach((i) => {
|
|
2477
|
+
i.hidden = !1;
|
|
2310
2478
|
}), this.sortState = null, this.__originalOrder = [], this.#u(), this.#c();
|
|
2311
|
-
const o = this.#
|
|
2312
|
-
for (const
|
|
2313
|
-
if (
|
|
2314
|
-
for (const
|
|
2315
|
-
|
|
2316
|
-
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,
|
|
2317
2485
|
order: 0,
|
|
2318
2486
|
visible: !0
|
|
2319
2487
|
});
|
|
2320
2488
|
this.requestStateChange();
|
|
2321
2489
|
}
|
|
2322
2490
|
// ---------------- Shell / Tool Panel API ----------------
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
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. */
|
|
2326
2495
|
get isToolPanelOpen() {
|
|
2327
|
-
return this.#
|
|
2496
|
+
return this.#n.isPanelOpen;
|
|
2328
2497
|
}
|
|
2329
2498
|
/**
|
|
2330
2499
|
* Get the currently active tool panel ID, or null if none is open.
|
|
2331
2500
|
* @deprecated Use isToolPanelOpen and expandedToolPanelSections instead.
|
|
2332
2501
|
*/
|
|
2333
2502
|
get activeToolPanel() {
|
|
2334
|
-
return this.#
|
|
2503
|
+
return this.#n.activePanel;
|
|
2335
2504
|
}
|
|
2336
|
-
/**
|
|
2337
|
-
* Get the IDs of expanded accordion sections.
|
|
2338
|
-
*/
|
|
2505
|
+
/** Get the IDs of expanded accordion sections. */
|
|
2339
2506
|
get expandedToolPanelSections() {
|
|
2340
|
-
return
|
|
2507
|
+
return this.#n.expandedSections;
|
|
2341
2508
|
}
|
|
2342
|
-
/**
|
|
2343
|
-
* Open the tool panel (accordion view with all registered panels).
|
|
2344
|
-
*/
|
|
2509
|
+
/** Open the tool panel (accordion view with all registered panels). */
|
|
2345
2510
|
openToolPanel() {
|
|
2346
|
-
|
|
2347
|
-
if (this.#e.isPanelOpen = !0, this.#e.expandedSections.size === 0 && this.#e.toolPanels.size > 0) {
|
|
2348
|
-
const n = [...this.#e.toolPanels.values()].sort(
|
|
2349
|
-
(i, s) => (i.order ?? 100) - (s.order ?? 100)
|
|
2350
|
-
)[0];
|
|
2351
|
-
n && this.#e.expandedSections.add(n.id);
|
|
2352
|
-
}
|
|
2353
|
-
ne(this.#n, this.#e), ie(this.#n, this.#e);
|
|
2354
|
-
const e = {
|
|
2355
|
-
expand: this.#o?.icons?.expand ?? P.expand,
|
|
2356
|
-
collapse: this.#o?.icons?.collapse ?? P.collapse
|
|
2357
|
-
};
|
|
2358
|
-
Ge(this.#n, this.#e, e), this.#i("tool-panel-open", { sections: this.expandedToolPanelSections });
|
|
2511
|
+
this.#n.openToolPanel();
|
|
2359
2512
|
}
|
|
2360
|
-
/**
|
|
2361
|
-
* Close the tool panel.
|
|
2362
|
-
*/
|
|
2513
|
+
/** Close the tool panel. */
|
|
2363
2514
|
closeToolPanel() {
|
|
2364
|
-
|
|
2365
|
-
for (const e of this.#e.panelCleanups.values())
|
|
2366
|
-
e();
|
|
2367
|
-
this.#e.panelCleanups.clear(), this.#e.activePanelCleanup && (this.#e.activePanelCleanup(), this.#e.activePanelCleanup = null);
|
|
2368
|
-
for (const e of this.#e.toolPanels.values())
|
|
2369
|
-
e.onClose?.();
|
|
2370
|
-
this.#e.isPanelOpen = !1, ne(this.#n, this.#e), ie(this.#n, this.#e), this.#i("tool-panel-close", {});
|
|
2371
|
-
}
|
|
2515
|
+
this.#n.closeToolPanel();
|
|
2372
2516
|
}
|
|
2373
|
-
/**
|
|
2374
|
-
* Toggle the tool panel open/closed.
|
|
2375
|
-
*/
|
|
2517
|
+
/** Toggle the tool panel open/closed. */
|
|
2376
2518
|
toggleToolPanel() {
|
|
2377
|
-
this.#
|
|
2519
|
+
this.#n.toggleToolPanel();
|
|
2378
2520
|
}
|
|
2379
|
-
/**
|
|
2380
|
-
* Toggle an accordion section expanded/collapsed.
|
|
2381
|
-
* Only one section can be expanded at a time (exclusive accordion).
|
|
2382
|
-
* When there's only one panel, toggling is disabled (always expanded).
|
|
2383
|
-
*/
|
|
2521
|
+
/** Toggle an accordion section expanded/collapsed. */
|
|
2384
2522
|
toggleToolPanelSection(e) {
|
|
2385
|
-
|
|
2386
|
-
if (!o) {
|
|
2387
|
-
console.warn(`[tbw-grid] Tool panel section "${e}" not found`);
|
|
2388
|
-
return;
|
|
2389
|
-
}
|
|
2390
|
-
if (this.#e.toolPanels.size === 1)
|
|
2391
|
-
return;
|
|
2392
|
-
const n = this.#e.expandedSections.has(e);
|
|
2393
|
-
if (n) {
|
|
2394
|
-
const i = this.#e.panelCleanups.get(e);
|
|
2395
|
-
i && (i(), this.#e.panelCleanups.delete(e)), o.onClose?.(), this.#e.expandedSections.delete(e), this.#q(e, !1);
|
|
2396
|
-
} else {
|
|
2397
|
-
for (const [i, s] of this.#e.toolPanels)
|
|
2398
|
-
if (i !== e && this.#e.expandedSections.has(i)) {
|
|
2399
|
-
const r = this.#e.panelCleanups.get(i);
|
|
2400
|
-
r && (r(), this.#e.panelCleanups.delete(i)), s.onClose?.(), this.#e.expandedSections.delete(i), this.#q(i, !1);
|
|
2401
|
-
const l = this.#n.querySelector(`[data-section="${i}"] .tbw-accordion-content`);
|
|
2402
|
-
l && (l.innerHTML = "");
|
|
2403
|
-
}
|
|
2404
|
-
this.#e.expandedSections.add(e), this.#q(e, !0), this.#ue(e);
|
|
2405
|
-
}
|
|
2406
|
-
this.#i("tool-panel-section-toggle", { id: e, expanded: !n });
|
|
2407
|
-
}
|
|
2408
|
-
/**
|
|
2409
|
-
* Update accordion section visual state.
|
|
2410
|
-
*/
|
|
2411
|
-
#q(e, o) {
|
|
2412
|
-
const n = this.#n.querySelector(`[data-section="${e}"]`);
|
|
2413
|
-
n && n.classList.toggle("expanded", o);
|
|
2523
|
+
this.#n.toggleToolPanelSection(e);
|
|
2414
2524
|
}
|
|
2415
|
-
/**
|
|
2416
|
-
* Render content for a single accordion section.
|
|
2417
|
-
*/
|
|
2418
|
-
#ue(e) {
|
|
2419
|
-
const o = this.#e.toolPanels.get(e);
|
|
2420
|
-
if (!o?.render) return;
|
|
2421
|
-
const n = this.#n.querySelector(`[data-section="${e}"] .tbw-accordion-content`);
|
|
2422
|
-
if (!n) return;
|
|
2423
|
-
const i = o.render(n);
|
|
2424
|
-
i && this.#e.panelCleanups.set(e, i);
|
|
2425
|
-
}
|
|
2426
|
-
/**
|
|
2427
|
-
* Get registered tool panel definitions.
|
|
2428
|
-
*/
|
|
2525
|
+
/** Get registered tool panel definitions. */
|
|
2429
2526
|
getToolPanels() {
|
|
2430
|
-
return
|
|
2527
|
+
return this.#n.getToolPanels();
|
|
2431
2528
|
}
|
|
2432
|
-
/**
|
|
2433
|
-
* Register a custom tool panel (without creating a plugin).
|
|
2434
|
-
*/
|
|
2529
|
+
/** Register a custom tool panel (without creating a plugin). */
|
|
2435
2530
|
registerToolPanel(e) {
|
|
2436
|
-
|
|
2437
|
-
console.warn(`[tbw-grid] Tool panel "${e.id}" already registered`);
|
|
2438
|
-
return;
|
|
2439
|
-
}
|
|
2440
|
-
this.#e.toolPanels.set(e.id, e), this.#a && this.#g();
|
|
2531
|
+
this.#n.registerToolPanel(e);
|
|
2441
2532
|
}
|
|
2442
|
-
/**
|
|
2443
|
-
* Unregister a custom tool panel.
|
|
2444
|
-
*/
|
|
2533
|
+
/** Unregister a custom tool panel. */
|
|
2445
2534
|
unregisterToolPanel(e) {
|
|
2446
|
-
this.#
|
|
2535
|
+
this.#n.unregisterToolPanel(e);
|
|
2447
2536
|
}
|
|
2448
|
-
/**
|
|
2449
|
-
* Get registered header content definitions.
|
|
2450
|
-
*/
|
|
2537
|
+
/** Get registered header content definitions. */
|
|
2451
2538
|
getHeaderContents() {
|
|
2452
|
-
return
|
|
2539
|
+
return this.#n.getHeaderContents();
|
|
2453
2540
|
}
|
|
2454
|
-
/**
|
|
2455
|
-
* Register custom header content (without creating a plugin).
|
|
2456
|
-
*/
|
|
2541
|
+
/** Register custom header content (without creating a plugin). */
|
|
2457
2542
|
registerHeaderContent(e) {
|
|
2458
|
-
|
|
2459
|
-
console.warn(`[tbw-grid] Header content "${e.id}" already registered`);
|
|
2460
|
-
return;
|
|
2461
|
-
}
|
|
2462
|
-
this.#e.headerContents.set(e.id, e), this.#a && oe(this.#n, this.#e);
|
|
2543
|
+
this.#n.registerHeaderContent(e);
|
|
2463
2544
|
}
|
|
2464
|
-
/**
|
|
2465
|
-
* Unregister custom header content.
|
|
2466
|
-
*/
|
|
2545
|
+
/** Unregister custom header content. */
|
|
2467
2546
|
unregisterHeaderContent(e) {
|
|
2468
|
-
|
|
2469
|
-
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);
|
|
2470
2548
|
}
|
|
2471
|
-
/**
|
|
2472
|
-
* Get all registered toolbar buttons.
|
|
2473
|
-
*/
|
|
2549
|
+
/** Get all registered toolbar buttons. */
|
|
2474
2550
|
getToolbarButtons() {
|
|
2475
|
-
return
|
|
2551
|
+
return this.#n.getToolbarButtons();
|
|
2476
2552
|
}
|
|
2477
|
-
/**
|
|
2478
|
-
* Register a custom toolbar button programmatically.
|
|
2479
|
-
*/
|
|
2553
|
+
/** Register a custom toolbar button programmatically. */
|
|
2480
2554
|
registerToolbarButton(e) {
|
|
2481
|
-
|
|
2482
|
-
console.warn(`[tbw-grid] Toolbar button "${e.id}" already registered`);
|
|
2483
|
-
return;
|
|
2484
|
-
}
|
|
2485
|
-
this.#e.toolbarButtons.set(e.id, e), this.#a && this.#g();
|
|
2555
|
+
this.#n.registerToolbarButton(e);
|
|
2486
2556
|
}
|
|
2487
|
-
/**
|
|
2488
|
-
* Unregister a custom toolbar button.
|
|
2489
|
-
*/
|
|
2557
|
+
/** Unregister a custom toolbar button. */
|
|
2490
2558
|
unregisterToolbarButton(e) {
|
|
2491
|
-
|
|
2492
|
-
o && (o(), this.#e.toolbarButtonCleanups.delete(e)), this.#e.toolbarButtons.delete(e), this.#a && this.#g();
|
|
2559
|
+
this.#n.unregisterToolbarButton(e);
|
|
2493
2560
|
}
|
|
2494
|
-
/**
|
|
2495
|
-
* Enable/disable a toolbar button by ID.
|
|
2496
|
-
*/
|
|
2561
|
+
/** Enable/disable a toolbar button by ID. */
|
|
2497
2562
|
setToolbarButtonDisabled(e, o) {
|
|
2498
|
-
|
|
2499
|
-
n && (n.disabled = o);
|
|
2500
|
-
const i = this.#n.querySelector(`[data-btn="${e}"]`);
|
|
2501
|
-
i && (i.disabled = o);
|
|
2563
|
+
this.#n.setToolbarButtonDisabled(e, o);
|
|
2502
2564
|
}
|
|
2503
2565
|
/**
|
|
2504
2566
|
* Re-parse light DOM shell elements and refresh shell header.
|
|
2505
2567
|
* Call this after dynamically modifying <tbw-grid-header> children.
|
|
2506
2568
|
*/
|
|
2507
2569
|
refreshShellHeader() {
|
|
2508
|
-
this.#
|
|
2509
|
-
}
|
|
2510
|
-
/**
|
|
2511
|
-
* Internal shell header refresh.
|
|
2512
|
-
*/
|
|
2513
|
-
#g() {
|
|
2514
|
-
te(this, this.#e), this.#X(), this.#G();
|
|
2570
|
+
se(this, this.#i), this.#$(), this.#B();
|
|
2515
2571
|
}
|
|
2516
2572
|
// ---------------- Virtual Window ----------------
|
|
2517
2573
|
/**
|
|
@@ -2522,40 +2578,43 @@ class I extends HTMLElement {
|
|
|
2522
2578
|
if (!this.bodyEl) return;
|
|
2523
2579
|
const o = this._rows.length;
|
|
2524
2580
|
if (!this.virtualization.enabled) {
|
|
2525
|
-
this.#
|
|
2581
|
+
this.#k(0, o), this.#e?.afterRender();
|
|
2526
2582
|
return;
|
|
2527
2583
|
}
|
|
2528
|
-
if (this
|
|
2529
|
-
this.virtualization.start = 0, this.virtualization.end = o, this.bodyEl.style.transform = "translateY(0px)", this.#
|
|
2530
|
-
|
|
2531
|
-
|
|
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();
|
|
2532
2591
|
return;
|
|
2533
2592
|
}
|
|
2534
|
-
const
|
|
2593
|
+
const i = this.virtualization.container ?? this, s = (this.virtualization.viewportEl ?? i).clientHeight, r = this.virtualization.rowHeight, l = i.scrollTop;
|
|
2535
2594
|
let a = Math.floor(l / r), d = 0;
|
|
2536
|
-
const
|
|
2537
|
-
for (; d <
|
|
2538
|
-
const
|
|
2539
|
-
if (
|
|
2540
|
-
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++;
|
|
2541
2600
|
}
|
|
2542
2601
|
a = a - a % 2, a < 0 && (a = 0);
|
|
2543
|
-
const
|
|
2544
|
-
|
|
2545
|
-
const
|
|
2546
|
-
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;
|
|
2547
2606
|
c > o && (c = o), this.virtualization.start = a, this.virtualization.end = c;
|
|
2548
|
-
const
|
|
2549
|
-
this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${o * r + r +
|
|
2550
|
-
const
|
|
2551
|
-
this.bodyEl.style.transform = `translateY(${
|
|
2552
|
-
const
|
|
2553
|
-
|
|
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();
|
|
2554
2613
|
}
|
|
2555
2614
|
// ---------------- Render ----------------
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
const e = this.#
|
|
2615
|
+
#$() {
|
|
2616
|
+
se(this, this.#i);
|
|
2617
|
+
const e = this.#t?.shell, o = Be(e, this.#i), i = `
|
|
2559
2618
|
<div class="tbw-scroll-area">
|
|
2560
2619
|
<div class="rows-body-wrapper">
|
|
2561
2620
|
<div class="rows-body" role="grid">
|
|
@@ -2575,21 +2634,21 @@ class I extends HTMLElement {
|
|
|
2575
2634
|
</div>
|
|
2576
2635
|
`;
|
|
2577
2636
|
if (o) {
|
|
2578
|
-
const
|
|
2579
|
-
expand: this.#
|
|
2580
|
-
collapse: this.#
|
|
2581
|
-
}, r =
|
|
2582
|
-
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 = `
|
|
2583
2642
|
<div class="tbw-grid-root has-shell">
|
|
2584
2643
|
${r}
|
|
2585
2644
|
${l}
|
|
2586
2645
|
</div>
|
|
2587
|
-
`, this.#
|
|
2646
|
+
`, this.#oe(), this.#n.setInitialized(!0);
|
|
2588
2647
|
} else
|
|
2589
|
-
this.#
|
|
2648
|
+
this.#o.innerHTML = `
|
|
2590
2649
|
<div class="tbw-grid-root">
|
|
2591
2650
|
<div class="tbw-grid-content">
|
|
2592
|
-
${
|
|
2651
|
+
${i}
|
|
2593
2652
|
</div>
|
|
2594
2653
|
</div>
|
|
2595
2654
|
`;
|
|
@@ -2597,30 +2656,36 @@ class I extends HTMLElement {
|
|
|
2597
2656
|
/**
|
|
2598
2657
|
* Set up shell event listeners after render.
|
|
2599
2658
|
*/
|
|
2600
|
-
#
|
|
2601
|
-
|
|
2659
|
+
#oe() {
|
|
2660
|
+
We(this.#o, this.#t?.shell, this.#i, {
|
|
2602
2661
|
onPanelToggle: () => this.toggleToolPanel(),
|
|
2603
2662
|
onSectionToggle: (e) => this.toggleToolPanelSection(e),
|
|
2604
|
-
onToolbarButtonClick: (e) => this.#
|
|
2605
|
-
}), this.#
|
|
2663
|
+
onToolbarButtonClick: (e) => this.#ne(e)
|
|
2664
|
+
}), this.#S?.(), this.#S = Ve(this.#o, this.#t?.shell, (e) => {
|
|
2606
2665
|
this.style.setProperty("--tbw-tool-panel-width", `${e}px`);
|
|
2607
2666
|
});
|
|
2608
2667
|
}
|
|
2609
2668
|
/**
|
|
2610
2669
|
* Handle toolbar button click (for config buttons with action).
|
|
2611
2670
|
*/
|
|
2612
|
-
#
|
|
2613
|
-
const
|
|
2614
|
-
if (
|
|
2615
|
-
|
|
2671
|
+
#ne(e) {
|
|
2672
|
+
const i = (this.#t?.shell?.header?.toolbarButtons ?? []).find((s) => s.id === e);
|
|
2673
|
+
if (i?.action) {
|
|
2674
|
+
i.action();
|
|
2616
2675
|
return;
|
|
2617
2676
|
}
|
|
2618
|
-
const
|
|
2619
|
-
|
|
2677
|
+
const n = this.#i.toolbarButtons.get(e);
|
|
2678
|
+
n?.action && n.action();
|
|
2620
2679
|
}
|
|
2621
2680
|
}
|
|
2622
|
-
customElements.get(
|
|
2623
|
-
|
|
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 {
|
|
2624
2689
|
/** Plugin version - override in subclass if needed */
|
|
2625
2690
|
version = "1.0.0";
|
|
2626
2691
|
/** CSS styles to inject into the grid's shadow DOM */
|
|
@@ -2745,7 +2810,7 @@ class Ke {
|
|
|
2745
2810
|
*/
|
|
2746
2811
|
get gridIcons() {
|
|
2747
2812
|
const e = this.grid?.gridConfig?.icons ?? {};
|
|
2748
|
-
return { ...
|
|
2813
|
+
return { ...H, ...e };
|
|
2749
2814
|
}
|
|
2750
2815
|
/**
|
|
2751
2816
|
* Resolve an icon value to string or HTMLElement.
|
|
@@ -2776,8 +2841,8 @@ class Ke {
|
|
|
2776
2841
|
}
|
|
2777
2842
|
// #endregion
|
|
2778
2843
|
}
|
|
2779
|
-
const
|
|
2780
|
-
//
|
|
2844
|
+
const T = {
|
|
2845
|
+
// ─── Core Structure ───────────────────────────────────────────────
|
|
2781
2846
|
ROOT: "tbw-grid-root",
|
|
2782
2847
|
HEADER: "header",
|
|
2783
2848
|
HEADER_ROW: "header-row",
|
|
@@ -2791,7 +2856,7 @@ const A = {
|
|
|
2791
2856
|
GROUP_ROW: "group-row",
|
|
2792
2857
|
// Cell elements
|
|
2793
2858
|
DATA_CELL: "data-cell",
|
|
2794
|
-
// States
|
|
2859
|
+
// ─── Core States ──────────────────────────────────────────────────
|
|
2795
2860
|
SELECTED: "selected",
|
|
2796
2861
|
FOCUSED: "focused",
|
|
2797
2862
|
EDITING: "editing",
|
|
@@ -2799,53 +2864,61 @@ const A = {
|
|
|
2799
2864
|
COLLAPSED: "collapsed",
|
|
2800
2865
|
DRAGGING: "dragging",
|
|
2801
2866
|
RESIZING: "resizing",
|
|
2802
|
-
// Sorting
|
|
2867
|
+
// Sorting (core feature)
|
|
2803
2868
|
SORTABLE: "sortable",
|
|
2804
2869
|
SORTED_ASC: "sorted-asc",
|
|
2805
2870
|
SORTED_DESC: "sorted-desc",
|
|
2806
2871
|
// Visibility
|
|
2807
2872
|
HIDDEN: "hidden",
|
|
2808
|
-
//
|
|
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)
|
|
2809
2877
|
STICKY_LEFT: "sticky-left",
|
|
2810
2878
|
STICKY_RIGHT: "sticky-right",
|
|
2811
|
-
//
|
|
2879
|
+
// Pinned rows (PinnedRowsPlugin applies, core CSS styles)
|
|
2812
2880
|
PINNED_TOP: "pinned-top",
|
|
2813
2881
|
PINNED_BOTTOM: "pinned-bottom",
|
|
2814
|
-
// Tree
|
|
2882
|
+
// Tree structure (TreePlugin applies, core CSS styles)
|
|
2815
2883
|
TREE_TOGGLE: "tree-toggle",
|
|
2816
2884
|
TREE_INDENT: "tree-indent",
|
|
2817
|
-
// Grouping
|
|
2885
|
+
// Grouping (GroupingRowsPlugin applies, core CSS styles)
|
|
2818
2886
|
GROUP_TOGGLE: "group-toggle",
|
|
2819
2887
|
GROUP_LABEL: "group-label",
|
|
2820
2888
|
GROUP_COUNT: "group-count",
|
|
2821
|
-
// Selection
|
|
2889
|
+
// Selection (SelectionPlugin applies, core CSS styles)
|
|
2822
2890
|
RANGE_SELECTION: "range-selection",
|
|
2823
2891
|
SELECTION_OVERLAY: "selection-overlay"
|
|
2824
|
-
},
|
|
2892
|
+
}, G = {
|
|
2893
|
+
// ─── Core Attributes ──────────────────────────────────────────────
|
|
2825
2894
|
ROW_INDEX: "data-row-index",
|
|
2826
2895
|
COL_INDEX: "data-col-index",
|
|
2827
2896
|
FIELD: "data-field",
|
|
2897
|
+
// ─── Shared Attributes (used by plugins) ──────────────────────────
|
|
2828
2898
|
GROUP_KEY: "data-group-key",
|
|
2899
|
+
// GroupingRowsPlugin
|
|
2829
2900
|
TREE_LEVEL: "data-tree-level",
|
|
2901
|
+
// TreePlugin
|
|
2830
2902
|
STICKY: "data-sticky"
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
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}`,
|
|
2841
2914
|
// By data attribute
|
|
2842
|
-
ROW_BY_INDEX: (t) => `.${
|
|
2843
|
-
CELL_BY_FIELD: (t) => `.${
|
|
2844
|
-
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}"]`,
|
|
2845
2918
|
// State selectors
|
|
2846
|
-
SELECTED_ROWS: `.${
|
|
2847
|
-
EDITING_CELL: `.${
|
|
2848
|
-
},
|
|
2919
|
+
SELECTED_ROWS: `.${T.DATA_ROW}.${T.SELECTED}`,
|
|
2920
|
+
EDITING_CELL: `.${T.DATA_CELL}.${T.EDITING}`
|
|
2921
|
+
}, tt = {
|
|
2849
2922
|
// Colors
|
|
2850
2923
|
COLOR_BG: "--tbw-color-bg",
|
|
2851
2924
|
COLOR_FG: "--tbw-color-fg",
|
|
@@ -2867,7 +2940,7 @@ const A = {
|
|
|
2867
2940
|
// Borders
|
|
2868
2941
|
BORDER_RADIUS: "--tbw-border-radius",
|
|
2869
2942
|
FOCUS_OUTLINE: "--tbw-focus-outline"
|
|
2870
|
-
},
|
|
2943
|
+
}, ot = {
|
|
2871
2944
|
CELL_COMMIT: "cell-commit",
|
|
2872
2945
|
ROW_COMMIT: "row-commit",
|
|
2873
2946
|
CHANGED_ROWS_RESET: "changed-rows-reset",
|
|
@@ -2878,7 +2951,7 @@ const A = {
|
|
|
2878
2951
|
ACTIVATE_CELL: "activate-cell",
|
|
2879
2952
|
GROUP_TOGGLE: "group-toggle",
|
|
2880
2953
|
COLUMN_STATE_CHANGE: "column-state-change"
|
|
2881
|
-
},
|
|
2954
|
+
}, nt = {
|
|
2882
2955
|
// Selection plugin
|
|
2883
2956
|
SELECTION_CHANGE: "selection-change",
|
|
2884
2957
|
// Tree plugin
|
|
@@ -2909,10 +2982,10 @@ const A = {
|
|
|
2909
2982
|
DETAIL_EXPAND: "detail-expand",
|
|
2910
2983
|
// Grouping rows plugin
|
|
2911
2984
|
GROUP_EXPAND: "group-expand"
|
|
2912
|
-
},
|
|
2913
|
-
sum: (t, e) => t.reduce((o,
|
|
2985
|
+
}, K = {
|
|
2986
|
+
sum: (t, e) => t.reduce((o, i) => o + (Number(i[e]) || 0), 0),
|
|
2914
2987
|
avg: (t, e) => {
|
|
2915
|
-
const o = t.reduce((
|
|
2988
|
+
const o = t.reduce((i, n) => i + (Number(n[e]) || 0), 0);
|
|
2916
2989
|
return t.length ? o / t.length : 0;
|
|
2917
2990
|
},
|
|
2918
2991
|
count: (t) => t.length,
|
|
@@ -2920,46 +2993,46 @@ const A = {
|
|
|
2920
2993
|
max: (t, e) => Math.max(...t.map((o) => Number(o[e]) || -1 / 0)),
|
|
2921
2994
|
first: (t, e) => t[0]?.[e],
|
|
2922
2995
|
last: (t, e) => t[t.length - 1]?.[e]
|
|
2923
|
-
},
|
|
2996
|
+
}, I = /* @__PURE__ */ new Map(), O = {
|
|
2924
2997
|
/**
|
|
2925
2998
|
* Register a custom aggregator function.
|
|
2926
2999
|
*/
|
|
2927
3000
|
register(t, e) {
|
|
2928
|
-
|
|
3001
|
+
I.set(t, e);
|
|
2929
3002
|
},
|
|
2930
3003
|
/**
|
|
2931
3004
|
* Unregister a custom aggregator function.
|
|
2932
3005
|
*/
|
|
2933
3006
|
unregister(t) {
|
|
2934
|
-
|
|
3007
|
+
I.delete(t);
|
|
2935
3008
|
},
|
|
2936
3009
|
/**
|
|
2937
3010
|
* Get an aggregator function by reference.
|
|
2938
3011
|
*/
|
|
2939
3012
|
get(t) {
|
|
2940
3013
|
if (t !== void 0)
|
|
2941
|
-
return typeof t == "function" ? t :
|
|
3014
|
+
return typeof t == "function" ? t : I.get(t) ?? K[t];
|
|
2942
3015
|
},
|
|
2943
3016
|
/**
|
|
2944
3017
|
* Run an aggregator on a set of rows.
|
|
2945
3018
|
*/
|
|
2946
|
-
run(t, e, o,
|
|
2947
|
-
const
|
|
2948
|
-
return
|
|
3019
|
+
run(t, e, o, i) {
|
|
3020
|
+
const n = this.get(t);
|
|
3021
|
+
return n ? n(e, o, i) : void 0;
|
|
2949
3022
|
},
|
|
2950
3023
|
/**
|
|
2951
3024
|
* Check if an aggregator exists.
|
|
2952
3025
|
*/
|
|
2953
3026
|
has(t) {
|
|
2954
|
-
return
|
|
3027
|
+
return I.has(t) || t in K;
|
|
2955
3028
|
},
|
|
2956
3029
|
/**
|
|
2957
3030
|
* List all available aggregator names.
|
|
2958
3031
|
*/
|
|
2959
3032
|
list() {
|
|
2960
|
-
return [...Object.keys(
|
|
3033
|
+
return [...Object.keys(K), ...I.keys()];
|
|
2961
3034
|
}
|
|
2962
|
-
},
|
|
3035
|
+
}, ae = {
|
|
2963
3036
|
sum: (t) => t.reduce((e, o) => e + o, 0),
|
|
2964
3037
|
avg: (t) => t.length ? t.reduce((e, o) => e + o, 0) / t.length : 0,
|
|
2965
3038
|
count: (t) => t.length,
|
|
@@ -2968,33 +3041,34 @@ const A = {
|
|
|
2968
3041
|
first: (t) => t[0] ?? 0,
|
|
2969
3042
|
last: (t) => t[t.length - 1] ?? 0
|
|
2970
3043
|
};
|
|
2971
|
-
function
|
|
2972
|
-
return
|
|
3044
|
+
function Ze(t) {
|
|
3045
|
+
return ae[t] ?? ae.sum;
|
|
2973
3046
|
}
|
|
2974
|
-
function
|
|
2975
|
-
return
|
|
3047
|
+
function it(t, e) {
|
|
3048
|
+
return Ze(t)(e);
|
|
2976
3049
|
}
|
|
2977
|
-
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);
|
|
2978
3051
|
export {
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
Qe as
|
|
2990
|
-
|
|
2991
|
-
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
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
|
|
2999
3073
|
};
|
|
3000
3074
|
//# sourceMappingURL=index.js.map
|