@blueprintui/grid 1.9.0 → 1.9.2
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/column/element.css.js +1 -1
- package/custom-elements.json +32 -16
- package/grid/element.css.js +1 -1
- package/grid/element.global.css.js +1 -1
- package/grid/hover.controller.js +1 -1
- package/package.json +1 -1
- package/row/element.css.js +1 -1
- package/row/element.js +1 -1
package/cell/element.css.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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}:host(:--alignment-start){--justify-content:start}:host(:--alignment-center){--justify-content:center}:host(:--alignment-end){--justify-content:end}slot{
|
|
1
|
+
const t=new CSSStyleSheet;t.replaceSync(':host{--background:var(--bp-layer-container-background);--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}:host(:--alignment-start){--justify-content:start}:host(:--alignment-center){--justify-content:center}:host(:--alignment-end){--justify-content:end}slot{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset, 0%));justify-content:var(--justify-content);border-left:var(--border-left);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}:host{--highlight-border:var(--bp-object-border-width-100) solid var(--bp-status-accent-background-100)}:host(:--highlight-block-start) slot::after{border-block-start:var(--highlight-border)}:host(:--highlight-block-end) slot::after{border-block-end:var(--highlight-border)}:host(:--highlight-inline-start) slot::after{border-inline-start:var(--highlight-border)}:host(:--highlight-inline-end) slot::after{border-inline-end:var(--highlight-border)}');export{t as default};
|
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;--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)
|
|
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);box-shadow:0 var(--bp-object-border-width-100)0 var(--bp-object-border-color-100);text-align:left;border:0;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/custom-elements.json
CHANGED
|
@@ -108,7 +108,8 @@
|
|
|
108
108
|
{
|
|
109
109
|
"kind": "field",
|
|
110
110
|
"name": "#columnItems",
|
|
111
|
-
"privacy": "private"
|
|
111
|
+
"privacy": "private",
|
|
112
|
+
"readonly": true
|
|
112
113
|
},
|
|
113
114
|
{
|
|
114
115
|
"kind": "method",
|
|
@@ -327,7 +328,8 @@
|
|
|
327
328
|
{
|
|
328
329
|
"kind": "field",
|
|
329
330
|
"name": "#hostGrid",
|
|
330
|
-
"privacy": "private"
|
|
331
|
+
"privacy": "private",
|
|
332
|
+
"readonly": true
|
|
331
333
|
},
|
|
332
334
|
{
|
|
333
335
|
"kind": "method",
|
|
@@ -573,7 +575,8 @@
|
|
|
573
575
|
},
|
|
574
576
|
{
|
|
575
577
|
"kind": "field",
|
|
576
|
-
"name": "placeholder"
|
|
578
|
+
"name": "placeholder",
|
|
579
|
+
"readonly": true
|
|
577
580
|
},
|
|
578
581
|
{
|
|
579
582
|
"kind": "field",
|
|
@@ -585,7 +588,8 @@
|
|
|
585
588
|
},
|
|
586
589
|
{
|
|
587
590
|
"kind": "field",
|
|
588
|
-
"name": "footer"
|
|
591
|
+
"name": "footer",
|
|
592
|
+
"readonly": true
|
|
589
593
|
},
|
|
590
594
|
{
|
|
591
595
|
"kind": "field",
|
|
@@ -597,7 +601,8 @@
|
|
|
597
601
|
},
|
|
598
602
|
{
|
|
599
603
|
"kind": "field",
|
|
600
|
-
"name": "rows"
|
|
604
|
+
"name": "rows",
|
|
605
|
+
"readonly": true
|
|
601
606
|
},
|
|
602
607
|
{
|
|
603
608
|
"kind": "field",
|
|
@@ -609,7 +614,8 @@
|
|
|
609
614
|
},
|
|
610
615
|
{
|
|
611
616
|
"kind": "field",
|
|
612
|
-
"name": "columns"
|
|
617
|
+
"name": "columns",
|
|
618
|
+
"readonly": true
|
|
613
619
|
},
|
|
614
620
|
{
|
|
615
621
|
"kind": "field",
|
|
@@ -621,7 +627,8 @@
|
|
|
621
627
|
},
|
|
622
628
|
{
|
|
623
629
|
"kind": "field",
|
|
624
|
-
"name": "cells"
|
|
630
|
+
"name": "cells",
|
|
631
|
+
"readonly": true
|
|
625
632
|
},
|
|
626
633
|
{
|
|
627
634
|
"kind": "field",
|
|
@@ -636,7 +643,8 @@
|
|
|
636
643
|
"name": "grid",
|
|
637
644
|
"type": {
|
|
638
645
|
"text": "HTMLElement[][]"
|
|
639
|
-
}
|
|
646
|
+
},
|
|
647
|
+
"readonly": true
|
|
640
648
|
},
|
|
641
649
|
{
|
|
642
650
|
"kind": "field",
|
|
@@ -649,7 +657,8 @@
|
|
|
649
657
|
},
|
|
650
658
|
{
|
|
651
659
|
"kind": "field",
|
|
652
|
-
"name": "isStatic"
|
|
660
|
+
"name": "isStatic",
|
|
661
|
+
"readonly": true
|
|
653
662
|
},
|
|
654
663
|
{
|
|
655
664
|
"kind": "method",
|
|
@@ -815,7 +824,8 @@
|
|
|
815
824
|
{
|
|
816
825
|
"kind": "field",
|
|
817
826
|
"name": "gridLayoutControllerConfig",
|
|
818
|
-
"privacy": "private"
|
|
827
|
+
"privacy": "private",
|
|
828
|
+
"readonly": true
|
|
819
829
|
},
|
|
820
830
|
{
|
|
821
831
|
"kind": "field",
|
|
@@ -831,12 +841,14 @@
|
|
|
831
841
|
"name": "grid",
|
|
832
842
|
"type": {
|
|
833
843
|
"text": "HTMLElement[][]"
|
|
834
|
-
}
|
|
844
|
+
},
|
|
845
|
+
"readonly": true
|
|
835
846
|
},
|
|
836
847
|
{
|
|
837
848
|
"kind": "field",
|
|
838
849
|
"name": "keyNavGrid",
|
|
839
|
-
"privacy": "private"
|
|
850
|
+
"privacy": "private",
|
|
851
|
+
"readonly": true
|
|
840
852
|
},
|
|
841
853
|
{
|
|
842
854
|
"kind": "field",
|
|
@@ -1048,22 +1060,26 @@
|
|
|
1048
1060
|
{
|
|
1049
1061
|
"kind": "field",
|
|
1050
1062
|
"name": "#columns",
|
|
1051
|
-
"privacy": "private"
|
|
1063
|
+
"privacy": "private",
|
|
1064
|
+
"readonly": true
|
|
1052
1065
|
},
|
|
1053
1066
|
{
|
|
1054
1067
|
"kind": "field",
|
|
1055
1068
|
"name": "#config",
|
|
1056
|
-
"privacy": "private"
|
|
1069
|
+
"privacy": "private",
|
|
1070
|
+
"readonly": true
|
|
1057
1071
|
},
|
|
1058
1072
|
{
|
|
1059
1073
|
"kind": "field",
|
|
1060
1074
|
"name": "#visibleColumns",
|
|
1061
|
-
"privacy": "private"
|
|
1075
|
+
"privacy": "private",
|
|
1076
|
+
"readonly": true
|
|
1062
1077
|
},
|
|
1063
1078
|
{
|
|
1064
1079
|
"kind": "field",
|
|
1065
1080
|
"name": "#lastVisibleColumn",
|
|
1066
|
-
"privacy": "private"
|
|
1081
|
+
"privacy": "private",
|
|
1082
|
+
"readonly": true
|
|
1067
1083
|
},
|
|
1068
1084
|
{
|
|
1069
1085
|
"kind": "method",
|
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*='
|
|
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%;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};
|
|
@@ -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){--
|
|
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};
|
package/grid/hover.controller.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{attachRootNodeStyles as t}from"@blueprintui/components/internals";class e{host;#t;constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#e(),this.host.addEventListener("mouseout",(()=>this.#i()))}hostUpdated(){this.#e()}#e(){this.host.columnStyle?.includes("hover")&&!this.#t&&(this.#t=new CSSStyleSheet,t(this.host,[this.#t]),this.host.addEventListener("mouseover",(t=>{const e=t.target.closest("bp-grid-cell, bp-grid-column");if(e){const t=Array.from(e.parentElement.querySelectorAll("bp-grid-cell, bp-grid-column")).indexOf(e)+1;this.#t.replaceSync(`\n bp-grid[_id=${this.host._id}] bp-grid-cell:nth-child(${t}),\n bp-grid[_id=${this.host._id}] bp-grid-column:nth-child(${t}) {\n --interaction-offset: var(--bp-interaction-hover-offset);\n }\n `)}})))}#i(){this.#t?.replaceSync("")}}export{e as GridHoverController};
|
|
1
|
+
import{attachRootNodeStyles as t}from"@blueprintui/components/internals";class e{host;#t;constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#e(),this.host.addEventListener("mouseout",(()=>this.#i()))}hostUpdated(){this.#e()}#e(){this.host.columnStyle?.includes("hover")&&!this.#t&&(this.#t=new CSSStyleSheet,t(this.host,[this.#t]),this.host.addEventListener("mouseover",(t=>{const e=t.target.closest("bp-grid-cell, bp-grid-column");if(e){const t=Array.from(e.parentElement.querySelectorAll("bp-grid-cell, bp-grid-column")).indexOf(e)+1;this.#t.replaceSync(`\n bp-grid[_id=${this.host._id}] bp-grid-cell:nth-child(${t}),\n bp-grid[_id=${this.host._id}] bp-grid-column:nth-child(${t}) {\n --bp-interaction-offset: var(--bp-interaction-hover-offset);\n }\n `)}})))}#i(){this.#t?.replaceSync("")}}export{e as GridHoverController};
|
package/package.json
CHANGED
package/row/element.css.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=new CSSStyleSheet;t.replaceSync(":host{--min-height:var(--row-height);--border-top:0;--border-bottom:0;--box-shadow:none
|
|
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};
|
package/row/element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{baseStyles as s,
|
|
1
|
+
import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{baseStyles as s,dynamicControllers as o}from"@blueprintui/components/internals";import i from"./element.css.js";let n=class extends e{static properties={selected:{type:Boolean,reflect:!0},position:{type:String,reflect:!0}};static styles=[s,i];_internals=this.attachInternals();render(){return r`<slot></slot>`}constructor(){super();this._internals.role="row"}};n=t([o()],n);export{n as BpGridRow};
|