feat: 新增打包配置

TingShine · Feb 5, 2023 · ba6b3ff · ba6b3ff
1 parent baa7dcc
commit ba6b3ff
Show file tree

Hide file tree

Showing 13 changed files with 84 additions and 42 deletions.
diff --git a/examples/init-data-example.vue b/examples/init-data-example.vue
@@ -1,9 +1,15 @@
 <template>
   <draggable-tree :init-data="initObject" @change="handleChange" />
+  <json-displayer
+    title="初始化数据为对象"
+    :value="displayData"
+  ></json-displayer>
 </template>
 
 <script lang="ts" setup>
 import DraggableTree from "../packages/components/draggable-nested-tree/index.vue";
+import JsonDisplayer from "./json-displayer/index.vue";
+import { ref } from "vue";
 
 const initObject = {
   Shrek: {},
@@ -17,7 +23,9 @@ const initObject = {
   Yes: [],
 };
 
+const displayData = ref([]);
+
 const handleChange = (data: any) => {
-  console.log(data);
+  displayData.value = data;
 };
 </script>
diff --git a/examples/init-treedata-example.vue b/examples/init-treedata-example.vue
@@ -1,10 +1,15 @@
 <template>
   <draggable-tree :init-tree-data="initTreeData" @change="handleChange" />
+  <json-displayer
+    title="初始化数据为树结构数据"
+    :value="displayData"
+  ></json-displayer>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
 import DraggableTree from "../packages/components/draggable-nested-tree/index.vue";
+import JsonDisplayer from "./json-displayer/index.vue";
 
 const initTreeData = ref([
   {
@@ -57,7 +62,9 @@ const initTreeData = ref([
   },
 ]);
 
+const displayData = ref([]);
+
 const handleChange = (data: any) => {
-  console.log(data);
+  displayData.value = data;
 };
 </script>
diff --git a/packages/components/json-displayer/index.vue → examples/json-displayer/index.vue b/packages/components/json-displayer/index.vue → examples/json-displayer/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="bg-amber-100 rounded-md shadow-xl opcacity-95 p-4 text-sm">
-    <h3 class="text-lg font-bold">{{ title }}</h3>
+    <h3 class="text-lg font-bold mb-2">{{ title }}</h3>
     <pre>{{ valueString }}</pre>
   </div>
 </template>

diff --git a/package.json b/package.json
@@ -1,17 +1,39 @@
 {
   "name": "vue-draggable-tree-next",
   "version": "1.0.0",
-  "private": true,
+  "description": "The json tree built based on vue3 supports node dragging, adding, editing and deleting, etc.",
   "author": {
     "name": "TingShine",
     "url": "https://github.com/TingShine"
   },
   "repository": {
     "url": "https://github.com/TingShine/vue-draggable-tree-next"
   },
+  "module": "./dist/index.js",
+  "browser": "./dist/index.js",
+  "types": "./dist/packages/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/packages/index.d.ts",
+      "browser": "./dist/index.js",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "keywords": [
+    "vue3",
+    "draggable",
+    "tree",
+    "json",
+    "custom",
+    "tdesign"
+  ],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check build-only",
+    "build": " npm run build-only",
     "preview": "vite preview",
     "test:unit": "vitest --environment jsdom --root src/",
     "build-only": "vite build",
@@ -20,9 +42,11 @@
   },
   "dependencies": {
     "vue": "^3.2.45",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "^4.1.0",
+    "tdesign-vue-next": "^1.0.4"
   },
   "devDependencies": {
+    "vite-plugin-dts": "^1.7.2",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/jsdom": "^20.0.1",
     "@types/node": "^18.11.12",
@@ -47,6 +71,7 @@
     "vue-tsc": "^1.0.12"
   },
   "peerDependencies": {
-    "tdesign-vue-next": "^1.0.4"
+    "tdesign-vue-next": "^1.0.4",
+    "vue": "^3.2.45"
   }
 }
diff --git a/packages/assets/index.css b/packages/assets/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/components/draggable-nested-tree/index.ts b/packages/components/draggable-nested-tree/index.ts
@@ -4,3 +4,4 @@ export * from "./useHover";
 export * from "./useId";
 export * from "./config";
 export * from "./useTreeData";
+export * from "./type";
diff --git a/packages/components/draggable-nested-tree/index.vue b/packages/components/draggable-nested-tree/index.vue
@@ -1,6 +1,5 @@
 <template>
-  <nested-tree :list="treeData" @custom-add="handleCustomAdd"></nested-tree>
-  <json-displayer :value="parsedTreeData" title="对应数据"></json-displayer>
+  <nested-tree :list="treeData" @custom-add="handleCustomAdd"> </nested-tree>
 </template>
 
 <script lang="ts">
@@ -14,7 +13,6 @@ import {
   computed,
   watchEffect,
 } from "vue";
-import JsonDisplayer from "../json-displayer/index.vue";
 import type { INodeItem } from "./type";
 import { useTreeData } from ".";
 
@@ -23,7 +21,6 @@ export default defineComponent({
   emits: ["change", "custom-add"],
   components: {
     NestedTree,
-    JsonDisplayer,
   },
   props: {
     initData: {

diff --git a/packages/components/draggable-nested-tree/nested-tree.vue b/packages/components/draggable-nested-tree/nested-tree.vue
@@ -146,17 +146,8 @@
               parent-type="Array"
               @custom-add="handleCustomAdd"
             >
-              <template #tools="{ element: childElement, parent }">
-                <default-tool-bar
-                  :tools="getToolBar(childElement.type, copyNodeItem)"
-                  :visible="childElement.showToolBar"
-                  @choose="
-                    (type) => handleChooseTool(type, childElement, parent)
-                  "
-                >
-                  <slot name="tools" :element="childElement" :parent="parent">
-                  </slot>
-                </default-tool-bar>
+              <template v-for="slot in Object.keys(slots)" #[slot]="scope">
+                <slot :name="slot" v-bind="scope"></slot>
               </template>
             </nested-tree>
           </template>
@@ -172,17 +163,8 @@
               parent-type="Object"
               @custom-add="handleCustomAdd"
             >
-              <template #tools="{ element: childElement, parent }">
-                <default-tool-bar
-                  :tools="getToolBar(childElement.type, copyNodeItem)"
-                  :visible="childElement.showToolBar"
-                  @choose="
-                    (type) => handleChooseTool(type, childElement, parent)
-                  "
-                >
-                  <slot name="tools" :element="childElement" :parent="parent">
-                  </slot>
-                </default-tool-bar>
+              <template v-for="slot in Object.keys(slots)" #[slot]="scope">
+                <slot :name="slot" v-bind="scope"></slot>
               </template>
             </nested-tree>
           </template>
@@ -196,15 +178,14 @@
 import Draggable from "vuedraggable";
 import DefaultToolBar from "../default-toolbar/index.vue";
 import { useDoubleClick } from "../../utils/double-click";
-import { reactive, type PropType, computed, ref } from "vue";
-import type { INodeItem } from "./type";
+import { reactive, type PropType, computed, useSlots } from "vue";
 import {
   CaretDownSmallIcon,
   CaretRightSmallIcon,
 } from "tdesign-icons-vue-next";
 import CascaderInput from "../cascader-input/index.vue";
-import { initNodeItemData, useAddNode, useHover, useTool } from ".";
-import { Tag as TTag, MessagePlugin } from "tdesign-vue-next";
+import { useAddNode, useHover, useTool, type INodeItem } from ".";
+import { Tag as TTag } from "tdesign-vue-next";
 
 const props = defineProps({
   list: {
@@ -218,6 +199,7 @@ const props = defineProps({
 });
 
 const $emit = defineEmits(["customAdd"]);
+const slots = useSlots();
 
 //
 const dragDefaultOptions = reactive({

diff --git a/packages/components/draggable-nested-tree/type.ts b/packages/components/draggable-nested-tree/type.ts
@@ -1,5 +1,3 @@
-import type { IAddNodeType } from "@/utils/config";
-
 export type INodeItemType =
   | "Array"
   | "Object"

diff --git a/packages/index.ts b/packages/index.ts
@@ -0,0 +1,7 @@
+import "./assets/index.css";
+import DraggableTree from "./components/draggable-nested-tree/index.vue";
+import ToolBar from "./components/default-toolbar/index.vue";
+
+export default DraggableTree;
+
+export { DraggableTree, ToolBar };
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,7 +3,7 @@
 module.exports = {
   content: [
     "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./examples/**/*.{vue,js,ts,jsx,tsx}",
     "./packages/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {

diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -1,8 +1,9 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "examples/**/*", "packages/**/*.vue"],
+  "include": ["env.d.ts", "examples/**/*", "packages/**/*.*", ],
   "exclude": ["packages/**/__tests__/*"],
   "compilerOptions": {
+    "target": "es6",
     "composite": true,
     "baseUrl": ".",
     "paths": {

diff --git a/vite.config.ts b/vite.config.ts
@@ -3,13 +3,26 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import svgLoader from "vite-svg-loader";
+import { resolve } from "path";
+import dts from "vite-plugin-dts";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx(), svgLoader()],
+  plugins: [vue(), vueJsx(), svgLoader(), dts()],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./packages", import.meta.url)),
     },
   },
+  build: {
+    lib: {
+      entry: resolve(__dirname, "packages/index.ts"),
+      formats: ["es"],
+      fileName: "index",
+    },
+    copyPublicDir: false,
+    rollupOptions: {
+      external: ["vue", "tdesign-vue-next", "tdesign-icons-vue-next"],
+    },
+  },
 });