2023-03-01 13:03:58 +00:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu.
|
|
|
|
* Refer to documentation of the individual documentation of the with context menu support.
|
|
|
|
*
|
|
|
|
* [Live Demo](https://www.primevue.org/contextmenu/)
|
|
|
|
*
|
|
|
|
* @module contextmenu
|
|
|
|
*
|
|
|
|
*/
|
2023-08-02 14:07:22 +00:00
|
|
|
import { TransitionProps, VNode } from 'vue';
|
2023-07-06 11:17:08 +00:00
|
|
|
import { ComponentHooks } from '../basecomponent';
|
2022-09-06 12:03:37 +00:00
|
|
|
import { MenuItem } from '../menuitem';
|
2023-09-05 08:50:46 +00:00
|
|
|
import { PassThroughOptions } from '../passthrough';
|
2024-05-16 10:50:43 +00:00
|
|
|
import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2023-07-11 22:42:43 +00:00
|
|
|
export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAttributes | ((options: ContextMenuPassThroughMethodOptions) => ContextMenuPassThroughAttributes | string) | string | null | undefined;
|
2023-04-26 09:57:43 +00:00
|
|
|
|
2023-08-02 14:07:22 +00:00
|
|
|
export declare type ContextMenuPassThroughTransitionType = TransitionProps | ((options: ContextMenuPassThroughMethodOptions) => TransitionProps) | undefined;
|
|
|
|
|
2023-04-26 09:57:43 +00:00
|
|
|
/**
|
|
|
|
* Custom passthrough(pt) option method.
|
|
|
|
*/
|
|
|
|
export interface ContextMenuPassThroughMethodOptions {
|
2023-09-05 06:50:04 +00:00
|
|
|
/**
|
|
|
|
* Defines instance.
|
|
|
|
*/
|
2023-07-06 12:01:33 +00:00
|
|
|
instance: any;
|
2023-09-05 06:50:04 +00:00
|
|
|
/**
|
|
|
|
* Defines valid properties.
|
|
|
|
*/
|
2023-04-26 09:57:43 +00:00
|
|
|
props: ContextMenuProps;
|
2023-09-05 06:50:04 +00:00
|
|
|
/**
|
|
|
|
* Defines current inline state.
|
|
|
|
*/
|
2023-04-26 09:57:43 +00:00
|
|
|
state: ContextMenuState;
|
2023-09-05 06:50:04 +00:00
|
|
|
/**
|
|
|
|
* Defines current options.
|
|
|
|
*/
|
2023-04-28 10:15:44 +00:00
|
|
|
context: ContextMenuContext;
|
2023-12-10 21:41:17 +00:00
|
|
|
/**
|
|
|
|
* Defines valid attributes.
|
|
|
|
*/
|
|
|
|
attrs: any;
|
2023-12-05 11:06:32 +00:00
|
|
|
/**
|
|
|
|
* Defines parent options.
|
|
|
|
*/
|
|
|
|
parent: any;
|
2023-09-05 08:50:46 +00:00
|
|
|
/**
|
|
|
|
* Defines passthrough(pt) options in global config.
|
|
|
|
*/
|
|
|
|
global: object | undefined;
|
2023-04-26 09:57:43 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Custom passthrough(pt) options.
|
|
|
|
* @see {@link ContextMenuProps.pt}
|
|
|
|
*/
|
|
|
|
export interface ContextMenuPassThroughOptions {
|
|
|
|
/**
|
2024-05-15 09:24:26 +00:00
|
|
|
* Used to pass attributes to the root's DOM element.
|
2023-04-26 09:57:43 +00:00
|
|
|
*/
|
|
|
|
root?: ContextMenuPassThroughOptionType;
|
|
|
|
/**
|
2024-05-15 09:24:26 +00:00
|
|
|
* Used to pass attributes to the root list's DOM element.
|
2023-04-26 09:57:43 +00:00
|
|
|
*/
|
2024-04-30 11:51:44 +00:00
|
|
|
rootList?: ContextMenuPassThroughOptionType;
|
2023-04-26 09:57:43 +00:00
|
|
|
/**
|
2024-05-15 09:24:26 +00:00
|
|
|
* Used to pass attributes to the item's DOM element.
|
2023-04-26 09:57:43 +00:00
|
|
|
*/
|
2024-04-30 11:51:44 +00:00
|
|
|
item?: ContextMenuPassThroughOptionType;
|
2023-04-26 09:57:43 +00:00
|
|
|
/**
|
2024-05-15 09:24:26 +00:00
|
|
|
* Used to pass attributes to the item content's DOM element.
|
2023-04-26 09:57:43 +00:00
|
|
|
*/
|
2024-04-30 11:51:44 +00:00
|
|
|
itemContent?: ContextMenuPassThroughOptionType;
|
2023-04-26 09:57:43 +00:00
|
|
|
/**
|
2024-05-15 09:24:26 +00:00
|
|
|
* Used to pass attributes to the item link's DOM element.
|
2023-04-26 09:57:43 +00:00
|
|
|
*/
|
2024-04-30 11:51:44 +00:00
|
|
|
itemLink?: ContextMenuPassThroughOptionType;
|
2023-04-26 09:57:43 +00:00
|
|
|
/**
|
2024-05-15 09:24:26 +00:00
|
|
|
* Used to pass attributes to the item icon's DOM element.
|
2023-04-26 09:57:43 +00:00
|
|
|
*/
|
2024-04-30 11:51:44 +00:00
|
|
|
itemIcon?: ContextMenuPassThroughOptionType;
|
2023-04-26 09:57:43 +00:00
|
|
|
/**
|
2024-05-15 09:24:26 +00:00
|
|
|
* Used to pass attributes to the item label's DOM element.
|
2023-04-26 09:57:43 +00:00
|
|
|
*/
|
2024-04-30 11:51:44 +00:00
|
|
|
itemLabel?: ContextMenuPassThroughOptionType;
|
2023-04-26 09:57:43 +00:00
|
|
|
/**
|
2024-05-15 09:24:26 +00:00
|
|
|
* Used to pass attributes to the submenu icon's DOM element.
|
2023-04-26 09:57:43 +00:00
|
|
|
*/
|
2023-05-03 12:53:24 +00:00
|
|
|
submenuIcon?: ContextMenuPassThroughOptionType;
|
2023-04-26 09:57:43 +00:00
|
|
|
/**
|
2024-05-15 09:24:26 +00:00
|
|
|
* Used to pass attributes to the separator's DOM element.
|
2023-04-26 09:57:43 +00:00
|
|
|
*/
|
|
|
|
separator?: ContextMenuPassThroughOptionType;
|
2023-05-31 10:47:57 +00:00
|
|
|
/**
|
2024-05-15 09:24:26 +00:00
|
|
|
* Used to pass attributes to the submenu's DOM element.
|
2023-05-31 10:47:57 +00:00
|
|
|
*/
|
|
|
|
submenu?: ContextMenuPassThroughOptionType;
|
2023-07-06 11:09:01 +00:00
|
|
|
/**
|
2023-11-07 06:16:39 +00:00
|
|
|
* Used to manage all lifecycle hooks.
|
2023-07-06 11:09:01 +00:00
|
|
|
* @see {@link BaseComponent.ComponentHooks}
|
|
|
|
*/
|
|
|
|
hooks?: ComponentHooks;
|
2023-08-02 12:00:28 +00:00
|
|
|
/**
|
|
|
|
* Used to control Vue Transition API.
|
|
|
|
*/
|
2023-08-02 14:07:22 +00:00
|
|
|
transition?: ContextMenuPassThroughTransitionType;
|
2023-04-26 09:57:43 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Custom passthrough attributes for each DOM elements
|
|
|
|
*/
|
|
|
|
export interface ContextMenuPassThroughAttributes {
|
|
|
|
[key: string]: any;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Defines focused item info
|
|
|
|
*/
|
|
|
|
export interface ContextMenuFocusedItemInfo {
|
|
|
|
/**
|
|
|
|
* Active item index
|
|
|
|
*/
|
|
|
|
index: number;
|
|
|
|
/**
|
|
|
|
* Active item level
|
|
|
|
*/
|
|
|
|
level: number;
|
|
|
|
/**
|
|
|
|
* Parent key info
|
|
|
|
*/
|
|
|
|
parentKey: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Defines current inline state in ContextMenu component.
|
|
|
|
*/
|
|
|
|
export interface ContextMenuState {
|
|
|
|
/**
|
|
|
|
* Current id state as a string.
|
|
|
|
*/
|
|
|
|
id: string;
|
|
|
|
/**
|
|
|
|
* Current focus state as a boolean.
|
|
|
|
* @defaultValue false
|
|
|
|
*/
|
|
|
|
focused: boolean;
|
|
|
|
/**
|
|
|
|
* Current focused item info.
|
|
|
|
* @type {ContextMenuFocusedItemInfo}
|
|
|
|
*/
|
|
|
|
focusedItemInfo: ContextMenuFocusedItemInfo;
|
|
|
|
/**
|
|
|
|
* Active item path.
|
|
|
|
* @type {ContextMenuFocusedItemInfo}
|
|
|
|
*/
|
|
|
|
activeItemPath: ContextMenuFocusedItemInfo[];
|
|
|
|
/**
|
|
|
|
* Current visible state as a boolean.
|
|
|
|
* @defaultValue false
|
|
|
|
*/
|
|
|
|
visible: boolean;
|
|
|
|
/**
|
|
|
|
* Current submenu visible state as a boolean.
|
|
|
|
* @defaultValue false
|
|
|
|
*/
|
|
|
|
submenuVisible: boolean;
|
|
|
|
}
|
|
|
|
|
2023-04-27 14:16:09 +00:00
|
|
|
/**
|
|
|
|
* Defines current options in ContextMenu component.
|
|
|
|
*/
|
2023-04-28 10:15:44 +00:00
|
|
|
export interface ContextMenuContext {
|
2023-07-24 14:23:12 +00:00
|
|
|
/**
|
|
|
|
* Current menuitem
|
|
|
|
*/
|
|
|
|
item: any;
|
|
|
|
/**
|
|
|
|
* Index of the menuitem
|
|
|
|
*/
|
|
|
|
index: number;
|
2023-04-27 14:16:09 +00:00
|
|
|
/**
|
|
|
|
* Current active state of menuitem as a boolean.
|
|
|
|
* @defaultValue false
|
|
|
|
*/
|
|
|
|
active: boolean;
|
|
|
|
/**
|
|
|
|
* Current focused state of menuitem as a boolean.
|
|
|
|
* @defaultValue false
|
|
|
|
*/
|
|
|
|
focused: boolean;
|
2023-10-17 10:06:59 +00:00
|
|
|
/**
|
|
|
|
* Current disabled state of menuitem as a boolean.
|
|
|
|
* @defaultValue false
|
|
|
|
*/
|
|
|
|
disabled: boolean;
|
2023-04-27 14:16:09 +00:00
|
|
|
}
|
|
|
|
|
2023-09-04 09:16:03 +00:00
|
|
|
/**
|
|
|
|
* Defines valid router binding props in ContextMenu component.
|
|
|
|
*/
|
|
|
|
export interface ContextMenuRouterBindProps {
|
|
|
|
/**
|
|
|
|
* Action element binding
|
|
|
|
*/
|
|
|
|
action: object;
|
|
|
|
/**
|
|
|
|
* Icon element binding
|
|
|
|
*/
|
|
|
|
icon: object;
|
|
|
|
/**
|
|
|
|
* Label element binding
|
|
|
|
*/
|
|
|
|
label: object;
|
|
|
|
/**
|
|
|
|
* Submenuicon elemnt binding
|
|
|
|
*/
|
|
|
|
submenuicon: object;
|
|
|
|
}
|
|
|
|
|
2023-03-01 13:03:58 +00:00
|
|
|
/**
|
|
|
|
* Defines valid properties in ContextMenu component.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface ContextMenuProps {
|
|
|
|
/**
|
|
|
|
* An array of menuitems.
|
|
|
|
*/
|
|
|
|
model?: MenuItem[] | undefined;
|
|
|
|
/**
|
|
|
|
* A valid query selector or an HTMLElement to specify where the overlay gets attached.
|
2023-03-08 10:51:52 +00:00
|
|
|
* @defaultValue body
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
2024-02-23 08:38:50 +00:00
|
|
|
appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Whether to automatically manage layering.
|
2023-03-01 13:03:58 +00:00
|
|
|
* @defaultValue true
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
autoZIndex?: boolean | undefined;
|
|
|
|
/**
|
|
|
|
* Base zIndex value to use in layering.
|
2023-03-01 13:03:58 +00:00
|
|
|
* @defaultValue 0
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
baseZIndex?: number | undefined;
|
|
|
|
/**
|
|
|
|
* Attaches the menu to document instead of a particular item.
|
2023-03-01 13:03:58 +00:00
|
|
|
* @defaultValue false
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
global?: boolean | undefined;
|
2022-12-08 11:04:25 +00:00
|
|
|
/**
|
|
|
|
* Index of the element in tabbing order.
|
|
|
|
*/
|
|
|
|
tabindex?: number | string | undefined;
|
|
|
|
/**
|
|
|
|
* Defines a string value that labels an interactive element.
|
|
|
|
*/
|
2023-11-24 12:21:54 +00:00
|
|
|
ariaLabel?: string | undefined;
|
2022-12-08 11:04:25 +00:00
|
|
|
/**
|
|
|
|
* Identifier of the underlying menu element.
|
|
|
|
*/
|
2023-11-24 12:21:54 +00:00
|
|
|
ariaLabelledby?: string | undefined;
|
2024-04-02 08:24:31 +00:00
|
|
|
/**
|
|
|
|
* It generates scoped CSS variables using design tokens for the component.
|
|
|
|
*/
|
|
|
|
dt?: DesignToken<any>;
|
2023-04-26 09:57:43 +00:00
|
|
|
/**
|
2023-08-01 14:01:12 +00:00
|
|
|
* Used to pass attributes to DOM elements inside the component.
|
2023-04-26 09:57:43 +00:00
|
|
|
* @type {ContextMenuPassThroughOptions}
|
|
|
|
*/
|
2023-09-05 11:28:04 +00:00
|
|
|
pt?: PassThrough<ContextMenuPassThroughOptions>;
|
2023-09-05 08:50:46 +00:00
|
|
|
/**
|
|
|
|
* Used to configure passthrough(pt) options of the component.
|
|
|
|
* @type {PassThroughOptions}
|
|
|
|
*/
|
|
|
|
ptOptions?: PassThroughOptions;
|
2023-05-29 11:12:29 +00:00
|
|
|
/**
|
|
|
|
* When enabled, it removes component related styles in the core.
|
|
|
|
* @defaultValue false
|
|
|
|
*/
|
|
|
|
unstyled?: boolean;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
2023-03-01 13:03:58 +00:00
|
|
|
/**
|
|
|
|
* Defines valid slots in ContextMenu component.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface ContextMenuSlots {
|
|
|
|
/**
|
|
|
|
* Custom item template.
|
|
|
|
* @param {Object} scope - item slot's params.
|
|
|
|
*/
|
2023-03-01 13:03:58 +00:00
|
|
|
item(scope: {
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Menuitem instance
|
|
|
|
*/
|
|
|
|
item: MenuItem;
|
2023-08-30 13:28:00 +00:00
|
|
|
/**
|
|
|
|
* Label property of the menuitem
|
|
|
|
*/
|
|
|
|
label: string | ((...args: any) => string) | undefined;
|
2023-11-07 06:40:48 +00:00
|
|
|
/**
|
|
|
|
* Whether or not there is a submenu
|
|
|
|
*/
|
|
|
|
hasSubmenu: boolean;
|
2023-08-30 13:28:00 +00:00
|
|
|
/**
|
|
|
|
* Binding properties of the menuitem
|
|
|
|
*/
|
2023-09-04 09:16:03 +00:00
|
|
|
props: ContextMenuRouterBindProps;
|
2023-03-01 13:03:58 +00:00
|
|
|
}): VNode[];
|
2023-04-17 05:59:08 +00:00
|
|
|
/**
|
|
|
|
* Custom item icon template.
|
|
|
|
* @param {Object} scope - item icon slot's params.
|
|
|
|
*/
|
|
|
|
itemicon(scope: {
|
|
|
|
/**
|
|
|
|
* Menuitem instance
|
|
|
|
*/
|
|
|
|
item: MenuItem;
|
|
|
|
/**
|
|
|
|
* Style class of the item icon element.
|
|
|
|
*/
|
|
|
|
class: any;
|
|
|
|
}): VNode[];
|
2023-04-05 11:56:05 +00:00
|
|
|
/**
|
|
|
|
* Custom submenu icon template.
|
2023-08-17 07:16:25 +00:00
|
|
|
* @param {Object} scope - submenuicon slot's params.
|
2023-04-05 11:56:05 +00:00
|
|
|
*/
|
|
|
|
submenuicon(scope: {
|
|
|
|
/**
|
|
|
|
* Whether item is active
|
|
|
|
*/
|
|
|
|
active: boolean;
|
|
|
|
}): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
2023-03-01 13:03:58 +00:00
|
|
|
/**
|
|
|
|
* Defines valid emits in ContextMenu component.
|
|
|
|
*/
|
2024-05-16 14:05:43 +00:00
|
|
|
export interface ContextMenuEmitsOptions {
|
2022-12-08 11:04:25 +00:00
|
|
|
/**
|
|
|
|
* Callback to invoke when the component receives focus.
|
|
|
|
* @param {Event} event - Browser event.
|
|
|
|
*/
|
2023-03-01 13:03:58 +00:00
|
|
|
focus(event: Event): void;
|
2022-12-08 11:04:25 +00:00
|
|
|
/**
|
|
|
|
* Callback to invoke when the component loses focus.
|
|
|
|
* @param {Event} event - Browser event.
|
|
|
|
*/
|
2023-03-01 13:03:58 +00:00
|
|
|
blur(event: Event): void;
|
2022-12-08 11:04:25 +00:00
|
|
|
/**
|
|
|
|
* Callback to invoke before the popup is shown.
|
|
|
|
*/
|
2023-03-01 13:03:58 +00:00
|
|
|
'before-show'(): void;
|
2022-12-08 11:04:25 +00:00
|
|
|
/**
|
|
|
|
* Callback to invoke before the popup is hidden.
|
|
|
|
*/
|
2023-03-01 13:03:58 +00:00
|
|
|
'before-hide'(): void;
|
2022-12-08 11:04:25 +00:00
|
|
|
/**
|
|
|
|
* Callback to invoke when the popup is shown.
|
|
|
|
*/
|
2023-03-01 13:03:58 +00:00
|
|
|
show(): void;
|
2022-12-08 11:04:25 +00:00
|
|
|
/**
|
|
|
|
* Callback to invoke when the popup is hidden.
|
|
|
|
*/
|
2023-03-01 13:03:58 +00:00
|
|
|
hide(): void;
|
|
|
|
}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2024-05-16 10:50:43 +00:00
|
|
|
export declare type ContextMenuEmits = EmitFn<ContextMenuEmitsOptions>;
|
|
|
|
|
|
|
|
export interface ContextMenuMethods {
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Toggles the visibility of the menu.
|
|
|
|
* @param {Event} event - Browser event.
|
|
|
|
*
|
|
|
|
* @memberof ContextMenu
|
|
|
|
*/
|
2023-03-01 13:03:58 +00:00
|
|
|
toggle(event: Event): void;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Shows the menu.
|
|
|
|
* @param {Event} event - Browser event.
|
|
|
|
*
|
|
|
|
* @memberof ContextMenu
|
|
|
|
*/
|
2023-03-01 13:03:58 +00:00
|
|
|
show(event: Event): void;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Hides the menu.
|
|
|
|
*
|
|
|
|
* @memberof ContextMenu
|
|
|
|
*/
|
2023-03-01 13:03:58 +00:00
|
|
|
hide(): void;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
2024-05-16 10:50:43 +00:00
|
|
|
/**
|
|
|
|
* **PrimeVue - ContextMenu**
|
|
|
|
*
|
|
|
|
* _ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu.
|
|
|
|
* Refer to documentation of the individual documentation of the with context menu support._
|
|
|
|
*
|
|
|
|
* [Live Demo](https://www.primevue.org/contextmenu/)
|
|
|
|
* --- ---
|
|
|
|
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
|
|
|
|
*
|
|
|
|
* @group Component
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
declare const ContextMenu: DefineComponent<ContextMenuProps, ContextMenuSlots, ContextMenuEmits, ContextMenuMethods>;
|
|
|
|
|
2024-03-14 22:58:11 +00:00
|
|
|
declare module 'vue' {
|
|
|
|
export interface GlobalComponents {
|
2024-05-16 10:50:43 +00:00
|
|
|
ContextMenu: GlobalComponentConstructor<ContextMenuProps, ContextMenuSlots, ContextMenuEmits, ContextMenuMethods>;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ContextMenu;
|