wopehq · kadiryazici · Feb 17, 2022 · Feb 17, 2022 · Feb 17, 2022 · Feb 17, 2022
diff --git a/.npmignore b/.npmignore
diff --git a/index.html b/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>vue3-tree</title>
   </head>

diff --git a/package.json b/package.json
@@ -18,12 +18,19 @@
     "url": "https://github.com/teamseodo/vue3-tree/issues"
   },
   "homepage": "https://github.com/teamseodo/vue3-tree#readme",
-  "main": "./dist/vue3-tree.umd.js",
-  "module": "./dist/vue3-tree.es.js",
+  "main": "./dist/vue3-tree.cjs",
+  "module": "./dist/vue3-tree.mjs",
+  "jsdelivr": "./dist/vue3-tree.js",
+  "unpkg": "./dist/vue3-tree.js",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "/dist",
+    "README.md"
+  ],
   "exports": {
     ".": {
-      "import": "./dist/vue3-tree.es.js",
-      "require": "./dist/vue3-tree.umd.js"
+      "import": "./dist/vue3-tree.mjs",
+      "require": "./dist/vue3-tree.cjs"
     },
     "./dist/style.css": "./dist/style.css"
   },
@@ -38,14 +45,14 @@
     "tree"
   ],
   "devDependencies": {
-    "vue": "^3.1.4",
     "@vitejs/plugin-vue": "^1.2.4",
     "@vue/compiler-sfc": "^3.0.5",
     "eslint": "^7.30.0",
     "eslint-plugin-vue": "^7.13.0",
     "sass": "^1.35.2",
     "sass-loader": "10.1.1",
-    "vite": "^2.4.0"
+    "vite": "^2.8.3",
+    "vue": "^3.1.4"
   },
   "peerDependencies": {
     "vue": "^3.0.5"

diff --git a/plugins/copyTypes.mjs b/plugins/copyTypes.mjs
@@ -0,0 +1,14 @@
+import fs from 'fs';
+import path from 'path';
+
+const root = process.cwd();
+
+export default () => ({
+  name: 'vue3-tree:types',
+  enforce: 'post',
+  apply: 'build',
+  closeBundle: () => fs.copyFileSync(
+    path.join(root, 'src', 'lib', 'index.d.ts'),
+    path.join(root, 'dist', 'types.d.ts'),
+  ),
+});
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/lib/index.d.ts b/src/lib/index.d.ts
@@ -0,0 +1,123 @@
+import { AllowedComponentProps, ComponentCustomProps, VNode, VNodeProps } from "vue";
+
+/**
+ * Available properties of a node object.
+ */
+export interface TreeNode {
+   /**
+    * Used to identify the node within the tree. Its value must be unique in a nodes array.
+    */
+   id: number | string;
+   /**
+    * Used to display the option.
+    */
+   label: string;
+   /**
+    * Determines whether the node is selected.
+    */
+   checked?: boolean;
+   /**
+    * Determines whether the node is expanded.
+    */
+   expanded?: boolean;
+   /**
+    * Array of node objects.
+    */
+   nodes?: TreeNode[];
+}
+
+export interface TreeProps {
+   /**
+    * An array of nodes to show.
+    */
+   nodes: TreeNode[];
+   /**
+    * Indent size in pixels of tree nodes.
+    * @default 10
+    */
+   indentSize?: number;
+   /**
+    * Vertical space between tree nodes.
+    * @default 10
+    */
+   gap?: number;
+   /**
+    * The background style to apply on hover state.
+    * @default '#e0e0e0'
+    */
+   rowHoverBackground: string;
+   /**
+    * Checkbox availability state.
+    * @default false
+    */
+   useCheckbox?: boolean;
+   /**
+    * Icon status used for parent nodes according to their extensibility state.
+    * @default true
+    */
+   useIcon?: boolean;
+   /**
+    * It is used in cases where the ability to delete items in the tree will be added.
+    * @default false
+    */
+    useRowDelete?: boolean;
+    /**
+     * Value used to display the number of child items below the parent item.
+     * @default false
+     */
+    showChildCount?: boolean;
+    /**
+     * Determines the extensibility of the items in the tree.
+     * @default true
+     */
+    expandable?: boolean;
+    /**
+     * Filters tree by a given word.
+     * @default ''
+     */
+    searchText?: string;
+    /**
+     * This emit is triggered when a node is clicked or selected.
+     */
+    onNodeClick(node: TreeNode): void;
+    /**
+     * When you click on an item, you can use the emit "nodeExpanded" if you want to see the current values of that item and the data below it. This way you will only be able to access the data for that item.
+     */
+    onNodeExpanded(node: TreeNode, state: boolean): void;
+    /**
+     * Returns the current data of the tree when a data is deleted or a checkbox is clicked in the tree. If you are considering to use @update:nodes for only updating data, you can also use v-model:nodes
+     */
+    'onUpdate:nodes'(nodes: TreeNode[]): void;
+}
+
+export interface ChildCountSlotScope {
+   count: number;
+   checkedCount: number;
+   childs: TreeNode[];
+}
+
+export interface CheckboxSlotScope {
+   id: TreeNode['id'];
+   checked: TreeNode['checked'];
+   node: TreeNode;
+   indeterminate: boolean;
+   toggleCheckbox(): void;
+}
+
+declare const Tree: new () => {
+   $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & TreeProps;
+   $slots: {
+      default: () => VNode[],
+      iconActive: () => VNode[],
+      iconInactive: () => VNode[],
+      deleteIcon: () => VNode[],
+      checkbox: (arg: CheckboxSlotScope) => VNode[],
+      childCount: (arg: ChildCountSlotScope) => VNode[],
+    }
+};
+
+export declare function getNodeById(nodes: TreeNode[], id: TreeNode['id']): void;
+export declare function setNodeById( nodes: TreeNode[], id: TreeNode['id'], node: TreeNode): void;
+export declare function setNodeById( nodes: TreeNode[], id: TreeNode['id'], node: TreeNode): void;
+
+export default Tree;
diff --git a/src/lib/index.js b/src/lib/index.js
@@ -1,5 +1,5 @@
-import Tree from "./components/Tree.vue";
-import { getNodeById, setNodeById, updateNodeById } from "./utils";
+import Tree from './components/Tree.vue';
+import { getNodeById, setNodeById, updateNodeById } from './utils';
 
 export default Tree;
 

diff --git a/vite.config.js b/vite.config.js
@@ -1,7 +1,9 @@
-import vue from '@vitejs/plugin-vue'
-const path = require('path')
+import vue from '@vitejs/plugin-vue';
+import copyTypes from './plugins/copyTypes.mjs';
+import * as path from 'path';
+import { defineConfig } from 'vite';
 
-const config = {
+const config = defineConfig({
   resolve: {
     alias: [
       {
@@ -10,11 +12,20 @@ const config = {
       },
     ],
   },
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    copyTypes(),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, 'src/lib/index.js'),
       name: 'Tree',
+      fileName(format) {
+        if (format === 'es') return 'vue3-tree.mjs';
+        if (format === 'umd') return 'vue3-tree.cjs';
+        if (format === 'iife') return 'vue3-tree.js';
+      },
+      formats: ['iife', 'es', 'umd'],
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
@@ -29,6 +40,6 @@ const config = {
       },
     },
   },
-}
+});
 
-export default config
+export default config;