✨(component): 新增 treeSelect 组件

package/component/src/component/treeSelect/index.vue

@@ -1,9 +1,73 @@
 <script lang="ts">
 export default {
-  name: "treeSelect",
+  name: "LayTreeSelect",
 };
 </script>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { computed, ref } from "vue";
 
-<template></template>
+export interface LayTreeSelect {
+  data: any,
+  modelValue: string;
+  disabled: boolean;
+}
+
+export interface TreeSelectEmits {
+  (e: "update:modelValue", value: string): void;
+  (e: "change", value: string): void;
+  (e: "search", value: string): void;
+}
+
+const props = withDefaults(defineProps<LayTreeSelect>(), {
+  disabled: false
+});
+
+const singleValue = ref();
+const dropdownRef = ref();
+const openState = ref(false);
+const emits = defineEmits<TreeSelectEmits>();
+const selectedValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits("update:modelValue", value);
+    emits("change", value);
+  }
+})
+
+const handleClick = (node: any) => {
+  dropdownRef.value.hide();
+  selectedValue.value = node.id;
+  singleValue.value = node.title; 
+}
+</script>
+
+<template>
+  <div class="layui-tree-select">
+    <lay-dropdown       
+      ref="dropdownRef"
+      :disabled="disabled"
+      :update-at-scroll="true"
+      @show="openState = true"
+      @hide="openState = false">
+      <lay-input v-model="singleValue"></lay-input>
+      <template #content>
+        <div class="layui-tree-select-content">
+          <lay-tree :data="data" :onlyIconControl="true" @node-click="handleClick"></lay-tree>
+        </div>
+      </template>
+  </lay-dropdown>
+  </div>
+</template>
+
+<style scoped>
+.layui-tree-select {
+  width: 220px;
+}
+
+.layui-tree-select-content {
+  padding: 10px;
+}
+</style>

package/component/src/index.ts

@@ -61,6 +61,7 @@ import LayDropdownSubMenu from "./component/dropdownSubMenu/index";
 import LayTab from "./component/tab/index";
 import LayTabItem from "./component/tabItem/index";
 import LayTree from "./component/tree/index";
+import LayTreeSelect from "./component/treeSelect/index";
 import LayTable from "./component/table/index";
 import LayPage from "./component/page/index";
 import LayTransfer from "./component/transfer/index";
@@ -180,6 +181,7 @@ const components: Record<string, Plugin> = {
   LaySpace,
   LayTag,
   LayTagInput,
+  LayTreeSelect
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -276,6 +278,7 @@ export {
   LaySpace,
   LayTag,
   LayTagInput,
+  LayTreeSelect,
   install,
 };
 

package/document-component/src/document/zh-CN/components/treeSelect.md

@@ -0,0 +1,239 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 树形组件一般用于展示具有层级关系的数据
+:::
+
+::: title 基础使用
+:::
+
+::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
+
+<template>
+  <lay-tree-select v-model="value" :data="data"></lay-tree-select> {{ value }}
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref();
+
+const data = ref([{
+	title: '一级1',
+	id: 1,
+	field: 'name1',
+	checked: true,
+	spread: true,
+	children: [{
+		title: '二级1-1 可允许跳转',
+		id: 3,
+		field: 'name11',
+		href: 'https://www.layui.com/',
+		children: [{
+			title: '三级1-1-3',
+			id: 23,
+			field: '',
+			children: [{
+				title: '四级1-1-3-1',
+				id: 24,
+				field: '',
+				children: [{
+					title: '五级1-1-3-1-1',
+					id: 30,
+					field: ''
+				},
+				{
+					title: '五级1-1-3-1-2',
+					id: 31,
+					field: ''
+				}]
+			}]
+		},
+		{
+			title: '三级1-1-1',
+			id: 7,
+			field: '',
+			children: [{
+				title: '四级1-1-1-1 可允许跳转',
+				id: 15,
+				field: '',
+				href: 'https://www.layui.com/doc/'
+			}]
+		},
+		{
+			title: '三级1-1-2',
+			id: 8,
+			field: '',
+			children: [{
+				title: '四级1-1-2-1',
+				id: 32,
+				field: ''
+			}]
+		}]
+	},
+	{
+		title: '二级1-2',
+		id: 4,
+		spread: true,
+		children: [{
+			title: '三级1-2-1',
+			id: 9,
+			field: '',
+			disabled: true
+		},
+		{
+			title: '三级1-2-2',
+			id: 10,
+			field: ''
+		}]
+	},
+	{
+		title: '二级1-3',
+		id: 20,
+		field: '',
+		children: [{
+			title: '三级1-3-1',
+			id: 21,
+			field: ''
+		},
+		{
+			title: '三级1-3-2',
+			id: 22,
+			field: ''
+		}]
+	}]
+},
+{
+	title: '一级2',
+	id: 2,
+	field: '',
+	spread: true,
+	children: [{
+		title: '二级2-1',
+		id: 5,
+		field: '',
+		spread: true,
+		children: [{
+			title: '三级2-1-1',
+			id: 11,
+			field: ''
+		},
+		{
+			title: '三级2-1-2',
+			id: 12,
+			field: ''
+		}]
+	},
+	{
+		title: '二级2-2',
+		id: 6,
+		field: '',
+		children: [{
+			title: '三级2-2-1',
+			id: 13,
+			field: ''
+		},
+		{
+			title: '三级2-2-2',
+			id: 14,
+			field: '',
+			disabled: true
+		}]
+	}]
+},
+{
+	title: '一级3',
+	id: 16,
+	field: '',
+	children: [{
+		title: '二级3-1',
+		id: 17,
+		field: '',
+		fixed: true,
+		children: [{
+			title: '三级3-1-1',
+			id: 18,
+			field: ''
+		},
+		{
+			title: '三级3-1-2',
+			id: 19,
+			field: ''
+		}]
+	},
+	{
+		title: '二级3-2',
+		id: 27,
+		field: '',
+		children: [{
+			title: '三级3-2-1',
+			id: 28,
+			field: ''
+		},
+		{
+			title: '三级3-2-2',
+			id: 29,
+			field: ''
+		}]
+	}]
+}]);
+
+function handleClick(node) {
+  console.log(node)
+}
+</script>
+
+:::
+
+::: title Tree 属性
+:::
+
+::: table
+
+| Name                             | Description                              | Accepted Values |
+| -------------------------------- | ---------------------------------------- | --------------- |
+| data                             | 树型组件数据,类型 TreeData \| TreeData[] | null            |
+| showCheckbox                     | 是否显示复选框                           | false           |
+| onlyIconControl                  | 是否仅允许节点左侧图标控制展开收缩       | false           |
+| showLine                         | 是否开启连接线                           | true            |
+| checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点         | []              |
+| collapse-transition              | 是否开启展示收起动画                     | false           |
+
+:::
+
+::: title Tree 数据
+:::
+
+::: table
+
+| Name                | Description | Accepted Values |
+|---------------------|-------------| --------------- |
+| id                  | 唯一值         | -               |
+| title               | 节点名称        | -               |
+| children            | 子节点         | []              |
+| disabled            | 该节点是否禁用     | false           |
+| spread              | 该节点是否展开     | false           |
+
+:::
+
+::: title Tree 事件
+:::
+
+::: table
+
+| Name       | Description     | Accepted Params |
+| ---------- | --------------- | --------------- |
+| node-click | 节点 click 事件 | --              |
+
+:::
+
+ 
+
+::: contributor transition
+:::
+
+::: previousNext transition
+:::

package/document-component/src/router/zh-CN.ts

@@ -236,6 +236,11 @@ const zhCN = [
             component: () => import("../document/zh-CN/components/tree.md"),
             meta: { title: "树形组件" },
           },
+          {
+            path: "/zh-CN/components/treeSelect",
+            component: () => import("../document/zh-CN/components/treeSelect.md"),
+            meta: { title: "下拉树组件" },
+          },
           {
             path: "/zh-CN/components/page",
             component: () => import("../document/zh-CN/components/page.md"),

package/document-component/src/view/utils/menus.ts

@@ -185,6 +185,12 @@ const menus = [
         subTitle: "select",
         path: "/zh-CN/components/select",
       },
+      {
+        id: 39,
+        title: "下拉树",
+        subTitle: "select",
+        path: "/zh-CN/components/treeSelect",
+      },
       {
         id: 39,
         title: "标签输入框",