add FormInput validation states

Author: isneezy

example/src/components/FormsPage.vue

@@ -35,13 +35,14 @@
                                 </form-group>
                                 <form-group>
                                     <form-label>Valid State</form-label>
-                                    <form-input placeholder="Valid State.."/>
-                                    <form-input class="mt-3" placeholder="Valid State.."/>
+                                    <form-input valid placeholder="Valid State.."/>
+                                    <form-input tick class="mt-3" value="Valid state"/>
                                 </form-group>
                                 <form-group>
                                     <form-label>Invalid State</form-label>
-                                    <form-input placeholder="Invalid State.."/>
-                                    <form-input class="mt-3" placeholder="Invalid State.."/>
+                                    <form-input invalid placeholder="Invalid State.."/>
+                                    <div class="invalid-feedback">Invalid feedback</div>
+                                    <form-input cross class="mt-3" value="Invalid state"/>
                                 </form-group>
                                 <form-group>
                                     <form-label>Country</form-label>

src/components/Form/FormInput.vue

@@ -1,18 +1,33 @@
 <template>
-    <input class="form-control" v-model="internalValue" @input="onInput" >
+    <input class="form-control" :class="className" v-model="internalValue" @input="onInput" >
 </template>
 
 <script>
   export default {
     name: "form-input",
     props: {
       value: {},
+      invalid: { default: false, type: Boolean },
+      valid: { default: false, type: Boolean },
+      tick: {default: false, type: Boolean},
+      cross: {default: false, type: Boolean}
     },
 
     data: () => ({
       internalValue: null
     }),
 
+    computed: {
+      className () {
+        const className = {}
+        className['is-valid'] = this.valid
+        className['state-valid'] = this.tick
+        className['is-invalid'] = this.invalid
+        className['state-invalid'] = this.cross
+        return className
+      }
+    },
+
     methods: {
       onInput() {
         this.$emit('input', this.internalValue)