first commit

2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions
--- a/uni_modules/tdesign-uniapp/components/tree-select/README.en-US.md
+++ b/uni_modules/tdesign-uniapp/components/tree-select/README.en-US.md
@@ -0,0 +1,48 @@
+:: BASE_DOC ::
+
+## API
+
+### TreeSelect Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+custom-value | String / Number / Array | - | Typescript：`TreeSelectValue` | N
+height | String / Number | 336 | \- | N
+keys | Object | - | alias filed name in options。Typescript：`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+multiple | Boolean | false | \- | N
+options | Array | [] | Typescript：`Array<DataOption>` | N
+value | String / Number / Array | - | `v-model:value` is supported。Typescript：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/tree-select/type.ts) | N
+default-value | String / Number / Array | - | uncontrolled property。Typescript：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/tree-select/type.ts) | N
+
+### TreeSelect Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: TreeSelectValue, level: TreeLevel })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/tree-select/type.ts)。<br/>`type TreeLevel = 0 \| 1 \| 2`<br/>
+
+### TreeSelect External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-left-column | \-
+t-class-left-item | \-
+t-class-middle-item | \-
+t-class-right-column | \-
+t-class-right-item | \-
+t-class-right-item-label | \-
+
+### 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-text-color | @text-color-primary | -
+--td-tree-colum-width | 206rpx | -
+--td-tree-item-active-color | @brand-color | -
+--td-tree-item-disabled-color | @text-color-disabled | -
+--td-tree-item-font-size | 32rpx | -
+--td-tree-item-height | 112rpx | -
+--td-tree-root-bg-color | @bg-color-secondarycontainer | -
--- a/uni_modules/tdesign-uniapp/components/tree-select/README.md
+++ b/uni_modules/tdesign-uniapp/components/tree-select/README.md
@@ -0,0 +1,78 @@
+---
+title: TreeSelect 树形选择
+description: 适用于选择树形的数据结构。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TTreeSelect from '@tdesign/uniapp/tree-select/tree-select.vue';
+```
+
+### 组件类型
+
+#### 基础树形选择
+
+{{ base }}
+
+#### 多选树形选择
+
+{{ multiple }}
+
+### 组件状态
+
+#### 三级树形选择
+
+{{ normal }}
+
+## API
+
+### TreeSelect Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+custom-value | String / Number / Array | - | 自定义选中值，优先级高于 `value`。TS 类型：`TreeSelectValue` | N
+height | String / Number | 336 | 高度，默认单位为 px | N
+keys | Object | - | 用来定义 `value / label / disabled / children` 在 `options` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`。TS 类型：`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+multiple | Boolean | false | 是否允许多选 | N
+options | Array | [] | 选项。TS 类型：`Array<DataOption>` | N
+value | String / Number / Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/tree-select/type.ts) | N
+default-value | String / Number / Array | - | 选中值。非受控属性。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/tree-select/type.ts) | N
+
+### TreeSelect Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: TreeSelectValue, level: TreeLevel })` | 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/tree-select/type.ts)。<br/>`type TreeLevel = 0 \| 1 \| 2`<br/>
+
+### TreeSelect External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-left-column | 左侧第一列样式类
+t-class-left-item | 左侧第一列子项样式类
+t-class-middle-item | 中间列子项样式类
+t-class-right-column | 右侧第一列样式类
+t-class-right-item | 右侧第一列子项样式类
+t-class-right-item-label | 右侧第一列子项标签样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-tree-bg-color | @bg-color-container | -
+--td-tree-colum-text-color | @text-color-primary | -
+--td-tree-colum-width | 206rpx | -
+--td-tree-item-active-color | @brand-color | -
+--td-tree-item-disabled-color | @text-color-disabled | -
+--td-tree-item-font-size | 32rpx | -
+--td-tree-item-height | 112rpx | -
+--td-tree-root-bg-color | @bg-color-secondarycontainer | -
--- a/uni_modules/tdesign-uniapp/components/tree-select/computed.js
+++ b/uni_modules/tdesign-uniapp/components/tree-select/computed.js
@@ -0,0 +1,6 @@
+export const getTreeClass = function (level, total) {
+  if (level === 0) return 'right';
+  if (level === 1 && level !== total - 1) return 'middle';
+  return 'left';
+};
+
--- a/uni_modules/tdesign-uniapp/components/tree-select/props.ts
+++ b/uni_modules/tdesign-uniapp/components/tree-select/props.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdTreeSelectProps } from './type';
+export default {
+  /** 自定义选中值，优先级高于 `value` */
+  customValue: {
+    type: [String, Number, Array],
+  },
+  /** 高度，默认单位为 px */
+  height: {
+    type: [String, Number],
+    default: 336 as TdTreeSelectProps['height'],
+  },
+  /** 用来定义 `value / label / disabled / children` 在 `options` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }` */
+  keys: {
+    type: Object,
+  },
+  /** 是否允许多选 */
+  multiple: Boolean,
+  /** 选项 */
+  options: {
+    type: Array,
+    default: (): TdTreeSelectProps['options'] => [],
+  },
+  /** 选中值 */
+  value: {
+    type: [String, Number, Array],
+  },
+  /** 选中值，非受控属性 */
+  defaultValue: {
+    type: [String, Number, Array],
+  },
+  /** 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
--- a/uni_modules/tdesign-uniapp/components/tree-select/tree-select.css
+++ b/uni_modules/tdesign-uniapp/components/tree-select/tree-select.css
@@ -0,0 +1,44 @@
+.t-tree-select {
+  display: flex;
+  background-color: var(--td-tree-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+:deep(.t-tree-select__column) {
+  width: var(--td-tree-colum-width, 206rpx);
+  color: var(--td-tree-colum-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+:deep(.t-tree-select__column)--left {
+  background: var(--td-tree-root-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+:deep(.t-tree-select__column)--right {
+  flex: 1;
+}
+:deep(.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__item--disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  color: var(--td-tree-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}
+:deep(.t-tree-select-column) {
+  width: 100%;
+  height: auto;
+}
--- a/uni_modules/tdesign-uniapp/components/tree-select/tree-select.vue
+++ b/uni_modules/tdesign-uniapp/components/tree-select/tree-select.vue
@@ -0,0 +1,319 @@
+<template>
+  <view
+    :class="classPrefix"
+    :style="tools._style(['height:' + tools.addUnit(height), customStyle])"
+  >
+    <t-scroll-view
+      v-for="(item, level) in treeOptions"
+      :key="level"
+      :t-class="getScrollViewTClass(level)"
+      :class="getScrollViewClass(level)"
+      :scroll-into-view="scrollIntoView && scrollIntoView[level] ? 'scroll-to-' + scrollIntoView[level] : ''"
+    >
+      <t-side-bar
+        v-if="level == 0"
+        :value="innerValue[level]"
+        :t-class="classPrefix + '-column ' + tClassLeftColumn"
+        style="width: 100%;height: auto;"
+        @change="onRootChange"
+      >
+        <t-side-bar-item
+          v-for="(sidebarItem, sidebarIndex) in treeOptions[level]"
+          :key="sidebarIndex"
+          :label="sidebarItem.label"
+          :value="sidebarItem.value"
+          :disabled="sidebarItem.disabled"
+          :t-id="'scroll-to-' + sidebarItem.value"
+          :t-class="'scroll-into-view ' + tClassLeftItem"
+        />
+      </t-side-bar>
+
+      <block v-else-if="level != leafLevel">
+        <view
+          v-for="(treeItem, index) in treeOptions[level]"
+          :key="`view-${level}-${index}`"
+          :data-level="level"
+          :data-value="treeItem.value"
+          :class="
+            tools.cls(classPrefix + '__item', [
+              ['active', treeItem.value === innerValue[level]],
+              ['disabled', treeItem.disabled]
+            ]) +
+              ' ' +
+              tClassMiddleItem +
+              ' scroll-into-view'
+          "
+          @click="handleTreeClick"
+        >
+          <view :id="'scroll-to-' + treeItem.value">
+            {{ treeItem.label }}
+          </view>
+        </view>
+      </block>
+
+      <t-radio-group
+        v-else-if="!multiple"
+        :t-class="classPrefix + '__radio ' + tClassRightColumn"
+        :data-level="level"
+        data-type="single"
+        :value="innerValue[level]"
+        @change="({value}) => handleChange({ value, level, type: 'single' })"
+      >
+        <t-radio
+          v-for="(treeItem, index) in treeOptions[level]"
+          :key="`radio-${innerValue[level-1]}-${level}-${index}`"
+          :t-id="'scroll-to-' + treeItem.value"
+          :t-class="'scroll-into-view ' + classPrefix + '__radio-item ' + tClassRightItem"
+          :t-class-label="tClassRightItemLabel"
+          icon="line"
+          :value="treeItem.value"
+          :disabled="treeItem.disabled"
+          :max-label-row="1"
+          borderless
+          placement="right"
+        >
+          {{ treeItem.label }}
+        </t-radio>
+      </t-radio-group>
+
+      <t-checkbox-group
+        v-else
+        :t-class="classPrefix + '__checkbox ' + tClassRightColumn"
+        :value="innerValue[level] || []"
+        :data-level="level"
+        data-type="multiple"
+        @change="({context}) => handleChange({ context, value: context.value, level, type: 'multiple' })"
+      >
+        <t-checkbox
+          v-for="(treeItem, index) in treeOptions[level]"
+          :key="`checkbox-${innerValue[level-1]}-${level}-${index}`"
+          :t-id="'scroll-to-' + treeItem.value"
+          :t-class="'scroll-into-view ' + tClassRightItem"
+          :t-class-label="tClassRightItemLabel"
+          placement="right"
+          icon="line"
+          :max-label-row="1"
+          :value="treeItem.value"
+          :disabled="treeItem.disabled"
+          borderless
+        >
+          {{ treeItem.label }}
+        </t-checkbox>
+      </t-checkbox-group>
+    </t-scroll-view>
+    <slot name="content" />
+  </view>
+</template>
+<script>
+import TRadio from '../radio/radio';
+import TRadioGroup from '../radio-group/radio-group';
+import TCheckbox from '../checkbox/checkbox';
+import TCheckboxGroup from '../checkbox-group/checkbox-group';
+import TSideBar from '../side-bar/side-bar';
+import TSideBarItem from '../side-bar-item/side-bar-item';
+import TScrollView from '../scroll-view/scroll-view.vue';
+
+import { uniComponent } from '../common/src/index';
+import { isDef } from '../common/validator';
+import { prefix } from '../common/config';
+import { getTreeDepth, coalesce, nextTick } from '../common/utils';
+import props from './props';
+import tools from '../common/utils.wxs';
+import { getTreeClass } from './computed.js';
+import { canUseVirtualHost } from '../common/version';
+
+const name = `${prefix}-tree-select`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-left-column`,
+    `${prefix}-class-left-item`,
+    `${prefix}-class-middle-item`,
+    `${prefix}-class-right-column`,
+    `${prefix}-class-right-item`,
+    `${prefix}-class-right-item-label`,
+  ],
+  components: {
+    TRadio,
+    TRadioGroup,
+    TCheckbox,
+    TCheckboxGroup,
+    TSideBar,
+    TSideBarItem,
+    TScrollView,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      scrollIntoView: null,
+      tools,
+
+      innerValue: coalesce(this.value, this.defaultValue),
+      treeOptions: [],
+    };
+  },
+  computed: {
+
+  },
+  watch: {
+    value: {
+      handler() {
+        this.buildTreeOptions();
+      },
+      deep: true,
+      immediate: true,
+    },
+    options: {
+      handler() {
+        this.buildTreeOptions();
+      },
+      deep: true,
+      immediate: true,
+    },
+    keys: {
+      handler() {
+        this.buildTreeOptions();
+      },
+      deep: true,
+      immediate: true,
+    },
+    multiple: 'buildTreeOptions',
+  },
+  mounted() {
+    nextTick().then(() => {
+      this.getScrollIntoView('init');
+    });
+  },
+  methods: {
+    getTreeClass,
+    buildTreeOptions() {
+      const { options, innerValue: value, customValue, multiple, keys } = this;
+
+      if (!options.length) return;
+
+      const treeOptions = [];
+
+      let level = -1;
+      let currentNode = { children: options };
+
+      while (currentNode?.children) {
+        level += 1;
+        const currentLevelOptions = currentNode.children.map(item => ({
+          label: item[keys?.label || 'label'],
+          value: item[keys?.value || 'value'],
+          disabled: item[keys?.disabled || 'disabled'],
+          children: item[keys?.children || 'children'],
+        }));
+
+        treeOptions.push(currentLevelOptions);
+
+        const currentValue = coalesce(customValue?.[level], value?.[level]);
+        currentNode = currentValue
+          ? coalesce(currentLevelOptions.find(child => child.value === currentValue), currentLevelOptions[0])
+          : currentLevelOptions[0];
+      }
+
+      const depth = getTreeDepth(options, keys?.children);
+
+      // 补齐 treeOptions 长度到 depth
+      while (treeOptions.length < depth) {
+        treeOptions.push([]);
+        level += 1;
+      }
+
+      const leafLevel = Math.max(0, level);
+      const innerValue = customValue
+        || treeOptions.map((levelOptions, idx) => {
+          const isLastLevel = idx === treeOptions.length - 1;
+          const defaultValue = isLastLevel && multiple ? [levelOptions[0]?.value] : levelOptions[0]?.value;
+          return coalesce(value?.[idx], defaultValue);
+        });
+
+      this.innerValue = innerValue;
+      this.leafLevel = leafLevel;
+      this.treeOptions = treeOptions;
+    },
+
+    getScrollIntoView(status) {
+      const { innerValue: value, customValue, scrollIntoView } = this;
+      if (status === 'init') {
+        const _value = customValue || value;
+        const scrollIntoView = Array.isArray(_value)
+          ? _value.map(item => (Array.isArray(item) ? item[0] : item))
+          : [_value];
+        // setTimeout(() => {
+        this.scrollIntoView = scrollIntoView;
+        // }, 1000);
+      } else {
+        if (scrollIntoView === null) return;
+        this.scrollIntoView = null;
+      }
+    },
+
+    onRootChange(e) {
+      const { innerValue } = this;
+      const { value: itemValue } = e;
+
+      this.getScrollIntoView('none');
+      innerValue[0] = itemValue;
+
+      this._trigger('change', { value: innerValue, level: 0 });
+    },
+
+    handleTreeClick(e) {
+      const { level, value: itemValue } = e.currentTarget.dataset;
+      const { innerValue } = this;
+
+      innerValue[level] = itemValue;
+      this.getScrollIntoView('none');
+      this._trigger('change', { value: innerValue, level: 1 });
+    },
+
+    handleChange({ level, type, value }) {
+      const { innerValue } = this;
+
+      if (type === 'multiple') {
+        if (!isDef(innerValue[level])) {
+          innerValue[level] = [];
+        }
+        const index = innerValue[level].indexOf(value);
+        index === -1 ? innerValue[level].push(value) : innerValue[level].splice(index, 1);
+      } else {
+        innerValue[level] = value;
+      }
+
+      this.getScrollIntoView('none');
+      this._trigger('change', { value: innerValue, level });
+    },
+
+    getScrollViewTClass(level) {
+      return canUseVirtualHost() ? this.getScrollViewRealClass(level) : '';
+    },
+    getScrollViewClass(level) {
+      return !canUseVirtualHost() ? this.getScrollViewRealClass(level) : '';
+    },
+    getScrollViewRealClass(level) {
+      const { classPrefix, leafLevel, treeOptions, tClass } = this;
+      return `${tools.cls(`${classPrefix}__column`, [getTreeClass(leafLevel - level, treeOptions.length)])} ${tClass}`;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './tree-select.css';
+</style>
--- a/uni_modules/tdesign-uniapp/components/tree-select/type.ts
+++ b/uni_modules/tdesign-uniapp/components/tree-select/type.ts
@@ -0,0 +1,49 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TreeOptionData, TreeKeysType } from '../common/common';
+
+export interface TdTreeSelectProps<DataOption extends TreeOptionData = TreeOptionData> {
+  /**
+   * 自定义选中值，优先级高于 `value`
+   */
+  customValue?: TreeSelectValue;
+  /**
+   * 高度，默认单位为 px
+   * @default 336
+   */
+  height?: string | number;
+  /**
+   * 用来定义 `value / label / disabled / children` 在 `options` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`
+   */
+  keys?: TreeKeysType;
+  /**
+   * 是否允许多选
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 选项
+   * @default []
+   */
+  options?: Array<DataOption>;
+  /**
+   * 选中值
+   */
+  value?: TreeSelectValue;
+  /**
+   * 选中值，非受控属性
+   */
+  defaultValue?: TreeSelectValue;
+  /**
+   * 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进
+   */
+  onChange?: (context: { value: TreeSelectValue; level: TreeLevel }) => void;
+}
+
+export type TreeSelectValue = string | number | Array<TreeSelectValue>;
+
+export type TreeLevel = 0 | 1 | 2;