feat: migrate TreeSelect component

src-next/tree-select/demo/data-en.ts

@@ -0,0 +1,65 @@
+const group1 = [
+  {
+    text: 'Delaware',
+    id: 1,
+  },
+  {
+    text: 'Florida',
+    id: 2,
+  },
+  {
+    text: 'Georqia',
+    id: 3,
+    disabled: true,
+  },
+  {
+    text: 'Indiana',
+    id: 4,
+  },
+];
+
+const group2 = [
+  {
+    text: 'Alabama',
+    id: 5,
+  },
+  {
+    text: 'Kansas',
+    id: 6,
+  },
+  {
+    text: 'Louisiana',
+    id: 7,
+  },
+  {
+    text: 'Texas',
+    id: 8,
+  },
+];
+
+const group3 = [
+  {
+    text: 'Alabama',
+    id: 9,
+  },
+  {
+    text: 'Kansas',
+    id: 10,
+  },
+];
+
+export const enUSData = [
+  {
+    text: 'Group 1',
+    children: group1,
+  },
+  {
+    text: 'Group 2',
+    children: group2,
+  },
+  {
+    text: 'Group 3',
+    disabled: true,
+    children: group3,
+  },
+];

src-next/tree-select/demo/data-zh.ts

@@ -0,0 +1,65 @@
+const zhejiang = [
+  {
+    text: '杭州',
+    id: 1,
+  },
+  {
+    text: '温州',
+    id: 2,
+  },
+  {
+    text: '宁波',
+    id: 3,
+    disabled: true,
+  },
+  {
+    text: '义乌',
+    id: 4,
+  },
+];
+
+const jiangsu = [
+  {
+    text: '南京',
+    id: 5,
+  },
+  {
+    text: '无锡',
+    id: 6,
+  },
+  {
+    text: '徐州',
+    id: 7,
+  },
+  {
+    text: '苏州',
+    id: 8,
+  },
+];
+
+const fujian = [
+  {
+    text: '泉州',
+    id: 9,
+  },
+  {
+    text: '厦门',
+    id: 10,
+  },
+];
+
+export const zhCNData = [
+  {
+    text: '浙江',
+    children: zhejiang,
+  },
+  {
+    text: '江苏',
+    children: jiangsu,
+  },
+  {
+    text: '福建',
+    disabled: true,
+    children: fujian,
+  },
+];

src-next/tree-select/demo/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <demo-section>
+    <demo-block :title="t('radioMode')">
+      <van-tree-select
+        v-model:active-id="activeId"
+        v-model:main-active-index="activeIndex"
+        :items="items"
+      />
+    </demo-block>
+
+    <demo-block :title="t('multipleMode')">
+      <van-tree-select
+        v-model:active-id="activeIds"
+        v-model:main-active-index="activeIndex2"
+        :items="items"
+      />
+    </demo-block>
+
+    <demo-block :title="t('customContent')">
+      <van-tree-select
+        v-model:main-active-index="activeIndex3"
+        height="55vw"
+        :items="simpleItems"
+      >
+        <template slot="content">
+          <van-image
+            v-if="activeIndex3 === 0"
+            :show-loading="false"
+            src="https://img.yzcdn.cn/vant/apple-1.jpg"
+          />
+          <van-image
+            v-if="activeIndex3 === 1"
+            :show-loading="false"
+            src="https://img.yzcdn.cn/vant/apple-2.jpg"
+          />
+        </template>
+      </van-tree-select>
+    </demo-block>
+
+    <demo-block :title="t('showBadge')">
+      <van-tree-select
+        v-model:active-id="activeId2"
+        v-model:main-active-index="activeIndex4"
+        height="55vw"
+        :items="badgeItems"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import { zhCNData } from './data-zh';
+import { enUSData } from './data-en';
+import { deepClone } from '../../utils/deep-clone';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      showBadge: '徽标提示',
+      radioMode: '单选模式',
+      multipleMode: '多选模式',
+      customContent: '自定义内容',
+      data: zhCNData,
+      dataSimple: [{ text: '分组 1' }, { text: '分组 2' }],
+    },
+    'en-US': {
+      showBadge: 'Show Badge',
+      radioMode: 'Radio Mode',
+      multipleMode: 'Multiple Mode',
+      customContent: 'Custom Content',
+      data: enUSData,
+      dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }],
+    },
+  },
+
+  data() {
+    return {
+      activeId: 1,
+      activeId2: 1,
+      activeIds: [1, 2],
+      activeIndex: 0,
+      activeIndex2: 0,
+      activeIndex3: 0,
+      activeIndex4: 0,
+    };
+  },
+
+  computed: {
+    items() {
+      return this.t('data');
+    },
+
+    simpleItems() {
+      return this.t('dataSimple');
+    },
+
+    badgeItems() {
+      const data = deepClone(this.t('data')).slice(0, 2);
+
+      data[0].dot = true;
+      data[1].badge = 5;
+
+      return data;
+    },
+  },
+};
+</script>