Show a red label in the input boxes when there's errors

diogolundberg · Mar 22, 2018 · c531a1d · c531a1d
1 parent 6a5e125
commit c531a1d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/UI/app/components/elements/dropdown.vue b/UI/app/components/elements/dropdown.vue
@@ -18,9 +18,13 @@
         @click="focus = true">
       <label
         v-if="!focus"
-        :class="{ nudge: focus || value }"
+        :class="{
+          nudge: nudge,
+          red: !nudge && allErrors.length,
+          dim: nudge || !allErrors.length,
+        }"
         :for="`fld${_uid}`"
-        class="py2 absolute top-0 left-0 bounce h5 dim noclick">
+        class="py2 absolute top-0 left-0 bounce h5 noclick">
         {{ label }}
       </label>
       <span
@@ -147,6 +151,9 @@
           this.required && !this.value && "Campo obrigatório",
         ].filter(a => a && this.validate);
       },
+      nudge() {
+        return this.focus || this.value;
+      },
     },
     watch: {
       focus() {

diff --git a/UI/app/components/elements/input-box.vue b/UI/app/components/elements/input-box.vue
@@ -21,8 +21,12 @@
         @blur="focus = false; validate = true">
       <label
         :for="`fld${_uid}`"
-        :class="{ nudge: focus || (value && value.length) }"
-        class="py2 absolute top-0 left-0 bounce h5 dim noclick"
+        :class="{
+          nudge: focused,
+          red: !focused && allErrors.length,
+          dim: focused || !allErrors.length,
+        }"
+        class="py2 absolute top-0 left-0 bounce h5 noclick"
         v-text="label" />
       <template v-if="hint">
         <label class="block dim h7">{{ hint }}</label>
@@ -121,6 +125,9 @@
           this.email && !(/^.+@.+\..+$/.test(this.value)) && "E-mail inválido",
         ].filter(a => a && this.validate);
       },
+      focused() {
+        return this.focus || (this.value && this.value.length);
+      },
     },
     methods: {
       changed() {