fixed bug

docs/readme.md

@@ -0,0 +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
+
+https://rollupjs.org/guide/en/#input

packages/components/tree/test.vue

@@ -1,13 +0,0 @@
-<template>
-    <div>asdsa</div>
-</template>
-<script lang="ts" setup>import { useSlots } from 'vue';
-
-const slot = useSlots()
-console.log(slot);
-
-</script>
-
-<style lang="less" scoped>
-
-</style>

packages/components/tree/tree.vue

@@ -3,7 +3,8 @@
         <template v-for="(item, index) in list" :key="item.key">
             <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 }">
+                <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>
@@ -31,6 +32,7 @@ const props = withDefaults(
         autoExpand?: boolean
         justOpenOne?: boolean
         level?: number
+        dropFn?(status: ENiuTreeStatus, data: INiuTreeData, targetData: INiuTreeData): boolean | Promise<boolean>
     }>(),
     {
         justOpenOne: false,
@@ -69,56 +71,60 @@ function onDragstart(key: INiuTreeKey) {
 function onDragEnd(key: INiuTreeKey) {
     dataSourceKey.value = undefined
 }
-function onDrop(key: INiuTreeKey, status?: ENiuTreeStatus) {
+async function onDrop(key: INiuTreeKey, status?: ENiuTreeStatus) {
     if (!dataSourceKey.value) return
     if (!key) return
     let data = findByKey(dataSourceKey.value, props.list)
     let targetData = findByKey(key, props.list)
-    switch (status) {
+    const sourceKey = dataSourceKey.value;
-        case ENiuTreeStatus.DragIn:
+    dataSourceKey.value = undefined
-            if (
+    const isSuccess = (await props.dropFn?.(status, data, targetData))
-                data &&
+    if (isSuccess == undefined || isSuccess) {
-                targetData &&
+        switch (status) {
-                dataSourceKey.value != key &&
+            case ENiuTreeStatus.DragIn:
-                !isChildOf(key, dataSourceKey.value, props.list) &&
+                if (
-                targetData.children
+                    data &&
-            ) {
+                    targetData &&
-                removeByKey(dataSourceKey.value, props.list)
+                    sourceKey != key &&
-                targetData.children.push(data)
+                    !isChildOf(key, sourceKey, props.list) &&
-                if (props.autoExpand) {
+                    targetData.children
-                    targetData.isExpand = true
+                ) {
+                    removeByKey(sourceKey, props.list)
+                    targetData.children.push(data)
+                    if (props.autoExpand) {
+                        targetData.isExpand = true
+                    }
+                    emit("change")
+                }
+                break
+            case ENiuTreeStatus.DragDown:
+                // 按索引往列表添加节点
+                if (
+                    data &&
+                    targetData &&
+                    sourceKey != key &&
+                    !isChildOf(key, sourceKey, props.list)
+                ) {
+                    removeByKey(sourceKey, props.list)
+                    insertAfterByKey(key, data, props.list)
+                    emit("change")
                 }
-                emit("change")
+                break
-            }
+            case ENiuTreeStatus.DragUp:
-            break
+                // 按索引往列表添加节点
-        case ENiuTreeStatus.DragDown:
+                if (
-            // 按索引往列表添加节点
+                    data &&
-            if (
+                    targetData &&
-                data &&
+                    sourceKey != key &&
-                targetData &&
+                    !isChildOf(key, sourceKey, props.list)
-                dataSourceKey.value != key &&
+                ) {
-                !isChildOf(key, dataSourceKey.value, props.list)
+                    removeByKey(sourceKey, props.list)
-            ) {
+                    insertBeforeByKey(key, data, props.list)
-                removeByKey(dataSourceKey.value, props.list)
+                    emit("change")
-                insertAfterByKey(key, data, props.list)
+                }
-                emit("change")
+                break
-            }
+        }
-            break
-        case ENiuTreeStatus.DragUp:
-            // 按索引往列表添加节点
-            if (
-                data &&
-                targetData &&
-                dataSourceKey.value != key &&
-                !isChildOf(key, dataSourceKey.value, props.list)
-            ) {
-                removeByKey(dataSourceKey.value, props.list)
-                insertBeforeByKey(key, data, props.list)
-                emit("change")
-            }
-            break
     }
-    dataSourceKey.value = undefined
 }
 </script>
 

packages/playground/package.json

@@ -8,8 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.21"
-    "vue": "3.2.33"
   },
   "devDependencies": {
     "@princess-ui/components": "link:..\\components",
@@ -20,6 +19,7 @@
     "typescript": "^4.5.4",
     "unplugin-vue-components": "^0.19.5",
     "vite": "^2.9.12",
+    "vue": "link:..\\..\\node_modules\\vue",
     "vite-plugin-windicss": "^1.8.4",
     "vue-tsc": "^0.35.2",
     "windicss": "^3.5.4"

packages/playground/src/App.vue

@@ -1,16 +1,10 @@
 <script setup lang="ts">
 import DevCaptcha from "./dev/captcha.vue"
 import DevTree from "./dev/tree.vue"
-// import a, * as b from "@princess-ui/components"
-// import c, * as d from "princess-ui"
-// console.log(a);
-// console.log(b);
-// console.log(c);
-// console.log(d);
 </script>
 
 <template>
-    <DevCaptcha></DevCaptcha>
+    <!-- <DevCaptcha></DevCaptcha> -->
     <DevTree></DevTree>
 </template>
 

packages/playground/src/dev/test.vue

@@ -1,13 +0,0 @@
-<template>
-    <div>asdsa</div>
-</template>
-<script lang="ts" setup>import { useSlots } from 'vue';
-
-const slot = useSlots()
-console.log(slot);
-
-</script>
-
-<style lang="less" scoped>
-
-</style>

packages/playground/src/dev/tree.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { ref, useSlots } from "vue"
-// import PsTree, { convertTreeData } from "@princess-ui/components/tree"
+import PsTree, { convertTreeData, ENiuTreeStatus, INiuTreeData } from "@princess-ui/components/tree"
-import PsTree, { convertTreeData } from "../../../tree"
 import "@princess-ui/theme-chalk/dist/ps-tree.css"
-// import PsTree from "../../../components/tree/test.vue"
 
 const list = ref(convertTreeData([
     {
@@ -26,13 +24,18 @@ const list = ref(convertTreeData([
         title: "3"
     },
 ]))
-const slot = useSlots()
-console.log(slot);
 
+const dropFn = (status: ENiuTreeStatus, data: INiuTreeData<any>, targetData: INiuTreeData<any>): Promise<boolean> => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(true)
+        }, 2000);
+    })
+}
 </script>
 
 <template>
-    <Panel name="Tree">
+    <Panel name="Tree" desc="普通的树形结构">
         <ps-tree :list="list">
             <template #default="{ data, deep }">
                 <div :style="{
@@ -44,6 +47,18 @@ console.log(slot);
                 </div>
             </template>
         </ps-tree>
-        {{ list }}
+    </Panel>
+    <Panel name="Tree" desc="延迟2000ms执行操作">
+        <ps-tree :dropFn="dropFn" :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>
     </Panel>
 </template>

packages/princess-ui/README.md

@@ -0,0 +1,31 @@
+# princess-ui
+
+```
+pnpm i princess-ui
+
+```
+
+## 安装
+**全部安装**
+```
+import PrincessUI from "princess-ui"
+import "princess-ui/theme-chalk/index.css"
+...
+app.use(PrincessUI)
+```
+
+**按需使用**
+使用`unplugin-vue-components`插件
+```
+import Components from "unplugin-vue-components/vite"
+import PrincessResolver from "princess-ui/PrincessResolver"
+...
+    Components({
+        resolvers: [PrincessResolver()],
+    }),
+...
+```
+
+**使用umd**
+
+已实现，待补充

packages/princess-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "princess-ui",
-  "version": "0.0.6",
+  "version": "0.0.8-beta",
   "description": "a vue3 ui, just for personal use",
   "scripts": {
       "build": "tsc ./PrincessResolver.ts --skipLibCheck --esModuleInterop"
@@ -10,14 +10,25 @@
     "components.d.ts",
     "theme-chalk",
     "PrincessResolver.ts",
-    "PrincessResolver.js"
+    "PrincessResolver.js",
+    "README.md"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "keywords": [],
   "author": "noderun",
   "repository": {
-    "url": "http://git.xieyaxin.top/Oxygen/princess-ui"
+    "url": "http://git.xieyaxin.top/NIU-UI/princess-ui.git"
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not dead",
+    "not IE 11"
+  ],
+  "peerDependencies": {
+    "vue": ">=3.2.0 <4.0.0"
   },
   "license": "ISC"
 }

readme.md

@@ -1,6 +1,3 @@
-## 组件库UI
+> 有想法的可加发送1549469775@qq.com联系
-- https://zhuanlan.zhihu.com/p/450698973
-- https://github.com/dewfall123/vitepress-for-component/blob/master/package.json
-- https://d.umijs.org/zh-CN
 
-https://rollupjs.org/guide/en/#input
+暂不是用github管理，一个是慢，一个是十分不放心！！！