TreeView-DEMO

---

<fv-TreeView v-model="files" style="width:200px" :viewStyle="{backgroundColor:'transparent'}" background="transparent">
</fv-TreeView>

TreeView Draggable

---

<fv-TreeView v-model="files" :draggable="true" @click="click" @drop-item="dropItem">
</fv-TreeView>

dropItem (event) {
    let { root, drop, dropParent, drag, dragParent, mode } = event;
    if (mode === 'enter') {
        if(!drop.children)
            drop.children = [];
        drop.children.push(drag);
        let dragParentChildren = dragParent ? dragParent.children : root;
        dragParentChildren.splice(dragParentChildren.indexOf(drag), 1);
    } else {
        let dropParentChildren = dropParent ? dropParent.children : root;
        const index = dropParentChildren.indexOf(drop);
        dropParentChildren.splice(index, 0, drag);
        let dragParentChildren = dragParent ? dragParent.children : root;
        dragParentChildren.splice(dragParentChildren.indexOf(drag), 1);
    }
}

TreeView Checkable

---

<fv-TreeView v-model="files" :checkable="true" expandedIconPosition="right" @click="click">
</fv-TreeView>

Slots

<fv-TreeView v-model="files" style="width:200px">
  <template v-slot:default="prop">
    {{prop.item.label}}
  </template>
</fv-TreeView>

TreeView Customize and Draggable

---

backgroundColorHover:

backgroundColorActive:

foregroundColor:

<fv-TreeView
  :theme="$theme" 
  v-model="files" 
  :checkable="true" 
  @click="click" 
  :backgroundColorHover="backgroundColorHover"
  :backgroundColorActive="backgroundColorActive"
  leftIconForeground="black"
  :foreground="foregroundColor"
  :draggable="true" 
  expandClickMode="normal"
  :space="10">
</fv-TreeView>

Properties

---

Property	Type	Required	Default	Description
modelValue	array	No	[]	Data. See the data section for details.
draggable	boolean	No	false	Whether items are draggable.
checkable	boolean	No	false	Whether items are checkable.
space	number	No	20	See the TreeView space option.
foreground	string	No	'rgba(0, 90, 158, 1)'	Foreground color.
expandedIcon	string	No	'ChevronDownSmall'	See the TreeView expandedIcon option.
unexpandedIcon	string	No	'ChevronRightSmall'	See the TreeView unexpandedIcon option.
expanderIconColor	string	No	''	Expander icon color.
backgroundColorHover	string	No	''	See the TreeView backgroundColorHover option.
backgroundColorActive	string	No	''	See the TreeView backgroundColorActive option.
itemHeight	number	No	30	Item height.
showLoading	boolean	No	false	Whether to show a progress indicator while loading.
expandedIconPosition	string	No	'left'	Expand arrow position.
expandClickMode	string	No	'normal'	Expand trigger mode.
theme	string	No	'global'	Theme color.
disabled	boolean	No	false	See the TreeView disabled option.
lang	string	No	"global"	See the TreeView lang option.

Events

---

Event	Arguments	Description
click	item	Emitted when an item is clicked. The first argument is the clicked item.
drop-item	{root, drop, dropParent, drag, dragParent, mode}	See the component drop-item option.
item-drag-over	{root, drop, dropParent}	Emitted when the dragged item enters the current item.
item-drag-leave	{root, drop, dropParent}	Emitted when the dragged item leaves the current item.
item-drop	{root, drop, dropParent}	Emitted when an item is dropped on the current item.

Slotss

---

1. TreeItem

<template v-slot:default="x">
  {{x.item.label}}
</template>

Data

---

1. value

value = [{label: '', icon: '', disabled: '', children: [], expanded: false, selected: false, loading: false, dropInside: true, show: true}]

[
    {
        label: 'Img Folder',
        icon: 'https://img.icons8.com/bubbles/2x/folder-invoices.png',
        children: [
            {
                label: 'Folder',
                icon: 'Folder',
                expanded: true,
                children: [
                    {
                        label: 'File',
                        icon: 'FileCode'
                    },
                    {
                        label: 'File',
                        icon: 'FileCode'
                    }
                ]
            },
            {
                label: 'File',
                icon: 'FileCode'
            },
            {
                label: 'File',
                icon: 'FileCode',
                disabled: true
            },
            {
                label: 'No Drop Inside',
                icon: 'Error',
                dropInside: false
            }
        ]
    },
    {
        label: 'File',
        icon: 'FileCode'
    },
    {
        label: 'Cascade',
        icon: 'https://img.icons8.com/bubbles/2x/folder-invoices.png',
        children: [
            {
                label: 'Cascade2',
                icon: 'Folder',
                children: [
                    {
                        label: 'Cascade3',
                        icon: 'FileCode',
                        children: [

                        ]
                    },
                    {
                        label: 'File',
                        icon: 'FileCode',
                        disabled: true
                    }
                ]
            }
        ]
    }
]