docs: update

mewcoder · Sep 11, 2022 · 5462e7e · 5462e7e
1 parent df672d7
commit 5462e7e
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 43 deletions.
diff --git a/docs/component/tree.md b/docs/component/tree.md
@@ -1,38 +1,66 @@
-# 树 tree
+# Tree
 
-## 用法
+## 基础使用
 
-### 基础使用
-
-<a-rate v-model="rateVal" />
+<a-tree :data="treeVal" show-checkbox></a-tree>
 
 ```vue
 <template>
-  <a-rate v-model="rateVal" />
+  <a-tree :data="treeVal" show-checkbox></a-tree>
 </template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-const rateVal = ref(2);
-</script>
 ```
 
-<script lang="ts" setup>
-import { ref } from "vue";
-const rateVal = ref(2);
-</script>
-
-## API
-
-### props
+## 属性
 
 | 名称                 | 类型          | 可选值 | 默认值 | 说明   |
 | -------------------- | ------------- | ------ | ------ | ------ |
 | modelValue / v-model | string/number | -      | -      | 绑定值 |
 | disabled             | boolean       | -      | false  | 禁用   |
 
-### 事件
+## 事件
 
 | 名称   | 说明 | 参数 |
 | ------ | ---- | ---- |
 | change | -    | -    |
+
+<script lang="ts" setup>
+import { reactive } from "vue";
+const treeVal = reactive([
+  {
+    title: 'parent 1',
+    expand: true,
+    checked: false,
+    children: [
+      {
+        title: 'parent 1-1',
+        expand: true,
+        checked: false,
+        children: [
+          {
+            title: 'leaf 1-1-1',
+            checked: false
+          },
+          {
+            title: 'leaf 1-1-2',
+            checked: false
+          }
+        ]
+      },
+      {
+        title: 'parent 1-2',
+        checked: false,
+        children: [
+          {
+            title: 'leaf 1-2-1',
+            checked: false
+          },
+          {
+            title: 'leaf 1-2-1',
+            checked: false
+          }
+        ]
+      }
+    ]
+  }
+]);
+</script>
diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts
@@ -1,6 +1,10 @@
 import { ExtractPropTypes, PropType } from 'vue';
 
 export const checkboxProps = {
+  modelValue: {
+    type: Array as PropType<string[] | number[]>,
+    default: () => []
+  },
   label: {
     type: [String, Number] as PropType<string | number>
   },

diff --git a/packages/components/inner/caret-down.vue b/packages/components/inner/caret-down.vue
@@ -0,0 +1,19 @@
+<template>
+  <i class="a-icon">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 512 512"
+    >
+      <path
+        d="M98 190.06l139.78 163.12a24 24 0 0 0 36.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  </i>
+</template>
+<script lang="ts">
+export default {
+  name: 'AIconCaretDown'
+};
+</script>
diff --git a/packages/components/inner/caret-forward.vue b/packages/components/inner/caret-forward.vue
@@ -0,0 +1,19 @@
+<template>
+  <i class="a-icon">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 512 512"
+    >
+      <path
+        d="M190.06 414l163.12-139.78a24 24 0 0 0 0-36.44L190.06 98c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  </i>
+</template>
+<script lang="ts">
+export default {
+  name: 'AIconCaretForWard'
+};
+</script>
diff --git a/packages/components/inner/index.ts b/packages/components/inner/index.ts
@@ -1 +1,5 @@
 export { default as AIconClose } from './close.vue';
+
+export { default as AIconCaretDown } from './caret-down.vue';
+
+export { default as AIconCaretForWard } from './caret-forward.vue';
diff --git a/packages/components/tree/src/node.vue b/packages/components/tree/src/node.vue
@@ -2,25 +2,12 @@
   <ul class="tree-ul">
     <li class="tree-li">
       <span class="tree-expand" @click="handleExpand">
-        <span
-          v-if="
-            treeData.children && treeData.children.length && !treeData.expand
-          "
-          >+</span
-        >
-        <span
-          v-if="
-            treeData.children && treeData.children.length && treeData.expand
-          "
-          >-</span
-        >
+        <AIconCaretForWard
+          v-if="treeData.children && treeData.children.length && !treeData.expand"
+        />
+        <AIconCaretDown v-if="treeData.children && treeData.children.length && treeData.expand" />
       </span>
-      <input
-        v-if="showCheckbox"
-        type="checkbox"
-        :value="treeData.checked"
-        @input="handleCheck"
-      />
+      <input v-if="showCheckbox" type="checkbox" :value="treeData.checked" @input="handleCheck" />
       <span>{{ treeData.title }}</span>
       <tree-node
         v-if="treeData.expand"
@@ -34,8 +21,9 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from "vue";
-import { nodeProps } from "./types";
+import { reactive } from 'vue';
+import { nodeProps } from './types';
+import { AIconCaretForWard, AIconCaretDown } from '../../inner';
 
 const props = defineProps(nodeProps);
 
@@ -62,7 +50,7 @@ const updateTreeDown = (data: any, checked: any) => {
 
 <script lang="ts">
 export default {
-  name: "TreeNode",
-  inheritAttrs: false,
+  name: 'TreeNode',
+  inheritAttrs: false
 };
 </script>
diff --git a/packages/theme/dialog.css b/packages/theme/dialog.css
@@ -4,7 +4,7 @@
 }
 
 .a-dialog {
-  @apply bg-white mx-auto z-2001;
+  @apply bg-white rounded-lg mx-auto z-2001;
   @apply w-min-3;
 }
 

diff --git a/packages/theme/tree.css b/packages/theme/tree.css
@@ -6,3 +6,7 @@
 .tree-expand {
   cursor: pointer;
 }
+
+.tree-expand .a-icon {
+  @apply w-4 h-4;
+}