@vaadin/vaadin-app-layout - npm Package Compare versions

Comparing version 2.0.5 to 2.1.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-app-layout",
-  "version": "2.0.5",
+  "version": "2.1.0-alpha1",
   "main": "vaadin-app-layout.js",
@@ -35,13 +35,12 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-themable-mixin": "^1.2.0",
-    "@vaadin/vaadin-element-mixin": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "^1.1.0",
-    "@vaadin/vaadin-material-styles": "^1.1.0",
-    "@vaadin/vaadin-button": "^2.1.0"
+    "@vaadin/vaadin-element-mixin": "^2.3.0",
+    "@vaadin/vaadin-lumo-styles": "^1.6.0",
+    "@vaadin/vaadin-material-styles": "^1.3.2",
+    "@vaadin/vaadin-button": "^2.3.0-alpha1"
   },
   "devDependencies": {
     "@polymer/iron-component-page": "^4.0.0",
-    "@polymer/iron-demo-helpers": "^3.0.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "^3.0.0",
+    "@vaadin/vaadin-demo-helpers": "^3.1.0-alpha1",
     "@vaadin/vaadin-tabs": "^3.0.2",
@@ -48,0 +47,0 @@ "@vaadin/vaadin-icons": "^4.2.0"

src/vaadin-app-layout.js

@@ -126,2 +126,7 @@ /**
 
+      :host([dir="rtl"]) {
+        padding-left: 0;
+        padding-right: var(--vaadin-app-layout-navbar-offset-left);
+      }
+
       :host([hidden]),
@@ -175,6 +180,10 @@ [hidden] {
 
-      :host([primary-section="drawer"][drawer-opened]:not([overlay])) [part="navbar"] {
+      :host(:not([dir="rtl"])[primary-section="drawer"][drawer-opened]:not([overlay])) [part="navbar"] {
         left: var(--vaadin-app-layout-drawer-offset-left, 0);
       }
 
+      :host([dir="rtl"][primary-section="drawer"][drawer-opened]:not([overlay])) [part="navbar"] {
+        right: var(--vaadin-app-layout-drawer-offset-left, 0);
+      }
+
       :host([primary-section="drawer"]) [part="drawer"] {
@@ -191,2 +200,3 @@ top: 0;
       [part="drawer"] {
+        overflow: auto;
         position: fixed;
@@ -246,6 +256,25 @@ top: var(--vaadin-app-layout-navbar-offset-top, 0);
 
-      :host([drawer-opened]:not([overlay])) {
+      :host([dir="rtl"]) [part="drawer"] {
+        left: auto;
+        right: var(--vaadin-app-layout-navbar-offset-start, 0);
+        transform: translateX(100%);
+      }
+
+      :host([dir="rtl"]) [part="navbar"],
+      :host([dir="rtl"]) [part="navbar"]::before {
+        transition: right var(--vaadin-app-layout-transition);
+      }
+
+      :host([dir="rtl"][drawer-opened]) [part='drawer'] {
+        transform: translateX(0%);
+      }
+
+      :host(:not([dir="rtl"])[drawer-opened]:not([overlay])) {
         padding-left: var(--vaadin-app-layout-drawer-offset-left);
       }
 
+      :host([dir="rtl"][drawer-opened]:not([overlay])) {
+        padding-right: var(--vaadin-app-layout-drawer-offset-left);
+      }
+
       @media (max-width: 800px),
@@ -284,3 +313,3 @@ (max-height: 600px) {
   static get version() {
-    return '2.0.5';
+    return '2.1.0-alpha1';
   }
@@ -421,2 +450,3 @@
         drawer.focus();
+        this._updateDrawerHeight();
       }
@@ -504,3 +534,15 @@ }
     }
+  }
 
+  _updateDrawerHeight() {
+    const {scrollHeight, offsetHeight} = this.$.drawer;
+    const height = scrollHeight > offsetHeight ? `${scrollHeight}px` : '100%';
+
+    if (this._isShadyCSS()) {
+      window.ShadyCSS.styleSubtree(this, {
+        '--_vaadin-app-layout-drawer-scroll-size': height
+      });
+    } else {
+      this.style.setProperty('--_vaadin-app-layout-drawer-scroll-size', height);
+    }
   }
@@ -534,2 +576,4 @@
 
+    this._updateDrawerHeight();
+
     // TODO(jouni): ARIA attributes. The drawer should act similar to a modal dialog when in ”overlay” mode
@@ -536,0 +580,0 @@ }

theme/lumo/vaadin-app-layout-styles.js

@@ -13,6 +13,10 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
-      :host(:not([overlay])) [part="drawer"] {
+      :host(:not([dir='rtl']):not([overlay])) [part='drawer'] {
         border-right: 1px solid var(--lumo-contrast-10pct);
       }
 
+      :host([dir='rtl']:not([overlay])) [part='drawer'] {
+        border-left: 1px solid var(--lumo-contrast-10pct);
+      }
+
       :host([overlay]) [part="drawer"]::before {
@@ -31,2 +35,7 @@ background: var(--lumo-base-color);
 
+      :host([overlay]) [part='drawer']::before {
+        background: var(--lumo-base-color);
+        height: var(--_vaadin-app-layout-drawer-scroll-size, 100%);
+      }
+
       [part="backdrop"] {
@@ -33,0 +42,0 @@ background-color: var(--lumo-shade-20pct);

theme/material/vaadin-app-layout-styles.js

@@ -21,5 +21,12 @@ import '@vaadin/vaadin-material-styles/color.js';
         background: var(--material-background-color);
+      }
+
+      :host(:not([dir='rtl'])) [part='drawer'] {
         border-right: 1px solid var(--material-secondary-background-color);
       }
 
+      :host([dir='rtl']) [part='drawer'] {
+        border-left: 1px solid var(--material-secondary-background-color);
+      }
+
       :host([primary-section="drawer"]) [part="drawer"] {
@@ -26,0 +33,0 @@ z-index: 1;

theme/material/vaadin-drawer-toggle-styles.js

@@ -12,3 +12,2 @@ import '@vaadin/vaadin-button/theme/material/vaadin-button-styles.js';
         height: 48px;
-        margin-right: 1em;
         padding: 0;
@@ -18,2 +17,10 @@ border-radius: 50%;
 
+      :host(:not([dir="rtl"])) {
+        margin-right: 1em;
+      }
+
+      :host([dir="rtl"]) {
+        margin-left: 1em;
+      }
+
       [part="icon"],
@@ -20,0 +27,0 @@ [part="icon"]::after,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48670

increased by4.27%

Dev dependency count

6

decreased by-14.29%

Lines of code

877

increased by6.43%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@vaadin/vaadin-button@^2.3.0-alpha1

• Updated@vaadin/vaadin-element-mixin@^2.3.0

• Updated@vaadin/vaadin-lumo-styles@^1.6.0

• Updated@vaadin/vaadin-material-styles@^1.3.2