Add isClosed instance function to check if the menu is currently closed. (#77)

Author: imengyu

library/ContextMenu.vue

@@ -39,6 +39,7 @@ export default defineComponent({
 
  ctx.expose({
  closeMenu: () => ctx.emit('update:show', false),
+ isClosed: () => !show.value,
  });
 
  return () => { 

library/ContextMenuDefine.ts

@@ -24,6 +24,10 @@ export interface ContextMenuInstance {
  * @param fromItem The last clicked menu item, will pass to `MenuOptions.onClose` callback, if user does not click any item, can be `undefined`.
  */
  closeMenu(fromItem?: MenuItem|undefined): void;
+ /**
+ * Check if the menu is currently closed.
+ */
+ isClosed(): boolean;
 }
 
 export type MenuPopDirection = 'br'|'b'|'bl'|'tr'|'t'|'tl'|'l'|'r';

library/ContextMenuInstance.ts

@@ -54,14 +54,74 @@ export default {
  },
  /**
  * Show a ContextMenu in page, same as `this.$contextmenu`
+ * 
+ * For example:
+ * 
+ * ```ts
+ * onContextMenu(e : MouseEvent) {
+ * //prevent the browser's default menu
+ * e.preventDefault();
+ * //show your menu
+ * ContextMenu.showContextMenu({
+ * x: e.x,
+ * y: e.y,
+ * items: [
+ * { 
+ * label: "A menu item", 
+ * onClick: () => {
+ * alert("You click a menu item");
+ * }
+ * },
+ * { 
+ * label: "A submenu", 
+ * children: [
+ * { label: "Item1" },
+ * { label: "Item2" },
+ * { label: "Item3" },
+ * ]
+ * },
+ * ]
+ * }); 
+ * }
+ * ```
+ * 
+ * You can pass customSlots to custom rendering this menu.
+ * 
+ * For example, custom rendering #itemRender and #separatorRender:
+ * ```ts
+ * ContextMenu.showContextMenu({
+ * ...
+ * } as MenuOptions, {
+ * //Use slot in function mode
+ * itemRender: ({ disabled, label, icon, showRightArrow, onClick, onMouseEnter }) => [ h('div', { 
+ * class: 'my-menu-item'+(disabled?' disabled':''),
+ * onMouseenter: onMouseEnter,
+ * onClick: onClick,
+ * }, [
+ * icon ? h('img', { src: icon }) : h('div', { class: 'icon-place-holder' }),
+ * h('span', label),
+ * showRightArrow ? h('span', { class: 'right-arraw' }, '>>') : h('div'),
+ * ]) ],
+ * separatorRender: () => [ h('div', { class: 'my-menu-sperator' }) ]
+ * })
+ * ```
+ * 
  * @param options The options of ContextMenu
  * @param customSlots You can provide some custom slots to customize the rendering style of the menu. These slots are the same as the slots of component ContextMenu.
  * @returns Menu instance 
  */
  showContextMenu(options : MenuOptions, customSlots?: Record<string, Slot>) : ContextMenuInstance {
  return $contextmenu(options, customSlots);
  },
- //Close the currently open menu
+ /**
+ * Get if there is a menu open now.
+ */
+ isAnyContextMenuOpen() {
+
+ },
+ /**
+ * Close the currently open menu
+ */
  closeContextMenu,
  //Tools
  transformMenuPosition,

library/ContextSubMenuWrapper.vue

@@ -67,7 +67,11 @@ export default defineComponent({
  }
  });
 
- const instance = { closeMenu };
+ const instance = { 
+ closeMenu,
+ isClosed,
+ };
+ let closed = false;
  
  function openMenu() {
  installBodyEvents();
@@ -77,12 +81,17 @@ export default defineComponent({
  ctx.emit("update:show", false);
  ctx.emit("close", fromItem);
  
+ closed = true;
  removeOpenedContextMenu(instance);
  }
+ function isClosed() {
+ return closed;
+ }
 
  //Expose instance function
  ctx.expose({
  closeMenu: closeMenu,
+ isClosed: isClosed,
  });
 
  function installBodyEvents() {