Merge pull request #251 from AyHaski/feature/change-expand-icon-and-s…

…how-dividers

Feature/change expand icon and show dividers

README.md

@@ -115,6 +115,7 @@ Name | Type | Default | Description
 --- | ---- | ---- | ---
 value | Object | [] | items for treeview. `item-key`, `item-text`, `item-children` are not customizable currently.  `value` can be like `{ id: 1, name: "test", children: []}` .
 group | string | null | group name for vuedraggable. If this props not provided, drag and drop are enabled only in children.
+expand-icon | string | 'mdi-menu-down' |mdi string for the expand icon.
 
 ### Events
 Name | Value  | Description

src/DraggableTreeview.vue

@@ -12,6 +12,7 @@
       :key="item.id"
       :group="group"
       :value="item"
+      :expand-icon="expandIcon"
       @input="updateItem"
     >
       <template v-slot:prepend="{ item, open }">
@@ -48,6 +49,10 @@ export default Vue.extend({
       type: String,
       default: null,
     },
+    expandIcon: {
+      type: String,
+      default: "mdi-menu-down"
+    }
   },
   data() {
     return {

src/DraggableTreeviewNode.vue

@@ -13,12 +13,15 @@
       <i
         v-if="hasChildren"
         role="button"
-        class="v-icon notranslate v-treeview-node__toggle v-icon--link mdi mdi-menu-down"
-        :class="{
-          'v-treeview-node__toggle--open': open,
-          'theme--dark': isDark,
-          'theme--light': !isDark,
-        }"
+        class="v-icon notranslate v-treeview-node__toggle v-icon--link mdi"
+        :class="[
+          {
+            'v-treeview-node__toggle--open': open,
+            'theme--dark': isDark,
+            'theme--light': !isDark
+          },
+          expandIcon
+        ]"
       />
       <slot name="prepend" v-bind="{ item: value, open }" />
       <div class="v-treeview-node__label">
@@ -44,6 +47,7 @@
           :group="group"
           :value="child"
           :level="level + 1"
+          :expand-icon="expandIcon"
           @input="updateChildValue"
         >
           <template v-slot:prepend="{ item, open }">
@@ -97,6 +101,10 @@ export default Vue.extend({
       type: String,
       default: null,
     },
+    expandIcon: {
+        type: String,
+        default: "mdi-menu-down"
+    },
   },
   data() {
     return {