feat(MdField): create password toggle

Author: marcosmoura

docs/app/pages/Components/Input/Input.vue

@@ -2,6 +2,7 @@
 <example src="./examples/ErrorsMessages.vue" />
 <example src="./examples/Counters.vue" />
 <example src="./examples/Icons.vue" />
+<example src="./examples/InlineActions.vue" />
 
 <template>
   <page-container centered :title="$t('pages.input.title')">
@@ -30,7 +31,13 @@
     <div class="page-container-section">
       <h2>Icons and Clear button</h2>
 
-      <code-example title="Outside, inline and clear" :component="examples['icons']" />
+      <code-example title="Outside and inline icons" :component="examples['icons']" />
+    </div>
+
+    <div class="page-container-section">
+      <h2>Inline Actions</h2>
+
+      <code-example title="Clear and password" :component="examples['inline-actions']" />
     </div>
   </page-container>
 </template>

docs/app/pages/Components/Input/examples/Icons.vue

@@ -24,11 +24,6 @@
       <md-input />
       <md-icon>attach_money</md-icon>
     </md-field>
-
-    <md-field md-clearable>
-      <label>Cleareable</label>
-      <md-input v-model="initial" />
-    </md-field>
   </div>
 </template>
 
@@ -40,9 +35,6 @@
 
 <script>
   export default {
-    name: 'Icons',
-    data: () => ({
-      initial: 'Initial Value'
-    })
+    name: 'Icons'
   }
 </script>

docs/app/pages/Components/Input/examples/InlineActions.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <md-field md-clearable>
+      <label>Cleareable</label>
+      <md-input v-model="initial" />
+    </md-field>
+
+    <md-field>
+      <label>Password toggle</label>
+      <md-input type="password" v-model="password" />
+    </md-field>
+
+    <md-field :md-toggle-password="false">
+      <label>Password field without toggle</label>
+      <md-input type="password" v-model="password" />
+    </md-field>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .md-field:last-child {
+    margin-bottom: 40px;
+  }
+</style>
+
+<script>
+  export default {
+    name: 'Icons',
+    data: () => ({
+      initial: 'Initial Value',
+      password: 'mysecurepassword'
+    })
+  }
+</script>

src/components/MdField/MdField.vue

@@ -4,22 +4,33 @@
 
     <span class="md-count" v-if="hasCounter">{{ valueLength }} / {{ state.maxlength }}</span>
 
-    <transition name="md-clear" appear>
-      <md-button tabindex="-1" class="md-icon-button md-dense md-clear" @click="clearInput" v-if="hasValue && mdClearable">
+    <transition name="md-input-action" appear>
+      <md-button tabindex="-1" class="md-icon-button md-dense md-input-action md-clear" @click="clearInput" v-if="hasValue && mdClearable">
         <md-clear-icon />
       </md-button>
     </transition>
+
+    <transition name="md-input-action" appear>
+      <md-button tabindex="-1" class="md-icon-button md-dense md-input-action md-toggle-password" @click="togglePassword" v-if="hasPasswordToggle">
+        <md-password-off-icon v-if="state.togglePassword" />
+        <md-password-on-icon v-else />
+      </md-button>
+    </transition>
   </div>
 </template>
 
 <script>
   import MdComponent from 'core/MdComponent'
   import MdClearIcon from 'core/Icons/MdClearIcon'
+  import MdPasswordOffIcon from 'core/Icons/MdPasswordOffIcon'
+  import MdPasswordOnIcon from 'core/Icons/MdPasswordOnIcon'
 
   export default new MdComponent({
     name: 'MdField',
     components: {
-      MdClearIcon
+      MdClearIcon,
+      MdPasswordOffIcon,
+      MdPasswordOnIcon
     },
     provide: {
       state: {}
@@ -30,9 +41,14 @@
       mdCounter: {
         type: Boolean,
         default: true
+      },
+      mdTogglePassword: {
+        type: Boolean,
+        default: true
       }
     },
     data: () => ({
+      showPassword: false,
       state: {
         value: null,
         focused: false,
@@ -42,13 +58,18 @@
         textarea: false,
         autogrow: false,
         maxlength: null,
+        password: null,
+        togglePassword: false,
         clear: false
       }
     }),
     computed: {
       hasCounter () {
         return this.mdCounter && this.state.maxlength
       },
+      hasPasswordToggle () {
+        return this.mdTogglePassword && this.state.password
+      },
       hasValue () {
         return this.state.value && this.state.value.length > 0
       },
@@ -69,8 +90,9 @@
           'md-has-value': this.state.value && this.state.value.length > 0,
           'md-has-placeholder': this.state.placeholder,
           'md-has-textarea': this.state.textarea,
+          'md-has-password': this.state.password,
           'md-autogrow': this.state.autogrow
-          /* 'md-has-password': this.state.mdHasPassword,
+          /* ,
           'md-has-select': this.state.mdHasSelect,
           'md-has-file': this.state.hasFile,
            */
@@ -82,6 +104,9 @@
         this.state.clear = true
         await this.$nextTick()
         this.state.clear = false
+      },
+      async togglePassword () {
+        this.state.togglePassword = !this.state.togglePassword
       }
     },
     created () {
@@ -158,15 +183,6 @@
         transition: $md-transition-stand;
         transition-property: font-size, color;
       }
-
-      ~ .md-icon:not(.md-icon-delete) {
-        margin-left: 12px;
-
-        &:after {
-          right: 0;
-          left: auto;
-        }
-      }
     }
 
     .md-textarea {
@@ -198,6 +214,26 @@
       right: 0;
     }
 
+    .md-input-action {
+      width: 24px;
+      min-width: 24px;
+      height: 24px;
+      margin: 0;
+      position: absolute;
+      top: 20px;
+      right: 0;
+      transition: $md-transition-default;
+
+      &.md-input-action-enter-active,
+      &.md-input-action-leave-active {
+        opacity: 0;
+      }
+
+      &.md-input-action-enter-to {
+        opacity: 1;
+      }
+    }
+
     > .md-icon {
       margin: 4px auto;
       position: relative;
@@ -376,19 +412,15 @@
     }
 
     &.md-has-password {
-      &.md-focused .md-toggle-password {
-        color: rgba(#000, .54);
-      }
-
       .md-toggle-password {
         margin: 0;
         position: absolute;
         right: 0;
         bottom: -2px;
-        color: rgba(#000, .38);
 
-        .md-ink-ripple {
-          color: rgba(#000, .87);
+        svg {
+          width: 22px;
+          height: 22px;
         }
       }
     }
@@ -399,24 +431,6 @@
       }
 
       .md-clear {
-        width: 24px;
-        min-width: 24px;
-        height: 24px;
-        margin: 0;
-        position: absolute;
-        top: 20px;
-        right: 0;
-        transition: $md-transition-default;
-
-        &.md-clear-enter-active,
-        &.md-clear-leave-active {
-          opacity: 0;
-        }
-
-        &.md-clear-enter-to {
-          opacity: 1;
-        }
-
         svg {
           width: 17px;
           height: 17px;

src/components/MdField/MdFieldMixin.js

@@ -3,10 +3,6 @@ import MdUuid from 'core/MdUuid'
 export default {
   props: {
     value: [String, Number],
-    type: {
-      type: String,
-      default: 'text'
-    },
     id: {
       type: String,
       default: 'md-field-' + MdUuid()
@@ -31,10 +27,7 @@ export default {
   watch: {
     clear (clear) {
       if (clear) {
-        this.$el.value = ''
-        this.content = ''
-        this.setStateValue()
-        this.$emit('input', '')
+        this.clearField()
       }
     },
     placeholder () {
@@ -51,6 +44,12 @@ export default {
     }
   },
   methods: {
+    clearField () {
+      this.$el.value = ''
+      this.content = ''
+      this.setStateValue()
+      this.$emit('input', '')
+    },
     setStateValue () {
       this.state.value = this.content
     },

src/components/MdField/MdInput/MdInput.vue

@@ -16,6 +16,43 @@
 
   export default new MdComponent({
     name: 'MdInput',
-    mixins: [MdFieldMixin]
+    mixins: [MdFieldMixin],
+    props: {
+      type: {
+        type: String,
+        default: 'text'
+      }
+    },
+    computed: {
+      toggleType () {
+        return this.state.togglePassword
+      }
+    },
+    watch: {
+      type (type) {
+        this.setPassword()
+      },
+      toggleType (toggle) {
+        if (toggle) {
+          this.setTypeText()
+        } else {
+          this.setTypePassword()
+        }
+      }
+    },
+    methods: {
+      setPassword () {
+        this.state.password = this.type === 'password'
+      },
+      setTypePassword () {
+        this.$el.type = 'password'
+      },
+      setTypeText () {
+        this.$el.type = 'text'
+      }
+    },
+    created () {
+      this.setPassword()
+    }
   })
 </script>

src/components/MdField/MdTextarea/MdTextarea.vue

@@ -1,6 +1,6 @@
 <template>
   <textarea
-    v-bind="{ type, id, disabled, required, placeholder, readonly, maxlength }"
+    v-bind="{ id, disabled, required, placeholder, readonly, maxlength }"
     v-model="content"
     class="md-textarea"
     @focus="onFocus"

src/components/MdField/theme.scss

@@ -19,7 +19,7 @@
       }
 
       .md-clear  {
-        background-color: rgba(#000, .26);
+        background-color: rgba(#000, .2);
       }
 
       &.md-focused,
@@ -66,7 +66,7 @@
       }
 
       .md-clear  {
-        background-color: rgba(#fff, .26);
+        background-color: rgba(#fff, .2);
       }
 
       &.md-focused,

src/core/Icons/MdPasswordOffIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <md-icon class="md-icon-image">
+    <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none"/>
+      <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
+    </svg>
+  </md-icon>
+</template>
+
+<script>
+  export default {
+    name: 'MdPasswordOffIcon'
+  }
+</script>