<template>
    <li class="select-group">
        <dl>
            <dt class="select-opt-label" title="title">{{label}}</dt>
            <slot></slot>
        </dl>
    </li>
</template>

<script type="text/babel">
    import Emitter from 'focus-view/src/mixins/emitter';

    export default {
        mixins: [Emitter],

        name: 'focusOptionGroup',

        componentName: 'focusOptionGroup',

        props: {
            label: String,
            disabled: {
                type: Boolean,
                default: false
            }
        },

        data() {
            return {
                visible: true
            };
        },

        watch: {
            disabled(val) {
                this.broadcast('focusOption', 'handleGroupDisabled', val);
            }
        },

        mounted() {
            if (this.disabled) {
                this.broadcast('focusOption', 'handleGroupDisabled', this.disabled);
            }
        }
    };
</script>
