@blueprintui/grid 1.6.7 → 1.7.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/cell/element.css.js +1 -1
- package/cell/element.d.ts +2 -1
- package/cell/element.js +1 -1
- package/column/element.css.js +1 -1
- package/column/element.d.ts +3 -4
- package/column/element.js +1 -1
- package/column/position.controller.d.ts +6 -5
- package/column/position.controller.js +1 -1
- package/column/width.controller.d.ts +9 -0
- package/column/width.controller.js +1 -0
- package/custom-elements.json +192 -131
- package/grid/dom.controller.d.ts +21 -0
- package/grid/dom.controller.js +1 -0
- package/grid/element.css.js +1 -1
- package/grid/element.d.ts +2 -12
- package/grid/element.global.css.js +1 -1
- package/grid/element.js +1 -1
- package/grid/layout.controller.d.ts +3 -3
- package/grid/layout.controller.js +1 -1
- package/include/column-position.d.ts +1 -0
- package/include/column-position.js +1 -0
- package/include/core.d.ts +0 -1
- package/include/core.js +1 -1
- package/include/keynav.js +1 -1
- package/include/row-position.d.ts +1 -0
- package/include/row-position.js +1 -0
- package/internals/index.d.ts +1 -0
- package/internals/index.js +1 -1
- package/internals/styles/focus.css.js +1 -0
- package/package.json +1 -1
- package/pagination/element.css.js +1 -1
- package/placeholder/element.css.js +1 -1
- package/row/element.css.js +1 -1
- package/row/element.js +1 -1
- package/row/position.controller.d.ts +1 -1
- package/row/position.controller.js +1 -1
- package/column/size.controller.d.ts +0 -13
- package/column/size.controller.js +0 -1
package/cell/element.css.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=new CSSStyleSheet;t.replaceSync(
|
|
1
|
+
const t=new CSSStyleSheet;t.replaceSync(':host{--border-right:var(--cell-border-width) solid var(--bp-object-border-color-100);--border-left:0;--min-width:var(--bp-size-9);--min-height:var(--bp-size-9);--font-size:var(--bp-text-size-200);--justify-content:var(--cell-justify-content, start);--padding-block:var(--bp-size-4);--padding-inline:var(--bp-size-6);--color:var(--bp-text-color-500);display:block;height:100%;outline:0!important;position:sticky}slot{justify-content:var(--justify-content);border-left:var(--border-left);background:var(--background);background-image:linear-gradient(hsla(0deg,0%,0%,var(--bp-interaction-offset))0 0)!important;box-shadow:var(--box-shadow);border-right:var(--border-right);min-width:var(--min-width);min-height:var(--min-height);font-size:var(--font-size);padding-inline:var(--padding-inline);padding-block:var(--padding-block);color:var(--color);text-align:left;display:flex;gap:var(--bp-space-sm);line-height:1em;align-items:center;width:100%;height:100%;position:relative}:host(:--highlight) slot::after{display:block;position:absolute;inset:0;background:var(--bp-interaction-highlight-background);content:"";pointer-events:none}');export{t as default};
|
package/cell/element.d.ts
CHANGED
|
@@ -20,8 +20,9 @@ import { LitElement } from 'lit';
|
|
|
20
20
|
* @cssprop --color
|
|
21
21
|
*/
|
|
22
22
|
export declare class BpGridCell extends LitElement {
|
|
23
|
-
#private;
|
|
24
23
|
static styles: CSSStyleSheet[];
|
|
24
|
+
/** @private */
|
|
25
|
+
_internals: ElementInternals;
|
|
25
26
|
render(): import("lit-html").TemplateResult<1>;
|
|
26
27
|
constructor();
|
|
27
28
|
}
|
package/cell/element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LitElement as t,html as r}from"lit";import{baseStyles as s}from"@blueprintui/components/internals";import e from"./element.css.js";class
|
|
1
|
+
import{LitElement as t,html as r}from"lit";import{baseStyles as s}from"@blueprintui/components/internals";import{focusStyles as e}from"../internals/index.js";import n from"./element.css.js";class o extends t{static styles=[s,n,e];_internals=this.attachInternals();render(){return r`<slot focusable></slot>`}constructor(){super();this._internals.role="gridcell"}}export{o as BpGridCell};
|
package/column/element.css.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=new CSSStyleSheet;t.replaceSync(":host{--min-height:var(--column-height, var(--bp-interaction-touch-target));--min-width:fit-content;--justify-content:var(--column-justify-content, start);--padding-block:calc(var(--bp-size-6) + var(--bp-size-1));--padding-inline:var(--bp-size-6);--background:var(--bp-layer-container-background);--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}[part=internal]{min-height:var(--min-height);justify-content:var(--justify-content);background:var(--background);padding-inline:var(--padding-inline);padding-block:var(--padding-block);font-size:var(--font-size);text-align:left;border:0;font-weight:500;color:var(--color);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;box-shadow:0 var(--bp-object-border-width-100)0 var(--bp-object-border-color-100)}:host([
|
|
1
|
+
const t=new CSSStyleSheet;t.replaceSync(":host{--min-height:var(--column-height, var(--bp-interaction-touch-target));--min-width:fit-content;--justify-content:var(--column-justify-content, start);--padding-block:calc(var(--bp-size-6) + var(--bp-size-1));--padding-inline:var(--bp-size-6);--background:var(--bp-layer-container-background);--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}[part=internal]{min-height:var(--min-height);justify-content:var(--justify-content);background:var(--background);padding-inline:var(--padding-inline);padding-block:var(--padding-block);font-size:var(--font-size);text-align:left;border:0;font-weight:500;color:var(--color);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;box-shadow:0 var(--bp-object-border-width-100)0 var(--bp-object-border-color-100)}: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:0;width:2px;bottom:0;height:100vh;background:var(--bp-status-accent-background-300);display:none}::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
|
@@ -18,14 +18,13 @@ import { LitElement } from 'lit';
|
|
|
18
18
|
* @cssprop --color
|
|
19
19
|
*/
|
|
20
20
|
export declare class BpGridColumn extends LitElement {
|
|
21
|
-
#private;
|
|
22
21
|
/** control width of grid column via numeric or CSS value types */
|
|
23
22
|
width: string;
|
|
24
|
-
/** determine if given column type for various action features */
|
|
25
|
-
type: '' | 'action';
|
|
26
23
|
/** position individual column relative to the grid scroll container */
|
|
27
|
-
position: '
|
|
24
|
+
position: 'sticky' | 'fixed';
|
|
28
25
|
static styles: CSSStyleSheet[];
|
|
26
|
+
/** @private */
|
|
27
|
+
_internals: ElementInternals;
|
|
29
28
|
render(): import("lit-html").TemplateResult<1>;
|
|
30
29
|
constructor();
|
|
31
30
|
connectedCallback(): void;
|
package/column/element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LitElement as
|
|
1
|
+
import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{baseStyles as s,dynamicControllers as i}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 e{static properties={width:{type:String},position:{type:String,reflect:!0}};static styles=[s,l,o];_internals=this.attachInternals();render(){return r`<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"}connectedCallback(){super.connectedCallback(),this.slot="columns"}};a=t([i()],a);export{a as BpGridColumn};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { ReactiveControllerHost } from 'lit';
|
|
2
|
-
export declare type
|
|
3
|
-
position: '
|
|
1
|
+
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
+
export declare type ColumnPosition = ReactiveControllerHost & HTMLElement & {
|
|
3
|
+
position: 'sticky' | 'fixed';
|
|
4
4
|
};
|
|
5
|
-
export declare class
|
|
5
|
+
export declare class ColumnPositionController implements ReactiveController {
|
|
6
6
|
#private;
|
|
7
7
|
private host;
|
|
8
|
-
constructor(host:
|
|
8
|
+
constructor(host: ColumnPosition);
|
|
9
|
+
hostConnected(): Promise<void>;
|
|
9
10
|
hostUpdated(): Promise<void>;
|
|
10
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
class t{host;#t;#i
|
|
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};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactiveController } from 'lit';
|
|
2
|
+
import type { BpGridColumn } from './element.js';
|
|
3
|
+
export declare class GridColumnWidthController implements ReactiveController {
|
|
4
|
+
#private;
|
|
5
|
+
private host;
|
|
6
|
+
constructor(host: BpGridColumn);
|
|
7
|
+
hostConnected(): Promise<void>;
|
|
8
|
+
hostUpdated(): Promise<void>;
|
|
9
|
+
}
|
|
@@ -0,0 +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};
|
package/custom-elements.json
CHANGED
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"members": [
|
|
58
58
|
{
|
|
59
59
|
"kind": "field",
|
|
60
|
-
"name": "
|
|
60
|
+
"name": "_internals",
|
|
61
61
|
"privacy": "private"
|
|
62
62
|
},
|
|
63
63
|
{
|
|
@@ -144,30 +144,19 @@
|
|
|
144
144
|
"description": "control width of grid column via numeric or CSS value types",
|
|
145
145
|
"attribute": "width"
|
|
146
146
|
},
|
|
147
|
-
{
|
|
148
|
-
"kind": "field",
|
|
149
|
-
"name": "type",
|
|
150
|
-
"type": {
|
|
151
|
-
"text": "'' | 'action'"
|
|
152
|
-
},
|
|
153
|
-
"description": "determine if given column type for various action features",
|
|
154
|
-
"attribute": "type",
|
|
155
|
-
"reflects": true
|
|
156
|
-
},
|
|
157
147
|
{
|
|
158
148
|
"kind": "field",
|
|
159
149
|
"name": "position",
|
|
160
150
|
"type": {
|
|
161
|
-
"text": "'
|
|
151
|
+
"text": "'sticky' | 'fixed'"
|
|
162
152
|
},
|
|
163
|
-
"default": "''",
|
|
164
153
|
"description": "position individual column relative to the grid scroll container",
|
|
165
154
|
"attribute": "position",
|
|
166
155
|
"reflects": true
|
|
167
156
|
},
|
|
168
157
|
{
|
|
169
158
|
"kind": "field",
|
|
170
|
-
"name": "
|
|
159
|
+
"name": "_internals",
|
|
171
160
|
"privacy": "private"
|
|
172
161
|
},
|
|
173
162
|
{
|
|
@@ -196,20 +185,11 @@
|
|
|
196
185
|
"description": "control width of grid column via numeric or CSS value types",
|
|
197
186
|
"fieldName": "width"
|
|
198
187
|
},
|
|
199
|
-
{
|
|
200
|
-
"name": "type",
|
|
201
|
-
"type": {
|
|
202
|
-
"text": "'' | 'action'"
|
|
203
|
-
},
|
|
204
|
-
"description": "determine if given column type for various action features",
|
|
205
|
-
"fieldName": "type"
|
|
206
|
-
},
|
|
207
188
|
{
|
|
208
189
|
"name": "position",
|
|
209
190
|
"type": {
|
|
210
|
-
"text": "'
|
|
191
|
+
"text": "'sticky' | 'fixed'"
|
|
211
192
|
},
|
|
212
|
-
"default": "''",
|
|
213
193
|
"description": "position individual column relative to the grid scroll container",
|
|
214
194
|
"fieldName": "position"
|
|
215
195
|
}
|
|
@@ -240,7 +220,7 @@
|
|
|
240
220
|
{
|
|
241
221
|
"kind": "class",
|
|
242
222
|
"description": "",
|
|
243
|
-
"name": "
|
|
223
|
+
"name": "ColumnPositionController",
|
|
244
224
|
"members": [
|
|
245
225
|
{
|
|
246
226
|
"kind": "field",
|
|
@@ -255,19 +235,26 @@
|
|
|
255
235
|
"name": "#previousPosition",
|
|
256
236
|
"privacy": "private",
|
|
257
237
|
"type": {
|
|
258
|
-
"text": "'
|
|
259
|
-
}
|
|
260
|
-
"default": "''"
|
|
238
|
+
"text": "'sticky' | 'fixed'"
|
|
239
|
+
}
|
|
261
240
|
},
|
|
262
241
|
{
|
|
263
242
|
"kind": "field",
|
|
264
243
|
"name": "#hostGrid",
|
|
265
244
|
"privacy": "private"
|
|
266
245
|
},
|
|
246
|
+
{
|
|
247
|
+
"kind": "method",
|
|
248
|
+
"name": "hostConnected"
|
|
249
|
+
},
|
|
267
250
|
{
|
|
268
251
|
"kind": "method",
|
|
269
252
|
"name": "hostUpdated"
|
|
270
253
|
},
|
|
254
|
+
{
|
|
255
|
+
"kind": "method",
|
|
256
|
+
"name": "#update"
|
|
257
|
+
},
|
|
271
258
|
{
|
|
272
259
|
"kind": "method",
|
|
273
260
|
"name": "#calculateColumnPositionStyles"
|
|
@@ -308,9 +295,9 @@
|
|
|
308
295
|
"exports": [
|
|
309
296
|
{
|
|
310
297
|
"kind": "js",
|
|
311
|
-
"name": "
|
|
298
|
+
"name": "ColumnPositionController",
|
|
312
299
|
"declaration": {
|
|
313
|
-
"name": "
|
|
300
|
+
"name": "ColumnPositionController",
|
|
314
301
|
"module": "/column/position.controller.js"
|
|
315
302
|
}
|
|
316
303
|
}
|
|
@@ -318,31 +305,20 @@
|
|
|
318
305
|
},
|
|
319
306
|
{
|
|
320
307
|
"kind": "javascript-module",
|
|
321
|
-
"path": "/column/
|
|
308
|
+
"path": "/column/width.controller.js",
|
|
322
309
|
"declarations": [
|
|
323
310
|
{
|
|
324
311
|
"kind": "class",
|
|
325
312
|
"description": "",
|
|
326
|
-
"name": "
|
|
313
|
+
"name": "GridColumnWidthController",
|
|
327
314
|
"members": [
|
|
328
315
|
{
|
|
329
316
|
"kind": "field",
|
|
330
|
-
"name": "#
|
|
317
|
+
"name": "#grid",
|
|
331
318
|
"privacy": "private",
|
|
332
319
|
"type": {
|
|
333
|
-
"text": "
|
|
334
|
-
}
|
|
335
|
-
"default": "[]"
|
|
336
|
-
},
|
|
337
|
-
{
|
|
338
|
-
"kind": "field",
|
|
339
|
-
"name": "#hostGrid",
|
|
340
|
-
"privacy": "private"
|
|
341
|
-
},
|
|
342
|
-
{
|
|
343
|
-
"kind": "field",
|
|
344
|
-
"name": "#hostRange",
|
|
345
|
-
"privacy": "private"
|
|
320
|
+
"text": "BpGrid"
|
|
321
|
+
}
|
|
346
322
|
},
|
|
347
323
|
{
|
|
348
324
|
"kind": "method",
|
|
@@ -352,29 +328,9 @@
|
|
|
352
328
|
"kind": "method",
|
|
353
329
|
"name": "hostUpdated"
|
|
354
330
|
},
|
|
355
|
-
{
|
|
356
|
-
"kind": "method",
|
|
357
|
-
"name": "hostDisconnected"
|
|
358
|
-
},
|
|
359
|
-
{
|
|
360
|
-
"kind": "method",
|
|
361
|
-
"name": "#setActionWidth"
|
|
362
|
-
},
|
|
363
331
|
{
|
|
364
332
|
"kind": "method",
|
|
365
333
|
"name": "#updateSetColumnWidth"
|
|
366
|
-
},
|
|
367
|
-
{
|
|
368
|
-
"kind": "method",
|
|
369
|
-
"name": "#updateResizedColumnWidth",
|
|
370
|
-
"parameters": [
|
|
371
|
-
{
|
|
372
|
-
"name": "width",
|
|
373
|
-
"type": {
|
|
374
|
-
"text": "number"
|
|
375
|
-
}
|
|
376
|
-
}
|
|
377
|
-
]
|
|
378
334
|
}
|
|
379
335
|
]
|
|
380
336
|
}
|
|
@@ -382,10 +338,10 @@
|
|
|
382
338
|
"exports": [
|
|
383
339
|
{
|
|
384
340
|
"kind": "js",
|
|
385
|
-
"name": "
|
|
341
|
+
"name": "GridColumnWidthController",
|
|
386
342
|
"declaration": {
|
|
387
|
-
"name": "
|
|
388
|
-
"module": "/column/
|
|
343
|
+
"name": "GridColumnWidthController",
|
|
344
|
+
"module": "/column/width.controller.js"
|
|
389
345
|
}
|
|
390
346
|
}
|
|
391
347
|
]
|
|
@@ -400,7 +356,7 @@
|
|
|
400
356
|
"type": {
|
|
401
357
|
"text": "object"
|
|
402
358
|
},
|
|
403
|
-
"default": "{\n columns: [\n { id: 1, label: 'Column 1' },\n { id: 2, label: 'Column 2' },\n { id: 4, label: 'Column 3' },\n { id: 8, label: 'Column 4' },\n { id: 16, label: 'Column 5' }
|
|
359
|
+
"default": "{\n columns: [\n { id: 1, label: 'Column 1' },\n { id: 2, label: 'Column 2' },\n { id: 4, label: 'Column 3' },\n { id: 8, label: 'Column 4' },\n { id: 16, label: 'Column 5' }\n ],\n rows: [\n {\n id: '0',\n cells: [\n { value: 'Cell 0-1' },\n { value: 'Cell 0-2' },\n { value: 'Cell 0-3' },\n { value: 'Cell 0-4' },\n { value: 'Cell 0-5' }\n ]\n },\n {\n id: '1',\n cells: [\n { value: 'Cell 1-1' },\n { value: 'Cell 1-2' },\n { value: 'Cell 1-3' },\n { value: 'Cell 1-4' },\n { value: 'Cell 1-5' }\n ]\n },\n {\n id: '2',\n cells: [\n { value: 'Cell 2-1' },\n { value: 'Cell 2-2' },\n { value: 'Cell 2-3' },\n { value: 'Cell 2-4' },\n { value: 'Cell 2-5' }\n ]\n },\n {\n id: '3',\n cells: [\n { value: 'Cell 3-1' },\n { value: 'Cell 3-2' },\n { value: 'Cell 3-3' },\n { value: 'Cell 3-4' },\n { value: 'Cell 3-5' }\n ]\n },\n {\n id: '4',\n cells: [\n { value: 'Cell 4-1' },\n { value: 'Cell 4-2' },\n { value: 'Cell 4-3' },\n { value: 'Cell 4-4' },\n { value: 'Cell 4-5' }\n ]\n },\n {\n id: '5',\n cells: [\n { value: 'Cell 5-1' },\n { value: 'Cell 5-2' },\n { value: 'Cell 5-3' },\n { value: 'Cell 5-4' },\n { value: 'Cell 5-5' }\n ]\n },\n {\n id: '6',\n cells: [\n { value: 'Cell 6-1' },\n { value: 'Cell 6-2' },\n { value: 'Cell 6-3' },\n { value: 'Cell 6-4' },\n { value: 'Cell 6-5' }\n ]\n },\n {\n id: '7',\n cells: [\n { value: 'Cell 7-1' },\n { value: 'Cell 7-2' },\n { value: 'Cell 7-3' },\n { value: 'Cell 7-4' },\n { value: 'Cell 7-5' }\n ]\n },\n {\n id: '8',\n cells: [\n { value: 'Cell 8-1' },\n { value: 'Cell 8-2' },\n { value: 'Cell 8-3' },\n { value: 'Cell 8-4' },\n { value: 'Cell 8-5' }\n ]\n },\n {\n id: '9',\n cells: [\n { value: 'Cell 9-1' },\n { value: 'Cell 9-2' },\n { value: 'Cell 9-3' },\n { value: 'Cell 9-4' },\n { value: 'Cell 9-5' }\n ]\n },\n {\n id: '10',\n cells: [\n { value: 'Cell 10-1' },\n { value: 'Cell 10-2' },\n { value: 'Cell 10-3' },\n { value: 'Cell 10-4' },\n { value: 'Cell 10-5' }\n ]\n },\n {\n id: '11',\n cells: [\n { value: 'Cell 11-1' },\n { value: 'Cell 11-2' },\n { value: 'Cell 11-3' },\n { value: 'Cell 11-4' },\n { value: 'Cell 11-5' }\n ]\n },\n {\n id: '12',\n cells: [\n { value: 'Cell 12-1' },\n { value: 'Cell 12-2' },\n { value: 'Cell 12-3' },\n { value: 'Cell 12-4' },\n { value: 'Cell 12-5' }\n ]\n },\n {\n id: '13',\n cells: [\n { value: 'Cell 13-1' },\n { value: 'Cell 13-2' },\n { value: 'Cell 13-3' },\n { value: 'Cell 13-4' },\n { value: 'Cell 13-5' }\n ]\n },\n {\n id: '14',\n cells: [\n { value: 'Cell 14-1' },\n { value: 'Cell 14-2' },\n { value: 'Cell 14-3' },\n { value: 'Cell 14-4' },\n { value: 'Cell 14-5' }\n ]\n },\n {\n id: '15',\n cells: [\n { value: 'Cell 15-1' },\n { value: 'Cell 15-2' },\n { value: 'Cell 15-3' },\n { value: 'Cell 15-4' },\n { value: 'Cell 15-5' }\n ]\n },\n {\n id: '',\n cells: [\n { value: 'Cell 16-1' },\n { value: 'Cell 16-2' },\n { value: 'Cell 16-3' },\n { value: 'Cell 16-4' },\n { value: 'Cell 16-5' }\n ]\n },\n {\n id: '17',\n cells: [\n { value: 'Cell 17-1' },\n { value: 'Cell 17-2' },\n { value: 'Cell 17-3' },\n { value: 'Cell 17-4' },\n { value: 'Cell 17-5' }\n ]\n },\n {\n id: '18',\n cells: [\n { value: 'Cell 18-1' },\n { value: 'Cell 18-2' },\n { value: 'Cell 18-3' },\n { value: 'Cell 18-4' },\n { value: 'Cell 18-5' }\n ]\n },\n {\n id: '19',\n cells: [\n { value: 'Cell 19-1' },\n { value: 'Cell 19-2' },\n { value: 'Cell 19-3' },\n { value: 'Cell 18-4' },\n { value: 'Cell 19-5' }\n ]\n },\n {\n id: '20',\n cells: [\n { value: 'Cell 20-1' },\n { value: 'Cell 20-2' },\n { value: 'Cell 20-3' },\n { value: 'Cell 18-4' },\n { value: 'Cell 20-5' }\n ]\n }\n ]\n}"
|
|
404
360
|
},
|
|
405
361
|
{
|
|
406
362
|
"kind": "function",
|
|
@@ -512,6 +468,125 @@
|
|
|
512
468
|
}
|
|
513
469
|
]
|
|
514
470
|
},
|
|
471
|
+
{
|
|
472
|
+
"kind": "javascript-module",
|
|
473
|
+
"path": "/grid/dom.controller.js",
|
|
474
|
+
"declarations": [
|
|
475
|
+
{
|
|
476
|
+
"kind": "class",
|
|
477
|
+
"description": "controller for managing efficient DOM queries for bp-grid",
|
|
478
|
+
"name": "GridDOMController",
|
|
479
|
+
"members": [
|
|
480
|
+
{
|
|
481
|
+
"kind": "field",
|
|
482
|
+
"name": "#placeholder",
|
|
483
|
+
"privacy": "private",
|
|
484
|
+
"type": {
|
|
485
|
+
"text": "BpGridPlaceholder"
|
|
486
|
+
}
|
|
487
|
+
},
|
|
488
|
+
{
|
|
489
|
+
"kind": "field",
|
|
490
|
+
"name": "placeholder"
|
|
491
|
+
},
|
|
492
|
+
{
|
|
493
|
+
"kind": "field",
|
|
494
|
+
"name": "#footer",
|
|
495
|
+
"privacy": "private",
|
|
496
|
+
"type": {
|
|
497
|
+
"text": "BpGridFooter"
|
|
498
|
+
}
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"kind": "field",
|
|
502
|
+
"name": "footer"
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
"kind": "field",
|
|
506
|
+
"name": "#rows",
|
|
507
|
+
"privacy": "private",
|
|
508
|
+
"type": {
|
|
509
|
+
"text": "BpGridRow[]"
|
|
510
|
+
}
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
"kind": "field",
|
|
514
|
+
"name": "rows"
|
|
515
|
+
},
|
|
516
|
+
{
|
|
517
|
+
"kind": "field",
|
|
518
|
+
"name": "#columns",
|
|
519
|
+
"privacy": "private",
|
|
520
|
+
"type": {
|
|
521
|
+
"text": "BpGridColumn[]"
|
|
522
|
+
}
|
|
523
|
+
},
|
|
524
|
+
{
|
|
525
|
+
"kind": "field",
|
|
526
|
+
"name": "columns"
|
|
527
|
+
},
|
|
528
|
+
{
|
|
529
|
+
"kind": "field",
|
|
530
|
+
"name": "#cells",
|
|
531
|
+
"privacy": "private",
|
|
532
|
+
"type": {
|
|
533
|
+
"text": "BpGridCell[]"
|
|
534
|
+
}
|
|
535
|
+
},
|
|
536
|
+
{
|
|
537
|
+
"kind": "field",
|
|
538
|
+
"name": "cells"
|
|
539
|
+
},
|
|
540
|
+
{
|
|
541
|
+
"kind": "field",
|
|
542
|
+
"name": "#grid",
|
|
543
|
+
"privacy": "private",
|
|
544
|
+
"type": {
|
|
545
|
+
"text": "HTMLElement[][]"
|
|
546
|
+
}
|
|
547
|
+
},
|
|
548
|
+
{
|
|
549
|
+
"kind": "field",
|
|
550
|
+
"name": "grid",
|
|
551
|
+
"type": {
|
|
552
|
+
"text": "HTMLElement[][]"
|
|
553
|
+
}
|
|
554
|
+
},
|
|
555
|
+
{
|
|
556
|
+
"kind": "field",
|
|
557
|
+
"name": "#updates",
|
|
558
|
+
"privacy": "private",
|
|
559
|
+
"type": {
|
|
560
|
+
"text": "number"
|
|
561
|
+
},
|
|
562
|
+
"default": "0"
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
"kind": "field",
|
|
566
|
+
"name": "isStatic"
|
|
567
|
+
},
|
|
568
|
+
{
|
|
569
|
+
"kind": "method",
|
|
570
|
+
"name": "hostConnected"
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"kind": "method",
|
|
574
|
+
"name": "#resetCache"
|
|
575
|
+
}
|
|
576
|
+
]
|
|
577
|
+
}
|
|
578
|
+
],
|
|
579
|
+
"exports": [
|
|
580
|
+
{
|
|
581
|
+
"kind": "js",
|
|
582
|
+
"name": "GridDOMController",
|
|
583
|
+
"declaration": {
|
|
584
|
+
"name": "GridDOMController",
|
|
585
|
+
"module": "/grid/dom.controller.js"
|
|
586
|
+
}
|
|
587
|
+
}
|
|
588
|
+
]
|
|
589
|
+
},
|
|
515
590
|
{
|
|
516
591
|
"kind": "javascript-module",
|
|
517
592
|
"path": "/grid/element.css",
|
|
@@ -656,16 +731,6 @@
|
|
|
656
731
|
"privacy": "protected",
|
|
657
732
|
"default": "new GridLayoutController(this)"
|
|
658
733
|
},
|
|
659
|
-
{
|
|
660
|
-
"kind": "field",
|
|
661
|
-
"name": "controllers",
|
|
662
|
-
"type": {
|
|
663
|
-
"text": "Set<any>"
|
|
664
|
-
},
|
|
665
|
-
"static": true,
|
|
666
|
-
"default": "new Set()",
|
|
667
|
-
"privacy": "private"
|
|
668
|
-
},
|
|
669
734
|
{
|
|
670
735
|
"kind": "field",
|
|
671
736
|
"name": "gridLayoutControllerConfig",
|
|
@@ -673,47 +738,25 @@
|
|
|
673
738
|
},
|
|
674
739
|
{
|
|
675
740
|
"kind": "field",
|
|
676
|
-
"name": "
|
|
677
|
-
"privacy": "private"
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
"
|
|
682
|
-
"privacy": "private"
|
|
683
|
-
},
|
|
684
|
-
{
|
|
685
|
-
"kind": "field",
|
|
686
|
-
"name": "#rows",
|
|
687
|
-
"privacy": "private"
|
|
688
|
-
},
|
|
689
|
-
{
|
|
690
|
-
"kind": "field",
|
|
691
|
-
"name": "#cells",
|
|
692
|
-
"privacy": "private"
|
|
693
|
-
},
|
|
694
|
-
{
|
|
695
|
-
"kind": "field",
|
|
696
|
-
"name": "#placeholder",
|
|
697
|
-
"privacy": "private"
|
|
741
|
+
"name": "#DOMController",
|
|
742
|
+
"privacy": "private",
|
|
743
|
+
"type": {
|
|
744
|
+
"text": "GridDOMController"
|
|
745
|
+
},
|
|
746
|
+
"default": "new GridDOMController(this)"
|
|
698
747
|
},
|
|
699
748
|
{
|
|
700
749
|
"kind": "field",
|
|
701
|
-
"name": "
|
|
702
|
-
"
|
|
750
|
+
"name": "grid",
|
|
751
|
+
"type": {
|
|
752
|
+
"text": "HTMLElement[][]"
|
|
753
|
+
}
|
|
703
754
|
},
|
|
704
755
|
{
|
|
705
756
|
"kind": "field",
|
|
706
757
|
"name": "keyNavGrid",
|
|
707
758
|
"privacy": "private"
|
|
708
759
|
},
|
|
709
|
-
{
|
|
710
|
-
"kind": "field",
|
|
711
|
-
"name": "grid",
|
|
712
|
-
"type": {
|
|
713
|
-
"text": "HTMLElement[][]"
|
|
714
|
-
},
|
|
715
|
-
"privacy": "private"
|
|
716
|
-
},
|
|
717
760
|
{
|
|
718
761
|
"kind": "field",
|
|
719
762
|
"name": "_internals"
|
|
@@ -722,20 +765,6 @@
|
|
|
722
765
|
"kind": "method",
|
|
723
766
|
"name": "#intializeColumnSort"
|
|
724
767
|
},
|
|
725
|
-
{
|
|
726
|
-
"kind": "field",
|
|
727
|
-
"name": "#updates",
|
|
728
|
-
"privacy": "private",
|
|
729
|
-
"type": {
|
|
730
|
-
"text": "number"
|
|
731
|
-
},
|
|
732
|
-
"default": "0"
|
|
733
|
-
},
|
|
734
|
-
{
|
|
735
|
-
"kind": "field",
|
|
736
|
-
"name": "#isStatic",
|
|
737
|
-
"privacy": "private"
|
|
738
|
-
},
|
|
739
768
|
{
|
|
740
769
|
"kind": "method",
|
|
741
770
|
"name": "#update"
|
|
@@ -755,7 +784,7 @@
|
|
|
755
784
|
{
|
|
756
785
|
"kind": "method",
|
|
757
786
|
"name": "#initializeCells",
|
|
758
|
-
"description": "
|
|
787
|
+
"description": "cells with focusable items use table navigation ctrl+alt+arrow https://github.com/nvaccess/nvda/issues/7718"
|
|
759
788
|
},
|
|
760
789
|
{
|
|
761
790
|
"kind": "method",
|
|
@@ -966,6 +995,12 @@
|
|
|
966
995
|
}
|
|
967
996
|
]
|
|
968
997
|
},
|
|
998
|
+
{
|
|
999
|
+
"kind": "javascript-module",
|
|
1000
|
+
"path": "/include/column-position.js",
|
|
1001
|
+
"declarations": [],
|
|
1002
|
+
"exports": []
|
|
1003
|
+
},
|
|
969
1004
|
{
|
|
970
1005
|
"kind": "javascript-module",
|
|
971
1006
|
"path": "/include/core.js",
|
|
@@ -996,6 +1031,12 @@
|
|
|
996
1031
|
"declarations": [],
|
|
997
1032
|
"exports": []
|
|
998
1033
|
},
|
|
1034
|
+
{
|
|
1035
|
+
"kind": "javascript-module",
|
|
1036
|
+
"path": "/include/row-position.js",
|
|
1037
|
+
"declarations": [],
|
|
1038
|
+
"exports": []
|
|
1039
|
+
},
|
|
999
1040
|
{
|
|
1000
1041
|
"kind": "javascript-module",
|
|
1001
1042
|
"path": "/index.js",
|
|
@@ -1111,8 +1152,22 @@
|
|
|
1111
1152
|
{
|
|
1112
1153
|
"kind": "javascript-module",
|
|
1113
1154
|
"path": "/internals/index.js",
|
|
1114
|
-
"declarations": [
|
|
1155
|
+
"declarations": [
|
|
1156
|
+
{
|
|
1157
|
+
"kind": "variable",
|
|
1158
|
+
"name": "focusStyles",
|
|
1159
|
+
"default": "styles"
|
|
1160
|
+
}
|
|
1161
|
+
],
|
|
1115
1162
|
"exports": [
|
|
1163
|
+
{
|
|
1164
|
+
"kind": "js",
|
|
1165
|
+
"name": "focusStyles",
|
|
1166
|
+
"declaration": {
|
|
1167
|
+
"name": "focusStyles",
|
|
1168
|
+
"module": "/internals/index.js"
|
|
1169
|
+
}
|
|
1170
|
+
},
|
|
1116
1171
|
{
|
|
1117
1172
|
"kind": "js",
|
|
1118
1173
|
"name": "*",
|
|
@@ -1131,6 +1186,12 @@
|
|
|
1131
1186
|
}
|
|
1132
1187
|
]
|
|
1133
1188
|
},
|
|
1189
|
+
{
|
|
1190
|
+
"kind": "javascript-module",
|
|
1191
|
+
"path": "/internals/styles/focus.css",
|
|
1192
|
+
"declarations": [],
|
|
1193
|
+
"exports": []
|
|
1194
|
+
},
|
|
1134
1195
|
{
|
|
1135
1196
|
"kind": "javascript-module",
|
|
1136
1197
|
"path": "/internals/utils/events.js",
|
|
@@ -1778,7 +1839,7 @@
|
|
|
1778
1839
|
{
|
|
1779
1840
|
"kind": "class",
|
|
1780
1841
|
"description": "",
|
|
1781
|
-
"name": "
|
|
1842
|
+
"name": "RowPositionController",
|
|
1782
1843
|
"members": [
|
|
1783
1844
|
{
|
|
1784
1845
|
"kind": "method",
|
|
@@ -1790,9 +1851,9 @@
|
|
|
1790
1851
|
"exports": [
|
|
1791
1852
|
{
|
|
1792
1853
|
"kind": "js",
|
|
1793
|
-
"name": "
|
|
1854
|
+
"name": "RowPositionController",
|
|
1794
1855
|
"declaration": {
|
|
1795
|
-
"name": "
|
|
1856
|
+
"name": "RowPositionController",
|
|
1796
1857
|
"module": "/row/position.controller.js"
|
|
1797
1858
|
}
|
|
1798
1859
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { ReactiveController } from 'lit';
|
|
2
|
+
import type { BpGridCell } from '../cell/element.js';
|
|
3
|
+
import type { BpGridColumn } from '../column/element.js';
|
|
4
|
+
import type { BpGridFooter } from '../footer/element.js';
|
|
5
|
+
import type { BpGridPlaceholder } from '../placeholder/element.js';
|
|
6
|
+
import type { BpGridRow } from '../row/element.js';
|
|
7
|
+
import type { BpGrid } from './element.js';
|
|
8
|
+
/** controller for managing efficient DOM queries for bp-grid */
|
|
9
|
+
export declare class GridDOMController implements ReactiveController {
|
|
10
|
+
#private;
|
|
11
|
+
private host;
|
|
12
|
+
get placeholder(): BpGridPlaceholder;
|
|
13
|
+
get footer(): BpGridFooter;
|
|
14
|
+
get rows(): BpGridRow[];
|
|
15
|
+
get columns(): BpGridColumn[];
|
|
16
|
+
get cells(): BpGridCell[];
|
|
17
|
+
get grid(): HTMLElement[][];
|
|
18
|
+
get isStatic(): boolean;
|
|
19
|
+
constructor(host: BpGrid);
|
|
20
|
+
hostConnected(): Promise<void>;
|
|
21
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
class t{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}#h;get grid(){if(!this.#h){const t=[...Array.from(this.columns),...Array.from(this.cells)];for(this.#h=[];t.length;)this.#h.push(t.splice(0,this.columns.length))}return this.#h}#l=0;get isStatic(){return this.#l++,1===this.#l&&!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.#h=null,this.#r=null,this.#e=null,this.#o=null,this.#t=null,this.#s=null}}export{t 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;--column-text-align:left;--cell-text-algin:left;--border:0;width:100%;display:block;position:relative}:host([range-selection]){user-select:none}:host([
|
|
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;--column-text-align:left;--cell-text-algin:left;--border:0;width:100%;display:block;position:relative}:host([range-selection]){user-select:none}:host([border-style*='column']) ::slotted(bp-grid-row){--cell-border-width:var(--bp-object-border-width-100);--border-top:0;--border-bottom:0}:host([border-style*='cell']) ::slotted(bp-grid-row){--cell-border-width:var(--bp-object-border-width-100)}:host([border-style*='cell']) ::slotted(bp-grid-row),:host([border-style*='row']) ::slotted(bp-grid-row){--border-top:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100)}:host([border-style*='cell']) ::slotted(bp-grid-row:last-of-type),:host([border-style*='row']) ::slotted(bp-grid-row:last-of-type){--border-bottom:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100)}:host([border-style*='cell']) ::slotted(bp-grid-row:first-of-type),:host([border-style*='row']) ::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(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{overflow:auto;height:var(--body-height, 100%);min-height:var(--body-min-height, auto);width:100%;display:flex;flex-direction:column;scroll-padding-top:var(--scroll-padding-top);background:var(--bp-layer-container-background)}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group{display:flex;flex-direction:column;flex:1 1 0%;min-width:fit-content;margin-top:var(--bp-size-2)}.body-row-group:first-child,.column-row-group:first-child{display:contents}.column-row{display:grid;top:0;position:sticky;z-index:99;min-width:fit-content;grid-template-columns:var(--ch-grid);box-shadow:0 var(--bp-object-border-width-100)0 var(--bp-object-border-color-100)}::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};
|
package/grid/element.d.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import { BpGridRow } from '../row/element.js';
|
|
3
|
-
import { BpGridColumn } from '../column/element.js';
|
|
4
2
|
import { GridLayoutController } from './layout.controller.js';
|
|
5
3
|
/**
|
|
6
4
|
* Grid
|
|
@@ -71,22 +69,14 @@ export declare class BpGrid extends LitElement {
|
|
|
71
69
|
protected gridLayoutController: GridLayoutController;
|
|
72
70
|
static styles: CSSStyleSheet[];
|
|
73
71
|
/** @private */
|
|
74
|
-
static controllers: Set<any>;
|
|
75
|
-
/** @private */
|
|
76
72
|
get gridLayoutControllerConfig(): {
|
|
77
|
-
columns: BpGridColumn[];
|
|
73
|
+
columns: import("../index.js").BpGridColumn[];
|
|
78
74
|
columnLayout: "fixed" | "flex";
|
|
79
75
|
height: string;
|
|
80
76
|
};
|
|
81
|
-
|
|
82
|
-
get gridColumnSizeControllerConfig(): {
|
|
83
|
-
columns: BpGridColumn[];
|
|
84
|
-
rows: BpGridRow[];
|
|
85
|
-
};
|
|
77
|
+
get grid(): HTMLElement[][];
|
|
86
78
|
/** @private */
|
|
87
79
|
get keyNavGrid(): HTMLElement;
|
|
88
|
-
/** @private */
|
|
89
|
-
get grid(): HTMLElement[][];
|
|
90
80
|
_internals: ElementInternals;
|
|
91
81
|
render(): import("lit-html").TemplateResult<1>;
|
|
92
82
|
constructor();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=new CSSStyleSheet;e.replaceSync("bp-grid-row:has(bp-checkbox:--checked),bp-grid-row:has(bp-radio:--checked){--bp-interaction-offset:var(--bp-interaction-selected-offset)}");export{e as default};
|
|
1
|
+
const e=new CSSStyleSheet;e.replaceSync("bp-grid-row:has(bp-checkbox:--checked),bp-grid-row:has(bp-radio:--checked){--bp-interaction-offset:var(--bp-interaction-selected-offset)}bp-grid-row:has(bp-button-expand[checked]){--bp-interaction-hover-offset:0}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};
|
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 o,html as e}from"lit";import{baseStyles as i,elevationStyles as r,I18nService as l,createId as n,attachRootNodeStyles as s,dynamicControllers as a,i18n as c,ariaMultiSelectable as h}from"@blueprintui/components/internals";import"../internals/index.js";import{GridLayoutController as d}from"./layout.controller.js";import{GridDOMController as u}from"./dom.controller.js";import p from"./element.css.js";import m from"./element.global.css.js";import{interactionScrollVisibility as C}from"../internals/controllers/interaction-scroll-visibility.controller.js";let g=class extends o{static properties={i18n:{type:Object},height:{type:String,reflect:!0},columnLayout:{type:String,reflect:!0,attribute:"column-layout"},borders:{type:String,reflect:!0},selectable:{type:String,reflect:!0},scrollLock:{type:Boolean,reflect:!0,attribute:"scroll-lock"},rangeSelection:{type:Boolean,reflect:!0,attribute:"range-selection"},elevation:{type:String,reflect:!0},_id:{type:String,reflect:!0}};gridLayoutController=new d(this);static styles=[i,r,p];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 e`<div role="presentation" elevation part="internal"><div role="presentation" class="scroll-container"><div role="presentation" class="column-row-group"><div role="row" aria-rowindex="1" class="column-row"><slot name="columns"><bp-grid-column><span sr-only>${this.i18n.noData}</span></bp-grid-column></slot></div></div><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.#o(),this.i18n=l.keys.actions,this.columnLayout="fixed",this.borders="row",this.scrollLock=!1,this.rangeSelection=!1,this._id=n()}async connectedCallback(){super.connectedCallback(),s(this.parentNode,[m]),await this.updateComplete,this.shadowRoot.addEventListener("bp-grid:slotchange",(()=>this.#e())),this.#e()}#o(){this.addEventListener("sort",(t=>{const o=t.composedPath().find((t=>"BP-GRID-COLUMN"===t.tagName));o&&(o.ariaSort=t.detail)}))}async#e(){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),o=this.#t.footer?1:0;this._internals.ariaRowCount=""+(1+t+o),this._internals.ariaColCount=""+this.#t.columns.length}#r(){this.#t.columns.forEach(((t,o)=>t.ariaColIndex=""+(o+1)))}#l(){this.#t.rows?.forEach(((t,o)=>t.ariaRowIndex=""+(o+2)))}#n(){this.#t.cells?.forEach(((t,o)=>t.ariaColIndex=""+(o%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)}};g=t([a(),c({key:"actions"}),h(),C()],g);export{g as BpGrid};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ReactiveControllerHost } from 'lit';
|
|
1
|
+
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
2
|
export declare type Column = HTMLElement & {
|
|
3
3
|
width: string;
|
|
4
|
-
|
|
4
|
+
_internals: ElementInternals;
|
|
5
5
|
};
|
|
6
6
|
declare type Grid = HTMLElement & {
|
|
7
7
|
gridLayoutControllerConfig: {
|
|
@@ -10,7 +10,7 @@ declare type Grid = HTMLElement & {
|
|
|
10
10
|
height?: string;
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
|
-
export declare class GridLayoutController {
|
|
13
|
+
export declare class GridLayoutController implements ReactiveController {
|
|
14
14
|
#private;
|
|
15
15
|
private host;
|
|
16
16
|
constructor(host: ReactiveControllerHost & Grid);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{listenForAttributeListChange as t,isNumericString as
|
|
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.#d()??parseInt(getComputedStyle(this.#o).width)+"px"}, 100%)`))}#d(){return s(this.#o.width)?this.#o.width+"px":this.#o.width?this.#o.width:null}#l(){this.#s=this.#e.columns,this.#a(),this.#u()}#a(){const t=this.#i.filter((t=>!t.hidden)).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
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DynamicControllers as o}from"@blueprintui/components/internals";import{BpGridColumn as r}from"../column/element.js";import{ColumnPositionController as n}from"../column/position.controller.js";o.add(r,class extends n{constructor(o){super(o)}});
|
package/include/core.d.ts
CHANGED
package/include/core.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineElement as
|
|
1
|
+
import{defineElement as r}from"@blueprintui/components/internals";import{BpGrid as e}from"../grid/element.js";import{BpGridRow as m}from"../row/element.js";import{BpGridCell as o}from"../cell/element.js";import{BpGridColumn as i}from"../column/element.js";r("bp-grid",e),r("bp-grid-row",m),r("bp-grid-cell",o),r("bp-grid-column",i);
|
package/include/keynav.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{KeynavController as
|
|
1
|
+
import{KeynavController as r}from"@blueprintui/typewriter";import{DynamicControllers as t}from"@blueprintui/components/internals";import{BpGrid as e}from"../grid/element.js";t.add(e,class extends r{constructor(r){super(r,(()=>({host:r.keyNavGrid,grid:r.grid})))}});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DynamicControllers as o}from"@blueprintui/components/internals";import{BpGridRow as r}from"../row/element.js";import{RowPositionController as t}from"../row/position.controller.js";o.add(r,class extends t{constructor(o){super(o)}});
|
package/internals/index.d.ts
CHANGED
package/internals/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{InteractionScrollVisibilityController,interactionScrollVisibility}from"./controllers/interaction-scroll-visibility.controller.js";export{onChildListMutation}from"./utils/events.js";
|
|
1
|
+
import o from"./styles/focus.css.js";export{InteractionScrollVisibilityController,interactionScrollVisibility}from"./controllers/interaction-scroll-visibility.controller.js";export{onChildListMutation}from"./utils/events.js";const t=o;export{t as focusStyles};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=new CSSStyleSheet;e.replaceSync("[focusable]{outline-offset:calc(var(--bp-size-2)*-1)!important}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){[focusable]{outline-offset:calc(var(--bp-size-3)*-1)!important}}}:host(:focus) [focusable]{outline:var(--bp-interaction-outline-webkit);outline-offset:calc(var(--bp-size-2)*-1)!important}:host(:focus-within) [focusable]{outline:0}");export{e as default};
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=new CSSStyleSheet;t.replaceSync(
|
|
1
|
+
const t=new CSSStyleSheet;t.replaceSync("[part=internal]{display:flex;gap:var(--bp-space-sm)}button{background:0 0;border:0;cursor:pointer}button[disabled]{cursor:not-allowed}bp-select{--width:fit-content;--min-width:0}");export{t as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const a=new CSSStyleSheet;a.replaceSync(":host{--background:var(--bp-layer-container-background);--box-shadow:none;--color:var(--bp-text-color-500);--padding:var(--bp-size-4);--gap:var(--bp-space-md);content-visibility:var(--row-content-visibility, auto);flex:1}[part=internal]{box-shadow:var(--box-shadow);padding:var(--padding);min-height:var(--bp-size-8);background:var(--background);width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--gap);position:relative;grid-column:1/-1;color:var(--color);text-align:center}:host([draggable='false']) [part=internal]{min-height:var(--bp-size-10)}:host([bp-draggable*='target']){--box-shadow:inset 0 var(--bp-object-border-width-300) 0 calc(var(--bp-size-1) * -1)
|
|
1
|
+
const a=new CSSStyleSheet;a.replaceSync(":host{--background:var(--bp-layer-container-background);--box-shadow:none;--color:var(--bp-text-color-500);--padding:var(--bp-size-4);--gap:var(--bp-space-md);content-visibility:var(--row-content-visibility, auto);flex:1}[part=internal]{box-shadow:var(--box-shadow);padding:var(--padding);min-height:var(--bp-size-8);background:var(--background);width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--gap);position:relative;grid-column:1/-1;color:var(--color);text-align:center}:host([draggable='false']) [part=internal]{min-height:var(--bp-size-10)}: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{a as default};
|
package/row/element.css.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const o=new CSSStyleSheet;o.replaceSync(":host{--background:var(--bp-layer-container-background);--min-height:var(--row-height);--border-top:
|
|
1
|
+
const o=new CSSStyleSheet;o.replaceSync(":host{--background:var(--bp-layer-container-background);--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(:hover) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-hover-offset)}:host([selected]) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-selected-offset)}slot{display:grid;grid-template-columns:var(--ch-grid);box-shadow:var(--box-shadow);background:var(--background);min-height:var(--min-height);border-top:var(--border-top);border-bottom:var(--border-bottom)}:host([position='fixed']),:host([position='sticky']){--row-content-visibility:visible;--background:var(--bp-layer-container-background);--bp-interaction-offset:var(--bp-interaction-selected-offset);--border-bottom:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100);z-index:99;--border-bottom:0;--box-shadow:0 var(--bp-object-border-width-200) var(--bp-object-border-width-100) -1px var(--bp-object-border-color-100);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{o as default};
|
package/row/element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LitElement as
|
|
1
|
+
import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{baseStyles as s,interactionStyles as o,dynamicControllers as i}from"@blueprintui/components/internals";import n from"./element.css.js";let l=class extends e{static properties={selected:{type:Boolean,reflect:!0},position:{type:String,reflect:!0}};static styles=[s,o,n];#t=this.attachInternals();render(){return r`<slot></slot>`}constructor(){super();this.#t.role="row"}};l=t([i()],l);export{l as BpGridRow};
|
|
@@ -2,7 +2,7 @@ import { ReactiveControllerHost } from 'lit';
|
|
|
2
2
|
export declare type GridRowPosition = ReactiveControllerHost & HTMLElement & {
|
|
3
3
|
position: '' | 'fixed' | 'sticky';
|
|
4
4
|
};
|
|
5
|
-
export declare class
|
|
5
|
+
export declare class RowPositionController {
|
|
6
6
|
private host;
|
|
7
7
|
constructor(host: GridRowPosition);
|
|
8
8
|
hostUpdated(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
class t{host;constructor(t){this.host=t,this.host.addController(this)}hostUpdated(){"fixed"!==this.host.position&&"sticky"!==this.host.position||this.host.parentElement?.style.setProperty("--scroll-padding-top","calc(var(--row-height) * 2)")}}export{t as
|
|
1
|
+
class t{host;constructor(t){this.host=t,this.host.addController(this)}hostUpdated(){"fixed"!==this.host.position&&"sticky"!==this.host.position||this.host.parentElement?.style.setProperty("--scroll-padding-top","calc(var(--row-height) * 2)")}}export{t as RowPositionController};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ReactiveControllerHost } from 'lit';
|
|
2
|
-
export declare type GridColumnSize = ReactiveControllerHost & HTMLElement & {
|
|
3
|
-
width: string;
|
|
4
|
-
type: string;
|
|
5
|
-
};
|
|
6
|
-
export declare class GridColumnSizeController {
|
|
7
|
-
#private;
|
|
8
|
-
private host;
|
|
9
|
-
constructor(host: GridColumnSize);
|
|
10
|
-
hostConnected(): Promise<void>;
|
|
11
|
-
hostUpdated(): Promise<void>;
|
|
12
|
-
hostDisconnected(): void;
|
|
13
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{listenForAttributeListChange as t,onFirstInteraction as s,isNumericString as h}from"@blueprintui/components/internals";class e{host;#t=[];get#s(){return this.host.parentElement}get#h(){return this.host.shadowRoot?.querySelector("bp-split-handle input")}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#e(),this.#s.shadowRoot?.addEventListener("slotchange",(()=>this.#e())),this.#t.push(t(this.host,["type"],(()=>this.#e()))),await s(this.#s),this.#h&&(this.#h.max=""+parseInt(getComputedStyle(this.#s).width),this.#h.value=""+parseInt(getComputedStyle(this.host).width),this.#h.addEventListener("input",(t=>this.#i(t.target.valueAsNumber))),this.#h.addEventListener("change",(t=>this.#i(t.target.valueAsNumber))))}async hostUpdated(){await this.host.updateComplete,this.#o()}hostDisconnected(){this.#t.forEach((t=>t.disconnect()))}#e(){if("action"===this.host.type||"action"===this.host.getAttribute("type")){this.host.width="48px";const{columns:t,rows:s}=this.#s.gridColumnSizeControllerConfig,h=Array.from(t).indexOf(this.host);s.forEach((t=>{t.querySelectorAll("bp-grid-cell")[h].setAttribute("type","action")}))}}#o(){this.host.width&&null!==this.host.ariaColIndex&&(this.#s.style.setProperty("--ch"+this.host.ariaColIndex,h(this.host.width)?this.host.width+"px":this.host.width),this.#h&&(this.#h.min=""+parseInt(this.host.width)??"",this.#h.value=this.host.width))}#i(t){this.host.dispatchEvent(new CustomEvent("resizeChange",{detail:t,bubbles:!0}));const s=Math.max(h(this.host.width)||this.host.width?.includes("px")?parseInt(this.host.width):36,t);this.#s.style.setProperty("--ch"+this.host.ariaColIndex,s+"px")}}export{e as GridColumnSizeController};
|