@vaadin/side-nav - npm Package Compare versions

Comparing version 24.5.0-alpha1 to 24.5.0-alpha10

package.json

 {
   "name": "@vaadin/side-nav",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha10",
   "publishConfig": {
@@ -38,14 +38,14 @@ "access": "public"
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "24.5.0-alpha1",
-    "@vaadin/component-base": "24.5.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.5.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1",
+    "@vaadin/a11y-base": "24.5.0-alpha10",
+    "@vaadin/component-base": "24.5.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.6.0",
+    "@vaadin/chai-plugins": "24.5.0-alpha10",
+    "@vaadin/testing-helpers": "^1.0.0",
     "lit": "^3.0.0",
-    "sinon": "^13.0.2"
+    "sinon": "^18.0.0"
   },
@@ -56,3 +56,3 @@ "web-types": [
   ],
-  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
+  "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
 }

README.md

@@ -23,9 +23,5 @@ # @vaadin/side-nav
 
-    <vaadin-side-nav-item path="/child1" slot="children">
-      Child 1
-    </vaadin-side-nav-item>
+    <vaadin-side-nav-item path="/child1" slot="children"> Child 1 </vaadin-side-nav-item>
 
-    <vaadin-side-nav-item path="/child2" slot="children">
-      Child 2
-    </vaadin-side-nav-item>
+    <vaadin-side-nav-item path="/child2" slot="children"> Child 2 </vaadin-side-nav-item>
   </vaadin-side-nav-item>
@@ -74,3 +70,3 @@ </vaadin-side-nav>
 
-Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
@@ -77,0 +73,0 @@ ## License

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

@@ -97,8 +97,24 @@ /**
   /**
+   * Whether to also match nested paths / routes. `false` by default.
+   *
+   * When enabled, an item with the path `/path` is considered current when
+   * the browser URL is `/path`, `/path/child`, `/path/child/grandchild`,
+   * etc.
+   *
+   * Note that this only affects matching of the URLs path, not the base
+   * origin or query parameters.
+   *
+   * @attr {boolean} match-nested
+   */
+  matchNested: boolean;
+
+  /**
    * Whether the item's path matches the current browser URL.
    *
    * A match occurs when both share the same base origin (like https://example.com),
-   * the same path (like /path/to/page), and the browser URL contains all
-   * the query parameters with the same values from the item's path.
+   * the same path (like /path/to/page), and the browser URL contains at least
+   * all the query parameters with the same values from the item's path.
    *
+   * See [`matchNested`](#/elements/vaadin-side-nav-item#property-matchNested) for how to change the path matching behavior.
+   *
    * The state is updated when the item is added to the DOM or when the browser
@@ -105,0 +121,0 @@ * navigates to a new page.

src/vaadin-side-nav-item.js

@@ -15,2 +15,3 @@ /**
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { location } from './location.js';
 import { sideNavItemBaseStyles } from './vaadin-side-nav-base-styles.js';
@@ -119,2 +120,20 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
       /**
+       * Whether to also match nested paths / routes. `false` by default.
+       *
+       * When enabled, an item with the path `/path` is considered current when
+       * the browser URL is `/path`, `/path/child`, `/path/child/grandchild`,
+       * etc.
+       *
+       * Note that this only affects matching of the URLs path, not the base
+       * origin or query parameters.
+       *
+       * @type {boolean}
+       * @attr {boolean} match-nested
+       */
+      matchNested: {
+        type: Boolean,
+        value: false,
+      },
+
+      /**
        * Whether the item's path matches the current browser URL.
@@ -126,2 +145,4 @@ *
        *
+       * See [`matchNested`](#/elements/vaadin-side-nav-item#property-matchNested) for how to change the path matching behavior.
+       *
        * The state is updated when the item is added to the DOM or when the browser
@@ -196,3 +217,3 @@ * navigates to a new page.
 
-    if (props.has('path') || props.has('pathAliases')) {
+    if (props.has('path') || props.has('pathAliases') || props.has('matchNested')) {
       this.__updateCurrent();
@@ -215,2 +236,3 @@ }
     window.addEventListener('popstate', this.__boundUpdateCurrent);
+    window.addEventListener('vaadin-navigated', this.__boundUpdateCurrent);
     window.addEventListener('side-nav-location-changed', this.__boundUpdateCurrent);
@@ -223,2 +245,3 @@ }
     window.removeEventListener('popstate', this.__boundUpdateCurrent);
+    window.removeEventListener('vaadin-navigated', this.__boundUpdateCurrent);
     window.removeEventListener('side-nav-location-changed', this.__boundUpdateCurrent);
@@ -311,4 +334,8 @@ }
 
-    const browserPath = `${document.location.pathname}${document.location.search}`;
-    return matchPaths(browserPath, this.path) || this.pathAliases.some((alias) => matchPaths(browserPath, alias));
+    const browserPath = `${location.pathname}${location.search}`;
+    const matchOptions = { matchNested: this.matchNested };
+    return (
+      matchPaths(browserPath, this.path, matchOptions) ||
+      this.pathAliases.some((alias) => matchPaths(browserPath, alias, matchOptions))
+    );
   }
@@ -315,0 +342,0 @@ }

theme/lumo/vaadin-side-nav-item-styles.js

@@ -22,3 +22,5 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     border-radius: var(--lumo-border-radius-m);
-    transition: background-color 140ms, color 140ms;
+    transition:
+      background-color 140ms,
+      color 140ms;
     cursor: var(--lumo-clickable-cursor, default);
@@ -25,0 +27,0 @@ min-height: var(--lumo-icon-size-m);

theme/lumo/vaadin-side-nav-styles.js

@@ -49,4 +49,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     height: var(--lumo-size-s);
-    margin-inline-start: auto;
-    margin-inline-end: var(--lumo-space-xs);
+    margin-inline: auto var(--lumo-space-xs);
     font-size: var(--lumo-icon-size-m);
@@ -53,0 +52,0 @@ line-height: 1;

theme/material/vaadin-side-nav-item-styles.js

@@ -24,3 +24,5 @@ import '@vaadin/vaadin-material-styles/color.js';
     color: var(--material-body-text-color);
-    transition: background-color 140ms, color 140ms;
+    transition:
+      background-color 140ms,
+      color 140ms;
     border-radius: 4px;
@@ -78,3 +80,5 @@ cursor: default;
     opacity: 0;
-    transition: transform 0s 0.8s, opacity 0.8s;
+    transition:
+      transform 0s 0.8s,
+      opacity 0.8s;
     will-change: transform, opacity;
@@ -81,0 +85,0 @@ }

theme/material/vaadin-side-nav-styles.js

@@ -40,4 +40,3 @@ import '@vaadin/vaadin-material-styles/color.js';
     padding: 4px;
-    margin-inline-start: auto;
-    margin-inline-end: -4px;
+    margin-inline: auto -4px;
     font-size: var(--material-icon-font-size);
@@ -44,0 +43,0 @@ line-height: 1;

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha10",
   "description-markup": "markdown",
@@ -45,2 +45,11 @@ "contributions": {
             {
+              "name": "match-nested",
+              "description": "Whether to also match nested paths / routes. `false` by default.\n\nWhen enabled, an item with the path `/path` is considered current when\nthe browser URL is `/path`, `/path/child`, `/path/child/grandchild`,\netc.\n\nNote that this only affects matching of the URLs path, not the base\norigin or query parameters.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
               "name": "target",
@@ -129,2 +138,11 @@ "description": "The target of the link. Works only when `path` is set.",
               {
+                "name": "matchNested",
+                "description": "Whether to also match nested paths / routes. `false` by default.\n\nWhen enabled, an item with the path `/path` is considered current when\nthe browser URL is `/path`, `/path/child`, `/path/child/grandchild`,\netc.\n\nNote that this only affects matching of the URLs path, not the base\norigin or query parameters.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
                 "name": "target",
@@ -131,0 +149,0 @@ "description": "The target of the link. Works only when `path` is set.",

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha10",
   "description-markup": "markdown",
@@ -37,2 +37,9 @@ "framework": "lit",
             {
+              "name": "?matchNested",
+              "description": "Whether to also match nested paths / routes. `false` by default.\n\nWhen enabled, an item with the path `/path` is considered current when\nthe browser URL is `/path`, `/path/child`, `/path/child/grandchild`,\netc.\n\nNote that this only affects matching of the URLs path, not the base\norigin or query parameters.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
               "name": "?routerIgnore",
@@ -39,0 +46,0 @@ "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.",

No alert changes

Improved metrics

Total package byte prevSize

89553

increased by4.08%

Number of package files

33

increased by3.13%

Lines of code

2039

increased by4.67%

Worsened metrics

Number of lines in readme file

77

decreased by-4.94%

Dependency changes

• + Added@vaadin/a11y-base@24.5.0-alpha10(transitive)

• + Added@vaadin/component-base@24.5.0-alpha10(transitive)

• + Added@vaadin/icon@24.5.0-alpha10(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.5.0-alpha10(transitive)

• + Added@vaadin/vaadin-material-styles@24.5.0-alpha10(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.5.0-alpha10(transitive)

• - Removed@vaadin/a11y-base@24.5.0-alpha1(transitive)

• - Removed@vaadin/component-base@24.5.0-alpha1(transitive)

• - Removed@vaadin/icon@24.5.0-alpha1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.5.0-alpha1(transitive)

• - Removed@vaadin/vaadin-material-styles@24.5.0-alpha1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.5.0-alpha1(transitive)

• Updated@vaadin/a11y-base@24.5.0-alpha10

• Updated@vaadin/component-base@24.5.0-alpha10

• Updated@vaadin/vaadin-lumo-styles@24.5.0-alpha10

• Updated@vaadin/vaadin-material-styles@24.5.0-alpha10

• Updated@vaadin/vaadin-themable-mixin@24.5.0-alpha10