refactor: use mixin for fields

src/components/Fields/Checkbox.vue

@@ -17,25 +17,14 @@
 </template>
 
 <script>
-import { slug } from '@/helpers'
+import fieldsMixin from '@/mixins/fields'
 
 export default {
   name: 'Checkbox',
-  filters: {
-    slugify: value => slug(value)
-  },
+  mixins: [ fieldsMixin ],
   data: () => ({
     value: []
   }),
-  props: {
-    item: {
-      type: Object,
-      required: true
-    },
-    error: {
-      required: true
-    }
-  },
   methods: {
     updateValue (ev) {
       this.value = [...this.value, ev.target.value]

src/components/Fields/Input.vue

@@ -11,26 +11,10 @@
 </template>
 
 <script>
-import { slug } from '@/helpers'
+import fieldsMixin from '@/mixins/fields'
 
 export default {
   name: 'Input',
-  filters: {
-    slugify: value => slug(value)
-  },
-  props: {
-    item: {
-      type: Object,
-      required: true
-    },
-    error: {
-      required: true
-    }
-  },
-  methods: {
-    updateValue (e) {
-      this.$emit('input', e.target.value)
-    }
-  }
+  mixins: [ fieldsMixin ]
 }
 </script>

src/components/Fields/Radio.vue

@@ -17,30 +17,14 @@
 </template>
 
 <script>
-import { slug } from '@/helpers'
+import fieldsMixin from '@/mixins/fields'
 
 export default {
   name: 'Radio',
-  filters: {
-    slugify: value => slug(value)
-  },
+  mixins: [ fieldsMixin ],
   data: () => ({
     value: []
-  }),
-  props: {
-    item: {
-      type: Object,
-      required: true
-    },
-    error: {
-      required: true
-    }
-  },
-  methods: {
-    updateValue () {
-      this.$emit('input', this.value)
-    }
-  }
+  })
 }
 </script>
 

src/components/Fields/Select.vue

@@ -12,33 +12,15 @@
 </template>
 
 <script>
-import { slug } from '@/helpers'
+import fieldsMixin from '@/mixins/fields'
 
 export default {
   name: 'Select',
-  filters: {
-    slugify: value => slug(value)
-  },
-  props: {
-    item: {
-      type: Object,
-      required: true
-    },
-    error: {
-      required: true
-    }
-  },
-  methods: {
-    updateValue (e) {
-      this.$emit('input', e.target.value)
-    }
-  }
+  mixins: [ fieldsMixin ]
 }
 </script>
 
 <style lang="stylus">
-  dangerColor = #ff3860
-
   .is-fullwidth
     width 100%
 </style>

src/components/Fields/Textarea.vue

@@ -10,31 +10,10 @@
 </template>
 
 <script>
-import { slug } from '@/helpers'
+import fieldsMixin from '@/mixins/fields'
 
 export default {
   name: 'Textarea',
-  filters: {
-    slugify: value => slug(value)
-  },
-  data () {
-    return {
-      formName: this.$parent.formName
-    }
-  },
-  props: {
-    item: {
-      type: Object,
-      required: true
-    },
-    error: {
-      required: false
-    }
-  },
-  methods: {
-    updateValue (e) {
-      this.$emit('input', e.target.value)
-    }
-  }
+  mixins: [ fieldsMixin ]
 }
 </script>

src/mixins/fields.js

@@ -0,0 +1,21 @@
+import { slug } from '@/helpers'
+
+export default {
+  filters: {
+    slugify: value => slug(value)
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    error: {
+      required: true
+    }
+  },
+  methods: {
+    updateValue (e) {
+      this.$emit('input', e.target.value)
+    }
+  }
+}