bug fix and performance improvements

2023-08-18 17:32:18 +08:00
parent 3c6ab550cf
commit e750b9be9c
923 changed files with 46650 additions and 9 deletions
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/README.en-US.md
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/README.en-US.md
@ -0,0 +1,31 @@
+:: BASE_DOC ::
+
+## API
+### TreeSelect Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+height | String / Number | 336 | \- | N
+keys | Object | - | Typescript：`KeysType` | N
+multiple | Boolean | false | \- | N
+options | Array | [] | Typescript：`Array<DataOption>` | N
+value | String / Number / Array | - | Typescript：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts) | N
+default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts) | N
+
+### TreeSelect Events
+
+name | params | description
+-- | -- | --
+change | `(value: TreeSelectValue, level: TreeLevel) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。<br/>`type TreeLevel: 0 \| 1 \| 2`<br/>
+
+
+### 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 | - 
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/README.md
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/README.md
@ -0,0 +1,71 @@
+---
+title: TreeSelect 树形选择
+description: 适用于选择树形的数据结构。
+spline: form
+isComponent: true
+---
+
+<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
+    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
+  </svg>
+  该组件于 0.32.0 版本上线，请留意版本。
+</div>
+
+## 引入
+
+全局引入，在 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<DataOption>` | N
+value | String / Number / Array | - | 选中值。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts) | N
+default-value | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts) | N
+
+### TreeSelect Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: TreeSelectValue, level: TreeLevel) ` | 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。<br/>`type TreeLevel: 0 \| 1 \| 2`<br/>
+
+
+### 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 | - 
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/index.wxs
+++ 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;
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/props.d.ts
+++ 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;
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/props.js
+++ 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;
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.d.ts
+++ 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<TreeOptionData>;
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    observers: {
+        value(): void;
+    };
+    methods: {
+        buildTreeOptions(): void;
+        onRootChange(e: any): void;
+        handleTreeClick(e: any): void;
+        handleRadioChange(e: any): void;
+    };
+}
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.js
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.js
@ -0,0 +1,96 @@
+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}-tree-select`;
+let TreeSelect = class TreeSelect extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.data = {
+            prefix,
+            classPrefix: name,
+        };
+        this.properties = props;
+        this.controlledProps = [
+            {
+                key: 'value',
+                event: 'change',
+            },
+        ];
+        this.observers = {
+            value() {
+                this.buildTreeOptions();
+            },
+        };
+        this.methods = {
+            buildTreeOptions() {
+                const { options, value, multiple, keys } = this.data;
+                const treeOptions = [];
+                let level = -1;
+                let node = { children: options };
+                while (node && node.children) {
+                    level += 1;
+                    const list = node.children.map((item) => ({
+                        label: item[(keys === null || keys === void 0 ? void 0 : keys.label) || 'label'],
+                        value: item[(keys === null || keys === void 0 ? void 0 : keys.value) || 'value'],
+                        children: item.children,
+                    }));
+                    const thisValue = value === null || value === void 0 ? void 0 : value[level];
+                    treeOptions.push([...list]);
+                    if (thisValue == null) {
+                        const [firstChild] = list;
+                        node = firstChild;
+                    }
+                    else {
+                        const child = list.find((child) => child.value === thisValue);
+                        node = child !== null && child !== void 0 ? child : list[0];
+                    }
+                }
+                const leafLevel = Math.max(0, level);
+                if (multiple) {
+                    const finalValue = this.data.value || this.data.defaultValue;
+                    if (finalValue[leafLevel] != null && !Array.isArray(finalValue[leafLevel])) {
+                        throw TypeError('应传入数组类型的 value');
+                    }
+                }
+                this.setData({
+                    leafLevel,
+                    treeOptions,
+                });
+            },
+            onRootChange(e) {
+                const { value } = this.data;
+                const { value: itemValue } = e.detail;
+                value[0] = itemValue;
+                this._trigger('change', { value, level: 0 });
+            },
+            handleTreeClick(e) {
+                const { level, value: itemValue } = e.currentTarget.dataset;
+                const { value } = this.data;
+                value[level] = itemValue;
+                this._trigger('change', { value, level: 1 });
+            },
+            handleRadioChange(e) {
+                const { value } = this.data;
+                const { value: itemValue } = e.detail;
+                const { level } = e.target.dataset;
+                value[level] = itemValue;
+                this._trigger('change', { value, level });
+            },
+        };
+    }
+};
+TreeSelect = __decorate([
+    wxComponent()
+], TreeSelect);
+export default TreeSelect;
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.json
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.json
@ -0,0 +1,11 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-radio": "../radio/radio",
+    "t-radio-group": "../radio-group/radio-group",
+    "t-checkbox": "../checkbox/checkbox",
+    "t-checkbox-group": "../checkbox-group/checkbox-group",
+    "t-side-bar": "../side-bar/side-bar",
+    "t-side-bar-item": "../side-bar-item/side-bar-item"
+  }
+}
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.wxml
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.wxml
@ -0,0 +1,81 @@
+<wxs module="_" src="../common/utils.wxs" />
+<wxs module="this" src="./index.wxs" />
+
+<view class="{{classPrefix}} class" style="{{_._style(['height:' + _.addUnit(height) , style, customStyle])}}">
+  <scroll-view
+    scroll-y
+    enhanced
+    show-scrollbar="{{false}}"
+    class="{{_.cls(classPrefix + '__column', [this.getTreeClass(leafLevel - level, treeOptions.length)])}} {{prefix}}-class"
+    wx:for="{{treeOptions}}"
+    wx:key="level"
+    wx:for-index="level"
+  >
+    <t-side-bar
+      wx:if="{{level == 0}}"
+      value="{{value[level]}}"
+      bind:change="onRootChange"
+      t-class="{{classPrefix}}-column {{prefix}}-class-left-column"
+    >
+      <t-side-bar-item
+        wx:for="{{treeOptions[level]}}"
+        wx:key="index"
+        label="{{item.label}}"
+        value="{{item.value}}"
+        t-class="{{prefix}}-class-left-item"
+      />
+    </t-side-bar>
+    <block wx:elif="{{level != leafLevel}}">
+      <view
+        wx:for="{{treeOptions[level]}}"
+        wx:key="value"
+        bind:tap="handleTreeClick"
+        data-level="{{level}}"
+        data-value="{{item.value}}"
+        class="{{_.cls(classPrefix + '__item', [['active', item.value === value[level]]])}} {{prefix}}-class-middle-item"
+      >
+        {{item.label}}
+      </view>
+    </block>
+    <t-radio-group
+      wx:elif="{{!multiple}}"
+      class="{{classPrefix}}__radio {{prefix}}-class-right-column"
+      data-level="{{level}}"
+      value="{{value[level]}}"
+      bind:change="handleRadioChange"
+    >
+      <t-radio
+        wx:for="{{treeOptions[level]}}"
+        wx:key="value"
+        icon="line"
+        class="{{classPrefix}}__radio-item {{prefix}}-class-right-item"
+        t-class-label="{{prefix}}-class-right-item-label"
+        value="{{item.value}}"
+        maxLabelRow="{{1}}"
+        borderless
+        placement="right"
+        >{{item.label}}</t-radio
+      >
+    </t-radio-group>
+    <t-checkbox-group
+      wx:else
+      class="{{classPrefix}}__checkbox {{prefix}}-class-right-column"
+      value="{{value[level]}}"
+      bind:change="handleRadioChange"
+      data-level="{{level}}"
+    >
+      <t-checkbox
+        wx:for="{{treeOptions[level]}}"
+        wx:key="value"
+        placement="right"
+        icon="line"
+        maxLabelRow="{{1}}"
+        class="{{prefix}}-class-right-item"
+        t-class-label="{{prefix}}-class-right-item-label"
+        borderless
+        value="{{item.value}}"
+        >{{item.label}}</t-checkbox
+      >
+    </t-checkbox-group>
+  </scroll-view>
+</view>
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.wxss
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.wxss
@ -0,0 +1,64 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-tree-select {
+  display: flex;
+  background-color: var(--td-tree-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-tree-select__column {
+  width: var(--td-tree-colum-width, 206rpx);
+}
+.t-tree-select__column--left {
+  background: var(--td-tree-root-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-tree-select__column--right {
+  flex: 1;
+}
+.t-tree-select__column ::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.t-tree-select__item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  height: var(--td-tree-item-height, 112rpx);
+  line-height: var(--td-tree-item-height, 112rpx);
+  font-size: var(--td-tree-item-font-size, 32rpx);
+  padding-left: 32rpx;
+}
+.t-tree-select__item--active {
+  font-weight: 600;
+  color: var(--td-tree-item-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-tree-select-column {
+  width: 100%;
+}
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/type.d.ts
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/type.d.ts
@ -0,0 +1,32 @@
+import { TreeOptionData, KeysType } from '../common/common';
+export interface TdTreeSelectProps<DataOption extends TreeOptionData = TreeOptionData> {
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    height?: {
+        type: null;
+        value?: string | number;
+    };
+    keys?: {
+        type: ObjectConstructor;
+        value?: KeysType;
+    };
+    multiple?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    options?: {
+        type: ArrayConstructor;
+        value?: Array<DataOption>;
+    };
+    value?: {
+        type: null;
+        value?: TreeSelectValue;
+    };
+    defaultValue?: {
+        type: null;
+        value?: TreeSelectValue;
+    };
+}
+export declare type TreeSelectValue = string | number | Array<TreeSelectValue>;
--- a/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/type.js
+++ b/miniprogram/miniprogram_npm/tdesign-miniprogram/tree-select/type.js
@ -0,0 +1 @@
+export {};