Merge pull request #3 from TingShine/feat/use-td

Feat/use td

.cz-config.js

@@ -0,0 +1,37 @@
+module.exports = {
+  types: [
+    {
+      value: `feat`,
+      name : 'feat:     新功能'
+    },
+    {
+      value: `fix`,
+      name : 'fix:      修复bug'
+    },
+    {
+      value: `docs`,
+      name : 'docs:     文档注释更改'
+    },
+    {
+      value: `refactor`,
+      name : 'refactor: 重构（不修复bug和新增功能）'
+    },
+    {
+      value: `style`,
+      name : 'style:    修改样式问题，不影响功能'
+    },
+    {
+      value: `perf`,
+      name : 'perf:     性能优化'
+    },
+    {
+      value: `test`,
+      name : 'test:     增加测试用例或修正测试用例'
+    },
+    {
+      value: `revert`,
+      name : 'revert:   回退版本'
+    }
+  ],
+  skipQuestions: ['body', 'scopes', 'breaking', 'footer']
+};

.eslintrc.cjs

@@ -7,7 +7,8 @@ module.exports = {
     'plugin:vue/vue3-essential',
     'eslint:recommended',
     '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier'
+    '@vue/eslint-config-prettier',
+    'prettier'
   ],
   parserOptions: {
     ecmaVersion: 'latest'

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

commitlint.config.js

@@ -0,0 +1,5 @@
+export default {
+  extends: ["@commitlint/config-conventional"],
+  ignores: [(commit) => /Merge/.test(commit)],
+  defaultIgnores: true,
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-draggable-tree-next",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "The json tree built based on vue3 supports node dragging, adding, editing and deleting, etc.",
   "author": {
     "name": "TingShine",
@@ -40,7 +40,15 @@
     "test:unit": "vitest --environment jsdom --root src/",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "commit": "git-cz",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue,ts,tsx}": [
+      "prettier --write",
+      "eslint --max-warnings 0 --fix"
+    ]
   },
   "dependencies": {
     "tdesign-icons-vue-next": "^0.1.7",
@@ -49,7 +57,7 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "rollup-plugin-commonjs": "^10.1.0",
+    "@commitlint/config-conventional": "^17.4.3",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/jsdom": "^20.0.1",
     "@types/node": "^18.11.12",
@@ -60,12 +68,18 @@
     "@vue/test-utils": "^2.2.6",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "^10.4.13",
+    "commitizen": "^4.3.0",
+    "commitlint": "^17.4.3",
+    "cz-customizable": "^7.0.0",
     "eslint": "^8.22.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.3.0",
+    "husky": "^8.0.0",
     "jsdom": "^20.0.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
     "prettier": "^2.7.1",
+    "rollup-plugin-commonjs": "^10.1.0",
     "tailwindcss": "^3.2.4",
     "typescript": "~4.7.4",
     "vite": "^4.0.0",
@@ -78,5 +92,10 @@
     "tdesign-vue-next": "^1.0.4",
     "vue": "^3.2.45",
     "tdesign-icons-vue-next": "^0.1.7"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-customizable"
+    }
   }
 }

packages/components/draggable-nested-tree/index.ts

@@ -5,3 +5,4 @@ export * from "./useId";
 export * from "./config";
 export * from "./useTreeData";
 export * from "./type";
+export * from "./useMove";

packages/components/draggable-nested-tree/index.vue

@@ -15,6 +15,7 @@ import {
 } from "vue";
 import type { INodeItem } from "./type";
 import { useTreeData } from ".";
+import { useData } from "./useData";
 
 export default defineComponent({
   name: "DraggableTree",
@@ -38,7 +39,7 @@ export default defineComponent({
     const { getParsedTreeData, generateTreeData, cpmpleteTreeData } =
       useTreeData();
     const { initData, initTreeData } = toRefs(props);
-    const treeData = ref<any[]>([]);
+    const { treeData } = useData()
     const parsedTreeData = computed(() => getParsedTreeData(treeData.value));
     watchEffect(() => {
       if (treeData.value.length) {

packages/components/draggable-nested-tree/nested-tree.vue

@@ -1,10 +1,11 @@
 <template>
   <draggable
-    v-bind="dragOptions"
+    v-bind="dragDefaultOptions"
     tag="div"
     :list="list"
     class="item-container"
     item-key="id"
+    :move="handleMoveCallback"
   >
     <template #item="{ element }">
       <div
@@ -178,13 +179,13 @@
 import Draggable from "vuedraggable";
 import DefaultToolBar from "../default-toolbar/index.vue";
 import { useDoubleClick } from "../../utils/double-click";
-import { reactive, type PropType, computed, useSlots } from "vue";
+import { reactive, type PropType, useSlots } from "vue";
 import {
   CaretDownSmallIcon,
   CaretRightSmallIcon,
 } from "tdesign-icons-vue-next";
 import CascaderInput from "../cascader-input/index.vue";
-import { useAddNode, useHover, useTool, type INodeItem } from ".";
+import { useAddNode, useHover, useMove, useTool, type INodeItem } from ".";
 import { Tag as TTag } from "tdesign-vue-next";
 
 const props = defineProps({
@@ -194,31 +195,20 @@ const props = defineProps({
   },
   parentType: {
     type: String,
-    default: "",
+    default: "Single_Object",
   },
 });
 
 const $emit = defineEmits(["customAdd"]);
 const slots = useSlots();
 
-//
 const dragDefaultOptions = reactive({
   animation: 0,
   group: "DraggableTree",
   disabled: false,
   put: true,
   ghostClass: "ghost",
 });
-const dragOptions = computed(() => {
-  if (props.list.length === 1) {
-    const lastItem = props.list[0];
-    if (lastItem.type !== "Array" || lastItem.type !== "Object") {
-      return Object.assign({ put: false }, dragDefaultOptions);
-    }
-  }
-
-  return dragDefaultOptions;
-});
 
 // 点击展开收缩图标
 const handleClick = (element: INodeItem) => {
@@ -241,11 +231,11 @@ const {
   handleDeleteNode,
 } = useTool();
 const { handleDoubleClick } = useDoubleClick(handleEditKey);
+
+const { handleMoveCallback } = useMove();
 </script>
 
 <style scoped>
-.item-container {
-}
 .item {
   margin: 10px;
   border: solid black 1px;

packages/components/draggable-nested-tree/useAddNode.ts

@@ -86,7 +86,7 @@ export const useAddNode = ($emit: Function) => {
   const addBaseNode = (element: ITempNode, params: IAddNodeParams) => {
     const { type, value, parentType } = params;
 
-    if (parentType !== "Array") {
+    if (!["Array", "Single_Array"].includes(parentType!)) {
       MessagePlugin.error("当前父节点不为数组，无法添加数值节点");
       return;
     }

packages/components/draggable-nested-tree/useData.ts

@@ -0,0 +1,9 @@
+import { ref } from "vue";
+
+const treeData = ref<any[]>([]);
+
+export const useData = () => {
+  return {
+    treeData
+  }
+}

packages/components/draggable-nested-tree/useMove.ts

@@ -0,0 +1,51 @@
+import type { INodeItem } from "./type";
+import { useData } from "./useData";
+import { canAddChildNode } from "./useTool";
+
+export const useMove = () => {
+  const { treeData } = useData();
+
+  const checkChildren = (parent: any[], list: any[]): false | INodeItem => {
+    let parentNode = null;
+    parent.some((node) => {
+      if (node.children === list) {
+        parentNode = node;
+        return true;
+      }
+
+      if (Array.isArray(node.children) && node.children.length > 0) {
+        return checkChildren(node.children, list);
+      }
+
+      return false;
+    });
+
+    return parentNode || false;
+  };
+
+  const handleMoveCallback = (evt: any): boolean => {
+    const { draggedContext, relatedContext } = evt;
+
+    if (!relatedContext.list) {
+      return false;
+    }
+    const fromType = draggedContext.element?.type;
+    const { list } = relatedContext;
+
+    // 判断在root节点
+    if (treeData.value === list) {
+      return canAddChildNode(fromType, "Single_Object");
+    }
+
+    const node = checkChildren(treeData.value, list);
+    if (node) {
+      return canAddChildNode(fromType, node.type!);
+    }
+
+    return true;
+  };
+
+  return {
+    handleMoveCallback,
+  };
+};

packages/components/draggable-nested-tree/useTool.ts

@@ -12,7 +12,7 @@ const baseTools = ["CopyIcon", "EditIcon", "DeleteIcon"];
 const arrObjTools = ["AddIcon", "CopyIcon", "EditIcon", "DeleteIcon"];
 
 // 判断是否能添加子节点
-const canAddChildNode = (
+export const canAddChildNode = (
   childType: INodeItemType,
   parentType: INodeItemType
 ): boolean => {