1.22

2024-01-22 08:55:30 +08:00
parent 22f3da6c33
commit 2bd2fd31ac
3460 changed files with 136738 additions and 0 deletions
@@ -0,0 +1,35 @@
+:: BASE_DOC ::
+
+## API
+### Avatar Props
+
+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
+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 / 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 | medium | size | N
+
+### Avatar Events
+
+name | params | description
+-- | -- | --
+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-group/type.ts) | N
+collapse-avatar | String / Slot | - | \- | 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
@@ -0,0 +1,89 @@
+---
+title: Avatar 头像
+description: 用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-85%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-avatar": "tdesign-miniprogram/avatar/avatar",
+  "t-avatar-group": "tdesign-miniprogram/avatar-group/avatar-group"
+}
+```
+
+## 代码演示
+
+### 头像类型
+
+图片头像
+
+{{ image-avatar }}
+
+字符头像
+
+{{ character-avatar }}
+
+图标头像
+
+{{ icon-avatar }}
+
+徽标头像
+
+{{ badge-avatar }}
+
+
+### 组合头像
+
+纯展示
+
+{{ exhibition }}
+
+带操作
+
+{{ action }}
+
+### 头像尺寸
+
+头像 large/medium/small 尺寸
+
+{{ size }}
+
+## API
+### Avatar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+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
+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 | medium | 尺寸，示例值：small/medium/large/24px/38px 等 | N
+
+### Avatar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+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-group/type.ts) | N
+collapse-avatar | String / Slot | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` | 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
@@ -0,0 +1,23 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class Avatar extends SuperComponent {
+    options: {
+        multipleSlots: boolean;
+    };
+    externalClasses: string[];
+    properties: import("./type").TdAvatarProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        isShow: boolean;
+        zIndex: number;
+    };
+    relations: RelationsOptions;
+    observers: {
+        icon(icon: any): void;
+    };
+    methods: {
+        hide(): void;
+        updateCascading(zIndex: any): void;
+        onLoadError(e: WechatMiniprogram.CustomEvent): void;
+    };
+}
@@ -0,0 +1,74 @@
+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 avatarProps from './props';
+import { setIcon } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-avatar`;
+let Avatar = class Avatar extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.options = {
+            multipleSlots: true,
+        };
+        this.externalClasses = [
+            `${prefix}-class`,
+            `${prefix}-class-image`,
+            `${prefix}-class-icon`,
+            `${prefix}-class-alt`,
+            `${prefix}-class-content`,
+        ];
+        this.properties = avatarProps;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            isShow: true,
+            zIndex: 0,
+        };
+        this.relations = {
+            '../avatar-group/avatar-group': {
+                type: 'ancestor',
+                linked(parent) {
+                    var _a;
+                    this.parent = parent;
+                    this.setData({
+                        size: (_a = this.data.size) !== null && _a !== void 0 ? _a : parent.data.size,
+                    });
+                },
+            },
+        };
+        this.observers = {
+            icon(icon) {
+                const obj = setIcon('icon', icon, '');
+                this.setData(Object.assign({}, obj));
+            },
+        };
+        this.methods = {
+            hide() {
+                this.setData({
+                    isShow: false,
+                });
+            },
+            updateCascading(zIndex) {
+                this.setData({ zIndex });
+            },
+            onLoadError(e) {
+                if (this.properties.hideOnLoadFailed) {
+                    this.setData({
+                        isShow: false,
+                    });
+                }
+                this.triggerEvent('error', e.detail);
+            },
+        };
+    }
+};
+Avatar = __decorate([
+    wxComponent()
+], Avatar);
+export default Avatar;
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-badge": "../badge/badge",
+    "t-image": "../image/image"
+  }
+}
@@ -0,0 +1,52 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="../common/utils.wxs" module="_" />
+<wxs src="./avatar.wxs" module="this" />
+
+<view class="{{classPrefix}}__wrapper {{prefix}}-class" style="{{this.getStyles(isShow, zIndex, customStyle)}}">
+  <t-badge
+    color="{{badgeProps.color}}"
+    content="{{badgeProps.content}}"
+    count="{{badgeProps.count}}"
+    dot="{{badgeProps.dot}}"
+    max-count="{{badgeProps.maxCount || 99}}"
+    offset="{{badgeProps.offset}}"
+    shape="{{badgeProps.shape || 'circle'}}"
+    show-zero="{{badgeProps.showZero}}"
+    size="{{badgeProps.size || 'medium'}}"
+    t-class="{{badgeProps.tClass}}"
+    t-class-content="{{badgeProps.tClassContent}}"
+    t-class-count="{{badgeProps.tClassCount}}"
+  >
+    <view
+      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-load="{{prefix}}-class-alt"
+        customStyle="{{imageProps.customStyle}}"
+        src="{{image}}"
+        mode="{{imageProps.mode || 'aspectFill'}}"
+        lazy="{{imageProps.lazy}}"
+        loading="{{imageProps.loading}}"
+        shape="{{imageProps.shape || 'round'}}"
+        webp="{{imageProps.webp}}"
+        error="{{alt}}"
+        bind:error="onLoadError"
+      />
+      <template
+        wx:elif="{{iconName || _.isNoEmptyObj(iconData)}}"
+        is="icon"
+        data="{{class: classPrefix + '__icon', tClass: prefix + '-class-icon', name: iconName, ...iconData}}"
+      />
+      <view wx:else class="{{classPrefix}}__text {{prefix}}-class-content">
+        <slot />
+      </view>
+    </view>
+  </t-badge>
+</view>
@@ -0,0 +1,26 @@
+module.exports = {
+  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 : '',
+      hasPx ? '' : classPrefix + '--' + size,
+    ];
+    return classNames.join(' ');
+  },
+
+  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;';
+    }
+  },
+
+  getStyles: function (isShow, zIndex, customStyle) {
+    var displayStyle = isShow ? '' : 'display: none;';
+    var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
+    return displayStyle + zIndexStyle + customStyle;
+  },
+};
@@ -0,0 +1,102 @@
+.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 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  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--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--large .t-avatar__icon {
+  font-size: var(--td-avatar-icon-large-font-size, 64rpx);
+}
+.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--medium .t-avatar__icon {
+  font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
+}
+.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--small .t-avatar__icon {
+  font-size: var(--td-avatar-icon-small-font-size, 40rpx);
+}
+.t-avatar .t-image,
+.t-avatar__image {
+  width: 100%;
+  height: 100%;
+}
+.t-avatar--circle {
+  border-radius: var(--td-avatar-circle-border-radius, var(--td-radius-circle, 50%));
+  overflow: hidden;
+}
+.t-avatar--round {
+  border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 12rpx));
+  overflow: hidden;
+}
+.t-avatar__text,
+.t-avatar__icon {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-avatar__text:empty,
+.t-avatar__icon:empty {
+  width: 0;
+  height: 0;
+}
+.t-avatar--border {
+  border-color: var(--td-avatar-border-color, #fff);
+  border-style: solid;
+}
+.t-avatar--border-small {
+  border-width: var(--td-avatar-border-width-small, 4rpx);
+}
+.t-avatar--border-medium {
+  border-width: var(--td-avatar-border-width-medium, 6rpx);
+}
+.t-avatar--border-large {
+  border-width: var(--td-avatar-border-width-large, 8rpx);
+}
+.t-avatar__wrapper {
+  display: inline-flex;
+  position: relative;
+}
@@ -0,0 +1,3 @@
+import { TdAvatarProps } from './type';
+declare const props: TdAvatarProps;
+export default props;
@@ -0,0 +1,43 @@
+const props = {
+    alt: {
+        type: String,
+        value: '',
+    },
+    badgeProps: {
+        type: Object,
+    },
+    bordered: {
+        type: Boolean,
+        value: false,
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    externalClasses: {
+        type: Array,
+    },
+    hideOnLoadFailed: {
+        type: Boolean,
+        value: false,
+    },
+    icon: {
+        type: null,
+    },
+    image: {
+        type: String,
+        value: '',
+    },
+    imageProps: {
+        type: Object,
+    },
+    shape: {
+        type: String,
+        value: 'circle',
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+};
+export default props;
@@ -0,0 +1,48 @@
+import { BadgeProps } from '../badge/index';
+export interface TdAvatarProps {
+    alt?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    badgeProps?: {
+        type: ObjectConstructor;
+        value?: BadgeProps;
+    };
+    bordered?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content'];
+    };
+    hideOnLoadFailed?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    icon?: {
+        type: null;
+        value?: string | object;
+    };
+    image?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    imageProps?: {
+        type: ObjectConstructor;
+        value?: object;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: ShapeEnum;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: string;
+    };
+}
+export declare type ShapeEnum = 'circle' | 'round';
@@ -0,0 +1 @@
+export {};