fix(avatar): optimize code

src/avatar/README.en-US.md

@@ -7,14 +7,15 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 alt | String | - | show it when url is not valid | N
 badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
-custom-style `v0.25.0` | String | - | \- | N
+bordered | Boolean | false | \- | N
+custom-style | String | - | `0.25.0` | N
 external-classes | Array | - | `['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content']` | N
 hide-on-load-failed | Boolean | false | hide image when loading image failed | N
-icon | String / Slot | - | \- | N
+icon | String / Object | - | \- | N
 image | String | - | images url | N
 image-props | Object | - | \- | N
 shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
-size | String | - | size | N
+size | String | medium | size | N
 
 ### Avatar Events
 
@@ -28,7 +29,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 cascading | String | 'right-up' | multiple images cascading。options：left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
 collapse-avatar | String / Slot | - | \- | N
-custom-style `v0.25.0` | String | - | \- | N
+custom-style | String | - | `0.25.0` | N
 external-classes | Array | - | `['t-class', 't-class-image', 't-class-content']` | N
 max | Number | - | \- | N
 size | String | medium | size | N

src/avatar/README.md

@@ -61,15 +61,15 @@ isComponent: true
 -- | -- | -- | -- | --
 alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
 badge-props | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
-custom-style `v0.25.0` | String | - | 自定义组件样式 | N
+bordered | Boolean | false | 是否显示外边框 | N
+custom-style | String | - | `0.25.0`。自定义组件样式 | N
 external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content']` | N
 hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
 icon | String / Object | - | 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
 image | String | - | 图片地址 | N
 image-props | Object | - | 透传至 Image 组件 | N
 shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
-size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等，默认为 large | N
-bordered | Boolean | false | 是否显示外边框 | N
+size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等 | N
 
 ### Avatar Events
 
@@ -83,7 +83,7 @@ error | \- | 图片加载失败时触发
 -- | -- | -- | -- | --
 cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
 collapse-avatar | String / Slot | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` | N
-custom-style `v0.25.0` | String | - | 自定义组件样式 | N
+custom-style | String | - | `0.25.0`。自定义组件样式 | N
 external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-content']` | N
 max | Number | - | 能够同时显示的最多头像数量 | N
 size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N

src/avatar/__test__/__snapshots__/demo.test.js.snap

@@ -29,14 +29,6 @@ exports[`Avatar Avatar action demo works fine 1`] = `
       bordered="{{true}}"
       image="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png"
     />
-    <t-avatar
-      ariaLabel="添加"
-      ariaRole="button"
-      bordered="{{true}}"
-      icon="user-add"
-      slot="collapseAvatar"
-      bind:tap="onAddTap"
-    />
   </t-avatar-group>
 </action>
 `;

src/avatar/__test__/index.test.js

@@ -36,7 +36,7 @@ describe('Avatar & Avatar Groups', () => {
       comp.attach(document.createElement('parent-wrapper'));
 
       const $avatar = comp.querySelector('.text-avatar >>> .t-avatar');
-      expect($avatar.dom.getAttribute('class').includes('t-size-m')).toBeTruthy();
+      expect($avatar.dom.getAttribute('class').includes('t-avatar--medium')).toBeTruthy();
 
       const $text = comp.querySelector('.text-avatar >>> .t-avatar__text');
       expect($text.dom.textContent).toBe('A');
@@ -66,7 +66,7 @@ describe('Avatar & Avatar Groups', () => {
 
       const $group = comp.querySelectorAll('.avatar-group >>> .t-avatar');
       $group.forEach((v) => {
-        expect(v.dom.getAttribute('class').includes('t-size-s')).toBeTruthy();
+        expect(v.dom.getAttribute('class').includes('t-avatar--medium')).toBeTruthy();
       });
     });
 
@@ -77,7 +77,7 @@ describe('Avatar & Avatar Groups', () => {
       const $group = comp.querySelectorAll('.avatar-group-size >>> .t-avatar');
       $group.forEach((v) => {
         if (v.querySelector('.t-image')) {
-          expect(v.dom.getAttribute('class').includes('t-size-l')).toBeTruthy();
+          expect(v.dom.getAttribute('class').includes('t-avatar--large')).toBeTruthy();
         }
       });
     });

src/avatar/_example/action/index.wxml

@@ -1,4 +1,3 @@
 <t-avatar-group max="5">
   <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" bordered />
-  <t-avatar slot="collapseAvatar" icon="user-add" bindtap="onAddTap" bordered aria-role="button" aria-label="添加" />
 </t-avatar-group>

src/avatar/avatar-group.less

@@ -66,8 +66,4 @@
     display: block;
     float: left;
   }
-
-  .@{prefix}-is-hidden {
-    display: none;
-  }
 }

src/avatar/avatar-group.ts

@@ -29,110 +29,57 @@ export default class AvatarGroup extends SuperComponent {
     },
   };
 
-  ready() {
-    this.setData({
-      length: this.$children.length,
-    });
-    this.handleHasChild(this.$children, this.data.hasChild);
-    this.handleChildSlot(this.properties.max, this.$children, this.handleChildMax);
-    this.handleChildSize(this.properties.size, this.$children);
-    this.handleChildCascading(this.properties.cascading, this.$children);
-  }
-
   lifetimes = {
     attached() {
       this.setClass();
     },
+    ready() {
+      this.setData({
+        length: this.$children.length,
+      });
+      this.handleMax();
+      this.handleChildCascading();
+    },
   };
 
-  methods = {
-    isINcludePX(size) {
-      return size.indexOf('px') > -1;
+  observers = {
+    'cascading, size'() {
+      this.setClass();
     },
+  };
 
+  methods = {
     setClass() {
       const { cascading, size } = this.properties;
-      const classList = [name, `${prefix}-class`];
       const direction = cascading.split('-')[0];
-      if (this.isINcludePX(size)) {
-        classList.push(`${name}-offset-${direction}-medium`);
-      } else {
-        classList.push(`${name}-offset-${direction}-${size}`);
-      }
+      const classList = [
+        name,
+        `${prefix}-class`,
+        `${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size}`,
+      ];
+
       this.setData({
         className: classList.join(' '),
       });
     },
 
-    /**
-     * @param children avatar-group的所有avatar子节点
-     * @param hasChild 是否为子节点（slot插槽以及默认的avatar折叠元素没有parent）
-     * @description
-     */
-    handleHasChild(children, hasChild) {
-      children.forEach((child) => {
-        child.updateIsChild(hasChild);
-      });
-    },
-    /**
-     *
-     * @param max 最大avatar数量
-     * @param children avatar-group的所有avatar子节点
-     * @param f handleChildMax函数
-     * @description 判断是否传入自定义折叠元素
-     */
-    handleChildSlot(max, children, f) {
-      const query = this.createSelectorQuery();
-      const slotName = `.${this.data.classPrefix}__collapse--slot`;
-      query.select(slotName).boundingClientRect();
-      query.exec((res) => {
-        const isSlot = !!res[0].width;
-        f(max, children, isSlot);
-      });
-    },
-
-    /**
-     *
-     * @param max 最大avatar数量
-     * @param children avatar-group的所有avatar子节点
-     * @param isSlotElement 是否传入自定义折叠元素（res[0].width不为空表示传入）
-     * @description avatar-group的最大数量处理
-     *              + 如果未传入自定义折叠元素，当超出max数量时，显示默认折叠元素
-     */
-    handleChildMax(max, children, isSlotElement) {
-      const len = children.length;
+    handleMax() {
+      const { max } = this.data;
+      const len = this.$children.length;
       if (!max || max > len) return;
 
-      const slotElement = isSlotElement ? children.pop() : '';
-      const leftChildren = children.splice(max, len - max, isSlotElement && slotElement);
-
-      leftChildren.forEach((child) => {
-        child.updateShow();
-      });
-    },
+      const restAvatars = this.$children.splice(max, len - max);
 
-    /**
-     * @param size 尺寸，优先级低于avatar自身设置的size
-     * @param children avatar-group的所有avatar子节点
-     * @description 更新avatar节点的size属性
-     */
-    handleChildSize(size, children) {
-      if (!size) return;
-      children.forEach((child) => {
-        child.updateSize(size);
+      restAvatars.forEach((child) => {
+        child.hide();
       });
     },
 
-    /**
-     * @param cascading 层叠关系
-     * @param children avatar-group的所有avatar子节点
-     * @description 右侧图片在上可用css直接实现，左侧图片在上，通过设置z-index实现
-     */
-    handleChildCascading(cascading, children) {
-      if (cascading === 'right-up') return;
+    handleChildCascading() {
+      if (this.properties.cascading === 'right-up') return;
 
       const defaultZIndex = 100;
-      children.forEach((child, index) => {
+      this.$children.forEach((child, index) => {
         child.updateCascading(defaultZIndex - index * 10);
       });
     },

src/avatar/avatar-group.wxml

@@ -1,15 +1,15 @@
 <view style="{{ customStyle }}" class="{{className}}">
   <slot />
   <!-- 自定义折叠元素 -->
-  <view class="{{classPrefix}}__collapse--slot {{collapseAvatar ? prefix + '-is-hidden' : ''}}">
+  <view class="{{classPrefix}}__collapse--slot">
     <slot name="collapse-avatar" />
   </view>
   <!-- 默认折叠元素 -->
   <view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}">
     <t-avatar
       t-class-image="{{prefix}}-class-image"
       t-class-content="{{prefix}}-class-content"
-      bordered="{{true}}"
+      bordered
       size="{{size}}"
       icon="{{ collapseAvatar ? '' : 'user-add'}}"
       aria-role="none"

src/avatar/avatar.less

@@ -29,7 +29,7 @@
   background-color: @avatar-bg-color;
   color: @avatar-content-color;
 
-  &.@{prefix}-size-l {
+  &--large {
     width: @avatar-large-width;
     height: @avatar-large-width;
     font-size: @avatar-text-large-font-size;
@@ -39,7 +39,7 @@
     }
   }
 
-  &.@{prefix}-size-m {
+  &--medium {
     width: @avatar-medium-width;
     height: @avatar-medium-width;
     font-size: @avatar-text-medium-font-size;
@@ -49,7 +49,7 @@
     }
   }
 
-  &.@{prefix}-size-s {
+  &--small {
     width: @avatar-small-width;
     height: @avatar-small-width;
     font-size: @avatar-text-small-font-size;
@@ -92,15 +92,15 @@
   &--border {
     border-color: @avatar-border-color;
     border-style: solid;
-    &--small {
+    &-small {
       border-width: @avatar-border-width-small;
     }
 
-    &--medium {
+    &-medium {
       border-width: @avatar-border-width-medium;
     }
 
-    &--large {
+    &-large {
       border-width: @avatar-border-width-large;
     }
   }