@toolbox-web/grid 0.2.3 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -0
- package/all.d.ts +64 -96
- package/index.d.ts +64 -96
- package/index.js +337 -265
- 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.map +1 -1
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +2 -2
- package/themes/dg-theme-bootstrap.css +0 -2
- package/themes/dg-theme-contrast.css +0 -1
- package/themes/dg-theme-large.css +0 -1
- package/themes/dg-theme-material.css +0 -2
- package/themes/dg-theme-standard.css +0 -1
- package/themes/dg-theme-vibrant.css +0 -1
- package/umd/grid.all.umd.js +5 -5
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +6 -6
- package/umd/grid.umd.js.map +1 -1
package/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const fe = ":root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-cell-white-space: nowrap;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-accent);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 4px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell,:host .header-row>.cell.grouped.group-end{border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style}:host .data-grid-row:has(.editing){background:var(--tbw-editing-bg)}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell.selected:focus-visible,:host .data-grid-row>.cell:focus-visible:not(.cell-focus){outline:none}:host .data-grid-row>.cell{display:block;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);line-height:calc(var(--tbw-row-height) - 5px);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0;white-space:var(--tbw-cell-white-space, nowrap);text-overflow:ellipsis}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:inherit;min-width:0}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{text-align:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size);vertical-align:middle}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;max-width:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host .cell-focus,:host .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-row-alt);font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}:host .group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px)}:host .group-row .group-toggle{background:none;border:0;cursor:pointer;padding:0 4px 0 0;font:inherit}:host .group-row .group-count{margin-left:4px;opacity:.7}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.grid-container{position:relative;width:100%;height:100%}.grid-placeholder{padding:2rem;text-align:center;color:var(--tbw-color-fg);opacity:.6}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: .2s ease-out;--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden}:host .tbw-tool-panel{position:absolute;top:0;bottom:0;right:0;width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;z-index:30;box-shadow:-2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel[data-position=left]{right:auto;left:0;border-left:none;border-right:1px solid var(--tbw-tool-panel-border);box-shadow:2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background .15s ease}:host .tbw-tool-panel-resize[data-handle-position=left]{left:0}:host .tbw-tool-panel-resize[data-handle-position=right]{right:0}:host .tbw-tool-panel-resize:hover,:host .tbw-tool-panel-resize.resizing{background:var(--tbw-color-accent)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto}:host .tbw-accordion{display:flex;flex-direction:column;gap:0}:host .tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border)}:host .tbw-accordion-section:last-child{border-bottom:none}:host .tbw-accordion-header{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:transparent;color:var(--tbw-color-fg);font-size:13px;font-weight:600;text-align:left;cursor:pointer;user-select:none}:host .tbw-accordion-header:hover{background:var(--tbw-color-row-hover)}:host .tbw-accordion-section.single .tbw-accordion-header{cursor:default}:host .tbw-accordion-section.single .tbw-accordion-header:hover{background:transparent}:host .tbw-accordion-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:var(--tbw-color-fg-muted);transition:transform .15s ease;flex-shrink:0}:host .tbw-accordion-section.expanded .tbw-accordion-chevron{transform:rotate(90deg)}:host .tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}:host .tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tbw-accordion-content{display:none}:host .tbw-accordion-section.expanded .tbw-accordion-content{display:block}:host .tbw-quick-filter-input{flex:1;max-width:300px;height:28px;padding:0 8px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:13px}:host .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}:host .tbw-selection-summary{font-size:13px;color:var(--tbw-color-fg-muted);white-space:nowrap}";
|
|
1
|
+
const fe = ":root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-cell-white-space: nowrap;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-accent);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 6px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell,:host .header-row>.cell.grouped.group-end{border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style}:host .data-grid-row:has(.editing){background:var(--tbw-editing-bg)}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell.selected:focus-visible,:host .data-grid-row>.cell:focus-visible:not(.cell-focus){outline:none}:host .data-grid-row>.cell{display:block;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);line-height:calc(var(--tbw-row-height) - 5px);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0;white-space:var(--tbw-cell-white-space, nowrap);text-overflow:ellipsis}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:inherit;min-width:0}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{text-align:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size);vertical-align:middle}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;max-width:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host .cell-focus,:host .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-row-alt);font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}:host .group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px)}:host .group-row .group-toggle{background:none;border:0;cursor:pointer;padding:0 4px 0 0;font:inherit}:host .group-row .group-count{margin-left:4px;opacity:.7}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.grid-container{position:relative;width:100%;height:100%}.grid-placeholder{padding:2rem;text-align:center;color:var(--tbw-color-fg);opacity:.6}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: .2s ease-out;--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden}:host .tbw-tool-panel{position:absolute;top:0;bottom:0;right:0;width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;z-index:30;box-shadow:-2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel[data-position=left]{right:auto;left:0;border-left:none;border-right:1px solid var(--tbw-tool-panel-border);box-shadow:2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background .15s ease}:host .tbw-tool-panel-resize[data-handle-position=left]{left:0}:host .tbw-tool-panel-resize[data-handle-position=right]{right:0}:host .tbw-tool-panel-resize:hover,:host .tbw-tool-panel-resize.resizing{background:var(--tbw-color-accent)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto}:host .tbw-accordion{display:flex;flex-direction:column;gap:0}:host .tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border)}:host .tbw-accordion-section:last-child{border-bottom:none}:host .tbw-accordion-header{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:transparent;color:var(--tbw-color-fg);font-size:13px;font-weight:600;text-align:left;cursor:pointer;user-select:none}:host .tbw-accordion-header:hover{background:var(--tbw-color-row-hover)}:host .tbw-accordion-section.single .tbw-accordion-header{cursor:default}:host .tbw-accordion-section.single .tbw-accordion-header:hover{background:transparent}:host .tbw-accordion-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:var(--tbw-color-fg-muted);transition:transform .15s ease;flex-shrink:0}:host .tbw-accordion-section.expanded .tbw-accordion-chevron{transform:rotate(90deg)}:host .tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}:host .tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tbw-accordion-content{display:none}:host .tbw-accordion-section.expanded .tbw-accordion-content{display:block}:host .tbw-quick-filter-input{flex:1;max-width:300px;height:28px;padding:0 8px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:13px}:host .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}:host .tbw-selection-summary{font-size:13px;color:var(--tbw-color-fg-muted);white-space:nowrap}";
|
|
2
2
|
function pe(t) {
|
|
3
3
|
const e = /* @__PURE__ */ new Map();
|
|
4
|
-
return t.
|
|
5
|
-
direction: t.
|
|
4
|
+
return t._sortState && e.set(t._sortState.field, {
|
|
5
|
+
direction: t._sortState.direction === 1 ? "asc" : "desc",
|
|
6
6
|
priority: 0
|
|
7
7
|
}), e;
|
|
8
8
|
}
|
|
@@ -43,12 +43,12 @@ function be(t, e, o, i) {
|
|
|
43
43
|
const r = e.columns.filter((l) => l.sort !== void 0).sort((l, a) => (l.sort?.priority ?? 0) - (a.sort?.priority ?? 0));
|
|
44
44
|
if (r.length > 0) {
|
|
45
45
|
const l = r[0];
|
|
46
|
-
l.sort && (t.
|
|
46
|
+
l.sort && (t._sortState = {
|
|
47
47
|
field: l.field,
|
|
48
48
|
direction: l.sort.direction === "asc" ? 1 : -1
|
|
49
49
|
});
|
|
50
50
|
} else
|
|
51
|
-
t.
|
|
51
|
+
t._sortState = null;
|
|
52
52
|
for (const l of i)
|
|
53
53
|
if (l.applyColumnState)
|
|
54
54
|
for (const a of e.columns)
|
|
@@ -95,7 +95,7 @@ function de(t, e) {
|
|
|
95
95
|
n[s.field] = s.type || "string";
|
|
96
96
|
}), { columns: i, typeMap: n };
|
|
97
97
|
}
|
|
98
|
-
const me = /{{\s*([^}]+)\s*}}/g, L = "__DG_EMPTY__", ve = /^[\w$. '?+\-*/%:()!<>=,&|]+$/,
|
|
98
|
+
const me = /{{\s*([^}]+)\s*}}/g, L = "__DG_EMPTY__", ve = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, _e = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, Ee = /* @__PURE__ */ new Set([
|
|
99
99
|
"script",
|
|
100
100
|
"iframe",
|
|
101
101
|
"object",
|
|
@@ -120,23 +120,23 @@ const me = /{{\s*([^}]+)\s*}}/g, L = "__DG_EMPTY__", ve = /^[\w$. '?+\-*/%:()!<>
|
|
|
120
120
|
"plaintext",
|
|
121
121
|
"xmp",
|
|
122
122
|
"listing"
|
|
123
|
-
]),
|
|
123
|
+
]), Q = /^on\w+$/i, Ce = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), ye = /^\s*(javascript|vbscript|data|blob):/i;
|
|
124
124
|
function F(t) {
|
|
125
125
|
if (!t || typeof t != "string") return "";
|
|
126
126
|
if (t.indexOf("<") === -1) return t;
|
|
127
127
|
const e = document.createElement("template");
|
|
128
|
-
return e.innerHTML = t,
|
|
128
|
+
return e.innerHTML = t, Re(e.content), e.innerHTML;
|
|
129
129
|
}
|
|
130
|
-
function
|
|
130
|
+
function Re(t) {
|
|
131
131
|
const e = [], o = t.querySelectorAll("*");
|
|
132
132
|
for (const i of o) {
|
|
133
133
|
const n = i.tagName.toLowerCase();
|
|
134
|
-
if (
|
|
134
|
+
if (Ee.has(n)) {
|
|
135
135
|
e.push(i);
|
|
136
136
|
continue;
|
|
137
137
|
}
|
|
138
138
|
if ((n === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
|
|
139
|
-
(l) =>
|
|
139
|
+
(l) => Q.test(l.name) || l.name === "href" || l.name === "xlink:href"
|
|
140
140
|
)) {
|
|
141
141
|
e.push(i);
|
|
142
142
|
continue;
|
|
@@ -144,11 +144,11 @@ function _e(t) {
|
|
|
144
144
|
const s = [];
|
|
145
145
|
for (const r of i.attributes) {
|
|
146
146
|
const l = r.name.toLowerCase();
|
|
147
|
-
if (
|
|
147
|
+
if (Q.test(l)) {
|
|
148
148
|
s.push(r.name);
|
|
149
149
|
continue;
|
|
150
150
|
}
|
|
151
|
-
if (
|
|
151
|
+
if (Ce.has(l) && ye.test(r.value)) {
|
|
152
152
|
s.push(r.name);
|
|
153
153
|
continue;
|
|
154
154
|
}
|
|
@@ -176,7 +176,7 @@ function Se(t, e) {
|
|
|
176
176
|
const i = t.slice(4), n = e.row ? e.row[i] : void 0;
|
|
177
177
|
return n == null ? L : String(n);
|
|
178
178
|
}
|
|
179
|
-
if (t.length > 80 || !ve.test(t) ||
|
|
179
|
+
if (t.length > 80 || !ve.test(t) || _e.test(t)) return L;
|
|
180
180
|
const o = t.match(/\./g);
|
|
181
181
|
if (o && o.length > 1) return L;
|
|
182
182
|
try {
|
|
@@ -256,14 +256,14 @@ function Pe(t) {
|
|
|
256
256
|
function te(t) {
|
|
257
257
|
const e = t.effectiveConfig?.fitMode || t.fitMode || $.STRETCH;
|
|
258
258
|
if (e !== $.STRETCH && e !== $.FIXED || t.__didInitialAutoSize || !t.isConnected) return;
|
|
259
|
-
const o = t.
|
|
259
|
+
const o = t._headerRowEl?.children || [];
|
|
260
260
|
if (!o.length) return;
|
|
261
261
|
let i = !1;
|
|
262
|
-
t.
|
|
262
|
+
t._visibleColumns.forEach((n, s) => {
|
|
263
263
|
if (n.width) return;
|
|
264
264
|
const r = o[s];
|
|
265
265
|
let l = r ? r.scrollWidth : 0;
|
|
266
|
-
for (const a of t.
|
|
266
|
+
for (const a of t._rowPool) {
|
|
267
267
|
const d = a.children[s];
|
|
268
268
|
if (d) {
|
|
269
269
|
const f = d.scrollWidth;
|
|
@@ -271,14 +271,14 @@ function te(t) {
|
|
|
271
271
|
}
|
|
272
272
|
}
|
|
273
273
|
l > 0 && (n.width = l + 2, n.__autoSized = !0, i = !0);
|
|
274
|
-
}), i &&
|
|
274
|
+
}), i && M(t), t.__didInitialAutoSize = !0;
|
|
275
275
|
}
|
|
276
|
-
function
|
|
277
|
-
(t.effectiveConfig?.fitMode || t.fitMode || $.STRETCH) === $.STRETCH ? t.
|
|
276
|
+
function M(t) {
|
|
277
|
+
(t.effectiveConfig?.fitMode || t.fitMode || $.STRETCH) === $.STRETCH ? t._gridTemplate = t._visibleColumns.map((o) => {
|
|
278
278
|
if (o.width) return `${o.width}px`;
|
|
279
279
|
const i = o.minWidth;
|
|
280
280
|
return i != null ? `minmax(${i}px, 1fr)` : "1fr";
|
|
281
|
-
}).join(" ").trim() : t.
|
|
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
283
|
function He(t) {
|
|
284
284
|
switch (t.type) {
|
|
@@ -332,9 +332,9 @@ function He(t) {
|
|
|
332
332
|
}
|
|
333
333
|
}
|
|
334
334
|
function ke(t, e) {
|
|
335
|
-
if (t.
|
|
335
|
+
if (t._dispatchKeyDown?.(e))
|
|
336
336
|
return;
|
|
337
|
-
const o = t._rows.length - 1, i = t.
|
|
337
|
+
const o = t._rows.length - 1, i = t._visibleColumns.length - 1, n = t._activeEditRows !== void 0 && t._activeEditRows !== -1, r = t._visibleColumns[t._focusCol]?.type, l = e.composedPath ? e.composedPath() : [], a = l && l.length ? l[0] : e.target, d = (f) => {
|
|
338
338
|
if (!f) return !1;
|
|
339
339
|
const h = f.tagName;
|
|
340
340
|
return !!(h === "INPUT" || h === "SELECT" || h === "TEXTAREA" || f.isContentEditable);
|
|
@@ -342,36 +342,36 @@ function ke(t, e) {
|
|
|
342
342
|
if (!(d(a) && (e.key === "Home" || e.key === "End")) && !(d(a) && (e.key === "ArrowUp" || e.key === "ArrowDown") && a.tagName === "INPUT" && a.type === "number") && !(d(a) && (e.key === "ArrowLeft" || e.key === "ArrowRight")) && !(d(a) && (e.key === "Enter" || e.key === "Escape")) && !(n && (r === "select" || r === "typeahead") && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
|
|
343
343
|
switch (e.key) {
|
|
344
344
|
case "Tab": {
|
|
345
|
-
e.preventDefault(), !e.shiftKey ? t.
|
|
345
|
+
e.preventDefault(), !e.shiftKey ? t._focusCol < i ? t._focusCol += 1 : (typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow < o && (t._focusRow += 1, t._focusCol = 0)) : t._focusCol > 0 ? t._focusCol -= 1 : t._focusRow > 0 && (typeof t.commitActiveRowEdit == "function" && t._activeEditRows === t._focusRow && t.commitActiveRowEdit(), t._focusRow -= 1, t._focusCol = i), z(t);
|
|
346
346
|
return;
|
|
347
347
|
}
|
|
348
348
|
case "ArrowDown":
|
|
349
|
-
n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.
|
|
349
|
+
n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = Math.min(o, t._focusRow + 1), e.preventDefault();
|
|
350
350
|
break;
|
|
351
351
|
case "ArrowUp":
|
|
352
|
-
n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.
|
|
352
|
+
n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = Math.max(0, t._focusRow - 1), e.preventDefault();
|
|
353
353
|
break;
|
|
354
354
|
case "ArrowRight":
|
|
355
|
-
t.
|
|
355
|
+
t._focusCol = Math.min(i, t._focusCol + 1), e.preventDefault();
|
|
356
356
|
break;
|
|
357
357
|
case "ArrowLeft":
|
|
358
|
-
t.
|
|
358
|
+
t._focusCol = Math.max(0, t._focusCol - 1), e.preventDefault();
|
|
359
359
|
break;
|
|
360
360
|
case "Home":
|
|
361
|
-
(e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.
|
|
361
|
+
(e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = 0), t._focusCol = 0, e.preventDefault(), z(t, { forceScrollLeft: !0 });
|
|
362
362
|
return;
|
|
363
363
|
case "End":
|
|
364
|
-
(e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.
|
|
364
|
+
(e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = o), t._focusCol = i, e.preventDefault(), z(t, { forceScrollRight: !0 });
|
|
365
365
|
return;
|
|
366
366
|
case "PageDown":
|
|
367
|
-
t.
|
|
367
|
+
t._focusRow = Math.min(o, t._focusRow + 20), e.preventDefault();
|
|
368
368
|
break;
|
|
369
369
|
case "PageUp":
|
|
370
|
-
t.
|
|
370
|
+
t._focusRow = Math.max(0, t._focusRow - 20), e.preventDefault();
|
|
371
371
|
break;
|
|
372
372
|
case "Enter":
|
|
373
|
-
return typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(t.
|
|
374
|
-
new CustomEvent("activate-cell", { detail: { row: t.
|
|
373
|
+
return typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(t._focusRow) : t.dispatchEvent(
|
|
374
|
+
new CustomEvent("activate-cell", { detail: { row: t._focusRow, col: t._focusCol } })
|
|
375
375
|
), z(t);
|
|
376
376
|
default:
|
|
377
377
|
return;
|
|
@@ -380,19 +380,19 @@ function ke(t, e) {
|
|
|
380
380
|
}
|
|
381
381
|
}
|
|
382
382
|
function z(t, e) {
|
|
383
|
-
if (t.
|
|
384
|
-
const { rowHeight: r, container: l, viewportEl: a } = t.
|
|
383
|
+
if (t._virtualization?.enabled) {
|
|
384
|
+
const { rowHeight: r, container: l, viewportEl: a } = t._virtualization, d = l, f = a?.clientHeight ?? d?.clientHeight ?? 0;
|
|
385
385
|
if (d && f > 0) {
|
|
386
|
-
const h = t.
|
|
386
|
+
const h = t._focusRow * r;
|
|
387
387
|
h < d.scrollTop ? d.scrollTop = h : h + r > d.scrollTop + f && (d.scrollTop = h - f + r);
|
|
388
388
|
}
|
|
389
389
|
}
|
|
390
|
-
t.
|
|
390
|
+
t._activeEditRows !== void 0 && t._activeEditRows !== -1 || t.refreshVirtualWindow(!1), Array.from(t._bodyEl.querySelectorAll(".cell-focus")).forEach((r) => r.classList.remove("cell-focus")), Array.from(t._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((r) => {
|
|
391
391
|
r.setAttribute("aria-selected", "false");
|
|
392
392
|
});
|
|
393
|
-
const i = t.
|
|
393
|
+
const i = t._focusRow, n = t._virtualization.start ?? 0, s = t._virtualization.end ?? t._rows.length;
|
|
394
394
|
if (i >= n && i < s) {
|
|
395
|
-
const r = t.
|
|
395
|
+
const r = t._bodyEl.querySelectorAll(".data-grid-row")[i - n], l = r?.children[t._focusCol];
|
|
396
396
|
if (l) {
|
|
397
397
|
l.classList.add("cell-focus"), l.setAttribute("aria-selected", "true");
|
|
398
398
|
const a = t.shadowRoot?.querySelector(".tbw-scroll-area");
|
|
@@ -402,13 +402,13 @@ function z(t, e) {
|
|
|
402
402
|
else if (e?.forceScrollRight)
|
|
403
403
|
a.scrollLeft = a.scrollWidth - a.clientWidth;
|
|
404
404
|
else {
|
|
405
|
-
const d = t.
|
|
405
|
+
const d = t._getHorizontalScrollOffsets?.(r ?? void 0, l) ?? { left: 0, right: 0 };
|
|
406
406
|
if (!d.skipScroll) {
|
|
407
407
|
const f = l.getBoundingClientRect(), h = a.getBoundingClientRect(), p = f.left - h.left + a.scrollLeft, c = p + f.width, u = a.scrollLeft + d.left, b = a.scrollLeft + a.clientWidth - d.right;
|
|
408
408
|
p < u ? a.scrollLeft = p - d.left : c > b && (a.scrollLeft = c - a.clientWidth + d.right);
|
|
409
409
|
}
|
|
410
410
|
}
|
|
411
|
-
if (t.
|
|
411
|
+
if (t._activeEditRows !== void 0 && t._activeEditRows !== -1 && l.classList.contains("editing")) {
|
|
412
412
|
const d = l.querySelector(
|
|
413
413
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
414
414
|
);
|
|
@@ -432,77 +432,77 @@ function Y(t) {
|
|
|
432
432
|
t[Oe] = void 0, t[ze] = void 0, t.__hasSpecialColumns = void 0;
|
|
433
433
|
}
|
|
434
434
|
function Me(t, e, o, i, n) {
|
|
435
|
-
const s = Math.max(0, o - e), r = t.
|
|
435
|
+
const s = Math.max(0, o - e), r = t._bodyEl, l = t._visibleColumns, a = l.length;
|
|
436
436
|
let d = t.__cachedHeaderRowCount;
|
|
437
|
-
for (d === void 0 && (d = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = d); t.
|
|
437
|
+
for (d === void 0 && (d = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = d); t._rowPool.length < s; ) {
|
|
438
438
|
const h = document.createElement("div");
|
|
439
|
-
h.className = "data-grid-row", h.setAttribute("role", "row"), h.addEventListener("click", (p) => oe(t, p, h, !1)), h.addEventListener("dblclick", (p) => oe(t, p, h, !0)), t.
|
|
439
|
+
h.className = "data-grid-row", h.setAttribute("role", "row"), h.addEventListener("click", (p) => oe(t, p, h, !1)), h.addEventListener("dblclick", (p) => oe(t, p, h, !0)), t._rowPool.push(h);
|
|
440
440
|
}
|
|
441
|
-
if (t.
|
|
442
|
-
for (let h = s; h < t.
|
|
443
|
-
const p = t.
|
|
441
|
+
if (t._rowPool.length > s) {
|
|
442
|
+
for (let h = s; h < t._rowPool.length; h++) {
|
|
443
|
+
const p = t._rowPool[h];
|
|
444
444
|
p.parentNode === r && p.remove();
|
|
445
445
|
}
|
|
446
|
-
t.
|
|
446
|
+
t._rowPool.length = s;
|
|
447
447
|
}
|
|
448
448
|
const f = n && t.__hasRenderRowPlugins !== !1;
|
|
449
449
|
for (let h = 0; h < s; h++) {
|
|
450
|
-
const p = e + h, c = t._rows[p], u = t.
|
|
450
|
+
const p = e + h, c = t._rows[p], u = t._rowPool[h];
|
|
451
451
|
if (u.setAttribute("aria-rowindex", String(p + d + 1)), f && n(c, u, p)) {
|
|
452
452
|
u.__epoch = i, u.__rowDataRef = c, u.parentNode !== r && r.appendChild(u);
|
|
453
453
|
continue;
|
|
454
454
|
}
|
|
455
|
-
const b = u.__epoch, w = u.__rowDataRef, v = u.children.length, x = b === i && v === a,
|
|
455
|
+
const b = u.__epoch, w = u.__rowDataRef, v = u.children.length, x = b === i && v === a, R = w !== c;
|
|
456
456
|
let g = !1;
|
|
457
|
-
if (x &&
|
|
458
|
-
for (let
|
|
459
|
-
if (l[
|
|
457
|
+
if (x && R) {
|
|
458
|
+
for (let _ = 0; _ < a; _++)
|
|
459
|
+
if (l[_].externalView && !u.querySelector(`.cell[data-col="${_}"] [data-external-view]`)) {
|
|
460
460
|
g = !0;
|
|
461
461
|
break;
|
|
462
462
|
}
|
|
463
463
|
}
|
|
464
464
|
if (!x || g) {
|
|
465
|
-
const
|
|
466
|
-
if (
|
|
465
|
+
const _ = u.querySelector(".cell.editing"), E = t._activeEditRows === p;
|
|
466
|
+
if (_ && !E)
|
|
467
467
|
u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
|
|
468
|
-
else if (
|
|
468
|
+
else if (_ && E)
|
|
469
469
|
U(t, u, c, p), u.__rowDataRef = c;
|
|
470
|
-
else if (u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c,
|
|
470
|
+
else if (u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c, E) {
|
|
471
471
|
const S = u.children;
|
|
472
472
|
for (let A = 0; A < S.length; A++) {
|
|
473
|
-
const P = t.
|
|
473
|
+
const P = t._visibleColumns[A];
|
|
474
474
|
P && P.editable && k(t, c, p, P, S[A]);
|
|
475
475
|
}
|
|
476
476
|
}
|
|
477
|
-
} else if (
|
|
478
|
-
const
|
|
479
|
-
if (
|
|
477
|
+
} else if (R) {
|
|
478
|
+
const _ = u.querySelector(".cell.editing"), E = t._activeEditRows === p;
|
|
479
|
+
if (_ && !E)
|
|
480
480
|
N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
|
|
481
|
-
else if (U(t, u, c, p), u.__rowDataRef = c,
|
|
481
|
+
else if (U(t, u, c, p), u.__rowDataRef = c, E && !_) {
|
|
482
482
|
const S = u.children;
|
|
483
483
|
for (let A = 0; A < S.length; A++) {
|
|
484
|
-
const P = t.
|
|
484
|
+
const P = t._visibleColumns[A];
|
|
485
485
|
P && P.editable && k(t, c, p, P, S[A]);
|
|
486
486
|
}
|
|
487
487
|
}
|
|
488
488
|
} else {
|
|
489
|
-
const
|
|
490
|
-
if (
|
|
489
|
+
const _ = u.querySelector(".cell.editing"), E = t._activeEditRows === p;
|
|
490
|
+
if (_ && !E)
|
|
491
491
|
N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
|
|
492
|
-
else if (U(t, u, c, p),
|
|
492
|
+
else if (U(t, u, c, p), E && !_) {
|
|
493
493
|
const S = u.children;
|
|
494
494
|
for (let A = 0; A < S.length; A++) {
|
|
495
|
-
const P = t.
|
|
495
|
+
const P = t._visibleColumns[A];
|
|
496
496
|
P && P.editable && k(t, c, p, P, S[A]);
|
|
497
497
|
}
|
|
498
498
|
}
|
|
499
499
|
}
|
|
500
|
-
const m = t._changedRowIndices.has(p),
|
|
501
|
-
m !==
|
|
500
|
+
const m = t._changedRowIndices.has(p), C = u.classList.contains("changed");
|
|
501
|
+
m !== C && u.classList.toggle("changed", m), u.parentNode !== r && r.appendChild(u);
|
|
502
502
|
}
|
|
503
503
|
}
|
|
504
504
|
function U(t, e, o, i) {
|
|
505
|
-
const n = e.children, s = t.
|
|
505
|
+
const n = e.children, s = t._visibleColumns, r = s.length, l = n.length, a = r < l ? r : l, d = t._focusRow, f = t._focusCol;
|
|
506
506
|
let h = t.__hasSpecialColumns;
|
|
507
507
|
if (h === void 0) {
|
|
508
508
|
h = !1;
|
|
@@ -536,41 +536,41 @@ function U(t, e, o, i) {
|
|
|
536
536
|
const w = d === i && f === c, v = b.classList.contains("cell-focus");
|
|
537
537
|
if (w !== v && (b.classList.toggle("cell-focus", w), b.setAttribute("aria-selected", String(w))), b.classList.contains("editing")) continue;
|
|
538
538
|
if (u.viewRenderer) {
|
|
539
|
-
const
|
|
540
|
-
typeof g == "string" ? b.innerHTML = F(g) : g ? (b.innerHTML = "", b.appendChild(g)) : b.textContent =
|
|
539
|
+
const R = o[u.field], g = u.viewRenderer({ row: o, value: R, field: u.field, column: u });
|
|
540
|
+
typeof g == "string" ? b.innerHTML = F(g) : g ? (b.innerHTML = "", b.appendChild(g)) : b.textContent = R == null ? "" : String(R);
|
|
541
541
|
continue;
|
|
542
542
|
}
|
|
543
543
|
if (u.__viewTemplate || u.__compiledView || u.externalView)
|
|
544
544
|
continue;
|
|
545
|
-
const
|
|
545
|
+
const y = o[u.field];
|
|
546
546
|
let x;
|
|
547
547
|
if (u.format)
|
|
548
548
|
try {
|
|
549
|
-
const
|
|
550
|
-
x = _ == null ? "" : String(_);
|
|
551
|
-
} catch {
|
|
549
|
+
const R = u.format(y, o);
|
|
552
550
|
x = R == null ? "" : String(R);
|
|
551
|
+
} catch {
|
|
552
|
+
x = y == null ? "" : String(y);
|
|
553
553
|
}
|
|
554
554
|
else if (u.type === "date") {
|
|
555
|
-
if (
|
|
555
|
+
if (y == null || y === "")
|
|
556
556
|
x = "";
|
|
557
|
-
else if (
|
|
558
|
-
x = isNaN(
|
|
557
|
+
else if (y instanceof Date)
|
|
558
|
+
x = isNaN(y.getTime()) ? "" : y.toLocaleDateString();
|
|
559
559
|
else {
|
|
560
|
-
const
|
|
561
|
-
x = isNaN(
|
|
560
|
+
const R = new Date(y);
|
|
561
|
+
x = isNaN(R.getTime()) ? "" : R.toLocaleDateString();
|
|
562
562
|
}
|
|
563
563
|
b.textContent = x;
|
|
564
564
|
} else if (u.type === "boolean") {
|
|
565
|
-
const
|
|
566
|
-
b.innerHTML = `<span role="checkbox" aria-checked="${
|
|
565
|
+
const R = !!y;
|
|
566
|
+
b.innerHTML = `<span role="checkbox" aria-checked="${R}" aria-label="${R}">${R ? "🗹" : "☐"}</span>`;
|
|
567
567
|
} else
|
|
568
|
-
x =
|
|
568
|
+
x = y == null ? "" : String(y), b.textContent = x;
|
|
569
569
|
}
|
|
570
570
|
}
|
|
571
571
|
function N(t, e, o, i) {
|
|
572
572
|
e.innerHTML = "";
|
|
573
|
-
const n = t.
|
|
573
|
+
const n = t._visibleColumns, s = n.length, r = t._focusRow, l = t._focusCol, a = t.effectiveConfig?.editOn || t.editOn, d = t, f = document.createDocumentFragment();
|
|
574
574
|
for (let h = 0; h < s; h++) {
|
|
575
575
|
const p = n[h], c = document.createElement("div");
|
|
576
576
|
c.className = "cell", j(c, "cell"), c.setAttribute("role", "gridcell"), c.setAttribute("aria-colindex", String(h + 1)), c.setAttribute("data-col", String(h)), c.setAttribute("data-row", String(i)), p.type, p.type && c.setAttribute("data-type", p.type);
|
|
@@ -581,18 +581,18 @@ function N(t, e, o, i) {
|
|
|
581
581
|
u = b(u, o);
|
|
582
582
|
} catch {
|
|
583
583
|
}
|
|
584
|
-
const w = p.__compiledView, v = p.__viewTemplate,
|
|
585
|
-
let
|
|
586
|
-
if (
|
|
587
|
-
const g =
|
|
588
|
-
typeof g == "string" ? (c.innerHTML = F(g),
|
|
584
|
+
const w = p.__compiledView, v = p.__viewTemplate, y = p.viewRenderer, x = p.externalView;
|
|
585
|
+
let R = !1;
|
|
586
|
+
if (y) {
|
|
587
|
+
const g = y({ row: o, value: u, field: p.field, column: p });
|
|
588
|
+
typeof g == "string" ? (c.innerHTML = F(g), R = !0) : g ? c.appendChild(g) : c.textContent = u == null ? "" : String(u);
|
|
589
589
|
} else if (x) {
|
|
590
590
|
const g = x, m = document.createElement("div");
|
|
591
591
|
m.setAttribute("data-external-view", ""), m.setAttribute("data-field", p.field), c.appendChild(m);
|
|
592
|
-
const
|
|
592
|
+
const C = { row: o, value: u, field: p.field, column: p };
|
|
593
593
|
if (g.mount)
|
|
594
594
|
try {
|
|
595
|
-
g.mount({ placeholder: m, context:
|
|
595
|
+
g.mount({ placeholder: m, context: C, spec: g });
|
|
596
596
|
} catch {
|
|
597
597
|
}
|
|
598
598
|
else
|
|
@@ -602,7 +602,7 @@ function N(t, e, o, i) {
|
|
|
602
602
|
new CustomEvent("mount-external-view", {
|
|
603
603
|
bubbles: !0,
|
|
604
604
|
composed: !0,
|
|
605
|
-
detail: { placeholder: m, spec: g, context:
|
|
605
|
+
detail: { placeholder: m, spec: g, context: C }
|
|
606
606
|
})
|
|
607
607
|
);
|
|
608
608
|
} catch {
|
|
@@ -611,10 +611,10 @@ function N(t, e, o, i) {
|
|
|
611
611
|
m.setAttribute("data-mounted", "");
|
|
612
612
|
} else if (w) {
|
|
613
613
|
const g = w({ row: o, value: u, field: p.field, column: p }), m = w.__blocked;
|
|
614
|
-
c.innerHTML = m ? "" : F(g),
|
|
614
|
+
c.innerHTML = m ? "" : F(g), R = !0, m && (c.textContent = "", c.setAttribute("data-blocked-template", ""));
|
|
615
615
|
} else if (v) {
|
|
616
616
|
const g = v.innerHTML;
|
|
617
|
-
/Reflect\.|\bProxy\b|ownKeys\(/.test(g) ? (c.textContent = "", c.setAttribute("data-blocked-template", "")) : (c.innerHTML = F(ue(g, { row: o, value: u })),
|
|
617
|
+
/Reflect\.|\bProxy\b|ownKeys\(/.test(g) ? (c.textContent = "", c.setAttribute("data-blocked-template", "")) : (c.innerHTML = F(ue(g, { row: o, value: u })), R = !0);
|
|
618
618
|
} else if (p.type === "date")
|
|
619
619
|
if (u == null || u === "")
|
|
620
620
|
c.textContent = "";
|
|
@@ -632,7 +632,7 @@ function N(t, e, o, i) {
|
|
|
632
632
|
c.innerHTML = `<span role="checkbox" aria-checked="${g}" aria-label="${g}">${g ? "🗹" : "☐"}</span>`;
|
|
633
633
|
} else
|
|
634
634
|
c.textContent = u == null ? "" : String(u);
|
|
635
|
-
if (
|
|
635
|
+
if (R) {
|
|
636
636
|
Ae(c);
|
|
637
637
|
const g = c.textContent || "";
|
|
638
638
|
/Proxy|Reflect\.ownKeys/.test(g) && (c.textContent = g.replace(/Proxy|Reflect\.ownKeys/g, "").trim(), /Proxy|Reflect\.ownKeys/.test(c.textContent || "") && (c.textContent = ""));
|
|
@@ -640,36 +640,36 @@ function N(t, e, o, i) {
|
|
|
640
640
|
c.hasAttribute("data-blocked-template") && (c.textContent || "").trim().length && (c.textContent = ""), p.editable ? (c.tabIndex = 0, c.addEventListener("mousedown", () => {
|
|
641
641
|
if (c.classList.contains("editing")) return;
|
|
642
642
|
const g = Number(c.getAttribute("data-row")), m = Number(c.getAttribute("data-col"));
|
|
643
|
-
isNaN(g) || isNaN(m) || (t.
|
|
643
|
+
isNaN(g) || isNaN(m) || (t._focusRow = g, t._focusCol = m, z(t));
|
|
644
644
|
}), a === "click" ? c.addEventListener("click", (g) => {
|
|
645
645
|
if (c.classList.contains("editing")) return;
|
|
646
646
|
g.stopPropagation();
|
|
647
|
-
const m = Number(c.getAttribute("data-row")),
|
|
648
|
-
if (isNaN(m) || isNaN(
|
|
649
|
-
const
|
|
650
|
-
!
|
|
647
|
+
const m = Number(c.getAttribute("data-row")), C = Number(c.getAttribute("data-col"));
|
|
648
|
+
if (isNaN(m) || isNaN(C)) return;
|
|
649
|
+
const _ = t._rows[m], E = t._visibleColumns[C];
|
|
650
|
+
!_ || !E || (t._focusRow = m, t._focusCol = C, k(t, _, m, E, c));
|
|
651
651
|
}) : c.addEventListener("dblclick", (g) => {
|
|
652
652
|
g.stopPropagation();
|
|
653
653
|
const m = Number(c.getAttribute("data-row"));
|
|
654
654
|
if (isNaN(m)) return;
|
|
655
|
-
const
|
|
656
|
-
if (!
|
|
657
|
-
B(t, m,
|
|
658
|
-
const
|
|
659
|
-
if (
|
|
660
|
-
const
|
|
661
|
-
for (let S = 0; S <
|
|
662
|
-
const A = t.
|
|
663
|
-
A && A.editable && k(t,
|
|
655
|
+
const C = t._rows[m];
|
|
656
|
+
if (!C) return;
|
|
657
|
+
B(t, m, C);
|
|
658
|
+
const _ = t.findRenderedRowElement?.(m);
|
|
659
|
+
if (_) {
|
|
660
|
+
const E = _.children;
|
|
661
|
+
for (let S = 0; S < E.length; S++) {
|
|
662
|
+
const A = t._visibleColumns[S];
|
|
663
|
+
A && A.editable && k(t, C, m, A, E[S]);
|
|
664
664
|
}
|
|
665
665
|
}
|
|
666
666
|
}), c.addEventListener("keydown", (g) => {
|
|
667
|
-
const m = Number(c.getAttribute("data-row")),
|
|
668
|
-
if (isNaN(m) || isNaN(
|
|
669
|
-
const
|
|
670
|
-
if (!(!
|
|
671
|
-
if ((
|
|
672
|
-
g.preventDefault(), t.
|
|
667
|
+
const m = Number(c.getAttribute("data-row")), C = Number(c.getAttribute("data-col"));
|
|
668
|
+
if (isNaN(m) || isNaN(C)) return;
|
|
669
|
+
const _ = t._rows[m], E = t._visibleColumns[C];
|
|
670
|
+
if (!(!_ || !E)) {
|
|
671
|
+
if ((E.type === "select" || E.type === "typeahead") && !c.classList.contains("editing") && g.key === "Enter") {
|
|
672
|
+
g.preventDefault(), t._activeEditRows !== m && B(t, m, _), k(t, _, m, E, c), setTimeout(() => {
|
|
673
673
|
const S = c.querySelector("select");
|
|
674
674
|
try {
|
|
675
675
|
S?.showPicker?.();
|
|
@@ -679,18 +679,18 @@ function N(t, e, o, i) {
|
|
|
679
679
|
}, 0);
|
|
680
680
|
return;
|
|
681
681
|
}
|
|
682
|
-
if (
|
|
683
|
-
g.preventDefault(), t.
|
|
684
|
-
const S = !E
|
|
685
|
-
|
|
682
|
+
if (E.type === "boolean" && g.key === " " && !c.classList.contains("editing")) {
|
|
683
|
+
g.preventDefault(), t._activeEditRows !== m && B(t, m, _);
|
|
684
|
+
const S = !_[E.field];
|
|
685
|
+
J(t, m, E, S, _), c.innerHTML = `<span role="checkbox" aria-checked="${S}" aria-label="${S}">${S ? "🗹" : "☐"}</span>`;
|
|
686
686
|
return;
|
|
687
687
|
}
|
|
688
688
|
if (g.key === "Enter" && !c.classList.contains("editing")) {
|
|
689
|
-
g.preventDefault(), g.stopPropagation(), t.
|
|
689
|
+
g.preventDefault(), g.stopPropagation(), t._focusRow = m, t._focusCol = C, typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(m) : k(t, _, m, E, c);
|
|
690
690
|
return;
|
|
691
691
|
}
|
|
692
692
|
if (g.key === "F2" && !c.classList.contains("editing")) {
|
|
693
|
-
g.preventDefault(), k(t,
|
|
693
|
+
g.preventDefault(), k(t, _, m, E, c);
|
|
694
694
|
return;
|
|
695
695
|
}
|
|
696
696
|
}
|
|
@@ -711,9 +711,9 @@ function oe(t, e, o, i) {
|
|
|
711
711
|
if (l.classList.contains("editing")) return;
|
|
712
712
|
const d = Number(l.getAttribute("data-col"));
|
|
713
713
|
if (!isNaN(d)) {
|
|
714
|
-
if (t.
|
|
714
|
+
if (t._dispatchCellClick?.(e, s, d, l))
|
|
715
715
|
return;
|
|
716
|
-
t.
|
|
716
|
+
t._focusRow = s, t._focusCol = d, z(t);
|
|
717
717
|
}
|
|
718
718
|
}
|
|
719
719
|
if (o.querySelector(".cell.editing")) {
|
|
@@ -725,10 +725,10 @@ function oe(t, e, o, i) {
|
|
|
725
725
|
if (a === "click" || a === "doubleClick" && i) B(t, s, r);
|
|
726
726
|
else return;
|
|
727
727
|
Array.from(o.children).forEach((d, f) => {
|
|
728
|
-
const h = t.
|
|
728
|
+
const h = t._visibleColumns[f];
|
|
729
729
|
h && h.editable && k(t, r, s, h, d);
|
|
730
730
|
}), l && queueMicrotask(() => {
|
|
731
|
-
const d = o.querySelector(`.cell[data-col="${t.
|
|
731
|
+
const d = o.querySelector(`.cell[data-col="${t._focusCol}"]`);
|
|
732
732
|
if (d?.classList.contains("editing")) {
|
|
733
733
|
const f = d.querySelector(
|
|
734
734
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
@@ -744,20 +744,20 @@ function Z(t) {
|
|
|
744
744
|
return !(t === "__proto__" || t === "constructor" || t === "prototype");
|
|
745
745
|
}
|
|
746
746
|
function B(t, e, o) {
|
|
747
|
-
t.
|
|
747
|
+
t._activeEditRows !== e && (t._rowEditSnapshots.set(e, { ...o }), t._activeEditRows = e);
|
|
748
748
|
}
|
|
749
|
-
function
|
|
750
|
-
if (t.
|
|
751
|
-
const i = t.
|
|
749
|
+
function D(t, e, o) {
|
|
750
|
+
if (t._activeEditRows !== e) return;
|
|
751
|
+
const i = t._rowEditSnapshots.get(e), n = t._rows[e], s = t.findRenderedRowElement?.(e);
|
|
752
752
|
if (!o && s && n && s.querySelectorAll(".cell.editing").forEach((l) => {
|
|
753
753
|
const a = Number(l.getAttribute("data-col"));
|
|
754
754
|
if (isNaN(a)) return;
|
|
755
|
-
const d = t.
|
|
755
|
+
const d = t._visibleColumns[a];
|
|
756
756
|
if (!d) return;
|
|
757
757
|
const f = l.querySelector("input,textarea,select");
|
|
758
758
|
if (f) {
|
|
759
759
|
let h;
|
|
760
|
-
f instanceof HTMLInputElement && f.type === "checkbox" ? h = f.checked : (h = f.value, d.type === "number" && h !== "" && (h = Number(h))), n[d.field] !== h &&
|
|
760
|
+
f instanceof HTMLInputElement && f.type === "checkbox" ? h = f.checked : (h = f.value, d.type === "number" && h !== "" && (h = Number(h))), n[d.field] !== h && J(t, e, d, h, n);
|
|
761
761
|
}
|
|
762
762
|
}), o && i && n)
|
|
763
763
|
Object.keys(i).forEach((r) => n[r] = i[r]), t._changedRowIndices.delete(e), Y(t);
|
|
@@ -775,11 +775,13 @@ function M(t, e, o) {
|
|
|
775
775
|
})
|
|
776
776
|
);
|
|
777
777
|
}
|
|
778
|
-
t.
|
|
778
|
+
t._rowEditSnapshots.delete(e), t._activeEditRows = -1, s && (N(t, s, t._rows[e], e), t._changedRowIndices.has(e) ? s.classList.add("changed") : s.classList.remove("changed")), queueMicrotask(() => {
|
|
779
779
|
try {
|
|
780
|
-
const r = t.
|
|
780
|
+
const r = t._focusRow, l = t._focusCol, a = t.findRenderedRowElement?.(r);
|
|
781
781
|
if (a) {
|
|
782
|
-
Array.from(t.
|
|
782
|
+
Array.from(t._bodyEl.querySelectorAll(".cell-focus")).forEach(
|
|
783
|
+
(f) => f.classList.remove("cell-focus")
|
|
784
|
+
);
|
|
783
785
|
const d = a.querySelector(`.cell[data-row="${r}"][data-col="${l}"]`);
|
|
784
786
|
d && (d.classList.add("cell-focus"), d.setAttribute("aria-selected", "true"), d.hasAttribute("tabindex") || d.setAttribute("tabindex", "-1"), d.focus({ preventScroll: !0 }));
|
|
785
787
|
}
|
|
@@ -787,7 +789,7 @@ function M(t, e, o) {
|
|
|
787
789
|
}
|
|
788
790
|
});
|
|
789
791
|
}
|
|
790
|
-
function
|
|
792
|
+
function J(t, e, o, i, n) {
|
|
791
793
|
const s = o.field;
|
|
792
794
|
if (!Z(s) || n[s] === i) return;
|
|
793
795
|
n[s] = i;
|
|
@@ -809,26 +811,26 @@ function Q(t, e, o, i, n) {
|
|
|
809
811
|
);
|
|
810
812
|
}
|
|
811
813
|
function k(t, e, o, i, n) {
|
|
812
|
-
if (!i.editable || (t.
|
|
814
|
+
if (!i.editable || (t._activeEditRows !== o && B(t, o, e), n.classList.contains("editing"))) return;
|
|
813
815
|
const s = Z(i.field) ? e[i.field] : void 0;
|
|
814
816
|
n.classList.add("editing");
|
|
815
817
|
let r = !1;
|
|
816
818
|
const l = (c) => {
|
|
817
|
-
r || t.
|
|
819
|
+
r || t._activeEditRows === -1 || J(t, o, i, c, e);
|
|
818
820
|
}, a = () => {
|
|
819
821
|
r = !0, e[i.field] = Z(i.field) ? s : void 0;
|
|
820
822
|
const c = n.querySelector("input,textarea,select");
|
|
821
823
|
c && (typeof HTMLInputElement < "u" && c instanceof HTMLInputElement && c.type === "checkbox" ? c.checked = !!s : "value" in c && (c.value = s ?? ""));
|
|
822
824
|
}, d = document.createElement("div");
|
|
823
825
|
d.style.display = "contents", n.innerHTML = "", n.appendChild(d), d.addEventListener("keydown", (c) => {
|
|
824
|
-
c.key === "Enter" && (c.stopPropagation(), c.preventDefault(), r = !0,
|
|
826
|
+
c.key === "Enter" && (c.stopPropagation(), c.preventDefault(), r = !0, D(t, o, !1)), c.key === "Escape" && (c.stopPropagation(), c.preventDefault(), a(), D(t, o, !0));
|
|
825
827
|
});
|
|
826
828
|
const f = i.__editorTemplate, h = i.editor || (f ? "template" : He(i)), p = s;
|
|
827
829
|
if (h === "template" && f) {
|
|
828
830
|
const c = f.cloneNode(!0), u = i.__compiledEditor;
|
|
829
831
|
u ? c.innerHTML = u({ row: e, value: s, field: i.field, column: i }) : c.querySelectorAll("*").forEach((w) => {
|
|
830
|
-
w.childNodes.length === 1 && w.firstChild?.nodeType === Node.TEXT_NODE && (w.textContent = w.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (v,
|
|
831
|
-
const x = e[
|
|
832
|
+
w.childNodes.length === 1 && w.firstChild?.nodeType === Node.TEXT_NODE && (w.textContent = w.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (v, y) => {
|
|
833
|
+
const x = e[y];
|
|
832
834
|
return x == null ? "" : String(x);
|
|
833
835
|
}) || "");
|
|
834
836
|
});
|
|
@@ -841,10 +843,10 @@ function k(t, e, o, i, n) {
|
|
|
841
843
|
}), b.addEventListener("keydown", (v) => {
|
|
842
844
|
if (v.key === "Enter") {
|
|
843
845
|
v.stopPropagation(), v.preventDefault(), r = !0;
|
|
844
|
-
const
|
|
845
|
-
l(
|
|
846
|
+
const y = w && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked : b.value;
|
|
847
|
+
l(y), D(t, o, !1);
|
|
846
848
|
}
|
|
847
|
-
v.key === "Escape" && (v.stopPropagation(), v.preventDefault(), a(),
|
|
849
|
+
v.key === "Escape" && (v.stopPropagation(), v.preventDefault(), a(), D(t, o, !0));
|
|
848
850
|
}), w && b instanceof HTMLInputElement && b.type === "checkbox" && b.addEventListener("change", () => {
|
|
849
851
|
const v = b.checked;
|
|
850
852
|
l(v);
|
|
@@ -873,16 +875,16 @@ function k(t, e, o, i, n) {
|
|
|
873
875
|
}
|
|
874
876
|
}
|
|
875
877
|
function ne(t, e) {
|
|
876
|
-
!t.
|
|
877
|
-
i.getAttribute("aria-sort") ? (i.getAttribute("aria-sort") === "ascending" || i.getAttribute("aria-sort") === "descending") && (t.
|
|
878
|
+
!t._sortState || t._sortState.field !== e.field ? (t._sortState || (t.__originalOrder = t._rows.slice()), ie(t, e, 1)) : t._sortState.direction === 1 ? ie(t, e, -1) : (t._sortState = null, t.__rowRenderEpoch++, t._rowPool.forEach((i) => i.__epoch = -1), t._rows = t.__originalOrder.slice(), q(t), t._headerRowEl?.querySelectorAll('[role="columnheader"].sortable')?.forEach((i) => {
|
|
879
|
+
i.getAttribute("aria-sort") ? (i.getAttribute("aria-sort") === "ascending" || i.getAttribute("aria-sort") === "descending") && (t._sortState || i.setAttribute("aria-sort", "none")) : i.setAttribute("aria-sort", "none");
|
|
878
880
|
}), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
879
881
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: 0 } })
|
|
880
882
|
), t.requestStateChange?.());
|
|
881
883
|
}
|
|
882
884
|
function ie(t, e, o) {
|
|
883
|
-
t.
|
|
885
|
+
t._sortState = { field: e.field, direction: o };
|
|
884
886
|
const i = e.sortComparator || ((n, s) => n == null && s == null ? 0 : n == null ? -1 : s == null || n > s ? 1 : n < s ? -1 : 0);
|
|
885
|
-
t._rows.sort((n, s) => i(n[e.field], s[e.field], n, s) * o), t.__rowRenderEpoch++, t.
|
|
887
|
+
t._rows.sort((n, s) => i(n[e.field], s[e.field], n, s) * o), t.__rowRenderEpoch++, t._rowPool.forEach((n) => n.__epoch = -1), q(t), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
886
888
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: o } })
|
|
887
889
|
), t.requestStateChange?.();
|
|
888
890
|
}
|
|
@@ -890,9 +892,9 @@ function De(t, e) {
|
|
|
890
892
|
typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
|
|
891
893
|
}
|
|
892
894
|
function q(t) {
|
|
893
|
-
t.
|
|
894
|
-
const e = t.
|
|
895
|
-
e.innerHTML = "", t.
|
|
895
|
+
t._headerRowEl = t.findHeaderRow();
|
|
896
|
+
const e = t._headerRowEl;
|
|
897
|
+
e.innerHTML = "", t._visibleColumns.forEach((o, i) => {
|
|
896
898
|
const n = document.createElement("div");
|
|
897
899
|
n.className = "cell", j(n, "header-cell"), n.setAttribute("role", "columnheader"), n.setAttribute("aria-colindex", String(i + 1)), n.setAttribute("data-field", o.field), n.setAttribute("data-col", String(i));
|
|
898
900
|
const s = o.__headerTemplate;
|
|
@@ -905,12 +907,12 @@ function q(t) {
|
|
|
905
907
|
n.classList.add("sortable"), n.tabIndex = 0;
|
|
906
908
|
const r = document.createElement("span");
|
|
907
909
|
j(r, "sort-indicator"), r.style.opacity = "0.6";
|
|
908
|
-
const l = t.
|
|
910
|
+
const l = t._sortState?.field === o.field ? t._sortState.direction : 0, a = { ...H, ...t.icons }, d = l === 1 ? a.sortAsc : l === -1 ? a.sortDesc : a.sortNone;
|
|
909
911
|
De(r, d), n.appendChild(r), n.setAttribute("aria-sort", l === 0 ? "none" : l === 1 ? "ascending" : "descending"), n.addEventListener("click", (f) => {
|
|
910
|
-
t.
|
|
912
|
+
t._resizeController?.isResizing || t._dispatchHeaderClick?.(f, i, n) || ne(t, o);
|
|
911
913
|
}), n.addEventListener("keydown", (f) => {
|
|
912
914
|
if (f.key === "Enter" || f.key === " ") {
|
|
913
|
-
if (f.preventDefault(), t.
|
|
915
|
+
if (f.preventDefault(), t._dispatchHeaderClick?.(f, i, n)) return;
|
|
914
916
|
ne(t, o);
|
|
915
917
|
}
|
|
916
918
|
});
|
|
@@ -919,7 +921,9 @@ function q(t) {
|
|
|
919
921
|
n.style.position = "relative";
|
|
920
922
|
const r = document.createElement("div");
|
|
921
923
|
r.className = "resize-handle", r.setAttribute("aria-hidden", "true"), r.addEventListener("mousedown", (l) => {
|
|
922
|
-
l.stopPropagation(), l.preventDefault(), t.
|
|
924
|
+
l.stopPropagation(), l.preventDefault(), t._resizeController.start(l, i, n);
|
|
925
|
+
}), r.addEventListener("dblclick", (l) => {
|
|
926
|
+
l.stopPropagation(), l.preventDefault(), t._resizeController.resetColumn(i);
|
|
923
927
|
}), n.appendChild(r);
|
|
924
928
|
}
|
|
925
929
|
e.appendChild(n);
|
|
@@ -931,7 +935,7 @@ function Ne(t) {
|
|
|
931
935
|
let e = null, o = null, i = null, n = null;
|
|
932
936
|
const s = (a) => {
|
|
933
937
|
if (!e) return;
|
|
934
|
-
const d = a.clientX - e.startX, f = Math.max(40, e.startWidth + d), h = t.
|
|
938
|
+
const d = a.clientX - e.startX, f = Math.max(40, e.startWidth + d), h = t._visibleColumns[e.colIndex];
|
|
935
939
|
h.width = f, h.__userResized = !0, h.__renderedWidth = f, o == null && (o = requestAnimationFrame(() => {
|
|
936
940
|
o = null, t.updateTemplate?.();
|
|
937
941
|
})), t.dispatchEvent(
|
|
@@ -954,6 +958,12 @@ function Ne(t) {
|
|
|
954
958
|
const h = f.getBoundingClientRect();
|
|
955
959
|
e = { startX: a.clientX, colIndex: d, startWidth: h.width }, window.addEventListener("mousemove", s), window.addEventListener("mouseup", l), i === null && (i = document.documentElement.style.cursor), document.documentElement.style.cursor = "e-resize", n === null && (n = document.body.style.userSelect), document.body.style.userSelect = "none";
|
|
956
960
|
},
|
|
961
|
+
resetColumn(a) {
|
|
962
|
+
const d = t._visibleColumns[a];
|
|
963
|
+
d && (d.__userResized = !1, d.__renderedWidth = void 0, d.width = d.__originalWidth, t.updateTemplate?.(), t.requestStateChange?.(), t.dispatchEvent(
|
|
964
|
+
new CustomEvent("column-resize-reset", { detail: { field: d.field, width: d.width } })
|
|
965
|
+
));
|
|
966
|
+
},
|
|
957
967
|
dispose() {
|
|
958
968
|
l();
|
|
959
969
|
}
|
|
@@ -1668,7 +1678,11 @@ class Ye {
|
|
|
1668
1678
|
class W extends HTMLElement {
|
|
1669
1679
|
// TODO: Rename to 'data-grid' when migration is complete
|
|
1670
1680
|
static tagName = "tbw-grid";
|
|
1671
|
-
static version = "0.2.
|
|
1681
|
+
static version = "0.2.5";
|
|
1682
|
+
// ---------------- Observed Attributes ----------------
|
|
1683
|
+
static get observedAttributes() {
|
|
1684
|
+
return ["rows", "columns", "grid-config", "fit-mode", "edit-on"];
|
|
1685
|
+
}
|
|
1672
1686
|
#o;
|
|
1673
1687
|
#A = !1;
|
|
1674
1688
|
// ---------------- Ready Promise ----------------
|
|
@@ -1695,11 +1709,11 @@ class W extends HTMLElement {
|
|
|
1695
1709
|
// Cached flag for plugin scroll handlers
|
|
1696
1710
|
#T;
|
|
1697
1711
|
// Cached hook to avoid closures
|
|
1698
|
-
#
|
|
1712
|
+
#_ = !1;
|
|
1713
|
+
#E = null;
|
|
1699
1714
|
#C = null;
|
|
1700
1715
|
#y = null;
|
|
1701
1716
|
#R = null;
|
|
1702
|
-
#_ = null;
|
|
1703
1717
|
#a;
|
|
1704
1718
|
#b;
|
|
1705
1719
|
// ---------------- Plugin System ----------------
|
|
@@ -1729,44 +1743,45 @@ class W extends HTMLElement {
|
|
|
1729
1743
|
}
|
|
1730
1744
|
// visibleColumns returns only visible columns for rendering
|
|
1731
1745
|
// This is what header/row rendering should use
|
|
1732
|
-
get
|
|
1746
|
+
get _visibleColumns() {
|
|
1733
1747
|
return this._columns.filter((e) => !e.hidden);
|
|
1734
1748
|
}
|
|
1735
1749
|
// #endregion
|
|
1736
|
-
// #region Runtime State
|
|
1737
|
-
//
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
__lightDomColumnsCache;
|
|
1745
|
-
__originalColumnNodes;
|
|
1746
|
-
headerRowEl;
|
|
1747
|
-
bodyEl;
|
|
1748
|
-
virtualization = {
|
|
1750
|
+
// #region Runtime State (Plugin-accessible)
|
|
1751
|
+
// DOM references
|
|
1752
|
+
_headerRowEl;
|
|
1753
|
+
_bodyEl;
|
|
1754
|
+
_rowPool = [];
|
|
1755
|
+
_resizeController;
|
|
1756
|
+
// Virtualization & scroll state
|
|
1757
|
+
_virtualization = {
|
|
1749
1758
|
enabled: !0,
|
|
1750
1759
|
rowHeight: 28,
|
|
1751
|
-
// Initial state - will recalculate after first render
|
|
1752
1760
|
bypassThreshold: 24,
|
|
1753
|
-
// Skip virtualization if <= this many rows (saves overhead)
|
|
1754
1761
|
start: 0,
|
|
1755
1762
|
end: 0,
|
|
1756
1763
|
container: null,
|
|
1757
|
-
// Faux scrollbar element
|
|
1758
1764
|
viewportEl: null,
|
|
1759
|
-
// Rows viewport for measuring visible height
|
|
1760
1765
|
totalHeightEl: null
|
|
1761
|
-
// Spacer for virtual height
|
|
1762
1766
|
};
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1767
|
+
// Focus & navigation
|
|
1768
|
+
_focusRow = 0;
|
|
1769
|
+
_focusCol = 0;
|
|
1770
|
+
// Sort state
|
|
1771
|
+
_sortState = null;
|
|
1772
|
+
// Edit state
|
|
1773
|
+
_activeEditRows = -1;
|
|
1774
|
+
_rowEditSnapshots = /* @__PURE__ */ new Map();
|
|
1769
1775
|
_changedRowIndices = /* @__PURE__ */ new Set();
|
|
1776
|
+
// Layout
|
|
1777
|
+
_gridTemplate = "";
|
|
1778
|
+
// #endregion
|
|
1779
|
+
// #region Implementation Details (Internal only)
|
|
1780
|
+
__rowRenderEpoch = 0;
|
|
1781
|
+
__didInitialAutoSize = !1;
|
|
1782
|
+
__lightDomColumnsCache;
|
|
1783
|
+
__originalColumnNodes;
|
|
1784
|
+
__originalOrder = [];
|
|
1770
1785
|
// #endregion
|
|
1771
1786
|
// ---------------- Public API Props (getters/setters) ----------------
|
|
1772
1787
|
// Getters return the EFFECTIVE value (after merging), not the raw input.
|
|
@@ -1814,9 +1829,12 @@ class W extends HTMLElement {
|
|
|
1814
1829
|
const o = this.#g;
|
|
1815
1830
|
this.#g = e, o !== e && this.#X();
|
|
1816
1831
|
}
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1832
|
+
/**
|
|
1833
|
+
* Effective config accessor for internal modules and plugins.
|
|
1834
|
+
* Returns the merged config (single source of truth) before plugin processing.
|
|
1835
|
+
* Use this when you need the raw merged config (e.g., for column definitions including hidden).
|
|
1836
|
+
* @internal Plugin API
|
|
1837
|
+
*/
|
|
1820
1838
|
get effectiveConfig() {
|
|
1821
1839
|
return this.#t;
|
|
1822
1840
|
}
|
|
@@ -1824,6 +1842,7 @@ class W extends HTMLElement {
|
|
|
1824
1842
|
* Get the disconnect signal for event listener cleanup.
|
|
1825
1843
|
* This signal is aborted when the grid disconnects from the DOM.
|
|
1826
1844
|
* Plugins and internal code can use this for automatic listener cleanup.
|
|
1845
|
+
* @internal Plugin API
|
|
1827
1846
|
* @example
|
|
1828
1847
|
* element.addEventListener('click', handler, { signal: this.grid.disconnectSignal });
|
|
1829
1848
|
*/
|
|
@@ -1850,6 +1869,7 @@ class W extends HTMLElement {
|
|
|
1850
1869
|
/**
|
|
1851
1870
|
* Get a plugin instance by its class.
|
|
1852
1871
|
* Used by plugins for inter-plugin communication.
|
|
1872
|
+
* @internal Plugin API
|
|
1853
1873
|
*/
|
|
1854
1874
|
getPlugin(e) {
|
|
1855
1875
|
return this.#e?.getPlugin(e);
|
|
@@ -1857,6 +1877,7 @@ class W extends HTMLElement {
|
|
|
1857
1877
|
/**
|
|
1858
1878
|
* Get a plugin instance by its name.
|
|
1859
1879
|
* Used for loose coupling between plugins (avoids static imports).
|
|
1880
|
+
* @internal Plugin API
|
|
1860
1881
|
*/
|
|
1861
1882
|
getPluginByName(e) {
|
|
1862
1883
|
return this.#e?.getPluginByName(e);
|
|
@@ -1865,14 +1886,24 @@ class W extends HTMLElement {
|
|
|
1865
1886
|
* Request a full re-render of the grid.
|
|
1866
1887
|
* Called by plugins when they need the grid to update.
|
|
1867
1888
|
* Note: This does NOT reset plugin state - just re-processes rows/columns and renders.
|
|
1889
|
+
* @internal Plugin API
|
|
1868
1890
|
*/
|
|
1869
1891
|
requestRender() {
|
|
1870
|
-
this.#x(), this.#H(), q(this),
|
|
1892
|
+
this.#x(), this.#H(), q(this), M(this), this.refreshVirtualWindow(!0);
|
|
1893
|
+
}
|
|
1894
|
+
/**
|
|
1895
|
+
* Update the grid's column template CSS.
|
|
1896
|
+
* Called by resize controller during column resize operations.
|
|
1897
|
+
* @internal
|
|
1898
|
+
*/
|
|
1899
|
+
updateTemplate() {
|
|
1900
|
+
M(this);
|
|
1871
1901
|
}
|
|
1872
1902
|
/**
|
|
1873
1903
|
* Request a lightweight style update without rebuilding DOM.
|
|
1874
1904
|
* Called by plugins when they only need to update CSS classes/styles.
|
|
1875
1905
|
* This runs all plugin afterRender hooks without rebuilding row/column DOM.
|
|
1906
|
+
* @internal Plugin API
|
|
1876
1907
|
*/
|
|
1877
1908
|
requestAfterRender() {
|
|
1878
1909
|
this.#e?.afterRender();
|
|
@@ -1928,39 +1959,63 @@ class W extends HTMLElement {
|
|
|
1928
1959
|
this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version", W.version), this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#a?.abort(), this.#a = new AbortController(), this.#u(), this.#D(), this.#G(), this.#A || (this.#$(), this.#N(), this.#A = !0), this.#B();
|
|
1929
1960
|
}
|
|
1930
1961
|
disconnectedCallback() {
|
|
1931
|
-
this.#V(), Xe(this.#i), this.#n.setInitialized(!1), this.#S?.(), this.#S = void 0, this.#a && (this.#a.abort(), this.#a = void 0), this.
|
|
1962
|
+
this.#V(), Xe(this.#i), this.#n.setInitialized(!1), this.#S?.(), this.#S = void 0, this.#a && (this.#a.abort(), this.#a = void 0), this._resizeController && this._resizeController.dispose(), this.#b && (this.#b.disconnect(), this.#b = void 0), this.#h = !1;
|
|
1963
|
+
}
|
|
1964
|
+
/**
|
|
1965
|
+
* Handle HTML attribute changes.
|
|
1966
|
+
* Only processes attribute values when SET (non-null).
|
|
1967
|
+
* Removing an attribute does NOT clear JS-set properties.
|
|
1968
|
+
*/
|
|
1969
|
+
attributeChangedCallback(e, o, i) {
|
|
1970
|
+
if (o === i || !i || i === "null" || i === "undefined") return;
|
|
1971
|
+
const s = {
|
|
1972
|
+
rows: "rows",
|
|
1973
|
+
columns: "columns",
|
|
1974
|
+
"grid-config": "gridConfig",
|
|
1975
|
+
"fit-mode": "fitMode",
|
|
1976
|
+
"edit-on": "editOn"
|
|
1977
|
+
}[e];
|
|
1978
|
+
if (s)
|
|
1979
|
+
if (e === "rows" || e === "columns" || e === "grid-config")
|
|
1980
|
+
try {
|
|
1981
|
+
this[s] = JSON.parse(i);
|
|
1982
|
+
} catch {
|
|
1983
|
+
console.warn(`[tbw-grid] Invalid JSON for '${e}' attribute:`, i);
|
|
1984
|
+
}
|
|
1985
|
+
else
|
|
1986
|
+
this[s] = i;
|
|
1932
1987
|
}
|
|
1933
1988
|
#B() {
|
|
1934
1989
|
const o = this.#o.querySelector(".tbw-grid-content") ?? this.#o.querySelector(".tbw-grid-root");
|
|
1935
|
-
if (this.
|
|
1990
|
+
if (this._headerRowEl = o?.querySelector(".header-row"), this._virtualization.totalHeightEl = o?.querySelector(".faux-vscroll-spacer"), this._virtualization.viewportEl = o?.querySelector(".rows-viewport"), this._bodyEl = o?.querySelector(".rows"), this.#n.isInitialized) {
|
|
1936
1991
|
he(this.#o, this.#i), Ge(this.#o, this.#t?.shell, this.#i);
|
|
1937
1992
|
const l = this.#t?.shell?.toolPanel?.defaultOpen;
|
|
1938
1993
|
l && this.#i.toolPanels.has(l) && (this.openToolPanel(), this.#i.expandedSections.add(l));
|
|
1939
1994
|
}
|
|
1940
1995
|
this.setAttribute("data-upgraded", ""), this.#h = !0;
|
|
1941
1996
|
const i = this.disconnectSignal;
|
|
1942
|
-
this.#c(), this.addEventListener("keydown", (l) => ke(this, l), { signal: i }), document.addEventListener(
|
|
1997
|
+
this._resizeController = Ne(this), this.#c(), this.addEventListener("keydown", (l) => ke(this, l), { signal: i }), document.addEventListener(
|
|
1943
1998
|
"keydown",
|
|
1944
1999
|
(l) => {
|
|
1945
|
-
l.key === "Escape" && this.
|
|
2000
|
+
l.key === "Escape" && this._activeEditRows !== -1 && D(this, this._activeEditRows, !0);
|
|
1946
2001
|
},
|
|
1947
2002
|
{ capture: !0, signal: i }
|
|
1948
2003
|
), document.addEventListener(
|
|
1949
2004
|
"mousedown",
|
|
1950
2005
|
(l) => {
|
|
1951
|
-
if (this.
|
|
1952
|
-
const a = this.findRenderedRowElement(this.
|
|
1953
|
-
!a || (l.composedPath && l.composedPath() || []).includes(a) ||
|
|
2006
|
+
if (this._activeEditRows === -1) return;
|
|
2007
|
+
const a = this.findRenderedRowElement(this._activeEditRows);
|
|
2008
|
+
!a || (l.composedPath && l.composedPath() || []).includes(a) || D(this, this._activeEditRows, !1);
|
|
1954
2009
|
},
|
|
1955
2010
|
{ signal: i }
|
|
1956
2011
|
);
|
|
1957
2012
|
const n = o?.querySelector(".faux-vscroll"), s = o?.querySelector(".rows");
|
|
1958
|
-
if (this.
|
|
2013
|
+
if (this._virtualization.container = n ?? this, this.#v = this.#e?.getAll().some((l) => l.onScroll) ?? !1, n && s) {
|
|
1959
2014
|
n.addEventListener(
|
|
1960
2015
|
"scroll",
|
|
1961
2016
|
() => {
|
|
1962
|
-
if (!this.
|
|
1963
|
-
const d = n.scrollTop, f = this.
|
|
2017
|
+
if (!this._virtualization.enabled && !this.#v) return;
|
|
2018
|
+
const d = n.scrollTop, f = this._virtualization.rowHeight, h = Math.floor(d / f), p = h - h % 2, c = -(d - p * f);
|
|
1964
2019
|
s.style.transform = `translateY(${c}px)`, this.#m = d, this.#f || (this.#f = requestAnimationFrame(() => {
|
|
1965
2020
|
this.#f = 0, this.#m !== null && (this.#Z(this.#m), this.#m = null);
|
|
1966
2021
|
}));
|
|
@@ -1977,65 +2032,65 @@ class W extends HTMLElement {
|
|
|
1977
2032
|
), l.addEventListener(
|
|
1978
2033
|
"touchstart",
|
|
1979
2034
|
(d) => {
|
|
1980
|
-
d.touches.length === 1 && (this.#
|
|
2035
|
+
d.touches.length === 1 && (this.#E = d.touches[0].clientY, this.#C = d.touches[0].clientX, this.#y = n.scrollTop, this.#R = a?.scrollLeft ?? 0);
|
|
1981
2036
|
},
|
|
1982
2037
|
{ passive: !0, signal: i }
|
|
1983
2038
|
), l.addEventListener(
|
|
1984
2039
|
"touchmove",
|
|
1985
2040
|
(d) => {
|
|
1986
|
-
if (d.touches.length === 1 && this.#
|
|
1987
|
-
const f = this.#
|
|
1988
|
-
n.scrollTop = this.#
|
|
2041
|
+
if (d.touches.length === 1 && this.#E !== null && this.#C !== null && this.#y !== null && this.#R !== null) {
|
|
2042
|
+
const f = this.#E - d.touches[0].clientY, h = this.#C - d.touches[0].clientX;
|
|
2043
|
+
n.scrollTop = this.#y + f, a && (a.scrollLeft = this.#R + h), d.preventDefault();
|
|
1989
2044
|
}
|
|
1990
2045
|
},
|
|
1991
2046
|
{ passive: !1, signal: i }
|
|
1992
2047
|
), l.addEventListener(
|
|
1993
2048
|
"touchend",
|
|
1994
2049
|
() => {
|
|
1995
|
-
this.#
|
|
2050
|
+
this.#E = null, this.#C = null, this.#y = null, this.#R = null;
|
|
1996
2051
|
},
|
|
1997
2052
|
{ passive: !0, signal: i }
|
|
1998
2053
|
));
|
|
1999
2054
|
}
|
|
2000
|
-
this
|
|
2055
|
+
this.#o.addEventListener("mousedown", (l) => this.#J(l), { signal: i }), document.addEventListener("mousemove", (l) => this.#Q(l), { signal: i }), document.addEventListener("mouseup", (l) => this.#ee(l), { signal: i }), this._virtualization.enabled && requestAnimationFrame(() => this.refreshVirtualWindow(!0));
|
|
2001
2056
|
const r = this.#t.rowHeight;
|
|
2002
|
-
r && r > 0 ? this.
|
|
2003
|
-
const l = this.
|
|
2057
|
+
r && r > 0 ? this._virtualization.rowHeight = r : requestAnimationFrame(() => {
|
|
2058
|
+
const l = this._bodyEl?.querySelector(".data-grid-row");
|
|
2004
2059
|
if (l) {
|
|
2005
2060
|
const a = l.getBoundingClientRect().height;
|
|
2006
|
-
a > 0 && (this.
|
|
2061
|
+
a > 0 && (this._virtualization.rowHeight = a, this.refreshVirtualWindow(!0));
|
|
2007
2062
|
}
|
|
2008
|
-
}), this.
|
|
2063
|
+
}), this._virtualization.viewportEl && (this.#b = new ResizeObserver(() => {
|
|
2009
2064
|
this.#f || (this.#f = requestAnimationFrame(() => {
|
|
2010
2065
|
this.#f = 0, this.refreshVirtualWindow(!0), z(this);
|
|
2011
2066
|
}));
|
|
2012
|
-
}), this.#b.observe(this.
|
|
2067
|
+
}), this.#b.observe(this._virtualization.viewportEl)), queueMicrotask(() => this.#F()), requestAnimationFrame(() => requestAnimationFrame(() => this.#M?.()));
|
|
2013
2068
|
}
|
|
2014
2069
|
// ---------------- Event Emitters ----------------
|
|
2015
2070
|
#s(e, o) {
|
|
2016
2071
|
this.dispatchEvent(new CustomEvent(e, { detail: o, bubbles: !0, composed: !0 }));
|
|
2017
2072
|
}
|
|
2018
|
-
|
|
2073
|
+
_emitCellCommit(e) {
|
|
2019
2074
|
this.#s("cell-commit", e);
|
|
2020
2075
|
}
|
|
2021
|
-
|
|
2076
|
+
_emitRowCommit(e) {
|
|
2022
2077
|
this.#s("row-commit", e);
|
|
2023
2078
|
}
|
|
2024
|
-
|
|
2079
|
+
_emitSortChange(e) {
|
|
2025
2080
|
this.#s("sort-change", e);
|
|
2026
2081
|
}
|
|
2027
|
-
|
|
2082
|
+
_emitColumnResize(e) {
|
|
2028
2083
|
this.#s("column-resize", e);
|
|
2029
2084
|
}
|
|
2030
|
-
|
|
2085
|
+
_emitActivateCell(e) {
|
|
2031
2086
|
this.#s("activate-cell", e);
|
|
2032
2087
|
}
|
|
2033
2088
|
/** Update ARIA selection attributes on rendered rows/cells */
|
|
2034
2089
|
#F() {
|
|
2035
|
-
this.
|
|
2036
|
-
const n = i === this.
|
|
2090
|
+
this._bodyEl?.querySelectorAll(".data-grid-row")?.forEach((o, i) => {
|
|
2091
|
+
const n = i === this._focusRow;
|
|
2037
2092
|
o.setAttribute("aria-selected", String(n)), o.querySelectorAll(".cell").forEach((s, r) => {
|
|
2038
|
-
s.setAttribute("aria-selected", String(n && r === this.
|
|
2093
|
+
s.setAttribute("aria-selected", String(n && r === this._focusCol));
|
|
2039
2094
|
});
|
|
2040
2095
|
});
|
|
2041
2096
|
}
|
|
@@ -2044,10 +2099,10 @@ class W extends HTMLElement {
|
|
|
2044
2099
|
if (!this.#h) return;
|
|
2045
2100
|
this.#u(), this.#t.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, te(this)) : (this._columns.forEach((o) => {
|
|
2046
2101
|
!o.__userResized && o.__autoSized && delete o.width;
|
|
2047
|
-
}),
|
|
2102
|
+
}), M(this));
|
|
2048
2103
|
}
|
|
2049
2104
|
#X() {
|
|
2050
|
-
this.#h && (this.#u(), this.
|
|
2105
|
+
this.#h && (this.#u(), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
|
|
2051
2106
|
}
|
|
2052
2107
|
#K() {
|
|
2053
2108
|
this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#x(), !this.#l || Array.isArray(this.#l) && this.#l.length === 0 ? this.#c() : this.refreshVirtualWindow(!0);
|
|
@@ -2056,7 +2111,7 @@ class W extends HTMLElement {
|
|
|
2056
2111
|
Y(this), this.#h && (this.#u(), this.#c());
|
|
2057
2112
|
}
|
|
2058
2113
|
#Y() {
|
|
2059
|
-
this.#h && (this.#u(), this.#q(), this.#x(), this.#H(), q(this),
|
|
2114
|
+
this.#h && (this.#u(), this.#q(), this.#x(), this.#H(), q(this), M(this), this.refreshVirtualWindow(!0));
|
|
2060
2115
|
}
|
|
2061
2116
|
#H() {
|
|
2062
2117
|
if (this.#e) {
|
|
@@ -2117,6 +2172,8 @@ class W extends HTMLElement {
|
|
|
2117
2172
|
if (this.#l && this.#l.length && (o = [...this.#l]), (!o || o.length === 0) && this._rows.length && (o = de(this._rows).columns), o.length) {
|
|
2118
2173
|
o.forEach((r) => {
|
|
2119
2174
|
r.sortable === void 0 && (r.sortable = !0), r.resizable === void 0 && (r.resizable = !0);
|
|
2175
|
+
const l = r;
|
|
2176
|
+
l.__originalWidth === void 0 && typeof r.width == "number" && (l.__originalWidth = r.width);
|
|
2120
2177
|
});
|
|
2121
2178
|
const n = this.#t.columns;
|
|
2122
2179
|
n?.some((r) => r.__compiledView || r.__compiledEditor) ? e.columns = n : e.columns = o;
|
|
@@ -2124,7 +2181,7 @@ class W extends HTMLElement {
|
|
|
2124
2181
|
const n = this.#t.columns;
|
|
2125
2182
|
n?.some((s) => s.__compiledView || s.__compiledEditor) && (e.columns = n);
|
|
2126
2183
|
}
|
|
2127
|
-
this.#w && (e.fitMode = this.#w), e.fitMode || (e.fitMode = "stretch"), this.#g && (e.editOn = this.#g), e.rowHeight && e.rowHeight > 0 && (this.
|
|
2184
|
+
this.#w && (e.fitMode = this.#w), e.fitMode || (e.fitMode = "stretch"), this.#g && (e.editOn = this.#g), e.rowHeight && e.rowHeight > 0 && (this._virtualization.rowHeight = e.rowHeight), e.columnState && !this.#d && (this.#d = e.columnState), this.#t = e, e.fitMode === "fixed" && this._columns.forEach((n) => {
|
|
2128
2185
|
n.width == null && (n.width = 80);
|
|
2129
2186
|
});
|
|
2130
2187
|
}
|
|
@@ -2134,7 +2191,7 @@ class W extends HTMLElement {
|
|
|
2134
2191
|
}
|
|
2135
2192
|
// ---------------- Core Helpers ----------------
|
|
2136
2193
|
#c() {
|
|
2137
|
-
if (!this.isConnected || !this.
|
|
2194
|
+
if (!this.isConnected || !this._headerRowEl || !this._bodyEl)
|
|
2138
2195
|
return;
|
|
2139
2196
|
const e = this.#p?.columns || this.#l || [];
|
|
2140
2197
|
if (e.length) {
|
|
@@ -2148,7 +2205,7 @@ class W extends HTMLElement {
|
|
|
2148
2205
|
const i = this.#d;
|
|
2149
2206
|
this.#d = void 0, this.#I(i);
|
|
2150
2207
|
}
|
|
2151
|
-
q(this),
|
|
2208
|
+
q(this), M(this), this.refreshVirtualWindow(!0), this.#t.fitMode === "fixed" && !this.__didInitialAutoSize && requestAnimationFrame(() => te(this)), this._bodyEl && (this._bodyEl.style.display = "", this._bodyEl.style.gridTemplateColumns = ""), queueMicrotask(() => this.#e?.afterRender());
|
|
2152
2209
|
}
|
|
2153
2210
|
/** Internal method to apply column state without triggering setup loop */
|
|
2154
2211
|
#I(e) {
|
|
@@ -2161,7 +2218,7 @@ class W extends HTMLElement {
|
|
|
2161
2218
|
}
|
|
2162
2219
|
#Z(e) {
|
|
2163
2220
|
if (this.refreshVirtualWindow(!1), this.#e?.onScrollRender(), this.#v) {
|
|
2164
|
-
const o = this.
|
|
2221
|
+
const o = this._virtualization.container, i = {
|
|
2165
2222
|
scrollTop: e,
|
|
2166
2223
|
scrollLeft: o?.scrollLeft ?? 0,
|
|
2167
2224
|
scrollHeight: o?.scrollHeight ?? 0,
|
|
@@ -2173,11 +2230,23 @@ class W extends HTMLElement {
|
|
|
2173
2230
|
this.#e?.onScroll(i);
|
|
2174
2231
|
}
|
|
2175
2232
|
}
|
|
2233
|
+
/**
|
|
2234
|
+
* Find the header row element in the shadow DOM.
|
|
2235
|
+
* Used by plugins that need to access header cells for styling or measurement.
|
|
2236
|
+
* @internal Plugin API
|
|
2237
|
+
*/
|
|
2176
2238
|
findHeaderRow() {
|
|
2177
2239
|
return this.#o.querySelector(".header-row");
|
|
2178
2240
|
}
|
|
2241
|
+
/**
|
|
2242
|
+
* Find a rendered row element by its data row index.
|
|
2243
|
+
* Returns null if the row is not currently rendered (virtualized out of view).
|
|
2244
|
+
* Used by plugins that need to access specific row elements for styling or measurement.
|
|
2245
|
+
* @internal Plugin API
|
|
2246
|
+
* @param rowIndex - The data row index (not the DOM position)
|
|
2247
|
+
*/
|
|
2179
2248
|
findRenderedRowElement(e) {
|
|
2180
|
-
return Array.from(this.
|
|
2249
|
+
return Array.from(this._bodyEl.querySelectorAll(".data-grid-row")).find((o) => {
|
|
2181
2250
|
const i = o.querySelector(".cell[data-row]");
|
|
2182
2251
|
return i && Number(i.getAttribute("data-row")) === e;
|
|
2183
2252
|
}) || null;
|
|
@@ -2186,7 +2255,7 @@ class W extends HTMLElement {
|
|
|
2186
2255
|
* Dispatch a cell click event to the plugin system.
|
|
2187
2256
|
* Returns true if any plugin handled the event.
|
|
2188
2257
|
*/
|
|
2189
|
-
|
|
2258
|
+
_dispatchCellClick(e, o, i, n) {
|
|
2190
2259
|
const s = this._rows[o], r = this._columns[i];
|
|
2191
2260
|
if (!s || !r) return !1;
|
|
2192
2261
|
const l = {
|
|
@@ -2204,7 +2273,7 @@ class W extends HTMLElement {
|
|
|
2204
2273
|
* Dispatch a header click event to the plugin system.
|
|
2205
2274
|
* Returns true if any plugin handled the event.
|
|
2206
2275
|
*/
|
|
2207
|
-
|
|
2276
|
+
_dispatchHeaderClick(e, o, i) {
|
|
2208
2277
|
const n = this._columns[o];
|
|
2209
2278
|
if (!n) return !1;
|
|
2210
2279
|
const s = {
|
|
@@ -2220,7 +2289,7 @@ class W extends HTMLElement {
|
|
|
2220
2289
|
* Dispatch a keyboard event to the plugin system.
|
|
2221
2290
|
* Returns true if any plugin handled the event.
|
|
2222
2291
|
*/
|
|
2223
|
-
|
|
2292
|
+
_dispatchKeyDown(e) {
|
|
2224
2293
|
return this.#e?.onKeyDown(e) ?? !1;
|
|
2225
2294
|
}
|
|
2226
2295
|
/**
|
|
@@ -2228,12 +2297,13 @@ class W extends HTMLElement {
|
|
|
2228
2297
|
* Used by keyboard navigation to ensure focused cells are fully visible
|
|
2229
2298
|
* when plugins like pinned columns obscure part of the scroll area.
|
|
2230
2299
|
*/
|
|
2231
|
-
|
|
2300
|
+
_getHorizontalScrollOffsets(e, o) {
|
|
2232
2301
|
return this.#e?.getHorizontalScrollOffsets(e, o) ?? { left: 0, right: 0 };
|
|
2233
2302
|
}
|
|
2234
2303
|
/**
|
|
2235
2304
|
* Query all plugins with a generic query and collect responses.
|
|
2236
2305
|
* This enables inter-plugin communication without the core knowing plugin-specific concepts.
|
|
2306
|
+
* @internal Plugin API
|
|
2237
2307
|
*
|
|
2238
2308
|
* @example
|
|
2239
2309
|
* // Check if any plugin vetoes moving a column
|
|
@@ -2274,15 +2344,15 @@ class W extends HTMLElement {
|
|
|
2274
2344
|
/**
|
|
2275
2345
|
* Handle mousedown events and dispatch to plugin system.
|
|
2276
2346
|
*/
|
|
2277
|
-
#
|
|
2347
|
+
#J(e) {
|
|
2278
2348
|
const o = this.#O(e, "mousedown");
|
|
2279
|
-
(this.#e?.onCellMouseDown(o) ?? !1) && (this.#
|
|
2349
|
+
(this.#e?.onCellMouseDown(o) ?? !1) && (this.#_ = !0);
|
|
2280
2350
|
}
|
|
2281
2351
|
/**
|
|
2282
2352
|
* Handle mousemove events (only when dragging).
|
|
2283
2353
|
*/
|
|
2284
|
-
#
|
|
2285
|
-
if (!this.#
|
|
2354
|
+
#Q(e) {
|
|
2355
|
+
if (!this.#_) return;
|
|
2286
2356
|
const o = this.#O(e, "mousemove");
|
|
2287
2357
|
this.#e?.onCellMouseMove(o);
|
|
2288
2358
|
}
|
|
@@ -2290,9 +2360,9 @@ class W extends HTMLElement {
|
|
|
2290
2360
|
* Handle mouseup events.
|
|
2291
2361
|
*/
|
|
2292
2362
|
#ee(e) {
|
|
2293
|
-
if (!this.#
|
|
2363
|
+
if (!this.#_) return;
|
|
2294
2364
|
const o = this.#O(e, "mouseup");
|
|
2295
|
-
this.#e?.onCellMouseUp(o), this.#
|
|
2365
|
+
this.#e?.onCellMouseUp(o), this.#_ = !1;
|
|
2296
2366
|
}
|
|
2297
2367
|
// API consumed by internal utils (rows.ts)
|
|
2298
2368
|
get changedRows() {
|
|
@@ -2302,7 +2372,7 @@ class W extends HTMLElement {
|
|
|
2302
2372
|
return Array.from(this._changedRowIndices);
|
|
2303
2373
|
}
|
|
2304
2374
|
async resetChangedRows(e) {
|
|
2305
|
-
this._changedRowIndices.clear(), e || this.#s("changed-rows-reset", { rows: this.changedRows, indices: this.changedRowIndices }), this.
|
|
2375
|
+
this._changedRowIndices.clear(), e || this.#s("changed-rows-reset", { rows: this.changedRows, indices: this.changedRowIndices }), this._rowPool.forEach((o) => o.classList.remove("changed"));
|
|
2306
2376
|
}
|
|
2307
2377
|
async beginBulkEdit(e) {
|
|
2308
2378
|
if (!this._columns.some((s) => s.editable)) return;
|
|
@@ -2310,13 +2380,13 @@ class W extends HTMLElement {
|
|
|
2310
2380
|
B(this, e, i);
|
|
2311
2381
|
const n = this.findRenderedRowElement?.(e);
|
|
2312
2382
|
n && (Array.from(n.children).forEach((s, r) => {
|
|
2313
|
-
const l = this.
|
|
2383
|
+
const l = this._visibleColumns[r];
|
|
2314
2384
|
if (l?.editable) {
|
|
2315
2385
|
const a = s;
|
|
2316
2386
|
a.classList.contains("editing") || k(this, i, e, l, a);
|
|
2317
2387
|
}
|
|
2318
2388
|
}), queueMicrotask(() => {
|
|
2319
|
-
const s = n.querySelector(`.cell[data-col="${this.
|
|
2389
|
+
const s = n.querySelector(`.cell[data-col="${this._focusCol}"]`);
|
|
2320
2390
|
if (s?.classList.contains("editing")) {
|
|
2321
2391
|
const r = s.querySelector(
|
|
2322
2392
|
'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
|
|
@@ -2329,7 +2399,7 @@ class W extends HTMLElement {
|
|
|
2329
2399
|
}));
|
|
2330
2400
|
}
|
|
2331
2401
|
async commitActiveRowEdit() {
|
|
2332
|
-
this.
|
|
2402
|
+
this._activeEditRows !== -1 && D(this, this._activeEditRows, !1);
|
|
2333
2403
|
}
|
|
2334
2404
|
async ready() {
|
|
2335
2405
|
return this.#z;
|
|
@@ -2357,7 +2427,7 @@ class W extends HTMLElement {
|
|
|
2357
2427
|
field: e,
|
|
2358
2428
|
visible: o,
|
|
2359
2429
|
visibleColumns: (i ?? []).filter((l) => !l.hidden).map((l) => l.field)
|
|
2360
|
-
}), this.
|
|
2430
|
+
}), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange(), !0) : !1;
|
|
2361
2431
|
}
|
|
2362
2432
|
/**
|
|
2363
2433
|
* Toggle the visibility of a column.
|
|
@@ -2386,7 +2456,7 @@ class W extends HTMLElement {
|
|
|
2386
2456
|
i.hidden = !1;
|
|
2387
2457
|
}), this.#s("column-visibility", {
|
|
2388
2458
|
visibleColumns: (e ?? []).map((i) => i.field)
|
|
2389
|
-
}), this.
|
|
2459
|
+
}), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange());
|
|
2390
2460
|
}
|
|
2391
2461
|
/**
|
|
2392
2462
|
* Get list of all column fields (including hidden).
|
|
@@ -2416,7 +2486,7 @@ class W extends HTMLElement {
|
|
|
2416
2486
|
}
|
|
2417
2487
|
for (const n of o.values())
|
|
2418
2488
|
i.push(n);
|
|
2419
|
-
this._columns = i, q(this),
|
|
2489
|
+
this._columns = i, q(this), M(this), this.refreshVirtualWindow(!0);
|
|
2420
2490
|
}
|
|
2421
2491
|
/**
|
|
2422
2492
|
* Get the current column order as an array of field names.
|
|
@@ -2460,6 +2530,7 @@ class W extends HTMLElement {
|
|
|
2460
2530
|
* Called internally after resize, reorder, visibility, or sort changes.
|
|
2461
2531
|
* Plugins should call this after changing their state.
|
|
2462
2532
|
* The event is debounced to avoid excessive events during drag operations.
|
|
2533
|
+
* @internal Plugin API
|
|
2463
2534
|
*/
|
|
2464
2535
|
requestStateChange() {
|
|
2465
2536
|
this.#L || (this.#L = we(
|
|
@@ -2475,7 +2546,7 @@ class W extends HTMLElement {
|
|
|
2475
2546
|
resetColumnState() {
|
|
2476
2547
|
this.#d = void 0, (this.#t.columns ?? []).forEach((i) => {
|
|
2477
2548
|
i.hidden = !1;
|
|
2478
|
-
}), this.
|
|
2549
|
+
}), this._sortState = null, this.__originalOrder = [], this.#u(), this.#c();
|
|
2479
2550
|
const o = this.#e?.getAll() ?? [];
|
|
2480
2551
|
for (const i of o)
|
|
2481
2552
|
if (i.applyColumnState)
|
|
@@ -2573,43 +2644,44 @@ class W extends HTMLElement {
|
|
|
2573
2644
|
/**
|
|
2574
2645
|
* Core virtualization routine. Chooses between bypass (small datasets), grouped window rendering,
|
|
2575
2646
|
* or standard row window rendering.
|
|
2647
|
+
* @internal Plugin API
|
|
2576
2648
|
*/
|
|
2577
2649
|
refreshVirtualWindow(e = !1) {
|
|
2578
|
-
if (!this.
|
|
2650
|
+
if (!this._bodyEl) return;
|
|
2579
2651
|
const o = this._rows.length;
|
|
2580
|
-
if (!this.
|
|
2652
|
+
if (!this._virtualization.enabled) {
|
|
2581
2653
|
this.#k(0, o), this.#e?.afterRender();
|
|
2582
2654
|
return;
|
|
2583
2655
|
}
|
|
2584
|
-
if (this._rows.length <= this.
|
|
2585
|
-
if (this.
|
|
2586
|
-
const
|
|
2587
|
-
this.
|
|
2656
|
+
if (this._rows.length <= this._virtualization.bypassThreshold) {
|
|
2657
|
+
if (this._virtualization.start = 0, this._virtualization.end = o, this._bodyEl.style.transform = "translateY(0px)", this.#k(0, o, this.__rowRenderEpoch), this._virtualization.totalHeightEl) {
|
|
2658
|
+
const C = this.#o.querySelector(".tbw-scroll-area"), _ = C ? C.offsetHeight - C.clientHeight : 0;
|
|
2659
|
+
this._virtualization.totalHeightEl.style.height = `${o * this._virtualization.rowHeight + _}px`;
|
|
2588
2660
|
}
|
|
2589
2661
|
const m = this.#o.querySelector(".rows-body");
|
|
2590
|
-
m?.setAttribute("aria-rowcount", String(o)), m?.setAttribute("aria-colcount", String(this.
|
|
2662
|
+
m?.setAttribute("aria-rowcount", String(o)), m?.setAttribute("aria-colcount", String(this._visibleColumns.length)), this.#e?.afterRender();
|
|
2591
2663
|
return;
|
|
2592
2664
|
}
|
|
2593
|
-
const i = this.
|
|
2665
|
+
const i = this._virtualization.container ?? this, s = (this._virtualization.viewportEl ?? i).clientHeight, r = this._virtualization.rowHeight, l = i.scrollTop;
|
|
2594
2666
|
let a = Math.floor(l / r), d = 0;
|
|
2595
2667
|
const f = 10;
|
|
2596
2668
|
for (; d < f; ) {
|
|
2597
|
-
const m = this.#e?.getExtraHeightBefore?.(a) ?? 0,
|
|
2598
|
-
if (
|
|
2599
|
-
a =
|
|
2669
|
+
const m = this.#e?.getExtraHeightBefore?.(a) ?? 0, C = Math.floor((l - m) / r);
|
|
2670
|
+
if (C >= a || C < 0) break;
|
|
2671
|
+
a = C, d++;
|
|
2600
2672
|
}
|
|
2601
2673
|
a = a - a % 2, a < 0 && (a = 0);
|
|
2602
2674
|
const h = this.#e?.adjustVirtualStart(a, l, r);
|
|
2603
2675
|
h !== void 0 && h < a && (a = h, a = a - a % 2, a < 0 && (a = 0));
|
|
2604
2676
|
const p = Math.ceil(s / r) + 3;
|
|
2605
2677
|
let c = a + p;
|
|
2606
|
-
c > o && (c = o), this.
|
|
2607
|
-
const b = this.#o.querySelector(".tbw-footer")?.offsetHeight ?? 0, w = this.#e?.getExtraHeight() ?? 0, v = this.#o.querySelector(".tbw-scroll-area"),
|
|
2608
|
-
this.
|
|
2609
|
-
const x = this.#e?.getExtraHeightBefore?.(a) ?? 0,
|
|
2610
|
-
this.
|
|
2678
|
+
c > o && (c = o), this._virtualization.start = a, this._virtualization.end = c;
|
|
2679
|
+
const b = this.#o.querySelector(".tbw-footer")?.offsetHeight ?? 0, w = this.#e?.getExtraHeight() ?? 0, v = this.#o.querySelector(".tbw-scroll-area"), y = v ? v.offsetHeight - v.clientHeight : 0;
|
|
2680
|
+
this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${o * r + r + b + w + y}px`);
|
|
2681
|
+
const x = this.#e?.getExtraHeightBefore?.(a) ?? 0, R = -(l - a * r - x);
|
|
2682
|
+
this._bodyEl.style.transform = `translateY(${R}px)`, this.#k(a, c, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch);
|
|
2611
2683
|
const g = this.#o.querySelector(".rows-body");
|
|
2612
|
-
g?.setAttribute("aria-rowcount", String(o)), g?.setAttribute("aria-colcount", String(this.
|
|
2684
|
+
g?.setAttribute("aria-rowcount", String(o)), g?.setAttribute("aria-colcount", String(this._visibleColumns.length)), e && this.#e?.afterRender();
|
|
2613
2685
|
}
|
|
2614
2686
|
// ---------------- Render ----------------
|
|
2615
2687
|
#$() {
|
|
@@ -2679,13 +2751,13 @@ class W extends HTMLElement {
|
|
|
2679
2751
|
}
|
|
2680
2752
|
}
|
|
2681
2753
|
customElements.get(W.tagName) || customElements.define(W.tagName, W);
|
|
2682
|
-
const
|
|
2754
|
+
const Je = {
|
|
2683
2755
|
/** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
|
|
2684
2756
|
CAN_MOVE_COLUMN: "canMoveColumn",
|
|
2685
2757
|
/** Get context menu items. Context: ContextMenuParams. Response: ContextMenuItem[] */
|
|
2686
2758
|
GET_CONTEXT_MENU_ITEMS: "getContextMenuItems"
|
|
2687
2759
|
};
|
|
2688
|
-
class
|
|
2760
|
+
class Qe {
|
|
2689
2761
|
/** Plugin version - override in subclass if needed */
|
|
2690
2762
|
version = "1.0.0";
|
|
2691
2763
|
/** CSS styles to inject into the grid's shadow DOM */
|
|
@@ -3049,7 +3121,7 @@ function it(t, e) {
|
|
|
3049
3121
|
}
|
|
3050
3122
|
const st = O.register.bind(O), rt = O.unregister.bind(O), lt = O.get.bind(O), at = O.run.bind(O), ct = O.list.bind(O);
|
|
3051
3123
|
export {
|
|
3052
|
-
|
|
3124
|
+
Qe as BaseGridPlugin,
|
|
3053
3125
|
H as DEFAULT_GRID_ICONS,
|
|
3054
3126
|
ot as DGEvents,
|
|
3055
3127
|
W as DataGridElement,
|
|
@@ -3059,7 +3131,7 @@ export {
|
|
|
3059
3131
|
G as GridDataAttrs,
|
|
3060
3132
|
W as GridElement,
|
|
3061
3133
|
et as GridSelectors,
|
|
3062
|
-
|
|
3134
|
+
Je as PLUGIN_QUERIES,
|
|
3063
3135
|
nt as PluginEvents,
|
|
3064
3136
|
Ye as PluginManager,
|
|
3065
3137
|
O as aggregatorRegistry,
|