feature 代码提交

app.js

@@ -0,0 +1,19 @@
+// app.js
+App({
+  onLaunch() {
+    // 展示本地存储能力
+    const logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

app.json

@@ -0,0 +1,38 @@
+{
+  "pages": [
+    "pages/homepage/homepage",
+    "pages/mine/mine"
+  ],
+  "tabBar": {
+    "color": "#a9b7b7",
+    "selectedColor": "#11cd6e",
+    "borderStyle": "white",
+    "position": "bottom",
+    "list": [
+      {
+        "selectedIconPath": "static_file/1.png",
+        "iconPath": "static_file/1.png",
+        "pagePath": "pages/homepage/homepage",
+        "text": "首页"
+      },
+      {
+        "selectedIconPath": "static_file/1.png",
+        "iconPath": "static_file/1.png",
+        "pagePath": "pages/mine/mine",
+        "text": "我的"
+      }
+    ]
+  },
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarTextStyle": "white",
+    "navigationBarTitleText": "智惠水务",
+    "navigationBarBackgroundColor": "#07f"
+  },
+  "componentFramework": "glass-easel",
+  "sitemapLocation": "sitemap.json",
+  "lazyCodeLoading": "requiredComponents",
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button"
+  }
+}

app.wxss

@@ -0,0 +1,10 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

miniprogram_npm/tdesign-miniprogram/action-sheet/README.en-US.md

@@ -0,0 +1,52 @@
+:: BASE_DOC ::
+
+## API
+
+### ActionSheet Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+align | String | center | `0.29.0`。options: center/left | N
+cancel-text | String | - | \- | N
+count | Number | 8 | \- | N
+description | String | - | `0.29.0` | N
+items | Array | - | required。Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean;icon?: string;suffixIcon?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
+popup-props | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | N
+show-cancel | Boolean | true | \- | N
+show-overlay | Boolean | true | \- | N
+theme | String | list | options: list/grid | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | false | required | Y
+default-visible | Boolean | undefined | required。uncontrolled property | Y
+
+### ActionSheet Events
+
+name | params | description
+-- | -- | --
+cancel | \- | \-
+close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
+selected | `(selected: ActionSheetItem \| string, index: number)` | \-
+### ActionSheet External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-cancel | \-
+t-class-content | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-action-sheet-border-color | @gray-color-1 | - 
+--td-action-sheet-border-radius | @radius-extra-large | - 
+--td-action-sheet-cancel-color | @font-gray-1 | - 
+--td-action-sheet-cancel-height | 96rpx | - 
+--td-action-sheet-color | @font-gray-1 | - 
+--td-action-sheet-description-color | @font-gray-3 | - 
+--td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
+--td-action-sheet-list-item-height | 112rpx | - 
+--td-action-sheet-text-align | center | -

miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.d.ts

@@ -0,0 +1,87 @@
+import { SuperComponent } from '../common/src/index';
+export default class ActionSheet extends SuperComponent {
+    static show: (options: import("./show").ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
+    behaviors: string[];
+    externalClasses: string[];
+    properties: {
+        align?: {
+            type: StringConstructor;
+            value?: "center" | "left";
+        };
+        cancelText?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        count?: {
+            type: NumberConstructor;
+            value?: number;
+        };
+        description?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        items: {
+            type: ArrayConstructor;
+            value?: (string | import("./type").ActionSheetItem)[];
+            required?: boolean;
+        };
+        popupProps?: {
+            type: ObjectConstructor;
+            value?: import("../popup").TdPopupProps;
+        };
+        showCancel?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        showOverlay?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        theme?: {
+            type: StringConstructor;
+            value?: "list" | "grid";
+        };
+        usingCustomNavbar?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        visible: {
+            type: BooleanConstructor;
+            value?: boolean;
+            required?: boolean;
+        };
+        defaultVisible: {
+            type: BooleanConstructor;
+            value?: boolean;
+            required?: boolean;
+        };
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+        gridThemeItems: any[];
+        currentSwiperIndex: number;
+        defaultPopUpProps: {};
+        defaultPopUpzIndex: number;
+    };
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    observers: {
+        'visible, items'(visible: boolean): void;
+    };
+    methods: {
+        init(): void;
+        memoInitialData(): void;
+        splitGridThemeActions(): void;
+        show(options: any): void;
+        close(): void;
+        onPopupVisibleChange({ detail }: {
+            detail: any;
+        }): void;
+        onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
+        onSelect(event: WechatMiniprogram.TouchEvent): void;
+        onCancel(): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.js

@@ -0,0 +1,111 @@
+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 { chunk } from '../common/utils';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import { ActionSheetTheme, show } from './show';
+import props from './props';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+const { prefix } = config;
+const name = `${prefix}-action-sheet`;
+let ActionSheet = class ActionSheet extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.behaviors = [useCustomNavbar];
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
+        this.properties = Object.assign({}, props);
+        this.data = {
+            prefix,
+            classPrefix: name,
+            gridThemeItems: [],
+            currentSwiperIndex: 0,
+            defaultPopUpProps: {},
+            defaultPopUpzIndex: 11500,
+        };
+        this.controlledProps = [
+            {
+                key: 'visible',
+                event: 'visible-change',
+            },
+        ];
+        this.observers = {
+            'visible, items'(visible) {
+                if (!visible)
+                    return;
+                this.init();
+            },
+        };
+        this.methods = {
+            init() {
+                this.memoInitialData();
+                this.splitGridThemeActions();
+            },
+            memoInitialData() {
+                this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
+            },
+            splitGridThemeActions() {
+                if (this.data.theme !== ActionSheetTheme.Grid)
+                    return;
+                this.setData({
+                    gridThemeItems: chunk(this.data.items, this.data.count),
+                });
+            },
+            show(options) {
+                this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true }));
+                this.splitGridThemeActions();
+                this.autoClose = true;
+                this._trigger('visible-change', { visible: true });
+            },
+            close() {
+                this.triggerEvent('close', { trigger: 'command' });
+                this._trigger('visible-change', { visible: false });
+            },
+            onPopupVisibleChange({ detail }) {
+                if (!detail.visible) {
+                    this.triggerEvent('close', { trigger: 'overlay' });
+                    this._trigger('visible-change', { visible: false });
+                }
+                if (this.autoClose) {
+                    this.setData({ visible: false });
+                    this.autoClose = false;
+                }
+            },
+            onSwiperChange(e) {
+                const { current } = e.detail;
+                this.setData({
+                    currentSwiperIndex: current,
+                });
+            },
+            onSelect(event) {
+                const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data;
+                const { index } = event.currentTarget.dataset;
+                const isSwiperMode = theme === ActionSheetTheme.Grid;
+                const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index];
+                const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index;
+                if (item) {
+                    this.triggerEvent('selected', { selected: item, index: realIndex });
+                    if (!item.disabled) {
+                        this.triggerEvent('close', { trigger: 'select' });
+                        this._trigger('visible-change', { visible: false });
+                    }
+                }
+            },
+            onCancel() {
+                this.triggerEvent('cancel');
+                if (this.autoClose) {
+                    this.setData({ visible: false });
+                    this.autoClose = false;
+                }
+            },
+        };
+    }
+};
+ActionSheet.show = show;
+ActionSheet = __decorate([
+    wxComponent()
+], ActionSheet);
+export default ActionSheet;

miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-popup": "../popup/popup",
+    "t-grid": "../grid/grid",
+    "t-grid-item": "../grid-item/grid-item"
+  }
+}

miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxml

@@ -0,0 +1,49 @@
+<wxs src="./action-sheet.wxs" module="_this" />
+<wxs src="../common/utils.wxs" module="_" />
+<import src="./template/list.wxml" />
+<import src="./template/grid.wxml" />
+
+<view id="{{classPrefix}}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
+  <t-popup
+    visible="{{visible}}"
+    placement="bottom"
+    usingCustomNavbar="{{usingCustomNavbar}}"
+    bind:visible-change="onPopupVisibleChange"
+    show-overlay="{{showOverlay}}"
+    z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}"
+    overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}"
+  >
+    <view
+      class="{{_.cls(classPrefix + '__content', [['grid', gridThemeItems.length]])}} {{prefix}}-class-content"
+      tabindex="0"
+    >
+      <view wx:if="{{description}}" tabindex="0" class="{{_.cls(classPrefix + '__description', [align])}}"
+        >{{description}}</view
+      >
+      <block wx:if="{{gridThemeItems.length}}">
+        <template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
+      </block>
+      <view wx:elif="{{items && items.length}}" class="{{classPrefix}}__list">
+        <block wx:for="{{ items }}" wx:key="index">
+          <template
+            is="list"
+            data="{{index, classPrefix, listThemeItemClass: _.cls(classPrefix + '__list-item', [align, [disabled, item.disabled]]), item}}"
+          />
+        </block>
+      </view>
+    </view>
+    <slot />
+    <view wx:if="{{showCancel}}" class="{{classPrefix}}__footer">
+      <view class="{{classPrefix}}__gap-{{theme}}" />
+      <view
+        class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
+        hover-class="{{classPrefix}}__cancel--hover"
+        hover-stay-time="70"
+        bind:tap="onCancel"
+        aria-role="button"
+      >
+        {{ cancelText || '取消' }}
+      </view>
+    </view>
+  </t-popup>
+</view>

miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxs

@@ -0,0 +1,19 @@
+var getListThemeItemClass = function (props) {
+  var classPrefix = props.classPrefix;
+  var item = props.item;
+  var prefix = props.prefix;
+  var classList = [classPrefix + '__list-item'];
+  if (item.disabled) {
+    classList.push(prefix + '-is-disabled');
+  }
+  return classList.join(' ');
+};
+
+var isImage = function (name) {
+  return name.indexOf('/') !== -1;
+};
+
+module.exports = {
+  getListThemeItemClass: getListThemeItemClass,
+  isImage: isImage,
+};

miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxss

@@ -0,0 +1,169 @@
+.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-action-sheet__content {
+  color: var(--td-action-sheet-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  border-top-left-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
+  border-top-right-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  overflow: hidden;
+}
+.t-action-sheet__content--grid {
+  padding-top: 16rpx;
+}
+.t-action-sheet__content:focus {
+  outline: 0;
+}
+.t-action-sheet__grid {
+  padding-bottom: 16rpx;
+}
+.t-action-sheet__grid--swiper {
+  padding-bottom: 48rpx;
+}
+.t-action-sheet__description {
+  color: var(--td-action-sheet-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  line-height: 44rpx;
+  font-size: 28rpx;
+  text-align: var(--td-action-sheet-text-align, center);
+  padding: 24rpx 32rpx;
+  position: relative;
+}
+.t-action-sheet__description:focus {
+  outline: 0;
+}
+.t-action-sheet__description::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-action-sheet-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-action-sheet__description::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-action-sheet__description--left {
+  text-align: left;
+}
+.t-action-sheet__description--left::after {
+  left: 32rpx;
+}
+.t-action-sheet__list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: var(--td-action-sheet-list-item-height, 112rpx);
+  padding: 0 32rpx;
+}
+.t-action-sheet__list-item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-action-sheet-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-action-sheet__list-item::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-action-sheet__list-item:focus {
+  outline: 0;
+}
+.t-action-sheet__list-item--left {
+  justify-content: start;
+}
+.t-action-sheet__list-item--left::after {
+  left: 32rpx;
+}
+.t-action-sheet__list-item--disabled {
+  color: var(--td-action-sheet-list-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}
+.t-action-sheet__list-item-text {
+  font-size: var(--td-font-size-m, 32rpx);
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-action-sheet__list-item-icon {
+  margin-right: 16rpx;
+}
+.t-action-sheet__list-item-icon--suffix {
+  margin-left: auto;
+}
+.t-action-sheet__swiper-wrap {
+  margin-top: 8rpx;
+  position: relative;
+}
+.t-action-sheet__footer {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-action-sheet__gap-list {
+  height: 16rpx;
+  background-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-action-sheet__gap-grid {
+  height: 1rpx;
+  background-color: var(--td-action-sheet-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-action-sheet__cancel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--td-action-sheet-cancel-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  height: var(--td-action-sheet-cancel-height, 96rpx);
+}
+.t-action-sheet__dots {
+  position: absolute;
+  left: 50%;
+  bottom: 32rpx;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+}
+.t-action-sheet__dots-item {
+  width: 16rpx;
+  height: 16rpx;
+  background-color: #dcdcdc;
+  border-radius: 50%;
+  margin: 0 16rpx;
+  transition: all 0.4s ease-in;
+}
+.t-action-sheet__dots-item.t-is-active {
+  background-color: #0052d9;
+}

miniprogram_npm/tdesign-miniprogram/action-sheet/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="miniprogram-api-typings" />
+import { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption } from './show';
+export { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption };
+declare const _default: {
+    show(options: ActionSheetShowOption): WechatMiniprogram.Component.TrivialInstance;
+    close(options: ActionSheetShowOption): void;
+};
+export default _default;

miniprogram_npm/tdesign-miniprogram/action-sheet/index.js

@@ -0,0 +1,10 @@
+import { show, close, ActionSheetTheme } from './show';
+export { ActionSheetTheme };
+export default {
+    show(options) {
+        return show(options);
+    },
+    close(options) {
+        return close(options);
+    },
+};

miniprogram_npm/tdesign-miniprogram/action-sheet/props.d.ts

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

miniprogram_npm/tdesign-miniprogram/action-sheet/props.js

@@ -0,0 +1,53 @@
+const props = {
+    align: {
+        type: String,
+        value: 'center',
+    },
+    cancelText: {
+        type: String,
+        value: '',
+    },
+    count: {
+        type: Number,
+        value: 8,
+    },
+    description: {
+        type: String,
+        value: '',
+    },
+    items: {
+        type: Array,
+        required: true,
+    },
+    popupProps: {
+        type: Object,
+        value: {},
+    },
+    showCancel: {
+        type: Boolean,
+        value: true,
+    },
+    showOverlay: {
+        type: Boolean,
+        value: true,
+    },
+    theme: {
+        type: String,
+        value: 'list',
+    },
+    usingCustomNavbar: {
+        type: Boolean,
+        value: false,
+    },
+    visible: {
+        type: Boolean,
+        value: null,
+        required: true,
+    },
+    defaultVisible: {
+        type: Boolean,
+        value: false,
+        required: true,
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/action-sheet/show.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+export interface ActionSheetItem {
+    label: string;
+    color?: string;
+    disabled?: boolean;
+    icon?: string;
+}
+declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+export declare enum ActionSheetTheme {
+    List = "list",
+    Grid = "grid"
+}
+interface ActionSheetProps {
+    align: 'center' | 'left';
+    cancelText?: string;
+    count?: number;
+    description: string;
+    items: Array<string | ActionSheetItem>;
+    showCancel?: boolean;
+    theme?: ActionSheetTheme;
+    visible: boolean;
+    defaultVisible?: boolean;
+}
+export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
+    context?: Context;
+    selector?: string;
+}
+export declare const show: (options: ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
+export declare const close: (options: ActionSheetShowOption) => void;
+export {};

miniprogram_npm/tdesign-miniprogram/action-sheet/show.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getInstance } from '../common/utils';
+export var ActionSheetTheme;
+(function (ActionSheetTheme) {
+    ActionSheetTheme["List"] = "list";
+    ActionSheetTheme["Grid"] = "grid";
+})(ActionSheetTheme || (ActionSheetTheme = {}));
+export const show = function (options) {
+    const _a = Object.assign({}, options), { context, selector = '#t-action-sheet' } = _a, otherOptions = __rest(_a, ["context", "selector"]);
+    const instance = getInstance(context, selector);
+    if (instance) {
+        instance.show(Object.assign({}, otherOptions));
+        return instance;
+    }
+    console.error('未找到组件,请确认 selector && context 是否正确');
+};
+export const close = function (options) {
+    const { context, selector = '#t-action-sheet' } = Object.assign({}, options);
+    const instance = getInstance(context, selector);
+    if (instance) {
+        instance.close();
+    }
+};

miniprogram_npm/tdesign-miniprogram/action-sheet/template/grid.wxml

@@ -0,0 +1,51 @@
+<template name="grid">
+  <block wx:if="{{gridThemeItems.length === 1}}">
+    <t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}" class="{{classPrefix}}__single-wrap">
+      <t-grid-item
+        t-class="{{classPrefix}}__grid-item"
+        class="{{classPrefix}}__square"
+        wx:for="{{gridThemeItems[0]}}"
+        wx:key="index"
+        bind:tap="onSelect"
+        data-index="{{index}}"
+        icon="{{ { name: item.icon, color: item.color } }}"
+        text="{{item.label || ''}}"
+        image="{{item.image || ''}}"
+        style="--td-grid-item-text-color: {{item.color}}"
+      >
+      </t-grid-item>
+    </t-grid>
+  </block>
+  <block wx:elif="{{gridThemeItems.length > 1}}">
+    <view class="{{classPrefix}}__swiper-wrap">
+      <swiper style="height: 456rpx" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange">
+        <swiper-item wx:for="{{gridThemeItems}}" wx:key="index">
+          <t-grid align="center" t-class="{{classPrefix}}__grid {{classPrefix}}__grid--swiper" column="{{count / 2}}">
+            <t-grid-item
+              t-class="{{classPrefix}}__grid-item"
+              class="{{classPrefix}}__square"
+              wx:for="{{item}}"
+              wx:key="index"
+              data-index="{{index}}"
+              bind:tap="onSelect"
+              icon="{{ { name: item.icon, color: item.color } }}"
+              text="{{item.label || ''}}"
+              image="{{item.image || ''}}"
+              style="--td-grid-item-text-color: {{item.color}}"
+            >
+            </t-grid-item>
+          </t-grid>
+        </swiper-item>
+      </swiper>
+      <view class="{{classPrefix}}__nav">
+        <view class="{{classPrefix}}__dots">
+          <view
+            wx:for="{{gridThemeItems.length}}"
+            wx:key="index"
+            class="{{classPrefix}}__dots-item {{index === currentSwiperIndex ? prefix + '-is-active' : ''}}"
+          />
+        </view>
+      </view>
+    </view>
+  </block>
+</template>

miniprogram_npm/tdesign-miniprogram/action-sheet/template/list.wxml

@@ -0,0 +1,20 @@
+<template name="list">
+  <view
+    data-index="{{index}}"
+    style="{{ item.color ? 'color: ' + item.color : '' }}"
+    class="{{listThemeItemClass}}"
+    bind:tap="onSelect"
+    aria-role="{{ariaRole || 'button'}}"
+    aria-label="{{item.label || item}}"
+    tabindex="0"
+  >
+    <t-icon wx:if="{{item.icon}}" name="{{item.icon}}" class="{{classPrefix}}__list-item-icon" size="48rpx"></t-icon>
+    <view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view>
+    <t-icon
+      wx:if="{{item.suffixIcon}}"
+      name="{{item.suffixIcon}}"
+      class="{{classPrefix}}__list-item-icon {{classPrefix}}__list-item-icon--suffix"
+      size="48rpx"
+    ></t-icon>
+  </view>
+</template>

miniprogram_npm/tdesign-miniprogram/action-sheet/type.d.ts

@@ -0,0 +1,61 @@
+import { PopupProps } from '../popup/index';
+export interface TdActionSheetProps {
+    align?: {
+        type: StringConstructor;
+        value?: 'center' | 'left';
+    };
+    cancelText?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    count?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    description?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    items: {
+        type: ArrayConstructor;
+        value?: Array<string | ActionSheetItem>;
+        required?: boolean;
+    };
+    popupProps?: {
+        type: ObjectConstructor;
+        value?: PopupProps;
+    };
+    showCancel?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    showOverlay?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'list' | 'grid';
+    };
+    usingCustomNavbar?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    visible: {
+        type: BooleanConstructor;
+        value?: boolean;
+        required?: boolean;
+    };
+    defaultVisible: {
+        type: BooleanConstructor;
+        value?: boolean;
+        required?: boolean;
+    };
+}
+export interface ActionSheetItem {
+    label: string;
+    color?: string;
+    disabled?: boolean;
+    icon?: string;
+    suffixIcon?: string;
+}

miniprogram_npm/tdesign-miniprogram/action-sheet/type.js

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

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;
+        onCollapsedItemClick(e: WechatMiniprogram.CustomEvent): void;
+    };
+}

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

@@ -0,0 +1,81 @@
+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.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}`,
+                    `${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size || 'medium'}`,
+                ];
+                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();
+                });
+            },
+            onCollapsedItemClick(e) {
+                this.triggerEvent('collapsed-item-click', e.detail);
+            },
+        };
+    }
+};
+AvatarGroup = __decorate([
+    wxComponent()
+], AvatarGroup);
+export default AvatarGroup;

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

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

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

@@ -0,0 +1,21 @@
+<wxs src="../common/utils.wxs" module="_" />
+
+<view style="{{_._style([style, customStyle])}}" class="{{className}} class">
+  <slot />
+  <!-- 自定义折叠元素 -->
+  <view class="{{classPrefix}}__collapse--slot">
+    <slot name="collapse-avatar" />
+  </view>
+  <!-- 默认折叠元素 -->
+  <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
+    >
+  </view>
+</view>

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

@@ -0,0 +1,214 @@
+.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;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.t-avatar-group-offset-left .t-avatar__wrapper,
+.t-avatar-group-offset-right .t-avatar__wrapper {
+  padding: var(--td-avatar-group-line-spacing, 4rpx) 0;
+}
+.t-avatar-group-offset-left-small,
+.t-avatar-group-offset-right-small {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -16rpx);
+}
+.t-avatar-group-offset-left-medium,
+.t-avatar-group-offset-right-medium {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -16rpx);
+}
+.t-avatar-group-offset-left-large,
+.t-avatar-group-offset-right-large {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-large, -16rpx);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(1) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 1);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(2) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 2);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(3) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 3);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(4) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 4);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(5) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 5);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(6) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 6);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(7) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 7);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(8) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 8);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(9) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 9);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(10) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 10);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(11) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 11);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(12) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 12);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(13) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 13);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(14) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 14);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(15) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 15);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(16) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 16);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(17) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 17);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(18) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 18);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(19) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 19);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(20) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 20);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(21) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 21);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(22) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 22);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(23) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 23);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(24) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 24);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(25) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 25);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(26) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 26);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(27) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 27);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(28) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 28);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(29) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 29);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(30) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 30);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(31) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 31);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(32) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 32);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(33) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 33);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(34) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 34);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(35) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 35);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(36) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 36);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(37) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 37);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(38) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 38);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(39) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 39);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(40) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 40);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(41) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 41);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(42) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 42);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(43) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 43);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(44) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 44);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(45) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 45);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(46) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 46);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(47) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 47);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(48) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 48);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(49) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 49);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(50) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 50);
+}
+.t-avatar-group__collapse--slot,
+.t-avatar-group__collapse--default {
+  z-index: 0;
+  font-weight: 600;
+}
+.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,20 @@
+const props = {
+    cascading: {
+        type: String,
+        value: 'left-up',
+    },
+    collapseAvatar: {
+        type: String,
+    },
+    max: {
+        type: Number,
+    },
+    shape: {
+        type: String,
+    },
+    size: {
+        type: String,
+        value: '',
+    },
+};
+export default props;

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

@@ -0,0 +1,24 @@
+import { ShapeEnum } from '../common/common';
+export interface TdAvatarGroupProps {
+    cascading?: {
+        type: StringConstructor;
+        value?: CascadingValue;
+    };
+    collapseAvatar?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    max?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: ShapeEnum;
+    };
+    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 {};

miniprogram_npm/tdesign-miniprogram/avatar/README.en-US.md

@@ -0,0 +1,91 @@
+:: BASE_DOC ::
+
+## API
+
+### Avatar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+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
+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 | - | 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
+-- | --
+t-class | \-
+t-class-alt | \-
+t-class-content | \-
+t-class-icon | \-
+t-class-image | \-
+
+
+### AvatarGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+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
+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
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-image | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--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 | 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 | - 
+--td-avatar-icon-medium-font-size | 48rpx | - 
+--td-avatar-icon-small-font-size | 40rpx | - 
+--td-avatar-large-width | 128rpx | - 
+--td-avatar-margin-left | 0 | - 
+--td-avatar-medium-width | 96rpx | - 
+--td-avatar-round-border-radius | @radius-default | - 
+--td-avatar-small-width | 80rpx | - 
+--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 | -

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

@@ -0,0 +1,22 @@
+/// <reference types="miniprogram-api-typings" />
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class Avatar extends SuperComponent {
+    options: WechatMiniprogram.Component.ComponentOptions;
+    externalClasses: string[];
+    properties: import("./type").TdAvatarProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        isShow: boolean;
+        zIndex: number;
+        systemInfo: WechatMiniprogram.WindowInfo | WechatMiniprogram.SystemInfo;
+    };
+    relations: RelationsOptions;
+    observers: {
+        icon(icon: any): void;
+    };
+    methods: {
+        hide(): void;
+        onLoadError(e: WechatMiniprogram.CustomEvent): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/avatar/avatar.js

@@ -0,0 +1,73 @@
+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, systemInfo } 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,
+            systemInfo,
+        };
+        this.relations = {
+            '../avatar-group/avatar-group': {
+                type: 'ancestor',
+                linked(parent) {
+                    this.parent = parent;
+                    this.setData({
+                        shape: this.data.shape || parent.data.shape || 'circle',
+                        size: this.data.size || parent.data.size,
+                        bordered: true,
+                    });
+                },
+            },
+        };
+        this.observers = {
+            icon(icon) {
+                const obj = setIcon('icon', icon, '');
+                this.setData(Object.assign({}, obj));
+            },
+        };
+        this.methods = {
+            hide() {
+                this.setData({
+                    isShow: false,
+                });
+            },
+            onLoadError(e) {
+                if (this.properties.hideOnLoadFailed) {
+                    this.setData({
+                        isShow: false,
+                    });
+                }
+                this.triggerEvent('error', e.detail);
+            },
+        };
+    }
+};
+Avatar = __decorate([
+    wxComponent()
+], Avatar);
+export default Avatar;

miniprogram_npm/tdesign-miniprogram/avatar/avatar.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-badge": "../badge/badge",
+    "t-image": "../image/image"
+  }
+}

miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxml

@@ -0,0 +1,54 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="../common/utils.wxs" module="_" />
+<wxs src="./avatar.wxs" module="_this" />
+
+<view
+  class="{{classPrefix}}__wrapper class {{prefix}}-class"
+  style="{{_._style([_this.getStyles(isShow), style, customStyle])}}"
+>
+  <t-badge
+    color="{{badgeProps.color || ''}}"
+    content="{{badgeProps.content || ''}}"
+    count="{{badgeProps.count || 0}}"
+    dot="{{badgeProps.dot || false}}"
+    max-count="{{badgeProps.maxCount || 99}}"
+    offset="{{badgeProps.offset || []}}"
+    shape="{{badgeProps.shape || 'circle'}}"
+    show-zero="{{badgeProps.showZero || false}}"
+    size="{{badgeProps.size || 'medium'}}"
+    t-class="{{badgeProps.tClass}}"
+    t-class-content="{{badgeProps.tClassContent}}"
+    t-class-count="{{badgeProps.tClassCount}}"
+  >
+    <view
+      class="{{_this.getClass(classPrefix, size || 'medium', shape, bordered)}} {{prefix}}-class-image"
+      style="{{_this.getSize(size, systemInfo)}}"
+      aria-label="{{ ariaLabel || alt ||'头像'}}"
+      aria-role="{{ ariaRole || 'img'}}"
+      aria-hidden="{{ ariaHidden }}"
+    >
+      <t-image
+        wx:if="{{image}}"
+        t-class="{{prefix}}-image {{classPrefix}}__image"
+        t-class-load="{{prefix}}-class-alt"
+        style="{{imageProps && imageProps.style || ''}}"
+        src="{{image}}"
+        mode="{{imageProps && imageProps.mode || 'aspectFill'}}"
+        lazy="{{imageProps && imageProps.lazy || false}}"
+        loading="{{imageProps && imageProps.loading || 'default'}}"
+        shape="{{imageProps && imageProps.shape || 'round'}}"
+        webp="{{imageProps && imageProps.webp || false}}"
+        error="{{alt || 'default'}}"
+        bind:error="onLoadError"
+      />
+      <template
+        wx:elif="{{iconName || _.isNoEmptyObj(iconData)}}"
+        is="icon"
+        data="{{tClass: classPrefix + '__icon ' + prefix + '-class-icon', name: iconName, ...iconData}}"
+      />
+      <view wx:else class="{{classPrefix}}__text {{prefix}}-class-content">
+        <slot />
+      </view>
+    </view>
+  </t-badge>
+</view>

miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxs

@@ -0,0 +1,30 @@
+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', systemInfo) {
+    var res = getRegExp('^([0-9]+)(px|rpx)$').exec(size);
+
+    if (res && res.length >= 3) {
+      var px = res[1];
+      if (res[2] === 'rpx') {
+        px = Math.floor((systemInfo.windowWidth * res[1]) / 750);
+      }
+
+      return 'width:' + size + ';height:' + size + ';font-size:' + ((px / 8) * 3 + 2) + 'px';
+    }
+  },
+
+  getStyles: function (isShow) {
+    return isShow ? '' : 'display: none;';
+  },
+};

miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxss

@@ -0,0 +1,104 @@
+.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-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
+  color: var(--td-avatar-content-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.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, var(--td-font-size-xl, 40rpx));
+}
+.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-m, 32rpx));
+}
+.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-base, 28rpx));
+}
+.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, 2rpx);
+}
+.t-avatar--border-medium {
+  border-width: var(--td-avatar-border-width-medium, 4rpx);
+}
+.t-avatar--border-large {
+  border-width: var(--td-avatar-border-width-large, 6rpx);
+}

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

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

miniprogram_npm/tdesign-miniprogram/avatar/props.js

@@ -0,0 +1,35 @@
+const props = {
+    alt: {
+        type: String,
+        value: '',
+    },
+    badgeProps: {
+        type: Object,
+    },
+    bordered: {
+        type: Boolean,
+        value: false,
+    },
+    hideOnLoadFailed: {
+        type: Boolean,
+        value: false,
+    },
+    icon: {
+        type: null,
+    },
+    image: {
+        type: String,
+        value: '',
+    },
+    imageProps: {
+        type: Object,
+    },
+    shape: {
+        type: String,
+    },
+    size: {
+        type: String,
+        value: '',
+    },
+};
+export default props;

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

@@ -0,0 +1,41 @@
+import { BadgeProps } from '../badge/index';
+import { ImageProps } from '../image/index';
+import { ShapeEnum } from '../common/common';
+export interface TdAvatarProps {
+    alt?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    badgeProps?: {
+        type: ObjectConstructor;
+        value?: BadgeProps;
+    };
+    bordered?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    hideOnLoadFailed?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    icon?: {
+        type: null;
+        value?: string | object;
+    };
+    image?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    imageProps?: {
+        type: ObjectConstructor;
+        value?: ImageProps;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: ShapeEnum;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: string;
+    };
+}

miniprogram_npm/tdesign-miniprogram/avatar/type.js

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

miniprogram_npm/tdesign-miniprogram/back-top/README.en-US.md

@@ -0,0 +1,41 @@
+:: BASE_DOC ::
+
+## API
+
+### BackTop Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+fixed | Boolean | true | \- | N
+icon | String / Boolean / Object / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+scroll-top | Number | 0 | \- | N
+text | String | '' | \- | N
+theme | String | round | options: round/half-round/round-dark/half-round-dark | N
+visibility-height | Number | 200 | \- | N
+
+### BackTop Events
+
+name | params | description
+-- | -- | --
+to-top | \- | \-
+### BackTop External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-icon | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-back-top-round-bg-color | @font-white-1 | - 
+--td-back-top-round-border-color | @component-border | - 
+--td-back-top-round-border-radius | @radius-circle | - 
+--td-back-top-round-color | @font-gray-1 | - 
+--td-back-top-round-dark-bg-color | @gray-color-14 | - 
+--td-back-top-round-dark-color | @font-white-1 | -

miniprogram_npm/tdesign-miniprogram/back-top/back-top.d.ts

@@ -0,0 +1,26 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class BackTop extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    properties: import("./type").TdBackTopProps;
+    relations: RelationsOptions;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        _icon: any;
+        hidden: boolean;
+    };
+    observers: {
+        icon(): void;
+        scrollTop(value: number): void;
+    };
+    lifetimes: {
+        ready(): void;
+    };
+    methods: {
+        setIcon(v: any): void;
+        toTop(): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/back-top/back-top.js

@@ -0,0 +1,73 @@
+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 props from './props';
+import { calcIcon } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-back-top`;
+let BackTop = class BackTop extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-text`];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = props;
+        this.relations = {
+            '../pull-down-refresh/pull-down-refresh': {
+                type: 'ancestor',
+            },
+        };
+        this.data = {
+            prefix,
+            classPrefix: name,
+            _icon: null,
+            hidden: true,
+        };
+        this.observers = {
+            icon() {
+                this.setIcon();
+            },
+            scrollTop(value) {
+                const { visibilityHeight } = this.properties;
+                this.setData({ hidden: value < visibilityHeight });
+            },
+        };
+        this.lifetimes = {
+            ready() {
+                const { icon } = this.properties;
+                this.setIcon(icon);
+            },
+        };
+        this.methods = {
+            setIcon(v) {
+                this.setData({
+                    _icon: calcIcon(v, 'backtop'),
+                });
+            },
+            toTop() {
+                var _a;
+                this.triggerEvent('to-top');
+                if (this.$parent) {
+                    (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.setScrollTop(0);
+                    this.setData({ hidden: true });
+                }
+                else {
+                    wx.pageScrollTo({
+                        scrollTop: 0,
+                        duration: 300,
+                    });
+                }
+            },
+        };
+    }
+};
+BackTop = __decorate([
+    wxComponent()
+], BackTop);
+export default BackTop;

miniprogram_npm/tdesign-miniprogram/back-top/back-top.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "t-icon": "../icon/icon"
+  }
+}

miniprogram_npm/tdesign-miniprogram/back-top/back-top.wxml

@@ -0,0 +1,17 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="../common/utils.wxs" module="_" />
+
+<view
+  style="{{_._style([style, customStyle])}}"
+  class="class {{prefix}}-class {{_.cls(classPrefix, [['fixed', fixed], theme])}}"
+  bindtap="toTop"
+  aria-role="button"
+  hidden="{{hidden}}"
+>
+  <view class="{{classPrefix}}__icon" aria-hidden>
+    <slot name="icon" />
+    <template wx:if="{{_icon}}" is="icon" data="{{tClass: prefix + '-class-icon', ..._icon }}" />
+  </view>
+  <view wx:if="{{!!text}}" class="{{classPrefix}}__text--{{theme}} {{prefix}}-class-text">{{text}}</view>
+  <slot />
+</view>

miniprogram_npm/tdesign-miniprogram/back-top/back-top.wxss

@@ -0,0 +1,91 @@
+.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-back-top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: height 0.2s;
+  height: auto;
+}
+.t-back-top--fixed {
+  position: fixed;
+  right: var(--td-spacer, 16rpx);
+  bottom: calc(var(--td-spacer-2, 32rpx) + env(safe-area-inset-bottom));
+}
+.t-back-top--round,
+.t-back-top--round-dark {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: var(--td-back-top-round-border-radius, var(--td-radius-circle, 50%));
+}
+.t-back-top--round,
+.t-back-top--half-round {
+  color: var(--td-back-top-round-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  border: 1rpx solid var(--td-back-top-round-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+  background-color: var(--td-back-top-round-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-back-top--round-dark,
+.t-back-top--half-round-dark {
+  color: var(--td-back-top-round-dark-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
+  background-color: var(--td-back-top-round-dark-bg-color, var(--td-gray-color-13, #242424));
+}
+.t-back-top--half-round,
+.t-back-top--half-round-dark {
+  width: 120rpx;
+  height: 80rpx;
+  border-radius: 0;
+  border-top-left-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
+  border-bottom-left-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
+  flex-direction: row;
+  right: 0;
+}
+.t-back-top__text--round,
+.t-back-top__text--round-dark,
+.t-back-top__text--half-round,
+.t-back-top__text--half-round-dark {
+  font-size: var(--td-font-size, 20rpx);
+  line-height: 24rpx;
+}
+.t-back-top__text--half-round,
+.t-back-top__text--half-round-dark {
+  width: 48rpx;
+}
+.t-back-top__icon:not(:empty) + .t-back-top__text--half-round,
+.t-back-top__icon:not(:empty) + .t-back-top__text--half-round-dark {
+  margin-left: 8rpx;
+}
+.t-back-top__icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 44rpx;
+}

miniprogram_npm/tdesign-miniprogram/back-top/props.d.ts

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

miniprogram_npm/tdesign-miniprogram/back-top/props.js

@@ -0,0 +1,31 @@
+const props = {
+    fixed: {
+        type: Boolean,
+        value: true,
+    },
+    icon: {
+        type: null,
+        value: true,
+    },
+    scrollTop: {
+        type: Number,
+        value: 0,
+    },
+    style: {
+        type: String,
+        value: '',
+    },
+    text: {
+        type: String,
+        value: '',
+    },
+    theme: {
+        type: String,
+        value: 'round',
+    },
+    visibilityHeight: {
+        type: Number,
+        value: 200,
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/back-top/type.d.ts

@@ -0,0 +1,30 @@
+export interface TdBackTopProps {
+    fixed?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    icon?: {
+        type: null;
+        value?: string | boolean | object;
+    };
+    scrollTop?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    text?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
+    };
+    visibilityHeight?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+}

miniprogram_npm/tdesign-miniprogram/back-top/type.js

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

miniprogram_npm/tdesign-miniprogram/badge/README.en-US.md

@@ -0,0 +1,45 @@
+:: BASE_DOC ::
+
+## API
+
+### Badge Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+color | String | - | \- | N
+content | String | - | \- | N
+count | String / Number / Slot | 0 | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+dot | Boolean | false | \- | N
+max-count | Number | 99 | \- | N
+offset | Array | - | Typescript：`Array<string \| number>` | N
+shape | String | circle | options: circle/square/bubble/ribbon | N
+show-zero | Boolean | false | \- | N
+size | String | medium | options: medium/large | N
+### Badge External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-count | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-badge-basic-height | 32rpx | - 
+--td-badge-basic-padding | 8rpx | - 
+--td-badge-basic-width | 32rpx | - 
+--td-badge-bg-color | @error-color | - 
+--td-badge-border-radius | 4rpx | - 
+--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | - 
+--td-badge-dot-size | 16rpx | - 
+--td-badge-font-size | @font-size-xs | - 
+--td-badge-font-weight | 600 | - 
+--td-badge-large-font-size | @font-size-s | - 
+--td-badge-large-height | 40rpx | - 
+--td-badge-large-padding | 10rpx | - 
+--td-badge-text-color | @font-white-1 | -

miniprogram_npm/tdesign-miniprogram/badge/badge.d.ts

@@ -0,0 +1,21 @@
+import { SuperComponent } from '../common/src/index';
+import type { TdBadgeProps } from './type';
+export interface BadgeProps extends TdBadgeProps {
+}
+export default class Badge extends SuperComponent {
+    options: {
+        multipleSlots: boolean;
+    };
+    externalClasses: string[];
+    properties: TdBadgeProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        value: string;
+        labelID: string;
+        descriptionID: string;
+    };
+    lifetimes: {
+        ready(): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/badge/badge.js

@@ -0,0 +1,43 @@
+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 props from './props';
+import { uniqueFactory } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-badge`;
+const getUniqueID = uniqueFactory('badge');
+let Badge = class Badge extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.options = {
+            multipleSlots: true,
+        };
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-content`];
+        this.properties = props;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            value: '',
+            labelID: '',
+            descriptionID: '',
+        };
+        this.lifetimes = {
+            ready() {
+                const uniqueID = getUniqueID();
+                this.setData({
+                    labelID: `${uniqueID}_label`,
+                    descriptionID: `${uniqueID}_description`,
+                });
+            },
+        };
+    }
+};
+Badge = __decorate([
+    wxComponent()
+], Badge);
+export default Badge;

miniprogram_npm/tdesign-miniprogram/badge/badge.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {}
+}

miniprogram_npm/tdesign-miniprogram/badge/badge.wxml

@@ -0,0 +1,34 @@
+<wxs src="./badge.wxs" module="_this" />
+<wxs src="../common/utils.wxs" module="_" />
+
+<!--
+  1. labelID 用于描述当前元素的文本
+  2. descriptionID 用于描述badge消息的文本
+  3. role=option一般用于多个内容合并焦点连续朗读
+-->
+
+<view
+  style="{{_._style([style, customStyle])}}"
+  class="{{_this.getBadgeOuterClass({shape})}} class {{prefix}}-class"
+  aria-labelledby="{{labelID}}"
+  aria-describedby="{{descriptionID}}"
+  aria-role="{{ ariaRole || 'option'}}"
+>
+  <view id="{{labelID}}" class="{{classPrefix}}__content {{prefix}}-class-content" aria-hidden="true">
+    <slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot" />
+    <text wx:else class="{{classPrefix}}__content-text">{{content}}</text>
+  </view>
+  <view
+    aria-hidden="true"
+    aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
+    wx:if="{{_this.isShowBadge({dot,count,showZero})}}"
+    id="{{descriptionID}}"
+    class="{{_this.getBadgeInnerClass({dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count"
+    style="{{_._style([_this.getBadgeStyles({color, offset})])}}"
+    aria-hidden="true"
+    aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
+  >
+    {{ _this.getBadgeValue({dot, count, maxCount}) }}
+  </view>
+  <slot name="count" />
+</view>

miniprogram_npm/tdesign-miniprogram/badge/badge.wxs

@@ -0,0 +1,71 @@
+var getBadgeValue = function (props) {
+  if (props.dot) {
+    return '';
+  }
+  if (isNaN(props.count) || isNaN(props.maxCount)) {
+    return props.count;
+  }
+  return parseInt(props.count) > props.maxCount ? props.maxCount + '+' : props.count;
+};
+
+var hasUnit = function (unit) {
+  return (
+    unit.indexOf('px') > 0 ||
+    unit.indexOf('rpx') > 0 ||
+    unit.indexOf('em') > 0 ||
+    unit.indexOf('rem') > 0 ||
+    unit.indexOf('%') > 0 ||
+    unit.indexOf('vh') > 0 ||
+    unit.indexOf('vm') > 0
+  );
+};
+
+var getBadgeStyles = function (props) {
+  var styleStr = '';
+  if (props.color) {
+    styleStr += 'background:' + props.color + ';';
+  }
+  if (props.offset[0]) {
+    styleStr +=
+      'left: calc(100% + ' + (hasUnit(props.offset[0].toString()) ? props.offset[0] : props.offset[0] + 'px') + ');';
+  }
+  if (props.offset[1]) {
+    styleStr += 'top:' + (hasUnit(props.offset[1].toString()) ? props.offset[1] : props.offset[1] + 'px') + ';';
+  }
+  return styleStr;
+};
+
+var getBadgeOuterClass = function (props) {
+  var baseClass = 't-badge';
+  var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon-outer' : ''];
+  return classNames.join(' ');
+};
+
+var getBadgeInnerClass = function (props) {
+  var baseClass = 't-badge';
+  var classNames = [
+    baseClass + '--basic',
+    props.dot ? baseClass + '--dot' : '',
+    baseClass + '--' + props.size,
+    baseClass + '--' + props.shape,
+    !props.dot && props.count ? baseClass + '--count' : '',
+  ];
+  return classNames.join(' ');
+};
+
+var isShowBadge = function (props) {
+  if (props.dot) {
+    return true;
+  }
+  if (!props.showZero && !isNaN(props.count) && parseInt(props.count) === 0) {
+    return false;
+  }
+  if (props.count == null) return false;
+  return true;
+};
+
+module.exports.getBadgeValue = getBadgeValue;
+module.exports.getBadgeStyles = getBadgeStyles;
+module.exports.getBadgeOuterClass = getBadgeOuterClass;
+module.exports.getBadgeInnerClass = getBadgeInnerClass;
+module.exports.isShowBadge = isShowBadge;

miniprogram_npm/tdesign-miniprogram/badge/badge.wxss

@@ -0,0 +1,113 @@
+.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-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: start;
+}
+.t-badge--basic {
+  z-index: 100;
+  padding: 0 var(--td-badge-basic-padding, 8rpx);
+  font-size: var(--td-badge-font-size, var(--td-font-size-xs, var(--td-font-size, 20rpx)));
+  color: var(--td-badge-text-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
+  background-color: var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  text-align: center;
+  height: var(--td-badge-basic-height, 32rpx);
+  line-height: var(--td-badge-basic-height, 32rpx);
+  font-weight: var(--td-badge-font-weight, 600);
+  border-radius: var(--td-badge-border-radius, 4rpx);
+}
+.t-badge--dot {
+  height: var(--td-badge-dot-size, 16rpx);
+  border-radius: 50%;
+  min-width: var(--td-badge-dot-size, 16rpx);
+  padding: 0;
+}
+.t-badge--count {
+  min-width: var(--td-badge-basic-width, 32rpx);
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+.t-badge--circle {
+  border-radius: calc(var(--td-badge-basic-height, 32rpx) / 2);
+}
+.t-badge__ribbon-outer {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.t-badge--ribbon {
+  position: relative;
+  display: inline-block;
+  transform-origin: center center;
+  transform: translate(calc(50% - var(--td-badge-basic-height, 32rpx) + 1rpx), calc(-50% + var(--td-badge-basic-height, 32rpx) - 1rpx)) rotate(45deg);
+  border-radius: 0;
+}
+.t-badge--ribbon::before,
+.t-badge--ribbon::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  bottom: 0;
+  border-bottom: var(--td-badge-basic-height, 32rpx) solid var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  font-size: 0;
+}
+.t-badge--ribbon::before {
+  left: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx);
+  border-left: var(--td-badge-basic-height, 32rpx) solid transparent;
+}
+.t-badge--ribbon::after {
+  right: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx);
+  border-right: var(--td-badge-basic-height, 32rpx) solid transparent;
+}
+.t-badge--bubble {
+  border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px);
+}
+.t-badge--large {
+  font-size: var(--td-badge-large-font-size, var(--td-font-size-s, 24rpx));
+  height: var(--td-badge-large-height, 40rpx);
+  min-width: var(--td-badge-large-height, 40rpx);
+  line-height: var(--td-badge-large-height, 40rpx);
+  padding: 0 var(--td-badge-large-padding, 10rpx);
+}
+.t-badge--large.t-badge--circle {
+  border-radius: calc(var(--td-badge-large-height, 40rpx) / 2);
+}
+.t-badge__content:not(:empty) + .t-has-count {
+  transform-origin: center center;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  left: 100%;
+  top: 0;
+}
+.t-badge__content-text {
+  display: block;
+  line-height: 48rpx;
+  color: var(--td-badge-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}

miniprogram_npm/tdesign-miniprogram/badge/index.d.ts

@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './badge';

miniprogram_npm/tdesign-miniprogram/badge/index.js

@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './badge';

miniprogram_npm/tdesign-miniprogram/badge/props.d.ts

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

miniprogram_npm/tdesign-miniprogram/badge/props.js

@@ -0,0 +1,41 @@
+const props = {
+    color: {
+        type: String,
+        value: '',
+    },
+    content: {
+        type: String,
+        value: '',
+    },
+    count: {
+        type: null,
+        value: 0,
+    },
+    dot: {
+        type: Boolean,
+        value: false,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    maxCount: {
+        type: Number,
+        value: 99,
+    },
+    offset: {
+        type: Array,
+    },
+    shape: {
+        type: String,
+        value: 'circle',
+    },
+    showZero: {
+        type: Boolean,
+        value: false,
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/badge/type.d.ts

@@ -0,0 +1,42 @@
+export interface TdBadgeProps {
+    color?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    content?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    count?: {
+        type: null;
+        value?: string | number;
+    };
+    dot?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-content', 't-class-count'];
+    };
+    maxCount?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    offset?: {
+        type: ArrayConstructor;
+        value?: Array<string | number>;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'circle' | 'square' | 'bubble' | 'ribbon';
+    };
+    showZero?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: 'medium' | 'large';
+    };
+}

miniprogram_npm/tdesign-miniprogram/badge/type.js

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

miniprogram_npm/tdesign-miniprogram/button/button.d.ts

@@ -0,0 +1,36 @@
+import { SuperComponent } from '../common/src/index';
+import type { TdButtonProps } from './type';
+export interface ButtonProps extends TdButtonProps {
+}
+export default class Button extends SuperComponent {
+    externalClasses: string[];
+    behaviors: string[];
+    properties: TdButtonProps;
+    options: {
+        multipleSlots: boolean;
+    };
+    data: {
+        prefix: string;
+        className: string;
+        classPrefix: string;
+    };
+    observers: {
+        'theme, size, plain, block, shape, disabled, loading, variant'(): void;
+        icon(icon: any): void;
+    };
+    lifetimes: {
+        attached(): void;
+    };
+    methods: {
+        setClass(): void;
+        getuserinfo(e: any): void;
+        contact(e: any): void;
+        getphonenumber(e: any): void;
+        error(e: any): void;
+        opensetting(e: any): void;
+        launchapp(e: any): void;
+        chooseavatar(e: any): void;
+        agreeprivacyauthorization(e: any): void;
+        handleTap(e: any): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/button/button.js

@@ -0,0 +1,101 @@
+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 props from './props';
+import { canIUseFormFieldButton } from '../common/version';
+import { calcIcon } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-button`;
+let Button = class Button extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-loading`];
+        this.behaviors = canIUseFormFieldButton() ? ['wx://form-field-button'] : [];
+        this.properties = props;
+        this.options = {
+            multipleSlots: true,
+        };
+        this.data = {
+            prefix,
+            className: '',
+            classPrefix: name,
+        };
+        this.observers = {
+            'theme, size, plain, block, shape, disabled, loading, variant'() {
+                this.setClass();
+            },
+            icon(icon) {
+                this.setData({
+                    _icon: calcIcon(icon, ''),
+                });
+            },
+        };
+        this.lifetimes = {
+            attached() {
+                this.setClass();
+            },
+        };
+        this.methods = {
+            setClass() {
+                const classList = [
+                    name,
+                    `${prefix}-class`,
+                    `${name}--${this.data.variant || 'base'}`,
+                    `${name}--${this.data.theme || 'default'}`,
+                    `${name}--${this.data.shape || 'rectangle'}`,
+                    `${name}--size-${this.data.size || 'medium'}`,
+                ];
+                if (this.data.block) {
+                    classList.push(`${name}--block`);
+                }
+                if (this.data.disabled) {
+                    classList.push(`${name}--disabled`);
+                }
+                if (this.data.ghost) {
+                    classList.push(`${name}--ghost`);
+                }
+                this.setData({
+                    className: classList.join(' '),
+                });
+            },
+            getuserinfo(e) {
+                this.triggerEvent('getuserinfo', e.detail);
+            },
+            contact(e) {
+                this.triggerEvent('contact', e.detail);
+            },
+            getphonenumber(e) {
+                this.triggerEvent('getphonenumber', e.detail);
+            },
+            error(e) {
+                this.triggerEvent('error', e.detail);
+            },
+            opensetting(e) {
+                this.triggerEvent('opensetting', e.detail);
+            },
+            launchapp(e) {
+                this.triggerEvent('launchapp', e.detail);
+            },
+            chooseavatar(e) {
+                this.triggerEvent('chooseavatar', e.detail);
+            },
+            agreeprivacyauthorization(e) {
+                this.triggerEvent('agreeprivacyauthorization', e.detail);
+            },
+            handleTap(e) {
+                if (this.data.disabled || this.data.loading)
+                    return;
+                this.triggerEvent('tap', e);
+            },
+        };
+    }
+};
+Button = __decorate([
+    wxComponent()
+], Button);
+export default Button;

miniprogram_npm/tdesign-miniprogram/button/button.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-loading": "../loading/loading"
+  }
+}

miniprogram_npm/tdesign-miniprogram/button/button.wxml

@@ -0,0 +1,61 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="../common/utils.wxs" module="_" />
+
+<button
+  id="{{tId}}"
+  style="{{_._style([style, customStyle])}}"
+  data-custom="{{ customDataset }}"
+  class="class {{className}}"
+  form-type="{{disabled || loading ? '' : type}}"
+  open-type="{{disabled || loading ? '' : openType}}"
+  hover-stop-propagation="{{hoverStopPropagation}}"
+  hover-start-time="{{hoverStartTime}}"
+  hover-stay-time="{{hoverStayTime}}"
+  lang="{{lang}}"
+  session-from="{{sessionFrom}}"
+  hover-class="{{disabled || loading ? '' : (hoverClass || classPrefix + '--hover')}}"
+  send-message-title="{{sendMessageTitle}}"
+  send-message-path="{{sendMessagePath}}"
+  send-message-img="{{sendMessageImg}}"
+  app-parameter="{{appParameter}}"
+  show-message-card="{{showMessageCard}}"
+  catch:tap="handleTap"
+  bind:getuserinfo="getuserinfo"
+  bind:contact="contact"
+  bind:getphonenumber="getphonenumber"
+  bind:error="error"
+  bind:opensetting="opensetting"
+  bind:launchapp="launchapp"
+  bind:chooseavatar="chooseavatar"
+  bind:agreeprivacyauthorization="agreeprivacyauthorization"
+  aria-label="{{ariaLabel}}"
+>
+  <template
+    wx:if="{{_icon}}"
+    is="icon"
+    data="{{tClass: classPrefix + '__icon ' + prefix + '-class-icon', ariaHidden: true, name: iconName, ..._icon}}"
+  />
+  <t-loading
+    wx:if="{{loading}}"
+    delay="{{loadingProps.delay || 0}}"
+    duration="{{loadingProps.duration || 800}}"
+    indicator="{{loadingProps.indicator || true}}"
+    inheritColor="{{loadingProps.inheritColor || true}}"
+    layout="{{loadingProps.layout || 'horizontal'}}"
+    pause="{{loadingProps.pause || false}}"
+    progress="{{loadingProps.progress || 0}}"
+    reverse="{{loadingProps.reverse || false}}"
+    size="{{loadingProps.size || '40rpx'}}"
+    text="{{loadingProps.text || '' }}"
+    theme="{{loadingProps.theme || 'circular'}}"
+    loading
+    t-class="{{classPrefix}}__loading {{classPrefix}}__loading--wrapper"
+    t-class-indicator="{{classPrefix}}__loading--indicator {{prefix}}-class-loading"
+  />
+  <view class="{{classPrefix}}__content">
+    <slot name="content" />
+    <block wx:if="{{content}}">{{content}}</block>
+    <slot />
+  </view>
+  <slot name="suffix" />
+</button>

miniprogram_npm/tdesign-miniprogram/button/button.wxss

@@ -0,0 +1,541 @@
+.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-button--size-extra-small {
+  font-size: var(--td-button-extra-small-font-size, var(--td-font-size-base, 28rpx));
+  padding-left: var(--td-button-extra-small-padding-horizontal, 16rpx);
+  padding-right: var(--td-button-extra-small-padding-horizontal, 16rpx);
+  height: var(--td-button-extra-small-height, 56rpx);
+  line-height: var(--td-button-extra-small-height, 56rpx);
+}
+.t-button--size-extra-small .t-button__icon {
+  font-size: var(--td-button-extra-small-icon-font-size, 36rpx);
+}
+.t-button--size-small {
+  font-size: var(--td-button-small-font-size, var(--td-font-size-base, 28rpx));
+  padding-left: var(--td-button-small-padding-horizontal, 24rpx);
+  padding-right: var(--td-button-small-padding-horizontal, 24rpx);
+  height: var(--td-button-small-height, 64rpx);
+  line-height: var(--td-button-small-height, 64rpx);
+}
+.t-button--size-small .t-button__icon {
+  font-size: var(--td-button-small-icon-font-size, 36rpx);
+}
+.t-button--size-medium {
+  font-size: var(--td-button-medium-font-size, var(--td-font-size-m, 32rpx));
+  padding-left: var(--td-button-medium-padding-horizontal, 32rpx);
+  padding-right: var(--td-button-medium-padding-horizontal, 32rpx);
+  height: var(--td-button-medium-height, 80rpx);
+  line-height: var(--td-button-medium-height, 80rpx);
+}
+.t-button--size-medium .t-button__icon {
+  font-size: var(--td-button-medium-icon-font-size, 40rpx);
+}
+.t-button--size-large {
+  font-size: var(--td-button-large-font-size, var(--td-font-size-m, 32rpx));
+  padding-left: var(--td-button-large-padding-horizontal, 40rpx);
+  padding-right: var(--td-button-large-padding-horizontal, 40rpx);
+  height: var(--td-button-large-height, 96rpx);
+  line-height: var(--td-button-large-height, 96rpx);
+}
+.t-button--size-large .t-button__icon {
+  font-size: var(--td-button-large-icon-font-size, 48rpx);
+}
+.t-button--default {
+  color: var(--td-button-default-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  background-color: var(--td-button-default-bg-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-button-default-border-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--default::after {
+  border-width: var(--td-button-border-width, 4rpx);
+  border-color: var(--td-button-default-border-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--default.t-button--hover {
+  z-index: 0;
+}
+.t-button--default.t-button--hover,
+.t-button--default.t-button--hover::after {
+  background-color: var(--td-button-default-active-bg-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
+  border-color: var(--td-button-default-active-border-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
+}
+.t-button--default.t-button--disabled {
+  color: var(--td-button-default-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+  background-color: var(--td-button-default-disabled-bg, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
+}
+.t-button--default.t-button--disabled,
+.t-button--default.t-button--disabled::after {
+  border-color: var(--td-button-default-disabled-border-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
+}
+.t-button--primary {
+  color: var(--td-button-primary-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
+  background-color: var(--td-button-primary-bg-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  border-color: var(--td-button-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--primary::after {
+  border-width: var(--td-button-border-width, 4rpx);
+  border-color: var(--td-button-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--primary.t-button--hover {
+  z-index: 0;
+}
+.t-button--primary.t-button--hover,
+.t-button--primary.t-button--hover::after {
+  background-color: var(--td-button-primary-active-bg-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+  border-color: var(--td-button-primary-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--primary.t-button--disabled {
+  color: var(--td-button-primary-disabled-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
+  background-color: var(--td-button-primary-disabled-bg, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--primary.t-button--disabled,
+.t-button--primary.t-button--disabled::after {
+  border-color: var(--td-button-primary-disabled-border-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--light {
+  color: var(--td-button-light-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  background-color: var(--td-button-light-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+  border-color: var(--td-button-light-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-button--light::after {
+  border-width: var(--td-button-border-width, 4rpx);
+  border-color: var(--td-button-light-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-button--light.t-button--hover {
+  z-index: 0;
+}
+.t-button--light.t-button--hover,
+.t-button--light.t-button--hover::after {
+  background-color: var(--td-button-light-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
+  border-color: var(--td-button-light-active-border-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
+}
+.t-button--light.t-button--disabled {
+  color: var(--td-button-light-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+  background-color: var(--td-button-light-disabled-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-button--light.t-button--disabled,
+.t-button--light.t-button--disabled::after {
+  border-color: var(--td-button-light-disabled-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-button--danger {
+  color: var(--td-button-danger-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
+  background-color: var(--td-button-danger-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--danger::after {
+  border-width: var(--td-button-border-width, 4rpx);
+  border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--danger.t-button--hover {
+  z-index: 0;
+}
+.t-button--danger.t-button--hover,
+.t-button--danger.t-button--hover::after {
+  background-color: var(--td-button-danger-active-bg-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
+  border-color: var(--td-button-danger-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
+}
+.t-button--danger.t-button--disabled {
+  color: var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff));
+  background-color: var(--td-button-danger-disabled-bg, var(--td-error-color-3, #ffb9b0));
+}
+.t-button--danger.t-button--disabled,
+.t-button--danger.t-button--disabled::after {
+  border-color: var(--td-button-danger-disabled-border-color, var(--td-error-color-3, #ffb9b0));
+}
+.t-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  white-space: nowrap;
+  text-align: center;
+  background-image: none;
+  transition: all 0.3s;
+  touch-action: manipulation;
+  border-radius: var(--td-button-border-radius, var(--td-radius-default, 12rpx));
+  outline: none;
+  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
+  font-weight: var(--td-button-font-weight, 600);
+  vertical-align: top;
+  box-sizing: border-box;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+  /* stylelint-disable-next-line */
+  -webkit-appearance: none;
+}
+.t-button::after {
+  border-radius: calc(var(--td-button-border-radius, var(--td-radius-default, 12rpx)) * 2);
+}
+.t-button--text {
+  color: var(--td-button-default-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  background-color: transparent;
+}
+.t-button--text,
+.t-button--text::after {
+  border: 0;
+}
+.t-button--text.t-button--hover,
+.t-button--text.t-button--hover::after {
+  background-color: var(--td-button-default-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--text.t-button--primary {
+  color: var(--td-button-primary-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  background-color: transparent;
+}
+.t-button--text.t-button--primary.t-button--hover,
+.t-button--text.t-button--primary.t-button--hover::after {
+  background-color: var(--td-button-primary-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--text.t-button--primary.t-button--disabled {
+  color: var(--td-button-primary-text-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-button--text.t-button--danger {
+  color: var(--td-button-danger-text-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  background-color: transparent;
+}
+.t-button--text.t-button--danger.t-button--hover,
+.t-button--text.t-button--danger.t-button--hover::after {
+  background-color: var(--td-button-danger-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--text.t-button--danger.t-button--disabled {
+  color: var(--td-button-danger-text-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-button--text.t-button--light {
+  color: var(--td-button-light-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  background-color: transparent;
+}
+.t-button--text.t-button--light.t-button--hover,
+.t-button--text.t-button--light.t-button--hover::after {
+  background-color: var(--td-button-light-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--text.t-button--disabled {
+  color: var(--td-button-default-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}
+.t-button--outline {
+  color: var(--td-button-default-outline-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-button--outline,
+.t-button--outline::after {
+  border-color: var(--td-button-default-outline-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-button--outline.t-button--hover,
+.t-button--outline.t-button--hover::after {
+  background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-button--outline.t-button--disabled {
+  color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-button--outline.t-button--disabled,
+.t-button--outline.t-button--disabled::after {
+  border-color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-button--outline.t-button--primary {
+  color: var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--outline.t-button--primary,
+.t-button--outline.t-button--primary::after {
+  border-color: var(--td-button-primary-outline-border-color, var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
+}
+.t-button--outline.t-button--primary.t-button--hover {
+  color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--outline.t-button--primary.t-button--hover::after {
+  background-color: var(--td-button-primary-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--outline.t-button--primary.t-button--disabled {
+  background-color: transparent;
+  color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--outline.t-button--primary.t-button--disabled,
+.t-button--outline.t-button--primary.t-button--disabled::after {
+  border-color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--outline.t-button--danger {
+  color: var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--outline.t-button--danger,
+.t-button--outline.t-button--danger::after {
+  border-color: var(--td-button-danger-outline-border-color, var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
+}
+.t-button--outline.t-button--danger.t-button--hover {
+  color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
+}
+.t-button--outline.t-button--danger.t-button--hover::after {
+  background-color: var(--td-button-danger-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
+}
+.t-button--outline.t-button--danger.t-button--disabled {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
+}
+.t-button--outline.t-button--danger.t-button--disabled,
+.t-button--outline.t-button--danger.t-button--disabled::after {
+  border-color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
+}
+.t-button--outline.t-button--light {
+  color: var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  background-color: var(--td-button-light-outline-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-button--outline.t-button--light,
+.t-button--outline.t-button--light::after {
+  border-color: var(--td-button-light-outline-border-color, var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
+}
+.t-button--outline.t-button--light.t-button--hover {
+  color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--outline.t-button--light.t-button--hover,
+.t-button--outline.t-button--light.t-button--hover::after {
+  background-color: var(--td-button-light-outline-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
+  border-color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--outline.t-button--light.t-button--disabled {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--outline.t-button--light.t-button--disabled,
+.t-button--outline.t-button--light.t-button--disabled::after {
+  border-color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--dashed {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  border-style: dashed;
+  border-width: 2rpx;
+}
+.t-button--dashed::after {
+  border: 0;
+}
+.t-button--dashed.t-button--hover,
+.t-button--dashed.t-button--hover::after {
+  background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-button--dashed.t-button--primary {
+  color: var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--dashed.t-button--primary,
+.t-button--dashed.t-button--primary::after {
+  border-color: var(--td-button-primary-dashed-border-color, var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
+}
+.t-button--dashed.t-button--primary.t-button--disabled {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--dashed.t-button--primary.t-button--disabled,
+.t-button--dashed.t-button--primary.t-button--disabled::after {
+  border-color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--dashed.t-button--danger {
+  color: var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--dashed.t-button--danger,
+.t-button--dashed.t-button--danger::after {
+  border-color: var(--td-button-danger-dashed-border-color, var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
+}
+.t-button--dashed.t-button--danger.t-button--disabled {
+  background-color: transparent;
+  color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
+}
+.t-button--dashed.t-button--danger.t-button--disabled::after {
+  border-color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
+}
+.t-button--ghost {
+  background-color: transparent;
+  color: var(--td-button-ghost-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
+}
+.t-button--ghost,
+.t-button--ghost::after {
+  border-color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff))));
+}
+.t-button--ghost.t-button--default.t-button--hover {
+  color: var(--td-button-ghost-hover-color, var(--td-font-white-2, rgba(255, 255, 255, 0.55)));
+}
+.t-button--ghost.t-button--default.t-button--hover,
+.t-button--ghost.t-button--default.t-button--hover::after {
+  background-color: transparent;
+  border-color: var(--td-button-ghost-hover-color, var(--td-font-white-2, rgba(255, 255, 255, 0.55)));
+}
+.t-button--ghost.t-button--primary {
+  color: var(--td-button-ghost-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--ghost.t-button--primary,
+.t-button--ghost.t-button--primary::after {
+  border-color: var(--td-button-ghost-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--ghost.t-button--primary.t-button--hover {
+  color: var(--td-button-ghost-primary-hover-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--ghost.t-button--primary.t-button--hover,
+.t-button--ghost.t-button--primary.t-button--hover::after {
+  background-color: transparent;
+  border-color: var(--td-button-ghost-primary-hover-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--ghost.t-button--primary.t-button--text.t-button--hover,
+.t-button--ghost.t-button--primary.t-button--text.t-button--hover::after {
+  background-color: var(--td-gray-color-10, #4b4b4b);
+}
+.t-button--ghost.t-button--primary.t-button--disabled {
+  background-color: transparent;
+  color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
+}
+.t-button--ghost.t-button--primary.t-button--disabled,
+.t-button--ghost.t-button--primary.t-button--disabled::after {
+  border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
+}
+.t-button--ghost.t-button--danger {
+  color: var(--td-button-ghost-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--ghost.t-button--danger,
+.t-button--ghost.t-button--danger::after {
+  border-color: var(--td-button-ghost-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--ghost.t-button--danger.t-button--hover {
+  color: var(--td-button-ghost-danger-hover-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
+}
+.t-button--ghost.t-button--danger.t-button--hover,
+.t-button--ghost.t-button--danger.t-button--hover::after {
+  background-color: transparent;
+  border-color: var(--td-button-ghost-danger-hover-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
+}
+.t-button--ghost.t-button--danger.t-button--text.t-button--hover,
+.t-button--ghost.t-button--danger.t-button--text.t-button--hover::after {
+  background-color: var(--td-gray-color-10, #4b4b4b);
+}
+.t-button--ghost.t-button--danger.t-button--disabled {
+  background-color: transparent;
+  color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
+}
+.t-button--ghost.t-button--danger.t-button--disabled,
+.t-button--ghost.t-button--danger.t-button--disabled::after {
+  border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
+}
+.t-button--ghost.t-button--default.t-button--text.t-button--hover,
+.t-button--ghost.t-button--default.t-button--text.t-button--hover::after {
+  background-color: var(--td-gray-color-10, #4b4b4b);
+}
+.t-button--ghost.t-button--default.t-button--disabled {
+  background-color: transparent;
+  color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
+}
+.t-button--ghost.t-button--default.t-button--disabled,
+.t-button--ghost.t-button--default.t-button--disabled::after {
+  border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
+}
+.t-button__loading + .t-button__content:not(:empty),
+.t-button__icon + .t-button__content:not(:empty) {
+  margin-left: 8rpx;
+}
+.t-button__icon {
+  border-radius: var(--td-button-icon-border-radius, 8rpx);
+}
+.t-button--round.t-button--size-large {
+  border-radius: calc(var(--td-button-large-height, 96rpx) / 2);
+}
+.t-button--round.t-button--size-large::after {
+  border-radius: var(--td-button-large-height, 96rpx);
+}
+.t-button--round.t-button--size-medium {
+  border-radius: calc(var(--td-button-medium-height, 80rpx) / 2);
+}
+.t-button--round.t-button--size-medium::after {
+  border-radius: var(--td-button-medium-height, 80rpx);
+}
+.t-button--round.t-button--size-small {
+  border-radius: calc(var(--td-button-small-height, 64rpx) / 2);
+}
+.t-button--round.t-button--size-small::after {
+  border-radius: var(--td-button-small-height, 64rpx);
+}
+.t-button--round.t-button--size-extra-small {
+  border-radius: calc(var(--td-button-extra-small-height, 56rpx) / 2);
+}
+.t-button--round.t-button--size-extra-small::after {
+  border-radius: var(--td-button-extra-small-height, 56rpx);
+}
+.t-button--square {
+  padding: 0;
+}
+.t-button--square.t-button--size-large {
+  width: var(--td-button-large-height, 96rpx);
+}
+.t-button--square.t-button--size-medium {
+  width: var(--td-button-medium-height, 80rpx);
+}
+.t-button--square.t-button--size-small {
+  width: var(--td-button-small-height, 64rpx);
+}
+.t-button--square.t-button--size-extra-small {
+  width: var(--td-button-extra-small-height, 56rpx);
+}
+.t-button--circle {
+  padding: 0;
+  border-radius: 50%;
+}
+.t-button--circle.t-button--size-large {
+  width: var(--td-button-large-height, 96rpx);
+}
+.t-button--circle.t-button--size-large::after {
+  border-radius: 50%;
+}
+.t-button--circle.t-button--size-medium {
+  width: var(--td-button-medium-height, 80rpx);
+}
+.t-button--circle.t-button--size-medium::after {
+  border-radius: 50%;
+}
+.t-button--circle.t-button--size-small {
+  width: var(--td-button-small-height, 64rpx);
+}
+.t-button--circle.t-button--size-small::after {
+  border-radius: 50%;
+}
+.t-button--circle.t-button--size-extra-small {
+  width: var(--td-button-extra-small-height, 56rpx);
+}
+.t-button--circle.t-button--size-extra-small::after {
+  border-radius: 50%;
+}
+.t-button--block {
+  display: flex;
+  width: 100%;
+}
+.t-button--disabled {
+  cursor: not-allowed;
+}
+.t-button__loading--wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-button.t-button--hover::after {
+  z-index: -1;
+}

miniprogram_npm/tdesign-miniprogram/button/index.d.ts

@@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './button';

miniprogram_npm/tdesign-miniprogram/button/index.js

@@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './button';

miniprogram_npm/tdesign-miniprogram/button/props.d.ts

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

miniprogram_npm/tdesign-miniprogram/button/props.js

@@ -0,0 +1,108 @@
+const props = {
+    appParameter: {
+        type: String,
+        value: '',
+    },
+    block: {
+        type: Boolean,
+        value: false,
+    },
+    content: {
+        type: String,
+    },
+    customDataset: {
+        type: null,
+    },
+    disabled: {
+        type: null,
+        value: undefined,
+    },
+    ghost: {
+        type: Boolean,
+        value: false,
+    },
+    hoverClass: {
+        type: String,
+        value: '',
+    },
+    hoverStartTime: {
+        type: Number,
+        value: 20,
+    },
+    hoverStayTime: {
+        type: Number,
+        value: 70,
+    },
+    hoverStopPropagation: {
+        type: Boolean,
+        value: false,
+    },
+    icon: {
+        type: null,
+    },
+    lang: {
+        type: String,
+    },
+    loading: {
+        type: Boolean,
+        value: false,
+    },
+    loadingProps: {
+        type: Object,
+    },
+    openType: {
+        type: String,
+    },
+    phoneNumberNoQuotaToast: {
+        type: Boolean,
+        value: true,
+    },
+    sendMessageImg: {
+        type: String,
+        value: '截图',
+    },
+    sendMessagePath: {
+        type: String,
+        value: '当前分享路径',
+    },
+    sendMessageTitle: {
+        type: String,
+        value: '当前标题',
+    },
+    sessionFrom: {
+        type: String,
+        value: '',
+    },
+    shape: {
+        type: String,
+        value: 'rectangle',
+    },
+    showMessageCard: {
+        type: Boolean,
+        value: false,
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+    style: {
+        type: String,
+        value: '',
+    },
+    tId: {
+        type: String,
+        value: '',
+    },
+    theme: {
+        type: String,
+        value: 'default',
+    },
+    type: {
+        type: String,
+    },
+    variant: {
+        type: String,
+        value: 'base',
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/button/type.d.ts

@@ -0,0 +1,115 @@
+import { LoadingProps } from '../loading/index';
+export interface TdButtonProps {
+    appParameter?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    block?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    content?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    customDataset?: {
+        type: null;
+        value?: null;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    ghost?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    hoverClass?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    hoverStartTime?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    hoverStayTime?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    hoverStopPropagation?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    icon?: {
+        type: null;
+        value?: string | object;
+    };
+    lang?: {
+        type: StringConstructor;
+        value?: 'en' | 'zh_CN' | 'zh_TW';
+    };
+    loading?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    loadingProps?: {
+        type: ObjectConstructor;
+        value?: LoadingProps;
+    };
+    openType?: {
+        type: StringConstructor;
+        value?: 'contact' | 'share' | 'getPhoneNumber' | 'getUserInfo' | 'launchApp' | 'openSetting' | 'feedback' | 'chooseAvatar' | 'agreePrivacyAuthorization';
+    };
+    phoneNumberNoQuotaToast?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    sendMessageImg?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    sendMessagePath?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    sendMessageTitle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    sessionFrom?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'rectangle' | 'square' | 'round' | 'circle';
+    };
+    showMessageCard?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: 'extra-small' | 'small' | 'medium' | 'large';
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    tId?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'default' | 'primary' | 'danger' | 'light';
+    };
+    type?: {
+        type: StringConstructor;
+        value?: 'submit' | 'reset';
+    };
+    variant?: {
+        type: StringConstructor;
+        value?: 'base' | 'outline' | 'dashed' | 'text';
+    };
+}

miniprogram_npm/tdesign-miniprogram/button/type.js

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

miniprogram_npm/tdesign-miniprogram/calendar/README.en-US.md

@@ -0,0 +1,54 @@
+:: BASE_DOC ::
+
+## API
+
+### Calendar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+auto-close | Boolean | true | `0.34.0` | N
+confirm-btn | String / Object / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
+first-day-of-week | Number | 0 | \- | N
+format | Function | - | Typescript：`CalendarFormatType ` `type CalendarFormatType = (day: TDate) => TDate` `type TDateType = 'selected' \| 'disabled' \| 'start' \| 'centre' \| 'end' \| ''` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string;}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
+locale-text | Object | - | Typescript：`CalendarLocaleText` `interface CalendarLocaleText {title?: string; weekdays?: string[]; monthTitle?: string; months?: string[]; confirm?: string;}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
+max-date | Number | - | \- | N
+min-date | Number | - | \- | N
+switch-mode | String | none | options: none/month/year-month | N
+title | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+type | String | 'single' | options: single/multiple/range | N
+use-popup | Boolean | true | `0.32.0` | N
+using-custom-navbar | Boolean | false | \- | N
+value | Number / Array | - | Typescript：`number \| number[]` | N
+default-value | Number / Array | undefined | uncontrolled property。Typescript：`number \| number[]` | N
+visible | Boolean | false | \- | N
+
+### Calendar Events
+
+name | params | description
+-- | -- | --
+change | `(value: timestamp)` | `0.28.0`
+close | `(trigger: CalendarTrigger)` | `0.34.0`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
+confirm | `(value: timestamp)` | \-
+panel-change | `(year: number; month: number)` | `1.8.4`
+scroll | `({scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY})` | `1.4.6`。triggered when scrolling
+select | `(value: timestamp)` | `0.28.0`
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-calendar-active-color | @brand-color | - 
+--td-calendar-bg-color | @bg-color-container | - 
+--td-calendar-days-color | @text-color-secondary | - 
+--td-calendar-item-centre-color | @brand-color-light | - 
+--td-calendar-item-disabled-color | @text-color-disabled | - 
+--td-calendar-item-suffix-color | @text-color-placeholder | - 
+--td-calendar-radius | 24rpx | - 
+--td-calendar-selected-color | @text-color-anti | - 
+--td-calendar-switch-mode-icon-color | @brand-color | - 
+--td-calendar-switch-mode-icon-disabled-color | @brand-color-disabled | - 
+--td-calendar-title-color | @text-color-primary | - 
+--td-calendar-title-font-size | 18px | -

miniprogram_npm/tdesign-miniprogram/calendar/calendar-header.wxml

@@ -0,0 +1,45 @@
+<wxs src="../common/utils.wxs" module="_" />
+
+<template name="calendar-header">
+  <view class="{{class}} {{classPrefix}} {{switchMode !== 'none' ? classPrefix + '__with-action' : ''}}" id="{{tId}}">
+    <view class="{{classPrefix}}__action" wx:if="{{switchMode !== 'none'}}">
+      <view
+        wx:if="{{switchMode === 'year-month'}}"
+        class="{{_.cls(classPrefix + '__icon', [['disabled', preYearBtnDisable]])}}"
+        data-disabled="{{preYearBtnDisable}}"
+        data-type="pre-year"
+        bindtap="handleSwitchModeChange"
+      >
+        <t-icon name="chevron-left-double" />
+      </view>
+      <view
+        class="{{_.cls(classPrefix + '__icon', [['disabled', prevMonthBtnDisable]])}}"
+        data-disabled="{{prevMonthBtnDisable}}"
+        data-type="pre-month"
+        bindtap="handleSwitchModeChange"
+      >
+        <t-icon name="chevron-left" />
+      </view>
+    </view>
+    <view class="{{classPrefix}}__title"> {{ title }}</view>
+    <view class="{{classPrefix}}__action" wx:if="{{switchMode !== 'none'}}">
+      <view
+        class="{{_.cls(classPrefix + '__icon', [['disabled', nextMonthBtnDisable]])}}"
+        data-disabled="{{nextMonthBtnDisable}}"
+        data-type="next-month"
+        bindtap="handleSwitchModeChange"
+      >
+        <t-icon name="chevron-right" />
+      </view>
+      <view
+        wx:if="{{switchMode === 'year-month'}}"
+        class="{{_.cls(classPrefix + '__icon', [['disabled', nextYearBtnDisable]])}}"
+        data-disabled="{{nextYearBtnDisable}}"
+        data-type="next-year"
+        bindtap="handleSwitchModeChange"
+      >
+        <t-icon name="chevron-right-double" />
+      </view>
+    </view>
+  </view>
+</template>

miniprogram_npm/tdesign-miniprogram/calendar/calendar.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="miniprogram-api-typings" />
+import { SuperComponent } from '../common/src/index';
+import { TdCalendarProps } from './type';
+export interface CalendarProps extends TdCalendarProps {
+}
+export default class Calendar extends SuperComponent {
+    behaviors: string[];
+    externalClasses: string[];
+    options: WechatMiniprogram.Component.ComponentOptions;
+    properties: TdCalendarProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        months: any[];
+        scrollIntoView: string;
+        innerConfirmBtn: {};
+        realLocalText: {};
+        currentMonth: {};
+        actionButtons: {
+            preYearBtnDisable: boolean;
+            prevMonthBtnDisable: boolean;
+            nextMonthBtnDisable: boolean;
+            nextYearBtnDisable: boolean;
+        };
+    };
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    lifetimes: {
+        created(): void;
+        ready(): void;
+    };
+    observers: {
+        type(v: any): void;
+        confirmBtn(v: any): void;
+        'firstDayOfWeek,minDate,maxDate'(firstDayOfWeek: any, minDate: any, maxDate: any): void;
+        value(v: any): void;
+        visible(v: any): void;
+        format(v: any): void;
+    };
+    methods: {
+        initialValue(): void;
+        scrollIntoView(): void;
+        getCurrentYearAndMonth(v: Date): {
+            year: number;
+            month: number;
+        };
+        updateActionButton(value: Date): void;
+        calcCurrentMonth(newValue?: any): void;
+        calcMonths(): void;
+        close(trigger: any): void;
+        onVisibleChange(): void;
+        handleClose(): void;
+        handleSelect(e: any): void;
+        onTplButtonTap(): void;
+        toTime(val: any): any;
+        onScroll(e: any): void;
+        getCurrentDate(): any;
+        handleSwitchModeChange(e: any): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/calendar/calendar.js

@@ -0,0 +1,261 @@
+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 props from './props';
+import TCalendar from '../common/shared/calendar/index';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import { getPrevMonth, getPrevYear, getNextMonth, getNextYear } from './utils';
+const { prefix } = config;
+const name = `${prefix}-calendar`;
+const defaultLocaleText = {
+    title: '请选择日期',
+    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+    monthTitle: '{year} 年 {month}',
+    months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'],
+    confirm: '确认',
+};
+let Calendar = class Calendar extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.behaviors = [useCustomNavbar];
+        this.externalClasses = [`${prefix}-class`];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = props;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            months: [],
+            scrollIntoView: '',
+            innerConfirmBtn: {},
+            realLocalText: {},
+            currentMonth: {},
+            actionButtons: {
+                preYearBtnDisable: false,
+                prevMonthBtnDisable: false,
+                nextMonthBtnDisable: false,
+                nextYearBtnDisable: false,
+            },
+        };
+        this.controlledProps = [
+            {
+                key: 'value',
+                event: 'confirm',
+            },
+            {
+                key: 'value',
+                event: 'change',
+            },
+        ];
+        this.lifetimes = {
+            created() {
+                this.base = new TCalendar(this.properties);
+            },
+            ready() {
+                const realLocalText = Object.assign(Object.assign({}, defaultLocaleText), this.properties.localeText);
+                this.initialValue();
+                this.setData({
+                    days: this.base.getDays(realLocalText.weekdays),
+                    realLocalText,
+                });
+                this.calcMonths();
+                if (this.data.switchMode !== 'none') {
+                    this.calcCurrentMonth();
+                }
+                if (!this.data.usePopup) {
+                    this.scrollIntoView();
+                }
+            },
+        };
+        this.observers = {
+            type(v) {
+                this.base.type = v;
+            },
+            confirmBtn(v) {
+                if (typeof v === 'string') {
+                    this.setData({ innerConfirmBtn: v === 'slot' ? 'slot' : { content: v } });
+                }
+                else if (typeof v === 'object') {
+                    this.setData({ innerConfirmBtn: v });
+                }
+            },
+            'firstDayOfWeek,minDate,maxDate'(firstDayOfWeek, minDate, maxDate) {
+                firstDayOfWeek && (this.base.firstDayOfWeek = firstDayOfWeek);
+                minDate && (this.base.minDate = minDate);
+                maxDate && (this.base.maxDate = maxDate);
+                this.calcMonths();
+            },
+            value(v) {
+                this.base.value = v;
+                this.calcMonths();
+            },
+            visible(v) {
+                if (v) {
+                    this.scrollIntoView();
+                    this.base.value = this.data.value;
+                    this.calcMonths();
+                }
+            },
+            format(v) {
+                const { usePopup, visible } = this.data;
+                this.base.format = v;
+                if (!usePopup || visible) {
+                    this.calcMonths();
+                }
+            },
+        };
+        this.methods = {
+            initialValue() {
+                const { value, type, minDate } = this.data;
+                if (!value) {
+                    const today = new Date();
+                    const now = minDate || new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
+                    const initialValue = type === 'single' ? now : [now];
+                    if (type === 'range') {
+                        initialValue[1] = now + 24 * 3600 * 1000;
+                    }
+                    this.setData({
+                        value: initialValue,
+                    });
+                    this.base.value = initialValue;
+                }
+            },
+            scrollIntoView() {
+                const { value } = this.data;
+                if (!value)
+                    return;
+                const date = new Date(Array.isArray(value) ? value[0] : value);
+                if (date) {
+                    this.setData({
+                        scrollIntoView: `year_${date.getFullYear()}_month_${date.getMonth()}`,
+                    });
+                }
+            },
+            getCurrentYearAndMonth(v) {
+                const date = new Date(v);
+                return { year: date.getFullYear(), month: date.getMonth() };
+            },
+            updateActionButton(value) {
+                const _min = this.getCurrentYearAndMonth(this.base.minDate);
+                const _max = this.getCurrentYearAndMonth(this.base.maxDate);
+                const _minTimestamp = new Date(_min.year, _min.month, 1).getTime();
+                const _maxTimestamp = new Date(_max.year, _max.month, 1).getTime();
+                const _prevYearTimestamp = getPrevYear(value).getTime();
+                const _prevMonthTimestamp = getPrevMonth(value).getTime();
+                const _nextMonthTimestamp = getNextMonth(value).getTime();
+                const _nextYearTimestamp = getNextYear(value).getTime();
+                const preYearBtnDisable = _prevYearTimestamp < _minTimestamp || _prevMonthTimestamp < _minTimestamp;
+                const prevMonthBtnDisable = _prevMonthTimestamp < _minTimestamp;
+                const nextYearBtnDisable = _nextMonthTimestamp > _maxTimestamp || _nextYearTimestamp > _maxTimestamp;
+                const nextMonthBtnDisable = _nextMonthTimestamp > _maxTimestamp;
+                this.setData({
+                    actionButtons: {
+                        preYearBtnDisable,
+                        prevMonthBtnDisable,
+                        nextYearBtnDisable,
+                        nextMonthBtnDisable,
+                    },
+                });
+            },
+            calcCurrentMonth(newValue) {
+                const date = newValue || this.getCurrentDate();
+                const { year, month } = this.getCurrentYearAndMonth(date);
+                const currentMonth = this.data.months.filter((item) => item.year === year && item.month === month);
+                this.updateActionButton(date);
+                this.setData({
+                    currentMonth: currentMonth.length > 0 ? currentMonth : [this.data.months[0]],
+                });
+            },
+            calcMonths() {
+                const months = this.base.getMonths();
+                this.setData({
+                    months,
+                });
+            },
+            close(trigger) {
+                if (this.data.autoClose) {
+                    this.setData({ visible: false });
+                }
+                this.triggerEvent('close', { trigger });
+            },
+            onVisibleChange() {
+                this.close('overlay');
+            },
+            handleClose() {
+                this.close('close-btn');
+            },
+            handleSelect(e) {
+                const { date, year, month } = e.currentTarget.dataset;
+                if (date.type === 'disabled')
+                    return;
+                const rawValue = this.base.select({ cellType: date.type, year, month, date: date.day });
+                const value = this.toTime(rawValue);
+                this.calcMonths();
+                if (this.data.switchMode !== 'none') {
+                    const date = this.getCurrentDate();
+                    this.calcCurrentMonth(date);
+                }
+                if (this.data.confirmBtn == null) {
+                    if (this.data.type === 'single' || rawValue.length === 2) {
+                        this.setData({ visible: false });
+                        this._trigger('change', { value });
+                    }
+                }
+                this.triggerEvent('select', { value });
+            },
+            onTplButtonTap() {
+                const rawValue = this.base.getTrimValue();
+                const value = this.toTime(rawValue);
+                this.close('confirm-btn');
+                this._trigger('confirm', { value });
+            },
+            toTime(val) {
+                if (Array.isArray(val)) {
+                    return val.map((item) => item.getTime());
+                }
+                return val.getTime();
+            },
+            onScroll(e) {
+                this.triggerEvent('scroll', e.detail);
+            },
+            getCurrentDate() {
+                var _a, _b;
+                let time = Array.isArray(this.base.value) ? this.base.value[0] : this.base.value;
+                if (this.data.currentMonth.length > 0) {
+                    const year = (_a = this.data.currentMonth[0]) === null || _a === void 0 ? void 0 : _a.year;
+                    const month = (_b = this.data.currentMonth[0]) === null || _b === void 0 ? void 0 : _b.month;
+                    time = new Date(year, month, 1).getTime();
+                }
+                return time;
+            },
+            handleSwitchModeChange(e) {
+                const { type, disabled } = e.currentTarget.dataset;
+                if (disabled)
+                    return;
+                const date = this.getCurrentDate();
+                const funcMap = {
+                    'pre-year': () => getPrevYear(date),
+                    'pre-month': () => getPrevMonth(date),
+                    'next-month': () => getNextMonth(date),
+                    'next-year': () => getNextYear(date),
+                };
+                const newValue = funcMap[type]();
+                if (!newValue)
+                    return;
+                const { year, month } = this.getCurrentYearAndMonth(newValue);
+                this.triggerEvent('panel-change', { year, month: month + 1 });
+                this.calcCurrentMonth(newValue);
+            },
+        };
+    }
+};
+Calendar = __decorate([
+    wxComponent()
+], Calendar);
+export default Calendar;

miniprogram_npm/tdesign-miniprogram/calendar/calendar.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "t-popup": "../popup/popup",
+    "t-button": "../button/button",
+    "t-icon": "../icon/icon"
+  }
+}

miniprogram_npm/tdesign-miniprogram/calendar/calendar.wxml

@@ -0,0 +1,16 @@
+<wxs src="./calendar.wxs" module="_this" />
+<wxs src="../common/utils.wxs" module="_" />
+
+<t-popup
+  wx:if="{{usePopup}}"
+  class="class"
+  visible="{{visible}}"
+  usingCustomNavbar="{{usingCustomNavbar}}"
+  bind:visible-change="onVisibleChange"
+  placement="bottom"
+>
+  <include src="./template.wxml" />
+</t-popup>
+<block wx:else>
+  <include src="./template.wxml" />
+</block>

miniprogram_npm/tdesign-miniprogram/calendar/calendar.wxs

@@ -0,0 +1,44 @@
+function getDateLabel(monthItem, dateItem) {
+  var weekdayText = ['日', '一', '二', '三', '四', '五', '六'];
+  var weekday = (monthItem.weekdayOfFirstDay + dateItem.day - 1) % 7;
+  var label = monthItem.month + 1 + '月' + dateItem.day + '日, 星期' + weekdayText[weekday];
+  if (dateItem.type === 'start') {
+    label = '开始日期：' + label;
+  }
+  if (dateItem.type === 'end') {
+    label = '结束日期：' + label;
+  }
+  if (isDateSelected(dateItem)) {
+    label = '已选中, ' + label;
+  }
+  if (dateItem.prefix) {
+    label += ', ' + dateItem.prefix;
+  }
+  if (dateItem.suffix) {
+    label += ', ' + dateItem.suffix;
+  }
+  return label;
+}
+
+function isDateSelected(dateItem) {
+  return ['start', 'end', 'selected', 'centre'].indexOf(dateItem.type) >= 0;
+}
+
+function getMonthTitle(year, month, pattern = '') {
+  // prettier-ignore
+  var REGEXP = getRegExp('\{year\}|\{month\}', 'g');
+
+  return pattern.replace(REGEXP, function (match) {
+    var replacements = {
+      '{year}': year,
+      '{month}': month < 10 ? '0' + month : month,
+    };
+    return replacements[match] || match;
+  });
+}
+
+module.exports = {
+  getDateLabel: getDateLabel,
+  isDateSelected: isDateSelected,
+  getMonthTitle: getMonthTitle,
+};

miniprogram_npm/tdesign-miniprogram/calendar/calendar.wxss

@@ -0,0 +1,240 @@
+.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-calendar {
+  width: inherit;
+  position: relative;
+  z-index: 9999;
+  background: var(--td-calendar-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  overflow-x: hidden;
+}
+.t-calendar--popup {
+  border-top-left-radius: var(--td-calendar-radius, 24rpx);
+  border-top-right-radius: var(--td-calendar-radius, 24rpx);
+}
+.t-calendar__title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--td-calendar-title-font-size, 18px);
+  font-weight: 600;
+  color: var(--td-calendar-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  height: 52rpx;
+  padding: 32rpx;
+}
+.t-calendar__title:focus {
+  outline: 0;
+}
+.t-calendar__close-btn {
+  position: absolute;
+  top: 32rpx;
+  right: 32rpx;
+  margin: -24rpx;
+  padding: 24rpx;
+  color: var(--td-calendar-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-calendar__days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-column-gap: 8rpx;
+  padding: 0 32rpx;
+  text-align: center;
+  line-height: 92rpx;
+}
+.t-calendar__days-item {
+  height: 92rpx;
+  font-size: 28rpx;
+  color: var(--td-calendar-days-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
+}
+.t-calendar__content {
+  min-height: 400rpx;
+  display: flex;
+  flex-direction: column;
+}
+.t-calendar__month {
+  font-size: 28rpx;
+  color: var(--td-calendar-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  font-weight: 600;
+  padding: 32rpx 0 0;
+}
+.t-calendar__months {
+  height: 712rpx;
+  padding: 0 32rpx 32rpx;
+  box-sizing: border-box;
+}
+.t-calendar__months::-webkit-scrollbar {
+  display: none;
+}
+.t-calendar__dates {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-column-gap: 8rpx;
+}
+.t-calendar__dates-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  border-radius: var(--td-calendar-selected-border-radius, var(--td-radius-default, 12rpx));
+  height: 120rpx;
+  line-height: 48rpx;
+  font-weight: 600;
+  margin-top: 16rpx;
+  color: var(--td-calendar-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.t-calendar__dates-item-prefix,
+.t-calendar__dates-item-suffix {
+  position: absolute;
+  font-size: 20rpx;
+  line-height: 32rpx;
+  width: 100%;
+  text-align: center;
+  font-weight: 400;
+}
+.t-calendar__dates-item-prefix {
+  top: 8rpx;
+}
+.t-calendar__dates-item-suffix {
+  bottom: 8rpx;
+  color: var(--td-calendar-item-suffix-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-calendar__dates-item-suffix--selected,
+.t-calendar__dates-item-suffix--start,
+.t-calendar__dates-item-suffix--end {
+  color: var(--td-calendar-selected-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
+}
+.t-calendar__dates-item-suffix--disabled {
+  color: var(--td-calendar-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}
+.t-calendar__dates-item--selected,
+.t-calendar__dates-item--start,
+.t-calendar__dates-item--end {
+  background: var(--td-calendar-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  color: var(--td-calendar-selected-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
+  border-radius: var(--td-calendar-selected-border-radius, var(--td-radius-default, 12rpx));
+}
+.t-calendar__dates-item--start {
+  border-radius: var(--td-calendar-selected-border-radius, var(--td-radius-default, 12rpx)) 0 0 var(--td-calendar-selected-border-radius, var(--td-radius-default, 12rpx));
+}
+.t-calendar__dates-item--end {
+  border-radius: 0 var(--td-calendar-selected-border-radius, var(--td-radius-default, 12rpx)) var(--td-calendar-selected-border-radius, var(--td-radius-default, 12rpx)) 0;
+}
+.t-calendar__dates-item--start + .t-calendar__dates-item--end::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  width: 8rpx;
+  height: 100%;
+  background: var(--td-calendar-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-calendar__dates-item--start + .t-calendar__dates-item--end:before {
+  left: -8rpx;
+}
+.t-calendar__dates-item--centre {
+  border-radius: 0;
+  background-color: var(--td-calendar-item-centre-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-calendar__dates-item--centre::before,
+.t-calendar__dates-item--centre::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  width: 8rpx;
+  height: 100%;
+  background-color: var(--td-calendar-item-centre-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-calendar__dates-item--centre:before {
+  left: -8rpx;
+}
+.t-calendar__dates-item--centre:after {
+  right: -8rpx;
+}
+.t-calendar__dates-item--disabled {
+  color: var(--td-calendar-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+  cursor: default;
+}
+.t-calendar__footer {
+  padding: 32rpx;
+}
+.t-calendar-switch-mode--none > .t-calendar__months {
+  height: 60vh;
+}
+.t-calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 44rpx;
+}
+.t-calendar-header__with-action {
+  padding: 0rpx 32rpx 16rpx 32rpx;
+  box-sizing: border-box;
+  position: relative;
+}
+.t-calendar-header__with-action::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-border-color, var(--td-gray-color-3, #e7e7e7));
+}
+.t-calendar-header__with-action::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-calendar-header__with-action .t-calendar-header__title {
+  flex: 1;
+  text-align: center;
+  font-size: 28rpx;
+  font-weight: 600;
+}
+.t-calendar-header__action {
+  display: flex;
+  font-size: 40rpx;
+  color: var(--td-calendar-switch-mode-icon-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
+}
+.t-calendar-header__icon {
+  padding: 16rpx;
+}
+.t-calendar-header__icon--disabled {
+  color: var(--td-calendar-switch-mode-icon-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}
+.t-calendar-header__title {
+  text-align: left;
+}

miniprogram_npm/tdesign-miniprogram/calendar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './type';
+export * from './calendar';

miniprogram_npm/tdesign-miniprogram/calendar/index.js

@@ -0,0 +1,2 @@
+export * from './type';
+export * from './calendar';

miniprogram_npm/tdesign-miniprogram/calendar/props.d.ts

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

miniprogram_npm/tdesign-miniprogram/calendar/props.js

@@ -0,0 +1,57 @@
+const props = {
+    autoClose: {
+        type: Boolean,
+        value: true,
+    },
+    confirmBtn: {
+        type: null,
+        value: '',
+    },
+    firstDayOfWeek: {
+        type: Number,
+        value: 0,
+    },
+    format: {
+        type: null,
+    },
+    localeText: {
+        type: Object,
+    },
+    maxDate: {
+        type: Number,
+    },
+    minDate: {
+        type: Number,
+    },
+    switchMode: {
+        type: String,
+        value: 'none',
+    },
+    title: {
+        type: String,
+    },
+    type: {
+        type: String,
+        value: 'single',
+    },
+    usePopup: {
+        type: Boolean,
+        value: true,
+    },
+    usingCustomNavbar: {
+        type: Boolean,
+        value: false,
+    },
+    value: {
+        type: null,
+        value: null,
+    },
+    defaultValue: {
+        type: null,
+    },
+    visible: {
+        type: Boolean,
+        value: false,
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/calendar/template.wxml

@@ -0,0 +1,80 @@
+<wxs src="./calendar.wxs" module="_this" />
+<wxs src="../common/utils.wxs" module="_" />
+<import src="../common/template/button.wxml" />
+<import src="./calendar-header.wxml" />
+
+<view
+  class="{{_.cls(classPrefix, [['popup', usePopup]])}} {{classPrefix}}-switch-mode--{{switchMode}} class {{prefix}}-class"
+  style="{{_._style([style, customStyle])}}"
+>
+  <view class="{{classPrefix}}__title" tabindex="0">
+    <slot name="title" />
+    <text wx:if="{{title || realLocalText.title}}">{{ title || realLocalText.title }}</text>
+  </view>
+  <t-icon
+    wx:if="{{usePopup}}"
+    name="close"
+    class="{{classPrefix}}__close-btn"
+    size="48rpx"
+    aria-role="button"
+    aria-label="关闭"
+    bind:tap="handleClose"
+  />
+  <template
+    wx:if="{{switchMode !== 'none'}}"
+    is="calendar-header"
+    data="{{ classPrefix: classPrefix + '-header', switchMode, ...actionButtons, title: _this.getMonthTitle(currentMonth[0].year, realLocalText.months[currentMonth[0].month], realLocalText.monthTitle)}}"
+  />
+  <view aria-hidden class="{{classPrefix}}__days">
+    <view wx:for="{{days}}" wx:key="index" class="{{classPrefix}}__days-item">{{ item }}</view>
+  </view>
+  <scroll-view
+    class="{{classPrefix}}__months"
+    scroll-into-view="{{scrollIntoView}}"
+    scroll-y
+    enhanced
+    show-scrollbar="{{false}}"
+    bindscroll="onScroll"
+  >
+    <block wx:for="{{ switchMode === 'none' ? months : currentMonth}}" wx:key="index">
+      <template
+        wx:if="{{switchMode === 'none'}}"
+        is="calendar-header"
+        data="{{class: classPrefix + '__month', classPrefix: classPrefix + '-header', tId: 'year_' + item.year + '_month_' + item.month, switchMode, ...actionButtons, title: _this.getMonthTitle(item.year, realLocalText.months[item.month], realLocalText.monthTitle) }}"
+      />
+      <view class="{{classPrefix}}__dates">
+        <view wx:for="{{(item.weekdayOfFirstDay - firstDayOfWeek + 7) % 7}}" wx:key="index" />
+        <block wx:for="{{item.months}}" wx:for-index="dateIndex" wx:for-item="dateItem" wx:key="dateIndex">
+          <view
+            class="{{classPrefix}}__dates-item {{dateItem.className}} {{classPrefix}}__dates-item--{{dateItem.type}}"
+            data-year="{{item.year}}"
+            data-month="{{item.month}}"
+            data-date="{{dateItem}}"
+            aria-role="button"
+            aria-label="{{_this.getDateLabel(item, dateItem)}}"
+            aria-disabled="{{dateItem.type === 'disabled'}}"
+            bind:tap="handleSelect"
+          >
+            <view wx:if="{{dateItem.prefix}}" class="{{classPrefix}}__dates-item-prefix">{{ dateItem.prefix }}</view>
+            {{ dateItem.day }}
+            <view
+              wx:if="{{dateItem.suffix}}"
+              class="{{classPrefix}}__dates-item-suffix {{classPrefix}}__dates-item-suffix--{{dateItem.type}}"
+            >
+              {{ dateItem.suffix }}
+            </view>
+          </view>
+        </block>
+      </view>
+    </block>
+  </scroll-view>
+  <view wx:if="{{innerConfirmBtn != null && usePopup}}" class="{{classPrefix}}__footer">
+    <slot wx:if="{{innerConfirmBtn === 'slot'}}" name="confirm-btn" />
+    <block wx:elif="{{innerConfirmBtn}}">
+      <template
+        is="button"
+        data="{{ block: true,  theme: 'primary', rootClass: 't-calendar__confirm-btn', content: realLocalText.confirm, ...innerConfirmBtn }}"
+      />
+    </block>
+  </view>
+</view>

miniprogram_npm/tdesign-miniprogram/calendar/type.d.ts

@@ -0,0 +1,80 @@
+import { ButtonProps } from '../button/index';
+export interface TdCalendarProps {
+    autoClose?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    confirmBtn?: {
+        type: null;
+        value?: string | ButtonProps | null;
+    };
+    firstDayOfWeek?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    format?: {
+        type: undefined;
+        value?: CalendarFormatType;
+    };
+    localeText?: {
+        type: ObjectConstructor;
+        value?: CalendarLocaleText;
+    };
+    maxDate?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    minDate?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    switchMode?: {
+        type: StringConstructor;
+        value?: 'none' | 'month' | 'year-month';
+    };
+    title?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    type?: {
+        type: StringConstructor;
+        value?: 'single' | 'multiple' | 'range';
+    };
+    usePopup?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    usingCustomNavbar?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    value?: {
+        type: null;
+        value?: number | number[];
+    };
+    defaultValue?: {
+        type: null;
+        value?: number | number[];
+    };
+    visible?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+}
+export declare type CalendarFormatType = (day: TDate) => TDate;
+export declare type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | '';
+export interface TDate {
+    date: Date;
+    day: number;
+    type: TDateType;
+    className?: string;
+    prefix?: string;
+    suffix?: string;
+}
+export interface CalendarLocaleText {
+    title?: string;
+    weekdays?: string[];
+    monthTitle?: string;
+    months?: string[];
+    confirm?: string;
+}

miniprogram_npm/tdesign-miniprogram/calendar/type.js

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