@blueprintui/grid 1.8.2 → 1.9.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/column/element.css.js +1 -1
- package/custom-elements.json +96 -34
- package/footer/element.css.js +1 -1
- package/footer/element.js +1 -1
- package/grid/element.css.js +1 -1
- package/grid/element.d.ts +8 -6
- package/grid/element.global.css.js +1 -1
- package/grid/element.js +1 -1
- package/grid/hover.controller.d.ts +10 -0
- package/grid/hover.controller.js +1 -0
- package/include/hover.d.ts +1 -0
- package/include/hover.js +1 -0
- package/internals/index.d.ts +1 -0
- package/internals/index.js +1 -1
- package/internals/types/index.d.ts +1 -0
- package/internals/types/index.js +1 -0
- package/package.json +1 -1
- package/placeholder/element.css.js +1 -1
- package/row/element.css.js +1 -1
- package/row/element.d.ts +2 -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{justify-content:var(--justify-content);border-left:var(--border-left);background:var(--background);background-image:linear-gradient(hsla(0deg,0%,0%,var(--
|
|
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{justify-content:var(--justify-content);border-left:var(--border-left);background:var(--background);background-image:linear-gradient(hsla(0deg,0%,0%,var(--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}:host{--highlight-border:var(--bp-object-border-width-100) solid var(--bp-status-accent-background-100)}:host(:--hover){--interaction-offset:var(--bp-interaction-hover-offset)}: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);--
|
|
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);--interaction-offset:var(--bp-interaction-offset);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]{min-height:var(--min-height);justify-content:var(--justify-content);background:var(--background);background-image:linear-gradient(hsla(0deg,0%,0%,var(--interaction-offset))0 0)!important;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
|
@@ -717,12 +717,6 @@
|
|
|
717
717
|
},
|
|
718
718
|
{
|
|
719
719
|
"name": "--row-content-visibility"
|
|
720
|
-
},
|
|
721
|
-
{
|
|
722
|
-
"name": "--column-text-align"
|
|
723
|
-
},
|
|
724
|
-
{
|
|
725
|
-
"name": "--cell-text-algin"
|
|
726
720
|
}
|
|
727
721
|
],
|
|
728
722
|
"members": [
|
|
@@ -755,13 +749,22 @@
|
|
|
755
749
|
},
|
|
756
750
|
{
|
|
757
751
|
"kind": "field",
|
|
758
|
-
"name": "
|
|
752
|
+
"name": "rowStyle",
|
|
759
753
|
"type": {
|
|
760
|
-
"text": "'
|
|
754
|
+
"text": "Permutations<\n 'hover' | 'stripe' | 'border'\n >"
|
|
761
755
|
},
|
|
762
|
-
"
|
|
763
|
-
"
|
|
764
|
-
"
|
|
756
|
+
"description": "determines the visual style for rows",
|
|
757
|
+
"attribute": "row-style",
|
|
758
|
+
"reflects": true
|
|
759
|
+
},
|
|
760
|
+
{
|
|
761
|
+
"kind": "field",
|
|
762
|
+
"name": "columnStyle",
|
|
763
|
+
"type": {
|
|
764
|
+
"text": "Permutations<'hover' | 'border'>"
|
|
765
|
+
},
|
|
766
|
+
"description": "determines the visual style for columns",
|
|
767
|
+
"attribute": "column-style",
|
|
765
768
|
"reflects": true
|
|
766
769
|
},
|
|
767
770
|
{
|
|
@@ -792,22 +795,14 @@
|
|
|
792
795
|
"text": "boolean"
|
|
793
796
|
},
|
|
794
797
|
"default": "false",
|
|
798
|
+
"privacy": "private",
|
|
795
799
|
"attribute": "range-selection",
|
|
796
800
|
"reflects": true
|
|
797
801
|
},
|
|
798
|
-
{
|
|
799
|
-
"kind": "field",
|
|
800
|
-
"name": "elevation",
|
|
801
|
-
"type": {
|
|
802
|
-
"text": "'raised' | 'flat'"
|
|
803
|
-
},
|
|
804
|
-
"attribute": "elevation",
|
|
805
|
-
"reflects": true
|
|
806
|
-
},
|
|
807
802
|
{
|
|
808
803
|
"kind": "field",
|
|
809
804
|
"name": "_id",
|
|
810
|
-
"privacy": "
|
|
805
|
+
"privacy": "private",
|
|
811
806
|
"attribute": "_id",
|
|
812
807
|
"reflects": true
|
|
813
808
|
},
|
|
@@ -913,13 +908,20 @@
|
|
|
913
908
|
"fieldName": "columnLayout"
|
|
914
909
|
},
|
|
915
910
|
{
|
|
916
|
-
"name": "
|
|
911
|
+
"name": "row-style",
|
|
912
|
+
"type": {
|
|
913
|
+
"text": "Permutations<\n 'hover' | 'stripe' | 'border'\n >"
|
|
914
|
+
},
|
|
915
|
+
"description": "determines the visual style for rows",
|
|
916
|
+
"fieldName": "rowStyle"
|
|
917
|
+
},
|
|
918
|
+
{
|
|
919
|
+
"name": "column-style",
|
|
917
920
|
"type": {
|
|
918
|
-
"text": "'
|
|
921
|
+
"text": "Permutations<'hover' | 'border'>"
|
|
919
922
|
},
|
|
920
|
-
"
|
|
921
|
-
"
|
|
922
|
-
"fieldName": "borders"
|
|
923
|
+
"description": "determines the visual style for columns",
|
|
924
|
+
"fieldName": "columnStyle"
|
|
923
925
|
},
|
|
924
926
|
{
|
|
925
927
|
"name": "selectable",
|
|
@@ -946,13 +948,6 @@
|
|
|
946
948
|
"default": "false",
|
|
947
949
|
"fieldName": "rangeSelection"
|
|
948
950
|
},
|
|
949
|
-
{
|
|
950
|
-
"name": "elevation",
|
|
951
|
-
"type": {
|
|
952
|
-
"text": "'raised' | 'flat'"
|
|
953
|
-
},
|
|
954
|
-
"fieldName": "elevation"
|
|
955
|
-
},
|
|
956
951
|
{
|
|
957
952
|
"name": "_id",
|
|
958
953
|
"fieldName": "_id"
|
|
@@ -977,6 +972,53 @@
|
|
|
977
972
|
}
|
|
978
973
|
]
|
|
979
974
|
},
|
|
975
|
+
{
|
|
976
|
+
"kind": "javascript-module",
|
|
977
|
+
"path": "/grid/hover.controller.js",
|
|
978
|
+
"declarations": [
|
|
979
|
+
{
|
|
980
|
+
"kind": "class",
|
|
981
|
+
"description": "controller for managing hover effects",
|
|
982
|
+
"name": "GridHoverController",
|
|
983
|
+
"members": [
|
|
984
|
+
{
|
|
985
|
+
"kind": "field",
|
|
986
|
+
"name": "#columnStyles",
|
|
987
|
+
"privacy": "private",
|
|
988
|
+
"type": {
|
|
989
|
+
"text": "CSSStyleSheet"
|
|
990
|
+
}
|
|
991
|
+
},
|
|
992
|
+
{
|
|
993
|
+
"kind": "method",
|
|
994
|
+
"name": "hostConnected"
|
|
995
|
+
},
|
|
996
|
+
{
|
|
997
|
+
"kind": "method",
|
|
998
|
+
"name": "hostUpdated"
|
|
999
|
+
},
|
|
1000
|
+
{
|
|
1001
|
+
"kind": "method",
|
|
1002
|
+
"name": "#initializeColumnHoverState"
|
|
1003
|
+
},
|
|
1004
|
+
{
|
|
1005
|
+
"kind": "method",
|
|
1006
|
+
"name": "#removeHoverStyles"
|
|
1007
|
+
}
|
|
1008
|
+
]
|
|
1009
|
+
}
|
|
1010
|
+
],
|
|
1011
|
+
"exports": [
|
|
1012
|
+
{
|
|
1013
|
+
"kind": "js",
|
|
1014
|
+
"name": "GridHoverController",
|
|
1015
|
+
"declaration": {
|
|
1016
|
+
"name": "GridHoverController",
|
|
1017
|
+
"module": "/grid/hover.controller.js"
|
|
1018
|
+
}
|
|
1019
|
+
}
|
|
1020
|
+
]
|
|
1021
|
+
},
|
|
980
1022
|
{
|
|
981
1023
|
"kind": "javascript-module",
|
|
982
1024
|
"path": "/grid/layout.controller.js",
|
|
@@ -1105,6 +1147,12 @@
|
|
|
1105
1147
|
"declarations": [],
|
|
1106
1148
|
"exports": []
|
|
1107
1149
|
},
|
|
1150
|
+
{
|
|
1151
|
+
"kind": "javascript-module",
|
|
1152
|
+
"path": "/include/hover.js",
|
|
1153
|
+
"declarations": [],
|
|
1154
|
+
"exports": []
|
|
1155
|
+
},
|
|
1108
1156
|
{
|
|
1109
1157
|
"kind": "javascript-module",
|
|
1110
1158
|
"path": "/include/keynav.js",
|
|
@@ -1275,6 +1323,14 @@
|
|
|
1275
1323
|
"name": "*",
|
|
1276
1324
|
"package": "./utils/events.js"
|
|
1277
1325
|
}
|
|
1326
|
+
},
|
|
1327
|
+
{
|
|
1328
|
+
"kind": "js",
|
|
1329
|
+
"name": "*",
|
|
1330
|
+
"declaration": {
|
|
1331
|
+
"name": "*",
|
|
1332
|
+
"package": "./types/index.js"
|
|
1333
|
+
}
|
|
1278
1334
|
}
|
|
1279
1335
|
]
|
|
1280
1336
|
},
|
|
@@ -1284,6 +1340,12 @@
|
|
|
1284
1340
|
"declarations": [],
|
|
1285
1341
|
"exports": []
|
|
1286
1342
|
},
|
|
1343
|
+
{
|
|
1344
|
+
"kind": "javascript-module",
|
|
1345
|
+
"path": "/internals/types/index.js",
|
|
1346
|
+
"declarations": [],
|
|
1347
|
+
"exports": []
|
|
1348
|
+
},
|
|
1287
1349
|
{
|
|
1288
1350
|
"kind": "javascript-module",
|
|
1289
1351
|
"path": "/internals/utils/events.js",
|
|
@@ -1875,7 +1937,7 @@
|
|
|
1875
1937
|
},
|
|
1876
1938
|
{
|
|
1877
1939
|
"kind": "field",
|
|
1878
|
-
"name": "
|
|
1940
|
+
"name": "_internals",
|
|
1879
1941
|
"privacy": "private"
|
|
1880
1942
|
},
|
|
1881
1943
|
{
|
package/footer/element.css.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const
|
|
1
|
+
const i=new CSSStyleSheet;i.replaceSync(":host{--min-height:var(--bp-size-9, var(--bp-interaction-touch-target));--padding-block:0;--padding-inline:var(--bp-size-6)}[part=internal]{min-height:var(--min-height);display:flex;align-items:center;padding-inline:var(--padding-inline);padding-block:var(--padding-block);border-top:var(--cell-border-width, var(--bp-object-border-width-100)) solid var(--bp-object-border-color-100);color:var(--bp-text-color-500);background:var(--background);font-size:var(--bp-text-size-200);width:100%}::slotted(bp-grid-pagination),::slotted(bp-pagination){margin-left:auto}");export{i as default};
|
package/footer/element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LitElement as t,html as e}from"lit";import{baseStyles as r}from"@blueprintui/components/internals";import
|
|
1
|
+
import{LitElement as t,html as e}from"lit";import{baseStyles as r,layerStyles as s}from"@blueprintui/components/internals";import l from"./element.css.js";class n extends t{static properties={_colSpan:{state:!0}};static styles=[r,s,l];constructor(){super();this._colSpan=""}#t=this.attachInternals();render(){return e`<slot layer role="gridcell" part="internal" .ariaColSpan="${this._colSpan}"></slot>`}connectedCallback(){super.connectedCallback(),this.slot="footer",this.#t.role="row"}}export{n as BpGridFooter};
|
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;--
|
|
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*='stripe']) ::slotted(bp-grid-row:nth-child(even)){--interaction-offset:var(--bp-interaction-hover-offset);--_hover-interaction-offset:var(--bp-interaction-hover-offset)}:host([row-style*='hover']) ::slotted(bp-grid-row){--_hover-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};
|
package/grid/element.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
import type { Permutations } from '../internals/index.js';
|
|
2
3
|
import { GridLayoutController } from './layout.controller.js';
|
|
3
4
|
/**
|
|
4
5
|
* Grid
|
|
@@ -16,8 +17,6 @@ import { GridLayoutController } from './layout.controller.js';
|
|
|
16
17
|
* @cssprop --row-height
|
|
17
18
|
* @cssprop --scroll-padding-top
|
|
18
19
|
* @cssprop --row-content-visibility
|
|
19
|
-
* @cssprop --column-text-align
|
|
20
|
-
* @cssprop --cell-text-algin
|
|
21
20
|
*/
|
|
22
21
|
export declare class BpGrid extends LitElement {
|
|
23
22
|
#private;
|
|
@@ -57,15 +56,18 @@ export declare class BpGrid extends LitElement {
|
|
|
57
56
|
height: string;
|
|
58
57
|
/** column layout determines initial column width calculation */
|
|
59
58
|
columnLayout: 'fixed' | 'flex';
|
|
60
|
-
/** determines the visual style
|
|
61
|
-
|
|
59
|
+
/** determines the visual style for rows */
|
|
60
|
+
rowStyle: Permutations<'hover' | 'stripe' | 'border'>;
|
|
61
|
+
/** determines the visual style for columns */
|
|
62
|
+
columnStyle: Permutations<'hover' | 'border'>;
|
|
62
63
|
/** initializes grid to appropriate aria/a11y settings for selections */
|
|
63
64
|
selectable: 'multi' | 'single' | null;
|
|
64
65
|
/** disables scroll container */
|
|
65
66
|
scrollLock: boolean;
|
|
67
|
+
/** @private enables range selection */
|
|
66
68
|
rangeSelection: boolean;
|
|
67
|
-
|
|
68
|
-
|
|
69
|
+
/** @private enables range selection */
|
|
70
|
+
_id: string;
|
|
69
71
|
protected gridLayoutController: GridLayoutController;
|
|
70
72
|
static styles: CSSStyleSheet[];
|
|
71
73
|
/** @private */
|
|
@@ -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)}bp-grid-row:has(bp-button-expand[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){--interaction-offset:var(--bp-interaction-selected-offset);--_hover-interaction-offset:var(--bp-interaction-selected-offset)}bp-grid-row:has(bp-grid-cell:first-child bp-button-expand[checked]),bp-grid-row:has(bp-grid-cell:last-child bp-button-expand[checked]){--_hover-interaction-offset:0}bp-grid-cell[role=rowheader]:first-child{--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 o,html as e}from"lit";import{baseStyles as i,
|
|
1
|
+
import{__decorate as t}from"tslib";import{LitElement as o,html as e}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 o{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 e`<div role="presentation" layer 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=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.#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)}};C=t([s(),a({key:"actions"}),c(),p()],C);export{C as BpGrid};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ReactiveController } from 'lit';
|
|
2
|
+
import type { BpGrid } from './element.js';
|
|
3
|
+
/** controller for managing hover effects */
|
|
4
|
+
export declare class GridHoverController implements ReactiveController {
|
|
5
|
+
#private;
|
|
6
|
+
private host;
|
|
7
|
+
constructor(host: BpGrid);
|
|
8
|
+
hostConnected(): Promise<void>;
|
|
9
|
+
hostUpdated(): void;
|
|
10
|
+
}
|
|
@@ -0,0 +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};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/include/hover.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DynamicControllers as r}from"@blueprintui/components/internals";import{GridHoverController as o}from"../grid/hover.controller.js";import{BpGrid as e}from"../grid/element.js";r.add(e,class extends o{constructor(r){super(r)}});
|
package/internals/index.d.ts
CHANGED
package/internals/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t from"./styles/focus.css.js";export{InteractionScrollVisibilityController,interactionScrollVisibility}from"./controllers/interaction-scroll-visibility.controller.js";export{onChildListMutation}from"./utils/events.js";import"./types/index.js";const i=t;export{i as focusStyles};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare type Permutations<T extends string, U extends string = T> = T extends any ? T | `${T} ${Permutations<Exclude<U, T>>}` : never;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const a=new CSSStyleSheet;a.replaceSync(":host{--
|
|
1
|
+
const a=new CSSStyleSheet;a.replaceSync(":host{--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
|
|
1
|
+
const t=new CSSStyleSheet;t.replaceSync(":host{--min-height:var(--row-height);--border-top:0;--border-bottom:0;--box-shadow:none;--interaction-offset:var(--bp-interaction-offset);--_hover-interaction-offset:0;content-visibility:var(--row-content-visibility, auto);contain-intrinsic-size:auto var(--min-height)}:host(:hover) ::slotted(bp-grid-cell){--interaction-offset:var(--_hover-interaction-offset)}:host([position='fixed']) ::slotted(bp-grid-cell),:host([position='sticky']) ::slotted(bp-grid-cell),:host([selected]) ::slotted(bp-grid-cell){--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']){--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.d.ts
CHANGED
|
@@ -13,12 +13,13 @@ import { LitElement } from 'lit';
|
|
|
13
13
|
* @cssprop --min-height
|
|
14
14
|
*/
|
|
15
15
|
export declare class BpGridRow extends LitElement {
|
|
16
|
-
#private;
|
|
17
16
|
/** selected visual state */
|
|
18
17
|
selected: boolean;
|
|
19
18
|
/** position individual row relative to the grid scroll container */
|
|
20
19
|
position: 'fixed' | 'sticky' | '';
|
|
21
20
|
static styles: CSSStyleSheet[];
|
|
21
|
+
/** @private */
|
|
22
|
+
_internals: ElementInternals;
|
|
22
23
|
render(): import("lit-html").TemplateResult<1>;
|
|
23
24
|
constructor();
|
|
24
25
|
}
|
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,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]
|
|
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];_internals=this.attachInternals();render(){return r`<slot></slot>`}constructor(){super();this._internals.role="row"}};l=t([i()],l);export{l as BpGridRow};
|