feat: tree finish

docs/docs/components/tree.md

@@ -0,0 +1,98 @@
+# Tree
+
+<script setup>
+import Basic from '../examples/tree/basic.vue'
+</script>
+
+Commonly used Tree
+
+## Basic usage
+
+:::info
+
+<Basic />
+
+:::
+
+::: details code
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { LTree } from 'lucky-design'
+const data = ref([])
+const recursionSetShow = (origin: any, id: any) => {
+  origin.forEach((item: any) => {
+    if (item.value === id) item.show = !item.show
+
+    if (item.children) recursionSetShow(item.children, id)
+  })
+}
+const setShow = ({ value }: any) => {
+  recursionSetShow(data.value, value)
+}
+const recursionAddShow = (data: any) => {
+  return data.map((ele: any) => {
+    ele.show = false
+    if (ele.children && ele.children.length) recursionAddShow(ele.children)
+
+    return ele
+  })
+}
+data.value = recursionAddShow([
+  {
+    value: '北京',
+    label: '北京',
+    children: [
+      {
+        value: '北京1-1',
+        label: '北京1-2',
+      },
+      {
+        value: '北京2-1',
+        label: '北京2-2',
+      },
+    ],
+  },
+  {
+    value: '天津',
+    label: '天津',
+    children: [
+      {
+        value: '天津1-1',
+        label: '天津1-2',
+      },
+      {
+        value: '天津2-1',
+        label: '天津2-2',
+        children: [
+          {
+            value: '天津2-1-1',
+            label: '天津2-1-1',
+          },
+          {
+            value: '天津2-1-2',
+            label: '天津2-1-2',
+          },
+        ],
+      },
+    ],
+  },
+])
+</script>
+
+<template>
+  <div>
+    <LTree :data="data" @setShow="setShow" />
+  </div>
+</template>
+```
+
+:::
+
+## API
+
+| Name | Description | Type    | Default |
+| ---- | ----------- | ------- | ------- |
+| data | data source | Array   | []      |
+| show | isShow      | boolean | true    |

docs/docs/examples/tree/basic.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { LTree } from 'lucky-design'
+const data = ref([])
+const recursionSetShow = (origin: any, id: any) => {
+  origin.forEach((item: any) => {
+    if (item.value === id)
+      item.show = !item.show
+
+    if (item.children)
+      recursionSetShow(item.children, id)
+  })
+}
+const setShow = ({ value }: any) => {
+  recursionSetShow(data.value, value)
+}
+const recursionAddShow = (data: any) => {
+  return data.map((ele: any) => {
+    ele.show = false
+    if (ele.children && ele.children.length)
+      recursionAddShow(ele.children)
+
+    return ele
+  })
+}
+data.value = recursionAddShow([
+  {
+    value: '北京',
+    label: '北京',
+    children: [
+      {
+        value: '北京1-1',
+        label: '北京1-2',
+      },
+      {
+        value: '北京2-1',
+        label: '北京2-2',
+      },
+    ],
+  },
+  {
+    value: '天津',
+    label: '天津',
+    children: [
+      {
+        value: '天津1-1',
+        label: '天津1-2',
+      },
+      {
+        value: '天津2-1',
+        label: '天津2-2',
+        children: [
+          {
+            value: '天津2-1-1',
+            label: '天津2-1-1',
+          },
+          {
+            value: '天津2-1-2',
+            label: '天津2-1-2',
+          },
+        ],
+      },
+    ],
+  },
+])
+</script>
+
+<template>
+  <div>
+    <LTree :data="data" @setShow="setShow" />
+  </div>
+</template>

docs/docs/zh-CN/components/tree.md

@@ -0,0 +1,96 @@
+# Tree
+
+<script setup>
+import Basic from '../../examples/tree/basic.vue'
+</script>
+
+## 基本使用
+
+:::info
+
+<Basic />
+
+:::
+
+::: details code
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { LTree } from 'lucky-design'
+const data = ref([])
+const recursionSetShow = (origin: any, id: any) => {
+  origin.forEach((item: any) => {
+    if (item.value === id) item.show = !item.show
+
+    if (item.children) recursionSetShow(item.children, id)
+  })
+}
+const setShow = ({ value }: any) => {
+  recursionSetShow(data.value, value)
+}
+const recursionAddShow = (data: any) => {
+  return data.map((ele: any) => {
+    ele.show = false
+    if (ele.children && ele.children.length) recursionAddShow(ele.children)
+
+    return ele
+  })
+}
+data.value = recursionAddShow([
+  {
+    value: '北京',
+    label: '北京',
+    children: [
+      {
+        value: '北京1-1',
+        label: '北京1-2',
+      },
+      {
+        value: '北京2-1',
+        label: '北京2-2',
+      },
+    ],
+  },
+  {
+    value: '天津',
+    label: '天津',
+    children: [
+      {
+        value: '天津1-1',
+        label: '天津1-2',
+      },
+      {
+        value: '天津2-1',
+        label: '天津2-2',
+        children: [
+          {
+            value: '天津2-1-1',
+            label: '天津2-1-1',
+          },
+          {
+            value: '天津2-1-2',
+            label: '天津2-1-2',
+          },
+        ],
+      },
+    ],
+  },
+])
+</script>
+
+<template>
+  <div>
+    <LTree :data="data" @setShow="setShow" />
+  </div>
+</template>
+```
+
+:::
+
+## API
+
+| Name | Description    | Type    | Default |
+| ---- | -------------- | ------- | ------- |
+| data | 数据源         | Array   | []      |
+| show | 是否显示某一项 | boolean | true    |

packages/components/src/tree/style.scss

@@ -0,0 +1,3 @@
+ul {
+  margin-left: 20px;
+}

packages/components/src/tree/tree.vue

@@ -1,52 +1,39 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import treeItem from './treeItem.vue'
-const props = defineProps({
-  options: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-  },
-  icon: String,
-  defaultOpenNodes: Array,
-  customClass: String,
-  multiple: Boolean,
-  defaultSelectNodes: {
-    type: Array,
+import type { PropType } from 'vue'
+
+const { data, show } = defineProps({
+  data: {
+    type: Array as PropType<any>,
     default: () => [],
   },
+  show: {
+    type: Boolean,
+    default: true,
+  },
 })
-const emit = defineEmits(['nodeClick', 'selectClick'])
-props.options.forEach((item, index) => {
-  item.key = index.toString()
-})
-const tabKey = ref('')
-const changeKey = (e) => {
-  tabKey.value = e
-}
-const nClick = (item) => {
-  emit('nodeClick', item)
+const emit = defineEmits(['setShow'])
+const setShow = (data: any) => {
+  emit('setShow', data)
 }
 </script>
 
 <template>
-  <div class="mzl-tree-content-box" :class="[customClass]">
-    <template v-for="(item, index) in options" :key="index">
-      <tree-item
-        :items="item"
-        :data-key="index"
-        :icon="icon"
-        :default-open-nodes="defaultOpenNodes"
-        :options="options"
-        :index="0"
-        :tab-indexs="tabKey"
-        :multiple="multiple"
-        :default-select-nodes="defaultSelectNodes"
-        @nodeClick="nClick($event)"
-        @change="changeKey($event)"
-        @selectClick="emit('selectClick', $event)"
-      />
-    </template>
-  </div>
+  <ul :style="{ display: show ? 'block' : 'none' }">
+    <div v-for="item in data" :key="item.value" @click.stop="setShow(item)">
+      <p :style="{ cursor: 'pointer' }">
+        {{ item.value }}
+      </p>
+      <template v-if="item.children">
+        <div>
+          <Tree :data="item.children" :show="item.show" @setShow="setShow" />
+        </div>
+      </template>
+    </div>
+  </ul>
 </template>
+
+<style>
+ul {
+  margin-left: 20px;
+}
+</style>