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

<script>
    /**
    * This component generates the responsive grid system structure to be used.
    */
    export default {
        name: 'ResponsiveGridSystem',
        props: {
            // Number of Columns in the grid
            cols: {
                default: '2',
                type: String,
                required: true,
                validate: function (val) {
                    return Number(val) > 1 && Number(val) < 13
                }
            },
            // Any extra class names to be attached
            bclass: {
                default: '',
                type: String
            },
            // Overriding default styles
            bstyle: {
                default: '',
                type: String
            },
            // Wether the columns float dynamically
            floater: {
                default: false,
                type: Boolean
            }
        },
        computed: {
            styleClass () {
                let cls = 'section group'
                if (this.bclass.length) {
                    cls = `${cls} ${this.bclass}`
                }
                if (this.floater) {
                    cls = `${cls} float${this.cols}`
                }
                return cls
            }
        }
    }
</script>
