ContextMenuInstance.ts

import { h, ref, render } from "vue";
import type { App, Slot } from "vue";
import type { ContextMenuInstance } from "./ContextMenuDefine";
import type { MenuOptions } from "./ContextMenuDefine";
import { checkOpenedContextMenu, closeContextMenu } from "./ContextMenuMutex";
import { genContainer, transformMenuPosition } from "./ContextMenuUtils";
import ContextMenuConstructor from './ContextMenu.vue'
import ContextSubMenuWrapperConstructor from './ContextSubMenuWrapper.vue'
import ContextSubMenuConstructor from './ContextSubMenu.vue'
import ContextMenuItemConstructor from './ContextMenuItem.vue'
import ContextMenuGroupConstructor from './ContextMenuGroup.vue'
import ContextMenuSeparatorConstructor from './ContextMenuSeparator.vue'

function initInstance(
  options: MenuOptions, 
  container: HTMLElement, 
  isNew: boolean, 
  customSlots?: Record<string, Slot>,
) {
  const show = ref(true);
  const vnode = h(ContextSubMenuWrapperConstructor, { 
    options: options,
    show: show,
    container: container,
    isFullScreenContainer: !isNew,
    onCloseAnimFinished: () => {
      render(null, container);
    },
    onClose: (item: undefined) => {
      options.onClose?.(item);
      show.value = false;
    },
  }, customSlots);
  render(vnode, container);
  return vnode.component;
}

//Show global contextmenu
function $contextmenu(options : MenuOptions, customSlots?: Record<string, Slot>) {
  const container = genContainer(options);
  const component = initInstance(options, container.container, container.isNew, customSlots);
  return (component as unknown as Record<string, unknown>).exposed as ContextMenuInstance;
}

export default {
  /**
   * For Vue install
   * @param app 
   */
  install(app: App<Element>) : void {
    app.config.globalProperties.$contextmenu = $contextmenu;
    app.component('ContextMenu', ContextMenuConstructor);
    app.component('ContextMenuItem', ContextMenuItemConstructor);
    app.component('ContextMenuGroup', ContextMenuGroupConstructor);
    app.component('ContextMenuSperator', ContextMenuSeparatorConstructor);
    app.component('ContextMenuSeparator', ContextMenuSeparatorConstructor);
    app.component('ContextSubMenu', ContextSubMenuConstructor);
  },
  /**
   * 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);
  },
  /**
   * Get if there is a menu open now.
   */
  isAnyContextMenuOpen() {
    return checkOpenedContextMenu();
  },
  /**
   * Close the currently open menu
   */
  closeContextMenu,
  //Tools
  transformMenuPosition,
}