cy-element-ui 1.1.13 → 1.1.15

package/packages/switch/src/component.vue

@@ -1,174 +1,174 @@
 <template>
-  <div
-    class="el-switch"
-    :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
-    role="switch"
-    :aria-checked="checked"
-    :aria-disabled="switchDisabled"
-    @click.prevent="switchValue"
-  >
-    <input
-      class="el-switch__input"
-      type="checkbox"
-      @change="handleChange"
-      ref="input"
-      :id="id"
-      :name="name"
-      :true-value="activeValue"
-      :false-value="inactiveValue"
-      :disabled="switchDisabled"
-      @keydown.enter="switchValue"
-    >
-    <span
-      :class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
-      v-if="inactiveIconClass || inactiveText">
-      <i :class="[inactiveIconClass]" v-if="inactiveIconClass"></i>
-      <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
-    </span>
-    <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
-    </span>
-    <span
-      :class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
-      v-if="activeIconClass || activeText">
-      <i :class="[activeIconClass]" v-if="activeIconClass"></i>
-      <span v-if="!activeIconClass && activeText" :aria-hidden="!checked">{{ activeText }}</span>
-    </span>
-  </div>
+	<div
+		class="el-switch"
+		:class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
+		role="switch"
+		:aria-checked="checked"
+		:aria-disabled="switchDisabled"
+		@click.prevent="switchValue"
+	>
+		<input
+			class="el-switch__input"
+			type="checkbox"
+			@change="handleChange"
+			ref="input"
+			:id="id"
+			:name="name"
+			:true-value="activeValue"
+			:false-value="inactiveValue"
+			:disabled="switchDisabled"
+			@keydown.enter="switchValue"
+		>
+		<span
+			:class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
+			v-if="inactiveIconClass || inactiveText">
+			<i :class="[inactiveIconClass]" v-if="inactiveIconClass"></i>
+			<span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
+		</span>
+		<span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
+		</span>
+		<span
+			:class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
+			v-if="activeIconClass || activeText">
+			<i :class="[activeIconClass]" v-if="activeIconClass"></i>
+			<span v-if="!activeIconClass && activeText" :aria-hidden="!checked">{{ activeText }}</span>
+		</span>
+	</div>
 </template>
 <script>
-  import emitter from 'element-ui/src/mixins/emitter';
-  import Focus from 'element-ui/src/mixins/focus';
-  import Migrating from 'element-ui/src/mixins/migrating';
+import emitter from 'element-ui/src/mixins/emitter';
+import Focus from 'element-ui/src/mixins/focus';
+import Migrating from 'element-ui/src/mixins/migrating';
 
-  export default {
-    name: 'ElSwitch',
-    mixins: [Focus('input'), Migrating, emitter],
-    inject: {
-      elForm: {
-        default: ''
-      }
-    },
-    props: {
-      value: {
-        type: [Boolean, String, Number],
-        default: false
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      width: {
-        type: Number,
-        default: 40
-      },
-      activeIconClass: {
-        type: String,
-        default: ''
-      },
-      inactiveIconClass: {
-        type: String,
-        default: ''
-      },
-      activeText: String,
-      inactiveText: String,
-      activeColor: {
-        type: String,
-        default: ''
-      },
-      inactiveColor: {
-        type: String,
-        default: ''
-      },
-      activeValue: {
-        type: [Boolean, String, Number],
-        default: true
-      },
-      inactiveValue: {
-        type: [Boolean, String, Number],
-        default: false
-      },
-      name: {
-        type: String,
-        default: ''
-      },
-      validateEvent: {
-        type: Boolean,
-        default: true
-      },
-      id: String
-    },
-    data() {
-      return {
-        coreWidth: this.width
-      };
-    },
-    created() {
-      if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {
-        this.$emit('input', this.inactiveValue);
-      }
-    },
-    computed: {
-      checked() {
-        return this.value === this.activeValue;
-      },
-      switchDisabled() {
-        return this.disabled || (this.elForm || {}).disabled;
-      }
-    },
-    watch: {
-      checked() {
-        this.$refs.input.checked = this.checked;
-        if (this.activeColor || this.inactiveColor) {
-          this.setBackgroundColor();
-        }
-        if (this.validateEvent) {
-          this.dispatch('ElFormItem', 'el.form.change', [this.value]);
-        }
-      }
-    },
-    methods: {
-      handleChange(event) {
-        const val = this.checked ? this.inactiveValue : this.activeValue;
-        this.$emit('input', val);
-        this.$emit('change', val);
-        this.$nextTick(() => {
-          // set input's checked property
-          // in case parent refuses to change component's value
-          if (this.$refs.input) {
-            this.$refs.input.checked = this.checked;
-          }
-        });
-      },
-      setBackgroundColor() {
-        let newColor = this.checked ? this.activeColor : this.inactiveColor;
-        this.$refs.core.style.borderColor = newColor;
-        this.$refs.core.style.backgroundColor = newColor;
-      },
-      switchValue() {
-        !this.switchDisabled && this.handleChange();
-      },
-      getMigratingConfig() {
-        return {
-          props: {
-            'on-color': 'on-color is renamed to active-color.',
-            'off-color': 'off-color is renamed to inactive-color.',
-            'on-text': 'on-text is renamed to active-text.',
-            'off-text': 'off-text is renamed to inactive-text.',
-            'on-value': 'on-value is renamed to active-value.',
-            'off-value': 'off-value is renamed to inactive-value.',
-            'on-icon-class': 'on-icon-class is renamed to active-icon-class.',
-            'off-icon-class': 'off-icon-class is renamed to inactive-icon-class.'
-          }
-        };
-      }
-    },
-    mounted() {
-      /* istanbul ignore if */
-      this.coreWidth = this.width || 40;
-      if (this.activeColor || this.inactiveColor) {
-        this.setBackgroundColor();
-      }
-      this.$refs.input.checked = this.checked;
-    }
-  };
+export default {
+	name: 'ElSwitch',
+	mixins: [Focus('input'), Migrating, emitter],
+	inject: {
+		elForm: {
+			default: ''
+		}
+	},
+	props: {
+		value: {
+			type: [Boolean, String, Number],
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		width: {
+			type: Number,
+			default: 40
+		},
+		activeIconClass: {
+			type: String,
+			default: ''
+		},
+		inactiveIconClass: {
+			type: String,
+			default: ''
+		},
+		activeText: String,
+		inactiveText: String,
+		activeColor: {
+			type: String,
+			default: ''
+		},
+		inactiveColor: {
+			type: String,
+			default: ''
+		},
+		activeValue: {
+			type: [Boolean, String, Number],
+			default: true
+		},
+		inactiveValue: {
+			type: [Boolean, String, Number],
+			default: false
+		},
+		name: {
+			type: String,
+			default: ''
+		},
+		validateEvent: {
+			type: Boolean,
+			default: true
+		},
+		id: String
+	},
+	data() {
+		return {
+			coreWidth: this.width
+		};
+	},
+	created() {
+		if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {
+			this.$emit('input', this.inactiveValue);
+		}
+	},
+	computed: {
+		checked() {
+			return this.value === this.activeValue;
+		},
+		switchDisabled() {
+			return this.disabled || (this.elForm || {}).disabled;
+		}
+	},
+	watch: {
+		checked() {
+			this.$refs.input.checked = this.checked;
+			if (this.activeColor || this.inactiveColor) {
+				this.setBackgroundColor();
+			}
+			if (this.validateEvent) {
+				this.dispatch('ElFormItem', 'el.form.change', [this.value]);
+			}
+		}
+	},
+	methods: {
+		handleChange(event) {
+			const val = this.checked ? this.inactiveValue : this.activeValue;
+			this.$emit('input', val);
+			this.$emit('change', val);
+			this.$nextTick(() => {
+				// set input's checked property
+				// in case parent refuses to change component's value
+				if (this.$refs.input) {
+					this.$refs.input.checked = this.checked;
+				}
+			});
+		},
+		setBackgroundColor() {
+			let newColor = this.checked ? this.activeColor : this.inactiveColor;
+			this.$refs.core.style.borderColor = newColor;
+			this.$refs.core.style.backgroundColor = newColor;
+		},
+		switchValue() {
+			!this.switchDisabled && this.handleChange();
+		},
+		getMigratingConfig() {
+			return {
+				props: {
+					'on-color': 'on-color is renamed to active-color.',
+					'off-color': 'off-color is renamed to inactive-color.',
+					'on-text': 'on-text is renamed to active-text.',
+					'off-text': 'off-text is renamed to inactive-text.',
+					'on-value': 'on-value is renamed to active-value.',
+					'off-value': 'off-value is renamed to inactive-value.',
+					'on-icon-class': 'on-icon-class is renamed to active-icon-class.',
+					'off-icon-class': 'off-icon-class is renamed to inactive-icon-class.'
+				}
+			};
+		}
+	},
+	mounted() {
+		/* istanbul ignore if */
+		this.coreWidth = this.width || 40;
+		if (this.activeColor || this.inactiveColor) {
+			this.setBackgroundColor();
+		}
+		this.$refs.input.checked = this.checked;
+	}
+};
 </script>

package/packages/tab-pane/index.js

@@ -2,7 +2,7 @@ import TabPane from '../tabs/src/tab-pane.vue';
 
 /* istanbul ignore next */
 TabPane.install = function(Vue) {
-  Vue.component(TabPane.name, TabPane);
+	Vue.component(TabPane.name, TabPane);
 };
 
 export default TabPane;

package/packages/tabDialog/index.js

@@ -4,20 +4,20 @@ import dialogDragWidth from './src/dialog/dragWidth';
 import dialogDragHeight from './src/dialog/dragHeight';
 
 export const TabDialogDirective = (Vue) => {
-  // 注册指令
-  Vue.directive('dialogDrag', dialogDrag);
-  Vue.directive('dialogDragWidth', dialogDragWidth);
-  Vue.directive('dialogDragHeight', dialogDragHeight);
+	// 注册指令
+	Vue.directive('dialogDrag', dialogDrag);
+	Vue.directive('dialogDragWidth', dialogDragWidth);
+	Vue.directive('dialogDragHeight', dialogDragHeight);
 };
 
 /* istanbul ignore next */
 TabDialog.install = function(Vue) {
-  // 注册组件
-  Vue.component(TabDialog.name, TabDialog);
-  // 注册指令
-  Vue.directive('dialogDrag', dialogDrag);
-  Vue.directive('dialogDragWidth', dialogDragWidth);
-  Vue.directive('dialogDragHeight', dialogDragHeight);
+	// 注册组件
+	Vue.component(TabDialog.name, TabDialog);
+	// 注册指令
+	Vue.directive('dialogDrag', dialogDrag);
+	Vue.directive('dialogDragWidth', dialogDragWidth);
+	Vue.directive('dialogDragHeight', dialogDragHeight);
 };
 
 export default TabDialog;

package/packages/tabDialog/src/dialog/drag.js

@@ -4,60 +4,60 @@
  */
 
 export default {
-  bind(el, binding, vnode, oldVnode) {
-    const value = binding.value;
-    if (value === false) return;
-    // 获取拖拽内容头部
-    const dialogHeaderEl = el.querySelector('.el-dialog__header');
-    const dragDom = el.querySelector('.el-dialog');
-    dialogHeaderEl.style.cursor = 'move';
-    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
-    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
-    dragDom.style.position = 'absolute';
-    dragDom.style.marginTop = 0;
-    let width = dragDom.style.width;
-    if (width.includes('%')) {
-      width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
-    } else {
-      width = +width.replace(/\px/g, '');
-    }
-    dragDom.style.left = `${ (document.body.clientWidth - width) / 2 }px`;
-    // 鼠标按下事件
-    dialogHeaderEl.onmousedown = (e) => {
-      // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
-      const disX = e.clientX - dialogHeaderEl.offsetLeft;
-      const disY = e.clientY - dialogHeaderEl.offsetTop;
+	bind(el, binding, vnode, oldVnode) {
+		const value = binding.value;
+		if (value === false) return;
+		// 获取拖拽内容头部
+		const dialogHeaderEl = el.querySelector('.el-dialog__header');
+		const dragDom = el.querySelector('.el-dialog');
+		dialogHeaderEl.style.cursor = 'move';
+		// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+		const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
+		dragDom.style.position = 'absolute';
+		dragDom.style.marginTop = 0;
+		let width = dragDom.style.width;
+		if (width.includes('%')) {
+			width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
+		} else {
+			width = +width.replace(/\px/g, '');
+		}
+		dragDom.style.left = `${ (document.body.clientWidth - width) / 2 }px`;
+		// 鼠标按下事件
+		dialogHeaderEl.onmousedown = (e) => {
+			// 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
+			const disX = e.clientX - dialogHeaderEl.offsetLeft;
+			const disY = e.clientY - dialogHeaderEl.offsetTop;
 
-      // 获取到的值带px 正则匹配替换
-      let styL, styT;
+			// 获取到的值带px 正则匹配替换
+			let styL, styT;
 
-      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
-      if (sty.left.includes('%')) {
-        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
-        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
-      } else {
-        styL = +sty.left.replace(/\px/g, '');
-        styT = +sty.top.replace(/\px/g, '');
-      }
+			// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+			if (sty.left.includes('%')) {
+				styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
+				styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
+			} else {
+				styL = +sty.left.replace(/\px/g, '');
+				styT = +sty.top.replace(/\px/g, '');
+			}
 
-      // 鼠标拖拽事件
-      document.onmousemove = function(e) {
-        // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
-        const l = e.clientX - disX;
-        const t = e.clientY - disY;
+			// 鼠标拖拽事件
+			document.onmousemove = function(e) {
+				// 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
+				const l = e.clientX - disX;
+				const t = e.clientY - disY;
 
-        let finallyL = l + styL;
-        let finallyT = t + styT;
+				let finallyL = l + styL;
+				let finallyT = t + styT;
 
-        // 移动当前元素
-        dragDom.style.left = `${ finallyL }px`;
-        dragDom.style.top = `${ finallyT }px`;
-      };
+				// 移动当前元素
+				dragDom.style.left = `${ finallyL }px`;
+				dragDom.style.top = `${ finallyT }px`;
+			};
 
-      document.onmouseup = function(e) {
-        document.onmousemove = null;
-        document.onmouseup = null;
-      };
-    };
-  }
+			document.onmouseup = function(e) {
+				document.onmousemove = null;
+				document.onmouseup = null;
+			};
+		};
+	}
 };

package/packages/tabDialog/src/dialog/dragHeight.js

@@ -4,31 +4,31 @@
  */
 
 export default {
-  bind(el) {
-    const dragDom = el.querySelector('.el-dialog');
-    const lineEl = document.createElement('div');
-    lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;';
-    lineEl.addEventListener('mousedown',
-      function(e) {
-        // 鼠标按下，计算当前元素距离可视区的距离
-        const disX = e.clientX - el.offsetLeft;
-        const disY = e.clientY - el.offsetTop;
-        // 当前宽度 高度
-        const curWidth = dragDom.offsetWidth;
-        const curHeight = dragDom.offsetHeight;
-        document.onmousemove = function(e) {
-          e.preventDefault(); // 移动时禁用默认事件
-          // 通过事件委托，计算移动的距离
-          const xl = e.clientX - disX;
-          const yl = e.clientY - disY;
-          dragDom.style.width = `${ curWidth + xl }px`;
-          dragDom.style.height = `${ curHeight + yl }px`;
-        };
-        document.onmouseup = function(e) {
-          document.onmousemove = null;
-          document.onmouseup = null;
-        };
-      }, false);
-    dragDom.appendChild(lineEl);
-  }
+	bind(el) {
+		const dragDom = el.querySelector('.el-dialog');
+		const lineEl = document.createElement('div');
+		lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;';
+		lineEl.addEventListener('mousedown',
+			function(e) {
+				// 鼠标按下，计算当前元素距离可视区的距离
+				const disX = e.clientX - el.offsetLeft;
+				const disY = e.clientY - el.offsetTop;
+				// 当前宽度 高度
+				const curWidth = dragDom.offsetWidth;
+				const curHeight = dragDom.offsetHeight;
+				document.onmousemove = function(e) {
+					e.preventDefault(); // 移动时禁用默认事件
+					// 通过事件委托，计算移动的距离
+					const xl = e.clientX - disX;
+					const yl = e.clientY - disY;
+					dragDom.style.width = `${ curWidth + xl }px`;
+					dragDom.style.height = `${ curHeight + yl }px`;
+				};
+				document.onmouseup = function(e) {
+					document.onmousemove = null;
+					document.onmouseup = null;
+				};
+			}, false);
+		dragDom.appendChild(lineEl);
+	}
 };

package/packages/tabDialog/src/dialog/dragWidth.js

@@ -4,27 +4,27 @@
  */
 
 export default {
-  bind(el) {
-    const dragDom = el.querySelector('.el-dialog');
-    const lineEl = document.createElement('div');
-    lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';
-    lineEl.addEventListener('mousedown',
-      function(e) {
-        // 鼠标按下，计算当前元素距离可视区的距离
-        const disX = e.clientX - el.offsetLeft;
-        // 当前宽度
-        const curWidth = dragDom.offsetWidth;
-        document.onmousemove = function(e) {
-          e.preventDefault(); // 移动时禁用默认事件
-          // 通过事件委托，计算移动的距离
-          const l = e.clientX - disX;
-          dragDom.style.width = `${ curWidth + l }px`;
-        };
-        document.onmouseup = function(e) {
-          document.onmousemove = null;
-          document.onmouseup = null;
-        };
-      }, false);
-    dragDom.appendChild(lineEl);
-  }
+	bind(el) {
+		const dragDom = el.querySelector('.el-dialog');
+		const lineEl = document.createElement('div');
+		lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';
+		lineEl.addEventListener('mousedown',
+			function(e) {
+				// 鼠标按下，计算当前元素距离可视区的距离
+				const disX = e.clientX - el.offsetLeft;
+				// 当前宽度
+				const curWidth = dragDom.offsetWidth;
+				document.onmousemove = function(e) {
+					e.preventDefault(); // 移动时禁用默认事件
+					// 通过事件委托，计算移动的距离
+					const l = e.clientX - disX;
+					dragDom.style.width = `${ curWidth + l }px`;
+				};
+				document.onmouseup = function(e) {
+					document.onmousemove = null;
+					document.onmouseup = null;
+				};
+			}, false);
+		dragDom.appendChild(lineEl);
+	}
 };