fix(menu): fix/menu-item-group-not-working (#1217)

- Make the menu-item-group exported correctly

packages/menu/__tests__/menu.spec.ts

@@ -3,7 +3,7 @@ import { nextTick } from 'vue'
 import { sleep } from '@element-plus/test-utils'
 
 import Menu from '../src/menu.vue'
-import MenuGroup from '../src/menuGroup.vue'
+import MenuGroup from '../src/menuItemGroup.vue'
 import MenuItem from '../src/menuItem.vue'
 import SubMenu from '../src/submenu.vue'
 

packages/menu/src/menuGroup.vue

@@ -1,66 +0,0 @@
-<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 lang="ts">
-import {
-  defineComponent,
-  computed,
-  getCurrentInstance,
-  inject,
-  reactive,
-} from 'vue'
-import { IMenuGroupProps, RootMenuProvider } from './menu'
-
-export default defineComponent({
-  name: 'ElMenuItemGroup',
-  componentName: 'ElMenuItemGroup',
-
-  props: {
-    title: {
-      type: String,
-    },
-  },
-  setup(props: IMenuGroupProps, { slots }) {
-    // data
-    const data = reactive({
-      paddingLeft: 20,
-    })
-    const instance = getCurrentInstance()
-    // computed
-    const levelPadding = computed(() => {
-      let padding = 20
-      let parent = instance.parent
-      if (rootProps.collapse) return 20
-      while (parent && parent.type.name !== 'ElMenu') {
-        if (parent.type.name === 'ElSubmenu') {
-          padding += 20
-        }
-        parent = parent.parent
-      }
-      return padding
-    })
-
-    // inject
-    const { props: rootProps } = inject<RootMenuProvider>('rootMenu')
-
-    return {
-      data,
-      levelPadding,
-      props,
-      slots,
-    }
-  },
-})
-</script>

packages/menu/src/menuItemGroup.vue

@@ -1,12 +1,66 @@
 <template>
-  <div>
-    <slot></slot>
-  </div>
+  <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 lang='ts'>
-import { defineComponent } from 'vue'
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  getCurrentInstance,
+  inject,
+  reactive,
+} from 'vue'
+import { IMenuGroupProps, RootMenuProvider } from './menu'
+
 export default defineComponent({
   name: 'ElMenuItemGroup',
-  props: { },
+  componentName: 'ElMenuItemGroup',
+
+  props: {
+    title: {
+      type: String,
+    },
+  },
+  setup(props: IMenuGroupProps, { slots }) {
+    // data
+    const data = reactive({
+      paddingLeft: 20,
+    })
+    const instance = getCurrentInstance()
+    // computed
+    const levelPadding = computed(() => {
+      let padding = 20
+      let parent = instance.parent
+      if (rootProps.collapse) return 20
+      while (parent && parent.type.name !== 'ElMenu') {
+        if (parent.type.name === 'ElSubmenu') {
+          padding += 20
+        }
+        parent = parent.parent
+      }
+      return padding
+    })
+
+    // inject
+    const { props: rootProps } = inject<RootMenuProvider>('rootMenu')
+
+    return {
+      data,
+      levelPadding,
+      props,
+      slots,
+    }
+  },
 })
 </script>