Merge remote-tracking branch 'origin/master' into feature/change-expa…

…nd-icon-and-show-dividers # Conflicts: # src/DraggableTreeview.vue # src/DraggableTreeviewNode.vue # test/DraggableTreeview.spec.js # test/__snapshots__/DraggableTreeview.spec.js.snap
suusan2go · Sep 9, 2020 · 5ea5f0d · 5ea5f0d
2 parents 514d46a + 56ad8d9
commit 5ea5f0d
Show file tree

Hide file tree

Showing 11 changed files with 1,819 additions and 1,292 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -8,25 +8,25 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^2.6.11",
-    "vuetify": "^2.2.26",
+    "vue": "^2.6.12",
+    "vuetify": "^2.3.10",
     "vuetify-draggable-treeview": "../"
   },
   "devDependencies": {
-    "@vue/cli-plugin-eslint": "^4.2.3",
-    "@vue/cli-plugin-typescript": "^4.2.3",
-    "@vue/cli-service": "^4.2.3",
+    "@vue/cli-plugin-eslint": "^4.5.4",
+    "@vue/cli-plugin-typescript": "^4.5.4",
+    "@vue/cli-service": "^4.5.4",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^4.0.0",
     "eslint": "^5.16.0",
-    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^6.2.1",
-    "prettier": "^1.19.1",
-    "sass": "^1.26.2",
-    "sass-loader": "^8.0.2",
-    "typescript": "~3.8.3",
-    "vue-cli-plugin-vuetify": "^2.0.2",
-    "vue-template-compiler": "^2.6.11",
-    "vuetify-loader": "^1.3.0"
+    "prettier": "^2.1.1",
+    "sass": "^1.26.10",
+    "sass-loader": "^10.0.1",
+    "typescript": "~4.0.2",
+    "vue-cli-plugin-vuetify": "^2.0.7",
+    "vue-template-compiler": "^2.6.12",
+    "vuetify-loader": "^1.6.0"
   }
 }
diff --git a/demo/yarn.lock b/demo/yarn.lock
diff --git a/jest.config.js b/jest.config.js
@@ -2,16 +2,16 @@ module.exports = {
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
     "^~/(.*)$": "<rootDir>/src/$1",
-    "^vue$": "vue/dist/vue.common.js"
+    "^vue$": "vue/dist/vue.common.js",
   },
   moduleFileExtensions: ["js", "vue", "json", "ts"],
   transform: {
     "^.+\\.ts$": "ts-jest",
     "^.+\\.js$": "babel-jest",
-    ".*\\.(vue)$": "vue-jest"
+    ".*\\.(vue)$": "vue-jest",
   },
   snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
   setupFiles: ["<rootDir>/test/setup.ts"],
   collectCoverage: true,
-  collectCoverageFrom: ["<rootDir>/src/**/*"]
+  collectCoverageFrom: ["<rootDir>/src/**/*"],
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuetify-draggable-treeview",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "draggable v-treeview component",
   "main": "dist/v-draggable-treeview.umd.js",
   "module": "dist/v-draggable-treeview.esm.js",
@@ -27,7 +27,7 @@
     "@babel/core": "^7.7.4",
     "@babel/preset-env": "^7.7.4",
     "@rollup/plugin-typescript": "^2.0.1",
-    "@types/jest": "^25.1.3",
+    "@types/jest": "^26.0.0",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
     "@vue/test-utils": "^1.0.0-beta.30",
@@ -40,13 +40,13 @@
     "eslint-plugin-vue": "^6.0.1",
     "jest": "^25.4.0",
     "jest-serializer-vue": "^2.0.2",
-    "prettier": "^1.19.1",
+    "prettier": "^2.0.5",
     "rollup": "^1.27.8",
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-vue": "^5.1.4",
     "ts-jest": "^25.3.1",
-    "tslib": "^1.10.0",
+    "tslib": "^2.0.0",
     "typescript": "^3.7.3",
     "vue": "^2.6.10",
     "vue-jest": "^3.0.5",

diff --git a/src/DraggableTreeview.vue b/src/DraggableTreeview.vue
@@ -36,18 +36,18 @@ import DraggableTreeViewNode from "./DraggableTreeviewNode.vue";
 export default Vue.extend({
   components: {
     draggable,
-    DraggableTreeViewNode
+    DraggableTreeViewNode,
   },
   props: {
     value: {
       type: Array as PropType<{ id: string | number }[]>,
       default: (): { id: string | number }[] => {
         return [];
-      }
+      },
     },
     group: {
       type: String,
-      default: null
+      default: null,
     },
     expandIcon: {
       type: String,
@@ -56,29 +56,29 @@ export default Vue.extend({
   },
   data() {
     return {
-      localValue: [...this.value]
+      localValue: [...this.value],
     };
   },
   computed: {
     themeClassName(): string {
       return this.$vuetify.theme.isDark ? "theme--dark" : "theme--light";
-    }
+    },
   },
   watch: {
     value(value) {
       this.localValue = [...value];
-    }
+    },
   },
   methods: {
     updateValue(value): void {
       this.localValue = value;
       this.$emit("input", this.localValue);
     },
     updateItem(itemValue): void {
-      const index = this.localValue.findIndex(v => v.id === itemValue.id);
+      const index = this.localValue.findIndex((v) => v.id === itemValue.id);
       this.$set(this.localValue, index, itemValue);
       this.$emit("input", this.localValue);
-    }
-  }
+    },
+  },
 });
 </script>
diff --git a/src/DraggableTreeviewNode.vue b/src/DraggableTreeviewNode.vue
@@ -1,10 +1,8 @@
 <template>
   <div
-    :class="
-      `v-treeview-node v-treeview-node--click ${
-        hasChildren ? '' : 'v-treeview-node--leaf'
-      }`
-    "
+    :class="`v-treeview-node v-treeview-node--click ${
+      hasChildren ? '' : 'v-treeview-node--leaf'
+    }`"
   >
     <div class="v-treeview-node__root" @click="open = !open">
       <div
@@ -55,6 +53,9 @@
           <template v-slot:prepend="{ item, open }">
             <slot name="prepend" v-bind="{ item, open }" />
           </template>
+          <template v-slot:label="{ item, open }">
+            <slot name="label" v-bind="{ item, open }"></slot>
+          </template>
           <template v-slot:append="{ item }">
             <slot name="append" v-bind="{ item }" />
           </template>
@@ -77,38 +78,38 @@ type TreeItem = {
 export default Vue.extend({
   name: "TreeviewNode",
   components: {
-    Draggable
+    Draggable,
   },
   props: {
     level: {
       type: Number,
-      default: 0
+      default: 0,
     },
     value: {
       type: Object as PropType<TreeItem>,
       default: (): TreeItem => ({
         id: 0,
         name: "",
-        children: []
-      })
+        children: [],
+      }),
     },
     root: {
       type: Boolean,
-      default: (): boolean => false
+      default: (): boolean => false,
     },
     group: {
       type: String,
-      default: null
+      default: null,
     },
     expandIcon: {
-      type: String,
-      default: "mdi-menu-down"
-    }
+        type: String,
+        default: "mdi-menu-down"
+    },
   },
   data() {
     return {
       open: false,
-      localValue: { ...this.value } as TreeItem
+      localValue: { ...this.value } as TreeItem,
     };
   },
   computed: {
@@ -120,23 +121,25 @@ export default Vue.extend({
     },
     appendLevel(): number {
       return this.level + (this.hasChildren ? 0 : 1);
-    }
+    },
   },
   watch: {
     value(value): void {
       this.localValue = { ...value };
-    }
+    },
   },
   methods: {
     updateValue(value: TreeItem[]): void {
       this.localValue.children = [...value];
       this.$emit("input", this.localValue);
     },
     updateChildValue(value: TreeItem): void {
-      const index = this.localValue.children.findIndex(c => c.id === value.id);
+      const index = this.localValue.children.findIndex(
+        (c) => c.id === value.id
+      );
       this.$set(this.localValue.children, index, value);
       this.$emit("input", this.localValue);
-    }
-  }
+    },
+  },
 });
 </script>
diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,13 @@
 import component from "./DraggableTreeview.vue";
 
-export const install = Vue => {
+export const install = (Vue) => {
   if (install.installed) return;
   install.installed = true;
   Vue.component("VDraggableTreeview", component);
 };
 
 const plugin = {
-  install
+  install,
 };
 
 let GlobalVue = null;

diff --git a/test/DraggableTreeview.spec.js → test/DraggableTreeview.spec.ts b/test/DraggableTreeview.spec.js → test/DraggableTreeview.spec.ts
@@ -10,10 +10,10 @@ describe("DraggableTreeview", () => {
         mocks: {
           $vuetify: {
             theme: {
-              isDark: false
-            }
-          }
-        }
+              isDark: false,
+            },
+          },
+        },
       }),
       propsData: {
         value: [
@@ -24,12 +24,12 @@ describe("DraggableTreeview", () => {
               {
                 id: 101,
                 name: "test-children",
-                children: [{ id: 201, name: "test-children-children" }]
-              }
-            ]
-          }
-        ]
-      }
+                children: [{ id: 201, name: "test-children-children" }],
+              },
+            ],
+          },
+        ],
+      },
     });
     expect(wrapper.element).toMatchSnapshot();
     wrapper.find(".v-treeview-node__root").trigger("click");
@@ -38,17 +38,28 @@ describe("DraggableTreeview", () => {
     });
   });
 
-  test("renders correctly with changed expand Icon", () => {
+  test("renders correctly with slot", () => {
     const wrapper = mount(DraggableTreeview, {
       vuetify: new Vuetify({
         mocks: {
           $vuetify: {
             theme: {
-              isDark: false
-            }
-          }
-        }
+              isDark: false,
+            },
+          },
+        },
       }),
+      scopedSlots: {
+        label({ item }: any) {
+          return this.$createElement(
+            "span",
+            {
+              attrs: { class: "primary--text" },
+            },
+            [item.name]
+          );
+        },
+      },
       propsData: {
         value: [
           {
@@ -58,13 +69,12 @@ describe("DraggableTreeview", () => {
               {
                 id: 101,
                 name: "test-children",
-                children: [{ id: 201, name: "test-children-children" }]
-              }
-            ]
-          }
+                children: [{ id: 201, name: "test-children-children" }],
+              },
+            ],
+          },
         ],
-        expandIcon: "mdi-chevron-down"
-      }
+      },
     });
     expect(wrapper.element).toMatchSnapshot();
     wrapper.find(".v-treeview-node__root").trigger("click");