Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(AvatarGroup): fixed size attribute being invalid #3134

Merged
merged 4 commits into from
Sep 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/avatar-group/avatar-group.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"component": true,
"styleIsolation": "apply-shared",
"styleIsolation": "shared",
"usingComponents": {
"t-avatar": "../avatar/avatar"
}
Expand Down
44 changes: 28 additions & 16 deletions src/avatar-group/avatar-group.less
Original file line number Diff line number Diff line change
@@ -1,16 +1,32 @@
@import '../common/style/index.less';
@import '../avatar/avatar.less';

//组合头像偏移量
@avatar-group-offset-small: var(--td-avatar-group-margin-left-small, -4px);
@avatar-group-offset-medium: var(--td-avatar-group-margin-left-medium, -6px);
@avatar-group-offset-large: var(--td-avatar-group-margin-left-large, -8px);
@avatar-group-offset-small: var(--td-avatar-group-margin-left-small, -16rpx);
@avatar-group-offset-medium: var(--td-avatar-group-margin-left-medium, -16rpx);
@avatar-group-offset-large: var(--td-avatar-group-margin-left-large, -16rpx);
@avatar-group-line-spacing: var(--td-avatar-group-line-spacing, 4rpx);

@avatar-group-init-zIndex: 50;

.generate-z-index(@n, @i: 1) when (@i =< @n) {
& .@{prefix}-avatar__wrapper:nth-child(@{i}) {
z-index: calc(var(--td-avatar-group-init-z-index, @avatar-group-init-zIndex) - @i);
}

.generate-z-index(@n, (@i + 1));
}

.@{prefix}-avatar-group {
display: inline-flex;
flex-wrap: wrap;
align-items: center;

&-offset-left {
&-offset-left,
&-offset-right {
& .@{prefix}-avatar__wrapper {
padding: @avatar-group-line-spacing 0;
}

&-small {
--td-avatar-margin-left: @avatar-group-offset-small; // ‘small’尺寸组合头像偏移间距
}
Expand All @@ -24,18 +40,14 @@
}
}

&-offset-right {
&-small {
--td-avatar-margin-left: @avatar-group-offset-small;
}

&-medium {
--td-avatar-margin-left: @avatar-group-offset-medium;
}
&-offset-left {
.generate-z-index(@avatar-group-init-zIndex);
}

&-large {
--td-avatar-margin-left: @avatar-group-offset-large;
}
&__collapse--slot,
&__collapse--default {
z-index: 0;
font-weight: 600;
}

&__collapse--slot {
Expand Down
13 changes: 4 additions & 9 deletions src/avatar-group/avatar-group.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ export default class AvatarGroup extends SuperComponent {
length: this.$children.length,
});
this.handleMax();
this.handleChildCascading();
},
};

Expand All @@ -55,7 +54,8 @@ export default class AvatarGroup extends SuperComponent {
const classList = [
name,
`${prefix}-class`,
`${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size}`,
`${name}-offset-${direction}`,
`${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size || 'medium'}`,
];

this.setData({
Expand All @@ -75,13 +75,8 @@ export default class AvatarGroup extends SuperComponent {
});
},

handleChildCascading() {
if (this.properties.cascading === 'right-up') return;

const defaultZIndex = 100;
this.$children.forEach((child, index) => {
child.updateCascading(defaultZIndex - index * 10);
});
onCollapsedItemClick(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('collapsed-item-click', e.detail);
},
};
}
3 changes: 2 additions & 1 deletion src/avatar-group/avatar-group.wxml
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@
<slot name="collapse-avatar" />
</view>
<!-- 默认折叠元素 -->
<view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}">
<view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}" bindtap="onCollapsedItemClick">
<t-avatar
t-class-image="{{prefix}}-avatar--border {{prefix}}-avatar--border-{{size}} {{prefix}}-class-image"
t-class-content="{{prefix}}-class-content"
size="{{size}}"
shape="{{shape}}"
icon="{{ collapseAvatar ? '' : 'user-add'}}"
aria-role="none"
>{{collapseAvatar}}</t-avatar
Expand Down
10 changes: 5 additions & 5 deletions src/avatar-group/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,18 @@ const props: TdAvatarGroupProps = {
collapseAvatar: {
type: String,
},
/** 组件类名,用于设置组件外层元素类名 */
externalClasses: {
type: Array,
},
/** 能够同时显示的最多头像数量 */
max: {
type: Number,
},
/** 形状。优先级低于 Avatar.shape */
shape: {
type: String,
},
/** 尺寸,示例值:small/medium/large/24px/38px 等。优先级低于 Avatar.size */
size: {
type: String,
value: 'medium',
value: '',
},
};

Expand Down
18 changes: 10 additions & 8 deletions src/avatar-group/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */

import { ShapeEnum } from '../common/common';

export interface TdAvatarGroupProps {
/**
* 图片之间的层叠关系,可选值:左侧图片在上和右侧图片在上
Expand All @@ -20,23 +22,23 @@ export interface TdAvatarGroupProps {
type: StringConstructor;
value?: string;
};
/**
* 组件类名,用于设置组件外层元素类名
*/
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-image', 't-class-content'];
};
/**
* 能够同时显示的最多头像数量
*/
max?: {
type: NumberConstructor;
value?: number;
};
/**
* 形状。优先级低于 Avatar.shape
*/
shape?: {
type: StringConstructor;
value?: ShapeEnum;
};
/**
* 尺寸,示例值:small/medium/large/24px/38px 等。优先级低于 Avatar.size
* @default medium
* @default ''
*/
size?: {
type: StringConstructor;
Expand Down
29 changes: 17 additions & 12 deletions src/avatar/README.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,15 @@ hide-on-load-failed | Boolean | false | hide image when loading image failed | N
icon | String / Object | - | \- | N
image | String | - | images url | 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
shape | String | - | shape。options: circle/round。Typescript:`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | size | N

### Avatar Events

name | params | description
-- | -- | --
error | - | trigger on image load failed

### Avatar External Classes

className | Description
Expand All @@ -43,13 +44,15 @@ custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on v
cascading | String | 'left-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
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-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | size | N

### AvatarGroup Events

name | params | description
-- | -- | --
collapsed-item-click | - | \-

### AvatarGroup External Classes

className | Description
Expand All @@ -63,14 +66,16 @@ t-class-image | \-
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-avatar-group-margin-left-large | -8px | -
--td-avatar-group-margin-left-medium | -6px | -
--td-avatar-group-margin-left-small | -4px | -
--td-avatar-group-init-z-index | @avatar-group-init-zIndex) - @i | -
--td-avatar-group-line-spacing | 4rpx | -
--td-avatar-group-margin-left-large | -16rpx | -
--td-avatar-group-margin-left-medium | -16rpx | -
--td-avatar-group-margin-left-small | -16rpx | -
--td-avatar-bg-color | @brand-color-light-active | -
--td-avatar-border-color | #fff | -
--td-avatar-border-width-large | 8rpx | -
--td-avatar-border-width-medium | 6rpx | -
--td-avatar-border-width-small | 4rpx | -
--td-avatar-border-width-large | 6rpx | -
--td-avatar-border-width-medium | 4rpx | -
--td-avatar-border-width-small | 2rpx | -
--td-avatar-circle-border-radius | @radius-circle | -
--td-avatar-content-color | @brand-color | -
--td-avatar-icon-large-font-size | 64rpx | -
Expand All @@ -81,6 +86,6 @@ Name | Default Value | Description
--td-avatar-medium-width | 96rpx | -
--td-avatar-round-border-radius | @radius-default | -
--td-avatar-small-width | 80rpx | -
--td-avatar-text-large-font-size | 16px | -
--td-avatar-text-medium-font-size | @font-size-base | -
--td-avatar-text-small-font-size | @font-size-s | -
--td-avatar-text-large-font-size | @font-size-xl | -
--td-avatar-text-medium-font-size | @font-size-m | -
--td-avatar-text-small-font-size | @font-size-base | -
29 changes: 17 additions & 12 deletions src/avatar/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,14 +75,15 @@ hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
icon | String / Object | - | 图标。值为字符串表示图标名称,值为 `Object` 类型,表示透传至 `icon`。 | N
image | String | - | 图片地址 | 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 | medium | 尺寸,示例值:small/medium/large/24px/38px 等 | N
shape | String | - | 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时,默认值为 circle。如果父组件 AvatarGroup 存在,默认值便由 AvatarGroup.shape 决定。可选项:circle/round。TS 类型:`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | 尺寸,示例值:small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时,默认值为 medium。如果父组件 AvatarGroup 存在,默认值便由 AvatarGroup.size 决定 | N

### Avatar Events

名称 | 参数 | 描述
-- | -- | --
error | - | 图片加载失败时触发

### Avatar External Classes

类名 | 描述
Expand All @@ -103,13 +104,15 @@ custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场
cascading | String | 'left-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
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-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | 尺寸,示例值:small/medium/large/24px/38px 等。优先级低于 Avatar.size | N

### AvatarGroup Events

名称 | 参数 | 描述
-- | -- | --
collapsed-item-click | - | 点击头像折叠元素触发

### AvatarGroup External Classes

类名 | 描述
Expand All @@ -123,14 +126,16 @@ t-class-image | 图片样式类
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-avatar-group-margin-left-large | -8px | -
--td-avatar-group-margin-left-medium | -6px | -
--td-avatar-group-margin-left-small | -4px | -
--td-avatar-group-init-z-index | @avatar-group-init-zIndex) - @i | -
--td-avatar-group-line-spacing | 4rpx | -
--td-avatar-group-margin-left-large | -16rpx | -
--td-avatar-group-margin-left-medium | -16rpx | -
--td-avatar-group-margin-left-small | -16rpx | -
--td-avatar-bg-color | @brand-color-light-active | -
--td-avatar-border-color | #fff | -
--td-avatar-border-width-large | 8rpx | -
--td-avatar-border-width-medium | 6rpx | -
--td-avatar-border-width-small | 4rpx | -
--td-avatar-border-width-large | 6rpx | -
--td-avatar-border-width-medium | 4rpx | -
--td-avatar-border-width-small | 2rpx | -
--td-avatar-circle-border-radius | @radius-circle | -
--td-avatar-content-color | @brand-color | -
--td-avatar-icon-large-font-size | 64rpx | -
Expand All @@ -141,6 +146,6 @@ t-class-image | 图片样式类
--td-avatar-medium-width | 96rpx | -
--td-avatar-round-border-radius | @radius-default | -
--td-avatar-small-width | 80rpx | -
--td-avatar-text-large-font-size | 16px | -
--td-avatar-text-medium-font-size | @font-size-base | -
--td-avatar-text-small-font-size | @font-size-s | -
--td-avatar-text-large-font-size | @font-size-xl | -
--td-avatar-text-medium-font-size | @font-size-m | -
--td-avatar-text-small-font-size | @font-size-base | -
1 change: 1 addition & 0 deletions src/avatar/__test__/__snapshots__/demo.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`Avatar Avatar action demo works fine 1`] = `
<t-avatar-group
cascading="right-up"
max="5"
bind:collapsed-item-click="onClickCollapsedAvatar"
>
<t-avatar
image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
Expand Down
2 changes: 1 addition & 1 deletion src/avatar/__test__/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ describe('Avatar & Avatar Groups', () => {

const $group = comp.querySelectorAll('.avatar-group >>> .t-avatar');
$group.forEach((v) => {
expect(v.dom.getAttribute('class').includes('t-avatar--medium')).toBeTruthy();
expect(v.dom.getAttribute('class').includes('t-avatar--small')).toBeTruthy();
});
});

Expand Down
3 changes: 3 additions & 0 deletions src/avatar/_example/action/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,8 @@ Component({
onAddTap() {
wx.showToast({ title: '您按下了添加', icon: 'none', duration: 1000 });
},
onClickCollapsedAvatar() {
console.log('click collapsed avatar');
},
},
});
2 changes: 1 addition & 1 deletion src/avatar/_example/action/index.wxml
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<t-avatar-group cascading="right-up" max="5">
<t-avatar-group cascading="right-up" max="5" bind:collapsed-item-click="onClickCollapsedAvatar">
<t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" />
</t-avatar-group>
15 changes: 8 additions & 7 deletions src/avatar/_example/avatar.wxml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<scroll-view scroll-y type="list" class="scroll-view">
<view class="demo">
<view class="demo-title">Avatar 头像</view>
<view class="demo-desc">用于告知用户,该区域的状态变化或者待处理任务的数量。</view>
<view class="demo-desc">用于展示用户头像信息,除了纯展示也可点击进入个人详情等操作。</view>
<t-demo title="01 组件类型" desc="图片头像" padding>
<imageAvatar />
</t-demo>
Expand All @@ -14,17 +14,18 @@
<iconAvatar />
</t-demo>

<t-demo title="02 组件样式" desc="纯展示" padding>
<t-demo desc="带徽标头像" padding>
<badgeAvatar />
</t-demo>

<t-demo title="02 特殊类型" desc="纯展示的头像组" padding>
<exhibition />
</t-demo>
<t-demo desc="带操作" padding>
<t-demo desc="带操作的头像组" padding>
<action />
</t-demo>
<t-demo desc="徽标头像" padding>
<badgeAvatar />
</t-demo>

<t-demo title="03 组件尺寸" desc=" large/medium/small 尺寸" padding>
<t-demo title="03 组件尺寸" desc="组件尺寸" padding>
<size />
</t-demo>
</view>
Expand Down
2 changes: 1 addition & 1 deletion src/avatar/avatar.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"component": true,
"styleIsolation": "apply-shared",
"styleIsolation": "shared",
"usingComponents": {
"t-icon": "../icon/icon",
"t-badge": "../badge/badge",
Expand Down
Loading
Loading