<template>
    <div :class="styleClass" :style="bstyle">
        <slot></slot>
    </div>
</template>

<script>
    /**
    * This is the child component of ResponsiveGridSystem which generates the colaumn structure
    */
    export default {
        name: 'ResponsiveGridColumn',
        props: {
            /**
            * How much does the column span to
            */
            span: {
                default: '1',
                type: String,
                validate: function (val) {
                    return Number(val) <= Number(this.$parent.cols)
                }
            },
            /**
            * Any extra class names to be attached
            */
            bclass: {
                default: '',
                type: String
            },
            /**
            * Overriding default styles
            */
            bstyle: {
                default: '',
                type: String
            }
        },
        computed: {
            styleClass () {
                if (this.bclass.length) {
                    return `col span_${this.span}_of_${this.$parent.cols} ${this.bclass}`
                } else {
                    return `col span_${this.span}_of_${this.$parent.cols}`
                }
            }
        }
    }
</script>
