@vaadin/vaadin-avatar - npm Package Compare versions

Comparing version 1.0.0-alpha8 to 1.0.0-alpha9

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-avatar",
-  "version": "1.0.0-alpha8",
+  "version": "1.0.0-alpha9",
   "main": "vaadin-avatar-group.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-avatar-group.d.ts

@@ -41,9 +41,16 @@ /**
  *
- * ```html
- *   <vaadin-avatar-group>
- *     <vaadin-avatar abbr="YY"></vaadin-avatar>
- *     <vaadin-avatar abbr="SK"></vaadin-avatar>
- *     <vaadin-avatar abbr="JJ"></vaadin-avatar>
- *   </vaadin-avatar-group>
+ * To create the avatar group, first add the component to the page:
+ *
  * ```
+ * <vaadin-avatar-group></vaadin-avatar-group>
+ * ```
+ *
+ * And then use [`items`](#/elements/vaadin-avatar-group#property-items) property to initialize the structure:
+ *
+ * ```
+ * document.querySelector('vaadin-avatar-group').items = [
+ *   {name: 'John Doe'},
+ *   {abbr: 'AB'}
+ * ];
+ * ```
  */
@@ -57,3 +64,23 @@ declare class AvatarGroupElement extends
   /**
-   * An array containing the items which will be stamped as avatars
+   * An array containing the items which will be stamped as avatars.
+   *
+   * The items objects allow to configure [`name`](#/elements/vaadin-avatar#property-name),
+   * [`abbr`](#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)
+   * and [`colorIndex`](#/elements/vaadin-avatar#property-colorIndex) properties on the
+   * stamped avatars.
+   *
+   * #### Example
+   *
+   * ```js
+   * group.items = [
+   *   {
+   *     name: 'User name',
+   *     img: 'url-to-image.png'
+   *   },
+   *   {
+   *     abbr: 'JD',
+   *     colorIndex: 1
+   *   },
+   * ];
+   * ```
    */
@@ -64,6 +91,6 @@ items: AvatarGroupItem[]|undefined;
    * The maximum number of avatars to display. By default, all the avatars are displayed.
-   * When max is set, the overflowing avatars are grouped into one avatar with a dropdown.
-   * Setting 0 or 1 has no effect so there are always at least two avatars visible.
+   * When _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with
+   * a dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.
    */
-  max: number|null|undefined;
+  maxItemsVisible: number|null|undefined;
 
@@ -70,0 +97,0 @@ /**

src/vaadin-avatar-group.js

@@ -28,10 +28,17 @@ /**
  *
- * ```html
- *   <vaadin-avatar-group>
- *     <vaadin-avatar abbr="YY"></vaadin-avatar>
- *     <vaadin-avatar abbr="SK"></vaadin-avatar>
- *     <vaadin-avatar abbr="JJ"></vaadin-avatar>
- *   </vaadin-avatar-group>
+ * To create the avatar group, first add the component to the page:
+ *
  * ```
+ * <vaadin-avatar-group></vaadin-avatar-group>
+ * ```
  *
+ * And then use [`items`](#/elements/vaadin-avatar-group#property-items) property to initialize the structure:
+ *
+ * ```
+ * document.querySelector('vaadin-avatar-group').items = [
+ *   {name: 'John Doe'},
+ *   {abbr: 'AB'}
+ * ];
+ * ```
+ *
  * @extends PolymerElement
@@ -88,6 +95,6 @@ * @mixes ElementMixin
     <div id="container" part="container">
-      <template id="items" is="dom-repeat" items="[[__computeItems(items.*, __itemsInView, max)]]">
+      <template id="items" is="dom-repeat" items="[[__computeItems(items.*, __itemsInView, maxItemsVisible)]]">
         <vaadin-avatar name="[[item.name]]" abbr="[[item.abbr]]" img="[[item.img]]" part="avatar" theme\$="[[theme]]" i18n="[[i18n]]" color-index="[[item.colorIndex]]"></vaadin-avatar>
       </template>
-      <vaadin-avatar id="overflow" part="avatar" hidden\$="[[__computeMoreHidden(items.length, __itemsInView, __maxReached)]]" abbr="[[__computeMore(items.length, __itemsInView, max)]]" theme\$="[[theme]]" on-click="_onOverflowClick" on-keydown="_onOverflowKeyDown" aria-haspopup="listbox"></vaadin-avatar>
+      <vaadin-avatar id="overflow" part="avatar" hidden\$="[[__computeMoreHidden(items.length, __itemsInView, __maxReached)]]" abbr="[[__computeMore(items.length, __itemsInView, maxItemsVisible)]]" theme\$="[[theme]]" on-click="_onOverflowClick" on-keydown="_onOverflowKeyDown" aria-haspopup="listbox"></vaadin-avatar>
     </div>
@@ -97,3 +104,3 @@ <vaadin-avatar-group-overlay id="overlay" opened="{{_opened}}" on-vaadin-overlay-close="_onVaadinOverlayClose">
         <vaadin-avatar-group-list-box on-keydown="_onListKeyDown">
-          <template is="dom-repeat" items="[[__computeExtraItems(items.*, __itemsInView, max)]]">
+          <template is="dom-repeat" items="[[__computeExtraItems(items.*, __itemsInView, maxItemsVisible)]]">
             <vaadin-item theme="avatar-group-item" role="option">
@@ -115,3 +122,3 @@ <vaadin-avatar name="[[item.name]]" abbr="[[item.abbr]]" img="[[item.img]]" i18n="[[i18n]]" part="avatar" theme\$="[[theme]]" color-index="[[item.colorIndex]]" tabindex="-1" aria-hidden="true"></vaadin-avatar>
   static get version() {
-    return '1.0.0-alpha8';
+    return '1.0.0-alpha9';
   }
@@ -122,3 +129,24 @@
       /**
-       * An array containing the items which will be stamped as avatars
+       * An array containing the items which will be stamped as avatars.
+       *
+       * The items objects allow to configure [`name`](#/elements/vaadin-avatar#property-name),
+       * [`abbr`](#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)
+       * and [`colorIndex`](#/elements/vaadin-avatar#property-colorIndex) properties on the
+       * stamped avatars.
+       *
+       * #### Example
+       *
+       * ```js
+       * group.items = [
+       *   {
+       *     name: 'User name',
+       *     img: 'url-to-image.png'
+       *   },
+       *   {
+       *     abbr: 'JD',
+       *     colorIndex: 1
+       *   },
+       * ];
+       * ```
+       *
        * @type {!Array<!AvatarGroupItem> | undefined}
@@ -132,6 +160,6 @@ */
        * The maximum number of avatars to display. By default, all the avatars are displayed.
-       * When max is set, the overflowing avatars are grouped into one avatar with a dropdown.
-       * Setting 0 or 1 has no effect so there are always at least two avatars visible.
+       * When _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with
+       * a dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.
        */
-      max: {
+      maxItemsVisible: {
         type: Number
@@ -187,3 +215,3 @@ },
         type: Boolean,
-        computed: '__computeMaxReached(items.length, max)'
+        computed: '__computeMaxReached(items.length, maxItemsVisible)'
       },
@@ -208,3 +236,3 @@
     return [
-      '__computeMoreTitle(items.length, __itemsInView, max)',
+      '__computeMoreTitle(items.length, __itemsInView, maxItemsVisible)',
       '__itemsChanged(items.splices, items.*)',
@@ -318,5 +346,5 @@ '__i18nItemsChanged(i18n.*, items.length)'
   /** @private */
-  __computeItems(arr, itemsInView, max) {
+  __computeItems(arr, itemsInView, maxItemsVisible) {
     const items = arr.base || [];
-    const limit = this.__getLimit(items.length, itemsInView, max);
+    const limit = this.__getLimit(items.length, itemsInView, maxItemsVisible);
     return limit ? items.slice(0, limit) : items;
@@ -326,5 +354,5 @@ }
   /** @private */
-  __computeExtraItems(arr, itemsInView, max) {
+  __computeExtraItems(arr, itemsInView, maxItemsVisible) {
     const items = arr.base || [];
-    const limit = this.__getLimit(items.length, itemsInView, max);
+    const limit = this.__getLimit(items.length, itemsInView, maxItemsVisible);
     return limit ? items.slice(limit) : items;
@@ -334,9 +362,9 @@ }
   /** @private */
-  __computeMaxReached(items, max) {
-    return max != null && items > this.__getMax(max);
+  __computeMaxReached(items, maxItemsVisible) {
+    return maxItemsVisible != null && items > this.__getMax(maxItemsVisible);
   }
 
   /** @private */
-  __computeMore(items, itemsInView, max) {
-    return max != null ? `+${items - this.__getMax(max) + 1}` : `+${items - itemsInView}`;
+  __computeMore(items, itemsInView, maxItemsVisible) {
+    return `+${items - this.__getLimit(items, itemsInView, maxItemsVisible)}`;
   }
@@ -350,4 +378,4 @@
   /** @private */
-  __computeMoreTitle(items, itemsInView, max) {
-    const limit = this.__getLimit(items, itemsInView, max);
+  __computeMoreTitle(items, itemsInView, maxItemsVisible) {
+    const limit = this.__getLimit(items, itemsInView, maxItemsVisible);
     if (limit == null) {
@@ -366,7 +394,7 @@ return;
   /** @private */
-  __getLimit(items, itemsInView, max) {
+  __getLimit(items, itemsInView, maxItemsVisible) {
     let limit = null;
     // handle max set to 0 or 1
-    const adjustedMax = this.__getMax(max);
-    if (max != null && adjustedMax < items) {
+    const adjustedMax = this.__getMax(maxItemsVisible);
+    if (maxItemsVisible != null && adjustedMax < items) {
       limit = adjustedMax - 1;
@@ -376,8 +404,9 @@ } else if (itemsInView && itemsInView < items) {
     }
-    return limit;
+
+    return Math.min(limit, this.__calculateAvatarsFitWidth());
   }
 
   /** @private */
-  __getMax(max) {
-    return Math.max(max, 2);
+  __getMax(maxItemsVisible) {
+    return Math.max(maxItemsVisible, 2);
   }
@@ -475,14 +504,4 @@
 
-    // assume all the avatars have the same width
-    const avatarWidth = avatars[0].clientWidth;
+    let result = this.__calculateAvatarsFitWidth();
 
-    // take negative margin into account
-    const {marginLeft, marginRight} = getComputedStyle(avatars[1]);
-
-    const offset = this.getAttribute('dir') == 'rtl' ?
-      parseInt(marginRight, 0) - parseInt(marginLeft, 0) :
-      parseInt(marginLeft, 0) - parseInt(marginRight, 0);
-
-    let result = Math.floor((this.$.container.offsetWidth - avatarWidth) / (avatarWidth + offset));
-
     // only show overlay if two or more avatars don't fit
@@ -504,2 +523,23 @@ if (result === items.length - 1) {
 
+  /** @private **/
+  __calculateAvatarsFitWidth() {
+    if (!this.shadowRoot || this._avatars.length < 2) {
+      return;
+    }
+
+    const avatars = this._avatars;
+
+    // assume all the avatars have the same width
+    const avatarWidth = avatars[0].clientWidth;
+
+    // take negative margin into account
+    const {marginLeft, marginRight} = getComputedStyle(avatars[1]);
+
+    const offset = this.getAttribute('dir') == 'rtl' ?
+      parseInt(marginRight, 0) - parseInt(marginLeft, 0) :
+      parseInt(marginLeft, 0) - parseInt(marginRight, 0);
+
+    return Math.floor((this.$.container.offsetWidth - avatarWidth) / (avatarWidth + offset));
+  }
+
   /** @private */
@@ -506,0 +546,0 @@ __setPosition() {

src/vaadin-avatar.d.ts

@@ -52,3 +52,3 @@ /**
   /**
-   * Color index used for avatar border.
+   * Color index used for avatar background.
    */
@@ -55,0 +55,0 @@ colorIndex: number|null|undefined;

src/vaadin-avatar.js

@@ -121,3 +121,3 @@ /**
   static get version() {
-    return '1.0.0-alpha8';
+    return '1.0.0-alpha9';
   }
@@ -154,3 +154,3 @@
       /**
-       * Color index used for avatar border.
+       * Color index used for avatar background.
        */
@@ -245,10 +245,24 @@ colorIndex: {
     if (index != null) {
-      this.setAttribute('has-color-index', '');
-      const color = `var(--vaadin-user-color-${index})`;
-      if (window.ShadyCSS && !window.ShadyCSS.nativeCss) {
-        window.ShadyCSS.styleSubtree(this, {
-          '--vaadin-avatar-user-color': color
-        });
+      const prop = `--vaadin-user-color-${index}`;
+      const isShady = window.ShadyCSS && !window.ShadyCSS.nativeCss;
+
+      // check if custom CSS property is defined
+      const isValid = Boolean(
+        isShady ?
+          window.ShadyCSS.getComputedStyleValue(document.documentElement, prop) :
+          getComputedStyle(document.documentElement).getPropertyValue(prop)
+      );
+
+      if (isValid) {
+        const color = `var(${prop})`;
+        this.setAttribute('has-color-index', '');
+        if (isShady) {
+          window.ShadyCSS.styleSubtree(this, {
+            '--vaadin-avatar-user-color': color
+          });
+        } else {
+          this.style.setProperty('--vaadin-avatar-user-color', color);
+        }
       } else {
-        this.style.setProperty('--vaadin-avatar-user-color', color);
+        this.removeAttribute('has-color-index');
       }
@@ -255,0 +269,0 @@ } else {

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

66860

increased by3.79%

Lines of code

1347

increased by5.9%

No dependency changes