✨(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,
 };