@blueprintui/grid 1.8.3 → 1.9.1
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 +128 -50
- 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
|
@@ -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",
|
|
@@ -717,12 +726,6 @@
|
|
|
717
726
|
},
|
|
718
727
|
{
|
|
719
728
|
"name": "--row-content-visibility"
|
|
720
|
-
},
|
|
721
|
-
{
|
|
722
|
-
"name": "--column-text-align"
|
|
723
|
-
},
|
|
724
|
-
{
|
|
725
|
-
"name": "--cell-text-algin"
|
|
726
729
|
}
|
|
727
730
|
],
|
|
728
731
|
"members": [
|
|
@@ -755,13 +758,22 @@
|
|
|
755
758
|
},
|
|
756
759
|
{
|
|
757
760
|
"kind": "field",
|
|
758
|
-
"name": "
|
|
761
|
+
"name": "rowStyle",
|
|
762
|
+
"type": {
|
|
763
|
+
"text": "Permutations<\n 'hover' | 'stripe' | 'border'\n >"
|
|
764
|
+
},
|
|
765
|
+
"description": "determines the visual style for rows",
|
|
766
|
+
"attribute": "row-style",
|
|
767
|
+
"reflects": true
|
|
768
|
+
},
|
|
769
|
+
{
|
|
770
|
+
"kind": "field",
|
|
771
|
+
"name": "columnStyle",
|
|
759
772
|
"type": {
|
|
760
|
-
"text": "'
|
|
773
|
+
"text": "Permutations<'hover' | 'border'>"
|
|
761
774
|
},
|
|
762
|
-
"
|
|
763
|
-
"
|
|
764
|
-
"attribute": "borders",
|
|
775
|
+
"description": "determines the visual style for columns",
|
|
776
|
+
"attribute": "column-style",
|
|
765
777
|
"reflects": true
|
|
766
778
|
},
|
|
767
779
|
{
|
|
@@ -792,22 +804,14 @@
|
|
|
792
804
|
"text": "boolean"
|
|
793
805
|
},
|
|
794
806
|
"default": "false",
|
|
807
|
+
"privacy": "private",
|
|
795
808
|
"attribute": "range-selection",
|
|
796
809
|
"reflects": true
|
|
797
810
|
},
|
|
798
|
-
{
|
|
799
|
-
"kind": "field",
|
|
800
|
-
"name": "elevation",
|
|
801
|
-
"type": {
|
|
802
|
-
"text": "'raised' | 'flat'"
|
|
803
|
-
},
|
|
804
|
-
"attribute": "elevation",
|
|
805
|
-
"reflects": true
|
|
806
|
-
},
|
|
807
811
|
{
|
|
808
812
|
"kind": "field",
|
|
809
813
|
"name": "_id",
|
|
810
|
-
"privacy": "
|
|
814
|
+
"privacy": "private",
|
|
811
815
|
"attribute": "_id",
|
|
812
816
|
"reflects": true
|
|
813
817
|
},
|
|
@@ -820,7 +824,8 @@
|
|
|
820
824
|
{
|
|
821
825
|
"kind": "field",
|
|
822
826
|
"name": "gridLayoutControllerConfig",
|
|
823
|
-
"privacy": "private"
|
|
827
|
+
"privacy": "private",
|
|
828
|
+
"readonly": true
|
|
824
829
|
},
|
|
825
830
|
{
|
|
826
831
|
"kind": "field",
|
|
@@ -836,12 +841,14 @@
|
|
|
836
841
|
"name": "grid",
|
|
837
842
|
"type": {
|
|
838
843
|
"text": "HTMLElement[][]"
|
|
839
|
-
}
|
|
844
|
+
},
|
|
845
|
+
"readonly": true
|
|
840
846
|
},
|
|
841
847
|
{
|
|
842
848
|
"kind": "field",
|
|
843
849
|
"name": "keyNavGrid",
|
|
844
|
-
"privacy": "private"
|
|
850
|
+
"privacy": "private",
|
|
851
|
+
"readonly": true
|
|
845
852
|
},
|
|
846
853
|
{
|
|
847
854
|
"kind": "field",
|
|
@@ -913,13 +920,20 @@
|
|
|
913
920
|
"fieldName": "columnLayout"
|
|
914
921
|
},
|
|
915
922
|
{
|
|
916
|
-
"name": "
|
|
923
|
+
"name": "row-style",
|
|
917
924
|
"type": {
|
|
918
|
-
"text": "'
|
|
925
|
+
"text": "Permutations<\n 'hover' | 'stripe' | 'border'\n >"
|
|
919
926
|
},
|
|
920
|
-
"
|
|
921
|
-
"
|
|
922
|
-
|
|
927
|
+
"description": "determines the visual style for rows",
|
|
928
|
+
"fieldName": "rowStyle"
|
|
929
|
+
},
|
|
930
|
+
{
|
|
931
|
+
"name": "column-style",
|
|
932
|
+
"type": {
|
|
933
|
+
"text": "Permutations<'hover' | 'border'>"
|
|
934
|
+
},
|
|
935
|
+
"description": "determines the visual style for columns",
|
|
936
|
+
"fieldName": "columnStyle"
|
|
923
937
|
},
|
|
924
938
|
{
|
|
925
939
|
"name": "selectable",
|
|
@@ -946,13 +960,6 @@
|
|
|
946
960
|
"default": "false",
|
|
947
961
|
"fieldName": "rangeSelection"
|
|
948
962
|
},
|
|
949
|
-
{
|
|
950
|
-
"name": "elevation",
|
|
951
|
-
"type": {
|
|
952
|
-
"text": "'raised' | 'flat'"
|
|
953
|
-
},
|
|
954
|
-
"fieldName": "elevation"
|
|
955
|
-
},
|
|
956
963
|
{
|
|
957
964
|
"name": "_id",
|
|
958
965
|
"fieldName": "_id"
|
|
@@ -977,6 +984,53 @@
|
|
|
977
984
|
}
|
|
978
985
|
]
|
|
979
986
|
},
|
|
987
|
+
{
|
|
988
|
+
"kind": "javascript-module",
|
|
989
|
+
"path": "/grid/hover.controller.js",
|
|
990
|
+
"declarations": [
|
|
991
|
+
{
|
|
992
|
+
"kind": "class",
|
|
993
|
+
"description": "controller for managing hover effects",
|
|
994
|
+
"name": "GridHoverController",
|
|
995
|
+
"members": [
|
|
996
|
+
{
|
|
997
|
+
"kind": "field",
|
|
998
|
+
"name": "#columnStyles",
|
|
999
|
+
"privacy": "private",
|
|
1000
|
+
"type": {
|
|
1001
|
+
"text": "CSSStyleSheet"
|
|
1002
|
+
}
|
|
1003
|
+
},
|
|
1004
|
+
{
|
|
1005
|
+
"kind": "method",
|
|
1006
|
+
"name": "hostConnected"
|
|
1007
|
+
},
|
|
1008
|
+
{
|
|
1009
|
+
"kind": "method",
|
|
1010
|
+
"name": "hostUpdated"
|
|
1011
|
+
},
|
|
1012
|
+
{
|
|
1013
|
+
"kind": "method",
|
|
1014
|
+
"name": "#initializeColumnHoverState"
|
|
1015
|
+
},
|
|
1016
|
+
{
|
|
1017
|
+
"kind": "method",
|
|
1018
|
+
"name": "#removeHoverStyles"
|
|
1019
|
+
}
|
|
1020
|
+
]
|
|
1021
|
+
}
|
|
1022
|
+
],
|
|
1023
|
+
"exports": [
|
|
1024
|
+
{
|
|
1025
|
+
"kind": "js",
|
|
1026
|
+
"name": "GridHoverController",
|
|
1027
|
+
"declaration": {
|
|
1028
|
+
"name": "GridHoverController",
|
|
1029
|
+
"module": "/grid/hover.controller.js"
|
|
1030
|
+
}
|
|
1031
|
+
}
|
|
1032
|
+
]
|
|
1033
|
+
},
|
|
980
1034
|
{
|
|
981
1035
|
"kind": "javascript-module",
|
|
982
1036
|
"path": "/grid/layout.controller.js",
|
|
@@ -1006,22 +1060,26 @@
|
|
|
1006
1060
|
{
|
|
1007
1061
|
"kind": "field",
|
|
1008
1062
|
"name": "#columns",
|
|
1009
|
-
"privacy": "private"
|
|
1063
|
+
"privacy": "private",
|
|
1064
|
+
"readonly": true
|
|
1010
1065
|
},
|
|
1011
1066
|
{
|
|
1012
1067
|
"kind": "field",
|
|
1013
1068
|
"name": "#config",
|
|
1014
|
-
"privacy": "private"
|
|
1069
|
+
"privacy": "private",
|
|
1070
|
+
"readonly": true
|
|
1015
1071
|
},
|
|
1016
1072
|
{
|
|
1017
1073
|
"kind": "field",
|
|
1018
1074
|
"name": "#visibleColumns",
|
|
1019
|
-
"privacy": "private"
|
|
1075
|
+
"privacy": "private",
|
|
1076
|
+
"readonly": true
|
|
1020
1077
|
},
|
|
1021
1078
|
{
|
|
1022
1079
|
"kind": "field",
|
|
1023
1080
|
"name": "#lastVisibleColumn",
|
|
1024
|
-
"privacy": "private"
|
|
1081
|
+
"privacy": "private",
|
|
1082
|
+
"readonly": true
|
|
1025
1083
|
},
|
|
1026
1084
|
{
|
|
1027
1085
|
"kind": "method",
|
|
@@ -1105,6 +1163,12 @@
|
|
|
1105
1163
|
"declarations": [],
|
|
1106
1164
|
"exports": []
|
|
1107
1165
|
},
|
|
1166
|
+
{
|
|
1167
|
+
"kind": "javascript-module",
|
|
1168
|
+
"path": "/include/hover.js",
|
|
1169
|
+
"declarations": [],
|
|
1170
|
+
"exports": []
|
|
1171
|
+
},
|
|
1108
1172
|
{
|
|
1109
1173
|
"kind": "javascript-module",
|
|
1110
1174
|
"path": "/include/keynav.js",
|
|
@@ -1275,6 +1339,14 @@
|
|
|
1275
1339
|
"name": "*",
|
|
1276
1340
|
"package": "./utils/events.js"
|
|
1277
1341
|
}
|
|
1342
|
+
},
|
|
1343
|
+
{
|
|
1344
|
+
"kind": "js",
|
|
1345
|
+
"name": "*",
|
|
1346
|
+
"declaration": {
|
|
1347
|
+
"name": "*",
|
|
1348
|
+
"package": "./types/index.js"
|
|
1349
|
+
}
|
|
1278
1350
|
}
|
|
1279
1351
|
]
|
|
1280
1352
|
},
|
|
@@ -1284,6 +1356,12 @@
|
|
|
1284
1356
|
"declarations": [],
|
|
1285
1357
|
"exports": []
|
|
1286
1358
|
},
|
|
1359
|
+
{
|
|
1360
|
+
"kind": "javascript-module",
|
|
1361
|
+
"path": "/internals/types/index.js",
|
|
1362
|
+
"declarations": [],
|
|
1363
|
+
"exports": []
|
|
1364
|
+
},
|
|
1287
1365
|
{
|
|
1288
1366
|
"kind": "javascript-module",
|
|
1289
1367
|
"path": "/internals/utils/events.js",
|
|
@@ -1875,7 +1953,7 @@
|
|
|
1875
1953
|
},
|
|
1876
1954
|
{
|
|
1877
1955
|
"kind": "field",
|
|
1878
|
-
"name": "
|
|
1956
|
+
"name": "_internals",
|
|
1879
1957
|
"privacy": "private"
|
|
1880
1958
|
},
|
|
1881
1959
|
{
|
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};
|