diff --git a/docs/en-US/component/avatar.md b/docs/en-US/component/avatar.md index 30bd8410f2..cf364593ed 100644 --- a/docs/en-US/component/avatar.md +++ b/docs/en-US/component/avatar.md @@ -47,28 +47,28 @@ avatar/fit ::: -## Avatar API +## API -### Avatar Attributes +### Attributes -| Name | Description | Type | Default | Required | -| --------- | --------------------------------------------------------- | ---------------------------------------------------------- | ----------- | -------- | -| `icon` | representation type to icon, more info on icon component. | `string \| Component` | — | No | -| `size` | avatar size. | `number \| 'large' \| 'default' \| 'small'` | `'default'` | No | -| `shape` | avatar shape. | `'circle' \| 'square'` | `'circle'` | No | -| `src` | the source of the image for an image avatar. | `string` | — | No | -| `src-set` | native attribute `srcset` of image avatar. | `string` | — | No | -| `alt` | native attribute `alt` of image avatar. | `string` | — | No | -| `fit` | set how the image fit its container for an image avatar. | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `'cover'` | No | +| Name | Description | Type | Default | +| ------- | --------------------------------------------------------- | ----------------------------------------------------------------- | ------- | +| icon | representation type to icon, more info on icon component. | ^[string] / ^[Component] | — | +| size | avatar size. | ^[number] / ^[enum]`'large' \| 'default' \| 'small'` | default | +| shape | avatar shape. | ^[enum]`'circle' \| 'square'` | circle | +| src | the source of the image for an image avatar. | `string` | — | +| src-set | native attribute `srcset` of image avatar. | `string` | — | +| alt | native attribute `alt` of image avatar. | `string` | — | +| fit | set how the image fit its container for an image avatar. | ^[enum]`'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | cover | -### Avatar Events +### Events -| Name | Description | Type | -| ------- | ------------------------------ | -------------------- | -| `error` | trigger when image load error. | `(e: Event) => void` | +| Name | Description | Type | +| ----- | ------------------------------ | ------------------------------- | +| error | trigger when image load error. | ^[Function]`(e: Event) => void` | -### Avatar Slots +### Slots -| Name | Description | -| --------- | ------------------------- | -| `default` | customize avatar content. | +| Name | Description | +| ------- | ------------------------- | +| default | customize avatar content. | diff --git a/packages/components/avatar/index.ts b/packages/components/avatar/index.ts index e60a947b5f..10fabb8968 100644 --- a/packages/components/avatar/index.ts +++ b/packages/components/avatar/index.ts @@ -5,3 +5,4 @@ export const ElAvatar = withInstall(Avatar) export default ElAvatar export * from './src/avatar' +export type { AvatarInstance } from './src/instance' diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts index 3b50045ee9..c2c15fcced 100644 --- a/packages/components/avatar/src/avatar.ts +++ b/packages/components/avatar/src/avatar.ts @@ -7,29 +7,49 @@ import { import { componentSizes } from '@element-plus/constants' import type { ExtractPropTypes } from 'vue' import type { ObjectFitProperty } from 'csstype' -import type Avatar from './avatar.vue' export const avatarProps = buildProps({ + /** + * @description avatar size. + */ size: { type: [Number, String], values: componentSizes, default: '', validator: (val: unknown): val is number => isNumber(val), }, + /** + * @description avatar shape. + */ shape: { type: String, values: ['circle', 'square'], default: 'circle', }, + /** + * @description representation type to icon, more info on icon component. + */ icon: { type: iconPropType, }, + /** + * @description the source of the image for an image avatar. + */ src: { type: String, default: '', }, + /** + * @description native attribute `alt` of image avatar. + */ alt: String, + /** + * @description native attribute srcset of image avatar. + */ srcSet: String, + /** + * @description set how the image fit its container for an image avatar. + */ fit: { type: definePropType(String), default: 'cover', @@ -41,5 +61,3 @@ export const avatarEmits = { error: (evt: Event) => evt instanceof Event, } export type AvatarEmits = typeof avatarEmits - -export type AvatarInstance = InstanceType diff --git a/packages/components/avatar/src/instance.ts b/packages/components/avatar/src/instance.ts new file mode 100644 index 0000000000..c805cc847c --- /dev/null +++ b/packages/components/avatar/src/instance.ts @@ -0,0 +1,3 @@ +import type Avatar from './avatar.vue' + +export type AvatarInstance = InstanceType