@vaadin/message-list - npm Package Compare versions

Comparing version 24.8.0-alpha9 to 24.8.0-beta1

package.json

 {
   "name": "@vaadin/message-list",
-  "version": "24.8.0-alpha9",
+  "version": "24.8.0-beta1",
   "publishConfig": {
@@ -42,13 +42,14 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha9",
-    "@vaadin/avatar": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/a11y-base": "24.8.0-beta1",
+    "@vaadin/avatar": "24.8.0-beta1",
+    "@vaadin/component-base": "24.8.0-beta1",
+    "@vaadin/markdown": "24.8.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.8.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
+    "@vaadin/chai-plugins": "24.8.0-beta1",
+    "@vaadin/test-runner-commands": "24.8.0-beta1",
     "@vaadin/testing-helpers": "^1.1.0",
@@ -61,3 +62,3 @@ "sinon": "^18.0.0"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "57ce3a90de99e49049312b0ba4041d3e7542e9d8"
 }

src/vaadin-message-list-mixin.d.ts

@@ -8,2 +8,3 @@ /**
 import type { KeyboardDirectionMixinClass } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 
@@ -23,3 +24,6 @@ export interface MessageListItem {
   base: T,
-): Constructor<KeyboardDirectionMixinClass> & Constructor<MessageListMixinClass> & T;
+): Constructor<KeyboardDirectionMixinClass> &
+  Constructor<MessageListMixinClass> &
+  Constructor<SlotStylesMixinClass> &
+  T;
 
@@ -44,2 +48,13 @@ export declare class MessageListMixinClass {
   items: MessageListItem[] | null | undefined;
+
+  /**
+   * When set to `true`, the message text is parsed as Markdown.
+   */
+  markdown: boolean | undefined;
+
+  /**
+   * When set to `true`, new messages are announced to assistive technologies using ARIA live regions.
+   * @attr {boolean} announce-messages
+   */
+  announceMessages: boolean | undefined;
 }

src/vaadin-message-list-mixin.js

@@ -9,2 +9,3 @@ /**
 import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin';
 
@@ -14,5 +15,6 @@ /**
  * @mixes KeyboardDirectionMixin
+ * @mixes SlotStylesMixin
  */
 export const MessageListMixin = (superClass) =>
-  class MessageListMixinClass extends KeyboardDirectionMixin(superClass) {
+  class MessageListMixinClass extends SlotStylesMixin(KeyboardDirectionMixin(superClass)) {
     static get properties() {
@@ -42,2 +44,24 @@ return {
         },
+
+        /**
+         * When set to `true`, the message text is parsed as Markdown.
+         * @type {boolean}
+         */
+        markdown: {
+          type: Boolean,
+          observer: '__markdownChanged',
+          reflectToAttribute: true,
+        },
+
+        /**
+         * When set to `true`, new messages are announced to assistive technologies using ARIA live regions.
+         * @attr {boolean} announce-messages
+         * @type {boolean}
+         */
+        announceMessages: {
+          type: Boolean,
+          value: false,
+          observer: '__announceChanged',
+          sync: true,
+        },
       };
@@ -57,5 +81,21 @@ }
       this.setAttribute('aria-relevant', 'additions');
-      this.setAttribute('role', 'log');
+      this.setAttribute('role', 'region');
     }
 
+    /** @protected */
+    get slotStyles() {
+      const tag = this.localName;
+      return [
+        `
+      ${tag} :where(vaadin-markdown > :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child) {
+        margin-top: 0;
+      }
+
+      ${tag} :where(vaadin-markdown > :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child) {
+        margin-bottom: 0;
+      }
+      `,
+      ];
+    }
+
     /**
@@ -94,3 +134,19 @@ * Override method inherited from `KeyboardDirectionMixin`
     /** @private */
+    __markdownChanged(markdown) {
+      if (markdown && !customElements.get('vaadin-markdown')) {
+        // Dynamically import the markdown component
+        import('@vaadin/markdown/src/vaadin-markdown.js')
+          // Wait until the component is defined
+          .then(() => customElements.whenDefined('vaadin-markdown'))
+          // Render the messages again
+          .then(() => this._renderMessages(this.items));
+      }
+      this._renderMessages(this.items);
+    }
+
+    /** @private */
     _renderMessages(items) {
+      // Check if markdown component is still loading
+      const loadingMarkdown = this.markdown && !customElements.get('vaadin-markdown');
+
       render(
@@ -110,3 +166,6 @@ html`
                 @focusin="${this._onMessageFocusIn}"
-                >${item.text}<vaadin-avatar slot="avatar"></vaadin-avatar
+                style="${ifDefined(loadingMarkdown ? 'visibility: hidden' : undefined)}"
+                >${this.markdown
+                  ? html`<vaadin-markdown .content=${item.text}></vaadin-markdown>`
+                  : item.text}<vaadin-avatar slot="avatar"></vaadin-avatar
               ></vaadin-message>
@@ -155,2 +214,7 @@ `,
     }
+
+    /** @private */
+    __announceChanged(announceMessages) {
+      this.ariaLive = announceMessages ? 'polite' : null;
+    }
   };

src/vaadin-message-styles.js

@@ -43,2 +43,6 @@ /**
   }
+
+  ::slotted(vaadin-markdown) {
+    white-space: normal;
+  }
 `;

theme/lumo/vaadin-message-list.d.ts

@@ -0,2 +1,3 @@
+import '@vaadin/markdown/theme/lumo/vaadin-markdown-styles.js';
 import './vaadin-message-list-styles.js';
 import '../../src/vaadin-message-list.js';

theme/lumo/vaadin-message-list.js

@@ -0,2 +1,3 @@
+import '@vaadin/markdown/theme/lumo/vaadin-markdown-styles.js';
 import './vaadin-message-list-styles.js';
 import '../../src/vaadin-message-list.js';

theme/material/vaadin-message-list.d.ts

@@ -0,2 +1,3 @@
+import '@vaadin/markdown/theme/material/vaadin-markdown-styles.js';
 import './vaadin-message-list-styles.js';
 import '../../src/vaadin-message-list.js';

theme/material/vaadin-message-list.js

@@ -0,2 +1,3 @@
+import '@vaadin/markdown/theme/material/vaadin-markdown-styles.js';
 import './vaadin-message-list-styles.js';
 import '../../src/vaadin-message-list.js';

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "24.8.0-alpha9",
+  "version": "24.8.0-beta1",
   "description-markup": "markdown",
@@ -143,5 +143,23 @@ "contributions": {
           "name": "vaadin-message-list",
-          "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n  { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n  { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list`    | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-beta1/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n  { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n  { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list`    | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-beta1/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
+              "name": "markdown",
+              "description": "When set to `true`, the message text is parsed as Markdown.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "announce-messages",
+              "description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
               "name": "theme",
@@ -170,2 +188,20 @@ "description": "The theme variants to apply to the component.",
                 }
+              },
+              {
+                "name": "markdown",
+                "description": "When set to `true`, the message text is parsed as Markdown.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "announceMessages",
+                "description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
               }
@@ -172,0 +208,0 @@ ],

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "24.8.0-alpha9",
+  "version": "24.8.0-beta1",
   "description-markup": "markdown",
@@ -61,6 +61,20 @@ "framework": "lit",
           "name": "vaadin-message-list",
-          "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n  { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n  { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list`    | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-beta1/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n  { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n  { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list`    | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-beta1/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
+              "name": "?markdown",
+              "description": "When set to `true`, the message text is parsed as Markdown.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?announceMessages",
+              "description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
               "name": ".items",
@@ -67,0 +81,0 @@ "description": "An array of objects which will be rendered as messages.\nThe message objects can have the following properties:\n```js\nArray<{\n  text: string,\n  time: string,\n  userName: string,\n  userAbbr: string,\n  userImg: string,\n  userColorIndex: number,\n  className: string,\n  theme: string\n}>\n```",

No alert changes

Improved metrics

Total package byte prevSize

64352

7.55%

Lines of code

1301

10.63%

Worsened metrics

Dependency count

10

11.11%

Number of package files

49

-3.92%

Dependency changes

• + Added

  @vaadin/markdown@24.8.0-beta1

• + Added

  @vaadin/a11y-base@24.8.0-beta1
  (transitive)

• + Added

  @vaadin/avatar@24.8.0-beta1
  (transitive)

• + Added

  @vaadin/component-base@24.8.0-beta1
  (transitive)

• + Added

  @vaadin/icon@24.8.0-beta1
  (transitive)

• + Added

  @vaadin/lit-renderer@24.8.0-beta1
  (transitive)

• + Added

  @vaadin/markdown@24.8.0-beta1
  (transitive)

• + Added

  @vaadin/overlay@24.8.0-beta1
  (transitive)

• + Added

  @vaadin/popover@24.8.0-beta1
  (transitive)

• + Added

  @vaadin/tooltip@24.8.0-beta1
  (transitive)

• + Added

  @vaadin/vaadin-lumo-styles@24.8.0-beta1
  (transitive)

• + Added

  @vaadin/vaadin-material-styles@24.8.0-beta1
  (transitive)

• + Added

  @vaadin/vaadin-themable-mixin@24.8.0-beta1
  (transitive)

• + Added

  dompurify@3.2.6
  (transitive)

• + Added

  marked@15.0.12
  (transitive)

• + Added

  style-observer@0.0.8
  (transitive)

• - Removed

  @vaadin/a11y-base@24.8.0-alpha9
  (transitive)

• - Removed

  @vaadin/avatar@24.8.0-alpha9
  (transitive)

• - Removed

  @vaadin/component-base@24.8.0-alpha9
  (transitive)

• - Removed

  @vaadin/icon@24.8.0-alpha9
  (transitive)

• - Removed

  @vaadin/lit-renderer@24.8.0-alpha9
  (transitive)

• - Removed

  @vaadin/overlay@24.8.0-alpha9
  (transitive)

• - Removed

  @vaadin/popover@24.8.0-alpha9
  (transitive)

• - Removed

  @vaadin/tooltip@24.8.0-alpha9
  (transitive)

• - Removed

  @vaadin/vaadin-lumo-styles@24.8.0-alpha9
  (transitive)

• - Removed

  @vaadin/vaadin-material-styles@24.8.0-alpha9
  (transitive)

• - Removed

  @vaadin/vaadin-themable-mixin@24.8.0-alpha9
  (transitive)

• Updated

  @vaadin/a11y-base@24.8.0-beta1

• Updated

  @vaadin/avatar@24.8.0-beta1

• Updated

  @vaadin/component-base@24.8.0-beta1

• Updated

  @vaadin/vaadin-lumo-styles@24.8.0-beta1

• Updated

  @vaadin/vaadin-material-styles@24.8.0-beta1

• Updated

  @vaadin/vaadin-themable-mixin@24.8.0-beta1