cy-element-ui 1.0.4 → 1.0.6

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

@@ -2,10 +2,10 @@
 	<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)">
+				: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>
@@ -14,48 +14,48 @@
 </template>
 
 <script>
-	import Color from '../color';
+import Color from '../color';
 
-	export default {
-		props: {
-			colors: { type: Array, required: true },
-			color: { required: true }
+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]);
 		},
-		data() {
-			return {
-				rgbaColors: this.parseColors(this.colors, this.color)
-			};
+		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);
+			});
 		},
-		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;
-				});
-			}
+		colors(newVal) {
+			this.rgbaColors = this.parseColors(newVal, this.color);
 		},
-		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);
-			}
+		color(newVal) {
+			this.rgbaColors = this.parseColors(this.colors, newVal);
 		}
-	};
+	}
+};
 </script>

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

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

@@ -18,171 +18,171 @@
 			<span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
 		</div>
 		<picker-dropdown
-			 ref="dropdown"
-			 :class="['el-color-picker__panel', popperClass || '']"
-			 v-model="showPicker"
-			 @pick="confirmValue"
-			 @clear="clearValue"
-			 :color="color"
-			 :show-alpha="showAlpha"
-			 :predefine="predefine">
+			ref="dropdown"
+			:class="['el-color-picker__panel', popperClass || '']"
+			v-model="showPicker"
+			@pick="confirmValue"
+			@clear="clearValue"
+			:color="color"
+			:show-alpha="showAlpha"
+			:predefine="predefine">
 		</picker-dropdown>
 	</div>
 </template>
 
 <script>
-	import Color from './color';
-	import PickerDropdown from './components/picker-dropdown.vue';
-	import Clickoutside from 'element-ui/src/utils/clickoutside';
-	import Emitter from 'element-ui/src/mixins/emitter';
-
-	export default {
-		name: 'ElColorPicker',
-
-		mixins: [Emitter],
-
-		props: {
-			value: String,
-			showAlpha: Boolean,
-			colorFormat: String,
-			disabled: Boolean,
-			size: String,
-			popperClass: String,
-			predefine: Array
+import Color from './color';
+import PickerDropdown from './components/picker-dropdown.vue';
+import Clickoutside from 'element-ui/src/utils/clickoutside';
+import Emitter from 'element-ui/src/mixins/emitter';
+
+export default {
+	name: 'ElColorPicker',
+
+	mixins: [Emitter],
+
+	props: {
+		value: String,
+		showAlpha: Boolean,
+		colorFormat: String,
+		disabled: Boolean,
+		size: String,
+		popperClass: String,
+		predefine: Array
+	},
+
+	inject: {
+		elForm: {
+			default: ''
 		},
+		elFormItem: {
+			default: ''
+		}
+	},
 
-		inject: {
-			elForm: {
-				default: ''
-			},
-			elFormItem: {
-				default: ''
-			}
-		},
-
-		directives: { Clickoutside },
-
-		computed: {
-			displayedColor() {
-				if (!this.value && !this.showPanelColor) {
-					return 'transparent';
-				}
-
-				return this.displayedRgb(this.color, this.showAlpha);
-			},
+	directives: { Clickoutside },
 
-			_elFormItemSize() {
-				return (this.elFormItem || {}).elFormItemSize;
-			},
+	computed: {
+		displayedColor() {
+			if (!this.value && !this.showPanelColor) {
+				return 'transparent';
+			}
 
-			colorSize() {
-				return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
-			},
+			return this.displayedRgb(this.color, this.showAlpha);
+		},
 
-			colorDisabled() {
-				return this.disabled || (this.elForm || {}).disabled;
-			}
+		_elFormItemSize() {
+			return (this.elFormItem || {}).elFormItemSize;
 		},
 
-		watch: {
-			value(val) {
-				if (!val) {
-					this.showPanelColor = false;
-				} else if (val && val !== this.color.value) {
-					this.color.fromString(val);
-				}
-			},
-			color: {
-				deep: true,
-				handler() {
-					this.showPanelColor = true;
-				}
-			},
-			displayedColor(val) {
-				if (!this.showPicker) return;
-				const currentValueColor = new Color({
-					enableAlpha: this.showAlpha,
-					format: this.colorFormat
-				});
-				currentValueColor.fromString(this.value);
-
-				const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);
-				if (val !== currentValueColorRgb) {
-					this.$emit('active-change', val);
-				}
-			}
+		colorSize() {
+			return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
 		},
 
-		methods: {
-			handleTrigger() {
-				if (this.colorDisabled) return;
-				this.showPicker = !this.showPicker;
-			},
-			confirmValue() {
-				const value = this.color.value;
-				this.$emit('input', value);
-				this.$emit('change', value);
-				this.dispatch('ElFormItem', 'el.form.change', value);
-				this.showPicker = false;
-			},
-			clearValue() {
-				this.$emit('input', null);
-				this.$emit('change', null);
-				if (this.value !== null) {
-					this.dispatch('ElFormItem', 'el.form.change', null);
-				}
-				this.showPanelColor = false;
-				this.showPicker = false;
-				this.resetColor();
-			},
-			hide() {
-				this.showPicker = false;
-				this.resetColor();
-			},
-			resetColor() {
-				this.$nextTick(_ => {
-					if (this.value) {
-						this.color.fromString(this.value);
-					} else {
-						this.showPanelColor = false;
-					}
-				});
-			},
-			displayedRgb(color, showAlpha) {
-				if (!(color instanceof Color)) {
-					throw Error('color should be instance of Color Class');
-				}
+		colorDisabled() {
+			return this.disabled || (this.elForm || {}).disabled;
+		}
+	},
 
-				const { r, g, b } = color.toRgb();
-				return showAlpha
-					? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
-					: `rgb(${ r }, ${ g }, ${ b })`;
+	watch: {
+		value(val) {
+			if (!val) {
+				this.showPanelColor = false;
+			} else if (val && val !== this.color.value) {
+				this.color.fromString(val);
 			}
 		},
-
-		mounted() {
-			const value = this.value;
-			if (value) {
-				this.color.fromString(value);
+		color: {
+			deep: true,
+			handler() {
+				this.showPanelColor = true;
 			}
-			this.popperElm = this.$refs.dropdown.$el;
 		},
-
-		data() {
-			const color = new Color({
+		displayedColor(val) {
+			if (!this.showPicker) return;
+			const currentValueColor = new Color({
 				enableAlpha: this.showAlpha,
 				format: this.colorFormat
 			});
+			currentValueColor.fromString(this.value);
 
-			return {
-				color,
-				showPicker: false,
-				showPanelColor: false
-			};
+			const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);
+			if (val !== currentValueColorRgb) {
+				this.$emit('active-change', val);
+			}
+		}
+	},
+
+	methods: {
+		handleTrigger() {
+			if (this.colorDisabled) return;
+			this.showPicker = !this.showPicker;
+		},
+		confirmValue() {
+			const value = this.color.value;
+			this.$emit('input', value);
+			this.$emit('change', value);
+			this.dispatch('ElFormItem', 'el.form.change', value);
+			this.showPicker = false;
+		},
+		clearValue() {
+			this.$emit('input', null);
+			this.$emit('change', null);
+			if (this.value !== null) {
+				this.dispatch('ElFormItem', 'el.form.change', null);
+			}
+			this.showPanelColor = false;
+			this.showPicker = false;
+			this.resetColor();
+		},
+		hide() {
+			this.showPicker = false;
+			this.resetColor();
 		},
+		resetColor() {
+			this.$nextTick(_ => {
+				if (this.value) {
+					this.color.fromString(this.value);
+				} else {
+					this.showPanelColor = false;
+				}
+			});
+		},
+		displayedRgb(color, showAlpha) {
+			if (!(color instanceof Color)) {
+				throw Error('color should be instance of Color Class');
+			}
+
+			const { r, g, b } = color.toRgb();
+			return showAlpha
+				? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
+				: `rgb(${ r }, ${ g }, ${ b })`;
+		}
+	},
 
-		components: {
-			PickerDropdown
+	mounted() {
+		const value = this.value;
+		if (value) {
+			this.color.fromString(value);
 		}
-	};
+		this.popperElm = this.$refs.dropdown.$el;
+	},
+
+	data() {
+		const color = new Color({
+			enableAlpha: this.showAlpha,
+			format: this.colorFormat
+		});
+
+		return {
+			color,
+			showPicker: false,
+			showPanelColor: false
+		};
+	},
+
+	components: {
+		PickerDropdown
+	}
+};
 </script>

package/packages/container/src/main.vue

@@ -5,29 +5,29 @@
 </template>
 
 <script>
-	export default {
-		name: 'ElContainer',
+export default {
+	name: 'ElContainer',
 
-		componentName: 'ElContainer',
+	componentName: 'ElContainer',
 
-		props: {
-			direction: String
-		},
+	props: {
+		direction: String
+	},
 
-		computed: {
-			isVertical() {
-				if (this.direction === 'vertical') {
-					return true;
-				} else if (this.direction === 'horizontal') {
-					return false;
-				}
-				return this.$slots && this.$slots.default
-					? this.$slots.default.some(vnode => {
-						const tag = vnode.componentOptions && vnode.componentOptions.tag;
-						return tag === 'el-header' || tag === 'el-footer';
-					})
-					: false;
+	computed: {
+		isVertical() {
+			if (this.direction === 'vertical') {
+				return true;
+			} else if (this.direction === 'horizontal') {
+				return false;
 			}
+			return this.$slots && this.$slots.default
+				? this.$slots.default.some(vnode => {
+					const tag = vnode.componentOptions && vnode.componentOptions.tag;
+					return tag === 'el-header' || tag === 'el-footer';
+				})
+				: false;
 		}
-	};
+	}
+};
 </script>