feat(form controls): Optimize props (#604)

* [form-custom] create mixin * [form-checkbox] optimise props * [form-file] optimise props * [form-input] optimize props * [form-input-static] optimize props * [form-radio] use form-custom mixin * [form-select] use form-custom mixin * [form mixin] remove non-common props
bootstrap-vue · Jul 1, 2017 · 35a5db6 · 35a5db6
1 parent c2c200b
commit 35a5db6
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 20 deletions.
diff --git a/lib/components/form-checkbox.vue b/lib/components/form-checkbox.vue
@@ -19,13 +19,14 @@
 
 <script>
 import formMixin from '../mixins/form';
+import formCustomMixin from '../mixins/form-custom';
 import formCheckBoxMixin from '../mixins/form-checkbox';
 import arrayIncludes from '../utils/arrayIncludes';
 import isArray from '../utils/isArray';
 
 
 export default {
-    mixins: [formMixin, formCheckBoxMixin],
+    mixins: [formMixin, formCustomMixin, formCheckBoxMixin],
     model: {
         prop: 'checked',
         event: 'change'
@@ -39,11 +40,18 @@ export default {
         },
         checked: {
             default: true
+        },
+        size: {
+            type: String,
+            default: null
         }
     },
     computed: {
         isChecked() {
             return arrayIncludes(this.checked, this.value);
+        },
+        custom() {
+            return !this.plain;
         }
     },
     methods: {

diff --git a/lib/components/form-file.vue b/lib/components/form-file.vue
@@ -83,9 +83,10 @@
 
 <script>
     import formMixin from '../mixins/form';
+    import formCustomMixin from '../mixins/form-custom';
 
     export default {
-        mixins: [formMixin],
+        mixins: [formMixin, formCustomMixin],
         data() {
             return {
                 selectedFile: null,

diff --git a/lib/components/form-input-static.vue b/lib/components/form-input-static.vue
@@ -23,6 +23,14 @@
             },
             formatter: {
                 type: Function
+            },
+            size: {
+                type: String,
+                default: null
+            },
+            state: {
+                type: String,
+                default: null
             }
         }
     };

diff --git a/lib/components/form-input.vue b/lib/components/form-input.vue
@@ -20,6 +20,8 @@
     <b-form-input-static v-else
                          :id="id || null"
                          :value="value"
+                         :size="size"
+                         :state="state"
                          :formatter="formatter"
     ></b-form-input-static>
 </template>
@@ -73,6 +75,14 @@
                 type: String,
                 default: 'text'
             },
+            size: {
+                type: String,
+                default: null
+            },
+            state: {
+                type: String,
+                default: null
+            },
             readonly: {
                 type: Boolean,
                 default: false

diff --git a/lib/components/form-radio.vue b/lib/components/form-radio.vue
@@ -23,10 +23,11 @@
 <script>
     import formOptionsMixin from '../mixins/form-options';
     import formMixin from '../mixins/form';
+    import formCustomMixin from '../mixins/form-custom';
     import formCheckBoxMixin from '../mixins/form-checkbox';
 
     export default {
-        mixins: [formMixin, formCheckBoxMixin, formOptionsMixin],
+        mixins: [formMixin, formCustomMixin, formCheckBoxMixin, formOptionsMixin],
         data() {
             return {
                 localValue: this.value
@@ -39,6 +40,14 @@
         },
         props: {
             value: {},
+            size: {
+                type: String,
+                default: null
+            },
+            state: {
+                type: String,
+                default: null
+            },
             options: {
                 type: [Array, Object],
                 default: null,

diff --git a/lib/components/form-select.vue b/lib/components/form-select.vue
@@ -17,16 +17,21 @@
 <script>
     import formOptions from '../mixins/form-options';
     import formMixin from '../mixins/form';
+    import formCustomMixin from '../mixins/form-custom';
 
     export default {
-        mixins: [formMixin, formOptions],
+        mixins: [formMixin, formCustomMixin, formOptions],
         data() {
             return {
                 localValue: this.value
             };
         },
         props: {
             value: {},
+            size: {
+                type: String,
+                default: null
+            },
             options: {
                 type: [Array, Object],
                 required: true

diff --git a/lib/mixins/form-custom.js b/lib/mixins/form-custom.js
@@ -0,0 +1,13 @@
+export default {
+    computed: {
+        custom() {
+            return !this.plain;
+        }
+    },
+    props: {
+        plain: {
+            type: Boolean,
+            default: false
+        }
+    }
+};
diff --git a/lib/mixins/form.js b/lib/mixins/form.js
@@ -5,30 +5,17 @@ export default {
                 this.size ? `form-control-${this.size}` : null,
                 this.state ? `form-control-${this.state}` : null
             ];
-        },
-        custom() {
-            return !this.plain;
         }
     },
     props: {
         name: {
             type: String
         },
-        disabled: {
-            type: Boolean
-        },
-        plain: {
-            type: Boolean,
-            default: false
-        },
-        state: {
-            type: String
-        },
-        size: {
-            type: String
-        },
         id: {
             type: String
+        },
+        disabled: {
+            type: Boolean
         }
     }
 };