@blueprintui/grid - npm Package Compare versions

Comparing version 1.7.1 to 1.8.0

cell/element.css.js

@@ -1,1 +0,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};
+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};

column/element.css.js

@@ -1,1 +0,1 @@
-const t=new CSSStyleSheet;t.replaceSync(":host{--min-height:var(--column-height, var(--bp-interaction-touch-target));--min-width:fit-content;--justify-content:var(--column-justify-content, start);--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}[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};
+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};

column/element.d.ts

@@ -25,2 +25,4 @@ import { LitElement } from 'lit';
     position: 'sticky' | 'fixed';
+    /** align column content and corresponding column cells */
+    alignment: 'start' | 'center' | 'end';
     static styles: CSSStyleSheet[];
@@ -27,0 +29,0 @@ /** @private */

column/element.js

@@ -1,1 +0,1 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{baseStyles as s,dynamicControllers as i}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}};static styles=[s,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([i()],a);export{a as BpGridColumn};
+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};

custom-elements.json

@@ -93,2 +93,70 @@ {
       "kind": "javascript-module",
+      "path": "/column/alignment.controller.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ColumnAlignmentController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#alignment",
+              "privacy": "private",
+              "type": {
+                "text": "'start' | 'center' | 'end'"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#columnItems",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "#align"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "resetAlignmentState",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "HTMLElement & { _internals: ElementInternals }"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColumnAlignmentController",
+          "declaration": {
+            "name": "ColumnAlignmentController",
+            "module": "/column/alignment.controller.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resetAlignmentState",
+          "declaration": {
+            "name": "resetAlignmentState",
+            "module": "/column/alignment.controller.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
       "path": "/column/element.css",
@@ -160,2 +228,12 @@ "declarations": [],
               "kind": "field",
+              "name": "alignment",
+              "type": {
+                "text": "'start' | 'center' | 'end'"
+              },
+              "description": "align column content and corresponding column cells",
+              "attribute": "alignment",
+              "reflects": true
+            },
+            {
+              "kind": "field",
               "name": "_internals",
@@ -197,2 +275,10 @@ "privacy": "private"
               "fieldName": "position"
+            },
+            {
+              "name": "alignment",
+              "type": {
+                "text": "'start' | 'center' | 'end'"
+              },
+              "description": "align column content and corresponding column cells",
+              "fieldName": "alignment"
             }
@@ -1003,2 +1089,8 @@ ],
       "kind": "javascript-module",
+      "path": "/include/column-alignment.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
       "path": "/include/column-position.js",
@@ -1005,0 +1097,0 @@ "declarations": [],

package.json

 {
   "name": "@blueprintui/grid",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "main": "./index.js",
@@ -5,0 +5,0 @@ "module": "./index.js",

No alert changes

Improved metrics

Total package byte prevSize

100166

4.6%

Number of package files

65

6.56%

Lines of code

2547

4.77%

No dependency changes