<template>
    <div :class="['input-group', 'input-group-' + _size_class]">
        <div class="input-group-prepend" v-if="$slots.prepend">
            <slot name="prepend"></slot>
        </div>
        <slot></slot>
        <div class="input-group-append" v-if="$slots.append">
            <slot name="append"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'inputGroup',
    props: {
        size: {
            type: String,
            default: 'md'
        }
    },
    computed: {
        _size_class(){
            return {
                md: '',
                sm: 'sm',
                lg: 'lg'
            }
        }
    }
};
</script>

