@vaadin/side-nav - npm Package Compare versions

Comparing version 24.1.0-alpha9 to 24.1.0-beta1

package.json

 {
   "name": "@vaadin/side-nav",
-  "version": "24.1.0-alpha9",
+  "version": "24.1.0-beta1",
   "publishConfig": {
@@ -23,2 +23,3 @@ "access": "public"
   "files": [
+    "enable.js",
     "src",
@@ -29,4 +30,3 @@ "theme",
     "web-types.json",
-    "web-types.lit.json",
-    "enable.js"
+    "web-types.lit.json"
   ],
@@ -40,6 +40,6 @@ "keywords": [
   "dependencies": {
-    "@vaadin/component-base": "24.1.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.1.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.1.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.1.0-alpha9",
+    "@vaadin/component-base": "24.1.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.1.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.1.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.1.0-beta1",
     "lit": "^2.0.0"
@@ -57,3 +57,3 @@ },
   ],
-  "gitHead": "db4fe44603a6702b85b0da2a6d033ddf8ffea5c4"
+  "gitHead": "f0ddb6576073a6af05ab29867bc5ec82e334f9d7"
 }

README.md

@@ -51,3 +51,3 @@ # @vaadin/side-nav
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material. 
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
 This component currently does not support Material theme.
@@ -54,0 +54,0 @@ The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/side-nav/vaadin-side-nav.js) of the package uses the Lumo theme.

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

@@ -47,3 +47,3 @@ /**
  *
- * #### Example:
+ * #### Example
  *
@@ -50,0 +50,0 @@ * ```html

src/vaadin-side-nav-item.js

@@ -42,3 +42,3 @@ /**
  *
- * #### Example:
+ * #### Example
  *
@@ -65,6 +65,2 @@ * ```html
 
-  static get observers() {
-    return ['__pathChanged(path)'];
-  }
-
   static get properties() {
@@ -114,6 +110,29 @@ return {
 
+  /**
+   * @protected
+   * @override
+   */
+  firstUpdated() {
+    // By default, if the user hasn't provided a custom role,
+    // the role attribute is set to "listitem".
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'listitem');
+    }
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('path')) {
+      this.__updateActive();
+    }
+  }
+
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('role', 'listitem');
     this.__updateActive();
@@ -151,7 +170,2 @@ this.__boundUpdateActive = this.__updateActive.bind(this);
   /** @private */
-  __pathChanged() {
-    this.__updateActive();
-  }
-
-  /** @private */
   __toggleExpanded(e) {
@@ -158,0 +172,0 @@ e.preventDefault();

src/vaadin-side-nav.d.ts

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -24,2 +24,3 @@ */
  * `<vaadin-side-nav>` is a Web Component for navigation menus.
+ *
  * ```html
@@ -42,3 +43,4 @@ * <vaadin-side-nav>
  *
- * #### Example:
+ * #### Example
+ *
  * ```html
@@ -45,0 +47,0 @@ * <vaadin-side-nav>

src/vaadin-side-nav.js

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-
 import { html, LitElement } from 'lit';
@@ -20,2 +19,3 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
  * `<vaadin-side-nav>` is a Web Component for navigation menus.
+ *
  * ```html
@@ -38,3 +38,4 @@ * <vaadin-side-nav>
  *
- * #### Example:
+ * #### Example
+ *
  * ```html
@@ -92,4 +93,2 @@ * <vaadin-side-nav>
   firstUpdated() {
-    super.ready();
-
     // By default, if the user hasn't provided a custom role,
@@ -96,0 +95,0 @@ // the role attribute is set to "navigation".

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.1.0-alpha9",
+  "version": "24.1.0-beta1",
   "description-markup": "markdown",
@@ -11,3 +11,3 @@ "contributions": {
           "name": "vaadin-side-nav-item",
-          "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n  Item 1\n  <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n    Child item 1\n  </vaadin-side-nav-item>\n  <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n    Child item 2\n  </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix`  | A slot for content before the label (e.g. an icon).\n`suffix`  | A slot for content after the label (e.g. an icon).\n\n#### Example:\n\n```html\n<vaadin-side-nav-item>\n  <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n  Item\n  <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```",
+          "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n  Item 1\n  <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n    Child item 1\n  </vaadin-side-nav-item>\n  <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n    Child item 2\n  </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix`  | A slot for content before the label (e.g. an icon).\n`suffix`  | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n  <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n  Item\n  <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```",
           "attributes": [
@@ -79,3 +79,3 @@ {
           "name": "vaadin-side-nav",
-          "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n```html\n<vaadin-side-nav>\n  <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label`   | The label (text) inside the side nav.\n\n#### Example:\n```html\n<vaadin-side-nav>\n  <span slot=\"label\">Main menu</span>\n  <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```",
+          "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n  <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label`   | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n  <span slot=\"label\">Main menu</span>\n  <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```",
           "attributes": [
@@ -82,0 +82,0 @@ {

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.1.0-alpha9",
+  "version": "24.1.0-beta1",
   "description-markup": "markdown",
@@ -19,3 +19,3 @@ "framework": "lit",
           "name": "vaadin-side-nav-item",
-          "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n  Item 1\n  <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n    Child item 1\n  </vaadin-side-nav-item>\n  <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n    Child item 2\n  </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix`  | A slot for content before the label (e.g. an icon).\n`suffix`  | A slot for content after the label (e.g. an icon).\n\n#### Example:\n\n```html\n<vaadin-side-nav-item>\n  <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n  Item\n  <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```",
+          "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n  Item 1\n  <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n    Child item 1\n  </vaadin-side-nav-item>\n  <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n    Child item 2\n  </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix`  | A slot for content before the label (e.g. an icon).\n`suffix`  | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n  <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n  Item\n  <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```",
           "extension": true,
@@ -48,3 +48,3 @@ "attributes": [
           "name": "vaadin-side-nav",
-          "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n```html\n<vaadin-side-nav>\n  <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label`   | The label (text) inside the side nav.\n\n#### Example:\n```html\n<vaadin-side-nav>\n  <span slot=\"label\">Main menu</span>\n  <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```",
+          "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n  <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label`   | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n  <span slot=\"label\">Main menu</span>\n  <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```",
           "extension": true,
@@ -51,0 +51,0 @@ "attributes": [

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

45227

increased by0.47%

Lines of code

962

increased by1.69%

Dependency changes

• + Added@vaadin/component-base@24.1.0-beta1(transitive)

• + Added@vaadin/icon@24.1.0-beta1(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.1.0-beta1(transitive)

• + Added@vaadin/vaadin-material-styles@24.1.0-beta1(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.1.0-beta1(transitive)

• - Removed@vaadin/component-base@24.1.0-alpha9(transitive)

• - Removed@vaadin/icon@24.1.0-alpha9(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.1.0-alpha9(transitive)

• - Removed@vaadin/vaadin-material-styles@24.1.0-alpha9(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.1.0-alpha9(transitive)

• Updated@vaadin/component-base@24.1.0-beta1

• Updated@vaadin/vaadin-lumo-styles@24.1.0-beta1

• Updated@vaadin/vaadin-material-styles@24.1.0-beta1

• Updated@vaadin/vaadin-themable-mixin@24.1.0-beta1