cy-element-ui 1.0.26 → 1.0.28

package/packages/menu/src/submenu.vue

@@ -1,348 +1,349 @@
-<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';
-
-const poperMixins = {
-	props: {
-		transformOrigin: {
-			type: [Boolean, String],
-			default: false
-		},
-		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',
-
-	componentName: 'ElSubmenu',
-
-	mixins: [menuMixin, Emitter, poperMixins],
-
-	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
-		}
-	},
-
-	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(items).forEach(index => {
-				if (items[index].active) {
-					isActive = true;
-				}
-			});
-
-			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 {
-					color: this.textColor
-				};
-			}
-			return {
-				borderBottomColor: this.active
-					? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
-					: 'transparent',
-				color: this.active
-					? this.activeTextColor
-					: 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;
-		}
-	},
-	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 && 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);
-		});
-	},
-	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 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>
-		);
-
-		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';
-
-		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 }]}
-				>
-					{$slots.title}
-					<i class={[ 'el-submenu__icon-arrow', submenuTitleIcon ]}></i>
-				</div>
-				{this.isMenuPopup ? popupMenu : inlineMenu}
-			</li>
-		);
-	}
-};
-</script>
+<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';
+
+	const poperMixins = {
+		props: {
+			transformOrigin: {
+				type: [Boolean, String],
+				default: false
+			},
+			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',
+
+		componentName: 'ElSubmenu',
+
+		mixins: [menuMixin, Emitter, poperMixins],
+
+		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
+			}
+		},
+
+		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(items).forEach(index => {
+					if (items[index].active) {
+						isActive = true;
+					}
+				});
+
+				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 {
+						color: this.textColor
+					};
+				}
+				return {
+					borderBottomColor: this.active
+						? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
+						: 'transparent',
+					color: this.active
+						? this.activeTextColor
+						: 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;
+			}
+		},
+		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 && 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);
+			});
+		},
+		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 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>
+			);
+
+			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';
+
+			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 }]}
+					>
+						{$slots.title}
+						<i class={[ 'el-submenu__icon-arrow', submenuTitleIcon ]}></i>
+					</div>
+					{this.isMenuPopup ? popupMenu : inlineMenu}
+				</li>
+			);
+		}
+	};
+</script>