@imengyu/vue3-context-menu 1.3.5 → 1.3.7

package/README.md

@@ -22,7 +22,7 @@ English | [简体中文](https://github.com/imengyu/vue3-context-menu/blob/main/
 
 [Click here View online Demo](https://imengyu.top/pages/vue3-context-menu-demo/)
 
-### Useage
+### Usage
 
 ```
 npm install -save @imengyu/vue3-context-menu

package/lib/ContextMenu.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:show" | "close")[], "update:show" | "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:show")[], "close" | "update:show", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Menu options
      */
@@ -38,8 +38,8 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
 }, {
     options: MenuOptions;
     show: boolean;

package/lib/ContextMenuDefine.d.ts

@@ -1,4 +1,4 @@
-import type { SVGAttributes, VNode } from "vue";
+import type { SVGAttributes, TransitionProps, VNode } from "vue";
 /**
  * Default config
  */
@@ -22,8 +22,13 @@ 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';
+export type MenuChildren = MenuItem[];
 export interface MenuOptions {
     /**
      * The items for this menu.
@@ -120,6 +125,12 @@ export interface MenuOptions {
      * If your element in menu item has this className, click it will ignore event.
      */
     ignoreClickClassName?: string;
+    /**
+     * Set should close menu when the user click on other places.
+     *
+     * @default true
+     */
+    clickCloseOnOutside?: boolean;
     /**
      * If your element in menu item has this className, click it will ignore event and close hole menu.
      */
@@ -130,6 +141,11 @@ export interface MenuOptions {
      * Only for css font icon, If you use the svg icon, you do not need to use this.
      */
     iconFontClass?: string;
+    /**
+     * The Vue Transition props used when menu show or hide.
+     * @default undefined
+     */
+    menuTransitionProps?: TransitionProps;
     /**
      * Should a fixed-width icon area be reserved for menu items without icon. (global)
      *
@@ -350,7 +366,7 @@ export interface MenuItem {
     /**
      * Child menu items (Valid in function mode).
      */
-    children?: MenuItem[];
+    children?: MenuChildren;
 }
 export interface ContextMenuPositionData {
     x: number;

package/lib/ContextMenuGroup.vue.d.ts

@@ -128,7 +128,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
     * Is this menu disabled?
     */

package/lib/ContextMenuIconCheck.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/ContextMenuIconRight.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/ContextMenuInstance.d.ts

@@ -11,11 +11,70 @@ declare const _default: {
     install(app: App<Element>): void;
     /**
      * 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;
+    /**
+     * Get if there is a menu open now.
+     */
+    isAnyContextMenuOpen(): boolean;
+    /**
+     * Close the currently open menu
+     */
     closeContextMenu: typeof closeContextMenu;
     transformMenuPosition: typeof transformMenuPosition;
 };

package/lib/ContextMenuItem.vue.d.ts

@@ -1,10 +1,6 @@
 import { type PropType, type SVGAttributes } from 'vue';
-import type { GlobalHasSlot, GlobalRenderSlot } from './ContextMenu.vue';
 import type { MenuItem } from './ContextMenuDefine';
-/**
- * Menu Item
- */
-declare const _default: import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     /**
      * Is this menu disabled?
      */
@@ -130,31 +126,13 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    getItemDataForChildren(): {
-        disabled: boolean;
-        label: string | Function | Record<string, any>;
-        icon: string | Function | Record<string, any>;
-        iconFontClass: string;
-        showRightArrow: boolean;
-        clickClose: boolean;
-        clickableWhenHasChildren: boolean;
-        shortcut: string;
-        theme: string;
-        isOpen: import("vue").Ref<boolean>;
-        hasChildren: import("vue").Ref<boolean>;
-        onClick: (e: MouseEvent | KeyboardEvent) => void;
-        onMouseEnter: (e?: MouseEvent) => void;
-        closeMenu: (fromItem: MenuItem | undefined) => void;
-    };
     showSubMenu: import("vue").Ref<boolean>;
     keyBoardFocusMenu: import("vue").Ref<boolean>;
-    menuItemRef: import("vue").Ref<HTMLElement | undefined>;
-    globalHasSlot: GlobalHasSlot;
-    globalRenderSlot: GlobalRenderSlot;
-    globalIconFontClass: string;
-    onMouseEnter: (e?: MouseEvent) => void;
-    onClick: (e: MouseEvent | KeyboardEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "subMenuOpen" | "subMenuClose")[], "click" | "subMenuOpen" | "subMenuClose", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+    subMenuOpen: (...args: any[]) => void;
+    subMenuClose: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Is this menu disabled?
      */
@@ -302,5 +280,18 @@ declare const _default: import("vue").DefineComponent<{
     clickHandler: (e: MouseEvent | KeyboardEvent) => void;
     showRightArrow: boolean;
     rawMenuItem: MenuItem;
-}, {}>;
+}, {}>, {
+    default?(_: {}): any;
+    icon?(_: {}): any;
+    check?(_: {}): any;
+    label?(_: {}): any;
+    shortcut?(_: {}): any;
+    rightArrow?(_: {}): any;
+    submenu?(_: {}): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/ContextMenuMutex.d.ts

@@ -1,4 +1,5 @@
 import type { ContextMenuInstance } from "./ContextMenuDefine";
+export declare function checkOpenedContextMenu(): boolean;
 export declare function addOpenedContextMenu(inst: ContextMenuInstance): void;
 export declare function removeOpenedContextMenu(inst: ContextMenuInstance): void;
 /**

package/lib/ContextMenuSeparator.vue.d.ts

@@ -2,5 +2,5 @@ import type { GlobalHasSlot, GlobalRenderSlot } from './ContextSubMenuWrapper.vu
 declare const _default: import("vue").DefineComponent<{}, {
     globalHasSlot: GlobalHasSlot;
     globalRenderSlot: GlobalRenderSlot;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/ContextMenuUtils.d.ts

@@ -1,6 +1,18 @@
 import type { VNode } from "vue";
 import type { MenuOptions } from "./ContextMenuDefine";
+/**
+ * Get absolute y position of HTMLElement
+ * @param e Element
+ * @param stopNode Specify the node for recursive termination, default to body
+ * @returns
+ */
 export declare function getTop(e: HTMLElement, stopNode?: HTMLElement): number;
+/**
+ * Get absolute x position of HTMLElement
+ * @param e Element
+ * @param stopNode Specify the node for recursive termination, default to body
+ * @returns
+ */
 export declare function getLeft(e: HTMLElement, stopNode?: HTMLElement): number;
 /**
  * If your `body` element is in a scaled state (e.g. `transform: scale(0.5)`),
@@ -34,31 +46,47 @@ export declare function genContainer(options: MenuOptions): {
     container: HTMLElement;
     isNew: boolean;
 };
+/**
+ * Number to px string
+ * @param value
+ * @returns
+ */
 export declare function solveNumberOrStringSize(value: string | number): string;
 /**
  * Render a VNode
  */
 export declare const VNodeRender: import("vue").DefineComponent<{
+    /**
+     * Can be VNode or (data: unknown) => VNode
+     */
     vnode: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: null;
+        type: null;
     };
+    /**
+     * If vnode is a callback, this data will be passed to the callback first parameter.
+     * @default null
+     */
     data: {
         type: ObjectConstructor;
         default: null;
     };
 }, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Can be VNode or (data: unknown) => VNode
+     */
     vnode: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: null;
+        type: null;
     };
+    /**
+     * If vnode is a callback, this data will be passed to the callback first parameter.
+     * @default null
+     */
     data: {
         type: ObjectConstructor;
         default: null;
     };
 }>>, {
     data: Record<string, any>;
-    vnode: Function | Record<string, any>;
 }, {}>;

package/lib/ContextSubMenu.vue.d.ts

@@ -122,7 +122,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseWhell: (e: WheelEvent) => void;
     onMouseWhellMx: (e: WheelEvent) => void;
     solveNumberOrStringSize: typeof solveNumberOrStringSize;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Items from options
      */

package/lib/ContextSubMenuWrapper.vue.d.ts

@@ -1,11 +1,13 @@
-import { type PropType, type VNode } from 'vue';
-import type { MenuOptions } from './ContextMenuDefine';
-export type GlobalHasSlot = (name: string) => boolean;
-export type GlobalRenderSlot = (name: string, params: Record<string, unknown>) => VNode;
+import { type PropType, type VNode, type Ref } from 'vue';
+import type { MenuItem, MenuOptions } from './ContextMenuDefine';
 /**
  * Context menu component
  */
-declare const _default: import("vue").DefineComponent<{
+export type GlobalHasSlot = (name: string) => boolean;
+export type GlobalRenderSlot = (name: string, params: Record<string, unknown>) => VNode;
+declare function closeMenu(fromItem?: MenuItem | undefined): void;
+declare function isClosed(): boolean;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     /**
      * Menu options
      */
@@ -17,8 +19,8 @@ declare const _default: import("vue").DefineComponent<{
      * Show menu?
      */
     show: {
-        type: BooleanConstructor;
-        default: boolean;
+        type: PropType<Ref<boolean>>;
+        default: null;
     };
     /**
      * Current container, For calculation only
@@ -34,9 +36,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:show" | "close")[], "update:show" | "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    closeMenu: typeof closeMenu;
+    isClosed: typeof isClosed;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    closeAnimFinished: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Menu options
      */
@@ -48,8 +54,8 @@ declare const _default: import("vue").DefineComponent<{
      * Show menu?
      */
     show: {
-        type: BooleanConstructor;
-        default: boolean;
+        type: PropType<Ref<boolean>>;
+        default: null;
     };
     /**
      * Current container, For calculation only
@@ -66,12 +72,19 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    onCloseAnimFinished?: ((...args: any[]) => any) | undefined;
 }, {
     options: MenuOptions;
     container: HTMLElement;
-    show: boolean;
+    show: Ref<boolean>;
     isFullScreenContainer: boolean;
-}, {}>;
+}, {}>, {
+    default?(_: {}): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/MenuBar.vue.d.ts

@@ -11,7 +11,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<MenuBarOptions>;
         default: null;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Menu options
      */

package/lib/MenuBarIconMenu.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;