Feat/tree select

example/app.json

@@ -92,6 +92,10 @@
     {
       "root": "pages/swipe-cell/",
       "pages": ["swipe-cell"]
+    },
+    {
+      "root": "pages/tree-select/",
+      "pages": ["tree-select"]
     }
   ],
   "usingComponents": {

example/pages/home/data/form.ts

@@ -54,6 +54,10 @@ const form = {
       name: 'Textarea',
       label: '多行输入框',
     },
+    {
+      name: 'TreeSelect',
+      label: '树形选择',
+    },
     // {
     //   name: 'PeriodSelector',
     //   label: '时间段选择器',

site/site.config.mjs

@@ -273,6 +273,13 @@ export default {
           path: '/miniprogram/components/textarea',
           component: () => import('@/textarea/README.md'),
         },
+        {
+          title: 'TreeSelect 树形选择',
+          name: 'treeSelect',
+          meta: { docType: 'form' },
+          path: '/miniprogram/components/tree-select',
+          component: () => import('@/tree-select/README.md'),
+        },
         {
           title: 'UpLoad 上传',
           name: 'upload',

src/common/utils.ts

@@ -201,6 +201,7 @@ export const setIcon = (iconName, icon, defaultIcon) => {
 };
 
 export const isObject = (val) => typeof val === 'object' && val != null;
+
 export const isString = (val) => typeof val === 'string';
 
 export const toCamel = (str) => str.replace(/-(\w)/g, (match, m1) => m1.toUpperCase());

src/dropdown-menu/dropdown-item.less

@@ -76,14 +76,6 @@
     }
   }
 
-  &__column {
-    flex: 1;
-
-    &--ancestor {
-      background: @tree-root-bg-color;
-    }
-  }
-
   &__radio,
   &__checkbox {
     width: 100%;

src/side-bar-item/side-bar-item.less

@@ -1,61 +1,64 @@
 @import '../common/style/index.less';
 
-@side-bar-active-color: @primary-color;
-@side-bar-border-radius: 18rpx;
-
-page {
-  --td-side-bar-active-color: @side-bar-active-color;
-  --td-side-bar-border-radius: @side-bar-border-radius;
-}
+@side-bar-color: var(--td-side-bar-color, @font-gray-1);
+@side-bar-font-size: var(--td-side-bar-font-size, 32rpx);
+@side-bar-item-height: var(--td-side-bar-item-height, 112rpx);
+@side-bar-bg-color: var(--td-side-bar-bg-color, @gray-color-1);
+@side-bar-disabled-color: var(--td-side-bar-disabled-color, @font-gray-4);
+@side-bar-active-color: var(--td-side-bar-active-color, @primary-color);
+@side-bar-border-radius: var(--td-side-bar-border-radius, 18rpx);
 
 .@{prefix}-side-bar-item {
   position: relative;
-  padding: 32rpx;
-  font-size: 28rpx;
-  color: @font-gray-1;
-  background: @gray-color-1;
+  padding-left: 32rpx;
+  font-size: @side-bar-font-size;
+  color: @side-bar-color;
+  background: @side-bar-bg-color;
+  height: @side-bar-item-height;
+  line-height: @side-bar-item-height;
 
   &--active {
+    font-weight: 600;
     background: @bg-color-block;
-    color: var(--td-side-bar-active-color, @side-bar-active-color);
+    color: @side-bar-active-color;
   }
 
   &__prefix,
   &__suffix {
     z-index: 1;
     position: absolute;
     right: 0;
-    width: calc(var(--td-side-bar-border-radius, @side-bar-border-radius) * 2);
-    height: calc(var(--td-side-bar-border-radius, @side-bar-border-radius) * 2);
+    width: calc(@side-bar-border-radius * 2);
+    height: calc(@side-bar-border-radius * 2);
     background: #fff;
 
     &::after {
       content: '';
       display: block;
       width: 100%;
       height: 100%;
-      background-color: @gray-color-1;
+      background-color: @side-bar-bg-color;
     }
   }
 
   &__prefix {
-    top: calc(var(--td-side-bar-border-radius, @side-bar-border-radius) * -2);
+    top: calc(@side-bar-border-radius * -2);
 
     &::after {
-      border-bottom-right-radius: var(--td-side-bar-border-radius, @side-bar-border-radius);
+      border-bottom-right-radius: @side-bar-border-radius;
     }
   }
 
   &__suffix {
-    bottom: calc(var(--td-side-bar-border-radius, @side-bar-border-radius) * -2);
+    bottom: calc(@side-bar-border-radius * -2);
 
     &::after {
-      border-top-right-radius: var(--td-side-bar-border-radius, @side-bar-border-radius);
+      border-top-right-radius: @side-bar-border-radius;
     }
   }
 
   &--disabled {
-    color: @font-gray-4;
+    color: @side-bar-disabled-color;
   }
 
   &__line {
@@ -65,7 +68,7 @@ page {
     left: 0;
     top: 50%;
     transform: translateY(-50%);
-    background: var(--td-side-bar-active-color, @side-bar-active-color);
+    background: @side-bar-active-color;
     border-radius: 8rpx;
   }
 }

src/side-bar-item/side-bar-item.wxml

@@ -1,7 +1,10 @@
 <import src="../common/template/badge" />
 <wxs src="../common/utils.wxs" module="_" />
 
-<view class="{{_.cls(classPrefix, [['active', active], ['disabled', disabled]])}}" bind:tap="handleClick">
+<view
+  class="{{_.cls(classPrefix, [['active', active], ['disabled', disabled]])}} {{prefix}}-class"
+  bind:tap="handleClick"
+>
   <block wx:if="{{active}}">
     <view class="{{classPrefix}}__line"></view>
     <view class="{{classPrefix}}__prefix"></view>

src/side-bar/side-bar.wxml

@@ -1,4 +1,4 @@
-<view class="{{classPrefix}}">
+<view class="{{classPrefix}} {{prefix}}-class">
   <slot />
   <view class="{{classPrefix}}__padding"></view>
 </view>

src/tree-select/README.en-US.md

@@ -0,0 +1,20 @@
+:: BASE_DOC ::
+
+## API
+### TreeSelect Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | String | - | \- | N
+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/>

src/tree-select/README.md

@@ -0,0 +1,53 @@
+---
+title: TreeSelect 树形选择
+description: 适用于选择树形的数据结构。
+spline: form
+isComponent: true
+---
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-tree-select": "tdesign-miniprogram/tree-select/tree-select"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+#### 基础树形选择
+
+{{ base }}
+
+#### 多选树形选择
+
+{{ multiple }}
+
+### 组件状态
+
+#### 三级树形选择
+
+{{ normal }}
+
+## API
+### TreeSelect Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+custom-style | String | - | 自定义组件样式 | N
+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/>

src/tree-select/_example/base/index.js

@@ -0,0 +1,35 @@
+const chineseNumber = '一二三四五六七八九十'.split('');
+
+const generateTree = function (deep = 0, count = 10, prefix) {
+  const ans = [];
+
+  for (let i = 0; i < count; i += 1) {
+    const value = prefix ? `${prefix}-${i}` : `${i}`;
+    const rect = {
+      label: `选项${chineseNumber[i]}`,
+      value,
+    };
+
+    if (deep > 0) {
+      rect.children = generateTree(deep - 1, 10, value);
+    }
+    ans.push(rect);
+  }
+
+  return ans;
+};
+
+Component({
+  data: {
+    options: generateTree(1),
+    value: ['0', '0-0'],
+  },
+
+  methods: {
+    onChange(e) {
+      this.setData({
+        value: e.detail.value,
+      });
+    },
+  },
+});

src/tree-select/_example/base/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tree-select": "tdesign-miniprogram/tree-select/tree-select"
+  }
+}

src/tree-select/_example/base/index.wxml

@@ -0,0 +1 @@
+<t-tree-select options="{{options}}" value="{{value}}" bind:change="onChange" />

src/tree-select/_example/multiple/index.js

@@ -0,0 +1,35 @@
+const chineseNumber = '一二三四五六七八九十'.split('');
+
+const generateTree = function (deep = 0, count = 10, prefix) {
+  const ans = [];
+
+  for (let i = 0; i < count; i += 1) {
+    const value = prefix ? `${prefix}-${i}` : `${i}`;
+    const rect = {
+      label: `选项${chineseNumber[i]}`,
+      value,
+    };
+
+    if (deep > 0) {
+      rect.children = generateTree(deep - 1, 10, value);
+    }
+    ans.push(rect);
+  }
+
+  return ans;
+};
+
+Component({
+  data: {
+    options: generateTree(1),
+    value: ['0', ['0-0', '0-1']],
+  },
+
+  methods: {
+    onChange(e) {
+      this.setData({
+        value: e.detail.value,
+      });
+    },
+  },
+});

src/tree-select/_example/multiple/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tree-select": "tdesign-miniprogram/tree-select/tree-select"
+  }
+}

src/tree-select/_example/multiple/index.wxml

@@ -0,0 +1 @@
+<t-tree-select options="{{options}}" value="{{value}}" multiple bind:change="onChange" />