From b05191a32d2603a85e6ac1294d78a5aa74efa391 Mon Sep 17 00:00:00 2001
From: 1549469775 <1549469775@qq.com>
Date: Tue, 21 Jun 2022 11:01:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/button/button.vue   |  9 +----
 packages/components/button/index.ts     |  3 +-
 packages/components/captcha/captcha.vue |  8 +----
 packages/components/captcha/index.ts    |  3 +-
 packages/components/tree/index.ts       |  3 +-
 packages/components/tree/node.vue       | 60 ++++++++++++++-------------------
 packages/components/tree/tree.vue       | 21 +++++++-----
 packages/components/tree/util.ts        |  2 ++
 packages/playground/components.d.ts     |  1 +
 packages/playground/src/dev/captcha.vue |  2 +-
 packages/playground/src/dev/tree.vue    | 15 +++++++--
 packages/playground/vite.config.ts      |  4 ++-
 readme.md                               |  4 ++-
 13 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/packages/components/button/button.vue b/packages/components/button/button.vue
index 4adbc9e..e5c7624 100644
--- a/packages/components/button/button.vue
+++ b/packages/components/button/button.vue
@@ -1,19 +1,12 @@
 <template>
-    <div>ffffffffffff-{{ test }}</div>
+    <div>ffffffffffff</div>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-    name: "ps-button"
-})
-</script>
-
 <script lang="ts" setup>
 import { defineComponent, onBeforeUnmount, ref } from "vue"
 const props = defineProps<{
     test: string
 }>()
-console.log(props);
 
 const emits = defineEmits<{
 
diff --git a/packages/components/button/index.ts b/packages/components/button/index.ts
index fe6221e..a0890c9 100644
--- a/packages/components/button/index.ts
+++ b/packages/components/button/index.ts
@@ -1,8 +1,9 @@
 import { App } from "vue"
 import PsButton from "./button.vue"
 
+PsButton.name="ps-button"
 PsButton.install = function(app: App) {
-    app.component(PsButton.name || "ps-button", PsButton)
+    app.component(PsButton.name, PsButton)
 }
 
 export {
diff --git a/packages/components/captcha/captcha.vue b/packages/components/captcha/captcha.vue
index 67949bf..33592c0 100644
--- a/packages/components/captcha/captcha.vue
+++ b/packages/components/captcha/captcha.vue
@@ -8,14 +8,8 @@
     </div>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-    name: "ps-captcha"
-})
-</script>
-
 <script lang="ts" setup>
-import { defineComponent, onBeforeUnmount, ref } from "vue"
+import { onBeforeUnmount, ref } from "vue"
 const props = withDefaults(
     defineProps<{
         duration?: number
diff --git a/packages/components/captcha/index.ts b/packages/components/captcha/index.ts
index e709ec5..b7ed8ff 100644
--- a/packages/components/captcha/index.ts
+++ b/packages/components/captcha/index.ts
@@ -1,8 +1,9 @@
 import { App } from "vue"
 import PsCaptcha from "./captcha.vue"
 
+PsCaptcha.name = "ps-captcha"
 PsCaptcha.install = function(app: App) {
-    app.component(PsCaptcha.name || "ps-captcha", PsCaptcha)
+    app.component(PsCaptcha.name, PsCaptcha)
 }
 
 export {
diff --git a/packages/components/tree/index.ts b/packages/components/tree/index.ts
index 8e4d091..d8e0cb0 100644
--- a/packages/components/tree/index.ts
+++ b/packages/components/tree/index.ts
@@ -4,8 +4,9 @@ import PsTree from "./tree.vue"
 export * from "./util"
 export * from "./type"
 
+PsTree.name = "ps-tree"
 PsTree.install = function(app: App) {
-    app.component(PsTree.name || "ps-tree", PsTree)
+    app.component(PsTree.name, PsTree)
 }
 
 export {
diff --git a/packages/components/tree/node.vue b/packages/components/tree/node.vue
index d8c3bee..03e84e8 100644
--- a/packages/components/tree/node.vue
+++ b/packages/components/tree/node.vue
@@ -11,44 +11,39 @@
                 }">
                     {{ data.title }} - {{ level * 10 + 'px' }}
                 </div>
-                <NiuTreeDrag v-bind="props" :status="status" :style="{
-                    marginLeft: level * 10 + 'px',
-                }"></NiuTreeDrag>
             </slot>
+            <div :style="{ marginLeft: level * 10 + 'px' }" :class="[
+                {
+                    'ps-tree-drag-up':
+                        dataSourceKey != data.key &&
+                        dataSourceKey != undefined &&
+                        !isChildOf(data.key, dataSourceKey, list) &&
+                        status === ENiuTreeStatus.DragUp,
+                    'ps-tree-drag-in':
+                        dataSourceKey != data.key &&
+                        dataSourceKey &&
+                        !isChildOf(data.key, dataSourceKey, list) &&
+                        status === ENiuTreeStatus.DragIn,
+                    'ps-tree-drag-down':
+                        dataSourceKey != data.key &&
+                        dataSourceKey &&
+                        !isChildOf(data.key, dataSourceKey, list) &&
+                        status === ENiuTreeStatus.DragDown,
+                },
+            ]"></div>
         </div>
         <div class="ps-tree-sub-node" v-if="(opts.justOpen || data.isExpand) && data.children && data.children.length">
-            <template v-for="(item, index) in data.children" :key="item.key">
-                <node @onDragstart="(e: INiuTreeKey) => emit('onDragstart', e)"
-                    @onDragend="(e: INiuTreeKey) => emit('onDragend', e)"
-                    @onDrop="(e: INiuTreeKey, s?: ENiuTreeStatus) => emit('onDrop', e, s)"
-                    @onDragover="(e: INiuTreeKey) => emit('onDragover', e)"
-                    @onDragleave="(e: INiuTreeKey) => emit('onDragleave', e)"
-                    @click="(e: INiuTreeData) => emit('click', e)" :data-source-key="dataSourceKey" :data="item"
-                    :list="list" :level="level + 1">
-                    <template
-                        #default="{ data, deep, dataSourceKey, status }: { data: INiuTreeData, deep: number, dataSourceKey: INiuTreeKey, status: ENiuTreeStatus }">
-                        <slot :data="data" :deep="deep" :dataSourceKey="dataSourceKey" :status="status">
-                            <div :style="{
-                                marginLeft: deep * 10 + 'px',
-                                'position': 'relative',
-                                zIndex: 10
-                            }">
-                                {{ data.title }} - {{ deep * 10 + 'px' }}
-                            </div>
-                            <NiuTreeDrag v-bind="props" :status="status" :style="{
-                                marginLeft: deep * 10 + 'px',
-                            }"></NiuTreeDrag>
-                        </slot>
-                    </template>
-                </node>
-            </template>
+            <slot name="children" :datalist="data.children" :level="level + 1" :status="status">
+            </slot>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
+import node from './node.vue'
+import { inject, ref, provide, useSlots } from 'vue'
 import { isChildOf } from './util'
-import NiuTreeDrag from './tree-drag.vue';
+import TreeDrag from './tree-drag.vue';
 import { ENiuTreeStatus, INiuTreeData, INiuTreeKey } from './type';
 const props = withDefaults(
     defineProps<{
@@ -61,6 +56,7 @@ const props = withDefaults(
         level: 0,
     }
 )
+
 const opts = inject("tree:opts", {
     justOpen: false
 })
@@ -146,9 +142,3 @@ function onDragleave() {
     emit('onDragleave', props.data.key)
 }
 </script>
-<script lang="ts">
-import { defineComponent, inject, ref, provide } from 'vue'
-export default defineComponent({
-    name: 'ps-tree-node',
-})
-</script>
\ No newline at end of file
diff --git a/packages/components/tree/tree.vue b/packages/components/tree/tree.vue
index 4d920fc..1d3a1fa 100644
--- a/packages/components/tree/tree.vue
+++ b/packages/components/tree/tree.vue
@@ -7,11 +7,24 @@
                     #default="{ data, deep, dataSourceKey, status }: { data: INiuTreeData, deep: number, dataSourceKey: INiuTreeKey, status: ENiuTreeStatus }">
                     <slot :data="data" :deep="deep" :dataSourceKey="dataSourceKey" :status="status"></slot>
                 </template>
+                <template #children="{datalist, level}">
+                    <template v-for="(item, index) in datalist" :key="index">
+                        <node @onDragstart="onDragstart" @onDragEnd="onDragEnd" @onDrop="onDrop" :data-source-key="dataSourceKey"
+                            :data="item" :list="list" :level="level" @click="(item) => clickNode(item)">
+                            <template
+                                #default="{ data, deep, dataSourceKey, status }: { data: INiuTreeData, deep: number, dataSourceKey: INiuTreeKey, status: ENiuTreeStatus }">
+                                <slot :data="data" :deep="deep" :dataSourceKey="dataSourceKey" :status="status"></slot>
+                            </template>
+                        </node>
+                    </template>
+                </template>
             </node>
         </template>
     </div>
 </template>
 <script lang="ts" setup>
+import { provide, ref } from "vue"
+import node from './node.vue'
 import { INiuTreeData, INiuTreeKey, ENiuTreeStatus } from './type'
 import {
     findByKey,
@@ -116,12 +129,4 @@ function onDrop(key: INiuTreeKey, status?: ENiuTreeStatus) {
     dataSourceKey.value = undefined
 }
 </script>
-<script lang="ts">
-import { defineComponent, provide, ref } from "vue"
-import node from './node.vue'
-
-export default defineComponent({
-    name: 'ps-tree',
-})
-</script>
 
diff --git a/packages/components/tree/util.ts b/packages/components/tree/util.ts
index 75dea1f..e9cf271 100644
--- a/packages/components/tree/util.ts
+++ b/packages/components/tree/util.ts
@@ -41,6 +41,8 @@ export function isChildOf(
     b_key: INiuTreeKey,
     treeData: INiuTreeData[]
 ) {
+    if (!a_key) return false
+    if (!b_key) return false
     if (a_key === b_key) return false
 
     let target_node = findByKey(b_key, treeData)
diff --git a/packages/playground/components.d.ts b/packages/playground/components.d.ts
index 16c12af..ba1a7bf 100644
--- a/packages/playground/components.d.ts
+++ b/packages/playground/components.d.ts
@@ -8,6 +8,7 @@ declare module '@vue/runtime-core' {
     Panel: typeof import('./src/components/Panel.vue')['default']
     PsButton: typeof import('@princess-ui/components/button')['PsButton']
     PsCaptcha: typeof import('@princess-ui/components/captcha')['PsCaptcha']
+    PsTree: typeof import('@princess-ui/components/tree')['PsTree']
   }
 }
 
diff --git a/packages/playground/src/dev/captcha.vue b/packages/playground/src/dev/captcha.vue
index c97e3dc..6179c36 100644
--- a/packages/playground/src/dev/captcha.vue
+++ b/packages/playground/src/dev/captcha.vue
@@ -21,7 +21,7 @@ function send(start: () => void, done: (isDone: boolean) => void) {
             <ps-captcha @send="send" border :duration="5">sada</ps-captcha>
         </div>
     </Panel>
-    <Panel name="按钮">
+    <Panel name="按钮ss">
         <ps-button></ps-button>
     </Panel>
 </template>
diff --git a/packages/playground/src/dev/tree.vue b/packages/playground/src/dev/tree.vue
index e62cac0..89fedc1 100644
--- a/packages/playground/src/dev/tree.vue
+++ b/packages/playground/src/dev/tree.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue"
-import PsTree, { convertTreeData } from "@princess-ui/components/tree"
+import { convertTreeData } from "@princess-ui/components/tree"
 
 const list = ref(convertTreeData([
     {
@@ -26,6 +26,17 @@ const list = ref(convertTreeData([
 
 <template>
     <Panel name="Tree">
-        <ps-tree :list="list"></ps-tree>
+        <ps-tree :list="list">
+            <template #default="{ data, deep }">
+                <div :style="{
+                    marginLeft: deep * 10 + 'px',
+                    'position': 'relative',
+                    zIndex: 10
+                }">
+                    {{ data.isFolder }}-{{ data.title }} 11-22 {{ deep * 10 + 'px' }}
+                </div>
+            </template>
+        </ps-tree>
+        {{ list }}
     </Panel>
 </template>
diff --git a/packages/playground/vite.config.ts b/packages/playground/vite.config.ts
index ecd52ec..7ed6ff3 100644
--- a/packages/playground/vite.config.ts
+++ b/packages/playground/vite.config.ts
@@ -24,7 +24,9 @@ export default defineConfig({
                     type: 'component',
                     resolve: (componentName: string) => {
                         if (componentName.startsWith('Ps')) {
-                            const name = _.lowerFirst(componentName.slice(2))   
+                            const name = _.lowerFirst(componentName.slice(2))  
+                            console.log(name);
+                             
                             return {
                                 name: componentName,
                                 from: `@princess-ui/components/${name}`,
diff --git a/readme.md b/readme.md
index 8a4e75e..e6931c2 100644
--- a/readme.md
+++ b/readme.md
@@ -1,4 +1,6 @@
 ## 组件库UI
 - https://zhuanlan.zhihu.com/p/450698973
 - https://github.com/dewfall123/vitepress-for-component/blob/master/package.json
-- https://d.umijs.org/zh-CN
\ No newline at end of file
+- https://d.umijs.org/zh-CN
+
+https://rollupjs.org/guide/en/#input
\ No newline at end of file