feat: change validOutline to a utility prop + control valid state fro…

…m inside the component
solfacil · Jan 26, 2022 · bbad56e · bbad56e
1 parent d5f215f
commit bbad56e
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/src/components/Input/Input.vue b/src/components/Input/Input.vue
@@ -19,7 +19,7 @@
           search: inputType === 'search',
           hasIconVisibility: controlVisibility,
           'no-arrows': noArrows,
-          valid: validOutline,
+          valid: [false, isFieldValid][Number(validOutline)],
         }"
         data-testid="input"
         :disabled="disabled"
@@ -137,7 +137,7 @@ export default {
       default: null,
     },
 
-    /** Provides a green "valid" border to the input */
+    /** Specifies whether the field should display a green outline on valid state*/
     validOutline: {
       type: Boolean,
       default: false,
@@ -196,6 +196,10 @@ export default {
 
       return '';
     },
+
+    isFieldValid() {
+      return !this.$props.invalid && this.$props.value;
+    },
   },
 
   methods: {