limqsh/quinn-accounts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

白色主题

Browse Source
This commit is contained in:
limqhz
2023-02-12 19:04:01 +08:00
parent d736a5912f
commit 57ab6fbb49
411 changed files with 1752 additions and 5304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
miniprogram_npm/tdesign-miniprogram/avatar/README.en-US.md
View File

@@ -7,14 +7,15 @@ 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
custom-style `v0.25.0` | String | - | \- | 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
size | String | medium | size | N
### Avatar Events
@@ -26,9 +27,9 @@ error | \- | trigger on image load failed
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
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 | - | \- | N
custom-style `v0.25.0` | String | - | \- | 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

12
miniprogram_npm/tdesign-miniprogram/avatar/README.md
View File

@@ -13,7 +13,7 @@ isComponent: true
```json
"usingComponents": {
"t-avatar": "tdesign-miniprogram/avatar/avatar",
"t-avatar-group": "tdesign-miniprogram/avatar/avatar-group"
"t-avatar-group": "tdesign-miniprogram/avatar-group/avatar-group"
}
```
@@ -61,15 +61,15 @@ isComponent: true
-- | -- | -- | -- | --
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
custom-style `v0.25.0` | String | - | 自定义组件样式 | 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 / Object | - | 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
image | String | - | 图片地址 | N
image-props | Object | - | 透传至 Image 组件 | 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
bordered | Boolean | false | 是否显示外边框 | N
size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等 | N
### Avatar Events
@@ -81,9 +81,9 @@ error | \- | 图片加载失败时触发
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
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
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`，`...`, `更多` | N
custom-style `v0.25.0` | String | - | 自定义组件样式 | 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

3
miniprogram_npm/tdesign-miniprogram/avatar/avatar-group-props.d.ts vendored
View File

@@ -1,3 +0,0 @@
import { TdAvatarGroupProps } from './type';
declare const props: TdAvatarGroupProps;
export default props;

24
miniprogram_npm/tdesign-miniprogram/avatar/avatar-group-props.js
View File

@@ -1,24 +0,0 @@
const props = {
cascading: {
type: String,
value: 'right-up',
},
collapseAvatar: {
type: String,
},
customStyle: {
type: String,
value: '',
},
externalClasses: {
type: Array,
},
max: {
type: Number,
},
size: {
type: String,
value: 'medium',
},
};
export default props;

29
miniprogram_npm/tdesign-miniprogram/avatar/avatar-group.d.ts vendored
View File

@@ -1,29 +0,0 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class AvatarGroup extends SuperComponent {
externalClasses: string[];
properties: import("./type").TdAvatarGroupProps;
data: {
prefix: string;
classPrefix: string;
hasChild: boolean;
length: number;
className: string;
};
options: {
multipleSlots: boolean;
};
relations: RelationsOptions;
ready(): void;
lifetimes: {
attached(): void;
};
methods: {
isINcludePX(size: any): boolean;
setClass(): void;
handleHasChild(children: any, hasChild: any): void;
handleChildSlot(max: any, children: any, f: any): void;
handleChildMax(max: any, children: any, isSlotElement: any): void;
handleChildSize(size: any, children: any): void;
handleChildCascading(cascading: any, children: any): void;
};
}

109
miniprogram_npm/tdesign-miniprogram/avatar/avatar-group.js
View File

@@ -1,109 +0,0 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import avatarGroupProps from './avatar-group-props';
const { prefix } = config;
const name = `${prefix}-avatar-group`;
let AvatarGroup = class AvatarGroup extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-image`];
this.properties = avatarGroupProps;
this.data = {
prefix,
classPrefix: name,
hasChild: true,
length: 0,
className: '',
};
this.options = {
multipleSlots: true,
};
this.relations = {
'./avatar': {
type: 'descendant',
},
};
this.lifetimes = {
attached() {
this.setClass();
},
};
this.methods = {
isINcludePX(size) {
return size.indexOf('px') > -1;
},
setClass() {
const { cascading, size } = this.properties;
const classList = [name, `${prefix}-class`];
const direction = cascading.split('-')[0];
if (this.isINcludePX(size)) {
classList.push(`${name}-offset-${direction}-medium`);
}
else {
classList.push(`${name}-offset-${direction}-${size}`);
}
this.setData({
className: classList.join(' '),
});
},
handleHasChild(children, hasChild) {
children.forEach((child) => {
child.updateIsChild(hasChild);
});
},
handleChildSlot(max, children, f) {
const query = this.createSelectorQuery();
const slotName = `.${this.data.classPrefix}__collapse--slot`;
query.select(slotName).boundingClientRect();
query.exec((res) => {
const isSlot = !!res[0].width;
f(max, children, isSlot);
});
},
handleChildMax(max, children, isSlotElement) {
const len = children.length;
if (!max || max > len)
return;
const slotElement = isSlotElement ? children.pop() : '';
const leftChildren = children.splice(max, len - max, isSlotElement && slotElement);
leftChildren.forEach((child) => {
child.updateShow();
});
},
handleChildSize(size, children) {
if (!size)
return;
children.forEach((child) => {
child.updateSize(size);
});
},
handleChildCascading(cascading, children) {
if (cascading === 'right-up')
return;
const defaultZIndex = 100;
children.forEach((child, index) => {
child.updateCascading(defaultZIndex - index * 10);
});
},
};
}
ready() {
this.setData({
length: this.$children.length,
});
this.handleHasChild(this.$children, this.data.hasChild);
this.handleChildSlot(this.properties.max, this.$children, this.handleChildMax);
this.handleChildSize(this.properties.size, this.$children);
this.handleChildCascading(this.properties.cascading, this.$children);
}
};
AvatarGroup = __decorate([
wxComponent()
], AvatarGroup);
export default AvatarGroup;

6
miniprogram_npm/tdesign-miniprogram/avatar/avatar-group.json
View File

@@ -1,6 +0,0 @@
{
"component": true,
"usingComponents": {
"t-avatar": "./avatar"
}
}

18
miniprogram_npm/tdesign-miniprogram/avatar/avatar-group.wxml
View File

@@ -1,18 +0,0 @@
<view style="{{ customStyle }}" class="{{className}}">
<slot />
<!-- 自定义折叠元素 -->
<view class="{{classPrefix}}__collapse--slot {{collapseAvatar ? prefix + '-is-hidden' : ''}}">
<slot name="collapse-avatar" />
</view>
<!-- 默认折叠元素 -->
<view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}">
<t-avatar
t-class-image="{{prefix}}-class-image"
t-class-content="{{prefix}}-class-content"
bordered="{{true}}"
size="{{size}}"
aria-role="none"
>{{collapseAvatar || '+N'}}</t-avatar
>
</view>
</view>

63
miniprogram_npm/tdesign-miniprogram/avatar/avatar-group.wxss
View File

@@ -1,63 +0,0 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-avatar-group {
display: inline-flex;
align-items: center;
}
.t-avatar-group-offset-left-small t-avatar:not(:first-child) {
margin-left: var(--td-avatar-group-margin-left-small, -4px);
}
.t-avatar-group-offset-left-medium t-avatar:not(:first-child) {
margin-left: var(--td-avatar-group-margin-left-medium, -6px);
}
.t-avatar-group-offset-left-large t-avatar:not(:first-child) {
margin-left: var(--td-avatar-group-margin-left-large, -8px);
}
.t-avatar-group-offset-right-small t-avatar:not(:last-child) {
margin-right: var(--td-avatar-group-margin-left-small, -4px);
}
.t-avatar-group-offset-right-medium t-avatar:not(:last-child) {
margin-right: var(--td-avatar-group-margin-left-medium, -6px);
}
.t-avatar-group-offset-right-large t-avatar:not(:last-child) {
margin-right: var(--td-avatar-group-margin-left-large, -8px);
}
.t-avatar-group__collapse--slot {
float: left;
}
.t-avatar-group__collapse--slot:not(:empty) + .t-avatar-group__collapse--default {
display: none;
float: left;
}
.t-avatar-group__collapse--slot:empty + .t-avatar-group__collapse--default {
display: block;
float: left;
}
.t-avatar-group .t-is-hidden {
display: none;
}

12
miniprogram_npm/tdesign-miniprogram/avatar/avatar.d.ts vendored
View File

@@ -1,8 +1,7 @@
/// <reference types="miniprogram-api-typings" />
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class Avatar extends SuperComponent {
options: {
multipleSlots: boolean;
};
options: WechatMiniprogram.Component.ComponentOptions;
externalClasses: string[];
properties: import("./type").TdAvatarProps;
data: {
@@ -10,17 +9,14 @@ export default class Avatar extends SuperComponent {
classPrefix: string;
isShow: boolean;
zIndex: number;
isChild: boolean;
};
relations: RelationsOptions;
observers: {
icon(icon: any): void;
};
methods: {
updateIsChild(isChild: any): void;
updateShow(): void;
updateSize(size: any): void;
hide(): void;
updateCascading(zIndex: any): void;
onLoadError(e: WechatMiniprogram.CustomEvent): void;
};
onLoadError(e: any): void;
}

41
miniprogram_npm/tdesign-miniprogram/avatar/avatar.js
View File

@@ -15,8 +15,10 @@ let Avatar = class Avatar extends SuperComponent {
super(...arguments);
this.options = {
multipleSlots: true,
styleIsolation: 'apply-shared',
};
this.externalClasses = [
'class',
`${prefix}-class`,
`${prefix}-class-image`,
`${prefix}-class-icon`,
@@ -29,13 +31,16 @@ let Avatar = class Avatar extends SuperComponent {
classPrefix: name,
isShow: true,
zIndex: 0,
isChild: false,
};
this.relations = {
'./avatar-group': {
'../avatar-group/avatar-group': {
type: 'ancestor',
linked(target) {
this.parent = target;
linked(parent) {
var _a;
this.parent = parent;
this.setData({
size: (_a = this.data.size) !== null && _a !== void 0 ? _a : parent.data.size,
});
},
},
};
@@ -46,34 +51,24 @@ let Avatar = class Avatar extends SuperComponent {
},
};
this.methods = {
updateIsChild(isChild) {
this.setData({
isChild,
});
},
updateShow() {
hide() {
this.setData({
isShow: false,
});
},
updateSize(size) {
if (this.properties.size)
return;
this.setData({ size });
},
updateCascading(zIndex) {
this.setData({ zIndex });
},
onLoadError(e) {
if (this.properties.hideOnLoadFailed) {
this.setData({
isShow: false,
});
}
this.triggerEvent('error', e.detail);
},
};
}
onLoadError(e) {
if (this.properties.hideOnLoadFailed) {
this.setData({
isShow: false,
});
}
this.triggerEvent('error', e.detail);
}
};
Avatar = __decorate([
wxComponent()

11
miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxml
View File

@@ -2,7 +2,7 @@
<wxs src="../common/utils.wxs" module="_" />
<wxs src="./avatar.wxs" module="this" />
<view class="{{classPrefix}}__wrapper {{prefix}}-class" style="{{this.getAvatarStyles(isShow, zIndex, customStyle)}}">
<view class="{{classPrefix}}__wrapper class {{prefix}}-class" style="{{this.getStyles(isShow, zIndex, style)}}">
<t-badge
color="{{badgeProps.color}}"
content="{{badgeProps.content}}"
@@ -18,18 +18,17 @@
t-class-count="{{badgeProps.tClassCount}}"
>
<view
class="{{this.getAvatarOuterClass(classPrefix, size, shape, bordered)}} {{prefix}}-class-image "
style="{{this.getAvatarSizePx(size)}}"
class="{{this.getClass(classPrefix, size, shape, bordered)}} {{prefix}}-class-image"
style="{{this.getSize(size)}}"
aria-label="{{ ariaLabel || alt ||'头像'}}"
aria-role="{{ ariaRole || 'img'}}"
aria-hidden="{{ ariaHidden }}"
>
<t-image
wx:if="{{image}}"
class="{{prefix}}-image"
t-class="{{classPrefix}}__image"
t-class="{{prefix}}-image {{classPrefix}}__image"
t-class-load="{{prefix}}-class-alt"
customStyle="{{imageProps.customStyle}}"
style="{{imageProps.style}}"
src="{{image}}"
mode="{{imageProps.mode || 'aspectFill'}}"
lazy="{{imageProps.lazy}}"

16
miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxs
View File

@@ -1,26 +1,26 @@
module.exports = {
getAvatarOuterClass: function (classPrefix, size, shape, bordered) {
var isIncludePx = size.indexOf('px') > -1;
var borderSize = isIncludePx ? 'medium' : size;
getClass: function (classPrefix, size, shape, bordered) {
var hasPx = (size || '').indexOf('px') > -1;
var borderSize = hasPx ? 'medium' : size;
var classNames = [
classPrefix,
classPrefix + (shape === 'round' ? '--round' : '--circle'),
bordered ? classPrefix + '--border' + ' ' + classPrefix + '--border--' + borderSize : '',
isIncludePx ? '' : 't-size-' + (size || 'medium').slice(0, 1),
bordered ? classPrefix + '--border' + ' ' + classPrefix + '--border-' + borderSize : '',
hasPx ? '' : classPrefix + '--' + size,
];
return classNames.join(' ');
},
getAvatarSizePx: function (size = 'medium') {
getSize: function (size = 'medium') {
var pxIndex = size.indexOf('px');
if (pxIndex > -1) {
return 'width:' + size + ';height:' + size + ';font-size:' + ((size.slice(0, pxIndex) / 8) * 3 + 2) + 'px;';
}
},
getAvatarStyles: function (isShow, zIndex, customStyle) {
getStyles: function (isShow, zIndex, style) {
var displayStyle = isShow ? '' : 'display: none;';
var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
return displayStyle + zIndexStyle + customStyle;
return displayStyle + zIndexStyle + style;
},
};

24
miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxss
View File

@@ -33,28 +33,34 @@
background-color: var(--td-avatar-bg-color, var(--td-primary-color-2, #d4e3fc));
color: var(--td-avatar-content-color, var(--td-primary-color, #0052d9));
}
.t-avatar.t-size-l {
.t-avatar__wrapper {
display: inline-flex;
position: relative;
vertical-align: top;
margin-left: var(--td-avatar-margin-left, 0);
}
.t-avatar--large {
width: var(--td-avatar-large-width, 128rpx);
height: var(--td-avatar-large-width, 128rpx);
font-size: var(--td-avatar-text-large-font-size, 16px);
}
.t-avatar.t-size-l .t-avatar__icon {
.t-avatar--large .t-avatar__icon {
font-size: var(--td-avatar-icon-large-font-size, 64rpx);
}
.t-avatar.t-size-m {
.t-avatar--medium {
width: var(--td-avatar-medium-width, 96rpx);
height: var(--td-avatar-medium-width, 96rpx);
font-size: var(--td-avatar-text-medium-font-size, var(--td-font-size-base, 28rpx));
}
.t-avatar.t-size-m .t-avatar__icon {
.t-avatar--medium .t-avatar__icon {
font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
}
.t-avatar.t-size-s {
.t-avatar--small {
width: var(--td-avatar-small-width, 80rpx);
height: var(--td-avatar-small-width, 80rpx);
font-size: var(--td-avatar-text-small-font-size, var(--td-font-size-s, 24rpx));
}
.t-avatar.t-size-s .t-avatar__icon {
.t-avatar--small .t-avatar__icon {
font-size: var(--td-avatar-icon-small-font-size, 40rpx);
}
.t-avatar .t-image,
@@ -87,12 +93,12 @@
border-color: var(--td-avatar-border-color, #fff);
border-style: solid;
}
.t-avatar--border--small {
.t-avatar--border-small {
border-width: var(--td-avatar-border-width-small, 4rpx);
}
.t-avatar--border--medium {
.t-avatar--border-medium {
border-width: var(--td-avatar-border-width-medium, 6rpx);
}
.t-avatar--border--large {
.t-avatar--border-large {
border-width: var(--td-avatar-border-width-large, 8rpx);
}

12
miniprogram_npm/tdesign-miniprogram/avatar/props.js
View File

@@ -6,7 +6,11 @@ const props = {
badgeProps: {
type: Object,
},
customStyle: {
bordered: {
type: Boolean,
value: false,
},
style: {
type: String,
value: '',
},
@@ -33,11 +37,7 @@ const props = {
},
size: {
type: String,
value: '',
},
bordered: {
type: Boolean,
value: false,
value: 'medium',
},
};
export default props;

37
miniprogram_npm/tdesign-miniprogram/avatar/type.d.ts vendored
View File

@@ -8,7 +8,11 @@ export interface TdAvatarProps {
type: ObjectConstructor;
value?: BadgeProps;
};
customStyle?: {
bordered?: {
type: BooleanConstructor;
value?: boolean;
};
style?: {
type: StringConstructor;
value?: string;
};
@@ -40,36 +44,5 @@ export interface TdAvatarProps {
type: StringConstructor;
value?: string;
};
bordered?: {
type: BooleanConstructor;
value?: boolean;
};
}
export interface TdAvatarGroupProps {
cascading?: {
type: StringConstructor;
value?: CascadingValue;
};
collapseAvatar?: {
type: StringConstructor;
value?: string;
};
customStyle?: {
type: StringConstructor;
value?: string;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-image', 't-class-content'];
};
max?: {
type: NumberConstructor;
value?: number;
};
size?: {
type: StringConstructor;
value?: string;
};
}
export declare type ShapeEnum = 'circle' | 'round';
export declare type CascadingValue = 'left-up' | 'right-up';