cy-element-ui 1.1.13 → 1.1.15

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
-    },
-    data: Popper.data,
-    methods: Popper.methods,
-    beforeDestroy: Popper.beforeDestroy,
-    deactivated: Popper.deactivated
-  };
+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',
+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
+		},
+		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;
+	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(items).forEach(index => {
+				if (items[index].active) {
+					isActive = true;
+				}
+			});
 
-        Object.keys(submenus).forEach(index => {
-          if (submenus[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) {
+			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 (!('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);
+				}
+			}
+		},
+		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;
 
-        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 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 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}
-        >
-          <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>
-      );
-    }
-  };
+		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>