@vaadin/side-nav 24.4.0-alpha16 → 24.4.0-alpha18

package/README.md

@@ -4,8 +4,7 @@ A web component for navigation menus.
 
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/side-nav)
 
-[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-side-nav)](https://www.npmjs.com/package/@vaadin/vaadin-side-nav)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
+[![npm version](https://badgen.net/npm/v/@vaadin/side-nav)](https://www.npmjs.com/package/@vaadin/side-nav)
 
 ```html
 <vaadin-side-nav collapsible>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.4.0-alpha16",
+  "version": "24.4.0-alpha18",
   "publishConfig": {
     "access": "public"
   },
@@ -35,11 +35,11 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "24.4.0-alpha16",
-    "@vaadin/component-base": "24.4.0-alpha16",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha16",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha16",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha16",
+    "@vaadin/a11y-base": "24.4.0-alpha18",
+    "@vaadin/component-base": "24.4.0-alpha18",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha18",
+    "@vaadin/vaadin-material-styles": "24.4.0-alpha18",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha18",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "2d797855c2b3a3828ee7b0d90aeb227b56c32e76"
+  "gitHead": "7d675c61eaa32ef50c07de7b2fea19ff437b6b90"
 }

package/src/vaadin-side-nav-item.d.ts

@@ -110,6 +110,16 @@ declare class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixi
    */
   target: string | null | undefined;
 
+  /**
+   * Whether to exclude the item from client-side routing. When enabled,
+   * this causes the item to behave like a regular anchor, causing a full
+   * page reload. This only works with supported routers, such as the one
+   * provided in Vaadin apps, or when using the side nav `onNavigate` hook.
+   *
+   * @attr {boolean} router-ignore
+   */
+  routerIgnore: boolean;
+
   addEventListener<K extends keyof SideNavItemEventMap>(
     type: K,
     listener: (this: SideNavItem, ev: SideNavItemEventMap[K]) => void,

package/src/vaadin-side-nav-item.js

@@ -137,6 +137,20 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
        * The target of the link. Works only when `path` is set.
        */
       target: String,
+
+      /**
+       * Whether to exclude the item from client-side routing. When enabled,
+       * this causes the item to behave like a regular anchor, causing a full
+       * page reload. This only works with supported routers, such as the one
+       * provided in Vaadin apps, or when using the side nav `onNavigate` hook.
+       *
+       * @type {boolean}
+       * @attr {boolean} router-ignore
+       */
+      routerIgnore: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -214,6 +228,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
           tabindex="${this.disabled || this.path == null ? '-1' : '0'}"
           href="${ifDefined(this.disabled ? null : this.path)}"
           target="${ifDefined(this.target)}"
+          ?router-ignore="${this.routerIgnore}"
           part="link"
           aria-current="${this.current ? 'page' : 'false'}"
         >
@@ -262,10 +277,25 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
   __updateCurrent() {
     this._setCurrent(this.__isCurrent());
     if (this.current) {
+      this.__expandParentItems();
       this.expanded = this._items.length > 0;
     }
   }
 
+  /** @private */
+  __expandParentItems() {
+    const parentItem = this.__getParentItem();
+    if (parentItem) {
+      parentItem.__expandParentItems();
+    }
+    this.expanded = true;
+  }
+
+  /** @private */
+  __getParentItem() {
+    return this.parentElement instanceof SideNavItem ? this.parentElement : null;
+  }
+
   /** @private */
   __isCurrent() {
     if (this.path == null) {

package/src/vaadin-side-nav.js

@@ -287,6 +287,11 @@ class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin
       return;
     }
 
+    if (item.routerIgnore) {
+      // Allow default action when client-side routing is ignored
+      return;
+    }
+
     // Call the onNavigate callback
     const result = this.onNavigate({
       path: item.path,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.4.0-alpha16",
+  "version": "24.4.0-alpha18",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -52,6 +52,15 @@
                 ]
               }
             },
+            {
+              "name": "router-ignore",
+              "description": "Whether to exclude the item from client-side routing. When enabled,\nthis causes the item to behave like a regular anchor, causing a full\npage reload. This only works with supported routers, such as the one\nprovided in Vaadin apps, or when using the side nav `onNavigate` hook.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -125,6 +134,15 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "routerIgnore",
+                "description": "Whether to exclude the item from client-side routing. When enabled,\nthis causes the item to behave like a regular anchor, causing a full\npage reload. This only works with supported routers, such as the one\nprovided in Vaadin apps, or when using the side nav `onNavigate` hook.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.4.0-alpha16",
+  "version": "24.4.0-alpha18",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -33,6 +33,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?routerIgnore",
+              "description": "Whether to exclude the item from client-side routing. When enabled,\nthis causes the item to behave like a regular anchor, causing a full\npage reload. This only works with supported routers, such as the one\nprovided in Vaadin apps, or when using the side nav `onNavigate` hook.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".i18n",
               "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  toggle: 'Toggle child items'\n}\n```",