<template>
    <v-menu
        offset-y
        :close-on-content-click="closeOnContent"
        v-model="item.isVisible"
    >
        <template v-slot:activator="{ on: { click } }">
            <v-btn
                :small="! smallActivator"
                :x-small="smallActivator"
                text
                class="mr-2 text-no-transform"
                :disabled="item.disabled()"
                v-on:click="click"
                @click="OnClick"
            >
                <v-icon v-if="item.icon">
                    {{item.icon}}
                </v-icon>
                
                {{ __(caption) }}
            </v-btn>
        </template>

        <v-sheet class="px-3">
            <tree-list 
                :items="item.getOptions"
            />
        </v-sheet>
    </v-menu>
</template>

<script>
    export default {
        
        props: {
            item: {required: true},
            closeOnContent: {default: false},
            onClickActivator: {default: null},
            smallActivator: {default: false}
        },

        computed: {
            caption() {
                return _.isFunction(this.item.caption) ? this.item.caption() : this.item.caption;
            }
        },

        methods: {
            OnClick() {
                if(_.isFunction(this.onClickActivator))
                {
                    this.onClickActivator();
                }
            }
        },

        name: 'ActivatorItem',
    }
</script>