diff --git a/package.json b/package.json index 9a5228155..7345f270c 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "lint:fix-prettier": "prettier ./ --ignore-path .gitignore --ignore-path .eslintignore --write './*.{vue,ts,tsx}' --ignore-unknown", "lint:vue": "vue-tsc --noEmit -p tsconfig.build.json", "update:coverage-badge": "node scripts/test/generate-coverage.js", - "update:css": "node scripts/test/generate-css-vars.js", + "update:css": "node scripts/generate-css-vars.js", "changelog": "publish-cli changelog", "robot": "publish-cli robot-msg", "commit": "git-cz" diff --git a/scripts/test/generate-css-vars.js b/scripts/generate-css-vars.js similarity index 85% rename from scripts/test/generate-css-vars.js rename to scripts/generate-css-vars.js index 92aecc7e9..560368441 100644 --- a/scripts/test/generate-css-vars.js +++ b/scripts/generate-css-vars.js @@ -26,7 +26,7 @@ function resolveCwd(...args) { const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面 -const matchReg = /(?<=var).*?(?=\;)/g; +const matchReg = /(?<=var).*?(?=;)/g; function findFilePath(componentName) { const path = resolveCwd(`src/_common/style/mobile/components/${componentName}/v2/_var.less`); @@ -48,8 +48,8 @@ if (combine[COMPONENT_NAME]) { } // 追加到文件 -const cssVariableHeadContent = `\n\n### CSS 变量\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`; -const cssVariableHeadContentEn = `\n\n### CSS Variables\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`; +const cssVariableHeadContent = `\n\n### CSS Variables\n\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`; +const cssVariableHeadContentEn = `\n\n### CSS Variables\n\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`; fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.md`), cssVariableHeadContent); fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.en-US.md`), cssVariableHeadContentEn); diff --git a/src/_common b/src/_common index 5d8910f02..acb448730 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 5d8910f0273e8da29c9f2e20760be48f1b128448 +Subproject commit acb4487304321a7bf3ac3e1b4d78e9e7510fbf6c diff --git a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap index fe6cd6b8f..1b22d93c8 100644 --- a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap @@ -5,7 +5,7 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = ` class="avatar-group-demo" >
Avatar actionVue demo works fine 1`] = `
-
- + +
+ Avatar actionVue demo works fine 1`] = ` - + +
+
- +
-
@@ -476,11 +480,11 @@ exports[`Avatar > Avatar badgeAvatarVue demo works fine 1`] = `
- - - A - - + + + A + +
@@ -561,11 +565,11 @@ exports[`Avatar > Avatar characterAvatarVue demo works fine 1`] = `
- - - A - - + + + A + +
@@ -589,11 +593,11 @@ exports[`Avatar > Avatar characterAvatarVue demo works fine 1`] = `
- - - A - - + + + A + +
@@ -609,12 +613,11 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = ` class="avatar-group-demo" >
Avatar exhibitionVue demo works fine 1`] = `
Avatar exhibitionVue demo works fine 1`] = `
Avatar exhibitionVue demo works fine 1`] = `
Avatar exhibitionVue demo works fine 1`] = `
Avatar exhibitionVue demo works fine 1`] = `
-
- + +
+ +5 - + +
+
- +
-
@@ -1422,11 +1425,11 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
- - - A - - + + + A + +
@@ -1450,11 +1453,11 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
- - - A - - + + + A + +
@@ -1570,6 +1573,180 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
+
+
+ +

+ 徽标头像 +

+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+ + +
+
+ + + + +
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+ + + A + + +
+ +
+
+ 8 +
+
+
+
+
+
+
+
+ +
+
+ + + +
+
+ +
+
+ 12 +
+
+
+
+
+ +
+
Avatar mobileVue demo works fine 1`] = `

- 02 组件样式 + 02 特殊类型

- 纯展示 + 纯展示的头像组

Avatar mobileVue demo works fine 1`] = ` data-v-c7b11864="" >
Avatar mobileVue demo works fine 1`] = `
Avatar mobileVue demo works fine 1`] = `
Avatar mobileVue demo works fine 1`] = `
Avatar mobileVue demo works fine 1`] = `
Avatar mobileVue demo works fine 1`] = `
-
- + +
+ +5 - + +
+
- +
-
@@ -1980,7 +2156,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `

- 带操作 + 带操作的头像组

Avatar mobileVue demo works fine 1`] = ` data-v-c7b11864="" >
Avatar mobileVue demo works fine 1`] = `
-
- + +
+ Avatar mobileVue demo works fine 1`] = ` - -
- -
- -
-
-
- -
-
- -
-
-
-
- -

- 徽标头像 -

-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
- -
- - -
+
- - - - -
-
- -
-
- -
-
-
-
-
-
-
-
- -
- - - A - -
- -
-
- 8 -
-
-
-
-
-
-
-
- -
-
- - -
+
- -
-
- 12
+
@@ -2562,7 +2568,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `

- large/medium/small 尺寸 + 组件尺寸

Avatar mobileVue demo works fine 1`] = `
-
- 10 -
+
@@ -2662,11 +2664,11 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
- - - A - - + + + A + +
@@ -2779,11 +2781,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
-
- 10 -
+
@@ -2803,11 +2801,11 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
- - - A - - + + + A + +
@@ -2920,11 +2918,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = ` -
- -
+ @@ -2944,11 +2938,11 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
- - - A - - + + + A + +
@@ -3072,11 +3066,7 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = ` -
- 10 -
+ @@ -3096,11 +3086,11 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
- - - A - - + + + A + +
@@ -3213,11 +3203,7 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = ` -
- 10 -
+ @@ -3237,11 +3223,11 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
- - - A - - + + + A + +
@@ -3354,11 +3340,7 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = ` -
- -
+ @@ -3378,11 +3360,11 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
- - - A - - + + + A + +
diff --git a/src/avatar/__test__/index.test.jsx b/src/avatar/__test__/index.test.jsx index 1724326b0..c058a2231 100644 --- a/src/avatar/__test__/index.test.jsx +++ b/src/avatar/__test__/index.test.jsx @@ -22,9 +22,8 @@ describe('avatar', () => { it(': text', async () => { const wrapper = mount(() => A); - const span = wrapper.find('.t-avatar > span'); - expect(span.exists()).toBeTruthy(); - expect(span.text()).toBe('A'); + const characterAvatar = wrapper.find('.t-avatar'); + expect(characterAvatar.text()).toBe('A'); }); it(': shape', async () => { @@ -131,6 +130,6 @@ describe('avatar-group', async () => { )); const avatarList = wrapper.findAllComponents(Avatar); expect(avatarList.length).toBe(3); - expect(avatarList[avatarList.length-1].text()).toBe('+3'); + expect(avatarList[avatarList.length - 1].text()).toBe('+3'); }); }); diff --git a/src/avatar/avatar-group-props.ts b/src/avatar/avatar-group-props.ts index 2badfcd71..36177c288 100644 --- a/src/avatar/avatar-group-props.ts +++ b/src/avatar/avatar-group-props.ts @@ -25,9 +25,19 @@ export default { max: { type: Number, }, + /** 形状。优先级低于 Avatar.shape */ + shape: { + type: String as PropType, + validator(val: TdAvatarGroupProps['shape']): boolean { + if (!val) return true; + return ['circle', 'round'].includes(val); + }, + }, /** 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size */ size: { type: String, - default: 'medium', + default: '', }, + /** 点击头像折叠元素触发 */ + onCollapsedItemClick: Function as PropType, }; diff --git a/src/avatar/avatar-group.tsx b/src/avatar/avatar-group.tsx index 366e4641f..4ff91ab5c 100644 --- a/src/avatar/avatar-group.tsx +++ b/src/avatar/avatar-group.tsx @@ -1,11 +1,10 @@ import { computed, defineComponent, Fragment, provide, RendererNode } from 'vue'; - import AvatarGroupProps from './avatar-group-props'; import config from '../config'; import TAvatar from './avatar'; - import { useTNodeJSX } from '../hooks/tnode'; import { usePrefixClass } from '../hooks/useClass'; +import { isValidSize } from '../_common/js/avatar/utils'; const { prefix } = config; const name = `${prefix}-avatar-group`; @@ -20,12 +19,18 @@ export default defineComponent({ provide('avatarGroup', { ...props }); const direction = props.cascading ? props.cascading.split('-')[0] : 'right'; + const isCustomSize = computed(() => !isValidSize(props.size)); const avatarGroupClasses = computed(() => [ `${avatarGroupClass.value}`, - `${avatarGroupClass.value}-offset-${direction}-${props.size.indexOf('px') > -1 ? 'medium' : props.size}`, + `${avatarGroupClass.value}-offset-${direction}`, + `${avatarGroupClass.value}-offset-${direction}-${isCustomSize.value ? 'medium' : props.size}`, ]); + const onCollapsedItemClick = (e: MouseEvent) => { + props.onCollapsedItemClick?.({ e }); + }; + const readerAvatar = () => { const children: Array = renderTNodeJSX('default'); const allChildren: Array = []; @@ -47,19 +52,14 @@ export default defineComponent({ avatarList = allChildren; } - if (props.cascading === 'left-up') { - const defaultZIndex = 100; - for (let index = 0; index < avatarList.length; index++) { - avatarList[index].props.style = `z-index: ${defaultZIndex - index * 10}`; - } - } - if (isShowCollapse) { const collapseAvatar = renderTNodeJSX('collapseAvatar'); avatarList.push( - - {collapseAvatar || `+${allChildren.length - props.max}`} - , +
+ + {collapseAvatar || `+${allChildren.length - props.max}`} + +
, ); } diff --git a/src/avatar/avatar.en-US.md b/src/avatar/avatar.en-US.md index a771a3d43..2de7a4a43 100644 --- a/src/avatar/avatar.en-US.md +++ b/src/avatar/avatar.en-US.md @@ -12,15 +12,15 @@ 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 -size | String | medium | size | N -onError | Function | | Typescript：`(context: { e: ImageEvent }) => void`
trigger on image load failed | 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`
trigger on image load failed | N ### Avatar Events name | params | description -- | -- | -- -error | `(context: { e: ImageEvent })` | trigger on image load failed +error | `(context: { e: Event })` | trigger on image load failed ### AvatarGroup Props @@ -30,7 +30,15 @@ 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 -size | String | medium | size | 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`
| N + +### AvatarGroup Events + +name | params | description +-- | -- | -- +collapsed-item-click | `(context: { e: MouseEvent })` | \- ### CSS Variables diff --git a/src/avatar/avatar.md b/src/avatar/avatar.md index b49e6ceae..abf76fa5a 100644 --- a/src/avatar/avatar.md +++ b/src/avatar/avatar.md @@ -12,15 +12,15 @@ 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 | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 | N -onError | Function | | TS 类型：`(context: { e: ImageEvent }) => void`
图片加载失败时触发 | N +shape | String | - | 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.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 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 | N +onError | Function | | TS 类型：`(context: { e: Event }) => void`
图片加载失败时触发 | N ### Avatar Events 名称 | 参数 | 描述 -- | -- | -- -error | `(context: { e: ImageEvent })` | 图片加载失败时触发 +error | `(context: { e: Event })` | 图片加载失败时触发 ### AvatarGroup Props @@ -30,7 +30,15 @@ error | `(context: { e: ImageEvent })` | 图片加载失败时触发 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 -size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | 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`
点击头像折叠元素触发 | N + +### AvatarGroup Events + +名称 | 参数 | 描述 +-- | -- | -- +collapsed-item-click | `(context: { e: MouseEvent })` | 点击头像折叠元素触发 ### CSS Variables diff --git a/src/avatar/avatar.tsx b/src/avatar/avatar.tsx index 03eb3579a..1c09075e0 100644 --- a/src/avatar/avatar.tsx +++ b/src/avatar/avatar.tsx @@ -1,12 +1,12 @@ -import { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue'; +import { computed, defineComponent, inject, ref } from 'vue'; import TBadge from '../badge'; import TImage from '../image'; import config from '../config'; import AvatarProps from './props'; import { TdAvatarGroupProps, TdAvatarProps } from './type'; -import CLASSNAMES from '../shared/constants'; import { useContent, useTNodeJSX } from '../hooks/tnode'; import { usePrefixClass } from '../hooks/useClass'; +import { isValidSize } from '../_common/js/avatar/utils'; const { prefix } = config; const name = `${prefix}-avatar`; @@ -22,24 +22,25 @@ export default defineComponent({ const avatarGroupProps = inject('avatarGroup', {}); const hasAvatarGroupProps = Object.keys(avatarGroupProps).length > 0; - const sizeValue = ref(props.size || (avatarGroupProps && avatarGroupProps.size)); - const sizeReValue = ref((avatarGroupProps && avatarGroupProps.size) || props.size); - const sizeClass = `${sizeReValue.value.indexOf('px') > -1 ? 'medium' : sizeReValue.value}`; + 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}--${sizeClass}`, - { - [`${avatarClass.value}--${props.shape}`]: props.shape, - }, - hasAvatarGroupProps ? `${avatarClass.value}--border ${avatarClass.value}--border-${sizeClass}` : '', + `${avatarClass.value}--${isCustomSize.value ? 'medium' : sizeValue.value}`, + `${avatarClass.value}--${shapeValue.value}`, + hasAvatarGroupProps + ? `${avatarClass.value}--border ${avatarClass.value}--border-${isCustomSize.value ? 'medium' : sizeValue.value}` + : '', ]); - const isCustomSize = computed(() => sizeValue.value && !CLASSNAMES.SIZE[sizeValue.value]); const customSize = computed(() => { return isCustomSize.value ? { height: sizeValue.value, width: sizeValue.value, + 'font-size': `${(Number.parseInt(sizeValue.value, 10) / 8) * 3 + 2}px`, } : {}; }); @@ -55,7 +56,6 @@ export default defineComponent({ if (props.image && !props.hideOnLoadFailed) { return ( {icon}; } - return {TNodeContent}; + return <>{TNodeContent}; }; return ( -
+
-
{readerAvatar()}
+
+ {readerAvatar()} +
diff --git a/src/avatar/demos/mobile.vue b/src/avatar/demos/mobile.vue index 8bbab0ac3..81951bf66 100644 --- a/src/avatar/demos/mobile.vue +++ b/src/avatar/demos/mobile.vue @@ -11,16 +11,17 @@ - + + + + - + - - - - + +
diff --git a/src/avatar/demos/size.vue b/src/avatar/demos/size.vue index 6f1d3bf52..d81e9edc2 100644 --- a/src/avatar/demos/size.vue +++ b/src/avatar/demos/size.vue @@ -7,7 +7,6 @@ size="large" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="示例图片" - :badge-props="{ count: 10 }" > A @@ -19,7 +18,6 @@ size="medium" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="示例图片" - :badge-props="{ count: 10 }" > A @@ -31,7 +29,6 @@ size="small" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="示例图片" - :badge-props="{ dot: true }" > A diff --git a/src/avatar/props.ts b/src/avatar/props.ts index a66d93123..a3fcc99f5 100644 --- a/src/avatar/props.ts +++ b/src/avatar/props.ts @@ -32,19 +32,18 @@ export default { imageProps: { type: Object as PropType, }, - /** 形状 */ + /** 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定 */ shape: { type: String as PropType, - 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: 'medium', + default: '', }, /** 图片加载失败时触发 */ onError: Function as PropType, diff --git a/src/avatar/type.ts b/src/avatar/type.ts index b63f4cd17..335e0f30f 100644 --- a/src/avatar/type.ts +++ b/src/avatar/type.ts @@ -6,7 +6,7 @@ import { BadgeProps } from '../badge'; import { ImageProps } from '../image'; -import { TNode, ImageEvent } from '../common'; +import { TNode, ShapeEnum } from '../common'; export interface TdAvatarProps { /** @@ -37,19 +37,18 @@ export interface TdAvatarProps { */ imageProps?: ImageProps; /** - * 形状 - * @default circle + * 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定 */ shape?: ShapeEnum; /** - * 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 - * @default medium + * 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 + * @default '' */ size?: string; /** * 图片加载失败时触发 */ - onError?: (context: { e: ImageEvent }) => void; + onError?: (context: { e: Event }) => void; } export interface TdAvatarGroupProps { @@ -66,13 +65,19 @@ export interface TdAvatarGroupProps { * 能够同时显示的最多头像数量 */ max?: number; + /** + * 形状。优先级低于 Avatar.shape + */ + shape?: ShapeEnum; /** * 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size - * @default medium + * @default '' */ size?: string; + /** + * 点击头像折叠元素触发 + */ + 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 index 345da9b0e..c6351354a 100644 --- a/src/common.ts +++ b/src/common.ts @@ -64,6 +64,8 @@ export type TreeOptionData = { export type SizeEnum = 'small' | 'medium' | 'large'; +export type ShapeEnum = 'circle' | 'round'; + export type HorizontalAlignEnum = 'left' | 'center' | 'right'; export type VerticalAlignEnum = 'top' | 'middle' | 'bottom'; diff --git a/src/result/result.en-US.md b/src/result/result.en-US.md index 6d92ed032..08389b270 100644 --- a/src/result/result.en-US.md +++ b/src/result/result.en-US.md @@ -17,7 +17,7 @@ title | String / Slot / Function | '' | Typescript：`string \| TNode`。[see mo The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- ---td-result-description-color | @font-gray-2 | - +--td-result-description-color | @text-color-secondary | - --td-result-description-font-size | @font-size-base | - --td-result-description-line-height | 22px | - --td-result-description-margin-top | @spacer | - @@ -25,7 +25,7 @@ Name | Default Value | Description --td-result-icon-error-color | @error-color | - --td-result-icon-success-color | @success-color | - --td-result-icon-warning-color | @warning-color | - ---td-result-title-color | @font-gray-1 | - ---td-result-title-font-size | @font-size-l | - +--td-result-title-color | @text-color-primary | - +--td-result-title-font-size | @font-size-xl | - --td-result-title-line-height | 28px | - ---td-result-title-margin-top | @spacer-1 | - \ No newline at end of file +--td-result-title-margin-top | @spacer-1 | - diff --git a/src/result/result.md b/src/result/result.md index 631b51e36..8350ffc85 100644 --- a/src/result/result.md +++ b/src/result/result.md @@ -17,7 +17,7 @@ title | String / Slot / Function | '' | 标题。TS 类型：`string \| TNode` 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- ---td-result-description-color | @font-gray-2 | - +--td-result-description-color | @text-color-secondary | - --td-result-description-font-size | @font-size-base | - --td-result-description-line-height | 22px | - --td-result-description-margin-top | @spacer | - @@ -25,7 +25,7 @@ title | String / Slot / Function | '' | 标题。TS 类型：`string \| TNode` --td-result-icon-error-color | @error-color | - --td-result-icon-success-color | @success-color | - --td-result-icon-warning-color | @warning-color | - ---td-result-title-color | @font-gray-1 | - ---td-result-title-font-size | @font-size-l | - +--td-result-title-color | @text-color-primary | - +--td-result-title-font-size | @font-size-xl | - --td-result-title-line-height | 28px | - ---td-result-title-margin-top | @spacer-1 | - \ No newline at end of file +--td-result-title-margin-top | @spacer-1 | -