@blueprintui/grid 1.10.4 → 1.10.6
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/README.md +80 -0
- package/column/alignment.controller.js +1 -1
- package/custom-elements.json +77 -0
- package/grid/element.css.js +1 -1
- package/package.json +1 -1
- package/test/index.d.ts +5 -0
- package/test/index.js +1 -0
package/README.md
CHANGED
|
@@ -1,3 +1,83 @@
|
|
|
1
1
|
# BlueprintUI Grid
|
|
2
2
|
|
|
3
|
+
Accelerate your development with a flexible UI datagrid that works everywhere.
|
|
4
|
+
|
|
5
|
+
|
|
3
6
|
[](https://badge.fury.io/js/@blueprintui%2Fgrid)
|
|
7
|
+
|
|
8
|
+
- [Documentation](https://blueprintui.dev/docs/grid)
|
|
9
|
+
- [JavaScript CDN](https://stackblitz.com/edit/blueprintui-grid-cdn)
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
To use the datagrid install the following,
|
|
14
|
+
|
|
15
|
+
```shell
|
|
16
|
+
npm install @blueprintui/grid @blueprintui/themes
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Optional packages for layout and typography utilities are also available.
|
|
20
|
+
|
|
21
|
+
```shell
|
|
22
|
+
npm install @blueprintui/layout @blueprintui/typography
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## CSS
|
|
26
|
+
|
|
27
|
+
To use components the base theme CSS file must be loaded into the page. This can be done via a CSS import or HTML link.
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import '@blueprintui/themes/index.min.css';
|
|
31
|
+
@import '@blueprintui/themes/modern/index.min.css';
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
or
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<link rel="stylesheet" href="@blueprintui/themes/index.min.css">
|
|
38
|
+
<link rel="stylesheet" href="@blueprintui/themes/modern/index.min.css">
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## CDN
|
|
42
|
+
|
|
43
|
+
Blueprint UI Components can be used via CDNs for fast and easy prototyping.
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<link rel="stylesheet" href="https://unpkg.com/@blueprintui/themes/index.min.css">
|
|
47
|
+
<link rel="stylesheet" href="https://unpkg.com/@@blueprintui/themes/modern/index.min.css">
|
|
48
|
+
|
|
49
|
+
<script type="module">
|
|
50
|
+
import 'https://cdn.jsdelivr.net/npm/@blueprintui/grid/include/core.js/+esm';
|
|
51
|
+
</script>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Using a Component
|
|
55
|
+
|
|
56
|
+
Once the theme CSS is loaded the grid can be imported via JavaScript imports.
|
|
57
|
+
|
|
58
|
+
```javascript
|
|
59
|
+
import '@blueprintui/grid/include/core.js';
|
|
60
|
+
import '@blueprintui/grid/include/keynav.js';
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<body bp-theme="modern">
|
|
65
|
+
|
|
66
|
+
<bp-grid>
|
|
67
|
+
<bp-grid-header>
|
|
68
|
+
<bp-grid-column>Column</bp-grid-column>
|
|
69
|
+
<bp-grid-column>Column</bp-grid-column>
|
|
70
|
+
<bp-grid-column>Column</bp-grid-column>
|
|
71
|
+
<bp-grid-column>Column</bp-grid-column>
|
|
72
|
+
</bp-grid-header>
|
|
73
|
+
|
|
74
|
+
<bp-grid-row>
|
|
75
|
+
<bp-grid-cell>Cell</bp-grid-cell>
|
|
76
|
+
<bp-grid-cell>Cell</bp-grid-cell>
|
|
77
|
+
<bp-grid-cell>Cell</bp-grid-cell>
|
|
78
|
+
<bp-grid-cell>Cell</bp-grid-cell>
|
|
79
|
+
</bp-grid-row>
|
|
80
|
+
</bp-grid>
|
|
81
|
+
|
|
82
|
+
</body>
|
|
83
|
+
```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{attachInternals as t}from"@blueprintui/components/internals";class n{host;#t;get#n(){const t=this.host.parentElement.parentElement.grid,n=t[0].indexOf(this.host);return t.slice(0).map((t=>t[n]))}constructor(t){this.host=t,this.host.addController(this)}hostConnected(){t(this.host),this.#
|
|
1
|
+
import{attachInternals as t}from"@blueprintui/components/internals";class n{host;#t;get#n(){const t=this.host.parentElement.parentElement.grid,n=t[0].indexOf(this.host);return this.host.ariaColSpan?[this.host]:t.slice(0).map((t=>t[n]))}constructor(t){this.host=t,this.host.addController(this)}hostConnected(){t(this.host),this.#s()}hostUpdated(){this.#s()}#s(){this.host.alignment!==this.#t&&(this.#n.forEach((t=>{s(t),this.host.alignment&&t._internals.states.add("--alignment-"+this.host.alignment)})),this.#t=this.host.alignment)}}function s(t){t._internals.states.delete("--alignment-start"),t._internals.states.delete("--alignment-center"),t._internals.states.delete("--alignment-end")}export{n as ColumnAlignmentController,s as resetAlignmentState};
|
package/custom-elements.json
CHANGED
|
@@ -88,6 +88,12 @@
|
|
|
88
88
|
}
|
|
89
89
|
]
|
|
90
90
|
},
|
|
91
|
+
{
|
|
92
|
+
"kind": "javascript-module",
|
|
93
|
+
"path": "/cell/element.visual.js",
|
|
94
|
+
"declarations": [],
|
|
95
|
+
"exports": []
|
|
96
|
+
},
|
|
91
97
|
{
|
|
92
98
|
"kind": "javascript-module",
|
|
93
99
|
"path": "/column/alignment.controller.js",
|
|
@@ -300,6 +306,12 @@
|
|
|
300
306
|
}
|
|
301
307
|
]
|
|
302
308
|
},
|
|
309
|
+
{
|
|
310
|
+
"kind": "javascript-module",
|
|
311
|
+
"path": "/column/element.visual.js",
|
|
312
|
+
"declarations": [],
|
|
313
|
+
"exports": []
|
|
314
|
+
},
|
|
303
315
|
{
|
|
304
316
|
"kind": "javascript-module",
|
|
305
317
|
"path": "/column/position.controller.js",
|
|
@@ -556,6 +568,12 @@
|
|
|
556
568
|
}
|
|
557
569
|
]
|
|
558
570
|
},
|
|
571
|
+
{
|
|
572
|
+
"kind": "javascript-module",
|
|
573
|
+
"path": "/footer/element.visual.js",
|
|
574
|
+
"declarations": [],
|
|
575
|
+
"exports": []
|
|
576
|
+
},
|
|
559
577
|
{
|
|
560
578
|
"kind": "javascript-module",
|
|
561
579
|
"path": "/grid/dom.controller.js",
|
|
@@ -984,6 +1002,12 @@
|
|
|
984
1002
|
}
|
|
985
1003
|
]
|
|
986
1004
|
},
|
|
1005
|
+
{
|
|
1006
|
+
"kind": "javascript-module",
|
|
1007
|
+
"path": "/grid/element.visual.js",
|
|
1008
|
+
"declarations": [],
|
|
1009
|
+
"exports": []
|
|
1010
|
+
},
|
|
987
1011
|
{
|
|
988
1012
|
"kind": "javascript-module",
|
|
989
1013
|
"path": "/grid/hover.controller.js",
|
|
@@ -1925,6 +1949,12 @@
|
|
|
1925
1949
|
}
|
|
1926
1950
|
]
|
|
1927
1951
|
},
|
|
1952
|
+
{
|
|
1953
|
+
"kind": "javascript-module",
|
|
1954
|
+
"path": "/pagination/element.visual.js",
|
|
1955
|
+
"declarations": [],
|
|
1956
|
+
"exports": []
|
|
1957
|
+
},
|
|
1928
1958
|
{
|
|
1929
1959
|
"kind": "javascript-module",
|
|
1930
1960
|
"path": "/placeholder/element.css",
|
|
@@ -1984,6 +2014,12 @@
|
|
|
1984
2014
|
}
|
|
1985
2015
|
]
|
|
1986
2016
|
},
|
|
2017
|
+
{
|
|
2018
|
+
"kind": "javascript-module",
|
|
2019
|
+
"path": "/placeholder/element.visual.js",
|
|
2020
|
+
"declarations": [],
|
|
2021
|
+
"exports": []
|
|
2022
|
+
},
|
|
1987
2023
|
{
|
|
1988
2024
|
"kind": "javascript-module",
|
|
1989
2025
|
"path": "/row/element.css",
|
|
@@ -2084,6 +2120,12 @@
|
|
|
2084
2120
|
}
|
|
2085
2121
|
]
|
|
2086
2122
|
},
|
|
2123
|
+
{
|
|
2124
|
+
"kind": "javascript-module",
|
|
2125
|
+
"path": "/row/element.visual.js",
|
|
2126
|
+
"declarations": [],
|
|
2127
|
+
"exports": []
|
|
2128
|
+
},
|
|
2087
2129
|
{
|
|
2088
2130
|
"kind": "javascript-module",
|
|
2089
2131
|
"path": "/row/position.controller.js",
|
|
@@ -2110,6 +2152,41 @@
|
|
|
2110
2152
|
}
|
|
2111
2153
|
}
|
|
2112
2154
|
]
|
|
2155
|
+
},
|
|
2156
|
+
{
|
|
2157
|
+
"kind": "javascript-module",
|
|
2158
|
+
"path": "/test/index.js",
|
|
2159
|
+
"declarations": [
|
|
2160
|
+
{
|
|
2161
|
+
"kind": "function",
|
|
2162
|
+
"name": "createGridVisualFixture",
|
|
2163
|
+
"parameters": [
|
|
2164
|
+
{
|
|
2165
|
+
"name": "template",
|
|
2166
|
+
"type": {
|
|
2167
|
+
"text": "string"
|
|
2168
|
+
}
|
|
2169
|
+
},
|
|
2170
|
+
{
|
|
2171
|
+
"name": "config",
|
|
2172
|
+
"optional": true,
|
|
2173
|
+
"type": {
|
|
2174
|
+
"text": "{ theme?: string; width?: string; height?: string }"
|
|
2175
|
+
}
|
|
2176
|
+
}
|
|
2177
|
+
]
|
|
2178
|
+
}
|
|
2179
|
+
],
|
|
2180
|
+
"exports": [
|
|
2181
|
+
{
|
|
2182
|
+
"kind": "js",
|
|
2183
|
+
"name": "createGridVisualFixture",
|
|
2184
|
+
"declaration": {
|
|
2185
|
+
"name": "createGridVisualFixture",
|
|
2186
|
+
"module": "/test/index.js"
|
|
2187
|
+
}
|
|
2188
|
+
}
|
|
2189
|
+
]
|
|
2113
2190
|
}
|
|
2114
2191
|
]
|
|
2115
2192
|
}
|
package/grid/element.css.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const
|
|
1
|
+
const r=new CSSStyleSheet;r.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)}[part=internal]{border:var(--border);border-radius:var(--bp-object-border-radius-100);background:var(--background);position:relative}.scroll-container{box-shadow:var(--box-shadow);border:var(--border);height:var(--body-height, 100%);min-height:var(--body-min-height, auto);scroll-padding-top:var(--scroll-padding-top);overflow:auto;width:100%;display:flex;flex-direction:column}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group,slot[name=header]{display:flex;flex-direction:column;min-width:fit-content}.body-row-group{flex:1 1 0%;margin-top:var(--bp-size-2)}slot[name=header]{position:sticky;top:0;z-index:99}::slotted(bp-grid-row:not([bp-draggable=target]):first-of-type){--box-shadow:var(--bp-object-border-width-100) solid transparent}::-webkit-scrollbar{width:var(--bp-size-5);height:var(--bp-size-5);background:0 0}::-webkit-scrollbar-track{margin-top:var(--bp-interaction-touch-target);box-shadow:inset 0 0 var(--bp-size-5) var(--scrollbar-background)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-background);border-radius:var(--bp-object-border-radius-100);border:var(--bp-size-2) solid var(--scrollbar-background)}::-webkit-scrollbar-corner{background:rgba(0 0 0 0%)}");export{r as default};
|
package/package.json
CHANGED
package/test/index.d.ts
ADDED
package/test/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{html as t}from"lit";import{unsafeHTML as i}from"lit/directives/unsafe-html.js";import{createVisualFixture as r}from"@blueprintui/components/test";async function e(e,o){return await r(t`<style>bp-grid{--row-content-visibility:visible}</style>${i(e)}`,o)}export{e as createGridVisualFixture};
|