cy-element-ui 1.0.4 → 1.0.5

package/packages/statistic/src/main.vue

@@ -109,8 +109,8 @@ export default {
 		},
 		magnification(num, mulriple = 1000, groupSeparator = ',') {
 			// magnification factor
-			const level = String(mulriple).length ;
-			return num.replace(new RegExp(`(\\d)(?=(\\d{${level - 1}})+$)`, 'g'), `$1${groupSeparator}`);
+			const level = String(mulriple).length;
+			return num.replace(new RegExp(`(\\d)(?=(\\d{${ level - 1 }})+$)`, 'g'), `$1${ groupSeparator }`);
 		},
 		dispose() {
 			let { value, rate, groupSeparator } = this;
@@ -123,7 +123,7 @@ export default {
 			if (groupSeparator) {
 				integer = this.magnification(integer, rate, groupSeparator);
 			}
-			let result = `${integer}${decimal ? this.decimalSeparator + decimal : ''}`;
+			let result = `${ integer }${ decimal ? this.decimalSeparator + decimal : '' }`;
 			this.disposeValue = result;
 			return result;
 		},
@@ -158,7 +158,7 @@ export default {
 				timeUnits,
 				(con, item) => {
 					const name = item[0];
-					return con.replace(new RegExp(`${name}+`, 'g'), (match) => {
+					return con.replace(new RegExp(`${ name }+`, 'g'), (match) => {
 						let sum = chain(time).divide(item[1]).floor(0).value();
 						time -= multiply(sum, item[1]);
 						return padStart(String(sum), String(match).length, 0);
@@ -189,7 +189,7 @@ export default {
 			let { REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend } = this;
 			if (timeTask) return;
 			let than = this;
-			this.timeTask = setInterval(()=> {
+			this.timeTask = setInterval(() => {
 				let diffTiem = diffDate(timeVlaue, Date.now());
 				than.disposeValue = formatTimeStr(diffTiem);
 				stopTime(diffTiem);
@@ -197,7 +197,6 @@ export default {
 			this.$once('hook:beforeDestroy', () => {
 				suspend(true);
 			});
-
 		}
 	}
 };

package/packages/steps/src/step.vue

@@ -7,7 +7,7 @@
 			isSimple && 'is-simple',
 			isLast && !space && !isCenter && 'is-flex',
 			isCenter && !isVertical && !isSimple && 'is-center'
-		 ]">
+		]">
 		<!-- icon & line -->
 		<div
 			class="el-step__head"
@@ -110,7 +110,7 @@ export default {
 		},
 		space() {
 			const { isSimple, $parent: { space } } = this;
-			return isSimple ? '' : space ;
+			return isSimple ? '' : space;
 		},
 		style: function() {
 			const style = {};

package/packages/steps/src/steps.vue

@@ -2,10 +2,10 @@
 	<div
 		class="el-steps"
 		:class="[
-			 !simple && 'el-steps--' + direction,
-			 simple && 'el-steps--simple'
-		 ]">
-			<slot></slot>
+			!simple && 'el-steps--' + direction,
+			simple && 'el-steps--simple'
+		]">
+		<slot></slot>
 	</div>
 </template>
 

package/packages/subTitle/index.js

@@ -0,0 +1,8 @@
+import SubTitle from './src/main';
+
+/* istanbul ignore next */
+SubTitle.install = function(Vue) {
+	Vue.component(SubTitle.name, SubTitle);
+};
+
+export default SubTitle;

package/packages/subTitle/src/main.vue

@@ -0,0 +1,33 @@
+<template>
+	<div class="cy-sub-title" :style="lineColorStyle">
+		<div class="left">
+			<slot>{{ title }}</slot>
+		</div>
+		
+		<div class="right">
+			<slot name="right"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'CySubTitle',
+	props: {
+		title: {
+			type: String,
+			default: ''
+		},
+		
+		lineColor: {
+			type: String,
+			default: ''
+		}
+	},
+	computed: {
+		lineColorStyle() {
+			return this.lineColor ? `border-color: ${ this.lineColor };` : ''
+		}
+	},
+};
+</script>

package/packages/switch/src/component.vue

@@ -36,139 +36,139 @@
 	</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: ''
-			}
+export default {
+	name: 'ElSwitch',
+	mixins: [Focus('input'), Migrating, emitter],
+	inject: {
+		elForm: {
+			default: ''
+		}
+	},
+	props: {
+		value: {
+			type: [Boolean, String, Number],
+			default: false
 		},
-		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
+		disabled: {
+			type: Boolean,
+			default: false
 		},
-		data() {
-			return {
-				coreWidth: this.width
-			};
+		width: {
+			type: Number,
+			default: 40
 		},
-		created() {
-			if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {
-				this.$emit('input', this.inactiveValue);
-			}
+		activeIconClass: {
+			type: String,
+			default: ''
 		},
-		computed: {
-			checked() {
-				return this.value === this.activeValue;
-			},
-			switchDisabled() {
-				return this.disabled || (this.elForm || {}).disabled;
-			}
+		inactiveIconClass: {
+			type: String,
+			default: ''
 		},
-		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]);
-				}
-			}
+		activeText: String,
+		inactiveText: String,
+		activeColor: {
+			type: String,
+			default: ''
 		},
-		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.'
-					}
-				};
-			}
+		inactiveColor: {
+			type: String,
+			default: ''
+		},
+		activeValue: {
+			type: [Boolean, String, Number],
+			default: true
+		},
+		inactiveValue: {
+			type: [Boolean, String, Number],
+			default: false
 		},
-		mounted() {
-			/* istanbul ignore if */
-			this.coreWidth = this.width || 40;
+		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();
 			}
-			this.$refs.input.checked = this.checked;
+			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/tabDialog/index.js

@@ -0,0 +1,23 @@
+import TabDialog from './src/main';
+import dialogDrag from './src/dialog/drag'
+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)
+}
+
+/* istanbul ignore next */
+TabDialog.install = function(Vue) {
+	// 注册组件
+	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

@@ -0,0 +1,63 @@
+/**
+ * v-dialogDrag 弹窗拖拽
+ * Copyright (c) 2019 ruoyi
+ */
+
+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
+
+			// 获取到的值带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, '')
+			}
+
+			// 鼠标拖拽事件
+			document.onmousemove = function(e) {
+				// 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
+				const l = e.clientX - disX
+				const t = e.clientY - disY
+
+				let finallyL = l + styL
+				let finallyT = t + styT
+
+				// 移动当前元素
+				dragDom.style.left = `${ finallyL }px`
+				dragDom.style.top = `${ finallyT }px`
+			}
+
+			document.onmouseup = function(e) {
+				document.onmousemove = null
+				document.onmouseup = null
+			}
+		}
+	}
+}

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

@@ -0,0 +1,34 @@
+/**
+ * v-dialogDragWidth 可拖动弹窗高度（右下角）
+ * Copyright (c) 2019 ruoyi
+ */
+
+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)
+	}
+}

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

@@ -0,0 +1,30 @@
+/**
+ * v-dialogDragWidth 可拖动弹窗宽度（右侧边）
+ * Copyright (c) 2019 ruoyi
+ */
+
+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)
+	}
+}