cy-element-ui 1.0.4 → 1.0.6

package/packages/menu/src/submenu.vue

@@ -1,349 +1,348 @@
 <script>
-	import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
-	import menuMixin from './menu-mixin';
-	import Emitter from 'element-ui/src/mixins/emitter';
-	import Popper from 'element-ui/src/utils/vue-popper';
+import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
+import menuMixin from './menu-mixin';
+import Emitter from 'element-ui/src/mixins/emitter';
+import Popper from 'element-ui/src/utils/vue-popper';
 
-	const poperMixins = {
-		props: {
-			transformOrigin: {
-				type: [Boolean, String],
-				default: false
-			},
-			offset: Popper.props.offset,
-			boundariesPadding: Popper.props.boundariesPadding,
-			popperOptions: Popper.props.popperOptions
+const poperMixins = {
+	props: {
+		transformOrigin: {
+			type: [Boolean, String],
+			default: false
 		},
-		data: Popper.data,
-		methods: Popper.methods,
-		beforeDestroy: Popper.beforeDestroy,
-		deactivated: Popper.deactivated
-	};
+		offset: Popper.props.offset,
+		boundariesPadding: Popper.props.boundariesPadding,
+		popperOptions: Popper.props.popperOptions
+	},
+	data: Popper.data,
+	methods: Popper.methods,
+	beforeDestroy: Popper.beforeDestroy,
+	deactivated: Popper.deactivated
+};
 
-	export default {
-		name: 'ElSubmenu',
+export default {
+	name: 'ElSubmenu',
 
-		componentName: 'ElSubmenu',
+	componentName: 'ElSubmenu',
 
-		mixins: [menuMixin, Emitter, poperMixins],
+	mixins: [menuMixin, Emitter, poperMixins],
 
-		components: { ElCollapseTransition },
+	components: { ElCollapseTransition },
 
-		props: {
-			index: {
-				type: String,
-				required: true
-			},
-			showTimeout: {
-				type: Number,
-				default: 300
-			},
-			hideTimeout: {
-				type: Number,
-				default: 300
-			},
-			popperClass: String,
-			disabled: Boolean,
-			popperAppendToBody: {
-				type: Boolean,
-				default: undefined
-			}
+	props: {
+		index: {
+			type: String,
+			required: true
 		},
-
-		data() {
-			return {
-				popperJS: null,
-				timeout: null,
-				items: {},
-				submenus: {},
-				mouseInChild: false
-			};
+		showTimeout: {
+			type: Number,
+			default: 300
 		},
-		watch: {
-			opened(val) {
-				if (this.isMenuPopup) {
-					this.$nextTick(_ => {
-						this.updatePopper();
-					});
-				}
-			}
+		hideTimeout: {
+			type: Number,
+			default: 300
 		},
-		computed: {
-			// popper option
-			appendToBody() {
-				return this.popperAppendToBody === undefined
-					? this.isFirstLevel
-					: this.popperAppendToBody;
-			},
-			menuTransitionName() {
-				return this.rootMenu.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top';
-			},
-			opened() {
-				return this.rootMenu.openedMenus.indexOf(this.index) > -1;
-			},
-			active() {
-				let isActive = false;
-				const submenus = this.submenus;
-				const items = this.items;
+		popperClass: String,
+		disabled: Boolean,
+		popperAppendToBody: {
+			type: Boolean,
+			default: undefined
+		}
+	},
 
-				Object.keys(items).forEach(index => {
-					if (items[index].active) {
-						isActive = true;
-					}
+	data() {
+		return {
+			popperJS: null,
+			timeout: null,
+			items: {},
+			submenus: {},
+			mouseInChild: false
+		};
+	},
+	watch: {
+		opened(val) {
+			if (this.isMenuPopup) {
+				this.$nextTick(_ => {
+					this.updatePopper();
 				});
+			}
+		}
+	},
+	computed: {
+		// popper option
+		appendToBody() {
+			return this.popperAppendToBody === undefined
+				? this.isFirstLevel
+				: this.popperAppendToBody;
+		},
+		menuTransitionName() {
+			return this.rootMenu.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top';
+		},
+		opened() {
+			return this.rootMenu.openedMenus.indexOf(this.index) > -1;
+		},
+		active() {
+			let isActive = false;
+			const submenus = this.submenus;
+			const items = this.items;
 
-				Object.keys(submenus).forEach(index => {
-					if (submenus[index].active) {
-						isActive = true;
-					}
-				});
+			Object.keys(items).forEach(index => {
+				if (items[index].active) {
+					isActive = true;
+				}
+			});
 
-				return isActive;
-			},
-			hoverBackground() {
-				return this.rootMenu.hoverBackground;
-			},
-			backgroundColor() {
-				return this.rootMenu.backgroundColor || '';
-			},
-			activeTextColor() {
-				return this.rootMenu.activeTextColor || '';
-			},
-			textColor() {
-				return this.rootMenu.textColor || '';
-			},
-			mode() {
-				return this.rootMenu.mode;
-			},
-			isMenuPopup() {
-				return this.rootMenu.isMenuPopup;
-			},
-			titleStyle() {
-				if (this.mode !== 'horizontal') {
-					return {
-						color: this.textColor
-					};
+			Object.keys(submenus).forEach(index => {
+				if (submenus[index].active) {
+					isActive = true;
 				}
+			});
+
+			return isActive;
+		},
+		hoverBackground() {
+			return this.rootMenu.hoverBackground;
+		},
+		backgroundColor() {
+			return this.rootMenu.backgroundColor || '';
+		},
+		activeTextColor() {
+			return this.rootMenu.activeTextColor || '';
+		},
+		textColor() {
+			return this.rootMenu.textColor || '';
+		},
+		mode() {
+			return this.rootMenu.mode;
+		},
+		isMenuPopup() {
+			return this.rootMenu.isMenuPopup;
+		},
+		titleStyle() {
+			if (this.mode !== 'horizontal') {
 				return {
-					borderBottomColor: this.active
-						? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
-						: 'transparent',
-					color: this.active
-						? this.activeTextColor
-						: this.textColor
+					color: this.textColor
 				};
-			},
-			isFirstLevel() {
-				let isFirstLevel = true;
-				let parent = this.$parent;
-				while (parent && parent !== this.rootMenu) {
-					if (['ElSubmenu', 'ElMenuItemGroup'].indexOf(parent.$options.componentName) > -1) {
-						isFirstLevel = false;
-						break;
-					} else {
-						parent = parent.$parent;
-					}
-				}
-				return isFirstLevel;
 			}
+			return {
+				borderBottomColor: this.active
+					? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
+					: 'transparent',
+				color: this.active
+					? this.activeTextColor
+					: this.textColor
+			};
 		},
-		methods: {
-			handleCollapseToggle(value) {
-				if (value) {
-					this.initPopper();
+		isFirstLevel() {
+			let isFirstLevel = true;
+			let parent = this.$parent;
+			while (parent && parent !== this.rootMenu) {
+				if (['ElSubmenu', 'ElMenuItemGroup'].indexOf(parent.$options.componentName) > -1) {
+					isFirstLevel = false;
+					break;
 				} else {
-					this.doDestroy();
+					parent = parent.$parent;
 				}
-			},
-			addItem(item) {
-				this.$set(this.items, item.index, item);
-			},
-			removeItem(item) {
-				delete this.items[item.index];
-			},
-			addSubmenu(item) {
-				this.$set(this.submenus, item.index, item);
-			},
-			removeSubmenu(item) {
-				delete this.submenus[item.index];
-			},
-			handleClick() {
-				const { rootMenu, disabled } = this;
-				if (
-					(rootMenu.menuTrigger === 'hover' && rootMenu.mode === 'horizontal') ||
-					(rootMenu.collapse && rootMenu.mode === 'vertical') ||
-					disabled
-				) {
-					return;
-				}
-				this.dispatch('ElMenu', 'submenu-click', this);
-			},
-			handleMouseenter(event, showTimeout = this.showTimeout) {
-
-				if (!('ActiveXObject' in window) && event.type === 'focus' && !event.relatedTarget) {
-					return;
-				}
-				const { rootMenu, disabled } = this;
-				if (
-					(rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
-					(!rootMenu.collapse && rootMenu.mode === 'vertical') ||
-					disabled
-				) {
-					return;
-				}
-				this.dispatch('ElSubmenu', 'mouse-enter-child');
-				clearTimeout(this.timeout);
-				this.timeout = setTimeout(() => {
-					this.rootMenu.openMenu(this.index, this.indexPath);
-				}, showTimeout);
+			}
+			return isFirstLevel;
+		}
+	},
+	methods: {
+		handleCollapseToggle(value) {
+			if (value) {
+				this.initPopper();
+			} else {
+				this.doDestroy();
+			}
+		},
+		addItem(item) {
+			this.$set(this.items, item.index, item);
+		},
+		removeItem(item) {
+			delete this.items[item.index];
+		},
+		addSubmenu(item) {
+			this.$set(this.submenus, item.index, item);
+		},
+		removeSubmenu(item) {
+			delete this.submenus[item.index];
+		},
+		handleClick() {
+			const { rootMenu, disabled } = this;
+			if (
+				(rootMenu.menuTrigger === 'hover' && rootMenu.mode === 'horizontal') ||
+    (rootMenu.collapse && rootMenu.mode === 'vertical') ||
+    disabled
+			) {
+				return;
+			}
+			this.dispatch('ElMenu', 'submenu-click', this);
+		},
+		handleMouseenter(event, showTimeout = this.showTimeout) {
+			if (!('ActiveXObject' in window) && event.type === 'focus' && !event.relatedTarget) {
+				return;
+			}
+			const { rootMenu, disabled } = this;
+			if (
+				(rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
+    (!rootMenu.collapse && rootMenu.mode === 'vertical') ||
+    disabled
+			) {
+				return;
+			}
+			this.dispatch('ElSubmenu', 'mouse-enter-child');
+			clearTimeout(this.timeout);
+			this.timeout = setTimeout(() => {
+				this.rootMenu.openMenu(this.index, this.indexPath);
+			}, showTimeout);
 
-				if (this.appendToBody) {
-					this.$parent.$el.dispatchEvent(new MouseEvent('mouseenter'));
-				}
-			},
-			handleMouseleave(deepDispatch = false) {
-				const { rootMenu } = this;
-				if (
-					(rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
-					(!rootMenu.collapse && rootMenu.mode === 'vertical')
-				) {
-					return;
-				}
-				this.dispatch('ElSubmenu', 'mouse-leave-child');
-				clearTimeout(this.timeout);
-				this.timeout = setTimeout(() => {
-					!this.mouseInChild && this.rootMenu.closeMenu(this.index);
-				}, this.hideTimeout);
+			if (this.appendToBody) {
+				this.$parent.$el.dispatchEvent(new MouseEvent('mouseenter'));
+			}
+		},
+		handleMouseleave(deepDispatch = false) {
+			const { rootMenu } = this;
+			if (
+				(rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
+    (!rootMenu.collapse && rootMenu.mode === 'vertical')
+			) {
+				return;
+			}
+			this.dispatch('ElSubmenu', 'mouse-leave-child');
+			clearTimeout(this.timeout);
+			this.timeout = setTimeout(() => {
+				!this.mouseInChild && this.rootMenu.closeMenu(this.index);
+			}, this.hideTimeout);
 
-				if (this.appendToBody && deepDispatch) {
-					if (this.$parent.$options.name === 'ElSubmenu') {
-						this.$parent.handleMouseleave(true);
-					}
+			if (this.appendToBody && deepDispatch) {
+				if (this.$parent.$options.name === 'ElSubmenu') {
+					this.$parent.handleMouseleave(true);
 				}
-			},
-			handleTitleMouseenter() {
-				if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
-				const title = this.$refs['submenu-title'];
-				title && (title.style.backgroundColor = this.rootMenu.hoverBackground);
-			},
-			handleTitleMouseleave() {
-				if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
-				const title = this.$refs['submenu-title'];
-				title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');
-			},
-			updatePlacement() {
-				this.currentPlacement = this.mode === 'horizontal' && this.isFirstLevel
-					? 'bottom-start'
-					: 'right-start';
-			},
-			initPopper() {
-				this.referenceElm = this.$el;
-				this.popperElm = this.$refs.menu;
-				this.updatePlacement();
 			}
 		},
-		created() {
-			this.$on('toggle-collapse', this.handleCollapseToggle);
-			this.$on('mouse-enter-child', () => {
-				this.mouseInChild = true;
-				clearTimeout(this.timeout);
-			});
-			this.$on('mouse-leave-child', () => {
-				this.mouseInChild = false;
-				clearTimeout(this.timeout);
-			});
+		handleTitleMouseenter() {
+			if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+			const title = this.$refs['submenu-title'];
+			title && (title.style.backgroundColor = this.rootMenu.hoverBackground);
 		},
-		mounted() {
-			this.parentMenu.addSubmenu(this);
-			this.rootMenu.addSubmenu(this);
-			this.initPopper();
+		handleTitleMouseleave() {
+			if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+			const title = this.$refs['submenu-title'];
+			title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');
 		},
-		beforeDestroy() {
-			this.parentMenu.removeSubmenu(this);
-			this.rootMenu.removeSubmenu(this);
+		updatePlacement() {
+			this.currentPlacement = this.mode === 'horizontal' && this.isFirstLevel
+				? 'bottom-start'
+				: 'right-start';
 		},
-		render(h) {
-			const {
-				active,
-				opened,
-				paddingStyle,
-				titleStyle,
-				backgroundColor,
-				rootMenu,
-				currentPlacement,
-				menuTransitionName,
-				mode,
-				disabled,
-				popperClass,
-				$slots,
-				isFirstLevel
-			} = this;
-
-			const popupMenu = (
-				<transition name={menuTransitionName}>
-					<div
-						ref="menu"
-						v-show={opened}
-						class={[`el-menu--${mode}`, popperClass]}
-						on-mouseenter={($event) => this.handleMouseenter($event, 100)}
-						on-mouseleave={() => this.handleMouseleave(true)}
-						on-focus={($event) => this.handleMouseenter($event, 100)}>
-						<ul
-							role="menu"
-							class={['el-menu el-menu--popup', `el-menu--popup-${currentPlacement}`]}
-							style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
-							{$slots.default}
-						</ul>
-					</div>
-				</transition>
-			);
+		initPopper() {
+			this.referenceElm = this.$el;
+			this.popperElm = this.$refs.menu;
+			this.updatePlacement();
+		}
+	},
+	created() {
+		this.$on('toggle-collapse', this.handleCollapseToggle);
+		this.$on('mouse-enter-child', () => {
+			this.mouseInChild = true;
+			clearTimeout(this.timeout);
+		});
+		this.$on('mouse-leave-child', () => {
+			this.mouseInChild = false;
+			clearTimeout(this.timeout);
+		});
+	},
+	mounted() {
+		this.parentMenu.addSubmenu(this);
+		this.rootMenu.addSubmenu(this);
+		this.initPopper();
+	},
+	beforeDestroy() {
+		this.parentMenu.removeSubmenu(this);
+		this.rootMenu.removeSubmenu(this);
+	},
+	render(h) {
+		const {
+			active,
+			opened,
+			paddingStyle,
+			titleStyle,
+			backgroundColor,
+			rootMenu,
+			currentPlacement,
+			menuTransitionName,
+			mode,
+			disabled,
+			popperClass,
+			$slots,
+			isFirstLevel
+		} = this;
 
-			const inlineMenu = (
-				<el-collapse-transition>
+		const popupMenu = (
+			<transition name={menuTransitionName}>
+				<div
+					ref="menu"
+					v-show={opened}
+					class={[`el-menu--${ mode }`, popperClass]}
+					on-mouseenter={($event) => this.handleMouseenter($event, 100)}
+					on-mouseleave={() => this.handleMouseleave(true)}
+					on-focus={($event) => this.handleMouseenter($event, 100)}>
 					<ul
 						role="menu"
-						class="el-menu el-menu--inline"
-						v-show={opened}
+						class={['el-menu el-menu--popup', `el-menu--popup-${ currentPlacement }`]}
 						style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
 						{$slots.default}
 					</ul>
-				</el-collapse-transition>
-			);
+				</div>
+			</transition>
+		);
+
+		const inlineMenu = (
+			<el-collapse-transition>
+				<ul
+					role="menu"
+					class="el-menu el-menu--inline"
+					v-show={opened}
+					style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
+					{$slots.default}
+				</ul>
+			</el-collapse-transition>
+		);
 
-			const submenuTitleIcon = (
-				rootMenu.mode === 'horizontal' && isFirstLevel ||
-				rootMenu.mode === 'vertical' && !rootMenu.collapse
-			) ? 'el-icon-arrow-down' : 'el-icon-arrow-right';
+		const submenuTitleIcon = (
+			rootMenu.mode === 'horizontal' && isFirstLevel ||
+   rootMenu.mode === 'vertical' && !rootMenu.collapse
+		) ? 'el-icon-arrow-down' : 'el-icon-arrow-right';
 
-			return (
-				<li
-					class={{
-						'el-submenu': true,
-						'is-active': active,
-						'is-opened': opened,
-						'is-disabled': disabled
-					}}
-					role="menuitem"
-					aria-haspopup="true"
-					aria-expanded={opened}
-					on-mouseenter={this.handleMouseenter}
-					on-mouseleave={() => this.handleMouseleave(false)}
-					on-focus={this.handleMouseenter}
+		return (
+			<li
+				class={{
+					'el-submenu': true,
+					'is-active': active,
+					'is-opened': opened,
+					'is-disabled': disabled
+				}}
+				role="menuitem"
+				aria-haspopup="true"
+				aria-expanded={opened}
+				on-mouseenter={this.handleMouseenter}
+				on-mouseleave={() => this.handleMouseleave(false)}
+				on-focus={this.handleMouseenter}
+			>
+				<div
+					class="el-submenu__title"
+					ref="submenu-title"
+					on-click={this.handleClick}
+					on-mouseenter={this.handleTitleMouseenter}
+					on-mouseleave={this.handleTitleMouseleave}
+					style={[paddingStyle, titleStyle, { backgroundColor }]}
 				>
-					<div
-						class="el-submenu__title"
-						ref="submenu-title"
-						on-click={this.handleClick}
-						on-mouseenter={this.handleTitleMouseenter}
-						on-mouseleave={this.handleTitleMouseleave}
-						style={[paddingStyle, titleStyle, { backgroundColor }]}
-					>
-						{$slots.title}
-						<i class={[ 'el-submenu__icon-arrow', submenuTitleIcon ]}></i>
-					</div>
-					{this.isMenuPopup ? popupMenu : inlineMenu}
-				</li>
-			);
-		}
-	};
+					{$slots.title}
+					<i class={[ 'el-submenu__icon-arrow', submenuTitleIcon ]}></i>
+				</div>
+				{this.isMenuPopup ? popupMenu : inlineMenu}
+			</li>
+		);
+	}
+};
 </script>

package/packages/message/src/main.js

@@ -75,7 +75,7 @@ Message.close = function(id, userOnClose) {
 		}
 	}
 	if (len <= 1 || index === -1 || index > instances.length - 1) return;
-	for (let i = index; i < len - 1 ; i++) {
+	for (let i = index; i < len - 1; i++) {
 		let dom = instances[i].$el;
 		dom.style['top'] =
 			parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px';