diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue index 8bc3c70..5d6248e 100644 --- a/docs/src/pages/components/Input.vue +++ b/docs/src/pages/components/Input.vue @@ -28,6 +28,12 @@ Boolean Show a button to toggle the password visibility. Default false + + + md-clearable + Boolean + Show a button to clear the input. Default false + @@ -176,6 +182,11 @@ + + + + + @@ -211,6 +222,11 @@ <label>Disabled</label> <md-input disabled></md-input> </md-input-container> + + <md-input-container md-clearable> + <label>Clearable</label> + <md-input v-model="initialValue"></md-input> + </md-input-container> </form> diff --git a/src/components/mdInputContainer/mdInputContainer.scss b/src/components/mdInputContainer/mdInputContainer.scss index 50eceef..ff606db 100644 --- a/src/components/mdInputContainer/mdInputContainer.scss +++ b/src/components/mdInputContainer/mdInputContainer.scss @@ -215,6 +215,24 @@ $input-size: 32px; } } + &.md-clearable { + &.md-input-focused .md-clear-input { + color: rgba(#000, .54); + } + + .md-clear-input { + margin: 0; + position: absolute; + right: 0; + bottom: -2px; + color: rgba(#000, .38); + + .md-ink-ripple { + color: rgba(#000, .87); + } + } + } + &.md-input-invalid { .md-error { opacity: 1; diff --git a/src/components/mdInputContainer/mdInputContainer.vue b/src/components/mdInputContainer/mdInputContainer.vue index 7b79561..33410b5 100644 --- a/src/components/mdInputContainer/mdInputContainer.vue +++ b/src/components/mdInputContainer/mdInputContainer.vue @@ -7,6 +7,10 @@ {{ showPassword ? 'visibility_off' : 'visibility' }} + + + clear + @@ -20,7 +24,8 @@ name: 'md-input-container', props: { mdInline: Boolean, - mdHasPassword: Boolean + mdHasPassword: Boolean, + mdClearable: Boolean }, mixins: [theme], data() { @@ -51,6 +56,7 @@ return { 'md-input-inline': this.mdInline, 'md-has-password': this.mdHasPassword, + 'md-clearable': this.mdClearable, 'md-has-select': this.hasSelect, 'md-has-file': this.hasFile, 'md-has-value': this.hasValue, @@ -78,6 +84,13 @@ this.input.focus(); } }, + clearInput() { + if (this.isInput()) { + this.input.value = ''; + this.setValue(this.input.value); + this.$emit('input', this.input.value); + } + }, setValue(value) { this.value = value; }