值为 true 显示默认文案；值为 false 不显示滑块当前值文本；
值为 `${value}%` 则表示组件会根据占位符渲染文案；
值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值", + "label": "" + }, + { + "key": "marks", + "type": ["Object", "Array"], + "desc": "刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5: '5¥', 10: '10%' }`", + "label": "" + }, + { + "key": "max", + "type": ["Number"], + "desc": "滑块范围最大值", + "label": "" + }, + { + "key": "min", + "type": ["Number"], + "desc": "滑块范围最小值", + "label": "" + }, + { + "key": "range", + "type": ["Boolean"], + "desc": "双游标滑块", + "label": "" + }, + { + "key": "showExtremeValue", + "type": ["Boolean"], + "desc": "是否边界值", + "label": "" + }, + { + "key": "step", + "type": ["Number"], + "desc": "步长", + "label": "" + }, + { + "key": "value", + "type": ["Number", "Array"], + "desc": "滑块值", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-bar", "t-class-bar-active", "t-class-bar-disabled", "t-class-cursor"], + "events": [ + { + "key": "bind:change", + "desc": "滑块值变化时触发", + "label": "" + }, + { + "key": "bind:dragend", + "desc": "结束拖动时触发", + "label": "" + }, + { + "key": "bind:dragstart", + "desc": "开始拖动时触发", + "label": "" + } + ], + "tpl": "
`files` 表示之前已经上传完成的文件列表。
`currentSelectedFiles` 表示本次上传选中的文件列表", + "label": "" + }, + { + "key": "bind:success", + "desc": "上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述", + "label": "" + } + ], + "tpl": "
`type TriggerSource = 'overlay' \| 'command' \| 'select' `
+selected | `(selected: ActionSheetItem \| string, index: number)` | \- + +### 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 | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/README.md new file mode 100644 index 0000000..8fccb2d --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/README.md @@ -0,0 +1,129 @@ +--- +title: ActionSheet 动作面板 +description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。 +spline: data +isComponent: true +--- + +
+
+
+
+ 该组件于 0.9.0 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 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
+description | String | - | `0.29.0`。动作面板描述文字 | N
+items | Array | - | 必需。菜单项。TS 类型：`Array`type TriggerSource = 'overlay' \| 'command' \| 'select' `
+selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发 + +### ActionSheet 外部样式类 +类名 | 说明 +-- | -- +t-class | 根节点样式类 +t-class-content | 内容样式类 +t-class-cancel | 取消样式类 + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--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 | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.d.ts new file mode 100644 index 0000000..a14e059 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.d.ts @@ -0,0 +1,76 @@ +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; + }; + description?: { + type: StringConstructor; + value?: string; + }; + items: { + type: ArrayConstructor; + value?: (string | import("./type").ActionSheetItem)[]; + }; + popupProps?: { + type: ObjectConstructor; + value?: object; + }; + showCancel?: { + type: BooleanConstructor; + value?: boolean; + }; + showOverlay?: { + 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; + defaultPopUpProps: {}; + defaultPopUpzIndex: 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; + }; +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.js new file mode 100644 index 0000000..368edd5 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.js @@ -0,0 +1,102 @@ +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, + defaultPopUpProps: {}, + defaultPopUpzIndex: 11500, + }; + 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.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; + } + }, + 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; + } + }, + }; + } + ready() { + this.memoInitialData(); + this.splitGridThemeActions(); + } +}; +ActionSheet.show = show; +ActionSheet = __decorate([ + wxComponent() +], ActionSheet); +export default ActionSheet; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.json new file mode 100644 index 0000000..f0281ed --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.json @@ -0,0 +1,9 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon", + "t-popup": "../popup/popup", + "t-grid": "../grid/grid", + "t-grid-item": "../grid-item/grid-item" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxml new file mode 100644 index 0000000..9a83cd9 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxml @@ -0,0 +1,48 @@ +
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-avatar": "tdesign-miniprogram/avatar/avatar",
+ "t-avatar-group": "tdesign-miniprogram/avatar-group/avatar-group"
+}
+```
+
+## 代码演示
+
+### 头像类型
+
+图片头像
+
+{{ image-avatar }}
+
+字符头像
+
+{{ character-avatar }}
+
+图标头像
+
+{{ icon-avatar }}
+
+徽标头像
+
+{{ badge-avatar }}
+
+
+### 组合头像
+
+纯展示
+
+{{ exhibition }}
+
+带操作
+
+{{ action }}
+
+### 头像尺寸
+
+头像 large/medium/small 尺寸
+
+{{ size }}
+
+## API
+### Avatar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
+badge-props | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
+bordered | Boolean | false | 已废弃。是否显示外边框 | N
+hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
+icon | String / Object | - | 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
+image | String | - | 图片地址 | N
+image-props | Object | - | 透传至 Image 组件 | N
+shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
+size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等 | N
+
+### Avatar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+error | \- | 图片加载失败时触发
+
+### Avatar 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-image | 图片样式类
+t-class-icon | 图标样式类
+t-class-alt | 替代文本样式类
+t-class-content | 内容样式类
+
+### AvatarGroup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+cascading | String | 'left-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar-group/type.ts) | N
+collapse-avatar | String / Slot | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` | N
+max | Number | - | 能够同时显示的最多头像数量 | N
+size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
+
+### AvatarGroup 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-image | 图片样式类
+t-class-content | 内容样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-avatar-group-margin-left-large | -8px | -
+--td-avatar-group-margin-left-medium | -6px | -
+--td-avatar-group-margin-left-small | -4px | -
+--td-avatar-bg-color | @brand-color-light-active | -
+--td-avatar-border-color | #fff | -
+--td-avatar-border-width-large | 8rpx | -
+--td-avatar-border-width-medium | 6rpx | -
+--td-avatar-border-width-small | 4rpx | -
+--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 | 16px | -
+--td-avatar-text-medium-font-size | @font-size-base | -
+--td-avatar-text-small-font-size | @font-size-s | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/avatar/avatar.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/avatar/avatar.d.ts
new file mode 100644
index 0000000..8758dbb
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/avatar/avatar.d.ts
@@ -0,0 +1,23 @@
+/// 
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+"t-back-top": "tdesign-miniprogram/back-top/back-top",
+}
+```
+
+## 代码演示
+
+
+
+### 基础返回顶部
+
+{{ base }}
+
+## API
+### BackTop Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+external-classes | Array | - | 组件类名，分别用于设置外层元素、图标、文本内容等元素类名。`['t-class', 't-class-icon', 't-class-text']` | N
+visibility-height | Number | 200 | 滚动高度达到此参数值才出现 | N
+scroll-top | Number | 0 | 页面滚动距离 | N
+fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
+icon | String / Boolean / Object / Slot | true | 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` | N
+text | String | '' | 文案 | N
+theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
+
+### BackTop Events
+
+名称 | 参数 | 描述
+-- | -- | --
+to-top | \- | 点击触发
+
+### BackTop 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-text | 文本样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--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 | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/back-top/back-top.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/back-top/back-top.d.ts
new file mode 100644
index 0000000..d0cc128
--- /dev/null
+++ b/miniprogram/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;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/back-top/back-top.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/back-top/back-top.js
new file mode 100644
index 0000000..1e20b6a
--- /dev/null
+++ b/miniprogram/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;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/back-top/back-top.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/back-top/back-top.json
new file mode 100644
index 0000000..2e06b99
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/back-top/back-top.json
@@ -0,0 +1,6 @@
+{
+ "component": true,
+ "usingComponents": {
+ "t-icon": "../icon/icon"
+ }
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/back-top/back-top.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/back-top/back-top.wxml
new file mode 100644
index 0000000..1073ce5
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/back-top/back-top.wxml
@@ -0,0 +1,17 @@
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-badge": "tdesign-miniprogram/badge/badge"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+{{ base }}
+
+### 组件样式
+
+{{ theme }}
+
+### 组件尺寸
+
+{{ size }}
+
+## API
+### Badge Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+color | String | - | 颜色 | N
+content | String | - | 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义 | N
+count | String / Number / Slot | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+dot | Boolean | false | 是否为红点 | N
+max-count | Number | 99 | 封顶的数字值 | N
+offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-button": "tdesign-miniprogram/button/button"
+}
+```
+
+## 代码演示
+
+### 01 组件类型
+
+基础按钮
+
+{{ base }}
+
+图标按钮
+
+{{ icon-btn }}
+
+幽灵按钮
+
+{{ ghost-btn }}
+
+组合按钮
+
+{{ group-btn }}
+
+通栏按钮
+
+{{ block-btn }}
+
+### 02 组件状态
+
+按钮禁用态
+
+{{ disabled }}
+
+### 03 组件样式
+
+按钮尺寸
+
+{{ size }}
+
+按钮形状
+
+{{ shape }}
+
+按钮主题
+
+{{ theme }}
+
+## API
+### Button Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+t-id | String | - | 按钮标签id | N
+block | Boolean | false | 是否为块级元素 | N
+content | String / Slot | - | 按钮内容 | N
+custom-dataset | Object | - | 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。TS 类型：`any` | N
+disabled | Boolean | false | 禁用状态 | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
+loading | Boolean | false | 是否显示为加载状态 | N
+loading-props | Object | - | 透传至 Loading 组件。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large。TS 类型：`SizeEnum` | N
+suffix | Slot | - | 右侧内容，可用于定义右侧图标 | N
+theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
+type | String | - | 同小程序的 formType。可选项：submit/reset | N
+variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/dashed/text | N
+open-type | String | - | 微信开放能力。具体释义：
`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （*小程序插件中不能使用*）；
`share` 触发用户转发，使用前建议先阅读使用指引；
`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，具体说明 （*小程序插件中不能使用*）；
`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；
`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数具体说明；
`openSetting` 打开授权设置页；
`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容；
`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；
`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N +hover-class | String | '' | 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 | N +hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N +hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | N +hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | N +lang | String | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。。
具体释义：
`en` 英文；
`zh_CN` 简体中文；
`zh_TW` 繁体中文。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：en/zh_CN/zh_TW | N +session-from | String | - | 会话来源，open-type="contact"时有效 | N +send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | N +send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | N +send-message-img | String | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | N +app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | N +show-message-card | Boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | N +bindgetuserinfo | Eventhandle | - | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 | N +bindcontact | Eventhandle | - | 客服消息回调，open-type="contact"时有效 | N +bindgetphonenumber | Eventhandle | - | 获取用户手机号回调，open-type=getPhoneNumber时有效 | N +binderror | Eventhandle | - | 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 | N +bindopensetting | Eventhandle | - | 在打开授权设置页后回调，open-type=openSetting时有效 | N +bindlaunchapp | Eventhandle | - | 打开 APP 成功的回调，open-type=launchApp时有效 | N +bindchooseavatar | Eventhandle | - | 获取用户头像回调，open-type=chooseAvatar时有效 | N +bindagreeprivacyauthorization | Eventhandle | - | 用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 | N + +### Button Events + +名称 | 参数 | 描述 +-- | -- | -- +tap | `event` | 点击按钮，当按钮不为加载或禁用状态时触发 + +### Button 外部样式类 +类名 | 说明 +-- | -- +t-class | 根节点样式类 +t-class-icon | 图标样式类 +t-class-loading | 加载样式类 + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-button-border-radius | @radius-default | - +--td-button-border-width | 4rpx | - +--td-button-danger-active-bg-color | @error-color-7 | - +--td-button-danger-active-border-color | @error-color-7 | - +--td-button-danger-bg-color | @error-color | - +--td-button-danger-border-color | @error-color | - +--td-button-danger-color | @font-white-1 | - +--td-button-danger-dashed-border-color | @button-danger-dashed-color | - +--td-button-danger-dashed-color | @error-color | - +--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - +--td-button-danger-disabled-bg | @error-color-3 | - +--td-button-danger-disabled-border-color | @error-color-3 | - +--td-button-danger-disabled-color | @font-white-1 | - +--td-button-danger-outline-active-bg-color | @bg-color-container-active | - +--td-button-danger-outline-active-border-color | @error-color-7 | - +--td-button-danger-outline-border-color | @button-danger-outline-color | - +--td-button-danger-outline-color | @error-color | - +--td-button-danger-outline-disabled-color | @error-color-3 | - +--td-button-danger-text-active-bg-color | @bg-color-container-active | - +--td-button-danger-text-color | @error-color | - +--td-button-danger-text-disabled-color | @button-danger-disabled-color | - +--td-button-default-active-bg-color | @bg-color-component-active | - +--td-button-default-active-border-color | @bg-color-component-active | - +--td-button-default-bg-color | @bg-color-component | - +--td-button-default-border-color | @bg-color-component | - +--td-button-default-color | @font-gray-1 | - +--td-button-default-disabled-bg | @bg-color-component-disabled | - +--td-button-default-disabled-border-color | @bg-color-component-disabled | - +--td-button-default-disabled-color | @font-gray-4 | - +--td-button-default-outline-active-bg-color | @bg-color-container-active | - +--td-button-default-outline-active-border-color | @component-border | - +--td-button-default-outline-border-color | @component-border | - +--td-button-default-outline-color | @font-gray-1 | - +--td-button-default-outline-disabled-color | @component-border | - +--td-button-default-text-active-bg-color | @bg-color-container-active | - +--td-button-extra-small-font-size | @font-size-base | - +--td-button-extra-small-height | 56rpx | - +--td-button-extra-small-icon-font-size | 36rpx | - +--td-button-extra-small-padding-horizontal | 16rpx | - +--td-button-font-weight | 600 | - +--td-button-ghost-border-color | @button-ghost-color | - +--td-button-ghost-color | @bg-color-container | - +--td-button-ghost-danger-border-color | @error-color | - +--td-button-ghost-danger-color | @error-color | - +--td-button-ghost-disabled-color | rgba(255, 255, 255, 0.35) | - +--td-button-ghost-primary-border-color | @brand-color | - +--td-button-ghost-primary-color | @brand-color | - +--td-button-icon-border-radius | 8rpx | - +--td-button-icon-spacer | @spacer | - +--td-button-large-font-size | @font-size-m | - +--td-button-large-height | 96rpx | - +--td-button-large-icon-font-size | 48rpx | - +--td-button-large-padding-horizontal | 40rpx | - +--td-button-light-active-bg-color | @brand-color-light-active | - +--td-button-light-active-border-color | @brand-color-light-active | - +--td-button-light-bg-color | @brand-color-light | - +--td-button-light-border-color | @brand-color-light | - +--td-button-light-color | @brand-color | - +--td-button-light-disabled-bg | @brand-color-light | - +--td-button-light-disabled-border-color | @brand-color-light | - +--td-button-light-disabled-color | @brand-color-disabled | - +--td-button-light-outline-active-bg-color | @brand-color-light-active | - +--td-button-light-outline-active-border-color | @brand-color-active | - +--td-button-light-outline-bg-color | @brand-color-light | - +--td-button-light-outline-border-color | @button-light-outline-color | - +--td-button-light-outline-color | @brand-color | - +--td-button-light-outline-disabled-color | @brand-color-disabled | - +--td-button-light-text-active-bg-color | @bg-color-container-active | - +--td-button-light-text-color | @brand-color | - +--td-button-medium-font-size | @font-size-m | - +--td-button-medium-height | 80rpx | - +--td-button-medium-icon-font-size | 40rpx | - +--td-button-medium-padding-horizontal | 32rpx | - +--td-button-primary-active-bg-color | @brand-color-active | - +--td-button-primary-active-border-color | @brand-color-active | - +--td-button-primary-bg-color | @brand-color | - +--td-button-primary-border-color | @brand-color | - +--td-button-primary-color | @font-white-1 | - +--td-button-primary-dashed-border-color | @button-primary-dashed-color | - +--td-button-primary-dashed-color | @brand-color | - +--td-button-primary-dashed-disabled-color | @brand-color-disabled | - +--td-button-primary-disabled-bg | @brand-color-disabled | - +--td-button-primary-disabled-border-color | @brand-color-disabled | - +--td-button-primary-disabled-color | @font-white-1 | - +--td-button-primary-outline-active-bg-color | @bg-color-container-active | - +--td-button-primary-outline-active-border-color | @brand-color-active | - +--td-button-primary-outline-border-color | @button-primary-outline-color | - +--td-button-primary-outline-color | @brand-color | - +--td-button-primary-outline-disabled-color | @brand-color-disabled | - +--td-button-primary-text-active-bg-color | @bg-color-container-active | - +--td-button-primary-text-color | @brand-color | - +--td-button-primary-text-disabled-color | @brand-color-disabled | - +--td-button-small-font-size | @font-size-base | - +--td-button-small-height | 64rpx | - +--td-button-small-icon-font-size | 36rpx | - +--td-button-small-padding-horizontal | 24rpx | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/button/button.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/button/button.d.ts new file mode 100644 index 0000000..4bd4c49 --- /dev/null +++ b/miniprogram/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; + }; +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/button/button.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/button/button.js new file mode 100644 index 0000000..946a89e --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/button/button.js @@ -0,0 +1,100 @@ +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 { setIcon } 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) { + const obj = setIcon('icon', icon, ''); + this.setData(Object.assign({}, obj)); + }, + }; + 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; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/button/button.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/button/button.json new file mode 100644 index 0000000..8ffcb92 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/button/button.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon", + "t-loading": "../loading/loading" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/button/button.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/button/button.wxml new file mode 100644 index 0000000..1c168b8 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/button/button.wxml @@ -0,0 +1,61 @@ +
`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`
+confirm | `(value: timestamp)` | \- +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 | @font-gray-2 | - +--td-calendar-item-centre-color | @brand-color-light | - +--td-calendar-item-disabled-color | @font-gray-4 | - +--td-calendar-item-suffix-color | @font-gray-3 | - +--td-calendar-radius | 24rpx | - +--td-calendar-selected-color | @font-white-1 | - +--td-calendar-title-color | @font-gray-1 | - +--td-calendar-title-font-size | 18px | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/calendar/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/calendar/README.md new file mode 100644 index 0000000..5a90705 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/calendar/README.md @@ -0,0 +1,96 @@ +--- +title: Calendar 日历 +description: 按照日历形式展示数据或日期的容器。 +spline: form +isComponent: true +--- +
+
+
+
+ 该组件于 0.22.0 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-calendar": "tdesign-miniprogram/calendar/calendar"
+}
+```
+
+## 代码演示
+
+### 组件类型
+#### 单个选择日期
+
+{{ base }}
+
+#### 多个选择日期
+
+{{ multiple }}
+
+#### 区间选择日期
+
+{{ range }}
+
+### 组件样式
+
+#### 自定义文案
+
+{{ custom-text }}
+
+#### 自定义区间
+
+{{ custom-range }}
+
+#### 不使用 Popup
+
+{{ without-popup }}
+
+## API
+### Calendar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+auto-close | Boolean | true | `0.34.0`。自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible | N
+confirm-btn | String / Object / Slot | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
+first-day-of-week | Number | 0 | 第一天从星期几开始，默认 0 = 周日 | N
+format | Function | - | 用于格式化日期的函数。TS 类型：`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;}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
+max-date | Number | - | 最大可选的日期，不传则默认半年后 | N
+min-date | Number | - | 最小可选的日期，不传则默认今天 | N
+title | String / Slot | - | 标题，不传默认为“请选择日期” | N
+type | String | single | 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择。可选项：single/multiple/range | N
+use-popup | Boolean | true | `0.32.0`。是否使用弹出层包裹日历 | N
+value | Number / Array | - | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。TS 类型：`number \| number[]` | N
+default-value | Number / Array | undefined | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。非受控属性。TS 类型：`number \| number[]` | N
+visible | Boolean | false | 是否显示日历；`usePopup` 为 true 时有效 | N
+
+### Calendar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: timestamp)` | `0.28.0`。不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple）
+close | `(trigger: CalendarTrigger)` | `0.34.0`。关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`
+confirm | `(value: timestamp)` | 点击确认按钮时触发 +select | `(value: timestamp)` | `0.28.0`。点击日期时触发 + + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-calendar-active-color | @brand-color | - +--td-calendar-bg-color | @bg-color-container | - +--td-calendar-days-color | @font-gray-2 | - +--td-calendar-item-centre-color | @brand-color-light | - +--td-calendar-item-disabled-color | @font-gray-4 | - +--td-calendar-item-suffix-color | @font-gray-3 | - +--td-calendar-radius | 24rpx | - +--td-calendar-selected-color | @font-white-1 | - +--td-calendar-title-color | @font-gray-1 | - +--td-calendar-title-font-size | 18px | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/calendar/calendar.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/calendar/calendar.d.ts new file mode 100644 index 0000000..1d6d416 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/calendar/calendar.d.ts @@ -0,0 +1,46 @@ +///
`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`
+pick | `(value: string \| number, index: number)` | `1.0.1` + + +### CSS Variables +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-cascader-active-color | @brand-color | - +--td-cascader-border-color | @border-color | - +--td-cascader-disabled-color | @font-gray-4 | - +--td-cascader-options-height | 640rpx | - +--td-cascader-options-title-color | @font-gray-3 | - +--td-cascader-step-arrow-color | @font-gray-3 | - +--td-cascader-step-dot-size | 16rpx | - +--td-cascader-step-height | 88rpx | - +--td-cascader-title-color | @font-gray-1 | - +--td-cascder-title-font-size | 36rpx | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/cascader/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/cascader/README.md new file mode 100644 index 0000000..87c8bce --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/cascader/README.md @@ -0,0 +1,87 @@ +--- +title: Cascader 级联选择器 +description: 级联选择器适用于有清晰层级结构的数据集合，用户可以通过逐级查看并选择。 +spline: form +isComponent: true +--- + +
+
+ 该组件于 0.23.0 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-cascader": "tdesign-miniprogram/cascader/cascader"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+{{ base }}
+
+### 选项卡风格
+
+{{ theme-tab }}
+
+### 进阶
+
+#### 带初始值
+
+{{ with-value }}
+
+#### 自定义 keys
+
+{{ keys }}
+
+#### 使用次级标题
+
+{{ with-title }}
+
+## API
+### Cascader Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+close-btn | Boolean / Slot | true | 关闭按钮。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+options | Array | [] | 可选项数据源。TS 类型：`Array`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`
+pick | `(value: string \| number, index: number)` | `1.0.1`。选择后触发 + + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-cascader-active-color | @brand-color | - +--td-cascader-border-color | @border-color | - +--td-cascader-disabled-color | @font-gray-4 | - +--td-cascader-options-height | 640rpx | - +--td-cascader-options-title-color | @font-gray-3 | - +--td-cascader-step-arrow-color | @font-gray-3 | - +--td-cascader-step-dot-size | 16rpx | - +--td-cascader-step-height | 88rpx | - +--td-cascader-title-color | @font-gray-1 | - +--td-cascder-title-font-size | 36rpx | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/cascader/cascader.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/cascader/cascader.d.ts new file mode 100644 index 0000000..385ebd4 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/cascader/cascader.d.ts @@ -0,0 +1,40 @@ +///
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-cell": "tdesign-miniprogram/cell/cell"
+}
+```
+
+## 代码演示
+
+### 类型
+
+单行单元格
+
+
+
+{{ base }}
+
+多行单元格
+
+
+
+{{ multiple }}
+
+### 样式
+
+卡片单元格
+
+{{ theme }}
+
+## API
+### Cell Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
+arrow | Boolean / Object | false | 是否显示右侧箭头 | N
+bordered | Boolean| true | 是否显示下边框 | N
+description | String / Slot | - | 下方内容描述 | N
+hover | Boolean | - | 是否开启点击反馈 | N
+image | String / Slot | - | 主图 | N
+jump-type | String | navigateTo | 链接跳转类型。可选项：switchTab/reLaunch/redirectTo/navigateTo | N
+left-icon | String / Object / Slot | - | 左侧图标，出现在单元格标题的左侧 | N
+note | String / Slot | - | 和标题同行的说明文字 | N
+required | Boolean | false | 是否显示表单必填星号 | N
+right-icon | String / Object / Slot | - | 最右侧图标 | N
+title | String / Slot | - | 标题 | N
+url | String | - | 点击后跳转链接地址。如果值为空，则表示不需要跳转 | N
+
+### Cell Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | - | 右侧内容
+
+### Cell 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-title | 标题样式类
+t-class-description | 下方描述内容样式类
+t-class-note | 右侧说明文字样式类
+t-class-hover | 悬停样式类
+t-class-image | 图片样式类
+t-class-left | 左侧内容样式类
+t-class-left-icon | 左侧图标样式类
+t-class-center | 中间（`title`, `description`）内容样式类
+t-class-right | 右侧内容样式类
+t-class-right-icon | 右侧图标样式类
+
+### CellGroup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+bordered | Boolean | - | 是否显示组边框 | N
+theme | String | default | 单元格风格。可选项：default/card | N
+title | String | - | 单元格组标题 | N
+
+### CellGroup 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-title | 标题样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-cell-group-border-color | @border-color | -
+--td-cell-group-title-bg-color | @bg-color-secondarycontainer | -
+--td-cell-group-title-color | @font-gray-3 | -
+--td-cell-group-title-font-size | 28rpx | -
+--td-cell-group-title-line-height | 90rpx | -
+--td-cell-group-title-padding-left | 32rpx | -
+--td-cell-bg-color | @bg-color-container | -
+--td-cell-border-color | @component-stroke | -
+--td-cell-border-width | 1px | -
+--td-cell-border-left-space | @cell-horizontal-padding | -
+--td-cell-border-right-space | 0 | -
+--td-cell-description-color | @font-gray-2 | -
+--td-cell-description-font-size | @font-size-base | -
+--td-cell-description-line-height | 44rpx | -
+--td-cell-height | auto | -
+--td-cell-horizontal-padding | 32rpx | -
+--td-cell-hover-color | @bg-color-secondarycontainer | -
+--td-cell-image-height | 96rpx | -
+--td-cell-image-width | 96rpx | -
+--td-cell-left-icon-color | @brand-color | -
+--td-cell-left-icon-font-size | 48rpx | -
+--td-cell-line-height | 48rpx | -
+--td-cell-note-color | @font-gray-3 | -
+--td-cell-note-font-size | @font-size-m | -
+--td-cell-required-color | @error-color-6 | -
+--td-cell-required-font-size | @font-size-m | -
+--td-cell-right-icon-color | @font-gray-3 | -
+--td-cell-right-icon-font-size | 48rpx | -
+--td-cell-title-color | @font-gray-1 | -
+--td-cell-title-font-size | @font-size-m | -
+--td-cell-vertical-padding | 32rpx | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.d.ts
new file mode 100644
index 0000000..924bc21
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.d.ts
@@ -0,0 +1,22 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class Cell extends SuperComponent {
+ externalClasses: string[];
+ relations: RelationsOptions;
+ options: {
+ multipleSlots: boolean;
+ };
+ properties: import("./type").TdCellProps;
+ data: {
+ prefix: string;
+ classPrefix: string;
+ isLastChild: boolean;
+ };
+ observers: {
+ leftIcon(v: any): void;
+ rightIcon(v: any): void;
+ arrow(v: any): void;
+ };
+ setIcon(name: any, value: any, defaultValue: any): void;
+ onClick(e: any): void;
+ jumpLink(urlKey?: string, link?: string): void;
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.js
new file mode 100644
index 0000000..1cf9821
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.js
@@ -0,0 +1,77 @@
+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}-cell`;
+let Cell = class Cell extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.externalClasses = [
+ `${prefix}-class`,
+ `${prefix}-class-title`,
+ `${prefix}-class-description`,
+ `${prefix}-class-note`,
+ `${prefix}-class-hover`,
+ `${prefix}-class-image`,
+ `${prefix}-class-left`,
+ `${prefix}-class-left-icon`,
+ `${prefix}-class-center`,
+ `${prefix}-class-right`,
+ `${prefix}-class-right-icon`,
+ ];
+ this.relations = {
+ '../cell-group/cell-group': {
+ type: 'parent',
+ },
+ };
+ this.options = {
+ multipleSlots: true,
+ };
+ this.properties = props;
+ this.data = {
+ prefix,
+ classPrefix: name,
+ isLastChild: false,
+ };
+ this.observers = {
+ leftIcon(v) {
+ this.setIcon('_leftIcon', v, '');
+ },
+ rightIcon(v) {
+ this.setIcon('_rightIcon', v, '');
+ },
+ arrow(v) {
+ this.setIcon('_arrow', v, 'chevron-right');
+ },
+ };
+ }
+ setIcon(name, value, defaultValue) {
+ if (!value)
+ return;
+ this.setData({
+ [name]: calcIcon(value, defaultValue),
+ });
+ }
+ onClick(e) {
+ this.triggerEvent('click', e.detail);
+ this.jumpLink();
+ }
+ jumpLink(urlKey = 'url', link = 'jumpType') {
+ const url = this.data[urlKey];
+ const jumpType = this.data[link];
+ if (url) {
+ wx[jumpType]({ url });
+ }
+ }
+};
+Cell = __decorate([
+ wxComponent()
+], Cell);
+export default Cell;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.json
new file mode 100644
index 0000000..29842d4
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "t-icon": "../icon/icon",
+ "t-image": "../image/image"
+ }
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.wxml
new file mode 100644
index 0000000..22bf27f
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/cell/cell.wxml
@@ -0,0 +1,63 @@
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
+ "t-checkbox-group": "tdesign-miniprogram/checkbox-group/checkbox-group"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+纵向多选框
+
+{{ base }}
+
+横向多选框
+
+{{ horizontal }}
+
+带全选多选框
+
+{{ all }}
+
+### 组件状态
+
+多选框状态
+
+{{ status }}
+
+### 组件样式
+
+勾选样式
+
+{{ type }}
+
+勾选显示位置
+
+{{ right }}
+
+非通栏多选样式
+
+{{ card }}
+
+### 组件规格
+
+多选框尺寸规格
+
+{{ special }}
+
+## API
+### Checkbox Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+block | Boolean | true | 是否为块级元素 | N
+borderless | Boolean | false | 是否开启无边框模式 | N
+check-all | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N
+checked | Boolean | false | 是否选中 | N
+default-checked | Boolean | undefined | 是否选中。非受控属性 | N
+content | String / Slot | - | 多选框内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
+disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
+indeterminate | Boolean | false | 是否为半选 | N
+label | String / Slot | - | 主文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+max-content-row | Number | 5 | 内容最大行数限制 | N
+max-label-row | Number | 3 | 主文案最大行数限制 | N
+name | String | - | HTML 元素原生属性 | N
+placement | String | left | 多选框和内容相对位置。可选项：left/right | N
+readonly | Boolean | false | 只读状态 | N
+value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N
+
+### Checkbox Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(checked: boolean, context: { value: boolean|number|string, label: boolean|number|string })` | 值变化时触发。`context` 表示当前点击项内容。
+
+### Checkbox 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-label | 标签样式类
+t-class-icon | 图标样式类
+t-class-content | 内容样式类
+t-class-border | 边框样式类
+
+### CheckboxGroup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+borderless | Boolean | false | 是否开启无边框模式 | N
+disabled | Boolean | - | 是否禁用组件，默认为 false。 CheckboxGroup.disabled < Checkbox.disabled ，后续新增 Form 组件后，Form.disabled 优先级最低 | N
+max | Number | undefined | 支持最多选中的数量 | N
+name | String | - | 统一设置内部复选框 HTML 属性 | N
+options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array
+
+
+
+ 该组件于 0.7.3 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-collapse": "tdesign-miniprogram/collapse/collapse",
+ "t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel"
+}
+```
+
+## 代码演示
+
+### 类型
+
+基础折叠面板
+
+{{ base }}
+
+
+带操作说明
+
+{{ action }}
+
+手风琴模式
+
+{{ accordion }}
+
+### 样式
+
+卡片折叠面板
+
+{{ theme }}
+
+## API
+### Collapse Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+default-expand-all | Boolean | false | 默认是否展开全部 | N
+disabled | Boolean | - | 是否禁用面板展开/收起操作 | N
+expand-icon | Boolean | true | 展开图标 | N
+expand-mutex | Boolean | false | 每个面板互斥展开，每次只展开一个面板 | N
+theme | String | default | 折叠面板风格。可选项：default/card | N
+value | Array | [] | 展开的面板集合。TS 类型：`CollapseValue` `type CollapseValue = Array`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
+finish | \- | \- + + +### CSS Variables +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-countdown-bg-color | @error-color-6 | - +--td-countdown-default-color | @font-gray-1 | - +--td-countdown-round-border-radius | @radius-circle | - +--td-countdown-round-color | @font-white-1 | - +--td-countdown-square-border-radius | @radius-small | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/README.md new file mode 100644 index 0000000..d1d1461 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/README.md @@ -0,0 +1,65 @@ +--- +title: CountDown 倒计时 +description: 用于实时展示倒计时数值。 +spline: data +isComponent: true +--- + +
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-count-down": "tdesign-miniprogram/count-down/count-down"
+}
+```
+
+## 代码演示
+
+### 基础倒计时
+
+{{ base }}
+
+### 调整尺寸
+
+{{ size }}
+
+## API
+### CountDown Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+auto-start | Boolean | true | 是否自动开始倒计时 | N
+content | String / Slot | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽 | N
+format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | N
+millisecond | Boolean | false | 是否开启毫秒级渲染 | N
+size | String `v0.5.1` | 'medium' | 倒计时尺寸。可选项：small/medium/large | N
+split-with-unit `v0.5.1` | Boolean | false | 使用时间单位分割 | N
+theme | String `v0.5.1` | 'default' | 倒计时风格。可选项：default/round/square | N
+time | Number | - | 必需。倒计时时长，单位毫秒 | Y
+
+### CountDown Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/count-down/type.ts)。`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
+finish | \- | 倒计时结束时触发 + +### CountDown 外部样式类 +类名 | 说明 +-- | -- +t-class | 根节点样式类 +t-class-count | 计数样式类 +t-class-split | 分隔线样式类 + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-countdown-bg-color | @error-color-6 | - +--td-countdown-default-color | @font-gray-1 | - +--td-countdown-round-border-radius | @radius-circle | - +--td-countdown-round-color | @font-white-1 | - +--td-countdown-square-border-radius | @radius-small | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.d.ts new file mode 100644 index 0000000..6cb3598 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.d.ts @@ -0,0 +1,33 @@ +import { SuperComponent } from '../common/src/index'; +export default class CountDown extends SuperComponent { + externalClasses: string[]; + properties: import("./type").TdCountDownProps; + observers: { + time(): void; + }; + data: { + prefix: string; + classPrefix: string; + timeDataUnit: { + DD: string; + HH: string; + mm: string; + ss: string; + SSS: string; + }; + timeData: import("./utils").TimeData; + formattedTime: string; + }; + timeoutId: null | number; + lifetimes: { + detached(): void; + }; + methods: { + start(): void; + pause(): void; + reset(): void; + getTime(): number; + updateTime(remain: number): void; + doCount(): void; + }; +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.js new file mode 100644 index 0000000..3905e24 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.js @@ -0,0 +1,100 @@ +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 { isSameSecond, parseFormat, parseTimeData, TimeDataUnit } from './utils'; +const { prefix } = config; +const name = `${prefix}-count-down`; +let CountDown = class CountDown extends SuperComponent { + constructor() { + super(...arguments); + this.externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-split`]; + this.properties = props; + this.observers = { + time() { + this.reset(); + }, + }; + this.data = { + prefix, + classPrefix: name, + timeDataUnit: TimeDataUnit, + timeData: parseTimeData(0), + formattedTime: '0', + }; + this.timeoutId = null; + this.lifetimes = { + detached() { + if (this.timeoutId) { + clearTimeout(this.timeoutId); + this.timeoutId = null; + } + }, + }; + this.methods = { + start() { + if (this.counting) { + return; + } + this.counting = true; + this.endTime = Date.now() + this.remain; + this.doCount(); + }, + pause() { + this.counting = false; + this.timeoutId && clearTimeout(this.timeoutId); + }, + reset() { + this.pause(); + this.remain = this.properties.time; + this.updateTime(this.remain); + if (this.properties.autoStart) { + this.start(); + } + }, + getTime() { + return Math.max(this.endTime - Date.now(), 0); + }, + updateTime(remain) { + const { format } = this.properties; + this.remain = remain; + const timeData = parseTimeData(remain); + this.triggerEvent('change', timeData); + const { timeText } = parseFormat(remain, format); + const timeRange = format.split(':'); + this.setData({ + timeRange, + timeData, + formattedTime: timeText.replace(/:/g, ' : '), + }); + if (remain === 0) { + this.pause(); + this.triggerEvent('finish'); + } + }, + doCount() { + this.timeoutId = setTimeout(() => { + const time = this.getTime(); + if (this.properties.millisecond) { + this.updateTime(time); + } + else if (!isSameSecond(time, this.remain) || time === 0) { + this.updateTime(time); + } + if (time !== 0) { + this.doCount(); + } + }, 33); + }, + }; + } +}; +CountDown = __decorate([ + wxComponent() +], CountDown); +export default CountDown; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.json new file mode 100644 index 0000000..2e06b99 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.wxml new file mode 100644 index 0000000..582952c --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/count-down/count-down.wxml @@ -0,0 +1,22 @@ +
`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`
+confirm | `(value: DateValue)` | `1.0.1` +pick | `(value: DateValue)` | \- + + +### CSS Variables +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-data-time-picker-year-width | 128rpx | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/README.md new file mode 100644 index 0000000..a83b5c6 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/README.md @@ -0,0 +1,100 @@ +--- +title: DateTimePicker 时间选择器 +description: 用于选择一个时间点或者一个时间段。 +spline: form +isComponent: true +--- + +
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+#### 年月日选择器
+
+{{ year-month-date }}
+
+#### 年月选择器
+
+{{ year-month }}
+
+### 时间选择器器
+
+包括：`时分秒`、`时分`两个示例
+
+{{ time }}
+
+#### 年月日时分秒选择器
+
+{{ date-all }}
+
+### 组件用法
+
+#### 调整步数
+
+{{ steps }}
+
+## API
+### DateTimePicker Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+cancel-btn | String | 取消 | 取消按钮文字 | N
+confirm-btn | String | - | 确定按钮文字 | N
+end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
+format | String | 'YYYY-MM-DD HH:mm:ss' | 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) | N
+header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒。TS 类型：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`
+confirm | `(value: DateValue)` | `1.0.1`。确认按钮点击时触发 +pick | `(value: DateValue)` | 选中值发生变化时触发 + +### DateTimePicker 外部样式类 +类名 | 说明 +-- | -- +t-class | 根节点样式类 +t-class-confirm | 确认样式类 +t-class-cancel | 取消样式类 +t-class-title | 标题样式类 + +### DateTimePicker 组件国际化 +组件支持国际化，目前支持：简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言，默认为简体中文(zh)。使用方式如下： +- 全局设置语言： 在小程序全局入口设置 `dayjs` 的语言即可，示例： +```js +import dayjs from 'dayjs'; +import 'dayjs/locale/zh-cn'; + +dayjs.locale('zh-cn'); // 全局设置为简体中文 +``` +- 单个组件设置：在组件上添加 custom-locale 属性即可，注意：custom-locale 优先级高于全局设置。 + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-data-time-picker-year-width | 128rpx | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.d.ts new file mode 100644 index 0000000..457a7a8 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.d.ts @@ -0,0 +1,75 @@ +import type { Dayjs } from 'dayjs'; +import { SuperComponent } from '../common/src/index'; +declare enum ModeItem { + YEAR = "year", + MONTH = "month", + DATE = "date", + HOUR = "hour", + MINUTE = "minute", + SECOND = "second" +} +interface ColumnItemValue { + value: string | number; + label: string | number; +} +export default class DateTimePicker extends SuperComponent { + properties: import("./type").TdDateTimePickerProps; + externalClasses: string[]; + options: { + multipleSlots: boolean; + }; + observers: { + 'start, end, value': () => void; + customLocale(v: any): void; + mode(m: any): void; + }; + date: any; + data: { + prefix: string; + classPrefix: string; + columns: any[]; + columnsValue: any[]; + fullModes: any[]; + locale: any; + dayjsLocale: any; + }; + controlledProps: { + key: string; + event: string; + }[]; + methods: { + updateColumns(): void; + getParseDate(): Dayjs; + getMinDate(): Dayjs; + getMaxDate(): Dayjs; + getDateRect(type?: string): any[]; + getDate(): Dayjs; + clipDate(date: Dayjs): Dayjs; + setYear(date: Dayjs, year: number): Dayjs; + setMonth(date: Dayjs, month: number): Dayjs; + getColumnOptions(): any[]; + getOptionByType(type: any): ColumnItemValue[]; + getYearOptions(dateParams: any): ColumnItemValue[]; + getOptionEdge(minOrMax: 'min' | 'max', type: any): any; + getMonthOptions(): ColumnItemValue[]; + getDayOptions(): ColumnItemValue[]; + getHourOptions(): ColumnItemValue[]; + getMinuteOptions(): ColumnItemValue[]; + getValueCols(this: DateTimePicker): { + columns: any; + columnsValue: any; + }; + getColumnsValue(): string[]; + getNewDate(value: number, type: ModeItem): Dayjs; + onColumnChange(e: WechatMiniprogram.CustomEvent): void; + onConfirm(): void; + onCancel(): void; + onVisibleChange(e: any): void; + onClose(e: any): void; + resetColumns(): void; + }; + getFullModeArray(mode: any): any; + getFullModeByModeString(modeString: any, matchModes: any): any; + isTimeMode(): boolean; +} +export {}; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.js new file mode 100644 index 0000000..f8c6aaf --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.js @@ -0,0 +1,364 @@ +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; +}; +var _a, _b; +import dayjs from 'dayjs'; +import localeData from 'dayjs/plugin/localeData'; +import config from '../common/config'; +import { SuperComponent, wxComponent } from '../common/src/index'; +import props from './props'; +import dayjsLocaleMap from './locale/dayjs'; +dayjs.extend(localeData); +dayjs.locale('zh-cn'); +const defaultLocale = ((_a = dayjsLocaleMap[dayjs.locale()]) === null || _a === void 0 ? void 0 : _a.key) || ((_b = dayjsLocaleMap.default) === null || _b === void 0 ? void 0 : _b.key); +const { prefix } = config; +const name = `${prefix}-date-time-picker`; +var ModeItem; +(function (ModeItem) { + ModeItem["YEAR"] = "year"; + ModeItem["MONTH"] = "month"; + ModeItem["DATE"] = "date"; + ModeItem["HOUR"] = "hour"; + ModeItem["MINUTE"] = "minute"; + ModeItem["SECOND"] = "second"; +})(ModeItem || (ModeItem = {})); +const DATE_MODES = ['year', 'month', 'date']; +const TIME_MODES = ['hour', 'minute', 'second']; +const FULL_MODES = [...DATE_MODES, ...TIME_MODES]; +const DEFAULT_MIN_DATE = dayjs('2000-01-01 00:00:00'); +const DEFAULT_MAX_DATE = dayjs('2030-12-31 23:59:59'); +let DateTimePicker = class DateTimePicker extends SuperComponent { + constructor() { + super(...arguments); + this.properties = props; + this.externalClasses = [`${prefix}-class`, `${prefix}-class-confirm`, `${prefix}-class-cancel`, `${prefix}-class-title`]; + this.options = { + multipleSlots: true, + }; + this.observers = { + 'start, end, value': function () { + this.updateColumns(); + }, + customLocale(v) { + if (!v || !dayjsLocaleMap[v].key) + return; + this.setData({ + locale: dayjsLocaleMap[v].i18n, + dayjsLocale: dayjsLocaleMap[v].key, + }); + }, + mode(m) { + const fullModes = this.getFullModeArray(m); + this.setData({ + fullModes, + }); + this.updateColumns(); + }, + }; + this.date = null; + this.data = { + prefix, + classPrefix: name, + columns: [], + columnsValue: [], + fullModes: [], + locale: dayjsLocaleMap[defaultLocale].i18n, + dayjsLocale: dayjsLocaleMap[defaultLocale].key, + }; + this.controlledProps = [ + { + key: 'value', + event: 'change', + }, + ]; + this.methods = { + updateColumns() { + this.date = this.getParseDate(); + const { columns, columnsValue } = this.getValueCols(); + this.setData({ + columns, + columnsValue, + }); + }, + getParseDate() { + const { value, defaultValue } = this.properties; + const minDate = this.getMinDate(); + const isTimeMode = this.isTimeMode(); + let currentValue = value || defaultValue; + if (isTimeMode) { + const dateStr = dayjs(minDate).format('YYYY-MM-DD'); + currentValue = dayjs(`${dateStr} ${currentValue}`); + } + const parseDate = dayjs(currentValue || minDate); + const isDateValid = parseDate.isValid(); + return isDateValid ? parseDate : minDate; + }, + getMinDate() { + const { start } = this.properties; + return start ? dayjs(start) : DEFAULT_MIN_DATE; + }, + getMaxDate() { + const { end } = this.properties; + return end ? dayjs(end) : DEFAULT_MAX_DATE; + }, + getDateRect(type = 'default') { + const map = { + min: 'getMinDate', + max: 'getMaxDate', + default: 'getDate', + }; + const date = this[map[type]](); + const keys = ['year', 'month', 'date', 'hour', 'minute', 'second']; + return keys.map((k) => { var _a; return (_a = date[k]) === null || _a === void 0 ? void 0 : _a.call(date); }); + }, + getDate() { + return this.clipDate((this === null || this === void 0 ? void 0 : this.date) || DEFAULT_MIN_DATE); + }, + clipDate(date) { + const minDate = this.getMinDate(); + const maxDate = this.getMaxDate(); + return dayjs(Math.min(Math.max(minDate.valueOf(), date.valueOf()), maxDate.valueOf())); + }, + setYear(date, year) { + const beforeMonthDays = date.date(); + const afterMonthDays = date.year(year).daysInMonth(); + const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf())); + return tempDate.year(year); + }, + setMonth(date, month) { + const beforeMonthDays = date.date(); + const afterMonthDays = date.month(month).daysInMonth(); + const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf())); + return tempDate.month(month); + }, + getColumnOptions() { + const { fullModes } = this.data; + const columnOptions = []; + fullModes === null || fullModes === void 0 ? void 0 : fullModes.forEach((mode) => { + const columnOption = this.getOptionByType(mode); + columnOptions.push(columnOption); + }); + return columnOptions; + }, + getOptionByType(type) { + var _a; + const { locale, steps } = this.data; + const options = []; + const minEdge = this.getOptionEdge('min', type); + const maxEdge = this.getOptionEdge('max', type); + const step = (_a = steps === null || steps === void 0 ? void 0 : steps[type]) !== null && _a !== void 0 ? _a : 1; + const dayjsMonthsShort = dayjs().locale(this.data.dayjsLocale).localeData().monthsShort(); + for (let i = minEdge; i <= maxEdge; i += step) { + options.push({ + value: `${i}`, + label: type === 'month' ? dayjsMonthsShort[i] : `${i + locale[type]}`, + }); + } + return options; + }, + getYearOptions(dateParams) { + const { locale } = this.data; + const { minDateYear, maxDateYear } = dateParams; + const years = []; + for (let i = minDateYear; i <= maxDateYear; i += 1) { + years.push({ + value: `${i}`, + label: `${i + locale.year}`, + }); + } + return years; + }, + getOptionEdge(minOrMax, type) { + const selDateArray = this.getDateRect(); + const compareArray = this.getDateRect(minOrMax); + const edge = { + month: [0, 11], + date: [1, this.getDate().daysInMonth()], + hour: [0, 23], + minute: [0, 59], + second: [0, 59], + }; + const types = ['year', 'month', 'date', 'hour', 'minute', 'second']; + for (let i = 0, size = selDateArray.length; i < size; i += 1) { + if (types[i] === type) + return compareArray[i]; + if (compareArray[i] !== selDateArray[i]) + return edge[type][minOrMax === 'min' ? 0 : 1]; + } + return edge[type][minOrMax === 'min' ? 0 : 1]; + }, + getMonthOptions() { + const months = []; + const minMonth = this.getOptionEdge('min', 'month'); + const maxMonth = this.getOptionEdge('max', 'month'); + const dayjsMonthsShort = dayjs.monthsShort(); + for (let i = minMonth; i <= maxMonth; i += 1) { + months.push({ + value: `${i}`, + label: dayjsMonthsShort[i], + }); + } + return months; + }, + getDayOptions() { + const { locale } = this.data; + const days = []; + const minDay = this.getOptionEdge('min', 'date'); + const maxDay = this.getOptionEdge('max', 'date'); + for (let i = minDay; i <= maxDay; i += 1) { + days.push({ + value: `${i}`, + label: `${i + locale.day}`, + }); + } + return days; + }, + getHourOptions() { + const { locale } = this.data; + const hours = []; + const minHour = this.getOptionEdge('min', 'hour'); + const maxHour = this.getOptionEdge('max', 'hour'); + for (let i = minHour; i <= maxHour; i += 1) { + hours.push({ + value: `${i}`, + label: `${i + locale.hour}`, + }); + } + return hours; + }, + getMinuteOptions() { + const { locale } = this.data; + const minutes = []; + const minMinute = this.getOptionEdge('min', 'minute'); + const maxMinute = this.getOptionEdge('max', 'minute'); + for (let i = minMinute; i <= maxMinute; i += 1) { + minutes.push({ + value: `${i}`, + label: `${i + locale.minute}`, + }); + } + return minutes; + }, + getValueCols() { + return { + columns: this.getColumnOptions(), + columnsValue: this.getColumnsValue(), + }; + }, + getColumnsValue() { + const { fullModes } = this.data; + const date = this.getDate(); + const columnsValue = []; + fullModes === null || fullModes === void 0 ? void 0 : fullModes.forEach((mode) => { + columnsValue.push(`${date[mode]()}`); + }); + return columnsValue; + }, + getNewDate(value, type) { + let newValue = this.getDate(); + switch (type) { + case ModeItem.YEAR: + newValue = this.setYear(newValue, value); + break; + case ModeItem.MONTH: + newValue = this.setMonth(newValue, value); + break; + case ModeItem.DATE: + newValue = newValue.date(value); + break; + case ModeItem.HOUR: + newValue = newValue.hour(value); + break; + case ModeItem.MINUTE: + newValue = newValue.minute(value); + break; + case ModeItem.SECOND: + newValue = newValue.second(value); + break; + default: + break; + } + return this.clipDate(newValue); + }, + onColumnChange(e) { + const { value, column } = e === null || e === void 0 ? void 0 : e.detail; + const { fullModes, format } = this.data; + const columnValue = value === null || value === void 0 ? void 0 : value[column]; + const columnType = fullModes === null || fullModes === void 0 ? void 0 : fullModes[column]; + const newValue = this.getNewDate(parseInt(columnValue, 10), columnType); + this.date = newValue; + const { columns, columnsValue } = this.getValueCols(); + this.setData({ + columns, + columnsValue, + }); + const date = this.getDate(); + const pickValue = format ? date.format(format) : date.valueOf(); + this.triggerEvent('pick', { value: pickValue }); + }, + onConfirm() { + const { format } = this.properties; + const date = this.getDate(); + const value = format ? date.format(format) : date.valueOf(); + this._trigger('change', { value }); + this.triggerEvent('confirm', { value }); + this.resetColumns(); + }, + onCancel() { + this.resetColumns(); + this.triggerEvent('cancel'); + }, + onVisibleChange(e) { + if (!e.detail.visible) { + this.resetColumns(); + } + }, + onClose(e) { + const { trigger } = e.detail; + this.triggerEvent('close', { trigger }); + }, + resetColumns() { + const parseDate = this.getParseDate(); + this.date = parseDate; + const { columns, columnsValue } = this.getValueCols(); + this.setData({ + columns, + columnsValue, + }); + }, + }; + } + getFullModeArray(mode) { + if (typeof mode === 'string' || mode instanceof String) { + return this.getFullModeByModeString(mode, FULL_MODES); + } + if (Array.isArray(mode)) { + if ((mode === null || mode === void 0 ? void 0 : mode.length) === 1) { + return this.getFullModeByModeString(mode[0], FULL_MODES); + } + if ((mode === null || mode === void 0 ? void 0 : mode.length) === 2) { + const dateModes = this.getFullModeByModeString(mode[0], DATE_MODES); + const timeModes = this.getFullModeByModeString(mode[1], TIME_MODES); + return [...dateModes, ...timeModes]; + } + } + } + getFullModeByModeString(modeString, matchModes) { + if (!modeString) { + return []; + } + const endIndex = matchModes === null || matchModes === void 0 ? void 0 : matchModes.findIndex((mode) => modeString === mode); + return matchModes === null || matchModes === void 0 ? void 0 : matchModes.slice(0, endIndex + 1); + } + isTimeMode() { + const { fullModes } = this.data; + return fullModes[0] === ModeItem.HOUR; + } +}; +DateTimePicker = __decorate([ + wxComponent() +], DateTimePicker); +export default DateTimePicker; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.json new file mode 100644 index 0000000..a996aa6 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-picker": "../picker/picker", + "t-picker-item": "../picker-item/picker-item" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.wxml new file mode 100644 index 0000000..8716cd5 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.wxml @@ -0,0 +1,26 @@ +
`type DialogEventSource = 'cancel' \| 'overlay' \| 'close-btn'`
+confirm | - | \- +overlay-click | - | \- + + +### CSS Variables +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-dialog-body-max-height | 912rpx | - +--td-dialog-close-color | @font-gray-3 | - +--td-dialog-content-color | @font-gray-2 | - +--td-dialog-content-font-size | 32rpx | - +--td-dialog-content-line-height | 48rpx | - +--td-dialog-title-color | @font-gray-1 | - +--td-dialog-title-font-size | 36rpx | - +--td-dialog-title-line-height | 52rpx | - +--td-dialog-width | 622rpx | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/README.md new file mode 100644 index 0000000..fef5210 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/README.md @@ -0,0 +1,106 @@ +--- +title: Dialog 对话框 +description: 用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。 +spline: message +isComponent: true +--- + +
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-dialog": "tdesign-miniprogram/dialog/dialog"
+}
+```
+
+## 代码演示
+
+按钮的样式，默认使用 `variant = text`，如果任意按钮改变了 `variant`，那么全部按钮都改变成这个。
+
+### 组件类型
+#### 反馈类对话框
+
+{{ base }}
+
+> 使用这种方式，对话框的 `visible` 是受控的，需要手动设置额 `visible` 为 `false` 才会关闭对话框。
+
+#### 确认类对话框
+
+{{ confirm }}
+
+#### 输入类对话框
+
+{{ with-input }}
+
+#### 带图片对话框
+
+{{ with-image }}
+
+### 组件状态
+
+{{ status }}
+
+### 组件用法
+#### 命令调用
+
+{{ command }}
+
+#### 开发能力按钮
+
+当传入的按钮类型为对象时，整个对象都将透传至 `t-button`，因此按钮可以直接使用开放能力
+
+{{ button }}
+
+## API
+### Dialog Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+actions | Array / Slot | - | 操作栏。TS 类型：`Array`type DialogEventSource = 'cancel' \| 'overlay' \| 'close-btn'`
+confirm | - | 如果“确认”按钮存在，则点击“确认”按钮时触发 +overlay-click | - | 如果蒙层存在，点击蒙层时触发 + +### Dialog 外部样式类 +类名 | 说明 +-- | -- +t-class | 根节点样式类 +t-class-content | 内容样式类 +t-class-confirm | 确认样式类 +t-class-cancel | 取消样式类 +t-class-action | 操作样式类 + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-dialog-body-max-height | 912rpx | - +--td-dialog-close-color | @font-gray-3 | - +--td-dialog-content-color | @font-gray-2 | - +--td-dialog-content-font-size | 32rpx | - +--td-dialog-content-line-height | 48rpx | - +--td-dialog-title-color | @font-gray-1 | - +--td-dialog-title-font-size | 36rpx | - +--td-dialog-title-line-height | 52rpx | - +--td-dialog-width | 622rpx | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.d.ts new file mode 100644 index 0000000..e875051 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.d.ts @@ -0,0 +1,28 @@ +import { SuperComponent } from '../common/src/index'; +export default class Dialog extends SuperComponent { + options: { + multipleSlots: boolean; + addGlobalClass: boolean; + }; + externalClasses: string[]; + properties: import("./type").TdDialogProps; + data: { + prefix: string; + classPrefix: string; + buttonVariant: string; + }; + observers: { + 'confirmBtn, cancelBtn'(confirm: any, cancel: any): void; + }; + methods: { + onTplButtonTap(e: any): void; + onConfirm(): void; + onCancel(): void; + onClose(): void; + close(): void; + overlayClick(): void; + onActionTap(index: number): void; + openValueCBHandle(e: any): void; + openValueErrCBHandle(e: any): void; + }; +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.js new file mode 100644 index 0000000..321d07e --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.js @@ -0,0 +1,146 @@ +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 { isObject, toCamel } from '../common/utils'; +const { prefix } = config; +const name = `${prefix}-dialog`; +let Dialog = class Dialog extends SuperComponent { + constructor() { + super(...arguments); + this.options = { + multipleSlots: true, + addGlobalClass: true, + }; + this.externalClasses = [ + `${prefix}-class`, + `${prefix}-class-content`, + `${prefix}-class-confirm`, + `${prefix}-class-cancel`, + `${prefix}-class-action`, + ]; + this.properties = props; + this.data = { + prefix, + classPrefix: name, + buttonVariant: 'text', + }; + this.observers = { + 'confirmBtn, cancelBtn'(confirm, cancel) { + const { prefix, classPrefix, buttonLayout } = this.data; + const rect = { buttonVariant: 'text' }; + const useBaseVariant = [confirm, cancel].some((item) => isObject(item) && item.variant && item.variant !== 'text'); + const buttonMap = { confirm, cancel }; + const cls = [`${classPrefix}__button`]; + const externalCls = []; + if (useBaseVariant) { + rect.buttonVariant = 'base'; + cls.push(`${classPrefix}__button--${buttonLayout}`); + } + else { + cls.push(`${classPrefix}__button--text`); + externalCls.push(`${classPrefix}-button`); + } + Object.keys(buttonMap).forEach((key) => { + const btn = buttonMap[key]; + const base = { + block: true, + class: [...cls, `${classPrefix}__button--${key}`], + externalClass: [...externalCls, `${prefix}-class-${key}`], + variant: rect.buttonVariant, + }; + if (key === 'cancel' && rect.buttonVariant === 'base') { + base.theme = 'light'; + } + if (typeof btn === 'string') { + rect[`_${key}`] = Object.assign(Object.assign({}, base), { content: btn }); + } + else if (btn && typeof btn === 'object') { + rect[`_${key}`] = Object.assign(Object.assign({}, base), btn); + } + else { + rect[`_${key}`] = null; + } + }); + this.setData(Object.assign({}, rect)); + }, + }; + this.methods = { + onTplButtonTap(e) { + var _a, _b, _c; + const evtType = e.type; + const { type, extra } = e.target.dataset; + const button = this.data[`_${type}`]; + const cbName = `bind${evtType}`; + if (type === 'action') { + this.onActionTap(extra); + return; + } + if (typeof button[cbName] === 'function') { + const closeFlag = button[cbName](e); + if (closeFlag) { + this.close(); + } + } + const hasOpenType = 'openType' in button; + if (!hasOpenType && ['confirm', 'cancel'].includes(type)) { + (_a = this[toCamel(`on-${type}`)]) === null || _a === void 0 ? void 0 : _a.call(this, type); + } + if (evtType !== 'tap') { + const success = ((_c = (_b = e.detail) === null || _b === void 0 ? void 0 : _b.errMsg) === null || _c === void 0 ? void 0 : _c.indexOf('ok')) > -1; + this.triggerEvent(success ? 'open-type-event' : 'open-type-error-event', e.detail); + } + }, + onConfirm() { + this.triggerEvent('confirm'); + if (this._onConfirm) { + this._onConfirm(); + this.close(); + } + }, + onCancel() { + this.triggerEvent('close', { trigger: 'cancel' }); + this.triggerEvent('cancel'); + if (this._onCancel) { + this._onCancel(); + this.close(); + } + }, + onClose() { + this.triggerEvent('close', { trigger: 'close-btn' }); + this.close(); + }, + close() { + this.setData({ visible: false }); + }, + overlayClick() { + if (this.properties.closeOnOverlayClick) { + this.triggerEvent('close', { trigger: 'overlay' }); + } + this.triggerEvent('overlay-click'); + }, + onActionTap(index) { + this.triggerEvent('action', { index }); + if (this._onAction) { + this._onAction({ index }); + this.close(); + } + }, + openValueCBHandle(e) { + this.triggerEvent('open-type-event', e.detail); + }, + openValueErrCBHandle(e) { + this.triggerEvent('open-type-error-event', e.detail); + }, + }; + } +}; +Dialog = __decorate([ + wxComponent() +], Dialog); +export default Dialog; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.json new file mode 100644 index 0000000..75dbdf3 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.json @@ -0,0 +1,8 @@ +{ + "component": true, + "usingComponents": { + "t-popup": "../popup/popup", + "t-icon": "../icon/icon", + "t-button": "../button/button" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.wxml new file mode 100644 index 0000000..098b20f --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/dialog/dialog.wxml @@ -0,0 +1,57 @@ +
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-divider": "tdesign-miniprogram/divider/divider"
+}
+```
+
+## 代码演示
+
+### 基础分割符
+
+分割符主要是由直线和文字组成，通过`slot`传入分割线文案或者其他自定义内容，通过`layout`控制分隔符是垂直还是横向
+
+{{ base }}
+
+### 虚线样式
+
+{{ theme }}
+
+## API
+### Divider Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N
+content | String / Slot | - | 子元素 | N
+dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
+layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
+
+### Divider 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-divider-color | @bg-color-component | -
+--td-divider-content-color | @font-gray-3 | -
+--td-divider-content-font-size | 24rpx | -
+--td-divider-content-line-height | 40rpx | -
+--td-divider-content-line-style | solid | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.d.ts
new file mode 100644
index 0000000..d6bf6b0
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.d.ts
@@ -0,0 +1,19 @@
+import { SuperComponent } from '../common/src/index';
+export default class Divider extends SuperComponent {
+ externalClasses: string[];
+ options: {
+ addGlobalClass: boolean;
+ multipleSlots: boolean;
+ };
+ properties: import("./type").TdDividerProps;
+ data: {
+ prefix: string;
+ classPrefix: string;
+ };
+ observers: {
+ lineColor(): void;
+ };
+ methods: {
+ setStyle(): void;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.js
new file mode 100644
index 0000000..656797b
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.js
@@ -0,0 +1,44 @@
+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';
+const { prefix } = config;
+const name = `${prefix}-divider`;
+let Divider = class Divider extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`];
+ this.options = {
+ addGlobalClass: true,
+ multipleSlots: true,
+ };
+ this.properties = props;
+ this.data = {
+ prefix,
+ classPrefix: name,
+ };
+ this.observers = {
+ lineColor() {
+ this.setStyle();
+ },
+ };
+ this.methods = {
+ setStyle() {
+ const { lineColor } = this.properties;
+ const dividerStyle = `${lineColor ? `border-color: ${lineColor};` : ''}`;
+ this.setData({
+ dividerStyle,
+ });
+ },
+ };
+ }
+};
+Divider = __decorate([
+ wxComponent()
+], Divider);
+export default Divider;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.json
new file mode 100644
index 0000000..efdc3c8
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.wxml
new file mode 100644
index 0000000..765d08c
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/divider/divider.wxml
@@ -0,0 +1,13 @@
+`type TriggerSource = 'overlay'`
+item-click | `(index: number; item: DrawerItem)` | \- +overlay-click | \- | \- + + +### CSS Variables +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-drawer-bg-color | @bg-color-container | - +--td-drawer-border-color | @border-color | - +--td-drawer-footer-padding-bottom | 40rpx | - +--td-drawer-hover-color | @bg-color-secondarycontainer | - +--td-drawer-item-height | 48rpx | - +--td-drawer-item-icon-size | 48rpx | - +--td-drawer-item-padding | 32rpx | - +--td-drawer-sidebar-height | 70vh | - +--td-drawer-title-color | --td-drawer-title-color | - +--td-drawer-title-color | @drawer-title-color | - +--td-drawer-title-color | @font-gray-1 | - +--td-drawer-title-font-size | 36rpx | - +--td-drawer-title-padding | 48rpx 32rpx 16rpx | - +--td-drawer-width | 560rpx | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/README.md new file mode 100644 index 0000000..238a791 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/README.md @@ -0,0 +1,80 @@ +--- +title: Drawer 抽屉 +description: 用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。。 +spline: message +isComponent: true +--- + +
+
+
+
+ 该组件于 0.7.2 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-drawer": "tdesign-miniprogram/drawer/drawer"
+}
+```
+
+## 代码演示
+
+### 基础抽屉
+{{ base }}
+
+### 带图标的抽屉
+{{ icon-drawer }}
+
+>Drawer的 `visible` 是受控的，需要手动设置 `visible` 为 `true` 才会开启抽屉
+
+
+
+## API
+### Drawer Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+close-on-overlay-click | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
+destroy-on-close | Boolean | false | 抽屉关闭时是否销毁节点 | N
+footer | Slot | - | `0.29.0`。抽屉的底部 | N
+items | Array | - | 抽屉里的列表项。TS 类型：`DrawerItem[] ` `interface DrawerItem { title: string; icon: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts) | N
+placement | String | right | 抽屉方向。可选项：left/right | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+title | String / Slot | - | `0.29.0`。抽屉的标题 | N
+visible | Boolean | false | 组件是否可见 | N
+z-index | Number | 11500 | 抽屉层级，样式默认为 11500 | N
+
+### Drawer Events
+
+名称 | 参数 | 描述
+-- | -- | --
+close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts)。`type TriggerSource = 'overlay'`
+item-click | `(index: number; item: DrawerItem)` | 点击抽屉里的列表项 +overlay-click | \- | 如果蒙层存在，点击蒙层时触发 + + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-drawer-bg-color | @bg-color-container | - +--td-drawer-border-color | @border-color | - +--td-drawer-footer-padding-bottom | 40rpx | - +--td-drawer-hover-color | @bg-color-secondarycontainer | - +--td-drawer-item-height | 48rpx | - +--td-drawer-item-icon-size | 48rpx | - +--td-drawer-item-padding | 32rpx | - +--td-drawer-sidebar-height | 70vh | - +--td-drawer-title-color | --td-drawer-title-color | - +--td-drawer-title-color | @drawer-title-color | - +--td-drawer-title-color | @font-gray-1 | - +--td-drawer-title-font-size | 36rpx | - +--td-drawer-title-padding | 48rpx 32rpx 16rpx | - +--td-drawer-width | 560rpx | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.d.ts new file mode 100644 index 0000000..77f145d --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.d.ts @@ -0,0 +1,15 @@ +import { ComponentsOptionsType, SuperComponent } from '../common/src/index'; +export default class Drawer extends SuperComponent { + externalClasses: any[]; + options: ComponentsOptionsType; + properties: import("./type").TdDrawerProps; + data: { + classPrefix: string; + }; + methods: { + visibleChange({ detail }: { + detail: any; + }): void; + itemClick(detail: any): void; + }; +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.js new file mode 100644 index 0000000..a76ff0b --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.js @@ -0,0 +1,47 @@ +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'; +const { prefix } = config; +const name = `${prefix}-drawer`; +let Drawer = class Drawer extends SuperComponent { + constructor() { + super(...arguments); + this.externalClasses = []; + this.options = { + multipleSlots: true, + }; + this.properties = props; + this.data = { + classPrefix: name, + }; + this.methods = { + visibleChange({ detail }) { + const { visible } = detail; + const { showOverlay } = this.data; + this.setData({ + visible, + }); + if (!visible) { + this.triggerEvent('close', { trigger: 'overlay' }); + } + if (showOverlay) { + this.triggerEvent('overlay-click', { visible: visible }); + } + }, + itemClick(detail) { + const { index, item } = detail.currentTarget.dataset; + this.triggerEvent('item-click', { index, item }); + }, + }; + } +}; +Drawer = __decorate([ + wxComponent() +], Drawer); +export default Drawer; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.json new file mode 100644 index 0000000..3e30c3c --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-popup": "../popup/popup", + "t-icon": "../icon/icon" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.wxml new file mode 100644 index 0000000..aea0e67 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/drawer/drawer.wxml @@ -0,0 +1,44 @@ +
+
+
+
+ 该组件于 0.8.0 版本上线，请留意版本。
+
+
+## 引入
+
+### 引入组件
+
+在 `app.json` 或 `page.json` 中引入组件：
+
+```json
+"usingComponents": {
+ "t-dropdown-menu": "tdesign-miniprogram/dropdown-menu/dropdown-menu",
+ "t-dropdown-item": "tdesign-miniprogram/dropdown-item/dropdown-item"
+}
+```
+
+## 用法
+
+### 单选下拉菜单
+
+{{ single }}
+
+### 多列下拉菜单
+
+{{ multi }}
+
+### 树形下拉菜单
+
+{{ tree }}
+
+## API
+### DropdownMenu Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+arrow-icon | String / Object | 'caret-down-small' | 自定义箭头图标 | N
+close-on-click-overlay | Boolean | true | 是否在点击遮罩层后关闭菜单 | N
+duration | String / Number | 200 | 动画时长 | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+z-index | Number | 11600 | 菜单栏 z-index 层级 | N
+
+### DropdownMenu Events
+
+名称 | 参数 | 描述
+-- | -- | --
+open | \- | 菜单展开时触发
+close | \- | 菜单关闭时触发
+
+### DropdownMenu 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-item | 选项样式类
+t-class-label | 标签样式类
+t-class-icon | 图标样式类
+
+### DropdownItem Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+disabled | Boolean | false | 是否禁用 | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | N
+label | String | - | 标题 | N
+multiple | Boolean | false | 是否多选 | N
+options | Array | [] | 选项数据。TS 类型：`Array
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-empty": "tdesign-miniprogram/empty/empty"
+}
+```
+
+## 代码演示
+
+### 类型
+
+图标空状态
+
+{{ base }}
+
+自定义图片空状态
+
+{{ imageEmpty }}
+
+带操作空状态
+
+{{ buttonEmpty }}
+
+
+
+## API
+### Empty Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+action | Slot | - | 操作按钮 | N
+description | String / Slot | - | 描述文字 | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
+image | String / Slot | - | 图片地址 | N
+
+### Empty 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-description | 描述样式类
+t-class-image | 图片样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-empty-action-margin-top | @spacer-4 | -
+--td-empty-description-color | @font-gray-3 | -
+--td-empty-description-font-size | @font-size-base | -
+--td-empty-description-line-height | 44rpx | -
+--td-empty-description-margin-top | @spacer-2 | -
+--td-empty-icon-color | @font-gray-3 | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.d.ts
new file mode 100644
index 0000000..0886101
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.d.ts
@@ -0,0 +1,15 @@
+import { SuperComponent } from '../common/src/index';
+export default class extends SuperComponent {
+ options: {
+ multipleSlots: boolean;
+ };
+ externalClasses: string[];
+ properties: import("./type").TdEmptyProps;
+ data: {
+ prefix: string;
+ classPrefix: string;
+ };
+ observers: {
+ icon(icon: any): void;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.js
new file mode 100644
index 0000000..e06331a
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.js
@@ -0,0 +1,36 @@
+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 props from './props';
+import config from '../common/config';
+import { setIcon } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-empty`;
+let default_1 = class extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.options = {
+ multipleSlots: true,
+ };
+ this.externalClasses = [`${prefix}-class`, `${prefix}-class-description`, `${prefix}-class-image`];
+ this.properties = props;
+ this.data = {
+ prefix,
+ classPrefix: name,
+ };
+ this.observers = {
+ icon(icon) {
+ const obj = setIcon('icon', icon, '');
+ this.setData(Object.assign({}, obj));
+ },
+ };
+ }
+};
+default_1 = __decorate([
+ wxComponent()
+], default_1);
+export default default_1;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.json
new file mode 100644
index 0000000..29842d4
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "t-icon": "../icon/icon",
+ "t-image": "../image/image"
+ }
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.wxml
new file mode 100644
index 0000000..54ec3b5
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/empty/empty.wxml
@@ -0,0 +1,22 @@
+
+
+
+
+ 该组件于 0.7.2 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+
+```json
+"usingComponents": {
+ "t-fab": "tdesign-miniprogram/fab/fab"
+}
+```
+
+## 代码演示
+
+### 基础使用
+
+{{ base }}
+
+### 进阶使用
+
+{{ advance }}
+
+## API
+### Fab Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+button-props | Object | - | 透传至 Button 组件 | N
+icon | String | - | 图标 | N
+style | String | right: 16px; bottom: 32px; | 悬浮按钮的样式，常用于调整位置（即将废弃，建议使用 `style`） | N
+text | String | - | 文本内容 | N
+draggable | Boolean / String | false | `true` / `'all'`可拖动`'vertical'`可垂直拖动
`'horizontal'`可水平拖动
`false`禁止拖动 | N + +### Fab Events + +名称 | 参数 | 描述 +-- | -- | -- +click | `({e: Event})` | 悬浮按钮点击事件 + + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-fab-shadow | @shadow-2 | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/fab/draggable/draggable.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/fab/draggable/draggable.d.ts new file mode 100644 index 0000000..4008a50 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/fab/draggable/draggable.d.ts @@ -0,0 +1,21 @@ +import { SuperComponent } from '../../common/src/index'; +import type { TdDraggableProps } from './type'; +export interface DraggableProps extends TdDraggableProps { +} +export default class Draggable extends SuperComponent { + properties: TdDraggableProps; + externalClasses: string[]; + data: { + prefix: string; + classPrefix: string; + }; + lifetimes: { + ready(): void; + }; + methods: { + onTouchStart(e: any): void; + onTouchMove(e: any): void; + onTouchEnd(e: any): Promise
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-footer": "tdesign-miniprogram/footer/footer"
+}
+```
+
+## 代码演示
+
+
+
+
+### 类型
+
+基础页脚
+
+{{ base }}
+
+基础加链接页脚
+
+{{ link }}
+
+品牌页脚
+
+{{ logo }}
+
+## API
+### Footer Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+copyright | String | '' | 已废弃。版权信息，type 为`text`生效 | N
+text | String | '' | `1.0.0` 版权信息。 | N
+logo | Object | - | 图标配置。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接跳转地址。TS 类型：`FooterLogo` `interface FooterLogo { icon: string; title?: string; titleUrl?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/footer/type.ts) | N
+text-link-list | Array | [] | 已废弃。链接列表，type 为`text`生效。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式。TS 类型：`Array
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-grid": "tdesign-miniprogram/grid/grid",
+ "t-grid-item": "tdesign-miniprogram/grid-item/grid-item"
+}
+```
+
+## 代码演示
+
+### 组件类型
+基础宫格
+
+{{ base }}
+
+带说明的宫格
+
+{{ description }}
+
+带边框的宫格
+
+{{ border }}
+
+带徽章的宫格
+
+{{ badge }}
+
+可滑动的宫格
+
+{{ scroll }}
+
+### 组件样式
+
+可传图标的宫格
+
+{{ icon-grid }}
+
+多行宫格
+
+{{ multiple }}
+
+卡片宫格
+
+{{ card }}
+
+
+## API
+### Grid Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+align | String | center | 内容对齐方式。可选项：left/center | N
+border | Boolean / Object | false | 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式。TS 类型：`boolean \| { color?: string; width?: string; style?: 'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'groove' \| 'inset' \| 'outset' }` | N
+column | Number | 4 | 每一行的列数量；为 0 时等于固定大小 | N
+gutter | Number | - | 间隔大小 | N
+hover | Boolean | false | 是否开启点击反馈 | N
+theme | String | default | 宫格的风格。可选项：default/card | N
+
+### Grid 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+
+
+### GridItem Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+badge-props | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N
+description | String / Slot | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+image | String / Slot | - | 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽 | N
+image-props | Object | - | 透传至 Image 组件 | N
+jump-type | String | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to | N
+layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
+text | String / Slot | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点 | N
+url | String | - | 点击后的跳转链接 | N
+
+### GridItem Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | \- | 点击子项后触发
+
+### GridItem 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-image | 图片样式类
+t-class-text | 文本样式类
+t-class-description | 描述样式类
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-grid-bg-color | @bg-color-container | -
+--td-grid-card-radius | @radius-large | -
+--td-grid-item-bg-color | @bg-color-container | -
+--td-grid-item-description-color | @font-gray-3 | -
+--td-grid-item-description-font-size | 24rpx | -
+--td-grid-item-description-line-height | 40rpx | -
+--td-grid-item-description-padding-top | 8rpx | -
+--td-grid-item-horizontal-text-description-top | 4rpx | -
+--td-grid-item-horizontal-text-padding-left | 24rpx | -
+--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | -
+--td-grid-item-image-middle-width | 80rpx | -
+--td-grid-item-image-small-width | 64rpx | -
+--td-grid-item-image-width | 96rpx | -
+--td-grid-item-padding | 32rpx | -
+--td-grid-item-text-color | @font-gray-1 | -
+--td-grid-item-text-font-size | 28rpx | -
+--td-grid-item-text-line-height | 44rpx | -
+--td-grid-item-text-middle-font-size | 24rpx | -
+--td-grid-item-text-padding-top | 16rpx | -
+--td-grid-item-text-small-font-size | 24rpx | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.d.ts
new file mode 100644
index 0000000..1bab3f7
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.d.ts
@@ -0,0 +1,23 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class Grid extends SuperComponent {
+ externalClasses: string[];
+ relations: RelationsOptions;
+ properties: import("./type").TdGridProps;
+ data: {
+ prefix: string;
+ classPrefix: string;
+ contentStyle: string;
+ };
+ observers: {
+ 'column,hover,align'(): void;
+ 'gutter,border'(): void;
+ };
+ lifetimes: {
+ attached(): void;
+ };
+ methods: {
+ doForChild(action: (item: WechatMiniprogram.Component.TrivialInstance) => void): void;
+ updateContentStyle(): void;
+ getContentMargin(): string;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.js
new file mode 100644
index 0000000..5e87476
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.js
@@ -0,0 +1,69 @@
+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 { isObject, SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-grid`;
+let Grid = class Grid extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.externalClasses = ['t-class'];
+ this.relations = {
+ '../grid-item/grid-item': {
+ type: 'descendant',
+ },
+ };
+ this.properties = props;
+ this.data = {
+ prefix,
+ classPrefix: name,
+ contentStyle: '',
+ };
+ this.observers = {
+ 'column,hover,align'() {
+ this.updateContentStyle();
+ },
+ 'gutter,border'() {
+ this.updateContentStyle();
+ this.doForChild((child) => child.updateStyle());
+ },
+ };
+ this.lifetimes = {
+ attached() {
+ this.updateContentStyle();
+ },
+ };
+ this.methods = {
+ doForChild(action) {
+ this.$children.forEach(action);
+ },
+ updateContentStyle() {
+ const contentStyles = [];
+ const marginStyle = this.getContentMargin();
+ marginStyle && contentStyles.push(marginStyle);
+ this.setData({
+ contentStyle: contentStyles.join(';'),
+ });
+ },
+ getContentMargin() {
+ const { gutter } = this.properties;
+ let { border } = this.properties;
+ if (!border)
+ return `margin-left:-${gutter}rpx; margin-top:-${gutter}rpx`;
+ if (!isObject(border))
+ border = {};
+ const { width = 2 } = border;
+ return `margin-left:-${width}rpx; margin-top:-${width}rpx`;
+ },
+ };
+ }
+};
+Grid = __decorate([
+ wxComponent()
+], Grid);
+export default Grid;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.json
new file mode 100644
index 0000000..f719411
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.json
@@ -0,0 +1,4 @@
+{
+ "component": true,
+ "usingComponents": {}
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.wxml
new file mode 100644
index 0000000..1fb71b2
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/grid/grid.wxml
@@ -0,0 +1,16 @@
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-icon": "tdesign-miniprogram/icon/icon"
+}
+```
+
+## 常见问题
+
+
+
+
+## 代码演示
+
+### 基础组件图标
+
+{{ base }}
+
+### 自定义组件图标
+
+{{ custom }}
+
+自定义图标用法，下面以 `iconfont` 为例
+
+#### 准备图标文件
+
+文件后缀应为`.wxss`，如下方代码块所示：
+
+```css
+@font-face {
+ font-family: 'icon'; // 使用自定义的字体名称
+ ···
+}
+
+.icon {
+ font-family: 'icon' !important; // 字体名称
+ ···
+}
+
+.icon-a-0:before { // icon 图标。注意 FontClass 前缀与 font-family 保持一致
+ content: '\e64d';
+}
+```
+- 添加所需图标，下载图标。图标库一般会提供 **在线链接** 或者 **下载至本地** 等使用方式。**在线链接** 方式会指向一个 `.css` 文件，可以下载或复制其内容，将其修改成后缀名为 `.wxss` 的文件
+- 将 `.wxss` 文件中的 `FontClass/Symbol前缀` 与 `Font Family` 两项内容保持一致，如: `FontClass/Symbol` 前缀为 `icon-`，则 `Font Family` 为 `icon`。
+
+> 注：若是采用 `下载至本地` 方式，需关注 `.css` 和 `.ttf` 文件。由于微信小程序不支持处理 `ttf、woff、eot` 等文件，但支持 `base64`，所以需要将 `.ttf` 文件转换为 `base64` (可借助转换工具，如 [transfonter.org](https://transfonter.org/)，会得到一个 `stylesheet.css` 文件)，然后将 `.css` 文件中的 `@font-face {}` 内容替换为 `stylesheet.css` 中的 `base64` 内容，最后将 `.css` 文件修改后缀为 `.wxss`
+
+#### 引入自定义图标
+
+- 全局引入：在项目 `app.wxss`，使用 `@import` 引入上述的 `.wxss` 文件
+- 局部引入：在 `page` 对应的 `.wxss` 中，使用 `@import` 引入上述的 `.wxss` 文件
+
+#### 自定义图标的使用
+
+ `+ 控制台告警：Failed to load font + 👇 +
++ 告警属于开发者工具的 bug，可以忽略，具体可以看 官网文档 +
+
+
+
+
+ 该组件于 0.10.0 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer",
+}
+```
+
+## 代码演示
+
+### 类型
+
+#### 基础图片预览
+
+{{ base }}
+
+#### 带操作图片预览
+
+顶部区域可以配置关闭按钮、页码信息、删除按钮。
+
+{{ delete }}
+
+> 当使用自定义导航栏的时候，顶部的操作按钮会被遮挡，此时需要开启 `using-custom-navbar` 来解决
+
+## API
+### ImageViewer Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+background-color | String | 'rgba(0, 0, 0, 1)' | 遮罩的背景颜色 | N
+close-btn | String / Boolean / Object / Slot | false | 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标 | N
+delete-btn | String / Boolean / Object / Slot | false | 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标 | N
+images | Array | [] | 图片数组。TS 类型：`Array
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-image": "tdesign-miniprogram/image/image"
+}
+```
+
+## 代码演示
+
+### 裁切样式
+
+{{ base }}
+
+### 加载状态
+
+{{ status }}
+
+## 常见问题
+
+
+
+
+
+## API
+### Image Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+error | String / Slot | 'default' | 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” | N
+height | String / Number | - | 高度，默认单位为`px` | N
+lazy | Boolean | false | 是否开启图片懒加载 | N
+loading | String / Slot | 'default' | 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中” | N
+mode | String | scaleToFill | 图片裁剪、缩放的模式；[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)。可选项：scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right | N
+shape | String | square | 图片圆角类型。可选项：circle/round/square | N
+show-menu-by-longpress | Boolean | false | 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 | N
+src | String | - | 图片链接 | N
+webp | Boolean | false | 默认不解析 webP 格式，只支持网络资源 | N
+width | String / Number | - | 宽度，默认单位为`px` | N
+
+### Image Events
+
+名称 | 参数 | 描述
+-- | -- | --
+error | \- | 图片加载失败时触发
+load | \- | 图片加载完成时触发
+
+### Image 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-load | 加载样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-image-color | @font-gray-3 | -
+--td-image-loading-bg-color | @bg-color-secondarycontainer | -
+--td-image-loading-color | @font-gray-3 | -
+--td-image-round-radius | @radius-default | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image-info.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image-info.json
new file mode 100644
index 0000000..3be68e5
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image-info.json
@@ -0,0 +1,75 @@
+{
+ "key": "Image",
+ "label": "图片",
+ "icon": "",
+ "properties": [
+ {
+ "key": "error",
+ "type": ["String", "TNode"],
+ "defaultValue": "'default'",
+ "desc": "加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败”",
+ "label": ""
+ },
+ {
+ "key": "externalClasses",
+ "type": ["Array"],
+ "defaultValue": "",
+ "desc": "组件类名，分别用于设置加载组件外层元素，中间内容等元素类名",
+ "label": ""
+ },
+ {
+ "key": "lazy",
+ "type": ["Boolean"],
+ "defaultValue": "false",
+ "desc": "是否开启图片懒加载",
+ "label": ""
+ },
+ {
+ "key": "loading",
+ "type": ["String", "TNode"],
+ "defaultValue": "'default'",
+ "desc": "加载态内容。值为 `default` 则表示使用默认加载中风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `loading`；值为其他则表示普通文本内容，如“加载中”",
+ "label": ""
+ },
+ {
+ "key": "MP_EXCLUDE_PROPS",
+ "type": ["String"],
+ "defaultValue": "",
+ "desc": "为避免重复或冲突，需要过滤掉的小程序原生属性",
+ "label": ""
+ },
+ {
+ "key": "MP_PROPS",
+ "type": ["String"],
+ "defaultValue": "",
+ "desc": "[小程序原生属性](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)",
+ "label": ""
+ },
+ {
+ "key": "shape",
+ "type": ["String"],
+ "defaultValue": "square",
+ "desc": "图片圆角类型",
+ "label": ""
+ },
+ {
+ "key": "src",
+ "type": ["String"],
+ "defaultValue": "",
+ "desc": "图片链接",
+ "label": ""
+ }
+ ],
+ "events": [
+ {
+ "key": "error",
+ "desc": "图片加载失败时触发",
+ "label": ""
+ },
+ {
+ "key": "load",
+ "desc": "图片加载完成时触发",
+ "label": ""
+ }
+ ]
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.d.ts
new file mode 100644
index 0000000..1bf4526
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.d.ts
@@ -0,0 +1,26 @@
+import { SuperComponent } from '../common/src/index';
+export default class Image extends SuperComponent {
+ externalClasses: string[];
+ options: {
+ multipleSlots: boolean;
+ };
+ properties: import("./type").TdImageProps;
+ data: {
+ prefix: string;
+ isLoading: boolean;
+ isFailed: boolean;
+ innerStyle: string;
+ classPrefix: string;
+ };
+ preSrc: string;
+ observers: {
+ src(): void;
+ 'width, height'(width: any, height: any): void;
+ };
+ methods: {
+ onLoaded(e: any): void;
+ onLoadError(e: any): void;
+ calcSize(width: any, height: any): void;
+ update(): void;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.js
new file mode 100644
index 0000000..4f80a82
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.js
@@ -0,0 +1,99 @@
+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 ImageProps from './props';
+import config from '../common/config';
+import { addUnit, getRect } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-image`;
+let Image = class Image extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.externalClasses = [`${prefix}-class`, `${prefix}-class-load`];
+ this.options = {
+ multipleSlots: true,
+ };
+ this.properties = ImageProps;
+ this.data = {
+ prefix,
+ isLoading: true,
+ isFailed: false,
+ innerStyle: '',
+ classPrefix: name,
+ };
+ this.preSrc = '';
+ this.observers = {
+ src() {
+ if (this.preSrc === this.properties.src)
+ return;
+ this.update();
+ },
+ 'width, height'(width, height) {
+ this.calcSize(width, height);
+ },
+ };
+ this.methods = {
+ onLoaded(e) {
+ const sdkVersion = wx.getSystemInfoSync().SDKVersion;
+ const versionArray = sdkVersion.split('.').map((v) => parseInt(v, 10));
+ const { mode } = this.properties;
+ const isInCompatible = versionArray[0] < 2 ||
+ (versionArray[0] === 2 && versionArray[1] < 10) ||
+ (versionArray[0] === 2 && versionArray[1] === 10 && versionArray[2] < 3);
+ if (mode === 'heightFix' && isInCompatible) {
+ const { height: picHeight, width: picWidth } = e.detail;
+ getRect(this, '#image').then((rect) => {
+ const { height } = rect;
+ const resultWidth = ((height / picHeight) * picWidth).toFixed(2);
+ this.setData({ innerStyle: `height: ${addUnit(height)}; width: ${resultWidth}px;` });
+ });
+ }
+ this.setData({
+ isLoading: false,
+ isFailed: false,
+ });
+ this.triggerEvent('load', e.detail);
+ },
+ onLoadError(e) {
+ this.setData({
+ isLoading: false,
+ isFailed: true,
+ });
+ this.triggerEvent('error', e.detail);
+ },
+ calcSize(width, height) {
+ let innerStyle = '';
+ if (width) {
+ innerStyle += `width: ${addUnit(width)};`;
+ }
+ if (height) {
+ innerStyle += `height: ${addUnit(height)};`;
+ }
+ this.setData({
+ innerStyle,
+ });
+ },
+ update() {
+ const { src } = this.properties;
+ this.preSrc = src;
+ if (!src) {
+ this.onLoadError({ errMsg: '图片链接为空' });
+ }
+ else {
+ this.setData({
+ isLoading: true,
+ isFailed: false,
+ });
+ }
+ },
+ };
+ }
+};
+Image = __decorate([
+ wxComponent()
+], Image);
+export default Image;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.json
new file mode 100644
index 0000000..9510fcf
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "t-loading": "../loading/loading",
+ "t-icon": "../icon/icon"
+ }
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.wxml
new file mode 100644
index 0000000..af02d4b
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.wxml
@@ -0,0 +1,52 @@
++ 本地图片无法正确引用? + 👇 +
++ 建议使用绝对路径，而不是相对路径。绝对路径以 app.json 所在位置为基准。 +
+
+
+
+
+ IndexesAnchor 索引锚点组件于 0.32.0 版本上线，请留意版本。
+
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-indexes": "tdesign-miniprogram/indexes/indexes",
+ "t-indexes-anchor": "tdesign-miniprogram/indexes-anchor/indexes-anchor"
+}
+```
+
+## 代码演示
+
+### 基础索引
+
+
+{{ base }}
+
+### 自定义索引
+
+{{ custom }}
+
+### API
+### Indexes Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+index-list | Array | - | `0.32.0`。索引字符列表。不传默认 `A-Z`。TS 类型：`string [] \| number[]` | N
+list | Array | [] | 已废弃。索引列表的列表数据。每个元素包含三个子元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。。TS 类型：`ListItem[] ` `interface ListItem { title: string; index: string; children: { title: string; [key: string]: any} [] }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/indexes/type.ts) | N
+sticky | Boolean | true | 索引是否吸顶，默认为true。TS 类型：`Boolean` | N
+sticky-offset | Number | 0 | `1.0.0`。锚点吸顶时与顶部的距离 | N
+
+### Indexes Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(index: string \| number)` | `0.34.0`。索引发生变更时触发事件
+select | `(index: string \| number)` | 点击侧边栏时触发事件
+
+### IndexesAnchor Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+index | String / Number | - | 索引字符 | N
+
+### IndexesAnchor 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-sidebar | 侧边栏样式类
+t-class-sidebar-item | 侧边栏选项样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-indexes-sidebar-active-bg-color | @brand-color | -
+--td-indexes-sidebar-active-color | @font-white-1 | -
+--td-indexes-sidebar-color | @font-gray-1 | -
+--td-indexes-sidebar-font-size | 24rpx | -
+--td-indexes-sidebar-item-size | 40rpx | -
+--td-indexes-sidebar-line-height | 40rpx | -
+--td-indexes-sidebar-right | 16rpx | -
+--td-indexes-sidebar-tips-bg-color | @brand-color-light | -
+--td-indexes-sidebar-tips-color | @brand-color | -
+--td-indexes-sidebar-tips-font-size | 40rpx | -
+--td-indexes-sidebar-tips-right | 76rpx | -
+--td-indexes-sidebar-tips-size | 96rpx | -
+--td-indexes-anchor-active-bg-color | @bg-color-container | -
+--td-indexes-anchor-active-color | @brand-color | -
+--td-indexes-anchor-active-font-weight | 600 | -
+--td-indexes-anchor-bg-color | @bg-color-secondarycontainer | -
+--td-indexes-anchor-color | @font-gray-1 | -
+--td-indexes-anchor-font-size | 28rpx | -
+--td-indexes-anchor-line-height | 44rpx | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/indexes/indexes.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/indexes/indexes.d.ts
new file mode 100644
index 0000000..f205620
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/indexes/indexes.d.ts
@@ -0,0 +1,44 @@
+import { RelationsOptions, SuperComponent } from '../common/src/index';
+export default class Indexes extends SuperComponent {
+ externalClasses: string[];
+ properties: import("./type").TdIndexesProps;
+ data: {
+ prefix: string;
+ classPrefix: string;
+ _height: number;
+ _indexList: any[];
+ scrollTop: number;
+ activeAnchor: any;
+ showTips: boolean;
+ };
+ relations: RelationsOptions;
+ behaviors: string[];
+ timer: any;
+ groupTop: any[];
+ sidebar: any;
+ observers: {
+ indexList(v: any): void;
+ height(v: any): void;
+ };
+ lifetimes: {
+ ready(): void;
+ };
+ methods: {
+ setHeight(height: string | number): void;
+ setIndexList(list: any): void;
+ getAllRect(): void;
+ getAnchorsRect(): Promise
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-input": "tdesign-miniprogram/input/input"
+}
+```
+
+## 代码演示
+
+### 01 组件类型
+
+基础输入框
+
+{{ base }}
+
+带字数限制输入框
+
+{{ maxlength }}
+
+带操作输入框
+
+{{ suffix }}
+
+带图标输入框
+
+{{ prefix }}
+
+特定类型输入框
+
+{{ special }}
+
+### 02 组件状态
+
+输入框状态
+
+{{ status }}
+
+信息超长状态
+
+{{ label }}
+
+### 03 组件样式
+
+内容位置
+
+{{ align }}
+
+竖排样式
+
+{{ layout }}
+
+非通栏样式
+
+{{ banner }}
+
+标签外置样式
+
+{{ bordered }}
+
+自定义样式文本框
+
+{{ custom }}
+
+
+## API
+### Input Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
+layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N
+borderless | Boolean | false | 是否开启无边框模式 | N
+clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` | N
+clear-trigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
+disabled | Boolean | false | 是否禁用输入框 | N
+error-message | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N
+format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => number | string`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
+label | String / Slot | - | 左侧文本。 | N
+maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
+maxlength | Number | -1 | 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
+placeholder | String | undefined | 占位符 | N
+prefix-icon | String / Object / Slot | - | 组件前置图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
+readonly | Boolean | false | 【开发中】只读状态 | N
+size | String | medium | 【已废弃】输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N
+status | String | - | 输入框状态。可选项：success/warning/error | N
+suffix | String / Slot | - | 后置图标前的后置内容 | N
+suffix-icon | String / Object / Slot | - | 后置文本内容。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
+tips | String / Slot | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 | N
+type | String | text | 输入框类型。可选项：text/number/idcard/digit/safe-password/password/nickname | N
+value | String / Number | - | 输入框的值。TS 类型：`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
+default-value | String / Number | undefined | 输入框的值。非受控属性。TS 类型：`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
+password | Boolean | false | 是否是密码类型（已废弃，请更为使用 type 指定输入框类型） | N
+placeholder-style | String | - | 必需。指定 placeholder 的样式 | Y
+placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N
+cursor-spacing | Number | 0 | 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | N
+auto-focus | Boolean | false | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | N
+focus | Boolean | false | 获取焦点 | N
+confirm-type | String | done | 设置键盘右下角按钮的文字，仅在type='text'时生效。具体释义：
`send` 右下角按钮为“发送”；
`search` 右下角按钮为“搜索”；
`next` 右下角按钮为“下一个”；
`go` 右下角按钮为“前往”；
`done` 右下角按钮为“完成”。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N +always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N +confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N +cursor | Number | - | 必需。指定 focus 时的光标位置 | Y +selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N +selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N +adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N +hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N +safe-password-cert-path | String | - | 安全键盘加密公钥的路径，只支持包内路径 | N +safe-password-length | Number | - | 安全键盘输入密码长度 | N +safe-password-time-stamp | Number | - | 安全键盘加密时间戳 | N +safe-password-nonce | String | - | 安全键盘加密盐值 | N +safe-password-salt | String | - | 安全键盘计算 hash 盐值，若指定custom-hash 则无效 | N +safe-password-custom-hash | String | - | 安全键盘计算 hash 的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))` | N + +### Input Events + +名称 | 参数 | 描述 +-- | -- | -- +blur | `(value: InputValue)` | 失去焦点时触发 +change | `(value: InputValue, cursor: number, keyCode: number)` | 输入框值发生变化时触发；cursor 为光标位置； +clear | \- | 清空按钮点击时触发 +enter | `(value: InputValue)` | 回车键按下时触发 +focus | `(value: InputValue)` | 获得焦点时触发 +keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件 +nicknamereview | `(pass: boolean, timeout: boolean)`| 用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效 +click `v0.32.0`| `(trigger: InputTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts)。
`type InputTrigger = 'suffix' \| 'suffix-icon';`
+ +### CellGroup 外部样式类 +类名 | 说明 +-- | -- +t-class | 根节点样式类 +t-class-prefix-icon | 前置图标样式类 +t-class-label | 标题样式类 +t-class-input | 标题样式类 +t-class-clearable | 标题样式类 +t-class-suffix | 后置样式类 +t-class-suffix-icon | 后置图标样式类 +t-class-tips | 提示样式类 + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-input-bg-color | @bg-color-container | - +--td-input-border-color | @component-stroke | - +--td-input-border-left-space | 32rpx | - +--td-input-border-radius | @radius-default | - +--td-input-border-right-space | 0 | - +--td-input-default-text-color | @font-gray-1 | - +--td-input-default-tips-color | @font-gray-3 | - +--td-input-disabled-text-color | @text-color-disabled | - +--td-input-error-text-color | @error-color | - +--td-input-error-tips-color | @error-color | - +--td-input-label-max-width | 5em | - +--td-input-label-min-width | 2em | - +--td-input-label-text-color | @font-gray-1 | - +--td-input-placeholder-text-color | @text-color-placeholder | - +--td-input-prefix-icon-color | @font-gray-1 | - +--td-input-success-text-color | @success-color | - +--td-input-success-tips-color | @success-color | - +--td-input-suffix-icon-color | @font-gray-3 | - +--td-input-suffix-text-color | @font-gray-1 | - +--td-input-vertical-padding | 32rpx | - +--td-input-warning-text-color | @warning-color | - +--td-input-warning-tips-color | @warning-color | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.d.ts new file mode 100644 index 0000000..0611e62 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.d.ts @@ -0,0 +1,37 @@ +import { SuperComponent } from '../common/src/index'; +export default class Input extends SuperComponent { + options: { + multipleSlots: boolean; + }; + externalClasses: string[]; + behaviors: string[]; + properties: import("./type").TdInputProps; + data: { + prefix: string; + classPrefix: string; + classBasePrefix: string; + showClearIcon: boolean; + }; + lifetimes: { + ready(): void; + }; + observers: { + prefixIcon(v: any): void; + suffixIcon(v: any): void; + clearable(v: any): void; + clearTrigger(): void; + }; + methods: { + updateValue(value: any): void; + updateClearIconVisible(value?: boolean): void; + onInput(e: any): void; + onFocus(e: any): void; + onBlur(e: any): void; + onConfirm(e: any): void; + onSuffixClick(): void; + onSuffixIconClick(): void; + clearInput(e: any): void; + onKeyboardHeightChange(e: any): void; + onNickNameReview(e: any): void; + }; +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.js new file mode 100644 index 0000000..50dff9d --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.js @@ -0,0 +1,129 @@ +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 { getCharacterLength, calcIcon, isDef } from '../common/utils'; +const { prefix } = config; +const name = `${prefix}-input`; +let Input = class Input extends SuperComponent { + constructor() { + super(...arguments); + this.options = { + multipleSlots: true, + }; + this.externalClasses = [ + `${prefix}-class`, + `${prefix}-class-prefix-icon`, + `${prefix}-class-label`, + `${prefix}-class-input`, + `${prefix}-class-clearable`, + `${prefix}-class-suffix`, + `${prefix}-class-suffix-icon`, + `${prefix}-class-tips`, + ]; + this.behaviors = ['wx://form-field']; + this.properties = props; + this.data = { + prefix, + classPrefix: name, + classBasePrefix: prefix, + showClearIcon: true, + }; + this.lifetimes = { + ready() { + const { value } = this.properties; + this.updateValue(value !== null && value !== void 0 ? value : ''); + }, + }; + this.observers = { + prefixIcon(v) { + this.setData({ + _prefixIcon: calcIcon(v), + }); + }, + suffixIcon(v) { + this.setData({ + _suffixIcon: calcIcon(v), + }); + }, + clearable(v) { + this.setData({ + _clearIcon: calcIcon(v, 'close-circle-filled'), + }); + }, + clearTrigger() { + this.updateClearIconVisible(); + }, + }; + this.methods = { + updateValue(value) { + const { maxcharacter, maxlength } = this.properties; + if (maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) { + const { length, characters } = getCharacterLength('maxcharacter', value, maxcharacter); + this.setData({ + value: characters, + count: length, + }); + } + else if (maxlength && maxlength > 0 && !Number.isNaN(maxlength)) { + const { length, characters } = getCharacterLength('maxlength', value, maxlength); + this.setData({ + value: characters, + count: length, + }); + } + else { + this.setData({ + value, + count: isDef(value) ? String(value).length : 0, + }); + } + }, + updateClearIconVisible(value = false) { + const { clearTrigger } = this.properties; + this.setData({ showClearIcon: value || clearTrigger === 'always' }); + }, + onInput(e) { + const { value, cursor, keyCode } = e.detail; + this.updateValue(value); + this.triggerEvent('change', { value: this.data.value, cursor, keyCode }); + }, + onFocus(e) { + this.updateClearIconVisible(true); + this.triggerEvent('focus', e.detail); + }, + onBlur(e) { + this.updateClearIconVisible(); + this.triggerEvent('blur', e.detail); + }, + onConfirm(e) { + this.triggerEvent('enter', e.detail); + }, + onSuffixClick() { + this.triggerEvent('click', { trigger: 'suffix' }); + }, + onSuffixIconClick() { + this.triggerEvent('click', { trigger: 'suffix-icon' }); + }, + clearInput(e) { + this.triggerEvent('clear', e.detail); + this.setData({ value: '' }); + }, + onKeyboardHeightChange(e) { + this.triggerEvent('keyboardheightchange', e.detail); + }, + onNickNameReview(e) { + this.triggerEvent('nicknamereview', e.detail); + }, + }; + } +}; +Input = __decorate([ + wxComponent() +], Input); +export default Input; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.json new file mode 100644 index 0000000..2e06b99 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.wxml new file mode 100644 index 0000000..7a06b8d --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.wxml @@ -0,0 +1,100 @@ +
+
+ 该组件于 0.32.0 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-link": "tdesign-miniprogram/link/link",
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+基础文字链接
+
+{{ content }}
+
+下划线文字链接
+
+{{ underline }}
+
+前置图标文字链接
+
+{{ prefix }}
+
+后置图标文字链接
+
+{{ suffix }}
+
+### 组件状态
+
+不同主题
+
+{{ theme }}
+
+禁用状态
+
+{{ disabled }}
+
+### 组件样式
+
+链接尺寸
+
+{{ size }}
+
+## API
+### Link Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | String / Slot | - | 链接内容 | N
+navigator-props | Object | - | 与 navigator 原生组件属性保持一致，具体使用参考：[微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)。使用时请将形如 `open-type` 风格的属性名改为 `openType` 风格 | N
+prefix-icon | String / Object / Slot | - | 前置图标 | N
+size | String | medium | 尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N
+status | String | normal | 已废弃。组件状态。可选项：normal/active/disabled | N
+disabled | Boolean | false | 是否为禁用态 | N
+hover | Boolean | - | 是否开启点击反馈 | N
+suffix-icon | String / Object / Slot | - | 前置图标 | N
+theme | String | default | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+underline | Boolean | - | 是否显示链接下划线 | N
+### Link Events
+
+名称 | 参数 | 描述
+-- | -- | --
+complete | \- | 页面链接执行完成后触发（失败或成功均会触发）
+fail | \- | 页面链接跳转失败后触发
+success | \- | 页面链接跳转成功后触发
+
+### Link 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-hover | 悬停样式类
+t-class-prefix-icon | 前置图标样式类
+t-class-content | 内容样式类
+t-class-suffix-icon | 后置图标样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-link-danger-active-color | @error-color-active | -
+--td-link-danger-color | @error-color | -
+--td-link-danger-disabled-color | @error-color-disabled | -
+--td-link-default-active-color | @brand-color-active | -
+--td-link-default-color | @font-gray-1 | -
+--td-link-default-disabled-color | @text-color-disabled | -
+--td-link-primary-active-color | @brand-color-active | -
+--td-link-primary-color | @brand-color | -
+--td-link-primary-disabled-color | @brand-color-disabled | -
+--td-link-success-active-color | @success-color-active | -
+--td-link-success-color | @success-color | -
+--td-link-success-disabled-color | @success-color-disabled | -
+--td-link-warning-active-color | @warning-color-active | -
+--td-link-warning-color | @warning-color | -
+--td-link-warning-disabled-color | @warning-color-disabled | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.d.ts
new file mode 100644
index 0000000..b8433af
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.d.ts
@@ -0,0 +1,26 @@
+import { SuperComponent } from '../common/src/index';
+export default class Link extends SuperComponent {
+ externalClasses: string[];
+ properties: import("./type").TdLinkProps;
+ options: {
+ multipleSlots: boolean;
+ };
+ data: {
+ prefix: string;
+ classPrefix: string;
+ };
+ observers: {
+ 'theme, status, size, underline, navigatorProps'(): void;
+ prefixIcon(v: any): void;
+ suffixIcon(v: any): void;
+ };
+ lifetimes: {
+ attached(): void;
+ };
+ methods: {
+ setClass(): void;
+ onSuccess(e: any): void;
+ onFail(e: any): void;
+ onComplete(e: any): void;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.js
new file mode 100644
index 0000000..b99a590
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.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 props from './props';
+import { calcIcon } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-link`;
+let Link = class Link extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.externalClasses = [
+ `${prefix}-class`,
+ `${prefix}-class-hover`,
+ `${prefix}-class-prefix-icon`,
+ `${prefix}-class-content`,
+ `${prefix}-class-suffix-icon`,
+ ];
+ this.properties = props;
+ this.options = {
+ multipleSlots: true,
+ };
+ this.data = {
+ prefix,
+ classPrefix: name,
+ };
+ this.observers = {
+ 'theme, status, size, underline, navigatorProps'() {
+ this.setClass();
+ },
+ prefixIcon(v) {
+ this.setData({
+ _prefixIcon: calcIcon(v),
+ });
+ },
+ suffixIcon(v) {
+ this.setData({
+ _suffixIcon: calcIcon(v),
+ });
+ },
+ };
+ this.lifetimes = {
+ attached() {
+ this.setClass();
+ },
+ };
+ this.methods = {
+ setClass() {
+ const { theme, size, underline, navigatorProps, disabled } = this.properties;
+ const classList = [name, `${name}--${theme}`, `${name}--${size}`];
+ if (underline) {
+ classList.push(`${name}--underline`);
+ }
+ if ((navigatorProps && !navigatorProps.url && !['navigateBack', 'exit'].includes(navigatorProps.openType)) ||
+ disabled) {
+ classList.push(`${name}--disabled`);
+ }
+ this.setData({
+ className: classList.join(' '),
+ });
+ },
+ onSuccess(e) {
+ this.triggerEvent('success', e);
+ },
+ onFail(e) {
+ this.triggerEvent('fail', e);
+ },
+ onComplete(e) {
+ this.triggerEvent('complete', e);
+ },
+ };
+ }
+};
+Link = __decorate([
+ wxComponent()
+], Link);
+export default Link;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.json
new file mode 100644
index 0000000..2e06b99
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.json
@@ -0,0 +1,6 @@
+{
+ "component": true,
+ "usingComponents": {
+ "t-icon": "../icon/icon"
+ }
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.wxml
new file mode 100644
index 0000000..61d170d
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/link/link.wxml
@@ -0,0 +1,46 @@
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-loading": "tdesign-miniprogram/loading/loading"
+}
+```
+
+## 代码演示
+
+### 纯icon
+
+{{ base }}
+
+### icon加文字横向
+
+{{ horizontal }}
+
+### icon加文字竖向
+
+{{ vertical }}
+
+### 纯文字
+
+{{ text }}
+
+### 加载失败
+
+{{ error }}
+
+### 状态
+
+{{ status }}
+
+### 加载速度
+
+{{ duration }}
+
+### 规格
+
+{{ size }}
+
+## API
+### Loading Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
+duration | Number | 800 | 加载动画执行完成一次的时间，单位：毫秒 | N
+indicator | Boolean / Slot | true | 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+inherit-color | Boolean | false | 是否继承父元素颜色 | N
+layout | String | horizontal | 对齐方式。可选项：horizontal/vertical | N
+loading | Boolean | true | 是否处于加载状态 | N
+pause | Boolean | false | 是否暂停动画 | N
+progress | Number | - | 加载进度 | N
+reverse | Boolean | - | 加载动画是否反向 | N
+size | String | '40rpx' | 尺寸，示例：40rpx/20px | N
+text | String / Slot | - | 加载提示文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+theme | String | circular | 加载组件类型。可选项：circular/spinner/dots | N
+
+### Loading 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-text | 文本样式类
+t-class-indicator | 指示符样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-loading-color | @brand-color | -
+--td-loading-text-color | inherit | -
+--td-loading-text-font-size | 24rpx | -
+--td-loading-text-line-height | 40rpx | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/index.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/index.d.ts
new file mode 100644
index 0000000..8574ea5
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/index.d.ts
@@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './loading';
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/index.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/index.js
new file mode 100644
index 0000000..8574ea5
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/index.js
@@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './loading';
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.d.ts
new file mode 100644
index 0000000..69f75ce
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.d.ts
@@ -0,0 +1,77 @@
+import { SuperComponent } from '../common/src/index';
+import type { TdLoadingProps } from './type';
+export interface LoadingProps extends TdLoadingProps {
+}
+export default class Loading extends SuperComponent {
+ externalClasses: string[];
+ data: {
+ prefix: string;
+ classPrefix: string;
+ show: boolean;
+ };
+ options: {
+ multipleSlots: boolean;
+ };
+ properties: {
+ delay?: {
+ type: NumberConstructor;
+ value?: number;
+ };
+ duration?: {
+ type: NumberConstructor;
+ value?: number;
+ };
+ externalClasses?: {
+ type: ArrayConstructor;
+ value?: ["t-class", "t-class-text", "t-class-indicator"];
+ };
+ indicator?: {
+ type: BooleanConstructor;
+ value?: boolean;
+ };
+ inheritColor?: {
+ type: BooleanConstructor;
+ value?: boolean;
+ };
+ layout?: {
+ type: StringConstructor;
+ value?: "horizontal" | "vertical";
+ };
+ loading?: {
+ type: BooleanConstructor;
+ value?: boolean;
+ };
+ pause?: {
+ type: BooleanConstructor;
+ value?: boolean;
+ };
+ progress?: {
+ type: NumberConstructor;
+ value?: number;
+ };
+ reverse?: {
+ type: BooleanConstructor;
+ value?: boolean;
+ };
+ size?: {
+ type: StringConstructor;
+ value?: string;
+ };
+ text?: {
+ type: StringConstructor;
+ value?: string;
+ };
+ theme?: {
+ type: StringConstructor;
+ value?: "circular" | "spinner" | "dots";
+ };
+ };
+ timer: any;
+ observers: {
+ loading(this: any, cur: any): void;
+ };
+ lifetimes: {
+ detached(): void;
+ };
+ refreshPage(): void;
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.js
new file mode 100644
index 0000000..870c57c
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.js
@@ -0,0 +1,61 @@
+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';
+const { prefix } = config;
+const name = `${prefix}-loading`;
+let Loading = class Loading extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.externalClasses = [`${prefix}-class`, `${prefix}-class-text`, `${prefix}-class-indicator`];
+ this.data = {
+ prefix,
+ classPrefix: name,
+ show: true,
+ };
+ this.options = {
+ multipleSlots: true,
+ };
+ this.properties = Object.assign({}, props);
+ this.timer = null;
+ this.observers = {
+ loading(cur) {
+ const { delay } = this.properties;
+ if (this.timer) {
+ clearTimeout(this.timer);
+ }
+ if (cur) {
+ if (delay) {
+ this.timer = setTimeout(() => {
+ this.setData({ show: cur });
+ this.timer = null;
+ }, delay);
+ }
+ else {
+ this.setData({ show: cur });
+ }
+ }
+ else {
+ this.setData({ show: cur });
+ }
+ },
+ };
+ this.lifetimes = {
+ detached() {
+ clearTimeout(this.timer);
+ },
+ };
+ }
+ refreshPage() {
+ this.triggerEvent('reload');
+ }
+};
+Loading = __decorate([
+ wxComponent()
+], Loading);
+export default Loading;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.json
new file mode 100644
index 0000000..f719411
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.json
@@ -0,0 +1,4 @@
+{
+ "component": true,
+ "usingComponents": {}
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.wxml
new file mode 100644
index 0000000..b994227
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.wxml
@@ -0,0 +1,40 @@
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-message": "tdesign-miniprogram/message/message"
+}
+```
+
+### 引入 API
+
+若以 API 形式调用 Message，则需在页面 `page.js` 中引入组件 API：
+
+```js
+import Message from 'tdesign-miniprogram/message/index';
+```
+
+## 代码演示
+
+### 组件类型
+
+弹窗内容为纯文本、标题和副标题、带输入框，用 API `Message.info` 方法调用反馈类对话框。
+
+
+{{ base }}
+
+
+### 组件状态
+
+消息通知类型为普通（info）、警示（warning）、成功（success）、错误（error）
+
+{{ theme }}
+
+## API
+### Message Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+action | String / Slot | - | 已废弃。操作 | N
+align | String | left | 文本对齐方式。可选项：left/center。TS 类型：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
+close-btn | String / Boolean / Object / Slot | false | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件。| N
+content | String / Slot | - | 用于自定义消息弹出内容 | N
+duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N
+icon | String / Boolean / Object / Slot | true | 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件。| N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
+offset | Array | - | 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-navbar": "tdesign-miniprogram/navbar/navbar",
+}
+```
+
+## 代码演示
+
+### 基础导航栏
+
+{{ base }}
+
+### 胶囊样式导航栏
+
+{{ back-home }}
+
+### 带搜索导航栏
+
+{{ search }}
+
+### 带图片导航栏
+
+{{ img }}
+
+### 组件样式
+
+{{ left-title }}
+
+### 自定义颜色
+
+{{ custom-color }}
+
+## API
+### Navbar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+animation | Boolean | true | 是否添加动画效果 | N
+capsule | Slot | - | 左侧胶囊区域 | N
+delta | Number | 1 | 后退按钮后退层数，含义参考 [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html)，特殊的，传入 0 不会发生执行 wx.navigateBack | N
+fixed | Boolean | true | 是否固定在顶部 | N
+left | Slot | - | `0.26.0`。左侧内容区域 | N
+left-arrow | Boolean | false | `0.26.0`。是否展示左侧箭头 | N
+title | String / Slot | - | 页面标题 | N
+title-max-length | Number | - | 标题文字最大长度，超出的范围使用 `...` 表示 | N
+visible | Boolean | true | 是否显示 | N
+
+### Navbar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+complete | \- | navigateBack 执行完成后触发（失败或成功均会触发）
+fail | \- | navigateBack 执行失败后触发
+go-back | \- | 点击左侧箭头时触发
+success | \- | navigateBack 执行成功后触发
+
+### Navbar 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-title | 标题样式类
+t-class-left | 左侧内容样式类
+t-class-center | 中间内容样式类
+t-class-left-icon | 左侧图标样式类
+t-class-home-icon` | 首页图标样式类
+t-class-capsule | 左侧胶囊区域样式类
+t-class-nav-btn | 导航按钮样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-navbar-bg-color | @bg-color-container | -
+--td-navbar-capsule-border-color | #e3e6ea | -
+--td-navbar-capsule-border-radius | 32rpx | -
+--td-navbar-capsule-height | 64rpx | -
+--td-navbar-capsule-width | 176rpx | -
+--td-navbar-color | @font-gray-1 | -
+--td-navbar-height | 96rpx | -
+--td-navbar-left-arrow-size | 48rpx | -
+--td-navbar-title-font-size | 36rpx | -
+--td-navbar-title-font-weight | 600 | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.d.ts
new file mode 100644
index 0000000..4c63cb4
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.d.ts
@@ -0,0 +1,24 @@
+import { SuperComponent } from '../common/src/index';
+export default class Navbar extends SuperComponent {
+ externalClasses: string[];
+ timer: any;
+ options: {
+ addGlobalClass: boolean;
+ multipleSlots: boolean;
+ };
+ properties: import("./type").TdNavbarProps;
+ observers: {
+ visible(this: Navbar, visible: any): void;
+ 'title,titleMaxLength'(this: any): void;
+ };
+ data: {
+ prefix: string;
+ classPrefix: string;
+ boxStyle: string;
+ showTitle: string;
+ };
+ attached(): void;
+ methods: {
+ goBack(): void;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.js
new file mode 100644
index 0000000..d3dfb4e
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.js
@@ -0,0 +1,120 @@
+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';
+const { prefix } = config;
+const name = `${prefix}-navbar`;
+let Navbar = class Navbar extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.externalClasses = [
+ `${prefix}-class`,
+ `${prefix}-class-title`,
+ `${prefix}-class-left`,
+ `${prefix}-class-center`,
+ `${prefix}-class-left-icon`,
+ `${prefix}-class-home-icon`,
+ `${prefix}-class-capsule`,
+ `${prefix}-class-nav-btn`,
+ ];
+ this.timer = null;
+ this.options = {
+ addGlobalClass: true,
+ multipleSlots: true,
+ };
+ this.properties = props;
+ this.observers = {
+ visible(visible) {
+ const { animation } = this.properties;
+ const visibleClass = `${name}${visible ? '--visible' : '--hide'}`;
+ this.setData({
+ visibleClass: `${visibleClass}${animation ? '-animation' : ''}`,
+ });
+ if (this.timer) {
+ clearTimeout(this.timer);
+ }
+ if (animation) {
+ this.timer = setTimeout(() => {
+ this.setData({
+ visibleClass,
+ });
+ }, 300);
+ }
+ },
+ 'title,titleMaxLength'() {
+ const { title } = this.properties;
+ const titleMaxLength = this.properties.titleMaxLength || Number.MAX_SAFE_INTEGER;
+ let temp = title.slice(0, titleMaxLength);
+ if (titleMaxLength < title.length)
+ temp += '...';
+ this.setData({
+ showTitle: temp,
+ });
+ },
+ };
+ this.data = {
+ prefix,
+ classPrefix: name,
+ boxStyle: '',
+ showTitle: '',
+ };
+ this.methods = {
+ goBack() {
+ const { delta } = this.data;
+ const that = this;
+ this.triggerEvent('go-back');
+ if (delta > 0) {
+ wx.navigateBack({
+ delta,
+ fail(e) {
+ that.triggerEvent('fail', e);
+ },
+ complete(e) {
+ that.triggerEvent('complete', e);
+ },
+ success(e) {
+ that.triggerEvent('success', e);
+ },
+ });
+ }
+ },
+ };
+ }
+ attached() {
+ let rect = null;
+ if (wx.getMenuButtonBoundingClientRect) {
+ rect = wx.getMenuButtonBoundingClientRect();
+ }
+ if (!rect)
+ return;
+ wx.getSystemInfo({
+ success: (res) => {
+ const boxStyleList = [];
+ const { windowWidth, statusBarHeight } = wx.getSystemInfoSync();
+ const px2rpx = (v) => Math.round((v * 750) / (windowWidth >= 750 ? 750 / 2 : windowWidth));
+ boxStyleList.push(`--td-navbar-padding-top: ${px2rpx(statusBarHeight)}rpx`);
+ if (rect && (res === null || res === void 0 ? void 0 : res.windowWidth)) {
+ boxStyleList.push(`--td-navbar-right: ${px2rpx(res.windowWidth - rect.left)}rpx`);
+ }
+ boxStyleList.push(`--td-navbar-capsule-height: ${px2rpx(rect.height)}rpx`);
+ boxStyleList.push(`--td-navbar-capsule-width: ${px2rpx(rect.width)}rpx`);
+ boxStyleList.push(`--td-navbar-height: ${px2rpx((rect.top - statusBarHeight) * 2 + rect.height)}rpx`);
+ this.setData({
+ boxStyle: `${boxStyleList.join('; ')}`,
+ });
+ },
+ fail: (err) => {
+ console.error('navbar 获取系统信息失败', err);
+ },
+ });
+ }
+};
+Navbar = __decorate([
+ wxComponent()
+], Navbar);
+export default Navbar;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.json
new file mode 100644
index 0000000..2e06b99
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.json
@@ -0,0 +1,6 @@
+{
+ "component": true,
+ "usingComponents": {
+ "t-icon": "../icon/icon"
+ }
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.wxml
new file mode 100644
index 0000000..2aaf86b
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/navbar/navbar.wxml
@@ -0,0 +1,22 @@
+`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
+change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | `direction="vertical"` + + +### CSS Variables +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-notice-bar-error-bg-color | @error-color-1 | - +--td-notice-bar-error-color | @error-color-6 | - +--td-notice-bar-font-color | @font-gray-1 | - +--td-notice-bar-info-bg-color | @brand-color-light | - +--td-notice-bar-info-color | @brand-color | - +--td-notice-bar-operation-font-color | @brand-color | - +--td-notice-bar-success-bg-color | @success-color-1 | - +--td-notice-bar-success-color | @success-color | - +--td-notice-bar-suffix-icon-color | @font-gray-3 | - +--td-notice-bar-warning-bg-color | @warning-color-1 | - +--td-notice-bar-warning-color | @warning-color | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/README.md new file mode 100644 index 0000000..e14dc64 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/README.md @@ -0,0 +1,114 @@ +--- +title: NoticeBar 公告栏 +description: 在导航栏下方，用于给用户显示提示消息。 +spline: message +isComponent: true +--- + +
+
+
+
+ 该组件于 0.9.0 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar"
+}
+```
+
+## 代码演示
+
+### 01 组件类型
+
+纯文字的公告栏
+
+{{ base }}
+
+带图标的公告栏
+
+{{ iconDemo }}
+
+带关闭的公告栏
+
+{{ suffixIcon }}
+
+带入口的公告栏
+
+{{ event }}
+
+自定义样式的公告栏
+
+{{ custom }}
+
+自定义内容的公告栏
+
+{{ customization }}
+
+### 02 组件状态
+
+公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）
+
+{{ theme }}
+
+### 03 可滚动公告栏
+
+可滚动公告栏有水平（horizontal）和垂直（vertical）
+
+{{ scrolling }}
+
+
+## API
+### NoticeBar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | String / Array / Slot | - | 文本内容 | N
+direction | String | horizontal | 滚动方向。可选项：horizontal/vertical | N
+operation | String / Slot | - | 右侧额外信息 | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
+interval | Number | 2000 | 间隔时间【仅在 direction='vertical' 有效】。 | N
+prefix-icon | String / Boolean / Object / Slot | - | 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标。| N
+suffix-icon | String / Object / Slot | - | 后缀图标。值为字符串表示图标名称。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标。 | N
+theme | String | info | 内置主题。可选项：info/success/warning/error | N
+visible | Boolean | false | 显示/隐藏 | N
+default-visible | Boolean | false | 显示/隐藏。非受控属性 | N
+
+### NoticeBar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
+change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | 当 `direction="vertical"` 时轮播切换时触发 + +### NoticeBar 外部样式类 +类名 | 说明 +-- | -- +t-class | 根节点样式类 +t-class-content | 内容样式类 +t-class-prefix-icon | 前置图标样式类 +t-class-operation | 右侧额外信息样式类 +t-class-suffix-icon | 后置图标样式类 + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-notice-bar-error-bg-color | @error-color-1 | - +--td-notice-bar-error-color | @error-color-6 | - +--td-notice-bar-font-color | @font-gray-1 | - +--td-notice-bar-info-bg-color | @brand-color-light | - +--td-notice-bar-info-color | @brand-color | - +--td-notice-bar-operation-font-color | @brand-color | - +--td-notice-bar-success-bg-color | @success-color-1 | - +--td-notice-bar-success-color | @success-color | - +--td-notice-bar-suffix-icon-color | @font-gray-3 | - +--td-notice-bar-warning-bg-color | @warning-color-1 | - +--td-notice-bar-warning-color | @warning-color | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.d.ts new file mode 100644 index 0000000..dbe35ad --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.d.ts @@ -0,0 +1,35 @@ +import { SuperComponent, ComponentsOptionsType } from '../common/src/index'; +export default class NoticeBar extends SuperComponent { + externalClasses: string[]; + options: ComponentsOptionsType; + properties: import("./type").TdNoticeBarProps; + data: { + prefix: string; + classPrefix: string; + loop: number; + }; + observers: { + marquee(val: any): void; + visible(visible: any): void; + prefixIcon(prefixIcon: any): void; + suffixIcon(v: any): void; + content(): void; + }; + lifetimes: { + created(): void; + detached(): void; + ready(): void; + }; + methods: { + initAnimation(): void; + startScrollAnimation(isFirstScroll?: boolean): void; + show(): void; + clearNoticeBarAnimation(): void; + setPrefixIcon(v: any): void; + onChange(e: WechatMiniprogram.SwiperChange): void; + clickPrefixIcon(): void; + clickContent(): void; + clickSuffixIcon(): void; + clickOperation(): void; + }; +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.js new file mode 100644 index 0000000..3f4860f --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.js @@ -0,0 +1,186 @@ +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 { getRect, getAnimationFrame, calcIcon } from '../common/utils'; +import props from './props'; +import config from '../common/config'; +const { prefix } = config; +const name = `${prefix}-notice-bar`; +const THEME_ICON = { + info: 'info-circle-filled', + success: 'check-circle-filled', + warning: 'info-circle-filled', + error: 'error-circle-filled', +}; +let NoticeBar = class NoticeBar extends SuperComponent { + constructor() { + super(...arguments); + this.externalClasses = [ + `${prefix}-class`, + `${prefix}-class-content`, + `${prefix}-class-prefix-icon`, + `${prefix}-class-operation`, + `${prefix}-class-suffix-icon`, + ]; + this.options = { + styleIsolation: 'apply-shared', + multipleSlots: true, + }; + this.properties = props; + this.data = { + prefix, + classPrefix: name, + loop: -1, + }; + this.observers = { + marquee(val) { + if (JSON.stringify(val) === '{}' || JSON.stringify(val) === 'true') { + this.setData({ + marquee: { + speed: 50, + loop: -1, + delay: 0, + }, + }); + } + }, + visible(visible) { + if (visible) { + this.show(); + } + else { + this.clearNoticeBarAnimation(); + } + }, + prefixIcon(prefixIcon) { + this.setPrefixIcon(prefixIcon); + }, + suffixIcon(v) { + this.setData({ + _suffixIcon: calcIcon(v), + }); + }, + content() { + this.clearNoticeBarAnimation(); + this.initAnimation(); + }, + }; + this.lifetimes = { + created() { + this.resetAnimation = wx.createAnimation({ + duration: 0, + timingFunction: 'linear', + }); + }, + detached() { + this.clearNoticeBarAnimation(); + }, + ready() { + this.show(); + }, + }; + this.methods = { + initAnimation() { + const warpID = `.${name}__content-wrap`; + const nodeID = `.${name}__content`; + getAnimationFrame(this, () => { + Promise.all([getRect(this, nodeID), getRect(this, warpID)]) + .then(([nodeRect, wrapRect]) => { + const { marquee } = this.properties; + if (nodeRect == null || wrapRect == null || !nodeRect.width || !wrapRect.width) { + return; + } + if (marquee || wrapRect.width < nodeRect.width) { + const speeding = marquee.speed || 50; + const delaying = marquee.delay || 0; + const animationDuration = ((wrapRect.width + nodeRect.width) / speeding) * 1000; + const firstAnimationDuration = (nodeRect.width / speeding) * 1000; + this.setData({ + wrapWidth: Number(wrapRect.width), + nodeWidth: Number(nodeRect.width), + animationDuration: animationDuration, + delay: delaying, + loop: marquee.loop - 1, + firstAnimationDuration: firstAnimationDuration, + }); + marquee.loop !== 0 && this.startScrollAnimation(true); + } + }) + .catch(() => { }); + }); + }, + startScrollAnimation(isFirstScroll = false) { + this.clearNoticeBarAnimation(); + const { wrapWidth, nodeWidth, firstAnimationDuration, animationDuration, delay } = this.data; + const delayTime = isFirstScroll ? delay : 0; + const durationTime = isFirstScroll ? firstAnimationDuration : animationDuration; + this.setData({ + animationData: this.resetAnimation + .translateX(isFirstScroll ? 0 : wrapWidth) + .step() + .export(), + }); + getAnimationFrame(this, () => { + this.setData({ + animationData: wx + .createAnimation({ duration: durationTime, timingFunction: 'linear', delay: delayTime }) + .translateX(-nodeWidth) + .step() + .export(), + }); + }); + this.nextAnimationContext = setTimeout(() => { + if (this.data.loop > 0) { + this.data.loop -= 1; + this.startScrollAnimation(); + } + else if (this.data.loop === 0) { + this.setData({ animationData: this.resetAnimation.translateX(0).step().export() }); + } + else if (this.data.loop < 0) { + this.startScrollAnimation(); + } + }, durationTime + delayTime); + }, + show() { + this.clearNoticeBarAnimation(); + this.setPrefixIcon(this.properties.prefixIcon); + this.initAnimation(); + }, + clearNoticeBarAnimation() { + this.nextAnimationContext && clearTimeout(this.nextAnimationContext); + this.nextAnimationContext = null; + }, + setPrefixIcon(v) { + const { theme } = this.properties; + this.setData({ + _prefixIcon: calcIcon(v, THEME_ICON[theme]), + }); + }, + onChange(e) { + const { current, source } = e.detail; + this.triggerEvent('change', { current, source }); + }, + clickPrefixIcon() { + this.triggerEvent('click', { trigger: 'prefix-icon' }); + }, + clickContent() { + this.triggerEvent('click', { trigger: 'content' }); + }, + clickSuffixIcon() { + this.triggerEvent('click', { trigger: 'suffix-icon' }); + }, + clickOperation() { + this.triggerEvent('click', { trigger: 'operation' }); + }, + }; + } +}; +NoticeBar = __decorate([ + wxComponent() +], NoticeBar); +export default NoticeBar; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.json new file mode 100644 index 0000000..005451e --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon", + "t-button": "../button/button" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.wxml new file mode 100644 index 0000000..2e97bc8 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.wxml @@ -0,0 +1,62 @@ +
+
+
+
+ 该组件于 0.10.0 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-overlay": "tdesign-miniprogram/overlay/overlay"
+}
+```
+
+## 代码演示
+
+### 基础使用
+
+{{ base }}
+
+## API
+
+### Overlay Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+visible | Boolean | false | 是否展示 | N
+zIndex | Number | 11000 | 遮罩层及 | N
+duration | Number | 300 | 背景色过渡时间，单位毫秒 | N
+backgroundColor | String | - | 遮罩层的背景色 | N
+preventScrollThrough | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
+
+### Overlay Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `({ visible: boolean })` | 点击遮罩时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-overlay-bg-color | @font-gray-2 | -
+--td-overlay-transition-duration | 300ms | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.d.ts
new file mode 100644
index 0000000..83ab784
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.d.ts
@@ -0,0 +1,36 @@
+import { SuperComponent } from '../common/src/index';
+export default class Overlay extends SuperComponent {
+ properties: {
+ zIndex: {
+ type: NumberConstructor;
+ value: number;
+ };
+ duration: {
+ type: NumberConstructor;
+ value: number;
+ };
+ backgroundColor: {
+ type: StringConstructor;
+ value: string;
+ };
+ preventScrollThrough: {
+ type: BooleanConstructor;
+ value: boolean;
+ };
+ };
+ behaviors: string[];
+ data: {
+ prefix: string;
+ classPrefix: string;
+ computedStyle: string;
+ _zIndex: number;
+ };
+ observers: {
+ backgroundColor(v: any): void;
+ zIndex(v: any): void;
+ };
+ methods: {
+ handleClick(): void;
+ noop(): void;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.js
new file mode 100644
index 0000000..e5ea40f
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.js
@@ -0,0 +1,65 @@
+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 transition from '../mixins/transition';
+const { prefix } = config;
+const name = `${prefix}-overlay`;
+let Overlay = class Overlay extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.properties = {
+ zIndex: {
+ type: Number,
+ value: 11000,
+ },
+ duration: {
+ type: Number,
+ value: 300,
+ },
+ backgroundColor: {
+ type: String,
+ value: '',
+ },
+ preventScrollThrough: {
+ type: Boolean,
+ value: true,
+ },
+ };
+ this.behaviors = [transition()];
+ this.data = {
+ prefix,
+ classPrefix: name,
+ computedStyle: '',
+ _zIndex: 11000,
+ };
+ this.observers = {
+ backgroundColor(v) {
+ this.setData({
+ computedStyle: v ? `background-color: ${v};` : '',
+ });
+ },
+ zIndex(v) {
+ if (v !== 0) {
+ this.setData({
+ _zIndex: v,
+ });
+ }
+ },
+ };
+ this.methods = {
+ handleClick() {
+ this.triggerEvent('click', { visible: !this.properties.visible });
+ },
+ noop() { },
+ };
+ }
+};
+Overlay = __decorate([
+ wxComponent()
+], Overlay);
+export default Overlay;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.json
new file mode 100644
index 0000000..efdc3c8
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.wxml
new file mode 100644
index 0000000..68a7ba5
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/overlay/overlay.wxml
@@ -0,0 +1,25 @@
+`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`
+confirm | `(value: Array
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-picker": "tdesign-miniprogram/picker/picker",
+ "t-picker-item": "tdesign-miniprogram/picker-item/picker-item",
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+#### 基础选择器
+
+单项和多选选择
+
+{{ base }}
+
+#### 地区选择器
+
+支持省市区切换，支持数据联动
+
+{{ area }}
+
+### 组件状态
+
+是否带标题
+
+{{ with-title }}
+
+## API
+### Picker Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+auto-close | Boolean | true | 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible | N
+cancel-btn | String / Boolean / Object | true | 取消按钮文字。TS 类型：`boolean \| string \| ButtonProps` | N
+confirm-btn | String / Boolean / Object | true | 确定按钮文字。TS 类型：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
+footer | Slot | - | 已废弃。底部内容 | N
+header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+title | String | '' | 标题 | N
+value | Array | - | 选中值。TS 类型：`Array`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`
+confirm | `(value: Array
`type PopupSource = 'close-btn' \| 'overlay'`
+ + +### CSS Variables +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-popup-bg-color | @bg-color-container | - +--td-popup-border-radius | @radius-default | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/README.md new file mode 100644 index 0000000..c6376d3 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/README.md @@ -0,0 +1,69 @@ +--- +title: Popup 弹出层 +description: 由其他控件触发，屏幕滑出或弹出一块自定义内容区域。 +spline: message +isComponent: true +--- + +
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-popup": "tdesign-miniprogram/popup/popup"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+基础弹出层
+
+{{ base }}
+
+### 组件示例
+
+应用示例
+
+{{ with-title }}
+
+{{ custom-close }}
+
+## API
+### Popup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+close-btn | Boolean / Slot | - | 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮 | N
+close-on-overlay-click | Boolean | true | 点击遮罩层是否关闭 | N
+content | String / Slot | - | 浮层里面的内容 | N
+duration | Number | 240 | 动画过渡时间 | N
+overlay-props | Object | {} | 遮罩层的属性，透传至 overlay | N
+placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N
+prevent-scroll-through | Boolean | true | 防止滚动穿透 | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+visible | Boolean | false | 是否显示浮层。TS 类型：`boolean` | N
+default-visible | Boolean | undefined | 是否显示浮层。非受控属性。TS 类型：`boolean` | N
+z-index | Number | 11500 | 组件层级，Web 侧样式默认为 5500，移动端样式默认为 1500，小程序样式默认为11500 | N
+
+### Popup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+visible-change | `(visible: boolean, trigger: PopupSource) ` | 当浮层隐藏或显示时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/popup/type.ts)。`type PopupSource = 'close-btn' \| 'overlay'`
+ +### Popup 外部样式类 +类名 | 说明 +-- | -- +t-class | 根节点样式类 +t-class-content | 内容样式类 + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-popup-bg-color | @bg-color-container | - +--td-popup-border-radius | @radius-default | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.d.ts new file mode 100644 index 0000000..6c31ec1 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.d.ts @@ -0,0 +1,19 @@ +import { TdPopupProps } from './type'; +import { SuperComponent } from '../common/src/index'; +export declare type PopupProps = TdPopupProps; +export default class Popup extends SuperComponent { + externalClasses: string[]; + behaviors: string[]; + options: { + multipleSlots: boolean; + }; + properties: TdPopupProps; + data: { + prefix: string; + classPrefix: string; + }; + methods: { + handleOverlayClick(): void; + handleClose(): void; + }; +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.js new file mode 100644 index 0000000..4cc5f5e --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.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 transition from '../mixins/transition'; +delete props.visible; +const { prefix } = config; +const name = `${prefix}-popup`; +let Popup = class Popup extends SuperComponent { + constructor() { + super(...arguments); + this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`]; + this.behaviors = [transition()]; + this.options = { + multipleSlots: true, + }; + this.properties = props; + this.data = { + prefix, + classPrefix: name, + }; + this.methods = { + handleOverlayClick() { + const { closeOnOverlayClick } = this.properties; + if (closeOnOverlayClick) { + this.triggerEvent('visible-change', { visible: false, trigger: 'overlay' }); + } + }, + handleClose() { + this.triggerEvent('visible-change', { visible: false, trigger: 'close-btn' }); + }, + }; + } +}; +Popup = __decorate([ + wxComponent() +], Popup); +export default Popup; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.json new file mode 100644 index 0000000..cb134b6 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-overlay": "../overlay/overlay", + "t-icon": "../icon/icon" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.wxml new file mode 100644 index 0000000..5fb4d67 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.wxml @@ -0,0 +1,35 @@ +
+
+
+
+ 该组件于 0.7.3 版本上线，请留意版本。
+
+
+## 引入
+
+### 引入组件
+
+在 `app.json` 或 `page.json` 中引入组件：
+
+```json
+"usingComponents": {
+ "t-progress": "tdesign-miniprogram/progress/progress"
+}
+```
+
+## 代码演示
+
+### 01 组件类型
+
+基础进度条
+
+{{ base }}
+
+过渡样式
+
+{{ transition }}
+
+自定义颜色/圆角
+
+{{ custom }}
+
+### 02 组件状态
+
+线性进度条
+
+{{ line }}
+
+百分比内显进度条
+
+{{ plump }}
+
+环形进度条
+
+{{ circle }}
+
+## API
+### Progress Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+color | String / Object / Array | '' | 进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或 `{ from: '#000', to: '#000' }` 等。TS 类型：`string \| Array
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh"
+}
+```
+
+## 代码演示
+
+### 顶部下拉刷新
+
+由于组件内无法监听页面滚动，需要由页面获取组件实例，并将页面滚动事件传递到组件。
+
+{{ base }}
+
+
+
+> 在使用 pull-down-refresh 组件的页面，建议开启 `disableScroll: true`
+
+## API
+### PullDownRefresh Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+enable-back-to-top | Boolean | true | `1.1.5`。iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启 | N
+enable-passive | Boolean | false | `1.1.5`。开启 passive 特性，能优化一定的滚动性能 | N
+loading-bar-height | String / Number | 50 | 加载中下拉高度，如果值为数字则单位是：'px' | N
+loading-props | Object | - | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/pull-down-refresh/type.ts) | N
+loading-texts | Array | [] | 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型：`string[]` | N
+lower-threshold | String / Number | 50 | `1.1.5`。距底部/右边多远时，触发 scrolltolower 事件 | N
+max-bar-height | String / Number | 80 | 最大下拉高度，如果值为数字则单位是：'px' | N
+refresh-timeout | Number | 3000 | 刷新超时时间 | N
+scroll-into-view | String | - | `1.1.5`。值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | N
+show-scrollbar | Boolean | true | 滚动条显隐控制 (同时开启 enhanced 属性后生效) | N
+upper-threshold | String / Number | 50 | `1.1.5`。距顶部/左边多远时，触发 scrolltoupper 事件 | N
+value | Boolean | false | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态 | N
+default-value | Boolean | undefined | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态。非受控属性 | N
+
+### PullDownRefresh Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: boolean)` | 下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态
+refresh | \- | 结束下拉时触发
+timeout | \- | 刷新超时触发
+
+### PullDownRefresh 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-loading | 加载样式类
+t-class-text | 文本样式类
+t-class-indicator | 指示样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-pull-down-refresh-color | @font-gray-3 | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/pull-down-refresh/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/pull-down-refresh/props.d.ts
new file mode 100644
index 0000000..084c210
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/pull-down-refresh/props.d.ts
@@ -0,0 +1,3 @@
+import { TdPullDownRefreshProps } from './type';
+declare const props: TdPullDownRefreshProps;
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/pull-down-refresh/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/pull-down-refresh/props.js
new file mode 100644
index 0000000..59b3848
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/pull-down-refresh/props.js
@@ -0,0 +1,57 @@
+const props = {
+ enableBackToTop: {
+ type: Boolean,
+ value: true,
+ },
+ enablePassive: {
+ type: Boolean,
+ value: false,
+ },
+ externalClasses: {
+ type: Array,
+ },
+ loadingBarHeight: {
+ type: null,
+ value: 50,
+ },
+ loadingProps: {
+ type: Object,
+ },
+ loadingTexts: {
+ type: Array,
+ value: [],
+ },
+ lowerThreshold: {
+ type: null,
+ value: 50,
+ },
+ maxBarHeight: {
+ type: null,
+ value: 80,
+ },
+ refreshTimeout: {
+ type: Number,
+ value: 3000,
+ },
+ scrollIntoView: {
+ type: String,
+ value: '',
+ },
+ showScrollbar: {
+ type: Boolean,
+ value: true,
+ },
+ upperThreshold: {
+ type: null,
+ value: 50,
+ },
+ value: {
+ type: Boolean,
+ value: null,
+ },
+ defaultValue: {
+ type: Boolean,
+ value: false,
+ },
+};
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/pull-down-refresh/pull-down-refresh.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/pull-down-refresh/pull-down-refresh.d.ts
new file mode 100644
index 0000000..e9cc27c
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/pull-down-refresh/pull-down-refresh.d.ts
@@ -0,0 +1,46 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class PullDownRefresh extends SuperComponent {
+ pixelRatio: number;
+ startPoint: {
+ pageX: number;
+ pageY: number;
+ } | null;
+ isPulling: boolean;
+ loadingBarHeight: number;
+ maxRefreshAnimateTimeFlag: number;
+ closingAnimateTimeFlag: number;
+ externalClasses: string[];
+ options: {
+ multipleSlots: boolean;
+ };
+ relations: RelationsOptions;
+ properties: import("./type").TdPullDownRefreshProps;
+ data: {
+ prefix: string;
+ classPrefix: string;
+ barHeight: number;
+ refreshStatus: number;
+ loosing: boolean;
+ enableToRefresh: boolean;
+ scrollTop: number;
+ };
+ lifetimes: {
+ attached(): void;
+ detached(): void;
+ };
+ observers: {
+ value(val: any): void;
+ };
+ methods: {
+ onScrollToBottom(): void;
+ onScrollToTop(): void;
+ onScroll(e: any): void;
+ onTouchStart(e: WechatMiniprogram.Component.TrivialInstance): void;
+ onTouchMove(e: WechatMiniprogram.Component.TrivialInstance): void;
+ onTouchEnd(e: WechatMiniprogram.Component.TrivialInstance): void;
+ doRefresh(): void;
+ setRefreshBarHeight(value: number): Promise
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-radio": "tdesign-miniprogram/radio/radio",
+ "t-radio-group": "tdesign-miniprogram/radio-group/radio-group"
+}
+```
+
+## 代码演示
+
+### 纵向单选框
+
+{{ base }}
+
+### 横向单选框
+
+{{ horizontal }}
+
+### 单选框状态
+
+{{ status }}
+
+### 勾选样式
+
+{{ theme }}
+
+### 勾选显示位置
+
+{{ align }}
+
+### 非通栏单选样式
+
+{{ card }}
+
+### 特殊样式
+
+{{ special }}
+
+## API
+### Radio Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+placement | String | left | 复选框和内容相对位置。可选项：left/right | N
+allow-uncheck | Boolean | false | 是否允许取消选中 | N
+block | Boolean | true | 是否为块级元素 | N
+checked | Boolean | false | 是否选中 | N
+default-checked | Boolean | undefined | 是否选中。非受控属性 | N
+content | String / Slot | - | 单选内容 | N
+content-disabled | Boolean | false | 是否禁用组件内容（content）触发选中 | N
+readonly | Boolean | false | 只读状态 | N
+disabled | Boolean | undefined | 是否为禁用态 | N
+icon | String / Array / Slot | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽。TS 类型：`'circle' \| 'line' \| 'dot' \| Array
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+{
+ "usingComponents": {
+ "t-rate": "tdesign-miniprogram/rate/rate"
+ }
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+实心评分
+
+{{ base }}
+
+自定义评分
+
+{{ custom }}
+
+自定义评分数量
+
+{{ count }}
+
+带描述评分
+
+{{ show-text }}
+
+### 组件状态
+
+{{ action }}
+
+### 组件样式
+
+评分大小
+
+{{ size }}
+
+设置评分颜色
+
+{{ color }}
+
+### 特殊样式
+
+竖向带描述评分
+
+{{ special }}
+
+自定义图片前缀
+
+{{iconPrefix}}
+
+
+## API
+### Rate Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+allow-half | Boolean | false | 是否允许半选 | N
+color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array
+
+
+
+ 该组件于 0.16.0 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-result": "tdesign-miniprogram/result/result"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+基础结果
+
+{{ theme }}
+
+带描述的结果
+
+{{ description }}
+
+自定义结果
+
+{{ custom }}
+
+## 常见问题
+
+
+
+
+## API
+### Result Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+description | String / Slot | - | 描述文字 | N
+icon | String / Boolean / Object | true | 图标名称。值为字符串表示图标名称，值为 `false` 表示不显示图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标。 | N
+image | String / Slot | - | 图片地址 | N
+theme | String | default | 内置主题。可选项：default/success/warning/error | N
+title | String / Slot | '' | 标题 | N
+
+### Result 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-image | 图片样式类
+t-class-title | 标题样式类
+t-class-description | 描述样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-result-description-color | @font-gray-2 | -
+--td-result-description-font-size | @font-size-base | -
+--td-result-description-line-height | 44rpx | -
+--td-result-description-margin-top | @spacer | -
+--td-result-icon-default-color | @brand-color | -
+--td-result-icon-error-color | @error-color | -
+--td-result-icon-success-color | @success-color | -
+--td-result-icon-warning-color | @warning-color | -
+--td-result-title-color | @font-gray-1 | -
+--td-result-title-font-size | @font-size-l | -
+--td-result-title-line-height | 56rpx | -
+--td-result-title-margin-top | @spacer-1 | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/result/index.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/index.d.ts
new file mode 100644
index 0000000..f85eb5a
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/index.d.ts
@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './result';
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/result/index.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/index.js
new file mode 100644
index 0000000..f85eb5a
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/index.js
@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './result';
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/result/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/props.d.ts
new file mode 100644
index 0000000..473a69a
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/props.d.ts
@@ -0,0 +1,3 @@
+import { TdResultProps } from './type';
+declare const props: TdResultProps;
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/result/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/props.js
new file mode 100644
index 0000000..38b2c30
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/props.js
@@ -0,0 +1,24 @@
+const props = {
+ description: {
+ type: String,
+ },
+ externalClasses: {
+ type: Array,
+ },
+ icon: {
+ type: null,
+ value: true,
+ },
+ image: {
+ type: String,
+ },
+ theme: {
+ type: String,
+ value: 'default',
+ },
+ title: {
+ type: String,
+ value: '',
+ },
+};
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.d.ts
new file mode 100644
index 0000000..b4b928a
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.d.ts
@@ -0,0 +1,21 @@
+import { SuperComponent } from '../common/src/index';
+export default class extends SuperComponent {
+ options: {
+ multipleSlots: boolean;
+ };
+ externalClasses: string[];
+ properties: import("./type").TdResultProps;
+ data: {
+ prefix: string;
+ classPrefix: string;
+ };
+ lifetimes: {
+ ready(): void;
+ };
+ observers: {
+ 'icon, theme'(): void;
+ };
+ methods: {
+ initIcon(): void;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.js
new file mode 100644
index 0000000..b76978a
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.js
@@ -0,0 +1,59 @@
+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 props from './props';
+import config from '../common/config';
+import { calcIcon } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-result`;
+const THEME_ICON = {
+ default: 'error-circle',
+ success: 'check-circle',
+ warning: 'error-circle',
+ error: 'close-circle',
+};
+let default_1 = class extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.options = {
+ multipleSlots: true,
+ };
+ this.externalClasses = [
+ `${prefix}-class`,
+ `${prefix}-class-image`,
+ `${prefix}-class-title`,
+ `${prefix}-class-description`,
+ ];
+ this.properties = props;
+ this.data = {
+ prefix,
+ classPrefix: name,
+ };
+ this.lifetimes = {
+ ready() {
+ this.initIcon();
+ },
+ };
+ this.observers = {
+ 'icon, theme'() {
+ this.initIcon();
+ },
+ };
+ this.methods = {
+ initIcon() {
+ const { icon, theme } = this.properties;
+ this.setData({
+ _icon: calcIcon(icon, THEME_ICON[theme]),
+ });
+ },
+ };
+ }
+};
+default_1 = __decorate([
+ wxComponent()
+], default_1);
+export default default_1;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.json
new file mode 100644
index 0000000..29842d4
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "t-icon": "../icon/icon",
+ "t-image": "../image/image"
+ }
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.wxml
new file mode 100644
index 0000000..ccc32fe
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/result/result.wxml
@@ -0,0 +1,22 @@
++ 本地图片无法正确引用? + 👇 +
++ 建议使用绝对路径，而不是相对路径。绝对路径以 app.json 所在位置为基准。 +
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-search": "tdesign-miniprogram/search/search"
+}
+```
+
+## 代码演示
+
+### 01 组件类型
+
+基础搜索框
+
+{{ base }}
+
+获取焦点后显示取消按钮
+
+{{ action }}
+
+### 02 组件样式
+
+搜索框形状
+
+{{ shape }}
+
+### 03 组件状态
+
+默认状态其他对齐方式
+
+{{ other }}
+
+## API
+### Search Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+action | String / Slot | '' | 自定义右侧操作按钮文字 | N
+center | Boolean | false | 是否居中 | N
+disabled | Boolean | false | 是否禁用 | N
+cursor-spacing | Number | 0 | 搜索框聚焦时底部与键盘的距离 | N
+focus | Boolean | false | 是否聚焦 | N
+label | String | '' | 已废弃。左侧文本 | N
+maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
+maxlength | Number | -1 | 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
+confirm-type | String | search | 设置键盘右下角按钮的文字，仅在type='text'时生效。具体释义：
`send` 右下角按钮为“发送”；
`search` 右下角按钮为“搜索”；
`next` 右下角按钮为“下一个”；
`go` 右下角按钮为“前往”；
`done` 右下角按钮为“完成”。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N +always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N +confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N +cursor | Number | - | 必需。指定 focus 时的光标位置 | Y +selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N +selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N +adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N +hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N +placeholder-style | String | - | 必需。指定 placeholder 的样式 | Y +placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N +left-icon | String / Slot | 'search' | 左侧图标 | N +placeholder | String | '' | 占位符 | N +right-icon | String / Slot | 'close-circle-filled' | 已废弃。右侧图标 | N +clearable | Boolean | true | 是否启用清除控件 | N +shape | String | 'square' | 搜索框形状。可选项：square/round | N +value | String | '' | 值 | N +type | String | 'text' | 拉起键盘的类型，可选项：text/number/idcard/digit/nickname | N + +### Search Events + +名称 | 参数 | 描述 +-- | -- | -- +action-click | `({})` | 点击右侧操作按钮文字时触发 +blur | `({ value: string })` | 失去焦点时触发 +change | `({ value: string })` | 值发生变化时触发 +clear | `({ value: string })` | 点击清除时触发 +focus | `({ value: string })` | 聚焦时触发 +submit | `({ value: string })` | 提交时触发 + +### Search 外部样式类 +类名 | 说明 +-- | -- +t-class | 根节点样式类 +t-class-input-container | 输入框容器样式类 +t-class-input | 输入框样式类 +t-class-action | 操作按钮样式类 +t-class-left | 左侧图标样式类 +t-class-clear | 右侧图标样式类 + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-search-action-color | @brand-color | - +--td-search-bg-color | @bg-color-secondarycontainer | - +--td-search-clear-icon-color | @font-gray-3 | - +--td-search-font-size | @font-size-m | - +--td-search-height | 80rpx | - +--td-search-icon-color | @font-gray-3 | - +--td-search-label-color | @font-gray-1 | - +--td-search-padding | 16rpx 24rpx | - +--td-search-placeholder-color | @font-gray-3 | - +--td-search-square-radius | @radius-default | - +--td-search-text-color | @font-gray-1 | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/search/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/props.d.ts new file mode 100644 index 0000000..c467cbf --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/props.d.ts @@ -0,0 +1,3 @@ +import { TdSearchProps } from './type'; +declare const props: TdSearchProps; +export default props; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/search/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/props.js new file mode 100644 index 0000000..35e7cac --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/props.js @@ -0,0 +1,104 @@ +const props = { + action: { + type: String, + value: '', + }, + center: { + type: Boolean, + value: false, + }, + disabled: { + type: Boolean, + value: false, + }, + externalClasses: { + type: Array, + }, + cursorSpacing: { + type: Number, + value: 0, + }, + focus: { + type: Boolean, + value: false, + }, + label: { + type: String, + value: '', + }, + maxcharacter: { + type: Number, + }, + maxlength: { + type: Number, + value: -1, + }, + confirmType: { + type: String, + value: 'search', + }, + alwaysEmbed: { + type: Boolean, + value: false, + }, + confirmHold: { + type: Boolean, + value: false, + }, + cursor: { + type: Number, + }, + selectionStart: { + type: Number, + value: -1, + }, + selectionEnd: { + type: Number, + value: -1, + }, + adjustPosition: { + type: Boolean, + value: true, + }, + holdKeyboard: { + type: Boolean, + value: false, + }, + placeholderStyle: { + type: String, + value: '', + }, + placeholderClass: { + type: String, + value: '', + }, + leftIcon: { + type: String, + value: 'search', + }, + placeholder: { + type: String, + value: '', + }, + rightIcon: { + type: String, + value: 'close-circle-filled', + }, + shape: { + type: String, + value: 'square', + }, + value: { + type: String, + value: '', + }, + clearable: { + type: Boolean, + value: true, + }, + type: { + type: String, + value: 'text', + }, +}; +export default props; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.d.ts new file mode 100644 index 0000000..d4e0643 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.d.ts @@ -0,0 +1,19 @@ +import { SuperComponent } from '../common/src/index'; +export default class Search extends SuperComponent { + externalClasses: string[]; + options: { + multipleSlots: boolean; + }; + properties: import("./type").TdSearchProps; + observers: {}; + data: { + classPrefix: string; + prefix: string; + }; + onInput(e: any): void; + onFocus(e: any): void; + onBlur(e: any): void; + handleClear(): void; + onConfirm(e: any): void; + onActionClick(): void; +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.js new file mode 100644 index 0000000..5e72f25 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.js @@ -0,0 +1,67 @@ +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 { getCharacterLength } from '../common/utils'; +const { prefix } = config; +const name = `${prefix}-search`; +let Search = class Search extends SuperComponent { + constructor() { + super(...arguments); + this.externalClasses = [ + `${prefix}-class`, + `${prefix}-class-input-container`, + `${prefix}-class-input`, + `${prefix}-class-action`, + `${prefix}-class-left`, + `${prefix}-class-clear`, + ]; + this.options = { + multipleSlots: true, + }; + this.properties = props; + this.observers = {}; + this.data = { + classPrefix: name, + prefix, + }; + } + onInput(e) { + let { value } = e.detail; + const { maxcharacter } = this.properties; + if (maxcharacter && typeof maxcharacter === 'number' && maxcharacter > 0) { + const { characters } = getCharacterLength('maxcharacter', value, maxcharacter); + value = characters; + } + this.setData({ value }); + this.triggerEvent('change', { value }); + } + onFocus(e) { + const { value } = e.detail; + this.triggerEvent('focus', { value }); + } + onBlur(e) { + const { value } = e.detail; + this.triggerEvent('blur', { value }); + } + handleClear() { + this.setData({ value: '' }); + this.triggerEvent('clear', { value: '' }); + } + onConfirm(e) { + const { value } = e.detail; + this.triggerEvent('submit', { value }); + } + onActionClick() { + this.triggerEvent('action-click'); + } +}; +Search = __decorate([ + wxComponent() +], Search); +export default Search; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.json new file mode 100644 index 0000000..2e06b99 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.wxml new file mode 100644 index 0000000..7e05212 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/search/search.wxml @@ -0,0 +1,62 @@ +
+
+ 该组件于 0.25.0 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+{
+ "usingComponents": {
+ "t-side-bar": "tdesign-miniprogram/side-bar/side-bar",
+ "t-side-bar-item": "tdesign-miniprogram/side-bar-item/side-bar-item",
+ }
+}
+```
+
+## 代码演示
+
+### 锚点用法
+
+{{ base }}
+
+### 切页用法
+
+{{ switch }}
+
+### 带图标侧边导航
+
+{{ with-icon }}
+
+### 自定义样式
+
+{{ custom }}
+
+## API
+### SideBar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+value | String / Number | - | 选项值 | N
+default-value | String / Number | undefined | 选项值。非受控属性 | N
+
+### SideBar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: number \| string, label: string)` | 选项值发生变化时触发
+click | `(value: number \| string, label: string)` | 点击选项时触发
+
+### SideBarItem Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+badge-props | Object | - | 透传至 Badge 组件 | N
+disabled | Boolean | false | 是否禁用 | N
+icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
+label | String | - | 展示的标签 | N
+value | String / Number | - | 当前选项的值 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-side-bar-bg-color | @bg-color-secondarycontainer | -
+--td-side-bar-height | 100% | -
+--td-side-bar-width | 206rpx | -
+--td-side-bar-active-color | @brand-color | -
+--td-side-bar-bg-color | @bg-color-secondarycontainer | -
+--td-side-bar-border-radius | 18rpx | -
+--td-side-bar-color | @font-gray-1 | -
+--td-side-bar-disabled-color | @font-gray-4 | -
+--td-side-bar-font-size | 32rpx | -
+--td-side-bar-icon-size | 40rpx | -
+--td-side-bar-item-height | 112rpx | -
+--td-side-bar-item-line-height | 48rpx | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/props.d.ts
new file mode 100644
index 0000000..1674e43
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/props.d.ts
@@ -0,0 +1,3 @@
+import { TdSideBarProps } from './type';
+declare const props: TdSideBarProps;
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/props.js
new file mode 100644
index 0000000..b21be73
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/props.js
@@ -0,0 +1,10 @@
+const props = {
+ value: {
+ type: null,
+ value: null,
+ },
+ defaultValue: {
+ type: null,
+ },
+};
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.d.ts
new file mode 100644
index 0000000..279ea26
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.d.ts
@@ -0,0 +1,24 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class SideBar extends SuperComponent {
+ externalClasses: string[];
+ children: any[];
+ relations: RelationsOptions;
+ controlledProps: {
+ key: string;
+ event: string;
+ }[];
+ properties: import("./type").TdSideBarProps;
+ observers: {
+ value(v: any): void;
+ };
+ data: {
+ classPrefix: string;
+ prefix: string;
+ };
+ methods: {
+ doChange({ value, label }: {
+ value: any;
+ label: any;
+ }): void;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.js
new file mode 100644
index 0000000..5ec0672
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.js
@@ -0,0 +1,58 @@
+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';
+const { prefix } = config;
+const name = `${prefix}-side-bar`;
+const relationsPath = '../side-bar-item/side-bar-item';
+let SideBar = class SideBar extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.externalClasses = [`${prefix}-class`];
+ this.children = [];
+ this.relations = {
+ [relationsPath]: {
+ type: 'child',
+ linked(child) {
+ this.children.push(child);
+ },
+ unlinked(child) {
+ const index = this.children.findIndex((item) => item === child);
+ this.children.splice(index, 1);
+ },
+ },
+ };
+ this.controlledProps = [
+ {
+ key: 'value',
+ event: 'change',
+ },
+ ];
+ this.properties = props;
+ this.observers = {
+ value(v) {
+ this.$children.forEach((item) => {
+ item.updateActive(v);
+ });
+ },
+ };
+ this.data = {
+ classPrefix: name,
+ prefix,
+ };
+ this.methods = {
+ doChange({ value, label }) {
+ this._trigger('change', { value, label });
+ },
+ };
+ }
+};
+SideBar = __decorate([
+ wxComponent()
+], SideBar);
+export default SideBar;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.json
new file mode 100644
index 0000000..28a32c5
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.json
@@ -0,0 +1,6 @@
+{
+ "component": true,
+ "usingComponents": {
+ "t-side-bar-item": "../side-bar-item/side-bar-item"
+ }
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.wxml
new file mode 100644
index 0000000..a26cb19
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/side-bar/side-bar.wxml
@@ -0,0 +1,6 @@
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-skeleton": "tdesign-miniprogram/skeleton/skeleton"
+}
+```
+
+## 代码演示
+
+### 骨架屏类型
+
+基础骨架屏
+
+{{ theme }}
+
+单元格骨架屏
+
+{{ cell-group }}
+
+
+宫格骨架屏
+
+{{ grid }}
+
+图文组合骨架屏
+
+{{ image-group }}
+
+### 组件动效
+
+{{ animation }}
+
+
+## API
+### Skeleton Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N
+delay | Number | 0 | 【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
+loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
+row-col | Array | [1, 1, 1, { width: '70%' }] | 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-slider": "tdesign-miniprogram/slider/slider"
+}
+```
+
+## 代码演示
+
+
+
+### 组件类型
+
+单游标滑块
+
+{{ base }}
+
+双游标滑块
+
+{{ range }}
+
+带数值滑动选择器
+
+{{ label }}
+
+带刻度滑动选择器
+
+{{ step }}
+
+### 组件状态
+
+滑块禁用状态
+
+{{ disabled }}
+
+#### 特殊样式
+
+胶囊型滑块
+
+{{ capsule }}
+
+#### 垂直状态
+
+垂直方向的滑块
+
+{{ vertical }}
+
+## API
+### Slider Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+colors | Array | [] | 废弃。颜色，[已选择, 未选择]。TS 类型：`Array值为 true 显示默认文案；值为 false 不显示滑块当前值文本；
值为 `${value}%` 则表示组件会根据占位符渲染文案；
值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean` | N +marks | Object / Array | {} | 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5: '5¥', 10: '10%' }`。TS 类型：`Record
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-stepper": "tdesign-miniprogram/stepper/stepper"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+基础步进器
+
+{{ base }}
+
+### 组件状态
+
+最大最小状态
+
+{{ min-max }}
+
+禁用状态
+
+{{ status }}
+
+### 组件样式
+
+步进器样式
+
+{{ theme }}
+
+步进器尺寸
+
+{{ size }}
+
+
+## API
+### Stepper Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+disable-input | Boolean | false | 禁用输入框 | N
+disabled | Boolean | false | 禁用全部操作 | N
+input-width | Number | - | 输入框宽度，默认单位 `px` | N
+max | Number | 100 | 最大值 | N
+min | Number | 0 | 最小值 | N
+step | Number | 1 | 步长 | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N
+theme | String | normal | 组件风格。可选项：normal/filled/outline | N
+value | String / Number | 0 | 值 | N
+default-value | String / Number | undefined | 值。非受控属性 | N
+
+### Stepper Events
+
+名称 | 参数 | 描述
+-- | -- | --
+blur | `({ type: string \| number })` | 输入框失去焦点时触发
+change | `({ value: string \| number })` | 数值发生变更时触发
+overlimit | `({type: 'minus' \| 'plus'})` | 数值超出限制时触发
+
+### Stepper 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-input | 输入框样式类
+t-class-minus | 左侧递减号样式类
+t-class-plus | 右侧递增号样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-stepper-border-color | @component-border | -
+--td-stepper-border-radius | @radius-small | -
+--td-stepper-input-color | @font-gray-1 | -
+--td-stepper-input-disabled-color | @font-gray-4 | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/props.d.ts
new file mode 100644
index 0000000..e8dcf9a
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/props.d.ts
@@ -0,0 +1,3 @@
+import { TdStepperProps } from './type';
+declare const props: TdStepperProps;
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/props.js
new file mode 100644
index 0000000..cd9a304
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/props.js
@@ -0,0 +1,47 @@
+const props = {
+ disableInput: {
+ type: Boolean,
+ value: false,
+ },
+ disabled: {
+ type: Boolean,
+ value: false,
+ },
+ externalClasses: {
+ type: Array,
+ },
+ inputWidth: {
+ type: Number,
+ },
+ max: {
+ type: Number,
+ value: 100,
+ },
+ min: {
+ type: Number,
+ value: 0,
+ },
+ step: {
+ type: Number,
+ value: 1,
+ },
+ size: {
+ type: String,
+ value: 'medium',
+ },
+ theme: {
+ type: String,
+ value: 'normal',
+ },
+ value: {
+ type: String,
+ optionalTypes: [Number],
+ value: null,
+ },
+ defaultValue: {
+ type: String,
+ optionalTypes: [Number],
+ value: 0,
+ },
+};
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.d.ts
new file mode 100644
index 0000000..cf50d6d
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.d.ts
@@ -0,0 +1,86 @@
+import { SuperComponent } from '../common/src/index';
+export default class Stepper extends SuperComponent {
+ externalClasses: string[];
+ options: {
+ addGlobalClass: boolean;
+ };
+ properties: {
+ style?: {
+ type: StringConstructor;
+ value?: string;
+ };
+ disableInput?: {
+ type: BooleanConstructor;
+ value?: boolean;
+ };
+ disabled?: {
+ type: BooleanConstructor;
+ value?: boolean;
+ };
+ externalClasses?: {
+ type: ArrayConstructor;
+ value?: ["t-class", "t-class-input", "t-class-add", "t-class-minus"];
+ };
+ inputWidth?: {
+ type: NumberConstructor;
+ value?: number;
+ };
+ max?: {
+ type: NumberConstructor;
+ value?: number;
+ };
+ min?: {
+ type: NumberConstructor;
+ value?: number;
+ };
+ step?: {
+ type: NumberConstructor;
+ value?: number;
+ };
+ size?: {
+ type: StringConstructor;
+ value?: string;
+ };
+ theme?: {
+ type: StringConstructor;
+ value?: "outline" | "normal" | "filled";
+ };
+ value?: {
+ type: StringConstructor;
+ optionalTypes: NumberConstructor[];
+ value?: string | number;
+ };
+ defaultValue?: {
+ type: StringConstructor;
+ optionalTypes: NumberConstructor[];
+ value?: string | number;
+ };
+ };
+ controlledProps: {
+ key: string;
+ event: string;
+ }[];
+ observers: {
+ value(v: any): void;
+ };
+ data: {
+ currentValue: number;
+ classPrefix: string;
+ prefix: string;
+ };
+ lifetimes: {
+ attached(): void;
+ };
+ isDisabled(type: any): boolean;
+ getLen(num: number): number;
+ add(a: number, b: number): number;
+ format(value: any): string;
+ setValue(value: any): void;
+ minusValue(): boolean;
+ plusValue(): boolean;
+ methods: {
+ handleFocus(e: any): void;
+ handleInput(e: any): void;
+ handleBlur(e: any): void;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.js
new file mode 100644
index 0000000..cf1992e
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.js
@@ -0,0 +1,122 @@
+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';
+const { prefix } = config;
+const name = `${prefix}-stepper`;
+let Stepper = class Stepper extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.externalClasses = [`${prefix}-class`, `${prefix}-class-input`, `${prefix}-class-minus`, `${prefix}-class-plus`];
+ this.options = {
+ addGlobalClass: true,
+ };
+ this.properties = Object.assign({}, props);
+ this.controlledProps = [
+ {
+ key: 'value',
+ event: 'change',
+ },
+ ];
+ this.observers = {
+ value(v) {
+ this.preValue = Number(v);
+ this.setData({
+ currentValue: this.format(Number(v)),
+ });
+ },
+ };
+ this.data = {
+ currentValue: 0,
+ classPrefix: name,
+ prefix,
+ };
+ this.lifetimes = {
+ attached() {
+ const { value, min } = this.properties;
+ this.setData({
+ currentValue: value ? Number(value) : min,
+ });
+ },
+ };
+ this.methods = {
+ handleFocus(e) {
+ const { value } = e.detail;
+ this.triggerEvent('focus', { value });
+ },
+ handleInput(e) {
+ const { value } = e.detail;
+ if (value === '') {
+ return;
+ }
+ this.triggerEvent('input', { value });
+ },
+ handleBlur(e) {
+ const { value: rawValue } = e.detail;
+ const value = this.format(rawValue);
+ this.setValue(value);
+ this.triggerEvent('blur', { value });
+ },
+ };
+ }
+ isDisabled(type) {
+ const { min, max, disabled } = this.properties;
+ const { currentValue } = this.data;
+ if (disabled) {
+ return true;
+ }
+ if (type === 'minus' && currentValue <= min) {
+ return true;
+ }
+ if (type === 'plus' && currentValue >= max) {
+ return true;
+ }
+ return false;
+ }
+ getLen(num) {
+ const numStr = num.toString();
+ return numStr.indexOf('.') === -1 ? 0 : numStr.split('.')[1].length;
+ }
+ add(a, b) {
+ const maxLen = Math.max(this.getLen(a), this.getLen(b));
+ const base = Math.pow(10, maxLen);
+ return Math.round(a * base + b * base) / base;
+ }
+ format(value) {
+ const { min, max, step } = this.properties;
+ const len = Math.max(this.getLen(step), this.getLen(value));
+ return Math.max(Math.min(max, value, Number.MAX_SAFE_INTEGER), min, Number.MIN_SAFE_INTEGER).toFixed(len);
+ }
+ setValue(value) {
+ value = this.format(value);
+ if (this.preValue === value)
+ return;
+ this.preValue = value;
+ this._trigger('change', { value: Number(value) });
+ }
+ minusValue() {
+ if (this.isDisabled('minus')) {
+ this.triggerEvent('overlimit', { type: 'minus' });
+ return false;
+ }
+ const { currentValue, step } = this.data;
+ this.setValue(this.add(currentValue, -step));
+ }
+ plusValue() {
+ if (this.isDisabled('plus')) {
+ this.triggerEvent('overlimit', { type: 'plus' });
+ return false;
+ }
+ const { currentValue, step } = this.data;
+ this.setValue(this.add(currentValue, step));
+ }
+};
+Stepper = __decorate([
+ wxComponent()
+], Stepper);
+export default Stepper;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.json
new file mode 100644
index 0000000..d9ed36a
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "t-cell": "../cell/cell",
+ "t-icon": "../icon/icon"
+ }
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.wxml
new file mode 100644
index 0000000..7115754
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/stepper/stepper.wxml
@@ -0,0 +1,37 @@
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-steps": "tdesign-miniprogram/steps/steps",
+ "t-step-item": "tdesign-miniprogram/step-item/step-item",
+}
+```
+
+## 代码演示
+
+步骤条，方向可以横向和纵向，可以自定义步骤条显示内容以及是否可写
+
+### 组件类型
+
+#### 水平步骤条
+
+支持三种类型：序号、图标、简略
+
+{{ horizontal }}
+
+#### 垂直步骤条
+
+支持三种类型：序号、图标、简略
+
+{{ vertical }}
+
+### 组件状态
+
+#### 选项卡状态
+
+共支持 4 种状态：未完成（default）、已完成（finish）、进行中（process）、错误（error）
+
+{{ status }}
+
+### 特殊类型
+
+通过已有特性，改造出两种常见类型：
+
+- 垂直自定义（在 Cascader 中使用）
+- 纯展示步骤条
+
+可以参考以下代码实现
+
+{{ special }}
+
+## API
+### Steps Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+current | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成 | N
+default-current | String / Number | undefined | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N
+current-status | String | process | 用于控制 current 指向的步骤条的状态。可选项：default/process/finish/error | N
+layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
+readonly | Boolean | false | 只读状态 | N
+sequence | String | positive | 步骤条顺序。可选项：positive/reverse | N
+theme | String | default | 步骤条风格。可选项：default/dot | N
+
+### Steps Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `({current: string \| number, previous: string \| number})` | 当前步骤发生变化时触发
+
+### Steps 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+
+### StepItem Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | String / Slot | '' | 步骤描述。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+status | String | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
+sub-step-items | Array | [] | 已废弃。子步骤条，仅支持 layout = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
+title | String / Slot | '' | 标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+
+### StepItem 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-title | 标题样式类
+t-class-description | 描述样式类
+t-class-extra | 额外样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-step-item-circle-font-size | 28rpx | -
+--td-step-item-circle-size | 44rpx | -
+--td-step-item-default-circle-bg | @bg-color-secondarycontainer | -
+--td-step-item-default-circle-color | @font-gray-3 | -
+--td-step-item-default-dot-border-color | @component-border | -
+--td-step-item-default-icon-color | @font-gray-3 | -
+--td-step-item-default-title-color | @font-gray-3 | -
+--td-step-item-description-color | @font-gray-3 | -
+--td-step-item-dot-size | 16rpx | -
+--td-step-item-error-circle-bg | @error-color-1 | -
+--td-step-item-error-circle-color | @error-color | -
+--td-step-item-error-dot-border-color | @error-color | -
+--td-step-item-error-icon-color | @error-color | -
+--td-step-item-error-title-color | @error-color | -
+--td-step-item-finish-circle-bg | @brand-color-light | -
+--td-step-item-finish-circle-color | @brand-color | -
+--td-step-item-finish-dot-border-color | @brand-color | -
+--td-step-item-finish-icon-color | @brand-color | -
+--td-step-item-finish-line-color | @brand-color | -
+--td-step-item-finish-title-color | @font-gray-1 | -
+--td-step-item-line-color | @component-border | -
+--td-step-item-process-circle-bg | @brand-color | -
+--td-step-item-process-circle-color | @font-white-1 | -
+--td-step-item-process-dot-border-color | @brand-color | -
+--td-step-item-process-icon-color | @brand-color | -
+--td-step-item-process-title-color | @brand-color | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/props.d.ts
new file mode 100644
index 0000000..806ffac
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/props.d.ts
@@ -0,0 +1,3 @@
+import { TdStepsProps } from './type';
+declare const props: TdStepsProps;
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/props.js
new file mode 100644
index 0000000..d7f4f7b
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/props.js
@@ -0,0 +1,37 @@
+const props = {
+ current: {
+ type: null,
+ value: null,
+ },
+ defaultCurrent: {
+ type: null,
+ },
+ currentStatus: {
+ type: String,
+ value: 'process',
+ },
+ externalClasses: {
+ type: Array,
+ },
+ layout: {
+ type: String,
+ value: 'horizontal',
+ },
+ readonly: {
+ type: Boolean,
+ value: false,
+ },
+ separator: {
+ type: String,
+ value: 'line',
+ },
+ sequence: {
+ type: String,
+ value: 'positive',
+ },
+ theme: {
+ type: String,
+ value: 'default',
+ },
+};
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.d.ts
new file mode 100644
index 0000000..ea035ba
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.d.ts
@@ -0,0 +1,22 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class Steps extends SuperComponent {
+ relations: RelationsOptions;
+ externalClasses: string[];
+ properties: import("./type").TdStepsProps;
+ controlledProps: {
+ key: string;
+ event: string;
+ }[];
+ data: {
+ prefix: string;
+ classPrefix: string;
+ };
+ observers: {
+ current(): void;
+ };
+ methods: {
+ updateChildren(): void;
+ updateLastChid(): void;
+ handleClick(index: any): void;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.js
new file mode 100644
index 0000000..8bb7090
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.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 { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-steps`;
+let Steps = class Steps extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.relations = {
+ '../step-item/step-item': {
+ type: 'child',
+ linked(child) {
+ this.updateChildren();
+ const { readonly } = this.data;
+ child.setData({
+ readonly,
+ });
+ },
+ unlinked() {
+ this.updateLastChid();
+ },
+ },
+ };
+ this.externalClasses = [`${prefix}-class`];
+ this.properties = props;
+ this.controlledProps = [
+ {
+ key: 'current',
+ event: 'change',
+ },
+ ];
+ this.data = {
+ prefix,
+ classPrefix: name,
+ };
+ this.observers = {
+ current() {
+ this.updateChildren();
+ },
+ };
+ this.methods = {
+ updateChildren() {
+ const items = this.$children;
+ items.forEach((item, index) => {
+ item.updateStatus(Object.assign({ index, items }, this.data));
+ });
+ },
+ updateLastChid() {
+ const items = this.$children;
+ items.forEach((child, index) => child.setData({ isLastChild: index === items.length - 1 }));
+ },
+ handleClick(index) {
+ if (!this.data.readonly) {
+ const preIndex = this.data.current;
+ this._trigger('change', {
+ previous: preIndex,
+ current: index,
+ });
+ }
+ },
+ };
+ }
+};
+Steps = __decorate([
+ wxComponent()
+], Steps);
+export default Steps;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.json
new file mode 100644
index 0000000..137e603
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.json
@@ -0,0 +1,6 @@
+{
+ "component": true,
+ "usingComponents": {
+ "t-step": "../step-item/step-item"
+ }
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.wxml
new file mode 100644
index 0000000..9a4ffeb
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/steps/steps.wxml
@@ -0,0 +1,8 @@
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-sticky": "tdesign-miniprogram/sticky/sticky"
+}
+```
+
+## 代码演示
+
+将内容包裹在 `Sticky` 组件内
+
+
+
+### 基础吸顶
+
+{{ base }}
+
+
+### 吸顶距离
+
+{{ offset }}
+
+### 指定容器
+
+{{ container }}
+
+
+
+## API
+### Sticky Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+container | Function | - | 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。 | N
+disabled | Boolean | false | 是否禁用组件 | N
+offset-top | String / Number | 0 | 吸顶时与顶部的距离，单位`px` | N
+z-index | Number | 99 | 吸顶时的 z-index | N
+
+### Sticky Events
+
+名称 | 参数 | 描述
+-- | -- | --
+scroll | `(detail: { scrollTop: number, isFixed: boolean })` | 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶
+
+### Sticky 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/index.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/index.d.ts
new file mode 100644
index 0000000..69d0695
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/index.d.ts
@@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './sticky';
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/index.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/index.js
new file mode 100644
index 0000000..69d0695
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/index.js
@@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './sticky';
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/props.d.ts
new file mode 100644
index 0000000..f496c81
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/props.d.ts
@@ -0,0 +1,3 @@
+import { TdStickyProps } from './type';
+declare const props: TdStickyProps;
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/props.js
new file mode 100644
index 0000000..3d1cb4a
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/props.js
@@ -0,0 +1,21 @@
+const props = {
+ container: {
+ type: null,
+ },
+ disabled: {
+ type: Boolean,
+ value: false,
+ },
+ externalClasses: {
+ type: Array,
+ },
+ offsetTop: {
+ type: Number,
+ value: 0,
+ },
+ zIndex: {
+ type: Number,
+ value: 99,
+ },
+};
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/sticky.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/sticky.d.ts
new file mode 100644
index 0000000..6da309a
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/sticky.d.ts
@@ -0,0 +1,30 @@
+import { SuperComponent } from '../common/src/index';
+import type { TdStickyProps } from './type';
+export interface StickyProps extends TdStickyProps {
+}
+export default class Sticky extends SuperComponent {
+ externalClasses: string[];
+ properties: TdStickyProps;
+ behaviors: string[];
+ observers: {
+ 'offsetTop, disabled, container'(): void;
+ };
+ data: {
+ prefix: string;
+ classPrefix: string;
+ containerStyle: string;
+ contentStyle: string;
+ };
+ ready(): void;
+ methods: {
+ onScroll(event?: {
+ scrollTop: number;
+ }): void;
+ setDataAfterDiff(data: {
+ isFixed: boolean;
+ height?: number;
+ transform?: number;
+ }): void;
+ getContainerRect(): Promise`type SwipeSource = 'left' \| 'right'`
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/README.md new file mode 100644 index 0000000..353275d --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/README.md @@ -0,0 +1,51 @@ +--- +title: SwipeCell 滑动操作 +description: 用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。 +spline: message +isComponent: true +--- + +
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell"
+}
+```
+
+### 组件类型
+
+左滑单操作
+
+{{ left }}
+
+右滑单操作
+
+{{ right }}
+
+左右滑操作
+
+{{ double }}
+
+带图标的滑动操作
+
+{{ icon }}
+
+## API
+### SwipeCell Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+disabled | Boolean | - | 是否禁用滑动 | N
+opened | Boolean / Array | false | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean \| Array`type SwipeSource = 'left' \| 'right'`
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/props.d.ts new file mode 100644 index 0000000..fa4ce5f --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/props.d.ts @@ -0,0 +1,3 @@ +import { TdSwipeCellProps } from './type'; +declare const props: TdSwipeCellProps; +export default props; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/props.js new file mode 100644 index 0000000..8f3fd2e --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/props.js @@ -0,0 +1,17 @@ +const props = { + disabled: { + type: Boolean, + }, + left: { + type: Array, + }, + opened: { + type: Boolean, + optionalTypes: [Array], + value: false, + }, + right: { + type: Array, + }, +}; +export default props; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.d.ts new file mode 100644 index 0000000..8457c22 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.d.ts @@ -0,0 +1,28 @@ +import { SuperComponent } from '../common/src/index'; +export default class SwiperCell extends SuperComponent { + externalClasses: string[]; + options: { + multipleSlots: boolean; + }; + properties: import("./type").TdSwipeCellProps; + data: { + prefix: string; + wrapperStyle: string; + closed: boolean; + classPrefix: string; + }; + observers: { + 'left, right'(): void; + }; + lifetimes: { + attached(): void; + ready(): void; + detached(): void; + }; + setSwipeWidth(): void; + open(): void; + close(): void; + closeOther(): void; + onTap(): void; + onActionTap(event: any): void; +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.js new file mode 100644 index 0000000..8b9c02a --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.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 props from './props'; +import { getRect } from '../common/utils'; +import { getObserver } from '../common/wechat'; +let ARRAY = []; +const { prefix } = config; +const name = `${prefix}-swipe-cell`; +const ContainerClass = `.${name}`; +let SwiperCell = class SwiperCell extends SuperComponent { + constructor() { + super(...arguments); + this.externalClasses = [`${prefix}-class`]; + this.options = { + multipleSlots: true, + }; + this.properties = props; + this.data = { + prefix, + wrapperStyle: '', + closed: true, + classPrefix: name, + }; + this.observers = { + 'left, right'() { + this.setSwipeWidth(); + }, + }; + this.lifetimes = { + attached() { + ARRAY.push(this); + }, + ready() { + this.setSwipeWidth(); + }, + detached() { + ARRAY = ARRAY.filter((item) => item !== this); + }, + }; + } + setSwipeWidth() { + Promise.all([getRect(this, `${ContainerClass}__left`), getRect(this, `${ContainerClass}__right`)]).then(([leftRect, rightRect]) => { + if (leftRect.width === 0 && rightRect.width === 0 && !this._hasObserved) { + this._hasObserved = true; + getObserver(this, `.${name}`).then(() => { + this.setSwipeWidth(); + }); + } + this.setData({ + leftWidth: leftRect.width, + rightWidth: rightRect.width, + }); + }); + } + open() { + this.setData({ opened: true }); + } + close() { + this.setData({ opened: false }); + } + closeOther() { + ARRAY.filter((item) => item !== this).forEach((item) => item.close()); + } + onTap() { + this.close(); + } + onActionTap(event) { + const { currentTarget: { dataset: { action }, }, } = event; + this.triggerEvent('click', action); + } +}; +SwiperCell = __decorate([ + wxComponent() +], SwiperCell); +export default SwiperCell; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.json new file mode 100644 index 0000000..2e06b99 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.wxml new file mode 100644 index 0000000..c5d46ed --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.wxml @@ -0,0 +1,60 @@ +
`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`
+click | `(index: number)` | `0.34.0` + +### SwiperNav Props + +name | type | default | description | required +-- | -- | -- | -- | -- +current | Number | 0 | `0.34.0` | N +direction | String | horizontal | `0.34.0`。options：horizontal/vertical | N +min-show-num | Number | 2 | \- | N +pagination-position | String | bottom | `0.34.0`。options：top-left/top/top-right/bottom-left/bottom/bottom-right | N +show-controls | Boolean | false | `0.32.0` | N +total | Number | 0 | `0.34.0` | N +type | String | dots | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N + + +### CSS Variables +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-swiper-item-padding | 0 | - +--td-swiper-radius | @radius-large | - +--td-swiper-nav-btn-bg-color | @font-gray-3 | - +--td-swiper-nav-btn-color | @font-white-1 | - +--td-swiper-nav-btn-size | 48rpx | - +--td-swiper-nav-dot-active-color | @font-white-1 | - +--td-swiper-nav-dot-color | @font-white-2 | - +--td-swiper-nav-dot-size | 12rpx | - +--td-swiper-nav-dots-bar-active-width | 40rpx | - +--td-swiper-nav-fraction-bg-color | @font-gray-3 | - +--td-swiper-nav-fraction-color | @font-white-1 | - +--td-swiper-nav-fraction-font-size | 24rpx | - +--td-swiper-nav-fraction-height | 48rpx | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/README.md new file mode 100644 index 0000000..cf14c5f --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/README.md @@ -0,0 +1,132 @@ +--- +title: Swiper 轮播图 +description: 用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置。 +spline: message +isComponent: true +--- + +
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-swiper": "tdesign-miniprogram/swiper/swiper",
+ "t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav",
+}
+```
+
+### 组件说明
+
+从 `0.32.0` 版本开始，依赖原生 `swiper` 组件实现，移除了 `swiper-item` 组件，新增了 `list` 属性；
+
+## 代码演示
+
+多种轮播样式，通过 `navigation` 设置导航样式，没有值则不显示，也可以自定义 `nav` 组件
+
+
+
+### 组件类型
+
+#### 点状（dots）轮播图
+
+{{ base }}
+
+#### 点条状（dots-bar）轮播图
+
+{{ custom }}
+
+#### 分式（fraction）导航器轮播图
+
+{{ fraction }}
+
+#### 切换按钮（controls）轮播图
+
+{{ nav-btn }}
+
+#### 卡片式（cards）轮播图
+
+{{ cards }}
+
+### 组件样式
+
+#### 垂直模式
+
+{{ vertical }}
+
+## API
+### Swiper Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+autoplay | Boolean | true | 是否自动播放 | N
+current | Number | 0 | 当前轮播在哪一项（下标） | N
+direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
+display-multiple-items | Number | 1 | `0.32.0`。同时显示的滑块数量 | N
+duration | Number | 300 | 滑动动画时长 | N
+easing-function | String | default | `0.32.0`。指定 swiper 切换缓动动画类型。可选项：default/linear/easeInCubic/easeOutCubic/easeInOutCubic | N
+height | String / Number | 192 | 轮播的高度；默认单位 `px` | N
+image-props | Object | - | `0.34.0`。透传至 Image 组件 | N
+interval | Number | 5000 | 轮播间隔时间 | N
+list | Array | - | `0.32.0`。图片列表。TS 类型：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
+loop | Boolean | true | 是否循环播放 | N
+navigation | Boolean / Object / Slot | true | 导航器全部配置，true 的话使用默认配置。TS 类型：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
+next-margin | String / Number | 0 | `0.32.0`。后边距，可用于露出后一项的一小部分。默认单位 `px` | N
+pagination-position | String | bottom | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right | N
+previous-margin | String / Number | 0 | `0.32.0`。前边距，可用于露出前一项的一小部分。默认单位 `px` | N
+snap-to-edge | Boolean | false | `0.32.0`。当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素 | N
+
+### Swiper Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(current: number, source: SwiperChangeSource)` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`
+click | `(index: number)` | `0.34.0`。点击轮播项时触发 +image-load | `(index: number)` | `1.1.4`。图片加载时触发 + +### Swiper 外部样式类 + +类名 | 说明 +-- | -- +t-class | 根节点样式类 +t-class-nav | 导航样式类 +t-class-image | 当前图片样式类 +t-class-prev-image | 上一图片样式类 +t-class-next-image | 下一图片样式类 + +### SwiperNav Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +current | Number | 0 | `0.34.0`。当前轮播在哪一项（下标） | N +direction | String | horizontal | `0.34.0`。轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N +min-show-num | Number | 2 | 小于这个数字不会显示导航器 | N +pagination-position | String | bottom | `0.34.0`。页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right | N +show-controls | Boolean | false | `0.32.0`。是否显示两侧的控制按钮 | N +total | Number | 0 | `0.34.0`。总共的项数 | N +type | String | dots | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N + +### SwiperNav 外部样式类 + +类名 | 说明 +-- | -- +t-class | 根节点样式类 + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-swiper-item-padding | 0 | - +--td-swiper-radius | @radius-large | - +--td-swiper-nav-btn-bg-color | @font-gray-3 | - +--td-swiper-nav-btn-color | @font-white-1 | - +--td-swiper-nav-btn-size | 48rpx | - +--td-swiper-nav-dot-active-color | @font-white-1 | - +--td-swiper-nav-dot-color | @font-white-2 | - +--td-swiper-nav-dot-size | 12rpx | - +--td-swiper-nav-dots-bar-active-width | 40rpx | - +--td-swiper-nav-fraction-bg-color | @font-gray-3 | - +--td-swiper-nav-fraction-color | @font-white-1 | - +--td-swiper-nav-fraction-font-size | 24rpx | - +--td-swiper-nav-fraction-height | 48rpx | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/index.wxs b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/index.wxs new file mode 100644 index 0000000..e357e72 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/index.wxs @@ -0,0 +1,25 @@ +function isPrev(current, index, list) { + return (current - 1 + list.length) % list.length === index; +} + +function isNext(current, index, list) { + return (current + 1 + list.length) % list.length === index; +} + +function getImageClass(prefix, current, index, list) { + var arr = [prefix + '-swiper__image', prefix + '-class-image']; + + if (isPrev(current, index, list)) { + arr.push(prefix + '-class-prev-image') + } + + if (isNext(current, index, list)) { + arr.push(prefix + '-class-next-image') + } + + return arr.join(' '); +} + +module.exports.isPrev = isPrev; +module.exports.isNext = isNext; +module.exports.getImageClass = getImageClass; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/props.d.ts new file mode 100644 index 0000000..82b480c --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/props.d.ts @@ -0,0 +1,3 @@ +import { TdSwiperProps } from './type'; +declare const props: TdSwiperProps; +export default props; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/props.js new file mode 100644 index 0000000..0c29523 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/props.js @@ -0,0 +1,65 @@ +const props = { + autoplay: { + type: Boolean, + value: true, + }, + current: { + type: Number, + value: 0, + }, + direction: { + type: String, + value: 'horizontal', + }, + displayMultipleItems: { + type: Number, + value: 1, + }, + duration: { + type: Number, + value: 300, + }, + easingFunction: { + type: String, + value: 'default', + }, + height: { + type: null, + value: 192, + }, + imageProps: { + type: Object, + }, + interval: { + type: Number, + value: 5000, + }, + list: { + type: Array, + }, + loop: { + type: Boolean, + value: true, + }, + navigation: { + type: null, + value: true, + }, + nextMargin: { + type: null, + value: 0, + }, + paginationPosition: { + type: String, + value: 'bottom', + }, + previousMargin: { + type: null, + value: 0, + }, + snapToEdge: { + type: Boolean, + value: false, + }, +}; +export default props; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.d.ts new file mode 100644 index 0000000..ac48130 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.d.ts @@ -0,0 +1,28 @@ +import { SuperComponent, RelationsOptions } from '../common/src/index'; +export default class Swiper extends SuperComponent { + externalClasses: string[]; + options: { + multipleSlots: boolean; + }; + properties: import("./type").TdSwiperProps; + observers: { + navCurrent(v: any): void; + }; + $nav: any; + relations: RelationsOptions; + data: { + prefix: string; + classPrefix: string; + }; + lifetimes: { + ready(): void; + }; + methods: { + updateNav(currentValue: any): void; + onTap(e: any): void; + onChange(e: any): void; + onNavBtnChange(e: any): void; + doNavBtnChange(dir: any, source: any): void; + onImageLoad(e: any): void; + }; +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.js new file mode 100644 index 0000000..fab42b9 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.js @@ -0,0 +1,104 @@ +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'; +const { prefix } = config; +const name = `${prefix}-swiper`; +let Swiper = class Swiper extends SuperComponent { + constructor() { + super(...arguments); + this.externalClasses = [ + `${prefix}-class`, + `${prefix}-class-nav`, + `${prefix}-class-image`, + `${prefix}-class-prev-image`, + `${prefix}-class-next-image`, + ]; + this.options = { + multipleSlots: true, + }; + this.properties = props; + this.observers = { + navCurrent(v) { + this.updateNav(v); + }, + }; + this.$nav = null; + this.relations = { + '../swiper-nav/swiper-nav': { + type: 'child', + }, + }; + this.data = { + prefix, + classPrefix: name, + }; + this.lifetimes = { + ready() { + const { current } = this.properties; + this.setData({ navCurrent: current }); + }, + }; + this.methods = { + updateNav(currentValue) { + var _a; + if (this.data.navigation) + return; + const $nav = (_a = this.getRelationNodes('./swiper-nav')) === null || _a === void 0 ? void 0 : _a[0]; + if (!$nav) + return; + const { direction, paginationPosition, list } = this.properties; + $nav.setData({ + current: currentValue, + total: list.length, + direction, + paginationPosition, + }); + }, + onTap(e) { + const { index } = e.currentTarget.dataset; + this.triggerEvent('click', { index }); + }, + onChange(e) { + const { current, source } = e.detail; + this.setData({ + navCurrent: current, + }); + this.triggerEvent('change', { current, source }); + }, + onNavBtnChange(e) { + const { dir, source } = e.detail; + this.doNavBtnChange(dir, source); + }, + doNavBtnChange(dir, source) { + const { current, list, loop } = this.data; + const count = list.length; + let nextPos = dir === 'next' ? current + 1 : current - 1; + if (loop) { + nextPos = dir === 'next' ? (current + 1) % count : (current - 1 + count) % count; + } + else { + nextPos = nextPos < 0 || nextPos >= count ? current : nextPos; + } + if (nextPos === current) + return; + this.setData({ + current: nextPos, + }); + this.triggerEvent('change', { current: nextPos, source }); + }, + onImageLoad(e) { + this.triggerEvent('image-load', { index: e.target.dataset.custom }); + }, + }; + } +}; +Swiper = __decorate([ + wxComponent() +], Swiper); +export default Swiper; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.json new file mode 100644 index 0000000..552df46 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-swiper-nav": "../swiper-nav/swiper-nav", + "t-image": "../image/image" + } +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.wxml new file mode 100644 index 0000000..9b132cd --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/swiper/swiper.wxml @@ -0,0 +1,52 @@ +
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-switch": "tdesign-miniprogram/switch/switch"
+}
+```
+
+## 代码演示
+
+### 基础开关
+
+{{ base }}
+
+### 带描述开关
+
+{{ label }}
+
+### 自定义颜色
+
+{{ color }}
+
+### 开关状态
+
+{{ status }}
+
+### 尺寸
+
+{{ size }}
+
+## API
+### Switch Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+custom-value | Array | [true, false] | 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']。TS 类型：`Array
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
+ "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
+}
+```
+
+## 代码演示
+
+### 组件类型
+#### 纯文本标签栏
+
+{{ text-only }}
+
+#### 图标加文字标签栏
+
+{{ base }}
+
+#### 纯图标标签栏
+
+{{ icon-only }}
+
+#### 双层级纯文本标签栏
+
+{{ sub }}
+
+### 组件样式
+
+#### 弱选中标签栏
+
+{{ badge }}
+
+#### 悬浮胶囊标签栏
+
+{{ round }}
+
+#### 自定义主题
+
+{{ custom }}
+
+## API
+### TabBar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+bordered | Boolean | true | 是否显示外边框 | N
+fixed | Boolean | true | 是否固定在底部 | N
+safe-area-inset-bottom | Boolean | true | 是否为 iPhoneX 留出底部安全距离 | N
+shape | String | normal | 标签栏的形状。可选项：normal/round | N
+split | Boolean | true | 是否需要分割线 | N
+theme | String | normal | 选项风格。可选项：normal/tag | N
+value | String / Number / Array | null | 当前选中标签的索引。TS 类型：`string \| number \| Array
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-tabs": "tdesign-miniprogram/tabs/tabs",
+ "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel"
+}
+```
+
+## 代码演示
+
+### 基础选项卡
+
+{{ base }}
+
+### 等距选项卡
+
+{{ scroll }}
+
+### 带图标选项卡
+
+{{ with-icon }}
+
+### 带徽章选项卡
+
+{{ with-badge }}
+
+### 带内容区选项卡
+
+{{ with-content }}
+
+### 选项卡状态
+
+{{ status }}
+
+### 选项卡尺寸
+
+{{ size }}
+
+### 选项卡样式
+
+使用 theme 属性可以变换风格，支持 line = 线条（默认）；tag = 标签；card = 卡片
+
+{{ theme }}
+
+
+
+
+
+
+### 受控用法
+
+```html
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-tag": "tdesign-miniprogram/tag/tag",
+ "t-check-tag": "tdesign-miniprogram/check-tag/check-tag"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+{{ type }}
+
+可关闭的标签
+
+{{ closable }}
+
+可点击的标签
+
+{{ checkable }}
+
+### 组件状态
+
+展示型标签
+
+{{ theme }}
+
+### 组件尺寸
+
+{{ size }}
+
+
+## API
+### Tag Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+closable | Boolean / Object / Slot | false | 标签是否可关闭。 | N
+disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
+icon | String / Object / Slot | - | 标签中的图标，可自定义图标呈现 | N
+max-width | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 | N
+shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
+size | String | medium | 标签尺寸。可选项：small/medium/large/extra-large。TS 类型：`SizeEnum` | N
+theme | String | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success | N
+variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N
+
+### Tag Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | - | 点击时触发
+close | - | 如果关闭按钮存在，点击关闭按钮时触发
+
+### Tag 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+
+### CheckTag Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态 | N
+default-checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
+closable | Boolean | false | 已废弃。标签是否可关闭 | N
+content | String / Number / Array / Slot | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[]` | N
+disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
+icon | String / Object / Slot | - | 标签图标 | N
+shape | String | square | 已废弃。标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
+size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N
+variant | String | dark | `0.26.0`。标签风格变体。可选项：dark/light/outline/light-outline | N
+
+### CheckTag Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(checked: boolean)` | 状态切换时触发
+click | - | 点击标签时触发
+
+### CheckTag 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-tag-close-icon-color | @font-gray-3 | -
+--td-tag-danger-color | @error-color | -
+--td-tag-danger-light-color | @error-color-1 | -
+--td-tag-default-color | @bg-color-component | -
+--td-tag-default-font-color | @font-gray-1 | -
+--td-tag-default-light-color | @bg-color-secondarycontainer | -
+--td-tag-disabled-background-color | @bg-color-component-disabled | -
+--td-tag-disabled-border-color | @component-border | -
+--td-tag-disabled-color | @font-gray-4 | -
+--td-tag-extra-large-font-size | @font-size-base | -
+--td-tag-extra-large-height | 80rpx | -
+--td-tag-extra-large-icon-size | 32rpx | -
+--td-tag-extra-large-padding | 32rpx - 1px | -
+--td-tag-large-font-size | @font-size-base | -
+--td-tag-large-height | 56rpx | -
+--td-tag-large-icon-size | 32rpx | -
+--td-tag-large-padding | 16rpx - 1px | -
+--td-tag-mark-border-radius | @tag-round-border-radius | -
+--td-tag-medium-font-size | @font-size-s | -
+--td-tag-medium-height | 48rpx | -
+--td-tag-medium-icon-size | 28rpx | -
+--td-tag-medium-padding | 16rpx - 1px | -
+--td-tag-outline-bg-color | @bg-color-container | -
+--td-tag-primary-color | @brand-color | -
+--td-tag-primary-light-color | @brand-color-light | -
+--td-tag-round-border-radius | 999px | -
+--td-tag-small-font-size | @font-size | -
+--td-tag-small-height | 40rpx | -
+--td-tag-small-icon-size | 24rpx | -
+--td-tag-small-padding | 12rpx - 1px | -
+--td-tag-square-border-radius | 8rpx | -
+--td-tag-success-color | @success-color | -
+--td-tag-success-light-color | @success-color-1 | -
+--td-tag-warning-color | @warning-color | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/tag/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/tag/props.d.ts
new file mode 100644
index 0000000..bddc527
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tag/props.d.ts
@@ -0,0 +1,3 @@
+import { TdTagProps } from './type';
+declare const props: TdTagProps;
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/tag/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/tag/props.js
new file mode 100644
index 0000000..aefa2ce
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tag/props.js
@@ -0,0 +1,36 @@
+const props = {
+ closable: {
+ type: null,
+ value: false,
+ },
+ disabled: {
+ type: Boolean,
+ value: false,
+ },
+ externalClasses: {
+ type: Array,
+ },
+ icon: {
+ type: null,
+ },
+ maxWidth: {
+ type: null,
+ },
+ shape: {
+ type: String,
+ value: 'square',
+ },
+ size: {
+ type: String,
+ value: 'medium',
+ },
+ theme: {
+ type: String,
+ value: 'default',
+ },
+ variant: {
+ type: String,
+ value: 'dark',
+ },
+};
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/tag/tag.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/tag/tag.d.ts
new file mode 100644
index 0000000..2b9360a
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tag/tag.d.ts
@@ -0,0 +1,28 @@
+///
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-textarea": "tdesign-miniprogram/textarea/textarea"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+基础多行文本框
+
+{{ base }}
+
+带标题多行文本框
+
+{{ label }}
+
+自动增高多行文本框
+
+{{ autosize }}
+
+设置最大字符个数
+
+{{ maxlength }}
+
+设置最大字符个数，一个汉字表示两个字符
+
+{{ maxcharacter }}
+
+### 组件状态
+
+禁用多行文本框
+
+{{ disabled }}
+
+### 自定义组件样式
+
+标签外置输入框
+
+{{ custom }}
+
+## 提示
+
+- 如果需要在页面中调整 `textarea` 中 `placeholder` 样式，请使用名称为`t-textarea__placeholder`的Class选择器，直接覆盖组件内部样式（注意权重）。
+
+## API
+
+### Textarea Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
+autofocus | Boolean | false | 自动聚焦，拉起键盘 | N
+autosize | Boolean / Object | false | 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 } | N
+confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起点 | N
+confirm-type | String | return | 设置键盘右下角按钮的文字，仅在 type='text'时生效。可选项：return/send/search/next/go/done。TS 类型：`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N
+cursor-spacing | Number | 0 | 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | N
+disabled | Boolean | false | 是否禁用文本框 | N
+focus | Boolean | false | 自动聚焦 | N
+label | String / Slot | - | 左侧文本 | N
+maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N
+maxlength | Number | -1 | 用户最多可以输入的字符个数。默认为 -1，不限制输入长度 | N
+indicator | Boolean | false | 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 | N
+placeholder | String | undefined | 占位符 | N
+placeholderStyle | String | '' | 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight | N
+value | String | null | 文本框值 | N
+default-value | String | '' | 文本框值。非受控属性 | N
+fixed | Boolean | false | 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | N
+bordered | Boolean | false | 是否显示外边框 | N
+cursor | Number | -1 | 指定 focus 时的光标位置 | N
+disable-default-padding | Boolean | false | 是否去掉 iOS 下的默认内边距 | N
+show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | N
+selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N
+selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N
+hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N
+
+### Textarea Events
+
+名称 | 参数 | 描述
+-- | -- | --
+blur | `(value: TextareaValue, cursor: number)` | 失去焦点时触发
+change | `(value: TextareaValue, cursor: number)` | 输入内容变化时触发
+enter | `(value: TextareaValue)` | 点击完成时触发
+focus | `(value: TextareaValue)` | 获得焦点时触发
+line-change | `(value: TextareaValue)` | 行高发生变化时触发
+keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件
+
+### Textarea 外部样式类
+
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-textarea | 占位符样式类
+t-class-label | 左侧文本样式类
+t-class-indicator | 计数器样式类
+
+### CSS 变量
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-textarea-background-color | @bg-color-container | -
+--td-textarea-border-color | rgba(220, 220, 220, 1) | -
+--td-textarea-border-radius | @radius-default | -
+--td-textarea-disabled-text-color | @font-gray-4 | -
+--td-textarea-indicator-text-color | @font-gray-3 | -
+--td-textarea-label-color | @font-gray-1 | -
+--td-textarea-placeholder-color | @font-gray-3 | -
+--td-textarea-text-color | @font-gray-1 | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/props.d.ts
new file mode 100644
index 0000000..2f3bb08
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/props.d.ts
@@ -0,0 +1,3 @@
+import { TdTextareaProps } from './type';
+declare const props: TdTextareaProps;
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/props.js
new file mode 100644
index 0000000..efd3bef
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/props.js
@@ -0,0 +1,100 @@
+const props = {
+ adjustPosition: {
+ type: Boolean,
+ value: true,
+ },
+ autofocus: {
+ type: Boolean,
+ value: false,
+ },
+ autosize: {
+ type: null,
+ value: false,
+ },
+ confirmHold: {
+ type: Boolean,
+ value: false,
+ },
+ confirmType: {
+ type: String,
+ value: 'return',
+ },
+ cursorSpacing: {
+ type: Number,
+ value: 0,
+ },
+ disabled: {
+ type: Boolean,
+ value: false,
+ },
+ externalClasses: {
+ type: Array,
+ },
+ focus: {
+ type: Boolean,
+ value: false,
+ },
+ label: {
+ type: String,
+ },
+ fixed: {
+ type: Boolean,
+ value: false,
+ },
+ maxcharacter: {
+ type: Number,
+ },
+ maxlength: {
+ type: Number,
+ value: -1,
+ },
+ placeholder: {
+ type: String,
+ value: undefined,
+ },
+ placeholderStyle: {
+ type: String,
+ value: '',
+ },
+ value: {
+ type: String,
+ value: null,
+ },
+ defaultValue: {
+ type: String,
+ value: '',
+ },
+ bordered: {
+ type: Boolean,
+ value: false,
+ },
+ indicator: {
+ type: Boolean,
+ value: false,
+ },
+ cursor: {
+ type: Number,
+ value: -1,
+ },
+ showConfirmBar: {
+ type: Boolean,
+ value: true,
+ },
+ selectionStart: {
+ type: Number,
+ value: -1,
+ },
+ selectionEnd: {
+ type: Number,
+ value: -1,
+ },
+ disableDefaultPadding: {
+ type: Boolean,
+ value: false,
+ },
+ holdKeyboard: {
+ type: Boolean,
+ value: false,
+ },
+};
+export default props;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.d.ts
new file mode 100644
index 0000000..ba9880c
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.d.ts
@@ -0,0 +1,34 @@
+import { SuperComponent } from '../common/src/index';
+export default class Textarea extends SuperComponent {
+ options: {
+ multipleSlots: boolean;
+ };
+ behaviors: string[];
+ externalClasses: string[];
+ properties: import("./type").TdTextareaProps;
+ data: {
+ prefix: string;
+ classPrefix: string;
+ count: number;
+ };
+ observers: {
+ value(val: any): void;
+ };
+ lifetimes: {
+ ready(): void;
+ };
+ methods: {
+ updateCount(val: any): void;
+ updateValue(val: any): void;
+ calculateValue(value: any, maxcharacter: any, maxlength: any): {
+ value: any;
+ count: number;
+ };
+ onInput(event: any): void;
+ onFocus(event: any): void;
+ onBlur(event: any): void;
+ onConfirm(event: any): void;
+ onLineChange(event: any): void;
+ onKeyboardHeightChange(e: any): void;
+ };
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.js
new file mode 100644
index 0000000..0f95594
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.js
@@ -0,0 +1,105 @@
+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 { getCharacterLength } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-textarea`;
+let Textarea = class Textarea extends SuperComponent {
+ constructor() {
+ super(...arguments);
+ this.options = {
+ multipleSlots: true,
+ };
+ this.behaviors = ['wx://form-field'];
+ this.externalClasses = [
+ `${prefix}-class`,
+ `${prefix}-class-textarea`,
+ `${prefix}-class-label`,
+ `${prefix}-class-indicator`,
+ ];
+ this.properties = props;
+ this.data = {
+ prefix,
+ classPrefix: name,
+ count: 0,
+ };
+ this.observers = {
+ value(val) {
+ this.updateCount(val);
+ },
+ };
+ this.lifetimes = {
+ ready() {
+ const { value } = this.properties;
+ this.updateValue(value == null ? '' : value);
+ },
+ };
+ this.methods = {
+ updateCount(val) {
+ const { maxcharacter, maxlength } = this.properties;
+ const { count } = this.calculateValue(val, maxcharacter, maxlength);
+ this.setData({
+ count,
+ });
+ },
+ updateValue(val) {
+ const { maxcharacter, maxlength } = this.properties;
+ const { value, count } = this.calculateValue(val, maxcharacter, maxlength);
+ this.setData({
+ value,
+ count,
+ });
+ },
+ calculateValue(value, maxcharacter, maxlength) {
+ if (maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
+ const { length, characters } = getCharacterLength('maxcharacter', value, maxcharacter);
+ return {
+ value: characters,
+ count: length,
+ };
+ }
+ if (maxlength > 0 && !Number.isNaN(maxlength)) {
+ const { length, characters } = getCharacterLength('maxlength', value, maxlength);
+ return {
+ value: characters,
+ count: length,
+ };
+ }
+ return {
+ value,
+ count: value ? String(value).length : 0,
+ };
+ },
+ onInput(event) {
+ const { value, cursor } = event.detail;
+ this.updateValue(value);
+ this.triggerEvent('change', { value: this.data.value, cursor });
+ },
+ onFocus(event) {
+ this.triggerEvent('focus', Object.assign({}, event.detail));
+ },
+ onBlur(event) {
+ this.triggerEvent('blur', Object.assign({}, event.detail));
+ },
+ onConfirm(event) {
+ this.triggerEvent('enter', Object.assign({}, event.detail));
+ },
+ onLineChange(event) {
+ this.triggerEvent('line-change', Object.assign({}, event.detail));
+ },
+ onKeyboardHeightChange(e) {
+ this.triggerEvent('keyboardheightchange', e.detail);
+ },
+ };
+ }
+};
+Textarea = __decorate([
+ wxComponent()
+], Textarea);
+export default Textarea;
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.json b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.json
new file mode 100644
index 0000000..f719411
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.json
@@ -0,0 +1,4 @@
+{
+ "component": true,
+ "usingComponents": {}
+}
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.wxml b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.wxml
new file mode 100644
index 0000000..308a8ae
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.wxml
@@ -0,0 +1,50 @@
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-toast": "tdesign-miniprogram/toast/toast"
+}
+```
+
+## 代码演示
+
+### 基础提示
+
+{{ base }}
+
+### 组件状态
+
+{{ theme }}
+
+### 显示遮罩
+{{ cover }}
+
+### 手动关闭
+{{ close }}
+## API
+### Toast Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+direction | String | row | 图标排列方式。可选项：row/column | N
+duration | Number | 2000 | 弹窗显示毫秒数 | N
+external-classes | Array | - | 组件类名。`['t-class']` | N
+icon | String / Object / Slot | - | 自定义图标。传入对象则透传至 Icon 组件 | N
+message | String / Slot | - | 弹窗显示文字 | N
+overlay-props | Object | {} | 遮罩层属性，透传至 Overlay | N
+placement | String | middle | 弹窗展示位置。可选项： top/middle/bottom | N
+prevent-scroll-through | Boolean | false | 防止滚动穿透，即不允许点击和滚动 | N
+show-overlay | Boolean | false | 是否显示遮罩层 | N
+theme | String | - | 提示类型。可选项：loading/success/error | N
+
+### Toast Events
+
+名称 | 参数 | 描述
+-- | -- | --
+close | \- | 轻提示隐藏的时候触发
+destory | \- | 轻提示销毁的时候触发
+
+### Toast 外部样式类
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-toast-bg-color | @font-gray-2 | -
+--td-toast-color | @font-white-1 | -
+--td-toast-column-icon-size | 64rpx | -
+--td-toast-max-width | 374rpx | -
+--td-toast-radius | 8rpx | -
+--td-toast-row-icon-size | 48rpx | -
diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/toast/index.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/toast/index.d.ts
new file mode 100644
index 0000000..86816da
--- /dev/null
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/toast/index.d.ts
@@ -0,0 +1,22 @@
+/// `type TreeLevel: 0 \| 1 \| 2`
+ + +### CSS Variables +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-tree-bg-color | @bg-color-container | - +--td-tree-colum-width | 206rpx | - +--td-tree-item-active-color | @brand-color | - +--td-tree-item-font-size | 32rpx | - +--td-tree-item-height | 112rpx | - +--td-tree-root-bg-color | @bg-color-secondarycontainer | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/README.md new file mode 100644 index 0000000..9a0546b --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/README.md @@ -0,0 +1,71 @@ +--- +title: TreeSelect 树形选择 +description: 适用于选择树形的数据结构。 +spline: form +isComponent: true +--- + +
+
+ 该组件于 0.32.0 版本上线，请留意版本。
+
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-tree-select": "tdesign-miniprogram/tree-select/tree-select"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+#### 基础树形选择
+
+{{ base }}
+
+#### 多选树形选择
+
+{{ multiple }}
+
+### 组件状态
+
+#### 三级树形选择
+
+{{ normal }}
+
+## API
+### TreeSelect Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+height | String / Number | 336 | 高度，默认单位为 px | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | N
+multiple | Boolean | false | 是否多选 | N
+options | Array | [] | 选项。TS 类型：`Array`type TreeLevel: 0 \| 1 \| 2`
+ + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-tree-bg-color | @bg-color-container | - +--td-tree-colum-width | 206rpx | - +--td-tree-item-active-color | @brand-color | - +--td-tree-item-font-size | 32rpx | - +--td-tree-item-height | 112rpx | - +--td-tree-root-bg-color | @bg-color-secondarycontainer | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/index.wxs b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/index.wxs new file mode 100644 index 0000000..9e7a9ee --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/index.wxs @@ -0,0 +1,7 @@ +var getTreeClass = function (level, total) { + if (level === 0) return 'right'; + if (level === 1 && level !== total - 1) return 'middle'; + return 'left'; +}; + +module.exports.getTreeClass = getTreeClass; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/props.d.ts new file mode 100644 index 0000000..f75f025 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/props.d.ts @@ -0,0 +1,3 @@ +import { TdTreeSelectProps } from './type'; +declare const props: TdTreeSelectProps; +export default props; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/props.js new file mode 100644 index 0000000..fbd35ff --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/props.js @@ -0,0 +1,25 @@ +const props = { + height: { + type: null, + value: 336, + }, + keys: { + type: Object, + }, + multiple: { + type: Boolean, + value: false, + }, + options: { + type: Array, + value: [], + }, + value: { + type: null, + value: null, + }, + defaultValue: { + type: null, + }, +}; +export default props; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.d.ts new file mode 100644 index 0000000..da0d04f --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.d.ts @@ -0,0 +1,26 @@ +import { SuperComponent } from '../common/src/index'; +import type { TreeOptionData } from '../common/common'; +export default class TreeSelect extends SuperComponent { + externalClasses: string[]; + options: { + multipleSlots: boolean; + }; + data: { + prefix: string; + classPrefix: string; + }; + properties: import("./type").TdTreeSelectProps
`type MediaContext = VideoContext[] \| ImageContext[]`
`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`
`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
+complete | \- | \- +fail | \- | \- +remove | `(index: number; file: UploadFile)` | \- +select-change | `(currentSelectedFiles: MediaContext[])` | \- +success | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`
`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`
`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
+click | `(file: VideoContext \| ImageContext)` | - +drop | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`
`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`
`interface +ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
+ + +### CSS Variables +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-upload-add-bg-color | @bg-color-secondarycontainer | - +--td-upload-add-color | @font-gray-3 | - +--td-upload-add-disabled-bg-color | @bg-color-component-disabled | - +--td-upload-add-icon-disabled-color | @text-color-disabled | - +--td-upload-add-icon-font-size | 56rpx | - +--td-upload-disabled-mask | rgba(255, 255, 255, 0.55) | - +--td-upload-radius | @radius-default | - +--td-upload-drag-z-index | 999 | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/README.md b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/README.md new file mode 100644 index 0000000..dd985ac --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/README.md @@ -0,0 +1,102 @@ +--- +title: Upload 上传 +description: 用于相册读取或拉起拍照的图片上传功能。 +spline: form +isComponent: true +--- + +
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+ "t-upload": "tdesign-miniprogram/upload/upload",
+}
+```
+
+## 代码演示
+
+### 单选上传图片
+
+图片上传有两种方式：
+
+1 选择完所有图片之后，统一上传，因此选择完就直接展示
+
+2 每次选择图片都上传，展示每次上传图片的进度
+
+{{ single }}
+
+### 多选上传图片
+
+{{ multiple }}
+
+### 长按拖拽排序图片
+
+{{ drag }}
+
+### 加载状态
+
+支持多种状态：`loading`、`reload`、`failed`；
+
+其中 `loading` 还可以通过传入 `percent` 来区分是否展示进度。
+
+{{ status }}
+
+### 从聊天记录上选
+
+使用 `wx.chooseMessageFile` 实现，需要基础版本库 `2.5.0+`
+
+{{ messageFile }}
+
+## API
+### Upload Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+add-content | String / Slot | - | 添加按钮内容 | N
+allow-upload-duplicate-file | Boolean | false | 【开发中】是否允许重复上传相同文件名的文件 | N
+config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array`type MediaContext = VideoContext[] \| ImageContext[]`
`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`
`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
+complete | \- | 上传成功或失败后触发 +fail | \- | 上传失败后触发 +remove | `(index: number; file: UploadFile)` | 移除文件时触发 +select-change | `(files: MediaContext[]; currentSelectedFiles: MediaContext[])` | 选择文件或图片之后，上传之前，触发该事件。
`files` 表示之前已经上传完成的文件列表。
`currentSelectedFiles` 表示本次上传选中的文件列表 +success | `(files: MediaContext)` | 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`
`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`
`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
+click | `(file: VideoContext \| ImageContext)` | 点击已选文件时触发；常用于重新上传 +drop | `(files: MediaContext)` | 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`
`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`
`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
+ + +### CSS 变量 +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-upload-add-bg-color | @bg-color-secondarycontainer | - +--td-upload-add-color | @font-gray-3 | - +--td-upload-add-disabled-bg-color | @bg-color-component-disabled | - +--td-upload-add-icon-disabled-color | @text-color-disabled | - +--td-upload-add-icon-font-size | 56rpx | - +--td-upload-disabled-mask | rgba(255, 255, 255, 0.55) | - +--td-upload-radius | @radius-default | - +--td-upload-drag-z-index | 999 | - diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/drag.wxs b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/drag.wxs new file mode 100644 index 0000000..69648b4 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/drag.wxs @@ -0,0 +1,238 @@ +var classPrefix = ''; +var startIndex = 0; +var endIndex = 0; +var dragCollisionList = []; + +var isOutRange = function (x1, y1, x2, y2, x3, y3) { + return x1 < 0 || x1 >= y1 || x2 < 0 || x2 >= y2 || x3 < 0 || x3 >= y3; +}; + +var sortCore = function (sKey, eKey, st) { + var _ = st.dragBaseData; + + var excludeFix = function (cKey, type) { + if (st.list[cKey].fixed) { + // fixed 元素位置不会变化, 这里直接用 cKey(sortKey) 获取, 更加快捷 + type ? --cKey : ++cKey; + return excludeFix(cKey, type); + } + return cKey; + }; + + // 先获取到 endKey 对应的 realKey, 防止下面排序过程中该 realKey 被修改 + var endRealKey = -1; + st.list.forEach(function (item) { + if (item.sortKey === eKey) endRealKey = item.realKey; + }); + + return st.list.map(function (item) { + if (item.fixed) return item; + var cKey = item.sortKey; + var rKey = item.realKey; + + if (sKey < eKey) { + // 正序拖动 + if (cKey > sKey && cKey <= eKey) { + --rKey; + cKey = excludeFix(--cKey, true); + } else if (cKey === sKey) { + rKey = endRealKey; + cKey = eKey; + } + } else if (sKey > eKey) { + // 倒序拖动 + if (cKey >= eKey && cKey < sKey) { + ++rKey; + cKey = excludeFix(++cKey, false); + } else if (cKey === sKey) { + rKey = endRealKey; + cKey = eKey; + } + } + + if (item.sortKey !== cKey) { + item.tranX = (cKey % _.columns) * 100 + '%'; + item.tranY = Math.floor(cKey / _.columns) * 100 + '%'; + item.sortKey = cKey; + item.realKey = rKey; + } + return item; + }); +}; + +var triggerCustomEvent = function (list, type, ins) { + var _list = [], + listData = []; + + list.forEach(function (item) { + _list[item.sortKey] = item; + }); + + _list.forEach(function (item) { + if (!item.extraNode) { + listData.push(item.data); + } + }); + + ins.triggerEvent(type, { listData: listData }); +}; + +var longPress = function (event, ownerInstance) { + var ins = event.instance; + var st = ownerInstance.getState(); + var _ = st.dragBaseData; + + var sTouch = event.changedTouches[0]; + if (!sTouch) return; + + st.cur = ins.getDataset().index; + longPressIndex = st.cur; + + // 初始项是固定项则返回 + var item = st.list[st.cur]; + if (item && item.fixed) return; + + // 如果已经在 drag 中则返回, 防止多指触发 drag 动作, touchstart 事件中有效果 + if (st.dragging) return; + st.dragging = true; + ownerInstance.callMethod('dragStatusChange', { dragging: true }); + + // 计算X,Y轴初始位移, 使 item 中心移动到点击处, 单列时候X轴初始不做位移 + st.tranX = _.columns === 1 ? 0 : sTouch.pageX - (_.itemWidth / 2 + _.wrapLeft); + st.tranY = sTouch.pageY - (_.itemHeight / 2 + _.wrapTop); + st.sId = sTouch.identifier; + ins.setStyle({ + transform: 'translate3d(' + st.tranX + 'px, ' + st.tranY + 'px, 0)', + }); + st.itemsInstance.forEach(function (item, index) { + item.removeClass(classPrefix + '__drag--tran').removeClass(classPrefix + '__drag--cur'); + item.addClass(index === st.cur ? classPrefix + '__drag--cur' : classPrefix + '__drag--tran'); + }); + ownerInstance.callMethod('dragVibrate', { vibrateType: 'longPress' }); +}; + +var touchMove = function (event, ownerInstance) { + var ins = event.instance; + var st = ownerInstance.getState(); + var _ = st.dragBaseData; + + var mTouch = event.changedTouches[0]; + if (!mTouch) return; + + if (!st.dragging) return; + + // 如果不是同一个触发点则返回 + if (st.sId !== mTouch.identifier) return; + + // 计算X,Y轴位移, 单列时候X轴初始不做位移 + var tranX = _.columns === 1 ? 0 : mTouch.pageX - (_.itemWidth / 2 + _.wrapLeft); + var tranY = mTouch.pageY - (_.itemHeight / 2 + _.wrapTop); + + // 到顶到底自动滑动 + if (mTouch.clientY > _.windowHeight - _.itemHeight - _.realBottomSize) { + // 当前触摸点pageY + item高度 - (屏幕高度 - 底部固定区域高度) + ownerInstance.callMethod('pageScroll', { + scrollTop: mTouch.pageY + _.itemHeight - (_.windowHeight - _.realBottomSize), + }); + } else if (mTouch.clientY < _.itemHeight + _.realTopSize) { + // 当前触摸点pageY - item高度 - 顶部固定区域高度 + ownerInstance.callMethod('pageScroll', { + scrollTop: mTouch.pageY - _.itemHeight - _.realTopSize, + }); + } + + // 设置当前激活元素偏移量 + ins.setStyle({ + transform: 'translate3d(' + tranX + 'px, ' + tranY + 'px, 0)', + }); + + var startKey = st.list[st.cur].sortKey; + var curX = Math.round(tranX / _.itemWidth); + var curY = Math.round(tranY / _.itemHeight); + var endKey = curX + _.columns * curY; + + // 目标项是固定项则返回 + var item = st.list[endKey]; + if (item && item.fixed) return; + + // X轴或Y轴超出范围则返回 + if (isOutRange(curX, _.columns, curY, _.rows, endKey, st.list.length)) return; + + // 防止拖拽过程中发生乱序问题 + if (startKey === endKey || startKey === st.preStartKey) return; + st.preStartKey = startKey; + + dragCollisionList = sortCore(startKey, endKey, st); + startIndex = startKey; + endIndex = endKey; + st.itemsInstance.forEach(function (itemIns, index) { + var item = dragCollisionList[index]; + if (index !== st.cur) { + itemIns.setStyle({ + transform: 'translate3d(' + item.tranX + ',' + item.tranY + ', 0)', + }); + } + }); + + ownerInstance.callMethod('dragVibrate', { vibrateType: 'touchMove' }); + ownerInstance.callMethod('dragCollision', { + dragCollisionList: dragCollisionList, + startIndex: startIndex, + endIndex: endIndex, + }); + triggerCustomEvent(dragCollisionList, 'change', ownerInstance); +}; + +var touchEnd = function (event, ownerInstance) { + var ins = event.instance; + var st = ownerInstance.getState(); + + if (!st.dragging) return; + triggerCustomEvent(st.list, 'sortend', ownerInstance); + ins.addClass(classPrefix + '__drag--tran'); + ins.setStyle({ + transform: 'translate3d(' + st.list[st.cur].tranX + ',' + st.list[st.cur].tranY + ', 0)', + }); + st.preStartKey = -1; + st.dragging = false; + ownerInstance.callMethod('dragStatusChange', { dragging: false }); + ownerInstance.callMethod('dragEnd', { + dragCollisionList: dragCollisionList, + startIndex: startIndex, + endIndex: endIndex, + }); + st.cur = -1; + st.tranX = 0; + st.tranY = 0; +}; + +var baseDataObserver = function (newVal, oldVal, ownerInstance, ins) { + var st = ownerInstance.getState(); + st.dragBaseData = newVal; + classPrefix = newVal.classPrefix; +}; + +var listObserver = function (newVal, oldVal, ownerInstance, ins) { + var st = ownerInstance.getState(); + st.itemsInstance = ownerInstance.selectAllComponents('.' + classPrefix + '__drag-item'); + st.list = newVal || []; + st.list.forEach(function (item, index) { + var itemIns = st.itemsInstance[index]; + if (item && itemIns) { + itemIns.removeClass(classPrefix + '__drag--tran'); + itemIns.setStyle({ + transform: 'translate3d(' + item.tranX + ',' + item.tranY + ', 0)', + }); + if (item.fixed) itemIns.addClass(classPrefix + '__drag--fixed'); + } + }); + dragCollisionList = []; +}; + +module.exports = { + longPress: longPress, + touchMove: touchMove, + touchEnd: touchEnd, + baseDataObserver: baseDataObserver, + listObserver: listObserver, +}; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/props.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/props.d.ts new file mode 100644 index 0000000..a211557 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/props.d.ts @@ -0,0 +1,3 @@ +import { TdUploadProps } from './type'; +declare const props: TdUploadProps; +export default props; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/props.js b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/props.js new file mode 100644 index 0000000..9b7bd97 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/props.js @@ -0,0 +1,59 @@ +const props = { + addContent: { + type: String, + }, + allowUploadDuplicateFile: { + type: Boolean, + value: false, + }, + config: { + type: Object, + }, + disabled: { + type: Boolean, + value: false, + }, + files: { + type: Array, + value: null, + }, + defaultFiles: { + type: Array, + }, + gridConfig: { + type: Object, + }, + gutter: { + type: Number, + value: 16, + }, + imageProps: { + type: Object, + }, + max: { + type: Number, + value: 0, + }, + mediaType: { + type: Array, + value: ['image', 'video'], + }, + requestMethod: { + type: null, + }, + sizeLimit: { + type: null, + }, + source: { + type: String, + value: 'media', + }, + draggable: { + type: null, + }, + transition: { + type: Object, + value: { backTransition: true, duration: 300, timingFunction: 'ease' }, + }, +}; +export default props; diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/type.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/type.d.ts new file mode 100644 index 0000000..49cad32 --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/type.d.ts @@ -0,0 +1,120 @@ +import { ImageProps } from '../image/index'; +export interface TdUploadProps { + addContent?: { + type: StringConstructor; + value?: string; + }; + allowUploadDuplicateFile?: { + type: BooleanConstructor; + value?: boolean; + }; + config?: { + type: ObjectConstructor; + value?: UploadMpConfig; + }; + disabled?: { + type: BooleanConstructor; + value?: boolean; + }; + style?: { + type: StringConstructor; + value?: string; + }; + files?: { + type: ArrayConstructor; + value?: Array
`params.value` 表示之前已经上传完成的文件列表。
`params.currentSelectedFiles` 表示本次上传选中的文件列表", + "label": "" + }, + { + "key": "success", + "desc": "上传成功后触发，包含所有上传的文件；`context.url` 表示选定视频的临时文件路径 (本地路径)。`context.duration` 表示选定视频的时间长度。`context.size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述", + "label": "" + } + ] +} diff --git a/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/upload.d.ts b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/upload.d.ts new file mode 100644 index 0000000..ab8ea0d --- /dev/null +++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/upload/upload.d.ts @@ -0,0 +1,60 @@ +import { SuperComponent } from '../common/src/index'; +import { UploadFile } from './type'; +export default class Upload extends SuperComponent { + externalClasses: string[]; + options: { + multipleSlots: boolean; + }; + data: { + classPrefix: string; + prefix: string; + current: boolean; + proofs: any[]; + customFiles: UploadFile[]; + customLimit: number; + column: number; + dragBaseData: {}; + rows: number; + dragWrapStyle: string; + dragList: any[]; + dragging: boolean; + dragLayout: boolean; + }; + properties: import("./type").TdUploadProps; + controlledProps: { + key: string; + event: string; + }[]; + observers: { + 'files, max, draggable'(files: UploadFile, max: number): void; + gridConfig(): void; + }; + lifetimes: { + ready(): void; + }; + onProofTap(e: any): void; + handleLimit(customFiles: UploadFile[], max: number): void; + triggerSuccessEvent(files: any): void; + triggerFailEvent(err: any): void; + onFileClick(e: any): void; + getFileType(mediaType: string[], tempFilePath: string, fileType?: string): string; + getRandFileName(filePath: any): string; + onDelete(e: any): void; + deleteHandle(index: number): void; + updateGrid(): void; + initDragLayout(): void; + initDragList(): void; + initDragBaseData(): void; + methods: { + uploadFiles(files: UploadFile[]): Promise