all files / src/flexbox/ flexboxItem.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <div class="mu-flexbox-item" :style="itemStyle">
    <slot></slot>
  </div>
</template>
 
<script>
export default {
  name: 'mu-flexbox-item',
  props: {
    order: {
      type: [Number, String],
      default: 0
    },
    grow: {
      type: [Number, String],
      default: 1
    },
    shrink: {
      type: [Number, String],
      default: 1
    },
    basis: {
      type: [Number, String],
      default: 'auto'
    }
  },
  computed: {
    itemStyle () {
      let styles = {}
      let marginName = this.$parent.orient === 'horizontal' ? 'marginLeft' : 'marginTop'
      styles[marginName] = `${this.$parent.gutter}px`
      styles['flex'] = `${this.grow} ${this.shrink} ${this.basis}`
      styles['order'] = this.order
      return styles
    }
  }
}
</script>