@vaadin/message-list - npm Package Compare versions

Comparing version 22.0.0-beta1 to 22.0.0-beta2

package.json

 {
   "name": "@vaadin/message-list",
-  "version": "22.0.0-beta1",
+  "version": "22.0.0-beta2",
   "publishConfig": {
@@ -38,7 +38,7 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/avatar": "22.0.0-beta1",
-    "@vaadin/component-base": "22.0.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-material-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
+    "@vaadin/avatar": "22.0.0-beta2",
+    "@vaadin/component-base": "22.0.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-beta2",
+    "@vaadin/vaadin-material-styles": "22.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-beta2"
   },
@@ -50,3 +50,3 @@ "devDependencies": {
   },
-  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
+  "gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4"
 }

README.md

@@ -5,3 +5,3 @@ # @vaadin/message-list
 
-[Live Demo ↗](https://vaadin.com/docs/latest/ds/components/message-list)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/message-list)
 
@@ -27,3 +27,3 @@ ```html
 ```sh
-npm i @vaadin/message-list --save
+npm i @vaadin/message-list
 ```
@@ -39,5 +39,4 @@
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes),
-Lumo and Material. The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/message-list/vaadin-message-list.js)
-of the package uses the Lumo theme.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/message-list/vaadin-message-list.js) of the package uses the Lumo theme.
 
@@ -62,2 +61,6 @@ To use the Material theme, import the component from the `theme/material` folder:
 
+## Contributing
+
+Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+
 ## License
@@ -67,3 +70,3 @@
 
-Vaadin collects development time usage statistics to improve this product.
+Vaadin collects usage statistics at development time to improve this product.
 For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

src/vaadin-message-avatar.js

@@ -7,3 +7,3 @@ /**
 import { Avatar } from '@vaadin/avatar/src/vaadin-avatar.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -10,0 +10,0 @@ registerStyles(

src/vaadin-message-list.js

@@ -6,8 +6,8 @@ /**
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import '@polymer/polymer/lib/elements/dom-repeat.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { microTask } from '@vaadin/component-base/src/async.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import './vaadin-message.js';
+import { Message } from './vaadin-message.js';
 
@@ -99,3 +99,3 @@ /**
             role="listitem"
-            on-focus="_handleFocusEvent"
+            on-focusin="_handleFocusEvent"
             >[[item.text]]</vaadin-message
@@ -193,7 +193,6 @@ >
   _handleFocusEvent(e) {
-    const target = e
-      .composedPath()
-      .filter((elem) => elem.nodeType === Node.ELEMENT_NODE && elem.tagName.toLowerCase() === 'vaadin-message')[0];
+    const target = e.composedPath().find((node) => node instanceof Message);
     this._setTabIndexesByMessage(target);
   }
+
   /**
@@ -200,0 +199,0 @@ * @param {number} idx

src/vaadin-message.d.ts

@@ -7,2 +7,3 @@ /**
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -31,2 +32,9 @@
  *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `focus-ring` | Set when the message is focused using the keyboard.
+ * `focused`    | Set when the message is focused.
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
@@ -41,3 +49,3 @@ *
  */
-declare class Message extends ThemableMixin(ElementMixin(HTMLElement)) {
+declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   /**
@@ -44,0 +52,0 @@ * Time of sending the message. It is rendered as-is to the part='time' slot,

src/vaadin-message.js

@@ -6,6 +6,7 @@ /**
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import './vaadin-message-avatar.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import './vaadin-message-avatar.js';
 
@@ -33,2 +34,9 @@ /**
  *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `focus-ring` | Set when the message is focused using the keyboard.
+ * `focused`    | Set when the message is focused.
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
@@ -44,6 +52,7 @@ *
  * @extends HTMLElement
+ * @mixes FocusMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Message extends ElementMixin(ThemableMixin(PolymerElement)) {
+class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get properties() {
@@ -169,35 +178,2 @@ return {
   }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    // Handle focus
-    this.addEventListener('focus', () => this._setFocused(true), true);
-    this.addEventListener('blur', () => this._setFocused(false), true);
-    this.addEventListener('mousedown', () => {
-      this._mousedown = true;
-      const mouseUpListener = () => {
-        this._mousedown = false;
-        document.removeEventListener('mouseup', mouseUpListener);
-      };
-      document.addEventListener('mouseup', mouseUpListener);
-    });
-  }
-
-  /**
-   * @param {boolean} focused
-   * @protected
-   */
-  _setFocused(focused) {
-    if (focused) {
-      this.setAttribute('focused', '');
-      if (!this._mousedown) {
-        this.setAttribute('focus-ring', '');
-      }
-    } else {
-      this.removeAttribute('focused');
-      this.removeAttribute('focus-ring');
-    }
-  }
 }
@@ -204,0 +180,0 @@

theme/lumo/vaadin-message-avatar-styles.js

@@ -1,3 +0,3 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/avatar/theme/lumo/vaadin-avatar-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -4,0 +4,0 @@ registerStyles(

theme/lumo/vaadin-message-list-styles.js

@@ -1,2 +0,1 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
@@ -7,3 +6,4 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import './vaadin-message-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles('vaadin-message-list', css``, { moduleId: 'lumo-message-list' });

theme/lumo/vaadin-message-styles.js

@@ -1,2 +0,1 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
@@ -8,2 +7,3 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import './vaadin-message-avatar-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -10,0 +10,0 @@ registerStyles(

theme/material/vaadin-message-avatar-styles.js

@@ -1,3 +0,3 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/avatar/theme/material/vaadin-avatar-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -4,0 +4,0 @@ registerStyles(

theme/material/vaadin-message-list-styles.js

@@ -1,5 +0,5 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import './vaadin-message-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -6,0 +6,0 @@ registerStyles(

theme/material/vaadin-message-styles.js

@@ -1,5 +0,5 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import './vaadin-message-avatar-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -6,0 +6,0 @@ registerStyles(

No alert changes

Improved metrics

Total package byte prevSize

37981

0.2%

Number of lines in readme file

68

4.62%

Worsened metrics

Lines of code

744

-1.98%

Dependency changes

• + Added

  @open-wc/dedupe-mixin@1.4.0
  (transitive)

• + Added

  @vaadin/avatar@22.0.0-beta2
  (transitive)

• + Added

  @vaadin/component-base@22.0.0-beta2
  (transitive)

• + Added

  @vaadin/icon@22.0.0-beta2
  (transitive)

• + Added

  @vaadin/item@22.0.0-beta2
  (transitive)

• + Added

  @vaadin/list-box@22.0.0-beta2
  (transitive)

• + Added

  @vaadin/vaadin-list-mixin@22.0.0-beta2
  (transitive)

• + Added

  @vaadin/vaadin-lumo-styles@22.0.0-beta2
  (transitive)

• + Added

  @vaadin/vaadin-material-styles@22.0.0-beta2
  (transitive)

• + Added

  @vaadin/vaadin-overlay@22.0.0-beta2
  (transitive)

• + Added

  @vaadin/vaadin-themable-mixin@22.0.0-beta2
  (transitive)

• - Removed

  @vaadin/avatar@22.0.0-beta1
  (transitive)

• - Removed

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

• - Removed

  @vaadin/icon@22.0.0-beta1
  (transitive)

• - Removed

  @vaadin/item@22.0.0-beta1
  (transitive)

• - Removed

  @vaadin/list-box@22.0.0-beta1
  (transitive)

• - Removed

  @vaadin/vaadin-list-mixin@22.0.0-beta1
  (transitive)

• - Removed

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

• - Removed

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

• - Removed

  @vaadin/vaadin-overlay@22.0.0-beta1
  (transitive)

• - Removed

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

• Updated

  @vaadin/avatar@22.0.0-beta2

• Updated

  @vaadin/component-base@22.0.0-beta2

• Updated

  @vaadin/vaadin-lumo-styles@22.0.0-beta2

• Updated

  @vaadin/vaadin-material-styles@22.0.0-beta2

• Updated

  @vaadin/vaadin-themable-mixin@22.0.0-beta2