mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-04 05:24:43 +00:00
Merge remote-tracking branch 'origin/develop' into components/mdTable
* origin/develop: Watch for input value and set parent class Fix pointer on checkbox label Make inputs and textareas more reactive Make scrollbars optional
This commit is contained in:
Marcos Moura
commit
1efaf695c7
7 changed files with 131 additions and 221 deletions
|
|
@ -29,7 +29,7 @@
|
|||
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="md-scrollbar">
|
||||
<div id="app" v-cloak>
|
||||
<docs></docs>
|
||||
</div>
|
||||
|
|
|
|||
57
src/components/mdInputContainer/common.js
Normal file
57
src/components/mdInputContainer/common.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
export default {
|
||||
props: {
|
||||
value: [String, Number],
|
||||
disabled: Boolean,
|
||||
required: Boolean,
|
||||
maxlength: [String, Number],
|
||||
placeholder: [String, Number]
|
||||
},
|
||||
watch: {
|
||||
value() {
|
||||
this.setParentValue();
|
||||
},
|
||||
disabled() {
|
||||
this.setParentDisabled();
|
||||
},
|
||||
required() {
|
||||
this.setParentRequired();
|
||||
},
|
||||
placeholder() {
|
||||
this.setParentPlaceholder();
|
||||
},
|
||||
maxlength() {
|
||||
this.handleMaxLength();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMaxLength() {
|
||||
this.parentContainer.enableCounter = this.maxlength > 0;
|
||||
this.parentContainer.counterLength = this.maxlength;
|
||||
},
|
||||
setParentValue() {
|
||||
this.parentContainer.setValue(this.$el.value);
|
||||
},
|
||||
setParentDisabled() {
|
||||
this.parentContainer.isDisabled = this.disabled;
|
||||
},
|
||||
setParentRequired() {
|
||||
this.parentContainer.isRequired = this.required;
|
||||
},
|
||||
setParentPlaceholder() {
|
||||
this.parentContainer.hasPlaceholder = !!this.placeholder;
|
||||
},
|
||||
onFocus() {
|
||||
this.parentContainer.isFocused = true;
|
||||
},
|
||||
onBlur() {
|
||||
this.parentContainer.isFocused = false;
|
||||
this.setParentValue();
|
||||
},
|
||||
onInput() {
|
||||
this.setParentValue();
|
||||
this.parentContainer.inputLength = this.$el.value.length;
|
||||
this.$emit('change', this.$el.value);
|
||||
this.$emit('input', this.$el.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,14 +1,12 @@
|
|||
<template>
|
||||
<input
|
||||
class="md-input"
|
||||
:type="type || 'text'"
|
||||
:type="type"
|
||||
:value="value"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
@invalid="onInvalid"
|
||||
@valid="onValid"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@input="onInput"
|
||||
|
|
@ -17,109 +15,31 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
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';
|
||||
|
||||
let manageDisabledClass = (state, scope) => {
|
||||
if (state) {
|
||||
scope.add(disabledClass);
|
||||
} else {
|
||||
scope.remove(disabledClass);
|
||||
}
|
||||
};
|
||||
|
||||
let manageRequiredClass = (required, scope) => {
|
||||
if (required) {
|
||||
scope.add(requiredClass);
|
||||
} else {
|
||||
scope.remove(requiredClass);
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
} else {
|
||||
scope.remove(hasValueClass);
|
||||
}
|
||||
};
|
||||
|
||||
let manageMaxlength = (length, parent) => {
|
||||
parent.enableCounter = +length > 0;
|
||||
parent.counterLength = +length;
|
||||
};
|
||||
import common from './common';
|
||||
import getClosestVueParent from '../../core/utils/getClosestVueParent';
|
||||
|
||||
export default {
|
||||
mixins: [common],
|
||||
props: {
|
||||
type: String,
|
||||
value: [String, Number],
|
||||
disabled: Boolean,
|
||||
required: Boolean,
|
||||
maxlength: [String, Number],
|
||||
placeholder: [String, Number]
|
||||
},
|
||||
watch: {
|
||||
disabled(disabled) {
|
||||
manageDisabledClass(disabled, this.parentClasses);
|
||||
},
|
||||
required(required) {
|
||||
manageRequiredClass(required, this.parentClasses);
|
||||
},
|
||||
placeholder(placeholder) {
|
||||
managePlaceholderClass(placeholder, this.parentClasses);
|
||||
},
|
||||
maxlength(maxlength) {
|
||||
manageMaxlength(maxlength, this.$parent);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInvalid() {
|
||||
this.parentClasses.add(invalidClass);
|
||||
},
|
||||
onValid() {
|
||||
this.parentClasses.remove(invalidClass);
|
||||
},
|
||||
onFocus() {
|
||||
this.parentClasses.add(focusedClass);
|
||||
},
|
||||
onBlur() {
|
||||
this.parentClasses.remove(focusedClass);
|
||||
manageHasValueClass(this.$el.value, this.parentClasses);
|
||||
},
|
||||
onInput() {
|
||||
manageHasValueClass(this.$el.value, this.parentClasses);
|
||||
this.$parent.inputLength = this.$el.value.length;
|
||||
this.$emit('change', this.$el.value);
|
||||
this.$emit('input', this.$el.value);
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.$parent.$el.classList.contains('md-input-container')) {
|
||||
this.parentContainer = getClosestVueParent(this.$parent, 'md-input-container');
|
||||
|
||||
if (!this.parentContainer) {
|
||||
this.$destroy();
|
||||
|
||||
throw new Error('You should wrap the md-input in a md-input-container');
|
||||
}
|
||||
|
||||
this.parentClasses = this.$parent.$el.classList;
|
||||
|
||||
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);
|
||||
this.$parent.inputLength = this.$el.value.length;
|
||||
this.setParentDisabled();
|
||||
this.setParentRequired();
|
||||
this.setParentPlaceholder();
|
||||
this.setParentValue();
|
||||
this.handleMaxLength();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,11 @@
|
|||
inputType: false,
|
||||
showPassword: false,
|
||||
enableCounter: false,
|
||||
mdHasSelect: false,
|
||||
hasSelect: false,
|
||||
hasPlaceholder: false,
|
||||
isDisabled: false,
|
||||
isRequired: false,
|
||||
isFocused: false,
|
||||
counterLength: 0,
|
||||
inputLength: 0
|
||||
};
|
||||
|
|
@ -43,8 +47,12 @@
|
|||
return {
|
||||
'md-input-inline': this.mdInline,
|
||||
'md-has-password': this.mdHasPassword,
|
||||
'md-has-select': this.mdHasSelect,
|
||||
'md-has-value': this.hasValue
|
||||
'md-has-select': this.hasSelect,
|
||||
'md-has-value': this.hasValue,
|
||||
'md-input-placeholder': this.hasPlaceholder,
|
||||
'md-input-disabled': this.isDisabled,
|
||||
'md-input-required': this.isRequired,
|
||||
'md-input-focused': this.isFocused
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
@ -67,7 +75,7 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.input = this.$el.querySelector('input') || this.$el.querySelector('textarea') || this.$el.querySelector('select');
|
||||
this.input = this.$el.querySelectorAll('input, textarea, select')[0];
|
||||
|
||||
if (!this.input) {
|
||||
this.$destroy();
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<textarea
|
||||
class="md-input"
|
||||
:value="value"
|
||||
:disabled="disabled"
|
||||
@invalid="onInvalid"
|
||||
@valid="onValid"
|
||||
:required="required"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@input="onInput"></textarea>
|
||||
|
|
@ -11,109 +13,25 @@
|
|||
|
||||
<script>
|
||||
import autosize from 'autosize';
|
||||
|
||||
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';
|
||||
|
||||
let manageDisabledClass = (state, scope) => {
|
||||
if (state) {
|
||||
scope.add(disabledClass);
|
||||
} else {
|
||||
scope.remove(disabledClass);
|
||||
}
|
||||
};
|
||||
|
||||
let manageRequiredClass = (required, scope) => {
|
||||
if (required) {
|
||||
scope.add(requiredClass);
|
||||
} else {
|
||||
scope.remove(requiredClass);
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
} else {
|
||||
scope.remove(hasValueClass);
|
||||
}
|
||||
};
|
||||
|
||||
let manageMaxlength = (length, parent) => {
|
||||
parent.enableCounter = length > 0;
|
||||
parent.counterLength = length;
|
||||
};
|
||||
import common from './common';
|
||||
import getClosestVueParent from '../../core/utils/getClosestVueParent';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
disabled: Boolean,
|
||||
required: Boolean,
|
||||
maxlength: String,
|
||||
placeholder: String
|
||||
},
|
||||
watch: {
|
||||
disabled(disabled) {
|
||||
manageDisabledClass(disabled, this.parentClasses);
|
||||
},
|
||||
required(required) {
|
||||
manageRequiredClass(required, this.parentClasses);
|
||||
},
|
||||
placeholder(placeholder) {
|
||||
managePlaceholderClass(placeholder, this.parentClasses);
|
||||
},
|
||||
maxlength(maxlength) {
|
||||
manageMaxlength(maxlength, this.$parent);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInvalid() {
|
||||
this.parentClasses.add(invalidClass);
|
||||
},
|
||||
onValid() {
|
||||
this.parentClasses.remove(invalidClass);
|
||||
},
|
||||
onFocus() {
|
||||
this.parentClasses.add(focusedClass);
|
||||
},
|
||||
onBlur() {
|
||||
this.parentClasses.remove(focusedClass);
|
||||
manageHasValueClass(this.$el.value, this.parentClasses);
|
||||
},
|
||||
onInput() {
|
||||
manageHasValueClass(this.$el.value, this.parentClasses);
|
||||
this.$parent.inputLength = this.$el.value.length;
|
||||
this.$emit('change', this.$el.value);
|
||||
this.$emit('input', this.$el.value);
|
||||
}
|
||||
},
|
||||
mixins: [common],
|
||||
mounted() {
|
||||
if (!this.$parent.$el.classList.contains('md-input-container')) {
|
||||
this.parentContainer = getClosestVueParent(this.$parent, 'md-input-container');
|
||||
|
||||
if (!this.parentContainer) {
|
||||
this.$destroy();
|
||||
|
||||
throw new Error('You should wrap the md-textarea in a md-input-container');
|
||||
}
|
||||
|
||||
this.parentClasses = this.$parent.$el.classList;
|
||||
|
||||
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);
|
||||
this.$parent.inputLength = this.$el.value.length;
|
||||
this.setParentDisabled();
|
||||
this.setParentRequired();
|
||||
this.setParentPlaceholder();
|
||||
this.setParentValue();
|
||||
this.handleMaxLength();
|
||||
|
||||
if (!this.$el.getAttribute('rows')) {
|
||||
this.$el.setAttribute('rows', '1');
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@
|
|||
|
||||
.md-checkbox-label {
|
||||
padding-left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,34 @@
|
|||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
box-shadow: inset 1px 1px 0 rgba(#000, .12);
|
||||
transition: $swift-ease-in-out;
|
||||
background-color: rgba(#000, .05);
|
||||
.md-scrollbar {
|
||||
&::-webkit-scrollbar,
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
box-shadow: inset 1px 1px 0 rgba(#000, .12);
|
||||
transition: $swift-ease-in-out;
|
||||
background-color: rgba(#000, .05);
|
||||
|
||||
&:hover {
|
||||
&:hover {
|
||||
box-shadow: inset 1px 1px 0 rgba(#000, .054),
|
||||
inset 0 -1px 0 rgba(#000, .038);
|
||||
background-color: rgba(#000, .087);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-button,
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-corner,
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb,
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(#000, .26);
|
||||
box-shadow: inset 1px 1px 0 rgba(#000, .054),
|
||||
inset 0 -1px 0 rgba(#000, .038);
|
||||
background-color: rgba(#000, .087);
|
||||
inset 0 -1px 0 rgba(#000, .087);
|
||||
transition: $swift-ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(#000, .26);
|
||||
box-shadow: inset 1px 1px 0 rgba(#000, .054),
|
||||
inset 0 -1px 0 rgba(#000, .087);
|
||||
transition: $swift-ease-in-out;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue