Fix MenuBar that do not emit onSubMenuOpen event

Author: imengyu

.gitignore

@@ -11,6 +11,7 @@ node_modules
 # local env files
 .env.local
 .env.*.local
+.parcel-cache
 
 # Log files
 npm-debug.log*

examples/views/MenuBar.vue

@@ -43,12 +43,18 @@ const menuData : MenuBarOptions = {
             { label: "File 4...." },
             { label: "File 5...." },
           ],
+          onSubMenuOpen(itemInstance) {
+            console.log('onSubMenuOpen2', itemInstance);
+          },
         },
         { label: "Save", divided: true },
         { label: "Save as..." },
         { label: "Close" },
         { label: "Exit" },
       ],
+      onSubMenuOpen(itemInstance) {
+        console.log('onSubMenuOpen', itemInstance);
+      },
     },
     {
       label: "Edit",

library/ContextMenuDefine.ts

@@ -480,12 +480,16 @@ export interface MenuItem {
   onClick ?: (e?: MouseEvent|KeyboardEvent) => void,
   /**
    * This event emit when submenu of this item is closing.
+   * 
+   * @param itemInstance The instance of this submenu, undefined if in topmost level. 
    */
-  onSubMenuClose ?: ((itemInstance: MenuItemContext) => void) | undefined;
+  onSubMenuClose ?: ((itemInstance?: MenuItemContext) => void) | undefined;
   /**
    * This event emit when submenu of this item is showing.
+   * 
+   * @param itemInstance The instance of this submenu, undefined if in topmost level. 
    */
-  onSubMenuOpen ?: ((itemInstance: MenuItemContext) => void) | undefined;
+  onSubMenuOpen ?: ((itemInstance?: MenuItemContext) => void) | undefined;
   /**
    * A custom render callback that allows you to customize the rendering
    *  of the current item.

library/ContextSubMenu.vue

@@ -35,16 +35,16 @@
           <ContextMenuItem
             v-else
             :clickHandler="item.onClick ? (e) => item.onClick!(e) : undefined"
-            :disabled="item.disabled"
-            :hidden="item.hidden"
+            :disabled="typeof item.disabled === 'object' ? item.disabled.value : item.disabled"
+            :hidden="typeof item.hidden === 'object' ? item.hidden.value : item.hidden"
             :icon="item.icon"
             :iconFontClass="item.iconFontClass"
             :svgIcon="item.svgIcon"
             :svgProps="item.svgProps"
             :label="item.label"
             :customRender="(item.customRender as Function)"
             :customClass="item.customClass"
-            :checked="item.checked"
+            :checked="typeof item.checked === 'object' ? item.checked.value : item.checked"
             :shortcut="item.shortcut"
             :clickClose="item.clickClose"
             :clickableWhenHasChildren="item.clickableWhenHasChildren"
@@ -102,7 +102,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, nextTick, onMounted, type PropType, provide, ref, toRefs, type Ref, onBeforeUnmount } from 'vue'
+import { defineComponent, inject, nextTick, onMounted, type PropType, provide, ref, toRefs, type Ref, onBeforeUnmount, type ComputedRef } from 'vue'
 import type { MenuOptions, MenuItem, ContextMenuPositionData, MenuPopDirection, MenuItemContext, ContextSubMenuInstance } from './ContextMenuDefine'
 import type { GlobalHasSlot, GlobalRenderSlot } from './ContextMenu.vue'
 import { MenuConstOptions } from './ContextMenuDefine'

library/MenuBar.vue

@@ -48,7 +48,7 @@
 /**
  * Menu bar component
  */
-import { ref, type PropType, onMounted, watch } from 'vue';
+import { ref, nextTick, type PropType, onMounted, watch } from 'vue';
 import type { MenuBarOptions } from './MenuBar';
 import type { ContextMenuInstance, MenuItem } from './ContextMenuDefine';
 import { getTop, getLeft } from './ContextMenuUtils';
@@ -151,8 +151,13 @@ function showSubMenu(index: number, item: MenuItem) {
           menuBarActive.value = false;
           menuActive.value = null;
         }
+        if (typeof item.onSubMenuClose === 'function')
+          item.onSubMenuClose(undefined);
       },
     });
+
+    if (currentMenu && typeof item.onSubMenuOpen === 'function')
+      item.onSubMenuOpen(undefined);
   }
 }
 function showAllSubMenu() {