cy-element-ui 1.0.4 → 1.0.6

package/packages/input/src/input.vue

@@ -1,16 +1,16 @@
 <template>
 	<div :class="[
-		type === 'textarea' ? 'el-textarea' : 'el-input',
-		inputSize ? 'el-input--' + inputSize : '',
-		{
-			'is-disabled': inputDisabled,
-			'is-exceed': inputExceed,
-			'el-input-group': $slots.prepend || $slots.append,
-			'el-input-group--append': $slots.append,
-			'el-input-group--prepend': $slots.prepend,
-			'el-input--prefix': $slots.prefix || prefixIcon,
-			'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
-		}
+			type === 'textarea' ? 'el-textarea' : 'el-input',
+			inputSize ? 'el-input--' + inputSize : '',
+			{
+				'is-disabled': inputDisabled,
+				'is-exceed': inputExceed,
+				'el-input-group': $slots.prepend || $slots.append,
+				'el-input-group--append': $slots.append,
+				'el-input-group--prepend': $slots.prepend,
+				'el-input--prefix': $slots.prefix || prefixIcon,
+				'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
+			}
 		]"
 		@mouseenter="hovering = true"
 		@mouseleave="hovering = false"
@@ -43,8 +43,8 @@
 			<span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
 				<slot name="prefix"></slot>
 				<i class="el-input__icon"
-					 v-if="prefixIcon"
-					 :class="prefixIcon">
+					v-if="prefixIcon"
+					:class="prefixIcon">
 				</i>
 			</span>
 			<!-- 后置内容 -->
@@ -108,333 +108,333 @@
 	</div>
 </template>
 <script>
-	import emitter from 'element-ui/src/mixins/emitter';
-	import Migrating from 'element-ui/src/mixins/migrating';
-	import calcTextareaHeight from './calcTextareaHeight';
-	import merge from 'element-ui/src/utils/merge';
-	import { isKorean } from 'element-ui/src/utils/shared';
+import emitter from 'element-ui/src/mixins/emitter';
+import Migrating from 'element-ui/src/mixins/migrating';
+import calcTextareaHeight from './calcTextareaHeight';
+import merge from 'element-ui/src/utils/merge';
+import { isKorean } from 'element-ui/src/utils/shared';
+
+export default {
+	name: 'ElInput',
 
-	export default {
-		name: 'ElInput',
+	componentName: 'ElInput',
 
-		componentName: 'ElInput',
+	mixins: [emitter, Migrating],
 
-		mixins: [emitter, Migrating],
+	inheritAttrs: false,
 
-		inheritAttrs: false,
+	inject: {
+		elForm: {
+			default: ''
+		},
+		elFormItem: {
+			default: ''
+		}
+	},
 
-		inject: {
-			elForm: {
-				default: ''
-			},
-			elFormItem: {
-				default: ''
+	data() {
+		return {
+			textareaCalcStyle: {},
+			hovering: false,
+			focused: false,
+			isComposing: false,
+			passwordVisible: false
+		};
+	},
+
+	props: {
+		value: [String, Number],
+		size: String,
+		resize: String,
+		form: String,
+		disabled: Boolean,
+		readonly: Boolean,
+		type: {
+			type: String,
+			default: 'text'
+		},
+		autosize: {
+			type: [Boolean, Object],
+			default: false
+		},
+		autocomplete: {
+			type: String,
+			default: 'off'
+		},
+		/** @Deprecated in next major version */
+		autoComplete: {
+			type: String,
+			validator(val) {
+				process.env.NODE_ENV !== 'production' &&
+     console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
+				return true;
 			}
 		},
+		validateEvent: {
+			type: Boolean,
+			default: true
+		},
+		suffixIcon: String,
+		prefixIcon: String,
+		label: String,
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		showPassword: {
+			type: Boolean,
+			default: false
+		},
+		showWordLimit: {
+			type: Boolean,
+			default: false
+		},
+		tabindex: String
+	},
 
-		data() {
+	computed: {
+		_elFormItemSize() {
+			return (this.elFormItem || {}).elFormItemSize;
+		},
+		validateState() {
+			return this.elFormItem ? this.elFormItem.validateState : '';
+		},
+		needStatusIcon() {
+			return this.elForm ? this.elForm.statusIcon : false;
+		},
+		validateIcon() {
 			return {
-				textareaCalcStyle: {},
-				hovering: false,
-				focused: false,
-				isComposing: false,
-				passwordVisible: false
-			};
+				validating: 'el-icon-loading',
+				success: 'el-icon-circle-check',
+				error: 'el-icon-circle-close'
+			}[this.validateState];
 		},
-
-		props: {
-			value: [String, Number],
-			size: String,
-			resize: String,
-			form: String,
-			disabled: Boolean,
-			readonly: Boolean,
-			type: {
-				type: String,
-				default: 'text'
-			},
-			autosize: {
-				type: [Boolean, Object],
-				default: false
-			},
-			autocomplete: {
-				type: String,
-				default: 'off'
-			},
-			/** @Deprecated in next major version */
-			autoComplete: {
-				type: String,
-				validator(val) {
-					process.env.NODE_ENV !== 'production' &&
-						console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
-					return true;
-				}
-			},
-			validateEvent: {
-				type: Boolean,
-				default: true
-			},
-			suffixIcon: String,
-			prefixIcon: String,
-			label: String,
-			clearable: {
-				type: Boolean,
-				default: false
-			},
-			showPassword: {
-				type: Boolean,
-				default: false
-			},
-			showWordLimit: {
-				type: Boolean,
-				default: false
-			},
-			tabindex: String
+		textareaStyle() {
+			return merge({}, this.textareaCalcStyle, { resize: this.resize });
+		},
+		inputSize() {
+			return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+		},
+		inputDisabled() {
+			return this.disabled || (this.elForm || {}).disabled;
+		},
+		nativeInputValue() {
+			return this.value === null || this.value === undefined ? '' : String(this.value);
+		},
+		showClear() {
+			return this.clearable &&
+    !this.inputDisabled &&
+    !this.readonly &&
+    this.nativeInputValue &&
+    (this.focused || this.hovering);
+		},
+		showPwdVisible() {
+			return this.showPassword &&
+    !this.inputDisabled &&
+    !this.readonly &&
+    (!!this.nativeInputValue || this.focused);
+		},
+		isWordLimitVisible() {
+			return this.showWordLimit &&
+    this.$attrs.maxlength &&
+    (this.type === 'text' || this.type === 'textarea') &&
+    !this.inputDisabled &&
+    !this.readonly &&
+    !this.showPassword;
+		},
+		upperLimit() {
+			return this.$attrs.maxlength;
 		},
+		textLength() {
+			if (typeof this.value === 'number') {
+				return String(this.value).length;
+			}
 
-		computed: {
-			_elFormItemSize() {
-				return (this.elFormItem || {}).elFormItemSize;
-			},
-			validateState() {
-				return this.elFormItem ? this.elFormItem.validateState : '';
-			},
-			needStatusIcon() {
-				return this.elForm ? this.elForm.statusIcon : false;
-			},
-			validateIcon() {
-				return {
-					validating: 'el-icon-loading',
-					success: 'el-icon-circle-check',
-					error: 'el-icon-circle-close'
-				}[this.validateState];
-			},
-			textareaStyle() {
-				return merge({}, this.textareaCalcStyle, { resize: this.resize });
-			},
-			inputSize() {
-				return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
-			},
-			inputDisabled() {
-				return this.disabled || (this.elForm || {}).disabled;
-			},
-			nativeInputValue() {
-				return this.value === null || this.value === undefined ? '' : String(this.value);
-			},
-			showClear() {
-				return this.clearable &&
-					!this.inputDisabled &&
-					!this.readonly &&
-					this.nativeInputValue &&
-					(this.focused || this.hovering);
-			},
-			showPwdVisible() {
-				return this.showPassword &&
-					!this.inputDisabled &&
-					!this.readonly &&
-					(!!this.nativeInputValue || this.focused);
-			},
-			isWordLimitVisible() {
-				return this.showWordLimit &&
-					this.$attrs.maxlength &&
-					(this.type === 'text' || this.type === 'textarea') &&
-					!this.inputDisabled &&
-					!this.readonly &&
-					!this.showPassword;
-			},
-			upperLimit() {
-				return this.$attrs.maxlength;
-			},
-			textLength() {
-				if (typeof this.value === 'number') {
-					return String(this.value).length;
-				}
+			return (this.value || '').length;
+		},
+		inputExceed() {
+			// show exceed style if length of initial value greater then maxlength
+			return this.isWordLimitVisible &&
+    (this.textLength > this.upperLimit);
+		}
+	},
 
-				return (this.value || '').length;
-			},
-			inputExceed() {
-				// show exceed style if length of initial value greater then maxlength
-				return this.isWordLimitVisible &&
-					(this.textLength > this.upperLimit);
+	watch: {
+		value(val) {
+			this.$nextTick(this.resizeTextarea);
+			if (this.validateEvent) {
+				this.dispatch('ElFormItem', 'el.form.change', [val]);
 			}
 		},
+		// native input value is set explicitly
+		// do not use v-model / :value in template
+		// see: https://github.com/ElemeFE/element/issues/14521
+		nativeInputValue() {
+			this.setNativeInputValue();
+		},
+		// when change between <input> and <textarea>,
+		// update DOM dependent value and styles
+		// https://github.com/ElemeFE/element/issues/14857
+		type() {
+			this.$nextTick(() => {
+				this.setNativeInputValue();
+				this.resizeTextarea();
+				this.updateIconOffset();
+			});
+		}
+	},
 
-		watch: {
-			value(val) {
-				this.$nextTick(this.resizeTextarea);
-				if (this.validateEvent) {
-					this.dispatch('ElFormItem', 'el.form.change', [val]);
+	methods: {
+		focus() {
+			this.getInput().focus();
+		},
+		blur() {
+			this.getInput().blur();
+		},
+		getMigratingConfig() {
+			return {
+				props: {
+					'icon': 'icon is removed, use suffix-icon / prefix-icon instead.',
+					'on-icon-click': 'on-icon-click is removed.'
+				},
+				events: {
+					'click': 'click is removed.'
 				}
-			},
-			// native input value is set explicitly
-			// do not use v-model / :value in template
-			// see: https://github.com/ElemeFE/element/issues/14521
-			nativeInputValue() {
-				this.setNativeInputValue();
-			},
-			// when change between <input> and <textarea>,
-			// update DOM dependent value and styles
-			// https://github.com/ElemeFE/element/issues/14857
-			type() {
-				this.$nextTick(() => {
-					this.setNativeInputValue();
-					this.resizeTextarea();
-					this.updateIconOffset();
-				});
+			};
+		},
+		handleBlur(event) {
+			this.focused = false;
+			this.$emit('blur', event);
+			if (this.validateEvent) {
+				this.dispatch('ElFormItem', 'el.form.blur', [this.value]);
 			}
 		},
-
-		methods: {
-			focus() {
-				this.getInput().focus();
-			},
-			blur() {
-				this.getInput().blur();
-			},
-			getMigratingConfig() {
-				return {
-					props: {
-						'icon': 'icon is removed, use suffix-icon / prefix-icon instead.',
-						'on-icon-click': 'on-icon-click is removed.'
-					},
-					events: {
-						'click': 'click is removed.'
-					}
+		select() {
+			this.getInput().select();
+		},
+		resizeTextarea() {
+			if (this.$isServer) return;
+			const { autosize, type } = this;
+			if (type !== 'textarea') return;
+			if (!autosize) {
+				this.textareaCalcStyle = {
+					minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
 				};
-			},
-			handleBlur(event) {
-				this.focused = false;
-				this.$emit('blur', event);
-				if (this.validateEvent) {
-					this.dispatch('ElFormItem', 'el.form.blur', [this.value]);
-				}
-			},
-			select() {
-				this.getInput().select();
-			},
-			resizeTextarea() {
-				if (this.$isServer) return;
-				const { autosize, type } = this;
-				if (type !== 'textarea') return;
-				if (!autosize) {
-					this.textareaCalcStyle = {
-						minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
-					};
-					return;
-				}
-				const minRows = autosize.minRows;
-				const maxRows = autosize.maxRows;
+				return;
+			}
+			const minRows = autosize.minRows;
+			const maxRows = autosize.maxRows;
 
-				this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
-			},
-			setNativeInputValue() {
-				const input = this.getInput();
-				if (!input) return;
-				if (input.value === this.nativeInputValue) return;
-				input.value = this.nativeInputValue;
-			},
-			handleFocus(event) {
-				this.focused = true;
-				this.$emit('focus', event);
-			},
-			handleCompositionStart(event) {
-				this.$emit('compositionstart', event);
-				this.isComposing = true;
-			},
-			handleCompositionUpdate(event) {
-				this.$emit('compositionupdate', event);
-				const text = event.target.value;
-				const lastCharacter = text[text.length - 1] || '';
-				this.isComposing = !isKorean(lastCharacter);
-			},
-			handleCompositionEnd(event) {
-				this.$emit('compositionend', event);
-				if (this.isComposing) {
-					this.isComposing = false;
-					this.handleInput(event);
-				}
-			},
-			handleInput(event) {
-				// should not emit input during composition
-				// see: https://github.com/ElemeFE/element/issues/10516
-				if (this.isComposing) return;
+			this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
+		},
+		setNativeInputValue() {
+			const input = this.getInput();
+			if (!input) return;
+			if (input.value === this.nativeInputValue) return;
+			input.value = this.nativeInputValue;
+		},
+		handleFocus(event) {
+			this.focused = true;
+			this.$emit('focus', event);
+		},
+		handleCompositionStart(event) {
+			this.$emit('compositionstart', event);
+			this.isComposing = true;
+		},
+		handleCompositionUpdate(event) {
+			this.$emit('compositionupdate', event);
+			const text = event.target.value;
+			const lastCharacter = text[text.length - 1] || '';
+			this.isComposing = !isKorean(lastCharacter);
+		},
+		handleCompositionEnd(event) {
+			this.$emit('compositionend', event);
+			if (this.isComposing) {
+				this.isComposing = false;
+				this.handleInput(event);
+			}
+		},
+		handleInput(event) {
+			// should not emit input during composition
+			// see: https://github.com/ElemeFE/element/issues/10516
+			if (this.isComposing) return;
 
-				// hack for https://github.com/ElemeFE/element/issues/8548
-				// should remove the following line when we don't support IE
-				if (event.target.value === this.nativeInputValue) return;
+			// hack for https://github.com/ElemeFE/element/issues/8548
+			// should remove the following line when we don't support IE
+			if (event.target.value === this.nativeInputValue) return;
 
-				this.$emit('input', event.target.value);
+			this.$emit('input', event.target.value);
 
-				// ensure native input value is controlled
-				// see: https://github.com/ElemeFE/element/issues/12850
-				this.$nextTick(this.setNativeInputValue);
-			},
-			handleChange(event) {
-				this.$emit('change', event.target.value);
-			},
-			calcIconOffset(place) {
-				let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${place}`) || []);
-				if (!elList.length) return;
-				let el = null;
-				for (let i = 0; i < elList.length; i++) {
-					if (elList[i].parentNode === this.$el) {
-						el = elList[i];
-						break;
-					}
+			// ensure native input value is controlled
+			// see: https://github.com/ElemeFE/element/issues/12850
+			this.$nextTick(this.setNativeInputValue);
+		},
+		handleChange(event) {
+			this.$emit('change', event.target.value);
+		},
+		calcIconOffset(place) {
+			let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${ place }`) || []);
+			if (!elList.length) return;
+			let el = null;
+			for (let i = 0; i < elList.length; i++) {
+				if (elList[i].parentNode === this.$el) {
+					el = elList[i];
+					break;
 				}
-				if (!el) return;
-				const pendantMap = {
-					suffix: 'append',
-					prefix: 'prepend'
-				};
+			}
+			if (!el) return;
+			const pendantMap = {
+				suffix: 'append',
+				prefix: 'prepend'
+			};
 
-				const pendant = pendantMap[place];
-				if (this.$slots[pendant]) {
-					el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
-				} else {
-					el.removeAttribute('style');
-				}
-			},
-			updateIconOffset() {
-				this.calcIconOffset('prefix');
-				this.calcIconOffset('suffix');
-			},
-			clear() {
-				this.$emit('input', '');
-				this.$emit('change', '');
-				this.$emit('clear');
-			},
-			handlePasswordVisible() {
-				this.passwordVisible = !this.passwordVisible;
-				this.$nextTick(() => {
-					this.focus();
-				});
-			},
-			getInput() {
-				return this.$refs.input || this.$refs.textarea;
-			},
-			getSuffixVisible() {
-				return this.$slots.suffix ||
-					this.suffixIcon ||
-					this.showClear ||
-					this.showPassword ||
-					this.isWordLimitVisible ||
-					(this.validateState && this.needStatusIcon);
+			const pendant = pendantMap[place];
+			if (this.$slots[pendant]) {
+				el.style.transform = `translateX(${ place === 'suffix' ? '-' : '' }${ this.$el.querySelector(`.el-input-group__${ pendant }`).offsetWidth }px)`;
+			} else {
+				el.removeAttribute('style');
 			}
 		},
-
-		created() {
-			this.$on('inputSelect', this.select);
+		updateIconOffset() {
+			this.calcIconOffset('prefix');
+			this.calcIconOffset('suffix');
 		},
-
-		mounted() {
-			this.setNativeInputValue();
-			this.resizeTextarea();
-			this.updateIconOffset();
+		clear() {
+			this.$emit('input', '');
+			this.$emit('change', '');
+			this.$emit('clear');
 		},
-
-		updated() {
-			this.$nextTick(this.updateIconOffset);
+		handlePasswordVisible() {
+			this.passwordVisible = !this.passwordVisible;
+			this.$nextTick(() => {
+				this.focus();
+			});
+		},
+		getInput() {
+			return this.$refs.input || this.$refs.textarea;
+		},
+		getSuffixVisible() {
+			return this.$slots.suffix ||
+    this.suffixIcon ||
+    this.showClear ||
+    this.showPassword ||
+    this.isWordLimitVisible ||
+    (this.validateState && this.needStatusIcon);
 		}
-	};
+	},
+
+	created() {
+		this.$on('inputSelect', this.select);
+	},
+
+	mounted() {
+		this.setNativeInputValue();
+		this.resizeTextarea();
+		this.updateIconOffset();
+	},
+
+	updated() {
+		this.$nextTick(this.updateIconOffset);
+	}
+};
 </script>