@blueprintui/grid 1.7.1 → 1.8.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/alignment.controller.d.ts +15 -0
- package/column/alignment.controller.js +1 -0
- package/column/element.css.js +1 -1
- package/column/element.d.ts +2 -0
- package/column/element.js +1 -1
- package/custom-elements.json +92 -0
- package/include/column-alignment.d.ts +1 -0
- package/include/column-alignment.js +1 -0
- package/package.json +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}slot{justify-content:var(--justify-content);border-left:var(--border-left);background:var(--background);background-image:linear-gradient(hsla(0deg,0%,0%,var(--bp-interaction-offset))0 0)!important;box-shadow:var(--box-shadow);border-right:var(--border-right);min-width:var(--min-width);min-height:var(--min-height);font-size:var(--font-size);padding-inline:var(--padding-inline);padding-block:var(--padding-block);color:var(--color);text-align:left;display:flex;gap:var(--bp-space-sm);line-height:1em;align-items:center;width:100%;height:100%;position:relative}:host(:--highlight) slot::after{display:block;position:absolute;inset:0;background:var(--bp-interaction-highlight-background);content:"";pointer-events:none}');export{t as default};
|
|
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(--bp-interaction-offset))0 0)!important;box-shadow:var(--box-shadow);border-right:var(--border-right);min-width:var(--min-width);min-height:var(--min-height);font-size:var(--font-size);padding-inline:var(--padding-inline);padding-block:var(--padding-block);color:var(--color);text-align:left;display:flex;gap:var(--bp-space-sm);line-height:1em;align-items:center;width:100%;height:100%;position:relative}:host(:--highlight) slot::after{display:block;position:absolute;inset:0;background:var(--bp-interaction-highlight-background);content:"";pointer-events:none}');export{t as default};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
+
import type { BpGridColumn } from './element.js';
|
|
3
|
+
export declare type ColumnAlignment = ReactiveControllerHost & BpGridColumn & {
|
|
4
|
+
alignment: 'start' | 'center' | 'end';
|
|
5
|
+
};
|
|
6
|
+
export declare class ColumnAlignmentController implements ReactiveController {
|
|
7
|
+
#private;
|
|
8
|
+
private host;
|
|
9
|
+
constructor(host: ColumnAlignment);
|
|
10
|
+
hostConnected(): void;
|
|
11
|
+
hostUpdated(): void;
|
|
12
|
+
}
|
|
13
|
+
export declare function resetAlignmentState(element: HTMLElement & {
|
|
14
|
+
_internals: ElementInternals;
|
|
15
|
+
}): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{attachInternals as t}from"@blueprintui/components/internals";class n{host;#t;get#n(){const t=this.host.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.#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/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;--
|
|
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);--background:var(--bp-layer-container-background);--font-size:var(--bp-text-size-200);--color:var(--bp-text-color-500);top:0;z-index:998;position:sticky;min-height:var(--min-height);min-width:var(--min-width);display:flex;align-items:center;outline:0!important}: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);padding-inline:var(--padding-inline);padding-block:var(--padding-block);font-size:var(--font-size);text-align:left;border:0;font-weight:500;color:var(--color);white-space:nowrap;overflow:visible;text-overflow:ellipsis;line-height:1em;margin:0;display:flex;gap:var(--bp-size-sm);align-items:center;height:100%;width:100%;position:sticky!important;box-shadow:0 var(--bp-object-border-width-100)0 var(--bp-object-border-color-100)}:host([position='fixed']),:host([position='sticky']){z-index:999}[part=internal]::after{background:var(--bp-object-border-color-100);width:var(--bp-object-border-width-100);right:0;height:50%;position:absolute;content:\"\";display:none}[focused]+[part=internal]::after{background:var(--bp-interaction-accent-background);height:100vh;right:0}:host([bp-draggable*='target']) [part=internal]::after{background:var(--bp-interaction-accent-background);height:100vh;left:0}:host([bp-draggable*='active']) [part=internal]{box-shadow:0 var(--bp-size-2)0 var(--bp-interaction-accent-background)}.border,.line{right:0;position:absolute}.border{top:var(--bp-size-4);bottom:var(--bp-size-4);width:var(--bp-object-border-width-100);background:var(--bp-object-border-color-100)}.line{top:0;width:2px;bottom:0;height:100vh;background:var(--bp-status-accent-background-300);display:none}::slotted([tabindex=\"0\"]),::slotted(button){margin-left:auto}::slotted(bp-button-sort){position:absolute;right:8px;--icon-height:14px;outline:0!important;--bp-interaction-outline-webkit:none!important;--bp-interaction-outline-offset:none!important}::slotted(bp-button-resize){position:absolute;right:0;--height:32px;--background:var(--bp-object-border-color-100);--width:var(--bp-object-border-width-100)}:host(:--ch-last) .border,:host(:--ch-last) ::slotted(bp-button-resize){display:none}");export{t as default};
|
package/column/element.d.ts
CHANGED
|
@@ -22,6 +22,8 @@ export declare class BpGridColumn extends LitElement {
|
|
|
22
22
|
width: string;
|
|
23
23
|
/** position individual column relative to the grid scroll container */
|
|
24
24
|
position: 'sticky' | 'fixed';
|
|
25
|
+
/** align column content and corresponding column cells */
|
|
26
|
+
alignment: 'start' | 'center' | 'end';
|
|
25
27
|
static styles: CSSStyleSheet[];
|
|
26
28
|
/** @private */
|
|
27
29
|
_internals: ElementInternals;
|
package/column/element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{baseStyles as
|
|
1
|
+
import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{baseStyles as i,dynamicControllers as s}from"@blueprintui/components/internals";import{GridColumnWidthController as n}from"./width.controller.js";import{focusStyles as o}from"../internals/index.js";import l from"./element.css.js";let a=class extends e{static properties={width:{type:String},position:{type:String,reflect:!0},alignment:{type:String,reflect:!0}};static styles=[i,l,o];_internals=this.attachInternals();render(){return r`<div role="group" part="internal" focusable><slot> </slot><slot name="resize"><div class="border"></div></slot><div class="line"></div></div>`}constructor(){super();new n(this),this._internals.role="columnheader",this._internals.ariaSort="none"}connectedCallback(){super.connectedCallback(),this.slot="columns"}};a=t([s()],a);export{a as BpGridColumn};
|
package/custom-elements.json
CHANGED
|
@@ -88,6 +88,74 @@
|
|
|
88
88
|
}
|
|
89
89
|
]
|
|
90
90
|
},
|
|
91
|
+
{
|
|
92
|
+
"kind": "javascript-module",
|
|
93
|
+
"path": "/column/alignment.controller.js",
|
|
94
|
+
"declarations": [
|
|
95
|
+
{
|
|
96
|
+
"kind": "class",
|
|
97
|
+
"description": "",
|
|
98
|
+
"name": "ColumnAlignmentController",
|
|
99
|
+
"members": [
|
|
100
|
+
{
|
|
101
|
+
"kind": "field",
|
|
102
|
+
"name": "#alignment",
|
|
103
|
+
"privacy": "private",
|
|
104
|
+
"type": {
|
|
105
|
+
"text": "'start' | 'center' | 'end'"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"kind": "field",
|
|
110
|
+
"name": "#columnItems",
|
|
111
|
+
"privacy": "private"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"kind": "method",
|
|
115
|
+
"name": "hostConnected"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"kind": "method",
|
|
119
|
+
"name": "hostUpdated"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"kind": "method",
|
|
123
|
+
"name": "#align"
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"kind": "function",
|
|
129
|
+
"name": "resetAlignmentState",
|
|
130
|
+
"parameters": [
|
|
131
|
+
{
|
|
132
|
+
"name": "element",
|
|
133
|
+
"type": {
|
|
134
|
+
"text": "HTMLElement & { _internals: ElementInternals }"
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
],
|
|
140
|
+
"exports": [
|
|
141
|
+
{
|
|
142
|
+
"kind": "js",
|
|
143
|
+
"name": "ColumnAlignmentController",
|
|
144
|
+
"declaration": {
|
|
145
|
+
"name": "ColumnAlignmentController",
|
|
146
|
+
"module": "/column/alignment.controller.js"
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"kind": "js",
|
|
151
|
+
"name": "resetAlignmentState",
|
|
152
|
+
"declaration": {
|
|
153
|
+
"name": "resetAlignmentState",
|
|
154
|
+
"module": "/column/alignment.controller.js"
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
]
|
|
158
|
+
},
|
|
91
159
|
{
|
|
92
160
|
"kind": "javascript-module",
|
|
93
161
|
"path": "/column/element.css",
|
|
@@ -154,6 +222,16 @@
|
|
|
154
222
|
"attribute": "position",
|
|
155
223
|
"reflects": true
|
|
156
224
|
},
|
|
225
|
+
{
|
|
226
|
+
"kind": "field",
|
|
227
|
+
"name": "alignment",
|
|
228
|
+
"type": {
|
|
229
|
+
"text": "'start' | 'center' | 'end'"
|
|
230
|
+
},
|
|
231
|
+
"description": "align column content and corresponding column cells",
|
|
232
|
+
"attribute": "alignment",
|
|
233
|
+
"reflects": true
|
|
234
|
+
},
|
|
157
235
|
{
|
|
158
236
|
"kind": "field",
|
|
159
237
|
"name": "_internals",
|
|
@@ -192,6 +270,14 @@
|
|
|
192
270
|
},
|
|
193
271
|
"description": "position individual column relative to the grid scroll container",
|
|
194
272
|
"fieldName": "position"
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"name": "alignment",
|
|
276
|
+
"type": {
|
|
277
|
+
"text": "'start' | 'center' | 'end'"
|
|
278
|
+
},
|
|
279
|
+
"description": "align column content and corresponding column cells",
|
|
280
|
+
"fieldName": "alignment"
|
|
195
281
|
}
|
|
196
282
|
],
|
|
197
283
|
"superclass": {
|
|
@@ -995,6 +1081,12 @@
|
|
|
995
1081
|
}
|
|
996
1082
|
]
|
|
997
1083
|
},
|
|
1084
|
+
{
|
|
1085
|
+
"kind": "javascript-module",
|
|
1086
|
+
"path": "/include/column-alignment.js",
|
|
1087
|
+
"declarations": [],
|
|
1088
|
+
"exports": []
|
|
1089
|
+
},
|
|
998
1090
|
{
|
|
999
1091
|
"kind": "javascript-module",
|
|
1000
1092
|
"path": "/include/column-position.js",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DynamicControllers as o}from"@blueprintui/components/internals";import{BpGridColumn as n}from"../column/element.js";import{ColumnAlignmentController as r}from"../column/alignment.controller.js";o.add(n,class extends r{constructor(o){super(o)}});
|