@toolbox-web/grid 0.1.1 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.d.ts +8 -0
- package/all.js +1671 -1140
- package/all.js.map +1 -1
- package/index.d.ts +4 -163
- package/index.js +803 -1338
- 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.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.map +1 -1
- package/lib/plugins/selection/index.js +48 -50
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +1 -1
- package/umd/grid.all.umd.js +12 -12
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +13 -13
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js +1 -1
- package/umd/plugins/selection.umd.js.map +1 -1
- package/custom-elements.json +0 -1934
package/index.js
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
const Ce = ":root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-accent);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 4px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell,:host .header-row>.cell.grouped.group-end{border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style}:host .data-grid-row:has(.editing){background:var(--tbw-editing-bg)}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell.selected:focus-visible,:host .data-grid-row>.cell:focus-visible:not(.cell-focus){outline:none}:host .data-grid-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{justify-content:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size)}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;max-width:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host .cell-focus,:host .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-row-alt);font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}:host .group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px)}:host .group-row .group-toggle{background:none;border:0;cursor:pointer;padding:0 4px 0 0;font:inherit}:host .group-row .group-count{margin-left:4px;opacity:.7}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.grid-container{position:relative;width:100%;height:100%}.grid-placeholder{padding:2rem;text-align:center;color:var(--tbw-color-fg);opacity:.6}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: .2s ease-out;--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden}:host .tbw-tool-panel{position:absolute;top:0;bottom:0;right:0;width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;z-index:30;box-shadow:-2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel[data-position=left]{right:auto;left:0;border-left:none;border-right:1px solid var(--tbw-tool-panel-border);box-shadow:2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background .15s ease}:host .tbw-tool-panel-resize[data-handle-position=left]{left:0}:host .tbw-tool-panel-resize[data-handle-position=right]{right:0}:host .tbw-tool-panel-resize:hover,:host .tbw-tool-panel-resize.resizing{background:var(--tbw-color-accent)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto}:host .tbw-accordion{display:flex;flex-direction:column;gap:0}:host .tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border)}:host .tbw-accordion-section:last-child{border-bottom:none}:host .tbw-accordion-header{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:transparent;color:var(--tbw-color-fg);font-size:13px;font-weight:600;text-align:left;cursor:pointer;user-select:none}:host .tbw-accordion-header:hover{background:var(--tbw-color-row-hover)}:host .tbw-accordion-section.single .tbw-accordion-header{cursor:default}:host .tbw-accordion-section.single .tbw-accordion-header:hover{background:transparent}:host .tbw-accordion-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:var(--tbw-color-fg-muted);transition:transform .15s ease;flex-shrink:0}:host .tbw-accordion-section.expanded .tbw-accordion-chevron{transform:rotate(90deg)}:host .tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}:host .tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tbw-accordion-content{display:none}:host .tbw-accordion-section.expanded .tbw-accordion-content{display:block}:host .tbw-quick-filter-input{flex:1;max-width:300px;height:28px;padding:0 8px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:13px}:host .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}:host .tbw-selection-summary{font-size:13px;color:var(--tbw-color-fg-muted);white-space:nowrap}";
|
|
2
|
-
function
|
|
1
|
+
const de = ":root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-accent);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 4px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell,:host .header-row>.cell.grouped.group-end{border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style}:host .data-grid-row:has(.editing){background:var(--tbw-editing-bg)}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell.selected:focus-visible,:host .data-grid-row>.cell:focus-visible:not(.cell-focus){outline:none}:host .data-grid-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{justify-content:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size)}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;max-width:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host .cell-focus,:host .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-row-alt);font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}:host .group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px)}:host .group-row .group-toggle{background:none;border:0;cursor:pointer;padding:0 4px 0 0;font:inherit}:host .group-row .group-count{margin-left:4px;opacity:.7}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.grid-container{position:relative;width:100%;height:100%}.grid-placeholder{padding:2rem;text-align:center;color:var(--tbw-color-fg);opacity:.6}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: .2s ease-out;--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden}:host .tbw-tool-panel{position:absolute;top:0;bottom:0;right:0;width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;z-index:30;box-shadow:-2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel[data-position=left]{right:auto;left:0;border-left:none;border-right:1px solid var(--tbw-tool-panel-border);box-shadow:2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background .15s ease}:host .tbw-tool-panel-resize[data-handle-position=left]{left:0}:host .tbw-tool-panel-resize[data-handle-position=right]{right:0}:host .tbw-tool-panel-resize:hover,:host .tbw-tool-panel-resize.resizing{background:var(--tbw-color-accent)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto}:host .tbw-accordion{display:flex;flex-direction:column;gap:0}:host .tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border)}:host .tbw-accordion-section:last-child{border-bottom:none}:host .tbw-accordion-header{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:transparent;color:var(--tbw-color-fg);font-size:13px;font-weight:600;text-align:left;cursor:pointer;user-select:none}:host .tbw-accordion-header:hover{background:var(--tbw-color-row-hover)}:host .tbw-accordion-section.single .tbw-accordion-header{cursor:default}:host .tbw-accordion-section.single .tbw-accordion-header:hover{background:transparent}:host .tbw-accordion-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:var(--tbw-color-fg-muted);transition:transform .15s ease;flex-shrink:0}:host .tbw-accordion-section.expanded .tbw-accordion-chevron{transform:rotate(90deg)}:host .tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}:host .tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tbw-accordion-content{display:none}:host .tbw-accordion-section.expanded .tbw-accordion-content{display:block}:host .tbw-quick-filter-input{flex:1;max-width:300px;height:28px;padding:0 8px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:13px}:host .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}:host .tbw-selection-summary{font-size:13px;color:var(--tbw-color-fg-muted);white-space:nowrap}";
|
|
2
|
+
function ue(t) {
|
|
3
3
|
const e = /* @__PURE__ */ new Map();
|
|
4
4
|
return t.sortState && e.set(t.sortState.field, {
|
|
5
5
|
direction: t.sortState.direction === 1 ? "asc" : "desc",
|
|
6
6
|
priority: 0
|
|
7
7
|
}), e;
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
const o = t._columns, n =
|
|
9
|
+
function re(t, e) {
|
|
10
|
+
const o = t._columns, n = ue(t);
|
|
11
11
|
return {
|
|
12
|
-
columns: o.map((
|
|
12
|
+
columns: o.map((i, s) => {
|
|
13
13
|
const r = {
|
|
14
|
-
field:
|
|
15
|
-
order:
|
|
14
|
+
field: i.field,
|
|
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 = n.get(
|
|
18
|
+
}, l = i;
|
|
19
|
+
l.__renderedWidth !== void 0 ? r.width = l.__renderedWidth : i.width !== void 0 && (r.width = typeof i.width == "string" ? parseFloat(i.width) : i.width);
|
|
20
|
+
const a = n.get(i.field);
|
|
21
21
|
a && (r.sort = a);
|
|
22
22
|
for (const d of e)
|
|
23
23
|
if (d.getColumnState) {
|
|
24
|
-
const h = d.getColumnState(
|
|
24
|
+
const h = d.getColumnState(i.field);
|
|
25
25
|
h && Object.assign(r, h);
|
|
26
26
|
}
|
|
27
27
|
return r;
|
|
28
28
|
})
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
|
-
function
|
|
31
|
+
function he(t, e, o, n) {
|
|
32
32
|
if (!e.columns || e.columns.length === 0) return;
|
|
33
|
-
const
|
|
34
|
-
const a =
|
|
33
|
+
const i = new Map(e.columns.map((l) => [l.field, l])), s = o.map((l) => {
|
|
34
|
+
const a = i.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
|
-
|
|
40
|
-
const d =
|
|
39
|
+
s.sort((l, a) => {
|
|
40
|
+
const d = i.get(l.field)?.order ?? 1 / 0, h = i.get(a.field)?.order ?? 1 / 0;
|
|
41
41
|
return d - h;
|
|
42
|
-
}), t._columns =
|
|
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];
|
|
@@ -54,13 +54,13 @@ function Re(t, e, o, n) {
|
|
|
54
54
|
for (const a of e.columns)
|
|
55
55
|
l.applyColumnState(a.field, a);
|
|
56
56
|
}
|
|
57
|
-
function
|
|
57
|
+
function fe(t, e, o) {
|
|
58
58
|
let n = null;
|
|
59
59
|
return () => {
|
|
60
60
|
n !== null && clearTimeout(n), n = setTimeout(() => {
|
|
61
61
|
n = null;
|
|
62
|
-
const
|
|
63
|
-
o(
|
|
62
|
+
const i = re(t, e());
|
|
63
|
+
o(i);
|
|
64
64
|
}, 100);
|
|
65
65
|
};
|
|
66
66
|
}
|
|
@@ -77,25 +77,25 @@ const q = {
|
|
|
77
77
|
dragHandle: "⋮⋮",
|
|
78
78
|
toolPanel: "☰"
|
|
79
79
|
};
|
|
80
|
-
function
|
|
80
|
+
function pe(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 le(t, e) {
|
|
84
84
|
if (e && e.length) {
|
|
85
|
-
const
|
|
85
|
+
const s = {};
|
|
86
86
|
return e.forEach((r) => {
|
|
87
|
-
r.type && (
|
|
88
|
-
}), { columns: e, typeMap:
|
|
89
|
-
}
|
|
90
|
-
const o = t[0] || {}, n = Object.keys(o).map((
|
|
91
|
-
const r = o[
|
|
92
|
-
return { field:
|
|
93
|
-
}),
|
|
94
|
-
return n.forEach((
|
|
95
|
-
s
|
|
96
|
-
}), { columns: n, typeMap:
|
|
97
|
-
}
|
|
98
|
-
const
|
|
87
|
+
r.type && (s[r.field] = r.type);
|
|
88
|
+
}), { columns: e, typeMap: s };
|
|
89
|
+
}
|
|
90
|
+
const o = t[0] || {}, n = Object.keys(o).map((s) => {
|
|
91
|
+
const r = o[s], l = pe(r);
|
|
92
|
+
return { field: s, header: s.charAt(0).toUpperCase() + s.slice(1), type: l };
|
|
93
|
+
}), i = {};
|
|
94
|
+
return n.forEach((s) => {
|
|
95
|
+
i[s.field] = s.type || "string";
|
|
96
|
+
}), { columns: n, typeMap: i };
|
|
97
|
+
}
|
|
98
|
+
const be = /{{\s*([^}]+)\s*}}/g, k = "__DG_EMPTY__", we = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, ge = /__(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/, me = /* @__PURE__ */ new Set([
|
|
99
99
|
"script",
|
|
100
100
|
"iframe",
|
|
101
101
|
"object",
|
|
@@ -120,76 +120,76 @@ const Ae = /{{\s*([^}]+)\s*}}/g, k = "__DG_EMPTY__", Se = /^[\w$. '?+\-*/%:()!<>
|
|
|
120
120
|
"plaintext",
|
|
121
121
|
"xmp",
|
|
122
122
|
"listing"
|
|
123
|
-
]),
|
|
124
|
-
function
|
|
123
|
+
]), Y = /^on\w+$/i, ve = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), Ee = /^\s*(javascript|vbscript|data|blob):/i;
|
|
124
|
+
function V(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, Ce(e.content), e.innerHTML;
|
|
129
129
|
}
|
|
130
|
-
function
|
|
130
|
+
function Ce(t) {
|
|
131
131
|
const e = [], o = t.querySelectorAll("*");
|
|
132
132
|
for (const n of o) {
|
|
133
|
-
const
|
|
134
|
-
if (
|
|
133
|
+
const i = n.tagName.toLowerCase();
|
|
134
|
+
if (me.has(i)) {
|
|
135
135
|
e.push(n);
|
|
136
136
|
continue;
|
|
137
137
|
}
|
|
138
|
-
if ((
|
|
139
|
-
(l) =>
|
|
138
|
+
if ((i === "svg" || n.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(n.attributes).some(
|
|
139
|
+
(l) => Y.test(l.name) || l.name === "href" || l.name === "xlink:href"
|
|
140
140
|
)) {
|
|
141
141
|
e.push(n);
|
|
142
142
|
continue;
|
|
143
143
|
}
|
|
144
|
-
const
|
|
144
|
+
const s = [];
|
|
145
145
|
for (const r of n.attributes) {
|
|
146
146
|
const l = r.name.toLowerCase();
|
|
147
|
-
if (
|
|
148
|
-
|
|
147
|
+
if (Y.test(l)) {
|
|
148
|
+
s.push(r.name);
|
|
149
149
|
continue;
|
|
150
150
|
}
|
|
151
|
-
if (
|
|
152
|
-
|
|
151
|
+
if (ve.has(l) && Ee.test(r.value)) {
|
|
152
|
+
s.push(r.name);
|
|
153
153
|
continue;
|
|
154
154
|
}
|
|
155
155
|
if (l === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(r.value)) {
|
|
156
|
-
|
|
156
|
+
s.push(r.name);
|
|
157
157
|
continue;
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
|
-
|
|
160
|
+
s.forEach((r) => n.removeAttribute(r));
|
|
161
161
|
}
|
|
162
162
|
e.forEach((n) => n.remove());
|
|
163
163
|
}
|
|
164
|
-
function
|
|
164
|
+
function ae(t, e) {
|
|
165
165
|
if (!t || t.indexOf("{{") === -1) return t;
|
|
166
|
-
const o = [], n = t.replace(
|
|
167
|
-
const d =
|
|
166
|
+
const o = [], n = t.replace(be, (l, a) => {
|
|
167
|
+
const d = ye(a, e);
|
|
168
168
|
return o.push({ expr: a.trim(), result: d }), d;
|
|
169
|
-
}),
|
|
170
|
-
return /Reflect\.|\bProxy\b|ownKeys\(/.test(t) ||
|
|
169
|
+
}), i = _e(n), s = o.length && o.every((l) => l.result === "" || l.result === k);
|
|
170
|
+
return /Reflect\.|\bProxy\b|ownKeys\(/.test(t) || s ? "" : i;
|
|
171
171
|
}
|
|
172
|
-
function
|
|
172
|
+
function ye(t, e) {
|
|
173
173
|
if (t = (t || "").trim(), !t || /\b(Reflect|Proxy|ownKeys)\b/.test(t)) return k;
|
|
174
174
|
if (t === "value") return e.value == null ? k : String(e.value);
|
|
175
175
|
if (t.startsWith("row.") && !/[()?]/.test(t) && !t.includes(":")) {
|
|
176
|
-
const n = t.slice(4),
|
|
177
|
-
return
|
|
176
|
+
const n = t.slice(4), i = e.row ? e.row[n] : void 0;
|
|
177
|
+
return i == null ? k : String(i);
|
|
178
178
|
}
|
|
179
|
-
if (t.length > 80 || !
|
|
179
|
+
if (t.length > 80 || !we.test(t) || ge.test(t)) return k;
|
|
180
180
|
const o = t.match(/\./g);
|
|
181
181
|
if (o && o.length > 1) return k;
|
|
182
182
|
try {
|
|
183
|
-
const
|
|
184
|
-
return /Reflect|Proxy|ownKeys/.test(
|
|
183
|
+
const i = new Function("value", "row", `return (${t});`)(e.value, e.row), s = i == null ? "" : String(i);
|
|
184
|
+
return /Reflect|Proxy|ownKeys/.test(s) ? k : s || k;
|
|
185
185
|
} catch {
|
|
186
186
|
return k;
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
|
-
function
|
|
189
|
+
function _e(t) {
|
|
190
190
|
return t && t.replace(new RegExp(k, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
|
|
191
191
|
}
|
|
192
|
-
function
|
|
192
|
+
function Re(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 He(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 = (n) => e ? "" :
|
|
204
|
+
function Z(t) {
|
|
205
|
+
const e = /Reflect\.|\bProxy\b|ownKeys\(/.test(t), o = (n) => e ? "" : ae(t, n);
|
|
206
206
|
return o.__blocked = e, o;
|
|
207
207
|
}
|
|
208
|
-
function
|
|
208
|
+
function Se(t) {
|
|
209
209
|
return Array.from(t.querySelectorAll("tbw-grid-column")).map((o) => {
|
|
210
210
|
const n = o.getAttribute("field") || "";
|
|
211
211
|
if (!n) return null;
|
|
212
|
-
const
|
|
212
|
+
const i = o.getAttribute("type") || void 0, r = i && (/* @__PURE__ */ new Set(["number", "string", "date", "boolean", "select", "typeahead"])).has(i) ? i : void 0, l = o.getAttribute("header") || void 0, a = o.hasAttribute("sortable"), d = o.hasAttribute("editable"), h = { field: n, type: r, header: l, sortable: a, editable: d };
|
|
213
213
|
o.hasAttribute("resizable") && (h.resizable = !0), o.hasAttribute("sizable") && (h.resizable = !0);
|
|
214
214
|
const p = o.getAttribute("options");
|
|
215
215
|
p && (h.options = p.split(",").map((f) => {
|
|
216
|
-
const [
|
|
217
|
-
return { value:
|
|
216
|
+
const [w, v] = f.includes(":") ? f.split(":") : [f.trim(), f.trim()];
|
|
217
|
+
return { value: w.trim(), label: v?.trim() || w.trim() };
|
|
218
218
|
}));
|
|
219
|
-
const
|
|
220
|
-
return
|
|
219
|
+
const b = o.querySelector("tbw-grid-column-view"), c = o.querySelector("tbw-grid-column-editor"), u = o.querySelector("tbw-grid-column-header");
|
|
220
|
+
return b && (h.__viewTemplate = b), c && (h.__editorTemplate = c), u && (h.__headerTemplate = u), h;
|
|
221
221
|
}).filter((o) => !!o);
|
|
222
222
|
}
|
|
223
|
-
function
|
|
223
|
+
function xe(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 n = t.map((
|
|
230
|
-
const
|
|
231
|
-
if (!
|
|
232
|
-
const r = { ...
|
|
233
|
-
return
|
|
228
|
+
e.forEach((i) => o[i.field] = i);
|
|
229
|
+
const n = t.map((i) => {
|
|
230
|
+
const s = o[i.field];
|
|
231
|
+
if (!s) return i;
|
|
232
|
+
const r = { ...i };
|
|
233
|
+
return s.header && !r.header && (r.header = s.header), s.type && !r.type && (r.type = s.type), r.sortable = i.sortable || s.sortable, (i.resizable === !0 || s.resizable === !0) && (r.resizable = !0), r.editable = i.editable || s.editable, s.__viewTemplate && (r.__viewTemplate = s.__viewTemplate), s.__editorTemplate && (r.__editorTemplate = s.__editorTemplate), s.__headerTemplate && (r.__headerTemplate = s.__headerTemplate), delete o[i.field], r;
|
|
234
234
|
});
|
|
235
|
-
return Object.keys(o).forEach((
|
|
235
|
+
return Object.keys(o).forEach((i) => n.push(o[i])), n;
|
|
236
236
|
}
|
|
237
|
-
function
|
|
237
|
+
function U(t, e) {
|
|
238
238
|
try {
|
|
239
239
|
t.part?.add?.(e);
|
|
240
240
|
} catch {
|
|
@@ -242,45 +242,45 @@ function X(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 Ae(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 ? Se(t) : []);
|
|
249
|
+
const e = t.__lightDomColumnsCache, o = xe(t._columns, e);
|
|
250
|
+
o.forEach((i) => {
|
|
251
|
+
i.__viewTemplate && !i.__compiledView && (i.__compiledView = Z(i.__viewTemplate.innerHTML)), i.__editorTemplate && !i.__compiledEditor && (i.__compiledEditor = Z(i.__editorTemplate.innerHTML));
|
|
252
252
|
});
|
|
253
|
-
const { columns: n } =
|
|
253
|
+
const { columns: n } = le(t._rows, o);
|
|
254
254
|
t._columns = n;
|
|
255
255
|
}
|
|
256
|
-
function
|
|
256
|
+
function Te(t) {
|
|
257
257
|
const e = t.effectiveConfig?.fitMode || t.fitMode || q.STRETCH;
|
|
258
258
|
if (e !== q.STRETCH && e !== q.FIXED || t.__didInitialAutoSize || !t.isConnected) return;
|
|
259
259
|
const o = t.headerRowEl?.children || [];
|
|
260
260
|
if (!o.length) return;
|
|
261
261
|
let n = !1;
|
|
262
|
-
t.visibleColumns.forEach((
|
|
263
|
-
if (
|
|
264
|
-
const r = o[
|
|
262
|
+
t.visibleColumns.forEach((i, s) => {
|
|
263
|
+
if (i.width) return;
|
|
264
|
+
const r = o[s];
|
|
265
265
|
let l = r ? r.scrollWidth : 0;
|
|
266
266
|
for (const a of t.rowPool) {
|
|
267
|
-
const d = a.children[
|
|
267
|
+
const d = a.children[s];
|
|
268
268
|
if (d) {
|
|
269
269
|
const h = d.scrollWidth;
|
|
270
270
|
h > l && (l = h);
|
|
271
271
|
}
|
|
272
272
|
}
|
|
273
|
-
l > 0 && (
|
|
274
|
-
}), n &&
|
|
273
|
+
l > 0 && (i.width = l + 2, i.__autoSized = !0, n = !0);
|
|
274
|
+
}), n && ce(t), t.__didInitialAutoSize = !0;
|
|
275
275
|
}
|
|
276
|
-
function
|
|
276
|
+
function ce(t) {
|
|
277
277
|
(t.effectiveConfig?.fitMode || t.fitMode || q.STRETCH) === q.STRETCH ? t.gridTemplate = t.visibleColumns.map((o) => {
|
|
278
278
|
if (o.width) return `${o.width}px`;
|
|
279
279
|
const n = o.minWidth;
|
|
280
280
|
return n != null ? `minmax(${n}px, 1fr)` : "1fr";
|
|
281
281
|
}).join(" ").trim() : t.gridTemplate = t.visibleColumns.map((o) => o.width ? `${o.width}px` : "max-content").join(" "), t.style.setProperty("--tbw-column-template", t.gridTemplate);
|
|
282
282
|
}
|
|
283
|
-
function
|
|
283
|
+
function Le(t) {
|
|
284
284
|
switch (t.type) {
|
|
285
285
|
case "number":
|
|
286
286
|
return (e) => {
|
|
@@ -305,21 +305,21 @@ function $e(t) {
|
|
|
305
305
|
case "typeahead":
|
|
306
306
|
return (e) => {
|
|
307
307
|
const o = document.createElement("select");
|
|
308
|
-
e.column.multi && (o.multiple = !0), (typeof e.column.options == "function" ? e.column.options() : e.column.options || []).forEach((
|
|
308
|
+
e.column.multi && (o.multiple = !0), (typeof e.column.options == "function" ? e.column.options() : e.column.options || []).forEach((s) => {
|
|
309
309
|
const r = document.createElement("option");
|
|
310
|
-
r.value = String(
|
|
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 i = () => {
|
|
313
313
|
if (e.column.multi) {
|
|
314
|
-
const
|
|
314
|
+
const s = [];
|
|
315
315
|
Array.from(o.selectedOptions).forEach((r) => {
|
|
316
|
-
|
|
317
|
-
}), e.commit(
|
|
316
|
+
s.push(r.value);
|
|
317
|
+
}), e.commit(s);
|
|
318
318
|
} else
|
|
319
319
|
e.commit(o.value);
|
|
320
320
|
};
|
|
321
|
-
return o.addEventListener("change",
|
|
322
|
-
|
|
321
|
+
return o.addEventListener("change", i), o.addEventListener("blur", i), o.addEventListener("keydown", (s) => {
|
|
322
|
+
s.key === "Escape" && e.cancel();
|
|
323
323
|
}), o.focus(), o;
|
|
324
324
|
};
|
|
325
325
|
default:
|
|
@@ -331,25 +331,25 @@ function $e(t) {
|
|
|
331
331
|
};
|
|
332
332
|
}
|
|
333
333
|
}
|
|
334
|
-
function
|
|
334
|
+
function ke(t, e) {
|
|
335
335
|
if (t.dispatchKeyDown?.(e))
|
|
336
336
|
return;
|
|
337
|
-
const o = t._rows.length - 1, n = t.visibleColumns.length - 1,
|
|
337
|
+
const o = t._rows.length - 1, n = t.visibleColumns.length - 1, i = t.activeEditRows !== void 0 && t.activeEditRows !== -1, r = t.visibleColumns[t.focusCol]?.type, l = e.composedPath ? e.composedPath() : [], a = l && l.length ? l[0] : e.target, d = (h) => {
|
|
338
338
|
if (!h) return !1;
|
|
339
339
|
const p = h.tagName;
|
|
340
340
|
return !!(p === "INPUT" || p === "SELECT" || p === "TEXTAREA" || h.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")) && !(i && (r === "select" || r === "typeahead") && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
|
|
343
343
|
switch (e.key) {
|
|
344
344
|
case "Tab": {
|
|
345
|
-
e.preventDefault(), !e.shiftKey ? t.focusCol < n ? t.focusCol += 1 : (typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow < o && (t.focusRow += 1, t.focusCol = 0)) : t.focusCol > 0 ? t.focusCol -= 1 : t.focusRow > 0 && (typeof t.commitActiveRowEdit == "function" && t.activeEditRows === t.focusRow && t.commitActiveRowEdit(), t.focusRow -= 1, t.focusCol = n),
|
|
345
|
+
e.preventDefault(), !e.shiftKey ? t.focusCol < n ? t.focusCol += 1 : (typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow < o && (t.focusRow += 1, t.focusCol = 0)) : t.focusCol > 0 ? t.focusCol -= 1 : t.focusRow > 0 && (typeof t.commitActiveRowEdit == "function" && t.activeEditRows === t.focusRow && t.commitActiveRowEdit(), t.focusRow -= 1, t.focusCol = n), $(t);
|
|
346
346
|
return;
|
|
347
347
|
}
|
|
348
348
|
case "ArrowDown":
|
|
349
|
-
|
|
349
|
+
i && 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
|
+
i && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow = Math.max(0, t.focusRow - 1), e.preventDefault();
|
|
353
353
|
break;
|
|
354
354
|
case "ArrowRight":
|
|
355
355
|
t.focusCol = Math.min(n, t.focusCol + 1), e.preventDefault();
|
|
@@ -372,26 +372,26 @@ function Be(t, e) {
|
|
|
372
372
|
case "Enter":
|
|
373
373
|
return typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(t.focusRow) : t.dispatchEvent(
|
|
374
374
|
new CustomEvent("activate-cell", { detail: { row: t.focusRow, col: t.focusCol } })
|
|
375
|
-
),
|
|
375
|
+
), $(t);
|
|
376
376
|
default:
|
|
377
377
|
return;
|
|
378
378
|
}
|
|
379
|
-
|
|
379
|
+
$(t);
|
|
380
380
|
}
|
|
381
381
|
}
|
|
382
|
-
function
|
|
382
|
+
function $(t) {
|
|
383
383
|
if (t.virtualization?.enabled) {
|
|
384
|
-
const { rowHeight:
|
|
384
|
+
const { rowHeight: s, container: r, viewportEl: l } = t.virtualization, a = r, d = l?.clientHeight ?? a?.clientHeight ?? 0;
|
|
385
385
|
if (a && d > 0) {
|
|
386
|
-
const h = t.focusRow *
|
|
387
|
-
h < a.scrollTop ? a.scrollTop = h : h +
|
|
386
|
+
const h = t.focusRow * s;
|
|
387
|
+
h < a.scrollTop ? a.scrollTop = h : h + s > a.scrollTop + d && (a.scrollTop = h - d + s);
|
|
388
388
|
}
|
|
389
389
|
}
|
|
390
|
-
t.activeEditRows !== void 0 && t.activeEditRows !== -1 || t.refreshVirtualWindow(!1), Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((
|
|
391
|
-
|
|
390
|
+
t.activeEditRows !== void 0 && t.activeEditRows !== -1 || t.refreshVirtualWindow(!1), Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((s) => s.classList.remove("cell-focus")), Array.from(t.bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((s) => {
|
|
391
|
+
s.setAttribute("aria-selected", "false");
|
|
392
392
|
});
|
|
393
|
-
const o = t.focusRow, n = t.virtualization.start ?? 0,
|
|
394
|
-
if (o >= n && o <
|
|
393
|
+
const o = t.focusRow, n = t.virtualization.start ?? 0, i = t.virtualization.end ?? t._rows.length;
|
|
394
|
+
if (o >= n && o < i) {
|
|
395
395
|
const r = t.bodyEl.querySelectorAll(".data-grid-row")[o - n]?.children[t.focusCol];
|
|
396
396
|
if (r) {
|
|
397
397
|
if (r.classList.add("cell-focus"), r.setAttribute("aria-selected", "true"), t.activeEditRows !== void 0 && t.activeEditRows !== -1 && r.classList.contains("editing")) {
|
|
@@ -413,87 +413,87 @@ function I(t) {
|
|
|
413
413
|
}
|
|
414
414
|
}
|
|
415
415
|
}
|
|
416
|
-
const
|
|
417
|
-
function
|
|
418
|
-
t[
|
|
416
|
+
const Pe = "__cellDisplayCache", Oe = "__cellCacheEpoch";
|
|
417
|
+
function X(t) {
|
|
418
|
+
t[Pe] = void 0, t[Oe] = void 0, t.__hasSpecialColumns = void 0;
|
|
419
419
|
}
|
|
420
|
-
function
|
|
421
|
-
const
|
|
420
|
+
function He(t, e, o, n, i) {
|
|
421
|
+
const s = Math.max(0, o - e), r = t.bodyEl, l = t.visibleColumns, a = l.length;
|
|
422
422
|
let d = t.__cachedHeaderRowCount;
|
|
423
|
-
for (d === void 0 && (d = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = d); t.rowPool.length <
|
|
423
|
+
for (d === void 0 && (d = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = d); t.rowPool.length < s; ) {
|
|
424
424
|
const p = document.createElement("div");
|
|
425
|
-
p.className = "data-grid-row", p.setAttribute("role", "row"), p.addEventListener("click", (
|
|
425
|
+
p.className = "data-grid-row", p.setAttribute("role", "row"), p.addEventListener("click", (b) => J(t, b, p, !1)), p.addEventListener("dblclick", (b) => J(t, b, p, !0)), t.rowPool.push(p);
|
|
426
426
|
}
|
|
427
|
-
if (t.rowPool.length >
|
|
428
|
-
for (let p =
|
|
429
|
-
const
|
|
430
|
-
|
|
427
|
+
if (t.rowPool.length > s) {
|
|
428
|
+
for (let p = s; p < t.rowPool.length; p++) {
|
|
429
|
+
const b = t.rowPool[p];
|
|
430
|
+
b.parentNode === r && b.remove();
|
|
431
431
|
}
|
|
432
|
-
t.rowPool.length =
|
|
432
|
+
t.rowPool.length = s;
|
|
433
433
|
}
|
|
434
|
-
const h =
|
|
435
|
-
for (let p = 0; p <
|
|
436
|
-
const
|
|
437
|
-
if (u.setAttribute("aria-rowindex", String(
|
|
434
|
+
const h = i && t.__hasRenderRowPlugins !== !1;
|
|
435
|
+
for (let p = 0; p < s; p++) {
|
|
436
|
+
const b = e + p, c = t._rows[b], u = t.rowPool[p];
|
|
437
|
+
if (u.setAttribute("aria-rowindex", String(b + d + 1)), h && i(c, u, b)) {
|
|
438
438
|
u.__epoch = n, u.__rowDataRef = c, u.parentNode !== r && r.appendChild(u);
|
|
439
439
|
continue;
|
|
440
440
|
}
|
|
441
|
-
const f = u.__epoch,
|
|
441
|
+
const f = u.__epoch, w = u.__rowDataRef, v = u.children.length, x = f === n && v === a, R = w !== c;
|
|
442
442
|
let T = !1;
|
|
443
|
-
if (
|
|
444
|
-
for (let
|
|
445
|
-
if (l[
|
|
443
|
+
if (x && R) {
|
|
444
|
+
for (let E = 0; E < a; E++)
|
|
445
|
+
if (l[E].externalView && !u.querySelector(`.cell[data-col="${E}"] [data-external-view]`)) {
|
|
446
446
|
T = !0;
|
|
447
447
|
break;
|
|
448
448
|
}
|
|
449
449
|
}
|
|
450
|
-
if (!
|
|
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 C = 0; C <
|
|
450
|
+
if (!x || T) {
|
|
451
|
+
const E = u.querySelector(".cell.editing"), y = t.activeEditRows === b;
|
|
452
|
+
if (E && !y)
|
|
453
|
+
u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), M(t, u, c, b), u.__epoch = n, u.__rowDataRef = c;
|
|
454
|
+
else if (E && y)
|
|
455
|
+
W(t, u, c, b), u.__rowDataRef = c;
|
|
456
|
+
else if (u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), M(t, u, c, b), u.__epoch = n, u.__rowDataRef = c, y) {
|
|
457
|
+
const _ = u.children;
|
|
458
|
+
for (let C = 0; C < _.length; C++) {
|
|
459
459
|
const L = t.visibleColumns[C];
|
|
460
|
-
L && L.editable &&
|
|
460
|
+
L && L.editable && O(t, c, b, L, _[C]);
|
|
461
461
|
}
|
|
462
462
|
}
|
|
463
|
-
} else if (
|
|
464
|
-
const
|
|
465
|
-
if (
|
|
466
|
-
|
|
467
|
-
else if (
|
|
468
|
-
const
|
|
469
|
-
for (let C = 0; C <
|
|
463
|
+
} else if (R) {
|
|
464
|
+
const E = u.querySelector(".cell.editing"), y = t.activeEditRows === b;
|
|
465
|
+
if (E && !y)
|
|
466
|
+
M(t, u, c, b), u.__epoch = n, u.__rowDataRef = c;
|
|
467
|
+
else if (W(t, u, c, b), u.__rowDataRef = c, y && !E) {
|
|
468
|
+
const _ = u.children;
|
|
469
|
+
for (let C = 0; C < _.length; C++) {
|
|
470
470
|
const L = t.visibleColumns[C];
|
|
471
|
-
L && L.editable &&
|
|
471
|
+
L && L.editable && O(t, c, b, L, _[C]);
|
|
472
472
|
}
|
|
473
473
|
}
|
|
474
474
|
} else {
|
|
475
|
-
const
|
|
476
|
-
if (
|
|
477
|
-
|
|
478
|
-
else if (
|
|
479
|
-
const
|
|
480
|
-
for (let C = 0; C <
|
|
475
|
+
const E = u.querySelector(".cell.editing"), y = t.activeEditRows === b;
|
|
476
|
+
if (E && !y)
|
|
477
|
+
M(t, u, c, b), u.__epoch = n, u.__rowDataRef = c;
|
|
478
|
+
else if (W(t, u, c, b), y && !E) {
|
|
479
|
+
const _ = u.children;
|
|
480
|
+
for (let C = 0; C < _.length; C++) {
|
|
481
481
|
const L = t.visibleColumns[C];
|
|
482
|
-
L && L.editable &&
|
|
482
|
+
L && L.editable && O(t, c, b, L, _[C]);
|
|
483
483
|
}
|
|
484
484
|
}
|
|
485
485
|
}
|
|
486
|
-
const
|
|
487
|
-
|
|
486
|
+
const g = t._changedRowIndices.has(b), m = u.classList.contains("changed");
|
|
487
|
+
g !== m && u.classList.toggle("changed", g), u.parentNode !== r && r.appendChild(u);
|
|
488
488
|
}
|
|
489
489
|
}
|
|
490
|
-
function
|
|
491
|
-
const
|
|
490
|
+
function W(t, e, o, n) {
|
|
491
|
+
const i = e.children, s = t.visibleColumns, r = s.length, l = i.length, a = r < l ? r : l, d = t.focusRow, h = t.focusCol;
|
|
492
492
|
let p = t.__hasSpecialColumns;
|
|
493
493
|
if (p === void 0) {
|
|
494
494
|
p = !1;
|
|
495
495
|
for (let c = 0; c < r; c++) {
|
|
496
|
-
const u =
|
|
496
|
+
const u = s[c];
|
|
497
497
|
if (u.__viewTemplate || u.__compiledView || u.viewRenderer || u.externalView || u.format || u.type === "date" || u.type === "boolean") {
|
|
498
498
|
p = !0;
|
|
499
499
|
break;
|
|
@@ -501,86 +501,86 @@ function F(t, e, o, n) {
|
|
|
501
501
|
}
|
|
502
502
|
t.__hasSpecialColumns = p;
|
|
503
503
|
}
|
|
504
|
-
const
|
|
504
|
+
const b = String(n);
|
|
505
505
|
if (!p) {
|
|
506
506
|
for (let c = 0; c < a; c++) {
|
|
507
|
-
const u =
|
|
508
|
-
u.textContent = f == null ? "" : String(f), u.getAttribute("data-row") !==
|
|
509
|
-
const
|
|
510
|
-
|
|
507
|
+
const u = i[c], f = o[s[c].field];
|
|
508
|
+
u.textContent = f == null ? "" : String(f), u.getAttribute("data-row") !== b && u.setAttribute("data-row", b);
|
|
509
|
+
const w = d === n && h === c, v = u.classList.contains("cell-focus");
|
|
510
|
+
w !== v && (u.classList.toggle("cell-focus", w), u.setAttribute("aria-selected", String(w)));
|
|
511
511
|
}
|
|
512
512
|
return;
|
|
513
513
|
}
|
|
514
514
|
for (let c = 0; c < a; c++)
|
|
515
|
-
if (
|
|
516
|
-
|
|
515
|
+
if (s[c].externalView && !i[c].querySelector("[data-external-view]")) {
|
|
516
|
+
M(t, e, o, n);
|
|
517
517
|
return;
|
|
518
518
|
}
|
|
519
519
|
for (let c = 0; c < a; c++) {
|
|
520
|
-
const u =
|
|
521
|
-
f.getAttribute("data-row") !==
|
|
522
|
-
const
|
|
523
|
-
if (
|
|
520
|
+
const u = s[c], f = i[c];
|
|
521
|
+
f.getAttribute("data-row") !== b && f.setAttribute("data-row", b);
|
|
522
|
+
const w = d === n && h === c, v = f.classList.contains("cell-focus");
|
|
523
|
+
if (w !== v && (f.classList.toggle("cell-focus", w), f.setAttribute("aria-selected", String(w))), f.classList.contains("editing")) continue;
|
|
524
524
|
if (u.viewRenderer) {
|
|
525
|
-
const
|
|
526
|
-
typeof T == "string" ? f.innerHTML =
|
|
525
|
+
const R = o[u.field], T = u.viewRenderer({ row: o, value: R, field: u.field, column: u });
|
|
526
|
+
typeof T == "string" ? f.innerHTML = V(T) : T ? (f.innerHTML = "", f.appendChild(T)) : f.textContent = R == null ? "" : String(R);
|
|
527
527
|
continue;
|
|
528
528
|
}
|
|
529
529
|
if (u.__viewTemplate || u.__compiledView || u.externalView)
|
|
530
530
|
continue;
|
|
531
|
-
const
|
|
532
|
-
let
|
|
531
|
+
const S = o[u.field];
|
|
532
|
+
let x;
|
|
533
533
|
if (u.format)
|
|
534
534
|
try {
|
|
535
|
-
const
|
|
536
|
-
|
|
535
|
+
const R = u.format(S, o);
|
|
536
|
+
x = R == null ? "" : String(R);
|
|
537
537
|
} catch {
|
|
538
|
-
|
|
538
|
+
x = S == null ? "" : String(S);
|
|
539
539
|
}
|
|
540
540
|
else if (u.type === "date") {
|
|
541
|
-
if (
|
|
542
|
-
|
|
543
|
-
else if (
|
|
544
|
-
|
|
541
|
+
if (S == null || S === "")
|
|
542
|
+
x = "";
|
|
543
|
+
else if (S instanceof Date)
|
|
544
|
+
x = isNaN(S.getTime()) ? "" : S.toLocaleDateString();
|
|
545
545
|
else {
|
|
546
|
-
const
|
|
547
|
-
|
|
546
|
+
const R = new Date(S);
|
|
547
|
+
x = isNaN(R.getTime()) ? "" : R.toLocaleDateString();
|
|
548
548
|
}
|
|
549
|
-
f.textContent =
|
|
549
|
+
f.textContent = x;
|
|
550
550
|
} else if (u.type === "boolean") {
|
|
551
|
-
const
|
|
552
|
-
f.innerHTML = `<span role="checkbox" aria-checked="${
|
|
551
|
+
const R = !!S;
|
|
552
|
+
f.innerHTML = `<span role="checkbox" aria-checked="${R}" aria-label="${R}">${R ? "🗹" : "☐"}</span>`;
|
|
553
553
|
} else
|
|
554
|
-
|
|
554
|
+
x = S == null ? "" : String(S), f.textContent = x;
|
|
555
555
|
}
|
|
556
556
|
}
|
|
557
|
-
function
|
|
557
|
+
function M(t, e, o, n) {
|
|
558
558
|
e.innerHTML = "";
|
|
559
|
-
const
|
|
560
|
-
for (let p = 0; p <
|
|
561
|
-
const
|
|
562
|
-
c.className = "cell",
|
|
563
|
-
const u =
|
|
559
|
+
const i = t.visibleColumns, s = i.length, r = t.focusRow, l = t.focusCol, a = t.effectiveConfig?.editOn || t.editOn, d = t, h = document.createDocumentFragment();
|
|
560
|
+
for (let p = 0; p < s; p++) {
|
|
561
|
+
const b = i[p], c = document.createElement("div");
|
|
562
|
+
c.className = "cell", U(c, "cell"), c.setAttribute("role", "gridcell"), c.setAttribute("aria-colindex", String(p + 1)), c.setAttribute("data-col", String(p)), c.setAttribute("data-row", String(n)), b.type, b.type && c.setAttribute("data-type", b.type);
|
|
563
|
+
const u = b.sticky;
|
|
564
564
|
u === "left" ? c.classList.add("sticky-left") : u === "right" && c.classList.add("sticky-right");
|
|
565
|
-
let f = o[
|
|
566
|
-
const
|
|
567
|
-
if (
|
|
565
|
+
let f = o[b.field];
|
|
566
|
+
const w = b.format;
|
|
567
|
+
if (w)
|
|
568
568
|
try {
|
|
569
|
-
f =
|
|
569
|
+
f = w(f, o);
|
|
570
570
|
} catch {
|
|
571
571
|
}
|
|
572
|
-
const
|
|
572
|
+
const v = b.__compiledView, S = b.__viewTemplate, x = b.viewRenderer, R = b.externalView;
|
|
573
573
|
let T = !1;
|
|
574
|
-
if (
|
|
575
|
-
const
|
|
576
|
-
typeof
|
|
577
|
-
} else if (
|
|
578
|
-
const
|
|
579
|
-
|
|
580
|
-
const
|
|
581
|
-
if (
|
|
574
|
+
if (x) {
|
|
575
|
+
const g = x({ row: o, value: f, field: b.field, column: b });
|
|
576
|
+
typeof g == "string" ? (c.innerHTML = V(g), T = !0) : g ? c.appendChild(g) : c.textContent = f == null ? "" : String(f);
|
|
577
|
+
} else if (R) {
|
|
578
|
+
const g = R, m = document.createElement("div");
|
|
579
|
+
m.setAttribute("data-external-view", ""), m.setAttribute("data-field", b.field), c.appendChild(m);
|
|
580
|
+
const E = { row: o, value: f, field: b.field, column: b };
|
|
581
|
+
if (g.mount)
|
|
582
582
|
try {
|
|
583
|
-
|
|
583
|
+
g.mount({ placeholder: m, context: E, spec: g });
|
|
584
584
|
} catch {
|
|
585
585
|
}
|
|
586
586
|
else
|
|
@@ -590,74 +590,74 @@ function O(t, e, o, n) {
|
|
|
590
590
|
new CustomEvent("mount-external-view", {
|
|
591
591
|
bubbles: !0,
|
|
592
592
|
composed: !0,
|
|
593
|
-
detail: { placeholder:
|
|
593
|
+
detail: { placeholder: m, spec: g, context: E }
|
|
594
594
|
})
|
|
595
595
|
);
|
|
596
596
|
} catch {
|
|
597
597
|
}
|
|
598
598
|
});
|
|
599
|
-
|
|
600
|
-
} else if (
|
|
601
|
-
const
|
|
602
|
-
c.innerHTML =
|
|
603
|
-
} else if (
|
|
604
|
-
const
|
|
605
|
-
/Reflect\.|\bProxy\b|ownKeys\(/.test(
|
|
606
|
-
} else if (
|
|
599
|
+
m.setAttribute("data-mounted", "");
|
|
600
|
+
} else if (v) {
|
|
601
|
+
const g = v({ row: o, value: f, field: b.field, column: b }), m = v.__blocked;
|
|
602
|
+
c.innerHTML = m ? "" : V(g), T = !0, m && (c.textContent = "", c.setAttribute("data-blocked-template", ""));
|
|
603
|
+
} else if (S) {
|
|
604
|
+
const g = S.innerHTML;
|
|
605
|
+
/Reflect\.|\bProxy\b|ownKeys\(/.test(g) ? (c.textContent = "", c.setAttribute("data-blocked-template", "")) : (c.innerHTML = V(ae(g, { row: o, value: f })), T = !0);
|
|
606
|
+
} else if (b.type === "date")
|
|
607
607
|
if (f == null || f === "")
|
|
608
608
|
c.textContent = "";
|
|
609
609
|
else {
|
|
610
|
-
let
|
|
611
|
-
if (f instanceof Date)
|
|
610
|
+
let g = null;
|
|
611
|
+
if (f instanceof Date) g = f;
|
|
612
612
|
else if (typeof f == "number" || typeof f == "string") {
|
|
613
|
-
const
|
|
614
|
-
isNaN(
|
|
613
|
+
const m = new Date(f);
|
|
614
|
+
isNaN(m.getTime()) || (g = m);
|
|
615
615
|
}
|
|
616
|
-
c.textContent =
|
|
616
|
+
c.textContent = g ? g.toLocaleDateString() : "";
|
|
617
617
|
}
|
|
618
|
-
else if (
|
|
619
|
-
const
|
|
620
|
-
c.innerHTML = `<span role="checkbox" aria-checked="${
|
|
618
|
+
else if (b.type === "boolean") {
|
|
619
|
+
const g = !!f;
|
|
620
|
+
c.innerHTML = `<span role="checkbox" aria-checked="${g}" aria-label="${g}">${g ? "🗹" : "☐"}</span>`;
|
|
621
621
|
} else
|
|
622
622
|
c.textContent = f == null ? "" : String(f);
|
|
623
623
|
if (T) {
|
|
624
|
-
|
|
625
|
-
const
|
|
626
|
-
/Proxy|Reflect\.ownKeys/.test(
|
|
624
|
+
Re(c);
|
|
625
|
+
const g = c.textContent || "";
|
|
626
|
+
/Proxy|Reflect\.ownKeys/.test(g) && (c.textContent = g.replace(/Proxy|Reflect\.ownKeys/g, "").trim(), /Proxy|Reflect\.ownKeys/.test(c.textContent || "") && (c.textContent = ""));
|
|
627
627
|
}
|
|
628
|
-
c.hasAttribute("data-blocked-template") && (c.textContent || "").trim().length && (c.textContent = ""),
|
|
628
|
+
c.hasAttribute("data-blocked-template") && (c.textContent || "").trim().length && (c.textContent = ""), b.editable ? (c.tabIndex = 0, c.addEventListener("mousedown", () => {
|
|
629
629
|
if (c.classList.contains("editing")) return;
|
|
630
|
-
const
|
|
631
|
-
isNaN(
|
|
632
|
-
}), a === "click" ? c.addEventListener("click", (
|
|
630
|
+
const g = Number(c.getAttribute("data-row")), m = Number(c.getAttribute("data-col"));
|
|
631
|
+
isNaN(g) || isNaN(m) || (t.focusRow = g, t.focusCol = m, $(t));
|
|
632
|
+
}), a === "click" ? c.addEventListener("click", (g) => {
|
|
633
633
|
if (c.classList.contains("editing")) return;
|
|
634
|
-
|
|
635
|
-
const
|
|
636
|
-
if (isNaN(
|
|
637
|
-
const
|
|
638
|
-
!
|
|
639
|
-
}) : c.addEventListener("dblclick", (
|
|
640
|
-
|
|
641
|
-
const
|
|
642
|
-
if (isNaN(
|
|
643
|
-
const
|
|
644
|
-
if (!
|
|
645
|
-
|
|
646
|
-
const
|
|
647
|
-
if (
|
|
648
|
-
const
|
|
649
|
-
for (let C = 0; C <
|
|
634
|
+
g.stopPropagation();
|
|
635
|
+
const m = Number(c.getAttribute("data-row")), E = Number(c.getAttribute("data-col"));
|
|
636
|
+
if (isNaN(m) || isNaN(E)) return;
|
|
637
|
+
const y = t._rows[m], _ = t.visibleColumns[E];
|
|
638
|
+
!y || !_ || (t.focusRow = m, t.focusCol = E, O(t, y, m, _, c));
|
|
639
|
+
}) : c.addEventListener("dblclick", (g) => {
|
|
640
|
+
g.stopPropagation();
|
|
641
|
+
const m = Number(c.getAttribute("data-row"));
|
|
642
|
+
if (isNaN(m)) return;
|
|
643
|
+
const E = t._rows[m];
|
|
644
|
+
if (!E) return;
|
|
645
|
+
z(t, m, E);
|
|
646
|
+
const y = t.findRenderedRowElement?.(m);
|
|
647
|
+
if (y) {
|
|
648
|
+
const _ = y.children;
|
|
649
|
+
for (let C = 0; C < _.length; C++) {
|
|
650
650
|
const L = t.visibleColumns[C];
|
|
651
|
-
L && L.editable &&
|
|
651
|
+
L && L.editable && O(t, E, m, L, _[C]);
|
|
652
652
|
}
|
|
653
653
|
}
|
|
654
|
-
}), c.addEventListener("keydown", (
|
|
655
|
-
const
|
|
656
|
-
if (isNaN(
|
|
657
|
-
const
|
|
658
|
-
if (!(!
|
|
659
|
-
if ((
|
|
660
|
-
|
|
654
|
+
}), c.addEventListener("keydown", (g) => {
|
|
655
|
+
const m = Number(c.getAttribute("data-row")), E = Number(c.getAttribute("data-col"));
|
|
656
|
+
if (isNaN(m) || isNaN(E)) return;
|
|
657
|
+
const y = t._rows[m], _ = t.visibleColumns[E];
|
|
658
|
+
if (!(!y || !_)) {
|
|
659
|
+
if ((_.type === "select" || _.type === "typeahead") && !c.classList.contains("editing") && g.key === "Enter") {
|
|
660
|
+
g.preventDefault(), t.activeEditRows !== m && z(t, m, y), O(t, y, m, _, c), setTimeout(() => {
|
|
661
661
|
const C = c.querySelector("select");
|
|
662
662
|
try {
|
|
663
663
|
C?.showPicker?.();
|
|
@@ -667,41 +667,41 @@ function O(t, e, o, n) {
|
|
|
667
667
|
}, 0);
|
|
668
668
|
return;
|
|
669
669
|
}
|
|
670
|
-
if (
|
|
671
|
-
|
|
672
|
-
const C = !
|
|
673
|
-
|
|
670
|
+
if (_.type === "boolean" && g.key === " " && !c.classList.contains("editing")) {
|
|
671
|
+
g.preventDefault(), t.activeEditRows !== m && z(t, m, y);
|
|
672
|
+
const C = !y[_.field];
|
|
673
|
+
j(t, m, _, C, y), c.innerHTML = `<span role="checkbox" aria-checked="${C}" aria-label="${C}">${C ? "🗹" : "☐"}</span>`;
|
|
674
674
|
return;
|
|
675
675
|
}
|
|
676
|
-
if (
|
|
677
|
-
|
|
676
|
+
if (g.key === "Enter" && !c.classList.contains("editing")) {
|
|
677
|
+
g.preventDefault(), g.stopPropagation(), t.focusRow = m, t.focusCol = E, typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(m) : O(t, y, m, _, c);
|
|
678
678
|
return;
|
|
679
679
|
}
|
|
680
|
-
if (
|
|
681
|
-
|
|
680
|
+
if (g.key === "F2" && !c.classList.contains("editing")) {
|
|
681
|
+
g.preventDefault(), O(t, y, m, _, c);
|
|
682
682
|
return;
|
|
683
683
|
}
|
|
684
684
|
}
|
|
685
|
-
})) :
|
|
685
|
+
})) : b.type === "boolean" && (c.hasAttribute("tabindex") || (c.tabIndex = 0)), r === n && l === p ? c.setAttribute("aria-selected", "true") : c.setAttribute("aria-selected", "false"), h.appendChild(c);
|
|
686
686
|
}
|
|
687
687
|
e.appendChild(h);
|
|
688
688
|
}
|
|
689
|
-
function
|
|
689
|
+
function J(t, e, o, n) {
|
|
690
690
|
if (e.target?.closest(".resize-handle")) return;
|
|
691
|
-
const
|
|
692
|
-
if (!
|
|
693
|
-
const
|
|
694
|
-
if (isNaN(
|
|
695
|
-
const r = t._rows[
|
|
691
|
+
const i = o.querySelector(".cell[data-row]");
|
|
692
|
+
if (!i) return;
|
|
693
|
+
const s = Number(i.getAttribute("data-row"));
|
|
694
|
+
if (isNaN(s)) return;
|
|
695
|
+
const r = t._rows[s];
|
|
696
696
|
if (!r) return;
|
|
697
697
|
const l = e.target?.closest(".cell[data-col]");
|
|
698
698
|
if (l) {
|
|
699
699
|
if (l.classList.contains("editing")) return;
|
|
700
700
|
const d = Number(l.getAttribute("data-col"));
|
|
701
701
|
if (!isNaN(d)) {
|
|
702
|
-
if (t.dispatchCellClick?.(e,
|
|
702
|
+
if (t.dispatchCellClick?.(e, s, d, l))
|
|
703
703
|
return;
|
|
704
|
-
t.focusRow =
|
|
704
|
+
t.focusRow = s, t.focusCol = d, $(t);
|
|
705
705
|
}
|
|
706
706
|
}
|
|
707
707
|
if (o.querySelector(".cell.editing")) {
|
|
@@ -710,11 +710,11 @@ function ne(t, e, o, n) {
|
|
|
710
710
|
d.forEach((h) => h.classList.remove("editing"));
|
|
711
711
|
}
|
|
712
712
|
const a = t.effectiveConfig?.editOn || t.editOn || "doubleClick";
|
|
713
|
-
if (a === "click" || a === "doubleClick" && n)
|
|
713
|
+
if (a === "click" || a === "doubleClick" && n) z(t, s, r);
|
|
714
714
|
else return;
|
|
715
715
|
Array.from(o.children).forEach((d, h) => {
|
|
716
716
|
const p = t.visibleColumns[h];
|
|
717
|
-
p && p.editable &&
|
|
717
|
+
p && p.editable && O(t, r, s, p, d);
|
|
718
718
|
}), l && queueMicrotask(() => {
|
|
719
719
|
const d = o.querySelector(`.cell[data-col="${t.focusCol}"]`);
|
|
720
720
|
if (d?.classList.contains("editing")) {
|
|
@@ -728,13 +728,13 @@ function ne(t, e, o, n) {
|
|
|
728
728
|
}
|
|
729
729
|
});
|
|
730
730
|
}
|
|
731
|
-
function
|
|
731
|
+
function z(t, e, o) {
|
|
732
732
|
t.activeEditRows !== e && (t.rowEditSnapshots.set(e, { ...o }), t.activeEditRows = e);
|
|
733
733
|
}
|
|
734
734
|
function N(t, e, o) {
|
|
735
735
|
if (t.activeEditRows !== e) return;
|
|
736
|
-
const n = t.rowEditSnapshots.get(e),
|
|
737
|
-
if (!o &&
|
|
736
|
+
const n = t.rowEditSnapshots.get(e), i = t._rows[e], s = t.findRenderedRowElement?.(e);
|
|
737
|
+
if (!o && s && i && s.querySelectorAll(".cell.editing").forEach((l) => {
|
|
738
738
|
const a = Number(l.getAttribute("data-col"));
|
|
739
739
|
if (isNaN(a)) return;
|
|
740
740
|
const d = t.visibleColumns[a];
|
|
@@ -742,17 +742,17 @@ function N(t, e, o) {
|
|
|
742
742
|
const h = l.querySelector("input,textarea,select");
|
|
743
743
|
if (h) {
|
|
744
744
|
let p;
|
|
745
|
-
h instanceof HTMLInputElement && h.type === "checkbox" ? p = h.checked : (p = h.value, d.type === "number" && p !== "" && (p = Number(p))),
|
|
745
|
+
h instanceof HTMLInputElement && h.type === "checkbox" ? p = h.checked : (p = h.value, d.type === "number" && p !== "" && (p = Number(p))), i[d.field] !== p && j(t, e, d, p, i);
|
|
746
746
|
}
|
|
747
|
-
}), o && n &&
|
|
748
|
-
Object.keys(n).forEach((r) =>
|
|
747
|
+
}), o && n && i)
|
|
748
|
+
Object.keys(n).forEach((r) => i[r] = n[r]), t._changedRowIndices.delete(e), X(t);
|
|
749
749
|
else if (!o) {
|
|
750
750
|
const r = t._changedRowIndices.has(e);
|
|
751
751
|
t.dispatchEvent(
|
|
752
752
|
new CustomEvent("row-commit", {
|
|
753
753
|
detail: {
|
|
754
754
|
rowIndex: e,
|
|
755
|
-
row:
|
|
755
|
+
row: i,
|
|
756
756
|
changed: r,
|
|
757
757
|
changedRows: t.changedRows,
|
|
758
758
|
changedRowIndices: t.changedRowIndices
|
|
@@ -760,7 +760,7 @@ function N(t, e, o) {
|
|
|
760
760
|
})
|
|
761
761
|
);
|
|
762
762
|
}
|
|
763
|
-
t.rowEditSnapshots.delete(e), t.activeEditRows = -1,
|
|
763
|
+
t.rowEditSnapshots.delete(e), t.activeEditRows = -1, s && (M(t, s, t._rows[e], e), t._changedRowIndices.has(e) ? s.classList.add("changed") : s.classList.remove("changed")), queueMicrotask(() => {
|
|
764
764
|
try {
|
|
765
765
|
const r = t.focusRow, l = t.focusCol, a = t.findRenderedRowElement?.(r);
|
|
766
766
|
if (a) {
|
|
@@ -772,18 +772,18 @@ function N(t, e, o) {
|
|
|
772
772
|
}
|
|
773
773
|
});
|
|
774
774
|
}
|
|
775
|
-
function
|
|
776
|
-
const
|
|
777
|
-
if (s
|
|
778
|
-
s
|
|
775
|
+
function j(t, e, o, n, i) {
|
|
776
|
+
const s = o.field;
|
|
777
|
+
if (i[s] === n) return;
|
|
778
|
+
i[s] = n;
|
|
779
779
|
const l = !t._changedRowIndices.has(e);
|
|
780
780
|
t._changedRowIndices.add(e);
|
|
781
781
|
const a = t.findRenderedRowElement?.(e);
|
|
782
782
|
a && a.classList.add("changed"), t.dispatchEvent(
|
|
783
783
|
new CustomEvent("cell-commit", {
|
|
784
784
|
detail: {
|
|
785
|
-
row:
|
|
786
|
-
field:
|
|
785
|
+
row: i,
|
|
786
|
+
field: s,
|
|
787
787
|
value: n,
|
|
788
788
|
rowIndex: e,
|
|
789
789
|
changedRows: t.changedRows,
|
|
@@ -793,59 +793,59 @@ function J(t, e, o, n, s) {
|
|
|
793
793
|
})
|
|
794
794
|
);
|
|
795
795
|
}
|
|
796
|
-
function
|
|
797
|
-
if (!n.editable || (t.activeEditRows !== o &&
|
|
798
|
-
const
|
|
799
|
-
|
|
796
|
+
function O(t, e, o, n, i) {
|
|
797
|
+
if (!n.editable || (t.activeEditRows !== o && z(t, o, e), i.classList.contains("editing"))) return;
|
|
798
|
+
const s = e[n.field];
|
|
799
|
+
i.classList.add("editing");
|
|
800
800
|
let r = !1;
|
|
801
801
|
const l = (c) => {
|
|
802
|
-
r || t.activeEditRows === -1 ||
|
|
802
|
+
r || t.activeEditRows === -1 || j(t, o, n, c, e);
|
|
803
803
|
}, a = () => {
|
|
804
|
-
r = !0, e[n.field] =
|
|
805
|
-
const c =
|
|
806
|
-
c && (typeof HTMLInputElement < "u" && c instanceof HTMLInputElement && c.type === "checkbox" ? c.checked = !!
|
|
804
|
+
r = !0, e[n.field] = s;
|
|
805
|
+
const c = i.querySelector("input,textarea,select");
|
|
806
|
+
c && (typeof HTMLInputElement < "u" && c instanceof HTMLInputElement && c.type === "checkbox" ? c.checked = !!s : "value" in c && (c.value = s ?? ""));
|
|
807
807
|
}, d = document.createElement("div");
|
|
808
|
-
d.style.display = "contents",
|
|
808
|
+
d.style.display = "contents", i.innerHTML = "", i.appendChild(d), d.addEventListener("keydown", (c) => {
|
|
809
809
|
c.key === "Enter" && (c.stopPropagation(), c.preventDefault(), r = !0, N(t, o, !1)), c.key === "Escape" && (c.stopPropagation(), c.preventDefault(), a(), N(t, o, !0));
|
|
810
810
|
});
|
|
811
|
-
const h = n.__editorTemplate, p = n.editor || (h ? "template" :
|
|
811
|
+
const h = n.__editorTemplate, p = n.editor || (h ? "template" : Le(n)), b = s;
|
|
812
812
|
if (p === "template" && h) {
|
|
813
813
|
const c = h.cloneNode(!0), u = n.__compiledEditor;
|
|
814
|
-
u ? c.innerHTML = u({ row: e, value:
|
|
815
|
-
|
|
816
|
-
const
|
|
817
|
-
return
|
|
814
|
+
u ? c.innerHTML = u({ row: e, value: s, field: n.field, column: n }) : c.querySelectorAll("*").forEach((w) => {
|
|
815
|
+
w.childNodes.length === 1 && w.firstChild?.nodeType === Node.TEXT_NODE && (w.textContent = w.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (v, S) => {
|
|
816
|
+
const x = e[S];
|
|
817
|
+
return x == null ? "" : String(x);
|
|
818
818
|
}) || "");
|
|
819
819
|
});
|
|
820
820
|
const f = c.querySelector("input,textarea,select");
|
|
821
821
|
if (f) {
|
|
822
|
-
const
|
|
823
|
-
|
|
824
|
-
const
|
|
825
|
-
l(
|
|
826
|
-
}), f.addEventListener("keydown", (
|
|
827
|
-
if (
|
|
828
|
-
|
|
829
|
-
const
|
|
830
|
-
l(
|
|
822
|
+
const w = typeof HTMLInputElement < "u";
|
|
823
|
+
w && f instanceof HTMLInputElement && f.type === "checkbox" ? f.checked = !!s : "value" in f && (f.value = s ?? ""), f.addEventListener("blur", () => {
|
|
824
|
+
const v = w && f instanceof HTMLInputElement && f.type === "checkbox" ? f.checked : f.value;
|
|
825
|
+
l(v);
|
|
826
|
+
}), f.addEventListener("keydown", (v) => {
|
|
827
|
+
if (v.key === "Enter") {
|
|
828
|
+
v.stopPropagation(), v.preventDefault(), r = !0;
|
|
829
|
+
const S = w && f instanceof HTMLInputElement && f.type === "checkbox" ? f.checked : f.value;
|
|
830
|
+
l(S), N(t, o, !1);
|
|
831
831
|
}
|
|
832
|
-
|
|
833
|
-
}),
|
|
834
|
-
const
|
|
835
|
-
l(
|
|
832
|
+
v.key === "Escape" && (v.stopPropagation(), v.preventDefault(), a(), N(t, o, !0));
|
|
833
|
+
}), w && f instanceof HTMLInputElement && f.type === "checkbox" && f.addEventListener("change", () => {
|
|
834
|
+
const v = f.checked;
|
|
835
|
+
l(v);
|
|
836
836
|
}), setTimeout(() => f.focus(), 0);
|
|
837
837
|
}
|
|
838
838
|
d.appendChild(c);
|
|
839
839
|
} else if (typeof p == "string") {
|
|
840
840
|
const c = document.createElement(p);
|
|
841
|
-
c.value =
|
|
841
|
+
c.value = b, c.addEventListener("change", () => l(c.value)), d.appendChild(c);
|
|
842
842
|
} else if (typeof p == "function") {
|
|
843
|
-
const c = p({ row: e, value:
|
|
843
|
+
const c = p({ row: e, value: b, field: n.field, column: n, commit: l, cancel: a });
|
|
844
844
|
typeof c == "string" ? d.innerHTML = c : d.appendChild(c);
|
|
845
845
|
} else if (p && typeof p == "object") {
|
|
846
846
|
const c = document.createElement("div");
|
|
847
847
|
c.setAttribute("data-external-editor", ""), c.setAttribute("data-field", n.field), d.appendChild(c);
|
|
848
|
-
const u = { row: e, value:
|
|
848
|
+
const u = { row: e, value: b, field: n.field, column: n, commit: l, cancel: a };
|
|
849
849
|
if (p.mount)
|
|
850
850
|
try {
|
|
851
851
|
p.mount({ placeholder: c, context: u, spec: p });
|
|
@@ -857,62 +857,62 @@ function M(t, e, o, n, s) {
|
|
|
857
857
|
);
|
|
858
858
|
}
|
|
859
859
|
}
|
|
860
|
-
function
|
|
861
|
-
!t.sortState || t.sortState.field !== e.field ? (t.sortState || (t.__originalOrder = t._rows.slice()),
|
|
860
|
+
function Q(t, e) {
|
|
861
|
+
!t.sortState || t.sortState.field !== e.field ? (t.sortState || (t.__originalOrder = t._rows.slice()), ee(t, e, 1)) : t.sortState.direction === 1 ? ee(t, e, -1) : (t.sortState = null, t.__rowRenderEpoch++, t.rowPool.forEach((n) => n.__epoch = -1), t._rows = t.__originalOrder.slice(), K(t), t.headerRowEl?.querySelectorAll('[role="columnheader"].sortable')?.forEach((n) => {
|
|
862
862
|
n.getAttribute("aria-sort") ? (n.getAttribute("aria-sort") === "ascending" || n.getAttribute("aria-sort") === "descending") && (t.sortState || n.setAttribute("aria-sort", "none")) : n.setAttribute("aria-sort", "none");
|
|
863
863
|
}), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
864
864
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: 0 } })
|
|
865
865
|
), t.requestStateChange?.());
|
|
866
866
|
}
|
|
867
|
-
function
|
|
867
|
+
function ee(t, e, o) {
|
|
868
868
|
t.sortState = { field: e.field, direction: o };
|
|
869
|
-
const n = e.sortComparator || ((
|
|
870
|
-
t._rows.sort((
|
|
869
|
+
const n = e.sortComparator || ((i, s) => i == null && s == null ? 0 : i == null ? -1 : s == null || i > s ? 1 : i < s ? -1 : 0);
|
|
870
|
+
t._rows.sort((i, s) => n(i[e.field], s[e.field], i, s) * o), t.__rowRenderEpoch++, t.rowPool.forEach((i) => i.__epoch = -1), K(t), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
871
871
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: o } })
|
|
872
872
|
), t.requestStateChange?.();
|
|
873
873
|
}
|
|
874
|
-
function
|
|
874
|
+
function Me(t, e) {
|
|
875
875
|
typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
|
|
876
876
|
}
|
|
877
|
-
function
|
|
877
|
+
function K(t) {
|
|
878
878
|
t.headerRowEl = t.findHeaderRow();
|
|
879
879
|
const e = t.headerRowEl;
|
|
880
880
|
e.innerHTML = "", t.visibleColumns.forEach((o, n) => {
|
|
881
|
-
const
|
|
882
|
-
|
|
883
|
-
const
|
|
884
|
-
if (
|
|
881
|
+
const i = document.createElement("div");
|
|
882
|
+
i.className = "cell", U(i, "header-cell"), i.setAttribute("role", "columnheader"), i.setAttribute("aria-colindex", String(n + 1)), i.setAttribute("data-field", o.field), i.setAttribute("data-col", String(n)), o.sticky === "left" ? i.classList.add("sticky-left") : o.sticky === "right" && i.classList.add("sticky-right");
|
|
883
|
+
const s = o.__headerTemplate;
|
|
884
|
+
if (s) Array.from(s.childNodes).forEach((r) => i.appendChild(r.cloneNode(!0)));
|
|
885
885
|
else {
|
|
886
886
|
const r = o.header || o.field, l = document.createElement("span");
|
|
887
|
-
l.textContent = r,
|
|
887
|
+
l.textContent = r, i.appendChild(l);
|
|
888
888
|
}
|
|
889
889
|
if (o.sortable) {
|
|
890
|
-
|
|
890
|
+
i.classList.add("sortable"), i.tabIndex = 0;
|
|
891
891
|
const r = document.createElement("span");
|
|
892
|
-
|
|
892
|
+
U(r, "sort-indicator"), r.style.opacity = "0.6";
|
|
893
893
|
const l = t.sortState?.field === o.field ? t.sortState.direction : 0, a = { ...P, ...t.icons }, d = l === 1 ? a.sortAsc : l === -1 ? a.sortDesc : a.sortNone;
|
|
894
|
-
|
|
895
|
-
t.resizeController?.isResizing || t.dispatchHeaderClick?.(h, n,
|
|
896
|
-
}),
|
|
894
|
+
Me(r, d), i.appendChild(r), i.setAttribute("aria-sort", l === 0 ? "none" : l === 1 ? "ascending" : "descending"), i.addEventListener("click", (h) => {
|
|
895
|
+
t.resizeController?.isResizing || t.dispatchHeaderClick?.(h, n, i) || Q(t, o);
|
|
896
|
+
}), i.addEventListener("keydown", (h) => {
|
|
897
897
|
if (h.key === "Enter" || h.key === " ") {
|
|
898
|
-
if (h.preventDefault(), t.dispatchHeaderClick?.(h, n,
|
|
899
|
-
|
|
898
|
+
if (h.preventDefault(), t.dispatchHeaderClick?.(h, n, i)) return;
|
|
899
|
+
Q(t, o);
|
|
900
900
|
}
|
|
901
901
|
});
|
|
902
902
|
}
|
|
903
903
|
if (o.resizable) {
|
|
904
|
-
o.sticky || (
|
|
904
|
+
o.sticky || (i.style.position = "relative");
|
|
905
905
|
const r = document.createElement("div");
|
|
906
906
|
r.className = "resize-handle", r.setAttribute("aria-hidden", "true"), r.addEventListener("mousedown", (l) => {
|
|
907
|
-
l.stopPropagation(), l.preventDefault(), t.resizeController.start(l, n,
|
|
908
|
-
}),
|
|
907
|
+
l.stopPropagation(), l.preventDefault(), t.resizeController.start(l, n, i);
|
|
908
|
+
}), i.appendChild(r);
|
|
909
909
|
}
|
|
910
|
-
e.appendChild(
|
|
910
|
+
e.appendChild(i);
|
|
911
911
|
});
|
|
912
912
|
try {
|
|
913
913
|
const o = t.shadowRoot;
|
|
914
|
-
o && o.querySelectorAll(".header-group-row .cell").forEach((
|
|
915
|
-
|
|
914
|
+
o && o.querySelectorAll(".header-group-row .cell").forEach((i) => {
|
|
915
|
+
i.getAttribute("data-group") && i.classList.add("grouped");
|
|
916
916
|
});
|
|
917
917
|
} catch {
|
|
918
918
|
}
|
|
@@ -920,9 +920,9 @@ function Q(t) {
|
|
|
920
920
|
o.getAttribute("aria-sort") || o.setAttribute("aria-sort", "none");
|
|
921
921
|
}), e.children.length > 0 ? (e.setAttribute("role", "row"), e.setAttribute("aria-rowindex", "1")) : (e.removeAttribute("role"), e.removeAttribute("aria-rowindex"));
|
|
922
922
|
}
|
|
923
|
-
function
|
|
924
|
-
let e = null, o = null, n = null,
|
|
925
|
-
const
|
|
923
|
+
function ze(t) {
|
|
924
|
+
let e = null, o = null, n = null, i = null;
|
|
925
|
+
const s = (a) => {
|
|
926
926
|
if (!e) return;
|
|
927
927
|
const d = a.clientX - e.startX, h = Math.max(40, e.startWidth + d), p = t.visibleColumns[e.colIndex];
|
|
928
928
|
p.width = h, p.__userResized = !0, p.__renderedWidth = h, o == null && (o = requestAnimationFrame(() => {
|
|
@@ -936,7 +936,7 @@ function Ge(t) {
|
|
|
936
936
|
const a = e !== null;
|
|
937
937
|
a && (r = !0, requestAnimationFrame(() => {
|
|
938
938
|
r = !1;
|
|
939
|
-
})), window.removeEventListener("mousemove",
|
|
939
|
+
})), window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", l), n !== null && (document.documentElement.style.cursor = n, n = null), i !== null && (document.body.style.userSelect = i, i = null), e = null, a && t.requestStateChange && t.requestStateChange();
|
|
940
940
|
};
|
|
941
941
|
return {
|
|
942
942
|
get isResizing() {
|
|
@@ -945,17 +945,17 @@ function Ge(t) {
|
|
|
945
945
|
start(a, d, h) {
|
|
946
946
|
a.preventDefault();
|
|
947
947
|
const p = h.getBoundingClientRect();
|
|
948
|
-
e = { startX: a.clientX, colIndex: d, startWidth: p.width }, window.addEventListener("mousemove",
|
|
948
|
+
e = { startX: a.clientX, colIndex: d, startWidth: p.width }, window.addEventListener("mousemove", s), window.addEventListener("mouseup", l), n === null && (n = document.documentElement.style.cursor), document.documentElement.style.cursor = "e-resize", i === null && (i = document.body.style.userSelect), document.body.style.userSelect = "none";
|
|
949
949
|
},
|
|
950
950
|
dispose() {
|
|
951
951
|
l();
|
|
952
952
|
}
|
|
953
953
|
};
|
|
954
954
|
}
|
|
955
|
-
function
|
|
955
|
+
function I(t) {
|
|
956
956
|
return t ? typeof t == "string" ? t : t.outerHTML : "";
|
|
957
957
|
}
|
|
958
|
-
function
|
|
958
|
+
function De() {
|
|
959
959
|
return {
|
|
960
960
|
toolPanels: /* @__PURE__ */ new Map(),
|
|
961
961
|
headerContents: /* @__PURE__ */ new Map(),
|
|
@@ -972,27 +972,27 @@ function Ue() {
|
|
|
972
972
|
activePanelCleanup: null
|
|
973
973
|
};
|
|
974
974
|
}
|
|
975
|
-
function
|
|
975
|
+
function Ne(t, e) {
|
|
976
976
|
return !!(t?.header?.title || t?.header?.toolbarButtons?.length || e.toolPanels.size > 0 || e.headerContents.size > 0 || e.toolbarButtons.size > 0 || e.lightDomButtons.length > 0 || e.lightDomHeaderContent.length > 0);
|
|
977
977
|
}
|
|
978
|
-
function
|
|
979
|
-
const n = t?.header?.title ?? "",
|
|
978
|
+
function qe(t, e, o = "☰") {
|
|
979
|
+
const n = t?.header?.title ?? "", i = !!n, s = I(o), r = t?.header?.toolbarButtons ?? [], l = r.length > 0, a = e.toolbarButtons.size > 0, d = e.lightDomButtons.length > 0, h = e.toolPanels.size > 0, b = (l || a || d) && h, c = [...r].sort((w, v) => (w.order ?? 100) - (v.order ?? 100)), u = [...e.toolbarButtons.values()].sort((w, v) => (w.order ?? 100) - (v.order ?? 100));
|
|
980
980
|
let f = "";
|
|
981
|
-
for (const
|
|
982
|
-
|
|
983
|
-
for (const
|
|
984
|
-
|
|
985
|
-
for (const
|
|
986
|
-
(
|
|
987
|
-
for (const
|
|
988
|
-
(
|
|
989
|
-
if (d && (f += '<slot name="toolbar"></slot>'),
|
|
990
|
-
const
|
|
991
|
-
f += `<button class="tbw-toolbar-btn${
|
|
981
|
+
for (const w of c)
|
|
982
|
+
w.icon && w.action && (f += `<button class="tbw-toolbar-btn" data-btn="${w.id}" title="${w.label}" aria-label="${w.label}"${w.disabled ? " disabled" : ""}>${w.icon}</button>`);
|
|
983
|
+
for (const w of u)
|
|
984
|
+
w.icon && w.action && (f += `<button class="tbw-toolbar-btn" data-btn="${w.id}" title="${w.label}" aria-label="${w.label}"${w.disabled ? " disabled" : ""}>${w.icon}</button>`);
|
|
985
|
+
for (const w of c)
|
|
986
|
+
(w.element || w.render) && (f += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${w.id}"></div>`);
|
|
987
|
+
for (const w of u)
|
|
988
|
+
(w.element || w.render) && (f += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${w.id}"></div>`);
|
|
989
|
+
if (d && (f += '<slot name="toolbar"></slot>'), b && (f += '<div class="tbw-toolbar-separator"></div>'), h) {
|
|
990
|
+
const w = e.isPanelOpen;
|
|
991
|
+
f += `<button class="tbw-toolbar-btn${w ? " active" : ""}" data-panel-toggle title="Settings" aria-label="Toggle settings panel" aria-pressed="${w}" aria-controls="tbw-tool-panel">${s}</button>`;
|
|
992
992
|
}
|
|
993
993
|
return `
|
|
994
994
|
<div class="tbw-shell-header" part="shell-header" role="presentation">
|
|
995
|
-
${
|
|
995
|
+
${i ? `<div class="tbw-shell-title">${n}</div>` : ""}
|
|
996
996
|
<div class="tbw-shell-content" part="shell-content" role="presentation">
|
|
997
997
|
<slot name="header-content"></slot>
|
|
998
998
|
</div>
|
|
@@ -1002,25 +1002,25 @@ function je(t, e, o = "☰") {
|
|
|
1002
1002
|
</div>
|
|
1003
1003
|
`;
|
|
1004
1004
|
}
|
|
1005
|
-
function
|
|
1006
|
-
const
|
|
1005
|
+
function $e(t, e, o, n) {
|
|
1006
|
+
const i = t?.toolPanel?.position ?? "right", s = e.toolPanels.size > 0, r = e.isPanelOpen, l = I(n?.expand ?? P.expand), a = I(n?.collapse ?? P.collapse), d = [...e.toolPanels.values()].sort((u, f) => (u.order ?? 100) - (f.order ?? 100)), h = d.length === 1;
|
|
1007
1007
|
let p = "";
|
|
1008
1008
|
for (const u of d) {
|
|
1009
|
-
const f = e.expandedSections.has(u.id),
|
|
1009
|
+
const f = e.expandedSections.has(u.id), w = u.icon ? `<span class="tbw-accordion-icon">${u.icon}</span>` : "", v = h ? "" : `<span class="tbw-accordion-chevron">${f ? a : l}</span>`;
|
|
1010
1010
|
p += `
|
|
1011
1011
|
<div class="${`tbw-accordion-section${f ? " expanded" : ""}${h ? " single" : ""}`}" data-section="${u.id}">
|
|
1012
1012
|
<button class="tbw-accordion-header" aria-expanded="${f}" aria-controls="tbw-section-${u.id}"${h ? ' aria-disabled="true"' : ""}>
|
|
1013
|
-
${
|
|
1013
|
+
${w}
|
|
1014
1014
|
<span class="tbw-accordion-title">${u.title}</span>
|
|
1015
|
-
${
|
|
1015
|
+
${v}
|
|
1016
1016
|
</button>
|
|
1017
1017
|
<div class="tbw-accordion-content" id="tbw-section-${u.id}" role="presentation"></div>
|
|
1018
1018
|
</div>
|
|
1019
1019
|
`;
|
|
1020
1020
|
}
|
|
1021
|
-
const c =
|
|
1022
|
-
<aside class="tbw-tool-panel${r ? " open" : ""}" part="tool-panel" data-position="${
|
|
1023
|
-
<div class="tbw-tool-panel-resize" data-resize-handle data-handle-position="${
|
|
1021
|
+
const c = s ? `
|
|
1022
|
+
<aside class="tbw-tool-panel${r ? " open" : ""}" part="tool-panel" data-position="${i}" role="presentation" id="tbw-tool-panel">
|
|
1023
|
+
<div class="tbw-tool-panel-resize" data-resize-handle data-handle-position="${i === "left" ? "right" : "left"}" aria-hidden="true"></div>
|
|
1024
1024
|
<div class="tbw-tool-panel-content" role="presentation">
|
|
1025
1025
|
<div class="tbw-accordion">
|
|
1026
1026
|
${p}
|
|
@@ -1028,7 +1028,7 @@ function Ye(t, e, o, n) {
|
|
|
1028
1028
|
</div>
|
|
1029
1029
|
</aside>
|
|
1030
1030
|
` : "";
|
|
1031
|
-
return
|
|
1031
|
+
return i === "left" ? `
|
|
1032
1032
|
<div class="tbw-shell-body">
|
|
1033
1033
|
${c}
|
|
1034
1034
|
<div class="tbw-grid-content">
|
|
@@ -1044,25 +1044,25 @@ function Ye(t, e, o, n) {
|
|
|
1044
1044
|
</div>
|
|
1045
1045
|
`;
|
|
1046
1046
|
}
|
|
1047
|
-
function
|
|
1047
|
+
function te(t, e) {
|
|
1048
1048
|
const o = t.querySelector("tbw-grid-header");
|
|
1049
1049
|
if (!o) return;
|
|
1050
1050
|
o.style.display = "none";
|
|
1051
1051
|
const n = o.querySelectorAll("tbw-grid-header-content");
|
|
1052
|
-
e.lightDomHeaderContent = Array.from(n), e.lightDomHeaderContent.forEach((
|
|
1053
|
-
|
|
1052
|
+
e.lightDomHeaderContent = Array.from(n), e.lightDomHeaderContent.forEach((s) => {
|
|
1053
|
+
s.setAttribute("slot", "header-content");
|
|
1054
1054
|
});
|
|
1055
|
-
const
|
|
1056
|
-
e.lightDomButtons = Array.from(
|
|
1057
|
-
const l = parseInt(
|
|
1055
|
+
const i = o.querySelectorAll("tbw-grid-tool-button");
|
|
1056
|
+
e.lightDomButtons = Array.from(i), e.lightDomButtons.sort((s, r) => {
|
|
1057
|
+
const l = parseInt(s.getAttribute("order") ?? "100", 10), a = parseInt(r.getAttribute("order") ?? "100", 10);
|
|
1058
1058
|
return l - a;
|
|
1059
|
-
}), e.lightDomButtons.forEach((
|
|
1060
|
-
|
|
1059
|
+
}), e.lightDomButtons.forEach((s) => {
|
|
1060
|
+
s.setAttribute("slot", "toolbar");
|
|
1061
1061
|
});
|
|
1062
1062
|
}
|
|
1063
|
-
function
|
|
1064
|
-
const
|
|
1065
|
-
|
|
1063
|
+
function Ie(t, e, o, n) {
|
|
1064
|
+
const i = t.querySelector(".tbw-shell-toolbar");
|
|
1065
|
+
i && i.addEventListener("click", (r) => {
|
|
1066
1066
|
const l = r.target;
|
|
1067
1067
|
if (l.closest("[data-panel-toggle]")) {
|
|
1068
1068
|
n.onPanelToggle();
|
|
@@ -1074,8 +1074,8 @@ function Ze(t, e, o, n) {
|
|
|
1074
1074
|
h && n.onToolbarButtonClick(h);
|
|
1075
1075
|
}
|
|
1076
1076
|
});
|
|
1077
|
-
const
|
|
1078
|
-
|
|
1077
|
+
const s = t.querySelector(".tbw-accordion");
|
|
1078
|
+
s && s.addEventListener("click", (r) => {
|
|
1079
1079
|
const a = r.target.closest(".tbw-accordion-header");
|
|
1080
1080
|
if (a) {
|
|
1081
1081
|
const h = a.closest("[data-section]")?.getAttribute("data-section");
|
|
@@ -1083,87 +1083,87 @@ function Ze(t, e, o, n) {
|
|
|
1083
1083
|
}
|
|
1084
1084
|
});
|
|
1085
1085
|
}
|
|
1086
|
-
function
|
|
1087
|
-
const n = t.querySelector(".tbw-tool-panel"),
|
|
1088
|
-
if (!n || !
|
|
1086
|
+
function Be(t, e, o) {
|
|
1087
|
+
const n = t.querySelector(".tbw-tool-panel"), i = t.querySelector("[data-resize-handle]"), s = t.querySelector(".tbw-shell-body");
|
|
1088
|
+
if (!n || !i || !s)
|
|
1089
1089
|
return () => {
|
|
1090
1090
|
};
|
|
1091
1091
|
const r = e?.toolPanel?.position ?? "right", l = 200;
|
|
1092
1092
|
let a = 0, d = 0, h = 0, p = !1;
|
|
1093
|
-
const
|
|
1093
|
+
const b = (f) => {
|
|
1094
1094
|
if (!p) return;
|
|
1095
1095
|
f.preventDefault();
|
|
1096
|
-
const
|
|
1097
|
-
n.style.width = `${
|
|
1096
|
+
const w = r === "left" ? f.clientX - a : a - f.clientX, v = Math.min(h, Math.max(l, d + w));
|
|
1097
|
+
n.style.width = `${v}px`;
|
|
1098
1098
|
}, c = () => {
|
|
1099
1099
|
if (!p) return;
|
|
1100
|
-
p = !1,
|
|
1100
|
+
p = !1, i.classList.remove("resizing"), n.style.transition = "", document.body.style.cursor = "", document.body.style.userSelect = "";
|
|
1101
1101
|
const f = n.getBoundingClientRect().width;
|
|
1102
|
-
o(f), document.removeEventListener("mousemove",
|
|
1102
|
+
o(f), document.removeEventListener("mousemove", b), document.removeEventListener("mouseup", c);
|
|
1103
1103
|
}, u = (f) => {
|
|
1104
|
-
f.preventDefault(), p = !0, a = f.clientX, d = n.getBoundingClientRect().width, h =
|
|
1104
|
+
f.preventDefault(), p = !0, a = f.clientX, d = n.getBoundingClientRect().width, h = s.getBoundingClientRect().width - 20, i.classList.add("resizing"), n.style.transition = "none", document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", b), document.addEventListener("mouseup", c);
|
|
1105
1105
|
};
|
|
1106
|
-
return
|
|
1107
|
-
|
|
1106
|
+
return i.addEventListener("mousedown", u), () => {
|
|
1107
|
+
i.removeEventListener("mousedown", u), document.removeEventListener("mousemove", b), document.removeEventListener("mouseup", c);
|
|
1108
1108
|
};
|
|
1109
1109
|
}
|
|
1110
|
-
function
|
|
1110
|
+
function Ve(t, e, o) {
|
|
1111
1111
|
const n = [...e?.header?.toolbarButtons ?? [], ...o.toolbarButtons.values()];
|
|
1112
|
-
for (const
|
|
1113
|
-
const
|
|
1114
|
-
if (!
|
|
1115
|
-
const r = o.toolbarButtonCleanups.get(
|
|
1116
|
-
if (r && (r(), o.toolbarButtonCleanups.delete(
|
|
1117
|
-
|
|
1118
|
-
else if (
|
|
1119
|
-
const l =
|
|
1120
|
-
l && o.toolbarButtonCleanups.set(
|
|
1112
|
+
for (const i of n) {
|
|
1113
|
+
const s = t.querySelector(`[data-btn-slot="${i.id}"]`);
|
|
1114
|
+
if (!s) continue;
|
|
1115
|
+
const r = o.toolbarButtonCleanups.get(i.id);
|
|
1116
|
+
if (r && (r(), o.toolbarButtonCleanups.delete(i.id)), i.element)
|
|
1117
|
+
s.appendChild(i.element);
|
|
1118
|
+
else if (i.render) {
|
|
1119
|
+
const l = i.render(s);
|
|
1120
|
+
l && o.toolbarButtonCleanups.set(i.id, l);
|
|
1121
1121
|
}
|
|
1122
1122
|
}
|
|
1123
1123
|
}
|
|
1124
|
-
function
|
|
1124
|
+
function oe(t, e) {
|
|
1125
1125
|
const o = t.querySelector(".tbw-shell-content");
|
|
1126
1126
|
if (!o) return;
|
|
1127
|
-
const n = [...e.headerContents.values()].sort((
|
|
1128
|
-
for (const
|
|
1129
|
-
const r = e.headerContentCleanups.get(
|
|
1130
|
-
r && (r(), e.headerContentCleanups.delete(
|
|
1131
|
-
let l = o.querySelector(`[data-header-content="${
|
|
1132
|
-
l || (l = document.createElement("div"), l.setAttribute("data-header-content",
|
|
1133
|
-
const a =
|
|
1134
|
-
a && e.headerContentCleanups.set(
|
|
1127
|
+
const n = [...e.headerContents.values()].sort((s, r) => (s.order ?? 100) - (r.order ?? 100)), i = o.querySelector('slot[name="header-content"]');
|
|
1128
|
+
for (const s of n) {
|
|
1129
|
+
const r = e.headerContentCleanups.get(s.id);
|
|
1130
|
+
r && (r(), e.headerContentCleanups.delete(s.id));
|
|
1131
|
+
let l = o.querySelector(`[data-header-content="${s.id}"]`);
|
|
1132
|
+
l || (l = document.createElement("div"), l.setAttribute("data-header-content", s.id), i ? o.insertBefore(l, i) : o.appendChild(l));
|
|
1133
|
+
const a = s.render(l);
|
|
1134
|
+
a && e.headerContentCleanups.set(s.id, a);
|
|
1135
1135
|
}
|
|
1136
1136
|
}
|
|
1137
|
-
function
|
|
1137
|
+
function We(t, e, o) {
|
|
1138
1138
|
if (!e.isPanelOpen) return;
|
|
1139
|
-
const n =
|
|
1140
|
-
for (const [
|
|
1141
|
-
const l = e.expandedSections.has(
|
|
1139
|
+
const n = I(o?.expand ?? P.expand), i = I(o?.collapse ?? P.collapse);
|
|
1140
|
+
for (const [s, r] of e.toolPanels) {
|
|
1141
|
+
const l = e.expandedSections.has(s), a = t.querySelector(`[data-section="${s}"]`), d = a?.querySelector(".tbw-accordion-content");
|
|
1142
1142
|
if (!a || !d) continue;
|
|
1143
1143
|
a.classList.toggle("expanded", l);
|
|
1144
1144
|
const h = a.querySelector(".tbw-accordion-header");
|
|
1145
1145
|
h && h.setAttribute("aria-expanded", String(l));
|
|
1146
1146
|
const p = a.querySelector(".tbw-accordion-chevron");
|
|
1147
|
-
if (p && (p.innerHTML = l ?
|
|
1147
|
+
if (p && (p.innerHTML = l ? i : n), l) {
|
|
1148
1148
|
if (d.children.length === 0) {
|
|
1149
|
-
const
|
|
1150
|
-
|
|
1149
|
+
const b = r.render(d);
|
|
1150
|
+
b && e.panelCleanups.set(s, b);
|
|
1151
1151
|
}
|
|
1152
1152
|
} else {
|
|
1153
|
-
const
|
|
1154
|
-
|
|
1153
|
+
const b = e.panelCleanups.get(s);
|
|
1154
|
+
b && (b(), e.panelCleanups.delete(s)), d.innerHTML = "";
|
|
1155
1155
|
}
|
|
1156
1156
|
}
|
|
1157
1157
|
}
|
|
1158
|
-
function
|
|
1158
|
+
function ne(t, e) {
|
|
1159
1159
|
const o = t.querySelector("[data-panel-toggle]");
|
|
1160
1160
|
o && (o.classList.toggle("active", e.isPanelOpen), o.setAttribute("aria-pressed", String(e.isPanelOpen)));
|
|
1161
1161
|
}
|
|
1162
|
-
function
|
|
1162
|
+
function ie(t, e) {
|
|
1163
1163
|
const o = t.querySelector(".tbw-tool-panel");
|
|
1164
1164
|
o && (o.classList.toggle("open", e.isPanelOpen), e.isPanelOpen || (o.style.width = ""));
|
|
1165
1165
|
}
|
|
1166
|
-
function
|
|
1166
|
+
function Ge(t, e) {
|
|
1167
1167
|
const o = [];
|
|
1168
1168
|
for (const n of t?.header?.toolbarButtons ?? [])
|
|
1169
1169
|
o.push({
|
|
@@ -1180,11 +1180,11 @@ function tt(t, e) {
|
|
|
1180
1180
|
source: "config"
|
|
1181
1181
|
});
|
|
1182
1182
|
for (let n = 0; n < e.lightDomButtons.length; n++) {
|
|
1183
|
-
const
|
|
1183
|
+
const s = e.lightDomButtons[n].querySelector("button");
|
|
1184
1184
|
o.push({
|
|
1185
1185
|
id: `light-dom-${n}`,
|
|
1186
|
-
label:
|
|
1187
|
-
disabled:
|
|
1186
|
+
label: s?.getAttribute("title") ?? s?.getAttribute("aria-label") ?? "",
|
|
1187
|
+
disabled: s?.disabled ?? !1,
|
|
1188
1188
|
source: "light-dom"
|
|
1189
1189
|
});
|
|
1190
1190
|
}
|
|
@@ -1198,7 +1198,7 @@ function tt(t, e) {
|
|
|
1198
1198
|
});
|
|
1199
1199
|
return o;
|
|
1200
1200
|
}
|
|
1201
|
-
function
|
|
1201
|
+
function Fe(t) {
|
|
1202
1202
|
for (const e of t.headerContentCleanups.values())
|
|
1203
1203
|
e();
|
|
1204
1204
|
t.headerContentCleanups.clear(), t.activePanelCleanup && (t.activePanelCleanup(), t.activePanelCleanup = null);
|
|
@@ -1206,7 +1206,7 @@ function ot(t) {
|
|
|
1206
1206
|
e();
|
|
1207
1207
|
t.toolbarButtonCleanups.clear(), t.activePanel && t.toolPanels.get(t.activePanel)?.onClose?.(), t.toolPanels.clear(), t.headerContents.clear(), t.toolbarButtons.clear(), t.lightDomButtons = [], t.lightDomHeaderContent = [], t.activePanel = null;
|
|
1208
1208
|
}
|
|
1209
|
-
class
|
|
1209
|
+
class Ue {
|
|
1210
1210
|
constructor(e) {
|
|
1211
1211
|
this.grid = e;
|
|
1212
1212
|
}
|
|
@@ -1365,21 +1365,21 @@ class nt {
|
|
|
1365
1365
|
* Returns the minimum start index from all plugins.
|
|
1366
1366
|
*/
|
|
1367
1367
|
adjustVirtualStart(e, o, n) {
|
|
1368
|
-
let
|
|
1369
|
-
for (const
|
|
1370
|
-
if (typeof
|
|
1371
|
-
const r =
|
|
1372
|
-
r <
|
|
1368
|
+
let i = e;
|
|
1369
|
+
for (const s of this.plugins)
|
|
1370
|
+
if (typeof s.adjustVirtualStart == "function") {
|
|
1371
|
+
const r = s.adjustVirtualStart(e, o, n);
|
|
1372
|
+
r < i && (i = r);
|
|
1373
1373
|
}
|
|
1374
|
-
return
|
|
1374
|
+
return i;
|
|
1375
1375
|
}
|
|
1376
1376
|
/**
|
|
1377
1377
|
* Execute renderRow hook on all plugins.
|
|
1378
1378
|
* Returns true if any plugin handled the row.
|
|
1379
1379
|
*/
|
|
1380
1380
|
renderRow(e, o, n) {
|
|
1381
|
-
for (const
|
|
1382
|
-
if (
|
|
1381
|
+
for (const i of this.plugins)
|
|
1382
|
+
if (i.renderRow?.(e, o, n))
|
|
1383
1383
|
return !0;
|
|
1384
1384
|
return !1;
|
|
1385
1385
|
}
|
|
@@ -1466,8 +1466,8 @@ class nt {
|
|
|
1466
1466
|
getContextMenuItems(e) {
|
|
1467
1467
|
const o = [];
|
|
1468
1468
|
for (const n of this.plugins) {
|
|
1469
|
-
const
|
|
1470
|
-
|
|
1469
|
+
const i = n.getContextMenuItems?.(e);
|
|
1470
|
+
i && o.push(...i);
|
|
1471
1471
|
}
|
|
1472
1472
|
return o;
|
|
1473
1473
|
}
|
|
@@ -1497,64 +1497,64 @@ class nt {
|
|
|
1497
1497
|
return e.sort((o, n) => (o.content.order ?? 0) - (n.content.order ?? 0));
|
|
1498
1498
|
}
|
|
1499
1499
|
}
|
|
1500
|
-
class
|
|
1500
|
+
class G extends HTMLElement {
|
|
1501
1501
|
// TODO: Rename to 'data-grid' when migration is complete
|
|
1502
1502
|
static tagName = "tbw-grid";
|
|
1503
|
-
#
|
|
1504
|
-
#
|
|
1503
|
+
#n;
|
|
1504
|
+
#k = !1;
|
|
1505
1505
|
// ---------------- Ready Promise ----------------
|
|
1506
|
-
#I;
|
|
1507
1506
|
#$;
|
|
1507
|
+
#I;
|
|
1508
1508
|
// ================== INPUT PROPERTIES ==================
|
|
1509
1509
|
// These backing fields store raw user input. They are merged into
|
|
1510
1510
|
// #effectiveConfig by #mergeEffectiveConfig(). Never read directly
|
|
1511
1511
|
// for rendering logic - always use effectiveConfig or derived state.
|
|
1512
|
-
#
|
|
1513
|
-
#
|
|
1514
|
-
#
|
|
1512
|
+
#s = [];
|
|
1513
|
+
#r;
|
|
1514
|
+
#p;
|
|
1515
|
+
#m;
|
|
1515
1516
|
#v;
|
|
1516
|
-
#y;
|
|
1517
1517
|
// ================== SINGLE SOURCE OF TRUTH ==================
|
|
1518
1518
|
// All input sources converge here. This is the canonical config
|
|
1519
1519
|
// that all rendering and logic should read from.
|
|
1520
|
-
#
|
|
1521
|
-
#
|
|
1522
|
-
#
|
|
1523
|
-
#
|
|
1524
|
-
#
|
|
1520
|
+
#o = {};
|
|
1521
|
+
#h = !1;
|
|
1522
|
+
#f = 0;
|
|
1523
|
+
#E = null;
|
|
1524
|
+
#C = !1;
|
|
1525
1525
|
// Cached flag for plugin scroll handlers
|
|
1526
1526
|
#P;
|
|
1527
1527
|
// Cached hook to avoid closures
|
|
1528
|
-
#
|
|
1528
|
+
#y = !1;
|
|
1529
1529
|
#_ = null;
|
|
1530
|
-
#
|
|
1531
|
-
#A = null;
|
|
1530
|
+
#R = null;
|
|
1532
1531
|
#S = null;
|
|
1533
|
-
#
|
|
1534
|
-
#
|
|
1532
|
+
#x = null;
|
|
1533
|
+
#l;
|
|
1534
|
+
#b;
|
|
1535
1535
|
// ---------------- Plugin System ----------------
|
|
1536
|
-
#
|
|
1536
|
+
#t;
|
|
1537
1537
|
// ---------------- Column State ----------------
|
|
1538
|
-
#
|
|
1539
|
-
#
|
|
1538
|
+
#O;
|
|
1539
|
+
#d;
|
|
1540
1540
|
// ---------------- Shell State ----------------
|
|
1541
|
-
#e =
|
|
1542
|
-
#
|
|
1543
|
-
#
|
|
1541
|
+
#e = De();
|
|
1542
|
+
#a = !1;
|
|
1543
|
+
#A;
|
|
1544
1544
|
// ================== DERIVED STATE ==================
|
|
1545
1545
|
// _rows: result of applying plugin processRows hooks
|
|
1546
1546
|
_rows = [];
|
|
1547
1547
|
// _baseColumns: columns before plugin transformation (analogous to #rows for row processing)
|
|
1548
1548
|
// This is the source of truth for processColumns - plugins transform these
|
|
1549
|
-
#
|
|
1549
|
+
#H = [];
|
|
1550
1550
|
// _columns is a getter/setter that operates on effectiveConfig.columns
|
|
1551
1551
|
// This ensures effectiveConfig.columns is the single source of truth for columns
|
|
1552
1552
|
// _columns always contains ALL columns (including hidden)
|
|
1553
1553
|
get _columns() {
|
|
1554
|
-
return this.#
|
|
1554
|
+
return this.#o.columns ?? [];
|
|
1555
1555
|
}
|
|
1556
1556
|
set _columns(e) {
|
|
1557
|
-
this.#
|
|
1557
|
+
this.#o.columns = e;
|
|
1558
1558
|
}
|
|
1559
1559
|
// visibleColumns returns only visible columns for rendering
|
|
1560
1560
|
// This is what header/row rendering should use
|
|
@@ -1603,49 +1603,49 @@ class V extends HTMLElement {
|
|
|
1603
1603
|
return this._rows;
|
|
1604
1604
|
}
|
|
1605
1605
|
set rows(e) {
|
|
1606
|
-
const o = this.#
|
|
1607
|
-
this.#
|
|
1606
|
+
const o = this.#s;
|
|
1607
|
+
this.#s = e, o !== e && this.#ee();
|
|
1608
1608
|
}
|
|
1609
1609
|
/**
|
|
1610
1610
|
* Get the original unfiltered/unprocessed rows.
|
|
1611
1611
|
* Use this when you need access to all source data regardless of active filters.
|
|
1612
1612
|
*/
|
|
1613
1613
|
get sourceRows() {
|
|
1614
|
-
return this.#
|
|
1614
|
+
return this.#s;
|
|
1615
1615
|
}
|
|
1616
1616
|
get columns() {
|
|
1617
1617
|
return [...this._columns];
|
|
1618
1618
|
}
|
|
1619
1619
|
set columns(e) {
|
|
1620
|
-
const o = this.#
|
|
1621
|
-
this.#
|
|
1620
|
+
const o = this.#r;
|
|
1621
|
+
this.#r = e, o !== e && this.#te();
|
|
1622
1622
|
}
|
|
1623
1623
|
get gridConfig() {
|
|
1624
|
-
return this.#
|
|
1624
|
+
return this.#o;
|
|
1625
1625
|
}
|
|
1626
1626
|
set gridConfig(e) {
|
|
1627
|
-
const o = this.#
|
|
1628
|
-
this.#
|
|
1627
|
+
const o = this.#p;
|
|
1628
|
+
this.#p = e, o !== e && this.#oe();
|
|
1629
1629
|
}
|
|
1630
1630
|
get fitMode() {
|
|
1631
|
-
return this.#
|
|
1631
|
+
return this.#o.fitMode ?? "stretch";
|
|
1632
1632
|
}
|
|
1633
1633
|
set fitMode(e) {
|
|
1634
|
-
const o = this.#
|
|
1635
|
-
this.#
|
|
1634
|
+
const o = this.#m;
|
|
1635
|
+
this.#m = e, o !== e && this.#J();
|
|
1636
1636
|
}
|
|
1637
1637
|
get editOn() {
|
|
1638
|
-
return this.#
|
|
1638
|
+
return this.#o.editOn;
|
|
1639
1639
|
}
|
|
1640
1640
|
set editOn(e) {
|
|
1641
|
-
const o = this.#
|
|
1642
|
-
this.#
|
|
1641
|
+
const o = this.#v;
|
|
1642
|
+
this.#v = e, o !== e && this.#Q();
|
|
1643
1643
|
}
|
|
1644
1644
|
// Effective config accessor for internal modules and plugins
|
|
1645
1645
|
// Returns the merged config (single source of truth) before plugin processing
|
|
1646
1646
|
// Use this when you need the raw merged config (e.g., for column definitions including hidden)
|
|
1647
1647
|
get effectiveConfig() {
|
|
1648
|
-
return this.#
|
|
1648
|
+
return this.#o;
|
|
1649
1649
|
}
|
|
1650
1650
|
/**
|
|
1651
1651
|
* Get the disconnect signal for event listener cleanup.
|
|
@@ -1655,14 +1655,14 @@ class V extends HTMLElement {
|
|
|
1655
1655
|
* element.addEventListener('click', handler, { signal: this.grid.disconnectSignal });
|
|
1656
1656
|
*/
|
|
1657
1657
|
get disconnectSignal() {
|
|
1658
|
-
return this.#
|
|
1658
|
+
return this.#l || (this.#l = new AbortController()), this.#l.signal;
|
|
1659
1659
|
}
|
|
1660
1660
|
constructor() {
|
|
1661
|
-
super(), this.#
|
|
1661
|
+
super(), this.#n = this.attachShadow({ mode: "open" }), this.#j(), this.#$ = new Promise((e) => this.#I = e);
|
|
1662
1662
|
}
|
|
1663
|
-
#
|
|
1663
|
+
#j() {
|
|
1664
1664
|
const e = new CSSStyleSheet();
|
|
1665
|
-
e.replaceSync(
|
|
1665
|
+
e.replaceSync(de), this.#n.adoptedStyleSheets = [e];
|
|
1666
1666
|
}
|
|
1667
1667
|
// ---------------- Plugin System ----------------
|
|
1668
1668
|
/**
|
|
@@ -1670,14 +1670,14 @@ class V extends HTMLElement {
|
|
|
1670
1670
|
* Used by plugins for inter-plugin communication.
|
|
1671
1671
|
*/
|
|
1672
1672
|
getPlugin(e) {
|
|
1673
|
-
return this.#
|
|
1673
|
+
return this.#t?.getPlugin(e);
|
|
1674
1674
|
}
|
|
1675
1675
|
/**
|
|
1676
1676
|
* Get a plugin instance by its name.
|
|
1677
1677
|
* Used for loose coupling between plugins (avoids static imports).
|
|
1678
1678
|
*/
|
|
1679
1679
|
getPluginByName(e) {
|
|
1680
|
-
return this.#
|
|
1680
|
+
return this.#t?.getPluginByName(e);
|
|
1681
1681
|
}
|
|
1682
1682
|
/**
|
|
1683
1683
|
* Request a full re-render of the grid.
|
|
@@ -1685,7 +1685,7 @@ class V extends HTMLElement {
|
|
|
1685
1685
|
* Note: This does NOT reset plugin state - just re-processes rows/columns and renders.
|
|
1686
1686
|
*/
|
|
1687
1687
|
requestRender() {
|
|
1688
|
-
this.#
|
|
1688
|
+
this.#L(), this.#M(), this.#T(), this.updateTemplate(), this.refreshVirtualWindow(!0);
|
|
1689
1689
|
}
|
|
1690
1690
|
/**
|
|
1691
1691
|
* Request a lightweight style update without rebuilding DOM.
|
|
@@ -1693,26 +1693,26 @@ class V extends HTMLElement {
|
|
|
1693
1693
|
* This runs all plugin afterRender hooks without rebuilding row/column DOM.
|
|
1694
1694
|
*/
|
|
1695
1695
|
requestAfterRender() {
|
|
1696
|
-
this.#
|
|
1696
|
+
this.#w();
|
|
1697
1697
|
}
|
|
1698
1698
|
/**
|
|
1699
1699
|
* Initialize plugin system with instances from config.
|
|
1700
1700
|
* Plugins are class instances passed in gridConfig.plugins[].
|
|
1701
1701
|
*/
|
|
1702
1702
|
#B() {
|
|
1703
|
-
this.#
|
|
1704
|
-
const e = this.#
|
|
1705
|
-
this.#
|
|
1703
|
+
this.#t = new Ue(this);
|
|
1704
|
+
const e = this.#o?.plugins, o = Array.isArray(e) ? e : [];
|
|
1705
|
+
this.#t.attachAll(o);
|
|
1706
1706
|
}
|
|
1707
1707
|
/**
|
|
1708
1708
|
* Inject all plugin styles into the shadow DOM.
|
|
1709
1709
|
* Must be called after #render() since innerHTML wipes existing content.
|
|
1710
1710
|
*/
|
|
1711
|
-
#
|
|
1712
|
-
const e = this.#
|
|
1711
|
+
#V() {
|
|
1712
|
+
const e = this.#t?.getAllStyles() ?? "";
|
|
1713
1713
|
if (e) {
|
|
1714
1714
|
const o = document.createElement("style");
|
|
1715
|
-
o.setAttribute("data-plugin", "all"), o.textContent = e, this.#
|
|
1715
|
+
o.setAttribute("data-plugin", "all"), o.textContent = e, this.#n.appendChild(o);
|
|
1716
1716
|
}
|
|
1717
1717
|
}
|
|
1718
1718
|
/**
|
|
@@ -1720,47 +1720,47 @@ class V extends HTMLElement {
|
|
|
1720
1720
|
* With class-based plugins, we need to detach old and attach new.
|
|
1721
1721
|
*/
|
|
1722
1722
|
#W() {
|
|
1723
|
-
this.#
|
|
1723
|
+
this.#t && this.#t.detachAll(), this.#B(), this.#V(), this.#C = this.#t?.getAll().some((e) => e.onScroll) ?? !1;
|
|
1724
1724
|
}
|
|
1725
1725
|
/**
|
|
1726
1726
|
* Clean up plugin states when grid disconnects.
|
|
1727
1727
|
*/
|
|
1728
|
-
#
|
|
1729
|
-
this.#
|
|
1728
|
+
#K() {
|
|
1729
|
+
this.#t?.detachAll();
|
|
1730
1730
|
}
|
|
1731
1731
|
/**
|
|
1732
1732
|
* Collect tool panels and header content from all plugins.
|
|
1733
1733
|
* Called after plugins are attached but before render.
|
|
1734
1734
|
*/
|
|
1735
1735
|
#Y() {
|
|
1736
|
-
if (!this.#
|
|
1737
|
-
const e = this.#
|
|
1736
|
+
if (!this.#t) return;
|
|
1737
|
+
const e = this.#t.getToolPanels();
|
|
1738
1738
|
for (const { panel: n } of e)
|
|
1739
1739
|
this.#e.toolPanels.has(n.id) || this.#e.toolPanels.set(n.id, n);
|
|
1740
|
-
const o = this.#
|
|
1740
|
+
const o = this.#t.getHeaderContents();
|
|
1741
1741
|
for (const { content: n } of o)
|
|
1742
1742
|
this.#e.headerContents.has(n.id) || this.#e.headerContents.set(n.id, n);
|
|
1743
1743
|
}
|
|
1744
1744
|
// ---------------- Lifecycle ----------------
|
|
1745
1745
|
connectedCallback() {
|
|
1746
|
-
this.hasAttribute("tabindex") || (this.tabIndex = 0), this._rows = Array.isArray(this.#
|
|
1746
|
+
this.hasAttribute("tabindex") || (this.tabIndex = 0), this._rows = Array.isArray(this.#s) ? [...this.#s] : [], this.#l?.abort(), this.#l = new AbortController(), this.#u(), this.#B(), this.#Y(), this.#k || (this.#X(), this.#V(), this.#k = !0), this.#G();
|
|
1747
1747
|
}
|
|
1748
1748
|
disconnectedCallback() {
|
|
1749
|
-
this.#
|
|
1749
|
+
this.#K(), Fe(this.#e), this.#a = !1, this.#A?.(), this.#A = void 0, this.#l && (this.#l.abort(), this.#l = void 0), this.resizeController && this.resizeController.dispose(), this.#b && (this.#b.disconnect(), this.#b = void 0), this.#h = !1;
|
|
1750
1750
|
}
|
|
1751
|
-
#
|
|
1752
|
-
const o = this.#
|
|
1753
|
-
if (this.headerRowEl = o?.querySelector(".header-row"), this.virtualization.totalHeightEl = o?.querySelector(".faux-vscroll-spacer"), this.virtualization.viewportEl = o?.querySelector(".rows-viewport"), this.bodyEl = o?.querySelector(".rows"), this.#
|
|
1754
|
-
|
|
1755
|
-
const r = this.#
|
|
1751
|
+
#G() {
|
|
1752
|
+
const o = this.#n.querySelector(".tbw-grid-content") ?? this.#n.querySelector(".tbw-grid-root");
|
|
1753
|
+
if (this.headerRowEl = o?.querySelector(".header-row"), this.virtualization.totalHeightEl = o?.querySelector(".faux-vscroll-spacer"), this.virtualization.viewportEl = o?.querySelector(".rows-viewport"), this.bodyEl = o?.querySelector(".rows"), this.#a) {
|
|
1754
|
+
oe(this.#n, this.#e), Ve(this.#n, this.#o?.shell, this.#e);
|
|
1755
|
+
const r = this.#o?.shell?.toolPanel?.defaultOpen;
|
|
1756
1756
|
r && this.#e.toolPanels.has(r) && (this.openToolPanel(), this.#e.expandedSections.add(r));
|
|
1757
1757
|
}
|
|
1758
|
-
this.setAttribute("data-upgraded", ""), this.#
|
|
1758
|
+
this.setAttribute("data-upgraded", ""), this.#h = !0;
|
|
1759
1759
|
const n = this.disconnectSignal;
|
|
1760
|
-
this.#
|
|
1760
|
+
this.#c(), this.addEventListener("keydown", (r) => ke(this, r), { signal: n }), document.addEventListener(
|
|
1761
1761
|
"keydown",
|
|
1762
1762
|
(r) => {
|
|
1763
|
-
r.key === "Escape" && this.activeEditRows !== -1 && this.#
|
|
1763
|
+
r.key === "Escape" && this.activeEditRows !== -1 && this.#D(this.activeEditRows, !0);
|
|
1764
1764
|
},
|
|
1765
1765
|
{ capture: !0, signal: n }
|
|
1766
1766
|
), document.addEventListener(
|
|
@@ -1768,64 +1768,64 @@ class V extends HTMLElement {
|
|
|
1768
1768
|
(r) => {
|
|
1769
1769
|
if (this.activeEditRows === -1) return;
|
|
1770
1770
|
const l = this.findRenderedRowElement(this.activeEditRows);
|
|
1771
|
-
!l || (r.composedPath && r.composedPath() || []).includes(l) || this.#
|
|
1771
|
+
!l || (r.composedPath && r.composedPath() || []).includes(l) || this.#D(this.activeEditRows, !1);
|
|
1772
1772
|
},
|
|
1773
1773
|
{ signal: n }
|
|
1774
1774
|
);
|
|
1775
|
-
const
|
|
1776
|
-
if (this.virtualization.container =
|
|
1777
|
-
|
|
1775
|
+
const i = o?.querySelector(".faux-vscroll"), s = o?.querySelector(".rows");
|
|
1776
|
+
if (this.virtualization.container = i ?? this, this.#C = this.#t?.getAll().some((r) => r.onScroll) ?? !1, i && s) {
|
|
1777
|
+
i.addEventListener(
|
|
1778
1778
|
"scroll",
|
|
1779
1779
|
() => {
|
|
1780
|
-
if (!this.virtualization.enabled && !this.#
|
|
1781
|
-
const a =
|
|
1782
|
-
|
|
1783
|
-
this.#
|
|
1780
|
+
if (!this.virtualization.enabled && !this.#C) return;
|
|
1781
|
+
const a = i.scrollTop, d = this.virtualization.rowHeight, h = Math.floor(a / d), p = h - h % 2, b = -(a - p * d);
|
|
1782
|
+
s.style.transform = `translateY(${b}px)`, this.#E = a, this.#f || (this.#f = requestAnimationFrame(() => {
|
|
1783
|
+
this.#f = 0, this.#E !== null && (this.#re(this.#E), this.#E = null);
|
|
1784
1784
|
}));
|
|
1785
1785
|
},
|
|
1786
1786
|
{ passive: !0, signal: n }
|
|
1787
1787
|
);
|
|
1788
|
-
const r = this.#
|
|
1788
|
+
const r = this.#n.querySelector(".tbw-grid-content"), l = this.#n.querySelector(".tbw-scroll-area");
|
|
1789
1789
|
r && (r.addEventListener(
|
|
1790
1790
|
"wheel",
|
|
1791
1791
|
(a) => {
|
|
1792
|
-
a.preventDefault(), a.shiftKey || Math.abs(a.deltaX) > Math.abs(a.deltaY) ? l && (l.scrollLeft += a.shiftKey ? a.deltaY : a.deltaX) :
|
|
1792
|
+
a.preventDefault(), a.shiftKey || Math.abs(a.deltaX) > Math.abs(a.deltaY) ? l && (l.scrollLeft += a.shiftKey ? a.deltaY : a.deltaX) : i.scrollTop += a.deltaY;
|
|
1793
1793
|
},
|
|
1794
1794
|
{ passive: !1, signal: n }
|
|
1795
1795
|
), r.addEventListener(
|
|
1796
1796
|
"touchstart",
|
|
1797
1797
|
(a) => {
|
|
1798
|
-
a.touches.length === 1 && (this.#_ = a.touches[0].clientY, this.#
|
|
1798
|
+
a.touches.length === 1 && (this.#_ = a.touches[0].clientY, this.#R = a.touches[0].clientX, this.#S = i.scrollTop, this.#x = l?.scrollLeft ?? 0);
|
|
1799
1799
|
},
|
|
1800
1800
|
{ passive: !0, signal: n }
|
|
1801
1801
|
), r.addEventListener(
|
|
1802
1802
|
"touchmove",
|
|
1803
1803
|
(a) => {
|
|
1804
|
-
if (a.touches.length === 1 && this.#_ !== null && this.#
|
|
1805
|
-
const d = this.#_ - a.touches[0].clientY, h = this.#
|
|
1806
|
-
|
|
1804
|
+
if (a.touches.length === 1 && this.#_ !== null && this.#R !== null && this.#S !== null && this.#x !== null) {
|
|
1805
|
+
const d = this.#_ - a.touches[0].clientY, h = this.#R - a.touches[0].clientX;
|
|
1806
|
+
i.scrollTop = this.#S + d, l && (l.scrollLeft = this.#x + h), a.preventDefault();
|
|
1807
1807
|
}
|
|
1808
1808
|
},
|
|
1809
1809
|
{ passive: !1, signal: n }
|
|
1810
1810
|
), r.addEventListener(
|
|
1811
1811
|
"touchend",
|
|
1812
1812
|
() => {
|
|
1813
|
-
this.#_ = null, this.#
|
|
1813
|
+
this.#_ = null, this.#R = null, this.#S = null, this.#x = null;
|
|
1814
1814
|
},
|
|
1815
1815
|
{ passive: !0, signal: n }
|
|
1816
1816
|
));
|
|
1817
1817
|
}
|
|
1818
|
-
this.resizeController =
|
|
1818
|
+
this.resizeController = ze(this), this.#n.addEventListener("mousedown", (r) => this.#le(r), { signal: n }), document.addEventListener("mousemove", (r) => this.#ae(r), { signal: n }), document.addEventListener("mouseup", (r) => this.#ce(r), { signal: n }), this.virtualization.enabled && requestAnimationFrame(() => this.refreshVirtualWindow(!0)), requestAnimationFrame(() => {
|
|
1819
1819
|
const r = this.bodyEl.querySelector(".data-grid-row");
|
|
1820
1820
|
if (r) {
|
|
1821
1821
|
const l = r.getBoundingClientRect().height;
|
|
1822
1822
|
l && Math.abs(l - this.virtualization.rowHeight) > 0.1 && (this.virtualization.rowHeight = l, this.refreshVirtualWindow(!0));
|
|
1823
1823
|
}
|
|
1824
|
-
}), this.virtualization.viewportEl && (this.#
|
|
1825
|
-
this.#
|
|
1826
|
-
this.#
|
|
1824
|
+
}), this.virtualization.viewportEl && (this.#b = new ResizeObserver(() => {
|
|
1825
|
+
this.#f || (this.#f = requestAnimationFrame(() => {
|
|
1826
|
+
this.#f = 0, this.refreshVirtualWindow(!0);
|
|
1827
1827
|
}));
|
|
1828
|
-
}), this.#
|
|
1828
|
+
}), this.#b.observe(this.virtualization.viewportEl)), queueMicrotask(() => this.#Z()), requestAnimationFrame(() => requestAnimationFrame(() => this.#I?.()));
|
|
1829
1829
|
}
|
|
1830
1830
|
// ---------------- Event Emitters ----------------
|
|
1831
1831
|
#i(e, o) {
|
|
@@ -1849,55 +1849,55 @@ class V extends HTMLElement {
|
|
|
1849
1849
|
/** Update ARIA selection attributes on rendered rows/cells */
|
|
1850
1850
|
#Z() {
|
|
1851
1851
|
this.bodyEl?.querySelectorAll(".data-grid-row")?.forEach((o, n) => {
|
|
1852
|
-
const
|
|
1853
|
-
o.setAttribute("aria-selected", String(
|
|
1854
|
-
|
|
1852
|
+
const i = n === this.focusRow;
|
|
1853
|
+
o.setAttribute("aria-selected", String(i)), o.querySelectorAll(".cell").forEach((s, r) => {
|
|
1854
|
+
s.setAttribute("aria-selected", String(i && r === this.focusCol));
|
|
1855
1855
|
});
|
|
1856
1856
|
});
|
|
1857
1857
|
}
|
|
1858
1858
|
// ---------------- Watch Handlers ----------------
|
|
1859
1859
|
#J() {
|
|
1860
|
-
if (!this.#
|
|
1861
|
-
this.#u(), this.#
|
|
1860
|
+
if (!this.#h) return;
|
|
1861
|
+
this.#u(), this.#o.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, this.#F()) : (this._columns.forEach((o) => {
|
|
1862
1862
|
!o.__userResized && o.__autoSized && delete o.width;
|
|
1863
1863
|
}), this.updateTemplate());
|
|
1864
1864
|
}
|
|
1865
1865
|
#Q() {
|
|
1866
|
-
this.#
|
|
1866
|
+
this.#h && (this.#u(), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
|
|
1867
1867
|
}
|
|
1868
1868
|
#ee() {
|
|
1869
|
-
this._rows = Array.isArray(this.#
|
|
1869
|
+
this._rows = Array.isArray(this.#s) ? [...this.#s] : [], this.#L(), !this.#r || Array.isArray(this.#r) && this.#r.length === 0 ? this.#c() : this.refreshVirtualWindow(!0);
|
|
1870
1870
|
}
|
|
1871
1871
|
#te() {
|
|
1872
|
-
|
|
1872
|
+
X(this), this.#h && (this.#u(), this.#c());
|
|
1873
1873
|
}
|
|
1874
1874
|
#oe() {
|
|
1875
|
-
this.#
|
|
1875
|
+
this.#h && (this.#u(), this.#W(), this.#L(), this.#M(), this.#T(), this.updateTemplate(), this.refreshVirtualWindow(!0));
|
|
1876
1876
|
}
|
|
1877
1877
|
// ---------------- Helper Wrappers ----------------
|
|
1878
1878
|
#ne() {
|
|
1879
|
-
|
|
1879
|
+
Ae(this);
|
|
1880
1880
|
}
|
|
1881
|
-
#
|
|
1882
|
-
|
|
1881
|
+
#T() {
|
|
1882
|
+
K(this);
|
|
1883
1883
|
}
|
|
1884
1884
|
updateTemplate() {
|
|
1885
|
-
|
|
1885
|
+
ce(this);
|
|
1886
1886
|
}
|
|
1887
|
-
#
|
|
1888
|
-
|
|
1889
|
-
}
|
|
1890
|
-
#
|
|
1891
|
-
if (this.#
|
|
1892
|
-
const e = this.#
|
|
1893
|
-
if (
|
|
1894
|
-
const
|
|
1895
|
-
if (!o.some((l) =>
|
|
1896
|
-
this._columns = [...
|
|
1887
|
+
#F() {
|
|
1888
|
+
Te(this);
|
|
1889
|
+
}
|
|
1890
|
+
#M() {
|
|
1891
|
+
if (this.#t) {
|
|
1892
|
+
const e = this.#H.length > 0 ? this.#H : this._columns, o = e.filter((s) => !s.hidden), n = e.filter((s) => s.hidden), i = this.#t.processColumns([...o]);
|
|
1893
|
+
if (i !== o) {
|
|
1894
|
+
const s = new Map(i.map((l, a) => [l.field, { col: l, order: a }]));
|
|
1895
|
+
if (!o.some((l) => s.has(l.field)) && i.length > 0)
|
|
1896
|
+
this._columns = [...i, ...n];
|
|
1897
1897
|
else {
|
|
1898
1898
|
const l = e.map((a) => {
|
|
1899
1899
|
if (a.hidden) return a;
|
|
1900
|
-
const d =
|
|
1900
|
+
const d = s.get(a.field);
|
|
1901
1901
|
return d ? d.col : a;
|
|
1902
1902
|
});
|
|
1903
1903
|
this._columns = l;
|
|
@@ -1907,13 +1907,13 @@ class V extends HTMLElement {
|
|
|
1907
1907
|
}
|
|
1908
1908
|
}
|
|
1909
1909
|
/** Execute all plugin afterRender hooks */
|
|
1910
|
-
#
|
|
1911
|
-
this.#
|
|
1910
|
+
#w() {
|
|
1911
|
+
this.#t?.afterRender();
|
|
1912
1912
|
}
|
|
1913
1913
|
/** Recompute row model via plugin hooks (grouping, tree, filtering, etc.). */
|
|
1914
|
-
#
|
|
1915
|
-
|
|
1916
|
-
const e = Array.isArray(this.#
|
|
1914
|
+
#L() {
|
|
1915
|
+
X(this);
|
|
1916
|
+
const e = Array.isArray(this.#s) ? [...this.#s] : [], o = this.#t?.processRows(e) ?? e;
|
|
1917
1917
|
this._rows = o;
|
|
1918
1918
|
}
|
|
1919
1919
|
/**
|
|
@@ -1935,74 +1935,74 @@ class V extends HTMLElement {
|
|
|
1935
1935
|
* - Plugins receive config via their attach() method
|
|
1936
1936
|
*/
|
|
1937
1937
|
#u() {
|
|
1938
|
-
const e = this.#
|
|
1938
|
+
const e = this.#p ? { ...this.#p } : {};
|
|
1939
1939
|
let o = Array.isArray(e.columns) ? [...e.columns] : [];
|
|
1940
|
-
const n = (this.__lightDomColumnsCache || []).map((
|
|
1941
|
-
...
|
|
1940
|
+
const n = (this.__lightDomColumnsCache || []).map((i) => ({
|
|
1941
|
+
...i
|
|
1942
1942
|
}));
|
|
1943
1943
|
if (n.length) {
|
|
1944
|
-
const
|
|
1945
|
-
o.forEach((
|
|
1946
|
-
const r = s
|
|
1947
|
-
r ? (
|
|
1944
|
+
const i = {};
|
|
1945
|
+
o.forEach((s) => i[s.field] = s), n.forEach((s) => {
|
|
1946
|
+
const r = i[s.field];
|
|
1947
|
+
r ? (s.header && !r.header && (r.header = s.header), s.type && !r.type && (r.type = s.type), r.sortable = r.sortable || s.sortable, s.resizable && (r.resizable = !0), s.editable && (r.editable = !0)) : (o.push(s), i[s.field] = s);
|
|
1948
1948
|
});
|
|
1949
1949
|
}
|
|
1950
|
-
if (this.#
|
|
1950
|
+
if (this.#r && this.#r.length && (o = [...this.#r]), (!o || o.length === 0) && this._rows.length && (o = le(this._rows).columns), o.length) {
|
|
1951
1951
|
o.forEach((r) => {
|
|
1952
1952
|
r.sortable === void 0 && (r.sortable = !0), r.resizable === void 0 && (r.resizable = !0);
|
|
1953
1953
|
});
|
|
1954
|
-
const
|
|
1955
|
-
|
|
1954
|
+
const i = this.#o.columns;
|
|
1955
|
+
i?.some((r) => r.__compiledView || r.__compiledEditor) ? e.columns = i : e.columns = o;
|
|
1956
1956
|
} else {
|
|
1957
|
-
const
|
|
1958
|
-
|
|
1957
|
+
const i = this.#o.columns;
|
|
1958
|
+
i?.some((s) => s.__compiledView || s.__compiledEditor) && (e.columns = i);
|
|
1959
1959
|
}
|
|
1960
|
-
this.#
|
|
1961
|
-
|
|
1960
|
+
this.#m && (e.fitMode = this.#m), e.fitMode || (e.fitMode = "stretch"), this.#v && (e.editOn = this.#v), e.columnState && !this.#d && (this.#d = e.columnState), this.#o = e, e.fitMode === "fixed" && this._columns.forEach((i) => {
|
|
1961
|
+
i.width == null && (i.width = 80);
|
|
1962
1962
|
});
|
|
1963
1963
|
}
|
|
1964
1964
|
// ---------------- Delegate Wrappers ----------------
|
|
1965
|
-
#
|
|
1966
|
-
this.#P || (this.#P = (
|
|
1965
|
+
#z(e, o, n = this.__rowRenderEpoch) {
|
|
1966
|
+
this.#P || (this.#P = (i, s, r) => this.#t?.renderRow(i, s, r) ?? !1), He(this, e, o, n, this.#P);
|
|
1967
1967
|
}
|
|
1968
|
-
#
|
|
1969
|
-
|
|
1968
|
+
#ie(e, o) {
|
|
1969
|
+
z(this, e, o);
|
|
1970
1970
|
}
|
|
1971
|
-
#
|
|
1971
|
+
#D(e, o) {
|
|
1972
1972
|
N(this, e, o);
|
|
1973
1973
|
}
|
|
1974
1974
|
// ---------------- Core Helpers ----------------
|
|
1975
|
-
#
|
|
1975
|
+
#c() {
|
|
1976
1976
|
if (!this.isConnected || !this.headerRowEl || !this.bodyEl)
|
|
1977
1977
|
return;
|
|
1978
|
-
const e = this.#
|
|
1978
|
+
const e = this.#p?.columns || this.#r || [];
|
|
1979
1979
|
if (e.length) {
|
|
1980
|
-
const n = new Map(this._columns.filter((
|
|
1981
|
-
...
|
|
1982
|
-
hidden: n.get(
|
|
1980
|
+
const n = new Map(this._columns.filter((s) => s.hidden).map((s) => [s.field, !0])), i = e.map((s) => ({
|
|
1981
|
+
...s,
|
|
1982
|
+
hidden: n.get(s.field) ?? s.hidden
|
|
1983
1983
|
}));
|
|
1984
|
-
this._columns =
|
|
1984
|
+
this._columns = i;
|
|
1985
1985
|
}
|
|
1986
|
-
if (this.#ne(), this.#u(), this.#W(), this.#
|
|
1987
|
-
const n = this.#
|
|
1988
|
-
this.#
|
|
1986
|
+
if (this.#ne(), this.#u(), this.#W(), this.#H = [...this._columns], this.#L(), this.#M(), this.#d) {
|
|
1987
|
+
const n = this.#d;
|
|
1988
|
+
this.#d = void 0, this.#U(n);
|
|
1989
1989
|
}
|
|
1990
|
-
this.#
|
|
1990
|
+
this.#T(), this.updateTemplate(), this.refreshVirtualWindow(!0), this.#o.fitMode === "fixed" && !this.__didInitialAutoSize && requestAnimationFrame(() => this.#F()), this.bodyEl && (this.bodyEl.style.display = "", this.bodyEl.style.gridTemplateColumns = ""), queueMicrotask(() => this.#w());
|
|
1991
1991
|
}
|
|
1992
1992
|
/** Internal method to apply column state without triggering setup loop */
|
|
1993
|
-
#
|
|
1994
|
-
const o = this.#
|
|
1995
|
-
|
|
1996
|
-
for (const
|
|
1997
|
-
const
|
|
1998
|
-
|
|
1993
|
+
#U(e) {
|
|
1994
|
+
const o = this.#o.columns ?? [], n = this.#t?.getAll() ?? [];
|
|
1995
|
+
he(this, e, o, n);
|
|
1996
|
+
for (const i of e.columns) {
|
|
1997
|
+
const s = o.find((r) => r.field === i.field);
|
|
1998
|
+
s && (s.hidden = !i.visible);
|
|
1999
1999
|
}
|
|
2000
2000
|
}
|
|
2001
|
-
#
|
|
2001
|
+
#se() {
|
|
2002
2002
|
return this._rows.length <= this.virtualization.bypassThreshold;
|
|
2003
2003
|
}
|
|
2004
2004
|
#re(e) {
|
|
2005
|
-
if (this.refreshVirtualWindow(!1), this.#
|
|
2005
|
+
if (this.refreshVirtualWindow(!1), this.#t?.onScrollRender(), this.#C) {
|
|
2006
2006
|
const o = this.virtualization.container, n = {
|
|
2007
2007
|
scrollTop: e,
|
|
2008
2008
|
scrollLeft: o?.scrollLeft ?? 0,
|
|
@@ -2012,11 +2012,11 @@ class V extends HTMLElement {
|
|
|
2012
2012
|
clientWidth: o?.clientWidth ?? 0,
|
|
2013
2013
|
originalEvent: new Event("scroll")
|
|
2014
2014
|
};
|
|
2015
|
-
this.#
|
|
2015
|
+
this.#t?.onScroll(n);
|
|
2016
2016
|
}
|
|
2017
2017
|
}
|
|
2018
2018
|
findHeaderRow() {
|
|
2019
|
-
return this.#
|
|
2019
|
+
return this.#n.querySelector(".header-row");
|
|
2020
2020
|
}
|
|
2021
2021
|
findRenderedRowElement(e) {
|
|
2022
2022
|
return Array.from(this.bodyEl.querySelectorAll(".data-grid-row")).find((o) => {
|
|
@@ -2028,42 +2028,42 @@ class V extends HTMLElement {
|
|
|
2028
2028
|
* Dispatch a cell click event to the plugin system.
|
|
2029
2029
|
* Returns true if any plugin handled the event.
|
|
2030
2030
|
*/
|
|
2031
|
-
dispatchCellClick(e, o, n,
|
|
2032
|
-
const
|
|
2033
|
-
if (!
|
|
2031
|
+
dispatchCellClick(e, o, n, i) {
|
|
2032
|
+
const s = this._rows[o], r = this._columns[n];
|
|
2033
|
+
if (!s || !r) return !1;
|
|
2034
2034
|
const l = {
|
|
2035
|
-
row:
|
|
2035
|
+
row: s,
|
|
2036
2036
|
rowIndex: o,
|
|
2037
2037
|
colIndex: n,
|
|
2038
2038
|
field: r.field,
|
|
2039
|
-
value:
|
|
2040
|
-
cellEl:
|
|
2039
|
+
value: s[r.field],
|
|
2040
|
+
cellEl: i,
|
|
2041
2041
|
originalEvent: e
|
|
2042
2042
|
};
|
|
2043
|
-
return this.#
|
|
2043
|
+
return this.#t?.onCellClick(l) ?? !1;
|
|
2044
2044
|
}
|
|
2045
2045
|
/**
|
|
2046
2046
|
* Dispatch a header click event to the plugin system.
|
|
2047
2047
|
* Returns true if any plugin handled the event.
|
|
2048
2048
|
*/
|
|
2049
2049
|
dispatchHeaderClick(e, o, n) {
|
|
2050
|
-
const
|
|
2051
|
-
if (!
|
|
2052
|
-
const
|
|
2050
|
+
const i = this._columns[o];
|
|
2051
|
+
if (!i) return !1;
|
|
2052
|
+
const s = {
|
|
2053
2053
|
colIndex: o,
|
|
2054
|
-
field:
|
|
2055
|
-
column:
|
|
2054
|
+
field: i.field,
|
|
2055
|
+
column: i,
|
|
2056
2056
|
headerEl: n,
|
|
2057
2057
|
originalEvent: e
|
|
2058
2058
|
};
|
|
2059
|
-
return this.#
|
|
2059
|
+
return this.#t?.onHeaderClick(s) ?? !1;
|
|
2060
2060
|
}
|
|
2061
2061
|
/**
|
|
2062
2062
|
* Dispatch a keyboard event to the plugin system.
|
|
2063
2063
|
* Returns true if any plugin handled the event.
|
|
2064
2064
|
*/
|
|
2065
2065
|
dispatchKeyDown(e) {
|
|
2066
|
-
return this.#
|
|
2066
|
+
return this.#t?.onKeyDown(e) ?? !1;
|
|
2067
2067
|
}
|
|
2068
2068
|
/**
|
|
2069
2069
|
* Build a CellMouseEvent from a native MouseEvent.
|
|
@@ -2071,23 +2071,23 @@ class V extends HTMLElement {
|
|
|
2071
2071
|
*/
|
|
2072
2072
|
#N(e, o) {
|
|
2073
2073
|
let n = null;
|
|
2074
|
-
const
|
|
2075
|
-
if (
|
|
2076
|
-
const u = this.#
|
|
2074
|
+
const i = e.composedPath?.();
|
|
2075
|
+
if (i && i.length > 0 ? n = i[0] : n = e.target, n && !this.#n.contains(n)) {
|
|
2076
|
+
const u = this.#n.elementFromPoint(e.clientX, e.clientY);
|
|
2077
2077
|
u && (n = u);
|
|
2078
2078
|
}
|
|
2079
|
-
const
|
|
2080
|
-
let a, d, h, p,
|
|
2081
|
-
return
|
|
2079
|
+
const s = n?.closest?.("[data-col]"), r = n?.closest?.(".data-grid-row"), l = n?.closest?.(".header-row");
|
|
2080
|
+
let a, d, h, p, b, c;
|
|
2081
|
+
return s && (a = parseInt(s.getAttribute("data-row") ?? "-1", 10), d = parseInt(s.getAttribute("data-col") ?? "-1", 10), a >= 0 && d >= 0 && (h = this._rows[a], c = this._columns[d], p = c?.field, b = h && p ? h[p] : void 0)), {
|
|
2082
2082
|
type: o,
|
|
2083
2083
|
row: h,
|
|
2084
2084
|
rowIndex: a !== void 0 && a >= 0 ? a : void 0,
|
|
2085
2085
|
colIndex: d !== void 0 && d >= 0 ? d : void 0,
|
|
2086
2086
|
field: p,
|
|
2087
|
-
value:
|
|
2087
|
+
value: b,
|
|
2088
2088
|
column: c,
|
|
2089
2089
|
originalEvent: e,
|
|
2090
|
-
cellElement:
|
|
2090
|
+
cellElement: s ?? void 0,
|
|
2091
2091
|
rowElement: r ?? void 0,
|
|
2092
2092
|
isHeader: !!l,
|
|
2093
2093
|
cell: a !== void 0 && d !== void 0 && a >= 0 && d >= 0 ? { row: a, col: d } : void 0
|
|
@@ -2098,23 +2098,23 @@ class V extends HTMLElement {
|
|
|
2098
2098
|
*/
|
|
2099
2099
|
#le(e) {
|
|
2100
2100
|
const o = this.#N(e, "mousedown");
|
|
2101
|
-
(this.#
|
|
2101
|
+
(this.#t?.onCellMouseDown(o) ?? !1) && (this.#y = !0);
|
|
2102
2102
|
}
|
|
2103
2103
|
/**
|
|
2104
2104
|
* Handle mousemove events (only when dragging).
|
|
2105
2105
|
*/
|
|
2106
2106
|
#ae(e) {
|
|
2107
|
-
if (!this.#
|
|
2107
|
+
if (!this.#y) return;
|
|
2108
2108
|
const o = this.#N(e, "mousemove");
|
|
2109
|
-
this.#
|
|
2109
|
+
this.#t?.onCellMouseMove(o);
|
|
2110
2110
|
}
|
|
2111
2111
|
/**
|
|
2112
2112
|
* Handle mouseup events.
|
|
2113
2113
|
*/
|
|
2114
2114
|
#ce(e) {
|
|
2115
|
-
if (!this.#
|
|
2115
|
+
if (!this.#y) return;
|
|
2116
2116
|
const o = this.#N(e, "mouseup");
|
|
2117
|
-
this.#
|
|
2117
|
+
this.#t?.onCellMouseUp(o), this.#y = !1;
|
|
2118
2118
|
}
|
|
2119
2119
|
// API consumed by internal utils (rows.ts)
|
|
2120
2120
|
get changedRows() {
|
|
@@ -2127,20 +2127,20 @@ class V extends HTMLElement {
|
|
|
2127
2127
|
this._changedRowIndices.clear(), e || this.#i("changed-rows-reset", { rows: this.changedRows, indices: this.changedRowIndices }), this.rowPool.forEach((o) => o.classList.remove("changed"));
|
|
2128
2128
|
}
|
|
2129
2129
|
async beginBulkEdit(e) {
|
|
2130
|
-
if (!this._columns.some((
|
|
2130
|
+
if (!this._columns.some((s) => s.editable)) return;
|
|
2131
2131
|
const n = this._rows[e];
|
|
2132
|
-
this.#
|
|
2133
|
-
const
|
|
2134
|
-
|
|
2132
|
+
this.#ie(e, n);
|
|
2133
|
+
const i = this.findRenderedRowElement?.(e);
|
|
2134
|
+
i && (Array.from(i.children).forEach((s, r) => {
|
|
2135
2135
|
const l = this.visibleColumns[r];
|
|
2136
2136
|
if (l?.editable) {
|
|
2137
|
-
const a =
|
|
2138
|
-
a.classList.contains("editing") ||
|
|
2137
|
+
const a = s;
|
|
2138
|
+
a.classList.contains("editing") || O(this, n, e, l, a);
|
|
2139
2139
|
}
|
|
2140
2140
|
}), queueMicrotask(() => {
|
|
2141
|
-
const
|
|
2142
|
-
if (
|
|
2143
|
-
const r =
|
|
2141
|
+
const s = i.querySelector(`.cell[data-col="${this.focusCol}"]`);
|
|
2142
|
+
if (s?.classList.contains("editing")) {
|
|
2143
|
+
const r = s.querySelector(
|
|
2144
2144
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
2145
2145
|
);
|
|
2146
2146
|
try {
|
|
@@ -2151,17 +2151,17 @@ class V extends HTMLElement {
|
|
|
2151
2151
|
}));
|
|
2152
2152
|
}
|
|
2153
2153
|
async commitActiveRowEdit() {
|
|
2154
|
-
this.activeEditRows !== -1 && this.#
|
|
2154
|
+
this.activeEditRows !== -1 && this.#D(this.activeEditRows, !1);
|
|
2155
2155
|
}
|
|
2156
2156
|
async ready() {
|
|
2157
|
-
return this
|
|
2157
|
+
return this.#$;
|
|
2158
2158
|
}
|
|
2159
2159
|
async forceLayout() {
|
|
2160
|
-
this.#
|
|
2160
|
+
this.#c(), await new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(e)));
|
|
2161
2161
|
}
|
|
2162
2162
|
/** Public method: returns a frozen snapshot of the merged effective configuration */
|
|
2163
2163
|
async getConfig() {
|
|
2164
|
-
return Object.freeze({ ...this.#
|
|
2164
|
+
return Object.freeze({ ...this.#o || {} });
|
|
2165
2165
|
}
|
|
2166
2166
|
// ---------------- Column Visibility API ----------------
|
|
2167
2167
|
/**
|
|
@@ -2171,15 +2171,15 @@ class V extends HTMLElement {
|
|
|
2171
2171
|
* @returns True if visibility was changed, false if column not found or locked
|
|
2172
2172
|
*/
|
|
2173
2173
|
setColumnVisible(e, o) {
|
|
2174
|
-
const n = this.#
|
|
2175
|
-
if (!
|
|
2174
|
+
const n = this.#o.columns, i = n?.find((l) => l.field === e);
|
|
2175
|
+
if (!i || !o && i.lockVisible || !o && (n ?? []).filter((a) => !a.hidden && a.field !== e).length === 0)
|
|
2176
2176
|
return !1;
|
|
2177
|
-
const
|
|
2178
|
-
return
|
|
2177
|
+
const s = !!i.hidden, r = !o;
|
|
2178
|
+
return s !== r ? (i.hidden = r, this.#i("column-visibility", {
|
|
2179
2179
|
field: e,
|
|
2180
2180
|
visible: o,
|
|
2181
2181
|
visibleColumns: (n ?? []).filter((l) => !l.hidden).map((l) => l.field)
|
|
2182
|
-
}), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#
|
|
2182
|
+
}), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange(), !0) : !1;
|
|
2183
2183
|
}
|
|
2184
2184
|
/**
|
|
2185
2185
|
* Toggle the visibility of a column.
|
|
@@ -2187,8 +2187,8 @@ class V extends HTMLElement {
|
|
|
2187
2187
|
* @returns True if visibility was toggled, false if column not found or locked
|
|
2188
2188
|
*/
|
|
2189
2189
|
toggleColumnVisibility(e) {
|
|
2190
|
-
const
|
|
2191
|
-
return this.setColumnVisible(e,
|
|
2190
|
+
const i = !!this.#o.columns?.find((s) => s.field === e)?.hidden;
|
|
2191
|
+
return this.setColumnVisible(e, i);
|
|
2192
2192
|
}
|
|
2193
2193
|
/**
|
|
2194
2194
|
* Check if a column is currently visible.
|
|
@@ -2196,19 +2196,19 @@ class V extends HTMLElement {
|
|
|
2196
2196
|
* @returns True if visible, false if hidden or not found
|
|
2197
2197
|
*/
|
|
2198
2198
|
isColumnVisible(e) {
|
|
2199
|
-
const n = this.#
|
|
2199
|
+
const n = this.#o.columns?.find((i) => i.field === e);
|
|
2200
2200
|
return n ? !n.hidden : !1;
|
|
2201
2201
|
}
|
|
2202
2202
|
/**
|
|
2203
2203
|
* Show all columns.
|
|
2204
2204
|
*/
|
|
2205
2205
|
showAllColumns() {
|
|
2206
|
-
const e = this.#
|
|
2206
|
+
const e = this.#o.columns;
|
|
2207
2207
|
e?.some((n) => n.hidden) && (e?.forEach((n) => {
|
|
2208
2208
|
n.hidden = !1;
|
|
2209
2209
|
}), this.#i("column-visibility", {
|
|
2210
2210
|
visibleColumns: (e ?? []).map((n) => n.field)
|
|
2211
|
-
}), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#
|
|
2211
|
+
}), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange());
|
|
2212
2212
|
}
|
|
2213
2213
|
/**
|
|
2214
2214
|
* Get list of all column fields (including hidden).
|
|
@@ -2217,7 +2217,7 @@ class V extends HTMLElement {
|
|
|
2217
2217
|
* @returns Array of all field names with their visibility status
|
|
2218
2218
|
*/
|
|
2219
2219
|
getAllColumns() {
|
|
2220
|
-
return (this.#
|
|
2220
|
+
return (this.#o.columns ?? []).map((o) => ({
|
|
2221
2221
|
field: o.field,
|
|
2222
2222
|
header: o.header || o.field,
|
|
2223
2223
|
visible: !o.hidden,
|
|
@@ -2231,14 +2231,14 @@ class V extends HTMLElement {
|
|
|
2231
2231
|
*/
|
|
2232
2232
|
setColumnOrder(e) {
|
|
2233
2233
|
if (!e.length) return;
|
|
2234
|
-
const o = new Map(this._columns.map((
|
|
2235
|
-
for (const
|
|
2236
|
-
const
|
|
2237
|
-
|
|
2234
|
+
const o = new Map(this._columns.map((i) => [i.field, i])), n = [];
|
|
2235
|
+
for (const i of e) {
|
|
2236
|
+
const s = o.get(i);
|
|
2237
|
+
s && (n.push(s), o.delete(i));
|
|
2238
2238
|
}
|
|
2239
|
-
for (const
|
|
2240
|
-
n.push(
|
|
2241
|
-
this._columns = n, this.#
|
|
2239
|
+
for (const i of o.values())
|
|
2240
|
+
n.push(i);
|
|
2241
|
+
this._columns = n, this.#T(), this.updateTemplate(), this.refreshVirtualWindow(!0);
|
|
2242
2242
|
}
|
|
2243
2243
|
/**
|
|
2244
2244
|
* Get the current column order as an array of field names.
|
|
@@ -2253,15 +2253,15 @@ class V extends HTMLElement {
|
|
|
2253
2253
|
* Returns a serializable object suitable for localStorage or database storage.
|
|
2254
2254
|
*/
|
|
2255
2255
|
getColumnState() {
|
|
2256
|
-
const e = this.#
|
|
2257
|
-
return
|
|
2256
|
+
const e = this.#t?.getAll() ?? [];
|
|
2257
|
+
return re(this, e);
|
|
2258
2258
|
}
|
|
2259
2259
|
/**
|
|
2260
2260
|
* Set the column state, restoring order, width, visibility, sort, and plugin state.
|
|
2261
2261
|
* Use this to restore previously saved column state.
|
|
2262
2262
|
*/
|
|
2263
2263
|
set columnState(e) {
|
|
2264
|
-
e && (this.#
|
|
2264
|
+
e && (this.#d = e, this.#k && this.#de(e));
|
|
2265
2265
|
}
|
|
2266
2266
|
/**
|
|
2267
2267
|
* Get the current column state.
|
|
@@ -2273,9 +2273,9 @@ class V extends HTMLElement {
|
|
|
2273
2273
|
* Apply column state internally.
|
|
2274
2274
|
*/
|
|
2275
2275
|
#de(e) {
|
|
2276
|
-
(this.#
|
|
2276
|
+
(this.#o.columns ?? []).forEach((n) => {
|
|
2277
2277
|
n.hidden = !1;
|
|
2278
|
-
}), this.#
|
|
2278
|
+
}), this.#U(e), this.#c();
|
|
2279
2279
|
}
|
|
2280
2280
|
/**
|
|
2281
2281
|
* Request a state change event to be emitted.
|
|
@@ -2284,26 +2284,26 @@ class V extends HTMLElement {
|
|
|
2284
2284
|
* The event is debounced to avoid excessive events during drag operations.
|
|
2285
2285
|
*/
|
|
2286
2286
|
requestStateChange() {
|
|
2287
|
-
this.#
|
|
2287
|
+
this.#O || (this.#O = fe(
|
|
2288
2288
|
this,
|
|
2289
|
-
() => this.#
|
|
2289
|
+
() => this.#t?.getAll() ?? [],
|
|
2290
2290
|
(e) => this.#i("column-state-change", e)
|
|
2291
|
-
)), this.#
|
|
2291
|
+
)), this.#O();
|
|
2292
2292
|
}
|
|
2293
2293
|
/**
|
|
2294
2294
|
* Reset column state to initial configuration.
|
|
2295
2295
|
* Clears all user modifications (order, width, visibility, sort).
|
|
2296
2296
|
*/
|
|
2297
2297
|
resetColumnState() {
|
|
2298
|
-
this.#
|
|
2298
|
+
this.#d = void 0, (this.#o.columns ?? []).forEach((n) => {
|
|
2299
2299
|
n.hidden = !1;
|
|
2300
|
-
}), this.sortState = null, this.__originalOrder = [], this.#u(), this.#
|
|
2301
|
-
const o = this.#
|
|
2300
|
+
}), this.sortState = null, this.__originalOrder = [], this.#u(), this.#c();
|
|
2301
|
+
const o = this.#t?.getAll() ?? [];
|
|
2302
2302
|
for (const n of o)
|
|
2303
2303
|
if (n.applyColumnState)
|
|
2304
|
-
for (const
|
|
2305
|
-
n.applyColumnState(
|
|
2306
|
-
field:
|
|
2304
|
+
for (const i of this._columns)
|
|
2305
|
+
n.applyColumnState(i.field, {
|
|
2306
|
+
field: i.field,
|
|
2307
2307
|
order: 0,
|
|
2308
2308
|
visible: !0
|
|
2309
2309
|
});
|
|
@@ -2336,16 +2336,16 @@ class V extends HTMLElement {
|
|
|
2336
2336
|
if (this.#e.isPanelOpen) return;
|
|
2337
2337
|
if (this.#e.isPanelOpen = !0, this.#e.expandedSections.size === 0 && this.#e.toolPanels.size > 0) {
|
|
2338
2338
|
const n = [...this.#e.toolPanels.values()].sort(
|
|
2339
|
-
(
|
|
2339
|
+
(i, s) => (i.order ?? 100) - (s.order ?? 100)
|
|
2340
2340
|
)[0];
|
|
2341
2341
|
n && this.#e.expandedSections.add(n.id);
|
|
2342
2342
|
}
|
|
2343
|
-
|
|
2343
|
+
ne(this.#n, this.#e), ie(this.#n, this.#e);
|
|
2344
2344
|
const e = {
|
|
2345
|
-
expand: this.#
|
|
2346
|
-
collapse: this.#
|
|
2345
|
+
expand: this.#o?.icons?.expand ?? P.expand,
|
|
2346
|
+
collapse: this.#o?.icons?.collapse ?? P.collapse
|
|
2347
2347
|
};
|
|
2348
|
-
|
|
2348
|
+
We(this.#n, this.#e, e), this.#i("tool-panel-open", { sections: this.expandedToolPanelSections });
|
|
2349
2349
|
}
|
|
2350
2350
|
/**
|
|
2351
2351
|
* Close the tool panel.
|
|
@@ -2357,7 +2357,7 @@ class V extends HTMLElement {
|
|
|
2357
2357
|
this.#e.panelCleanups.clear(), this.#e.activePanelCleanup && (this.#e.activePanelCleanup(), this.#e.activePanelCleanup = null);
|
|
2358
2358
|
for (const e of this.#e.toolPanels.values())
|
|
2359
2359
|
e.onClose?.();
|
|
2360
|
-
this.#e.isPanelOpen = !1,
|
|
2360
|
+
this.#e.isPanelOpen = !1, ne(this.#n, this.#e), ie(this.#n, this.#e), this.#i("tool-panel-close", {});
|
|
2361
2361
|
}
|
|
2362
2362
|
}
|
|
2363
2363
|
/**
|
|
@@ -2381,17 +2381,17 @@ class V extends HTMLElement {
|
|
|
2381
2381
|
return;
|
|
2382
2382
|
const n = this.#e.expandedSections.has(e);
|
|
2383
2383
|
if (n) {
|
|
2384
|
-
const
|
|
2385
|
-
|
|
2384
|
+
const i = this.#e.panelCleanups.get(e);
|
|
2385
|
+
i && (i(), this.#e.panelCleanups.delete(e)), o.onClose?.(), this.#e.expandedSections.delete(e), this.#q(e, !1);
|
|
2386
2386
|
} else {
|
|
2387
|
-
for (const [
|
|
2388
|
-
if (
|
|
2389
|
-
const r = this.#e.panelCleanups.get(
|
|
2390
|
-
r && (r(), this.#e.panelCleanups.delete(
|
|
2391
|
-
const l = this.#
|
|
2387
|
+
for (const [i, s] of this.#e.toolPanels)
|
|
2388
|
+
if (i !== e && this.#e.expandedSections.has(i)) {
|
|
2389
|
+
const r = this.#e.panelCleanups.get(i);
|
|
2390
|
+
r && (r(), this.#e.panelCleanups.delete(i)), s.onClose?.(), this.#e.expandedSections.delete(i), this.#q(i, !1);
|
|
2391
|
+
const l = this.#n.querySelector(`[data-section="${i}"] .tbw-accordion-content`);
|
|
2392
2392
|
l && (l.innerHTML = "");
|
|
2393
2393
|
}
|
|
2394
|
-
this.#e.expandedSections.add(e), this.#q(e, !0), this.#
|
|
2394
|
+
this.#e.expandedSections.add(e), this.#q(e, !0), this.#ue(e);
|
|
2395
2395
|
}
|
|
2396
2396
|
this.#i("tool-panel-section-toggle", { id: e, expanded: !n });
|
|
2397
2397
|
}
|
|
@@ -2399,19 +2399,19 @@ class V extends HTMLElement {
|
|
|
2399
2399
|
* Update accordion section visual state.
|
|
2400
2400
|
*/
|
|
2401
2401
|
#q(e, o) {
|
|
2402
|
-
const n = this.#
|
|
2402
|
+
const n = this.#n.querySelector(`[data-section="${e}"]`);
|
|
2403
2403
|
n && n.classList.toggle("expanded", o);
|
|
2404
2404
|
}
|
|
2405
2405
|
/**
|
|
2406
2406
|
* Render content for a single accordion section.
|
|
2407
2407
|
*/
|
|
2408
|
-
#
|
|
2408
|
+
#ue(e) {
|
|
2409
2409
|
const o = this.#e.toolPanels.get(e);
|
|
2410
2410
|
if (!o?.render) return;
|
|
2411
|
-
const n = this.#
|
|
2411
|
+
const n = this.#n.querySelector(`[data-section="${e}"] .tbw-accordion-content`);
|
|
2412
2412
|
if (!n) return;
|
|
2413
|
-
const
|
|
2414
|
-
|
|
2413
|
+
const i = o.render(n);
|
|
2414
|
+
i && this.#e.panelCleanups.set(e, i);
|
|
2415
2415
|
}
|
|
2416
2416
|
/**
|
|
2417
2417
|
* Get registered tool panel definitions.
|
|
@@ -2427,13 +2427,13 @@ class V extends HTMLElement {
|
|
|
2427
2427
|
console.warn(`[tbw-grid] Tool panel "${e.id}" already registered`);
|
|
2428
2428
|
return;
|
|
2429
2429
|
}
|
|
2430
|
-
this.#e.toolPanels.set(e.id, e), this.#
|
|
2430
|
+
this.#e.toolPanels.set(e.id, e), this.#a && this.#g();
|
|
2431
2431
|
}
|
|
2432
2432
|
/**
|
|
2433
2433
|
* Unregister a custom tool panel.
|
|
2434
2434
|
*/
|
|
2435
2435
|
unregisterToolPanel(e) {
|
|
2436
|
-
this.#e.activePanel === e && this.closeToolPanel(), this.#e.toolPanels.delete(e), this.#
|
|
2436
|
+
this.#e.activePanel === e && this.closeToolPanel(), this.#e.toolPanels.delete(e), this.#a && this.#g();
|
|
2437
2437
|
}
|
|
2438
2438
|
/**
|
|
2439
2439
|
* Get registered header content definitions.
|
|
@@ -2449,20 +2449,20 @@ class V extends HTMLElement {
|
|
|
2449
2449
|
console.warn(`[tbw-grid] Header content "${e.id}" already registered`);
|
|
2450
2450
|
return;
|
|
2451
2451
|
}
|
|
2452
|
-
this.#e.headerContents.set(e.id, e), this.#
|
|
2452
|
+
this.#e.headerContents.set(e.id, e), this.#a && oe(this.#n, this.#e);
|
|
2453
2453
|
}
|
|
2454
2454
|
/**
|
|
2455
2455
|
* Unregister custom header content.
|
|
2456
2456
|
*/
|
|
2457
2457
|
unregisterHeaderContent(e) {
|
|
2458
2458
|
const o = this.#e.headerContentCleanups.get(e);
|
|
2459
|
-
o && (o(), this.#e.headerContentCleanups.delete(e)), this.#e.headerContents.get(e)?.onDestroy?.(), this.#e.headerContents.delete(e), this.#
|
|
2459
|
+
o && (o(), this.#e.headerContentCleanups.delete(e)), this.#e.headerContents.get(e)?.onDestroy?.(), this.#e.headerContents.delete(e), this.#n.querySelector(`[data-header-content="${e}"]`)?.remove();
|
|
2460
2460
|
}
|
|
2461
2461
|
/**
|
|
2462
2462
|
* Get all registered toolbar buttons.
|
|
2463
2463
|
*/
|
|
2464
2464
|
getToolbarButtons() {
|
|
2465
|
-
return
|
|
2465
|
+
return Ge(this.#o?.shell, this.#e);
|
|
2466
2466
|
}
|
|
2467
2467
|
/**
|
|
2468
2468
|
* Register a custom toolbar button programmatically.
|
|
@@ -2472,14 +2472,14 @@ class V extends HTMLElement {
|
|
|
2472
2472
|
console.warn(`[tbw-grid] Toolbar button "${e.id}" already registered`);
|
|
2473
2473
|
return;
|
|
2474
2474
|
}
|
|
2475
|
-
this.#e.toolbarButtons.set(e.id, e), this.#
|
|
2475
|
+
this.#e.toolbarButtons.set(e.id, e), this.#a && this.#g();
|
|
2476
2476
|
}
|
|
2477
2477
|
/**
|
|
2478
2478
|
* Unregister a custom toolbar button.
|
|
2479
2479
|
*/
|
|
2480
2480
|
unregisterToolbarButton(e) {
|
|
2481
2481
|
const o = this.#e.toolbarButtonCleanups.get(e);
|
|
2482
|
-
o && (o(), this.#e.toolbarButtonCleanups.delete(e)), this.#e.toolbarButtons.delete(e), this.#
|
|
2482
|
+
o && (o(), this.#e.toolbarButtonCleanups.delete(e)), this.#e.toolbarButtons.delete(e), this.#a && this.#g();
|
|
2483
2483
|
}
|
|
2484
2484
|
/**
|
|
2485
2485
|
* Enable/disable a toolbar button by ID.
|
|
@@ -2487,21 +2487,21 @@ class V extends HTMLElement {
|
|
|
2487
2487
|
setToolbarButtonDisabled(e, o) {
|
|
2488
2488
|
const n = this.#e.toolbarButtons.get(e);
|
|
2489
2489
|
n && (n.disabled = o);
|
|
2490
|
-
const
|
|
2491
|
-
|
|
2490
|
+
const i = this.#n.querySelector(`[data-btn="${e}"]`);
|
|
2491
|
+
i && (i.disabled = o);
|
|
2492
2492
|
}
|
|
2493
2493
|
/**
|
|
2494
2494
|
* Re-parse light DOM shell elements and refresh shell header.
|
|
2495
2495
|
* Call this after dynamically modifying <tbw-grid-header> children.
|
|
2496
2496
|
*/
|
|
2497
2497
|
refreshShellHeader() {
|
|
2498
|
-
this.#
|
|
2498
|
+
this.#g();
|
|
2499
2499
|
}
|
|
2500
2500
|
/**
|
|
2501
2501
|
* Internal shell header refresh.
|
|
2502
2502
|
*/
|
|
2503
|
-
#
|
|
2504
|
-
|
|
2503
|
+
#g() {
|
|
2504
|
+
te(this, this.#e), this.#X(), this.#G();
|
|
2505
2505
|
}
|
|
2506
2506
|
// ---------------- Virtual Window ----------------
|
|
2507
2507
|
/**
|
|
@@ -2512,40 +2512,40 @@ class V extends HTMLElement {
|
|
|
2512
2512
|
if (!this.bodyEl) return;
|
|
2513
2513
|
const o = this._rows.length;
|
|
2514
2514
|
if (!this.virtualization.enabled) {
|
|
2515
|
-
this.#
|
|
2515
|
+
this.#z(0, o), this.#w();
|
|
2516
2516
|
return;
|
|
2517
2517
|
}
|
|
2518
|
-
if (this.#
|
|
2519
|
-
this.virtualization.start = 0, this.virtualization.end = o, this.bodyEl.style.transform = "translateY(0px)", this.#
|
|
2520
|
-
const
|
|
2521
|
-
|
|
2518
|
+
if (this.#se()) {
|
|
2519
|
+
this.virtualization.start = 0, this.virtualization.end = o, this.bodyEl.style.transform = "translateY(0px)", this.#z(0, o, this.__rowRenderEpoch), this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${o * this.virtualization.rowHeight}px`);
|
|
2520
|
+
const R = this.#n.querySelector(".rows-body");
|
|
2521
|
+
R?.setAttribute("aria-rowcount", String(o)), R?.setAttribute("aria-colcount", String(this.visibleColumns.length)), this.#w();
|
|
2522
2522
|
return;
|
|
2523
2523
|
}
|
|
2524
|
-
const n = this.virtualization.container ?? this,
|
|
2524
|
+
const n = this.virtualization.container ?? this, s = (this.virtualization.viewportEl ?? n).clientHeight, r = this.virtualization.rowHeight, l = n.scrollTop;
|
|
2525
2525
|
let a = Math.floor(l / r), d = 0;
|
|
2526
2526
|
const h = 10;
|
|
2527
2527
|
for (; d < h; ) {
|
|
2528
|
-
const
|
|
2528
|
+
const R = this.#t?.getExtraHeightBefore?.(a) ?? 0, T = Math.floor((l - R) / r);
|
|
2529
2529
|
if (T >= a || T < 0) break;
|
|
2530
2530
|
a = T, d++;
|
|
2531
2531
|
}
|
|
2532
2532
|
a = a - a % 2, a < 0 && (a = 0);
|
|
2533
|
-
const p = this.#
|
|
2533
|
+
const p = this.#t?.adjustVirtualStart(a, l, r);
|
|
2534
2534
|
p !== void 0 && p < a && (a = p, a = a - a % 2, a < 0 && (a = 0));
|
|
2535
|
-
const
|
|
2536
|
-
let c = a +
|
|
2535
|
+
const b = Math.ceil(s / r) + 3;
|
|
2536
|
+
let c = a + b;
|
|
2537
2537
|
c > o && (c = o), this.virtualization.start = a, this.virtualization.end = c;
|
|
2538
|
-
const f = this.#
|
|
2539
|
-
this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${o * r + r + f +
|
|
2540
|
-
const
|
|
2541
|
-
this.bodyEl.style.transform = `translateY(${
|
|
2542
|
-
const
|
|
2543
|
-
|
|
2538
|
+
const f = this.#n.querySelector(".tbw-footer")?.offsetHeight ?? 0, w = this.#t?.getExtraHeight() ?? 0;
|
|
2539
|
+
this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${o * r + r + f + w}px`);
|
|
2540
|
+
const v = this.#t?.getExtraHeightBefore?.(a) ?? 0, S = -(l - a * r - v);
|
|
2541
|
+
this.bodyEl.style.transform = `translateY(${S}px)`, this.#z(a, c, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch);
|
|
2542
|
+
const x = this.#n.querySelector(".rows-body");
|
|
2543
|
+
x?.setAttribute("aria-rowcount", String(o)), x?.setAttribute("aria-colcount", String(this.visibleColumns.length)), e && this.#w();
|
|
2544
2544
|
}
|
|
2545
2545
|
// ---------------- Render ----------------
|
|
2546
|
-
#
|
|
2547
|
-
|
|
2548
|
-
const e = this.#
|
|
2546
|
+
#X() {
|
|
2547
|
+
te(this, this.#e);
|
|
2548
|
+
const e = this.#o?.shell, o = Ne(e, this.#e), n = `
|
|
2549
2549
|
<div class="tbw-scroll-area">
|
|
2550
2550
|
<div class="rows-body-wrapper">
|
|
2551
2551
|
<div class="rows-body" role="grid">
|
|
@@ -2565,18 +2565,18 @@ class V extends HTMLElement {
|
|
|
2565
2565
|
</div>
|
|
2566
2566
|
`;
|
|
2567
2567
|
if (o) {
|
|
2568
|
-
const
|
|
2569
|
-
expand: this.#
|
|
2570
|
-
collapse: this.#
|
|
2571
|
-
}, r =
|
|
2572
|
-
this.#
|
|
2568
|
+
const i = this.#o?.icons?.toolPanel ?? P.toolPanel, s = {
|
|
2569
|
+
expand: this.#o?.icons?.expand ?? P.expand,
|
|
2570
|
+
collapse: this.#o?.icons?.collapse ?? P.collapse
|
|
2571
|
+
}, r = qe(e, this.#e, i), l = $e(e, this.#e, n, s);
|
|
2572
|
+
this.#n.innerHTML = `
|
|
2573
2573
|
<div class="tbw-grid-root has-shell">
|
|
2574
2574
|
${r}
|
|
2575
2575
|
${l}
|
|
2576
2576
|
</div>
|
|
2577
|
-
`, this.#
|
|
2577
|
+
`, this.#he(), this.#a = !0;
|
|
2578
2578
|
} else
|
|
2579
|
-
this.#
|
|
2579
|
+
this.#n.innerHTML = `
|
|
2580
2580
|
<div class="tbw-grid-root">
|
|
2581
2581
|
<div class="tbw-grid-content">
|
|
2582
2582
|
${n}
|
|
@@ -2587,12 +2587,12 @@ class V extends HTMLElement {
|
|
|
2587
2587
|
/**
|
|
2588
2588
|
* Set up shell event listeners after render.
|
|
2589
2589
|
*/
|
|
2590
|
-
#
|
|
2591
|
-
|
|
2590
|
+
#he() {
|
|
2591
|
+
Ie(this.#n, this.#o?.shell, this.#e, {
|
|
2592
2592
|
onPanelToggle: () => this.toggleToolPanel(),
|
|
2593
2593
|
onSectionToggle: (e) => this.toggleToolPanelSection(e),
|
|
2594
2594
|
onToolbarButtonClick: (e) => this.#fe(e)
|
|
2595
|
-
}), this.#
|
|
2595
|
+
}), this.#A?.(), this.#A = Be(this.#n, this.#o?.shell, (e) => {
|
|
2596
2596
|
this.style.setProperty("--tbw-tool-panel-width", `${e}px`);
|
|
2597
2597
|
});
|
|
2598
2598
|
}
|
|
@@ -2600,17 +2600,17 @@ class V extends HTMLElement {
|
|
|
2600
2600
|
* Handle toolbar button click (for config buttons with action).
|
|
2601
2601
|
*/
|
|
2602
2602
|
#fe(e) {
|
|
2603
|
-
const n = (this.#
|
|
2603
|
+
const n = (this.#o?.shell?.header?.toolbarButtons ?? []).find((s) => s.id === e);
|
|
2604
2604
|
if (n?.action) {
|
|
2605
2605
|
n.action();
|
|
2606
2606
|
return;
|
|
2607
2607
|
}
|
|
2608
|
-
const
|
|
2609
|
-
|
|
2608
|
+
const i = this.#e.toolbarButtons.get(e);
|
|
2609
|
+
i?.action && i.action();
|
|
2610
2610
|
}
|
|
2611
2611
|
}
|
|
2612
|
-
customElements.get(
|
|
2613
|
-
class
|
|
2612
|
+
customElements.get(G.tagName) || customElements.define(G.tagName, G);
|
|
2613
|
+
class je {
|
|
2614
2614
|
/** Plugin version - override in subclass if needed */
|
|
2615
2615
|
version = "1.0.0";
|
|
2616
2616
|
/** CSS styles to inject into the grid's shadow DOM */
|
|
@@ -2765,540 +2765,7 @@ class me {
|
|
|
2765
2765
|
console.warn(`[tbw-grid:${this.name}] ${e}`);
|
|
2766
2766
|
}
|
|
2767
2767
|
}
|
|
2768
|
-
|
|
2769
|
-
return {
|
|
2770
|
-
startRow: Math.min(t.startRow, t.endRow),
|
|
2771
|
-
startCol: Math.min(t.startCol, t.endCol),
|
|
2772
|
-
endRow: Math.max(t.startRow, t.endRow),
|
|
2773
|
-
endCol: Math.max(t.startCol, t.endCol)
|
|
2774
|
-
};
|
|
2775
|
-
}
|
|
2776
|
-
function st(t) {
|
|
2777
|
-
const e = W(t);
|
|
2778
|
-
return {
|
|
2779
|
-
from: { row: e.startRow, col: e.startCol },
|
|
2780
|
-
to: { row: e.endRow, col: e.endCol }
|
|
2781
|
-
};
|
|
2782
|
-
}
|
|
2783
|
-
function Y(t) {
|
|
2784
|
-
return t.map(st);
|
|
2785
|
-
}
|
|
2786
|
-
function it(t, e, o) {
|
|
2787
|
-
const n = W(o);
|
|
2788
|
-
return t >= n.startRow && t <= n.endRow && e >= n.startCol && e <= n.endCol;
|
|
2789
|
-
}
|
|
2790
|
-
function de(t, e, o) {
|
|
2791
|
-
return o.some((n) => it(t, e, n));
|
|
2792
|
-
}
|
|
2793
|
-
function rt(t) {
|
|
2794
|
-
const e = [], o = W(t);
|
|
2795
|
-
for (let n = o.startRow; n <= o.endRow; n++)
|
|
2796
|
-
for (let s = o.startCol; s <= o.endCol; s++)
|
|
2797
|
-
e.push({ row: n, col: s });
|
|
2798
|
-
return e;
|
|
2799
|
-
}
|
|
2800
|
-
function lt(t) {
|
|
2801
|
-
const e = /* @__PURE__ */ new Map();
|
|
2802
|
-
for (const o of t)
|
|
2803
|
-
for (const n of rt(o))
|
|
2804
|
-
e.set(`${n.row},${n.col}`, n);
|
|
2805
|
-
return [...e.values()];
|
|
2806
|
-
}
|
|
2807
|
-
function G(t, e) {
|
|
2808
|
-
return {
|
|
2809
|
-
startRow: t.row,
|
|
2810
|
-
startCol: t.col,
|
|
2811
|
-
endRow: e.row,
|
|
2812
|
-
endCol: e.col
|
|
2813
|
-
};
|
|
2814
|
-
}
|
|
2815
|
-
const at = ':host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}:host([data-selection-mode="row"]) .cell-focus{outline:none}:host .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}:host .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}';
|
|
2816
|
-
function ct(t, e, o) {
|
|
2817
|
-
if (t === "cell" && e.selectedCell)
|
|
2818
|
-
return {
|
|
2819
|
-
mode: t,
|
|
2820
|
-
ranges: [
|
|
2821
|
-
{
|
|
2822
|
-
from: { row: e.selectedCell.row, col: e.selectedCell.col },
|
|
2823
|
-
to: { row: e.selectedCell.row, col: e.selectedCell.col }
|
|
2824
|
-
}
|
|
2825
|
-
]
|
|
2826
|
-
};
|
|
2827
|
-
if (t === "row" && e.selected.size > 0) {
|
|
2828
|
-
const n = [...e.selected].map((s) => ({
|
|
2829
|
-
from: { row: s, col: 0 },
|
|
2830
|
-
to: { row: s, col: o - 1 }
|
|
2831
|
-
}));
|
|
2832
|
-
return { mode: t, ranges: n };
|
|
2833
|
-
}
|
|
2834
|
-
return t === "range" && e.ranges.length > 0 ? { mode: t, ranges: Y(e.ranges) } : { mode: t, ranges: [] };
|
|
2835
|
-
}
|
|
2836
|
-
class wt extends me {
|
|
2837
|
-
name = "selection";
|
|
2838
|
-
version = "1.0.0";
|
|
2839
|
-
get defaultConfig() {
|
|
2840
|
-
return {
|
|
2841
|
-
mode: "cell"
|
|
2842
|
-
};
|
|
2843
|
-
}
|
|
2844
|
-
// ===== Internal State =====
|
|
2845
|
-
/** Row selection state (row mode) */
|
|
2846
|
-
selected = /* @__PURE__ */ new Set();
|
|
2847
|
-
lastSelected = null;
|
|
2848
|
-
anchor = null;
|
|
2849
|
-
/** Range selection state (range mode) */
|
|
2850
|
-
ranges = [];
|
|
2851
|
-
activeRange = null;
|
|
2852
|
-
cellAnchor = null;
|
|
2853
|
-
isDragging = !1;
|
|
2854
|
-
/** Cell selection state (cell mode) */
|
|
2855
|
-
selectedCell = null;
|
|
2856
|
-
// ===== Lifecycle =====
|
|
2857
|
-
detach() {
|
|
2858
|
-
this.selected.clear(), this.ranges = [], this.activeRange = null, this.cellAnchor = null, this.isDragging = !1, this.selectedCell = null;
|
|
2859
|
-
}
|
|
2860
|
-
// ===== Event Handlers =====
|
|
2861
|
-
onCellClick(e) {
|
|
2862
|
-
const { rowIndex: o, colIndex: n, originalEvent: s } = e, { mode: i } = this.config;
|
|
2863
|
-
if (i === "cell")
|
|
2864
|
-
return this.selectedCell = { row: o, col: n }, this.emit("selection-change", this.#s()), this.requestAfterRender(), !1;
|
|
2865
|
-
if (i === "row")
|
|
2866
|
-
return this.selected.clear(), this.selected.add(o), this.lastSelected = o, this.emit("selection-change", this.#s()), this.requestAfterRender(), !1;
|
|
2867
|
-
if (i === "range") {
|
|
2868
|
-
const r = s.shiftKey, l = s.ctrlKey || s.metaKey;
|
|
2869
|
-
if (r && this.cellAnchor) {
|
|
2870
|
-
const a = G(this.cellAnchor, { row: o, col: n });
|
|
2871
|
-
l ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = a : this.ranges.push(a) : this.ranges = [a], this.activeRange = a;
|
|
2872
|
-
} else if (l) {
|
|
2873
|
-
const a = {
|
|
2874
|
-
startRow: o,
|
|
2875
|
-
startCol: n,
|
|
2876
|
-
endRow: o,
|
|
2877
|
-
endCol: n
|
|
2878
|
-
};
|
|
2879
|
-
this.ranges.push(a), this.activeRange = a, this.cellAnchor = { row: o, col: n };
|
|
2880
|
-
} else {
|
|
2881
|
-
const a = {
|
|
2882
|
-
startRow: o,
|
|
2883
|
-
startCol: n,
|
|
2884
|
-
endRow: o,
|
|
2885
|
-
endCol: n
|
|
2886
|
-
};
|
|
2887
|
-
this.ranges = [a], this.activeRange = a, this.cellAnchor = { row: o, col: n };
|
|
2888
|
-
}
|
|
2889
|
-
return this.emit("selection-change", this.#s()), this.requestAfterRender(), !1;
|
|
2890
|
-
}
|
|
2891
|
-
return !1;
|
|
2892
|
-
}
|
|
2893
|
-
onKeyDown(e) {
|
|
2894
|
-
const { mode: o } = this.config, s = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
|
|
2895
|
-
if (e.key === "Escape")
|
|
2896
|
-
return o === "cell" ? this.selectedCell = null : o === "row" ? (this.selected.clear(), this.anchor = null) : o === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#s()), this.requestAfterRender(), !0;
|
|
2897
|
-
if (o === "cell" && s)
|
|
2898
|
-
return queueMicrotask(() => {
|
|
2899
|
-
const i = this.grid;
|
|
2900
|
-
this.selectedCell = { row: i.focusRow, col: i.focusCol }, this.emit("selection-change", this.#s()), this.requestAfterRender();
|
|
2901
|
-
}), !1;
|
|
2902
|
-
if (o === "row" && (e.key === "ArrowUp" || e.key === "ArrowDown"))
|
|
2903
|
-
return queueMicrotask(() => {
|
|
2904
|
-
const i = this.grid;
|
|
2905
|
-
this.selected.clear(), this.selected.add(i.focusRow), this.lastSelected = i.focusRow, this.emit("selection-change", this.#s()), this.requestAfterRender();
|
|
2906
|
-
}), !1;
|
|
2907
|
-
if (o === "range" && s) {
|
|
2908
|
-
const i = e.shiftKey;
|
|
2909
|
-
return queueMicrotask(() => {
|
|
2910
|
-
const r = this.grid, l = r.focusRow, a = r.focusCol;
|
|
2911
|
-
if (i) {
|
|
2912
|
-
this.cellAnchor || (this.cellAnchor = { row: l, col: a });
|
|
2913
|
-
const d = G(this.cellAnchor, { row: l, col: a });
|
|
2914
|
-
this.ranges = [d], this.activeRange = d;
|
|
2915
|
-
} else
|
|
2916
|
-
this.ranges = [], this.activeRange = null, this.cellAnchor = { row: l, col: a };
|
|
2917
|
-
this.emit("selection-change", this.#s()), this.requestAfterRender();
|
|
2918
|
-
}), !1;
|
|
2919
|
-
}
|
|
2920
|
-
if (o === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
|
|
2921
|
-
const i = this.rows.length, r = this.columns.length;
|
|
2922
|
-
if (i > 0 && r > 0) {
|
|
2923
|
-
const l = {
|
|
2924
|
-
startRow: 0,
|
|
2925
|
-
startCol: 0,
|
|
2926
|
-
endRow: i - 1,
|
|
2927
|
-
endCol: r - 1
|
|
2928
|
-
};
|
|
2929
|
-
return this.ranges = [l], this.activeRange = l, this.emit("selection-change", this.#s()), this.requestAfterRender(), !0;
|
|
2930
|
-
}
|
|
2931
|
-
}
|
|
2932
|
-
return !1;
|
|
2933
|
-
}
|
|
2934
|
-
onCellMouseDown(e) {
|
|
2935
|
-
if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0 || e.originalEvent.shiftKey && this.cellAnchor)
|
|
2936
|
-
return;
|
|
2937
|
-
this.isDragging = !0;
|
|
2938
|
-
const o = e.rowIndex, n = e.colIndex;
|
|
2939
|
-
this.cellAnchor = { row: o, col: n }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
|
|
2940
|
-
const i = {
|
|
2941
|
-
startRow: o,
|
|
2942
|
-
startCol: n,
|
|
2943
|
-
endRow: o,
|
|
2944
|
-
endCol: n
|
|
2945
|
-
};
|
|
2946
|
-
return this.ranges.push(i), this.activeRange = i, this.emit("selection-change", this.#s()), this.requestAfterRender(), !0;
|
|
2947
|
-
}
|
|
2948
|
-
onCellMouseMove(e) {
|
|
2949
|
-
if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
|
|
2950
|
-
const o = G(this.cellAnchor, { row: e.rowIndex, col: e.colIndex });
|
|
2951
|
-
return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = o : this.ranges.push(o), this.activeRange = o, this.emit("selection-change", this.#s()), this.requestAfterRender(), !0;
|
|
2952
|
-
}
|
|
2953
|
-
onCellMouseUp(e) {
|
|
2954
|
-
if (this.config.mode === "range" && this.isDragging)
|
|
2955
|
-
return this.isDragging = !1, !0;
|
|
2956
|
-
}
|
|
2957
|
-
/**
|
|
2958
|
-
* Apply selection classes to visible cells/rows.
|
|
2959
|
-
* Shared by afterRender and onScrollRender.
|
|
2960
|
-
*/
|
|
2961
|
-
#t() {
|
|
2962
|
-
const e = this.shadowRoot;
|
|
2963
|
-
if (!e) return;
|
|
2964
|
-
const { mode: o } = this.config;
|
|
2965
|
-
e.querySelectorAll(".cell").forEach((i) => {
|
|
2966
|
-
i.classList.remove("selected", "top", "bottom", "first", "last");
|
|
2967
|
-
});
|
|
2968
|
-
const s = e.querySelectorAll(".data-grid-row");
|
|
2969
|
-
if (s.forEach((i) => {
|
|
2970
|
-
i.classList.remove("selected", "row-focus");
|
|
2971
|
-
}), o === "row" && (e.querySelectorAll(".cell-focus").forEach((i) => i.classList.remove("cell-focus")), s.forEach((i) => {
|
|
2972
|
-
const r = i.querySelector(".cell[data-row]"), l = parseInt(r?.getAttribute("data-row") ?? "-1", 10);
|
|
2973
|
-
l >= 0 && this.selected.has(l) && i.classList.add("selected", "row-focus");
|
|
2974
|
-
})), o === "range" && this.ranges.length > 0) {
|
|
2975
|
-
const i = this.activeRange ? W(this.activeRange) : null;
|
|
2976
|
-
e.querySelectorAll(".cell[data-row][data-col]").forEach((l) => {
|
|
2977
|
-
const a = parseInt(l.getAttribute("data-row") ?? "-1", 10), d = parseInt(l.getAttribute("data-col") ?? "-1", 10);
|
|
2978
|
-
a >= 0 && d >= 0 && de(a, d, this.ranges) && (l.classList.add("selected"), l.classList.remove("cell-focus"), i && (a === i.startRow && l.classList.add("top"), a === i.endRow && l.classList.add("bottom"), d === i.startCol && l.classList.add("first"), d === i.endCol && l.classList.add("last")));
|
|
2979
|
-
});
|
|
2980
|
-
}
|
|
2981
|
-
o === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((i) => i.classList.remove("cell-focus"));
|
|
2982
|
-
}
|
|
2983
|
-
afterRender() {
|
|
2984
|
-
const e = this.shadowRoot;
|
|
2985
|
-
if (!e) return;
|
|
2986
|
-
const o = e.children[0], { mode: n } = this.config;
|
|
2987
|
-
this.grid.setAttribute("data-selection-mode", n), o && o.classList.toggle("selecting", this.isDragging), this.#t();
|
|
2988
|
-
}
|
|
2989
|
-
/**
|
|
2990
|
-
* Called after scroll-triggered row rendering.
|
|
2991
|
-
* Reapplies selection classes to recycled DOM elements.
|
|
2992
|
-
*/
|
|
2993
|
-
onScrollRender() {
|
|
2994
|
-
this.#t();
|
|
2995
|
-
}
|
|
2996
|
-
// ===== Public API =====
|
|
2997
|
-
/**
|
|
2998
|
-
* Get the selected cell (cell mode only).
|
|
2999
|
-
*/
|
|
3000
|
-
getSelectedCell() {
|
|
3001
|
-
return this.selectedCell;
|
|
3002
|
-
}
|
|
3003
|
-
/**
|
|
3004
|
-
* Get all selected row indices (row mode).
|
|
3005
|
-
*/
|
|
3006
|
-
getSelectedRows() {
|
|
3007
|
-
return [...this.selected];
|
|
3008
|
-
}
|
|
3009
|
-
/**
|
|
3010
|
-
* Get all selected cell ranges in public format.
|
|
3011
|
-
*/
|
|
3012
|
-
getRanges() {
|
|
3013
|
-
return Y(this.ranges);
|
|
3014
|
-
}
|
|
3015
|
-
/**
|
|
3016
|
-
* Get all selected cells across all ranges.
|
|
3017
|
-
*/
|
|
3018
|
-
getSelectedCells() {
|
|
3019
|
-
return lt(this.ranges);
|
|
3020
|
-
}
|
|
3021
|
-
/**
|
|
3022
|
-
* Check if a specific cell is in range selection.
|
|
3023
|
-
*/
|
|
3024
|
-
isCellSelected(e, o) {
|
|
3025
|
-
return de(e, o, this.ranges);
|
|
3026
|
-
}
|
|
3027
|
-
/**
|
|
3028
|
-
* Clear all selection.
|
|
3029
|
-
*/
|
|
3030
|
-
clearSelection() {
|
|
3031
|
-
this.selectedCell = null, this.selected.clear(), this.anchor = null, this.ranges = [], this.activeRange = null, this.cellAnchor = null, this.emit("selection-change", { mode: this.config.mode, ranges: [] }), this.requestAfterRender();
|
|
3032
|
-
}
|
|
3033
|
-
/**
|
|
3034
|
-
* Set selected ranges programmatically.
|
|
3035
|
-
*/
|
|
3036
|
-
setRanges(e) {
|
|
3037
|
-
this.ranges = e.map((o) => ({
|
|
3038
|
-
startRow: o.from.row,
|
|
3039
|
-
startCol: o.from.col,
|
|
3040
|
-
endRow: o.to.row,
|
|
3041
|
-
endCol: o.to.col
|
|
3042
|
-
})), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
|
|
3043
|
-
mode: this.config.mode,
|
|
3044
|
-
ranges: Y(this.ranges)
|
|
3045
|
-
}), this.requestAfterRender();
|
|
3046
|
-
}
|
|
3047
|
-
// ===== Private Helpers =====
|
|
3048
|
-
#s() {
|
|
3049
|
-
return ct(
|
|
3050
|
-
this.config.mode,
|
|
3051
|
-
{
|
|
3052
|
-
selectedCell: this.selectedCell,
|
|
3053
|
-
selected: this.selected,
|
|
3054
|
-
ranges: this.ranges
|
|
3055
|
-
},
|
|
3056
|
-
this.columns.length
|
|
3057
|
-
);
|
|
3058
|
-
}
|
|
3059
|
-
// ===== Styles =====
|
|
3060
|
-
styles = at;
|
|
3061
|
-
}
|
|
3062
|
-
function ee(t, e, o) {
|
|
3063
|
-
return t.id !== void 0 ? String(t.id) : o ? `${o}-${e}` : String(e);
|
|
3064
|
-
}
|
|
3065
|
-
function ve(t, e, o, n = null, s = 0) {
|
|
3066
|
-
const i = e.childrenField ?? "children", r = [];
|
|
3067
|
-
for (let l = 0; l < t.length; l++) {
|
|
3068
|
-
const a = t[l], d = ee(a, l, n), h = a[i], p = Array.isArray(h) && h.length > 0, w = o.has(d);
|
|
3069
|
-
if (r.push({
|
|
3070
|
-
key: d,
|
|
3071
|
-
data: a,
|
|
3072
|
-
depth: s,
|
|
3073
|
-
hasChildren: p,
|
|
3074
|
-
isExpanded: w,
|
|
3075
|
-
parentKey: n
|
|
3076
|
-
}), p && w) {
|
|
3077
|
-
const c = ve(h, e, o, d, s + 1);
|
|
3078
|
-
r.push(...c);
|
|
3079
|
-
}
|
|
3080
|
-
}
|
|
3081
|
-
return r;
|
|
3082
|
-
}
|
|
3083
|
-
function he(t, e) {
|
|
3084
|
-
const o = new Set(t);
|
|
3085
|
-
return o.has(e) ? o.delete(e) : o.add(e), o;
|
|
3086
|
-
}
|
|
3087
|
-
function Z(t, e, o = null, n = 0) {
|
|
3088
|
-
const s = e.childrenField ?? "children", i = /* @__PURE__ */ new Set();
|
|
3089
|
-
for (let r = 0; r < t.length; r++) {
|
|
3090
|
-
const l = t[r], a = ee(l, r, o), d = l[s];
|
|
3091
|
-
if (Array.isArray(d) && d.length > 0) {
|
|
3092
|
-
i.add(a);
|
|
3093
|
-
const h = Z(d, e, a, n + 1);
|
|
3094
|
-
for (const p of h) i.add(p);
|
|
3095
|
-
}
|
|
3096
|
-
}
|
|
3097
|
-
return i;
|
|
3098
|
-
}
|
|
3099
|
-
function dt() {
|
|
3100
|
-
return /* @__PURE__ */ new Set();
|
|
3101
|
-
}
|
|
3102
|
-
function ye(t, e, o, n = null, s = 0) {
|
|
3103
|
-
const i = o.childrenField ?? "children";
|
|
3104
|
-
for (let r = 0; r < t.length; r++) {
|
|
3105
|
-
const l = t[r], a = ee(l, r, n);
|
|
3106
|
-
if (a === e)
|
|
3107
|
-
return [a];
|
|
3108
|
-
const d = l[i];
|
|
3109
|
-
if (Array.isArray(d) && d.length > 0) {
|
|
3110
|
-
const h = ye(d, e, o, a, s + 1);
|
|
3111
|
-
if (h)
|
|
3112
|
-
return [a, ...h];
|
|
3113
|
-
}
|
|
3114
|
-
}
|
|
3115
|
-
return null;
|
|
3116
|
-
}
|
|
3117
|
-
function ht(t, e, o, n) {
|
|
3118
|
-
const s = ye(t, e, o);
|
|
3119
|
-
if (!s) return n;
|
|
3120
|
-
const i = new Set(n);
|
|
3121
|
-
for (let r = 0; r < s.length - 1; r++)
|
|
3122
|
-
i.add(s[r]);
|
|
3123
|
-
return i;
|
|
3124
|
-
}
|
|
3125
|
-
function ue(t, e = "children") {
|
|
3126
|
-
if (!Array.isArray(t) || t.length === 0) return !1;
|
|
3127
|
-
for (const o of t)
|
|
3128
|
-
if (o && Array.isArray(o[e]) && o[e].length > 0)
|
|
3129
|
-
return !0;
|
|
3130
|
-
return !1;
|
|
3131
|
-
}
|
|
3132
|
-
function ut(t) {
|
|
3133
|
-
if (!Array.isArray(t) || t.length === 0) return null;
|
|
3134
|
-
const e = ["children", "items", "nodes", "subRows", "nested"];
|
|
3135
|
-
for (const o of t)
|
|
3136
|
-
if (!(!o || typeof o != "object")) {
|
|
3137
|
-
for (const n of e)
|
|
3138
|
-
if (Array.isArray(o[n]) && o[n].length > 0)
|
|
3139
|
-
return n;
|
|
3140
|
-
}
|
|
3141
|
-
return null;
|
|
3142
|
-
}
|
|
3143
|
-
const ft = ".tree-toggle{cursor:pointer;user-select:none;transition:transform .2s}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}";
|
|
3144
|
-
class gt extends me {
|
|
3145
|
-
name = "tree";
|
|
3146
|
-
version = "1.0.0";
|
|
3147
|
-
get defaultConfig() {
|
|
3148
|
-
return {
|
|
3149
|
-
childrenField: "children",
|
|
3150
|
-
autoDetect: !0,
|
|
3151
|
-
defaultExpanded: !1,
|
|
3152
|
-
indentWidth: 20,
|
|
3153
|
-
showExpandIcons: !0
|
|
3154
|
-
};
|
|
3155
|
-
}
|
|
3156
|
-
// ===== Internal State =====
|
|
3157
|
-
/** Set of expanded row keys */
|
|
3158
|
-
expandedKeys = /* @__PURE__ */ new Set();
|
|
3159
|
-
/** Whether initial expansion (based on defaultExpanded config) has been applied */
|
|
3160
|
-
initialExpansionDone = !1;
|
|
3161
|
-
/** Flattened tree rows for rendering */
|
|
3162
|
-
flattenedRows = [];
|
|
3163
|
-
/** Map from key to flattened row for quick lookup */
|
|
3164
|
-
rowKeyMap = /* @__PURE__ */ new Map();
|
|
3165
|
-
// ===== Lifecycle =====
|
|
3166
|
-
detach() {
|
|
3167
|
-
this.expandedKeys.clear(), this.initialExpansionDone = !1, this.flattenedRows = [], this.rowKeyMap.clear();
|
|
3168
|
-
}
|
|
3169
|
-
// ===== Auto-Detection =====
|
|
3170
|
-
/**
|
|
3171
|
-
* Detects if tree functionality should be enabled based on data structure.
|
|
3172
|
-
* Called by the grid during plugin initialization.
|
|
3173
|
-
*/
|
|
3174
|
-
detect(e) {
|
|
3175
|
-
if (!this.config.autoDetect) return !1;
|
|
3176
|
-
const o = this.config.childrenField ?? ut(e) ?? "children";
|
|
3177
|
-
return ue(e, o);
|
|
3178
|
-
}
|
|
3179
|
-
// ===== Data Processing =====
|
|
3180
|
-
processRows(e) {
|
|
3181
|
-
const o = this.config.childrenField ?? "children";
|
|
3182
|
-
if (!ue(e, o))
|
|
3183
|
-
return this.flattenedRows = [], this.rowKeyMap.clear(), [...e];
|
|
3184
|
-
this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = Z(e, this.config), this.initialExpansionDone = !0), this.flattenedRows = ve(e, this.config, this.expandedKeys), this.rowKeyMap.clear();
|
|
3185
|
-
for (const n of this.flattenedRows)
|
|
3186
|
-
this.rowKeyMap.set(n.key, n);
|
|
3187
|
-
return this.flattenedRows.map((n) => ({
|
|
3188
|
-
...n.data,
|
|
3189
|
-
__treeKey: n.key,
|
|
3190
|
-
__treeDepth: n.depth,
|
|
3191
|
-
__treeHasChildren: n.hasChildren,
|
|
3192
|
-
__treeExpanded: n.isExpanded
|
|
3193
|
-
}));
|
|
3194
|
-
}
|
|
3195
|
-
processColumns(e) {
|
|
3196
|
-
if (this.flattenedRows.length === 0) return [...e];
|
|
3197
|
-
const o = this.config.indentWidth ?? 20, n = this.config.showExpandIcons ?? !0, s = [...e];
|
|
3198
|
-
if (s.length > 0) {
|
|
3199
|
-
const i = { ...s[0] }, r = i.viewRenderer;
|
|
3200
|
-
if (r?.__treeWrapped)
|
|
3201
|
-
return s;
|
|
3202
|
-
const l = (a) => {
|
|
3203
|
-
const { value: d, row: h, column: p } = a, w = h.__treeDepth ?? 0, c = h.__treeHasChildren ?? !1, u = h.__treeExpanded ?? !1, f = document.createElement("span");
|
|
3204
|
-
if (f.style.display = "flex", f.style.alignItems = "center", f.style.paddingLeft = `${w * o}px`, c && n) {
|
|
3205
|
-
const b = document.createElement("span");
|
|
3206
|
-
b.className = "tree-toggle", this.setIcon(b, this.resolveIcon(u ? "collapse" : "expand")), b.style.cursor = "pointer", b.style.marginRight = "4px", b.style.fontSize = "10px", b.setAttribute("data-tree-key", h.__treeKey), f.appendChild(b);
|
|
3207
|
-
} else if (n) {
|
|
3208
|
-
const b = document.createElement("span");
|
|
3209
|
-
b.style.width = "14px", b.style.display = "inline-block", f.appendChild(b);
|
|
3210
|
-
}
|
|
3211
|
-
const g = document.createElement("span");
|
|
3212
|
-
if (r) {
|
|
3213
|
-
const b = r(a);
|
|
3214
|
-
b instanceof Node ? g.appendChild(b) : g.textContent = String(b ?? d ?? "");
|
|
3215
|
-
} else
|
|
3216
|
-
g.textContent = String(d ?? "");
|
|
3217
|
-
return f.appendChild(g), f;
|
|
3218
|
-
};
|
|
3219
|
-
l.__treeWrapped = !0, i.viewRenderer = l, s[0] = i;
|
|
3220
|
-
}
|
|
3221
|
-
return s;
|
|
3222
|
-
}
|
|
3223
|
-
// ===== Event Handlers =====
|
|
3224
|
-
onCellClick(e) {
|
|
3225
|
-
const o = e.originalEvent?.target;
|
|
3226
|
-
if (!o?.classList.contains("tree-toggle")) return !1;
|
|
3227
|
-
const n = o.getAttribute("data-tree-key");
|
|
3228
|
-
if (!n) return !1;
|
|
3229
|
-
const s = this.rowKeyMap.get(n);
|
|
3230
|
-
return s ? (this.expandedKeys = he(this.expandedKeys, n), this.emit("tree-expand", {
|
|
3231
|
-
key: n,
|
|
3232
|
-
row: s.data,
|
|
3233
|
-
expanded: this.expandedKeys.has(n),
|
|
3234
|
-
depth: s.depth
|
|
3235
|
-
}), this.requestRender(), !0) : !1;
|
|
3236
|
-
}
|
|
3237
|
-
// ===== Public API =====
|
|
3238
|
-
/**
|
|
3239
|
-
* Expand a specific node by key.
|
|
3240
|
-
*/
|
|
3241
|
-
expand(e) {
|
|
3242
|
-
this.expandedKeys.add(e), this.requestRender();
|
|
3243
|
-
}
|
|
3244
|
-
/**
|
|
3245
|
-
* Collapse a specific node by key.
|
|
3246
|
-
*/
|
|
3247
|
-
collapse(e) {
|
|
3248
|
-
this.expandedKeys.delete(e), this.requestRender();
|
|
3249
|
-
}
|
|
3250
|
-
/**
|
|
3251
|
-
* Toggle the expansion state of a node.
|
|
3252
|
-
*/
|
|
3253
|
-
toggle(e) {
|
|
3254
|
-
this.expandedKeys = he(this.expandedKeys, e), this.requestRender();
|
|
3255
|
-
}
|
|
3256
|
-
/**
|
|
3257
|
-
* Expand all nodes in the tree.
|
|
3258
|
-
*/
|
|
3259
|
-
expandAll() {
|
|
3260
|
-
this.expandedKeys = Z(this.rows, this.config), this.requestRender();
|
|
3261
|
-
}
|
|
3262
|
-
/**
|
|
3263
|
-
* Collapse all nodes in the tree.
|
|
3264
|
-
*/
|
|
3265
|
-
collapseAll() {
|
|
3266
|
-
this.expandedKeys = dt(), this.requestRender();
|
|
3267
|
-
}
|
|
3268
|
-
/**
|
|
3269
|
-
* Check if a node is currently expanded.
|
|
3270
|
-
*/
|
|
3271
|
-
isExpanded(e) {
|
|
3272
|
-
return this.expandedKeys.has(e);
|
|
3273
|
-
}
|
|
3274
|
-
/**
|
|
3275
|
-
* Get all currently expanded keys.
|
|
3276
|
-
*/
|
|
3277
|
-
getExpandedKeys() {
|
|
3278
|
-
return [...this.expandedKeys];
|
|
3279
|
-
}
|
|
3280
|
-
/**
|
|
3281
|
-
* Get the flattened tree rows with metadata.
|
|
3282
|
-
*/
|
|
3283
|
-
getFlattenedRows() {
|
|
3284
|
-
return [...this.flattenedRows];
|
|
3285
|
-
}
|
|
3286
|
-
/**
|
|
3287
|
-
* Get a row's original data by its key.
|
|
3288
|
-
*/
|
|
3289
|
-
getRowByKey(e) {
|
|
3290
|
-
return this.rowKeyMap.get(e)?.data;
|
|
3291
|
-
}
|
|
3292
|
-
/**
|
|
3293
|
-
* Expand all ancestors of a node to make it visible.
|
|
3294
|
-
*/
|
|
3295
|
-
expandToKey(e) {
|
|
3296
|
-
this.expandedKeys = ht(this.rows, e, this.config, this.expandedKeys), this.requestRender();
|
|
3297
|
-
}
|
|
3298
|
-
// ===== Styles =====
|
|
3299
|
-
styles = ft;
|
|
3300
|
-
}
|
|
3301
|
-
const S = {
|
|
2768
|
+
const A = {
|
|
3302
2769
|
// Root structure
|
|
3303
2770
|
ROOT: "tbw-grid-root",
|
|
3304
2771
|
HEADER: "header",
|
|
@@ -3350,24 +2817,24 @@ const S = {
|
|
|
3350
2817
|
GROUP_KEY: "data-group-key",
|
|
3351
2818
|
TREE_LEVEL: "data-tree-level",
|
|
3352
2819
|
STICKY: "data-sticky"
|
|
3353
|
-
},
|
|
3354
|
-
ROOT: `.${
|
|
3355
|
-
HEADER: `.${
|
|
3356
|
-
HEADER_ROW: `.${
|
|
3357
|
-
HEADER_CELL: `.${
|
|
3358
|
-
ROWS_VIEWPORT: `.${
|
|
3359
|
-
ROWS_CONTAINER: `.${
|
|
3360
|
-
DATA_ROW: `.${
|
|
3361
|
-
DATA_CELL: `.${
|
|
3362
|
-
GROUP_ROW: `.${
|
|
2820
|
+
}, Ke = {
|
|
2821
|
+
ROOT: `.${A.ROOT}`,
|
|
2822
|
+
HEADER: `.${A.HEADER}`,
|
|
2823
|
+
HEADER_ROW: `.${A.HEADER_ROW}`,
|
|
2824
|
+
HEADER_CELL: `.${A.HEADER_CELL}`,
|
|
2825
|
+
ROWS_VIEWPORT: `.${A.ROWS_VIEWPORT}`,
|
|
2826
|
+
ROWS_CONTAINER: `.${A.ROWS_CONTAINER}`,
|
|
2827
|
+
DATA_ROW: `.${A.DATA_ROW}`,
|
|
2828
|
+
DATA_CELL: `.${A.DATA_CELL}`,
|
|
2829
|
+
GROUP_ROW: `.${A.GROUP_ROW}`,
|
|
3363
2830
|
// By data attribute
|
|
3364
|
-
ROW_BY_INDEX: (t) => `.${
|
|
3365
|
-
CELL_BY_FIELD: (t) => `.${
|
|
3366
|
-
CELL_AT: (t, e) => `.${
|
|
2831
|
+
ROW_BY_INDEX: (t) => `.${A.DATA_ROW}[${B.ROW_INDEX}="${t}"]`,
|
|
2832
|
+
CELL_BY_FIELD: (t) => `.${A.DATA_CELL}[${B.FIELD}="${t}"]`,
|
|
2833
|
+
CELL_AT: (t, e) => `.${A.DATA_ROW}[${B.ROW_INDEX}="${t}"] .${A.DATA_CELL}[${B.COL_INDEX}="${e}"]`,
|
|
3367
2834
|
// State selectors
|
|
3368
|
-
SELECTED_ROWS: `.${
|
|
3369
|
-
EDITING_CELL: `.${
|
|
3370
|
-
},
|
|
2835
|
+
SELECTED_ROWS: `.${A.DATA_ROW}.${A.SELECTED}`,
|
|
2836
|
+
EDITING_CELL: `.${A.DATA_CELL}.${A.EDITING}`
|
|
2837
|
+
}, Ye = {
|
|
3371
2838
|
// Colors
|
|
3372
2839
|
COLOR_BG: "--tbw-color-bg",
|
|
3373
2840
|
COLOR_FG: "--tbw-color-fg",
|
|
@@ -3389,7 +2856,7 @@ const S = {
|
|
|
3389
2856
|
// Borders
|
|
3390
2857
|
BORDER_RADIUS: "--tbw-border-radius",
|
|
3391
2858
|
FOCUS_OUTLINE: "--tbw-focus-outline"
|
|
3392
|
-
},
|
|
2859
|
+
}, Ze = {
|
|
3393
2860
|
CELL_COMMIT: "cell-commit",
|
|
3394
2861
|
ROW_COMMIT: "row-commit",
|
|
3395
2862
|
CHANGED_ROWS_RESET: "changed-rows-reset",
|
|
@@ -3400,7 +2867,7 @@ const S = {
|
|
|
3400
2867
|
ACTIVATE_CELL: "activate-cell",
|
|
3401
2868
|
GROUP_TOGGLE: "group-toggle",
|
|
3402
2869
|
COLUMN_STATE_CHANGE: "column-state-change"
|
|
3403
|
-
},
|
|
2870
|
+
}, Je = {
|
|
3404
2871
|
// Selection plugin
|
|
3405
2872
|
SELECTION_CHANGE: "selection-change",
|
|
3406
2873
|
// Tree plugin
|
|
@@ -3431,10 +2898,10 @@ const S = {
|
|
|
3431
2898
|
DETAIL_EXPAND: "detail-expand",
|
|
3432
2899
|
// Grouping rows plugin
|
|
3433
2900
|
GROUP_EXPAND: "group-expand"
|
|
3434
|
-
},
|
|
2901
|
+
}, F = {
|
|
3435
2902
|
sum: (t, e) => t.reduce((o, n) => o + (Number(n[e]) || 0), 0),
|
|
3436
2903
|
avg: (t, e) => {
|
|
3437
|
-
const o = t.reduce((n,
|
|
2904
|
+
const o = t.reduce((n, i) => n + (Number(i[e]) || 0), 0);
|
|
3438
2905
|
return t.length ? o / t.length : 0;
|
|
3439
2906
|
},
|
|
3440
2907
|
count: (t) => t.length,
|
|
@@ -3442,46 +2909,46 @@ const S = {
|
|
|
3442
2909
|
max: (t, e) => Math.max(...t.map((o) => Number(o[e]) || -1 / 0)),
|
|
3443
2910
|
first: (t, e) => t[0]?.[e],
|
|
3444
2911
|
last: (t, e) => t[t.length - 1]?.[e]
|
|
3445
|
-
},
|
|
2912
|
+
}, D = /* @__PURE__ */ new Map(), H = {
|
|
3446
2913
|
/**
|
|
3447
2914
|
* Register a custom aggregator function.
|
|
3448
2915
|
*/
|
|
3449
2916
|
register(t, e) {
|
|
3450
|
-
|
|
2917
|
+
D.set(t, e);
|
|
3451
2918
|
},
|
|
3452
2919
|
/**
|
|
3453
2920
|
* Unregister a custom aggregator function.
|
|
3454
2921
|
*/
|
|
3455
2922
|
unregister(t) {
|
|
3456
|
-
|
|
2923
|
+
D.delete(t);
|
|
3457
2924
|
},
|
|
3458
2925
|
/**
|
|
3459
2926
|
* Get an aggregator function by reference.
|
|
3460
2927
|
*/
|
|
3461
2928
|
get(t) {
|
|
3462
2929
|
if (t !== void 0)
|
|
3463
|
-
return typeof t == "function" ? t :
|
|
2930
|
+
return typeof t == "function" ? t : D.get(t) ?? F[t];
|
|
3464
2931
|
},
|
|
3465
2932
|
/**
|
|
3466
2933
|
* Run an aggregator on a set of rows.
|
|
3467
2934
|
*/
|
|
3468
2935
|
run(t, e, o, n) {
|
|
3469
|
-
const
|
|
3470
|
-
return
|
|
2936
|
+
const i = this.get(t);
|
|
2937
|
+
return i ? i(e, o, n) : void 0;
|
|
3471
2938
|
},
|
|
3472
2939
|
/**
|
|
3473
2940
|
* Check if an aggregator exists.
|
|
3474
2941
|
*/
|
|
3475
2942
|
has(t) {
|
|
3476
|
-
return
|
|
2943
|
+
return D.has(t) || t in F;
|
|
3477
2944
|
},
|
|
3478
2945
|
/**
|
|
3479
2946
|
* List all available aggregator names.
|
|
3480
2947
|
*/
|
|
3481
2948
|
list() {
|
|
3482
|
-
return [...Object.keys(
|
|
2949
|
+
return [...Object.keys(F), ...D.keys()];
|
|
3483
2950
|
}
|
|
3484
|
-
},
|
|
2951
|
+
}, se = {
|
|
3485
2952
|
sum: (t) => t.reduce((e, o) => e + o, 0),
|
|
3486
2953
|
avg: (t) => t.length ? t.reduce((e, o) => e + o, 0) / t.length : 0,
|
|
3487
2954
|
count: (t) => t.length,
|
|
@@ -3490,35 +2957,33 @@ const S = {
|
|
|
3490
2957
|
first: (t) => t[0] ?? 0,
|
|
3491
2958
|
last: (t) => t[t.length - 1] ?? 0
|
|
3492
2959
|
};
|
|
3493
|
-
function
|
|
3494
|
-
return
|
|
2960
|
+
function Xe(t) {
|
|
2961
|
+
return se[t] ?? se.sum;
|
|
3495
2962
|
}
|
|
3496
|
-
function
|
|
3497
|
-
return
|
|
2963
|
+
function Qe(t, e) {
|
|
2964
|
+
return Xe(t)(e);
|
|
3498
2965
|
}
|
|
3499
|
-
const
|
|
2966
|
+
const et = H.register.bind(H), tt = H.unregister.bind(H), ot = H.get.bind(H), nt = H.run.bind(H), it = H.list.bind(H);
|
|
3500
2967
|
export {
|
|
3501
|
-
|
|
2968
|
+
je as BaseGridPlugin,
|
|
3502
2969
|
P as DEFAULT_GRID_ICONS,
|
|
3503
|
-
|
|
3504
|
-
|
|
2970
|
+
Ze as DGEvents,
|
|
2971
|
+
G as DataGridElement,
|
|
3505
2972
|
q as FitModeEnum,
|
|
3506
|
-
|
|
3507
|
-
|
|
2973
|
+
Ye as GridCSSVars,
|
|
2974
|
+
A as GridClasses,
|
|
3508
2975
|
B as GridDataAttrs,
|
|
3509
|
-
|
|
3510
|
-
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
Ct as runValueAggregator,
|
|
3522
|
-
Rt as unregisterAggregator
|
|
2976
|
+
G as GridElement,
|
|
2977
|
+
Ke as GridSelectors,
|
|
2978
|
+
Je as PluginEvents,
|
|
2979
|
+
Ue as PluginManager,
|
|
2980
|
+
H as aggregatorRegistry,
|
|
2981
|
+
ot as getAggregator,
|
|
2982
|
+
Xe as getValueAggregator,
|
|
2983
|
+
it as listAggregators,
|
|
2984
|
+
et as registerAggregator,
|
|
2985
|
+
nt as runAggregator,
|
|
2986
|
+
Qe as runValueAggregator,
|
|
2987
|
+
tt as unregisterAggregator
|
|
3523
2988
|
};
|
|
3524
2989
|
//# sourceMappingURL=index.js.map
|