Vuetify draggable v-treeview component

vuetify-draggable-treeview

Drag and drop v-treeview (Vuetify Treeview) component.

Installation

yarn add vuetify-draggable-treeview
// @NOTE: This component requires vue, vuetify, vuedraggable as peerDependency.
yarn add vuedraggable

Setup

import VuetifyDraggableTreeview from 'vuetify-draggable-treeview'
Vue.use(VuetifyDraggableTreeview)

// or manually import
VuetifyDraggableTreeview

export default Vue.extend({
  components: {
    VuetifyDraggableTreeview
  }
})

Usage

Basic Example

<template>
<v-draggable-treeview
  group="test"
  v-model="items"
></v-draggable-treeview>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

Drag and drop only in children.

<template>
<v-draggable-treeview
  v-model="items"
></v-draggable-treeview>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

Using slot

<template>
<v-draggable-treeview v-model="items" group="hoge">
  <template v-slot:prepend="{ item }">
    <v-icon>mdi-file</v-icon>
  </template>
  <template v-slot:label="{ item }">
    <span class="primary--text">{{ item.name }}</span>
  </template>
  <template v-slot:append="{ item }">
    <template
            v-if="item.children != null && item.children.length > 0"
    >
      has {{ item.children.length }} children
    </template>
  </template>
</v-draggable-treeview>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

API

Currently, this component dose not support all original v-treeview component's props, slots, event.

Props

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.

Events

Name	Value	Description
input	array	Emits the array of selected items when this value changes

Slots

Name	Props	Description
append	{ item: any, open: boolean }	Appends content after label
label	{ item: any, open: boolean }	Label content
prepend	{ item: any, open: boolean }	Prepends content before label

GitHub