@blueprintui/grid 2.5.0 → 2.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/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@blueprintui/grid-v2.6.0](https://github.com/blueprintui/blueprintui/compare/@blueprintui/grid-v2.5.0...@blueprintui/grid-v2.6.0) (2025-12-23)
2
+
3
+
4
+ ### Features
5
+
6
+ * **grid:** virtual support ([4e640ce](https://github.com/blueprintui/blueprintui/commit/4e640ceefd33c5495b73b8e8ee8b12718e1722bd))
7
+
1
8
  # [@blueprintui/grid-v2.5.0](https://github.com/blueprintui/blueprintui/compare/@blueprintui/grid-v2.4.1...@blueprintui/grid-v2.5.0) (2025-11-21)
2
9
 
3
10
 
@@ -1417,7 +1417,7 @@
1417
1417
  },
1418
1418
  {
1419
1419
  "kind": "method",
1420
- "name": "#intializeColumnSort",
1420
+ "name": "#initializeColumnSort",
1421
1421
  "privacy": "private"
1422
1422
  },
1423
1423
  {
@@ -1432,7 +1432,7 @@
1432
1432
  },
1433
1433
  {
1434
1434
  "kind": "method",
1435
- "name": "#intializeColumns",
1435
+ "name": "#initializeColumns",
1436
1436
  "privacy": "private"
1437
1437
  },
1438
1438
  {
@@ -1453,7 +1453,7 @@
1453
1453
  },
1454
1454
  {
1455
1455
  "kind": "method",
1456
- "name": "#intializeFooter",
1456
+ "name": "#initializeFooter",
1457
1457
  "privacy": "private"
1458
1458
  },
1459
1459
  {
@@ -18,6 +18,7 @@ import { TypePopoverController } from '@blueprintui/components/internals';
18
18
  export declare class BpGridDetail extends LitElement {
19
19
  #private;
20
20
  i18n: {
21
+ copy: string;
21
22
  sort: string;
22
23
  none: string;
23
24
  ascending: string;
@@ -1 +1 @@
1
- import{insertSpanningCells as t}from"@blueprintui/grid/internals";class s{#t;get placeholder(){return this.#t||(this.#t=this.host.querySelector("bp-grid-placeholder")),this.#t}#s;get footer(){return this.#s||(this.#s=this.host.querySelector("bp-grid-footer")),this.#s}#e;get rows(){return this.#e||(this.#e=Array.from(this.host.querySelectorAll("bp-grid-row"))),this.#e}#r;get columns(){return this.#r||(this.#r=Array.from(this.host.querySelectorAll("bp-grid-column"))),this.#r}#o;get cells(){return this.#o||(this.#o=Array.from(this.host.querySelectorAll("bp-grid-cell"))),this.#o}#i;get grid(){if(!this.#i){const s=this.columns.filter(t=>!t.ariaColSpan),e=t([...s,...Array.from(this.cells)]);for(this.#i=[];e.length;)this.#i.push(e.splice(0,s.length))}return this.#i}#h=0;get isStatic(){return this.#h++,1===this.#h&&!this.host.rangeSelection&&!this.host.querySelector("bp-grid-column bp-button-resize")&&!Array.from(this.columns).find(t=>void 0!==t.position||t.draggable||t.width)}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.host.shadowRoot.addEventListener("slotchange",async()=>{await this.host.updateComplete,this.#l(),this.host.shadowRoot.dispatchEvent(new CustomEvent("bp-slotchange"))}),this.host.addEventListener("bp-crane-end",async()=>{await this.host.updateComplete,this.#l()})}#l(){this.#i=null,this.#r=null,this.#e=null,this.#o=null,this.#t=null,this.#s=null}}export{s as GridDOMController};
1
+ import{insertSpanningCells as t}from"@blueprintui/grid/internals";class e{#t;get placeholder(){return this.#t||(this.#t=this.host.querySelector("bp-grid-placeholder")),this.#t}#e;get footer(){return this.#e||(this.#e=this.host.querySelector("bp-grid-footer")),this.#e}#s;get rows(){return this.#s||(this.#s=Array.from(this.host.querySelectorAll("bp-grid-row"))),this.#s}#r;get columns(){return this.#r||(this.#r=Array.from(this.host.querySelectorAll("bp-grid-column"))),this.#r}#o;get cells(){return this.#o||(this.#o=Array.from(this.host.querySelectorAll("bp-grid-cell"))),this.#o}#i;get grid(){if(!this.#i){const e=this.columns.filter(t=>!t.ariaColSpan),s=t([...e,...Array.from(this.cells)]);for(this.#i=[];s.length;)this.#i.push(s.splice(0,e.length))}return this.#i}#h=0;get isStatic(){return this.#h++,1===this.#h&&!this.host.rangeSelection&&!this.host.querySelector("bp-grid-column bp-button-resize")&&!Array.from(this.columns).find(t=>void 0!==t.position||t.draggable||t.width)}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.host.shadowRoot.addEventListener("slotchange",async()=>{await this.host.updateComplete,this.#l(),this.host.shadowRoot.dispatchEvent(new CustomEvent("bp-slotchange"))}),this.host.addEventListener("bp-virtual-change",async()=>{await this.host.updateComplete,this.#l()}),this.host.addEventListener("bp-crane-end",async()=>{await this.host.updateComplete,this.#l()})}#l(){this.#i=null,this.#r=null,this.#s=null,this.#o=null,this.#t=null,this.#e=null}}export{e as GridDOMController};
@@ -1 +1 @@
1
- const o=new CSSStyleSheet;o.replaceSync("[hidden]{display:none!important}:host{--background:var(--bp-layer-background-200);--body-height:auto;--body-min-height:auto;--column-height:var(--bp-size-900);--row-height:var(--bp-size-900);--scroll-padding-top:var(--column-height);--row-content-visibility:auto;--border:0;--border-width:var(--bp-object-border-width-100);--border-color:var(--bp-object-border-color-100);width:100%;display:block;position:relative}:host([range-selection]){user-select:none}:host([column-style*=border]) ::slotted(bp-grid-row){--cell-border-width:var(--border-width);--border-top:0;--border-bottom:0}:host([row-style*=border]) ::slotted(bp-grid-row){--border-top:var(--border-width)solid var(--border-color)}:host([row-style*=border]) ::slotted(bp-grid-row:last-of-type){--border-bottom:var(--border-width)solid var(--border-color)}:host([row-style*=border]) ::slotted(bp-grid-row:first-of-type){--border-top:0}:host([row-style*=stripe]) ::slotted(bp-grid-row){--border-top:0;--border-bottom:0}:host([row-style*=stripe]) ::slotted(bp-grid-row:nth-child(2n)),:host([row-style*=hover]) ::slotted(bp-grid-row:hover){--bp-interaction-offset:var(--bp-interaction-hover-offset)}:host([layer=flat]){--border-color:var(--bp-object-border-color-200);--background:inherit!important}[part=internal]{border:var(--border);border-radius:var(--bp-object-border-radius-100);background:var(--background);position:relative}.scroll-container{scrollbar-color:var(--bp-scrollbar-color);scrollbar-width:var(--bp-scrollbar-width);box-shadow:var(--box-shadow);border:var(--border);height:var(--body-height,100%);min-height:var(--body-min-height,auto);scroll-padding-top:var(--scroll-padding-top);flex-direction:column;width:100%;display:flex;overflow:auto}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group{min-width:fit-content;margin-top:var(--bp-size-200);flex-direction:column;flex:1;display:flex}slot[name=header]{z-index:99;flex-direction:column;min-width:fit-content;display:flex;position:sticky;top:0}::slotted(bp-grid-row:not([bp-draggable=target]):first-of-type){--box-shadow:var(--border-width)solid transparent}@keyframes fadein{0%{opacity:0}to{opacity:1}}");export{o as default};
1
+ const o=new CSSStyleSheet;o.replaceSync("[hidden]{display:none!important}:host{--background:var(--bp-layer-background-200);--body-height:auto;--body-min-height:auto;--column-height:var(--bp-size-900);--row-height:var(--bp-size-900);--scroll-padding-top:var(--column-height);--row-content-visibility:auto;--border:0;--border-width:var(--bp-object-border-width-100);--border-color:var(--bp-object-border-color-100);width:100%;display:block;position:relative}:host([range-selection]){user-select:none}:host([layer=flat]){--border-color:var(--bp-object-border-color-200);--background:inherit!important}[part=internal]{border:var(--border);border-radius:var(--bp-object-border-radius-100);background:var(--background);position:relative}.scroll-container{scrollbar-color:var(--bp-scrollbar-color);scrollbar-width:var(--bp-scrollbar-width);box-shadow:var(--box-shadow);border:var(--border);height:var(--body-height,100%);min-height:var(--body-min-height,auto);scroll-padding-top:var(--scroll-padding-top);flex-direction:column;width:100%;display:flex;overflow:auto}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group{min-width:fit-content;margin-top:var(--bp-size-200);flex-direction:column;flex:1;display:flex}slot[name=header]{z-index:99;flex-direction:column;min-width:fit-content;display:flex;position:sticky;top:0}@keyframes fadein{0%{opacity:0}to{opacity:1}}");export{o as default};
@@ -25,6 +25,7 @@ export declare class BpGrid extends LitElement {
25
25
  #private;
26
26
  /** set default aria/i18n strings */
27
27
  i18n: {
28
+ copy: string;
28
29
  sort: string;
29
30
  none: string;
30
31
  ascending: string;
@@ -1 +1 @@
1
- const e=new CSSStyleSheet;e.replaceSync(":is(bp-grid-row:has(bp-grid-cell:first-child bp-checkbox:state(checked)),bp-grid-row:has(bp-grid-cell:first-child bp-radio:state(checked))){--bp-interaction-offset:var(--bp-interaction-selected-offset)}bp-grid-cell[role=rowheader]:first-child{--bp-interaction-offset:var(--bp-interaction-selected-offset);--cell-border-width:var(--bp-size-100)}bp-grid-row bp-grid-cell:last-child{--border-right:0}bp-grid[row-style*=border] bp-grid-row:last-child{--border-bottom:0!important}bp-grid-cell:has(bp-button-handle){--padding-inline:var(--bp-size-400)}");export{e as default};
1
+ const r=new CSSStyleSheet;r.replaceSync(":is(bp-grid-row:has(bp-grid-cell:first-child bp-checkbox:state(checked)),bp-grid-row:has(bp-grid-cell:first-child bp-radio:state(checked))){--bp-interaction-offset:var(--bp-interaction-selected-offset)}bp-grid-cell[role=rowheader]:first-child{--bp-interaction-offset:var(--bp-interaction-selected-offset);--cell-border-width:var(--bp-size-100)}bp-grid-row bp-grid-cell:last-child{--border-right:0}bp-grid[row-style*=border] bp-grid-row:last-child{--border-bottom:0!important}bp-grid-cell:has(bp-button-handle){--padding-inline:var(--bp-size-400)}bp-grid:has(bp-virtual-list) bp-grid-header{overflow-y:scroll}bp-grid[column-style*=border] bp-grid-row{--cell-border-width:var(--border-width);--border-top:0;--border-bottom:0}bp-grid[row-style*=border] bp-grid-row{--border-top:var(--border-width)solid var(--border-color)}bp-grid[row-style*=border] bp-grid-row:last-of-type{--border-bottom:var(--border-width)solid var(--border-color)}bp-grid[row-style*=border] bp-grid-row:first-of-type{--border-top:0}bp-grid[row-style*=stripe] bp-grid-row{--border-top:0;--border-bottom:0}bp-grid[row-style*=stripe] bp-grid-row:nth-child(2n),bp-grid[row-style*=hover] bp-grid-row:hover{--bp-interaction-offset:var(--bp-interaction-hover-offset)}bp-grid bp-grid-row:not([bp-draggable=target]):first-of-type{--box-shadow:var(--border-width)solid transparent}");export{r as default};
@@ -1 +1 @@
1
- import{__decorate as t}from"tslib";import{LitElement as e,html as o}from"lit";import{baseStyles as r,I18nService as l,createId as i,attachRootNodeStyles as n,dynamicControllers as s,i18n as a,typeMultiSelectable as h}from"@blueprintui/components/internals";import{interactionScrollVisibility as c}from"@blueprintui/grid/internals";import{GridLayoutController as u}from"./layout.controller.js";import{GridDOMController as d}from"./dom.controller.js";import C from"./element.global.css.js";import m from"./element.css.js";let p=class extends e{static{this.properties={i18n:{type:Object},height:{type:String,reflect:!0},columnLayout:{type:String,reflect:!0,attribute:"column-layout"},rowStyle:{type:String,reflect:!0,attribute:"row-style"},columnStyle:{type:String,reflect:!0,attribute:"column-style"},selectable:{type:String,reflect:!0},scrollLock:{type:Boolean,reflect:!0,attribute:"scroll-lock"},layer:{type:String,reflect:!0},rangeSelection:{type:Boolean,reflect:!0,attribute:"range-selection"},_id:{type:String,reflect:!0}}}static{this.styles=[r,m]}get gridLayoutControllerConfig(){return{columns:this.#t.columns,columnLayout:this.columnLayout,height:this.height}}#t;get grid(){return this.#t.grid}get columns(){return this.#t.columns}get cells(){return this.#t.cells}get rows(){return this.#t.rows}get keyNavGrid(){return this.shadowRoot.querySelector(".scroll-container")}render(){return o`<div role="presentation" part="internal"><div role="presentation" class="scroll-container"><slot role="presentation" name="header"></slot><slot role="presentation" class="body-row-group"></slot></div><slot name="footer"></slot><slot name="detail"></slot></div>`}constructor(){super(),this.gridLayoutController=new u(this),this._internals=this.attachInternals(),this.#t=new d(this),this._internals.role="grid",this._internals.states.add("bp-layer"),this.#e(),this.i18n=l.keys.actions,this.columnLayout="fixed",this.scrollLock=!1,this.layer="container",this.rangeSelection=!1,this._id=i()}async connectedCallback(){super.connectedCallback(),n(this,[C]),await this.updateComplete,this.shadowRoot.addEventListener("bp-slotchange",()=>this.#o()),this.#o()}#e(){this.addEventListener("sort",t=>{const e=t.composedPath().find(t=>"BP-GRID-COLUMN"===t.tagName);e&&(e.ariaSort=t.detail)})}async#o(){this.#t.isStatic||(this.#r(),this.#l(),this.#i(),this.#n(),this.#s(),this.#a())}#r(){const t=Math.max(this.#t.rows?.length,1),e=this.#t.footer?1:0;this._internals.ariaRowCount=""+(1+t+e),this._internals.ariaColCount=""+this.#t.columns.length}#l(){this.#t.columns.forEach((t,e)=>t.ariaColIndex=""+(e+1))}#i(){this.#t.rows?.forEach((t,e)=>t.ariaRowIndex=""+(e+2))}#n(){this.#t.cells?.forEach((t,e)=>t.ariaColIndex=""+(e%this.#t.columns.length+1))}#s(){this.#t.placeholder&&(this.#t.placeholder.ariaRowCount=""+(this.#t.rows.length+1),this.#t.placeholder._colSpan=this._internals.ariaColCount)}#a(){this.#t.footer&&(this.#t.footer.ariaRowCount=""+(this.#t.rows.length+2),this.#t.footer._colSpan=this._internals.ariaColCount)}};p=t([s(),a({key:"actions"}),h(),c()],p);export{p as BpGrid};
1
+ import{__decorate as t}from"tslib";import{LitElement as e,html as o}from"lit";import{baseStyles as i,I18nService as r,createId as l,attachRootNodeStyles as n,dynamicControllers as s,i18n as a,typeMultiSelectable as h}from"@blueprintui/components/internals";import{interactionScrollVisibility as c}from"@blueprintui/grid/internals";import{GridLayoutController as u}from"./layout.controller.js";import{GridDOMController as d}from"./dom.controller.js";import C from"./element.global.css.js";import m from"./element.css.js";let p=class extends e{static{this.properties={i18n:{type:Object},height:{type:String,reflect:!0},columnLayout:{type:String,reflect:!0,attribute:"column-layout"},rowStyle:{type:String,reflect:!0,attribute:"row-style"},columnStyle:{type:String,reflect:!0,attribute:"column-style"},selectable:{type:String,reflect:!0},scrollLock:{type:Boolean,reflect:!0,attribute:"scroll-lock"},layer:{type:String,reflect:!0},rangeSelection:{type:Boolean,reflect:!0,attribute:"range-selection"},_id:{type:String,reflect:!0}}}static{this.styles=[i,m]}get gridLayoutControllerConfig(){return{columns:this.#t.columns,columnLayout:this.columnLayout,height:this.height}}#t;get grid(){return this.#t.grid}get columns(){return this.#t.columns}get cells(){return this.#t.cells}get rows(){return this.#t.rows}get keyNavGrid(){return this.shadowRoot.querySelector(".scroll-container")}render(){return o`<div role="presentation" part="internal"><div role="presentation" class="scroll-container"><slot role="presentation" name="header"></slot><slot role="presentation" class="body-row-group"></slot></div><slot name="footer"></slot><slot name="detail"></slot></div>`}constructor(){super(),this.gridLayoutController=new u(this),this._internals=this.attachInternals(),this.#t=new d(this),this._internals.role="grid",this._internals.states.add("bp-layer"),this.#e(),this.i18n=r.keys.actions,this.columnLayout="fixed",this.scrollLock=!1,this.layer="container",this.rangeSelection=!1,this._id=l()}async connectedCallback(){super.connectedCallback(),n(this,[C]),await this.updateComplete,this.shadowRoot.addEventListener("bp-slotchange",()=>this.#o()),this.#o()}#e(){this.addEventListener("sort",t=>{const e=t.composedPath().find(t=>"BP-GRID-COLUMN"===t.tagName);e&&(e.ariaSort=t.detail)})}async#o(){this.#t.isStatic||(this.#i(),this.#r(),this.#l(),this.#n(),this.#s(),this.#a())}#i(){const t=Math.max(this.#t.rows?.length,1),e=this.#t.footer?1:0;this._internals.ariaRowCount=""+(1+t+e),this._internals.ariaColCount=""+this.#t.columns.length}#r(){this.#t.columns.forEach((t,e)=>t.ariaColIndex=""+(e+1))}#l(){this.#t.rows?.forEach((t,e)=>t.ariaRowIndex=""+(e+2))}#n(){this.#t.cells?.forEach((t,e)=>t.ariaColIndex=""+(e%this.#t.columns.length+1))}#s(){this.#t.placeholder&&(this.#t.placeholder.ariaRowCount=""+(this.#t.rows.length+1),this.#t.placeholder._colSpan=this._internals.ariaColCount)}#a(){this.#t.footer&&(this.#t.footer.ariaRowCount=""+(this.#t.rows.length+2),this.#t.footer._colSpan=this._internals.ariaColCount)}};p=t([s(),a({key:"actions"}),h(),c()],p);export{p as BpGrid};
@@ -13,6 +13,7 @@ export declare class BpGridPlaceholder extends LitElement {
13
13
  #private;
14
14
  /** set default aria/i18n strings */
15
15
  i18n: {
16
+ copy: string;
16
17
  sort: string;
17
18
  none: string;
18
19
  ascending: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blueprintui/grid",
3
- "version": "2.5.0",
3
+ "version": "2.6.0",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "package.json",
@@ -62,15 +62,15 @@
62
62
  "dependencies": {
63
63
  "lit": "^3.3.1",
64
64
  "tslib": "^2.8.1",
65
- "@blueprintui/components": "^2.11.0",
66
- "@blueprintui/crane": "^2.1.8",
67
- "@blueprintui/icons": "^2.1.6",
68
65
  "@blueprintui/themes": "^2.1.12",
66
+ "@blueprintui/icons": "^2.1.6",
67
+ "@blueprintui/crane": "^2.1.8",
68
+ "@blueprintui/components": "^2.17.1",
69
69
  "@blueprintui/typewriter": "^2.1.11"
70
70
  },
71
71
  "devDependencies": {
72
72
  "@blueprintui/cli": "0.11.3",
73
- "@blueprintui/drafter": "0.9.4",
73
+ "@blueprintui/drafter": "0.10.0",
74
74
  "@types/jasmine": "5.1.9",
75
75
  "@web/dev-server": "0.4.6",
76
76
  "@web/dev-server-esbuild": "1.0.4",
@@ -83,14 +83,15 @@
83
83
  "jasmine": "5.10.0",
84
84
  "jasmine-core": "5.10.0",
85
85
  "modern-normalize": "^3.0.1",
86
- "playwright": "1.55.0",
86
+ "playwright": "1.57.0",
87
87
  "publint": "0.3.12",
88
88
  "web-test-runner-jasmine": "0.1.4",
89
89
  "web-test-runner-performance": "0.1.6",
90
90
  "@blueprintui-internals/eslint": "0.0.0",
91
- "@blueprintui/layout": "^2.2.0",
91
+ "@blueprintui/typography": "^2.2.1",
92
92
  "@blueprintui/test": "^0.0.0",
93
- "@blueprintui/typography": "^2.2.0"
93
+ "@blueprintui/layout": "^2.2.0",
94
+ "@blueprintui/virtual": "^1.0.0"
94
95
  },
95
96
  "wireit": {
96
97
  "ci": {