@blueprintui/grid 1.9.3 → 1.10.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/column/alignment.controller.js +1 -1
- package/column/element.css.js +1 -1
- package/column/element.d.ts +0 -1
- package/column/element.js +1 -1
- package/column/position.controller.js +1 -1
- package/column/width.controller.js +1 -1
- package/custom-elements.json +82 -0
- package/grid/dom.controller.js +1 -1
- package/grid/element.css.js +1 -1
- package/grid/element.global.css.js +1 -1
- package/grid/element.js +1 -1
- package/grid/layout.controller.js +1 -1
- package/header/element.css.js +1 -0
- package/header/element.d.ts +22 -0
- package/header/element.js +1 -0
- package/include/core.d.ts +2 -0
- package/include/core.js +1 -1
- package/internals/utils/focus.js +1 -0
- package/internals/utils/traversal.d.ts +1 -0
- package/internals/utils/traversal.js +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{attachInternals as t}from"@blueprintui/components/internals";class n{host;#t;get#n(){const t=this.host.parentElement.grid,n=t[0].indexOf(this.host);return t.slice(0).map((t=>t[n]))}constructor(t){this.host=t,this.host.addController(this)}hostConnected(){t(this.host),this.#
|
|
1
|
+
import{attachInternals as t}from"@blueprintui/components/internals";class n{host;#t;get#n(){const t=this.host.parentElement.parentElement.grid,n=t[0].indexOf(this.host);return t.slice(0).map((t=>t[n]))}constructor(t){this.host=t,this.host.addController(this)}hostConnected(){t(this.host),this.#e()}hostUpdated(){this.#e()}#e(){this.host.alignment!==this.#t&&(this.#n.forEach((t=>{e(t),this.host.alignment&&t._internals.states.add("--alignment-"+this.host.alignment)})),this.#t=this.host.alignment)}}function e(t){t._internals.states.delete("--alignment-start"),t._internals.states.delete("--alignment-center"),t._internals.states.delete("--alignment-end")}export{n as ColumnAlignmentController,e as resetAlignmentState};
|
package/column/element.css.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=new CSSStyleSheet;t.replaceSync(":host{--background:var(--bp-layer-container-background);--min-height:var(--column-height, var(--bp-interaction-touch-target));--min-width:fit-content;--padding-block:calc(var(--bp-size-6) + var(--bp-size-1));--padding-inline:var(--bp-size-6);--font-size:var(--bp-text-size-200);--color:var(--bp-text-color-500);top:0;z-index:998;position:sticky;min-height:var(--min-height);min-width:var(--min-width);display:flex;align-items:center;outline:0!important}:host,:host(:--alignment-start){--justify-content:start}:host(:--alignment-center){--justify-content:center}:host(:--alignment-end){--justify-content:end}[part=internal]{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset, 0%));min-height:var(--min-height);justify-content:var(--justify-content);padding-inline:var(--padding-inline);padding-block:var(--padding-block);font-size:var(--font-size);color:var(--color);
|
|
1
|
+
const t=new CSSStyleSheet;t.replaceSync(":host{--background:var(--bp-layer-container-background);--min-height:var(--column-height, var(--bp-interaction-touch-target));--min-width:fit-content;--padding-block:calc(var(--bp-size-6) + var(--bp-size-1));--padding-inline:var(--bp-size-6);--font-size:var(--bp-text-size-200);--color:var(--bp-text-color-500);top:0;z-index:998;position:sticky;min-height:var(--min-height);min-width:var(--min-width);display:flex;align-items:center;outline:0!important}:host,:host(:--alignment-start){--justify-content:start}:host(:--alignment-center){--justify-content:center}:host(:--alignment-end){--justify-content:end}[part=internal]{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset, 0%));min-height:var(--min-height);justify-content:var(--justify-content);padding-inline:var(--padding-inline);padding-block:var(--padding-block);font-size:var(--font-size);color:var(--color);border-bottom:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100);text-align:left;font-weight:500;white-space:nowrap;overflow:visible;text-overflow:ellipsis;line-height:1em;margin:0;display:flex;gap:var(--bp-size-sm);align-items:center;height:100%;width:100%;position:sticky!important}:host([position='fixed']),:host([position='sticky']){z-index:999}[part=internal]::after{background:var(--bp-object-border-color-100);width:var(--bp-object-border-width-100);right:0;height:50%;position:absolute;content:\"\";display:none}[focused]+[part=internal]::after{background:var(--bp-interaction-accent-background);height:100vh;right:0}:host([bp-draggable*='target']) [part=internal]::after{background:var(--bp-interaction-accent-background);height:100vh;left:0}:host([bp-draggable*='active']) [part=internal]{box-shadow:0 var(--bp-size-2)0 var(--bp-interaction-accent-background)}.border,.line{right:0;position:absolute}.border{top:var(--bp-size-4);bottom:var(--bp-size-4);width:var(--bp-object-border-width-100);background:var(--bp-object-border-color-100)}.line{top:var(--min-height);width:2px;bottom:0;height:100vh;background:var(--bp-status-accent-background-300);display:none}:host(:--resizing) .line{display:block}:host(:--hover){--interaction-offset:var(--bp-interaction-hover-offset)}::slotted([tabindex=\"0\"]),::slotted(button){margin-left:auto}::slotted(bp-button-sort){position:absolute;right:8px;--icon-height:14px;outline:0!important;--bp-interaction-outline-webkit:none!important;--bp-interaction-outline-offset:none!important}::slotted(bp-button-resize){position:absolute;right:0;--height:32px;--background:var(--bp-object-border-color-100);--width:var(--bp-object-border-width-100)}:host(:--ch-last) .border,:host(:--ch-last) ::slotted(bp-button-resize){display:none}");export{t as default};
|
package/column/element.d.ts
CHANGED
package/column/element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{LitElement as
|
|
1
|
+
import{__decorate as t}from"tslib";import{LitElement as r,html as e}from"lit";import{baseStyles as i,dynamicControllers as s}from"@blueprintui/components/internals";import{GridColumnWidthController as n}from"./width.controller.js";import{focusStyles as o}from"../internals/index.js";import l from"./element.css.js";let a=class extends r{static properties={width:{type:String},position:{type:String,reflect:!0},alignment:{type:String,reflect:!0}};static styles=[i,l,o];_internals=this.attachInternals();render(){return e`<div role="group" part="internal" focusable><slot> </slot><slot name="resize"><div class="border"></div></slot><div class="line"></div></div>`}constructor(){super();new n(this),this._internals.role="columnheader",this._internals.ariaSort="none"}};a=t([s()],a);export{a as BpGridColumn};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
class t{host;#t;#i;get#s(){return this.host.parentElement}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#o()}async hostUpdated(){await this.host.updateComplete,this.#o()}async#o(){this.host.ariaColIndex&&this.host.position!==this.#i&&(this.#i=this.host.position,this.#t||(this.#t=document.createElement("style"),this.#s.append(this.#t)),this.#e())}#e(){const t=this.#s.getBoundingClientRect(),i=this.host.offsetLeft<t.width/2?"left":"right";this.#t.innerHTML=`${this.#h(i,t)}\n${this.#n(i)}`}#h(t,i){const s=this.host.getBoundingClientRect(),o="fixed"===this.host.position?s.left-i.left-1+"px":"initial",e="fixed"===this.host.position?s.right-s.left-s.width+"px":"initial";return`\n [_id='${this.#s._id}'] [aria-colindex="${this.host.ariaColIndex}"] {\n ${"left"===t?`left: ${o};`:""}\n ${"right"===t?`right: ${e};`:""}\n ${"sticky"===this.host.position?"left: 0px;":""}\n }\n\n [_id='${this.#s._id}'] bp-grid-cell[aria-colindex="${this.host.ariaColIndex}"] {\n z-index: 98;\n }`}#n(t){const i="left"===t&&this.host.nextElementSibling.position!==this.host.position,s="right"===t&&this.host.previousElementSibling.position!==this.host.position;return void 0!==this.host.position&&(i||s)?`\n [_id='${this.#s._id}'] bp-grid-cell[aria-colindex="${this.host.ariaColIndex}"] {\n --border-${"left"===t?"right":"left"}: var(--bp-object-border-width-100, 1px) solid var(--bp-object-border-color-100, hsl(0, 0%, 91%));\n }`:""}}export{t as ColumnPositionController};
|
|
1
|
+
class t{host;#t;#i;get#s(){return this.host.parentElement.parentElement}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#o()}async hostUpdated(){await this.host.updateComplete,this.#o()}async#o(){this.host.ariaColIndex&&this.host.position!==this.#i&&(this.#i=this.host.position,this.#t||(this.#t=document.createElement("style"),this.#s.append(this.#t)),this.#e())}#e(){const t=this.#s.getBoundingClientRect(),i=this.host.offsetLeft<t.width/2?"left":"right";this.#t.innerHTML=`${this.#h(i,t)}\n${this.#n(i)}`}#h(t,i){const s=this.host.getBoundingClientRect(),o="fixed"===this.host.position?s.left-i.left-1+"px":"initial",e="fixed"===this.host.position?s.right-s.left-s.width+"px":"initial";return`\n [_id='${this.#s._id}'] [aria-colindex="${this.host.ariaColIndex}"] {\n ${"left"===t?`left: ${o};`:""}\n ${"right"===t?`right: ${e};`:""}\n ${"sticky"===this.host.position?"left: 0px;":""}\n }\n\n [_id='${this.#s._id}'] bp-grid-cell[aria-colindex="${this.host.ariaColIndex}"] {\n z-index: 98;\n }`}#n(t){const i="left"===t&&this.host.nextElementSibling.position!==this.host.position,s="right"===t&&this.host.previousElementSibling.position!==this.host.position;return void 0!==this.host.position&&(i||s)?`\n [_id='${this.#s._id}'] bp-grid-cell[aria-colindex="${this.host.ariaColIndex}"] {\n --border-${"left"===t?"right":"left"}: var(--bp-object-border-width-100, 1px) solid var(--bp-object-border-color-100, hsl(0, 0%, 91%));\n }`:""}}export{t as ColumnPositionController};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{isNumericString as t}from"@blueprintui/components/internals";class s{host;#t;constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#t=this.host.parentElement,this.#s()}async hostUpdated(){await this.host.updateComplete,this.#s()}#s(){if("max-content"===this.host.width){const t=this.#t.grid[0].indexOf(this.host),s=this.#t.grid[1][t],{width:i}=getComputedStyle(s);this.#t.style.setProperty("--ch"+(t+1),i)}else if(this.host.width){const s=t(this.host.width)?this.host.width+"px":this.host.width;this.#t.style.setProperty("--ch"+this.host.ariaColIndex,s)}}}export{s as GridColumnWidthController};
|
|
1
|
+
import{isNumericString as t}from"@blueprintui/components/internals";class s{host;#t;constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#t=this.host.parentElement.parentElement,this.#s()}async hostUpdated(){await this.host.updateComplete,this.#s()}#s(){if("max-content"===this.host.width){const t=this.#t.grid[0].indexOf(this.host),s=this.#t.grid[1][t],{width:i}=getComputedStyle(s);this.#t.style.setProperty("--ch"+(t+1),i)}else if(this.host.width){const s=t(this.host.width)?this.host.width+"px":this.host.width;this.#t.style.setProperty("--ch"+this.host.ariaColIndex,s)}}}export{s as GridColumnWidthController};
|
package/custom-elements.json
CHANGED
|
@@ -1139,6 +1139,68 @@
|
|
|
1139
1139
|
}
|
|
1140
1140
|
]
|
|
1141
1141
|
},
|
|
1142
|
+
{
|
|
1143
|
+
"kind": "javascript-module",
|
|
1144
|
+
"path": "/header/element.css",
|
|
1145
|
+
"declarations": [],
|
|
1146
|
+
"exports": []
|
|
1147
|
+
},
|
|
1148
|
+
{
|
|
1149
|
+
"kind": "javascript-module",
|
|
1150
|
+
"path": "/header/element.js",
|
|
1151
|
+
"declarations": [
|
|
1152
|
+
{
|
|
1153
|
+
"kind": "class",
|
|
1154
|
+
"description": "Grid Row\n\n```typescript\nimport '@blueprintui/grid/include/core.js';\n```",
|
|
1155
|
+
"name": "BpGridHeader",
|
|
1156
|
+
"cssProperties": [
|
|
1157
|
+
{
|
|
1158
|
+
"name": "--border-top"
|
|
1159
|
+
},
|
|
1160
|
+
{
|
|
1161
|
+
"name": "--border-bottom"
|
|
1162
|
+
},
|
|
1163
|
+
{
|
|
1164
|
+
"name": "--background"
|
|
1165
|
+
},
|
|
1166
|
+
{
|
|
1167
|
+
"name": "--min-height"
|
|
1168
|
+
}
|
|
1169
|
+
],
|
|
1170
|
+
"members": [
|
|
1171
|
+
{
|
|
1172
|
+
"kind": "field",
|
|
1173
|
+
"name": "_internals",
|
|
1174
|
+
"privacy": "private"
|
|
1175
|
+
},
|
|
1176
|
+
{
|
|
1177
|
+
"kind": "field",
|
|
1178
|
+
"name": "role",
|
|
1179
|
+
"type": {
|
|
1180
|
+
"text": "string"
|
|
1181
|
+
},
|
|
1182
|
+
"default": "'row'"
|
|
1183
|
+
}
|
|
1184
|
+
],
|
|
1185
|
+
"superclass": {
|
|
1186
|
+
"name": "LitElement",
|
|
1187
|
+
"package": "lit"
|
|
1188
|
+
},
|
|
1189
|
+
"tagName": "bp-grid-header",
|
|
1190
|
+
"customElement": true
|
|
1191
|
+
}
|
|
1192
|
+
],
|
|
1193
|
+
"exports": [
|
|
1194
|
+
{
|
|
1195
|
+
"kind": "js",
|
|
1196
|
+
"name": "BpGridHeader",
|
|
1197
|
+
"declaration": {
|
|
1198
|
+
"name": "BpGridHeader",
|
|
1199
|
+
"module": "/header/element.js"
|
|
1200
|
+
}
|
|
1201
|
+
}
|
|
1202
|
+
]
|
|
1203
|
+
},
|
|
1142
1204
|
{
|
|
1143
1205
|
"kind": "javascript-module",
|
|
1144
1206
|
"path": "/include/column-alignment.js",
|
|
@@ -1618,6 +1680,18 @@
|
|
|
1618
1680
|
}
|
|
1619
1681
|
}
|
|
1620
1682
|
]
|
|
1683
|
+
},
|
|
1684
|
+
{
|
|
1685
|
+
"kind": "function",
|
|
1686
|
+
"name": "insertSpanningCells",
|
|
1687
|
+
"parameters": [
|
|
1688
|
+
{
|
|
1689
|
+
"name": "cells",
|
|
1690
|
+
"type": {
|
|
1691
|
+
"text": "HTMLElement[]"
|
|
1692
|
+
}
|
|
1693
|
+
}
|
|
1694
|
+
]
|
|
1621
1695
|
}
|
|
1622
1696
|
],
|
|
1623
1697
|
"exports": [
|
|
@@ -1660,6 +1734,14 @@
|
|
|
1660
1734
|
"name": "mergeObjects",
|
|
1661
1735
|
"module": "/internals/utils/traversal.js"
|
|
1662
1736
|
}
|
|
1737
|
+
},
|
|
1738
|
+
{
|
|
1739
|
+
"kind": "js",
|
|
1740
|
+
"name": "insertSpanningCells",
|
|
1741
|
+
"declaration": {
|
|
1742
|
+
"name": "insertSpanningCells",
|
|
1743
|
+
"module": "/internals/utils/traversal.js"
|
|
1744
|
+
}
|
|
1663
1745
|
}
|
|
1664
1746
|
]
|
|
1665
1747
|
},
|
package/grid/dom.controller.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
class
|
|
1
|
+
import{insertSpanningCells as t}from"../internals/utils/traversal.js";class s{host;#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}#l;get grid(){if(!this.#l){const s=this.columns.filter((t=>!t.ariaColSpan)),e=t([...s,...Array.from(this.cells)]);for(this.#l=[];e.length;)this.#l.push(e.splice(0,s.length))}return this.#l}#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",(()=>this.host.updateComplete.then((()=>{this.#i(),this.host.shadowRoot.dispatchEvent(new CustomEvent("bp-grid:slotchange"))}))))}#i(){this.#l=null,this.#r=null,this.#e=null,this.#o=null,this.#t=null,this.#s=null}}export{s as GridDOMController};
|
package/grid/element.css.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const o=new CSSStyleSheet;o.replaceSync("@keyframes fadein{0%{opacity:0}to{opacity:1}}[hidden]{display:none!important}:host{--background:var(--bp-layer-container-background);--body-height:auto;--body-min-height:auto;--scrollbar-background:var(--background);--scrollbar-thumb-background:var(--bp-object-border-color-100);--column-height:48px;--row-height:48px;--scroll-padding-top:var(--column-height);--row-content-visibility:auto;--border:0;width:100%;display:block;position:relative}:host([range-selection]){user-select:none}:host([column-style*='border']) ::slotted(bp-grid-row){--cell-border-width:var(--bp-object-border-width-100);--border-top:0;--border-bottom:0}:host([row-style*='border']) ::slotted(bp-grid-row){--border-top:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100)}:host([row-style*='border']) ::slotted(bp-grid-row:last-of-type){--border-bottom:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100)}: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*='hover']) ::slotted(bp-grid-row:hover),:host([row-style*='stripe']) ::slotted(bp-grid-row:nth-child(even)){--bp-interaction-offset:var(--bp-interaction-hover-offset)}:host([column-align*='center']){--column-justify-content:center;--cell-justify-content:center}:host([column-align*='end']){--column-justify-content:flex-end;--cell-justify-content:flex-end}[part=internal]{border:var(--border);border-radius:var(--bp-object-border-radius-100);background:var(--background);position:relative}.scroll-container{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);overflow:auto;width:100%;display:flex;flex-direction:column}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group{display:flex;flex-direction:column;flex:1 1 0%;
|
|
1
|
+
const o=new CSSStyleSheet;o.replaceSync("@keyframes fadein{0%{opacity:0}to{opacity:1}}[hidden]{display:none!important}:host{--background:var(--bp-layer-container-background);--body-height:auto;--body-min-height:auto;--scrollbar-background:var(--background);--scrollbar-thumb-background:var(--bp-object-border-color-100);--column-height:48px;--row-height:48px;--scroll-padding-top:var(--column-height);--row-content-visibility:auto;--border:0;width:100%;display:block;position:relative}:host([range-selection]){user-select:none}:host([column-style*='border']) ::slotted(bp-grid-row){--cell-border-width:var(--bp-object-border-width-100);--border-top:0;--border-bottom:0}:host([row-style*='border']) ::slotted(bp-grid-row){--border-top:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100)}:host([row-style*='border']) ::slotted(bp-grid-row:last-of-type){--border-bottom:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100)}: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*='hover']) ::slotted(bp-grid-row:hover),:host([row-style*='stripe']) ::slotted(bp-grid-row:nth-child(even)){--bp-interaction-offset:var(--bp-interaction-hover-offset)}:host([column-align*='center']){--column-justify-content:center;--cell-justify-content:center}:host([column-align*='end']){--column-justify-content:flex-end;--cell-justify-content:flex-end}[part=internal]{border:var(--border);border-radius:var(--bp-object-border-radius-100);background:var(--background);position:relative}.scroll-container{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);overflow:auto;width:100%;display:flex;flex-direction:column}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group,slot[name=header]{display:flex;flex-direction:column;min-width:fit-content}.body-row-group{flex:1 1 0%;margin-top:var(--bp-size-2)}slot[name=header]{position:sticky;top:0;z-index:99}::slotted(bp-grid-row:not([bp-draggable=target]):first-of-type){--box-shadow:var(--bp-object-border-width-100) solid transparent}::-webkit-scrollbar{width:var(--bp-size-5);height:var(--bp-size-5);background:0 0}::-webkit-scrollbar-track{margin-top:var(--bp-interaction-touch-target);box-shadow:inset 0 0 var(--bp-size-5) var(--scrollbar-background)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-background);border-radius:var(--bp-object-border-radius-100);border:var(--bp-size-2) solid var(--scrollbar-background)}::-webkit-scrollbar-corner{background:rgba(0 0 0 0%)}");export{o as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=new CSSStyleSheet;e.replaceSync("bp-grid-row:has(bp-grid-cell:first-child bp-checkbox:--checked),bp-grid-row:has(bp-grid-cell:first-child bp-radio:--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-1)}");export{e as default};
|
|
1
|
+
const e=new CSSStyleSheet;e.replaceSync("bp-grid-row:has(bp-grid-cell:first-child bp-checkbox:--checked),bp-grid-row:has(bp-grid-cell:first-child bp-radio:--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-1)}bp-grid-row bp-grid-cell:last-child{--border-right:0}");export{e as default};
|
package/grid/element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{LitElement as
|
|
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,ariaMultiSelectable as c}from"@blueprintui/components/internals";import"../internals/index.js";import{GridLayoutController as h}from"./layout.controller.js";import{GridDOMController as u}from"./dom.controller.js";import d from"./element.css.js";import m from"./element.global.css.js";import{interactionScrollVisibility as p}from"../internals/controllers/interaction-scroll-visibility.controller.js";let C=class extends e{static 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"},rangeSelection:{type:Boolean,reflect:!0,attribute:"range-selection"},_id:{type:String,reflect:!0}};gridLayoutController=new h(this);static styles=[i,d];get gridLayoutControllerConfig(){return{columns:this.#t.columns,columnLayout:this.columnLayout,height:this.height}}#t;get grid(){return this.#t.grid}get keyNavGrid(){return this.shadowRoot.querySelector(".scroll-container")}_internals=this.attachInternals();render(){return o`<div role="presentation" layer 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.#t=new u(this),this._internals.role="grid",this.#e(),this.i18n=r.keys.actions,this.columnLayout="fixed",this.scrollLock=!1,this.rangeSelection=!1,this._id=l()}async connectedCallback(){super.connectedCallback(),n(this.parentNode,[m]),await this.updateComplete,this.shadowRoot.addEventListener("bp-grid: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)}};C=t([s(),a({key:"actions"}),c(),p()],C);export{C as BpGrid};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{listenForAttributeListChange as t,isNumericString as s}from"@blueprintui/components/internals";import{onChildListMutation as i}from"../internals/utils/events.js";class e{host;#t=[];#s;get#i(){return Array.from(this.#s??[])}get#e(){return this.host.gridLayoutControllerConfig}get#h(){return this.#i.filter((t=>!t.hidden))}get#o(){return this.#h["rtl"===this.host.getAttribute("dir")?0:this.#h.length-1]}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#l(),this.host.addEventListener("resize-change",(()=>this.#n()),{once:!0,capture:!0}),this.#t.push(i(this.host,(async t=>{await this.host.updateComplete,t&&this.#r(t)&&this.#l()}))),this.#t.push(t(this.host,["hidden"],(()=>this.#l())))}hostUpdated(){this.#e.height&&this.host.style.setProperty("--body-height",s(this.#e.height)?this.#e.height+"px":this.#e.height)}hostDisconnected(){this.#t.forEach((t=>t.disconnect()))}#r(t){return[...Array.from(t.removedNodes),...Array.from(t.addedNodes)].find((t=>"BP-GRID-COLUMN"===t.tagName))}#n(){"fixed"===this.#e.columnLayout&&(this.#h.filter((t=>t.width)).forEach((t=>this.host.style.setProperty("--ch"+t.ariaColIndex,s(t.width)?t.width+"px":t.width))),this.#h.filter((t=>!t.width&&parseInt(t.ariaColIndex)!==this.#i.length)).forEach((t=>this.host.style.setProperty("--ch"+t.ariaColIndex,parseInt(getComputedStyle(t).width)+"px"))),this.host.style.setProperty("--ch"+this.#o.ariaColIndex,`minmax(${this.#
|
|
1
|
+
import{listenForAttributeListChange as t,isNumericString as s}from"@blueprintui/components/internals";import{onChildListMutation as i}from"../internals/utils/events.js";class e{host;#t=[];#s;get#i(){return Array.from(this.#s??[])}get#e(){return this.host.gridLayoutControllerConfig}get#h(){return this.#i.filter((t=>!t.hidden))}get#o(){return this.#h["rtl"===this.host.getAttribute("dir")?0:this.#h.length-1]}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#l(),this.host.addEventListener("resize-change",(()=>this.#n()),{once:!0,capture:!0}),this.#t.push(i(this.host,(async t=>{await this.host.updateComplete,t&&this.#r(t)&&this.#l()}))),this.#t.push(t(this.host,["hidden"],(()=>this.#l())))}hostUpdated(){this.#e.height&&this.host.style.setProperty("--body-height",s(this.#e.height)?this.#e.height+"px":this.#e.height)}hostDisconnected(){this.#t.forEach((t=>t.disconnect()))}#r(t){return[...Array.from(t.removedNodes),...Array.from(t.addedNodes)].find((t=>"BP-GRID-COLUMN"===t.tagName))}#n(){"fixed"===this.#e.columnLayout&&(this.#h.filter((t=>t.width)).forEach((t=>this.host.style.setProperty("--ch"+t.ariaColIndex,s(t.width)?t.width+"px":t.width))),this.#h.filter((t=>!t.width&&parseInt(t.ariaColIndex)!==this.#i.length)).forEach((t=>this.host.style.setProperty("--ch"+t.ariaColIndex,parseInt(getComputedStyle(t).width)+"px"))),this.host.style.setProperty("--ch"+this.#o.ariaColIndex,`minmax(${this.#a()??parseInt(getComputedStyle(this.#o).width)+"px"}, 100%)`))}#a(){return s(this.#o.width)?this.#o.width+"px":this.#o.width?this.#o.width:null}#l(){this.#s=this.#e.columns,this.#d(),this.#u()}#d(){const t=this.#i.filter((t=>!t.hidden&&!t.ariaColSpan)).reduce(((t,i,e)=>`${t} var(--ch${e+1}, ${(s(i.width)?i.width+"px":i.width)||"1fr"})`),"");this.host.style.setProperty("--ch-grid",t)}#u(){this.#h.forEach((t=>t._internals.states.delete("--ch-last"))),this.#o?._internals.states.add("--ch-last")}}export{e as GridLayoutController};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const t=new CSSStyleSheet;t.replaceSync(":host{--min-height:var(--row-height);--border-top:0;--border-bottom:0;--box-shadow:none;content-visibility:var(--row-content-visibility, auto);contain-intrinsic-size:auto var(--min-height)}:host([position='fixed']) ::slotted(bp-grid-cell),:host([position='sticky']) ::slotted(bp-grid-cell),:host([selected]) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-selected-offset)}slot{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset, 0%));grid-template-columns:var(--ch-grid);box-shadow:var(--box-shadow);min-height:var(--min-height);border-top:var(--border-top);border-bottom:var(--border-bottom);display:grid}:host([position='fixed']),:host([position='sticky']){--border-bottom:0;--box-shadow:0 var(--bp-object-border-width-100) var(--bp-object-border-width-100) -1px var(--bp-object-border-color-100);--row-content-visibility:visible;z-index:99;position:sticky;top:calc(var(--min-height) + var(--bp-size-1))}:host([draggable='true']){-webkit-user-drag:element;user-select:none}:host([bp-draggable*='target']){--box-shadow:inset 0 var(--bp-object-border-width-300) 0 calc(var(--bp-size-1) * -1)\n var(--bp-interaction-accent-background)}");export{t as default};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Grid Row
|
|
4
|
+
*
|
|
5
|
+
* ```typescript
|
|
6
|
+
* import '@blueprintui/grid/include/core.js';
|
|
7
|
+
* ```
|
|
8
|
+
*
|
|
9
|
+
* @element bp-grid-header
|
|
10
|
+
* @cssprop --border-top
|
|
11
|
+
* @cssprop --border-bottom
|
|
12
|
+
* @cssprop --background
|
|
13
|
+
* @cssprop --min-height
|
|
14
|
+
*/
|
|
15
|
+
export declare class BpGridHeader extends LitElement {
|
|
16
|
+
static styles: CSSStyleSheet[];
|
|
17
|
+
/** @private */
|
|
18
|
+
_internals: ElementInternals;
|
|
19
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
20
|
+
constructor();
|
|
21
|
+
connectedCallback(): void;
|
|
22
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{baseStyles as s,dynamicControllers as n}from"@blueprintui/components/internals";import o from"./element.css.js";let l=class extends e{static styles=[s,o];_internals=this.attachInternals();render(){return r`<slot></slot>`}constructor(){super();this._internals.role="row"}connectedCallback(){super.connectedCallback(),this.slot="header"}};l=t([n()],l);export{l as BpGridHeader};
|
package/include/core.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { BpGrid } from '../grid/element.js';
|
|
2
|
+
import { BpGridHeader } from '../header/element.js';
|
|
2
3
|
import { BpGridRow } from '../row/element.js';
|
|
3
4
|
import { BpGridCell } from '../cell/element.js';
|
|
4
5
|
import { BpGridColumn } from '../column/element.js';
|
|
5
6
|
declare global {
|
|
6
7
|
interface HTMLElementTagNameMap {
|
|
7
8
|
'bp-grid': BpGrid;
|
|
9
|
+
'bp-grid-header': BpGridHeader;
|
|
8
10
|
'bp-grid-row': BpGridRow;
|
|
9
11
|
'bp-grid-cell': BpGridCell;
|
|
10
12
|
'bp-grid-column': BpGridColumn;
|
package/include/core.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineElement as
|
|
1
|
+
import{defineElement as e}from"@blueprintui/components/internals";import{BpGrid as r}from"../grid/element.js";import{BpGridHeader as m}from"../header/element.js";import{BpGridRow as o}from"../row/element.js";import{BpGridCell as i}from"../cell/element.js";import{BpGridColumn as t}from"../column/element.js";e("bp-grid",r),e("bp-grid-header",m),e("bp-grid-row",o),e("bp-grid-cell",i),e("bp-grid-column",t);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function t(t){return t.matches("a[href],area[href],input:not([disabled]),button:not([disabled]),select:not([disabled]),textarea:not([disabled]),iframe,object,embed,*[tabindex],*[contenteditable=true],[role=button]:not([disabled])")}function e(t){return t.matches("a[href],button:not([disabled]),input[type=checkbox],input[type=radio],object,embed,*[tabindex],[role=button]:not([disabled])")}function n(t=document){return t.activeElement&&t.activeElement.shadowRoot?n(t.activeElement.shadowRoot)??t.activeElement:t.activeElement}function o(e){e&&!t(e)?(e.setAttribute("tabindex","-1"),e.focus(),e.addEventListener("blur",(()=>e.removeAttribute("tabindex")),{once:!0})):e?.focus()}function a(t,e){t.forEach((t=>t.tabIndex=-1)),e.tabIndex=0}function d(t){t.forEach((t=>t.tabIndex=-1)),t[0].tabIndex=0}export{o as focusElement,t as focusable,n as getActiveElement,d as initializeKeyListItems,a as setActiveKeyListItem,e as simpleFocusable};
|
|
@@ -3,3 +3,4 @@ export declare function getFlattenedDOMTree(node: Node, depth?: number): HTMLEle
|
|
|
3
3
|
export declare function getChildren(node: any): any;
|
|
4
4
|
export declare function isObject(val: any): boolean;
|
|
5
5
|
export declare function mergeObjects(...objs: object[]): object;
|
|
6
|
+
export declare function insertSpanningCells(cells: HTMLElement[]): HTMLElement[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{focusable as r}from"./focus.js";function n(n,e=10){return t(n,e).filter((n=>r(n)))}function t(r,n=10){return Array.from(e(r)).reduce(((r,o)=>[...r,[o,[...Array.from(e(o)).map((r=>[r,t(r,n)]))]]]),[]).flat(n)}function e(r){if(r.documentElement)return r.documentElement.children;if(r.shadowRoot)return r.shadowRoot.children;if(r.assignedElements){const n=r.assignedElements();return n.length?n:r.children}return r.children}function o(r){return r?.constructor===Object}function c(...r){const n={};return r.map((r=>o(r)?{...r}:{})).forEach((r=>{Object.keys(r).forEach((t=>{const e=r[t];Array.isArray(e)?n[t]=Array.from(e):o(e)?n[t]=c(n[t]||{},e):n[t]=e}))})),n}function i(r){const n=[...r];return[...r].forEach((t=>{if(t.ariaColSpan){const e=r.indexOf(t);for(let r=1;r<parseInt(t.ariaColSpan);r++)n.splice(e+r,0,t)}})),n}export{e as getChildren,t as getFlattenedDOMTree,n as getFlattenedFocusableItems,i as insertSpanningCells,o as isObject,c as mergeObjects};
|