@vaadin/avatar - npm Package Compare versions

Comparing version 23.2.0 to 23.3.0-alpha1

package.json

 {
   "name": "@vaadin/avatar",
-  "version": "23.2.0",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
@@ -40,9 +40,10 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.2.0",
-    "@vaadin/item": "^23.2.0",
-    "@vaadin/list-box": "^23.2.0",
-    "@vaadin/vaadin-lumo-styles": "^23.2.0",
-    "@vaadin/vaadin-material-styles": "^23.2.0",
-    "@vaadin/vaadin-overlay": "^23.2.0",
-    "@vaadin/vaadin-themable-mixin": "^23.2.0"
+    "@vaadin/component-base": "23.3.0-alpha1",
+    "@vaadin/item": "23.3.0-alpha1",
+    "@vaadin/list-box": "23.3.0-alpha1",
+    "@vaadin/tooltip": "23.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-overlay": "23.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
   },
@@ -58,3 +59,3 @@ "devDependencies": {
   ],
-  "gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

src/vaadin-avatar.d.ts

@@ -6,2 +6,3 @@ /**
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -41,3 +42,3 @@ import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
  */
-declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(HTMLElement))) {
+declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
   /**
@@ -56,3 +57,3 @@ * The path to the image
    * Full name of the user
-   * used for the title of the avatar.
+   * used for the tooltip of the avatar.
    */
@@ -63,2 +64,3 @@ name: string | null | undefined;
    * Color index used for avatar background.
+   * @attr {number} color-index
    */
@@ -76,3 +78,3 @@ colorIndex: number | null | undefined;
    * {
-   *   // Translation of the anonymous user avatar title.
+   *   // Translation of the anonymous user avatar tooltip.
    *   anonymous: 'anonymous'
@@ -83,2 +85,10 @@ * }
   i18n: AvatarI18n;
+
+  /**
+   * When true, the avatar has tooltip shown on hover and focus.
+   * The tooltip text is based on the `name` and `abbr` properties.
+   * When neither is provided, `i18n.anonymous` is used instead.
+   * @attr {boolean} with-tooltip
+   */
+  withTooltip: boolean;
 }
@@ -85,0 +95,0 @@

src/vaadin-avatar.js

@@ -8,4 +8,6 @@ /**
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -40,2 +42,3 @@
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes FocusMixin
@@ -45,3 +48,3 @@ * @mixes ElementMixin
  */
-class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class Avatar extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get template() {
@@ -126,2 +129,4 @@ return html`
       </svg>
+
+      <slot name="tooltip"></slot>
     `;
@@ -156,3 +161,3 @@ }
        * Full name of the user
-       * used for the title of the avatar.
+       * used for the tooltip of the avatar.
        */
@@ -166,2 +171,3 @@ name: {
        * Color index used for avatar background.
+       * @attr {number} color-index
        */
@@ -182,3 +188,3 @@ colorIndex: {
        * {
-       *   // Translation of the anonymous user avatar title.
+       *   // Translation of the anonymous user avatar tooltip.
        *   anonymous: 'anonymous'
@@ -200,2 +206,14 @@ * }
 
+      /**
+       * When true, the avatar has tooltip shown on hover and focus.
+       * The tooltip text is based on the `name` and `abbr` properties.
+       * When neither is provided, `i18n.anonymous` is used instead.
+       * @attr {boolean} with-tooltip
+       */
+      withTooltip: {
+        type: Boolean,
+        value: false,
+        observer: '__withTooltipChanged',
+      },
+
       /** @private */
@@ -209,2 +227,5 @@ __imgVisible: Boolean,
       __abbrVisible: Boolean,
+
+      /** @private */
+      __tooltipNode: Object,
     };
@@ -214,3 +235,7 @@ }
   static get observers() {
-    return ['__imgOrAbbrOrNameChanged(img, abbr, name)', '__i18nChanged(i18n.*)'];
+    return [
+      '__imgOrAbbrOrNameChanged(img, abbr, name)',
+      '__i18nChanged(i18n.*)',
+      '__tooltipChanged(__tooltipNode, name, abbr)',
+    ];
   }
@@ -224,7 +249,2 @@
 
-    // Should set `anonymous` if name / abbr is not provided
-    if (!this.name && !this.abbr) {
-      this.__setTitle(this.name);
-    }
-
     this.setAttribute('role', 'button');
@@ -235,2 +255,10 @@
     }
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+
+    // Should set `anonymous` if name / abbr is not provided
+    if (!this.name && !this.abbr) {
+      this.__setTooltip();
+    }
   }
@@ -268,3 +296,2 @@
     if (abbr && abbr !== this.__generatedAbbr) {
-      this.__setTitle(name ? `${name} (${abbr})` : abbr);
       return;
@@ -281,11 +308,36 @@ }
     }
+  }
 
-    this.__setTitle(name);
+  /** @private */
+  __tooltipChanged(tooltipNode, name, abbr) {
+    if (tooltipNode) {
+      if (abbr && abbr !== this.__generatedAbbr) {
+        this.__setTooltip(name ? `${name} (${abbr})` : abbr);
+      } else {
+        this.__setTooltip(name);
+      }
+    }
   }
 
   /** @private */
+  __withTooltipChanged(withTooltip, oldWithTooltip) {
+    if (withTooltip) {
+      // Create and attach tooltip
+      const tooltipNode = document.createElement('vaadin-tooltip');
+      tooltipNode.setAttribute('slot', 'tooltip');
+      this.appendChild(tooltipNode);
+      this.__tooltipNode = tooltipNode;
+    } else if (oldWithTooltip) {
+      // Cleanup and detach tooltip
+      this.__tooltipNode.target = null;
+      this.__tooltipNode.remove();
+      this.__tooltipNode = null;
+    }
+  }
+
+  /** @private */
   __i18nChanged(i18n) {
     if (i18n.base && i18n.base.anonymous) {
-      if (this.__oldAnonymous && this.getAttribute('title') === this.__oldAnonymous) {
-        this.__setTitle();
+      if (this.__oldAnonymous && this.__tooltipNode && this.__tooltipNode.text === this.__oldAnonymous) {
+        this.__setTooltip();
       }
@@ -305,7 +357,6 @@
   /** @private */
-  __setTitle(title) {
-    if (title) {
-      this.setAttribute('title', title);
-    } else {
-      this.setAttribute('title', this.i18n.anonymous);
+  __setTooltip(tooltip) {
+    const tooltipNode = this.__tooltipNode;
+    if (tooltipNode) {
+      tooltipNode.text = tooltip || this.i18n.anonymous;
     }
@@ -312,0 +363,0 @@ }

theme/lumo/vaadin-avatar.js

@@ -0,2 +1,3 @@
+import '@vaadin/tooltip/theme/lumo/vaadin-tooltip.js';
 import './vaadin-avatar-styles.js';
 import '../../src/vaadin-avatar.js';

theme/material/vaadin-avatar.js

@@ -0,2 +1,3 @@
+import '@vaadin/tooltip/theme/material/vaadin-tooltip.js';
 import './vaadin-avatar-styles.js';
 import '../../src/vaadin-avatar.js';

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar",
-  "version": "23.2.0",
+  "version": "23.3.0-alpha1",
   "description-markup": "markdown",
@@ -37,3 +37,3 @@ "contributions": {
               "name": "name",
-              "description": "Full name of the user\nused for the title of the avatar.",
+              "description": "Full name of the user\nused for the tooltip of the avatar.",
               "value": {
@@ -59,2 +59,13 @@ "type": [
             {
+              "name": "with-tooltip",
+              "description": "When true, the avatar has tooltip shown on hover and focus.\nThe tooltip text is based on the `name` and `abbr` properties.\nWhen neither is provided, `i18n.anonymous` is used instead.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
               "name": "theme",
@@ -97,3 +108,3 @@ "description": "The theme variants to apply to the component.",
                 "name": "name",
-                "description": "Full name of the user\nused for the title of the avatar.",
+                "description": "Full name of the user\nused for the tooltip of the avatar.",
                 "value": {
@@ -120,3 +131,3 @@ "type": [
                 "name": "i18n",
-                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar title.\n  anonymous: 'anonymous'\n}\n```",
+                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
                 "value": {
@@ -127,2 +138,13 @@ "type": [
                 }
+              },
+              {
+                "name": "withTooltip",
+                "description": "When true, the avatar has tooltip shown on hover and focus.\nThe tooltip text is based on the `name` and `abbr` properties.\nWhen neither is provided, `i18n.anonymous` is used instead.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
@@ -129,0 +151,0 @@ ],

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar",
-  "version": "23.2.0",
+  "version": "23.3.0-alpha1",
   "description-markup": "markdown",
@@ -23,2 +23,9 @@ "framework": "lit",
             {
+              "name": "?withTooltip",
+              "description": "When true, the avatar has tooltip shown on hover and focus.\nThe tooltip text is based on the `name` and `abbr` properties.\nWhen neither is provided, `i18n.anonymous` is used instead.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
               "name": ".img",
@@ -39,3 +46,3 @@ "description": "The path to the image",
               "name": ".name",
-              "description": "Full name of the user\nused for the title of the avatar.",
+              "description": "Full name of the user\nused for the tooltip of the avatar.",
               "value": {
@@ -54,3 +61,3 @@ "kind": "expression"
               "name": ".i18n",
-              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar title.\n  anonymous: 'anonymous'\n}\n```",
+              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
               "value": {
@@ -57,0 +64,0 @@ "kind": "expression"

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

41114

increased by9.42%

Lines of code

779

increased by12.41%

Worsened metrics

Dependency count

9

increased by12.5%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@vaadin/tooltip@23.3.0-alpha1

• + Added@vaadin/component-base@23.3.0-alpha1(transitive)

• + Added@vaadin/icon@23.3.0-alpha1(transitive)

• + Added@vaadin/item@23.3.0-alpha1(transitive)

• + Added@vaadin/list-box@23.3.0-alpha1(transitive)

• + Added@vaadin/tooltip@23.3.0-alpha1(transitive)

• + Added@vaadin/vaadin-list-mixin@23.3.0-alpha1(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.3.0-alpha1(transitive)

• + Added@vaadin/vaadin-material-styles@23.3.0-alpha1(transitive)

• + Added@vaadin/vaadin-overlay@23.3.0-alpha1(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.3.0-alpha1(transitive)

• - Removed@vaadin/component-base@23.5.11(transitive)

• - Removed@vaadin/icon@23.5.11(transitive)

• - Removed@vaadin/item@23.5.11(transitive)

• - Removed@vaadin/list-box@23.5.11(transitive)

• - Removed@vaadin/overlay@23.5.11(transitive)

• - Removed@vaadin/vaadin-list-mixin@23.5.11(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.5.11(transitive)

• - Removed@vaadin/vaadin-material-styles@23.5.11(transitive)

• - Removed@vaadin/vaadin-overlay@23.5.11(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.5.11(transitive)

• Updated@vaadin/component-base@23.3.0-alpha1

• Updated@vaadin/item@23.3.0-alpha1

• Updated@vaadin/list-box@23.3.0-alpha1

• Updated@vaadin/vaadin-lumo-styles@23.3.0-alpha1

• Updated@vaadin/vaadin-material-styles@23.3.0-alpha1

• Updated@vaadin/vaadin-overlay@23.3.0-alpha1

• Updated@vaadin/vaadin-themable-mixin@23.3.0-alpha1