cy-element-ui 1.1.25 → 1.1.26

package/packages/menu/src/submenu.vue

@@ -1,348 +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';
-
-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>