Add an indicator for required fields

src/components/mdInputContainer/mdInput.vue

@@ -11,9 +11,9 @@
 </template>
 
 <script>
-  let validClass = 'md-input-valid';
   let invalidClass = 'md-input-invalid';
   let disabledClass = 'md-input-disabled';
+  let requiredClass = 'md-input-required';
   let focusedClass = 'md-input-focused';
   let hasValueClass = 'md-has-value';
 
@@ -25,9 +25,12 @@
     }
   };
 
-  let manageMaxlength = (length, parent) => {
-    parent.enableCounter = length > 0;
-    parent.counterLength = length;
+  let manageRequiredClass = (required, scope) => {
+    if (required) {
+      scope.add(requiredClass);
+    } else {
+      scope.remove(requiredClass);
+    }
   };
 
   let manageHasValueClass = function(value, scope) {
@@ -38,10 +41,16 @@
     }
   };
 
+  let manageMaxlength = (length, parent) => {
+    parent.enableCounter = length > 0;
+    parent.counterLength = length;
+  };
+
   export default {
     props: {
       type: String,
       disabled: Boolean,
+      required: Boolean,
       maxlength: String
     },
     data() {
@@ -53,18 +62,19 @@
       disabled(disabled) {
         manageDisabledClass(disabled, this.parentClasses);
       },
+      required(required) {
+        manageRequiredClass(required, this.parentClasses);
+      },
       maxlength(maxlength) {
         manageMaxlength(maxlength, this.$parent);
       }
     },
     methods: {
       onInvalid() {
-        this.parentClasses.remove(validClass);
         this.parentClasses.add(invalidClass);
       },
       onValid() {
         this.parentClasses.remove(invalidClass);
-        this.parentClasses.add(validClass);
       },
       onFocus() {
         this.parentClasses.add(focusedClass);
@@ -85,6 +95,7 @@
       }
 
       manageDisabledClass(this.disabled, this.parentClasses);
+      manageRequiredClass(this.required, this.parentClasses);
       manageHasValueClass(this.$el.value, this.parentClasses);
       manageMaxlength(this.maxlength, this.$parent);
     },

src/components/mdInputContainer/mdInputContainer.scss

@@ -152,3 +152,16 @@ $input-size: 32px;
     transform: translate3d(0, 0, 0);
   }
 }
+
+.md-input-required {
+  label:after {
+    position: absolute;
+    top: 2px;
+    right: 0;
+    transform: translateX(calc(100% + 2px));
+    content: "*";
+    font-size: 12px;
+    line-height: 1em;
+    vertical-align: top;
+  }
+}

src/components/mdInputContainer/mdInputContainer.theme

@@ -8,6 +8,12 @@
         }
       }
 
+      &.md-input-required {
+        label:after {
+          color: WARN-COLOR;
+        }
+      }
+
       &:after {
         height: 2px;
         background-color: PRIMARY-COLOR;

src/components/mdInputContainer/mdTextarea.vue

@@ -12,9 +12,9 @@
 <script>
   import autosize from 'autosize';
 
-  let validClass = 'md-input-valid';
   let invalidClass = 'md-input-invalid';
   let disabledClass = 'md-input-disabled';
+  let requiredClass = 'md-input-required';
   let focusedClass = 'md-input-focused';
   let hasValueClass = 'md-has-value';
 
@@ -26,9 +26,12 @@
     }
   };
 
-  let manageMaxlength = (length, parent) => {
-    parent.enableCounter = length > 0;
-    parent.counterLength = length;
+  let manageRequiredClass = (required, scope) => {
+    if (required) {
+      scope.add(requiredClass);
+    } else {
+      scope.remove(requiredClass);
+    }
   };
 
   let manageHasValueClass = function(value, scope) {
@@ -39,10 +42,16 @@
     }
   };
 
+  let manageMaxlength = (length, parent) => {
+    parent.enableCounter = length > 0;
+    parent.counterLength = length;
+  };
+
   export default {
     props: {
       type: String,
       disabled: Boolean,
+      required: Boolean,
       maxlength: String
     },
     data() {
@@ -54,18 +63,19 @@
       disabled(disabled) {
         manageDisabledClass(disabled, this.parentClasses);
       },
+      required(required) {
+        manageRequiredClass(required, this.parentClasses);
+      },
       maxlength(maxlength) {
         manageMaxlength(maxlength, this.$parent);
       }
     },
     methods: {
       onInvalid() {
-        this.parentClasses.remove(validClass);
         this.parentClasses.add(invalidClass);
       },
       onValid() {
         this.parentClasses.remove(invalidClass);
-        this.parentClasses.add(validClass);
       },
       onFocus() {
         this.parentClasses.add(focusedClass);
@@ -76,7 +86,6 @@
       },
       onInput() {
         manageHasValueClass(this.$el.value, this.parentClasses);
-        this.$parent.inputLength = this.$el.value.length;
       }
     },
     ready() {
@@ -87,6 +96,7 @@
       }
 
       manageDisabledClass(this.disabled, this.parentClasses);
+      manageRequiredClass(this.required, this.parentClasses);
       manageHasValueClass(this.$el.value, this.parentClasses);
       manageMaxlength(this.maxlength, this.$parent);
 

src/docs/pages/Input.vue

@@ -14,7 +14,7 @@
 
         <md-input-container>
           <label>Required</label>
-          <md-input v-validate:inline="['required']" initial="off"></md-input>
+          <md-input required v-validate:inline="['required']" initial="off"></md-input>
 
           <span class="md-error">Validation message</span>
         </md-input-container>