cy-element-ui 1.0.87 → 1.1.2

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 'src/utils/vue-popper';
-	import Locale from 'src/mixins/locale';
-	import ElInput from '../../../input';
-	import ElButton from '../../../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: 'el-color-picker-dropdown',
+
+    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: '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%)'
+      };
+    }
+  };
+</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);
+    }
+  });
+}