Corrected Material Theme

Author: alvarosabu

src/components/dynamic-input/DynamicInput.vue

@@ -1,12 +1,5 @@
 <template>
   <div :class="getClasses">
-    <label
-      class="form-label"
-      :for="formControl.name"
-      v-if="formControl.type !== 'checkbox'"
-    >
-      {{ formControl.label }}
-    </label>
     <input-text
       v-if="
         formControl.type === 'text' ||
@@ -46,6 +39,14 @@
       :onFocus="onFocus"
       :onBlur="onBlur"
     />
+    <label
+      class="form-label"
+      :for="formControl.name"
+      v-if="formControl.type !== 'checkbox'"
+    >
+      {{ formControl.label }}
+    </label>
+    <span class="form-bar"></span>
     <p class="form-hint" v-if="formControl.helper">
       {{ formControl.helper }}
     </p>

src/components/input-textarea/InputTextarea.js

@@ -7,6 +7,13 @@ const props = {
   },
 };
 
+const computed = {
+  hasValue() {
+    const { value } = this.formControl;
+    return value !== null && value !== undefined;
+  },
+};
+
 const methods = {
   valueChange() {
     this.$emit('change', this.formControl.value);
@@ -22,6 +29,7 @@ const methods = {
 
 const InputTextarea = {
   name: 'asInputTextarea',
+  computed,
   props,
   methods,
 };

src/components/input-textarea/InputTextarea.vue

@@ -4,6 +4,8 @@
     v-model="formControl.value"
     :name="formControl.name"
     class="form-control"
+    :data-text="hasValue"
+    :class="{ 'form-control--value': hasValue }"
     :cols="formControl.cols"
     :rows="formControl.rows"
     @change="valueChange()"

src/styles/themes/default.scss

@@ -43,6 +43,10 @@ $input-error-color: #dc3545 !default;
   display: inline-block;
   margin-bottom: 0.5rem;
   order: 1;
+
+  &--material {
+    display: none;
+  }
 }
 
 .form-hint {
@@ -79,6 +83,7 @@ $input-error-color: #dc3545 !default;
 
 .form-control {
   display: block;
+  order: 2;
   width: 100%;
   background-color: $input-bg;
   color: $input-color;

src/styles/themes/material.scss

@@ -35,6 +35,11 @@ $input-error-color: #dc3545;
     pointer-events: none;
     color: $base-color;
     transition: 0.2s ease all;
+    order: 1;
+
+    /*  &--default {
+      display: none;
+    } */
   }
 
   .form-bar {
@@ -306,7 +311,7 @@ select.form-control ~ .form-label,
     display: inline-block;
     min-height: 20px;
     position: relative;
-    padding: 0 (20px + 10px);
+    padding: 0 30px 10px;
     margin-bottom: 0;
     cursor: pointer;
     vertical-align: bottom;