cy-element-ui 1.1.25 → 1.1.26

package/packages/color-picker/src/components/picker-dropdown.vue

@@ -1,121 +1,121 @@
-<template>
-	<transition name="el-zoom-in-top" @after-leave="doDestroy">
-		<div
-			class="el-color-dropdown"
-			v-show="showPopper">
-			<div class="el-color-dropdown__main-wrapper">
-				<hue-slider ref="hue" :color="color" vertical style="float: right;"></hue-slider>
-				<sv-panel ref="sl" :color="color"></sv-panel>
-			</div>
-			<alpha-slider v-if="showAlpha" ref="alpha" :color="color"></alpha-slider>
-			<predefine v-if="predefine" :color="color" :colors="predefine"></predefine>
-			<div class="el-color-dropdown__btns">
-				<span class="el-color-dropdown__value">
-					<el-input
-						v-model="customInput"
-						@keyup.native.enter="handleConfirm"
-						@blur="handleConfirm"
-						:validate-event="false"
-						size="mini">
-					</el-input>
-				</span>
-				<el-button
-					size="mini"
-					type="text"
-					class="el-color-dropdown__link-btn"
-					@click="$emit('clear')">
-					{{ t('el.colorpicker.clear') }}
-				</el-button>
-				<el-button
-					plain
-					size="mini"
-					class="el-color-dropdown__btn"
-					@click="confirmValue">
-					{{ t('el.colorpicker.confirm') }}
-				</el-button>
-			</div>
-		</div>
-	</transition>
-</template>
-
-<script>
-import SvPanel from './sv-panel';
-import HueSlider from './hue-slider';
-import AlphaSlider from './alpha-slider';
-import Predefine from './predefine';
-import Popper from 'element-ui/src/utils/vue-popper';
-import Locale from 'element-ui/src/mixins/locale';
-import ElInput from 'element-ui/packages/input';
-import ElButton from 'element-ui/packages/button';
-
-export default {
-	name: 'ElColorPickerDropdown',
-
-	mixins: [Popper, Locale],
-
-	components: {
-		SvPanel,
-		HueSlider,
-		AlphaSlider,
-		ElInput,
-		ElButton,
-		Predefine
-	},
-
-	props: {
-		color: {
-			required: true
-		},
-		showAlpha: Boolean,
-		predefine: Array
-	},
-
-	data() {
-		return {
-			customInput: ''
-		};
-	},
-
-	computed: {
-		currentColor() {
-			const parent = this.$parent;
-			return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
-		}
-	},
-
-	methods: {
-		confirmValue() {
-			this.$emit('pick');
-		},
-
-		handleConfirm() {
-			this.color.fromString(this.customInput);
-		}
-	},
-
-	mounted() {
-		this.$parent.popperElm = this.popperElm = this.$el;
-		this.referenceElm = this.$parent.$el;
-	},
-
-	watch: {
-		showPopper(val) {
-			if (val === true) {
-				this.$nextTick(() => {
-					const { sl, hue, alpha } = this.$refs;
-					sl && sl.update();
-					hue && hue.update();
-					alpha && alpha.update();
-				});
-			}
-		},
-
-		currentColor: {
-			immediate: true,
-			handler(val) {
-				this.customInput = val;
-			}
-		}
-	}
-};
-</script>
+<template>
+	<transition name="el-zoom-in-top" @after-leave="doDestroy">
+		<div
+			class="el-color-dropdown"
+			v-show="showPopper">
+			<div class="el-color-dropdown__main-wrapper">
+				<hue-slider ref="hue" :color="color" vertical style="float: right;"></hue-slider>
+				<sv-panel ref="sl" :color="color"></sv-panel>
+			</div>
+			<alpha-slider v-if="showAlpha" ref="alpha" :color="color"></alpha-slider>
+			<predefine v-if="predefine" :color="color" :colors="predefine"></predefine>
+			<div class="el-color-dropdown__btns">
+				<span class="el-color-dropdown__value">
+					<el-input
+						v-model="customInput"
+						@keyup.native.enter="handleConfirm"
+						@blur="handleConfirm"
+						:validate-event="false"
+						size="mini">
+					</el-input>
+				</span>
+				<el-button
+					size="mini"
+					type="text"
+					class="el-color-dropdown__link-btn"
+					@click="$emit('clear')">
+					{{ t('el.colorpicker.clear') }}
+				</el-button>
+				<el-button
+					plain
+					size="mini"
+					class="el-color-dropdown__btn"
+					@click="confirmValue">
+					{{ t('el.colorpicker.confirm') }}
+				</el-button>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+import SvPanel from './sv-panel';
+import HueSlider from './hue-slider';
+import AlphaSlider from './alpha-slider';
+import Predefine from './predefine';
+import Popper from 'element-ui/src/utils/vue-popper';
+import Locale from 'element-ui/src/mixins/locale';
+import ElInput from 'element-ui/packages/input';
+import ElButton from 'element-ui/packages/button';
+
+export default {
+	name: 'ElColorPickerDropdown',
+
+	mixins: [Popper, Locale],
+
+	components: {
+		SvPanel,
+		HueSlider,
+		AlphaSlider,
+		ElInput,
+		ElButton,
+		Predefine
+	},
+
+	props: {
+		color: {
+			required: true
+		},
+		showAlpha: Boolean,
+		predefine: Array
+	},
+
+	data() {
+		return {
+			customInput: ''
+		};
+	},
+
+	computed: {
+		currentColor() {
+			const parent = this.$parent;
+			return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
+		}
+	},
+
+	methods: {
+		confirmValue() {
+			this.$emit('pick');
+		},
+
+		handleConfirm() {
+			this.color.fromString(this.customInput);
+		}
+	},
+
+	mounted() {
+		this.$parent.popperElm = this.popperElm = this.$el;
+		this.referenceElm = this.$parent.$el;
+	},
+
+	watch: {
+		showPopper(val) {
+			if (val === true) {
+				this.$nextTick(() => {
+					const { sl, hue, alpha } = this.$refs;
+					sl && sl.update();
+					hue && hue.update();
+					alpha && alpha.update();
+				});
+			}
+		},
+
+		currentColor: {
+			immediate: true,
+			handler(val) {
+				this.customInput = val;
+			}
+		}
+	}
+};
+</script>

package/packages/color-picker/src/components/predefine.vue

@@ -1,61 +1,61 @@
-<template>
-	<div class="el-color-predefine">
-		<div class="el-color-predefine__colors">
-			<div class="el-color-predefine__color-selector"
-				:class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
-				v-for="(item, index) in rgbaColors"
-				:key="colors[index]"
-				@click="handleSelect(index)">
-				<div :style="{'background-color': item.value}">
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import Color from '../color';
-
-export default {
-	props: {
-		colors: { type: Array, required: true },
-		color: { required: true }
-	},
-	data() {
-		return {
-			rgbaColors: this.parseColors(this.colors, this.color)
-		};
-	},
-	methods: {
-		handleSelect(index) {
-			this.color.fromString(this.colors[index]);
-		},
-		parseColors(colors, color) {
-			return colors.map(value => {
-				const c = new Color();
-				c.enableAlpha = true;
-				c.format = 'rgba';
-				c.fromString(value);
-				c.selected = c.value === color.value;
-				return c;
-			});
-		}
-	},
-	watch: {
-		'$parent.currentColor'(val) {
-			const color = new Color();
-			color.fromString(val);
-
-			this.rgbaColors.forEach(item => {
-				item.selected = color.compare(item);
-			});
-		},
-		colors(newVal) {
-			this.rgbaColors = this.parseColors(newVal, this.color);
-		},
-		color(newVal) {
-			this.rgbaColors = this.parseColors(this.colors, newVal);
-		}
-	}
-};
-</script>
+<template>
+	<div class="el-color-predefine">
+		<div class="el-color-predefine__colors">
+			<div class="el-color-predefine__color-selector"
+				:class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
+				v-for="(item, index) in rgbaColors"
+				:key="colors[index]"
+				@click="handleSelect(index)">
+				<div :style="{'background-color': item.value}">
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import Color from '../color';
+
+export default {
+	props: {
+		colors: { type: Array, required: true },
+		color: { required: true }
+	},
+	data() {
+		return {
+			rgbaColors: this.parseColors(this.colors, this.color)
+		};
+	},
+	methods: {
+		handleSelect(index) {
+			this.color.fromString(this.colors[index]);
+		},
+		parseColors(colors, color) {
+			return colors.map(value => {
+				const c = new Color();
+				c.enableAlpha = true;
+				c.format = 'rgba';
+				c.fromString(value);
+				c.selected = c.value === color.value;
+				return c;
+			});
+		}
+	},
+	watch: {
+		'$parent.currentColor'(val) {
+			const color = new Color();
+			color.fromString(val);
+
+			this.rgbaColors.forEach(item => {
+				item.selected = color.compare(item);
+			});
+		},
+		colors(newVal) {
+			this.rgbaColors = this.parseColors(newVal, this.color);
+		},
+		color(newVal) {
+			this.rgbaColors = this.parseColors(this.colors, newVal);
+		}
+	}
+};
+</script>

package/packages/color-picker/src/components/sv-panel.vue

@@ -1,100 +1,100 @@
-<template>
-	<div class="el-color-svpanel"
-		:style="{
-			backgroundColor: background
-		}">
-		<div class="el-color-svpanel__white"></div>
-		<div class="el-color-svpanel__black"></div>
-		<div class="el-color-svpanel__cursor"
-			:style="{
-				top: cursorTop + 'px',
-				left: cursorLeft + 'px'
-			}">
-			<div></div>
-		</div>
-	</div>
-</template>
-
-<script>
-import draggable from '../draggable';
-
-export default {
-	name: 'ElSlPanel',
-
-	props: {
-		color: {
-			required: true
-		}
-	},
-
-	computed: {
-		colorValue() {
-			const hue = this.color.get('hue');
-			const value = this.color.get('value');
-			return { hue, value };
-		}
-	},
-
-	watch: {
-		colorValue() {
-			this.update();
-		}
-	},
-
-	methods: {
-		update() {
-			const saturation = this.color.get('saturation');
-			const value = this.color.get('value');
-
-			const el = this.$el;
-			let { clientWidth: width, clientHeight: height } = el;
-
-			this.cursorLeft = saturation * width / 100;
-			this.cursorTop = (100 - value) * height / 100;
-
-			this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
-		},
-
-		handleDrag(event) {
-			const el = this.$el;
-			const rect = el.getBoundingClientRect();
-
-			let left = event.clientX - rect.left;
-			let top = event.clientY - rect.top;
-			left = Math.max(0, left);
-			left = Math.min(left, rect.width);
-
-			top = Math.max(0, top);
-			top = Math.min(top, rect.height);
-
-			this.cursorLeft = left;
-			this.cursorTop = top;
-			this.color.set({
-				saturation: left / rect.width * 100,
-				value: 100 - top / rect.height * 100
-			});
-		}
-	},
-
-	mounted() {
-		draggable(this.$el, {
-			drag: (event) => {
-				this.handleDrag(event);
-			},
-			end: (event) => {
-				this.handleDrag(event);
-			}
-		});
-
-		this.update();
-	},
-
-	data() {
-		return {
-			cursorTop: 0,
-			cursorLeft: 0,
-			background: 'hsl(0, 100%, 50%)'
-		};
-	}
-};
-</script>
+<template>
+	<div class="el-color-svpanel"
+		:style="{
+			backgroundColor: background
+		}">
+		<div class="el-color-svpanel__white"></div>
+		<div class="el-color-svpanel__black"></div>
+		<div class="el-color-svpanel__cursor"
+			:style="{
+				top: cursorTop + 'px',
+				left: cursorLeft + 'px'
+			}">
+			<div></div>
+		</div>
+	</div>
+</template>
+
+<script>
+import draggable from '../draggable';
+
+export default {
+	name: 'ElSlPanel',
+
+	props: {
+		color: {
+			required: true
+		}
+	},
+
+	computed: {
+		colorValue() {
+			const hue = this.color.get('hue');
+			const value = this.color.get('value');
+			return { hue, value };
+		}
+	},
+
+	watch: {
+		colorValue() {
+			this.update();
+		}
+	},
+
+	methods: {
+		update() {
+			const saturation = this.color.get('saturation');
+			const value = this.color.get('value');
+
+			const el = this.$el;
+			let { clientWidth: width, clientHeight: height } = el;
+
+			this.cursorLeft = saturation * width / 100;
+			this.cursorTop = (100 - value) * height / 100;
+
+			this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
+		},
+
+		handleDrag(event) {
+			const el = this.$el;
+			const rect = el.getBoundingClientRect();
+
+			let left = event.clientX - rect.left;
+			let top = event.clientY - rect.top;
+			left = Math.max(0, left);
+			left = Math.min(left, rect.width);
+
+			top = Math.max(0, top);
+			top = Math.min(top, rect.height);
+
+			this.cursorLeft = left;
+			this.cursorTop = top;
+			this.color.set({
+				saturation: left / rect.width * 100,
+				value: 100 - top / rect.height * 100
+			});
+		}
+	},
+
+	mounted() {
+		draggable(this.$el, {
+			drag: (event) => {
+				this.handleDrag(event);
+			},
+			end: (event) => {
+				this.handleDrag(event);
+			}
+		});
+
+		this.update();
+	},
+
+	data() {
+		return {
+			cursorTop: 0,
+			cursorLeft: 0,
+			background: 'hsl(0, 100%, 50%)'
+		};
+	}
+};
+</script>

package/packages/color-picker/src/draggable.js

@@ -1,36 +1,36 @@
-import Vue from 'vue';
-let isDragging = false;
-
-export default function(element, options) {
-	if (Vue.prototype.$isServer) return;
-	const moveFn = function(event) {
-		if (options.drag) {
-			options.drag(event);
-		}
-	};
-	const upFn = function(event) {
-		document.removeEventListener('mousemove', moveFn);
-		document.removeEventListener('mouseup', upFn);
-		document.onselectstart = null;
-		document.ondragstart = null;
-
-		isDragging = false;
-
-		if (options.end) {
-			options.end(event);
-		}
-	};
-	element.addEventListener('mousedown', function(event) {
-		if (isDragging) return;
-		document.onselectstart = function() { return false; };
-		document.ondragstart = function() { return false; };
-
-		document.addEventListener('mousemove', moveFn);
-		document.addEventListener('mouseup', upFn);
-		isDragging = true;
-
-		if (options.start) {
-			options.start(event);
-		}
-	});
-}
+import Vue from 'vue';
+let isDragging = false;
+
+export default function(element, options) {
+	if (Vue.prototype.$isServer) return;
+	const moveFn = function(event) {
+		if (options.drag) {
+			options.drag(event);
+		}
+	};
+	const upFn = function(event) {
+		document.removeEventListener('mousemove', moveFn);
+		document.removeEventListener('mouseup', upFn);
+		document.onselectstart = null;
+		document.ondragstart = null;
+
+		isDragging = false;
+
+		if (options.end) {
+			options.end(event);
+		}
+	};
+	element.addEventListener('mousedown', function(event) {
+		if (isDragging) return;
+		document.onselectstart = function() { return false; };
+		document.ondragstart = function() { return false; };
+
+		document.addEventListener('mousemove', moveFn);
+		document.addEventListener('mouseup', upFn);
+		isDragging = true;
+
+		if (options.start) {
+			options.start(event);
+		}
+	});
+}