cy-element-ui 1.1.13 → 1.1.15

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>
+	<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';
+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: 'el-color-picker-dropdown',
+export default {
+	name: 'ElColorPickerDropdown',
 
-    mixins: [Popper, Locale],
+	mixins: [Popper, Locale],
 
-    components: {
-      SvPanel,
-      HueSlider,
-      AlphaSlider,
-      ElInput,
-      ElButton,
-      Predefine
-    },
+	components: {
+		SvPanel,
+		HueSlider,
+		AlphaSlider,
+		ElInput,
+		ElButton,
+		Predefine
+	},
 
-    props: {
-      color: {
-        required: true
-      },
-      showAlpha: Boolean,
-      predefine: Array
-    },
+	props: {
+		color: {
+			required: true
+		},
+		showAlpha: Boolean,
+		predefine: Array
+	},
 
-    data() {
-      return {
-        customInput: ''
-      };
-    },
+	data() {
+		return {
+			customInput: ''
+		};
+	},
 
-    computed: {
-      currentColor() {
-        const parent = this.$parent;
-        return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
-      }
-    },
+	computed: {
+		currentColor() {
+			const parent = this.$parent;
+			return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
+		}
+	},
 
-    methods: {
-      confirmValue() {
-        this.$emit('pick');
-      },
+	methods: {
+		confirmValue() {
+			this.$emit('pick');
+		},
 
-      handleConfirm() {
-        this.color.fromString(this.customInput);
-      }
-    },
+		handleConfirm() {
+			this.color.fromString(this.customInput);
+		}
+	},
 
-    mounted() {
-      this.$parent.popperElm = this.popperElm = this.$el;
-      this.referenceElm = this.$parent.$el;
-    },
+	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();
-          });
-        }
-      },
+	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;
-        }
-      }
-    }
-  };
+		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>
+	<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';
+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);
+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>
+			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>
+	<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: 'el-sl-panel',
-
-    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%)'
-      };
-    }
-  };
+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

@@ -2,35 +2,35 @@ 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;
+	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;
+		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; };
+		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;
+		document.addEventListener('mousemove', moveFn);
+		document.addEventListener('mouseup', upFn);
+		isDragging = true;
 
-    if (options.start) {
-      options.start(event);
-    }
-  });
+		if (options.start) {
+			options.start(event);
+		}
+	});
 }