cy-element-ui 1.0.4 → 1.0.6

package/packages/tabDialog/src/main.vue

@@ -0,0 +1,277 @@
+<template>
+	<div class="cy-tab-dialog">
+		<div
+			v-show="visible && modal"
+			contenteditable="false"
+			class="cy-tab-dialog-modal"
+			:style="{ zIndex: modelZIndex, height: modelHeight ? modelHeight : '100%' }"
+			@click="closeOnClickModal && handleClose"
+		></div>
+		
+		<el-dialog
+			:visible="visible"
+			:title="title"
+			:width="width"
+			:fullscreen="fullscreen"
+			:modal="false"
+			:modal-append-to-body="false"
+			:append-to-body="false"
+			:lock-scroll="true"
+			:custom-class="customClass"
+			:close-on-click-modal="appendToTagsView ? false : closeOnClickModal"
+			:close-on-press-escape="appendToTagsView ? false : closeOnPressEscape"
+			:show-close="showClose"
+			:center="center"
+			:destroy-on-close="destroyOnClose"
+			contenteditable="false"
+			v-dialog-drag="isDrag"
+			v-dialog-drag-width="isDrag"
+			v-dialog-drag-height="isDrag"
+			:before-close="beforeClose"
+			@open="handleOpen"
+			@opened="handleOpened"
+			@close="handleClose"
+			@closed="handleClosed"
+		>
+			<template v-if="$slots.title" slot="title">
+				<slot name="title"></slot>
+			</template>
+			
+			<slot></slot>
+			
+			<template v-if="$slots.footer" slot="footer">
+				<slot name="footer"></slot>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import ElDialog from 'element-ui/packages/dialog';
+import Vue from 'vue';
+
+export default {
+	name: 'CyTabDialog',
+	component: [
+		ElDialog
+	],
+	props: {
+		// 是否显示 Dialog，支持 .sync 修饰符
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+		// Dialog 的标题，也可通过具名 slot
+		title: {
+			type: String,
+			default: '',
+		},
+		// Dialog 的宽度
+		width: {
+			type: String,
+			default: '50%',
+		},
+		// 是否为全屏 Dialog
+		fullscreen: {
+			type: Boolean,
+			default: false,
+		},
+		// Dialog CSS 中的 margin-top 值
+		top: {
+			type: String,
+			default: '6vh',
+		},
+		// 是否需要遮罩层
+		modal: {
+			type: Boolean,
+			default: true,
+		},
+		// 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上
+		appendToBody: {
+			type: Boolean,
+			default: false,
+		},
+		// 是否在 Dialog 出现时将 body或上层 滚动锁定
+		lockScroll: {
+			type: Boolean,
+			default: true,
+		},
+		// Dialog 的自定义类名
+		customClass: {
+			type: String,
+			default: '',
+		},
+		// 是否可以通过点击 modal 关闭 Dialog
+		closeOnClickModal: {
+			type: Boolean,
+			default: false,
+		},
+		// 是否可以通过按下 ESC 关闭 Dialog
+		closeOnPressEscape: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否显示关闭按钮
+		showClose: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否对头部和底部采用居中布局
+		center: {
+			type: Boolean,
+			default: false,
+		},
+		// 关闭时销毁 Dialog 中的元素
+		destroyOnClose: {
+			type: Boolean,
+			default: false,
+		},
+		// 是否放到tagsView中，即当前app-views下面，此属性true时，appendToBody无效
+		appendToTagsView: {
+			type: Boolean,
+			default: false,
+		},
+		// 对话框是否可拖拽
+		isDrag: {
+			type: Boolean,
+			default: true,
+		},
+		// 关闭前的回调，会暂停 Dialog 的关闭
+		beforeClose: {
+			type: Function,
+		},
+	},
+	data() {
+		return {
+			rendered: false, // 判断dialog是否已经放到对应的div下
+			modelZIndex: 1000,
+			modelHeight: 0,
+			
+			parentDom: null, // 当前app-views的dom元素
+			elDialogDom: null, // 当前el-dialog的dom元素
+		}
+	},
+	watch: {
+		visible: {
+			immediate: true,
+			handler(val) {
+				if (val) {
+					this.$emit('open');
+					Vue.nextTick(() => {
+						const dom = this.$el;
+						// 首次打开
+						if (!this.rendered) {
+							this.rendered = true;
+							if (this.appendToTagsView) {
+								// 将当前dialog挪到当前app-views里面 app-container
+								this.parentDom = dom.closest('.app-container');
+								if (!this.parentDom) this.parentDom = document.body;
+								this.parentDom.append(dom);
+							} else if (this.appendToBody) {
+								// 将当前dialog挪到当前body里面
+								this.parentDom = document.body;
+								this.parentDom.append(dom);
+							}
+							// 添加键盘监听事件
+							if (this.closeOnPressEscape) {
+								document.addEventListener('keydown', this.escKeyDown);
+							}
+						}
+						
+						setTimeout(() => {
+							if (this.parentDom) this.modelHeight = this.parentDom.scrollHeight + 'px';
+							// 当前VDialog不在body中时
+							if (!this.parentDom || this.parentDom.tagName.toUpperCase() !== 'BODY') {
+								// 获取el-dialog的宽度，如果大于app-views的宽度，则el-dialog不居中显示
+								let elDialogWidth = dom.getElementsByClassName('el-dialog')[0].clientWidth;
+								if (!this.parentDom || elDialogWidth < this.parentDom.clientWidth) {
+									dom.getElementsByClassName('el-dialog')[0].style.left = '50%';
+									dom.getElementsByClassName('el-dialog')[0].style.transform = 'translateX(-50%)';
+								} else {
+									dom.getElementsByClassName('el-dialog')[0].style.left = '0';
+								}
+							}
+							dom.getElementsByClassName('el-dialog')[0].style.marginTop = this.top;
+						}, 50)
+						
+						// 获取el-dialog的z-index，赋值给model，用于处理model的层级问题
+						this.elDialogDom = dom.children[1];
+						setTimeout(() => {
+							this.modelZIndex = this.elDialogDom.style.zIndex;
+						}, 50)
+					});
+				} else {
+					// immediate=true时，首次打开不需要触发close事件
+					if (this.rendered) this.$emit('close');
+				}
+			}
+		}
+	},
+	methods: {
+		handleOpen() {
+			this.$emit('open');
+		},
+		
+		handleOpened() {
+			this.$emit('opened');
+		},
+		
+		handleClose() {
+			this.$emit('update:visible', false);
+			this.$emit('close');
+		},
+		
+		handleClosed() {
+			this.$emit('closed');
+		},
+		
+		/**
+   * 监听esc键
+   */
+		escKeyDown(event) {
+			if (event.keyCode === 27) {
+				// 获取body下的直接子节点中的已打开的vDialog
+				let bodyVDialogDomArr = [];
+				let bodyChildrenArr = document.body.childNodes;
+				for (let i = 0; i < bodyChildrenArr.length; i++) {
+					let item = bodyChildrenArr[i];
+					if (item.tagName && item.tagName.toUpperCase() === 'DIV' && item.className && item.className.split(' ').includes('cy-tab-dialog-opened')) {
+						bodyVDialogDomArr.push(item)
+					}
+				}
+				// 判断body中是否有已打开的vDialog，如果有，优先关闭body下的vDialog
+				if (bodyVDialogDomArr.length > 0) {
+					// 获取当前cy-tab-dialog在当前body中的下标
+					let curDomIndex = [].indexOf.call(bodyVDialogDomArr, this.$el);
+					if (curDomIndex === bodyVDialogDomArr.length - 1) {
+						this.handleClose();
+					}
+				} else if (document.getElementById('tags-view-container') && this.parentDom.parentElement.getAttribute('include_name')) {
+					// 获取当前app-views对应的include_name值
+					
+					let includeName = this.parentDom.parentElement.getAttribute('include_name');
+					// 根据includeName获取tagsView中的tag标签页
+					let tagDom = document.getElementById('tags-view-container').querySelectorAll(`[include_name=${ includeName }]`);
+					if (tagDom && tagDom[0]) {
+						// 判断此标签页是否为选中状态，只有选中状态中的vDialog才可以进行关闭
+						if (tagDom[0].className.split(' ').includes('active')) {
+							// 获取当前app-views下的所有已打开的vDialog
+							let vDialogList = this.parentDom.getElementsByClassName('cy-tab-dialog-opened');
+							// 获取当前cy-tab-dialog在当前app-views中的下标
+							let curDomIndex = [].indexOf.call(vDialogList, this.$el);
+							if (curDomIndex === vDialogList.length - 1) {
+								this.handleClose();
+							}
+						}
+					}
+				} else {
+					this.handleClose();
+				}
+			}
+		},
+	},
+	beforeDestroy() {
+		document.removeEventListener('keydown', this.escKeyDown);
+	}
+};
+</script>

package/packages/table/src/filter-panel.vue

@@ -29,166 +29,166 @@
 			v-show="showPopper">
 			<ul class="el-table-filter__list">
 				<li class="el-table-filter__list-item"
-						:class="{ 'is-active': filterValue === undefined || filterValue === null }"
-						@click="handleSelect(null)">{{ t('el.table.clearFilter') }}</li>
+					:class="{ 'is-active': filterValue === undefined || filterValue === null }"
+					@click="handleSelect(null)">{{ t('el.table.clearFilter') }}</li>
 				<li class="el-table-filter__list-item"
-						v-for="filter in filters"
-						:label="filter.value"
-						:key="filter.value"
-						:class="{ 'is-active': isActive(filter) }"
-						@click="handleSelect(filter.value)" >{{ filter.text }}</li>
+					v-for="filter in filters"
+					:label="filter.value"
+					:key="filter.value"
+					:class="{ 'is-active': isActive(filter) }"
+					@click="handleSelect(filter.value)" >{{ filter.text }}</li>
 			</ul>
 		</div>
 	</transition>
 </template>
 
 <script type="text/babel">
-	import Popper from 'element-ui/src/utils/vue-popper';
-	import { PopupManager } from 'element-ui/src/utils/popup';
-	import Locale from 'element-ui/src/mixins/locale';
-	import Clickoutside from 'element-ui/src/utils/clickoutside';
-	import Dropdown from './dropdown';
-	import ElCheckbox from 'element-ui/packages/checkbox';
-	import ElCheckboxGroup from 'element-ui/packages/checkbox-group';
-	import ElScrollbar from 'element-ui/packages/scrollbar';
-
-	export default {
-		name: 'ElTableFilterPanel',
-
-		mixins: [Popper, Locale],
-
-		directives: {
-			Clickoutside
-		},
+import Popper from 'element-ui/src/utils/vue-popper';
+import { PopupManager } from 'element-ui/src/utils/popup';
+import Locale from 'element-ui/src/mixins/locale';
+import Clickoutside from 'element-ui/src/utils/clickoutside';
+import Dropdown from './dropdown';
+import ElCheckbox from 'element-ui/packages/checkbox';
+import ElCheckboxGroup from 'element-ui/packages/checkbox-group';
+import ElScrollbar from 'element-ui/packages/scrollbar';
+
+export default {
+	name: 'ElTableFilterPanel',
+
+	mixins: [Popper, Locale],
+
+	directives: {
+		Clickoutside
+	},
+
+	components: {
+		ElCheckbox,
+		ElCheckboxGroup,
+		ElScrollbar
+	},
+
+	props: {
+		placement: {
+			type: String,
+			default: 'bottom-end'
+		}
+	},
 
-		components: {
-			ElCheckbox,
-			ElCheckboxGroup,
-			ElScrollbar
+	methods: {
+		isActive(filter) {
+			return filter.value === this.filterValue;
 		},
 
-		props: {
-			placement: {
-				type: String,
-				default: 'bottom-end'
-			}
+		handleOutsideClick() {
+			setTimeout(() => {
+				this.showPopper = false;
+			}, 16);
 		},
 
-		methods: {
-			isActive(filter) {
-				return filter.value === this.filterValue;
-			},
+		handleConfirm() {
+			this.confirmFilter(this.filteredValue);
+			this.handleOutsideClick();
+		},
 
-			handleOutsideClick() {
-				setTimeout(() => {
-					this.showPopper = false;
-				}, 16);
-			},
+		handleReset() {
+			this.filteredValue = [];
+			this.confirmFilter(this.filteredValue);
+			this.handleOutsideClick();
+		},
 
-			handleConfirm() {
-				this.confirmFilter(this.filteredValue);
-				this.handleOutsideClick();
-			},
+		handleSelect(filterValue) {
+			this.filterValue = filterValue;
 
-			handleReset() {
-				this.filteredValue = [];
+			if ((typeof filterValue !== 'undefined') && (filterValue !== null)) {
 				this.confirmFilter(this.filteredValue);
-				this.handleOutsideClick();
-			},
-
-			handleSelect(filterValue) {
-				this.filterValue = filterValue;
-
-				if ((typeof filterValue !== 'undefined') && (filterValue !== null)) {
-					this.confirmFilter(this.filteredValue);
-				} else {
-					this.confirmFilter([]);
-				}
-
-				this.handleOutsideClick();
-			},
-
-			confirmFilter(filteredValue) {
-				this.table.store.commit('filterChange', {
-					column: this.column,
-					values: filteredValue
-				});
-				this.table.store.updateAllSelected();
+			} else {
+				this.confirmFilter([]);
 			}
+
+			this.handleOutsideClick();
 		},
 
-		data() {
-			return {
-				table: null,
-				cell: null,
-				column: null
-			};
+		confirmFilter(filteredValue) {
+			this.table.store.commit('filterChange', {
+				column: this.column,
+				values: filteredValue
+			});
+			this.table.store.updateAllSelected();
+		}
+	},
+
+	data() {
+		return {
+			table: null,
+			cell: null,
+			column: null
+		};
+	},
+
+	computed: {
+		filters() {
+			return this.column && this.column.filters;
 		},
 
-		computed: {
-			filters() {
-				return this.column && this.column.filters;
+		filterValue: {
+			get() {
+				return (this.column.filteredValue || [])[0];
 			},
-
-			filterValue: {
-				get() {
-					return (this.column.filteredValue || [])[0];
-				},
-				set(value) {
-					if (this.filteredValue) {
-						if ((typeof value !== 'undefined') && (value !== null)) {
-							this.filteredValue.splice(0, 1, value);
-						} else {
-							this.filteredValue.splice(0, 1);
-						}
+			set(value) {
+				if (this.filteredValue) {
+					if ((typeof value !== 'undefined') && (value !== null)) {
+						this.filteredValue.splice(0, 1, value);
+					} else {
+						this.filteredValue.splice(0, 1);
 					}
 				}
-			},
+			}
+		},
 
-			filteredValue: {
-				get() {
-					if (this.column) {
-						return this.column.filteredValue || [];
-					}
-					return [];
-				},
-				set(value) {
-					if (this.column) {
-						this.column.filteredValue = value;
-					}
+		filteredValue: {
+			get() {
+				if (this.column) {
+					return this.column.filteredValue || [];
 				}
+				return [];
 			},
-
-			multiple() {
+			set(value) {
 				if (this.column) {
-					return this.column.filterMultiple;
+					this.column.filteredValue = value;
 				}
-				return true;
 			}
 		},
 
-		mounted() {
-			this.popperElm = this.$el;
-			this.referenceElm = this.cell;
-			this.table.bodyWrapper.addEventListener('scroll', () => {
-				this.updatePopper();
-			});
-
-			this.$watch('showPopper', (value) => {
-				if (this.column) this.column.filterOpened = value;
-				if (value) {
-					Dropdown.open(this);
-				} else {
-					Dropdown.close(this);
-				}
-			});
-		},
-		watch: {
-			showPopper(val) {
-				if (val === true && parseInt(this.popperJS._popper.style.zIndex, 10) < PopupManager.zIndex) {
-					this.popperJS._popper.style.zIndex = PopupManager.nextZIndex();
-				}
+		multiple() {
+			if (this.column) {
+				return this.column.filterMultiple;
+			}
+			return true;
+		}
+	},
+
+	mounted() {
+		this.popperElm = this.$el;
+		this.referenceElm = this.cell;
+		this.table.bodyWrapper.addEventListener('scroll', () => {
+			this.updatePopper();
+		});
+
+		this.$watch('showPopper', (value) => {
+			if (this.column) this.column.filterOpened = value;
+			if (value) {
+				Dropdown.open(this);
+			} else {
+				Dropdown.close(this);
+			}
+		});
+	},
+	watch: {
+		showPopper(val) {
+			if (val === true && parseInt(this.popperJS._popper.style.zIndex, 10) < PopupManager.zIndex) {
+				this.popperJS._popper.style.zIndex = PopupManager.nextZIndex();
 			}
 		}
-	};
+	}
+};
 </script>

package/packages/table/src/store/index.js

@@ -136,7 +136,7 @@ Watcher.prototype.commit = function(name, ...args) {
 	if (mutations[name]) {
 		mutations[name].apply(this, [this.states].concat(args));
 	} else {
-		throw new Error(`Action not found: ${name}`);
+		throw new Error(`Action not found: ${ name }`);
 	}
 };
 

package/packages/table/src/table-body.js

@@ -323,10 +323,10 @@ export default {
 			if (cell) {
 				column = getColumnByCell(table, cell);
 				if (column) {
-					table.$emit(`cell-${name}`, row, column, cell, event);
+					table.$emit(`cell-${ name }`, row, column, cell, event);
 				}
 			}
-			table.$emit(`row-${name}`, row, column, event);
+			table.$emit(`row-${ name }`, row, column, event);
 		},
 
 		rowRender(row, $index, treeRowData) {

package/packages/table/src/table-column.js

@@ -137,7 +137,7 @@ export default {
 			Object.keys(source).forEach(prop => {
 				let value = source[prop];
 				if (value !== undefined) {
-					column[prop] = prop === 'className' ? `${column[prop]} ${value}` : value;
+					column[prop] = prop === 'className' ? `${ column[prop] } ${ value }` : value;
 				}
 			});
 			return column;

package/packages/table/src/table-header.js

@@ -353,7 +353,7 @@ export default {
 				const table = this.$parent;
 				const tableEl = table.$el;
 				const tableLeft = tableEl.getBoundingClientRect().left;
-				const columnEl = this.$el.querySelector(`th.${column.id}`);
+				const columnEl = this.$el.querySelector(`th.${ column.id }`);
 				const columnRect = columnEl.getBoundingClientRect();
 				const minLeft = columnRect.left - tableLeft + 30;
 

package/packages/table/src/table-layout.js

@@ -240,7 +240,7 @@ class TableLayout {
 					observer.onScrollableChange(this);
 					break;
 				default:
-					throw new Error(`Table Layout don't have event ${event}.`);
+					throw new Error(`Table Layout don't have event ${ event }.`);
 			}
 		});
 	}