Add support to placeholder

src/components/mdInputContainer/mdInput.vue

@@ -3,6 +3,8 @@
     class="md-input"
     :type="type || 'text'"
     :disabled="disabled"
+    :required="required"
+    :placeholder="placeholder"
     @invalid="onInvalid"
     @valid="onValid"
     @focus="onFocus"
@@ -14,6 +16,7 @@
   let invalidClass = 'md-input-invalid';
   let disabledClass = 'md-input-disabled';
   let requiredClass = 'md-input-required';
+  let placeholderClass = 'md-input-placeholder';
   let focusedClass = 'md-input-focused';
   let hasValueClass = 'md-has-value';
 
@@ -33,6 +36,14 @@
     }
   };
 
+  let managePlaceholderClass = (placeholder, scope) => {
+    if (placeholder) {
+      scope.add(placeholderClass);
+    } else {
+      scope.remove(placeholderClass);
+    }
+  };
+
   let manageHasValueClass = function(value, scope) {
     if (value.length > 0) {
       scope.add(hasValueClass);
@@ -51,7 +62,8 @@
       type: String,
       disabled: Boolean,
       required: Boolean,
-      maxlength: String
+      maxlength: String,
+      placeholder: String
     },
     data() {
       return {
@@ -65,6 +77,9 @@
       required(required) {
         manageRequiredClass(required, this.parentClasses);
       },
+      placeholder(placeholder) {
+        managePlaceholderClass(placeholder, this.parentClasses);
+      },
       maxlength(maxlength) {
         manageMaxlength(maxlength, this.$parent);
       }
@@ -97,6 +112,7 @@
 
       manageDisabledClass(this.disabled, this.parentClasses);
       manageRequiredClass(this.required, this.parentClasses);
+      managePlaceholderClass(this.placeholder, this.parentClasses);
       manageHasValueClass(this.$el.value, this.parentClasses);
       manageMaxlength(this.maxlength, this.$parent);
     },

src/components/mdInputContainer/mdInputContainer.scss

@@ -48,6 +48,13 @@ $input-size: 32px;
     &:focus {
       outline: none;
     }
+
+    &::-webkit-input-placeholder {
+      color: rgba(#000, .54);
+      font-size: 16px;
+      text-shadow: none;
+      -webkit-text-fill-color: initial;
+    }
   }
 
   textarea {
@@ -78,11 +85,26 @@ $input-size: 32px;
   }
 }
 
+.md-input-placeholder {
+  label {
+    pointer-events: auto;
+    top: 10px;
+    opacity: 0;
+    font-size: 12px;
+  }
+
+  input,
+  textarea {
+    font-size: 16px;
+  }
+}
+
 .md-input-focused,
 .md-has-value {
   label {
     pointer-events: auto;
     top: 0;
+    opacity: 1;
     font-size: 12px;
   }
 

src/components/mdInputContainer/mdTextarea.vue

@@ -15,6 +15,7 @@
   let invalidClass = 'md-input-invalid';
   let disabledClass = 'md-input-disabled';
   let requiredClass = 'md-input-required';
+  let placeholderClass = 'md-input-placeholder';
   let focusedClass = 'md-input-focused';
   let hasValueClass = 'md-has-value';
 
@@ -34,6 +35,14 @@
     }
   };
 
+  let managePlaceholderClass = (placeholder, scope) => {
+    if (placeholder) {
+      scope.add(placeholderClass);
+    } else {
+      scope.remove(placeholderClass);
+    }
+  };
+
   let manageHasValueClass = function(value, scope) {
     if (value.length > 0) {
       scope.add(hasValueClass);
@@ -52,7 +61,8 @@
       type: String,
       disabled: Boolean,
       required: Boolean,
-      maxlength: String
+      maxlength: String,
+      placeholder: String
     },
     data() {
       return {
@@ -66,6 +76,9 @@
       required(required) {
         manageRequiredClass(required, this.parentClasses);
       },
+      placeholder(placeholder) {
+        managePlaceholderClass(placeholder, this.parentClasses);
+      },
       maxlength(maxlength) {
         manageMaxlength(maxlength, this.$parent);
       }
@@ -98,6 +111,7 @@
 
       manageDisabledClass(this.disabled, this.parentClasses);
       manageRequiredClass(this.required, this.parentClasses);
+      managePlaceholderClass(this.placeholder, this.parentClasses);
       manageHasValueClass(this.$el.value, this.parentClasses);
       manageMaxlength(this.maxlength, this.$parent);
 

src/docs/pages/Input.vue

@@ -7,6 +7,11 @@
           <md-input value="My initial value"></md-input>
         </md-input-container>
 
+        <md-input-container>
+          <label>Placeholder</label>
+          <md-input placeholder="My nice placeholder"></md-input>
+        </md-input-container>
+
         <md-input-container md-inline>
           <label>Inline field</label>
           <md-input></md-input>
@@ -35,8 +40,15 @@
         </md-input-container>
 
         <md-input-container>
-          <label>Character counter</label>
-          <md-textarea maxlength="70" v-validate:counter="{ maxlength: 70 }" initial="off"></md-textarea>
+          <label>Character counter - Textarea</label>
+          <md-textarea maxlength="70" v-validate:counterTextarea="{ maxlength: 70 }" initial="off"></md-textarea>
+
+          <span class="md-error">Max length reached</span>
+        </md-input-container>
+
+        <md-input-container>
+          <label>Character counter - Input</label>
+          <md-input maxlength="20" v-validate:counterInput="{ maxlength: 20 }" initial="off"></md-input>
 
           <span class="md-error">Max length reached</span>
         </md-input-container>