@toolbox-web/grid 0.5.0 → 0.6.0
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 +1 -1
- package/all.js +27 -25
- package/index.js +926 -846
- package/index.js.map +1 -1
- package/lib/core/grid.d.ts +17 -0
- package/lib/core/grid.d.ts.map +1 -1
- package/lib/core/internal/event-delegation.d.ts +21 -0
- package/lib/core/internal/event-delegation.d.ts.map +1 -1
- package/lib/core/internal/rows.d.ts +1 -1
- package/lib/core/internal/rows.d.ts.map +1 -1
- package/lib/core/types.d.ts +35 -0
- package/lib/core/types.d.ts.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/editing/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 +6 -6
- package/public.d.ts +42 -0
- package/public.d.ts.map +1 -1
- package/umd/grid.all.umd.js +18 -18
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +12 -12
- package/umd/grid.umd.js.map +1 -1
package/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
const te = '@layer tbw-base,tbw-plugins,tbw-theme;@layer tbw-base{:root{color-scheme:light dark}tbw-grid{--tbw-base-icon-size: 1em;--tbw-base-radius: .25em;--tbw-font-size: 1em;--tbw-font-size-sm: .9285em;--tbw-font-size-xs: .7857em;--tbw-font-size-2xs: .7142em;--tbw-spacing-xs: .25em;--tbw-spacing-sm: .375em;--tbw-spacing-md: .5em;--tbw-spacing-lg: .75em;--tbw-spacing-xl: 1em;--tbw-icon-size: var(--tbw-base-icon-size);--tbw-icon-size-sm: .875em;--tbw-checkbox-size: var(--tbw-base-icon-size);--tbw-toggle-size: 1.25em;--tbw-border-radius: var(--tbw-base-radius);--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-error: light-dark(hsl(0, 65%, 51%), hsl(0, 65%, 55%));--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, #666666);--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-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: var(--tbw-spacing-xs) var(--tbw-spacing-md);--tbw-cell-padding: var(--tbw-spacing-xs) var(--tbw-spacing-md);--tbw-cell-padding-input: var(--tbw-spacing-xs) var(--tbw-spacing-sm);--tbw-row-height: 1.75em;--tbw-header-height: 1.875em;--tbw-cell-white-space: nowrap;--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: var(--tbw-spacing-sm);--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-resize-indicator-width: 2px;--tbw-resize-indicator-color: var(--tbw-color-accent);--tbw-resize-indicator-opacity: .6;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-animation-duration: .2s;--tbw-animation-easing: ease-out;--tbw-animation-enabled: 1;--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-density-scale: 1;--tbw-shell-header-height: 2.75em;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: var(--tbw-font-size);--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 17.5em;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 2.5em;--tbw-tool-panel-transition: var(--tbw-animation-duration) var(--tbw-animation-easing);--tbw-toolbar-button-size: 2em;--tbw-toolbar-button-gap: var(--tbw-spacing-xs);--tbw-panel-padding: var(--tbw-spacing-lg);--tbw-panel-gap: var(--tbw-spacing-md);--tbw-menu-item-padding: var(--tbw-spacing-sm) var(--tbw-spacing-lg);--tbw-menu-item-gap: var(--tbw-spacing-md);--tbw-menu-min-width: 10rem;--tbw-button-padding: var(--tbw-spacing-sm) var(--tbw-spacing-lg);--tbw-button-padding-sm: var(--tbw-spacing-xs) var(--tbw-spacing-md);--tbw-input-height: var(--tbw-row-height);--tbw-input-padding: 0 var(--tbw-spacing-md);--tbw-detail-padding: var(--tbw-spacing-xl);--tbw-detail-max-height: 31.25rem;--tbw-indicator-size: var(--tbw-spacing-sm);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;&,*{box-sizing:border-box}.header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}.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)}.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));&:not(:last-child){border-right:2px solid var(--tbw-color-border)}}.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);>.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:visible;min-width:0;>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}>span[part~=sort-indicator]{flex-shrink:0;opacity:.6}&:last-child{border-right:0}&.grouped.group-end:not(:last-child){border-right:2px solid var(--tbw-color-border)}&.resizable{position:relative}&.sticky-left,&.sticky-right{background:var(--tbw-color-header-bg);z-index:35}}}.tbw-grid-root{display:flex;flex-direction:column;height:100%;&.has-shell{display:flex;flex-direction:column;height:100%}}.rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}.rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}.rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}.rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip;.rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}}.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)}.faux-vscroll-spacer{width:1px}.data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style;content-visibility:auto;contain-intrinsic-size:auto var(--tbw-row-height);&:nth-child(2n){background:var(--tbw-color-row-alt)}&:hover{background:var(--tbw-color-row-hover)}>.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;>*{overflow:hidden;text-overflow:ellipsis;white-space:inherit;min-width:0}&:last-child{border-right:0}&[data-type=boolean]{text-align:center;input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size);vertical-align:middle}}&.selected:focus-visible,&:focus-visible:not(.cell-focus){outline:none}&.sticky-left,&.sticky-right{background:var(--tbw-color-panel-bg)}}}.selecting .data-grid-row>.cell{user-select:none}.sortable{cursor:pointer;user-select:none}.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);&:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:var(--tbw-resize-indicator-width, 2px);height:0;background:var(--tbw-resize-indicator-color, var(--tbw-color-accent));opacity:0;pointer-events:none;transition:opacity .12s ease,height 0s .12s;z-index:1000}&:hover{background:var(--tbw-resize-handle-color-hover);&:after{height:100vh;opacity:var(--tbw-resize-indicator-opacity, .6);transition:opacity .12s ease,height 0s}}}&[data-has-focus]{.cell-focus,.row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}}.sticky-left,.sticky-right{position:sticky;z-index:25}.sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}.sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.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}.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}.tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}.tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}.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);&:hover{background:var(--tbw-color-row-hover)}&:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}&.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}&:disabled{opacity:.5;cursor:not-allowed}}.tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}.tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}.tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}.tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden;overflow-anchor:none}.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);&[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)}&.open{width:var(--tbw-tool-panel-width)}}.tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease);&[data-handle-position=left]{left:0}&[data-handle-position=right]{right:0}&:hover,&.resizing{background:var(--tbw-color-accent)}}.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}.tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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;&:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}}.tbw-tool-panel-content{flex:1;overflow:auto}.tbw-accordion{display:flex;flex-direction:column;gap:0}.tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border);&:last-child{border-bottom:none}&.single .tbw-accordion-header{cursor:default;&:hover{background:transparent}}&.expanded{.tbw-accordion-chevron{transform:rotate(90deg)}.tbw-accordion-content{display:block}}}.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;&:hover{background:var(--tbw-color-row-hover)}}.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}.tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}.tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tbw-accordion-content{display:none}.tbw-expanding{animation:tbw-expand var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}.tbw-collapsing{animation:tbw-collapse var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}&[data-animation-mode=off]{--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}}@media(forced-colors:active){tbw-grid{--tbw-color-border: CanvasText;--tbw-color-border-strong: CanvasText;--tbw-color-border-cell: CanvasText;--tbw-color-border-header: CanvasText;--tbw-color-fg: CanvasText;--tbw-color-bg: Canvas;--tbw-color-panel-bg: Canvas;--tbw-color-header-bg: Canvas;--tbw-color-header-fg: CanvasText;--tbw-color-accent: Highlight;--tbw-color-accent-fg: HighlightText;--tbw-color-selection: Highlight;--tbw-color-row-hover: Highlight;--tbw-focus-outline: 2px solid Highlight;--tbw-range-border-color: Highlight;.cell:focus,.cell.active-cell{outline:2px solid Highlight!important;outline-offset:-2px}.data-grid-row[aria-selected=true]{background:Highlight!important;color:HighlightText!important}}}@media(prefers-reduced-motion:reduce){tbw-grid[data-animation-mode=reduced-motion]{--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}}@keyframes tbw-expand{0%{opacity:0;max-height:0;transform:translateY(-8px)}to{opacity:1;max-height:500px;transform:translateY(0)}}@keyframes tbw-collapse{0%{opacity:1;max-height:500px;transform:translateY(0)}to{opacity:0;max-height:0;transform:translateY(-8px)}}}', W = {
|
|
1
|
+
const re = '@layer tbw-base,tbw-plugins,tbw-theme;@layer tbw-base{:root{color-scheme:light dark}tbw-grid{--tbw-base-icon-size: 1em;--tbw-base-radius: .25em;--tbw-font-size: 1em;--tbw-font-size-sm: .9285em;--tbw-font-size-xs: .7857em;--tbw-font-size-2xs: .7142em;--tbw-spacing-xs: .25em;--tbw-spacing-sm: .375em;--tbw-spacing-md: .5em;--tbw-spacing-lg: .75em;--tbw-spacing-xl: 1em;--tbw-icon-size: var(--tbw-base-icon-size);--tbw-icon-size-sm: .875em;--tbw-checkbox-size: var(--tbw-base-icon-size);--tbw-toggle-size: 1.25em;--tbw-border-radius: var(--tbw-base-radius);--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-error: light-dark(hsl(0, 65%, 51%), hsl(0, 65%, 55%));--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, #666666);--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-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: var(--tbw-spacing-xs) var(--tbw-spacing-md);--tbw-cell-padding: var(--tbw-spacing-xs) var(--tbw-spacing-md);--tbw-cell-padding-input: var(--tbw-spacing-xs) var(--tbw-spacing-sm);--tbw-row-height: 1.75em;--tbw-header-height: 1.875em;--tbw-cell-white-space: nowrap;--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: var(--tbw-spacing-sm);--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-resize-indicator-width: 2px;--tbw-resize-indicator-color: var(--tbw-color-accent);--tbw-resize-indicator-opacity: .6;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-animation-duration: .2s;--tbw-animation-easing: ease-out;--tbw-animation-enabled: 1;--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-density-scale: 1;--tbw-shell-header-height: 2.75em;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: var(--tbw-font-size);--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 17.5em;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 2.5em;--tbw-tool-panel-transition: var(--tbw-animation-duration) var(--tbw-animation-easing);--tbw-toolbar-button-size: 2em;--tbw-toolbar-button-gap: var(--tbw-spacing-xs);--tbw-panel-padding: var(--tbw-spacing-lg);--tbw-panel-gap: var(--tbw-spacing-md);--tbw-menu-item-padding: var(--tbw-spacing-sm) var(--tbw-spacing-lg);--tbw-menu-item-gap: var(--tbw-spacing-md);--tbw-menu-min-width: 10rem;--tbw-button-padding: var(--tbw-spacing-sm) var(--tbw-spacing-lg);--tbw-button-padding-sm: var(--tbw-spacing-xs) var(--tbw-spacing-md);--tbw-input-height: var(--tbw-row-height);--tbw-input-padding: 0 var(--tbw-spacing-md);--tbw-detail-padding: var(--tbw-spacing-xl);--tbw-detail-max-height: 31.25rem;--tbw-indicator-size: var(--tbw-spacing-sm);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;&,*{box-sizing:border-box}.header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}.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)}.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));&:not(:last-child){border-right:2px solid var(--tbw-color-border)}}.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);>.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:visible;min-width:0;>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}>span[part~=sort-indicator]{flex-shrink:0;opacity:.6}&:last-child{border-right:0}&.grouped.group-end:not(:last-child){border-right:2px solid var(--tbw-color-border)}&.resizable{position:relative}&.sticky-left,&.sticky-right{background:var(--tbw-color-header-bg);z-index:35}}}.tbw-grid-root{display:flex;flex-direction:column;height:100%;&.has-shell{display:flex;flex-direction:column;height:100%}}.rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}.rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}.rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}.rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip;.rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}}.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)}.faux-vscroll-spacer{width:1px}.data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style;content-visibility:auto;contain-intrinsic-size:auto var(--tbw-row-height);&:nth-child(2n){background:var(--tbw-color-row-alt)}&:hover{background:var(--tbw-color-row-hover)}>.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;>*{overflow:hidden;text-overflow:ellipsis;white-space:inherit;min-width:0}&:last-child{border-right:0}&[data-type=boolean]{text-align:center;input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size);vertical-align:middle}}&.selected:focus-visible,&:focus-visible:not(.cell-focus){outline:none}&.sticky-left,&.sticky-right{background:var(--tbw-color-panel-bg)}}}.selecting .data-grid-row>.cell{user-select:none}.sortable{cursor:pointer;user-select:none}.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);&:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:var(--tbw-resize-indicator-width, 2px);height:0;background:var(--tbw-resize-indicator-color, var(--tbw-color-accent));opacity:0;pointer-events:none;transition:opacity .12s ease,height 0s .12s;z-index:1000}&:hover{background:var(--tbw-resize-handle-color-hover);&:after{height:100vh;opacity:var(--tbw-resize-indicator-opacity, .6);transition:opacity .12s ease,height 0s}}}&[data-has-focus]{.cell-focus,.row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}}.sticky-left,.sticky-right{position:sticky;z-index:25}.sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}.sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.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}.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}.tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}.tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}.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);&:hover{background:var(--tbw-color-row-hover)}&:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}&.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}&:disabled{opacity:.5;cursor:not-allowed}}.tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}.tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}.tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}.tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden;overflow-anchor:none}.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);&[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)}&.open{width:var(--tbw-tool-panel-width)}}.tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease);&[data-handle-position=left]{left:0}&[data-handle-position=right]{right:0}&:hover,&.resizing{background:var(--tbw-color-accent)}}.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}.tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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;&:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}}.tbw-tool-panel-content{flex:1;overflow:auto}.tbw-accordion{display:flex;flex-direction:column;gap:0}.tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border);&:last-child{border-bottom:none}&.single .tbw-accordion-header{cursor:default;&:hover{background:transparent}}&.expanded{.tbw-accordion-chevron{transform:rotate(90deg)}.tbw-accordion-content{display:block}}}.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;&:hover{background:var(--tbw-color-row-hover)}}.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}.tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}.tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tbw-accordion-content{display:none}.tbw-expanding{animation:tbw-expand var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}.tbw-collapsing{animation:tbw-collapse var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}&[data-animation-mode=off]{--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}}@media(forced-colors:active){tbw-grid{--tbw-color-border: CanvasText;--tbw-color-border-strong: CanvasText;--tbw-color-border-cell: CanvasText;--tbw-color-border-header: CanvasText;--tbw-color-fg: CanvasText;--tbw-color-bg: Canvas;--tbw-color-panel-bg: Canvas;--tbw-color-header-bg: Canvas;--tbw-color-header-fg: CanvasText;--tbw-color-accent: Highlight;--tbw-color-accent-fg: HighlightText;--tbw-color-selection: Highlight;--tbw-color-row-hover: Highlight;--tbw-focus-outline: 2px solid Highlight;--tbw-range-border-color: Highlight;.cell:focus,.cell.active-cell{outline:2px solid Highlight!important;outline-offset:-2px}.data-grid-row[aria-selected=true]{background:Highlight!important;color:HighlightText!important}}}@media(prefers-reduced-motion:reduce){tbw-grid[data-animation-mode=reduced-motion]{--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}}@keyframes tbw-expand{0%{opacity:0;max-height:0;transform:translateY(-8px)}to{opacity:1;max-height:500px;transform:translateY(0)}}@keyframes tbw-collapse{0%{opacity:1;max-height:500px;transform:translateY(0)}to{opacity:0;max-height:0;transform:translateY(-8px)}}}', F = {
|
|
2
2
|
STRETCH: "stretch",
|
|
3
3
|
FIXED: "fixed"
|
|
4
|
-
},
|
|
4
|
+
}, Ne = {
|
|
5
5
|
mode: "reduced-motion",
|
|
6
6
|
duration: 200,
|
|
7
7
|
easing: "ease-out"
|
|
8
|
-
},
|
|
8
|
+
}, M = {
|
|
9
9
|
expand: "▶",
|
|
10
10
|
collapse: "▼",
|
|
11
11
|
sortAsc: "▲",
|
|
@@ -15,44 +15,44 @@ const te = '@layer tbw-base,tbw-plugins,tbw-theme;@layer tbw-base{:root{color-sc
|
|
|
15
15
|
dragHandle: "⋮⋮",
|
|
16
16
|
toolPanel: "☰"
|
|
17
17
|
};
|
|
18
|
-
function
|
|
18
|
+
function ke(t) {
|
|
19
19
|
return Array.from(t.querySelectorAll("tbw-grid-column")).map((o) => {
|
|
20
20
|
const i = o.getAttribute("field") || "";
|
|
21
21
|
if (!i) return null;
|
|
22
|
-
const n = o.getAttribute("type") || void 0, s = n && (/* @__PURE__ */ new Set(["number", "string", "date", "boolean", "select", "typeahead"])).has(n) ? n : void 0, l = o.getAttribute("header") || void 0, a = o.hasAttribute("sortable"), c = o.hasAttribute("editable"),
|
|
22
|
+
const n = o.getAttribute("type") || void 0, s = n && (/* @__PURE__ */ new Set(["number", "string", "date", "boolean", "select", "typeahead"])).has(n) ? n : void 0, l = o.getAttribute("header") || void 0, a = o.hasAttribute("sortable"), c = o.hasAttribute("editable"), u = { field: i, type: s, header: l, sortable: a, editable: c }, d = o.getAttribute("width");
|
|
23
23
|
if (d) {
|
|
24
|
-
const
|
|
25
|
-
!isNaN(
|
|
24
|
+
const b = parseFloat(d);
|
|
25
|
+
!isNaN(b) && /^\d+(\.\d+)?$/.test(d.trim()) ? u.width = b : u.width = d;
|
|
26
26
|
}
|
|
27
27
|
const f = o.getAttribute("minWidth") || o.getAttribute("min-width");
|
|
28
28
|
if (f) {
|
|
29
|
-
const
|
|
30
|
-
isNaN(
|
|
29
|
+
const b = parseFloat(f);
|
|
30
|
+
isNaN(b) || (u.minWidth = b);
|
|
31
31
|
}
|
|
32
|
-
o.hasAttribute("resizable") && (
|
|
33
|
-
const p = o.getAttribute("editor"),
|
|
34
|
-
p && (
|
|
32
|
+
o.hasAttribute("resizable") && (u.resizable = !0), o.hasAttribute("sizable") && (u.resizable = !0);
|
|
33
|
+
const p = o.getAttribute("editor"), h = o.getAttribute("renderer");
|
|
34
|
+
p && (u.__editorName = p), h && (u.__rendererName = h);
|
|
35
35
|
const g = o.getAttribute("options");
|
|
36
|
-
g && (
|
|
37
|
-
const [
|
|
38
|
-
return { value:
|
|
36
|
+
g && (u.options = g.split(",").map((b) => {
|
|
37
|
+
const [E, B] = b.includes(":") ? b.split(":") : [b.trim(), b.trim()];
|
|
38
|
+
return { value: E.trim(), label: B?.trim() || E.trim() };
|
|
39
39
|
}));
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
const
|
|
43
|
-
if (
|
|
44
|
-
const
|
|
45
|
-
|
|
40
|
+
const w = o.querySelector("tbw-grid-column-view"), _ = o.querySelector("tbw-grid-column-editor"), T = o.querySelector("tbw-grid-column-header");
|
|
41
|
+
w && (u.__viewTemplate = w), _ && (u.__editorTemplate = _), T && (u.__headerTemplate = T);
|
|
42
|
+
const m = globalThis.DataGridElement?.getAdapters?.() ?? [], y = w ?? o, S = m.find((b) => b.canHandle(y));
|
|
43
|
+
if (S) {
|
|
44
|
+
const b = S.createRenderer(y);
|
|
45
|
+
b && (u.viewRenderer = b);
|
|
46
46
|
}
|
|
47
|
-
const
|
|
48
|
-
if (
|
|
49
|
-
const
|
|
50
|
-
|
|
47
|
+
const C = _ ?? o, O = m.find((b) => b.canHandle(C));
|
|
48
|
+
if (O) {
|
|
49
|
+
const b = O.createEditor(C);
|
|
50
|
+
b && (u.editor = b);
|
|
51
51
|
}
|
|
52
|
-
return
|
|
52
|
+
return u;
|
|
53
53
|
}).filter((o) => !!o);
|
|
54
54
|
}
|
|
55
|
-
function
|
|
55
|
+
function se(t, e) {
|
|
56
56
|
if ((!t || !t.length) && (!e || !e.length)) return [];
|
|
57
57
|
if (!t || !t.length) return e || [];
|
|
58
58
|
if (!e || !e.length) return t;
|
|
@@ -76,7 +76,7 @@ function oe(t, e) {
|
|
|
76
76
|
});
|
|
77
77
|
return Object.keys(o).forEach((n) => i.push(o[n])), i;
|
|
78
78
|
}
|
|
79
|
-
function
|
|
79
|
+
function le(t, e) {
|
|
80
80
|
try {
|
|
81
81
|
t.part?.add?.(e);
|
|
82
82
|
} catch {
|
|
@@ -84,9 +84,9 @@ function ie(t, e) {
|
|
|
84
84
|
const o = t.getAttribute("part");
|
|
85
85
|
o ? o.split(/\s+/).includes(e) || t.setAttribute("part", o + " " + e) : t.setAttribute("part", e);
|
|
86
86
|
}
|
|
87
|
-
function
|
|
88
|
-
const e = t.effectiveConfig?.fitMode || t.fitMode ||
|
|
89
|
-
if (e !==
|
|
87
|
+
function ae(t) {
|
|
88
|
+
const e = t.effectiveConfig?.fitMode || t.fitMode || F.STRETCH;
|
|
89
|
+
if (e !== F.STRETCH && e !== F.FIXED || t.__didInitialAutoSize || !t.isConnected) return;
|
|
90
90
|
const o = Array.from(t._headerRowEl?.children || []);
|
|
91
91
|
if (!o.length) return;
|
|
92
92
|
let i = !1;
|
|
@@ -97,37 +97,37 @@ function ne(t) {
|
|
|
97
97
|
for (const a of t._rowPool) {
|
|
98
98
|
const c = a.children[r];
|
|
99
99
|
if (c) {
|
|
100
|
-
const
|
|
101
|
-
|
|
100
|
+
const u = c.scrollWidth;
|
|
101
|
+
u > l && (l = u);
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
104
|
l > 0 && (n.width = l + 2, n.__autoSized = !0, i = !0);
|
|
105
|
-
}), i &&
|
|
105
|
+
}), i && $(t), t.__didInitialAutoSize = !0;
|
|
106
106
|
}
|
|
107
|
-
function
|
|
108
|
-
(t.effectiveConfig?.fitMode || t.fitMode ||
|
|
107
|
+
function $(t) {
|
|
108
|
+
(t.effectiveConfig?.fitMode || t.fitMode || F.STRETCH) === F.STRETCH ? t._gridTemplate = t._visibleColumns.map((o) => {
|
|
109
109
|
if (o.width) return `${o.width}px`;
|
|
110
110
|
const i = o.minWidth;
|
|
111
111
|
return i != null ? `minmax(${i}px, 1fr)` : "1fr";
|
|
112
112
|
}).join(" ").trim() : t._gridTemplate = t._visibleColumns.map((o) => o.width ? `${o.width}px` : "max-content").join(" "), t.style.setProperty("--tbw-column-template", t._gridTemplate);
|
|
113
113
|
}
|
|
114
|
-
function
|
|
114
|
+
function Ie(t) {
|
|
115
115
|
return t == null ? "string" : typeof t == "number" ? "number" : typeof t == "boolean" ? "boolean" : t instanceof Date || typeof t == "string" && /\d{4}-\d{2}-\d{2}/.test(t) && !isNaN(Date.parse(t)) ? "date" : "string";
|
|
116
116
|
}
|
|
117
|
-
function
|
|
117
|
+
function qe(t, e) {
|
|
118
118
|
const o = t[0] || {}, i = Object.keys(o).map((r) => {
|
|
119
|
-
const s = o[r], l =
|
|
119
|
+
const s = o[r], l = Ie(s);
|
|
120
120
|
return { field: r, header: r.charAt(0).toUpperCase() + r.slice(1), type: l };
|
|
121
121
|
}), n = {};
|
|
122
122
|
return i.forEach((r) => {
|
|
123
123
|
n[r.field] = r.type || "string";
|
|
124
124
|
}), { columns: i, typeMap: n };
|
|
125
125
|
}
|
|
126
|
-
const
|
|
127
|
-
function
|
|
126
|
+
const Be = /{{\s*([^}]+)\s*}}/g, L = "__DG_EMPTY__", We = /^[\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/;
|
|
127
|
+
function Ue(t) {
|
|
128
128
|
return !t || typeof t != "string" ? "" : t.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
129
129
|
}
|
|
130
|
-
const
|
|
130
|
+
const Fe = /* @__PURE__ */ new Set([
|
|
131
131
|
"script",
|
|
132
132
|
"iframe",
|
|
133
133
|
"object",
|
|
@@ -152,23 +152,23 @@ const We = /* @__PURE__ */ new Set([
|
|
|
152
152
|
"plaintext",
|
|
153
153
|
"xmp",
|
|
154
154
|
"listing"
|
|
155
|
-
]),
|
|
156
|
-
function
|
|
155
|
+
]), ce = /^on\w+$/i, Ve = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), Ge = /^\s*(javascript|vbscript|data|blob):/i;
|
|
156
|
+
function j(t) {
|
|
157
157
|
if (!t || typeof t != "string") return "";
|
|
158
158
|
if (t.indexOf("<") === -1) return t;
|
|
159
159
|
const e = document.createElement("template");
|
|
160
|
-
return e.innerHTML = t,
|
|
160
|
+
return e.innerHTML = t, Xe(e.content), e.innerHTML;
|
|
161
161
|
}
|
|
162
|
-
function
|
|
162
|
+
function Xe(t) {
|
|
163
163
|
const e = [], o = t.querySelectorAll("*");
|
|
164
164
|
for (const i of o) {
|
|
165
165
|
const n = i.tagName.toLowerCase();
|
|
166
|
-
if (
|
|
166
|
+
if (Fe.has(n)) {
|
|
167
167
|
e.push(i);
|
|
168
168
|
continue;
|
|
169
169
|
}
|
|
170
170
|
if ((n === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
|
|
171
|
-
(l) =>
|
|
171
|
+
(l) => ce.test(l.name) || l.name === "href" || l.name === "xlink:href"
|
|
172
172
|
)) {
|
|
173
173
|
e.push(i);
|
|
174
174
|
continue;
|
|
@@ -176,11 +176,11 @@ function Fe(t) {
|
|
|
176
176
|
const r = [];
|
|
177
177
|
for (const s of i.attributes) {
|
|
178
178
|
const l = s.name.toLowerCase();
|
|
179
|
-
if (
|
|
179
|
+
if (ce.test(l)) {
|
|
180
180
|
r.push(s.name);
|
|
181
181
|
continue;
|
|
182
182
|
}
|
|
183
|
-
if (
|
|
183
|
+
if (Ve.has(l) && Ge.test(s.value)) {
|
|
184
184
|
r.push(s.name);
|
|
185
185
|
continue;
|
|
186
186
|
}
|
|
@@ -193,35 +193,35 @@ function Fe(t) {
|
|
|
193
193
|
}
|
|
194
194
|
e.forEach((i) => i.remove());
|
|
195
195
|
}
|
|
196
|
-
function
|
|
196
|
+
function _e(t, e) {
|
|
197
197
|
if (!t || t.indexOf("{{") === -1) return t;
|
|
198
|
-
const o = [], i = t.replace(
|
|
199
|
-
const c =
|
|
198
|
+
const o = [], i = t.replace(Be, (l, a) => {
|
|
199
|
+
const c = Ye(a, e);
|
|
200
200
|
return o.push({ expr: a.trim(), result: c }), c;
|
|
201
|
-
}), n =
|
|
201
|
+
}), n = je(i), r = o.length && o.every((l) => l.result === "" || l.result === L);
|
|
202
202
|
return /Reflect\.|\bProxy\b|ownKeys\(/.test(t) || r ? "" : n;
|
|
203
203
|
}
|
|
204
|
-
function
|
|
205
|
-
if (t = (t || "").trim(), !t || /\b(Reflect|Proxy|ownKeys)\b/.test(t)) return
|
|
206
|
-
if (t === "value") return e.value == null ?
|
|
204
|
+
function Ye(t, e) {
|
|
205
|
+
if (t = (t || "").trim(), !t || /\b(Reflect|Proxy|ownKeys)\b/.test(t)) return L;
|
|
206
|
+
if (t === "value") return e.value == null ? L : String(e.value);
|
|
207
207
|
if (t.startsWith("row.") && !/[()?]/.test(t) && !t.includes(":")) {
|
|
208
208
|
const i = t.slice(4), n = e.row ? e.row[i] : void 0;
|
|
209
|
-
return n == null ?
|
|
209
|
+
return n == null ? L : String(n);
|
|
210
210
|
}
|
|
211
|
-
if (t.length > 80 || !
|
|
211
|
+
if (t.length > 80 || !We.test(t) || $e.test(t)) return L;
|
|
212
212
|
const o = t.match(/\./g);
|
|
213
|
-
if (o && o.length > 1) return
|
|
213
|
+
if (o && o.length > 1) return L;
|
|
214
214
|
try {
|
|
215
215
|
const n = new Function("value", "row", `return (${t});`)(e.value, e.row), r = n == null ? "" : String(n);
|
|
216
|
-
return /Reflect|Proxy|ownKeys/.test(r) ?
|
|
216
|
+
return /Reflect|Proxy|ownKeys/.test(r) ? L : r || L;
|
|
217
217
|
} catch {
|
|
218
|
-
return
|
|
218
|
+
return L;
|
|
219
219
|
}
|
|
220
220
|
}
|
|
221
|
-
function
|
|
222
|
-
return t && t.replace(new RegExp(
|
|
221
|
+
function je(t) {
|
|
222
|
+
return t && t.replace(new RegExp(L, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
|
|
223
223
|
}
|
|
224
|
-
function
|
|
224
|
+
function Ke(t) {
|
|
225
225
|
if (/Reflect|Proxy|ownKeys/.test(t.textContent || "")) {
|
|
226
226
|
if (Array.from(t.childNodes).forEach((e) => {
|
|
227
227
|
e.nodeType === Node.TEXT_NODE && /Reflect|Proxy|ownKeys/.test(e.textContent || "") && (e.textContent = "");
|
|
@@ -233,16 +233,16 @@ function Xe(t) {
|
|
|
233
233
|
(t.textContent || "").trim().length === 0 && (t.textContent = "");
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
|
-
function
|
|
237
|
-
const e = /Reflect\.|\bProxy\b|ownKeys\(/.test(t), o = ((i) => e ? "" :
|
|
236
|
+
function de(t) {
|
|
237
|
+
const e = /Reflect\.|\bProxy\b|ownKeys\(/.test(t), o = ((i) => e ? "" : _e(t, i));
|
|
238
238
|
return o.__blocked = e, o;
|
|
239
239
|
}
|
|
240
|
-
const
|
|
241
|
-
class
|
|
240
|
+
const Ze = 100;
|
|
241
|
+
class Je {
|
|
242
242
|
// ============================================================================
|
|
243
243
|
// Sources (raw input from user)
|
|
244
244
|
// ============================================================================
|
|
245
|
-
#
|
|
245
|
+
#i;
|
|
246
246
|
#c;
|
|
247
247
|
#f;
|
|
248
248
|
#d;
|
|
@@ -269,12 +269,12 @@ class je {
|
|
|
269
269
|
// ============================================================================
|
|
270
270
|
#p = !0;
|
|
271
271
|
#l = [];
|
|
272
|
-
#
|
|
272
|
+
#w;
|
|
273
273
|
#m;
|
|
274
274
|
#b;
|
|
275
275
|
#s;
|
|
276
276
|
// Shell state (Light DOM title)
|
|
277
|
-
#
|
|
277
|
+
#y;
|
|
278
278
|
constructor(e) {
|
|
279
279
|
this.#s = e;
|
|
280
280
|
}
|
|
@@ -315,11 +315,11 @@ class je {
|
|
|
315
315
|
}
|
|
316
316
|
/** Get light DOM title */
|
|
317
317
|
get lightDomTitle() {
|
|
318
|
-
return this.#
|
|
318
|
+
return this.#y;
|
|
319
319
|
}
|
|
320
320
|
/** Set light DOM title */
|
|
321
321
|
set lightDomTitle(e) {
|
|
322
|
-
this.#
|
|
322
|
+
this.#y = e;
|
|
323
323
|
}
|
|
324
324
|
/** Get initial column state */
|
|
325
325
|
get initialColumnState() {
|
|
@@ -351,11 +351,11 @@ class je {
|
|
|
351
351
|
// ============================================================================
|
|
352
352
|
/** Set gridConfig source */
|
|
353
353
|
setGridConfig(e) {
|
|
354
|
-
this.#
|
|
354
|
+
this.#i = e, this.#p = !0, this.#r = void 0;
|
|
355
355
|
}
|
|
356
356
|
/** Get the raw gridConfig source */
|
|
357
357
|
getGridConfig() {
|
|
358
|
-
return this.#
|
|
358
|
+
return this.#i;
|
|
359
359
|
}
|
|
360
360
|
/** Set columns source */
|
|
361
361
|
setColumns(e) {
|
|
@@ -403,14 +403,14 @@ class je {
|
|
|
403
403
|
const e = (this.#u.columns?.length ?? 0) > 0;
|
|
404
404
|
if (!this.#p && e)
|
|
405
405
|
return;
|
|
406
|
-
const o = this.#
|
|
407
|
-
this.#p = !1, this.#h = o, Object.freeze(this.#h), this.#h.columns && Object.freeze(this.#h.columns), this.#u = this.#
|
|
406
|
+
const o = this.#_();
|
|
407
|
+
this.#p = !1, this.#h = o, Object.freeze(this.#h), this.#h.columns && Object.freeze(this.#h.columns), this.#u = this.#g(this.#h), this.#v();
|
|
408
408
|
}
|
|
409
409
|
/**
|
|
410
410
|
* Deep clone a config object, handling functions (renderers, editors).
|
|
411
411
|
* Uses structuredClone where possible, with fallback for function properties.
|
|
412
412
|
*/
|
|
413
|
-
#
|
|
413
|
+
#g(e) {
|
|
414
414
|
const o = { ...e };
|
|
415
415
|
return e.columns && (o.columns = e.columns.map((i) => ({ ...i }))), e.shell && (o.shell = {
|
|
416
416
|
...e.shell,
|
|
@@ -424,7 +424,7 @@ class je {
|
|
|
424
424
|
* Apply operations that depend on the merged effective config.
|
|
425
425
|
* These were previously in grid.ts #mergeEffectiveConfig().
|
|
426
426
|
*/
|
|
427
|
-
#
|
|
427
|
+
#v() {
|
|
428
428
|
const e = this.#u;
|
|
429
429
|
e.rowHeight && e.rowHeight > 0 && this.#s.setRowHeight(e.rowHeight), e.fitMode === "fixed" && this.columns.forEach((i) => {
|
|
430
430
|
i.width == null && (i.width = 80);
|
|
@@ -445,24 +445,24 @@ class je {
|
|
|
445
445
|
*
|
|
446
446
|
* Runtime state (hidden, width) is NOT preserved here - that's in effectiveConfig.
|
|
447
447
|
*/
|
|
448
|
-
#
|
|
449
|
-
const e = this.#
|
|
448
|
+
#_() {
|
|
449
|
+
const e = this.#i ? { ...this.#i } : {}, o = Array.isArray(e.columns) ? [...e.columns] : [], i = (this.#r ?? []).map((s) => ({
|
|
450
450
|
...s
|
|
451
451
|
}));
|
|
452
|
-
let n =
|
|
452
|
+
let n = se(
|
|
453
453
|
o,
|
|
454
454
|
i
|
|
455
455
|
);
|
|
456
|
-
this.#c && this.#c.length && (n =
|
|
456
|
+
this.#c && this.#c.length && (n = se(
|
|
457
457
|
this.#c,
|
|
458
458
|
i
|
|
459
459
|
));
|
|
460
460
|
const r = this.#s.getRows();
|
|
461
|
-
return n.length === 0 && r.length && (n =
|
|
461
|
+
return n.length === 0 && r.length && (n = qe(r).columns), n.length && (n.forEach((s) => {
|
|
462
462
|
s.sortable === void 0 && (s.sortable = !0), s.resizable === void 0 && (s.resizable = !0), s.__originalWidth === void 0 && typeof s.width == "number" && (s.__originalWidth = s.width);
|
|
463
463
|
}), n.forEach((s) => {
|
|
464
|
-
s.__viewTemplate && !s.__compiledView && (s.__compiledView =
|
|
465
|
-
}), e.columns = n), this.#f && (e.fitMode = this.#f), e.fitMode || (e.fitMode = "stretch"), this.#d && (e.editOn = this.#d), this.#
|
|
464
|
+
s.__viewTemplate && !s.__compiledView && (s.__compiledView = de(s.__viewTemplate.innerHTML)), s.__editorTemplate && !s.__compiledEditor && (s.__compiledEditor = de(s.__editorTemplate.innerHTML));
|
|
465
|
+
}), e.columns = n), this.#f && (e.fitMode = this.#f), e.fitMode || (e.fitMode = "stretch"), this.#d && (e.editOn = this.#d), this.#C(e), e.columnState && !this.#b && (this.#b = e.columnState), e;
|
|
466
466
|
}
|
|
467
467
|
/**
|
|
468
468
|
* Merge shell state into base config's shell property.
|
|
@@ -471,10 +471,10 @@ class je {
|
|
|
471
471
|
* IMPORTANT: This method must NOT mutate the original gridConfig.
|
|
472
472
|
* We shallow-clone the shell hierarchy to avoid side effects.
|
|
473
473
|
*/
|
|
474
|
-
#
|
|
474
|
+
#C(e) {
|
|
475
475
|
e.shell = e.shell ? { ...e.shell } : {}, e.shell.header = e.shell.header ? { ...e.shell.header } : {};
|
|
476
476
|
const o = this.#s.getShellLightDomTitle();
|
|
477
|
-
o && (this.#
|
|
477
|
+
o && (this.#y = o), this.#y && !e.shell.header.title && (e.shell.header.title = this.#y);
|
|
478
478
|
const i = this.#s.getShellLightDomHeaderContent();
|
|
479
479
|
i?.length > 0 && (e.shell.header.lightDomContent = i), this.#s.getShellHasToolButtonsContainer() && (e.shell.header.hasToolButtonsContainer = !0);
|
|
480
480
|
const n = this.#s.getShellToolPanels();
|
|
@@ -487,10 +487,10 @@ class je {
|
|
|
487
487
|
const d = Array.from(r.values());
|
|
488
488
|
d.sort((f, p) => (f.order ?? 100) - (p.order ?? 100)), e.shell.headerContents = d;
|
|
489
489
|
}
|
|
490
|
-
const s = this.#s.getShellToolbarButtons(), l = Array.from(s.values()), a = this.#
|
|
490
|
+
const s = this.#s.getShellToolbarButtons(), l = Array.from(s.values()), a = this.#i?.shell?.header?.toolbarButtons ?? [], c = new Set(a.map((d) => d.id)), u = [...a];
|
|
491
491
|
for (const d of l)
|
|
492
|
-
c.has(d.id) ||
|
|
493
|
-
|
|
492
|
+
c.has(d.id) || u.push(d);
|
|
493
|
+
u.sort((d, f) => (d.order ?? 100) - (f.order ?? 100)), e.shell.header.toolbarButtons = u;
|
|
494
494
|
}
|
|
495
495
|
// ============================================================================
|
|
496
496
|
// State Persistence (Replaces column-state.ts)
|
|
@@ -500,7 +500,7 @@ class je {
|
|
|
500
500
|
* Returns only the changes from the original configuration.
|
|
501
501
|
*/
|
|
502
502
|
collectState(e) {
|
|
503
|
-
const o = this.columns, i = this.#
|
|
503
|
+
const o = this.columns, i = this.#z();
|
|
504
504
|
return {
|
|
505
505
|
columns: o.map((n, r) => {
|
|
506
506
|
const s = {
|
|
@@ -513,8 +513,8 @@ class je {
|
|
|
513
513
|
a && (s.sort = a);
|
|
514
514
|
for (const c of e)
|
|
515
515
|
if (c.getColumnState) {
|
|
516
|
-
const
|
|
517
|
-
|
|
516
|
+
const u = c.getColumnState(n.field);
|
|
517
|
+
u && Object.assign(s, u);
|
|
518
518
|
}
|
|
519
519
|
return s;
|
|
520
520
|
})
|
|
@@ -532,8 +532,8 @@ class je {
|
|
|
532
532
|
return a.width !== void 0 && (c.width = a.width, c.__renderedWidth = a.width), a.visible !== void 0 && (c.hidden = !a.visible), c;
|
|
533
533
|
});
|
|
534
534
|
r.sort((l, a) => {
|
|
535
|
-
const c = n.get(l.field)?.order ?? 1 / 0,
|
|
536
|
-
return c -
|
|
535
|
+
const c = n.get(l.field)?.order ?? 1 / 0, u = n.get(a.field)?.order ?? 1 / 0;
|
|
536
|
+
return c - u;
|
|
537
537
|
}), this.columns = r;
|
|
538
538
|
const s = e.columns.filter((l) => l.sort !== void 0).sort((l, a) => (l.sort?.priority ?? 0) - (a.sort?.priority ?? 0));
|
|
539
539
|
if (s.length > 0) {
|
|
@@ -557,7 +557,7 @@ class je {
|
|
|
557
557
|
* the state to what was compiled from sources.
|
|
558
558
|
*/
|
|
559
559
|
resetState(e) {
|
|
560
|
-
this.#b = void 0, this.#s.setSortState(null), this.#u = this.#
|
|
560
|
+
this.#b = void 0, this.#s.setSortState(null), this.#u = this.#g(this.#h), this.#v();
|
|
561
561
|
for (const o of e)
|
|
562
562
|
if (o.applyColumnState)
|
|
563
563
|
for (const i of this.columns)
|
|
@@ -571,7 +571,7 @@ class je {
|
|
|
571
571
|
/**
|
|
572
572
|
* Get sort state as a map.
|
|
573
573
|
*/
|
|
574
|
-
#
|
|
574
|
+
#z() {
|
|
575
575
|
const e = /* @__PURE__ */ new Map(), o = this.#s.getSortState();
|
|
576
576
|
return o && e.set(o.field, {
|
|
577
577
|
direction: o.direction === 1 ? "asc" : "desc",
|
|
@@ -586,7 +586,7 @@ class je {
|
|
|
586
586
|
this.#m = void 0;
|
|
587
587
|
const o = this.collectState(e);
|
|
588
588
|
this.#s.emit("column-state-change", o);
|
|
589
|
-
},
|
|
589
|
+
}, Ze);
|
|
590
590
|
}
|
|
591
591
|
// ============================================================================
|
|
592
592
|
// Column Visibility API
|
|
@@ -665,7 +665,7 @@ class je {
|
|
|
665
665
|
* Parse light DOM columns from host element.
|
|
666
666
|
*/
|
|
667
667
|
parseLightDomColumns(e) {
|
|
668
|
-
this.#r || (this.#n = Array.from(e.querySelectorAll("tbw-grid-column")), this.#r = this.#n.length ?
|
|
668
|
+
this.#r || (this.#n = Array.from(e.querySelectorAll("tbw-grid-column")), this.#r = this.#n.length ? ke(e) : []);
|
|
669
669
|
}
|
|
670
670
|
/**
|
|
671
671
|
* Clear the light DOM columns cache.
|
|
@@ -680,7 +680,7 @@ class je {
|
|
|
680
680
|
* This is a generic mechanism - plugins (or future ShellPlugin) register
|
|
681
681
|
* what elements they care about and handle parsing themselves.
|
|
682
682
|
*/
|
|
683
|
-
#
|
|
683
|
+
#o = /* @__PURE__ */ new Map();
|
|
684
684
|
/**
|
|
685
685
|
* Register a handler for Light DOM element changes.
|
|
686
686
|
* When elements matching the tag name are added/removed/changed,
|
|
@@ -690,13 +690,13 @@ class je {
|
|
|
690
690
|
* @param callback - Called when matching elements change
|
|
691
691
|
*/
|
|
692
692
|
registerLightDomHandler(e, o) {
|
|
693
|
-
this.#
|
|
693
|
+
this.#o.set(e.toLowerCase(), o);
|
|
694
694
|
}
|
|
695
695
|
/**
|
|
696
696
|
* Unregister a Light DOM element handler.
|
|
697
697
|
*/
|
|
698
698
|
unregisterLightDomHandler(e) {
|
|
699
|
-
this.#
|
|
699
|
+
this.#o.delete(e.toLowerCase());
|
|
700
700
|
}
|
|
701
701
|
/**
|
|
702
702
|
* Set up MutationObserver to watch for Light DOM changes.
|
|
@@ -713,29 +713,29 @@ class je {
|
|
|
713
713
|
* @param host - The host element to observe (the grid element)
|
|
714
714
|
*/
|
|
715
715
|
observeLightDOM(e) {
|
|
716
|
-
this.#
|
|
716
|
+
this.#w && this.#w.disconnect();
|
|
717
717
|
const o = /* @__PURE__ */ new Set();
|
|
718
718
|
let i = null;
|
|
719
719
|
const n = () => {
|
|
720
720
|
i = null;
|
|
721
721
|
for (const r of o)
|
|
722
|
-
this.#
|
|
722
|
+
this.#o.get(r)?.();
|
|
723
723
|
o.clear();
|
|
724
724
|
};
|
|
725
|
-
this.#
|
|
725
|
+
this.#w = new MutationObserver((r) => {
|
|
726
726
|
for (const s of r) {
|
|
727
727
|
for (const l of s.addedNodes) {
|
|
728
728
|
if (l.nodeType !== Node.ELEMENT_NODE) continue;
|
|
729
729
|
const c = l.tagName.toLowerCase();
|
|
730
|
-
this.#
|
|
730
|
+
this.#o.has(c) && o.add(c);
|
|
731
731
|
}
|
|
732
732
|
if (s.type === "attributes" && s.target.nodeType === Node.ELEMENT_NODE) {
|
|
733
733
|
const a = s.target.tagName.toLowerCase();
|
|
734
|
-
this.#
|
|
734
|
+
this.#o.has(a) && o.add(a);
|
|
735
735
|
}
|
|
736
736
|
}
|
|
737
737
|
o.size > 0 && !i && (i = setTimeout(n, 0));
|
|
738
|
-
}), this.#
|
|
738
|
+
}), this.#w.observe(e, {
|
|
739
739
|
childList: !0,
|
|
740
740
|
subtree: !0,
|
|
741
741
|
attributes: !0,
|
|
@@ -765,13 +765,13 @@ class je {
|
|
|
765
765
|
* Dispose of the ConfigManager and clean up resources.
|
|
766
766
|
*/
|
|
767
767
|
dispose() {
|
|
768
|
-
this.#
|
|
768
|
+
this.#w?.disconnect(), this.#l = [], this.#m && clearTimeout(this.#m);
|
|
769
769
|
}
|
|
770
770
|
}
|
|
771
|
-
function
|
|
771
|
+
function Ee(t) {
|
|
772
772
|
return `<span role="checkbox" aria-checked="${t}" aria-label="${t}">${t ? "🗹" : "☐"}</span>`;
|
|
773
773
|
}
|
|
774
|
-
function
|
|
774
|
+
function Se(t) {
|
|
775
775
|
if (t == null || t === "") return "";
|
|
776
776
|
if (t instanceof Date)
|
|
777
777
|
return isNaN(t.getTime()) ? "" : t.toLocaleDateString();
|
|
@@ -781,7 +781,7 @@ function Ce(t) {
|
|
|
781
781
|
}
|
|
782
782
|
return "";
|
|
783
783
|
}
|
|
784
|
-
function
|
|
784
|
+
function Te(t) {
|
|
785
785
|
if (!t) return -1;
|
|
786
786
|
const e = t.getAttribute("data-row");
|
|
787
787
|
if (e) return parseInt(e, 10);
|
|
@@ -794,136 +794,40 @@ function ye(t) {
|
|
|
794
794
|
if (n[r] === o) return r;
|
|
795
795
|
return -1;
|
|
796
796
|
}
|
|
797
|
-
function
|
|
797
|
+
function Qe(t) {
|
|
798
798
|
if (!t) return -1;
|
|
799
799
|
const e = t.getAttribute("data-col");
|
|
800
800
|
return e ? parseInt(e, 10) : -1;
|
|
801
801
|
}
|
|
802
|
-
function
|
|
802
|
+
function ie(t) {
|
|
803
803
|
t && t.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
|
|
804
804
|
}
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
o < 0 || i < 0 || (t._focusRow = o, t._focusCol = i, ee(t._bodyEl), e.classList.add("cell-focus"), e.setAttribute("aria-selected", "true"));
|
|
808
|
-
}
|
|
809
|
-
function Je(t, e, o) {
|
|
810
|
-
e.addEventListener(
|
|
811
|
-
"mousedown",
|
|
812
|
-
(i) => {
|
|
813
|
-
const n = i.target.closest(".cell[data-col]");
|
|
814
|
-
n && (n.classList.contains("editing") || Ze(t, n));
|
|
815
|
-
},
|
|
816
|
-
{ signal: o }
|
|
817
|
-
);
|
|
818
|
-
}
|
|
819
|
-
function Qe(t, e) {
|
|
820
|
-
return t == null && e == null ? 0 : t == null ? -1 : e == null || t > e ? 1 : t < e ? -1 : 0;
|
|
821
|
-
}
|
|
822
|
-
function et(t, e, o) {
|
|
823
|
-
const n = o.find((l) => l.field === e.field)?.sortComparator ?? Qe, { field: r, direction: s } = e;
|
|
824
|
-
return [...t].sort((l, a) => n(l[r], a[r], l, a) * s);
|
|
825
|
-
}
|
|
826
|
-
function le(t, e, o, i) {
|
|
827
|
-
t._rows = e, t.__rowRenderEpoch++, t._rowPool.forEach((n) => n.__epoch = -1), X(t), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
828
|
-
new CustomEvent("sort-change", { detail: { field: o.field, direction: i } })
|
|
829
|
-
), t.requestStateChange?.();
|
|
830
|
-
}
|
|
831
|
-
function ae(t, e) {
|
|
832
|
-
!t._sortState || t._sortState.field !== e.field ? (t._sortState || (t.__originalOrder = t._rows.slice()), ce(t, e, 1)) : t._sortState.direction === 1 ? ce(t, e, -1) : (t._sortState = null, t.__rowRenderEpoch++, t._rowPool.forEach((i) => i.__epoch = -1), t._rows = t.__originalOrder.slice(), X(t), t._headerRowEl?.querySelectorAll('[role="columnheader"].sortable')?.forEach((i) => {
|
|
833
|
-
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");
|
|
834
|
-
}), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
835
|
-
new CustomEvent("sort-change", { detail: { field: e.field, direction: 0 } })
|
|
836
|
-
), t.requestStateChange?.());
|
|
837
|
-
}
|
|
838
|
-
function ce(t, e, o) {
|
|
839
|
-
t._sortState = { field: e.field, direction: o };
|
|
840
|
-
const i = { field: e.field, direction: o }, n = t._columns, s = (t.effectiveConfig?.sortHandler ?? et)(t._rows, i, n);
|
|
841
|
-
s && typeof s.then == "function" ? s.then((l) => {
|
|
842
|
-
le(t, l, e, o);
|
|
843
|
-
}) : le(t, s, e, o);
|
|
844
|
-
}
|
|
845
|
-
function tt(t, e) {
|
|
846
|
-
typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
|
|
847
|
-
}
|
|
848
|
-
function X(t) {
|
|
849
|
-
t._headerRowEl = t.findHeaderRow();
|
|
850
|
-
const e = t._headerRowEl;
|
|
851
|
-
e && (e.innerHTML = "", t._visibleColumns.forEach((o, i) => {
|
|
852
|
-
const n = document.createElement("div");
|
|
853
|
-
n.className = "cell", ie(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));
|
|
854
|
-
const r = o.__headerTemplate;
|
|
855
|
-
if (r) Array.from(r.childNodes).forEach((s) => n.appendChild(s.cloneNode(!0)));
|
|
856
|
-
else {
|
|
857
|
-
const s = o.header ?? o.field, l = document.createElement("span");
|
|
858
|
-
l.textContent = s, n.appendChild(l);
|
|
859
|
-
}
|
|
860
|
-
if (o.sortable) {
|
|
861
|
-
n.classList.add("sortable"), n.tabIndex = 0;
|
|
862
|
-
const s = document.createElement("span");
|
|
863
|
-
ie(s, "sort-indicator");
|
|
864
|
-
const l = t._sortState?.field === o.field ? t._sortState.direction : 0, a = { ...H, ...t.icons }, c = l === 1 ? a.sortAsc : l === -1 ? a.sortDesc : a.sortNone;
|
|
865
|
-
tt(s, c), n.appendChild(s), n.setAttribute("aria-sort", l === 0 ? "none" : l === 1 ? "ascending" : "descending"), n.addEventListener("click", (h) => {
|
|
866
|
-
t._resizeController?.isResizing || t._dispatchHeaderClick?.(h, i, n) || ae(t, o);
|
|
867
|
-
}), n.addEventListener("keydown", (h) => {
|
|
868
|
-
if (h.key === "Enter" || h.key === " ") {
|
|
869
|
-
if (h.preventDefault(), t._dispatchHeaderClick?.(h, i, n)) return;
|
|
870
|
-
ae(t, o);
|
|
871
|
-
}
|
|
872
|
-
});
|
|
873
|
-
}
|
|
874
|
-
if (o.resizable) {
|
|
875
|
-
n.classList.add("resizable");
|
|
876
|
-
const s = document.createElement("div");
|
|
877
|
-
s.className = "resize-handle", s.setAttribute("aria-hidden", "true"), s.addEventListener("mousedown", (l) => {
|
|
878
|
-
l.stopPropagation(), l.preventDefault(), t._resizeController.start(l, i, n);
|
|
879
|
-
}), s.addEventListener("dblclick", (l) => {
|
|
880
|
-
l.stopPropagation(), l.preventDefault(), t._resizeController.resetColumn(i);
|
|
881
|
-
}), n.appendChild(s);
|
|
882
|
-
}
|
|
883
|
-
e.appendChild(n);
|
|
884
|
-
}), e.querySelectorAll(".cell.sortable").forEach((o) => {
|
|
885
|
-
o.getAttribute("aria-sort") || o.setAttribute("aria-sort", "none");
|
|
886
|
-
}), e.children.length > 0 ? (e.setAttribute("role", "row"), e.setAttribute("aria-rowindex", "1")) : (e.removeAttribute("role"), e.removeAttribute("aria-rowindex")));
|
|
887
|
-
}
|
|
888
|
-
const _e = typeof requestIdleCallback == "function";
|
|
889
|
-
function ot(t, e) {
|
|
890
|
-
return _e ? requestIdleCallback(t, e) : window.setTimeout(() => {
|
|
891
|
-
const o = Date.now();
|
|
892
|
-
t({
|
|
893
|
-
didTimeout: !1,
|
|
894
|
-
timeRemaining: () => Math.max(0, 50 - (Date.now() - o))
|
|
895
|
-
});
|
|
896
|
-
}, 1);
|
|
897
|
-
}
|
|
898
|
-
function de(t) {
|
|
899
|
-
_e ? cancelIdleCallback(t) : clearTimeout(t);
|
|
900
|
-
}
|
|
901
|
-
const Ee = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
|
|
902
|
-
function j(t) {
|
|
805
|
+
const Re = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
|
|
806
|
+
function J(t) {
|
|
903
807
|
return (t.__editingCellCount ?? 0) > 0;
|
|
904
808
|
}
|
|
905
|
-
function
|
|
809
|
+
function Q(t) {
|
|
906
810
|
t.__editingCellCount = 0, t.removeAttribute("data-has-editing"), t.querySelectorAll(".cell.editing").forEach((o) => o.classList.remove("editing"));
|
|
907
811
|
}
|
|
908
|
-
const
|
|
909
|
-
|
|
910
|
-
const
|
|
911
|
-
|
|
912
|
-
function
|
|
913
|
-
return
|
|
812
|
+
const xe = document.createElement("template");
|
|
813
|
+
xe.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
|
|
814
|
+
const Ae = document.createElement("template");
|
|
815
|
+
Ae.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
|
|
816
|
+
function et() {
|
|
817
|
+
return xe.content.firstElementChild.cloneNode(!0);
|
|
914
818
|
}
|
|
915
|
-
function
|
|
916
|
-
return
|
|
819
|
+
function tt() {
|
|
820
|
+
return Ae.content.firstElementChild.cloneNode(!0);
|
|
917
821
|
}
|
|
918
|
-
function
|
|
822
|
+
function G(t) {
|
|
919
823
|
t.__cellDisplayCache = void 0, t.__cellCacheEpoch = void 0, t.__hasSpecialColumns = void 0;
|
|
920
824
|
}
|
|
921
|
-
function
|
|
825
|
+
function ot(t, e, o, i, n) {
|
|
922
826
|
const r = Math.max(0, o - e), s = t._bodyEl, l = t._visibleColumns, a = l.length;
|
|
923
827
|
let c = t.__cachedHeaderRowCount;
|
|
924
828
|
for (c === void 0 && (c = t.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = c); t._rowPool.length < r; ) {
|
|
925
|
-
const d =
|
|
926
|
-
|
|
829
|
+
const d = tt();
|
|
830
|
+
t._rowPool.push(d);
|
|
927
831
|
}
|
|
928
832
|
if (t._rowPool.length > r) {
|
|
929
833
|
for (let d = r; d < t._rowPool.length; d++) {
|
|
@@ -932,44 +836,60 @@ function rt(t, e, o, i, n) {
|
|
|
932
836
|
}
|
|
933
837
|
t._rowPool.length = r;
|
|
934
838
|
}
|
|
935
|
-
const
|
|
839
|
+
const u = n && t.__hasRenderRowPlugins !== !1;
|
|
936
840
|
for (let d = 0; d < r; d++) {
|
|
937
|
-
const f = e + d, p = t._rows[f],
|
|
938
|
-
if (
|
|
939
|
-
|
|
841
|
+
const f = e + d, p = t._rows[f], h = t._rowPool[d];
|
|
842
|
+
if (h.setAttribute("aria-rowindex", String(f + c + 1)), u && n(p, h, f)) {
|
|
843
|
+
h.__epoch = i, h.__rowDataRef = p, h.parentNode !== s && s.appendChild(h);
|
|
940
844
|
continue;
|
|
941
845
|
}
|
|
942
|
-
const g =
|
|
943
|
-
let
|
|
944
|
-
if (
|
|
945
|
-
for (let
|
|
946
|
-
if (l[
|
|
947
|
-
|
|
846
|
+
const g = h.__epoch, w = h.__rowDataRef, _ = h.children.length, v = g === i && _ === a, m = w !== p;
|
|
847
|
+
let y = !1;
|
|
848
|
+
if (v && m) {
|
|
849
|
+
for (let b = 0; b < a; b++)
|
|
850
|
+
if (l[b].externalView && !h.querySelector(`.cell[data-col="${b}"] [data-external-view]`)) {
|
|
851
|
+
y = !0;
|
|
948
852
|
break;
|
|
949
853
|
}
|
|
950
854
|
}
|
|
951
|
-
if (!
|
|
952
|
-
const
|
|
953
|
-
|
|
954
|
-
} else if (
|
|
955
|
-
const
|
|
956
|
-
|
|
855
|
+
if (!v || y) {
|
|
856
|
+
const b = J(h), E = t._activeEditRows === f;
|
|
857
|
+
b && !E ? (h.__isCustomRow && (h.className = "data-grid-row", h.setAttribute("role", "row"), h.__isCustomRow = !1), Q(h), U(t, h, p, f), h.__epoch = i, h.__rowDataRef = p) : b && E ? (ee(t, h, p, f), h.__rowDataRef = p) : (h.__isCustomRow && (h.className = "data-grid-row", h.setAttribute("role", "row"), h.__isCustomRow = !1), U(t, h, p, f), h.__epoch = i, h.__rowDataRef = p);
|
|
858
|
+
} else if (m) {
|
|
859
|
+
const b = J(h), E = t._activeEditRows === f;
|
|
860
|
+
b && !E ? (Q(h), U(t, h, p, f), h.__epoch = i, h.__rowDataRef = p) : (ee(t, h, p, f), h.__rowDataRef = p);
|
|
957
861
|
} else {
|
|
958
|
-
const
|
|
959
|
-
|
|
862
|
+
const b = J(h), E = t._activeEditRows === f;
|
|
863
|
+
b && !E ? (Q(h), U(t, h, p, f), h.__epoch = i, h.__rowDataRef = p) : ee(t, h, p, f);
|
|
960
864
|
}
|
|
961
|
-
const
|
|
962
|
-
|
|
865
|
+
const S = t._changedRowIndices?.has(f) ?? !1, C = h.classList.contains("changed");
|
|
866
|
+
S !== C && h.classList.toggle("changed", S);
|
|
867
|
+
const O = t.effectiveConfig?.rowClass;
|
|
868
|
+
if (O) {
|
|
869
|
+
const b = h.getAttribute("data-dynamic-classes");
|
|
870
|
+
b && b.split(" ").forEach((E) => E && h.classList.remove(E));
|
|
871
|
+
try {
|
|
872
|
+
const E = O(p);
|
|
873
|
+
if (E && E.length > 0) {
|
|
874
|
+
const B = E.filter((V) => V && typeof V == "string");
|
|
875
|
+
B.forEach((V) => h.classList.add(V)), h.setAttribute("data-dynamic-classes", B.join(" "));
|
|
876
|
+
} else
|
|
877
|
+
h.removeAttribute("data-dynamic-classes");
|
|
878
|
+
} catch (E) {
|
|
879
|
+
console.warn("[tbw-grid] rowClass callback error:", E), h.removeAttribute("data-dynamic-classes");
|
|
880
|
+
}
|
|
881
|
+
}
|
|
882
|
+
h.parentNode !== s && s.appendChild(h);
|
|
963
883
|
}
|
|
964
884
|
}
|
|
965
|
-
function
|
|
966
|
-
const n = e.children, r = t._visibleColumns, s = r.length, l = n.length, a = s < l ? s : l, c = t._focusRow,
|
|
885
|
+
function ee(t, e, o, i) {
|
|
886
|
+
const n = e.children, r = t._visibleColumns, s = r.length, l = n.length, a = s < l ? s : l, c = t._focusRow, u = t._focusCol;
|
|
967
887
|
let d = t.__hasSpecialColumns;
|
|
968
888
|
if (d === void 0) {
|
|
969
889
|
d = !1;
|
|
970
890
|
for (let p = 0; p < s; p++) {
|
|
971
|
-
const
|
|
972
|
-
if (
|
|
891
|
+
const h = r[p];
|
|
892
|
+
if (h.__viewTemplate || h.__compiledView || h.renderer || h.viewRenderer || h.externalView || h.format || h.type === "date" || h.type === "boolean") {
|
|
973
893
|
d = !0;
|
|
974
894
|
break;
|
|
975
895
|
}
|
|
@@ -979,51 +899,67 @@ function Z(t, e, o, i) {
|
|
|
979
899
|
const f = String(i);
|
|
980
900
|
if (!d) {
|
|
981
901
|
for (let p = 0; p < a; p++) {
|
|
982
|
-
const
|
|
983
|
-
if (
|
|
902
|
+
const h = n[p];
|
|
903
|
+
if (h.classList.contains("editing")) continue;
|
|
984
904
|
const g = o[r[p].field];
|
|
985
|
-
|
|
986
|
-
const
|
|
987
|
-
|
|
905
|
+
h.textContent = g == null ? "" : String(g), h.getAttribute("data-row") !== f && h.setAttribute("data-row", f);
|
|
906
|
+
const w = c === i && u === p, _ = h.classList.contains("cell-focus");
|
|
907
|
+
w !== _ && (h.classList.toggle("cell-focus", w), h.setAttribute("aria-selected", String(w)));
|
|
988
908
|
}
|
|
989
909
|
return;
|
|
990
910
|
}
|
|
991
911
|
for (let p = 0; p < a; p++)
|
|
992
912
|
if (r[p].externalView && !n[p].querySelector("[data-external-view]")) {
|
|
993
|
-
|
|
913
|
+
U(t, e, o, i);
|
|
994
914
|
return;
|
|
995
915
|
}
|
|
996
916
|
for (let p = 0; p < a; p++) {
|
|
997
|
-
const
|
|
917
|
+
const h = r[p], g = n[p];
|
|
998
918
|
g.getAttribute("data-row") !== f && g.setAttribute("data-row", f);
|
|
999
|
-
const
|
|
1000
|
-
|
|
1001
|
-
const
|
|
1002
|
-
if (
|
|
1003
|
-
const
|
|
1004
|
-
|
|
919
|
+
const w = c === i && u === p, _ = g.classList.contains("cell-focus");
|
|
920
|
+
w !== _ && (g.classList.toggle("cell-focus", w), g.setAttribute("aria-selected", String(w)));
|
|
921
|
+
const T = h.cellClass;
|
|
922
|
+
if (T) {
|
|
923
|
+
const S = g.getAttribute("data-dynamic-classes");
|
|
924
|
+
S && S.split(" ").forEach((C) => C && g.classList.remove(C));
|
|
925
|
+
try {
|
|
926
|
+
const C = o[h.field], O = T(C, o, h);
|
|
927
|
+
if (O && O.length > 0) {
|
|
928
|
+
const b = O.filter((E) => E && typeof E == "string");
|
|
929
|
+
b.forEach((E) => g.classList.add(E)), g.setAttribute("data-dynamic-classes", b.join(" "));
|
|
930
|
+
} else
|
|
931
|
+
g.removeAttribute("data-dynamic-classes");
|
|
932
|
+
} catch (C) {
|
|
933
|
+
console.warn(`[tbw-grid] cellClass callback error for column '${h.field}':`, C), g.removeAttribute("data-dynamic-classes");
|
|
934
|
+
}
|
|
935
|
+
}
|
|
936
|
+
if (g.classList.contains("editing")) continue;
|
|
937
|
+
const v = h.renderer || h.viewRenderer;
|
|
938
|
+
if (v) {
|
|
939
|
+
const S = o[h.field], C = v({ row: o, value: S, field: h.field, column: h, cellEl: g });
|
|
940
|
+
typeof C == "string" ? g.innerHTML = j(C) : C instanceof Node ? C.parentElement !== g && (g.innerHTML = "", g.appendChild(C)) : C == null && (g.textContent = S == null ? "" : String(S));
|
|
1005
941
|
continue;
|
|
1006
942
|
}
|
|
1007
|
-
if (
|
|
943
|
+
if (h.__viewTemplate || h.__compiledView || h.externalView)
|
|
1008
944
|
continue;
|
|
1009
|
-
const m = o[
|
|
1010
|
-
let
|
|
1011
|
-
if (
|
|
945
|
+
const m = o[h.field];
|
|
946
|
+
let y;
|
|
947
|
+
if (h.format)
|
|
1012
948
|
try {
|
|
1013
|
-
const
|
|
1014
|
-
|
|
1015
|
-
} catch (
|
|
1016
|
-
console.warn(`[tbw-grid] Format error in column '${
|
|
949
|
+
const S = h.format(m, o);
|
|
950
|
+
y = S == null ? "" : String(S);
|
|
951
|
+
} catch (S) {
|
|
952
|
+
console.warn(`[tbw-grid] Format error in column '${h.field}':`, S), y = m == null ? "" : String(m);
|
|
1017
953
|
}
|
|
1018
|
-
else
|
|
954
|
+
else h.type === "date" ? (y = Se(m), g.textContent = y) : h.type === "boolean" ? g.innerHTML = Ee(!!m) : (y = m == null ? "" : String(m), g.textContent = y);
|
|
1019
955
|
}
|
|
1020
956
|
}
|
|
1021
|
-
function
|
|
957
|
+
function U(t, e, o, i) {
|
|
1022
958
|
e.innerHTML = "";
|
|
1023
959
|
const n = t._visibleColumns, r = n.length, s = t._focusRow, l = t._focusCol, a = t, c = document.createDocumentFragment();
|
|
1024
|
-
for (let
|
|
1025
|
-
const d = n[
|
|
1026
|
-
f.setAttribute("aria-colindex", String(
|
|
960
|
+
for (let u = 0; u < r; u++) {
|
|
961
|
+
const d = n[u], f = et();
|
|
962
|
+
f.setAttribute("aria-colindex", String(u + 1)), f.setAttribute("data-col", String(u)), f.setAttribute("data-row", String(i)), f.setAttribute("data-field", d.field), d.type && f.setAttribute("data-type", d.type);
|
|
1027
963
|
let p = o[d.field];
|
|
1028
964
|
if (d.format)
|
|
1029
965
|
try {
|
|
@@ -1031,20 +967,20 @@ function B(t, e, o, i) {
|
|
|
1031
967
|
} catch (m) {
|
|
1032
968
|
console.warn(`[tbw-grid] Format error in column '${d.field}':`, m);
|
|
1033
969
|
}
|
|
1034
|
-
const
|
|
1035
|
-
let
|
|
1036
|
-
if (
|
|
1037
|
-
const m =
|
|
1038
|
-
typeof m == "string" ? (f.innerHTML =
|
|
1039
|
-
} else if (
|
|
1040
|
-
const m =
|
|
1041
|
-
|
|
1042
|
-
const
|
|
970
|
+
const h = d.__compiledView, g = d.__viewTemplate, w = d.renderer || d.viewRenderer, _ = d.externalView;
|
|
971
|
+
let T = !1;
|
|
972
|
+
if (w) {
|
|
973
|
+
const m = w({ row: o, value: p, field: d.field, column: d, cellEl: f });
|
|
974
|
+
typeof m == "string" ? (f.innerHTML = j(m), T = !0) : m instanceof Node ? m.parentElement !== f && (f.textContent = "", f.appendChild(m)) : m == null && (f.textContent = p == null ? "" : String(p));
|
|
975
|
+
} else if (_) {
|
|
976
|
+
const m = _, y = document.createElement("div");
|
|
977
|
+
y.setAttribute("data-external-view", ""), y.setAttribute("data-field", d.field), f.appendChild(y);
|
|
978
|
+
const S = { row: o, value: p, field: d.field, column: d };
|
|
1043
979
|
if (m.mount)
|
|
1044
980
|
try {
|
|
1045
|
-
m.mount({ placeholder:
|
|
1046
|
-
} catch (
|
|
1047
|
-
console.warn(`[tbw-grid] External view mount error for column '${d.field}':`,
|
|
981
|
+
m.mount({ placeholder: y, context: S, spec: m });
|
|
982
|
+
} catch (C) {
|
|
983
|
+
console.warn(`[tbw-grid] External view mount error for column '${d.field}':`, C);
|
|
1048
984
|
}
|
|
1049
985
|
else
|
|
1050
986
|
queueMicrotask(() => {
|
|
@@ -1053,70 +989,82 @@ function B(t, e, o, i) {
|
|
|
1053
989
|
new CustomEvent("mount-external-view", {
|
|
1054
990
|
bubbles: !0,
|
|
1055
991
|
composed: !0,
|
|
1056
|
-
detail: { placeholder:
|
|
992
|
+
detail: { placeholder: y, spec: m, context: S }
|
|
1057
993
|
})
|
|
1058
994
|
);
|
|
1059
|
-
} catch (
|
|
1060
|
-
console.warn(`[tbw-grid] External view event dispatch error for column '${d.field}':`,
|
|
995
|
+
} catch (C) {
|
|
996
|
+
console.warn(`[tbw-grid] External view event dispatch error for column '${d.field}':`, C);
|
|
1061
997
|
}
|
|
1062
998
|
});
|
|
1063
|
-
|
|
1064
|
-
} else if (
|
|
1065
|
-
const m =
|
|
1066
|
-
f.innerHTML =
|
|
999
|
+
y.setAttribute("data-mounted", "");
|
|
1000
|
+
} else if (h) {
|
|
1001
|
+
const m = h({ row: o, value: p, field: d.field, column: d }), y = h.__blocked;
|
|
1002
|
+
f.innerHTML = y ? "" : j(m), T = !0, y && (f.textContent = "", f.setAttribute("data-blocked-template", ""));
|
|
1067
1003
|
} else if (g) {
|
|
1068
1004
|
const m = g.innerHTML;
|
|
1069
|
-
/Reflect\.|\bProxy\b|ownKeys\(/.test(m) ? (f.textContent = "", f.setAttribute("data-blocked-template", "")) : (f.innerHTML =
|
|
1005
|
+
/Reflect\.|\bProxy\b|ownKeys\(/.test(m) ? (f.textContent = "", f.setAttribute("data-blocked-template", "")) : (f.innerHTML = j(_e(m, { row: o, value: p })), T = !0);
|
|
1070
1006
|
} else
|
|
1071
|
-
d.type === "date" ? f.textContent =
|
|
1072
|
-
if (
|
|
1073
|
-
|
|
1007
|
+
d.type === "date" ? f.textContent = Se(p) : d.type === "boolean" ? f.innerHTML = Ee(!!p) : f.textContent = p == null ? "" : String(p);
|
|
1008
|
+
if (T) {
|
|
1009
|
+
Ke(f);
|
|
1074
1010
|
const m = f.textContent || "";
|
|
1075
1011
|
/Proxy|Reflect\.ownKeys/.test(m) && (f.textContent = m.replace(/Proxy|Reflect\.ownKeys/g, "").trim(), /Proxy|Reflect\.ownKeys/.test(f.textContent || "") && (f.textContent = ""));
|
|
1076
1012
|
}
|
|
1077
|
-
f.hasAttribute("data-blocked-template") && (f.textContent || "").trim().length && (f.textContent = ""), d.editable ? f.tabIndex = 0 : d.type === "boolean" && (f.hasAttribute("tabindex") || (f.tabIndex = 0)), s === i && l ===
|
|
1013
|
+
f.hasAttribute("data-blocked-template") && (f.textContent || "").trim().length && (f.textContent = ""), d.editable ? f.tabIndex = 0 : d.type === "boolean" && (f.hasAttribute("tabindex") || (f.tabIndex = 0)), s === i && l === u ? (f.classList.add("cell-focus"), f.setAttribute("aria-selected", "true")) : f.setAttribute("aria-selected", "false");
|
|
1014
|
+
const v = d.cellClass;
|
|
1015
|
+
if (v)
|
|
1016
|
+
try {
|
|
1017
|
+
const m = o[d.field], y = v(m, o, d);
|
|
1018
|
+
if (y && y.length > 0) {
|
|
1019
|
+
const S = y.filter((C) => C && typeof C == "string");
|
|
1020
|
+
S.forEach((C) => f.classList.add(C)), f.setAttribute("data-dynamic-classes", S.join(" "));
|
|
1021
|
+
}
|
|
1022
|
+
} catch (m) {
|
|
1023
|
+
console.warn(`[tbw-grid] cellClass callback error for column '${d.field}':`, m);
|
|
1024
|
+
}
|
|
1025
|
+
c.appendChild(f);
|
|
1078
1026
|
}
|
|
1079
1027
|
e.appendChild(c);
|
|
1080
1028
|
}
|
|
1081
|
-
function he(t, e, o
|
|
1029
|
+
function he(t, e, o) {
|
|
1082
1030
|
if (e.target?.closest(".resize-handle")) return;
|
|
1083
|
-
const
|
|
1084
|
-
if (
|
|
1085
|
-
const
|
|
1086
|
-
if (!
|
|
1031
|
+
const i = o.querySelector(".cell[data-row]"), n = Te(i);
|
|
1032
|
+
if (n < 0) return;
|
|
1033
|
+
const r = t._rows[n];
|
|
1034
|
+
if (!r || t._dispatchRowClick?.(e, n, r, o))
|
|
1087
1035
|
return;
|
|
1088
|
-
const
|
|
1089
|
-
if (
|
|
1090
|
-
const
|
|
1091
|
-
if (!isNaN(
|
|
1092
|
-
if (t._dispatchCellClick?.(e,
|
|
1036
|
+
const s = e.target?.closest(".cell[data-col]");
|
|
1037
|
+
if (s) {
|
|
1038
|
+
const l = Number(s.getAttribute("data-col"));
|
|
1039
|
+
if (!isNaN(l)) {
|
|
1040
|
+
if (t._dispatchCellClick?.(e, n, l, s))
|
|
1093
1041
|
return;
|
|
1094
|
-
const
|
|
1095
|
-
if (t._focusRow =
|
|
1096
|
-
|
|
1097
|
-
const
|
|
1042
|
+
const a = t._focusRow !== n || t._focusCol !== l;
|
|
1043
|
+
if (t._focusRow = n, t._focusCol = l, s.classList.contains("editing")) {
|
|
1044
|
+
a && (ie(t._bodyEl ?? t), s.classList.add("cell-focus"));
|
|
1045
|
+
const c = s.querySelector(Re);
|
|
1098
1046
|
try {
|
|
1099
|
-
|
|
1047
|
+
c?.focus({ preventScroll: !0 });
|
|
1100
1048
|
} catch {
|
|
1101
1049
|
}
|
|
1102
1050
|
return;
|
|
1103
1051
|
}
|
|
1104
|
-
|
|
1052
|
+
q(t);
|
|
1105
1053
|
}
|
|
1106
1054
|
}
|
|
1107
1055
|
}
|
|
1108
|
-
function
|
|
1056
|
+
function it(t, e) {
|
|
1109
1057
|
if (t._dispatchKeyDown?.(e))
|
|
1110
1058
|
return;
|
|
1111
|
-
const o = t._rows.length - 1, i = t._visibleColumns.length - 1, n = t._activeEditRows !== void 0 && t._activeEditRows !== -1, s = t._visibleColumns[t._focusCol]?.type, l = e.composedPath?.() ?? [], a = l.length ? l[0] : e.target, c = (
|
|
1112
|
-
if (!
|
|
1113
|
-
const d =
|
|
1114
|
-
return !!(d === "INPUT" || d === "SELECT" || d === "TEXTAREA" ||
|
|
1059
|
+
const o = t._rows.length - 1, i = t._visibleColumns.length - 1, n = t._activeEditRows !== void 0 && t._activeEditRows !== -1, s = t._visibleColumns[t._focusCol]?.type, l = e.composedPath?.() ?? [], a = l.length ? l[0] : e.target, c = (u) => {
|
|
1060
|
+
if (!u) return !1;
|
|
1061
|
+
const d = u.tagName;
|
|
1062
|
+
return !!(d === "INPUT" || d === "SELECT" || d === "TEXTAREA" || u.isContentEditable);
|
|
1115
1063
|
};
|
|
1116
1064
|
if (!(c(a) && (e.key === "Home" || e.key === "End")) && !(c(a) && (e.key === "ArrowUp" || e.key === "ArrowDown") && a.tagName === "INPUT" && a.type === "number") && !(c(a) && (e.key === "ArrowLeft" || e.key === "ArrowRight")) && !(c(a) && (e.key === "Enter" || e.key === "Escape")) && !(n && (s === "select" || s === "typeahead") && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
|
|
1117
1065
|
switch (e.key) {
|
|
1118
1066
|
case "Tab": {
|
|
1119
|
-
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),
|
|
1067
|
+
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), q(t);
|
|
1120
1068
|
return;
|
|
1121
1069
|
}
|
|
1122
1070
|
case "ArrowDown":
|
|
@@ -1132,10 +1080,10 @@ function st(t, e) {
|
|
|
1132
1080
|
t._focusCol = Math.max(0, t._focusCol - 1), e.preventDefault();
|
|
1133
1081
|
break;
|
|
1134
1082
|
case "Home":
|
|
1135
|
-
(e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = 0), t._focusCol = 0, e.preventDefault(),
|
|
1083
|
+
(e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = 0), t._focusCol = 0, e.preventDefault(), q(t, { forceScrollLeft: !0 });
|
|
1136
1084
|
return;
|
|
1137
1085
|
case "End":
|
|
1138
|
-
(e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = o), t._focusCol = i, e.preventDefault(),
|
|
1086
|
+
(e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = o), t._focusCol = i, e.preventDefault(), q(t, { forceScrollRight: !0 });
|
|
1139
1087
|
return;
|
|
1140
1088
|
case "PageDown":
|
|
1141
1089
|
t._focusRow = Math.min(o, t._focusRow + 20), e.preventDefault();
|
|
@@ -1146,11 +1094,11 @@ function st(t, e) {
|
|
|
1146
1094
|
// NOTE: Enter key is handled by EditingPlugin. If no plugin handles it,
|
|
1147
1095
|
// we dispatch a cancelable activate-cell event for custom handling.
|
|
1148
1096
|
case "Enter": {
|
|
1149
|
-
const
|
|
1097
|
+
const u = new CustomEvent("activate-cell", {
|
|
1150
1098
|
cancelable: !0,
|
|
1151
1099
|
detail: { row: t._focusRow, col: t._focusCol }
|
|
1152
1100
|
});
|
|
1153
|
-
if (t.dispatchEvent(
|
|
1101
|
+
if (t.dispatchEvent(u), u.defaultPrevented) {
|
|
1154
1102
|
e.preventDefault();
|
|
1155
1103
|
return;
|
|
1156
1104
|
}
|
|
@@ -1159,19 +1107,19 @@ function st(t, e) {
|
|
|
1159
1107
|
default:
|
|
1160
1108
|
return;
|
|
1161
1109
|
}
|
|
1162
|
-
|
|
1110
|
+
q(t);
|
|
1163
1111
|
}
|
|
1164
1112
|
}
|
|
1165
|
-
function
|
|
1113
|
+
function q(t, e) {
|
|
1166
1114
|
if (t._virtualization?.enabled) {
|
|
1167
|
-
const { rowHeight: s, container: l, viewportEl: a } = t._virtualization, c = l,
|
|
1168
|
-
if (c &&
|
|
1115
|
+
const { rowHeight: s, container: l, viewportEl: a } = t._virtualization, c = l, u = a?.clientHeight ?? c?.clientHeight ?? 0;
|
|
1116
|
+
if (c && u > 0) {
|
|
1169
1117
|
const d = t._focusRow * s;
|
|
1170
|
-
d < c.scrollTop ? c.scrollTop = d : d + s > c.scrollTop +
|
|
1118
|
+
d < c.scrollTop ? c.scrollTop = d : d + s > c.scrollTop + u && (c.scrollTop = d - u + s);
|
|
1171
1119
|
}
|
|
1172
1120
|
}
|
|
1173
1121
|
const o = t._activeEditRows !== void 0 && t._activeEditRows !== -1;
|
|
1174
|
-
o || t.refreshVirtualWindow(!1),
|
|
1122
|
+
o || t.refreshVirtualWindow(!1), ie(t._bodyEl), Array.from(t._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((s) => {
|
|
1175
1123
|
s.setAttribute("aria-selected", "false");
|
|
1176
1124
|
});
|
|
1177
1125
|
const i = t._focusRow, n = t._virtualization.start ?? 0, r = t._virtualization.end ?? t._rows.length;
|
|
@@ -1189,12 +1137,12 @@ function k(t, e) {
|
|
|
1189
1137
|
else {
|
|
1190
1138
|
const c = t._getHorizontalScrollOffsets?.(s ?? void 0, l) ?? { left: 0, right: 0 };
|
|
1191
1139
|
if (!c.skipScroll) {
|
|
1192
|
-
const
|
|
1193
|
-
f <
|
|
1140
|
+
const u = l.getBoundingClientRect(), d = a.getBoundingClientRect(), f = u.left - d.left + a.scrollLeft, p = f + u.width, h = a.scrollLeft + c.left, g = a.scrollLeft + a.clientWidth - c.right;
|
|
1141
|
+
f < h ? a.scrollLeft = f - c.left : p > g && (a.scrollLeft = p - a.clientWidth + c.right);
|
|
1194
1142
|
}
|
|
1195
1143
|
}
|
|
1196
1144
|
if (t._activeEditRows !== void 0 && t._activeEditRows !== -1 && l.classList.contains("editing")) {
|
|
1197
|
-
const c = l.querySelector(
|
|
1145
|
+
const c = l.querySelector(Re);
|
|
1198
1146
|
if (c && document.activeElement !== c)
|
|
1199
1147
|
try {
|
|
1200
1148
|
c.focus({ preventScroll: !0 });
|
|
@@ -1210,9 +1158,161 @@ function k(t, e) {
|
|
|
1210
1158
|
}
|
|
1211
1159
|
}
|
|
1212
1160
|
}
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1161
|
+
const K = /* @__PURE__ */ new WeakMap();
|
|
1162
|
+
function nt(t, e) {
|
|
1163
|
+
const o = Te(e), i = Qe(e);
|
|
1164
|
+
o < 0 || i < 0 || (t._focusRow = o, t._focusCol = i, ie(t._bodyEl), e.classList.add("cell-focus"), e.setAttribute("aria-selected", "true"));
|
|
1165
|
+
}
|
|
1166
|
+
function ne(t, e, o, i) {
|
|
1167
|
+
let n = null;
|
|
1168
|
+
const r = o.composedPath?.();
|
|
1169
|
+
if (r && r.length > 0 ? n = r[0] : n = o.target, n && !e.contains(n)) {
|
|
1170
|
+
const g = document.elementFromPoint(o.clientX, o.clientY);
|
|
1171
|
+
g && (n = g);
|
|
1172
|
+
}
|
|
1173
|
+
const s = n?.closest?.("[data-col]"), l = n?.closest?.(".data-grid-row"), a = n?.closest?.(".header-row");
|
|
1174
|
+
let c, u, d, f, p, h;
|
|
1175
|
+
return s && (c = parseInt(s.getAttribute("data-row") ?? "-1", 10), u = parseInt(s.getAttribute("data-col") ?? "-1", 10), c >= 0 && u >= 0 && (d = t._rows[c], h = t._columns[u], f = h?.field, p = d && f ? d[f] : void 0)), {
|
|
1176
|
+
type: i,
|
|
1177
|
+
row: d,
|
|
1178
|
+
rowIndex: c !== void 0 && c >= 0 ? c : void 0,
|
|
1179
|
+
colIndex: u !== void 0 && u >= 0 ? u : void 0,
|
|
1180
|
+
field: f,
|
|
1181
|
+
value: p,
|
|
1182
|
+
column: h,
|
|
1183
|
+
originalEvent: o,
|
|
1184
|
+
cellElement: s ?? void 0,
|
|
1185
|
+
rowElement: l ?? void 0,
|
|
1186
|
+
isHeader: !!a,
|
|
1187
|
+
cell: c !== void 0 && u !== void 0 && c >= 0 && u >= 0 ? { row: c, col: u } : void 0
|
|
1188
|
+
};
|
|
1189
|
+
}
|
|
1190
|
+
function rt(t, e, o) {
|
|
1191
|
+
const i = ne(t, e, o, "mousedown");
|
|
1192
|
+
(t._dispatchCellMouseDown?.(i) ?? !1) && K.set(t, !0);
|
|
1193
|
+
}
|
|
1194
|
+
function st(t, e, o) {
|
|
1195
|
+
if (!K.get(t)) return;
|
|
1196
|
+
const i = ne(t, e, o, "mousemove");
|
|
1197
|
+
t._dispatchCellMouseMove?.(i);
|
|
1198
|
+
}
|
|
1199
|
+
function lt(t, e, o) {
|
|
1200
|
+
if (!K.get(t)) return;
|
|
1201
|
+
const i = ne(t, e, o, "mouseup");
|
|
1202
|
+
t._dispatchCellMouseUp?.(i), K.set(t, !1);
|
|
1203
|
+
}
|
|
1204
|
+
function at(t, e, o) {
|
|
1205
|
+
e.addEventListener(
|
|
1206
|
+
"mousedown",
|
|
1207
|
+
(i) => {
|
|
1208
|
+
const n = i.target.closest(".cell[data-col]");
|
|
1209
|
+
n && (n.classList.contains("editing") || nt(t, n));
|
|
1210
|
+
},
|
|
1211
|
+
{ signal: o }
|
|
1212
|
+
), e.addEventListener(
|
|
1213
|
+
"click",
|
|
1214
|
+
(i) => {
|
|
1215
|
+
const n = i.target.closest(".data-grid-row");
|
|
1216
|
+
n && he(t, i, n);
|
|
1217
|
+
},
|
|
1218
|
+
{ signal: o }
|
|
1219
|
+
), e.addEventListener(
|
|
1220
|
+
"dblclick",
|
|
1221
|
+
(i) => {
|
|
1222
|
+
const n = i.target.closest(".data-grid-row");
|
|
1223
|
+
n && he(t, i, n);
|
|
1224
|
+
},
|
|
1225
|
+
{ signal: o }
|
|
1226
|
+
);
|
|
1227
|
+
}
|
|
1228
|
+
function ct(t, e, o, i) {
|
|
1229
|
+
e.addEventListener("keydown", (n) => it(t, n), { signal: i }), o.addEventListener("mousedown", (n) => rt(t, o, n), { signal: i }), document.addEventListener("mousemove", (n) => st(t, o, n), { signal: i }), document.addEventListener("mouseup", (n) => lt(t, o, n), { signal: i });
|
|
1230
|
+
}
|
|
1231
|
+
function dt(t, e) {
|
|
1232
|
+
return t == null && e == null ? 0 : t == null ? -1 : e == null || t > e ? 1 : t < e ? -1 : 0;
|
|
1233
|
+
}
|
|
1234
|
+
function ht(t, e, o) {
|
|
1235
|
+
const n = o.find((l) => l.field === e.field)?.sortComparator ?? dt, { field: r, direction: s } = e;
|
|
1236
|
+
return [...t].sort((l, a) => n(l[r], a[r], l, a) * s);
|
|
1237
|
+
}
|
|
1238
|
+
function ue(t, e, o, i) {
|
|
1239
|
+
t._rows = e, t.__rowRenderEpoch++, t._rowPool.forEach((n) => n.__epoch = -1), Z(t), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
1240
|
+
new CustomEvent("sort-change", { detail: { field: o.field, direction: i } })
|
|
1241
|
+
), t.requestStateChange?.();
|
|
1242
|
+
}
|
|
1243
|
+
function fe(t, e) {
|
|
1244
|
+
!t._sortState || t._sortState.field !== e.field ? (t._sortState || (t.__originalOrder = t._rows.slice()), pe(t, e, 1)) : t._sortState.direction === 1 ? pe(t, e, -1) : (t._sortState = null, t.__rowRenderEpoch++, t._rowPool.forEach((i) => i.__epoch = -1), t._rows = t.__originalOrder.slice(), Z(t), t._headerRowEl?.querySelectorAll('[role="columnheader"].sortable')?.forEach((i) => {
|
|
1245
|
+
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");
|
|
1246
|
+
}), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
1247
|
+
new CustomEvent("sort-change", { detail: { field: e.field, direction: 0 } })
|
|
1248
|
+
), t.requestStateChange?.());
|
|
1249
|
+
}
|
|
1250
|
+
function pe(t, e, o) {
|
|
1251
|
+
t._sortState = { field: e.field, direction: o };
|
|
1252
|
+
const i = { field: e.field, direction: o }, n = t._columns, s = (t.effectiveConfig?.sortHandler ?? ht)(t._rows, i, n);
|
|
1253
|
+
s && typeof s.then == "function" ? s.then((l) => {
|
|
1254
|
+
ue(t, l, e, o);
|
|
1255
|
+
}) : ue(t, s, e, o);
|
|
1256
|
+
}
|
|
1257
|
+
function ut(t, e) {
|
|
1258
|
+
typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
|
|
1259
|
+
}
|
|
1260
|
+
function Z(t) {
|
|
1261
|
+
t._headerRowEl = t.findHeaderRow();
|
|
1262
|
+
const e = t._headerRowEl;
|
|
1263
|
+
e && (e.innerHTML = "", t._visibleColumns.forEach((o, i) => {
|
|
1264
|
+
const n = document.createElement("div");
|
|
1265
|
+
n.className = "cell", le(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));
|
|
1266
|
+
const r = o.__headerTemplate;
|
|
1267
|
+
if (r) Array.from(r.childNodes).forEach((s) => n.appendChild(s.cloneNode(!0)));
|
|
1268
|
+
else {
|
|
1269
|
+
const s = o.header ?? o.field, l = document.createElement("span");
|
|
1270
|
+
l.textContent = s, n.appendChild(l);
|
|
1271
|
+
}
|
|
1272
|
+
if (o.sortable) {
|
|
1273
|
+
n.classList.add("sortable"), n.tabIndex = 0;
|
|
1274
|
+
const s = document.createElement("span");
|
|
1275
|
+
le(s, "sort-indicator");
|
|
1276
|
+
const l = t._sortState?.field === o.field ? t._sortState.direction : 0, a = { ...M, ...t.icons }, c = l === 1 ? a.sortAsc : l === -1 ? a.sortDesc : a.sortNone;
|
|
1277
|
+
ut(s, c), n.appendChild(s), n.setAttribute("aria-sort", l === 0 ? "none" : l === 1 ? "ascending" : "descending"), n.addEventListener("click", (u) => {
|
|
1278
|
+
t._resizeController?.isResizing || t._dispatchHeaderClick?.(u, i, n) || fe(t, o);
|
|
1279
|
+
}), n.addEventListener("keydown", (u) => {
|
|
1280
|
+
if (u.key === "Enter" || u.key === " ") {
|
|
1281
|
+
if (u.preventDefault(), t._dispatchHeaderClick?.(u, i, n)) return;
|
|
1282
|
+
fe(t, o);
|
|
1283
|
+
}
|
|
1284
|
+
});
|
|
1285
|
+
}
|
|
1286
|
+
if (o.resizable) {
|
|
1287
|
+
n.classList.add("resizable");
|
|
1288
|
+
const s = document.createElement("div");
|
|
1289
|
+
s.className = "resize-handle", s.setAttribute("aria-hidden", "true"), s.addEventListener("mousedown", (l) => {
|
|
1290
|
+
l.stopPropagation(), l.preventDefault(), t._resizeController.start(l, i, n);
|
|
1291
|
+
}), s.addEventListener("dblclick", (l) => {
|
|
1292
|
+
l.stopPropagation(), l.preventDefault(), t._resizeController.resetColumn(i);
|
|
1293
|
+
}), n.appendChild(s);
|
|
1294
|
+
}
|
|
1295
|
+
e.appendChild(n);
|
|
1296
|
+
}), e.querySelectorAll(".cell.sortable").forEach((o) => {
|
|
1297
|
+
o.getAttribute("aria-sort") || o.setAttribute("aria-sort", "none");
|
|
1298
|
+
}), e.children.length > 0 ? (e.setAttribute("role", "row"), e.setAttribute("aria-rowindex", "1")) : (e.removeAttribute("role"), e.removeAttribute("aria-rowindex")));
|
|
1299
|
+
}
|
|
1300
|
+
const Pe = typeof requestIdleCallback == "function";
|
|
1301
|
+
function ft(t, e) {
|
|
1302
|
+
return Pe ? requestIdleCallback(t, e) : window.setTimeout(() => {
|
|
1303
|
+
const o = Date.now();
|
|
1304
|
+
t({
|
|
1305
|
+
didTimeout: !1,
|
|
1306
|
+
timeRemaining: () => Math.max(0, 50 - (Date.now() - o))
|
|
1307
|
+
});
|
|
1308
|
+
}, 1);
|
|
1309
|
+
}
|
|
1310
|
+
function ge(t) {
|
|
1311
|
+
Pe ? cancelIdleCallback(t) : clearTimeout(t);
|
|
1312
|
+
}
|
|
1313
|
+
var x = /* @__PURE__ */ ((t) => (t[t.STYLE = 1] = "STYLE", t[t.VIRTUALIZATION = 2] = "VIRTUALIZATION", t[t.HEADER = 3] = "HEADER", t[t.ROWS = 4] = "ROWS", t[t.COLUMNS = 5] = "COLUMNS", t[t.FULL = 6] = "FULL", t))(x || {});
|
|
1314
|
+
class pt {
|
|
1315
|
+
#i;
|
|
1216
1316
|
/** Current pending phase (0 = none pending) */
|
|
1217
1317
|
#c = 0;
|
|
1218
1318
|
/** RAF handle for cancellation */
|
|
@@ -1224,7 +1324,7 @@ class lt {
|
|
|
1224
1324
|
#n = null;
|
|
1225
1325
|
#h = !1;
|
|
1226
1326
|
constructor(e) {
|
|
1227
|
-
this.#
|
|
1327
|
+
this.#i = e;
|
|
1228
1328
|
}
|
|
1229
1329
|
/**
|
|
1230
1330
|
* Request a render at the specified phase.
|
|
@@ -1282,23 +1382,23 @@ class lt {
|
|
|
1282
1382
|
* This is the single RAF callback that does all rendering.
|
|
1283
1383
|
*/
|
|
1284
1384
|
#p() {
|
|
1285
|
-
if (this.#f = 0, !this.#
|
|
1385
|
+
if (this.#f = 0, !this.#i.isConnected()) {
|
|
1286
1386
|
this.#c = 0, this.#r && (this.#r(), this.#r = null, this.#d = null);
|
|
1287
1387
|
return;
|
|
1288
1388
|
}
|
|
1289
1389
|
const e = this.#c;
|
|
1290
|
-
this.#c = 0, e >= 5 && this.#
|
|
1390
|
+
this.#c = 0, e >= 5 && this.#i.mergeConfig(), e >= 4 && this.#i.processRows(), e >= 5 && (this.#i.processColumns(), this.#i.updateTemplate()), e >= 3 && this.#i.renderHeader(), e >= 2 && this.#i.renderVirtualWindow(), e >= 1 && this.#i.afterRender(), !this.#h && this.#n && (this.#h = !0, this.#n()), this.#r && (this.#r(), this.#r = null, this.#d = null);
|
|
1291
1391
|
}
|
|
1292
1392
|
}
|
|
1293
|
-
function
|
|
1393
|
+
function gt(t) {
|
|
1294
1394
|
let e = null, o = null, i = null, n = null;
|
|
1295
1395
|
const r = (a) => {
|
|
1296
1396
|
if (!e) return;
|
|
1297
|
-
const c = a.clientX - e.startX,
|
|
1298
|
-
d.width =
|
|
1397
|
+
const c = a.clientX - e.startX, u = Math.max(40, e.startWidth + c), d = t._visibleColumns[e.colIndex];
|
|
1398
|
+
d.width = u, d.__userResized = !0, d.__renderedWidth = u, o == null && (o = requestAnimationFrame(() => {
|
|
1299
1399
|
o = null, t.updateTemplate?.();
|
|
1300
1400
|
})), t.dispatchEvent(
|
|
1301
|
-
new CustomEvent("column-resize", { detail: { field: d.field, width:
|
|
1401
|
+
new CustomEvent("column-resize", { detail: { field: d.field, width: u } })
|
|
1302
1402
|
);
|
|
1303
1403
|
};
|
|
1304
1404
|
let s = !1;
|
|
@@ -1312,9 +1412,9 @@ function at(t) {
|
|
|
1312
1412
|
get isResizing() {
|
|
1313
1413
|
return e !== null || s;
|
|
1314
1414
|
},
|
|
1315
|
-
start(a, c,
|
|
1415
|
+
start(a, c, u) {
|
|
1316
1416
|
a.preventDefault();
|
|
1317
|
-
const d = t._visibleColumns[c], f = typeof d?.width == "number" ? d.width : void 0, p = d?.__renderedWidth ?? f ??
|
|
1417
|
+
const d = t._visibleColumns[c], f = typeof d?.width == "number" ? d.width : void 0, p = d?.__renderedWidth ?? f ?? u.getBoundingClientRect().width;
|
|
1318
1418
|
e = { startX: a.clientX, colIndex: c, startWidth: p }, window.addEventListener("mousemove", r), 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";
|
|
1319
1419
|
},
|
|
1320
1420
|
resetColumn(a) {
|
|
@@ -1328,7 +1428,7 @@ function at(t) {
|
|
|
1328
1428
|
}
|
|
1329
1429
|
};
|
|
1330
1430
|
}
|
|
1331
|
-
function
|
|
1431
|
+
function X(t, e, o) {
|
|
1332
1432
|
const i = document.createElement(t);
|
|
1333
1433
|
if (e)
|
|
1334
1434
|
for (const n in e) {
|
|
@@ -1337,7 +1437,7 @@ function F(t, e, o) {
|
|
|
1337
1437
|
}
|
|
1338
1438
|
return i;
|
|
1339
1439
|
}
|
|
1340
|
-
function
|
|
1440
|
+
function A(t, e) {
|
|
1341
1441
|
const o = document.createElement("div");
|
|
1342
1442
|
if (t && (o.className = t), e)
|
|
1343
1443
|
for (const i in e) {
|
|
@@ -1346,7 +1446,7 @@ function T(t, e) {
|
|
|
1346
1446
|
}
|
|
1347
1447
|
return o;
|
|
1348
1448
|
}
|
|
1349
|
-
function
|
|
1449
|
+
function Le(t, e, o) {
|
|
1350
1450
|
const i = document.createElement("button");
|
|
1351
1451
|
if (t && (i.className = t), e)
|
|
1352
1452
|
for (const n in e) {
|
|
@@ -1355,8 +1455,8 @@ function Re(t, e, o) {
|
|
|
1355
1455
|
}
|
|
1356
1456
|
return i;
|
|
1357
1457
|
}
|
|
1358
|
-
const
|
|
1359
|
-
|
|
1458
|
+
const He = document.createElement("template");
|
|
1459
|
+
He.innerHTML = `
|
|
1360
1460
|
<div class="tbw-scroll-area">
|
|
1361
1461
|
<div class="rows-body-wrapper">
|
|
1362
1462
|
<div class="rows-body" role="grid">
|
|
@@ -1375,38 +1475,38 @@ xe.innerHTML = `
|
|
|
1375
1475
|
<div class="faux-vscroll-spacer"></div>
|
|
1376
1476
|
</div>
|
|
1377
1477
|
`;
|
|
1378
|
-
function
|
|
1379
|
-
return
|
|
1478
|
+
function Oe() {
|
|
1479
|
+
return He.content.cloneNode(!0);
|
|
1380
1480
|
}
|
|
1381
|
-
function
|
|
1382
|
-
const e = document.createDocumentFragment(), o =
|
|
1481
|
+
function me(t) {
|
|
1482
|
+
const e = document.createDocumentFragment(), o = A(t.hasShell ? "tbw-grid-root has-shell" : "tbw-grid-root");
|
|
1383
1483
|
if (t.hasShell && t.shellHeader && t.shellBody)
|
|
1384
1484
|
o.appendChild(t.shellHeader), o.appendChild(t.shellBody);
|
|
1385
1485
|
else {
|
|
1386
|
-
const i =
|
|
1387
|
-
i.appendChild(
|
|
1486
|
+
const i = A("tbw-grid-content");
|
|
1487
|
+
i.appendChild(Oe()), o.appendChild(i);
|
|
1388
1488
|
}
|
|
1389
1489
|
return e.appendChild(o), e;
|
|
1390
1490
|
}
|
|
1391
|
-
function
|
|
1392
|
-
const e =
|
|
1491
|
+
function mt(t) {
|
|
1492
|
+
const e = A("tbw-shell-header", { part: "shell-header", role: "presentation" });
|
|
1393
1493
|
if (t.title) {
|
|
1394
|
-
const r =
|
|
1494
|
+
const r = A("tbw-shell-title");
|
|
1395
1495
|
r.textContent = t.title, e.appendChild(r);
|
|
1396
1496
|
}
|
|
1397
|
-
const o =
|
|
1497
|
+
const o = A("tbw-shell-content", {
|
|
1398
1498
|
part: "shell-content",
|
|
1399
1499
|
role: "presentation",
|
|
1400
1500
|
"data-light-dom-header-content": ""
|
|
1401
1501
|
});
|
|
1402
1502
|
e.appendChild(o);
|
|
1403
|
-
const i =
|
|
1503
|
+
const i = A("tbw-shell-toolbar", { part: "shell-toolbar", role: "presentation" });
|
|
1404
1504
|
for (const r of t.configButtons)
|
|
1405
|
-
(r.hasElement || r.hasRender) && i.appendChild(
|
|
1505
|
+
(r.hasElement || r.hasRender) && i.appendChild(A("tbw-toolbar-btn-slot", { "data-btn-slot": r.id }));
|
|
1406
1506
|
for (const r of t.apiButtons)
|
|
1407
|
-
(r.hasElement || r.hasRender) && i.appendChild(
|
|
1408
|
-
if (i.appendChild(
|
|
1409
|
-
const r =
|
|
1507
|
+
(r.hasElement || r.hasRender) && i.appendChild(A("tbw-toolbar-btn-slot", { "data-btn-slot": r.id }));
|
|
1508
|
+
if (i.appendChild(A("tbw-toolbar-light-dom", { "data-light-dom-toolbar": "" })), (t.configButtons.some((r) => r.hasElement || r.hasRender) || t.apiButtons.some((r) => r.hasElement || r.hasRender)) && t.hasPanels && i.appendChild(A("tbw-toolbar-separator")), t.hasPanels) {
|
|
1509
|
+
const r = Le(t.isPanelOpen ? "tbw-toolbar-btn active" : "tbw-toolbar-btn", {
|
|
1410
1510
|
"data-panel-toggle": "",
|
|
1411
1511
|
title: "Settings",
|
|
1412
1512
|
"aria-label": "Toggle settings panel",
|
|
@@ -1417,12 +1517,12 @@ function ct(t) {
|
|
|
1417
1517
|
}
|
|
1418
1518
|
return e.appendChild(i), e;
|
|
1419
1519
|
}
|
|
1420
|
-
function
|
|
1421
|
-
const e =
|
|
1422
|
-
n.appendChild(
|
|
1520
|
+
function bt(t) {
|
|
1521
|
+
const e = A("tbw-shell-body"), o = t.panels.length > 0, i = t.panels.length === 1, n = A("tbw-grid-content");
|
|
1522
|
+
n.appendChild(Oe());
|
|
1423
1523
|
let r = null;
|
|
1424
1524
|
if (o) {
|
|
1425
|
-
r =
|
|
1525
|
+
r = X("aside", {
|
|
1426
1526
|
class: t.isPanelOpen ? "tbw-tool-panel open" : "tbw-tool-panel",
|
|
1427
1527
|
part: "tool-panel",
|
|
1428
1528
|
"data-position": t.position,
|
|
@@ -1431,29 +1531,29 @@ function dt(t) {
|
|
|
1431
1531
|
});
|
|
1432
1532
|
const s = t.position === "left" ? "right" : "left";
|
|
1433
1533
|
r.appendChild(
|
|
1434
|
-
|
|
1534
|
+
A("tbw-tool-panel-resize", {
|
|
1435
1535
|
"data-resize-handle": "",
|
|
1436
1536
|
"data-handle-position": s,
|
|
1437
1537
|
"aria-hidden": "true"
|
|
1438
1538
|
})
|
|
1439
1539
|
);
|
|
1440
|
-
const l =
|
|
1540
|
+
const l = A("tbw-tool-panel-content", { role: "presentation" }), a = A("tbw-accordion");
|
|
1441
1541
|
for (const c of t.panels) {
|
|
1442
|
-
const
|
|
1542
|
+
const u = `tbw-accordion-section${c.isExpanded ? " expanded" : ""}${i ? " single" : ""}`, d = A(u, { "data-section": c.id }), f = Le("tbw-accordion-header", {
|
|
1443
1543
|
"aria-expanded": String(c.isExpanded),
|
|
1444
1544
|
"aria-controls": `tbw-section-${c.id}`
|
|
1445
1545
|
});
|
|
1446
1546
|
if (i && f.setAttribute("aria-disabled", "true"), c.icon) {
|
|
1447
|
-
const
|
|
1448
|
-
|
|
1547
|
+
const h = X("span", { class: "tbw-accordion-icon" });
|
|
1548
|
+
h.innerHTML = c.icon, f.appendChild(h);
|
|
1449
1549
|
}
|
|
1450
|
-
const p =
|
|
1550
|
+
const p = X("span", { class: "tbw-accordion-title" });
|
|
1451
1551
|
if (p.textContent = c.title, f.appendChild(p), !i) {
|
|
1452
|
-
const
|
|
1453
|
-
|
|
1552
|
+
const h = X("span", { class: "tbw-accordion-chevron" });
|
|
1553
|
+
h.innerHTML = c.isExpanded ? t.collapseIcon : t.expandIcon, f.appendChild(h);
|
|
1454
1554
|
}
|
|
1455
1555
|
d.appendChild(f), d.appendChild(
|
|
1456
|
-
|
|
1556
|
+
A("tbw-accordion-content", {
|
|
1457
1557
|
id: `tbw-section-${c.id}`,
|
|
1458
1558
|
role: "presentation"
|
|
1459
1559
|
})
|
|
@@ -1463,10 +1563,10 @@ function dt(t) {
|
|
|
1463
1563
|
}
|
|
1464
1564
|
return t.position === "left" && r ? (e.appendChild(r), e.appendChild(n)) : (e.appendChild(n), r && e.appendChild(r)), e;
|
|
1465
1565
|
}
|
|
1466
|
-
function
|
|
1566
|
+
function z(t) {
|
|
1467
1567
|
return t ? typeof t == "string" ? t : t.outerHTML : "";
|
|
1468
1568
|
}
|
|
1469
|
-
function
|
|
1569
|
+
function wt() {
|
|
1470
1570
|
return {
|
|
1471
1571
|
toolPanels: /* @__PURE__ */ new Map(),
|
|
1472
1572
|
headerContents: /* @__PURE__ */ new Map(),
|
|
@@ -1485,31 +1585,31 @@ function ht() {
|
|
|
1485
1585
|
lightDomToolButtonsMoved: !1
|
|
1486
1586
|
};
|
|
1487
1587
|
}
|
|
1488
|
-
function
|
|
1588
|
+
function Me(t) {
|
|
1489
1589
|
return !!(t?.header?.title || t?.header?.toolbarButtons?.length || t?.toolPanels?.length || t?.headerContents?.length || t?.header?.lightDomContent?.length || t?.header?.hasToolButtonsContainer);
|
|
1490
1590
|
}
|
|
1491
|
-
function
|
|
1492
|
-
const i = t?.header?.title ?? e.lightDomTitle ?? "", n = !!i, r =
|
|
1493
|
-
let
|
|
1591
|
+
function be(t, e, o = "☰") {
|
|
1592
|
+
const i = t?.header?.title ?? e.lightDomTitle ?? "", n = !!i, r = z(o), s = t?.header?.toolbarButtons ?? [], l = s.some((g) => g.element || g.render), a = [...e.toolbarButtons.values()].some((g) => g.element || g.render), c = e.toolPanels.size > 0, d = (l || a) && c, f = [...s].sort((g, w) => (g.order ?? 100) - (w.order ?? 100)), p = [...e.toolbarButtons.values()].sort((g, w) => (g.order ?? 100) - (w.order ?? 100));
|
|
1593
|
+
let h = "";
|
|
1494
1594
|
for (const g of f)
|
|
1495
|
-
(g.element || g.render) && (
|
|
1595
|
+
(g.element || g.render) && (h += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${g.id}"></div>`);
|
|
1496
1596
|
for (const g of p)
|
|
1497
|
-
(g.element || g.render) && (
|
|
1498
|
-
if (
|
|
1597
|
+
(g.element || g.render) && (h += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${g.id}"></div>`);
|
|
1598
|
+
if (h += '<div class="tbw-toolbar-light-dom" data-light-dom-toolbar></div>', d && (h += '<div class="tbw-toolbar-separator"></div>'), c) {
|
|
1499
1599
|
const g = e.isPanelOpen;
|
|
1500
|
-
|
|
1600
|
+
h += `<button class="${g ? "tbw-toolbar-btn active" : "tbw-toolbar-btn"}" data-panel-toggle title="Settings" aria-label="Toggle settings panel" aria-pressed="${g}" aria-controls="tbw-tool-panel">${r}</button>`;
|
|
1501
1601
|
}
|
|
1502
1602
|
return `
|
|
1503
1603
|
<div class="tbw-shell-header" part="shell-header" role="presentation">
|
|
1504
|
-
${n ? `<div class="tbw-shell-title">${
|
|
1604
|
+
${n ? `<div class="tbw-shell-title">${Ue(i)}</div>` : ""}
|
|
1505
1605
|
<div class="tbw-shell-content" part="shell-content" role="presentation" data-light-dom-header-content></div>
|
|
1506
1606
|
<div class="tbw-shell-toolbar" part="shell-toolbar" role="presentation">
|
|
1507
|
-
${
|
|
1607
|
+
${h}
|
|
1508
1608
|
</div>
|
|
1509
1609
|
</div>
|
|
1510
1610
|
`;
|
|
1511
1611
|
}
|
|
1512
|
-
function
|
|
1612
|
+
function N(t, e) {
|
|
1513
1613
|
const o = t.querySelector("tbw-grid-header");
|
|
1514
1614
|
if (!o) return;
|
|
1515
1615
|
if (!e.lightDomTitle) {
|
|
@@ -1519,11 +1619,11 @@ function M(t, e) {
|
|
|
1519
1619
|
const i = o.querySelectorAll("tbw-grid-header-content");
|
|
1520
1620
|
i.length > 0 && e.lightDomHeaderContent.length === 0 && (e.lightDomHeaderContent = Array.from(i)), o.style.display = "none";
|
|
1521
1621
|
}
|
|
1522
|
-
function
|
|
1622
|
+
function k(t, e) {
|
|
1523
1623
|
const o = t.querySelector(":scope > tbw-grid-tool-buttons");
|
|
1524
1624
|
o && (e.hasToolButtonsContainer = !0, o.style.display = "none");
|
|
1525
1625
|
}
|
|
1526
|
-
function
|
|
1626
|
+
function I(t, e, o) {
|
|
1527
1627
|
t.querySelectorAll(":scope > tbw-grid-tool-panel").forEach((n) => {
|
|
1528
1628
|
const r = n, s = r.getAttribute("id"), l = r.getAttribute("title");
|
|
1529
1629
|
if (!s || !l) {
|
|
@@ -1532,39 +1632,39 @@ function N(t, e, o) {
|
|
|
1532
1632
|
);
|
|
1533
1633
|
return;
|
|
1534
1634
|
}
|
|
1535
|
-
const a = r.getAttribute("icon") ?? void 0, c = r.getAttribute("tooltip") ?? void 0,
|
|
1635
|
+
const a = r.getAttribute("icon") ?? void 0, c = r.getAttribute("tooltip") ?? void 0, u = parseInt(r.getAttribute("order") ?? "100", 10);
|
|
1536
1636
|
let d;
|
|
1537
1637
|
const f = o?.(r);
|
|
1538
1638
|
if (f)
|
|
1539
1639
|
d = f;
|
|
1540
1640
|
else {
|
|
1541
1641
|
const g = r.innerHTML.trim();
|
|
1542
|
-
d = (
|
|
1543
|
-
const
|
|
1544
|
-
return
|
|
1642
|
+
d = (w) => {
|
|
1643
|
+
const _ = document.createElement("div");
|
|
1644
|
+
return _.innerHTML = g, w.appendChild(_), () => _.remove();
|
|
1545
1645
|
};
|
|
1546
1646
|
}
|
|
1547
1647
|
const p = e.toolPanels.get(s);
|
|
1548
1648
|
if (p) {
|
|
1549
1649
|
if (f) {
|
|
1550
|
-
p.render = d, p.order =
|
|
1650
|
+
p.render = d, p.order = u, p.icon = a, p.tooltip = c;
|
|
1551
1651
|
const g = e.panelCleanups.get(s);
|
|
1552
1652
|
g && (g(), e.panelCleanups.delete(s));
|
|
1553
1653
|
}
|
|
1554
1654
|
return;
|
|
1555
1655
|
}
|
|
1556
|
-
const
|
|
1656
|
+
const h = {
|
|
1557
1657
|
id: s,
|
|
1558
1658
|
title: l,
|
|
1559
1659
|
icon: a,
|
|
1560
1660
|
tooltip: c,
|
|
1561
|
-
order:
|
|
1661
|
+
order: u,
|
|
1562
1662
|
render: d
|
|
1563
1663
|
};
|
|
1564
|
-
e.toolPanels.set(s,
|
|
1664
|
+
e.toolPanels.set(s, h), e.lightDomToolPanelIds.add(s), r.style.display = "none";
|
|
1565
1665
|
});
|
|
1566
1666
|
}
|
|
1567
|
-
function
|
|
1667
|
+
function vt(t, e, o, i) {
|
|
1568
1668
|
const n = t.querySelector(".tbw-shell-toolbar");
|
|
1569
1669
|
n && n.addEventListener("click", (s) => {
|
|
1570
1670
|
const l = s.target;
|
|
@@ -1574,44 +1674,44 @@ function ut(t, e, o, i) {
|
|
|
1574
1674
|
}
|
|
1575
1675
|
const c = l.closest("[data-btn]");
|
|
1576
1676
|
if (c) {
|
|
1577
|
-
const
|
|
1578
|
-
|
|
1677
|
+
const u = c.getAttribute("data-btn");
|
|
1678
|
+
u && i.onToolbarButtonClick(u);
|
|
1579
1679
|
}
|
|
1580
1680
|
});
|
|
1581
1681
|
const r = t.querySelector(".tbw-accordion");
|
|
1582
1682
|
r && r.addEventListener("click", (s) => {
|
|
1583
1683
|
const a = s.target.closest(".tbw-accordion-header");
|
|
1584
1684
|
if (a) {
|
|
1585
|
-
const
|
|
1586
|
-
|
|
1685
|
+
const u = a.closest("[data-section]")?.getAttribute("data-section");
|
|
1686
|
+
u && i.onSectionToggle(u);
|
|
1587
1687
|
}
|
|
1588
1688
|
});
|
|
1589
1689
|
}
|
|
1590
|
-
function
|
|
1690
|
+
function Ct(t, e, o) {
|
|
1591
1691
|
const i = t.querySelector(".tbw-tool-panel"), n = t.querySelector("[data-resize-handle]"), r = t.querySelector(".tbw-shell-body");
|
|
1592
1692
|
if (!i || !n || !r)
|
|
1593
1693
|
return () => {
|
|
1594
1694
|
};
|
|
1595
1695
|
const s = e?.toolPanel?.position ?? "right", l = 200;
|
|
1596
|
-
let a = 0, c = 0,
|
|
1696
|
+
let a = 0, c = 0, u = 0, d = !1;
|
|
1597
1697
|
const f = (g) => {
|
|
1598
1698
|
if (!d) return;
|
|
1599
1699
|
g.preventDefault();
|
|
1600
|
-
const
|
|
1601
|
-
i.style.width = `${
|
|
1700
|
+
const w = s === "left" ? g.clientX - a : a - g.clientX, _ = Math.min(u, Math.max(l, c + w));
|
|
1701
|
+
i.style.width = `${_}px`;
|
|
1602
1702
|
}, p = () => {
|
|
1603
1703
|
if (!d) return;
|
|
1604
1704
|
d = !1, n.classList.remove("resizing"), i.style.transition = "", document.body.style.cursor = "", document.body.style.userSelect = "";
|
|
1605
1705
|
const g = i.getBoundingClientRect().width;
|
|
1606
1706
|
o(g), document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", p);
|
|
1607
|
-
},
|
|
1608
|
-
g.preventDefault(), d = !0, a = g.clientX, c = i.getBoundingClientRect().width,
|
|
1707
|
+
}, h = (g) => {
|
|
1708
|
+
g.preventDefault(), d = !0, a = g.clientX, c = i.getBoundingClientRect().width, u = r.getBoundingClientRect().width - 20, n.classList.add("resizing"), i.style.transition = "none", document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", f), document.addEventListener("mouseup", p);
|
|
1609
1709
|
};
|
|
1610
|
-
return n.addEventListener("mousedown",
|
|
1611
|
-
n.removeEventListener("mousedown",
|
|
1710
|
+
return n.addEventListener("mousedown", h), () => {
|
|
1711
|
+
n.removeEventListener("mousedown", h), document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", p);
|
|
1612
1712
|
};
|
|
1613
1713
|
}
|
|
1614
|
-
function
|
|
1714
|
+
function yt(t, e, o, i) {
|
|
1615
1715
|
const n = [...e?.header?.toolbarButtons ?? [], ...o.toolbarButtons.values()];
|
|
1616
1716
|
for (const r of n) {
|
|
1617
1717
|
if (r.element?.parentNode || o.toolbarButtonCleanups.has(r.id)) continue;
|
|
@@ -1634,7 +1734,7 @@ function pt(t, e, o, i) {
|
|
|
1634
1734
|
}
|
|
1635
1735
|
}
|
|
1636
1736
|
}
|
|
1637
|
-
function
|
|
1737
|
+
function De(t, e) {
|
|
1638
1738
|
const o = e.lightDomHeaderContent.length > 0 && !e.lightDomContentMoved, i = e.headerContents.size > 0;
|
|
1639
1739
|
if (!o && !i) return;
|
|
1640
1740
|
const n = t.querySelector(".tbw-shell-content");
|
|
@@ -1654,15 +1754,15 @@ function Le(t, e) {
|
|
|
1654
1754
|
c && e.headerContentCleanups.set(s.id, c);
|
|
1655
1755
|
}
|
|
1656
1756
|
}
|
|
1657
|
-
function
|
|
1757
|
+
function _t(t, e, o) {
|
|
1658
1758
|
if (!e.isPanelOpen) return;
|
|
1659
|
-
const i =
|
|
1759
|
+
const i = z(o?.expand ?? M.expand), n = z(o?.collapse ?? M.collapse);
|
|
1660
1760
|
for (const [r, s] of e.toolPanels) {
|
|
1661
1761
|
const l = e.expandedSections.has(r), a = t.querySelector(`[data-section="${r}"]`), c = a?.querySelector(".tbw-accordion-content");
|
|
1662
1762
|
if (!a || !c) continue;
|
|
1663
1763
|
a.classList.toggle("expanded", l);
|
|
1664
|
-
const
|
|
1665
|
-
|
|
1764
|
+
const u = a.querySelector(".tbw-accordion-header");
|
|
1765
|
+
u && u.setAttribute("aria-expanded", String(l));
|
|
1666
1766
|
const d = a.querySelector(".tbw-accordion-chevron");
|
|
1667
1767
|
if (d && (d.innerHTML = l ? n : i), l) {
|
|
1668
1768
|
if (c.children.length === 0) {
|
|
@@ -1675,15 +1775,15 @@ function gt(t, e, o) {
|
|
|
1675
1775
|
}
|
|
1676
1776
|
}
|
|
1677
1777
|
}
|
|
1678
|
-
function
|
|
1778
|
+
function we(t, e) {
|
|
1679
1779
|
const o = t.querySelector("[data-panel-toggle]");
|
|
1680
1780
|
o && (o.classList.toggle("active", e.isPanelOpen), o.setAttribute("aria-pressed", String(e.isPanelOpen)));
|
|
1681
1781
|
}
|
|
1682
|
-
function
|
|
1782
|
+
function ve(t, e) {
|
|
1683
1783
|
const o = t.querySelector(".tbw-tool-panel");
|
|
1684
1784
|
o && (o.classList.toggle("open", e.isPanelOpen), e.isPanelOpen || (o.style.width = ""));
|
|
1685
1785
|
}
|
|
1686
|
-
function
|
|
1786
|
+
function Et(t, e) {
|
|
1687
1787
|
const o = [];
|
|
1688
1788
|
for (const i of t?.header?.toolbarButtons ?? [])
|
|
1689
1789
|
o.push({
|
|
@@ -1706,7 +1806,7 @@ function mt(t, e) {
|
|
|
1706
1806
|
});
|
|
1707
1807
|
return o;
|
|
1708
1808
|
}
|
|
1709
|
-
function
|
|
1809
|
+
function St(t) {
|
|
1710
1810
|
for (const e of t.headerContentCleanups.values())
|
|
1711
1811
|
e();
|
|
1712
1812
|
t.headerContentCleanups.clear();
|
|
@@ -1720,7 +1820,7 @@ function bt(t) {
|
|
|
1720
1820
|
t.toolPanels.get(e)?.onClose?.();
|
|
1721
1821
|
t.isPanelOpen = !1, t.expandedSections.clear(), t.toolPanels.clear(), t.headerContents.clear(), t.toolbarButtons.clear(), t.lightDomHeaderContent = [], t.lightDomContentMoved = !1, t.lightDomToolButtonsMoved = !1;
|
|
1722
1822
|
}
|
|
1723
|
-
function
|
|
1823
|
+
function Tt(t, e) {
|
|
1724
1824
|
let o = !1;
|
|
1725
1825
|
const i = {
|
|
1726
1826
|
get isInitialized() {
|
|
@@ -1749,7 +1849,7 @@ function wt(t, e) {
|
|
|
1749
1849
|
s && t.expandedSections.add(s.id);
|
|
1750
1850
|
}
|
|
1751
1851
|
const n = e.getShadow();
|
|
1752
|
-
|
|
1852
|
+
we(n, t), ve(n, t), _t(n, t, e.getAccordionIcons()), e.emit("tool-panel-open", { sections: i.expandedSections });
|
|
1753
1853
|
},
|
|
1754
1854
|
closeToolPanel() {
|
|
1755
1855
|
if (!t.isPanelOpen) return;
|
|
@@ -1760,7 +1860,7 @@ function wt(t, e) {
|
|
|
1760
1860
|
r.onClose?.();
|
|
1761
1861
|
t.isPanelOpen = !1;
|
|
1762
1862
|
const n = e.getShadow();
|
|
1763
|
-
|
|
1863
|
+
we(n, t), ve(n, t), e.emit("tool-panel-close", {});
|
|
1764
1864
|
},
|
|
1765
1865
|
toggleToolPanel() {
|
|
1766
1866
|
t.isPanelOpen ? i.closeToolPanel() : i.openToolPanel();
|
|
@@ -1776,16 +1876,16 @@ function wt(t, e) {
|
|
|
1776
1876
|
const s = e.getShadow(), l = t.expandedSections.has(n);
|
|
1777
1877
|
if (l) {
|
|
1778
1878
|
const a = t.panelCleanups.get(n);
|
|
1779
|
-
a && (a(), t.panelCleanups.delete(n)), r.onClose?.(), t.expandedSections.delete(n),
|
|
1879
|
+
a && (a(), t.panelCleanups.delete(n)), r.onClose?.(), t.expandedSections.delete(n), te(s, n, !1);
|
|
1780
1880
|
} else {
|
|
1781
1881
|
for (const [a, c] of t.toolPanels)
|
|
1782
1882
|
if (a !== n && t.expandedSections.has(a)) {
|
|
1783
|
-
const
|
|
1784
|
-
|
|
1883
|
+
const u = t.panelCleanups.get(a);
|
|
1884
|
+
u && (u(), t.panelCleanups.delete(a)), c.onClose?.(), t.expandedSections.delete(a), te(s, a, !1);
|
|
1785
1885
|
const d = s.querySelector(`[data-section="${a}"] .tbw-accordion-content`);
|
|
1786
1886
|
d && (d.innerHTML = "");
|
|
1787
1887
|
}
|
|
1788
|
-
t.expandedSections.add(n),
|
|
1888
|
+
t.expandedSections.add(n), te(s, n, !0), Rt(s, t, n);
|
|
1789
1889
|
}
|
|
1790
1890
|
e.emit("tool-panel-section-toggle", { id: n, expanded: !l });
|
|
1791
1891
|
},
|
|
@@ -1814,14 +1914,14 @@ function wt(t, e) {
|
|
|
1814
1914
|
console.warn(`[tbw-grid] Header content "${n.id}" already registered`);
|
|
1815
1915
|
return;
|
|
1816
1916
|
}
|
|
1817
|
-
t.headerContents.set(n.id, n), o &&
|
|
1917
|
+
t.headerContents.set(n.id, n), o && De(e.getShadow(), t);
|
|
1818
1918
|
},
|
|
1819
1919
|
unregisterHeaderContent(n) {
|
|
1820
1920
|
const r = t.headerContentCleanups.get(n);
|
|
1821
1921
|
r && (r(), t.headerContentCleanups.delete(n)), t.headerContents.get(n)?.onDestroy?.(), t.headerContents.delete(n), e.getShadow().querySelector(`[data-header-content="${n}"]`)?.remove();
|
|
1822
1922
|
},
|
|
1823
1923
|
getToolbarButtons() {
|
|
1824
|
-
return
|
|
1924
|
+
return Et(e.getShellConfig(), t);
|
|
1825
1925
|
},
|
|
1826
1926
|
registerToolbarButton(n) {
|
|
1827
1927
|
if (t.toolbarButtons.has(n.id)) {
|
|
@@ -1845,11 +1945,11 @@ function wt(t, e) {
|
|
|
1845
1945
|
};
|
|
1846
1946
|
return i;
|
|
1847
1947
|
}
|
|
1848
|
-
function
|
|
1948
|
+
function te(t, e, o) {
|
|
1849
1949
|
const i = t.querySelector(`[data-section="${e}"]`);
|
|
1850
1950
|
i && i.classList.toggle("expanded", o);
|
|
1851
1951
|
}
|
|
1852
|
-
function
|
|
1952
|
+
function Rt(t, e, o) {
|
|
1853
1953
|
const i = e.toolPanels.get(o);
|
|
1854
1954
|
if (!i?.render) return;
|
|
1855
1955
|
const n = t.querySelector(`[data-section="${o}"] .tbw-accordion-content`);
|
|
@@ -1857,24 +1957,24 @@ function vt(t, e, o) {
|
|
|
1857
1957
|
const r = i.render(n);
|
|
1858
1958
|
r && e.panelCleanups.set(o, r);
|
|
1859
1959
|
}
|
|
1860
|
-
function
|
|
1861
|
-
const n =
|
|
1960
|
+
function xt(t, e, o, i) {
|
|
1961
|
+
const n = Me(e), r = [], s = ["tbw-grid-header", "tbw-grid-tool-buttons", "tbw-grid-tool-panel", "tbw-grid-column"];
|
|
1862
1962
|
for (const l of s)
|
|
1863
1963
|
t.querySelectorAll(`:scope > ${l}`).forEach((c) => r.push(c));
|
|
1864
1964
|
t.replaceChildren();
|
|
1865
1965
|
for (const l of r)
|
|
1866
1966
|
t.appendChild(l);
|
|
1867
1967
|
if (n) {
|
|
1868
|
-
const l =
|
|
1968
|
+
const l = z(i?.toolPanel ?? M.toolPanel), a = z(i?.expand ?? M.expand), c = z(i?.collapse ?? M.collapse), d = [...e?.header?.toolbarButtons ?? []].sort((v, m) => (v.order ?? 100) - (m.order ?? 100)), p = [...e?.toolPanels ?? []].sort((v, m) => (v.order ?? 100) - (m.order ?? 100)), h = {
|
|
1869
1969
|
title: e?.header?.title ?? void 0,
|
|
1870
1970
|
hasPanels: p.length > 0,
|
|
1871
1971
|
isPanelOpen: o.isPanelOpen,
|
|
1872
1972
|
toolPanelIcon: l,
|
|
1873
1973
|
// All buttons are now in config (no more separate config vs API distinction for rendering)
|
|
1874
|
-
configButtons: d.map((
|
|
1875
|
-
id:
|
|
1876
|
-
hasElement: !!
|
|
1877
|
-
hasRender: !!
|
|
1974
|
+
configButtons: d.map((v) => ({
|
|
1975
|
+
id: v.id,
|
|
1976
|
+
hasElement: !!v.element,
|
|
1977
|
+
hasRender: !!v.render
|
|
1878
1978
|
})),
|
|
1879
1979
|
apiButtons: []
|
|
1880
1980
|
// No longer needed - all buttons merged into configButtons
|
|
@@ -1883,25 +1983,25 @@ function Ct(t, e, o, i) {
|
|
|
1883
1983
|
isPanelOpen: o.isPanelOpen,
|
|
1884
1984
|
expandIcon: a,
|
|
1885
1985
|
collapseIcon: c,
|
|
1886
|
-
panels: p.map((
|
|
1887
|
-
id:
|
|
1888
|
-
title:
|
|
1889
|
-
icon:
|
|
1890
|
-
isExpanded: o.expandedSections.has(
|
|
1986
|
+
panels: p.map((v) => ({
|
|
1987
|
+
id: v.id,
|
|
1988
|
+
title: v.title,
|
|
1989
|
+
icon: z(v.icon),
|
|
1990
|
+
isExpanded: o.expandedSections.has(v.id)
|
|
1891
1991
|
}))
|
|
1892
|
-
},
|
|
1992
|
+
}, w = mt(h), _ = bt(g), T = me({
|
|
1893
1993
|
hasShell: !0,
|
|
1894
|
-
shellHeader:
|
|
1895
|
-
shellBody:
|
|
1994
|
+
shellHeader: w,
|
|
1995
|
+
shellBody: _
|
|
1896
1996
|
});
|
|
1897
|
-
t.appendChild(
|
|
1997
|
+
t.appendChild(T);
|
|
1898
1998
|
} else {
|
|
1899
|
-
const l =
|
|
1999
|
+
const l = me({ hasShell: !1 });
|
|
1900
2000
|
t.appendChild(l);
|
|
1901
2001
|
}
|
|
1902
2002
|
return n;
|
|
1903
2003
|
}
|
|
1904
|
-
function
|
|
2004
|
+
function At() {
|
|
1905
2005
|
return {
|
|
1906
2006
|
startY: null,
|
|
1907
2007
|
startX: null,
|
|
@@ -1915,19 +2015,19 @@ function yt() {
|
|
|
1915
2015
|
momentumRaf: 0
|
|
1916
2016
|
};
|
|
1917
2017
|
}
|
|
1918
|
-
function
|
|
2018
|
+
function Pt(t) {
|
|
1919
2019
|
t.startY = null, t.startX = null, t.scrollTop = null, t.scrollLeft = null, t.lastY = null, t.lastX = null, t.lastTime = null;
|
|
1920
2020
|
}
|
|
1921
|
-
function
|
|
2021
|
+
function ze(t) {
|
|
1922
2022
|
t.momentumRaf && (cancelAnimationFrame(t.momentumRaf), t.momentumRaf = 0);
|
|
1923
2023
|
}
|
|
1924
|
-
function
|
|
2024
|
+
function Lt(t, e, o) {
|
|
1925
2025
|
if (t.touches.length !== 1) return;
|
|
1926
|
-
|
|
2026
|
+
ze(e);
|
|
1927
2027
|
const i = t.touches[0];
|
|
1928
2028
|
e.startY = i.clientY, e.startX = i.clientX, e.lastY = i.clientY, e.lastX = i.clientX, e.lastTime = performance.now(), e.scrollTop = o.fauxScrollbar.scrollTop, e.scrollLeft = o.scrollArea?.scrollLeft ?? 0, e.velocityY = 0, e.velocityX = 0;
|
|
1929
2029
|
}
|
|
1930
|
-
function
|
|
2030
|
+
function Ht(t, e, o) {
|
|
1931
2031
|
if (t.touches.length !== 1 || e.startY === null || e.startX === null || e.scrollTop === null || e.scrollLeft === null)
|
|
1932
2032
|
return !1;
|
|
1933
2033
|
const i = t.touches[0], n = i.clientY, r = i.clientX, s = performance.now(), l = e.startY - n, a = e.startX - r;
|
|
@@ -1936,18 +2036,18 @@ function St(t, e, o) {
|
|
|
1936
2036
|
g > 0 && (e.velocityY = (e.lastY - n) / g, e.velocityX = (e.lastX - r) / g);
|
|
1937
2037
|
}
|
|
1938
2038
|
e.lastY = n, e.lastX = r, e.lastTime = s;
|
|
1939
|
-
const { scrollTop: c, scrollHeight:
|
|
1940
|
-
let
|
|
2039
|
+
const { scrollTop: c, scrollHeight: u, clientHeight: d } = o.fauxScrollbar, f = u - d, p = l > 0 && c < f || l < 0 && c > 0;
|
|
2040
|
+
let h = !1;
|
|
1941
2041
|
if (o.scrollArea) {
|
|
1942
|
-
const { scrollLeft: g, scrollWidth:
|
|
1943
|
-
|
|
2042
|
+
const { scrollLeft: g, scrollWidth: w, clientWidth: _ } = o.scrollArea, T = w - _;
|
|
2043
|
+
h = a > 0 && g < T || a < 0 && g > 0;
|
|
1944
2044
|
}
|
|
1945
|
-
return p && (o.fauxScrollbar.scrollTop = e.scrollTop + l),
|
|
2045
|
+
return p && (o.fauxScrollbar.scrollTop = e.scrollTop + l), h && o.scrollArea && (o.scrollArea.scrollLeft = e.scrollLeft + a), p || h;
|
|
1946
2046
|
}
|
|
1947
|
-
function
|
|
1948
|
-
(Math.abs(t.velocityY) > 0.1 || Math.abs(t.velocityX) > 0.1) &&
|
|
2047
|
+
function Ot(t, e) {
|
|
2048
|
+
(Math.abs(t.velocityY) > 0.1 || Math.abs(t.velocityX) > 0.1) && Mt(t, e), Pt(t);
|
|
1949
2049
|
}
|
|
1950
|
-
function
|
|
2050
|
+
function Mt(t, e) {
|
|
1951
2051
|
const n = () => {
|
|
1952
2052
|
t.velocityY *= 0.95, t.velocityX *= 0.95;
|
|
1953
2053
|
const r = t.velocityY * 16, s = t.velocityX * 16;
|
|
@@ -1955,19 +2055,19 @@ function Rt(t, e) {
|
|
|
1955
2055
|
};
|
|
1956
2056
|
t.momentumRaf = requestAnimationFrame(n);
|
|
1957
2057
|
}
|
|
1958
|
-
function
|
|
1959
|
-
t.addEventListener("touchstart", (n) =>
|
|
2058
|
+
function Dt(t, e, o, i) {
|
|
2059
|
+
t.addEventListener("touchstart", (n) => Lt(n, e, o), {
|
|
1960
2060
|
passive: !0,
|
|
1961
2061
|
signal: i
|
|
1962
2062
|
}), t.addEventListener(
|
|
1963
2063
|
"touchmove",
|
|
1964
2064
|
(n) => {
|
|
1965
|
-
|
|
2065
|
+
Ht(n, e, o) && n.preventDefault();
|
|
1966
2066
|
},
|
|
1967
2067
|
{ passive: !1, signal: i }
|
|
1968
|
-
), t.addEventListener("touchend", () =>
|
|
2068
|
+
), t.addEventListener("touchend", () => Ot(e, o), { passive: !0, signal: i });
|
|
1969
2069
|
}
|
|
1970
|
-
const
|
|
2070
|
+
const zt = [
|
|
1971
2071
|
// EditingPlugin
|
|
1972
2072
|
{
|
|
1973
2073
|
property: "editable",
|
|
@@ -1997,7 +2097,7 @@ const At = [
|
|
|
1997
2097
|
importHint: "import { PinnedColumnsPlugin } from '@toolbox-web/grid/plugins/pinned-columns';",
|
|
1998
2098
|
isUsed: (t) => t === "left" || t === "right"
|
|
1999
2099
|
}
|
|
2000
|
-
],
|
|
2100
|
+
], Nt = [
|
|
2001
2101
|
// GroupingColumnsPlugin
|
|
2002
2102
|
{
|
|
2003
2103
|
property: "columnGroups",
|
|
@@ -2007,37 +2107,37 @@ const At = [
|
|
|
2007
2107
|
isUsed: (t) => Array.isArray(t) && t.length > 0
|
|
2008
2108
|
}
|
|
2009
2109
|
];
|
|
2010
|
-
function
|
|
2110
|
+
function D(t) {
|
|
2011
2111
|
return t.charAt(0).toUpperCase() + t.slice(1);
|
|
2012
2112
|
}
|
|
2013
|
-
function
|
|
2113
|
+
function Ce(t, e) {
|
|
2014
2114
|
return t.some((o) => o.name === e);
|
|
2015
2115
|
}
|
|
2016
|
-
function
|
|
2116
|
+
function kt(t, e) {
|
|
2017
2117
|
const o = /* @__PURE__ */ new Map();
|
|
2018
2118
|
function i(r, s, l, a, c = !1) {
|
|
2019
2119
|
o.has(r) || o.set(r, { description: s, importHint: l, fields: [], isConfigProperty: c });
|
|
2020
|
-
const
|
|
2021
|
-
|
|
2120
|
+
const u = o.get(r);
|
|
2121
|
+
u.fields.includes(a) || u.fields.push(a);
|
|
2022
2122
|
}
|
|
2023
|
-
for (const r of
|
|
2123
|
+
for (const r of Nt) {
|
|
2024
2124
|
const s = t[r.property];
|
|
2025
|
-
(r.isUsed ? r.isUsed(s) : s !== void 0) && !
|
|
2125
|
+
(r.isUsed ? r.isUsed(s) : s !== void 0) && !Ce(e, r.pluginName) && i(r.pluginName, r.description, r.importHint, r.property, !0);
|
|
2026
2126
|
}
|
|
2027
2127
|
const n = t.columns;
|
|
2028
2128
|
if (n && n.length > 0)
|
|
2029
2129
|
for (const r of n)
|
|
2030
|
-
for (const s of
|
|
2130
|
+
for (const s of zt) {
|
|
2031
2131
|
const l = r[s.property];
|
|
2032
|
-
if ((s.isUsed ? s.isUsed(l) : l !== void 0) && !
|
|
2132
|
+
if ((s.isUsed ? s.isUsed(l) : l !== void 0) && !Ce(e, s.pluginName)) {
|
|
2033
2133
|
const c = r.field || "<unknown>";
|
|
2034
2134
|
i(s.pluginName, s.description, s.importHint, c);
|
|
2035
2135
|
}
|
|
2036
2136
|
}
|
|
2037
2137
|
if (o.size > 0) {
|
|
2038
2138
|
const r = [];
|
|
2039
|
-
for (const [s, { description: l, importHint: a, fields: c, isConfigProperty:
|
|
2040
|
-
if (
|
|
2139
|
+
for (const [s, { description: l, importHint: a, fields: c, isConfigProperty: u }] of o)
|
|
2140
|
+
if (u)
|
|
2041
2141
|
r.push(
|
|
2042
2142
|
`Config uses ${l}, but the required plugin is not loaded.
|
|
2043
2143
|
→ Add the plugin to your gridConfig.plugins array:
|
|
@@ -2064,7 +2164,7 @@ This validation helps catch misconfigurations early. The properties listed above
|
|
|
2064
2164
|
);
|
|
2065
2165
|
}
|
|
2066
2166
|
}
|
|
2067
|
-
const
|
|
2167
|
+
const It = {
|
|
2068
2168
|
editing: "import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';",
|
|
2069
2169
|
selection: "import { SelectionPlugin } from '@toolbox-web/grid/plugins/selection';",
|
|
2070
2170
|
reorder: "import { ReorderPlugin } from '@toolbox-web/grid/plugins/reorder';",
|
|
@@ -2085,32 +2185,32 @@ const Ht = {
|
|
|
2085
2185
|
serverSide: "import { ServerSidePlugin } from '@toolbox-web/grid/plugins/server-side';",
|
|
2086
2186
|
columnVirtualization: "import { ColumnVirtualizationPlugin } from '@toolbox-web/grid/plugins/column-virtualization';"
|
|
2087
2187
|
};
|
|
2088
|
-
function
|
|
2089
|
-
return
|
|
2188
|
+
function qt(t) {
|
|
2189
|
+
return It[t] ?? `import { ${D(t)}Plugin } from '@toolbox-web/grid/plugins/${t}';`;
|
|
2090
2190
|
}
|
|
2091
|
-
function
|
|
2191
|
+
function Bt(t, e) {
|
|
2092
2192
|
const o = t.name, n = t.constructor.dependencies ?? [];
|
|
2093
2193
|
for (const r of n) {
|
|
2094
2194
|
const s = r.name, l = r.required ?? !0, a = r.reason;
|
|
2095
|
-
if (!e.some((
|
|
2096
|
-
const
|
|
2195
|
+
if (!e.some((u) => u.name === s)) {
|
|
2196
|
+
const u = a ?? `${D(o)}Plugin requires ${D(s)}Plugin`, d = qt(s);
|
|
2097
2197
|
if (l)
|
|
2098
2198
|
throw new Error(
|
|
2099
2199
|
`[tbw-grid] Plugin dependency error:
|
|
2100
2200
|
|
|
2101
|
-
${
|
|
2201
|
+
${u}.
|
|
2102
2202
|
|
|
2103
|
-
→ Add the plugin to your gridConfig.plugins array BEFORE ${
|
|
2203
|
+
→ Add the plugin to your gridConfig.plugins array BEFORE ${D(o)}Plugin:
|
|
2104
2204
|
${d}
|
|
2105
|
-
plugins: [new ${
|
|
2205
|
+
plugins: [new ${D(s)}Plugin(), new ${D(o)}Plugin()]`
|
|
2106
2206
|
);
|
|
2107
2207
|
console.info(
|
|
2108
|
-
`[tbw-grid] ${
|
|
2208
|
+
`[tbw-grid] ${D(o)}Plugin: Optional "${s}" plugin not found. Some features may be unavailable.`
|
|
2109
2209
|
);
|
|
2110
2210
|
}
|
|
2111
2211
|
}
|
|
2112
2212
|
}
|
|
2113
|
-
class
|
|
2213
|
+
class Wt {
|
|
2114
2214
|
constructor(e) {
|
|
2115
2215
|
this.grid = e;
|
|
2116
2216
|
}
|
|
@@ -2140,7 +2240,7 @@ class Mt {
|
|
|
2140
2240
|
* Validates dependencies and notifies other plugins of the new attachment.
|
|
2141
2241
|
*/
|
|
2142
2242
|
attach(e) {
|
|
2143
|
-
if (
|
|
2243
|
+
if (Bt(e, this.plugins), this.pluginMap.set(e.constructor, e), this.plugins.push(e), e.cellRenderers)
|
|
2144
2244
|
for (const [o, i] of Object.entries(e.cellRenderers))
|
|
2145
2245
|
this.cellRenderers.set(o, i);
|
|
2146
2246
|
if (e.headerRenderers)
|
|
@@ -2444,10 +2544,10 @@ class Mt {
|
|
|
2444
2544
|
}
|
|
2445
2545
|
// #endregion
|
|
2446
2546
|
}
|
|
2447
|
-
class
|
|
2547
|
+
class P extends HTMLElement {
|
|
2448
2548
|
// TODO: Rename to 'data-grid' when migration is complete
|
|
2449
2549
|
static tagName = "tbw-grid";
|
|
2450
|
-
static version = "0.
|
|
2550
|
+
static version = "0.6.0";
|
|
2451
2551
|
// ---------------- Framework Adapters ----------------
|
|
2452
2552
|
/**
|
|
2453
2553
|
* Registry of framework adapters that handle converting light DOM elements
|
|
@@ -2492,7 +2592,7 @@ class x extends HTMLElement {
|
|
|
2492
2592
|
* The render root for the grid. Without Shadow DOM, this is the element itself.
|
|
2493
2593
|
* This abstraction allows internal code to work the same way regardless of DOM mode.
|
|
2494
2594
|
*/
|
|
2495
|
-
get #
|
|
2595
|
+
get #i() {
|
|
2496
2596
|
return this;
|
|
2497
2597
|
}
|
|
2498
2598
|
/**
|
|
@@ -2537,22 +2637,21 @@ class x extends HTMLElement {
|
|
|
2537
2637
|
// ---------------- Render Scheduler ----------------
|
|
2538
2638
|
// Centralizes all rendering through a single RAF-based pipeline
|
|
2539
2639
|
#l;
|
|
2540
|
-
#
|
|
2640
|
+
#w = 0;
|
|
2541
2641
|
#m = null;
|
|
2542
2642
|
#b = !1;
|
|
2543
2643
|
// Cached flag for plugin scroll handlers
|
|
2544
2644
|
#s;
|
|
2545
2645
|
// Cached hook to avoid closures
|
|
2546
|
-
#
|
|
2547
|
-
#A = yt();
|
|
2646
|
+
#y = At();
|
|
2548
2647
|
#g;
|
|
2549
|
-
#
|
|
2648
|
+
#v;
|
|
2550
2649
|
#_;
|
|
2551
2650
|
// Watches first row for size changes (CSS loading, custom renderers)
|
|
2552
2651
|
#C;
|
|
2553
2652
|
// Handle for cancelling deferred idle work
|
|
2554
2653
|
// Pooled scroll event object (reused to avoid GC pressure during scroll)
|
|
2555
|
-
#
|
|
2654
|
+
#z = {
|
|
2556
2655
|
scrollTop: 0,
|
|
2557
2656
|
scrollLeft: 0,
|
|
2558
2657
|
scrollHeight: 0,
|
|
@@ -2561,29 +2660,29 @@ class x extends HTMLElement {
|
|
|
2561
2660
|
clientWidth: 0
|
|
2562
2661
|
};
|
|
2563
2662
|
// ---------------- Plugin System ----------------
|
|
2564
|
-
#
|
|
2663
|
+
#o;
|
|
2565
2664
|
#E;
|
|
2566
2665
|
// Track last attached plugins to avoid unnecessary re-initialization
|
|
2567
2666
|
// ---------------- Event Listeners ----------------
|
|
2568
|
-
#
|
|
2667
|
+
#L = !1;
|
|
2569
2668
|
// Guard against adding duplicate component-level listeners
|
|
2570
|
-
#
|
|
2669
|
+
#x;
|
|
2571
2670
|
// Separate controller for DOM scroll listeners (recreated on DOM changes)
|
|
2572
2671
|
// ---------------- Column State ----------------
|
|
2573
|
-
#
|
|
2672
|
+
#A;
|
|
2574
2673
|
// ---------------- Config Manager ----------------
|
|
2575
2674
|
#t;
|
|
2576
2675
|
// ---------------- Shell State ----------------
|
|
2577
|
-
#e =
|
|
2676
|
+
#e = wt();
|
|
2578
2677
|
#a;
|
|
2579
|
-
#
|
|
2678
|
+
#H;
|
|
2580
2679
|
// #endregion
|
|
2581
2680
|
// #region Derived State
|
|
2582
2681
|
// _rows: result of applying plugin processRows hooks
|
|
2583
2682
|
_rows = [];
|
|
2584
2683
|
// _baseColumns: columns before plugin transformation (analogous to #rows for row processing)
|
|
2585
2684
|
// This is the source of truth for processColumns - plugins transform these
|
|
2586
|
-
#
|
|
2685
|
+
#N = [];
|
|
2587
2686
|
// _columns is a getter/setter that operates on effectiveConfig.columns
|
|
2588
2687
|
// This ensures effectiveConfig.columns is the single source of truth for columns
|
|
2589
2688
|
// _columns always contains ALL columns (including hidden)
|
|
@@ -2662,7 +2761,7 @@ class x extends HTMLElement {
|
|
|
2662
2761
|
}
|
|
2663
2762
|
set rows(e) {
|
|
2664
2763
|
const o = this.#r;
|
|
2665
|
-
this.#r = e, o !== e && this.#
|
|
2764
|
+
this.#r = e, o !== e && this.#P("rows");
|
|
2666
2765
|
}
|
|
2667
2766
|
/**
|
|
2668
2767
|
* Get the original unfiltered/unprocessed rows.
|
|
@@ -2676,28 +2775,28 @@ class x extends HTMLElement {
|
|
|
2676
2775
|
}
|
|
2677
2776
|
set columns(e) {
|
|
2678
2777
|
const o = this.#t?.getColumns();
|
|
2679
|
-
this.#t?.setColumns(e), o !== e && this.#
|
|
2778
|
+
this.#t?.setColumns(e), o !== e && this.#P("columns");
|
|
2680
2779
|
}
|
|
2681
2780
|
get gridConfig() {
|
|
2682
2781
|
return this.#n;
|
|
2683
2782
|
}
|
|
2684
2783
|
set gridConfig(e) {
|
|
2685
2784
|
const o = this.#t?.getGridConfig();
|
|
2686
|
-
this.#t?.setGridConfig(e), o !== e && (this.#t.clearLightDomCache(), this.#
|
|
2785
|
+
this.#t?.setGridConfig(e), o !== e && (this.#t.clearLightDomCache(), this.#P("gridConfig"));
|
|
2687
2786
|
}
|
|
2688
2787
|
get fitMode() {
|
|
2689
2788
|
return this.#n.fitMode ?? "stretch";
|
|
2690
2789
|
}
|
|
2691
2790
|
set fitMode(e) {
|
|
2692
2791
|
const o = this.#t?.getFitMode();
|
|
2693
|
-
this.#t?.setFitMode(e), o !== e && this.#
|
|
2792
|
+
this.#t?.setFitMode(e), o !== e && this.#P("fitMode");
|
|
2694
2793
|
}
|
|
2695
2794
|
get editOn() {
|
|
2696
2795
|
return this.#n.editOn;
|
|
2697
2796
|
}
|
|
2698
2797
|
set editOn(e) {
|
|
2699
2798
|
const o = this.#t?.getEditOn();
|
|
2700
|
-
this.#t?.setEditOn(e), o !== e && this.#
|
|
2799
|
+
this.#t?.setEditOn(e), o !== e && this.#P("editMode");
|
|
2701
2800
|
}
|
|
2702
2801
|
/**
|
|
2703
2802
|
* Effective config accessor for internal modules and plugins.
|
|
@@ -2721,50 +2820,50 @@ class x extends HTMLElement {
|
|
|
2721
2820
|
}
|
|
2722
2821
|
// #endregion
|
|
2723
2822
|
constructor() {
|
|
2724
|
-
super(), this.#
|
|
2823
|
+
super(), this.#te(), this.#f = new Promise((e) => this.#d = e), this.#l = new pt({
|
|
2725
2824
|
mergeConfig: () => {
|
|
2726
|
-
this.#t.parseLightDomColumns(this), this.#t.merge(), this.#
|
|
2825
|
+
this.#t.parseLightDomColumns(this), this.#t.merge(), this.#Y(), kt(this.#n, this.#o?.getPlugins() ?? []), this.#N = [...this._columns];
|
|
2727
2826
|
},
|
|
2728
|
-
processColumns: () => this.#
|
|
2729
|
-
processRows: () => this.#
|
|
2730
|
-
renderHeader: () =>
|
|
2731
|
-
updateTemplate: () =>
|
|
2827
|
+
processColumns: () => this.#fe(),
|
|
2828
|
+
processRows: () => this.#pe(),
|
|
2829
|
+
renderHeader: () => Z(this),
|
|
2830
|
+
updateTemplate: () => $(this),
|
|
2732
2831
|
renderVirtualWindow: () => this.refreshVirtualWindow(!0),
|
|
2733
2832
|
afterRender: () => {
|
|
2734
|
-
this.#
|
|
2833
|
+
this.#o?.afterRender(), this.#n.fitMode === "fixed" && !this.__didInitialAutoSize && (this.__didInitialAutoSize = !0, ae(this)), this._restoreFocusAfterRender && (this._restoreFocusAfterRender = !1, q(this)), this._virtualization.enabled && !this.#D && this.#ne();
|
|
2735
2834
|
},
|
|
2736
2835
|
isConnected: () => this.isConnected && this.#h
|
|
2737
|
-
}), this.#l.setInitialReadyResolver(() => this.#d?.()), this.#a =
|
|
2738
|
-
getShadow: () => this.#
|
|
2836
|
+
}), this.#l.setInitialReadyResolver(() => this.#d?.()), this.#a = Tt(this.#e, {
|
|
2837
|
+
getShadow: () => this.#i,
|
|
2739
2838
|
getShellConfig: () => this.#n?.shell,
|
|
2740
2839
|
getAccordionIcons: () => ({
|
|
2741
|
-
expand: this.#n?.icons?.expand ??
|
|
2742
|
-
collapse: this.#n?.icons?.collapse ??
|
|
2840
|
+
expand: this.#n?.icons?.expand ?? M.expand,
|
|
2841
|
+
collapse: this.#n?.icons?.collapse ?? M.collapse
|
|
2743
2842
|
}),
|
|
2744
|
-
emit: (e, o) => this.#
|
|
2843
|
+
emit: (e, o) => this.#K(e, o),
|
|
2745
2844
|
refreshShellHeader: () => this.refreshShellHeader()
|
|
2746
|
-
}), this.#t = new
|
|
2845
|
+
}), this.#t = new Je({
|
|
2747
2846
|
getRows: () => this.#r,
|
|
2748
2847
|
getSortState: () => this._sortState,
|
|
2749
2848
|
setSortState: (e) => {
|
|
2750
2849
|
this._sortState = e;
|
|
2751
2850
|
},
|
|
2752
2851
|
onConfigChange: () => {
|
|
2753
|
-
this.#l.requestPhase(
|
|
2852
|
+
this.#l.requestPhase(x.FULL, "configChange");
|
|
2754
2853
|
},
|
|
2755
|
-
emit: (e, o) => this.#
|
|
2854
|
+
emit: (e, o) => this.#K(e, o),
|
|
2756
2855
|
clearRowPool: () => {
|
|
2757
2856
|
this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++;
|
|
2758
2857
|
},
|
|
2759
|
-
setup: () => this.#
|
|
2760
|
-
renderHeader: () =>
|
|
2761
|
-
updateTemplate: () =>
|
|
2762
|
-
refreshVirtualWindow: () => this.#l.requestPhase(
|
|
2858
|
+
setup: () => this.#R(),
|
|
2859
|
+
renderHeader: () => Z(this),
|
|
2860
|
+
updateTemplate: () => $(this),
|
|
2861
|
+
refreshVirtualWindow: () => this.#l.requestPhase(x.VIRTUALIZATION, "configManager"),
|
|
2763
2862
|
getVirtualization: () => this._virtualization,
|
|
2764
2863
|
setRowHeight: (e) => {
|
|
2765
2864
|
this._virtualization.rowHeight = e;
|
|
2766
2865
|
},
|
|
2767
|
-
applyAnimationConfig: (e) => this.#
|
|
2866
|
+
applyAnimationConfig: (e) => this.#ge(e),
|
|
2768
2867
|
getShellLightDomTitle: () => this.#e.lightDomTitle,
|
|
2769
2868
|
getShellToolPanels: () => this.#e.toolPanels,
|
|
2770
2869
|
getShellHeaderContents: () => this.#e.headerContents,
|
|
@@ -2774,26 +2873,26 @@ class x extends HTMLElement {
|
|
|
2774
2873
|
});
|
|
2775
2874
|
}
|
|
2776
2875
|
/** ID for the consolidated grid stylesheet in document.head */
|
|
2777
|
-
static #
|
|
2876
|
+
static #G = "tbw-grid-styles";
|
|
2778
2877
|
/** Track injected base styles CSS text */
|
|
2779
|
-
static #
|
|
2878
|
+
static #O = "";
|
|
2780
2879
|
/** Track injected plugin styles by plugin name (accumulates across all grid instances) */
|
|
2781
|
-
static #
|
|
2880
|
+
static #k = /* @__PURE__ */ new Map();
|
|
2782
2881
|
/**
|
|
2783
2882
|
* Get or create the consolidated style element in document.head.
|
|
2784
2883
|
* All grid and plugin styles are combined into this single element.
|
|
2785
2884
|
*/
|
|
2786
|
-
static #
|
|
2787
|
-
let e = document.getElementById(this.#
|
|
2788
|
-
return e || (e = document.createElement("style"), e.id = this.#
|
|
2885
|
+
static #ee() {
|
|
2886
|
+
let e = document.getElementById(this.#G);
|
|
2887
|
+
return e || (e = document.createElement("style"), e.id = this.#G, e.setAttribute("data-tbw-grid", "true"), document.head.appendChild(e)), e;
|
|
2789
2888
|
}
|
|
2790
2889
|
/**
|
|
2791
2890
|
* Update the consolidated stylesheet with current base + plugin styles.
|
|
2792
2891
|
*/
|
|
2793
|
-
static #
|
|
2794
|
-
const e = this.#
|
|
2892
|
+
static #I() {
|
|
2893
|
+
const e = this.#ee(), o = Array.from(this.#k.values()).join(`
|
|
2795
2894
|
`);
|
|
2796
|
-
e.textContent = `${this.#
|
|
2895
|
+
e.textContent = `${this.#O}
|
|
2797
2896
|
|
|
2798
2897
|
/* Plugin Styles */
|
|
2799
2898
|
${o}`;
|
|
@@ -2803,10 +2902,10 @@ ${o}`;
|
|
|
2803
2902
|
* All styles go into a single <style id="tbw-grid-styles"> element in document.head.
|
|
2804
2903
|
* Uses a singleton pattern to avoid duplicate injection across multiple grid instances.
|
|
2805
2904
|
*/
|
|
2806
|
-
async #
|
|
2807
|
-
if (!
|
|
2808
|
-
if (
|
|
2809
|
-
|
|
2905
|
+
async #te() {
|
|
2906
|
+
if (!P.#O) {
|
|
2907
|
+
if (re.length > 0) {
|
|
2908
|
+
P.#O = re, P.#I();
|
|
2810
2909
|
return;
|
|
2811
2910
|
}
|
|
2812
2911
|
await new Promise((e) => setTimeout(e, 50));
|
|
@@ -2823,7 +2922,7 @@ ${o}`;
|
|
|
2823
2922
|
} catch {
|
|
2824
2923
|
continue;
|
|
2825
2924
|
}
|
|
2826
|
-
e ? (
|
|
2925
|
+
e ? (P.#O = e, P.#I()) : (typeof process > "u" || process.env?.NODE_ENV !== "test") && console.warn(
|
|
2827
2926
|
"[tbw-grid] Could not find grid.css in document.styleSheets. Grid styling will not work.",
|
|
2828
2927
|
"Available stylesheets:",
|
|
2829
2928
|
Array.from(document.styleSheets).map((o) => o.href || "(inline)")
|
|
@@ -2840,7 +2939,7 @@ ${o}`;
|
|
|
2840
2939
|
* @internal Plugin API
|
|
2841
2940
|
*/
|
|
2842
2941
|
getPlugin(e) {
|
|
2843
|
-
return this.#
|
|
2942
|
+
return this.#o?.getPlugin(e);
|
|
2844
2943
|
}
|
|
2845
2944
|
/**
|
|
2846
2945
|
* Get a plugin instance by its name.
|
|
@@ -2848,7 +2947,7 @@ ${o}`;
|
|
|
2848
2947
|
* @internal Plugin API
|
|
2849
2948
|
*/
|
|
2850
2949
|
getPluginByName(e) {
|
|
2851
|
-
return this.#
|
|
2950
|
+
return this.#o?.getPluginByName(e);
|
|
2852
2951
|
}
|
|
2853
2952
|
/**
|
|
2854
2953
|
* Request a full re-render of the grid.
|
|
@@ -2857,7 +2956,7 @@ ${o}`;
|
|
|
2857
2956
|
* @internal Plugin API
|
|
2858
2957
|
*/
|
|
2859
2958
|
requestRender() {
|
|
2860
|
-
this.#l.requestPhase(
|
|
2959
|
+
this.#l.requestPhase(x.ROWS, "plugin:requestRender");
|
|
2861
2960
|
}
|
|
2862
2961
|
/**
|
|
2863
2962
|
* Request a full re-render and restore focus styling afterward.
|
|
@@ -2866,7 +2965,7 @@ ${o}`;
|
|
|
2866
2965
|
* @internal Plugin API
|
|
2867
2966
|
*/
|
|
2868
2967
|
requestRenderWithFocus() {
|
|
2869
|
-
this._restoreFocusAfterRender = !0, this.#l.requestPhase(
|
|
2968
|
+
this._restoreFocusAfterRender = !0, this.#l.requestPhase(x.ROWS, "plugin:requestRenderWithFocus");
|
|
2870
2969
|
}
|
|
2871
2970
|
/**
|
|
2872
2971
|
* Update the grid's column template CSS.
|
|
@@ -2874,7 +2973,7 @@ ${o}`;
|
|
|
2874
2973
|
* @internal
|
|
2875
2974
|
*/
|
|
2876
2975
|
updateTemplate() {
|
|
2877
|
-
|
|
2976
|
+
$(this);
|
|
2878
2977
|
}
|
|
2879
2978
|
/**
|
|
2880
2979
|
* Request a lightweight style update without rebuilding DOM.
|
|
@@ -2883,42 +2982,42 @@ ${o}`;
|
|
|
2883
2982
|
* @internal Plugin API
|
|
2884
2983
|
*/
|
|
2885
2984
|
requestAfterRender() {
|
|
2886
|
-
this.#l.requestPhase(
|
|
2985
|
+
this.#l.requestPhase(x.STYLE, "plugin:requestAfterRender");
|
|
2887
2986
|
}
|
|
2888
2987
|
/**
|
|
2889
2988
|
* Initialize plugin system with instances from config.
|
|
2890
2989
|
* Plugins are class instances passed in gridConfig.plugins[].
|
|
2891
2990
|
*/
|
|
2892
|
-
#
|
|
2893
|
-
this.#
|
|
2991
|
+
#X() {
|
|
2992
|
+
this.#o = new Wt(this);
|
|
2894
2993
|
const e = this.#n?.plugins, o = Array.isArray(e) ? e : [];
|
|
2895
|
-
this.#
|
|
2994
|
+
this.#o.attachAll(o);
|
|
2896
2995
|
}
|
|
2897
2996
|
/**
|
|
2898
2997
|
* Inject all plugin styles into the consolidated style element.
|
|
2899
2998
|
* Plugin styles are appended after base grid styles in the same <style> element.
|
|
2900
2999
|
* Uses a Map to accumulate styles from all grid instances on the page.
|
|
2901
3000
|
*/
|
|
2902
|
-
#
|
|
2903
|
-
const e = this.#
|
|
3001
|
+
#M() {
|
|
3002
|
+
const e = this.#o?.getPluginStyles() ?? [];
|
|
2904
3003
|
let o = !1;
|
|
2905
3004
|
for (const { name: i, styles: n } of e)
|
|
2906
|
-
|
|
2907
|
-
o &&
|
|
3005
|
+
P.#k.has(i) || (P.#k.set(i, n), o = !0);
|
|
3006
|
+
o && P.#I();
|
|
2908
3007
|
}
|
|
2909
3008
|
/**
|
|
2910
3009
|
* Update plugins when grid config changes.
|
|
2911
3010
|
* With class-based plugins, we need to detach old and attach new.
|
|
2912
3011
|
* Skips re-initialization if the plugins array hasn't changed.
|
|
2913
3012
|
*/
|
|
2914
|
-
#
|
|
3013
|
+
#Y() {
|
|
2915
3014
|
const e = this.#n?.plugins, o = Array.isArray(e) ? e : [];
|
|
2916
3015
|
if (this.#E !== o) {
|
|
2917
3016
|
if (this.#E && this.#E.length === o.length && this.#E.every((i, n) => i === o[n])) {
|
|
2918
3017
|
this.#E = o;
|
|
2919
3018
|
return;
|
|
2920
3019
|
}
|
|
2921
|
-
this.#
|
|
3020
|
+
this.#o && this.#o.detachAll();
|
|
2922
3021
|
for (const i of this.#e.toolPanels.keys()) {
|
|
2923
3022
|
const n = this.#e.lightDomToolPanelIds.has(i), r = this.#e.apiToolPanelIds.has(i);
|
|
2924
3023
|
if (!n && !r) {
|
|
@@ -2930,25 +3029,25 @@ ${o}`;
|
|
|
2930
3029
|
const n = this.#e.headerContentCleanups.get(i);
|
|
2931
3030
|
n && (n(), this.#e.headerContentCleanups.delete(i)), this.#e.headerContents.delete(i);
|
|
2932
3031
|
}
|
|
2933
|
-
this.#
|
|
3032
|
+
this.#X(), this.#M(), this.#E = o, this.#j(), this.#b = this.#o?.getAll().some((i) => i.onScroll) ?? !1;
|
|
2934
3033
|
}
|
|
2935
3034
|
}
|
|
2936
3035
|
/**
|
|
2937
3036
|
* Clean up plugin states when grid disconnects.
|
|
2938
3037
|
*/
|
|
2939
|
-
#
|
|
2940
|
-
this.#
|
|
3038
|
+
#oe() {
|
|
3039
|
+
this.#o?.detachAll();
|
|
2941
3040
|
}
|
|
2942
3041
|
/**
|
|
2943
3042
|
* Collect tool panels and header content from all plugins.
|
|
2944
3043
|
* Called after plugins are attached but before render.
|
|
2945
3044
|
*/
|
|
2946
|
-
#
|
|
2947
|
-
if (!this.#
|
|
2948
|
-
const e = this.#
|
|
3045
|
+
#j() {
|
|
3046
|
+
if (!this.#o) return;
|
|
3047
|
+
const e = this.#o.getToolPanels();
|
|
2949
3048
|
for (const { panel: i } of e)
|
|
2950
3049
|
this.#e.toolPanels.has(i.id) || this.#e.toolPanels.set(i.id, i);
|
|
2951
|
-
const o = this.#
|
|
3050
|
+
const o = this.#o.getHeaderContents();
|
|
2952
3051
|
for (const { content: i } of o)
|
|
2953
3052
|
this.#e.headerContents.has(i.id) || this.#e.headerContents.set(i.id, i);
|
|
2954
3053
|
}
|
|
@@ -2956,8 +3055,8 @@ ${o}`;
|
|
|
2956
3055
|
* Gets a renderer factory for tool panels from registered framework adapters.
|
|
2957
3056
|
* Returns a factory function that tries each adapter in order until one handles the element.
|
|
2958
3057
|
*/
|
|
2959
|
-
#
|
|
2960
|
-
const e =
|
|
3058
|
+
#T() {
|
|
3059
|
+
const e = P.getAdapters();
|
|
2961
3060
|
if (e.length === 0 && !this.__frameworkAdapter) return;
|
|
2962
3061
|
const o = this.__frameworkAdapter;
|
|
2963
3062
|
return (i) => {
|
|
@@ -2974,17 +3073,17 @@ ${o}`;
|
|
|
2974
3073
|
}
|
|
2975
3074
|
// ---------------- Lifecycle ----------------
|
|
2976
3075
|
connectedCallback() {
|
|
2977
|
-
this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version",
|
|
3076
|
+
this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version", P.version), this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#g && (this.#g.abort(), this.#L = !1), this.#g = new AbortController(), this.#C && (ge(this.#C), this.#C = void 0), N(this, this.#e), k(this, this.#e), I(this, this.#e, this.#T()), this.#t.parseLightDomColumns(this), this.#t.merge(), this.#X();
|
|
2978
3077
|
const e = this.#n?.plugins;
|
|
2979
|
-
this.#E = Array.isArray(e) ? e : [], this.#
|
|
3078
|
+
this.#E = Array.isArray(e) ? e : [], this.#j(), this.#c || (this.#F(), this.#M(), this.#c = !0), this.#q(), this.#C = ft(
|
|
2980
3079
|
() => {
|
|
2981
|
-
this.#
|
|
3080
|
+
this.#we();
|
|
2982
3081
|
},
|
|
2983
3082
|
{ timeout: 100 }
|
|
2984
3083
|
);
|
|
2985
3084
|
}
|
|
2986
3085
|
disconnectedCallback() {
|
|
2987
|
-
this.#C && (
|
|
3086
|
+
this.#C && (ge(this.#C), this.#C = void 0), this.#oe(), St(this.#e), this.#a.setInitialized(!1), this.#H?.(), this.#H = void 0, ze(this.#y), this.#g && (this.#g.abort(), this.#g = void 0), this.#x?.abort(), this.#x = void 0, this.#L = !1, this._resizeController && this._resizeController.dispose(), this.#v && (this.#v.disconnect(), this.#v = void 0), this.#_ && (this.#_.disconnect(), this.#_ = void 0, this.#D = !1), G(this), this.#S.clear(), this.#E = void 0;
|
|
2988
3087
|
for (const e of this._rowPool)
|
|
2989
3088
|
e.remove();
|
|
2990
3089
|
this._rowPool.length = 0, this.__rowsBodyEl = null, this.#h = !1;
|
|
@@ -3005,26 +3104,26 @@ ${o}`;
|
|
|
3005
3104
|
}
|
|
3006
3105
|
else e === "fit-mode" ? this.fitMode = i : e === "edit-on" && (this.editOn = i);
|
|
3007
3106
|
}
|
|
3008
|
-
#
|
|
3009
|
-
const o = this.#
|
|
3107
|
+
#q() {
|
|
3108
|
+
const o = this.#i.querySelector(".tbw-grid-content") ?? this.#i.querySelector(".tbw-grid-root");
|
|
3010
3109
|
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.__rowsBodyEl = o?.querySelector(".rows-body"), this.#a.isInitialized) {
|
|
3011
|
-
|
|
3110
|
+
De(this.#i, this.#e), yt(this.#i, this.#n?.shell, this.#e, this);
|
|
3012
3111
|
const r = this.#n?.shell?.toolPanel?.defaultOpen;
|
|
3013
3112
|
r && this.#e.toolPanels.has(r) && (this.openToolPanel(), this.#e.expandedSections.add(r));
|
|
3014
3113
|
}
|
|
3015
|
-
if (this.setAttribute("data-upgraded", ""), this.#h = !0, this._resizeController =
|
|
3114
|
+
if (this.setAttribute("data-upgraded", ""), this.#h = !0, this._resizeController = gt(this), this.#R(), this.#ie(o), this.#L)
|
|
3016
3115
|
return;
|
|
3017
|
-
this.#
|
|
3116
|
+
this.#L = !0;
|
|
3018
3117
|
const i = this.disconnectSignal;
|
|
3019
|
-
|
|
3118
|
+
ct(this, this, this.#i, i);
|
|
3020
3119
|
const n = this.#n.rowHeight;
|
|
3021
|
-
n && n > 0 ? this._virtualization.rowHeight = n : requestAnimationFrame(() => this.#
|
|
3120
|
+
n && n > 0 ? this._virtualization.rowHeight = n : requestAnimationFrame(() => this.#B()), queueMicrotask(() => this.#re()), this.#l.requestPhase(x.FULL, "afterConnect");
|
|
3022
3121
|
}
|
|
3023
3122
|
/**
|
|
3024
3123
|
* Measure actual row height from DOM.
|
|
3025
3124
|
* Finds the tallest cell to account for custom renderers that may push height.
|
|
3026
3125
|
*/
|
|
3027
|
-
#
|
|
3126
|
+
#B() {
|
|
3028
3127
|
const e = this._bodyEl?.querySelector(".data-grid-row");
|
|
3029
3128
|
if (!e) return;
|
|
3030
3129
|
const o = e.querySelectorAll(".cell");
|
|
@@ -3034,17 +3133,17 @@ ${o}`;
|
|
|
3034
3133
|
l > i && (i = l);
|
|
3035
3134
|
});
|
|
3036
3135
|
const n = e.getBoundingClientRect(), r = Math.max(n.height, i);
|
|
3037
|
-
r > 0 && r !== this._virtualization.rowHeight && (this._virtualization.rowHeight = r, this.#l.requestPhase(
|
|
3136
|
+
r > 0 && r !== this._virtualization.rowHeight && (this._virtualization.rowHeight = r, this.#l.requestPhase(x.VIRTUALIZATION, "measureRowHeight"));
|
|
3038
3137
|
}
|
|
3039
3138
|
/**
|
|
3040
3139
|
* Set up scroll-related event listeners on DOM elements.
|
|
3041
3140
|
* These need to be re-attached when the DOM is recreated (e.g., shell toggle).
|
|
3042
3141
|
* Uses a separate AbortController that is recreated each time.
|
|
3043
3142
|
*/
|
|
3044
|
-
#
|
|
3045
|
-
this.#
|
|
3046
|
-
const o = this.#
|
|
3047
|
-
if (this._virtualization.container = i ?? this, this.#b = this.#
|
|
3143
|
+
#ie(e) {
|
|
3144
|
+
this.#x?.abort(), this.#x = new AbortController();
|
|
3145
|
+
const o = this.#x.signal, i = e?.querySelector(".faux-vscroll"), n = e?.querySelector(".rows");
|
|
3146
|
+
if (this._virtualization.container = i ?? this, this.#b = this.#o?.getAll().some((r) => r.onScroll) ?? !1, i && n) {
|
|
3048
3147
|
i.addEventListener(
|
|
3049
3148
|
"scroll",
|
|
3050
3149
|
() => {
|
|
@@ -3053,44 +3152,44 @@ ${o}`;
|
|
|
3053
3152
|
if (this._rows.length <= this._virtualization.bypassThreshold)
|
|
3054
3153
|
n.style.transform = `translateY(${-l}px)`;
|
|
3055
3154
|
else {
|
|
3056
|
-
const c = Math.floor(l / a),
|
|
3155
|
+
const c = Math.floor(l / a), u = c - c % 2, d = -(l - u * a);
|
|
3057
3156
|
n.style.transform = `translateY(${d}px)`;
|
|
3058
3157
|
}
|
|
3059
|
-
this.#m = l, this.#
|
|
3060
|
-
this.#
|
|
3158
|
+
this.#m = l, this.#w || (this.#w = requestAnimationFrame(() => {
|
|
3159
|
+
this.#w = 0, this.#m !== null && (this.#me(this.#m), this.#m = null);
|
|
3061
3160
|
}));
|
|
3062
3161
|
},
|
|
3063
3162
|
{ passive: !0, signal: o }
|
|
3064
3163
|
);
|
|
3065
|
-
const r = this.#
|
|
3164
|
+
const r = this.#i.querySelector(".tbw-grid-content"), s = this.#i.querySelector(".tbw-scroll-area");
|
|
3066
3165
|
r && (r.addEventListener(
|
|
3067
3166
|
"wheel",
|
|
3068
3167
|
(l) => {
|
|
3069
3168
|
const a = l.shiftKey || Math.abs(l.deltaX) > Math.abs(l.deltaY);
|
|
3070
3169
|
if (a && s) {
|
|
3071
|
-
const c = l.shiftKey ? l.deltaY : l.deltaX, { scrollLeft:
|
|
3072
|
-
(c > 0 &&
|
|
3170
|
+
const c = l.shiftKey ? l.deltaY : l.deltaX, { scrollLeft: u, scrollWidth: d, clientWidth: f } = s;
|
|
3171
|
+
(c > 0 && u < d - f || c < 0 && u > 0) && (l.preventDefault(), s.scrollLeft += c);
|
|
3073
3172
|
} else if (!a) {
|
|
3074
|
-
const { scrollTop: c, scrollHeight:
|
|
3075
|
-
(l.deltaY > 0 && c <
|
|
3173
|
+
const { scrollTop: c, scrollHeight: u, clientHeight: d } = i;
|
|
3174
|
+
(l.deltaY > 0 && c < u - d || l.deltaY < 0 && c > 0) && (l.preventDefault(), i.scrollTop += l.deltaY);
|
|
3076
3175
|
}
|
|
3077
3176
|
},
|
|
3078
3177
|
{ passive: !1, signal: o }
|
|
3079
|
-
),
|
|
3178
|
+
), Dt(r, this.#y, { fauxScrollbar: i, scrollArea: s }, o));
|
|
3080
3179
|
}
|
|
3081
|
-
this._bodyEl &&
|
|
3082
|
-
this.#l.requestPhase(
|
|
3083
|
-
}), this.#
|
|
3180
|
+
this._bodyEl && at(this, this._bodyEl, o), this.#v?.disconnect(), this._virtualization.viewportEl && (this.#v = new ResizeObserver(() => {
|
|
3181
|
+
this.#l.requestPhase(x.VIRTUALIZATION, "resize-observer");
|
|
3182
|
+
}), this.#v.observe(this._virtualization.viewportEl)), this._virtualization.enabled && this.#l.requestPhase(x.VIRTUALIZATION, "init-virtualization"), this.#i.addEventListener(
|
|
3084
3183
|
"focusin",
|
|
3085
3184
|
() => {
|
|
3086
3185
|
this.dataset.hasFocus = "";
|
|
3087
3186
|
},
|
|
3088
3187
|
{ signal: o }
|
|
3089
|
-
), this.#
|
|
3188
|
+
), this.#i.addEventListener(
|
|
3090
3189
|
"focusout",
|
|
3091
3190
|
(r) => {
|
|
3092
3191
|
const s = r.relatedTarget;
|
|
3093
|
-
(!s || !this.#
|
|
3192
|
+
(!s || !this.#i.contains(s)) && delete this.dataset.hasFocus;
|
|
3094
3193
|
},
|
|
3095
3194
|
{ signal: o }
|
|
3096
3195
|
);
|
|
@@ -3100,23 +3199,23 @@ ${o}`;
|
|
|
3100
3199
|
* Called after rows are rendered to observe the actual content.
|
|
3101
3200
|
* Handles dynamic CSS loading, lazy images, font loading, column virtualization, etc.
|
|
3102
3201
|
*/
|
|
3103
|
-
#
|
|
3202
|
+
#D = !1;
|
|
3104
3203
|
// Only set up once per lifecycle
|
|
3105
|
-
#
|
|
3106
|
-
if (this.#
|
|
3204
|
+
#ne() {
|
|
3205
|
+
if (this.#D) return;
|
|
3107
3206
|
const e = this._bodyEl?.querySelector(".data-grid-row");
|
|
3108
|
-
e && (this.#
|
|
3109
|
-
this.#
|
|
3207
|
+
e && (this.#D = !0, this.#_?.disconnect(), this.#_ = new ResizeObserver(() => {
|
|
3208
|
+
this.#B();
|
|
3110
3209
|
}), this.#_.observe(e), requestAnimationFrame(() => {
|
|
3111
|
-
this.#
|
|
3210
|
+
this.#B();
|
|
3112
3211
|
}));
|
|
3113
3212
|
}
|
|
3114
3213
|
// ---------------- Event Emitters ----------------
|
|
3115
|
-
#
|
|
3214
|
+
#K(e, o) {
|
|
3116
3215
|
this.dispatchEvent(new CustomEvent(e, { detail: o, bubbles: !0, composed: !0 }));
|
|
3117
3216
|
}
|
|
3118
3217
|
/** Update ARIA selection attributes on rendered rows/cells */
|
|
3119
|
-
#
|
|
3218
|
+
#re() {
|
|
3120
3219
|
this._bodyEl?.querySelectorAll(".data-grid-row")?.forEach((o, i) => {
|
|
3121
3220
|
const n = i === this._focusRow;
|
|
3122
3221
|
o.setAttribute("aria-selected", String(n)), o.querySelectorAll(".cell").forEach((r, s) => {
|
|
@@ -3131,14 +3230,14 @@ ${o}`;
|
|
|
3131
3230
|
* Queue an update for a specific property type.
|
|
3132
3231
|
* All updates queued within the same microtask are batched together.
|
|
3133
3232
|
*/
|
|
3134
|
-
#
|
|
3135
|
-
this.#p[e] = !0, !this.#u && (this.#u = !0, queueMicrotask(() => this.#
|
|
3233
|
+
#P(e) {
|
|
3234
|
+
this.#p[e] = !0, !this.#u && (this.#u = !0, queueMicrotask(() => this.#se()));
|
|
3136
3235
|
}
|
|
3137
3236
|
/**
|
|
3138
3237
|
* Process all pending updates in optimal order.
|
|
3139
3238
|
* Priority: gridConfig first (may affect all), then columns, rows, fitMode, editMode
|
|
3140
3239
|
*/
|
|
3141
|
-
#
|
|
3240
|
+
#se() {
|
|
3142
3241
|
if (!this.#u || !this.#h) {
|
|
3143
3242
|
this.#u = !1;
|
|
3144
3243
|
return;
|
|
@@ -3151,43 +3250,43 @@ ${o}`;
|
|
|
3151
3250
|
fitMode: !1,
|
|
3152
3251
|
editMode: !1
|
|
3153
3252
|
}, e.gridConfig) {
|
|
3154
|
-
this.#
|
|
3253
|
+
this.#he();
|
|
3155
3254
|
return;
|
|
3156
3255
|
}
|
|
3157
|
-
e.columns && this.#
|
|
3256
|
+
e.columns && this.#ae(), e.rows && this.#le(), e.fitMode && this.#ce(), e.editMode && this.#de();
|
|
3158
3257
|
}
|
|
3159
3258
|
// Individual update applicators - these do the actual work
|
|
3160
|
-
#
|
|
3161
|
-
this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#l.requestPhase(
|
|
3259
|
+
#le() {
|
|
3260
|
+
this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#l.requestPhase(x.ROWS, "applyRowsUpdate");
|
|
3162
3261
|
}
|
|
3163
|
-
#
|
|
3164
|
-
|
|
3262
|
+
#ae() {
|
|
3263
|
+
G(this), this.#t.merge(), this.#R();
|
|
3165
3264
|
}
|
|
3166
|
-
#
|
|
3167
|
-
this.#t.merge(), this.#n.fitMode === "fixed" ? (this.__didInitialAutoSize = !1,
|
|
3265
|
+
#ce() {
|
|
3266
|
+
this.#t.merge(), this.#n.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, ae(this)) : (this._columns.forEach((o) => {
|
|
3168
3267
|
!o.__userResized && o.__autoSized && delete o.width;
|
|
3169
|
-
}),
|
|
3268
|
+
}), $(this));
|
|
3170
3269
|
}
|
|
3171
|
-
#
|
|
3172
|
-
this.#t.merge(), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#l.requestPhase(
|
|
3270
|
+
#de() {
|
|
3271
|
+
this.#t.merge(), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#l.requestPhase(x.VIRTUALIZATION, "applyEditModeUpdate");
|
|
3173
3272
|
}
|
|
3174
|
-
#
|
|
3175
|
-
|
|
3176
|
-
const e = !!this.#
|
|
3177
|
-
this.#t.parseLightDomColumns(this), this.#t.merge(), this.#
|
|
3178
|
-
const n =
|
|
3273
|
+
#he() {
|
|
3274
|
+
N(this, this.#e), k(this, this.#e);
|
|
3275
|
+
const e = !!this.#i.querySelector(".has-shell"), o = !!this.#i.querySelector(".tbw-tool-panel"), i = this.#i.querySelectorAll(".tbw-accordion-section").length;
|
|
3276
|
+
this.#t.parseLightDomColumns(this), this.#t.merge(), this.#Y(), I(this, this.#e, this.#T()), this.#t.markSourcesChanged(), this.#t.merge();
|
|
3277
|
+
const n = Me(this.#n?.shell), r = (this.#n?.shell?.toolPanels?.length ?? 0) > 0, s = (this.#n?.shell?.toolPanels?.length ?? 0) !== i;
|
|
3179
3278
|
if (e !== n || !e && n || !o && r || o && s) {
|
|
3180
|
-
this.#
|
|
3279
|
+
this.#F(), this.#M(), this.#q();
|
|
3181
3280
|
return;
|
|
3182
3281
|
}
|
|
3183
|
-
e && this.#
|
|
3282
|
+
e && this.#ue(), this.#l.requestPhase(x.COLUMNS, "applyGridConfigUpdate");
|
|
3184
3283
|
}
|
|
3185
3284
|
/**
|
|
3186
3285
|
* Update the shell header DOM in place without a full re-render.
|
|
3187
3286
|
* Handles title, toolbar buttons, and other shell header changes.
|
|
3188
3287
|
*/
|
|
3189
|
-
#
|
|
3190
|
-
const e = this.#
|
|
3288
|
+
#ue() {
|
|
3289
|
+
const e = this.#i.querySelector(".tbw-shell-header");
|
|
3191
3290
|
if (!e) return;
|
|
3192
3291
|
const o = this.#n.shell?.header?.title ?? this.#e.lightDomTitle;
|
|
3193
3292
|
let i = e.querySelector(".tbw-shell-title");
|
|
@@ -3197,9 +3296,9 @@ ${o}`;
|
|
|
3197
3296
|
// The #queueUpdate() method schedules updates which are processed by #flushPendingUpdates()
|
|
3198
3297
|
// and individual #apply*Update() methods. This coalesces rapid property changes
|
|
3199
3298
|
// (e.g., setting rows, columns, gridConfig in quick succession) into a single update cycle.
|
|
3200
|
-
#
|
|
3201
|
-
if (this.#
|
|
3202
|
-
const e = this.#
|
|
3299
|
+
#fe() {
|
|
3300
|
+
if (this.#o) {
|
|
3301
|
+
const e = this.#N.length > 0 ? this.#N : this._columns, o = e.filter((r) => !r.hidden), i = e.filter((r) => r.hidden), n = this.#o.processColumns([...o]);
|
|
3203
3302
|
if (n !== o) {
|
|
3204
3303
|
new Set(o.map((l) => l.field));
|
|
3205
3304
|
const r = new Set(n.map((l) => l.field));
|
|
@@ -3209,9 +3308,9 @@ ${o}`;
|
|
|
3209
3308
|
}
|
|
3210
3309
|
}
|
|
3211
3310
|
/** Recompute row model via plugin hooks. */
|
|
3212
|
-
#
|
|
3213
|
-
|
|
3214
|
-
const e = Array.isArray(this.#r) ? [...this.#r] : [], o = this.#
|
|
3311
|
+
#pe() {
|
|
3312
|
+
G(this);
|
|
3313
|
+
const e = Array.isArray(this.#r) ? [...this.#r] : [], o = this.#o?.processRows(e) ?? e;
|
|
3215
3314
|
this._rows = o;
|
|
3216
3315
|
}
|
|
3217
3316
|
/**
|
|
@@ -3219,31 +3318,31 @@ ${o}`;
|
|
|
3219
3318
|
* This makes the grid's animation settings available to plugins via CSS variables.
|
|
3220
3319
|
* Called by ConfigManager after merge.
|
|
3221
3320
|
*/
|
|
3222
|
-
#
|
|
3321
|
+
#ge(e) {
|
|
3223
3322
|
const o = {
|
|
3224
|
-
...
|
|
3323
|
+
...Ne,
|
|
3225
3324
|
...e.animation
|
|
3226
3325
|
}, i = o.mode ?? "reduced-motion";
|
|
3227
3326
|
let n = 1;
|
|
3228
3327
|
i === !1 || i === "off" ? n = 0 : (i === !0 || i === "on") && (n = 1), this.style.setProperty("--tbw-animation-duration", `${o.duration}ms`), this.style.setProperty("--tbw-animation-easing", o.easing ?? "ease-out"), this.style.setProperty("--tbw-animation-enabled", String(n)), this.dataset.animationMode = typeof i == "boolean" ? i ? "on" : "off" : i;
|
|
3229
3328
|
}
|
|
3230
3329
|
// ---------------- Delegate Wrappers ----------------
|
|
3231
|
-
|
|
3232
|
-
this.#s || (this.#s = (n, r, s) => this.#
|
|
3330
|
+
#W(e, o, i = this.__rowRenderEpoch) {
|
|
3331
|
+
this.#s || (this.#s = (n, r, s) => this.#o?.renderRow(n, r, s) ?? !1), ot(this, e, o, i, this.#s);
|
|
3233
3332
|
}
|
|
3234
3333
|
// Cache for ARIA counts to avoid redundant DOM writes on scroll (hot path)
|
|
3235
|
-
|
|
3236
|
-
#
|
|
3334
|
+
#$ = -1;
|
|
3335
|
+
#Z = -1;
|
|
3237
3336
|
/**
|
|
3238
3337
|
* Updates ARIA row/col counts on the grid container.
|
|
3239
3338
|
* Also sets role="rowgroup" on .rows container only when there are rows.
|
|
3240
3339
|
* Uses caching to avoid redundant DOM writes on every scroll frame.
|
|
3241
3340
|
*/
|
|
3242
|
-
#
|
|
3243
|
-
if (e === this
|
|
3341
|
+
#J(e, o) {
|
|
3342
|
+
if (e === this.#$ && o === this.#Z)
|
|
3244
3343
|
return;
|
|
3245
|
-
const i = this
|
|
3246
|
-
this
|
|
3344
|
+
const i = this.#$;
|
|
3345
|
+
this.#$ = e, this.#Z = o, this.__rowsBodyEl && (this.__rowsBodyEl.setAttribute("aria-rowcount", String(e)), this.__rowsBodyEl.setAttribute("aria-colcount", String(o))), e !== i && this._bodyEl && (e > 0 ? this._bodyEl.setAttribute("role", "rowgroup") : this._bodyEl.removeAttribute("role"));
|
|
3247
3346
|
}
|
|
3248
3347
|
// ---------------- Core Helpers ----------------
|
|
3249
3348
|
/**
|
|
@@ -3254,21 +3353,21 @@ ${o}`;
|
|
|
3254
3353
|
* Previously this method executed rendering synchronously, but that caused race
|
|
3255
3354
|
* conditions with framework adapters that also schedule their own render work.
|
|
3256
3355
|
*/
|
|
3257
|
-
#
|
|
3356
|
+
#R() {
|
|
3258
3357
|
if (this.isConnected && !(!this._headerRowEl || !this._bodyEl)) {
|
|
3259
|
-
if (this.#t.parseLightDomColumns(this), this.#
|
|
3260
|
-
const e = this.#
|
|
3261
|
-
this.#
|
|
3262
|
-
const o = this.#
|
|
3358
|
+
if (this.#t.parseLightDomColumns(this), this.#A) {
|
|
3359
|
+
const e = this.#A;
|
|
3360
|
+
this.#A = void 0, this.#t.merge();
|
|
3361
|
+
const o = this.#o?.getAll() ?? [];
|
|
3263
3362
|
this.#t.applyState(e, o);
|
|
3264
3363
|
}
|
|
3265
|
-
this._bodyEl && (this._bodyEl.style.display = "", this._bodyEl.style.gridTemplateColumns = ""), this.#l.requestPhase(
|
|
3364
|
+
this._bodyEl && (this._bodyEl.style.display = "", this._bodyEl.style.gridTemplateColumns = ""), this.#l.requestPhase(x.FULL, "setup");
|
|
3266
3365
|
}
|
|
3267
3366
|
}
|
|
3268
|
-
#
|
|
3269
|
-
if (this.refreshVirtualWindow(!1), this.#
|
|
3270
|
-
const o = this._virtualization.container, i = this.#
|
|
3271
|
-
i.scrollTop = e, i.scrollLeft = o?.scrollLeft ?? 0, i.scrollHeight = o?.scrollHeight ?? 0, i.scrollWidth = o?.scrollWidth ?? 0, i.clientHeight = o?.clientHeight ?? 0, i.clientWidth = o?.clientWidth ?? 0, this.#
|
|
3367
|
+
#me(e) {
|
|
3368
|
+
if (this.refreshVirtualWindow(!1), this.#o?.onScrollRender(), this.#b) {
|
|
3369
|
+
const o = this._virtualization.container, i = this.#z;
|
|
3370
|
+
i.scrollTop = e, i.scrollLeft = o?.scrollLeft ?? 0, i.scrollHeight = o?.scrollHeight ?? 0, i.scrollWidth = o?.scrollWidth ?? 0, i.clientHeight = o?.clientHeight ?? 0, i.clientWidth = o?.clientWidth ?? 0, this.#o?.onScroll(i);
|
|
3272
3371
|
}
|
|
3273
3372
|
}
|
|
3274
3373
|
/**
|
|
@@ -3277,7 +3376,7 @@ ${o}`;
|
|
|
3277
3376
|
* @internal Plugin API
|
|
3278
3377
|
*/
|
|
3279
3378
|
findHeaderRow() {
|
|
3280
|
-
return this.#
|
|
3379
|
+
return this.#i.querySelector(".header-row");
|
|
3281
3380
|
}
|
|
3282
3381
|
/**
|
|
3283
3382
|
* Find a rendered row element by its data row index.
|
|
@@ -3308,7 +3407,7 @@ ${o}`;
|
|
|
3308
3407
|
cellEl: n,
|
|
3309
3408
|
originalEvent: e
|
|
3310
3409
|
};
|
|
3311
|
-
return this.#
|
|
3410
|
+
return this.#o?.onCellClick(l) ?? !1;
|
|
3312
3411
|
}
|
|
3313
3412
|
/**
|
|
3314
3413
|
* Dispatch a row click event to the plugin system.
|
|
@@ -3322,7 +3421,7 @@ ${o}`;
|
|
|
3322
3421
|
rowEl: n,
|
|
3323
3422
|
originalEvent: e
|
|
3324
3423
|
};
|
|
3325
|
-
return this.#
|
|
3424
|
+
return this.#o?.onRowClick(r) ?? !1;
|
|
3326
3425
|
}
|
|
3327
3426
|
/**
|
|
3328
3427
|
* Dispatch a header click event to the plugin system.
|
|
@@ -3338,14 +3437,14 @@ ${o}`;
|
|
|
3338
3437
|
headerEl: i,
|
|
3339
3438
|
originalEvent: e
|
|
3340
3439
|
};
|
|
3341
|
-
return this.#
|
|
3440
|
+
return this.#o?.onHeaderClick(r) ?? !1;
|
|
3342
3441
|
}
|
|
3343
3442
|
/**
|
|
3344
3443
|
* Dispatch a keyboard event to the plugin system.
|
|
3345
3444
|
* Returns true if any plugin handled the event.
|
|
3346
3445
|
*/
|
|
3347
3446
|
_dispatchKeyDown(e) {
|
|
3348
|
-
return this.#
|
|
3447
|
+
return this.#o?.onKeyDown(e) ?? !1;
|
|
3349
3448
|
}
|
|
3350
3449
|
/**
|
|
3351
3450
|
* Get horizontal scroll boundary offsets from plugins.
|
|
@@ -3353,7 +3452,7 @@ ${o}`;
|
|
|
3353
3452
|
* when plugins like pinned columns obscure part of the scroll area.
|
|
3354
3453
|
*/
|
|
3355
3454
|
_getHorizontalScrollOffsets(e, o) {
|
|
3356
|
-
return this.#
|
|
3455
|
+
return this.#o?.getHorizontalScrollOffsets(e, o) ?? { left: 0, right: 0 };
|
|
3357
3456
|
}
|
|
3358
3457
|
/**
|
|
3359
3458
|
* Query all plugins with a generic query and collect responses.
|
|
@@ -3366,64 +3465,35 @@ ${o}`;
|
|
|
3366
3465
|
* const canMove = !responses.includes(false);
|
|
3367
3466
|
*/
|
|
3368
3467
|
queryPlugins(e) {
|
|
3369
|
-
return this.#
|
|
3370
|
-
}
|
|
3371
|
-
/**
|
|
3372
|
-
* Build a CellMouseEvent from a native MouseEvent.
|
|
3373
|
-
* Extracts cell/row information from the event target.
|
|
3374
|
-
*/
|
|
3375
|
-
#F(e, o) {
|
|
3376
|
-
let i = null;
|
|
3377
|
-
const n = e.composedPath?.();
|
|
3378
|
-
if (n && n.length > 0 ? i = n[0] : i = e.target, i && !this.#o.contains(i)) {
|
|
3379
|
-
const u = document.elementFromPoint(e.clientX, e.clientY);
|
|
3380
|
-
u && (i = u);
|
|
3381
|
-
}
|
|
3382
|
-
const r = i?.closest?.("[data-col]"), s = i?.closest?.(".data-grid-row"), l = i?.closest?.(".header-row");
|
|
3383
|
-
let a, c, h, d, f, p;
|
|
3384
|
-
return r && (a = parseInt(r.getAttribute("data-row") ?? "-1", 10), c = parseInt(r.getAttribute("data-col") ?? "-1", 10), a >= 0 && c >= 0 && (h = this._rows[a], p = this._columns[c], d = p?.field, f = h && d ? h[d] : void 0)), {
|
|
3385
|
-
type: o,
|
|
3386
|
-
row: h,
|
|
3387
|
-
rowIndex: a !== void 0 && a >= 0 ? a : void 0,
|
|
3388
|
-
colIndex: c !== void 0 && c >= 0 ? c : void 0,
|
|
3389
|
-
field: d,
|
|
3390
|
-
value: f,
|
|
3391
|
-
column: p,
|
|
3392
|
-
originalEvent: e,
|
|
3393
|
-
cellElement: r ?? void 0,
|
|
3394
|
-
rowElement: s ?? void 0,
|
|
3395
|
-
isHeader: !!l,
|
|
3396
|
-
cell: a !== void 0 && c !== void 0 && a >= 0 && c >= 0 ? { row: a, col: c } : void 0
|
|
3397
|
-
};
|
|
3468
|
+
return this.#o?.queryPlugins(e) ?? [];
|
|
3398
3469
|
}
|
|
3399
3470
|
/**
|
|
3400
|
-
*
|
|
3471
|
+
* Dispatch cell mouse events for drag operations.
|
|
3472
|
+
* Returns true if any plugin started a drag.
|
|
3473
|
+
* @internal Plugin API - called by event-delegation.ts
|
|
3401
3474
|
*/
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
(this.#i?.onCellMouseDown(o) ?? !1) && (this.#w = !0);
|
|
3475
|
+
_dispatchCellMouseDown(e) {
|
|
3476
|
+
return this.#o?.onCellMouseDown(e) ?? !1;
|
|
3405
3477
|
}
|
|
3406
3478
|
/**
|
|
3407
|
-
*
|
|
3479
|
+
* Dispatch cell mouse move during drag.
|
|
3480
|
+
* @internal Plugin API - called by event-delegation.ts
|
|
3408
3481
|
*/
|
|
3409
|
-
|
|
3410
|
-
|
|
3411
|
-
const o = this.#F(e, "mousemove");
|
|
3412
|
-
this.#i?.onCellMouseMove(o);
|
|
3482
|
+
_dispatchCellMouseMove(e) {
|
|
3483
|
+
this.#o?.onCellMouseMove(e);
|
|
3413
3484
|
}
|
|
3414
3485
|
/**
|
|
3415
|
-
*
|
|
3486
|
+
* Dispatch cell mouse up to end drag.
|
|
3487
|
+
* @internal Plugin API - called by event-delegation.ts
|
|
3416
3488
|
*/
|
|
3417
|
-
|
|
3418
|
-
|
|
3419
|
-
const o = this.#F(e, "mouseup");
|
|
3420
|
-
this.#i?.onCellMouseUp(o), this.#w = !1;
|
|
3489
|
+
_dispatchCellMouseUp(e) {
|
|
3490
|
+
this.#o?.onCellMouseUp(e);
|
|
3421
3491
|
}
|
|
3422
3492
|
async ready() {
|
|
3423
3493
|
return this.#f;
|
|
3424
3494
|
}
|
|
3425
3495
|
async forceLayout() {
|
|
3426
|
-
return this.#l.requestPhase(
|
|
3496
|
+
return this.#l.requestPhase(x.FULL, "forceLayout"), this.#l.whenReady();
|
|
3427
3497
|
}
|
|
3428
3498
|
/**
|
|
3429
3499
|
* Trim the internal row pool to match the current visible window size.
|
|
@@ -3467,7 +3537,7 @@ ${o}`;
|
|
|
3467
3537
|
* Returns a serializable object suitable for localStorage or database storage.
|
|
3468
3538
|
*/
|
|
3469
3539
|
getColumnState() {
|
|
3470
|
-
const e = this.#
|
|
3540
|
+
const e = this.#o?.getAll() ?? [];
|
|
3471
3541
|
return this.#t.collectState(e);
|
|
3472
3542
|
}
|
|
3473
3543
|
/**
|
|
@@ -3475,7 +3545,7 @@ ${o}`;
|
|
|
3475
3545
|
* Use this to restore previously saved column state.
|
|
3476
3546
|
*/
|
|
3477
3547
|
set columnState(e) {
|
|
3478
|
-
e && (this.#
|
|
3548
|
+
e && (this.#A = e, this.#t.initialColumnState = e, this.#c && this.#be(e));
|
|
3479
3549
|
}
|
|
3480
3550
|
/**
|
|
3481
3551
|
* Get the current column state.
|
|
@@ -3486,9 +3556,9 @@ ${o}`;
|
|
|
3486
3556
|
/**
|
|
3487
3557
|
* Apply column state internally.
|
|
3488
3558
|
*/
|
|
3489
|
-
#
|
|
3490
|
-
const o = this.#
|
|
3491
|
-
this.#t.applyState(e, o), this.#
|
|
3559
|
+
#be(e) {
|
|
3560
|
+
const o = this.#o?.getAll() ?? [];
|
|
3561
|
+
this.#t.applyState(e, o), this.#R();
|
|
3492
3562
|
}
|
|
3493
3563
|
/**
|
|
3494
3564
|
* Request a state change event to be emitted.
|
|
@@ -3498,7 +3568,7 @@ ${o}`;
|
|
|
3498
3568
|
* @internal Plugin API
|
|
3499
3569
|
*/
|
|
3500
3570
|
requestStateChange() {
|
|
3501
|
-
const e = this.#
|
|
3571
|
+
const e = this.#o?.getAll() ?? [];
|
|
3502
3572
|
this.#t.requestStateChange(e);
|
|
3503
3573
|
}
|
|
3504
3574
|
/**
|
|
@@ -3506,9 +3576,9 @@ ${o}`;
|
|
|
3506
3576
|
* Clears all user modifications (order, width, visibility, sort).
|
|
3507
3577
|
*/
|
|
3508
3578
|
resetColumnState() {
|
|
3509
|
-
this.#
|
|
3510
|
-
const e = this.#
|
|
3511
|
-
this.#t.resetState(e), this.#t.merge(), this.#
|
|
3579
|
+
this.#A = void 0, this.__originalOrder = [];
|
|
3580
|
+
const e = this.#o?.getAll() ?? [];
|
|
3581
|
+
this.#t.resetState(e), this.#t.merge(), this.#R();
|
|
3512
3582
|
}
|
|
3513
3583
|
// ---------------- Shell / Tool Panel API ----------------
|
|
3514
3584
|
// These methods delegate to ShellController for implementation.
|
|
@@ -3590,11 +3660,11 @@ ${o}`;
|
|
|
3590
3660
|
* Call this after dynamically modifying <tbw-grid-header> children.
|
|
3591
3661
|
*/
|
|
3592
3662
|
refreshShellHeader() {
|
|
3593
|
-
|
|
3663
|
+
N(this, this.#e), k(this, this.#e), I(this, this.#e, this.#T()), this.#t.markSourcesChanged(), this.#t.merge(), this.#F(), this.#M(), this.#q();
|
|
3594
3664
|
}
|
|
3595
3665
|
// #region Custom Styles API
|
|
3596
3666
|
/** Map of registered custom stylesheets by ID - uses adoptedStyleSheets which survive DOM rebuilds */
|
|
3597
|
-
#
|
|
3667
|
+
#S = /* @__PURE__ */ new Map();
|
|
3598
3668
|
/**
|
|
3599
3669
|
* Register custom CSS styles to be injected into the grid's shadow DOM.
|
|
3600
3670
|
* Use this to style custom cell renderers, editors, or detail panels.
|
|
@@ -3620,29 +3690,29 @@ ${o}`;
|
|
|
3620
3690
|
* ```
|
|
3621
3691
|
*/
|
|
3622
3692
|
registerStyles(e, o) {
|
|
3623
|
-
let i = this.#
|
|
3624
|
-
i || (i = new CSSStyleSheet(), this.#
|
|
3693
|
+
let i = this.#S.get(e);
|
|
3694
|
+
i || (i = new CSSStyleSheet(), this.#S.set(e, i)), i.replaceSync(o), this.#Q();
|
|
3625
3695
|
}
|
|
3626
3696
|
/**
|
|
3627
3697
|
* Remove previously registered custom styles.
|
|
3628
3698
|
* @param id - The ID used when registering the styles
|
|
3629
3699
|
*/
|
|
3630
3700
|
unregisterStyles(e) {
|
|
3631
|
-
this.#
|
|
3701
|
+
this.#S.delete(e) && this.#Q();
|
|
3632
3702
|
}
|
|
3633
3703
|
/**
|
|
3634
3704
|
* Get list of registered custom style IDs.
|
|
3635
3705
|
*/
|
|
3636
3706
|
getRegisteredStyles() {
|
|
3637
|
-
return Array.from(this.#
|
|
3707
|
+
return Array.from(this.#S.keys());
|
|
3638
3708
|
}
|
|
3639
3709
|
/**
|
|
3640
3710
|
* Update document.adoptedStyleSheets to include custom sheets.
|
|
3641
3711
|
* Without Shadow DOM, all custom styles go into the document.
|
|
3642
3712
|
*/
|
|
3643
|
-
#
|
|
3644
|
-
const e = Array.from(this.#
|
|
3645
|
-
(i) => !Array.from(this.#
|
|
3713
|
+
#Q() {
|
|
3714
|
+
const e = Array.from(this.#S.values()), o = document.adoptedStyleSheets.filter(
|
|
3715
|
+
(i) => !Array.from(this.#S.values()).includes(i)
|
|
3646
3716
|
);
|
|
3647
3717
|
document.adoptedStyleSheets = [...o, ...e];
|
|
3648
3718
|
}
|
|
@@ -3657,27 +3727,27 @@ ${o}`;
|
|
|
3657
3727
|
* This separation allows plugins to register their own Light DOM elements
|
|
3658
3728
|
* and handle parsing themselves.
|
|
3659
3729
|
*/
|
|
3660
|
-
#
|
|
3730
|
+
#we() {
|
|
3661
3731
|
const e = () => {
|
|
3662
3732
|
const i = this.#e.lightDomTitle, n = this.#e.hasToolButtonsContainer;
|
|
3663
|
-
|
|
3733
|
+
N(this, this.#e), k(this, this.#e), I(this, this.#e, this.#T());
|
|
3664
3734
|
const r = this.#e.lightDomTitle, s = this.#e.hasToolButtonsContainer;
|
|
3665
3735
|
if (r && !i || s && !n) {
|
|
3666
3736
|
this.#t.markSourcesChanged(), this.#t.merge();
|
|
3667
|
-
const l = this.#
|
|
3737
|
+
const l = this.#i.querySelector(".tbw-shell-header");
|
|
3668
3738
|
if (l) {
|
|
3669
|
-
const a =
|
|
3739
|
+
const a = be(
|
|
3670
3740
|
this.#n.shell,
|
|
3671
3741
|
this.#e,
|
|
3672
3742
|
this.#n.icons?.toolPanel
|
|
3673
3743
|
), c = document.createElement("div");
|
|
3674
3744
|
c.innerHTML = a;
|
|
3675
|
-
const
|
|
3676
|
-
|
|
3745
|
+
const u = c.firstElementChild;
|
|
3746
|
+
u && (l.replaceWith(u), this.#V());
|
|
3677
3747
|
}
|
|
3678
3748
|
}
|
|
3679
3749
|
}, o = () => {
|
|
3680
|
-
this.__lightDomColumnsCache = void 0, this.#
|
|
3750
|
+
this.__lightDomColumnsCache = void 0, this.#R();
|
|
3681
3751
|
};
|
|
3682
3752
|
this.#t.registerLightDomHandler("tbw-grid-header", e), this.#t.registerLightDomHandler("tbw-grid-tool-buttons", e), this.#t.registerLightDomHandler("tbw-grid-tool-panel", e), this.#t.registerLightDomHandler("tbw-grid-column", o), this.#t.registerLightDomHandler("tbw-grid-detail", o), this.#t.observeLightDOM(this);
|
|
3683
3753
|
}
|
|
@@ -3688,33 +3758,33 @@ ${o}`;
|
|
|
3688
3758
|
* @internal Used by framework integration libraries (Angular, React, Vue)
|
|
3689
3759
|
*/
|
|
3690
3760
|
refreshColumns() {
|
|
3691
|
-
this.__lightDomColumnsCache = void 0,
|
|
3761
|
+
this.__lightDomColumnsCache = void 0, G(this), this.#t.parseLightDomColumns(this);
|
|
3692
3762
|
const e = this.#e.lightDomTitle, o = this.#e.hasToolButtonsContainer;
|
|
3693
|
-
|
|
3763
|
+
N(this, this.#e), k(this, this.#e), I(this, this.#e, this.#T());
|
|
3694
3764
|
const i = this.#e.lightDomTitle, n = this.#e.hasToolButtonsContainer;
|
|
3695
3765
|
if (i && !e || n && !o) {
|
|
3696
3766
|
this.#t.markSourcesChanged(), this.#t.merge();
|
|
3697
|
-
const s = this.#
|
|
3767
|
+
const s = this.#i.querySelector(".tbw-shell-header");
|
|
3698
3768
|
if (s) {
|
|
3699
|
-
const l =
|
|
3769
|
+
const l = be(
|
|
3700
3770
|
this.#n.shell,
|
|
3701
3771
|
this.#e,
|
|
3702
3772
|
this.#n.icons?.toolPanel
|
|
3703
3773
|
), a = document.createElement("div");
|
|
3704
3774
|
a.innerHTML = l;
|
|
3705
3775
|
const c = a.firstElementChild;
|
|
3706
|
-
c && (s.replaceWith(c), this.#
|
|
3776
|
+
c && (s.replaceWith(c), this.#V());
|
|
3707
3777
|
}
|
|
3708
3778
|
}
|
|
3709
|
-
this.#l.requestPhase(
|
|
3779
|
+
this.#l.requestPhase(x.COLUMNS, "refreshColumns");
|
|
3710
3780
|
}
|
|
3711
3781
|
// ---------------- Virtual Window ----------------
|
|
3712
3782
|
/**
|
|
3713
3783
|
* Calculate total height for the faux scrollbar spacer element.
|
|
3714
3784
|
* Used by both bypass and virtualized rendering paths to ensure consistent scroll behavior.
|
|
3715
3785
|
*/
|
|
3716
|
-
#
|
|
3717
|
-
const o = this._virtualization.rowHeight, i = this._virtualization.container ?? this, n = this._virtualization.viewportEl ?? i, r = i.clientHeight, s = n.clientHeight, a = this.shadowRoot?.querySelector(".tbw-scroll-area"), c = a ? a.clientHeight : r, d = c - s, f = this.#
|
|
3786
|
+
#U(e) {
|
|
3787
|
+
const o = this._virtualization.rowHeight, i = this._virtualization.container ?? this, n = this._virtualization.viewportEl ?? i, r = i.clientHeight, s = n.clientHeight, a = this.shadowRoot?.querySelector(".tbw-scroll-area"), c = a ? a.clientHeight : r, d = c - s, f = this.#o?.getExtraHeight() ?? 0, p = Math.max(0, r - c);
|
|
3718
3788
|
return e * o + d + f + p;
|
|
3719
3789
|
}
|
|
3720
3790
|
/**
|
|
@@ -3726,60 +3796,60 @@ ${o}`;
|
|
|
3726
3796
|
if (!this._bodyEl) return;
|
|
3727
3797
|
const o = this._rows.length;
|
|
3728
3798
|
if (!this._virtualization.enabled) {
|
|
3729
|
-
this
|
|
3799
|
+
this.#W(0, o), this.#o?.afterRender();
|
|
3730
3800
|
return;
|
|
3731
3801
|
}
|
|
3732
3802
|
if (this._rows.length <= this._virtualization.bypassThreshold) {
|
|
3733
|
-
this._virtualization.start = 0, this._virtualization.end = o, e && (this._bodyEl.style.transform = "translateY(0px)"), this
|
|
3803
|
+
this._virtualization.start = 0, this._virtualization.end = o, e && (this._bodyEl.style.transform = "translateY(0px)"), this.#W(0, o, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch), this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${this.#U(o)}px`), this.#J(o, this._visibleColumns.length), this.#o?.afterRender();
|
|
3734
3804
|
return;
|
|
3735
3805
|
}
|
|
3736
3806
|
const i = this._virtualization.container ?? this, n = this._virtualization.viewportEl ?? i, r = n.clientHeight, s = this._virtualization.rowHeight, l = i.scrollTop;
|
|
3737
3807
|
let a = Math.floor(l / s), c = 0;
|
|
3738
|
-
const
|
|
3739
|
-
for (; c <
|
|
3740
|
-
const
|
|
3741
|
-
if (
|
|
3742
|
-
a =
|
|
3808
|
+
const u = 10;
|
|
3809
|
+
for (; c < u; ) {
|
|
3810
|
+
const T = this.#o?.getExtraHeightBefore?.(a) ?? 0, v = Math.floor((l - T) / s);
|
|
3811
|
+
if (v >= a || v < 0) break;
|
|
3812
|
+
a = v, c++;
|
|
3743
3813
|
}
|
|
3744
3814
|
a = a - a % 2, a < 0 && (a = 0);
|
|
3745
|
-
const d = this.#
|
|
3815
|
+
const d = this.#o?.adjustVirtualStart(a, l, s);
|
|
3746
3816
|
d !== void 0 && d < a && (a = d, a = a - a % 2, a < 0 && (a = 0));
|
|
3747
3817
|
const f = Math.ceil(r / s) + 3;
|
|
3748
3818
|
let p = a + f;
|
|
3749
3819
|
if (p > o && (p = o), this._virtualization.start = a, this._virtualization.end = p, i.clientHeight === 0 && r > 0) {
|
|
3750
|
-
this.#l.requestPhase(
|
|
3820
|
+
this.#l.requestPhase(x.VIRTUALIZATION, "stale-refs-retry");
|
|
3751
3821
|
return;
|
|
3752
3822
|
}
|
|
3753
|
-
const g = this.#
|
|
3823
|
+
const g = this.#U(o);
|
|
3754
3824
|
this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${g}px`);
|
|
3755
|
-
const
|
|
3756
|
-
this._bodyEl.style.transform = `translateY(${
|
|
3757
|
-
const
|
|
3758
|
-
if (
|
|
3759
|
-
const
|
|
3760
|
-
this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${
|
|
3825
|
+
const w = this.#o?.getExtraHeightBefore?.(a) ?? 0, _ = -(l - a * s - w);
|
|
3826
|
+
this._bodyEl.style.transform = `translateY(${_}px)`, this.#W(a, p, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch), this.#J(o, this._visibleColumns.length), e && (this.#o?.afterRender(), queueMicrotask(() => {
|
|
3827
|
+
const T = i.clientHeight, v = n.clientHeight;
|
|
3828
|
+
if (T === 0 && v > 0) return;
|
|
3829
|
+
const m = this.#U(o);
|
|
3830
|
+
this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${m}px`);
|
|
3761
3831
|
}));
|
|
3762
3832
|
}
|
|
3763
3833
|
// ---------------- Render ----------------
|
|
3764
|
-
#
|
|
3765
|
-
|
|
3834
|
+
#F() {
|
|
3835
|
+
N(this, this.#e), k(this, this.#e), I(this, this.#e, this.#T()), this.#t.markSourcesChanged(), this.#t.merge();
|
|
3766
3836
|
const e = this.#n?.shell;
|
|
3767
|
-
|
|
3768
|
-
this.#
|
|
3837
|
+
xt(
|
|
3838
|
+
this.#i,
|
|
3769
3839
|
e,
|
|
3770
3840
|
{ isPanelOpen: this.#e.isPanelOpen, expandedSections: this.#e.expandedSections },
|
|
3771
3841
|
this.#n?.icons
|
|
3772
|
-
) && (this.#
|
|
3842
|
+
) && (this.#V(), this.#a.setInitialized(!0));
|
|
3773
3843
|
}
|
|
3774
3844
|
/**
|
|
3775
3845
|
* Set up shell event listeners after render.
|
|
3776
3846
|
*/
|
|
3777
|
-
#
|
|
3778
|
-
|
|
3847
|
+
#V() {
|
|
3848
|
+
vt(this.#i, this.#n?.shell, this.#e, {
|
|
3779
3849
|
onPanelToggle: () => this.toggleToolPanel(),
|
|
3780
3850
|
onSectionToggle: (e) => this.toggleToolPanelSection(e),
|
|
3781
|
-
onToolbarButtonClick: (e) => this.#
|
|
3782
|
-
}), this.#
|
|
3851
|
+
onToolbarButtonClick: (e) => this.#ve(e)
|
|
3852
|
+
}), this.#H?.(), this.#H = Ct(this.#i, this.#n?.shell, (e) => {
|
|
3783
3853
|
this.style.setProperty("--tbw-tool-panel-width", `${e}px`);
|
|
3784
3854
|
});
|
|
3785
3855
|
}
|
|
@@ -3789,18 +3859,18 @@ ${o}`;
|
|
|
3789
3859
|
* This method is kept for backwards compatibility but may emit an event in the future.
|
|
3790
3860
|
*/
|
|
3791
3861
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
3792
|
-
#
|
|
3862
|
+
#ve(e) {
|
|
3793
3863
|
}
|
|
3794
3864
|
}
|
|
3795
|
-
customElements.get(
|
|
3796
|
-
globalThis.DataGridElement =
|
|
3797
|
-
const
|
|
3865
|
+
customElements.get(P.tagName) || customElements.define(P.tagName, P);
|
|
3866
|
+
globalThis.DataGridElement = P;
|
|
3867
|
+
const Ut = {
|
|
3798
3868
|
/** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
|
|
3799
3869
|
CAN_MOVE_COLUMN: "canMoveColumn",
|
|
3800
3870
|
/** Get context menu items. Context: ContextMenuParams. Response: ContextMenuItem[] */
|
|
3801
3871
|
GET_CONTEXT_MENU_ITEMS: "getContextMenuItems"
|
|
3802
3872
|
};
|
|
3803
|
-
class
|
|
3873
|
+
class Ft {
|
|
3804
3874
|
/**
|
|
3805
3875
|
* Plugin dependencies - declare other plugins this one requires.
|
|
3806
3876
|
*
|
|
@@ -3821,7 +3891,7 @@ class kt {
|
|
|
3821
3891
|
* Plugin version - defaults to grid version for built-in plugins.
|
|
3822
3892
|
* Third-party plugins can override with their own semver.
|
|
3823
3893
|
*/
|
|
3824
|
-
version = "0.
|
|
3894
|
+
version = "0.6.0";
|
|
3825
3895
|
/** CSS styles to inject into the grid's shadow DOM */
|
|
3826
3896
|
styles;
|
|
3827
3897
|
/** Custom cell renderers keyed by type name */
|
|
@@ -3841,7 +3911,7 @@ class kt {
|
|
|
3841
3911
|
* Created fresh in attach(), aborted in detach().
|
|
3842
3912
|
* This ensures event listeners are properly cleaned up when plugins are re-attached.
|
|
3843
3913
|
*/
|
|
3844
|
-
#
|
|
3914
|
+
#i;
|
|
3845
3915
|
/**
|
|
3846
3916
|
* Default configuration - subclasses should override this getter.
|
|
3847
3917
|
* Note: This must be a getter (not property initializer) for proper inheritance
|
|
@@ -3869,7 +3939,7 @@ class kt {
|
|
|
3869
3939
|
* ```
|
|
3870
3940
|
*/
|
|
3871
3941
|
attach(e) {
|
|
3872
|
-
this.#
|
|
3942
|
+
this.#i?.abort(), this.#i = new AbortController(), this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
|
|
3873
3943
|
}
|
|
3874
3944
|
/**
|
|
3875
3945
|
* Called when the plugin is detached from a grid.
|
|
@@ -3885,7 +3955,7 @@ class kt {
|
|
|
3885
3955
|
* ```
|
|
3886
3956
|
*/
|
|
3887
3957
|
detach() {
|
|
3888
|
-
this.#
|
|
3958
|
+
this.#i?.abort(), this.#i = void 0;
|
|
3889
3959
|
}
|
|
3890
3960
|
/**
|
|
3891
3961
|
* Get another plugin instance from the same grid.
|
|
@@ -4011,7 +4081,7 @@ class kt {
|
|
|
4011
4081
|
* document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
|
|
4012
4082
|
*/
|
|
4013
4083
|
get disconnectSignal() {
|
|
4014
|
-
return this.#
|
|
4084
|
+
return this.#i?.signal ?? this.grid?.disconnectSignal;
|
|
4015
4085
|
}
|
|
4016
4086
|
/**
|
|
4017
4087
|
* Get the grid-level icons configuration.
|
|
@@ -4019,7 +4089,7 @@ class kt {
|
|
|
4019
4089
|
*/
|
|
4020
4090
|
get gridIcons() {
|
|
4021
4091
|
const e = this.grid?.gridConfig?.icons ?? {};
|
|
4022
|
-
return { ...
|
|
4092
|
+
return { ...M, ...e };
|
|
4023
4093
|
}
|
|
4024
4094
|
// #region Animation Helpers
|
|
4025
4095
|
/**
|
|
@@ -4095,7 +4165,7 @@ class kt {
|
|
|
4095
4165
|
}
|
|
4096
4166
|
// #endregion
|
|
4097
4167
|
}
|
|
4098
|
-
const
|
|
4168
|
+
const R = {
|
|
4099
4169
|
// ─── Core Structure ───────────────────────────────────────────────
|
|
4100
4170
|
ROOT: "tbw-grid-root",
|
|
4101
4171
|
HEADER: "header",
|
|
@@ -4143,7 +4213,7 @@ const E = {
|
|
|
4143
4213
|
// Selection (SelectionPlugin applies, core CSS styles)
|
|
4144
4214
|
RANGE_SELECTION: "range-selection",
|
|
4145
4215
|
SELECTION_OVERLAY: "selection-overlay"
|
|
4146
|
-
},
|
|
4216
|
+
}, Y = {
|
|
4147
4217
|
// ─── Core Attributes ──────────────────────────────────────────────
|
|
4148
4218
|
ROW_INDEX: "data-row-index",
|
|
4149
4219
|
COL_INDEX: "data-col-index",
|
|
@@ -4155,24 +4225,24 @@ const E = {
|
|
|
4155
4225
|
// TreePlugin
|
|
4156
4226
|
STICKY: "data-sticky"
|
|
4157
4227
|
// PinnedColumnsPlugin
|
|
4158
|
-
},
|
|
4159
|
-
ROOT: `.${
|
|
4160
|
-
HEADER: `.${
|
|
4161
|
-
HEADER_ROW: `.${
|
|
4162
|
-
HEADER_CELL: `.${
|
|
4163
|
-
ROWS_VIEWPORT: `.${
|
|
4164
|
-
ROWS_CONTAINER: `.${
|
|
4165
|
-
DATA_ROW: `.${
|
|
4166
|
-
DATA_CELL: `.${
|
|
4167
|
-
GROUP_ROW: `.${
|
|
4228
|
+
}, Vt = {
|
|
4229
|
+
ROOT: `.${R.ROOT}`,
|
|
4230
|
+
HEADER: `.${R.HEADER}`,
|
|
4231
|
+
HEADER_ROW: `.${R.HEADER_ROW}`,
|
|
4232
|
+
HEADER_CELL: `.${R.HEADER_CELL}`,
|
|
4233
|
+
ROWS_VIEWPORT: `.${R.ROWS_VIEWPORT}`,
|
|
4234
|
+
ROWS_CONTAINER: `.${R.ROWS_CONTAINER}`,
|
|
4235
|
+
DATA_ROW: `.${R.DATA_ROW}`,
|
|
4236
|
+
DATA_CELL: `.${R.DATA_CELL}`,
|
|
4237
|
+
GROUP_ROW: `.${R.GROUP_ROW}`,
|
|
4168
4238
|
// By data attribute
|
|
4169
|
-
ROW_BY_INDEX: (t) => `.${
|
|
4170
|
-
CELL_BY_FIELD: (t) => `.${
|
|
4171
|
-
CELL_AT: (t, e) => `.${
|
|
4239
|
+
ROW_BY_INDEX: (t) => `.${R.DATA_ROW}[${Y.ROW_INDEX}="${t}"]`,
|
|
4240
|
+
CELL_BY_FIELD: (t) => `.${R.DATA_CELL}[${Y.FIELD}="${t}"]`,
|
|
4241
|
+
CELL_AT: (t, e) => `.${R.DATA_ROW}[${Y.ROW_INDEX}="${t}"] .${R.DATA_CELL}[${Y.COL_INDEX}="${e}"]`,
|
|
4172
4242
|
// State selectors
|
|
4173
|
-
SELECTED_ROWS: `.${
|
|
4174
|
-
EDITING_CELL: `.${
|
|
4175
|
-
},
|
|
4243
|
+
SELECTED_ROWS: `.${R.DATA_ROW}.${R.SELECTED}`,
|
|
4244
|
+
EDITING_CELL: `.${R.DATA_CELL}.${R.EDITING}`
|
|
4245
|
+
}, Gt = {
|
|
4176
4246
|
// Colors
|
|
4177
4247
|
COLOR_BG: "--tbw-color-bg",
|
|
4178
4248
|
COLOR_FG: "--tbw-color-fg",
|
|
@@ -4194,7 +4264,15 @@ const E = {
|
|
|
4194
4264
|
// Borders
|
|
4195
4265
|
BORDER_RADIUS: "--tbw-border-radius",
|
|
4196
4266
|
FOCUS_OUTLINE: "--tbw-focus-outline"
|
|
4197
|
-
}
|
|
4267
|
+
};
|
|
4268
|
+
function Xt(t) {
|
|
4269
|
+
const e = document.createElement("tbw-grid");
|
|
4270
|
+
return t && (e.gridConfig = t), e;
|
|
4271
|
+
}
|
|
4272
|
+
function Yt(t, e = document) {
|
|
4273
|
+
return e.querySelector(t);
|
|
4274
|
+
}
|
|
4275
|
+
const jt = {
|
|
4198
4276
|
CELL_COMMIT: "cell-commit",
|
|
4199
4277
|
ROW_COMMIT: "row-commit",
|
|
4200
4278
|
CHANGED_ROWS_RESET: "changed-rows-reset",
|
|
@@ -4205,7 +4283,7 @@ const E = {
|
|
|
4205
4283
|
ACTIVATE_CELL: "activate-cell",
|
|
4206
4284
|
GROUP_TOGGLE: "group-toggle",
|
|
4207
4285
|
COLUMN_STATE_CHANGE: "column-state-change"
|
|
4208
|
-
},
|
|
4286
|
+
}, Kt = {
|
|
4209
4287
|
// Selection plugin
|
|
4210
4288
|
SELECTION_CHANGE: "selection-change",
|
|
4211
4289
|
// Tree plugin
|
|
@@ -4236,7 +4314,7 @@ const E = {
|
|
|
4236
4314
|
DETAIL_EXPAND: "detail-expand",
|
|
4237
4315
|
// Grouping rows plugin
|
|
4238
4316
|
GROUP_EXPAND: "group-expand"
|
|
4239
|
-
},
|
|
4317
|
+
}, oe = {
|
|
4240
4318
|
sum: (t, e) => t.reduce((o, i) => o + (Number(i[e]) || 0), 0),
|
|
4241
4319
|
avg: (t, e) => {
|
|
4242
4320
|
const o = t.reduce((i, n) => i + (Number(n[e]) || 0), 0);
|
|
@@ -4247,25 +4325,25 @@ const E = {
|
|
|
4247
4325
|
max: (t, e) => Math.max(...t.map((o) => Number(o[e]) || -1 / 0)),
|
|
4248
4326
|
first: (t, e) => t[0]?.[e],
|
|
4249
4327
|
last: (t, e) => t[t.length - 1]?.[e]
|
|
4250
|
-
},
|
|
4328
|
+
}, W = /* @__PURE__ */ new Map(), H = {
|
|
4251
4329
|
/**
|
|
4252
4330
|
* Register a custom aggregator function.
|
|
4253
4331
|
*/
|
|
4254
4332
|
register(t, e) {
|
|
4255
|
-
|
|
4333
|
+
W.set(t, e);
|
|
4256
4334
|
},
|
|
4257
4335
|
/**
|
|
4258
4336
|
* Unregister a custom aggregator function.
|
|
4259
4337
|
*/
|
|
4260
4338
|
unregister(t) {
|
|
4261
|
-
|
|
4339
|
+
W.delete(t);
|
|
4262
4340
|
},
|
|
4263
4341
|
/**
|
|
4264
4342
|
* Get an aggregator function by reference.
|
|
4265
4343
|
*/
|
|
4266
4344
|
get(t) {
|
|
4267
4345
|
if (t !== void 0)
|
|
4268
|
-
return typeof t == "function" ? t :
|
|
4346
|
+
return typeof t == "function" ? t : W.get(t) ?? oe[t];
|
|
4269
4347
|
},
|
|
4270
4348
|
/**
|
|
4271
4349
|
* Run an aggregator on a set of rows.
|
|
@@ -4278,15 +4356,15 @@ const E = {
|
|
|
4278
4356
|
* Check if an aggregator exists.
|
|
4279
4357
|
*/
|
|
4280
4358
|
has(t) {
|
|
4281
|
-
return
|
|
4359
|
+
return W.has(t) || t in oe;
|
|
4282
4360
|
},
|
|
4283
4361
|
/**
|
|
4284
4362
|
* List all available aggregator names.
|
|
4285
4363
|
*/
|
|
4286
4364
|
list() {
|
|
4287
|
-
return [...Object.keys(
|
|
4365
|
+
return [...Object.keys(oe), ...W.keys()];
|
|
4288
4366
|
}
|
|
4289
|
-
},
|
|
4367
|
+
}, ye = {
|
|
4290
4368
|
sum: (t) => t.reduce((e, o) => e + o, 0),
|
|
4291
4369
|
avg: (t) => t.length ? t.reduce((e, o) => e + o, 0) / t.length : 0,
|
|
4292
4370
|
count: (t) => t.length,
|
|
@@ -4295,43 +4373,45 @@ const E = {
|
|
|
4295
4373
|
first: (t) => t[0] ?? 0,
|
|
4296
4374
|
last: (t) => t[t.length - 1] ?? 0
|
|
4297
4375
|
};
|
|
4298
|
-
function
|
|
4299
|
-
return
|
|
4376
|
+
function $t(t) {
|
|
4377
|
+
return ye[t] ?? ye.sum;
|
|
4300
4378
|
}
|
|
4301
|
-
function
|
|
4302
|
-
return
|
|
4379
|
+
function Zt(t, e) {
|
|
4380
|
+
return $t(t)(e);
|
|
4303
4381
|
}
|
|
4304
|
-
const
|
|
4382
|
+
const Jt = H.register.bind(H), Qt = H.unregister.bind(H), eo = H.get.bind(H), to = H.run.bind(H), oo = H.list.bind(H);
|
|
4305
4383
|
export {
|
|
4306
|
-
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
|
|
4310
|
-
|
|
4311
|
-
|
|
4312
|
-
|
|
4313
|
-
|
|
4314
|
-
|
|
4315
|
-
|
|
4316
|
-
|
|
4317
|
-
|
|
4318
|
-
|
|
4319
|
-
|
|
4320
|
-
|
|
4321
|
-
|
|
4322
|
-
|
|
4323
|
-
|
|
4324
|
-
|
|
4325
|
-
|
|
4326
|
-
|
|
4327
|
-
|
|
4328
|
-
|
|
4329
|
-
|
|
4330
|
-
|
|
4331
|
-
|
|
4332
|
-
|
|
4333
|
-
|
|
4334
|
-
|
|
4335
|
-
|
|
4384
|
+
Ft as BaseGridPlugin,
|
|
4385
|
+
Ne as DEFAULT_ANIMATION_CONFIG,
|
|
4386
|
+
M as DEFAULT_GRID_ICONS,
|
|
4387
|
+
jt as DGEvents,
|
|
4388
|
+
P as DataGridElement,
|
|
4389
|
+
F as FitModeEnum,
|
|
4390
|
+
Gt as GridCSSVars,
|
|
4391
|
+
R as GridClasses,
|
|
4392
|
+
Y as GridDataAttrs,
|
|
4393
|
+
P as GridElement,
|
|
4394
|
+
Vt as GridSelectors,
|
|
4395
|
+
Ut as PLUGIN_QUERIES,
|
|
4396
|
+
Kt as PluginEvents,
|
|
4397
|
+
Wt as PluginManager,
|
|
4398
|
+
x as RenderPhase,
|
|
4399
|
+
q as a,
|
|
4400
|
+
H as aggregatorRegistry,
|
|
4401
|
+
ht as builtInSort,
|
|
4402
|
+
ie as c,
|
|
4403
|
+
Xt as createGrid,
|
|
4404
|
+
dt as defaultComparator,
|
|
4405
|
+
_e as e,
|
|
4406
|
+
Te as g,
|
|
4407
|
+
eo as getAggregator,
|
|
4408
|
+
$t as getValueAggregator,
|
|
4409
|
+
oo as listAggregators,
|
|
4410
|
+
Yt as queryGrid,
|
|
4411
|
+
Jt as registerAggregator,
|
|
4412
|
+
to as runAggregator,
|
|
4413
|
+
Zt as runValueAggregator,
|
|
4414
|
+
j as s,
|
|
4415
|
+
Qt as unregisterAggregator
|
|
4336
4416
|
};
|
|
4337
4417
|
//# sourceMappingURL=index.js.map
|