<template>
    <div :class="groupClass">
        <slot></slot>
    </div>
</template>

<script>
import { prefix } from 'jdd-design/utils';
export default {
    name: `${prefix}-button-group`,
    props: {
        layout: {
            type: String,
            default: 'horizontal',
            validator(value) {
                return ['vertical', 'horizontal'].indexOf(value) > -1;
            }
        }
    },
    computed: {
        groupClass() {
            let clsNames = [`${prefix}-button-group`];
            clsNames.push(`${prefix}-button-group--${this.layout}`);
            return clsNames.join(' ');
        }
    }
};
</script>
