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.."/>
+                                    <form-invalid-feedback feedback="Invalid feedback"/>
+                                    <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)

src/components/Form/FormInvalidFeedback.js

@@ -0,0 +1,7 @@
+export default {
+  name: 'form-invalid-feedback',
+  props: {
+    feedback: {default: '', type: String}
+  },
+  template: `<div class="invalid-feedback"><slot>{{ feedback }}</slot></div>`
+}

src/components/Form/index.js

@@ -1,12 +1,14 @@
 import FormGroup from './FormGroup'
 import FormInput from './FormInput'
+import FormInvalidFeedback from './FormInvalidFeedback'
 import FormLabel from './FormLabel'
 import FormStaticText from './FormStaticText'
 import FormTextarea from './FormTextarea'
 
 export {
   FormGroup,
   FormInput,
+  FormInvalidFeedback,
   FormLabel,
   FormStaticText,
   FormTextarea