白色主题

miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.d.ts

@@ -0,0 +1,28 @@
+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;
+    lifetimes: {
+        attached(): void;
+        ready(): void;
+    };
+    observers: {
+        'cascading, size'(): void;
+    };
+    methods: {
+        setClass(): void;
+        handleMax(): void;
+        handleChildCascading(): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.js

@@ -0,0 +1,86 @@
+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 './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/avatar': {
+                type: 'descendant',
+            },
+        };
+        this.lifetimes = {
+            attached() {
+                this.setClass();
+            },
+            ready() {
+                this.setData({
+                    length: this.$children.length,
+                });
+                this.handleMax();
+                this.handleChildCascading();
+            },
+        };
+        this.observers = {
+            'cascading, size'() {
+                this.setClass();
+            },
+        };
+        this.methods = {
+            setClass() {
+                const { cascading, size } = this.properties;
+                const direction = cascading.split('-')[0];
+                const classList = [
+                    name,
+                    `${prefix}-class`,
+                    `${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size}`,
+                ];
+                this.setData({
+                    className: classList.join(' '),
+                });
+            },
+            handleMax() {
+                const { max } = this.data;
+                const len = this.$children.length;
+                if (!max || max > len)
+                    return;
+                const restAvatars = this.$children.splice(max, len - max);
+                restAvatars.forEach((child) => {
+                    child.hide();
+                });
+            },
+            handleChildCascading() {
+                if (this.properties.cascading === 'right-up')
+                    return;
+                const defaultZIndex = 100;
+                this.$children.forEach((child, index) => {
+                    child.updateCascading(defaultZIndex - index * 10);
+                });
+            },
+        };
+    }
+};
+AvatarGroup = __decorate([
+    wxComponent()
+], AvatarGroup);
+export default AvatarGroup;

miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.json

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

miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxml

@@ -0,0 +1,19 @@
+<view style="{{ style }}" class="{{className}}">
+  <slot />
+  <!-- 自定义折叠元素 -->
+  <view class="{{classPrefix}}__collapse--slot">
+    <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
+      size="{{size}}"
+      icon="{{ collapseAvatar ? '' : 'user-add'}}"
+      aria-role="none"
+      >{{collapseAvatar}}</t-avatar
+    >
+  </view>
+</view>

miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxss

@@ -0,0 +1,60 @@
+.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 {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -4px);
+}
+.t-avatar-group-offset-left-medium {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -6px);
+}
+.t-avatar-group-offset-left-large {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-large, -8px);
+}
+.t-avatar-group-offset-right-small {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -4px);
+}
+.t-avatar-group-offset-right-medium {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -6px);
+}
+.t-avatar-group-offset-right-large {
+  --td-avatar-margin-left: 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;
+}

miniprogram_npm/tdesign-miniprogram/avatar-group/props.d.ts

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

miniprogram_npm/tdesign-miniprogram/avatar-group/props.js

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

miniprogram_npm/tdesign-miniprogram/avatar-group/type.d.ts

@@ -0,0 +1,27 @@
+export interface TdAvatarGroupProps {
+    cascading?: {
+        type: StringConstructor;
+        value?: CascadingValue;
+    };
+    collapseAvatar?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    style?: {
+        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 CascadingValue = 'left-up' | 'right-up';

miniprogram_npm/tdesign-miniprogram/avatar-group/type.js

@@ -0,0 +1 @@
+export {};