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

Comparing version 2.0.0-alpha2 to 2.0.0-alpha3

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-app-layout",
-  "version": "2.0.0-alpha2",
+  "version": "2.0.0-alpha3",
   "main": "vaadin-app-layout.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-app-layout.js

@@ -21,3 +21,3 @@ /**
  * ```
- * <vaadin-app-layout [drawer-first]>
+ * <vaadin-app-layout primary-section="navbar|drawer">
  *  <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>
@@ -64,2 +64,12 @@ *  <h3 slot="navbar [touch-optimized]">Company Name</h3>
  *
+ * ### Navigation
+ *
+ * As the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.
+ *
+ * In order to do so, there are two options:
+ * - If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`
+ * - If not, a custom event `close-overlay-drawer` can be dispatched either by calling
+ *  `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling
+ *  `Vaadin.AppLayoutElement.dispatchCloseOverlayDrawerEvent()`
+ *
  * @memberof Vaadin
@@ -132,7 +142,7 @@ * @mixes Vaadin.ElementMixin
 
-      :host([drawer-first][drawer-opened]:not([overlay])) [part="navbar"] {
+      :host([primary-section="drawer"][drawer-opened]:not([overlay])) [part="navbar"] {
         left: var(--vaadin-app-layout-drawer-offset-left, 0);
       }
 
-      :host([drawer-first]) [part="drawer"] {
+      :host([primary-section="drawer"]) [part="drawer"] {
         top: 0;
@@ -238,3 +248,3 @@ }
   static get version() {
-    return '2.0.0-alpha2';
+    return '2.0.0-alpha3';
   }
@@ -245,10 +255,12 @@
       /**
-       * Defines how the navbar and the drawer will interact with each other on desktop view when the drawer is opened.
-       * - By default, the navbar takes the full available width and moves the drawer down.
-       * - If `drawer-first` is set, then the drawer will move the navbar, taking the full available height.
+       * Defines whether navbar or drawer will come first visually.
+       * - By default (`primary-section="navbar"`), the navbar takes the full available width and moves the drawer down.
+       * - If `primary-section="drawer"` is set, then the drawer will move the navbar, taking the full available height.
        */
-      drawerFirst: {
-        type: Boolean,
+      primarySection: {
+        type: String,
+        value: 'navbar',
         notify: true,
-        reflectToAttribute: true
+        reflectToAttribute: true,
+        observer: '_primarySectionObserver'
       },
@@ -289,2 +301,3 @@
     this.__drawerToggleClickListener = this._drawerToggleClick.bind(this);
+    this.__closeOverlayDrawerListener = this.__closeOverlayDrawer.bind(this);
   }
@@ -324,2 +337,4 @@
     this._updateOverlayMode();
+
+    window.addEventListener('close-overlay-drawer', this.__closeOverlayDrawerListener);
   }
@@ -336,4 +351,33 @@
     this.removeEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
+    this.removeEventListener('close-overlay-drawer', this.__drawerToggleClickListener);
   }
 
+  /**
+   * Helper static method that dispatches a `close-overlay-drawer` event
+   */
+  static dispatchCloseOverlayDrawerEvent() {
+    window.dispatchEvent(new CustomEvent('close-overlay-drawer'));
+  }
+
+  _primarySectionObserver(value) {
+    const isValid = ['navbar', 'drawer'].indexOf(value) !== -1;
+    if (!isValid) {
+      this.set('primarySection', 'navbar');
+    }
+  }
+
+  _drawerOpenedObserver() {
+    const drawer = this.$.drawer;
+
+    drawer.removeAttribute('tabindex');
+
+    if (this.overlay) {
+      if (this.drawerOpened) {
+        drawer.setAttribute('tabindex', 0);
+        drawer.focus();
+      }
+    }
+  }
+
+
   _isShadyCSS() {
@@ -353,2 +397,18 @@ return window.ShadyCSS && !window.ShadyCSS.nativeCss;
 
+  /**
+   * App Layout listens to `close-overlay-drawer` on the window level.
+   * A custom event can be dispatched and the App Layout will close the drawer in overlay.
+   *
+   * That can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.
+   *
+   * See `dispatchCloseOverlayDrawerEvent()` helper method.
+   *
+   * @event close-overlay-drawer
+   */
+  __closeOverlayDrawer() {
+    if (this.overlay) {
+      this.drawerOpened = false;
+    }
+  }
+
   _updateDrawerSize() {
@@ -404,15 +464,2 @@ const childCount = this.querySelectorAll('[slot=drawer]').length;
 
-  _drawerOpenedObserver() {
-    const drawer = this.$.drawer;
-
-    drawer.removeAttribute('tabindex');
-
-    if (this.overlay) {
-      if (this.drawerOpened) {
-        drawer.setAttribute('tabindex', 0);
-        drawer.focus();
-      }
-    }
-  }
-
   _updateOverlayMode() {
@@ -419,0 +466,0 @@ const overlay = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') == 'true';

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

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

40894

increased by4.43%

Lines of code

658

increased by6.82%

Worsened metrics

Number of downloads

6499

decreased by-35.44%

No dependency changes