project init & fix ui

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

@@ -0,0 +1,25 @@
+:: BASE_DOC ::
+
+## API
+### ActionSheet Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+align | String | center | `0.29.0`。options：center/left | N
+cancel-text | String | - | \- | N
+count | Number | 8 | \- | N
+custom-style | String | - | `0.25.0` | N
+description | String | - | `0.29.0` | N
+items | Array | - | required。Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
+show-cancel | Boolean | true | \- | N
+theme | String | list | options：list/grid | N
+visible | Boolean | false | required | Y
+default-visible | Boolean | undefined | required。uncontrolled property | Y
+
+### ActionSheet Events
+
+name | params | description
+-- | -- | --
+cancel | \- | \-
+close | \- | \-
+selected | `(selected: ActionSheetItem \| string, index: number)` | \-

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

@@ -0,0 +1,107 @@
+---
+title: ActionSheet 动作面板
+description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-89%25-blue" /></span>
+
+<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
+    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
+  </svg>
+  该组件于 0.9.0 版本上线，请留意版本。
+</div>
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+列表型动作面板
+
+{{ list }}
+
+宫格型动作面板
+
+{{ grid }}
+
+### 组件状态
+
+宫格型动作面板
+
+{{ status }}
+
+### 组件样式
+
+列表型对齐方式
+
+{{ align }}
+
+### 支持指令调用
+
+```javascript
+import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';
+
+// 指令调用不同于组件引用不需要传入visible
+const basicListOption: ActionSheetShowOption = {
+  theme: ActionSheetTheme.List,
+  selector: '#t-action-sheet',
+  items: [
+    {
+      label: '默认选项',
+    },
+    {
+      label: '失效选项',
+      disabled: true,
+    },
+    {
+      label: '警告选项',
+      color: '#e34d59',
+    },
+  ],
+};
+
+const handler = ActionSheet.show(basicListOption);
+```
+
+指令调用的关闭如下
+
+```javascript
+handler.close();
+```
+
+
+## API
+### ActionSheet Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+align | String | center | `0.29.0`。水平对齐方式。可选项：center/left | N
+cancel-text | String | - | 设置取消按钮的文本 | N
+count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
+custom-style | String | - | `0.25.0`。自定义组件样式 | N
+description | String | - | `0.29.0`。动作面板描述文字 | N
+items | Array | - | 必需。菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
+show-cancel | Boolean | true | 是否显示取消按钮 | N
+theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
+visible | Boolean | false | 必需。显示与隐藏 | Y
+default-visible | Boolean | undefined | 必需。显示与隐藏。非受控属性 | Y
+
+### ActionSheet Events
+
+名称 | 参数 | 描述
+-- | -- | --
+cancel | \- | 点击取消按钮时触发
+close | \- | 关闭时触发
+selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发

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

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

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

@@ -0,0 +1,91 @@
+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';
+const { prefix } = config;
+const name = `${prefix}-action-sheet`;
+let ActionSheet = class ActionSheet extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
+        this.properties = Object.assign({}, props);
+        this.data = {
+            prefix,
+            classPrefix: name,
+            gridThemeItems: [],
+            currentSwiperIndex: 0,
+        };
+        this.controlledProps = [
+            {
+                key: 'visible',
+                event: 'visible-change',
+            },
+        ];
+        this.methods = {
+            onSwiperChange(e) {
+                const { detail: { current }, } = e;
+                this.setData({
+                    currentSwiperIndex: current,
+                });
+            },
+            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 });
+            },
+            memoInitialData() {
+                this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
+            },
+            close() {
+                this._trigger('visible-change', { visible: false });
+            },
+            onPopupVisibleChange({ detail }) {
+                if (!detail.visible) {
+                    this._trigger('visible-change', { visible: false });
+                }
+                if (this.autoClose) {
+                    this.setData({ visible: false });
+                    this.autoClose = false;
+                }
+            },
+            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 });
+                    this._trigger('visible-change', { visible: false });
+                }
+            },
+            onCancel() {
+                this.triggerEvent('cancel');
+            },
+        };
+    }
+    ready() {
+        this.memoInitialData();
+        this.splitGridThemeActions();
+    }
+};
+ActionSheet.show = show;
+ActionSheet = __decorate([
+    wxComponent()
+], ActionSheet);
+export default ActionSheet;

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

@@ -0,0 +1,11 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-popup": "../popup/popup",
+    "t-swiper": "../swiper/swiper",
+    "t-image": "../image/image",
+    "t-grid": "../grid/grid",
+    "t-grid-item": "../grid/grid-item"
+  }
+}

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

@@ -0,0 +1,36 @@
+<wxs src="./action-sheet.wxs" module="this" />
+<wxs src="../common/utils.wxs" module="_" />
+<import src="./template/action-sheet-list.wxml" />
+<import src="./template/action-sheet-grid.wxml" />
+
+<view id="{{classPrefix}}" style="{{customStyle}}" class="{{classPrefix}} {{prefix}}-class">
+  <t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
+    <view class="{{classPrefix}}__content {{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 {{classPrefix}}__safe">
+      <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,185 @@
+.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-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-block, #fff);
+  overflow: hidden;
+}
+.t-action-sheet .flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-action-sheet .ellipsis {
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-action-sheet__grid {
+  padding: 48rpx 0 16rpx 0;
+}
+.t-action-sheet__description {
+  color: var(--td-action-sheet-description-color, 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::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
+}
+.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, 96rpx);
+  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-gray-color-1, #f3f3f3));
+}
+.t-action-sheet__list-item::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.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-disabled-color, 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__swiper-wrap {
+  position: relative;
+  background-color: var(--td-bg-color-block, #fff);
+}
+.t-action-sheet__square {
+  height: 148rpx;
+  margin-bottom: 32rpx;
+}
+.t-action-sheet__square-image {
+  width: 72rpx;
+  height: 72rpx;
+  padding: 10rpx;
+}
+.t-action-sheet__square-text {
+  width: 100%;
+  margin-top: 10rpx;
+  font-size: 28rpx;
+  color: rgba(0, 0, 0, 0.9);
+  text-align: center;
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-action-sheet__footer {
+  background-color: var(--td-bg-color-block, #fff);
+}
+.t-action-sheet__gap-list {
+  height: 16rpx;
+  background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
+}
+.t-action-sheet__gap-grid {
+  height: 1rpx;
+  background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
+}
+.t-action-sheet__cancel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--td-action-sheet-list-item-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;
+}
+.t-action-sheet__safe {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}

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

@@ -0,0 +1,3 @@
+import ActionSheet from './action-sheet';
+export * from './show';
+export default ActionSheet;

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

@@ -0,0 +1,3 @@
+import ActionSheet from './action-sheet';
+export * from './show';
+export default ActionSheet;

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,42 @@
+const props = {
+    align: {
+        type: String,
+        value: 'center',
+    },
+    cancelText: {
+        type: String,
+        value: '取消',
+    },
+    count: {
+        type: Number,
+        value: 8,
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    description: {
+        type: String,
+        value: '',
+    },
+    items: {
+        type: Array,
+    },
+    showCancel: {
+        type: Boolean,
+        value: true,
+    },
+    theme: {
+        type: String,
+        value: 'list',
+    },
+    visible: {
+        type: Boolean,
+        value: null,
+    },
+    defaultVisible: {
+        type: Boolean,
+        value: false,
+    },
+};
+export default props;

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

@@ -0,0 +1,29 @@
+/// <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 {
+    visible: boolean;
+    items: Array<string | ActionSheetItem>;
+    defaultVisible?: boolean;
+    cancelText?: string;
+    count?: number;
+    showCancel?: boolean;
+    theme?: ActionSheetTheme;
+}
+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/action-sheet-grid.wxml

@@ -0,0 +1,50 @@
+<import src="./action-sheet-item.wxml" />
+<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="{{item.icon}}"
+        text="{{item.label}}"
+      >
+        <!-- <template is="item" data="{{classPrefix, item}}" /> -->
+      </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" 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="{{item.icon}}"
+              text="{{item.label}}"
+            >
+              <!-- <template is="item" data="{{classPrefix, item}}" /> -->
+            </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/action-sheet-item.wxml

@@ -0,0 +1,17 @@
+<wxs src="../action-sheet.wxs" module="this" />
+<template name="item">
+  <block>
+    <t-image
+      slot="image"
+      wx:if="{{ this.isImage(item.icon) }}"
+      lazy
+      class="{{classPrefix}}__square-image"
+      src="{{item.icon}}"
+      mode="aspectFill"
+    />
+    <t-icon slot="image" wx:else name="{{item.icon}}" class="{{classPrefix}}__square-image" size="72rpx" />
+  </block>
+  <view slot="text" style="{{ item.color ? 'color: ' + item.color : '' }}" class="{{classPrefix}}__square-text">
+    {{item.label}}
+  </view>
+</template>

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

@@ -0,0 +1,14 @@
+<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>
+  </view>
+</template>

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

@@ -0,0 +1,47 @@
+export interface TdActionSheetProps {
+    align?: {
+        type: StringConstructor;
+        value?: 'center' | 'left';
+    };
+    cancelText?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    count?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    description?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    items: {
+        type: ArrayConstructor;
+        value?: Array<string | ActionSheetItem>;
+    };
+    showCancel?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'list' | 'grid';
+    };
+    visible: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    defaultVisible: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+}
+export interface ActionSheetItem {
+    label: string;
+    color?: string;
+    disabled?: boolean;
+}

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

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