@toolbox-web/grid 0.2.2 → 0.2.4
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 +70 -0
- package/all.d.ts +373 -261
- package/all.js +328 -287
- package/all.js.map +1 -1
- package/index.d.ts +265 -196
- package/index.js +1307 -1179
- 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 +2 -2
- 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,73 +1,73 @@
|
|
|
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
|
-
return t.
|
|
5
|
-
direction: t.
|
|
4
|
+
return t._sortState && e.set(t._sortState.field, {
|
|
5
|
+
direction: t._sortState.direction === 1 ? "asc" : "desc",
|
|
6
6
|
priority: 0
|
|
7
7
|
}), e;
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
const 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) {
|
|
45
45
|
const l = r[0];
|
|
46
|
-
l.sort && (t.
|
|
46
|
+
l.sort && (t._sortState = {
|
|
47
47
|
field: l.field,
|
|
48
48
|
direction: l.sort.direction === "asc" ? 1 : -1
|
|
49
49
|
});
|
|
50
50
|
} else
|
|
51
|
-
t.
|
|
52
|
-
for (const l of
|
|
51
|
+
t._sortState = null;
|
|
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$. '?+\-*/%:()!<>=,&|]+$/, _e = /__(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/, Ee = /* @__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
|
+
]), Q = /^on\w+$/i, Ce = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), ye = /^\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, Re(e.content), e.innerHTML;
|
|
129
129
|
}
|
|
130
|
-
function
|
|
130
|
+
function Re(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 (Ee.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) => Q.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 (Q.test(l)) {
|
|
148
148
|
s.push(r.name);
|
|
149
149
|
continue;
|
|
150
150
|
}
|
|
151
|
-
if (
|
|
151
|
+
if (Ce.has(l) && ye.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) || _e.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 !==
|
|
259
|
-
const o = t.
|
|
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
|
+
const o = t._headerRowEl?.children || [];
|
|
260
260
|
if (!o.length) return;
|
|
261
|
-
let
|
|
262
|
-
t.
|
|
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
|
-
for (const a of t.
|
|
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 && N(t), t.__didInitialAutoSize = !0;
|
|
275
275
|
}
|
|
276
|
-
function
|
|
277
|
-
(t.effectiveConfig?.fitMode || t.fitMode ||
|
|
276
|
+
function N(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
|
|
281
|
-
}).join(" ").trim() : t.
|
|
279
|
+
const i = o.minWidth;
|
|
280
|
+
return i != null ? `minmax(${i}px, 1fr)` : "1fr";
|
|
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,269 +318,281 @@ 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
|
|
335
|
-
if (t.
|
|
334
|
+
function Oe(t, e) {
|
|
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.
|
|
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.
|
|
355
|
+
t._focusCol = Math.min(i, t._focusCol + 1), e.preventDefault();
|
|
356
356
|
break;
|
|
357
357
|
case "ArrowLeft":
|
|
358
|
-
t.
|
|
358
|
+
t._focusCol = Math.max(0, t._focusCol - 1), e.preventDefault();
|
|
359
359
|
break;
|
|
360
360
|
case "Home":
|
|
361
|
-
t.
|
|
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.
|
|
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
|
-
t.
|
|
367
|
+
t._focusRow = Math.min(o, t._focusRow + 20), e.preventDefault();
|
|
368
368
|
break;
|
|
369
369
|
case "PageUp":
|
|
370
|
-
t.
|
|
370
|
+
t._focusRow = Math.max(0, t._focusRow - 20), e.preventDefault();
|
|
371
371
|
break;
|
|
372
372
|
case "Enter":
|
|
373
|
-
return typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(t.
|
|
374
|
-
new CustomEvent("activate-cell", { detail: { row: t.
|
|
375
|
-
),
|
|
373
|
+
return typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(t._focusRow) : t.dispatchEvent(
|
|
374
|
+
new CustomEvent("activate-cell", { detail: { row: t._focusRow, col: t._focusCol } })
|
|
375
|
+
), z(t);
|
|
376
376
|
default:
|
|
377
377
|
return;
|
|
378
378
|
}
|
|
379
|
-
|
|
379
|
+
z(t);
|
|
380
380
|
}
|
|
381
381
|
}
|
|
382
|
-
function
|
|
383
|
-
if (t.
|
|
384
|
-
const { rowHeight:
|
|
385
|
-
if (
|
|
386
|
-
const h = t.
|
|
387
|
-
h <
|
|
382
|
+
function z(t, e) {
|
|
383
|
+
if (t._virtualization?.enabled) {
|
|
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.
|
|
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.
|
|
396
|
-
if (
|
|
397
|
-
|
|
398
|
-
|
|
393
|
+
const i = t._focusRow, n = t._virtualization.start ?? 0, s = t._virtualization.end ?? t._rows.length;
|
|
394
|
+
if (i >= n && i < s) {
|
|
395
|
+
const r = t._bodyEl.querySelectorAll(".data-grid-row")[i - n], l = r?.children[t._focusCol];
|
|
396
|
+
if (l) {
|
|
397
|
+
l.classList.add("cell-focus"), l.setAttribute("aria-selected", "true");
|
|
398
|
+
const a = t.shadowRoot?.querySelector(".tbw-scroll-area");
|
|
399
|
+
if (a && l)
|
|
400
|
+
if (e?.forceScrollLeft)
|
|
401
|
+
a.scrollLeft = 0;
|
|
402
|
+
else if (e?.forceScrollRight)
|
|
403
|
+
a.scrollLeft = a.scrollWidth - a.clientWidth;
|
|
404
|
+
else {
|
|
405
|
+
const d = t._getHorizontalScrollOffsets?.(r ?? void 0, l) ?? { left: 0, right: 0 };
|
|
406
|
+
if (!d.skipScroll) {
|
|
407
|
+
const f = l.getBoundingClientRect(), h = a.getBoundingClientRect(), p = f.left - h.left + a.scrollLeft, c = p + f.width, u = a.scrollLeft + d.left, b = a.scrollLeft + a.clientWidth - d.right;
|
|
408
|
+
p < u ? a.scrollLeft = p - d.left : c > b && (a.scrollLeft = c - a.clientWidth + d.right);
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
if (t._activeEditRows !== void 0 && t._activeEditRows !== -1 && l.classList.contains("editing")) {
|
|
412
|
+
const d = l.querySelector(
|
|
399
413
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
400
414
|
);
|
|
401
|
-
if (
|
|
415
|
+
if (d && document.activeElement !== d)
|
|
402
416
|
try {
|
|
403
|
-
|
|
417
|
+
d.focus();
|
|
404
418
|
} catch {
|
|
405
419
|
}
|
|
406
|
-
} else if (!
|
|
407
|
-
|
|
420
|
+
} else if (!l.contains(document.activeElement)) {
|
|
421
|
+
l.hasAttribute("tabindex") || l.setAttribute("tabindex", "-1");
|
|
408
422
|
try {
|
|
409
|
-
|
|
423
|
+
l.focus({ preventScroll: !0 });
|
|
410
424
|
} catch {
|
|
411
425
|
}
|
|
412
426
|
}
|
|
413
427
|
}
|
|
414
428
|
}
|
|
415
429
|
}
|
|
416
|
-
const
|
|
417
|
-
function
|
|
418
|
-
t[
|
|
430
|
+
const ke = "__cellDisplayCache", ze = "__cellCacheEpoch";
|
|
431
|
+
function Y(t) {
|
|
432
|
+
t[ke] = void 0, t[ze] = void 0, t.__hasSpecialColumns = void 0;
|
|
419
433
|
}
|
|
420
|
-
function Me(t, e, o,
|
|
421
|
-
const s = Math.max(0, o - e), r = t.
|
|
434
|
+
function Me(t, e, o, i, n) {
|
|
435
|
+
const s = Math.max(0, o - e), r = t._bodyEl, l = t._visibleColumns, a = l.length;
|
|
422
436
|
let d = t.__cachedHeaderRowCount;
|
|
423
|
-
for (d === void 0 && (d = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = d); t.
|
|
424
|
-
const
|
|
425
|
-
|
|
426
|
-
}
|
|
427
|
-
if (t.
|
|
428
|
-
for (let
|
|
429
|
-
const
|
|
430
|
-
|
|
437
|
+
for (d === void 0 && (d = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = d); t._rowPool.length < s; ) {
|
|
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);
|
|
440
|
+
}
|
|
441
|
+
if (t._rowPool.length > s) {
|
|
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
|
-
t.
|
|
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
|
|
455
|
+
const b = u.__epoch, w = u.__rowDataRef, v = u.children.length, x = b === i && v === a, R = w !== c;
|
|
456
|
+
let g = !1;
|
|
443
457
|
if (x && R) {
|
|
444
|
-
for (let
|
|
445
|
-
if (l[
|
|
446
|
-
|
|
458
|
+
for (let _ = 0; _ < a; _++)
|
|
459
|
+
if (l[_].externalView && !u.querySelector(`.cell[data-col="${_}"] [data-external-view]`)) {
|
|
460
|
+
g = !0;
|
|
447
461
|
break;
|
|
448
462
|
}
|
|
449
463
|
}
|
|
450
|
-
if (!x ||
|
|
451
|
-
const
|
|
452
|
-
if (
|
|
453
|
-
u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1),
|
|
454
|
-
else if (
|
|
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 _ = u.querySelector(".cell.editing"), E = t._activeEditRows === p;
|
|
466
|
+
if (_ && !E)
|
|
467
|
+
u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), D(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
|
|
468
|
+
else if (_ && E)
|
|
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), D(t, u, c, p), u.__epoch = i, u.__rowDataRef = c, E) {
|
|
471
|
+
const S = u.children;
|
|
472
|
+
for (let A = 0; A < S.length; A++) {
|
|
473
|
+
const P = t._visibleColumns[A];
|
|
474
|
+
P && P.editable && O(t, c, p, P, S[A]);
|
|
461
475
|
}
|
|
462
476
|
}
|
|
463
477
|
} else if (R) {
|
|
464
|
-
const
|
|
465
|
-
if (
|
|
466
|
-
|
|
467
|
-
else if (
|
|
468
|
-
const
|
|
469
|
-
for (let
|
|
470
|
-
const
|
|
471
|
-
|
|
478
|
+
const _ = u.querySelector(".cell.editing"), E = t._activeEditRows === p;
|
|
479
|
+
if (_ && !E)
|
|
480
|
+
D(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
|
|
481
|
+
else if (U(t, u, c, p), u.__rowDataRef = 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 && O(t, c, p, P, S[A]);
|
|
472
486
|
}
|
|
473
487
|
}
|
|
474
488
|
} else {
|
|
475
|
-
const
|
|
476
|
-
if (
|
|
477
|
-
|
|
478
|
-
else if (
|
|
479
|
-
const
|
|
480
|
-
for (let
|
|
481
|
-
const
|
|
482
|
-
|
|
489
|
+
const _ = u.querySelector(".cell.editing"), E = t._activeEditRows === p;
|
|
490
|
+
if (_ && !E)
|
|
491
|
+
D(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
|
|
492
|
+
else if (U(t, u, c, p), 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 && O(t, c, p, P, S[A]);
|
|
483
497
|
}
|
|
484
498
|
}
|
|
485
499
|
}
|
|
486
|
-
const
|
|
487
|
-
|
|
500
|
+
const m = t._changedRowIndices.has(p), C = u.classList.contains("changed");
|
|
501
|
+
m !== C && 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
|
+
D(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 R = o[u.field],
|
|
526
|
-
typeof
|
|
539
|
+
const R = o[u.field], g = u.viewRenderer({ row: o, value: R, field: u.field, column: u });
|
|
540
|
+
typeof g == "string" ? b.innerHTML = F(g) : g ? (b.innerHTML = "", b.appendChild(g)) : b.textContent = R == null ? "" : String(R);
|
|
527
541
|
continue;
|
|
528
542
|
}
|
|
529
543
|
if (u.__viewTemplate || u.__compiledView || u.externalView)
|
|
530
544
|
continue;
|
|
531
|
-
const
|
|
545
|
+
const y = o[u.field];
|
|
532
546
|
let x;
|
|
533
547
|
if (u.format)
|
|
534
548
|
try {
|
|
535
|
-
const R = u.format(
|
|
549
|
+
const R = u.format(y, o);
|
|
536
550
|
x = R == null ? "" : String(R);
|
|
537
551
|
} catch {
|
|
538
|
-
x =
|
|
552
|
+
x = y == null ? "" : String(y);
|
|
539
553
|
}
|
|
540
554
|
else if (u.type === "date") {
|
|
541
|
-
if (
|
|
555
|
+
if (y == null || y === "")
|
|
542
556
|
x = "";
|
|
543
|
-
else if (
|
|
544
|
-
x = isNaN(
|
|
557
|
+
else if (y instanceof Date)
|
|
558
|
+
x = isNaN(y.getTime()) ? "" : y.toLocaleDateString();
|
|
545
559
|
else {
|
|
546
|
-
const R = new Date(
|
|
560
|
+
const R = new Date(y);
|
|
547
561
|
x = isNaN(R.getTime()) ? "" : R.toLocaleDateString();
|
|
548
562
|
}
|
|
549
|
-
|
|
563
|
+
b.textContent = x;
|
|
550
564
|
} else if (u.type === "boolean") {
|
|
551
|
-
const R = !!
|
|
552
|
-
|
|
565
|
+
const R = !!y;
|
|
566
|
+
b.innerHTML = `<span role="checkbox" aria-checked="${R}" aria-label="${R}">${R ? "🗹" : "☐"}</span>`;
|
|
553
567
|
} else
|
|
554
|
-
x =
|
|
568
|
+
x = y == null ? "" : String(y), b.textContent = x;
|
|
555
569
|
}
|
|
556
570
|
}
|
|
557
|
-
function
|
|
571
|
+
function D(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, y = p.viewRenderer, x = p.externalView;
|
|
585
|
+
let R = !1;
|
|
586
|
+
if (y) {
|
|
587
|
+
const g = y({ row: o, value: u, field: p.field, column: p });
|
|
588
|
+
typeof g == "string" ? (c.innerHTML = F(g), R = !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 C = { 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: C, 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: C }
|
|
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), R = !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 })), R = !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 (R) {
|
|
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.
|
|
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")), C = Number(c.getAttribute("data-col"));
|
|
648
|
+
if (isNaN(m) || isNaN(C)) return;
|
|
649
|
+
const _ = t._rows[m], E = t._visibleColumns[C];
|
|
650
|
+
!_ || !E || (t._focusRow = m, t._focusCol = C, O(t, _, m, E, 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 C = t._rows[m];
|
|
656
|
+
if (!C) return;
|
|
657
|
+
B(t, m, C);
|
|
658
|
+
const _ = t.findRenderedRowElement?.(m);
|
|
659
|
+
if (_) {
|
|
660
|
+
const E = _.children;
|
|
661
|
+
for (let S = 0; S < E.length; S++) {
|
|
662
|
+
const A = t._visibleColumns[S];
|
|
663
|
+
A && A.editable && O(t, C, m, A, E[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.
|
|
661
|
-
const
|
|
667
|
+
const m = Number(c.getAttribute("data-row")), C = Number(c.getAttribute("data-col"));
|
|
668
|
+
if (isNaN(m) || isNaN(C)) return;
|
|
669
|
+
const _ = t._rows[m], E = t._visibleColumns[C];
|
|
670
|
+
if (!(!_ || !E)) {
|
|
671
|
+
if ((E.type === "select" || E.type === "typeahead") && !c.classList.contains("editing") && g.key === "Enter") {
|
|
672
|
+
g.preventDefault(), t._activeEditRows !== m && B(t, m, _), O(t, _, m, E, 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.
|
|
672
|
-
const
|
|
673
|
-
|
|
682
|
+
if (E.type === "boolean" && g.key === " " && !c.classList.contains("editing")) {
|
|
683
|
+
g.preventDefault(), t._activeEditRows !== m && B(t, m, _);
|
|
684
|
+
const S = !_[E.field];
|
|
685
|
+
J(t, m, E, S, _), 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.
|
|
689
|
+
g.preventDefault(), g.stopPropagation(), t._focusRow = m, t._focusCol = C, typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(m) : O(t, _, m, E, c);
|
|
678
690
|
return;
|
|
679
691
|
}
|
|
680
692
|
if (g.key === "F2" && !c.classList.contains("editing")) {
|
|
681
|
-
g.preventDefault(), O(t,
|
|
693
|
+
g.preventDefault(), O(t, _, m, E, 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;
|
|
@@ -699,63 +711,63 @@ function J(t, e, o, n) {
|
|
|
699
711
|
if (l.classList.contains("editing")) return;
|
|
700
712
|
const d = Number(l.getAttribute("data-col"));
|
|
701
713
|
if (!isNaN(d)) {
|
|
702
|
-
if (t.
|
|
714
|
+
if (t._dispatchCellClick?.(e, s, d, l))
|
|
703
715
|
return;
|
|
704
|
-
t.
|
|
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 && O(t, r, s, h, d);
|
|
718
730
|
}), l && queueMicrotask(() => {
|
|
719
|
-
const d = o.querySelector(`.cell[data-col="${t.
|
|
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
|
|
735
|
-
t.
|
|
746
|
+
function B(t, e, o) {
|
|
747
|
+
t._activeEditRows !== e && (t._rowEditSnapshots.set(e, { ...o }), t._activeEditRows = e);
|
|
736
748
|
}
|
|
737
|
-
function
|
|
738
|
-
if (t.
|
|
739
|
-
const
|
|
740
|
-
if (!o && s &&
|
|
749
|
+
function M(t, e, o) {
|
|
750
|
+
if (t._activeEditRows !== e) return;
|
|
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
|
-
const d = t.
|
|
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 && J(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,13 @@ function N(t, e, o) {
|
|
|
763
775
|
})
|
|
764
776
|
);
|
|
765
777
|
}
|
|
766
|
-
t.
|
|
778
|
+
t._rowEditSnapshots.delete(e), t._activeEditRows = -1, s && (D(t, s, t._rows[e], e), t._changedRowIndices.has(e) ? s.classList.add("changed") : s.classList.remove("changed")), queueMicrotask(() => {
|
|
767
779
|
try {
|
|
768
|
-
const r = t.
|
|
780
|
+
const r = t._focusRow, l = t._focusCol, a = t.findRenderedRowElement?.(r);
|
|
769
781
|
if (a) {
|
|
770
|
-
Array.from(t.
|
|
782
|
+
Array.from(t._bodyEl.querySelectorAll(".cell-focus")).forEach(
|
|
783
|
+
(f) => f.classList.remove("cell-focus")
|
|
784
|
+
);
|
|
771
785
|
const d = a.querySelector(`.cell[data-row="${r}"][data-col="${l}"]`);
|
|
772
786
|
d && (d.classList.add("cell-focus"), d.setAttribute("aria-selected", "true"), d.hasAttribute("tabindex") || d.setAttribute("tabindex", "-1"), d.focus({ preventScroll: !0 }));
|
|
773
787
|
}
|
|
@@ -775,19 +789,19 @@ function N(t, e, o) {
|
|
|
775
789
|
}
|
|
776
790
|
});
|
|
777
791
|
}
|
|
778
|
-
function
|
|
792
|
+
function J(t, e, o, i, n) {
|
|
779
793
|
const s = o.field;
|
|
780
|
-
if (!
|
|
781
|
-
|
|
794
|
+
if (!Z(s) || n[s] === i) return;
|
|
795
|
+
n[s] = i;
|
|
782
796
|
const l = !t._changedRowIndices.has(e);
|
|
783
797
|
t._changedRowIndices.add(e);
|
|
784
798
|
const a = t.findRenderedRowElement?.(e);
|
|
785
799
|
a && a.classList.add("changed"), t.dispatchEvent(
|
|
786
800
|
new CustomEvent("cell-commit", {
|
|
787
801
|
detail: {
|
|
788
|
-
row:
|
|
802
|
+
row: n,
|
|
789
803
|
field: s,
|
|
790
|
-
value:
|
|
804
|
+
value: i,
|
|
791
805
|
rowIndex: e,
|
|
792
806
|
changedRows: t.changedRows,
|
|
793
807
|
changedRowIndices: t.changedRowIndices,
|
|
@@ -796,142 +810,134 @@ function j(t, e, o, n, i) {
|
|
|
796
810
|
})
|
|
797
811
|
);
|
|
798
812
|
}
|
|
799
|
-
function O(t, e, o,
|
|
800
|
-
if (!
|
|
801
|
-
const s = e[
|
|
802
|
-
|
|
813
|
+
function O(t, e, o, i, n) {
|
|
814
|
+
if (!i.editable || (t._activeEditRows !== o && B(t, o, e), n.classList.contains("editing"))) return;
|
|
815
|
+
const s = Z(i.field) ? e[i.field] : void 0;
|
|
816
|
+
n.classList.add("editing");
|
|
803
817
|
let r = !1;
|
|
804
818
|
const l = (c) => {
|
|
805
|
-
r || t.
|
|
819
|
+
r || t._activeEditRows === -1 || J(t, o, i, c, e);
|
|
806
820
|
}, a = () => {
|
|
807
|
-
r = !0,
|
|
808
|
-
const c =
|
|
821
|
+
r = !0, e[i.field] = Z(i.field) ? s : void 0;
|
|
822
|
+
const c = n.querySelector("input,textarea,select");
|
|
809
823
|
c && (typeof HTMLInputElement < "u" && c instanceof HTMLInputElement && c.type === "checkbox" ? c.checked = !!s : "value" in c && (c.value = s ?? ""));
|
|
810
824
|
}, d = document.createElement("div");
|
|
811
|
-
d.style.display = "contents",
|
|
812
|
-
c.key === "Enter" && (c.stopPropagation(), c.preventDefault(), r = !0,
|
|
825
|
+
d.style.display = "contents", n.innerHTML = "", n.appendChild(d), d.addEventListener("keydown", (c) => {
|
|
826
|
+
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
827
|
});
|
|
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[
|
|
828
|
+
const f = i.__editorTemplate, h = i.editor || (f ? "template" : He(i)), p = s;
|
|
829
|
+
if (h === "template" && f) {
|
|
830
|
+
const c = f.cloneNode(!0), u = i.__compiledEditor;
|
|
831
|
+
u ? c.innerHTML = u({ row: e, value: s, field: i.field, column: i }) : c.querySelectorAll("*").forEach((w) => {
|
|
832
|
+
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, y) => {
|
|
833
|
+
const x = e[y];
|
|
820
834
|
return x == null ? "" : String(x);
|
|
821
835
|
}) || "");
|
|
822
836
|
});
|
|
823
|
-
const
|
|
824
|
-
if (
|
|
837
|
+
const b = c.querySelector("input,textarea,select");
|
|
838
|
+
if (b) {
|
|
825
839
|
const w = typeof HTMLInputElement < "u";
|
|
826
|
-
w &&
|
|
827
|
-
const v = w &&
|
|
840
|
+
w && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked = !!s : "value" in b && (b.value = s ?? ""), b.addEventListener("blur", () => {
|
|
841
|
+
const v = w && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked : b.value;
|
|
828
842
|
l(v);
|
|
829
|
-
}),
|
|
843
|
+
}), b.addEventListener("keydown", (v) => {
|
|
830
844
|
if (v.key === "Enter") {
|
|
831
845
|
v.stopPropagation(), v.preventDefault(), r = !0;
|
|
832
|
-
const
|
|
833
|
-
l(
|
|
846
|
+
const y = w && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked : b.value;
|
|
847
|
+
l(y), M(t, o, !1);
|
|
834
848
|
}
|
|
835
|
-
v.key === "Escape" && (v.stopPropagation(), v.preventDefault(), a(),
|
|
836
|
-
}), w &&
|
|
837
|
-
const v =
|
|
849
|
+
v.key === "Escape" && (v.stopPropagation(), v.preventDefault(), a(), M(t, o, !0));
|
|
850
|
+
}), w && b instanceof HTMLInputElement && b.type === "checkbox" && b.addEventListener("change", () => {
|
|
851
|
+
const v = b.checked;
|
|
838
852
|
l(v);
|
|
839
|
-
}), setTimeout(() =>
|
|
853
|
+
}), setTimeout(() => b.focus(), 0);
|
|
840
854
|
}
|
|
841
855
|
d.appendChild(c);
|
|
842
|
-
} else if (typeof
|
|
843
|
-
const c = document.createElement(
|
|
844
|
-
c.value =
|
|
845
|
-
} else if (typeof
|
|
846
|
-
const c =
|
|
856
|
+
} else if (typeof h == "string") {
|
|
857
|
+
const c = document.createElement(h);
|
|
858
|
+
c.value = p, c.addEventListener("change", () => l(c.value)), d.appendChild(c);
|
|
859
|
+
} else if (typeof h == "function") {
|
|
860
|
+
const c = h({ row: e, value: p, field: i.field, column: i, commit: l, cancel: a });
|
|
847
861
|
typeof c == "string" ? d.innerHTML = c : d.appendChild(c);
|
|
848
|
-
} else if (
|
|
862
|
+
} else if (h && typeof h == "object") {
|
|
849
863
|
const c = document.createElement("div");
|
|
850
|
-
c.setAttribute("data-external-editor", ""), c.setAttribute("data-field",
|
|
851
|
-
const u = { row: e, value:
|
|
852
|
-
if (
|
|
864
|
+
c.setAttribute("data-external-editor", ""), c.setAttribute("data-field", i.field), d.appendChild(c);
|
|
865
|
+
const u = { row: e, value: p, field: i.field, column: i, commit: l, cancel: a };
|
|
866
|
+
if (h.mount)
|
|
853
867
|
try {
|
|
854
|
-
|
|
868
|
+
h.mount({ placeholder: c, context: u, spec: h });
|
|
855
869
|
} catch {
|
|
856
870
|
}
|
|
857
871
|
else
|
|
858
872
|
t.dispatchEvent(
|
|
859
|
-
new CustomEvent("mount-external-editor", { detail: { placeholder: c, spec:
|
|
873
|
+
new CustomEvent("mount-external-editor", { detail: { placeholder: c, spec: h, context: u } })
|
|
860
874
|
);
|
|
861
875
|
}
|
|
862
876
|
}
|
|
863
|
-
function
|
|
864
|
-
!t.
|
|
865
|
-
|
|
877
|
+
function ne(t, e) {
|
|
878
|
+
!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) => {
|
|
879
|
+
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
880
|
}), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
867
881
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: 0 } })
|
|
868
882
|
), t.requestStateChange?.());
|
|
869
883
|
}
|
|
870
|
-
function
|
|
871
|
-
t.
|
|
872
|
-
const
|
|
873
|
-
t._rows.sort((
|
|
884
|
+
function ie(t, e, o) {
|
|
885
|
+
t._sortState = { field: e.field, direction: o };
|
|
886
|
+
const i = e.sortComparator || ((n, s) => n == null && s == null ? 0 : n == null ? -1 : s == null || n > s ? 1 : n < s ? -1 : 0);
|
|
887
|
+
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
888
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: o } })
|
|
875
889
|
), t.requestStateChange?.();
|
|
876
890
|
}
|
|
877
|
-
function
|
|
891
|
+
function Ne(t, e) {
|
|
878
892
|
typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
|
|
879
893
|
}
|
|
880
|
-
function
|
|
881
|
-
t.
|
|
882
|
-
const e = t.
|
|
883
|
-
e.innerHTML = "", t.
|
|
884
|
-
const
|
|
885
|
-
|
|
894
|
+
function q(t) {
|
|
895
|
+
t._headerRowEl = t.findHeaderRow();
|
|
896
|
+
const e = t._headerRowEl;
|
|
897
|
+
e.innerHTML = "", t._visibleColumns.forEach((o, i) => {
|
|
898
|
+
const n = document.createElement("div");
|
|
899
|
+
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
900
|
const s = o.__headerTemplate;
|
|
887
|
-
if (s) Array.from(s.childNodes).forEach((r) =>
|
|
901
|
+
if (s) Array.from(s.childNodes).forEach((r) => n.appendChild(r.cloneNode(!0)));
|
|
888
902
|
else {
|
|
889
903
|
const r = o.header || o.field, l = document.createElement("span");
|
|
890
|
-
l.textContent = r,
|
|
904
|
+
l.textContent = r, n.appendChild(l);
|
|
891
905
|
}
|
|
892
906
|
if (o.sortable) {
|
|
893
|
-
|
|
907
|
+
n.classList.add("sortable"), n.tabIndex = 0;
|
|
894
908
|
const r = document.createElement("span");
|
|
895
|
-
|
|
896
|
-
const l = t.
|
|
897
|
-
|
|
898
|
-
t.
|
|
899
|
-
}),
|
|
900
|
-
if (
|
|
901
|
-
if (
|
|
902
|
-
|
|
909
|
+
j(r, "sort-indicator"), r.style.opacity = "0.6";
|
|
910
|
+
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;
|
|
911
|
+
Ne(r, d), n.appendChild(r), n.setAttribute("aria-sort", l === 0 ? "none" : l === 1 ? "ascending" : "descending"), n.addEventListener("click", (f) => {
|
|
912
|
+
t._resizeController?.isResizing || t._dispatchHeaderClick?.(f, i, n) || ne(t, o);
|
|
913
|
+
}), n.addEventListener("keydown", (f) => {
|
|
914
|
+
if (f.key === "Enter" || f.key === " ") {
|
|
915
|
+
if (f.preventDefault(), t._dispatchHeaderClick?.(f, i, n)) return;
|
|
916
|
+
ne(t, o);
|
|
903
917
|
}
|
|
904
918
|
});
|
|
905
919
|
}
|
|
906
920
|
if (o.resizable) {
|
|
907
|
-
|
|
921
|
+
n.style.position = "relative";
|
|
908
922
|
const r = document.createElement("div");
|
|
909
923
|
r.className = "resize-handle", r.setAttribute("aria-hidden", "true"), r.addEventListener("mousedown", (l) => {
|
|
910
|
-
l.stopPropagation(), l.preventDefault(), t.
|
|
911
|
-
}),
|
|
924
|
+
l.stopPropagation(), l.preventDefault(), t._resizeController.start(l, i, n);
|
|
925
|
+
}), n.appendChild(r);
|
|
912
926
|
}
|
|
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) => {
|
|
927
|
+
e.appendChild(n);
|
|
928
|
+
}), e.querySelectorAll(".cell.sortable").forEach((o) => {
|
|
923
929
|
o.getAttribute("aria-sort") || o.setAttribute("aria-sort", "none");
|
|
924
930
|
}), e.children.length > 0 ? (e.setAttribute("role", "row"), e.setAttribute("aria-rowindex", "1")) : (e.removeAttribute("role"), e.removeAttribute("aria-rowindex"));
|
|
925
931
|
}
|
|
926
932
|
function De(t) {
|
|
927
|
-
let e = null, o = null,
|
|
933
|
+
let e = null, o = null, i = null, n = null;
|
|
928
934
|
const s = (a) => {
|
|
929
935
|
if (!e) return;
|
|
930
|
-
const d = a.clientX - e.startX,
|
|
931
|
-
|
|
936
|
+
const d = a.clientX - e.startX, f = Math.max(40, e.startWidth + d), h = t._visibleColumns[e.colIndex];
|
|
937
|
+
h.width = f, h.__userResized = !0, h.__renderedWidth = f, o == null && (o = requestAnimationFrame(() => {
|
|
932
938
|
o = null, t.updateTemplate?.();
|
|
933
939
|
})), t.dispatchEvent(
|
|
934
|
-
new CustomEvent("column-resize", { detail: { field:
|
|
940
|
+
new CustomEvent("column-resize", { detail: { field: h.field, width: f } })
|
|
935
941
|
);
|
|
936
942
|
};
|
|
937
943
|
let r = !1;
|
|
@@ -939,26 +945,26 @@ function De(t) {
|
|
|
939
945
|
const a = e !== null;
|
|
940
946
|
a && (r = !0, requestAnimationFrame(() => {
|
|
941
947
|
r = !1;
|
|
942
|
-
})), window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", l),
|
|
948
|
+
})), 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
949
|
};
|
|
944
950
|
return {
|
|
945
951
|
get isResizing() {
|
|
946
952
|
return e !== null || r;
|
|
947
953
|
},
|
|
948
|
-
start(a, d,
|
|
954
|
+
start(a, d, f) {
|
|
949
955
|
a.preventDefault();
|
|
950
|
-
const
|
|
951
|
-
e = { startX: a.clientX, colIndex: d, startWidth:
|
|
956
|
+
const h = f.getBoundingClientRect();
|
|
957
|
+
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
958
|
},
|
|
953
959
|
dispose() {
|
|
954
960
|
l();
|
|
955
961
|
}
|
|
956
962
|
};
|
|
957
963
|
}
|
|
958
|
-
function
|
|
964
|
+
function V(t) {
|
|
959
965
|
return t ? typeof t == "string" ? t : t.outerHTML : "";
|
|
960
966
|
}
|
|
961
|
-
function
|
|
967
|
+
function qe() {
|
|
962
968
|
return {
|
|
963
969
|
toolPanels: /* @__PURE__ */ new Map(),
|
|
964
970
|
headerContents: /* @__PURE__ */ new Map(),
|
|
@@ -975,44 +981,44 @@ function Ne() {
|
|
|
975
981
|
activePanelCleanup: null
|
|
976
982
|
};
|
|
977
983
|
}
|
|
978
|
-
function
|
|
984
|
+
function Be(t, e) {
|
|
979
985
|
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
986
|
}
|
|
981
|
-
function
|
|
982
|
-
const
|
|
983
|
-
let
|
|
987
|
+
function Ie(t, e, o = "☰") {
|
|
988
|
+
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));
|
|
989
|
+
let b = "";
|
|
984
990
|
for (const w of c)
|
|
985
|
-
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>`);
|
|
986
992
|
for (const w of u)
|
|
987
|
-
w.icon && w.action && (
|
|
993
|
+
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
994
|
for (const w of c)
|
|
989
|
-
(w.element || w.render) && (
|
|
995
|
+
(w.element || w.render) && (b += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${w.id}"></div>`);
|
|
990
996
|
for (const w of u)
|
|
991
|
-
(w.element || w.render) && (
|
|
992
|
-
if (d && (
|
|
997
|
+
(w.element || w.render) && (b += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${w.id}"></div>`);
|
|
998
|
+
if (d && (b += '<slot name="toolbar"></slot>'), p && (b += '<div class="tbw-toolbar-separator"></div>'), f) {
|
|
993
999
|
const w = e.isPanelOpen;
|
|
994
|
-
|
|
1000
|
+
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
1001
|
}
|
|
996
1002
|
return `
|
|
997
1003
|
<div class="tbw-shell-header" part="shell-header" role="presentation">
|
|
998
|
-
${
|
|
1004
|
+
${n ? `<div class="tbw-shell-title">${i}</div>` : ""}
|
|
999
1005
|
<div class="tbw-shell-content" part="shell-content" role="presentation">
|
|
1000
1006
|
<slot name="header-content"></slot>
|
|
1001
1007
|
</div>
|
|
1002
1008
|
<div class="tbw-shell-toolbar" part="shell-toolbar" role="presentation">
|
|
1003
|
-
${
|
|
1009
|
+
${b}
|
|
1004
1010
|
</div>
|
|
1005
1011
|
</div>
|
|
1006
1012
|
`;
|
|
1007
1013
|
}
|
|
1008
|
-
function
|
|
1009
|
-
const
|
|
1010
|
-
let
|
|
1014
|
+
function $e(t, e, o, i) {
|
|
1015
|
+
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;
|
|
1016
|
+
let h = "";
|
|
1011
1017
|
for (const u of d) {
|
|
1012
|
-
const
|
|
1013
|
-
|
|
1014
|
-
<div class="${`tbw-accordion-section${
|
|
1015
|
-
<button class="tbw-accordion-header" aria-expanded="${
|
|
1018
|
+
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>`;
|
|
1019
|
+
h += `
|
|
1020
|
+
<div class="${`tbw-accordion-section${b ? " expanded" : ""}${f ? " single" : ""}`}" data-section="${u.id}">
|
|
1021
|
+
<button class="tbw-accordion-header" aria-expanded="${b}" aria-controls="tbw-section-${u.id}"${f ? ' aria-disabled="true"' : ""}>
|
|
1016
1022
|
${w}
|
|
1017
1023
|
<span class="tbw-accordion-title">${u.title}</span>
|
|
1018
1024
|
${v}
|
|
@@ -1022,16 +1028,16 @@ function Ie(t, e, o, n) {
|
|
|
1022
1028
|
`;
|
|
1023
1029
|
}
|
|
1024
1030
|
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="${
|
|
1031
|
+
<aside class="tbw-tool-panel${r ? " open" : ""}" part="tool-panel" data-position="${n}" role="presentation" id="tbw-tool-panel">
|
|
1032
|
+
<div class="tbw-tool-panel-resize" data-resize-handle data-handle-position="${n === "left" ? "right" : "left"}" aria-hidden="true"></div>
|
|
1027
1033
|
<div class="tbw-tool-panel-content" role="presentation">
|
|
1028
1034
|
<div class="tbw-accordion">
|
|
1029
|
-
${
|
|
1035
|
+
${h}
|
|
1030
1036
|
</div>
|
|
1031
1037
|
</div>
|
|
1032
1038
|
</aside>
|
|
1033
1039
|
` : "";
|
|
1034
|
-
return
|
|
1040
|
+
return n === "left" ? `
|
|
1035
1041
|
<div class="tbw-shell-body">
|
|
1036
1042
|
${c}
|
|
1037
1043
|
<div class="tbw-grid-content">
|
|
@@ -1047,161 +1053,161 @@ function Ie(t, e, o, n) {
|
|
|
1047
1053
|
</div>
|
|
1048
1054
|
`;
|
|
1049
1055
|
}
|
|
1050
|
-
function
|
|
1056
|
+
function se(t, e) {
|
|
1051
1057
|
const o = t.querySelector("tbw-grid-header");
|
|
1052
1058
|
if (!o) return;
|
|
1053
1059
|
o.style.display = "none";
|
|
1054
|
-
const
|
|
1055
|
-
e.lightDomHeaderContent = Array.from(
|
|
1060
|
+
const i = o.querySelectorAll("tbw-grid-header-content");
|
|
1061
|
+
e.lightDomHeaderContent = Array.from(i), e.lightDomHeaderContent.forEach((s) => {
|
|
1056
1062
|
s.setAttribute("slot", "header-content");
|
|
1057
1063
|
});
|
|
1058
|
-
const
|
|
1059
|
-
e.lightDomButtons = Array.from(
|
|
1064
|
+
const n = o.querySelectorAll("tbw-grid-tool-button");
|
|
1065
|
+
e.lightDomButtons = Array.from(n), e.lightDomButtons.sort((s, r) => {
|
|
1060
1066
|
const l = parseInt(s.getAttribute("order") ?? "100", 10), a = parseInt(r.getAttribute("order") ?? "100", 10);
|
|
1061
1067
|
return l - a;
|
|
1062
1068
|
}), e.lightDomButtons.forEach((s) => {
|
|
1063
1069
|
s.setAttribute("slot", "toolbar");
|
|
1064
1070
|
});
|
|
1065
1071
|
}
|
|
1066
|
-
function
|
|
1067
|
-
const
|
|
1068
|
-
|
|
1072
|
+
function We(t, e, o, i) {
|
|
1073
|
+
const n = t.querySelector(".tbw-shell-toolbar");
|
|
1074
|
+
n && n.addEventListener("click", (r) => {
|
|
1069
1075
|
const l = r.target;
|
|
1070
1076
|
if (l.closest("[data-panel-toggle]")) {
|
|
1071
|
-
|
|
1077
|
+
i.onPanelToggle();
|
|
1072
1078
|
return;
|
|
1073
1079
|
}
|
|
1074
1080
|
const d = l.closest("[data-btn]");
|
|
1075
1081
|
if (d) {
|
|
1076
|
-
const
|
|
1077
|
-
|
|
1082
|
+
const f = d.getAttribute("data-btn");
|
|
1083
|
+
f && i.onToolbarButtonClick(f);
|
|
1078
1084
|
}
|
|
1079
1085
|
});
|
|
1080
1086
|
const s = t.querySelector(".tbw-accordion");
|
|
1081
1087
|
s && s.addEventListener("click", (r) => {
|
|
1082
1088
|
const a = r.target.closest(".tbw-accordion-header");
|
|
1083
1089
|
if (a) {
|
|
1084
|
-
const
|
|
1085
|
-
|
|
1090
|
+
const f = a.closest("[data-section]")?.getAttribute("data-section");
|
|
1091
|
+
f && i.onSectionToggle(f);
|
|
1086
1092
|
}
|
|
1087
1093
|
});
|
|
1088
1094
|
}
|
|
1089
1095
|
function Ve(t, e, o) {
|
|
1090
|
-
const
|
|
1091
|
-
if (!
|
|
1096
|
+
const i = t.querySelector(".tbw-tool-panel"), n = t.querySelector("[data-resize-handle]"), s = t.querySelector(".tbw-shell-body");
|
|
1097
|
+
if (!i || !n || !s)
|
|
1092
1098
|
return () => {
|
|
1093
1099
|
};
|
|
1094
1100
|
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
|
-
|
|
1101
|
+
let a = 0, d = 0, f = 0, h = !1;
|
|
1102
|
+
const p = (b) => {
|
|
1103
|
+
if (!h) return;
|
|
1104
|
+
b.preventDefault();
|
|
1105
|
+
const w = r === "left" ? b.clientX - a : a - b.clientX, v = Math.min(f, Math.max(l, d + w));
|
|
1106
|
+
i.style.width = `${v}px`;
|
|
1101
1107
|
}, c = () => {
|
|
1102
|
-
if (!
|
|
1103
|
-
|
|
1104
|
-
const
|
|
1105
|
-
o(
|
|
1106
|
-
}, u = (
|
|
1107
|
-
|
|
1108
|
+
if (!h) return;
|
|
1109
|
+
h = !1, n.classList.remove("resizing"), i.style.transition = "", document.body.style.cursor = "", document.body.style.userSelect = "";
|
|
1110
|
+
const b = i.getBoundingClientRect().width;
|
|
1111
|
+
o(b), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", c);
|
|
1112
|
+
}, u = (b) => {
|
|
1113
|
+
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
1114
|
};
|
|
1109
|
-
return
|
|
1110
|
-
|
|
1115
|
+
return n.addEventListener("mousedown", u), () => {
|
|
1116
|
+
n.removeEventListener("mousedown", u), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", c);
|
|
1111
1117
|
};
|
|
1112
1118
|
}
|
|
1113
|
-
function
|
|
1114
|
-
const
|
|
1115
|
-
for (const
|
|
1116
|
-
const s = t.querySelector(`[data-btn-slot="${
|
|
1119
|
+
function Ge(t, e, o) {
|
|
1120
|
+
const i = [...e?.header?.toolbarButtons ?? [], ...o.toolbarButtons.values()];
|
|
1121
|
+
for (const n of i) {
|
|
1122
|
+
const s = t.querySelector(`[data-btn-slot="${n.id}"]`);
|
|
1117
1123
|
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(
|
|
1124
|
+
const r = o.toolbarButtonCleanups.get(n.id);
|
|
1125
|
+
if (r && (r(), o.toolbarButtonCleanups.delete(n.id)), n.element)
|
|
1126
|
+
s.appendChild(n.element);
|
|
1127
|
+
else if (n.render) {
|
|
1128
|
+
const l = n.render(s);
|
|
1129
|
+
l && o.toolbarButtonCleanups.set(n.id, l);
|
|
1124
1130
|
}
|
|
1125
1131
|
}
|
|
1126
1132
|
}
|
|
1127
|
-
function
|
|
1133
|
+
function he(t, e) {
|
|
1128
1134
|
const o = t.querySelector(".tbw-shell-content");
|
|
1129
1135
|
if (!o) return;
|
|
1130
|
-
const
|
|
1131
|
-
for (const s of
|
|
1136
|
+
const i = [...e.headerContents.values()].sort((s, r) => (s.order ?? 100) - (r.order ?? 100)), n = o.querySelector('slot[name="header-content"]');
|
|
1137
|
+
for (const s of i) {
|
|
1132
1138
|
const r = e.headerContentCleanups.get(s.id);
|
|
1133
1139
|
r && (r(), e.headerContentCleanups.delete(s.id));
|
|
1134
1140
|
let l = o.querySelector(`[data-header-content="${s.id}"]`);
|
|
1135
|
-
l || (l = document.createElement("div"), l.setAttribute("data-header-content", s.id),
|
|
1141
|
+
l || (l = document.createElement("div"), l.setAttribute("data-header-content", s.id), n ? o.insertBefore(l, n) : o.appendChild(l));
|
|
1136
1142
|
const a = s.render(l);
|
|
1137
1143
|
a && e.headerContentCleanups.set(s.id, a);
|
|
1138
1144
|
}
|
|
1139
1145
|
}
|
|
1140
|
-
function
|
|
1146
|
+
function Fe(t, e, o) {
|
|
1141
1147
|
if (!e.isPanelOpen) return;
|
|
1142
|
-
const
|
|
1148
|
+
const i = V(o?.expand ?? H.expand), n = V(o?.collapse ?? H.collapse);
|
|
1143
1149
|
for (const [s, r] of e.toolPanels) {
|
|
1144
1150
|
const l = e.expandedSections.has(s), a = t.querySelector(`[data-section="${s}"]`), d = a?.querySelector(".tbw-accordion-content");
|
|
1145
1151
|
if (!a || !d) continue;
|
|
1146
1152
|
a.classList.toggle("expanded", l);
|
|
1147
|
-
const
|
|
1148
|
-
|
|
1149
|
-
const
|
|
1150
|
-
if (
|
|
1153
|
+
const f = a.querySelector(".tbw-accordion-header");
|
|
1154
|
+
f && f.setAttribute("aria-expanded", String(l));
|
|
1155
|
+
const h = a.querySelector(".tbw-accordion-chevron");
|
|
1156
|
+
if (h && (h.innerHTML = l ? n : i), l) {
|
|
1151
1157
|
if (d.children.length === 0) {
|
|
1152
|
-
const
|
|
1153
|
-
|
|
1158
|
+
const p = r.render(d);
|
|
1159
|
+
p && e.panelCleanups.set(s, p);
|
|
1154
1160
|
}
|
|
1155
1161
|
} else {
|
|
1156
|
-
const
|
|
1157
|
-
|
|
1162
|
+
const p = e.panelCleanups.get(s);
|
|
1163
|
+
p && (p(), e.panelCleanups.delete(s)), d.innerHTML = "";
|
|
1158
1164
|
}
|
|
1159
1165
|
}
|
|
1160
1166
|
}
|
|
1161
|
-
function
|
|
1167
|
+
function re(t, e) {
|
|
1162
1168
|
const o = t.querySelector("[data-panel-toggle]");
|
|
1163
1169
|
o && (o.classList.toggle("active", e.isPanelOpen), o.setAttribute("aria-pressed", String(e.isPanelOpen)));
|
|
1164
1170
|
}
|
|
1165
|
-
function
|
|
1171
|
+
function le(t, e) {
|
|
1166
1172
|
const o = t.querySelector(".tbw-tool-panel");
|
|
1167
1173
|
o && (o.classList.toggle("open", e.isPanelOpen), e.isPanelOpen || (o.style.width = ""));
|
|
1168
1174
|
}
|
|
1169
|
-
function
|
|
1175
|
+
function Ue(t, e) {
|
|
1170
1176
|
const o = [];
|
|
1171
|
-
for (const
|
|
1177
|
+
for (const i of t?.header?.toolbarButtons ?? [])
|
|
1172
1178
|
o.push({
|
|
1173
|
-
id:
|
|
1174
|
-
label:
|
|
1175
|
-
disabled:
|
|
1179
|
+
id: i.id,
|
|
1180
|
+
label: i.label,
|
|
1181
|
+
disabled: i.disabled ?? !1,
|
|
1176
1182
|
source: "config"
|
|
1177
1183
|
});
|
|
1178
|
-
for (const
|
|
1184
|
+
for (const i of e.toolbarButtons.values())
|
|
1179
1185
|
o.push({
|
|
1180
|
-
id:
|
|
1181
|
-
label:
|
|
1182
|
-
disabled:
|
|
1186
|
+
id: i.id,
|
|
1187
|
+
label: i.label,
|
|
1188
|
+
disabled: i.disabled ?? !1,
|
|
1183
1189
|
source: "config"
|
|
1184
1190
|
});
|
|
1185
|
-
for (let
|
|
1186
|
-
const s = e.lightDomButtons[
|
|
1191
|
+
for (let i = 0; i < e.lightDomButtons.length; i++) {
|
|
1192
|
+
const s = e.lightDomButtons[i].querySelector("button");
|
|
1187
1193
|
o.push({
|
|
1188
|
-
id: `light-dom-${
|
|
1194
|
+
id: `light-dom-${i}`,
|
|
1189
1195
|
label: s?.getAttribute("title") ?? s?.getAttribute("aria-label") ?? "",
|
|
1190
1196
|
disabled: s?.disabled ?? !1,
|
|
1191
1197
|
source: "light-dom"
|
|
1192
1198
|
});
|
|
1193
1199
|
}
|
|
1194
|
-
for (const
|
|
1200
|
+
for (const i of e.toolPanels.values())
|
|
1195
1201
|
o.push({
|
|
1196
|
-
id: `panel-toggle-${
|
|
1197
|
-
label:
|
|
1202
|
+
id: `panel-toggle-${i.id}`,
|
|
1203
|
+
label: i.tooltip ?? i.title,
|
|
1198
1204
|
disabled: !1,
|
|
1199
1205
|
source: "panel-toggle",
|
|
1200
|
-
panelId:
|
|
1206
|
+
panelId: i.id
|
|
1201
1207
|
});
|
|
1202
1208
|
return o;
|
|
1203
1209
|
}
|
|
1204
|
-
function
|
|
1210
|
+
function Xe(t) {
|
|
1205
1211
|
for (const e of t.headerContentCleanups.values())
|
|
1206
1212
|
e();
|
|
1207
1213
|
t.headerContentCleanups.clear(), t.activePanelCleanup && (t.activePanelCleanup(), t.activePanelCleanup = null);
|
|
@@ -1209,7 +1215,142 @@ function Ue(t) {
|
|
|
1209
1215
|
e();
|
|
1210
1216
|
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
1217
|
}
|
|
1212
|
-
|
|
1218
|
+
function Ke(t, e) {
|
|
1219
|
+
let o = !1;
|
|
1220
|
+
const i = {
|
|
1221
|
+
get isInitialized() {
|
|
1222
|
+
return o;
|
|
1223
|
+
},
|
|
1224
|
+
setInitialized(n) {
|
|
1225
|
+
o = n;
|
|
1226
|
+
},
|
|
1227
|
+
get isPanelOpen() {
|
|
1228
|
+
return t.isPanelOpen;
|
|
1229
|
+
},
|
|
1230
|
+
get activePanel() {
|
|
1231
|
+
return t.isPanelOpen && t.expandedSections.size > 0 ? [...t.expandedSections][0] : null;
|
|
1232
|
+
},
|
|
1233
|
+
get expandedSections() {
|
|
1234
|
+
return [...t.expandedSections];
|
|
1235
|
+
},
|
|
1236
|
+
openToolPanel() {
|
|
1237
|
+
if (t.isPanelOpen) return;
|
|
1238
|
+
if (t.toolPanels.size === 0) {
|
|
1239
|
+
console.warn("[tbw-grid] No tool panels registered");
|
|
1240
|
+
return;
|
|
1241
|
+
}
|
|
1242
|
+
if (t.isPanelOpen = !0, t.expandedSections.size === 0 && t.toolPanels.size > 0) {
|
|
1243
|
+
const r = [...t.toolPanels.values()].sort((l, a) => (l.order ?? 100) - (a.order ?? 100))[0];
|
|
1244
|
+
r && t.expandedSections.add(r.id);
|
|
1245
|
+
}
|
|
1246
|
+
const n = e.getShadow();
|
|
1247
|
+
re(n, t), le(n, t), Fe(n, t, e.getAccordionIcons()), e.emit("tool-panel-open", { sections: i.expandedSections });
|
|
1248
|
+
},
|
|
1249
|
+
closeToolPanel() {
|
|
1250
|
+
if (!t.isPanelOpen) return;
|
|
1251
|
+
for (const s of t.panelCleanups.values())
|
|
1252
|
+
s();
|
|
1253
|
+
t.panelCleanups.clear(), t.activePanelCleanup && (t.activePanelCleanup(), t.activePanelCleanup = null);
|
|
1254
|
+
for (const s of t.toolPanels.values())
|
|
1255
|
+
s.onClose?.();
|
|
1256
|
+
t.isPanelOpen = !1;
|
|
1257
|
+
const n = e.getShadow();
|
|
1258
|
+
re(n, t), le(n, t), e.emit("tool-panel-close", {});
|
|
1259
|
+
},
|
|
1260
|
+
toggleToolPanel() {
|
|
1261
|
+
t.isPanelOpen ? i.closeToolPanel() : i.openToolPanel();
|
|
1262
|
+
},
|
|
1263
|
+
toggleToolPanelSection(n) {
|
|
1264
|
+
const s = t.toolPanels.get(n);
|
|
1265
|
+
if (!s) {
|
|
1266
|
+
console.warn(`[tbw-grid] Tool panel section "${n}" not found`);
|
|
1267
|
+
return;
|
|
1268
|
+
}
|
|
1269
|
+
if (t.toolPanels.size === 1)
|
|
1270
|
+
return;
|
|
1271
|
+
const r = e.getShadow(), l = t.expandedSections.has(n);
|
|
1272
|
+
if (l) {
|
|
1273
|
+
const a = t.panelCleanups.get(n);
|
|
1274
|
+
a && (a(), t.panelCleanups.delete(n)), s.onClose?.(), t.expandedSections.delete(n), X(r, n, !1);
|
|
1275
|
+
} else {
|
|
1276
|
+
for (const [a, d] of t.toolPanels)
|
|
1277
|
+
if (a !== n && t.expandedSections.has(a)) {
|
|
1278
|
+
const f = t.panelCleanups.get(a);
|
|
1279
|
+
f && (f(), t.panelCleanups.delete(a)), d.onClose?.(), t.expandedSections.delete(a), X(r, a, !1);
|
|
1280
|
+
const h = r.querySelector(`[data-section="${a}"] .tbw-accordion-content`);
|
|
1281
|
+
h && (h.innerHTML = "");
|
|
1282
|
+
}
|
|
1283
|
+
t.expandedSections.add(n), X(r, n, !0), je(r, t, n);
|
|
1284
|
+
}
|
|
1285
|
+
e.emit("tool-panel-section-toggle", { id: n, expanded: !l });
|
|
1286
|
+
},
|
|
1287
|
+
getToolPanels() {
|
|
1288
|
+
return [...t.toolPanels.values()];
|
|
1289
|
+
},
|
|
1290
|
+
registerToolPanel(n) {
|
|
1291
|
+
if (t.toolPanels.has(n.id)) {
|
|
1292
|
+
console.warn(`[tbw-grid] Tool panel "${n.id}" already registered`);
|
|
1293
|
+
return;
|
|
1294
|
+
}
|
|
1295
|
+
t.toolPanels.set(n.id, n), o && e.refreshShellHeader();
|
|
1296
|
+
},
|
|
1297
|
+
unregisterToolPanel(n) {
|
|
1298
|
+
if (t.expandedSections.has(n)) {
|
|
1299
|
+
const s = t.panelCleanups.get(n);
|
|
1300
|
+
s && (s(), t.panelCleanups.delete(n)), t.expandedSections.delete(n);
|
|
1301
|
+
}
|
|
1302
|
+
t.toolPanels.delete(n), o && e.refreshShellHeader();
|
|
1303
|
+
},
|
|
1304
|
+
getHeaderContents() {
|
|
1305
|
+
return [...t.headerContents.values()];
|
|
1306
|
+
},
|
|
1307
|
+
registerHeaderContent(n) {
|
|
1308
|
+
if (t.headerContents.has(n.id)) {
|
|
1309
|
+
console.warn(`[tbw-grid] Header content "${n.id}" already registered`);
|
|
1310
|
+
return;
|
|
1311
|
+
}
|
|
1312
|
+
t.headerContents.set(n.id, n), o && he(e.getShadow(), t);
|
|
1313
|
+
},
|
|
1314
|
+
unregisterHeaderContent(n) {
|
|
1315
|
+
const s = t.headerContentCleanups.get(n);
|
|
1316
|
+
s && (s(), t.headerContentCleanups.delete(n)), t.headerContents.get(n)?.onDestroy?.(), t.headerContents.delete(n), e.getShadow().querySelector(`[data-header-content="${n}"]`)?.remove();
|
|
1317
|
+
},
|
|
1318
|
+
getToolbarButtons() {
|
|
1319
|
+
return Ue(e.getShellConfig(), t);
|
|
1320
|
+
},
|
|
1321
|
+
registerToolbarButton(n) {
|
|
1322
|
+
if (t.toolbarButtons.has(n.id)) {
|
|
1323
|
+
console.warn(`[tbw-grid] Toolbar button "${n.id}" already registered`);
|
|
1324
|
+
return;
|
|
1325
|
+
}
|
|
1326
|
+
t.toolbarButtons.set(n.id, n), o && e.refreshShellHeader();
|
|
1327
|
+
},
|
|
1328
|
+
unregisterToolbarButton(n) {
|
|
1329
|
+
const s = t.toolbarButtonCleanups.get(n);
|
|
1330
|
+
s && (s(), t.toolbarButtonCleanups.delete(n)), t.toolbarButtons.delete(n), o && e.refreshShellHeader();
|
|
1331
|
+
},
|
|
1332
|
+
setToolbarButtonDisabled(n, s) {
|
|
1333
|
+
const r = t.toolbarButtons.get(n);
|
|
1334
|
+
r && (r.disabled = s);
|
|
1335
|
+
const l = e.getShadow().querySelector(`[data-btn="${n}"]`);
|
|
1336
|
+
l && (l.disabled = s);
|
|
1337
|
+
}
|
|
1338
|
+
};
|
|
1339
|
+
return i;
|
|
1340
|
+
}
|
|
1341
|
+
function X(t, e, o) {
|
|
1342
|
+
const i = t.querySelector(`[data-section="${e}"]`);
|
|
1343
|
+
i && i.classList.toggle("expanded", o);
|
|
1344
|
+
}
|
|
1345
|
+
function je(t, e, o) {
|
|
1346
|
+
const i = e.toolPanels.get(o);
|
|
1347
|
+
if (!i?.render) return;
|
|
1348
|
+
const n = t.querySelector(`[data-section="${o}"] .tbw-accordion-content`);
|
|
1349
|
+
if (!n) return;
|
|
1350
|
+
const s = i.render(n);
|
|
1351
|
+
s && e.panelCleanups.set(o, s);
|
|
1352
|
+
}
|
|
1353
|
+
class Ye {
|
|
1213
1354
|
constructor(e) {
|
|
1214
1355
|
this.grid = e;
|
|
1215
1356
|
}
|
|
@@ -1235,14 +1376,14 @@ class Xe {
|
|
|
1235
1376
|
*/
|
|
1236
1377
|
attach(e) {
|
|
1237
1378
|
if (this.pluginMap.set(e.constructor, e), this.plugins.push(e), e.cellRenderers)
|
|
1238
|
-
for (const [o,
|
|
1239
|
-
this.cellRenderers.set(o,
|
|
1379
|
+
for (const [o, i] of Object.entries(e.cellRenderers))
|
|
1380
|
+
this.cellRenderers.set(o, i);
|
|
1240
1381
|
if (e.headerRenderers)
|
|
1241
|
-
for (const [o,
|
|
1242
|
-
this.headerRenderers.set(o,
|
|
1382
|
+
for (const [o, i] of Object.entries(e.headerRenderers))
|
|
1383
|
+
this.headerRenderers.set(o, i);
|
|
1243
1384
|
if (e.cellEditors)
|
|
1244
|
-
for (const [o,
|
|
1245
|
-
this.cellEditors.set(o,
|
|
1385
|
+
for (const [o, i] of Object.entries(e.cellEditors))
|
|
1386
|
+
this.cellEditors.set(o, i);
|
|
1246
1387
|
e.attach(this.grid);
|
|
1247
1388
|
}
|
|
1248
1389
|
/**
|
|
@@ -1308,8 +1449,8 @@ class Xe {
|
|
|
1308
1449
|
*/
|
|
1309
1450
|
processRows(e) {
|
|
1310
1451
|
let o = [...e];
|
|
1311
|
-
for (const
|
|
1312
|
-
|
|
1452
|
+
for (const i of this.plugins)
|
|
1453
|
+
i.processRows && (o = i.processRows(o));
|
|
1313
1454
|
return o;
|
|
1314
1455
|
}
|
|
1315
1456
|
/**
|
|
@@ -1317,8 +1458,8 @@ class Xe {
|
|
|
1317
1458
|
*/
|
|
1318
1459
|
processColumns(e) {
|
|
1319
1460
|
let o = [...e];
|
|
1320
|
-
for (const
|
|
1321
|
-
|
|
1461
|
+
for (const i of this.plugins)
|
|
1462
|
+
i.processColumns && (o = i.processColumns(o));
|
|
1322
1463
|
return o;
|
|
1323
1464
|
}
|
|
1324
1465
|
/**
|
|
@@ -1359,33 +1500,50 @@ class Xe {
|
|
|
1359
1500
|
*/
|
|
1360
1501
|
getExtraHeightBefore(e) {
|
|
1361
1502
|
let o = 0;
|
|
1362
|
-
for (const
|
|
1363
|
-
typeof
|
|
1503
|
+
for (const i of this.plugins)
|
|
1504
|
+
typeof i.getExtraHeightBefore == "function" && (o += i.getExtraHeightBefore(e));
|
|
1364
1505
|
return o;
|
|
1365
1506
|
}
|
|
1366
1507
|
/**
|
|
1367
1508
|
* Adjust the virtualization start index based on plugin needs.
|
|
1368
1509
|
* Returns the minimum start index from all plugins.
|
|
1369
1510
|
*/
|
|
1370
|
-
adjustVirtualStart(e, o,
|
|
1371
|
-
let
|
|
1511
|
+
adjustVirtualStart(e, o, i) {
|
|
1512
|
+
let n = e;
|
|
1372
1513
|
for (const s of this.plugins)
|
|
1373
1514
|
if (typeof s.adjustVirtualStart == "function") {
|
|
1374
|
-
const r = s.adjustVirtualStart(e, o,
|
|
1375
|
-
r <
|
|
1515
|
+
const r = s.adjustVirtualStart(e, o, i);
|
|
1516
|
+
r < n && (n = r);
|
|
1376
1517
|
}
|
|
1377
|
-
return
|
|
1518
|
+
return n;
|
|
1378
1519
|
}
|
|
1379
1520
|
/**
|
|
1380
1521
|
* Execute renderRow hook on all plugins.
|
|
1381
1522
|
* Returns true if any plugin handled the row.
|
|
1382
1523
|
*/
|
|
1383
|
-
renderRow(e, o,
|
|
1384
|
-
for (const
|
|
1385
|
-
if (
|
|
1524
|
+
renderRow(e, o, i) {
|
|
1525
|
+
for (const n of this.plugins)
|
|
1526
|
+
if (n.renderRow?.(e, o, i))
|
|
1386
1527
|
return !0;
|
|
1387
1528
|
return !1;
|
|
1388
1529
|
}
|
|
1530
|
+
/**
|
|
1531
|
+
* Query all plugins with a generic query and collect responses.
|
|
1532
|
+
* This enables inter-plugin communication without the core knowing plugin-specific concepts.
|
|
1533
|
+
*
|
|
1534
|
+
* Common query types are defined in PLUGIN_QUERIES, but plugins can define their own.
|
|
1535
|
+
*
|
|
1536
|
+
* @param query - The query object containing type and context
|
|
1537
|
+
* @returns Array of non-undefined responses from plugins
|
|
1538
|
+
*/
|
|
1539
|
+
queryPlugins(e) {
|
|
1540
|
+
const o = [];
|
|
1541
|
+
for (const i of this.plugins) {
|
|
1542
|
+
const n = i.onPluginQuery?.(e);
|
|
1543
|
+
n !== void 0 && o.push(n);
|
|
1544
|
+
}
|
|
1545
|
+
return o;
|
|
1546
|
+
}
|
|
1389
1547
|
/**
|
|
1390
1548
|
* Execute onKeyDown hook on all plugins.
|
|
1391
1549
|
* Returns true if any plugin handled the event.
|
|
@@ -1463,16 +1621,23 @@ class Xe {
|
|
|
1463
1621
|
return !0;
|
|
1464
1622
|
return !1;
|
|
1465
1623
|
}
|
|
1624
|
+
// #endregion
|
|
1625
|
+
// #region Scroll Boundary Hooks
|
|
1466
1626
|
/**
|
|
1467
|
-
* Collect
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1627
|
+
* Collect horizontal scroll boundary offsets from all plugins.
|
|
1628
|
+
* Combines offsets from all plugins that report them.
|
|
1629
|
+
*
|
|
1630
|
+
* @param rowEl - The row element (optional, for calculating widths from rendered cells)
|
|
1631
|
+
* @param focusedCell - The currently focused cell element (optional, to determine if scrolling should be skipped)
|
|
1632
|
+
* @returns Combined left and right pixel offsets, plus skipScroll if any plugin requests it
|
|
1633
|
+
*/
|
|
1634
|
+
getHorizontalScrollOffsets(e, o) {
|
|
1635
|
+
let i = 0, n = 0, s = !1;
|
|
1636
|
+
for (const r of this.plugins) {
|
|
1637
|
+
const l = r.getHorizontalScrollOffsets?.(e, o);
|
|
1638
|
+
l && (i += l.left, n += l.right, l.skipScroll && (s = !0));
|
|
1474
1639
|
}
|
|
1475
|
-
return
|
|
1640
|
+
return { left: i, right: n, skipScroll: s };
|
|
1476
1641
|
}
|
|
1477
1642
|
// #endregion
|
|
1478
1643
|
// #region Shell Integration Hooks
|
|
@@ -1483,10 +1648,10 @@ class Xe {
|
|
|
1483
1648
|
getToolPanels() {
|
|
1484
1649
|
const e = [];
|
|
1485
1650
|
for (const o of this.plugins) {
|
|
1486
|
-
const
|
|
1487
|
-
|
|
1651
|
+
const i = o.getToolPanel?.();
|
|
1652
|
+
i && e.push({ plugin: o, panel: i });
|
|
1488
1653
|
}
|
|
1489
|
-
return e.sort((o,
|
|
1654
|
+
return e.sort((o, i) => (o.panel.order ?? 0) - (i.panel.order ?? 0));
|
|
1490
1655
|
}
|
|
1491
1656
|
/**
|
|
1492
1657
|
* Collect header contents from all plugins.
|
|
@@ -1495,115 +1660,120 @@ class Xe {
|
|
|
1495
1660
|
getHeaderContents() {
|
|
1496
1661
|
const e = [];
|
|
1497
1662
|
for (const o of this.plugins) {
|
|
1498
|
-
const
|
|
1499
|
-
|
|
1663
|
+
const i = o.getHeaderContent?.();
|
|
1664
|
+
i && e.push({ plugin: o, content: i });
|
|
1500
1665
|
}
|
|
1501
|
-
return e.sort((o,
|
|
1666
|
+
return e.sort((o, i) => (o.content.order ?? 0) - (i.content.order ?? 0));
|
|
1502
1667
|
}
|
|
1503
1668
|
// #endregion
|
|
1504
1669
|
}
|
|
1505
|
-
class
|
|
1670
|
+
class W extends HTMLElement {
|
|
1506
1671
|
// TODO: Rename to 'data-grid' when migration is complete
|
|
1507
1672
|
static tagName = "tbw-grid";
|
|
1508
|
-
static version = "0.2.
|
|
1509
|
-
|
|
1510
|
-
|
|
1673
|
+
static version = "0.2.4";
|
|
1674
|
+
// ---------------- Observed Attributes ----------------
|
|
1675
|
+
static get observedAttributes() {
|
|
1676
|
+
return ["rows", "columns", "grid-config", "fit-mode", "edit-on"];
|
|
1677
|
+
}
|
|
1678
|
+
#o;
|
|
1679
|
+
#A = !1;
|
|
1511
1680
|
// ---------------- Ready Promise ----------------
|
|
1512
|
-
|
|
1513
|
-
#
|
|
1681
|
+
#z;
|
|
1682
|
+
#M;
|
|
1514
1683
|
// #region Input Properties
|
|
1515
1684
|
// These backing fields store raw user input. They are merged into
|
|
1516
1685
|
// #effectiveConfig by #mergeEffectiveConfig(). Never read directly
|
|
1517
1686
|
// for rendering logic - always use effectiveConfig or derived state.
|
|
1518
|
-
#
|
|
1519
|
-
#
|
|
1687
|
+
#r = [];
|
|
1688
|
+
#l;
|
|
1520
1689
|
#p;
|
|
1521
|
-
#
|
|
1522
|
-
#
|
|
1690
|
+
#w;
|
|
1691
|
+
#g;
|
|
1523
1692
|
// #endregion
|
|
1524
1693
|
// #region Single Source of Truth
|
|
1525
1694
|
// All input sources converge here. This is the canonical config
|
|
1526
1695
|
// that all rendering and logic should read from.
|
|
1527
|
-
#
|
|
1696
|
+
#t = {};
|
|
1528
1697
|
#h = !1;
|
|
1529
1698
|
#f = 0;
|
|
1530
|
-
#
|
|
1531
|
-
#
|
|
1699
|
+
#m = null;
|
|
1700
|
+
#v = !1;
|
|
1532
1701
|
// Cached flag for plugin scroll handlers
|
|
1533
|
-
#
|
|
1702
|
+
#T;
|
|
1534
1703
|
// Cached hook to avoid closures
|
|
1535
|
-
#
|
|
1536
|
-
#
|
|
1704
|
+
#_ = !1;
|
|
1705
|
+
#E = null;
|
|
1706
|
+
#C = null;
|
|
1707
|
+
#y = null;
|
|
1537
1708
|
#R = null;
|
|
1538
|
-
#
|
|
1539
|
-
#x = null;
|
|
1540
|
-
#l;
|
|
1709
|
+
#a;
|
|
1541
1710
|
#b;
|
|
1542
1711
|
// ---------------- Plugin System ----------------
|
|
1543
|
-
#
|
|
1712
|
+
#e;
|
|
1544
1713
|
// ---------------- Column State ----------------
|
|
1545
|
-
#
|
|
1714
|
+
#L;
|
|
1546
1715
|
#d;
|
|
1547
1716
|
// ---------------- Shell State ----------------
|
|
1548
|
-
#
|
|
1549
|
-
#
|
|
1550
|
-
#
|
|
1717
|
+
#i = qe();
|
|
1718
|
+
#n;
|
|
1719
|
+
#S;
|
|
1551
1720
|
// #endregion
|
|
1552
1721
|
// #region Derived State
|
|
1553
1722
|
// _rows: result of applying plugin processRows hooks
|
|
1554
1723
|
_rows = [];
|
|
1555
1724
|
// _baseColumns: columns before plugin transformation (analogous to #rows for row processing)
|
|
1556
1725
|
// This is the source of truth for processColumns - plugins transform these
|
|
1557
|
-
#
|
|
1726
|
+
#P = [];
|
|
1558
1727
|
// _columns is a getter/setter that operates on effectiveConfig.columns
|
|
1559
1728
|
// This ensures effectiveConfig.columns is the single source of truth for columns
|
|
1560
1729
|
// _columns always contains ALL columns (including hidden)
|
|
1561
1730
|
get _columns() {
|
|
1562
|
-
return this.#
|
|
1731
|
+
return this.#t.columns ?? [];
|
|
1563
1732
|
}
|
|
1564
1733
|
set _columns(e) {
|
|
1565
|
-
this.#
|
|
1734
|
+
this.#t.columns = e;
|
|
1566
1735
|
}
|
|
1567
1736
|
// visibleColumns returns only visible columns for rendering
|
|
1568
1737
|
// This is what header/row rendering should use
|
|
1569
|
-
get
|
|
1738
|
+
get _visibleColumns() {
|
|
1570
1739
|
return this._columns.filter((e) => !e.hidden);
|
|
1571
1740
|
}
|
|
1572
1741
|
// #endregion
|
|
1573
|
-
// #region Runtime State
|
|
1574
|
-
//
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
__lightDomColumnsCache;
|
|
1582
|
-
__originalColumnNodes;
|
|
1583
|
-
headerRowEl;
|
|
1584
|
-
bodyEl;
|
|
1585
|
-
virtualization = {
|
|
1742
|
+
// #region Runtime State (Plugin-accessible)
|
|
1743
|
+
// DOM references
|
|
1744
|
+
_headerRowEl;
|
|
1745
|
+
_bodyEl;
|
|
1746
|
+
_rowPool = [];
|
|
1747
|
+
_resizeController;
|
|
1748
|
+
// Virtualization & scroll state
|
|
1749
|
+
_virtualization = {
|
|
1586
1750
|
enabled: !0,
|
|
1587
1751
|
rowHeight: 28,
|
|
1588
|
-
// Initial state - will recalculate after first render
|
|
1589
1752
|
bypassThreshold: 24,
|
|
1590
|
-
// Skip virtualization if <= this many rows (saves overhead)
|
|
1591
1753
|
start: 0,
|
|
1592
1754
|
end: 0,
|
|
1593
1755
|
container: null,
|
|
1594
|
-
// Faux scrollbar element
|
|
1595
1756
|
viewportEl: null,
|
|
1596
|
-
// Rows viewport for measuring visible height
|
|
1597
1757
|
totalHeightEl: null
|
|
1598
|
-
// Spacer for virtual height
|
|
1599
1758
|
};
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1759
|
+
// Focus & navigation
|
|
1760
|
+
_focusRow = 0;
|
|
1761
|
+
_focusCol = 0;
|
|
1762
|
+
// Sort state
|
|
1763
|
+
_sortState = null;
|
|
1764
|
+
// Edit state
|
|
1765
|
+
_activeEditRows = -1;
|
|
1766
|
+
_rowEditSnapshots = /* @__PURE__ */ new Map();
|
|
1606
1767
|
_changedRowIndices = /* @__PURE__ */ new Set();
|
|
1768
|
+
// Layout
|
|
1769
|
+
_gridTemplate = "";
|
|
1770
|
+
// #endregion
|
|
1771
|
+
// #region Implementation Details (Internal only)
|
|
1772
|
+
__rowRenderEpoch = 0;
|
|
1773
|
+
__didInitialAutoSize = !1;
|
|
1774
|
+
__lightDomColumnsCache;
|
|
1775
|
+
__originalColumnNodes;
|
|
1776
|
+
__originalOrder = [];
|
|
1607
1777
|
// #endregion
|
|
1608
1778
|
// ---------------- Public API Props (getters/setters) ----------------
|
|
1609
1779
|
// Getters return the EFFECTIVE value (after merging), not the raw input.
|
|
@@ -1613,297 +1783,327 @@ class I extends HTMLElement {
|
|
|
1613
1783
|
return this._rows;
|
|
1614
1784
|
}
|
|
1615
1785
|
set rows(e) {
|
|
1616
|
-
const o = this.#
|
|
1617
|
-
this.#
|
|
1786
|
+
const o = this.#r;
|
|
1787
|
+
this.#r = e, o !== e && this.#K();
|
|
1618
1788
|
}
|
|
1619
1789
|
/**
|
|
1620
1790
|
* Get the original unfiltered/unprocessed rows.
|
|
1621
1791
|
* Use this when you need access to all source data regardless of active filters.
|
|
1622
1792
|
*/
|
|
1623
1793
|
get sourceRows() {
|
|
1624
|
-
return this.#
|
|
1794
|
+
return this.#r;
|
|
1625
1795
|
}
|
|
1626
1796
|
get columns() {
|
|
1627
1797
|
return [...this._columns];
|
|
1628
1798
|
}
|
|
1629
1799
|
set columns(e) {
|
|
1630
|
-
const o = this.#
|
|
1631
|
-
this.#
|
|
1800
|
+
const o = this.#l;
|
|
1801
|
+
this.#l = e, o !== e && this.#j();
|
|
1632
1802
|
}
|
|
1633
1803
|
get gridConfig() {
|
|
1634
|
-
return this.#
|
|
1804
|
+
return this.#t;
|
|
1635
1805
|
}
|
|
1636
1806
|
set gridConfig(e) {
|
|
1637
1807
|
const o = this.#p;
|
|
1638
|
-
this.#p = e, o !== e && this.#
|
|
1808
|
+
this.#p = e, o !== e && this.#Y();
|
|
1639
1809
|
}
|
|
1640
1810
|
get fitMode() {
|
|
1641
|
-
return this.#
|
|
1811
|
+
return this.#t.fitMode ?? "stretch";
|
|
1642
1812
|
}
|
|
1643
1813
|
set fitMode(e) {
|
|
1644
|
-
const o = this.#
|
|
1645
|
-
this.#
|
|
1814
|
+
const o = this.#w;
|
|
1815
|
+
this.#w = e, o !== e && this.#U();
|
|
1646
1816
|
}
|
|
1647
1817
|
get editOn() {
|
|
1648
|
-
return this.#
|
|
1818
|
+
return this.#t.editOn;
|
|
1649
1819
|
}
|
|
1650
1820
|
set editOn(e) {
|
|
1651
|
-
const o = this.#
|
|
1652
|
-
this.#
|
|
1821
|
+
const o = this.#g;
|
|
1822
|
+
this.#g = e, o !== e && this.#X();
|
|
1653
1823
|
}
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1824
|
+
/**
|
|
1825
|
+
* Effective config accessor for internal modules and plugins.
|
|
1826
|
+
* Returns the merged config (single source of truth) before plugin processing.
|
|
1827
|
+
* Use this when you need the raw merged config (e.g., for column definitions including hidden).
|
|
1828
|
+
* @internal Plugin API
|
|
1829
|
+
*/
|
|
1657
1830
|
get effectiveConfig() {
|
|
1658
|
-
return this.#
|
|
1831
|
+
return this.#t;
|
|
1659
1832
|
}
|
|
1660
1833
|
/**
|
|
1661
1834
|
* Get the disconnect signal for event listener cleanup.
|
|
1662
1835
|
* This signal is aborted when the grid disconnects from the DOM.
|
|
1663
1836
|
* Plugins and internal code can use this for automatic listener cleanup.
|
|
1837
|
+
* @internal Plugin API
|
|
1664
1838
|
* @example
|
|
1665
1839
|
* element.addEventListener('click', handler, { signal: this.grid.disconnectSignal });
|
|
1666
1840
|
*/
|
|
1667
1841
|
get disconnectSignal() {
|
|
1668
|
-
return this.#
|
|
1842
|
+
return this.#a || (this.#a = new AbortController()), this.#a.signal;
|
|
1669
1843
|
}
|
|
1670
1844
|
constructor() {
|
|
1671
|
-
super(), this.#
|
|
1845
|
+
super(), this.#o = this.attachShadow({ mode: "open" }), this.#W(), this.#z = new Promise((e) => this.#M = e), this.#n = Ke(this.#i, {
|
|
1846
|
+
getShadow: () => this.#o,
|
|
1847
|
+
getShellConfig: () => this.#t?.shell,
|
|
1848
|
+
getAccordionIcons: () => ({
|
|
1849
|
+
expand: this.#t?.icons?.expand ?? H.expand,
|
|
1850
|
+
collapse: this.#t?.icons?.collapse ?? H.collapse
|
|
1851
|
+
}),
|
|
1852
|
+
emit: (e, o) => this.#s(e, o),
|
|
1853
|
+
refreshShellHeader: () => this.refreshShellHeader()
|
|
1854
|
+
});
|
|
1672
1855
|
}
|
|
1673
|
-
#
|
|
1856
|
+
#W() {
|
|
1674
1857
|
const e = new CSSStyleSheet();
|
|
1675
|
-
e.replaceSync(
|
|
1858
|
+
e.replaceSync(fe), this.#o.adoptedStyleSheets = [e];
|
|
1676
1859
|
}
|
|
1677
1860
|
// ---------------- Plugin System ----------------
|
|
1678
1861
|
/**
|
|
1679
1862
|
* Get a plugin instance by its class.
|
|
1680
1863
|
* Used by plugins for inter-plugin communication.
|
|
1864
|
+
* @internal Plugin API
|
|
1681
1865
|
*/
|
|
1682
1866
|
getPlugin(e) {
|
|
1683
|
-
return this.#
|
|
1867
|
+
return this.#e?.getPlugin(e);
|
|
1684
1868
|
}
|
|
1685
1869
|
/**
|
|
1686
1870
|
* Get a plugin instance by its name.
|
|
1687
1871
|
* Used for loose coupling between plugins (avoids static imports).
|
|
1872
|
+
* @internal Plugin API
|
|
1688
1873
|
*/
|
|
1689
1874
|
getPluginByName(e) {
|
|
1690
|
-
return this.#
|
|
1875
|
+
return this.#e?.getPluginByName(e);
|
|
1691
1876
|
}
|
|
1692
1877
|
/**
|
|
1693
1878
|
* Request a full re-render of the grid.
|
|
1694
1879
|
* Called by plugins when they need the grid to update.
|
|
1695
1880
|
* Note: This does NOT reset plugin state - just re-processes rows/columns and renders.
|
|
1881
|
+
* @internal Plugin API
|
|
1696
1882
|
*/
|
|
1697
1883
|
requestRender() {
|
|
1698
|
-
this.#
|
|
1884
|
+
this.#x(), this.#H(), q(this), N(this), this.refreshVirtualWindow(!0);
|
|
1699
1885
|
}
|
|
1700
1886
|
/**
|
|
1701
1887
|
* Request a lightweight style update without rebuilding DOM.
|
|
1702
1888
|
* Called by plugins when they only need to update CSS classes/styles.
|
|
1703
1889
|
* This runs all plugin afterRender hooks without rebuilding row/column DOM.
|
|
1890
|
+
* @internal Plugin API
|
|
1704
1891
|
*/
|
|
1705
1892
|
requestAfterRender() {
|
|
1706
|
-
this.#
|
|
1893
|
+
this.#e?.afterRender();
|
|
1707
1894
|
}
|
|
1708
1895
|
/**
|
|
1709
1896
|
* Initialize plugin system with instances from config.
|
|
1710
1897
|
* Plugins are class instances passed in gridConfig.plugins[].
|
|
1711
1898
|
*/
|
|
1712
|
-
#
|
|
1713
|
-
this.#
|
|
1714
|
-
const e = this.#
|
|
1715
|
-
this.#
|
|
1899
|
+
#N() {
|
|
1900
|
+
this.#e = new Ye(this);
|
|
1901
|
+
const e = this.#t?.plugins, o = Array.isArray(e) ? e : [];
|
|
1902
|
+
this.#e.attachAll(o);
|
|
1716
1903
|
}
|
|
1717
1904
|
/**
|
|
1718
1905
|
* Inject all plugin styles into the shadow DOM.
|
|
1719
1906
|
* Must be called after #render() since innerHTML wipes existing content.
|
|
1720
1907
|
*/
|
|
1721
|
-
#
|
|
1722
|
-
const e = this.#
|
|
1908
|
+
#D() {
|
|
1909
|
+
const e = this.#e?.getAllStyles() ?? "";
|
|
1723
1910
|
if (e) {
|
|
1724
1911
|
const o = document.createElement("style");
|
|
1725
|
-
o.setAttribute("data-plugin", "all"), o.textContent = e, this.#
|
|
1912
|
+
o.setAttribute("data-plugin", "all"), o.textContent = e, this.#o.appendChild(o);
|
|
1726
1913
|
}
|
|
1727
1914
|
}
|
|
1728
1915
|
/**
|
|
1729
1916
|
* Update plugins when grid config changes.
|
|
1730
1917
|
* With class-based plugins, we need to detach old and attach new.
|
|
1731
1918
|
*/
|
|
1732
|
-
#
|
|
1733
|
-
this.#
|
|
1919
|
+
#q() {
|
|
1920
|
+
this.#e && this.#e.detachAll(), this.#N(), this.#D(), this.#v = this.#e?.getAll().some((e) => e.onScroll) ?? !1;
|
|
1734
1921
|
}
|
|
1735
1922
|
/**
|
|
1736
1923
|
* Clean up plugin states when grid disconnects.
|
|
1737
1924
|
*/
|
|
1738
|
-
#
|
|
1739
|
-
this.#
|
|
1925
|
+
#V() {
|
|
1926
|
+
this.#e?.detachAll();
|
|
1740
1927
|
}
|
|
1741
1928
|
/**
|
|
1742
1929
|
* Collect tool panels and header content from all plugins.
|
|
1743
1930
|
* Called after plugins are attached but before render.
|
|
1744
1931
|
*/
|
|
1745
|
-
#
|
|
1746
|
-
if (!this.#
|
|
1747
|
-
const e = this.#
|
|
1748
|
-
for (const { panel:
|
|
1749
|
-
this.#
|
|
1750
|
-
const o = this.#
|
|
1751
|
-
for (const { content:
|
|
1752
|
-
this.#
|
|
1932
|
+
#G() {
|
|
1933
|
+
if (!this.#e) return;
|
|
1934
|
+
const e = this.#e.getToolPanels();
|
|
1935
|
+
for (const { panel: i } of e)
|
|
1936
|
+
this.#i.toolPanels.has(i.id) || this.#i.toolPanels.set(i.id, i);
|
|
1937
|
+
const o = this.#e.getHeaderContents();
|
|
1938
|
+
for (const { content: i } of o)
|
|
1939
|
+
this.#i.headerContents.has(i.id) || this.#i.headerContents.set(i.id, i);
|
|
1753
1940
|
}
|
|
1754
1941
|
// ---------------- Lifecycle ----------------
|
|
1755
1942
|
connectedCallback() {
|
|
1756
|
-
this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version",
|
|
1943
|
+
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.#N(), this.#G(), this.#A || (this.#$(), this.#D(), this.#A = !0), this.#B();
|
|
1757
1944
|
}
|
|
1758
1945
|
disconnectedCallback() {
|
|
1759
|
-
this.#
|
|
1946
|
+
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
1947
|
}
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1948
|
+
/**
|
|
1949
|
+
* Handle HTML attribute changes.
|
|
1950
|
+
* Only processes attribute values when SET (non-null).
|
|
1951
|
+
* Removing an attribute does NOT clear JS-set properties.
|
|
1952
|
+
*/
|
|
1953
|
+
attributeChangedCallback(e, o, i) {
|
|
1954
|
+
if (o === i || !i || i === "null" || i === "undefined") return;
|
|
1955
|
+
const s = {
|
|
1956
|
+
rows: "rows",
|
|
1957
|
+
columns: "columns",
|
|
1958
|
+
"grid-config": "gridConfig",
|
|
1959
|
+
"fit-mode": "fitMode",
|
|
1960
|
+
"edit-on": "editOn"
|
|
1961
|
+
}[e];
|
|
1962
|
+
if (s)
|
|
1963
|
+
if (e === "rows" || e === "columns" || e === "grid-config")
|
|
1964
|
+
try {
|
|
1965
|
+
this[s] = JSON.parse(i);
|
|
1966
|
+
} catch {
|
|
1967
|
+
console.warn(`[tbw-grid] Invalid JSON for '${e}' attribute:`, i);
|
|
1968
|
+
}
|
|
1969
|
+
else
|
|
1970
|
+
this[s] = i;
|
|
1971
|
+
}
|
|
1972
|
+
#B() {
|
|
1973
|
+
const o = this.#o.querySelector(".tbw-grid-content") ?? this.#o.querySelector(".tbw-grid-root");
|
|
1974
|
+
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) {
|
|
1975
|
+
he(this.#o, this.#i), Ge(this.#o, this.#t?.shell, this.#i);
|
|
1976
|
+
const l = this.#t?.shell?.toolPanel?.defaultOpen;
|
|
1977
|
+
l && this.#i.toolPanels.has(l) && (this.openToolPanel(), this.#i.expandedSections.add(l));
|
|
1767
1978
|
}
|
|
1768
1979
|
this.setAttribute("data-upgraded", ""), this.#h = !0;
|
|
1769
|
-
const
|
|
1770
|
-
this.#c(), this.addEventListener("keydown", (
|
|
1980
|
+
const i = this.disconnectSignal;
|
|
1981
|
+
this.#c(), this.addEventListener("keydown", (l) => Oe(this, l), { signal: i }), document.addEventListener(
|
|
1771
1982
|
"keydown",
|
|
1772
|
-
(
|
|
1773
|
-
|
|
1983
|
+
(l) => {
|
|
1984
|
+
l.key === "Escape" && this._activeEditRows !== -1 && M(this, this._activeEditRows, !0);
|
|
1774
1985
|
},
|
|
1775
|
-
{ capture: !0, signal:
|
|
1986
|
+
{ capture: !0, signal: i }
|
|
1776
1987
|
), document.addEventListener(
|
|
1777
1988
|
"mousedown",
|
|
1778
|
-
(
|
|
1779
|
-
if (this.
|
|
1780
|
-
const
|
|
1781
|
-
!
|
|
1989
|
+
(l) => {
|
|
1990
|
+
if (this._activeEditRows === -1) return;
|
|
1991
|
+
const a = this.findRenderedRowElement(this._activeEditRows);
|
|
1992
|
+
!a || (l.composedPath && l.composedPath() || []).includes(a) || M(this, this._activeEditRows, !1);
|
|
1782
1993
|
},
|
|
1783
|
-
{ signal:
|
|
1994
|
+
{ signal: i }
|
|
1784
1995
|
);
|
|
1785
|
-
const
|
|
1786
|
-
if (this.
|
|
1787
|
-
|
|
1996
|
+
const n = o?.querySelector(".faux-vscroll"), s = o?.querySelector(".rows");
|
|
1997
|
+
if (this._virtualization.container = n ?? this, this.#v = this.#e?.getAll().some((l) => l.onScroll) ?? !1, n && s) {
|
|
1998
|
+
n.addEventListener(
|
|
1788
1999
|
"scroll",
|
|
1789
2000
|
() => {
|
|
1790
|
-
if (!this.
|
|
1791
|
-
const
|
|
1792
|
-
s.style.transform = `translateY(${
|
|
1793
|
-
this.#f = 0, this.#
|
|
2001
|
+
if (!this._virtualization.enabled && !this.#v) return;
|
|
2002
|
+
const d = n.scrollTop, f = this._virtualization.rowHeight, h = Math.floor(d / f), p = h - h % 2, c = -(d - p * f);
|
|
2003
|
+
s.style.transform = `translateY(${c}px)`, this.#m = d, this.#f || (this.#f = requestAnimationFrame(() => {
|
|
2004
|
+
this.#f = 0, this.#m !== null && (this.#Z(this.#m), this.#m = null);
|
|
1794
2005
|
}));
|
|
1795
2006
|
},
|
|
1796
|
-
{ passive: !0, signal:
|
|
2007
|
+
{ passive: !0, signal: i }
|
|
1797
2008
|
);
|
|
1798
|
-
const
|
|
1799
|
-
|
|
2009
|
+
const l = this.#o.querySelector(".tbw-grid-content"), a = this.#o.querySelector(".tbw-scroll-area");
|
|
2010
|
+
l && (l.addEventListener(
|
|
1800
2011
|
"wheel",
|
|
1801
|
-
(
|
|
1802
|
-
|
|
2012
|
+
(d) => {
|
|
2013
|
+
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
2014
|
},
|
|
1804
|
-
{ passive: !1, signal:
|
|
1805
|
-
),
|
|
2015
|
+
{ passive: !1, signal: i }
|
|
2016
|
+
), l.addEventListener(
|
|
1806
2017
|
"touchstart",
|
|
1807
|
-
(
|
|
1808
|
-
|
|
2018
|
+
(d) => {
|
|
2019
|
+
d.touches.length === 1 && (this.#E = d.touches[0].clientY, this.#C = d.touches[0].clientX, this.#y = n.scrollTop, this.#R = a?.scrollLeft ?? 0);
|
|
1809
2020
|
},
|
|
1810
|
-
{ passive: !0, signal:
|
|
1811
|
-
),
|
|
2021
|
+
{ passive: !0, signal: i }
|
|
2022
|
+
), l.addEventListener(
|
|
1812
2023
|
"touchmove",
|
|
1813
|
-
(
|
|
1814
|
-
if (
|
|
1815
|
-
const
|
|
1816
|
-
|
|
2024
|
+
(d) => {
|
|
2025
|
+
if (d.touches.length === 1 && this.#E !== null && this.#C !== null && this.#y !== null && this.#R !== null) {
|
|
2026
|
+
const f = this.#E - d.touches[0].clientY, h = this.#C - d.touches[0].clientX;
|
|
2027
|
+
n.scrollTop = this.#y + f, a && (a.scrollLeft = this.#R + h), d.preventDefault();
|
|
1817
2028
|
}
|
|
1818
2029
|
},
|
|
1819
|
-
{ passive: !1, signal:
|
|
1820
|
-
),
|
|
2030
|
+
{ passive: !1, signal: i }
|
|
2031
|
+
), l.addEventListener(
|
|
1821
2032
|
"touchend",
|
|
1822
2033
|
() => {
|
|
1823
|
-
this.#
|
|
2034
|
+
this.#E = null, this.#C = null, this.#y = null, this.#R = null;
|
|
1824
2035
|
},
|
|
1825
|
-
{ passive: !0, signal:
|
|
2036
|
+
{ passive: !0, signal: i }
|
|
1826
2037
|
));
|
|
1827
2038
|
}
|
|
1828
|
-
this.
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
2039
|
+
this._resizeController = De(this), this.#o.addEventListener("mousedown", (l) => this.#J(l), { signal: i }), document.addEventListener("mousemove", (l) => this.#Q(l), { signal: i }), document.addEventListener("mouseup", (l) => this.#ee(l), { signal: i }), this._virtualization.enabled && requestAnimationFrame(() => this.refreshVirtualWindow(!0));
|
|
2040
|
+
const r = this.#t.rowHeight;
|
|
2041
|
+
r && r > 0 ? this._virtualization.rowHeight = r : requestAnimationFrame(() => {
|
|
2042
|
+
const l = this._bodyEl?.querySelector(".data-grid-row");
|
|
2043
|
+
if (l) {
|
|
2044
|
+
const a = l.getBoundingClientRect().height;
|
|
2045
|
+
a > 0 && (this._virtualization.rowHeight = a, this.refreshVirtualWindow(!0));
|
|
1833
2046
|
}
|
|
1834
|
-
}), this.
|
|
2047
|
+
}), this._virtualization.viewportEl && (this.#b = new ResizeObserver(() => {
|
|
1835
2048
|
this.#f || (this.#f = requestAnimationFrame(() => {
|
|
1836
|
-
this.#f = 0, this.refreshVirtualWindow(!0);
|
|
2049
|
+
this.#f = 0, this.refreshVirtualWindow(!0), z(this);
|
|
1837
2050
|
}));
|
|
1838
|
-
}), this.#b.observe(this.
|
|
2051
|
+
}), this.#b.observe(this._virtualization.viewportEl)), queueMicrotask(() => this.#F()), requestAnimationFrame(() => requestAnimationFrame(() => this.#M?.()));
|
|
1839
2052
|
}
|
|
1840
2053
|
// ---------------- Event Emitters ----------------
|
|
1841
|
-
#
|
|
2054
|
+
#s(e, o) {
|
|
1842
2055
|
this.dispatchEvent(new CustomEvent(e, { detail: o, bubbles: !0, composed: !0 }));
|
|
1843
2056
|
}
|
|
1844
|
-
|
|
1845
|
-
this.#
|
|
2057
|
+
_emitCellCommit(e) {
|
|
2058
|
+
this.#s("cell-commit", e);
|
|
1846
2059
|
}
|
|
1847
|
-
|
|
1848
|
-
this.#
|
|
2060
|
+
_emitRowCommit(e) {
|
|
2061
|
+
this.#s("row-commit", e);
|
|
1849
2062
|
}
|
|
1850
|
-
|
|
1851
|
-
this.#
|
|
2063
|
+
_emitSortChange(e) {
|
|
2064
|
+
this.#s("sort-change", e);
|
|
1852
2065
|
}
|
|
1853
|
-
|
|
1854
|
-
this.#
|
|
2066
|
+
_emitColumnResize(e) {
|
|
2067
|
+
this.#s("column-resize", e);
|
|
1855
2068
|
}
|
|
1856
|
-
|
|
1857
|
-
this.#
|
|
2069
|
+
_emitActivateCell(e) {
|
|
2070
|
+
this.#s("activate-cell", e);
|
|
1858
2071
|
}
|
|
1859
2072
|
/** Update ARIA selection attributes on rendered rows/cells */
|
|
1860
|
-
#
|
|
1861
|
-
this.
|
|
1862
|
-
const
|
|
1863
|
-
o.setAttribute("aria-selected", String(
|
|
1864
|
-
s.setAttribute("aria-selected", String(
|
|
2073
|
+
#F() {
|
|
2074
|
+
this._bodyEl?.querySelectorAll(".data-grid-row")?.forEach((o, i) => {
|
|
2075
|
+
const n = i === this._focusRow;
|
|
2076
|
+
o.setAttribute("aria-selected", String(n)), o.querySelectorAll(".cell").forEach((s, r) => {
|
|
2077
|
+
s.setAttribute("aria-selected", String(n && r === this._focusCol));
|
|
1865
2078
|
});
|
|
1866
2079
|
});
|
|
1867
2080
|
}
|
|
1868
2081
|
// ---------------- Watch Handlers ----------------
|
|
1869
|
-
#
|
|
2082
|
+
#U() {
|
|
1870
2083
|
if (!this.#h) return;
|
|
1871
|
-
this.#u(), this.#
|
|
2084
|
+
this.#u(), this.#t.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, te(this)) : (this._columns.forEach((o) => {
|
|
1872
2085
|
!o.__userResized && o.__autoSized && delete o.width;
|
|
1873
|
-
}), this
|
|
1874
|
-
}
|
|
1875
|
-
#Q() {
|
|
1876
|
-
this.#h && (this.#u(), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
|
|
2086
|
+
}), N(this));
|
|
1877
2087
|
}
|
|
1878
|
-
#
|
|
1879
|
-
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);
|
|
2088
|
+
#X() {
|
|
2089
|
+
this.#h && (this.#u(), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
|
|
1890
2090
|
}
|
|
1891
|
-
#
|
|
1892
|
-
|
|
2091
|
+
#K() {
|
|
2092
|
+
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
2093
|
}
|
|
1894
|
-
|
|
1895
|
-
|
|
2094
|
+
#j() {
|
|
2095
|
+
Y(this), this.#h && (this.#u(), this.#c());
|
|
1896
2096
|
}
|
|
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 = [...
|
|
2097
|
+
#Y() {
|
|
2098
|
+
this.#h && (this.#u(), this.#q(), this.#x(), this.#H(), q(this), N(this), this.refreshVirtualWindow(!0));
|
|
2099
|
+
}
|
|
2100
|
+
#H() {
|
|
2101
|
+
if (this.#e) {
|
|
2102
|
+
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]);
|
|
2103
|
+
if (n !== o) {
|
|
2104
|
+
const s = new Map(n.map((l, a) => [l.field, { col: l, order: a }]));
|
|
2105
|
+
if (!o.some((l) => s.has(l.field)) && n.length > 0)
|
|
2106
|
+
this._columns = [...n, ...i];
|
|
1907
2107
|
else {
|
|
1908
2108
|
const l = e.map((a) => {
|
|
1909
2109
|
if (a.hidden) return a;
|
|
@@ -1916,14 +2116,10 @@ class I extends HTMLElement {
|
|
|
1916
2116
|
this._columns = [...e];
|
|
1917
2117
|
}
|
|
1918
2118
|
}
|
|
1919
|
-
/** Execute all plugin afterRender hooks */
|
|
1920
|
-
#w() {
|
|
1921
|
-
this.#t?.afterRender();
|
|
1922
|
-
}
|
|
1923
2119
|
/** Recompute row model via plugin hooks (grouping, tree, filtering, etc.). */
|
|
1924
|
-
#
|
|
1925
|
-
|
|
1926
|
-
const e = Array.isArray(this.#
|
|
2120
|
+
#x() {
|
|
2121
|
+
Y(this);
|
|
2122
|
+
const e = Array.isArray(this.#r) ? [...this.#r] : [], o = this.#e?.processRows(e) ?? e;
|
|
1927
2123
|
this._rows = o;
|
|
1928
2124
|
}
|
|
1929
2125
|
/**
|
|
@@ -1947,73 +2143,64 @@ class I extends HTMLElement {
|
|
|
1947
2143
|
#u() {
|
|
1948
2144
|
const e = this.#p ? { ...this.#p } : {};
|
|
1949
2145
|
let o = Array.isArray(e.columns) ? [...e.columns] : [];
|
|
1950
|
-
const
|
|
1951
|
-
...
|
|
2146
|
+
const i = (this.__lightDomColumnsCache || []).map((n) => ({
|
|
2147
|
+
...n
|
|
1952
2148
|
}));
|
|
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),
|
|
2149
|
+
if (i.length) {
|
|
2150
|
+
const n = {};
|
|
2151
|
+
o.forEach((s) => n[s.field] = s), i.forEach((s) => {
|
|
2152
|
+
const r = n[s.field];
|
|
2153
|
+
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
2154
|
});
|
|
1959
2155
|
}
|
|
1960
|
-
if (this.#
|
|
2156
|
+
if (this.#l && this.#l.length && (o = [...this.#l]), (!o || o.length === 0) && this._rows.length && (o = de(this._rows).columns), o.length) {
|
|
1961
2157
|
o.forEach((r) => {
|
|
1962
2158
|
r.sortable === void 0 && (r.sortable = !0), r.resizable === void 0 && (r.resizable = !0);
|
|
1963
2159
|
});
|
|
1964
|
-
const
|
|
1965
|
-
|
|
2160
|
+
const n = this.#t.columns;
|
|
2161
|
+
n?.some((r) => r.__compiledView || r.__compiledEditor) ? e.columns = n : e.columns = o;
|
|
1966
2162
|
} else {
|
|
1967
|
-
const
|
|
1968
|
-
|
|
2163
|
+
const n = this.#t.columns;
|
|
2164
|
+
n?.some((s) => s.__compiledView || s.__compiledEditor) && (e.columns = n);
|
|
1969
2165
|
}
|
|
1970
|
-
this.#
|
|
1971
|
-
|
|
2166
|
+
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) => {
|
|
2167
|
+
n.width == null && (n.width = 80);
|
|
1972
2168
|
});
|
|
1973
2169
|
}
|
|
1974
2170
|
// ---------------- 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);
|
|
2171
|
+
#O(e, o, i = this.__rowRenderEpoch) {
|
|
2172
|
+
this.#T || (this.#T = (n, s, r) => this.#e?.renderRow(n, s, r) ?? !1), Me(this, e, o, i, this.#T);
|
|
1983
2173
|
}
|
|
1984
2174
|
// ---------------- Core Helpers ----------------
|
|
1985
2175
|
#c() {
|
|
1986
|
-
if (!this.isConnected || !this.
|
|
2176
|
+
if (!this.isConnected || !this._headerRowEl || !this._bodyEl)
|
|
1987
2177
|
return;
|
|
1988
|
-
const e = this.#p?.columns || this.#
|
|
2178
|
+
const e = this.#p?.columns || this.#l || [];
|
|
1989
2179
|
if (e.length) {
|
|
1990
|
-
const
|
|
2180
|
+
const i = new Map(this._columns.filter((s) => s.hidden).map((s) => [s.field, !0])), n = e.map((s) => ({
|
|
1991
2181
|
...s,
|
|
1992
|
-
hidden:
|
|
2182
|
+
hidden: i.get(s.field) ?? s.hidden
|
|
1993
2183
|
}));
|
|
1994
|
-
this._columns =
|
|
2184
|
+
this._columns = n;
|
|
1995
2185
|
}
|
|
1996
|
-
if (this
|
|
1997
|
-
const
|
|
1998
|
-
this.#d = void 0, this.#
|
|
2186
|
+
if (Pe(this), this.#u(), this.#q(), this.#P = [...this._columns], this.#x(), this.#H(), this.#d) {
|
|
2187
|
+
const i = this.#d;
|
|
2188
|
+
this.#d = void 0, this.#I(i);
|
|
1999
2189
|
}
|
|
2000
|
-
this
|
|
2190
|
+
q(this), N(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
2191
|
}
|
|
2002
2192
|
/** 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 = !
|
|
2193
|
+
#I(e) {
|
|
2194
|
+
const o = this.#t.columns ?? [], i = this.#e?.getAll() ?? [];
|
|
2195
|
+
be(this, e, o, i);
|
|
2196
|
+
for (const n of e.columns) {
|
|
2197
|
+
const s = o.find((r) => r.field === n.field);
|
|
2198
|
+
s && (s.hidden = !n.visible);
|
|
2009
2199
|
}
|
|
2010
2200
|
}
|
|
2011
|
-
#
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
#re(e) {
|
|
2015
|
-
if (this.refreshVirtualWindow(!1), this.#t?.onScrollRender(), this.#C) {
|
|
2016
|
-
const o = this.virtualization.container, n = {
|
|
2201
|
+
#Z(e) {
|
|
2202
|
+
if (this.refreshVirtualWindow(!1), this.#e?.onScrollRender(), this.#v) {
|
|
2203
|
+
const o = this._virtualization.container, i = {
|
|
2017
2204
|
scrollTop: e,
|
|
2018
2205
|
scrollLeft: o?.scrollLeft ?? 0,
|
|
2019
2206
|
scrollHeight: o?.scrollHeight ?? 0,
|
|
@@ -2022,79 +2209,112 @@ class I extends HTMLElement {
|
|
|
2022
2209
|
clientWidth: o?.clientWidth ?? 0,
|
|
2023
2210
|
originalEvent: new Event("scroll")
|
|
2024
2211
|
};
|
|
2025
|
-
this.#
|
|
2212
|
+
this.#e?.onScroll(i);
|
|
2026
2213
|
}
|
|
2027
2214
|
}
|
|
2215
|
+
/**
|
|
2216
|
+
* Find the header row element in the shadow DOM.
|
|
2217
|
+
* Used by plugins that need to access header cells for styling or measurement.
|
|
2218
|
+
* @internal Plugin API
|
|
2219
|
+
*/
|
|
2028
2220
|
findHeaderRow() {
|
|
2029
|
-
return this.#
|
|
2221
|
+
return this.#o.querySelector(".header-row");
|
|
2030
2222
|
}
|
|
2223
|
+
/**
|
|
2224
|
+
* Find a rendered row element by its data row index.
|
|
2225
|
+
* Returns null if the row is not currently rendered (virtualized out of view).
|
|
2226
|
+
* Used by plugins that need to access specific row elements for styling or measurement.
|
|
2227
|
+
* @internal Plugin API
|
|
2228
|
+
* @param rowIndex - The data row index (not the DOM position)
|
|
2229
|
+
*/
|
|
2031
2230
|
findRenderedRowElement(e) {
|
|
2032
|
-
return Array.from(this.
|
|
2033
|
-
const
|
|
2034
|
-
return
|
|
2231
|
+
return Array.from(this._bodyEl.querySelectorAll(".data-grid-row")).find((o) => {
|
|
2232
|
+
const i = o.querySelector(".cell[data-row]");
|
|
2233
|
+
return i && Number(i.getAttribute("data-row")) === e;
|
|
2035
2234
|
}) || null;
|
|
2036
2235
|
}
|
|
2037
2236
|
/**
|
|
2038
2237
|
* Dispatch a cell click event to the plugin system.
|
|
2039
2238
|
* Returns true if any plugin handled the event.
|
|
2040
2239
|
*/
|
|
2041
|
-
|
|
2042
|
-
const s = this._rows[o], r = this._columns[
|
|
2240
|
+
_dispatchCellClick(e, o, i, n) {
|
|
2241
|
+
const s = this._rows[o], r = this._columns[i];
|
|
2043
2242
|
if (!s || !r) return !1;
|
|
2044
2243
|
const l = {
|
|
2045
2244
|
row: s,
|
|
2046
2245
|
rowIndex: o,
|
|
2047
|
-
colIndex:
|
|
2246
|
+
colIndex: i,
|
|
2048
2247
|
field: r.field,
|
|
2049
2248
|
value: s[r.field],
|
|
2050
|
-
cellEl:
|
|
2249
|
+
cellEl: n,
|
|
2051
2250
|
originalEvent: e
|
|
2052
2251
|
};
|
|
2053
|
-
return this.#
|
|
2252
|
+
return this.#e?.onCellClick(l) ?? !1;
|
|
2054
2253
|
}
|
|
2055
2254
|
/**
|
|
2056
2255
|
* Dispatch a header click event to the plugin system.
|
|
2057
2256
|
* Returns true if any plugin handled the event.
|
|
2058
2257
|
*/
|
|
2059
|
-
|
|
2060
|
-
const
|
|
2061
|
-
if (!
|
|
2258
|
+
_dispatchHeaderClick(e, o, i) {
|
|
2259
|
+
const n = this._columns[o];
|
|
2260
|
+
if (!n) return !1;
|
|
2062
2261
|
const s = {
|
|
2063
2262
|
colIndex: o,
|
|
2064
|
-
field:
|
|
2065
|
-
column:
|
|
2066
|
-
headerEl:
|
|
2263
|
+
field: n.field,
|
|
2264
|
+
column: n,
|
|
2265
|
+
headerEl: i,
|
|
2067
2266
|
originalEvent: e
|
|
2068
2267
|
};
|
|
2069
|
-
return this.#
|
|
2268
|
+
return this.#e?.onHeaderClick(s) ?? !1;
|
|
2070
2269
|
}
|
|
2071
2270
|
/**
|
|
2072
2271
|
* Dispatch a keyboard event to the plugin system.
|
|
2073
2272
|
* Returns true if any plugin handled the event.
|
|
2074
2273
|
*/
|
|
2075
|
-
|
|
2076
|
-
return this.#
|
|
2274
|
+
_dispatchKeyDown(e) {
|
|
2275
|
+
return this.#e?.onKeyDown(e) ?? !1;
|
|
2276
|
+
}
|
|
2277
|
+
/**
|
|
2278
|
+
* Get horizontal scroll boundary offsets from plugins.
|
|
2279
|
+
* Used by keyboard navigation to ensure focused cells are fully visible
|
|
2280
|
+
* when plugins like pinned columns obscure part of the scroll area.
|
|
2281
|
+
*/
|
|
2282
|
+
_getHorizontalScrollOffsets(e, o) {
|
|
2283
|
+
return this.#e?.getHorizontalScrollOffsets(e, o) ?? { left: 0, right: 0 };
|
|
2284
|
+
}
|
|
2285
|
+
/**
|
|
2286
|
+
* Query all plugins with a generic query and collect responses.
|
|
2287
|
+
* This enables inter-plugin communication without the core knowing plugin-specific concepts.
|
|
2288
|
+
* @internal Plugin API
|
|
2289
|
+
*
|
|
2290
|
+
* @example
|
|
2291
|
+
* // Check if any plugin vetoes moving a column
|
|
2292
|
+
* const responses = grid.queryPlugins<boolean>({ type: PLUGIN_QUERIES.CAN_MOVE_COLUMN, context: column });
|
|
2293
|
+
* const canMove = !responses.includes(false);
|
|
2294
|
+
*/
|
|
2295
|
+
queryPlugins(e) {
|
|
2296
|
+
return this.#e?.queryPlugins(e) ?? [];
|
|
2077
2297
|
}
|
|
2078
2298
|
/**
|
|
2079
2299
|
* Build a CellMouseEvent from a native MouseEvent.
|
|
2080
2300
|
* Extracts cell/row information from the event target.
|
|
2081
2301
|
*/
|
|
2082
|
-
#
|
|
2083
|
-
let
|
|
2084
|
-
const
|
|
2085
|
-
if (
|
|
2086
|
-
const u = this.#
|
|
2087
|
-
u && (
|
|
2302
|
+
#k(e, o) {
|
|
2303
|
+
let i = null;
|
|
2304
|
+
const n = e.composedPath?.();
|
|
2305
|
+
if (n && n.length > 0 ? i = n[0] : i = e.target, i && !this.#o.contains(i)) {
|
|
2306
|
+
const u = this.#o.elementFromPoint(e.clientX, e.clientY);
|
|
2307
|
+
u && (i = u);
|
|
2088
2308
|
}
|
|
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 && (
|
|
2309
|
+
const s = i?.closest?.("[data-col]"), r = i?.closest?.(".data-grid-row"), l = i?.closest?.(".header-row");
|
|
2310
|
+
let a, d, f, h, p, c;
|
|
2311
|
+
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
2312
|
type: o,
|
|
2093
|
-
row:
|
|
2313
|
+
row: f,
|
|
2094
2314
|
rowIndex: a !== void 0 && a >= 0 ? a : void 0,
|
|
2095
2315
|
colIndex: d !== void 0 && d >= 0 ? d : void 0,
|
|
2096
|
-
field:
|
|
2097
|
-
value:
|
|
2316
|
+
field: h,
|
|
2317
|
+
value: p,
|
|
2098
2318
|
column: c,
|
|
2099
2319
|
originalEvent: e,
|
|
2100
2320
|
cellElement: s ?? void 0,
|
|
@@ -2106,25 +2326,25 @@ class I extends HTMLElement {
|
|
|
2106
2326
|
/**
|
|
2107
2327
|
* Handle mousedown events and dispatch to plugin system.
|
|
2108
2328
|
*/
|
|
2109
|
-
#
|
|
2110
|
-
const o = this.#
|
|
2111
|
-
(this.#
|
|
2329
|
+
#J(e) {
|
|
2330
|
+
const o = this.#k(e, "mousedown");
|
|
2331
|
+
(this.#e?.onCellMouseDown(o) ?? !1) && (this.#_ = !0);
|
|
2112
2332
|
}
|
|
2113
2333
|
/**
|
|
2114
2334
|
* Handle mousemove events (only when dragging).
|
|
2115
2335
|
*/
|
|
2116
|
-
#
|
|
2117
|
-
if (!this.#
|
|
2118
|
-
const o = this.#
|
|
2119
|
-
this.#
|
|
2336
|
+
#Q(e) {
|
|
2337
|
+
if (!this.#_) return;
|
|
2338
|
+
const o = this.#k(e, "mousemove");
|
|
2339
|
+
this.#e?.onCellMouseMove(o);
|
|
2120
2340
|
}
|
|
2121
2341
|
/**
|
|
2122
2342
|
* Handle mouseup events.
|
|
2123
2343
|
*/
|
|
2124
|
-
#
|
|
2125
|
-
if (!this.#
|
|
2126
|
-
const o = this.#
|
|
2127
|
-
this.#
|
|
2344
|
+
#ee(e) {
|
|
2345
|
+
if (!this.#_) return;
|
|
2346
|
+
const o = this.#k(e, "mouseup");
|
|
2347
|
+
this.#e?.onCellMouseUp(o), this.#_ = !1;
|
|
2128
2348
|
}
|
|
2129
2349
|
// API consumed by internal utils (rows.ts)
|
|
2130
2350
|
get changedRows() {
|
|
@@ -2134,21 +2354,21 @@ class I extends HTMLElement {
|
|
|
2134
2354
|
return Array.from(this._changedRowIndices);
|
|
2135
2355
|
}
|
|
2136
2356
|
async resetChangedRows(e) {
|
|
2137
|
-
this._changedRowIndices.clear(), e || this.#
|
|
2357
|
+
this._changedRowIndices.clear(), e || this.#s("changed-rows-reset", { rows: this.changedRows, indices: this.changedRowIndices }), this._rowPool.forEach((o) => o.classList.remove("changed"));
|
|
2138
2358
|
}
|
|
2139
2359
|
async beginBulkEdit(e) {
|
|
2140
2360
|
if (!this._columns.some((s) => s.editable)) return;
|
|
2141
|
-
const
|
|
2142
|
-
this
|
|
2143
|
-
const
|
|
2144
|
-
|
|
2145
|
-
const l = this.
|
|
2361
|
+
const i = this._rows[e];
|
|
2362
|
+
B(this, e, i);
|
|
2363
|
+
const n = this.findRenderedRowElement?.(e);
|
|
2364
|
+
n && (Array.from(n.children).forEach((s, r) => {
|
|
2365
|
+
const l = this._visibleColumns[r];
|
|
2146
2366
|
if (l?.editable) {
|
|
2147
2367
|
const a = s;
|
|
2148
|
-
a.classList.contains("editing") || O(this,
|
|
2368
|
+
a.classList.contains("editing") || O(this, i, e, l, a);
|
|
2149
2369
|
}
|
|
2150
2370
|
}), queueMicrotask(() => {
|
|
2151
|
-
const s =
|
|
2371
|
+
const s = n.querySelector(`.cell[data-col="${this._focusCol}"]`);
|
|
2152
2372
|
if (s?.classList.contains("editing")) {
|
|
2153
2373
|
const r = s.querySelector(
|
|
2154
2374
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
@@ -2161,17 +2381,17 @@ class I extends HTMLElement {
|
|
|
2161
2381
|
}));
|
|
2162
2382
|
}
|
|
2163
2383
|
async commitActiveRowEdit() {
|
|
2164
|
-
this.
|
|
2384
|
+
this._activeEditRows !== -1 && M(this, this._activeEditRows, !1);
|
|
2165
2385
|
}
|
|
2166
2386
|
async ready() {
|
|
2167
|
-
return this
|
|
2387
|
+
return this.#z;
|
|
2168
2388
|
}
|
|
2169
2389
|
async forceLayout() {
|
|
2170
2390
|
this.#c(), await new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(e)));
|
|
2171
2391
|
}
|
|
2172
2392
|
/** Public method: returns a frozen snapshot of the merged effective configuration */
|
|
2173
2393
|
async getConfig() {
|
|
2174
|
-
return Object.freeze({ ...this.#
|
|
2394
|
+
return Object.freeze({ ...this.#t || {} });
|
|
2175
2395
|
}
|
|
2176
2396
|
// ---------------- Column Visibility API ----------------
|
|
2177
2397
|
/**
|
|
@@ -2181,15 +2401,15 @@ class I extends HTMLElement {
|
|
|
2181
2401
|
* @returns True if visibility was changed, false if column not found or locked
|
|
2182
2402
|
*/
|
|
2183
2403
|
setColumnVisible(e, o) {
|
|
2184
|
-
const
|
|
2185
|
-
if (!
|
|
2404
|
+
const i = this.#t.columns, n = i?.find((l) => l.field === e);
|
|
2405
|
+
if (!n || !o && n.lockVisible || !o && (i ?? []).filter((a) => !a.hidden && a.field !== e).length === 0)
|
|
2186
2406
|
return !1;
|
|
2187
|
-
const s = !!
|
|
2188
|
-
return s !== r ? (
|
|
2407
|
+
const s = !!n.hidden, r = !o;
|
|
2408
|
+
return s !== r ? (n.hidden = r, this.#s("column-visibility", {
|
|
2189
2409
|
field: e,
|
|
2190
2410
|
visible: o,
|
|
2191
|
-
visibleColumns: (
|
|
2192
|
-
}), this.
|
|
2411
|
+
visibleColumns: (i ?? []).filter((l) => !l.hidden).map((l) => l.field)
|
|
2412
|
+
}), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange(), !0) : !1;
|
|
2193
2413
|
}
|
|
2194
2414
|
/**
|
|
2195
2415
|
* Toggle the visibility of a column.
|
|
@@ -2197,8 +2417,8 @@ class I extends HTMLElement {
|
|
|
2197
2417
|
* @returns True if visibility was toggled, false if column not found or locked
|
|
2198
2418
|
*/
|
|
2199
2419
|
toggleColumnVisibility(e) {
|
|
2200
|
-
const
|
|
2201
|
-
return this.setColumnVisible(e,
|
|
2420
|
+
const n = !!this.#t.columns?.find((s) => s.field === e)?.hidden;
|
|
2421
|
+
return this.setColumnVisible(e, n);
|
|
2202
2422
|
}
|
|
2203
2423
|
/**
|
|
2204
2424
|
* Check if a column is currently visible.
|
|
@@ -2206,19 +2426,19 @@ class I extends HTMLElement {
|
|
|
2206
2426
|
* @returns True if visible, false if hidden or not found
|
|
2207
2427
|
*/
|
|
2208
2428
|
isColumnVisible(e) {
|
|
2209
|
-
const
|
|
2210
|
-
return
|
|
2429
|
+
const i = this.#t.columns?.find((n) => n.field === e);
|
|
2430
|
+
return i ? !i.hidden : !1;
|
|
2211
2431
|
}
|
|
2212
2432
|
/**
|
|
2213
2433
|
* Show all columns.
|
|
2214
2434
|
*/
|
|
2215
2435
|
showAllColumns() {
|
|
2216
|
-
const e = this.#
|
|
2217
|
-
e?.some((
|
|
2218
|
-
|
|
2219
|
-
}), this.#
|
|
2220
|
-
visibleColumns: (e ?? []).map((
|
|
2221
|
-
}), this.
|
|
2436
|
+
const e = this.#t.columns;
|
|
2437
|
+
e?.some((i) => i.hidden) && (e?.forEach((i) => {
|
|
2438
|
+
i.hidden = !1;
|
|
2439
|
+
}), this.#s("column-visibility", {
|
|
2440
|
+
visibleColumns: (e ?? []).map((i) => i.field)
|
|
2441
|
+
}), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange());
|
|
2222
2442
|
}
|
|
2223
2443
|
/**
|
|
2224
2444
|
* Get list of all column fields (including hidden).
|
|
@@ -2227,7 +2447,7 @@ class I extends HTMLElement {
|
|
|
2227
2447
|
* @returns Array of all field names with their visibility status
|
|
2228
2448
|
*/
|
|
2229
2449
|
getAllColumns() {
|
|
2230
|
-
return (this.#
|
|
2450
|
+
return (this.#t.columns ?? []).map((o) => ({
|
|
2231
2451
|
field: o.field,
|
|
2232
2452
|
header: o.header || o.field,
|
|
2233
2453
|
visible: !o.hidden,
|
|
@@ -2241,14 +2461,14 @@ class I extends HTMLElement {
|
|
|
2241
2461
|
*/
|
|
2242
2462
|
setColumnOrder(e) {
|
|
2243
2463
|
if (!e.length) return;
|
|
2244
|
-
const o = new Map(this._columns.map((
|
|
2245
|
-
for (const
|
|
2246
|
-
const s = o.get(
|
|
2247
|
-
s && (
|
|
2464
|
+
const o = new Map(this._columns.map((n) => [n.field, n])), i = [];
|
|
2465
|
+
for (const n of e) {
|
|
2466
|
+
const s = o.get(n);
|
|
2467
|
+
s && (i.push(s), o.delete(n));
|
|
2248
2468
|
}
|
|
2249
|
-
for (const
|
|
2250
|
-
|
|
2251
|
-
this._columns =
|
|
2469
|
+
for (const n of o.values())
|
|
2470
|
+
i.push(n);
|
|
2471
|
+
this._columns = i, q(this), N(this), this.refreshVirtualWindow(!0);
|
|
2252
2472
|
}
|
|
2253
2473
|
/**
|
|
2254
2474
|
* Get the current column order as an array of field names.
|
|
@@ -2263,15 +2483,15 @@ class I extends HTMLElement {
|
|
|
2263
2483
|
* Returns a serializable object suitable for localStorage or database storage.
|
|
2264
2484
|
*/
|
|
2265
2485
|
getColumnState() {
|
|
2266
|
-
const e = this.#
|
|
2267
|
-
return
|
|
2486
|
+
const e = this.#e?.getAll() ?? [];
|
|
2487
|
+
return ce(this, e);
|
|
2268
2488
|
}
|
|
2269
2489
|
/**
|
|
2270
2490
|
* Set the column state, restoring order, width, visibility, sort, and plugin state.
|
|
2271
2491
|
* Use this to restore previously saved column state.
|
|
2272
2492
|
*/
|
|
2273
2493
|
set columnState(e) {
|
|
2274
|
-
e && (this.#d = e, this.#
|
|
2494
|
+
e && (this.#d = e, this.#A && this.#te(e));
|
|
2275
2495
|
}
|
|
2276
2496
|
/**
|
|
2277
2497
|
* Get the current column state.
|
|
@@ -2282,280 +2502,173 @@ class I extends HTMLElement {
|
|
|
2282
2502
|
/**
|
|
2283
2503
|
* Apply column state internally.
|
|
2284
2504
|
*/
|
|
2285
|
-
#
|
|
2286
|
-
(this.#
|
|
2287
|
-
|
|
2288
|
-
}), this.#
|
|
2505
|
+
#te(e) {
|
|
2506
|
+
(this.#t.columns ?? []).forEach((i) => {
|
|
2507
|
+
i.hidden = !1;
|
|
2508
|
+
}), this.#I(e), this.#c();
|
|
2289
2509
|
}
|
|
2290
2510
|
/**
|
|
2291
2511
|
* Request a state change event to be emitted.
|
|
2292
2512
|
* Called internally after resize, reorder, visibility, or sort changes.
|
|
2293
2513
|
* Plugins should call this after changing their state.
|
|
2294
2514
|
* The event is debounced to avoid excessive events during drag operations.
|
|
2515
|
+
* @internal Plugin API
|
|
2295
2516
|
*/
|
|
2296
2517
|
requestStateChange() {
|
|
2297
|
-
this.#
|
|
2518
|
+
this.#L || (this.#L = we(
|
|
2298
2519
|
this,
|
|
2299
|
-
() => this.#
|
|
2300
|
-
(e) => this.#
|
|
2301
|
-
)), this.#
|
|
2520
|
+
() => this.#e?.getAll() ?? [],
|
|
2521
|
+
(e) => this.#s("column-state-change", e)
|
|
2522
|
+
)), this.#L();
|
|
2302
2523
|
}
|
|
2303
2524
|
/**
|
|
2304
2525
|
* Reset column state to initial configuration.
|
|
2305
2526
|
* Clears all user modifications (order, width, visibility, sort).
|
|
2306
2527
|
*/
|
|
2307
2528
|
resetColumnState() {
|
|
2308
|
-
this.#d = void 0, (this.#
|
|
2309
|
-
|
|
2310
|
-
}), this.
|
|
2311
|
-
const o = this.#
|
|
2312
|
-
for (const
|
|
2313
|
-
if (
|
|
2314
|
-
for (const
|
|
2315
|
-
|
|
2316
|
-
field:
|
|
2529
|
+
this.#d = void 0, (this.#t.columns ?? []).forEach((i) => {
|
|
2530
|
+
i.hidden = !1;
|
|
2531
|
+
}), this._sortState = null, this.__originalOrder = [], this.#u(), this.#c();
|
|
2532
|
+
const o = this.#e?.getAll() ?? [];
|
|
2533
|
+
for (const i of o)
|
|
2534
|
+
if (i.applyColumnState)
|
|
2535
|
+
for (const n of this._columns)
|
|
2536
|
+
i.applyColumnState(n.field, {
|
|
2537
|
+
field: n.field,
|
|
2317
2538
|
order: 0,
|
|
2318
2539
|
visible: !0
|
|
2319
2540
|
});
|
|
2320
2541
|
this.requestStateChange();
|
|
2321
2542
|
}
|
|
2322
2543
|
// ---------------- Shell / Tool Panel API ----------------
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2544
|
+
// These methods delegate to ShellController for implementation.
|
|
2545
|
+
// The controller encapsulates all tool panel logic while grid.ts
|
|
2546
|
+
// exposes the public API surface.
|
|
2547
|
+
/** Check if the tool panel is currently open. */
|
|
2326
2548
|
get isToolPanelOpen() {
|
|
2327
|
-
return this.#
|
|
2549
|
+
return this.#n.isPanelOpen;
|
|
2328
2550
|
}
|
|
2329
2551
|
/**
|
|
2330
2552
|
* Get the currently active tool panel ID, or null if none is open.
|
|
2331
2553
|
* @deprecated Use isToolPanelOpen and expandedToolPanelSections instead.
|
|
2332
2554
|
*/
|
|
2333
2555
|
get activeToolPanel() {
|
|
2334
|
-
return this.#
|
|
2556
|
+
return this.#n.activePanel;
|
|
2335
2557
|
}
|
|
2336
|
-
/**
|
|
2337
|
-
* Get the IDs of expanded accordion sections.
|
|
2338
|
-
*/
|
|
2558
|
+
/** Get the IDs of expanded accordion sections. */
|
|
2339
2559
|
get expandedToolPanelSections() {
|
|
2340
|
-
return
|
|
2560
|
+
return this.#n.expandedSections;
|
|
2341
2561
|
}
|
|
2342
|
-
/**
|
|
2343
|
-
* Open the tool panel (accordion view with all registered panels).
|
|
2344
|
-
*/
|
|
2562
|
+
/** Open the tool panel (accordion view with all registered panels). */
|
|
2345
2563
|
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 });
|
|
2564
|
+
this.#n.openToolPanel();
|
|
2359
2565
|
}
|
|
2360
|
-
/**
|
|
2361
|
-
* Close the tool panel.
|
|
2362
|
-
*/
|
|
2566
|
+
/** Close the tool panel. */
|
|
2363
2567
|
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
|
-
}
|
|
2568
|
+
this.#n.closeToolPanel();
|
|
2372
2569
|
}
|
|
2373
|
-
/**
|
|
2374
|
-
* Toggle the tool panel open/closed.
|
|
2375
|
-
*/
|
|
2570
|
+
/** Toggle the tool panel open/closed. */
|
|
2376
2571
|
toggleToolPanel() {
|
|
2377
|
-
this.#
|
|
2572
|
+
this.#n.toggleToolPanel();
|
|
2378
2573
|
}
|
|
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
|
-
*/
|
|
2574
|
+
/** Toggle an accordion section expanded/collapsed. */
|
|
2384
2575
|
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);
|
|
2414
|
-
}
|
|
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);
|
|
2576
|
+
this.#n.toggleToolPanelSection(e);
|
|
2425
2577
|
}
|
|
2426
|
-
/**
|
|
2427
|
-
* Get registered tool panel definitions.
|
|
2428
|
-
*/
|
|
2578
|
+
/** Get registered tool panel definitions. */
|
|
2429
2579
|
getToolPanels() {
|
|
2430
|
-
return
|
|
2580
|
+
return this.#n.getToolPanels();
|
|
2431
2581
|
}
|
|
2432
|
-
/**
|
|
2433
|
-
* Register a custom tool panel (without creating a plugin).
|
|
2434
|
-
*/
|
|
2582
|
+
/** Register a custom tool panel (without creating a plugin). */
|
|
2435
2583
|
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();
|
|
2584
|
+
this.#n.registerToolPanel(e);
|
|
2441
2585
|
}
|
|
2442
|
-
/**
|
|
2443
|
-
* Unregister a custom tool panel.
|
|
2444
|
-
*/
|
|
2586
|
+
/** Unregister a custom tool panel. */
|
|
2445
2587
|
unregisterToolPanel(e) {
|
|
2446
|
-
this.#
|
|
2588
|
+
this.#n.unregisterToolPanel(e);
|
|
2447
2589
|
}
|
|
2448
|
-
/**
|
|
2449
|
-
* Get registered header content definitions.
|
|
2450
|
-
*/
|
|
2590
|
+
/** Get registered header content definitions. */
|
|
2451
2591
|
getHeaderContents() {
|
|
2452
|
-
return
|
|
2592
|
+
return this.#n.getHeaderContents();
|
|
2453
2593
|
}
|
|
2454
|
-
/**
|
|
2455
|
-
* Register custom header content (without creating a plugin).
|
|
2456
|
-
*/
|
|
2594
|
+
/** Register custom header content (without creating a plugin). */
|
|
2457
2595
|
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);
|
|
2596
|
+
this.#n.registerHeaderContent(e);
|
|
2463
2597
|
}
|
|
2464
|
-
/**
|
|
2465
|
-
* Unregister custom header content.
|
|
2466
|
-
*/
|
|
2598
|
+
/** Unregister custom header content. */
|
|
2467
2599
|
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();
|
|
2600
|
+
this.#n.unregisterHeaderContent(e);
|
|
2470
2601
|
}
|
|
2471
|
-
/**
|
|
2472
|
-
* Get all registered toolbar buttons.
|
|
2473
|
-
*/
|
|
2602
|
+
/** Get all registered toolbar buttons. */
|
|
2474
2603
|
getToolbarButtons() {
|
|
2475
|
-
return
|
|
2604
|
+
return this.#n.getToolbarButtons();
|
|
2476
2605
|
}
|
|
2477
|
-
/**
|
|
2478
|
-
* Register a custom toolbar button programmatically.
|
|
2479
|
-
*/
|
|
2606
|
+
/** Register a custom toolbar button programmatically. */
|
|
2480
2607
|
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();
|
|
2608
|
+
this.#n.registerToolbarButton(e);
|
|
2486
2609
|
}
|
|
2487
|
-
/**
|
|
2488
|
-
* Unregister a custom toolbar button.
|
|
2489
|
-
*/
|
|
2610
|
+
/** Unregister a custom toolbar button. */
|
|
2490
2611
|
unregisterToolbarButton(e) {
|
|
2491
|
-
|
|
2492
|
-
o && (o(), this.#e.toolbarButtonCleanups.delete(e)), this.#e.toolbarButtons.delete(e), this.#a && this.#g();
|
|
2612
|
+
this.#n.unregisterToolbarButton(e);
|
|
2493
2613
|
}
|
|
2494
|
-
/**
|
|
2495
|
-
* Enable/disable a toolbar button by ID.
|
|
2496
|
-
*/
|
|
2614
|
+
/** Enable/disable a toolbar button by ID. */
|
|
2497
2615
|
setToolbarButtonDisabled(e, o) {
|
|
2498
|
-
|
|
2499
|
-
n && (n.disabled = o);
|
|
2500
|
-
const i = this.#n.querySelector(`[data-btn="${e}"]`);
|
|
2501
|
-
i && (i.disabled = o);
|
|
2616
|
+
this.#n.setToolbarButtonDisabled(e, o);
|
|
2502
2617
|
}
|
|
2503
2618
|
/**
|
|
2504
2619
|
* Re-parse light DOM shell elements and refresh shell header.
|
|
2505
2620
|
* Call this after dynamically modifying <tbw-grid-header> children.
|
|
2506
2621
|
*/
|
|
2507
2622
|
refreshShellHeader() {
|
|
2508
|
-
this.#
|
|
2509
|
-
}
|
|
2510
|
-
/**
|
|
2511
|
-
* Internal shell header refresh.
|
|
2512
|
-
*/
|
|
2513
|
-
#g() {
|
|
2514
|
-
te(this, this.#e), this.#X(), this.#G();
|
|
2623
|
+
se(this, this.#i), this.#$(), this.#B();
|
|
2515
2624
|
}
|
|
2516
2625
|
// ---------------- Virtual Window ----------------
|
|
2517
2626
|
/**
|
|
2518
2627
|
* Core virtualization routine. Chooses between bypass (small datasets), grouped window rendering,
|
|
2519
2628
|
* or standard row window rendering.
|
|
2629
|
+
* @internal Plugin API
|
|
2520
2630
|
*/
|
|
2521
2631
|
refreshVirtualWindow(e = !1) {
|
|
2522
|
-
if (!this.
|
|
2632
|
+
if (!this._bodyEl) return;
|
|
2523
2633
|
const o = this._rows.length;
|
|
2524
|
-
if (!this.
|
|
2525
|
-
this.#
|
|
2634
|
+
if (!this._virtualization.enabled) {
|
|
2635
|
+
this.#O(0, o), this.#e?.afterRender();
|
|
2526
2636
|
return;
|
|
2527
2637
|
}
|
|
2528
|
-
if (this
|
|
2529
|
-
this.
|
|
2530
|
-
|
|
2531
|
-
|
|
2638
|
+
if (this._rows.length <= this._virtualization.bypassThreshold) {
|
|
2639
|
+
if (this._virtualization.start = 0, this._virtualization.end = o, this._bodyEl.style.transform = "translateY(0px)", this.#O(0, o, this.__rowRenderEpoch), this._virtualization.totalHeightEl) {
|
|
2640
|
+
const C = this.#o.querySelector(".tbw-scroll-area"), _ = C ? C.offsetHeight - C.clientHeight : 0;
|
|
2641
|
+
this._virtualization.totalHeightEl.style.height = `${o * this._virtualization.rowHeight + _}px`;
|
|
2642
|
+
}
|
|
2643
|
+
const m = this.#o.querySelector(".rows-body");
|
|
2644
|
+
m?.setAttribute("aria-rowcount", String(o)), m?.setAttribute("aria-colcount", String(this._visibleColumns.length)), this.#e?.afterRender();
|
|
2532
2645
|
return;
|
|
2533
2646
|
}
|
|
2534
|
-
const
|
|
2647
|
+
const i = this._virtualization.container ?? this, s = (this._virtualization.viewportEl ?? i).clientHeight, r = this._virtualization.rowHeight, l = i.scrollTop;
|
|
2535
2648
|
let a = Math.floor(l / r), d = 0;
|
|
2536
|
-
const
|
|
2537
|
-
for (; d <
|
|
2538
|
-
const
|
|
2539
|
-
if (
|
|
2540
|
-
a =
|
|
2649
|
+
const f = 10;
|
|
2650
|
+
for (; d < f; ) {
|
|
2651
|
+
const m = this.#e?.getExtraHeightBefore?.(a) ?? 0, C = Math.floor((l - m) / r);
|
|
2652
|
+
if (C >= a || C < 0) break;
|
|
2653
|
+
a = C, d++;
|
|
2541
2654
|
}
|
|
2542
2655
|
a = a - a % 2, a < 0 && (a = 0);
|
|
2543
|
-
const
|
|
2544
|
-
|
|
2545
|
-
const
|
|
2546
|
-
let c = a +
|
|
2547
|
-
c > o && (c = o), this.
|
|
2548
|
-
const
|
|
2549
|
-
this.
|
|
2550
|
-
const
|
|
2551
|
-
this.
|
|
2552
|
-
const
|
|
2553
|
-
|
|
2656
|
+
const h = this.#e?.adjustVirtualStart(a, l, r);
|
|
2657
|
+
h !== void 0 && h < a && (a = h, a = a - a % 2, a < 0 && (a = 0));
|
|
2658
|
+
const p = Math.ceil(s / r) + 3;
|
|
2659
|
+
let c = a + p;
|
|
2660
|
+
c > o && (c = o), this._virtualization.start = a, this._virtualization.end = c;
|
|
2661
|
+
const b = this.#o.querySelector(".tbw-footer")?.offsetHeight ?? 0, w = this.#e?.getExtraHeight() ?? 0, v = this.#o.querySelector(".tbw-scroll-area"), y = v ? v.offsetHeight - v.clientHeight : 0;
|
|
2662
|
+
this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${o * r + r + b + w + y}px`);
|
|
2663
|
+
const x = this.#e?.getExtraHeightBefore?.(a) ?? 0, R = -(l - a * r - x);
|
|
2664
|
+
this._bodyEl.style.transform = `translateY(${R}px)`, this.#O(a, c, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch);
|
|
2665
|
+
const g = this.#o.querySelector(".rows-body");
|
|
2666
|
+
g?.setAttribute("aria-rowcount", String(o)), g?.setAttribute("aria-colcount", String(this._visibleColumns.length)), e && this.#e?.afterRender();
|
|
2554
2667
|
}
|
|
2555
2668
|
// ---------------- Render ----------------
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
const e = this.#
|
|
2669
|
+
#$() {
|
|
2670
|
+
se(this, this.#i);
|
|
2671
|
+
const e = this.#t?.shell, o = Be(e, this.#i), i = `
|
|
2559
2672
|
<div class="tbw-scroll-area">
|
|
2560
2673
|
<div class="rows-body-wrapper">
|
|
2561
2674
|
<div class="rows-body" role="grid">
|
|
@@ -2575,21 +2688,21 @@ class I extends HTMLElement {
|
|
|
2575
2688
|
</div>
|
|
2576
2689
|
`;
|
|
2577
2690
|
if (o) {
|
|
2578
|
-
const
|
|
2579
|
-
expand: this.#
|
|
2580
|
-
collapse: this.#
|
|
2581
|
-
}, r =
|
|
2582
|
-
this.#
|
|
2691
|
+
const n = this.#t?.icons?.toolPanel ?? H.toolPanel, s = {
|
|
2692
|
+
expand: this.#t?.icons?.expand ?? H.expand,
|
|
2693
|
+
collapse: this.#t?.icons?.collapse ?? H.collapse
|
|
2694
|
+
}, r = Ie(e, this.#i, n), l = $e(e, this.#i, i, s);
|
|
2695
|
+
this.#o.innerHTML = `
|
|
2583
2696
|
<div class="tbw-grid-root has-shell">
|
|
2584
2697
|
${r}
|
|
2585
2698
|
${l}
|
|
2586
2699
|
</div>
|
|
2587
|
-
`, this.#
|
|
2700
|
+
`, this.#oe(), this.#n.setInitialized(!0);
|
|
2588
2701
|
} else
|
|
2589
|
-
this.#
|
|
2702
|
+
this.#o.innerHTML = `
|
|
2590
2703
|
<div class="tbw-grid-root">
|
|
2591
2704
|
<div class="tbw-grid-content">
|
|
2592
|
-
${
|
|
2705
|
+
${i}
|
|
2593
2706
|
</div>
|
|
2594
2707
|
</div>
|
|
2595
2708
|
`;
|
|
@@ -2597,30 +2710,36 @@ class I extends HTMLElement {
|
|
|
2597
2710
|
/**
|
|
2598
2711
|
* Set up shell event listeners after render.
|
|
2599
2712
|
*/
|
|
2600
|
-
#
|
|
2601
|
-
|
|
2713
|
+
#oe() {
|
|
2714
|
+
We(this.#o, this.#t?.shell, this.#i, {
|
|
2602
2715
|
onPanelToggle: () => this.toggleToolPanel(),
|
|
2603
2716
|
onSectionToggle: (e) => this.toggleToolPanelSection(e),
|
|
2604
|
-
onToolbarButtonClick: (e) => this.#
|
|
2605
|
-
}), this.#
|
|
2717
|
+
onToolbarButtonClick: (e) => this.#ne(e)
|
|
2718
|
+
}), this.#S?.(), this.#S = Ve(this.#o, this.#t?.shell, (e) => {
|
|
2606
2719
|
this.style.setProperty("--tbw-tool-panel-width", `${e}px`);
|
|
2607
2720
|
});
|
|
2608
2721
|
}
|
|
2609
2722
|
/**
|
|
2610
2723
|
* Handle toolbar button click (for config buttons with action).
|
|
2611
2724
|
*/
|
|
2612
|
-
#
|
|
2613
|
-
const
|
|
2614
|
-
if (
|
|
2615
|
-
|
|
2725
|
+
#ne(e) {
|
|
2726
|
+
const i = (this.#t?.shell?.header?.toolbarButtons ?? []).find((s) => s.id === e);
|
|
2727
|
+
if (i?.action) {
|
|
2728
|
+
i.action();
|
|
2616
2729
|
return;
|
|
2617
2730
|
}
|
|
2618
|
-
const
|
|
2619
|
-
|
|
2731
|
+
const n = this.#i.toolbarButtons.get(e);
|
|
2732
|
+
n?.action && n.action();
|
|
2620
2733
|
}
|
|
2621
2734
|
}
|
|
2622
|
-
customElements.get(
|
|
2623
|
-
|
|
2735
|
+
customElements.get(W.tagName) || customElements.define(W.tagName, W);
|
|
2736
|
+
const Je = {
|
|
2737
|
+
/** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
|
|
2738
|
+
CAN_MOVE_COLUMN: "canMoveColumn",
|
|
2739
|
+
/** Get context menu items. Context: ContextMenuParams. Response: ContextMenuItem[] */
|
|
2740
|
+
GET_CONTEXT_MENU_ITEMS: "getContextMenuItems"
|
|
2741
|
+
};
|
|
2742
|
+
class Qe {
|
|
2624
2743
|
/** Plugin version - override in subclass if needed */
|
|
2625
2744
|
version = "1.0.0";
|
|
2626
2745
|
/** CSS styles to inject into the grid's shadow DOM */
|
|
@@ -2745,7 +2864,7 @@ class Ke {
|
|
|
2745
2864
|
*/
|
|
2746
2865
|
get gridIcons() {
|
|
2747
2866
|
const e = this.grid?.gridConfig?.icons ?? {};
|
|
2748
|
-
return { ...
|
|
2867
|
+
return { ...H, ...e };
|
|
2749
2868
|
}
|
|
2750
2869
|
/**
|
|
2751
2870
|
* Resolve an icon value to string or HTMLElement.
|
|
@@ -2776,8 +2895,8 @@ class Ke {
|
|
|
2776
2895
|
}
|
|
2777
2896
|
// #endregion
|
|
2778
2897
|
}
|
|
2779
|
-
const
|
|
2780
|
-
//
|
|
2898
|
+
const T = {
|
|
2899
|
+
// ─── Core Structure ───────────────────────────────────────────────
|
|
2781
2900
|
ROOT: "tbw-grid-root",
|
|
2782
2901
|
HEADER: "header",
|
|
2783
2902
|
HEADER_ROW: "header-row",
|
|
@@ -2791,7 +2910,7 @@ const A = {
|
|
|
2791
2910
|
GROUP_ROW: "group-row",
|
|
2792
2911
|
// Cell elements
|
|
2793
2912
|
DATA_CELL: "data-cell",
|
|
2794
|
-
// States
|
|
2913
|
+
// ─── Core States ──────────────────────────────────────────────────
|
|
2795
2914
|
SELECTED: "selected",
|
|
2796
2915
|
FOCUSED: "focused",
|
|
2797
2916
|
EDITING: "editing",
|
|
@@ -2799,53 +2918,61 @@ const A = {
|
|
|
2799
2918
|
COLLAPSED: "collapsed",
|
|
2800
2919
|
DRAGGING: "dragging",
|
|
2801
2920
|
RESIZING: "resizing",
|
|
2802
|
-
// Sorting
|
|
2921
|
+
// Sorting (core feature)
|
|
2803
2922
|
SORTABLE: "sortable",
|
|
2804
2923
|
SORTED_ASC: "sorted-asc",
|
|
2805
2924
|
SORTED_DESC: "sorted-desc",
|
|
2806
2925
|
// Visibility
|
|
2807
2926
|
HIDDEN: "hidden",
|
|
2808
|
-
//
|
|
2927
|
+
// ─── Shared Classes (used by plugins, styled by core CSS) ────────
|
|
2928
|
+
// These are defined here because core CSS provides the base styling.
|
|
2929
|
+
// Plugins apply these classes; core CSS defines how they look.
|
|
2930
|
+
// Sticky positioning (PinnedColumnsPlugin applies, core CSS styles)
|
|
2809
2931
|
STICKY_LEFT: "sticky-left",
|
|
2810
2932
|
STICKY_RIGHT: "sticky-right",
|
|
2811
|
-
//
|
|
2933
|
+
// Pinned rows (PinnedRowsPlugin applies, core CSS styles)
|
|
2812
2934
|
PINNED_TOP: "pinned-top",
|
|
2813
2935
|
PINNED_BOTTOM: "pinned-bottom",
|
|
2814
|
-
// Tree
|
|
2936
|
+
// Tree structure (TreePlugin applies, core CSS styles)
|
|
2815
2937
|
TREE_TOGGLE: "tree-toggle",
|
|
2816
2938
|
TREE_INDENT: "tree-indent",
|
|
2817
|
-
// Grouping
|
|
2939
|
+
// Grouping (GroupingRowsPlugin applies, core CSS styles)
|
|
2818
2940
|
GROUP_TOGGLE: "group-toggle",
|
|
2819
2941
|
GROUP_LABEL: "group-label",
|
|
2820
2942
|
GROUP_COUNT: "group-count",
|
|
2821
|
-
// Selection
|
|
2943
|
+
// Selection (SelectionPlugin applies, core CSS styles)
|
|
2822
2944
|
RANGE_SELECTION: "range-selection",
|
|
2823
2945
|
SELECTION_OVERLAY: "selection-overlay"
|
|
2824
|
-
},
|
|
2946
|
+
}, G = {
|
|
2947
|
+
// ─── Core Attributes ──────────────────────────────────────────────
|
|
2825
2948
|
ROW_INDEX: "data-row-index",
|
|
2826
2949
|
COL_INDEX: "data-col-index",
|
|
2827
2950
|
FIELD: "data-field",
|
|
2951
|
+
// ─── Shared Attributes (used by plugins) ──────────────────────────
|
|
2828
2952
|
GROUP_KEY: "data-group-key",
|
|
2953
|
+
// GroupingRowsPlugin
|
|
2829
2954
|
TREE_LEVEL: "data-tree-level",
|
|
2955
|
+
// TreePlugin
|
|
2830
2956
|
STICKY: "data-sticky"
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2957
|
+
// PinnedColumnsPlugin
|
|
2958
|
+
}, et = {
|
|
2959
|
+
ROOT: `.${T.ROOT}`,
|
|
2960
|
+
HEADER: `.${T.HEADER}`,
|
|
2961
|
+
HEADER_ROW: `.${T.HEADER_ROW}`,
|
|
2962
|
+
HEADER_CELL: `.${T.HEADER_CELL}`,
|
|
2963
|
+
ROWS_VIEWPORT: `.${T.ROWS_VIEWPORT}`,
|
|
2964
|
+
ROWS_CONTAINER: `.${T.ROWS_CONTAINER}`,
|
|
2965
|
+
DATA_ROW: `.${T.DATA_ROW}`,
|
|
2966
|
+
DATA_CELL: `.${T.DATA_CELL}`,
|
|
2967
|
+
GROUP_ROW: `.${T.GROUP_ROW}`,
|
|
2841
2968
|
// By data attribute
|
|
2842
|
-
ROW_BY_INDEX: (t) => `.${
|
|
2843
|
-
CELL_BY_FIELD: (t) => `.${
|
|
2844
|
-
CELL_AT: (t, e) => `.${
|
|
2969
|
+
ROW_BY_INDEX: (t) => `.${T.DATA_ROW}[${G.ROW_INDEX}="${t}"]`,
|
|
2970
|
+
CELL_BY_FIELD: (t) => `.${T.DATA_CELL}[${G.FIELD}="${t}"]`,
|
|
2971
|
+
CELL_AT: (t, e) => `.${T.DATA_ROW}[${G.ROW_INDEX}="${t}"] .${T.DATA_CELL}[${G.COL_INDEX}="${e}"]`,
|
|
2845
2972
|
// State selectors
|
|
2846
|
-
SELECTED_ROWS: `.${
|
|
2847
|
-
EDITING_CELL: `.${
|
|
2848
|
-
},
|
|
2973
|
+
SELECTED_ROWS: `.${T.DATA_ROW}.${T.SELECTED}`,
|
|
2974
|
+
EDITING_CELL: `.${T.DATA_CELL}.${T.EDITING}`
|
|
2975
|
+
}, tt = {
|
|
2849
2976
|
// Colors
|
|
2850
2977
|
COLOR_BG: "--tbw-color-bg",
|
|
2851
2978
|
COLOR_FG: "--tbw-color-fg",
|
|
@@ -2867,7 +2994,7 @@ const A = {
|
|
|
2867
2994
|
// Borders
|
|
2868
2995
|
BORDER_RADIUS: "--tbw-border-radius",
|
|
2869
2996
|
FOCUS_OUTLINE: "--tbw-focus-outline"
|
|
2870
|
-
},
|
|
2997
|
+
}, ot = {
|
|
2871
2998
|
CELL_COMMIT: "cell-commit",
|
|
2872
2999
|
ROW_COMMIT: "row-commit",
|
|
2873
3000
|
CHANGED_ROWS_RESET: "changed-rows-reset",
|
|
@@ -2878,7 +3005,7 @@ const A = {
|
|
|
2878
3005
|
ACTIVATE_CELL: "activate-cell",
|
|
2879
3006
|
GROUP_TOGGLE: "group-toggle",
|
|
2880
3007
|
COLUMN_STATE_CHANGE: "column-state-change"
|
|
2881
|
-
},
|
|
3008
|
+
}, nt = {
|
|
2882
3009
|
// Selection plugin
|
|
2883
3010
|
SELECTION_CHANGE: "selection-change",
|
|
2884
3011
|
// Tree plugin
|
|
@@ -2909,10 +3036,10 @@ const A = {
|
|
|
2909
3036
|
DETAIL_EXPAND: "detail-expand",
|
|
2910
3037
|
// Grouping rows plugin
|
|
2911
3038
|
GROUP_EXPAND: "group-expand"
|
|
2912
|
-
},
|
|
2913
|
-
sum: (t, e) => t.reduce((o,
|
|
3039
|
+
}, K = {
|
|
3040
|
+
sum: (t, e) => t.reduce((o, i) => o + (Number(i[e]) || 0), 0),
|
|
2914
3041
|
avg: (t, e) => {
|
|
2915
|
-
const o = t.reduce((
|
|
3042
|
+
const o = t.reduce((i, n) => i + (Number(n[e]) || 0), 0);
|
|
2916
3043
|
return t.length ? o / t.length : 0;
|
|
2917
3044
|
},
|
|
2918
3045
|
count: (t) => t.length,
|
|
@@ -2920,46 +3047,46 @@ const A = {
|
|
|
2920
3047
|
max: (t, e) => Math.max(...t.map((o) => Number(o[e]) || -1 / 0)),
|
|
2921
3048
|
first: (t, e) => t[0]?.[e],
|
|
2922
3049
|
last: (t, e) => t[t.length - 1]?.[e]
|
|
2923
|
-
},
|
|
3050
|
+
}, I = /* @__PURE__ */ new Map(), k = {
|
|
2924
3051
|
/**
|
|
2925
3052
|
* Register a custom aggregator function.
|
|
2926
3053
|
*/
|
|
2927
3054
|
register(t, e) {
|
|
2928
|
-
|
|
3055
|
+
I.set(t, e);
|
|
2929
3056
|
},
|
|
2930
3057
|
/**
|
|
2931
3058
|
* Unregister a custom aggregator function.
|
|
2932
3059
|
*/
|
|
2933
3060
|
unregister(t) {
|
|
2934
|
-
|
|
3061
|
+
I.delete(t);
|
|
2935
3062
|
},
|
|
2936
3063
|
/**
|
|
2937
3064
|
* Get an aggregator function by reference.
|
|
2938
3065
|
*/
|
|
2939
3066
|
get(t) {
|
|
2940
3067
|
if (t !== void 0)
|
|
2941
|
-
return typeof t == "function" ? t :
|
|
3068
|
+
return typeof t == "function" ? t : I.get(t) ?? K[t];
|
|
2942
3069
|
},
|
|
2943
3070
|
/**
|
|
2944
3071
|
* Run an aggregator on a set of rows.
|
|
2945
3072
|
*/
|
|
2946
|
-
run(t, e, o,
|
|
2947
|
-
const
|
|
2948
|
-
return
|
|
3073
|
+
run(t, e, o, i) {
|
|
3074
|
+
const n = this.get(t);
|
|
3075
|
+
return n ? n(e, o, i) : void 0;
|
|
2949
3076
|
},
|
|
2950
3077
|
/**
|
|
2951
3078
|
* Check if an aggregator exists.
|
|
2952
3079
|
*/
|
|
2953
3080
|
has(t) {
|
|
2954
|
-
return
|
|
3081
|
+
return I.has(t) || t in K;
|
|
2955
3082
|
},
|
|
2956
3083
|
/**
|
|
2957
3084
|
* List all available aggregator names.
|
|
2958
3085
|
*/
|
|
2959
3086
|
list() {
|
|
2960
|
-
return [...Object.keys(
|
|
3087
|
+
return [...Object.keys(K), ...I.keys()];
|
|
2961
3088
|
}
|
|
2962
|
-
},
|
|
3089
|
+
}, ae = {
|
|
2963
3090
|
sum: (t) => t.reduce((e, o) => e + o, 0),
|
|
2964
3091
|
avg: (t) => t.length ? t.reduce((e, o) => e + o, 0) / t.length : 0,
|
|
2965
3092
|
count: (t) => t.length,
|
|
@@ -2968,33 +3095,34 @@ const A = {
|
|
|
2968
3095
|
first: (t) => t[0] ?? 0,
|
|
2969
3096
|
last: (t) => t[t.length - 1] ?? 0
|
|
2970
3097
|
};
|
|
2971
|
-
function
|
|
2972
|
-
return
|
|
3098
|
+
function Ze(t) {
|
|
3099
|
+
return ae[t] ?? ae.sum;
|
|
2973
3100
|
}
|
|
2974
|
-
function
|
|
2975
|
-
return
|
|
3101
|
+
function it(t, e) {
|
|
3102
|
+
return Ze(t)(e);
|
|
2976
3103
|
}
|
|
2977
|
-
const
|
|
3104
|
+
const st = k.register.bind(k), rt = k.unregister.bind(k), lt = k.get.bind(k), at = k.run.bind(k), ct = k.list.bind(k);
|
|
2978
3105
|
export {
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
3106
|
+
Qe as BaseGridPlugin,
|
|
3107
|
+
H as DEFAULT_GRID_ICONS,
|
|
3108
|
+
ot as DGEvents,
|
|
3109
|
+
W as DataGridElement,
|
|
3110
|
+
$ as FitModeEnum,
|
|
3111
|
+
tt as GridCSSVars,
|
|
3112
|
+
T as GridClasses,
|
|
3113
|
+
G as GridDataAttrs,
|
|
3114
|
+
W as GridElement,
|
|
3115
|
+
et as GridSelectors,
|
|
3116
|
+
Je as PLUGIN_QUERIES,
|
|
3117
|
+
nt as PluginEvents,
|
|
3118
|
+
Ye as PluginManager,
|
|
3119
|
+
k as aggregatorRegistry,
|
|
3120
|
+
lt as getAggregator,
|
|
3121
|
+
Ze as getValueAggregator,
|
|
3122
|
+
ct as listAggregators,
|
|
3123
|
+
st as registerAggregator,
|
|
3124
|
+
at as runAggregator,
|
|
3125
|
+
it as runValueAggregator,
|
|
3126
|
+
rt as unregisterAggregator
|
|
2999
3127
|
};
|
|
3000
3128
|
//# sourceMappingURL=index.js.map
|