cy-element-ui 1.0.28 → 1.0.30

package/packages/popconfirm/src/main.vue

@@ -4,35 +4,35 @@
 		v-model="visible"
 		trigger="click"
 	>
-	<div class="el-popconfirm">
-		<p class="el-popconfirm__main">
-		<i
-			v-if="!hideIcon"
-			:class="icon"
-			class="el-popconfirm__icon"
-			:style="{color: iconColor}"
-		></i>
-			{{title}}
-		</p>
-		<div class="el-popconfirm__action">
-			<el-button
-				size="mini"
-				:type="cancelButtonType"
-				@click="cancel"
-			>
-				{{ displayCancelButtonText }}
-			</el-button>
-			<el-button
-				size="mini"
-				:type="confirmButtonType"
-				@click="confirm"
-			>
-				{{ displayConfirmButtonText }}
-			</el-button>
+		<div class="el-popconfirm">
+			<p class="el-popconfirm__main">
+				<i
+					v-if="!hideIcon"
+					:class="icon"
+					class="el-popconfirm__icon"
+					:style="{color: iconColor}"
+				></i>
+				{{ title }}
+			</p>
+			<div class="el-popconfirm__action">
+				<el-button
+					size="mini"
+					:type="cancelButtonType"
+					@click="cancel"
+				>
+					{{ displayCancelButtonText }}
+				</el-button>
+				<el-button
+					size="mini"
+					:type="confirmButtonType"
+					@click="confirm"
+				>
+					{{ displayConfirmButtonText }}
+				</el-button>
+			</div>
 		</div>
-	</div>
-	<slot name="reference" slot="reference"></slot>
-</el-popover>
+		<slot name="reference" slot="reference"></slot>
+	</el-popover>
 </template>
 
 <script>

package/packages/popover/src/main.vue

@@ -73,7 +73,7 @@ export default {
 
 	computed: {
 		tooltipId() {
-			return `el-popover-${generateId()}`;
+			return `el-popover-${ generateId() }`;
 		}
 	},
 	watch: {

package/packages/progress/src/progress.vue

@@ -17,7 +17,7 @@
 		<div class="el-progress-bar" v-if="type === 'line'">
 			<div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px', backgroundColor:defineBackColor}">
 				<div class="el-progress-bar__inner" :style="barStyle">
-					<div class="el-progress-bar__innerText" :style="{color:textColor}" v-if="showText && textInside">{{content}}</div>
+					<div class="el-progress-bar__innerText" :style="{color:textColor}" v-if="showText && textInside">{{ content }}</div>
 				</div>
 			</div>
 		</div>
@@ -45,7 +45,7 @@
 			v-if="showText && !textInside"
 			:style="{fontSize: progressTextSize + 'px', color:textColor}"
 		>
-			<template v-if="!status">{{content}}</template>
+			<template v-if="!status">{{ content }}</template>
 			<i v-else :class="iconClass"></i>
 		</div>
 	</div>
@@ -125,9 +125,9 @@
 				const isDashboard = this.type === 'dashboard';
 				return `
 					M 50 50
-					m 0 ${isDashboard ? '' : '-'}${radius}
-					a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
-					a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
+					m 0 ${ isDashboard ? '' : '-' }${ radius }
+					a ${ radius } ${ radius } 0 1 1 0 ${ isDashboard ? '-' : '' }${ radius * 2 }
+					a ${ radius } ${ radius } 0 1 1 0 ${ isDashboard ? '' : '-' }${ radius * 2 }
 					`;
 			},
 			perimeter() {
@@ -138,17 +138,17 @@
 			},
 			strokeDashoffset() {
 				const offset = -1 * this.perimeter * (1 - this.rate) / 2;
-				return `${offset}px`;
+				return `${ offset }px`;
 			},
 			trailPathStyle() {
 				return {
-					strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,
+					strokeDasharray: `${ (this.perimeter * this.rate) }px, ${ this.perimeter }px`,
 					strokeDashoffset: this.strokeDashoffset
 				};
 			},
 			circlePathStyle() {
 				return {
-					strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100) }px, ${this.perimeter}px`,
+					strokeDasharray: `${ this.perimeter * this.rate * (this.percentage / 100) }px, ${ this.perimeter }px`,
 					strokeDashoffset: this.strokeDashoffset,
 					transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
 				};
@@ -187,13 +187,13 @@
 			progressTextSize() {
 				return this.type === 'line'
 					? 12 + this.strokeWidth * 0.4
-					: this.width * 0.111111 + 2 ;
+					: this.width * 0.111111 + 2;
 			},
 			content() {
 				if (typeof this.format === 'function') {
 					return this.format(this.percentage) || '';
 				} else {
-					return `${this.percentage}%`;
+					return `${ this.percentage }%`;
 				}
 			}
 		},

package/packages/radio/src/radio-button.vue

@@ -31,7 +31,7 @@
 			:style="value === label ? activeStyle : null"
 			@keydown.stop>
 			<slot></slot>
-			<template v-if="!$slots.default">{{label}}</template>
+			<template v-if="!$slots.default">{{ label }}</template>
 		</span>
 	</label>
 </template>
@@ -86,7 +86,7 @@
 				return {
 					backgroundColor: this._radioGroup.fill || '',
 					borderColor: this._radioGroup.fill || '',
-					boxShadow: this._radioGroup.fill ? `-1px 0 0 0 ${this._radioGroup.fill}` : '',
+					boxShadow: this._radioGroup.fill ? `-1px 0 0 0 ${ this._radioGroup.fill }` : '',
 					color: this._radioGroup.textColor || ''
 				};
 			},

package/packages/radio/src/radio.vue

@@ -39,7 +39,7 @@
 		</span>
 		<span class="el-radio__label" @keydown.stop>
 			<slot></slot>
-			<template v-if="!$slots.default">{{label}}</template>
+			<template v-if="!$slots.default">{{ label }}</template>
 		</span>
 	</label>
 </template>

package/packages/row/src/row.js

@@ -22,7 +22,7 @@ export default {
 			const ret = {};
 
 			if (this.gutter) {
-				ret.marginLeft = `-${this.gutter / 2}px`;
+				ret.marginLeft = `-${ this.gutter / 2 }px`;
 				ret.marginRight = ret.marginLeft;
 			}
 
@@ -34,8 +34,8 @@ export default {
 		return h(this.tag, {
 			class: [
 				'el-row',
-				this.justify !== 'start' ? `is-justify-${this.justify}` : '',
-				this.align ? `is-align-${this.align}` : '',
+				this.justify !== 'start' ? `is-justify-${ this.justify }` : '',
+				this.align ? `is-align-${ this.align }` : '',
 				{ 'el-row--flex': this.type === 'flex' }
 			],
 			style: this.style

package/packages/scrollbar/src/main.js

@@ -44,8 +44,8 @@ export default {
 		let style = this.wrapStyle;
 
 		if (gutter) {
-			const gutterWith = `-${gutter}px`;
-			const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;
+			const gutterWith = `-${ gutter }px`;
+			const gutterStyle = `margin-bottom: ${ gutterWith }; margin-right: ${ gutterWith };`;
 
 			if (Array.isArray(this.wrapStyle)) {
 				style = toObject(this.wrapStyle);

package/packages/scrollbar/src/util.js

@@ -23,7 +23,7 @@ export const BAR_MAP = {
 
 export function renderThumbStyle({ move, size, bar }) {
 	const style = {};
-	const translate = `translate${bar.axis}(${ move }%)`;
+	const translate = `translate${ bar.axis }(${ move }%)`;
 
 	style[bar.size] = size;
 	style.transform = translate;

package/packages/slider/src/main.vue

@@ -401,7 +401,7 @@
 					this.secondValue = this.max;
 				}
 				this.oldValue = [this.firstValue, this.secondValue];
-				valuetext = `${this.firstValue}-${this.secondValue}`;
+				valuetext = `${ this.firstValue }-${ this.secondValue }`;
 			} else {
 				if (typeof this.value !== 'number' || isNaN(this.value)) {
 					this.firstValue = this.min;
@@ -414,7 +414,7 @@
 			this.$el.setAttribute('aria-valuetext', valuetext);
 
 			// label screen reader
-			this.$el.setAttribute('aria-label', this.label ? this.label : `slider between ${this.min} and ${this.max}`);
+			this.$el.setAttribute('aria-label', this.label ? this.label : `slider between ${ this.min } and ${ this.max }`);
 
 			this.resetSize();
 			window.addEventListener('resize', this.resetSize);

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,15 +189,14 @@ 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);
 			}, REFRESH_INTERVAL);
 			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/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)
+	}
+}