<template>
    <v-sheet
        :height="height"
        class="overflow-y-auto"
    >
        <v-treeview 
            dense
            activatable
            :items="folders"

            @update:active="OnUpdateActive"
        >
        </v-treeview>
    </v-sheet>
</template>

<script>
    export default {
        
        props: {
            folders: {required: true},
            value: {default: null},
            height: {default: 400},
        },

        computed: {

            localSelectedFolder: {
                get: function() {
                    return this.value;
                },

                set: function(folder) {
                    return this.$emit('input', folder);
                }
            }
        },

        methods: {
            OnUpdateActive(folders) {
                if( _.isArray(folders) && !! folders.length )
                {
                    this.localSelectedFolder = folders[0];
                }
            }
        },

        name: 'FolderSelectorInput',
    }
</script>