feat(avatar) api更新

TDesignOteam · Jan 10, 2024 · 0a8a761 · 0a8a761
1 parent 89d912f
commit 0a8a761
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 94 deletions.
diff --git a/packages/products/tdesign-miniprogram/src/avatar/README.en-US.md b/packages/products/tdesign-miniprogram/src/avatar/README.en-US.md
@@ -7,28 +7,29 @@ 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
-external-classes | Array | - | `['t-class']` | 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
-style | String | - | \- | N
+image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/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-miniprogram/tree/develop/src/avatar/type.ts) | N
+size | String | medium | size | N
 
 ### Avatar Events
 
 name | params | description
 -- | -- | --
-error | \- | trigger on image load failed
+error | - | trigger on image load failed
 
 ### AvatarGroup Props
 
 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
+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-group/type.ts) | N
+collapse-avatar | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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
-style | String | - | \- | N
diff --git a/packages/products/tdesign-miniprogram/src/avatar/README.md b/packages/products/tdesign-miniprogram/src/avatar/README.md
@@ -7,28 +7,29 @@
 -- | -- | -- | -- | --
 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
-external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class']` | 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 / Slot | - | 图标 | N
+icon | String / Object | - | 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
 image | String | - | 图片地址 | N
-image-props | Object | - | 透传至 Image 组件 | N
+image-props | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | 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
-style | String | - | 自定义组件样式 | N
+size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 | N
 
 ### Avatar Events
 
 名称 | 参数 | 描述
 -- | -- | --
-error | \- | 图片加载失败时触发
+error | - | 图片加载失败时触发
 
 ### AvatarGroup Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-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
+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-group/type.ts) | N
+collapse-avatar | String / Slot | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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
-style | String | - | 自定义组件样式 | N
diff --git a/packages/products/tdesign-miniprogram/src/avatar/props.ts b/packages/products/tdesign-miniprogram/src/avatar/props.ts
@@ -15,6 +15,16 @@ const props: TdAvatarProps = {
   badgeProps: {
     type: Object,
   },
+  /** 已废弃。是否显示外边框 */
+  bordered: {
+    type: Boolean,
+    value: false,
+  },
+  /** 自定义组件样式 */
+  customStyle: {
+    type: String,
+    value: '',
+  },
   /** 组件类名，用于设置组件外层元素类名 */
   externalClasses: {
     type: Array,
@@ -24,9 +34,9 @@ const props: TdAvatarProps = {
     type: Boolean,
     value: false,
   },
-  /** 图标 */
+  /** 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 */
   icon: {
-    type: String,
+    type: null,
   },
   /** 图片地址 */
   image: {
@@ -42,15 +52,10 @@ const props: TdAvatarProps = {
     type: String,
     value: 'circle',
   },
-  /** 尺寸，示例值：small/medium/large/24px/38px 等，默认为 large */
+  /** 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 */
   size: {
     type: String,
-    value: '',
-  },
-  /** 自定义组件样式 */
-  style: {
-    type: String,
-    value: '',
+    value: 'medium',
   },
 };
 

diff --git a/packages/products/tdesign-miniprogram/src/avatar/type.ts b/packages/products/tdesign-miniprogram/src/avatar/type.ts
@@ -5,6 +5,7 @@
  * */
 
 import { BadgeProps } from '../badge/index';
+import { ImageProps } from '../image/index';
 
 export interface TdAvatarProps {
   /**
@@ -22,12 +23,28 @@ export interface TdAvatarProps {
     type: ObjectConstructor;
     value?: BadgeProps;
   };
+  /**
+   * 已废弃。是否显示外边框
+   * @default false
+   */
+  bordered?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * 自定义组件样式
+   * @default ''
+   */
+  customStyle?: {
+    type: StringConstructor;
+    value?: string;
+  };
   /**
    * 组件类名，用于设置组件外层元素类名
    */
   externalClasses?: {
     type: ArrayConstructor;
-    value?: ['t-class'];
+    value?: ['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content'];
   };
   /**
    * 加载失败时隐藏图片
@@ -38,11 +55,11 @@ export interface TdAvatarProps {
     value?: boolean;
   };
   /**
-   * 图标
+   * 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。
    */
   icon?: {
-    type: StringConstructor;
-    value?: string;
+    type: null;
+    value?: string | object;
   };
   /**
    * 图片地址
@@ -57,7 +74,7 @@ export interface TdAvatarProps {
    */
   imageProps?: {
     type: ObjectConstructor;
-    value?: object;
+    value?: ImageProps;
   };
   /**
    * 形状
@@ -68,71 +85,13 @@ export interface TdAvatarProps {
     value?: ShapeEnum;
   };
   /**
-   * 尺寸，示例值：small/medium/large/24px/38px 等，默认为 large
-   * @default ''
-   */
-  size?: {
-    type: StringConstructor;
-    value?: string;
-  };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
-}
-
-export interface TdAvatarGroupProps {
-  /**
-   * 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上
-   * @default 'right-up'
-   */
-  cascading?: {
-    type: StringConstructor;
-    value?: CascadingValue;
-  };
-  /**
-   * 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`
-   */
-  collapseAvatar?: {
-    type: StringConstructor;
-    value?: string;
-  };
-  /**
-   * 组件类名，用于设置组件外层元素类名
-   */
-  externalClasses?: {
-    type: ArrayConstructor;
-    value?: ['t-class', 't-class-image', 't-class-content'];
-  };
-  /**
-   * 能够同时显示的最多头像数量
-   */
-  max?: {
-    type: NumberConstructor;
-    value?: number;
-  };
-  /**
-   * 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size
+   * 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定
    * @default medium
    */
   size?: {
     type: StringConstructor;
     value?: string;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
 }
 
 export type ShapeEnum = 'circle' | 'round';
-
-export type CascadingValue = 'left-up' | 'right-up';
diff --git a/packages/products/tdesign-miniprogram/src/common/common.ts b/packages/products/tdesign-miniprogram/src/common/common.ts
@@ -34,6 +34,11 @@ export type HorizontalAlignEnum = 'left' | 'center' | 'right';
 
 export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
 
+export enum LayoutEnum {
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal',
+}
+
 export type ClassName = { [className: string]: any } | ClassName[] | string;
 
 export type CSSSelector = string;
@@ -85,7 +90,7 @@ export type InfinityScroll = TScroll;
 
 export interface ScrollToElementParams {
   /** 跳转元素下标 */
-  index: number;
+  index?: number;
   /** 跳转元素距离顶部的距离 */
   top?: number;
   /** 单个元素高度非固定场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒 */
@@ -94,5 +99,5 @@ export interface ScrollToElementParams {
 }
 
 export interface ComponentScrollToElementParams extends ScrollToElementParams {
-  key: string | number;
+  key?: string | number;
 }