@penggy/element-ui 2.4.11 → 2.4.12

package/packages/menu/src/menu-item-group.vue

@@ -1,45 +1,45 @@
-<template>
-  <li class="el-menu-item-group">
-    <div class="el-menu-item-group__title" :style="{paddingLeft: levelPadding + 'px'}">
-      <template v-if="!$slots.title">{{title}}</template>
-      <slot v-else name="title"></slot>
-    </div>
-    <ul>
-      <slot></slot>
-    </ul>
-  </li>
-</template>
-<script>
-  export default {
-    name: 'ElMenuItemGroup',
-
-    componentName: 'ElMenuItemGroup',
-
-    inject: ['rootMenu'],
-    props: {
-      title: {
-        type: String
-      }
-    },
-    data() {
-      return {
-        paddingLeft: 20
-      };
-    },
-    computed: {
-      levelPadding() {
-        let padding = 20;
-        let parent = this.$parent;
-        if (this.rootMenu.collapse) return 20;
-        while (parent && parent.$options.componentName !== 'ElMenu') {
-          if (parent.$options.componentName === 'ElSubmenu') {
-            padding += 20;
-          }
-          parent = parent.$parent;
-        }
-        return padding;
-      }
-    }
-  };
-</script>
-
+<template>
+  <li class="el-menu-item-group">
+    <div class="el-menu-item-group__title" :style="{paddingLeft: levelPadding + 'px'}">
+      <template v-if="!$slots.title">{{title}}</template>
+      <slot v-else name="title"></slot>
+    </div>
+    <ul>
+      <slot></slot>
+    </ul>
+  </li>
+</template>
+<script>
+  export default {
+    name: 'ElMenuItemGroup',
+
+    componentName: 'ElMenuItemGroup',
+
+    inject: ['rootMenu'],
+    props: {
+      title: {
+        type: String
+      }
+    },
+    data() {
+      return {
+        paddingLeft: 20
+      };
+    },
+    computed: {
+      levelPadding() {
+        let padding = 20;
+        let parent = this.$parent;
+        if (this.rootMenu.collapse) return 20;
+        while (parent && parent.$options.componentName !== 'ElMenu') {
+          if (parent.$options.componentName === 'ElSubmenu') {
+            padding += 20;
+          }
+          parent = parent.$parent;
+        }
+        return padding;
+      }
+    }
+  };
+</script>
+

package/packages/menu/src/menu-item.vue

@@ -1,112 +1,112 @@
-<template>
-  <li class="el-menu-item"
-    role="menuitem"
-    tabindex="-1"
-    :style="[paddingStyle, itemStyle, { backgroundColor }]"
-    :class="{
-      'is-active': active,
-      'is-disabled': disabled
-    }"
-    @click="handleClick"
-    @mouseenter="onMouseEnter"
-    @focus="onMouseEnter"
-    @blur="onMouseLeave"
-    @mouseleave="onMouseLeave"
-  >
-    <el-tooltip
-      v-if="parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse && $slots.title"
-      effect="dark"
-      placement="right">
-      <div slot="content"><slot name="title"></slot></div>
-      <div style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
-        <slot></slot>
-      </div>
-    </el-tooltip>
-    <template v-else>
-      <slot></slot>
-      <slot name="title"></slot>
-    </template>
-  </li>
-</template>
-<script>
-  import Menu from './menu-mixin';
-  import ElTooltip from 'element-ui/packages/tooltip';
-  import Emitter from 'element-ui/src/mixins/emitter';
-
-  export default {
-    name: 'ElMenuItem',
-
-    componentName: 'ElMenuItem',
-
-    mixins: [Menu, Emitter],
-
-    components: { ElTooltip },
-
-    props: {
-      index: {
-        type: String,
-        required: true
-      },
-      route: [String, Object],
-      disabled: Boolean
-    },
-    computed: {
-      active() {
-        return this.index === this.rootMenu.activeIndex;
-      },
-      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;
-      },
-      itemStyle() {
-        const style = {
-          color: this.active ? this.activeTextColor : this.textColor
-        };
-        if (this.mode === 'horizontal' && !this.isNested) {
-          style.borderBottomColor = this.active
-            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
-            : 'transparent';
-        }
-        return style;
-      },
-      isNested() {
-        return this.parentMenu !== this.rootMenu;
-      }
-    },
-    methods: {
-      onMouseEnter() {
-        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
-        this.$el.style.backgroundColor = this.hoverBackground;
-      },
-      onMouseLeave() {
-        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
-        this.$el.style.backgroundColor = this.backgroundColor;
-      },
-      handleClick() {
-        if (!this.disabled) {
-          this.dispatch('ElMenu', 'item-click', this);
-          this.$emit('click', this);
-        }
-      }
-    },
-    mounted() {
-      this.parentMenu.addItem(this);
-      this.rootMenu.addItem(this);
-    },
-    beforeDestroy() {
-      this.parentMenu.removeItem(this);
-      this.rootMenu.removeItem(this);
-    }
-  };
-</script>
+<template>
+  <li class="el-menu-item"
+    role="menuitem"
+    tabindex="-1"
+    :style="[paddingStyle, itemStyle, { backgroundColor }]"
+    :class="{
+      'is-active': active,
+      'is-disabled': disabled
+    }"
+    @click="handleClick"
+    @mouseenter="onMouseEnter"
+    @focus="onMouseEnter"
+    @blur="onMouseLeave"
+    @mouseleave="onMouseLeave"
+  >
+    <el-tooltip
+      v-if="parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse && $slots.title"
+      effect="dark"
+      placement="right">
+      <div slot="content"><slot name="title"></slot></div>
+      <div style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
+        <slot></slot>
+      </div>
+    </el-tooltip>
+    <template v-else>
+      <slot></slot>
+      <slot name="title"></slot>
+    </template>
+  </li>
+</template>
+<script>
+  import Menu from './menu-mixin';
+  import ElTooltip from '@penggy/element-ui/packages/tooltip';
+  import Emitter from '@penggy/element-ui/src/mixins/emitter';
+
+  export default {
+    name: 'ElMenuItem',
+
+    componentName: 'ElMenuItem',
+
+    mixins: [Menu, Emitter],
+
+    components: { ElTooltip },
+
+    props: {
+      index: {
+        type: String,
+        required: true
+      },
+      route: [String, Object],
+      disabled: Boolean
+    },
+    computed: {
+      active() {
+        return this.index === this.rootMenu.activeIndex;
+      },
+      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;
+      },
+      itemStyle() {
+        const style = {
+          color: this.active ? this.activeTextColor : this.textColor
+        };
+        if (this.mode === 'horizontal' && !this.isNested) {
+          style.borderBottomColor = this.active
+            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
+            : 'transparent';
+        }
+        return style;
+      },
+      isNested() {
+        return this.parentMenu !== this.rootMenu;
+      }
+    },
+    methods: {
+      onMouseEnter() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        this.$el.style.backgroundColor = this.hoverBackground;
+      },
+      onMouseLeave() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        this.$el.style.backgroundColor = this.backgroundColor;
+      },
+      handleClick() {
+        if (!this.disabled) {
+          this.dispatch('ElMenu', 'item-click', this);
+          this.$emit('click', this);
+        }
+      }
+    },
+    mounted() {
+      this.parentMenu.addItem(this);
+      this.rootMenu.addItem(this);
+    },
+    beforeDestroy() {
+      this.parentMenu.removeItem(this);
+      this.rootMenu.removeItem(this);
+    }
+  };
+</script>

package/packages/menu/src/menu-mixin.js

@@ -1,44 +1,44 @@
-export default {
-  inject: ['rootMenu'],
-  computed: {
-    indexPath() {
-      const path = [this.index];
-      let parent = this.$parent;
-      while (parent.$options.componentName !== 'ElMenu') {
-        if (parent.index) {
-          path.unshift(parent.index);
-        }
-        parent = parent.$parent;
-      }
-      return path;
-    },
-    parentMenu() {
-      let parent = this.$parent;
-      while (
-        parent &&
-        ['ElMenu', 'ElSubmenu'].indexOf(parent.$options.componentName) === -1
-      ) {
-        parent = parent.$parent;
-      }
-      return parent;
-    },
-    paddingStyle() {
-      if (this.rootMenu.mode !== 'vertical') return {};
-
-      let padding = 20;
-      let parent = this.$parent;
-
-      if (this.rootMenu.collapse) {
-        padding = 20;
-      } else {
-        while (parent && parent.$options.componentName !== 'ElMenu') {
-          if (parent.$options.componentName === 'ElSubmenu') {
-            padding += 20;
-          }
-          parent = parent.$parent;
-        }
-      }
-      return {paddingLeft: padding + 'px'};
-    }
-  }
-};
+export default {
+  inject: ['rootMenu'],
+  computed: {
+    indexPath() {
+      const path = [this.index];
+      let parent = this.$parent;
+      while (parent.$options.componentName !== 'ElMenu') {
+        if (parent.index) {
+          path.unshift(parent.index);
+        }
+        parent = parent.$parent;
+      }
+      return path;
+    },
+    parentMenu() {
+      let parent = this.$parent;
+      while (
+        parent &&
+        ['ElMenu', 'ElSubmenu'].indexOf(parent.$options.componentName) === -1
+      ) {
+        parent = parent.$parent;
+      }
+      return parent;
+    },
+    paddingStyle() {
+      if (this.rootMenu.mode !== 'vertical') return {};
+
+      let padding = 20;
+      let parent = this.$parent;
+
+      if (this.rootMenu.collapse) {
+        padding = 20;
+      } else {
+        while (parent && parent.$options.componentName !== 'ElMenu') {
+          if (parent.$options.componentName === 'ElSubmenu') {
+            padding += 20;
+          }
+          parent = parent.$parent;
+        }
+      }
+      return {paddingLeft: padding + 'px'};
+    }
+  }
+};