cy-element-ui 1.0.26 → 1.0.28

package/packages/rate/src/main.vue

@@ -1,348 +1,348 @@
-<template>
-	<div
-		class="el-rate"
-		@keydown="handleKey"
-		role="slider"
-		:aria-valuenow="currentValue"
-		:aria-valuetext="text"
-		aria-valuemin="0"
-		:aria-valuemax="max"
-		tabindex="0">
-		<span
-			v-for="(item, key) in max"
-			class="el-rate__item"
-			@mousemove="setCurrentValue(item, $event)"
-			@mouseleave="resetCurrentValue"
-			@click="selectValue(item)"
-			:style="{ cursor: rateDisabled ? 'auto' : 'pointer' }"
-			:key="key">
-			<i
-				:class="[classes[item - 1], { 'hover': hoverIndex === item }]"
-				class="el-rate__icon"
-				:style="getIconStyle(item)">
-				<i
-					v-if="showDecimalIcon(item)"
-					:class="decimalIconClass"
-					:style="decimalStyle"
-					class="el-rate__decimal">
-				</i>
-			</i>
-		</span>
-		<span v-if="showText || showScore" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
-	</div>
-</template>
-
-<script>
-import { hasClass } from 'element-ui/src/utils/dom';
-import { isObject } from 'element-ui/src/utils/types';
-import Migrating from 'element-ui/src/mixins/migrating';
-
-export default {
-	name: 'ElRate',
-
-	mixins: [Migrating],
-
-	inject: {
-		elForm: {
-			default: ''
-		}
-	},
-
-	data() {
-		return {
-			pointerAtLeftHalf: true,
-			currentValue: this.value,
-			hoverIndex: -1
-		};
-	},
-
-	props: {
-		value: {
-			type: Number,
-			default: 0
-		},
-		lowThreshold: {
-			type: Number,
-			default: 2
-		},
-		highThreshold: {
-			type: Number,
-			default: 4
-		},
-		max: {
-			type: Number,
-			default: 5
-		},
-		colors: {
-			type: [Array, Object],
-			default() {
-				return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
-			}
-		},
-		voidColor: {
-			type: String,
-			default: '#C6D1DE'
-		},
-		disabledVoidColor: {
-			type: String,
-			default: '#EFF2F7'
-		},
-		iconClasses: {
-			type: [Array, Object],
-			default() {
-				return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
-			}
-		},
-		voidIconClass: {
-			type: String,
-			default: 'el-icon-star-off'
-		},
-		disabledVoidIconClass: {
-			type: String,
-			default: 'el-icon-star-on'
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		allowHalf: {
-			type: Boolean,
-			default: false
-		},
-		showText: {
-			type: Boolean,
-			default: false
-		},
-		showScore: {
-			type: Boolean,
-			default: false
-		},
-		textColor: {
-			type: String,
-			default: '#1f2d3d'
-		},
-		texts: {
-			type: Array,
-			default() {
-				return ['极差', '失望', '一般', '满意', '惊喜'];
-			}
-		},
-		scoreTemplate: {
-			type: String,
-			default: '{value}'
-		}
-	},
-
-	computed: {
-		text() {
-			let result = '';
-			if (this.showScore) {
-				result = this.scoreTemplate.replace(/\{\s*value\s*\}/, this.rateDisabled
-					? this.value
-					: this.currentValue);
-			} else if (this.showText) {
-				result = this.texts[Math.ceil(this.currentValue) - 1];
-			}
-			return result;
-		},
-
-		decimalStyle() {
-			let width = '';
-			if (this.rateDisabled) {
-				width = `${ this.valueDecimal }%`;
-			} else if (this.allowHalf) {
-				width = '50%';
-			}
-			return {
-				color: this.activeColor,
-				width
-			};
-		},
-
-		valueDecimal() {
-			return this.value * 100 - Math.floor(this.value) * 100;
-		},
-
-		classMap() {
-			return Array.isArray(this.iconClasses)
-				? {
-					[this.lowThreshold]: this.iconClasses[0],
-					[this.highThreshold]: { value: this.iconClasses[1], excluded: true },
-					[this.max]: this.iconClasses[2]
-				} : this.iconClasses;
-		},
-
-		decimalIconClass() {
-			return this.getValueFromMap(this.value, this.classMap);
-		},
-
-		voidClass() {
-			return this.rateDisabled ? this.disabledVoidIconClass : this.voidIconClass;
-		},
-
-		activeClass() {
-			return this.getValueFromMap(this.currentValue, this.classMap);
-		},
-
-		colorMap() {
-			return Array.isArray(this.colors)
-				? {
-					[this.lowThreshold]: this.colors[0],
-					[this.highThreshold]: { value: this.colors[1], excluded: true },
-					[this.max]: this.colors[2]
-				} : this.colors;
-		},
-
-		activeColor() {
-			return this.getValueFromMap(this.currentValue, this.colorMap);
-		},
-
-		classes() {
-			let result = [];
-			let i = 0;
-			let threshold = this.currentValue;
-			if (this.allowHalf && this.currentValue !== Math.floor(this.currentValue)) {
-				threshold--;
-			}
-			for (; i < threshold; i++) {
-				result.push(this.activeClass);
-			}
-			for (; i < this.max; i++) {
-				result.push(this.voidClass);
-			}
-			return result;
-		},
-
-		rateDisabled() {
-			return this.disabled || (this.elForm || {}).disabled;
-		}
-	},
-
-	watch: {
-		value(val) {
-			this.currentValue = val;
-			this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
-		}
-	},
-
-	methods: {
-		getMigratingConfig() {
-			return {
-				props: {
-					'text-template': 'text-template is renamed to score-template.'
-				}
-			};
-		},
-
-		getValueFromMap(value, map) {
-			const matchedKeys = Object.keys(map)
-				.filter(key => {
-					const val = map[key];
-					const excluded = isObject(val) ? val.excluded : false;
-					return excluded ? value < key : value <= key;
-				})
-				.sort((a, b) => a - b);
-			const matchedValue = map[matchedKeys[0]];
-			return isObject(matchedValue) ? matchedValue.value : (matchedValue || '');
-		},
-
-		showDecimalIcon(item) {
-			let showWhenDisabled = this.rateDisabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
-			/* istanbul ignore next */
-			let showWhenAllowHalf = this.allowHalf &&
-    this.pointerAtLeftHalf &&
-    item - 0.5 <= this.currentValue &&
-    item > this.currentValue;
-			return showWhenDisabled || showWhenAllowHalf;
-		},
-
-		getIconStyle(item) {
-			const voidColor = this.rateDisabled ? this.disabledVoidColor : this.voidColor;
-			return {
-				color: item <= this.currentValue ? this.activeColor : voidColor
-			};
-		},
-
-		selectValue(value) {
-			if (this.rateDisabled) {
-				return;
-			}
-			if (this.allowHalf && this.pointerAtLeftHalf) {
-				this.$emit('input', this.currentValue);
-				this.$emit('change', this.currentValue);
-			} else {
-				this.$emit('input', value);
-				this.$emit('change', value);
-			}
-		},
-
-		handleKey(e) {
-			if (this.rateDisabled) {
-				return;
-			}
-			let currentValue = this.currentValue;
-			const keyCode = e.keyCode;
-			if (keyCode === 38 || keyCode === 39) { // left / down
-				if (this.allowHalf) {
-					currentValue += 0.5;
-				} else {
-					currentValue += 1;
-				}
-				e.stopPropagation();
-				e.preventDefault();
-			} else if (keyCode === 37 || keyCode === 40) {
-				if (this.allowHalf) {
-					currentValue -= 0.5;
-				} else {
-					currentValue -= 1;
-				}
-				e.stopPropagation();
-				e.preventDefault();
-			}
-			currentValue = currentValue < 0 ? 0 : currentValue;
-			currentValue = currentValue > this.max ? this.max : currentValue;
-
-			this.$emit('input', currentValue);
-			this.$emit('change', currentValue);
-		},
-
-		setCurrentValue(value, event) {
-			if (this.rateDisabled) {
-				return;
-			}
-			/* istanbul ignore if */
-			if (this.allowHalf) {
-				let target = event.target;
-				if (hasClass(target, 'el-rate__item')) {
-					target = target.querySelector('.el-rate__icon');
-				}
-				if (hasClass(target, 'el-rate__decimal')) {
-					target = target.parentNode;
-				}
-				this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
-				this.currentValue = this.pointerAtLeftHalf ? value - 0.5 : value;
-			} else {
-				this.currentValue = value;
-			}
-			this.hoverIndex = value;
-		},
-
-		resetCurrentValue() {
-			if (this.rateDisabled) {
-				return;
-			}
-			if (this.allowHalf) {
-				this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
-			}
-			this.currentValue = this.value;
-			this.hoverIndex = -1;
-		}
-	},
-
-	created() {
-		if (!this.value) {
-			this.$emit('input', 0);
-		}
-	}
-};
-</script>
+<template>
+	<div
+		class="el-rate"
+		@keydown="handleKey"
+		role="slider"
+		:aria-valuenow="currentValue"
+		:aria-valuetext="text"
+		aria-valuemin="0"
+		:aria-valuemax="max"
+		tabindex="0">
+		<span
+			v-for="(item, key) in max"
+			class="el-rate__item"
+			@mousemove="setCurrentValue(item, $event)"
+			@mouseleave="resetCurrentValue"
+			@click="selectValue(item)"
+			:style="{ cursor: rateDisabled ? 'auto' : 'pointer' }"
+			:key="key">
+			<i
+				:class="[classes[item - 1], { 'hover': hoverIndex === item }]"
+				class="el-rate__icon"
+				:style="getIconStyle(item)">
+				<i
+					v-if="showDecimalIcon(item)"
+					:class="decimalIconClass"
+					:style="decimalStyle"
+					class="el-rate__decimal">
+				</i>
+			</i>
+		</span>
+		<span v-if="showText || showScore" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
+	</div>
+</template>
+
+<script>
+	import { hasClass } from 'element-ui/src/utils/dom';
+	import { isObject } from 'element-ui/src/utils/types';
+	import Migrating from 'element-ui/src/mixins/migrating';
+
+	export default {
+		name: 'ElRate',
+
+		mixins: [Migrating],
+
+		inject: {
+			elForm: {
+				default: ''
+			}
+		},
+
+		data() {
+			return {
+				pointerAtLeftHalf: true,
+				currentValue: this.value,
+				hoverIndex: -1
+			};
+		},
+
+		props: {
+			value: {
+				type: Number,
+				default: 0
+			},
+			lowThreshold: {
+				type: Number,
+				default: 2
+			},
+			highThreshold: {
+				type: Number,
+				default: 4
+			},
+			max: {
+				type: Number,
+				default: 5
+			},
+			colors: {
+				type: [Array, Object],
+				default() {
+					return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
+				}
+			},
+			voidColor: {
+				type: String,
+				default: '#C6D1DE'
+			},
+			disabledVoidColor: {
+				type: String,
+				default: '#EFF2F7'
+			},
+			iconClasses: {
+				type: [Array, Object],
+				default() {
+					return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
+				}
+			},
+			voidIconClass: {
+				type: String,
+				default: 'el-icon-star-off'
+			},
+			disabledVoidIconClass: {
+				type: String,
+				default: 'el-icon-star-on'
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			allowHalf: {
+				type: Boolean,
+				default: false
+			},
+			showText: {
+				type: Boolean,
+				default: false
+			},
+			showScore: {
+				type: Boolean,
+				default: false
+			},
+			textColor: {
+				type: String,
+				default: '#1f2d3d'
+			},
+			texts: {
+				type: Array,
+				default() {
+					return ['极差', '失望', '一般', '满意', '惊喜'];
+				}
+			},
+			scoreTemplate: {
+				type: String,
+				default: '{value}'
+			}
+		},
+
+		computed: {
+			text() {
+				let result = '';
+				if (this.showScore) {
+					result = this.scoreTemplate.replace(/\{\s*value\s*\}/, this.rateDisabled
+						? this.value
+						: this.currentValue);
+				} else if (this.showText) {
+					result = this.texts[Math.ceil(this.currentValue) - 1];
+				}
+				return result;
+			},
+
+			decimalStyle() {
+				let width = '';
+				if (this.rateDisabled) {
+					width = `${ this.valueDecimal }%`;
+				} else if (this.allowHalf) {
+					width = '50%';
+				}
+				return {
+					color: this.activeColor,
+					width
+				};
+			},
+
+			valueDecimal() {
+				return this.value * 100 - Math.floor(this.value) * 100;
+			},
+
+			classMap() {
+				return Array.isArray(this.iconClasses)
+					? {
+						[this.lowThreshold]: this.iconClasses[0],
+						[this.highThreshold]: { value: this.iconClasses[1], excluded: true },
+						[this.max]: this.iconClasses[2]
+					} : this.iconClasses;
+			},
+
+			decimalIconClass() {
+				return this.getValueFromMap(this.value, this.classMap);
+			},
+
+			voidClass() {
+				return this.rateDisabled ? this.disabledVoidIconClass : this.voidIconClass;
+			},
+
+			activeClass() {
+				return this.getValueFromMap(this.currentValue, this.classMap);
+			},
+
+			colorMap() {
+				return Array.isArray(this.colors)
+					? {
+						[this.lowThreshold]: this.colors[0],
+						[this.highThreshold]: { value: this.colors[1], excluded: true },
+						[this.max]: this.colors[2]
+					} : this.colors;
+			},
+
+			activeColor() {
+				return this.getValueFromMap(this.currentValue, this.colorMap);
+			},
+
+			classes() {
+				let result = [];
+				let i = 0;
+				let threshold = this.currentValue;
+				if (this.allowHalf && this.currentValue !== Math.floor(this.currentValue)) {
+					threshold--;
+				}
+				for (; i < threshold; i++) {
+					result.push(this.activeClass);
+				}
+				for (; i < this.max; i++) {
+					result.push(this.voidClass);
+				}
+				return result;
+			},
+
+			rateDisabled() {
+				return this.disabled || (this.elForm || {}).disabled;
+			}
+		},
+
+		watch: {
+			value(val) {
+				this.currentValue = val;
+				this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
+			}
+		},
+
+		methods: {
+			getMigratingConfig() {
+				return {
+					props: {
+						'text-template': 'text-template is renamed to score-template.'
+					}
+				};
+			},
+
+			getValueFromMap(value, map) {
+				const matchedKeys = Object.keys(map)
+					.filter(key => {
+						const val = map[key];
+						const excluded = isObject(val) ? val.excluded : false;
+						return excluded ? value < key : value <= key;
+					})
+					.sort((a, b) => a - b);
+				const matchedValue = map[matchedKeys[0]];
+				return isObject(matchedValue) ? matchedValue.value : (matchedValue || '');
+			},
+
+			showDecimalIcon(item) {
+				let showWhenDisabled = this.rateDisabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
+				/* istanbul ignore next */
+				let showWhenAllowHalf = this.allowHalf &&
+					this.pointerAtLeftHalf &&
+					item - 0.5 <= this.currentValue &&
+					item > this.currentValue;
+				return showWhenDisabled || showWhenAllowHalf;
+			},
+
+			getIconStyle(item) {
+				const voidColor = this.rateDisabled ? this.disabledVoidColor : this.voidColor;
+				return {
+					color: item <= this.currentValue ? this.activeColor : voidColor
+				};
+			},
+
+			selectValue(value) {
+				if (this.rateDisabled) {
+					return;
+				}
+				if (this.allowHalf && this.pointerAtLeftHalf) {
+					this.$emit('input', this.currentValue);
+					this.$emit('change', this.currentValue);
+				} else {
+					this.$emit('input', value);
+					this.$emit('change', value);
+				}
+			},
+
+			handleKey(e) {
+				if (this.rateDisabled) {
+					return;
+				}
+				let currentValue = this.currentValue;
+				const keyCode = e.keyCode;
+				if (keyCode === 38 || keyCode === 39) { // left / down
+					if (this.allowHalf) {
+						currentValue += 0.5;
+					} else {
+						currentValue += 1;
+					}
+					e.stopPropagation();
+					e.preventDefault();
+				} else if (keyCode === 37 || keyCode === 40) {
+					if (this.allowHalf) {
+						currentValue -= 0.5;
+					} else {
+						currentValue -= 1;
+					}
+					e.stopPropagation();
+					e.preventDefault();
+				}
+				currentValue = currentValue < 0 ? 0 : currentValue;
+				currentValue = currentValue > this.max ? this.max : currentValue;
+
+				this.$emit('input', currentValue);
+				this.$emit('change', currentValue);
+			},
+
+			setCurrentValue(value, event) {
+				if (this.rateDisabled) {
+					return;
+				}
+				/* istanbul ignore if */
+				if (this.allowHalf) {
+					let target = event.target;
+					if (hasClass(target, 'el-rate__item')) {
+						target = target.querySelector('.el-rate__icon');
+					}
+					if (hasClass(target, 'el-rate__decimal')) {
+						target = target.parentNode;
+					}
+					this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
+					this.currentValue = this.pointerAtLeftHalf ? value - 0.5 : value;
+				} else {
+					this.currentValue = value;
+				}
+				this.hoverIndex = value;
+			},
+
+			resetCurrentValue() {
+				if (this.rateDisabled) {
+					return;
+				}
+				if (this.allowHalf) {
+					this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
+				}
+				this.currentValue = this.value;
+				this.hoverIndex = -1;
+			}
+		},
+
+		created() {
+			if (!this.value) {
+				this.$emit('input', 0);
+			}
+		}
+	};
+</script>