@imengyu/vue3-context-menu 1.3.5 → 1.3.6

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, ("update:show" | "close")[], "update:show" | "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Menu options
      */

package/lib/ContextMenuDefine.d.ts

@@ -22,6 +22,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';
 export interface MenuOptions {
@@ -120,6 +124,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.
      */

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(): void;
+    /**
+     * Close the currently open menu
+     */
     closeContextMenu: typeof closeContextMenu;
     transformMenuPosition: typeof transformMenuPosition;
 };

package/lib/ContextMenuItem.vue.d.ts

@@ -154,7 +154,7 @@ declare const _default: import("vue").DefineComponent<{
     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" | "subMenuOpen" | "subMenuClose")[], "click" | "subMenuOpen" | "subMenuClose", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Is this menu disabled?
      */

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

@@ -36,7 +36,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, ("update:show" | "close")[], "update:show" | "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Menu options
      */

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;