feat(components): add tree and icons

packages/components/index.ts

@@ -5,3 +5,4 @@ export * from './src/tree'
 export * from './src/message'
 export * from './src/drawer'
 export * from './src/checkbox'
+export * from './src/icon'

packages/components/src/icon/__tests__/icon.tsx

@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest'
+
+describe('icon.vue', () => {
+  it('hello world', () => {
+    expect(1).toBe(1)
+  })
+})

packages/components/src/icon/icon.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { iconProps } from './props'
+const { className } = defineProps(iconProps)
+</script>
+
+<template>
+  <i class="iconfont" :class="className" />
+</template>
+
+<style>
+@import url('//at.alicdn.com/t/c/font_3893724_1gko5a08oqt.css');
+</style>

packages/components/src/icon/iconList.ts

@@ -0,0 +1,6 @@
+export default [
+  { className: 'icon-arrow-up-filling' },
+  { className: 'icon-arrow-down-filling' },
+  { className: 'icon-arrow-left-filling' },
+  { className: 'icon-arrow-right-filling' },
+]

packages/components/src/icon/index.ts

@@ -0,0 +1,9 @@
+import { withInstall } from '@lucky-design/common'
+import Icon from './icon.vue'
+import './style.scss'
+
+export const LIcon = withInstall(Icon, 'LIcon')
+
+export default LIcon
+
+export * from './props'

packages/components/src/icon/props.ts

@@ -0,0 +1,12 @@
+import type { ExtractPropTypes } from 'vue'
+
+// enum IconClassNames {}
+
+export const iconProps = {
+  className: {
+    type: String,
+    required: true,
+  },
+}
+
+export type LIconProps = ExtractPropTypes<typeof iconProps>

packages/components/src/tree/props.ts

@@ -1,16 +1,37 @@
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 
-export const treeNodeProps = {
-  data: {
+export const treeNodeProps = {}
+
+export const treeItemProps = {
+  items: {
+    type: Object as PropType<any>,
+    default: () => {},
+  },
+  dataKey: Object as PropType<string | number>,
+  index: Number,
+  icon: {
+    type: String,
+    default: 'icon-arrow-right-filling',
+  },
+  defaultOpenNodes: {
+    type: Array,
+    default: () => [],
+  },
+  options: {
     type: Object,
-    default() {
+    default: () => {
       return {}
     },
   },
-  showCheckbox: {
-    type: Boolean,
-    default: false,
+  tabIndexs: Object as PropType<string | number>,
+  multiple: Boolean,
+  defaultSelectNodes: {
+    type: Array,
+    default: () => [],
+  },
+  children: {
+    type: Array as PropType<any>,
   },
 }
-
 export type TreeNodeProps = ExtractPropTypes<typeof treeNodeProps>
+export type TreeItemProps = ExtractPropTypes<typeof treeItemProps>

packages/components/src/tree/style.scss

@@ -1,35 +0,0 @@
-
-.tree-ul,
-.tree-li {
-  list-style: none;
-  padding-left: 10px;
-}
-.notchild {
-  padding-left: 1rem;
-  text-indent: 0.5rem;
-}
-.titleactive {
-  color: red;
-}
-.tree-expand {
-  width: 0.5rem;
-  height: 0.5rem;
-  display: inline-block;
-  margin: 0 0.6rem;
-  border-bottom: 1.5px solid;
-  border-right: 1.5px solid;
-  border-bottom-right-radius: 1px;
-  transform: translateY(-0.25rem) rotate(45deg);
-  transition: all 0.3s ease-out;
-}
-.treeclose {
-  transform: translateY(-0.15rem) rotate(-45deg);
-}
-.node-nav {
-  margin-top: 2px;
-  padding: 5px 0;
-  cursor: pointer;
-}
-.node-nav:hover {
-  background-color: #e8eff1;
-}

packages/components/src/tree/tree.vue

@@ -1,9 +1,52 @@
 <script setup lang="ts">
-import TestTreeNode from './TestTreeNode.vue'
+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,
+    default: () => [],
+  },
+})
+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)
+}
 </script>
 
 <template>
-  <TestTreeNode />
+  <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>
 </template>
-
-<style scoped></style>