<template>
  <div class="qf-row" :style="style">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'QfRow',
  componentName: 'QfRow',

  props: {
    gutter: Number,
    type: String,
    justify: {
      type: String,
      default: 'start'
    },
    align: {
      type: String,
      default: 'top'
    }
  },

  computed: {
    style() {
      const ret = {};

      if (this.gutter) {
        ret.marginLeft = `-${this.gutter / 2}px`;
        ret.marginRight = ret.marginLeft;
      }
      ret.justifyContent = this.justify;
      ret.alignItems = this.align;

      return ret;
    }
  }
};
</script>
