{"size": 2947, "ext": "js", "max_stars_repo_path": "src/BtnGroup.js", "max_stars_repo_name": "marceloch2/vue-bootstrap", "max_stars_repo_stars_event_min_datetime": "2017-08-18T15:06:40.000Z", "max_stars_repo_stars_event_max_datetime": "2017-08-18T15:06:40.000Z", "max_issues_repo_path": "src/BtnGroup.js", "max_issues_repo_name": "marceloch2/vue-bootstrap", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/BtnGroup.js", "max_forks_repo_name": "marceloch2/vue-bootstrap", "max_forks_repo_forks_event_min_datetime": "2019-11-07T19:44:56.000Z", "max_forks_repo_forks_event_max_datetime": "2019-11-07T19:44:56.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 28.8921568627, "max_line_length": 84, "alphanum_fraction": 0.4526637258}
import { BUTTON_VARIANTS, SIZES } from './misc/constants';
import { inEnum } from './misc/validators';

import Btn from './Btn'
import BtnDropdown from './BtnDropdown'

export default {
    name: 'btn-group',
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        name: String,
        options: {
            type: Array,
            twoWay: true,
            default: () => []
        },
        size: {
            validator: inEnum(...SIZES),
            default: 'md'
        },
        variant: {
            validator: inEnum(...BUTTON_VARIANTS),
            default: 'secondary'
        },
        vertical: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        className() {
            return {
                'btn-group': !this.vertical,
                'btn-group-vertical': this.vertical
            }
        }
    },
    render(h) {
        // define subchildren
        const children = [];
        for (let button of this.options) children.push(
            // when item in options has dropdown
            button.dropdown
                // render dropdown element
                ? this._renderDropdown(h, button)
                // render button element
                : this._renderButton(h, button)
        )
        // return render
        return <div class={this.className} aria-label={this.name} role="group">
            { children }

            { this.$slots.default }
        </div>
    },
    methods: {
        buttonClass(option) {
            return {
                btn: true,
                active: option.active,
                disabled: option.disabled || this.disabled,
                [`btn-${this.size}`]: this.size !== 'md',
                [`btn-${option.variant || this.variant}`]: true
            }
        },
        _renderDropdown(h, { title, text, options }) {
            // return wrapper w/ child dropdown component
            return <BtnDropdown
                callback={this.trigger}
                title={title}
                text={text}
                options={options}
                size={this.size} />
        },
        _renderButton(h, button) {
            // get button's props
            let { type='button', text='', active, disabled, size, variant } = button
            size = size || this.size
            // return wrapper w/ child dropdown component
            return <Btn
                type={type}
                class={button.class}
                on-click={this.trigger}
                active={active}
                disabled={disabled}
                size={size}
                variant={variant}>
                { text }
            </Btn>
        },
        trigger(ev) {
            // if active, than remove from model
            this.callback && this.callback(ev)
            // emit toggle
            this.$emit('click', ev, this)
        }
    }
}
