feat(AvatarGroup): support shape props

Tencent · Sep 10, 2024 · 7a8650f · 7a8650f
1 parent 17b0e28
commit 7a8650f
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 18 deletions.
diff --git a/src/avatar/avatar-group-props.ts b/src/avatar/avatar-group-props.ts
@@ -25,6 +25,14 @@ export default {
   max: {
     type: Number,
   },
+  /** 形状。优先级低于 Avatar.shape */
+  shape: {
+    type: String as PropType<TdAvatarGroupProps['shape']>,
+    validator(val: TdAvatarGroupProps['shape']): boolean {
+      if (!val) return true;
+      return ['circle', 'round'].includes(val);
+    },
+  },
   /** 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size */
   size: {
     type: String,

diff --git a/src/avatar/avatar-group.tsx b/src/avatar/avatar-group.tsx
@@ -55,10 +55,9 @@ export default defineComponent({
         const collapseAvatar = renderTNodeJSX('collapseAvatar');
         avatarList.push(
           <div class={`${avatarGroupClass.value}__collapse--default`} onClick={onCollapsedItemClick}>
-            <TAvatar size={avatarList[0].size || props.size}>
+            <TAvatar size={avatarList[0].size || props.size} shape={props.shape}>
               {collapseAvatar || `+${allChildren.length - props.max}`}
             </TAvatar>
-            ,
           </div>,
         );
       }

diff --git a/src/avatar/avatar.en-US.md b/src/avatar/avatar.en-US.md
@@ -12,7 +12,7 @@ hideOnLoadFailed | Boolean | false | hide image when loading image failed | N
 icon | Slot / Function | - | use icon to fill。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 image | String | - | images url | N
 imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/avatar/type.ts) | N
-shape | String | circle | shape。options: circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/avatar/type.ts) | N
+shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 size | String | - | size | N
 onError | Function |  | Typescript：`(context: { e: Event }) => void`<br/>trigger on image load failed | N
 
@@ -30,6 +30,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-mobile-vue/tree/develop/src/avatar/type.ts) | N
 collapseAvatar | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 max | Number | - | \- | N
+shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 size | String | - | size | N
 onCollapsedItemClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 

diff --git a/src/avatar/avatar.md b/src/avatar/avatar.md
@@ -12,8 +12,8 @@ hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N
 icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 image | String | - | 图片地址 | N
 imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/avatar/type.ts) | N
-shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/avatar/type.ts) | N
-size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 | N
+shape | String | - | 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.circle 决定。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 | N
 onError | Function |  | TS 类型：`(context: { e: Event }) => void`<br/>图片加载失败时触发 | N
 
 ### Avatar Events
@@ -30,6 +30,7 @@ error | `(context: { e: Event })` | 图片加载失败时触发
 cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/avatar/type.ts) | N
 collapseAvatar | String / Slot / Function | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 max | Number | - | 能够同时显示的最多头像数量 | N
+shape | String | - | 形状。优先级低于 Avatar.shape。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
 onCollapsedItemClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击头像折叠元素触发 | N
 

diff --git a/src/avatar/avatar.tsx b/src/avatar/avatar.tsx
@@ -25,15 +25,14 @@ export default defineComponent({
     const avatarGroupProps = inject<TdAvatarGroupProps>('avatarGroup', {});
     const hasAvatarGroupProps = Object.keys(avatarGroupProps).length > 0;
 
-    const sizeValue = ref(props.size || avatarGroupProps?.size);
+    const shapeValue = computed(() => props.shape || avatarGroupProps?.shape || 'circle');
+    const sizeValue = computed(() => props.size || avatarGroupProps?.size);
     const isCustomSize = computed(() => !isValidSize(sizeValue.value));
 
     const avatarClasses = computed(() => [
       `${avatarClass.value}`,
       `${avatarClass.value}--${isCustomSize.value ? 'medium' : sizeValue.value}`,
-      {
-        [`${avatarClass.value}--${props.shape}`]: props.shape,
-      },
+      `${avatarClass.value}--${shapeValue.value}`,
       hasAvatarGroupProps
         ? `${avatarClass.value}--border ${avatarClass.value}--border-${isCustomSize.value ? 'medium' : sizeValue.value}`
         : '',

diff --git a/src/avatar/props.ts b/src/avatar/props.ts
@@ -32,16 +32,15 @@ export default {
   imageProps: {
     type: Object as PropType<TdAvatarProps['imageProps']>,
   },
-  /** 形状 */
+  /** 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.circle 决定 */
   shape: {
     type: String as PropType<TdAvatarProps['shape']>,
-    default: 'circle' as TdAvatarProps['shape'],
     validator(val: TdAvatarProps['shape']): boolean {
       if (!val) return true;
       return ['circle', 'round'].includes(val);
     },
   },
-  /** 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 */
+  /** 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 */
   size: {
     type: String,
     default: '',

diff --git a/src/avatar/type.ts b/src/avatar/type.ts
@@ -6,7 +6,7 @@
 
 import { BadgeProps } from '../badge';
 import { ImageProps } from '../image';
-import { TNode } from '../common';
+import { TNode, ShapeEnum } from '../common';
 
 export interface TdAvatarProps {
   /**
@@ -37,12 +37,11 @@ export interface TdAvatarProps {
    */
   imageProps?: ImageProps;
   /**
-   * 形状
-   * @default circle
+   * 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.circle 决定
    */
   shape?: ShapeEnum;
   /**
-   * 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定
+   * 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定
    * @default ''
    */
   size?: string;
@@ -66,6 +65,10 @@ export interface TdAvatarGroupProps {
    * 能够同时显示的最多头像数量
    */
   max?: number;
+  /**
+   * 形状。优先级低于 Avatar.shape
+   */
+  shape?: ShapeEnum;
   /**
    * 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size
    * @default ''
@@ -77,6 +80,4 @@ export interface TdAvatarGroupProps {
   onCollapsedItemClick?: (context: { e: MouseEvent }) => void;
 }
 
-export type ShapeEnum = 'circle' | 'round';
-
 export type CascadingValue = 'left-up' | 'right-up';
diff --git a/src/common.ts b/src/common.ts
@@ -64,6 +64,8 @@ export type TreeOptionData<T = string | number> = {
 
 export type SizeEnum = 'small' | 'medium' | 'large';
 
+export type ShapeEnum = 'circle' | 'round';
+
 export type HorizontalAlignEnum = 'left' | 'center' | 'right';
 
 export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';