import './index.less';
var FlexBox = {
    name: 'SnFlexBox',
    props: {
        direction: {
            type: String,
            'default': 'row'
        },
        justify: {
            type: String,
            'default': 'flex-start'
        },
        align: {
            type: String,
            'default': 'center'
        },
        wrap: {
            type: String
        },
        spacing: {
            type: String
        }
    },
    computed: {
        styles: function styles() {
            var marginName = this.direction === 'row' ? 'marginLeft' : 'marginTop';
            var styles = {
                'flex-direction': this.direction,
                'justify-content': this.justify,
                'align-items': this.align,
                'flex-wrap': this.wrap
            };
            styles[marginName] = '-' + this.spacing;
            return styles;
        }
    },
    render: function render() {
        var h = arguments[0];

        var className = ['sn-flex-box', 'sn-flex-box-' + this.direction];
        return h(
            'div',
            { 'class': className, style: this.styles },
            [this.$slots['default']]
        );
    }
};
export default FlexBox;