From 05ec0ea368c625d7ad13831780ccf224b73f58e6 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Mon, 10 Jan 2022 10:44:11 +0800
Subject: [PATCH 1/2] feat(comp:menu): type of MenuItem is optional

---
 .../components/menu/__tests__/menu.spec.ts    | 26 ++++----
 packages/components/menu/demo/Horizontal.vue  | 22 +++----
 packages/components/menu/demo/Inline.vue      | 24 +++----
 packages/components/menu/demo/SingleOpen.vue  | 20 +++---
 packages/components/menu/demo/Slots.vue       | 19 +++---
 .../components/menu/demo/StateSwitching.vue   | 22 +++----
 packages/components/menu/demo/Vertical.vue    | 22 +++----
 packages/components/menu/docs/Index.zh.md     | 65 +++++++++++++++++--
 packages/components/menu/src/Menu.tsx         |  2 +-
 .../{children => contents}/MenuDivider.tsx    |  0
 .../src/{children => contents}/MenuItem.tsx   | 18 ++---
 .../{children => contents}/MenuItemGroup.tsx  |  0
 .../menu/src/{children => contents}/Utils.tsx |  2 +-
 .../menu-sub/InlineContent.tsx                |  0
 .../menu-sub/MenuSub.tsx                      |  1 +
 .../menu-sub/OverlayContent.tsx               |  0
 .../{children => contents}/menu-sub/Title.tsx | 21 ++++--
 packages/components/menu/src/token.ts         |  1 +
 packages/components/menu/src/types.ts         | 36 +++++-----
 19 files changed, 181 insertions(+), 120 deletions(-)
 rename packages/components/menu/src/{children => contents}/MenuDivider.tsx (100%)
 rename packages/components/menu/src/{children => contents}/MenuItem.tsx (84%)
 rename packages/components/menu/src/{children => contents}/MenuItemGroup.tsx (100%)
 rename packages/components/menu/src/{children => contents}/Utils.tsx (97%)
 rename packages/components/menu/src/{children => contents}/menu-sub/InlineContent.tsx (100%)
 rename packages/components/menu/src/{children => contents}/menu-sub/MenuSub.tsx (99%)
 rename packages/components/menu/src/{children => contents}/menu-sub/OverlayContent.tsx (100%)
 rename packages/components/menu/src/{children => contents}/menu-sub/Title.tsx (74%)

diff --git a/packages/components/menu/__tests__/menu.spec.ts b/packages/components/menu/__tests__/menu.spec.ts
index ca27f5b0f..d2dc0f905 100644
--- a/packages/components/menu/__tests__/menu.spec.ts
+++ b/packages/components/menu/__tests__/menu.spec.ts
@@ -5,15 +5,15 @@ import { renderWork, wait } from '@tests'
 
 import Menu from '../src/Menu'
 // import MenuDivider from '../src/MenuDivider'
-import MenuItem from '../src/children/MenuItem'
+import MenuItem from '../src/contents/MenuItem'
 // import MenuItemGroup from '../src/MenuItemGroup'
-import MenuSub from '../src/children/menu-sub/MenuSub'
+import MenuSub from '../src/contents/menu-sub/MenuSub'
 import { MenuData, MenuProps } from '../src/types'
 
 const dataSource: MenuData[] = [
-  { type: 'item', key: 'item1', icon: 'home', slots: { label: () => h('a', 'Item 1') } },
-  { type: 'item', key: 'item2', icon: 'mail', label: 'Item 2' },
-  { type: 'item', key: 'item3', icon: 'appstore', label: 'Item 3', disabled: true },
+  { key: 'item1', icon: 'home', slots: { label: () => h('a', 'Item 1') } },
+  { key: 'item2', icon: 'mail', label: 'Item 2' },
+  { key: 'item3', icon: 'appstore', label: 'Item 3', disabled: true },
   { type: 'divider', key: 'divider1' },
   {
     type: 'sub',
@@ -26,8 +26,8 @@ const dataSource: MenuData[] = [
         key: 'itemGroup1',
         label: 'Item Group 1',
         children: [
-          { type: 'item', key: 'item4', label: 'Item 4' },
-          { type: 'item', key: 'item5', label: 'Item 5' },
+          { key: 'item4', label: 'Item 4' },
+          { key: 'item5', label: 'Item 5' },
         ],
       },
       { type: 'divider', key: 'divider2' },
@@ -36,8 +36,8 @@ const dataSource: MenuData[] = [
         key: 'sub2',
         label: 'Menu Sub 2',
         children: [
-          { type: 'item', key: 'item6', label: 'Item 6' },
-          { type: 'item', key: 'item7', label: 'Item 7' },
+          { key: 'item6', label: 'Item 6' },
+          { key: 'item7', label: 'Item 7' },
         ],
       },
       {
@@ -45,8 +45,8 @@ const dataSource: MenuData[] = [
         key: 'sub3',
         label: 'Menu Sub 3',
         children: [
-          { type: 'item', key: 'item8', label: 'Item 8' },
-          { type: 'item', key: 'item9', label: 'Item 9' },
+          { key: 'item8', label: 'Item 8' },
+          { key: 'item9', label: 'Item 9' },
         ],
       },
     ],
@@ -58,8 +58,8 @@ const dataSource: MenuData[] = [
     label: 'Menu Sub 4',
     disabled: true,
     children: [
-      { type: 'item', key: 'item10', label: 'Item 10' },
-      { type: 'item', key: 'item11', label: 'Item 11' },
+      { key: 'item10', label: 'Item 10' },
+      { key: 'item11', label: 'Item 11' },
     ],
   },
 ]
diff --git a/packages/components/menu/demo/Horizontal.vue b/packages/components/menu/demo/Horizontal.vue
index 7dc03a5cb..c160e198c 100644
--- a/packages/components/menu/demo/Horizontal.vue
+++ b/packages/components/menu/demo/Horizontal.vue
@@ -7,9 +7,9 @@ import { h } from 'vue'
 import { MenuData } from '@idux/components/menu'
 
 const dataSource: MenuData[] = [
-  { type: 'item', key: 'item1', icon: 'home', slots: { label: () => h('a', 'Item 1') } },
-  { type: 'item', key: 'item2', icon: 'mail', label: 'Item 2' },
-  { type: 'item', key: 'item3', icon: 'appstore', label: 'Item 3', disabled: true },
+  { key: 'item1', icon: 'home', slots: { label: () => h('a', 'Item 1') } },
+  { key: 'item2', icon: 'mail', label: 'Item 2' },
+  { key: 'item3', icon: 'appstore', label: 'Item 3', disabled: true },
   { type: 'divider', key: 'divider1' },
   {
     type: 'sub',
@@ -22,8 +22,8 @@ const dataSource: MenuData[] = [
         key: 'itemGroup1',
         label: 'Item Group 1',
         children: [
-          { type: 'item', key: 'item4', label: 'Item 4' },
-          { type: 'item', key: 'item5', label: 'Item 5' },
+          { key: 'item4', label: 'Item 4' },
+          { key: 'item5', label: 'Item 5' },
         ],
       },
       { type: 'divider', key: 'divider2' },
@@ -32,8 +32,8 @@ const dataSource: MenuData[] = [
         key: 'sub2',
         label: 'Menu Sub 2',
         children: [
-          { type: 'item', key: 'item6', label: 'Item 6' },
-          { type: 'item', key: 'item7', label: 'Item 7' },
+          { key: 'item6', label: 'Item 6' },
+          { key: 'item7', label: 'Item 7' },
         ],
       },
       {
@@ -41,8 +41,8 @@ const dataSource: MenuData[] = [
         key: 'sub3',
         label: 'Menu Sub 3',
         children: [
-          { type: 'item', key: 'item8', label: 'Item 8' },
-          { type: 'item', key: 'item9', label: 'Item 9' },
+          { key: 'item8', label: 'Item 8' },
+          { key: 'item9', label: 'Item 9' },
         ],
       },
     ],
@@ -54,8 +54,8 @@ const dataSource: MenuData[] = [
     label: 'Menu Sub 4',
     disabled: true,
     children: [
-      { type: 'item', key: 'item10', label: 'Item 10' },
-      { type: 'item', key: 'item11', label: 'Item 11' },
+      { key: 'item10', label: 'Item 10' },
+      { key: 'item11', label: 'Item 11' },
     ],
   },
 ]
diff --git a/packages/components/menu/demo/Inline.vue b/packages/components/menu/demo/Inline.vue
index 5b96e8f89..d301ec685 100644
--- a/packages/components/menu/demo/Inline.vue
+++ b/packages/components/menu/demo/Inline.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxMenu mode="inline" :dataSource="dataSource" style="width: 256px"> </IxMenu>
+  <IxMenu mode="inline" multiple :dataSource="dataSource" style="width: 256px"> </IxMenu>
 </template>
 <script setup lang="ts">
 import { h } from 'vue'
@@ -7,9 +7,9 @@ import { h } from 'vue'
 import { MenuData } from '@idux/components/menu'
 
 const dataSource: MenuData[] = [
-  { type: 'item', key: 'item1', icon: 'home', slots: { label: () => h('a', 'Item 1') } },
-  { type: 'item', key: 'item2', icon: 'mail', label: 'Item 2' },
-  { type: 'item', key: 'item3', icon: 'appstore', label: 'Item 3', disabled: true },
+  { key: 'item1', icon: 'home', slots: { label: () => h('a', 'Item 1') } },
+  { key: 'item2', icon: 'mail', label: 'Item 2' },
+  { key: 'item3', icon: 'appstore', label: 'Item 3', disabled: true },
   { type: 'divider', key: 'divider1' },
   {
     type: 'sub',
@@ -22,8 +22,8 @@ const dataSource: MenuData[] = [
         key: 'itemGroup1',
         label: 'Item Group 1',
         children: [
-          { type: 'item', key: 'item4', label: 'Item 4' },
-          { type: 'item', key: 'item5', label: 'Item 5' },
+          { key: 'item4', label: 'Item 4' },
+          { key: 'item5', label: 'Item 5' },
         ],
       },
       { type: 'divider', key: 'divider2' },
@@ -32,8 +32,8 @@ const dataSource: MenuData[] = [
         key: 'sub2',
         label: 'Menu Sub 2',
         children: [
-          { type: 'item', key: 'item6', label: 'Item 6' },
-          { type: 'item', key: 'item7', label: 'Item 7' },
+          { key: 'item6', label: 'Item 6' },
+          { key: 'item7', label: 'Item 7' },
         ],
       },
       {
@@ -41,8 +41,8 @@ const dataSource: MenuData[] = [
         key: 'sub3',
         label: 'Menu Sub 3',
         children: [
-          { type: 'item', key: 'item8', label: 'Item 8' },
-          { type: 'item', key: 'item9', label: 'Item 9' },
+          { key: 'item8', label: 'Item 8' },
+          { key: 'item9', label: 'Item 9' },
         ],
       },
     ],
@@ -54,8 +54,8 @@ const dataSource: MenuData[] = [
     label: 'Menu Sub 4',
     disabled: true,
     children: [
-      { type: 'item', key: 'item10', label: 'Item 10' },
-      { type: 'item', key: 'item11', label: 'Item 11' },
+      { key: 'item10', label: 'Item 10' },
+      { key: 'item11', label: 'Item 11' },
     ],
   },
 ]
diff --git a/packages/components/menu/demo/SingleOpen.vue b/packages/components/menu/demo/SingleOpen.vue
index cdfb999b9..3259ae963 100644
--- a/packages/components/menu/demo/SingleOpen.vue
+++ b/packages/components/menu/demo/SingleOpen.vue
@@ -27,8 +27,8 @@ const dataSource: MenuData[] = [
         key: 'itemGroup1',
         label: 'Item Group 1',
         children: [
-          { type: 'item', key: 'item4', label: 'Item 4' },
-          { type: 'item', key: 'item5', label: 'Item 5' },
+          { key: 'item4', label: 'Item 4' },
+          { key: 'item5', label: 'Item 5' },
         ],
       },
       { type: 'divider', key: 'divider2' },
@@ -37,8 +37,8 @@ const dataSource: MenuData[] = [
         key: 'sub2',
         label: 'Menu Sub 2',
         children: [
-          { type: 'item', key: 'item6', label: 'Item 6' },
-          { type: 'item', key: 'item7', label: 'Item 7' },
+          { key: 'item6', label: 'Item 6' },
+          { key: 'item7', label: 'Item 7' },
         ],
       },
       {
@@ -46,8 +46,8 @@ const dataSource: MenuData[] = [
         key: 'sub3',
         label: 'Menu Sub 3',
         children: [
-          { type: 'item', key: 'item8', label: 'Item 8' },
-          { type: 'item', key: 'item9', label: 'Item 9' },
+          { key: 'item8', label: 'Item 8' },
+          { key: 'item9', label: 'Item 9' },
         ],
       },
     ],
@@ -58,8 +58,8 @@ const dataSource: MenuData[] = [
     icon: 'github',
     label: 'Menu Sub 4',
     children: [
-      { type: 'item', key: 'item10', label: 'Item 10' },
-      { type: 'item', key: 'item11', label: 'Item 11' },
+      { key: 'item10', label: 'Item 10' },
+      { key: 'item11', label: 'Item 11' },
     ],
   },
   {
@@ -68,8 +68,8 @@ const dataSource: MenuData[] = [
     icon: 'github',
     label: 'Menu Sub 5',
     children: [
-      { type: 'item', key: 'item12', label: 'Item 12' },
-      { type: 'item', key: 'item13', label: 'Item 13' },
+      { key: 'item12', label: 'Item 12' },
+      { key: 'item13', label: 'Item 13' },
     ],
   },
 ]
diff --git a/packages/components/menu/demo/Slots.vue b/packages/components/menu/demo/Slots.vue
index ae6a88196..234378ecb 100644
--- a/packages/components/menu/demo/Slots.vue
+++ b/packages/components/menu/demo/Slots.vue
@@ -16,9 +16,8 @@ import { IxIcon } from '@idux/components/icon'
 import { MenuData } from '@idux/components/menu'
 
 const dataSource: MenuData[] = [
-  { type: 'item', key: 'item1', icon: 'home', label: 'Item 1', slots: { label: 'label' } },
+  { key: 'item1', icon: 'home', label: 'Item 1', slots: { label: 'label' } },
   {
-    type: 'item',
     key: 'item2',
     label: 'Item 2',
     slots: { label: item => h('a', item.label), icon: () => h(IxIcon, { name: 'mail' }) },
@@ -36,8 +35,8 @@ const dataSource: MenuData[] = [
         label: 'Item Group 1',
 
         children: [
-          { type: 'item', key: 'item4', label: 'Item 4', slots: { label: 'label' } },
-          { type: 'item', key: 'item5', label: 'Item 5' },
+          { key: 'item4', label: 'Item 4', slots: { label: 'label' } },
+          { key: 'item5', label: 'Item 5' },
         ],
       },
       { type: 'divider', key: 'divider2' },
@@ -46,8 +45,8 @@ const dataSource: MenuData[] = [
         key: 'sub2',
         label: 'Menu Sub 2',
         children: [
-          { type: 'item', key: 'item6', label: 'Item 6', slots: { label: 'label' } },
-          { type: 'item', key: 'item7', label: 'Item 7' },
+          { key: 'item6', label: 'Item 6', slots: { label: 'label' } },
+          { key: 'item7', label: 'Item 7' },
         ],
       },
       {
@@ -55,8 +54,8 @@ const dataSource: MenuData[] = [
         key: 'sub3',
         label: 'Menu Sub 3',
         children: [
-          { type: 'item', key: 'item8', label: 'Item 8' },
-          { type: 'item', key: 'item9', label: 'Item 9' },
+          { key: 'item8', label: 'Item 8' },
+          { key: 'item9', label: 'Item 9' },
         ],
       },
     ],
@@ -67,8 +66,8 @@ const dataSource: MenuData[] = [
     label: 'Menu Sub 4',
     slots: { label: 'label', icon: 'subIcon' },
     children: [
-      { type: 'item', key: 'item10', label: 'Item 10' },
-      { type: 'item', key: 'item11', label: 'Item 911' },
+      { key: 'item10', label: 'Item 10' },
+      { key: 'item11', label: 'Item 911' },
     ],
   },
 ]
diff --git a/packages/components/menu/demo/StateSwitching.vue b/packages/components/menu/demo/StateSwitching.vue
index 1af8b3a23..c85edfe97 100644
--- a/packages/components/menu/demo/StateSwitching.vue
+++ b/packages/components/menu/demo/StateSwitching.vue
@@ -52,9 +52,9 @@ const selectedKeys = ref([])
 const expandedKeys = ref([])
 
 const dataSource: MenuData[] = [
-  { type: 'item', key: 'item1', icon: 'home', slots: { label: () => h('a', 'Item 1') } },
-  { type: 'item', key: 'item2', icon: 'mail', label: 'Item 2' },
-  { type: 'item', key: 'item3', icon: 'appstore', label: 'Item 3', disabled: true },
+  { key: 'item1', icon: 'home', slots: { label: () => h('a', 'Item 1') } },
+  { key: 'item2', icon: 'mail', label: 'Item 2' },
+  { key: 'item3', icon: 'appstore', label: 'Item 3', disabled: true },
   { type: 'divider', key: 'divider1' },
   {
     type: 'sub',
@@ -67,8 +67,8 @@ const dataSource: MenuData[] = [
         key: 'itemGroup1',
         label: 'Item Group 1',
         children: [
-          { type: 'item', key: 'item4', label: 'Item 4' },
-          { type: 'item', key: 'item5', label: 'Item 5' },
+          { key: 'item4', label: 'Item 4' },
+          { key: 'item5', label: 'Item 5' },
         ],
       },
       { type: 'divider', key: 'divider2' },
@@ -77,8 +77,8 @@ const dataSource: MenuData[] = [
         key: 'sub2',
         label: 'Menu Sub 2',
         children: [
-          { type: 'item', key: 'item6', label: 'Item 6' },
-          { type: 'item', key: 'item7', label: 'Item 7' },
+          { key: 'item6', label: 'Item 6' },
+          { key: 'item7', label: 'Item 7' },
         ],
       },
       {
@@ -86,8 +86,8 @@ const dataSource: MenuData[] = [
         key: 'sub3',
         label: 'Menu Sub 3',
         children: [
-          { type: 'item', key: 'item8', label: 'Item 8' },
-          { type: 'item', key: 'item9', label: 'Item 9' },
+          { key: 'item8', label: 'Item 8' },
+          { key: 'item9', label: 'Item 9' },
         ],
       },
     ],
@@ -99,8 +99,8 @@ const dataSource: MenuData[] = [
     label: 'Menu Sub 4',
     disabled: true,
     children: [
-      { type: 'item', key: 'item10', label: 'Item 10' },
-      { type: 'item', key: 'item11', label: 'Item 11' },
+      { key: 'item10', label: 'Item 10' },
+      { key: 'item11', label: 'Item 11' },
     ],
   },
 ]
diff --git a/packages/components/menu/demo/Vertical.vue b/packages/components/menu/demo/Vertical.vue
index bcb7c826e..d3c110fba 100644
--- a/packages/components/menu/demo/Vertical.vue
+++ b/packages/components/menu/demo/Vertical.vue
@@ -8,9 +8,9 @@ import { h } from 'vue'
 import { MenuData } from '@idux/components/menu'
 
 const dataSource: MenuData[] = [
-  { type: 'item', key: 'item1', icon: 'home', slots: { label: () => h('a', 'Item 1') } },
-  { type: 'item', key: 'item2', icon: 'mail', label: 'Item 2' },
-  { type: 'item', key: 'item3', icon: 'appstore', label: 'Item 3', disabled: true },
+  { key: 'item1', icon: 'home', slots: { label: () => h('a', 'Item 1') } },
+  { key: 'item2', icon: 'mail', label: 'Item 2' },
+  { key: 'item3', icon: 'appstore', label: 'Item 3', disabled: true },
   { type: 'divider', key: 'divider1' },
   {
     type: 'sub',
@@ -23,8 +23,8 @@ const dataSource: MenuData[] = [
         key: 'itemGroup1',
         label: 'Item Group 1',
         children: [
-          { type: 'item', key: 'item4', label: 'Item 4' },
-          { type: 'item', key: 'item5', label: 'Item 5' },
+          { key: 'item4', label: 'Item 4' },
+          { key: 'item5', label: 'Item 5' },
         ],
       },
       { type: 'divider', key: 'divider2' },
@@ -33,8 +33,8 @@ const dataSource: MenuData[] = [
         key: 'sub2',
         label: 'Menu Sub 2',
         children: [
-          { type: 'item', key: 'item6', label: 'Item 6' },
-          { type: 'item', key: 'item7', label: 'Item 7' },
+          { key: 'item6', label: 'Item 6' },
+          { key: 'item7', label: 'Item 7' },
         ],
       },
       {
@@ -42,8 +42,8 @@ const dataSource: MenuData[] = [
         key: 'sub3',
         label: 'Menu Sub 3',
         children: [
-          { type: 'item', key: 'item8', label: 'Item 8' },
-          { type: 'item', key: 'item9', label: 'Item 9' },
+          { key: 'item8', label: 'Item 8' },
+          { key: 'item9', label: 'Item 9' },
         ],
       },
     ],
@@ -55,8 +55,8 @@ const dataSource: MenuData[] = [
     label: 'Menu Sub 4',
     disabled: true,
     children: [
-      { type: 'item', key: 'item10', label: 'Item 10' },
-      { type: 'item', key: 'item11', label: 'Item 11' },
+      { key: 'item10', label: 'Item 10' },
+      { key: 'item11', label: 'Item 11' },
     ],
   },
 ]
diff --git a/packages/components/menu/docs/Index.zh.md b/packages/components/menu/docs/Index.zh.md
index dfbb5e71b..6723f3da9 100644
--- a/packages/components/menu/docs/Index.zh.md
+++ b/packages/components/menu/docs/Index.zh.md
@@ -30,6 +30,59 @@ order: 0
 ```ts
 export type MenuData = MenuItem | MenuItemGroup | MenuSub | MenuDivider
 
+export interface MenuCommon {
+  type?: 'item' | 'itemGroup' | 'sub' | 'divider'
+  additional?: {
+    class?: any
+    style?: any
+    [key: string]: unknown
+  }
+  key: VKey
+  slots?: unknown
+}
+
+export interface MenuItemSlots {
+  icon?: string | ((data: MenuItem & { selected: boolean }) => VNodeChild)
+  label?: string | ((data: MenuItem & { selected: boolean }) => VNodeChild)
+}
+export interface MenuItem extends MenuItemPublicProps, MenuCommon {
+  type?: 'item'
+  slots?: MenuItemSlots
+}
+
+export interface MenuItemGroupSlots {
+  icon?: string | ((data: MenuItemGroup) => VNodeChild)
+  label?: string | ((data: MenuItemGroup) => VNodeChild)
+}
+export interface MenuItemGroup extends MenuItemGroupPublicProps, MenuCommon {
+  type: 'itemGroup'
+  slots?: MenuItemGroupSlots
+}
+
+export interface MenuSubSlots {
+  icon?: string | ((data: MenuSub & { expanded: boolean; selected: boolean }) => VNodeChild)
+  label?: string | ((data: MenuSub & { expanded: boolean; selected: boolean }) => VNodeChild)
+  suffix?: string | ((data: MenuSub & { expanded: boolean; selected: boolean }) => VNodeChild)
+}
+export interface MenuSub extends MenuSubPublicProps, MenuCommon {
+  type: 'sub'
+  additional?: {
+    class?: any
+    style?: any
+    [key: string]: unknown
+  }
+  slots?: MenuSubSlots
+}
+
+export interface MenuDivider {
+  type: 'divider'
+  additional?: {
+    class?: any
+    style?: any
+    [key: string]: unknown
+  }
+  key?: VKey
+}
 ```
 
 ### IxMenuItem
@@ -40,8 +93,8 @@ export type MenuData = MenuItem | MenuItemGroup | MenuSub | MenuDivider
 | --- | --- | --- | --- | --- | --- |
 | `key` | 唯一标识 | `VKey` | - | - | 必传 |
 | `disabled` | 是否禁用 | `boolean` | `false` | - | - |
-| `icon` | 菜单图标| `string \| #icon \| VNode` | - | - |
-| `label` | 菜单文本 | `string \| #default`  | - | - |
+| `icon` | 菜单图标| `string  \| VNode \| #icon` | - | - |
+| `label` | 菜单文本 | `string \| #label`  | - | - |
 
 ### IxMenuSub
 
@@ -50,9 +103,9 @@ export type MenuData = MenuItem | MenuItemGroup | MenuSub | MenuDivider
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `key` | 唯一标识 | `VKey` | - | - | 必传 |
-| `children` | 子菜单数据 | `MenuData[]` | - | - | - |
+| `children` | 子菜单数据 | `MenuData[] \| #default` | - | - | - |
 | `disabled` | 是否禁用 | `boolean` | `false` | - | - |
-| `icon` | 菜单图标| `string \| #icon \| VNode` | - | - | - |
+| `icon` | 菜单图标| `string \| VNode \| #icon` | - | - | - |
 | `label` | 菜单文本 | `string \| #label`  | - | - |
 | `suffix` | 后缀图标 | `string \| #suffix` | `right` | ✅ | - |
 
@@ -63,8 +116,8 @@ export type MenuData = MenuItem | MenuItemGroup | MenuSub | MenuDivider
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `key` | 唯一标识 | `VKey` | - | - | 必传 |
-| `children` | 子菜单数据 | `MenuData[]` | - | - | - |
-| `icon` | 菜单图标| `string \| #icon \| VNode` | - | - |
+| `children` | 子菜单数据 | `MenuData[] \| #default` | - | - | - |
+| `icon` | 菜单图标| `string \| VNode \| #icon` | - | - |
 | `label` | 菜单文本 | `string \| #label`  | - | - |
 
 ### IxMenuDivider
diff --git a/packages/components/menu/src/Menu.tsx b/packages/components/menu/src/Menu.tsx
index f5b0f212e..944b4a103 100644
--- a/packages/components/menu/src/Menu.tsx
+++ b/packages/components/menu/src/Menu.tsx
@@ -13,10 +13,10 @@ import { callEmit } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { ɵDropdownToken } from '@idux/components/dropdown'
 
-import { coverChildren } from './children/Utils'
 import { useDataSource } from './composables/useDataSource'
 import { useExpanded } from './composables/useExpanded'
 import { useSelected } from './composables/useSelected'
+import { coverChildren } from './contents/Utils'
 import { menuToken } from './token'
 import { menuProps } from './types'
 
diff --git a/packages/components/menu/src/children/MenuDivider.tsx b/packages/components/menu/src/contents/MenuDivider.tsx
similarity index 100%
rename from packages/components/menu/src/children/MenuDivider.tsx
rename to packages/components/menu/src/contents/MenuDivider.tsx
diff --git a/packages/components/menu/src/children/MenuItem.tsx b/packages/components/menu/src/contents/MenuItem.tsx
similarity index 84%
rename from packages/components/menu/src/children/MenuItem.tsx
rename to packages/components/menu/src/contents/MenuItem.tsx
index dfb06adfe..ee19700b5 100644
--- a/packages/components/menu/src/children/MenuItem.tsx
+++ b/packages/components/menu/src/contents/MenuItem.tsx
@@ -60,24 +60,26 @@ export default defineComponent({
 
     return () => {
       const { disabled, icon, label } = props
-      const slotProps = { ...props, key } as MenuItem
-
       const slots = props.slots || {}
       const iconSlot = isString(slots.icon) ? menuSlots[slots.icon] : slots.icon
-      const iconNode = coverIcon(iconSlot, slotProps, icon)
-      let labelSlot = slots.label
-      if (!labelSlot && slots.default) {
-        labelSlot = slots.default
-      }
+      // <IxMenuItem key="key">label</IxMenuItem>
+      let labelSlot = slots.label ?? slots.default
       if (isString(labelSlot)) {
         labelSlot = menuSlots[labelSlot]
       }
 
+      const slotProps =
+        iconSlot || labelSlot
+          ? ({ ...props, key, selected: isSelected.value } as MenuItem & { selected: boolean })
+          : undefined
+      const iconNode = coverIcon(iconSlot, slotProps!, icon)
+      const labelNode = labelSlot ? labelSlot(slotProps) : label
+
       const prefixCls = `${mergedPrefixCls.value}-item`
       return (
         <li class={classes.value} style={style.value} onClick={disabled ? undefined : onClick}>
           {iconNode && <span class={`${prefixCls}-icon`}>{iconNode}</span>}
-          <span>{labelSlot ? labelSlot(slotProps) : label}</span>
+          <span>{labelNode}</span>
         </li>
       )
     }
diff --git a/packages/components/menu/src/children/MenuItemGroup.tsx b/packages/components/menu/src/contents/MenuItemGroup.tsx
similarity index 100%
rename from packages/components/menu/src/children/MenuItemGroup.tsx
rename to packages/components/menu/src/contents/MenuItemGroup.tsx
diff --git a/packages/components/menu/src/children/Utils.tsx b/packages/components/menu/src/contents/Utils.tsx
similarity index 97%
rename from packages/components/menu/src/children/Utils.tsx
rename to packages/components/menu/src/contents/Utils.tsx
index 851d6226c..e89710a18 100644
--- a/packages/components/menu/src/children/Utils.tsx
+++ b/packages/components/menu/src/contents/Utils.tsx
@@ -27,7 +27,7 @@ export function coverChildren(data?: MenuData[]): VNode[] {
   data.forEach(item => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const { type, additional, ...rest } = item as any
-    if (type === 'item') {
+    if (!type || type === 'item') {
       nodes.push(<MenuItem {...rest} {...additional}></MenuItem>)
     } else if (type === 'sub') {
       nodes.push(<MenuSub {...rest} {...additional}></MenuSub>)
diff --git a/packages/components/menu/src/children/menu-sub/InlineContent.tsx b/packages/components/menu/src/contents/menu-sub/InlineContent.tsx
similarity index 100%
rename from packages/components/menu/src/children/menu-sub/InlineContent.tsx
rename to packages/components/menu/src/contents/menu-sub/InlineContent.tsx
diff --git a/packages/components/menu/src/children/menu-sub/MenuSub.tsx b/packages/components/menu/src/contents/menu-sub/MenuSub.tsx
similarity index 99%
rename from packages/components/menu/src/children/menu-sub/MenuSub.tsx
rename to packages/components/menu/src/contents/menu-sub/MenuSub.tsx
index 6522270c1..c6b541eb5 100644
--- a/packages/components/menu/src/children/menu-sub/MenuSub.tsx
+++ b/packages/components/menu/src/contents/menu-sub/MenuSub.tsx
@@ -77,6 +77,7 @@ export default defineComponent({
       props,
       key,
       isExpanded,
+      isSelected,
       mode,
       level,
       paddingLeft,
diff --git a/packages/components/menu/src/children/menu-sub/OverlayContent.tsx b/packages/components/menu/src/contents/menu-sub/OverlayContent.tsx
similarity index 100%
rename from packages/components/menu/src/children/menu-sub/OverlayContent.tsx
rename to packages/components/menu/src/contents/menu-sub/OverlayContent.tsx
diff --git a/packages/components/menu/src/children/menu-sub/Title.tsx b/packages/components/menu/src/contents/menu-sub/Title.tsx
similarity index 74%
rename from packages/components/menu/src/children/menu-sub/Title.tsx
rename to packages/components/menu/src/contents/menu-sub/Title.tsx
index ba0c6149a..e71c5757c 100644
--- a/packages/components/menu/src/children/menu-sub/Title.tsx
+++ b/packages/components/menu/src/contents/menu-sub/Title.tsx
@@ -16,7 +16,8 @@ import { coverIcon } from '../Utils'
 export default defineComponent({
   setup() {
     const { slots: menuSlots, config, mergedPrefixCls } = inject(menuToken)!
-    const { props, key, isExpanded, changeExpanded, handleMouseEvent, mode, paddingLeft } = inject(menuSubToken)!
+    const { props, key, isExpanded, isSelected, changeExpanded, handleMouseEvent, mode, paddingLeft } =
+      inject(menuSubToken)!
 
     const suffix = computed(() => props.suffix ?? config.suffix)
     const rotate = computed(() => {
@@ -48,20 +49,28 @@ export default defineComponent({
 
     return () => {
       const { icon, label } = props
-      const slotProps = { ...props, key, expanded: isExpanded.value } as MenuSub & { expanded: boolean }
-
       const slots = props.slots || {}
       const iconSlot = isString(slots.icon) ? menuSlots[slots.icon] : slots.icon
-      const iconNode = coverIcon(iconSlot, slotProps, icon)
       const labelSlot = isString(slots.label) ? menuSlots[slots.label] : slots.label
       const suffixSlot = isString(slots.suffix) ? menuSlots[slots.suffix] : slots.suffix
-      const suffixNode = coverIcon(suffixSlot, slotProps, suffix.value, rotate.value)
+
+      const slotProps =
+        iconSlot || labelSlot || suffixSlot
+          ? ({ ...props, key, expanded: isExpanded.value, selected: isSelected.value } as MenuSub & {
+              expanded: boolean
+              selected: boolean
+            })
+          : undefined
+
+      const iconNode = coverIcon(iconSlot, slotProps!, icon)
+      const labelNode = labelSlot ? labelSlot(slotProps!) : label
+      const suffixNode = coverIcon(suffixSlot, slotProps!, suffix.value, rotate.value)
 
       const prefixCls = `${mergedPrefixCls.value}-sub-title`
       return (
         <div class={prefixCls} style={style.value} {...events.value}>
           {iconNode && <span class={`${prefixCls}-icon`}>{iconNode}</span>}
-          <span>{labelSlot ? labelSlot(slotProps) : label}</span>
+          <span>{labelNode}</span>
           {suffixNode && <span class={`${prefixCls}-suffix`}>{suffixNode}</span>}
         </div>
       )
diff --git a/packages/components/menu/src/token.ts b/packages/components/menu/src/token.ts
index 84cb2279e..879f02521 100644
--- a/packages/components/menu/src/token.ts
+++ b/packages/components/menu/src/token.ts
@@ -31,6 +31,7 @@ export interface MenuSubContext {
   props: MenuSubProps
   key: VKey
   isExpanded: ComputedRef<boolean>
+  isSelected: ComputedRef<boolean>
   mode: ComputedRef<MenuMode>
   level: number
   paddingLeft: ComputedRef<string | undefined>
diff --git a/packages/components/menu/src/types.ts b/packages/components/menu/src/types.ts
index 88398dc21..91b561ba9 100644
--- a/packages/components/menu/src/types.ts
+++ b/packages/components/menu/src/types.ts
@@ -95,18 +95,23 @@ export type MenuSubInstance = InstanceType<DefineComponent<MenuSubProps>>
 
 export type MenuDividerComponent = FunctionalComponent<HTMLAttributes>
 
-export interface MenuItemSlots {
-  icon?: string | ((data: MenuItem) => VNodeChild)
-  label?: string | ((data: MenuItem) => VNodeChild)
-}
-export interface MenuItem extends MenuItemPublicProps {
-  type: 'item'
+export interface MenuCommon {
+  type?: 'item' | 'itemGroup' | 'sub' | 'divider'
   additional?: {
     class?: any
     style?: any
     [key: string]: unknown
   }
   key: VKey
+  slots?: unknown
+}
+
+export interface MenuItemSlots {
+  icon?: string | ((data: MenuItem & { selected: boolean }) => VNodeChild)
+  label?: string | ((data: MenuItem & { selected: boolean }) => VNodeChild)
+}
+export interface MenuItem extends MenuItemPublicProps, MenuCommon {
+  type?: 'item'
   slots?: MenuItemSlots
 }
 
@@ -114,32 +119,23 @@ export interface MenuItemGroupSlots {
   icon?: string | ((data: MenuItemGroup) => VNodeChild)
   label?: string | ((data: MenuItemGroup) => VNodeChild)
 }
-
-export interface MenuItemGroup extends MenuItemGroupPublicProps {
+export interface MenuItemGroup extends MenuItemGroupPublicProps, MenuCommon {
   type: 'itemGroup'
-  additional?: {
-    class?: any
-    style?: any
-    [key: string]: unknown
-  }
-  key: VKey
   slots?: MenuItemGroupSlots
 }
 
 export interface MenuSubSlots {
-  icon?: string | ((data: MenuSub) => VNodeChild)
-  label?: string | ((data: MenuSub) => VNodeChild)
-  suffix?: string | ((data: MenuSub) => VNodeChild)
+  icon?: string | ((data: MenuSub & { expanded: boolean; selected: boolean }) => VNodeChild)
+  label?: string | ((data: MenuSub & { expanded: boolean; selected: boolean }) => VNodeChild)
+  suffix?: string | ((data: MenuSub & { expanded: boolean; selected: boolean }) => VNodeChild)
 }
-
-export interface MenuSub extends MenuSubPublicProps {
+export interface MenuSub extends MenuSubPublicProps, MenuCommon {
   type: 'sub'
   additional?: {
     class?: any
     style?: any
     [key: string]: unknown
   }
-  key: VKey
   slots?: MenuSubSlots
 }
 

From f017559dfe35a0e30f59e496d2965c8d2e048cf5 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Mon, 10 Jan 2022 11:17:14 +0800
Subject: [PATCH 2/2] build: fix generateIcons script

---
 scripts/gulp/icons/utils.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/scripts/gulp/icons/utils.ts b/scripts/gulp/icons/utils.ts
index 807eab0cd..4e53c8aab 100644
--- a/scripts/gulp/icons/utils.ts
+++ b/scripts/gulp/icons/utils.ts
@@ -2,7 +2,7 @@ import { join } from 'path'
 
 import { copy, existsSync, readFile, readdir, writeFile } from 'fs-extra'
 import { camelCase, upperFirst } from 'lodash'
-import { OptimizeOptions, optimize } from 'svgo'
+import { OptimizeOptions, OptimizedSvg, optimize } from 'svgo'
 
 import { gulpConfig } from '../gulpConfig'
 
@@ -75,7 +75,12 @@ export async function generateIcons(): Promise<void> {
 
   const definitionPromises = iconPaths.map(async iconName => {
     const iconContent = await readFile(join(assetsDirname, iconName), 'utf8')
-    const { data } = optimize(iconContent, options)
+    const optimizeData = optimize(iconContent, options)
+    if (optimizeData.error) {
+      throw Error(optimizeData.error)
+    }
+
+    const { data } = optimizeData as OptimizedSvg
 
     await writeFile(join(assetsDirname, iconName), data, 'utf8')