419 lines
11 KiB
TypeScript
419 lines
11 KiB
TypeScript
/**
|
|
*
|
|
* When pressed, a floating action button can display multiple primary actions that can be performed on a page.
|
|
*
|
|
* [Live Demo](https://www.primevue.org/speeddial/)
|
|
*
|
|
* @module speeddial
|
|
*
|
|
*/
|
|
import { VNode } from 'vue';
|
|
import { ComponentHooks } from '../basecomponent';
|
|
import { ButtonPassThroughOptions, ButtonProps } from '../button';
|
|
import { MenuItem } from '../menuitem';
|
|
import { PassThroughOptions } from '../passthrough';
|
|
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
|
|
|
|
export declare type SpeedDialPassThroughOptionType = SpeedDialPassThroughAttributes | ((options: SpeedDialPassThroughMethodOptions) => SpeedDialPassThroughAttributes | string) | string | null | undefined;
|
|
|
|
/**
|
|
* Custom passthrough(pt) option method.
|
|
*/
|
|
export interface SpeedDialPassThroughMethodOptions {
|
|
/**
|
|
* Defines instance.
|
|
*/
|
|
instance: any;
|
|
/**
|
|
* Defines valid properties.
|
|
*/
|
|
props: SpeedDialProps;
|
|
/**
|
|
* Defines current inline state.
|
|
*/
|
|
state: SpeedDialState;
|
|
/**
|
|
* Defines current options.
|
|
*/
|
|
context: SpeedDialContext;
|
|
/**
|
|
* Defines valid attributes.
|
|
*/
|
|
attrs: any;
|
|
/**
|
|
* Defines parent options.
|
|
*/
|
|
parent: any;
|
|
/**
|
|
* Defines passthrough(pt) options in global config.
|
|
*/
|
|
global: object | undefined;
|
|
}
|
|
|
|
/**
|
|
* Custom shared passthrough(pt) option method.
|
|
*/
|
|
export interface SpeedDialSharedPassThroughMethodOptions {
|
|
/**
|
|
* Defines valid properties.
|
|
*/
|
|
props: SpeedDialProps;
|
|
/**
|
|
* Defines current inline state.
|
|
*/
|
|
state: SpeedDialState;
|
|
}
|
|
|
|
/**
|
|
* Custom passthrough(pt) options.
|
|
* @see {@link SpeedDialProps.pt}
|
|
*/
|
|
export interface SpeedDialPassThroughOptions {
|
|
/**
|
|
* Used to pass attributes to the root's DOM element.
|
|
*/
|
|
root?: SpeedDialPassThroughOptionType;
|
|
/**
|
|
* Used to pass attributes to the Button component.
|
|
* @see {@link ButtonPassThroughOptions}
|
|
*/
|
|
button?: ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>;
|
|
/**
|
|
* Used to pass attributes to the menu's DOM element.
|
|
*/
|
|
menu?: SpeedDialPassThroughOptionType;
|
|
/**
|
|
* Used to pass attributes to the menu item's DOM element.
|
|
*/
|
|
menuitem?: SpeedDialPassThroughOptionType;
|
|
/**
|
|
* Used to pass attributes to the action's Button component.
|
|
* @see {@link ButtonPassThroughOptions}
|
|
*/
|
|
action?: ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>;
|
|
/**
|
|
* Used to pass attributes to the action icon's DOM element.
|
|
*/
|
|
actionIcon?: SpeedDialPassThroughOptionType;
|
|
/**
|
|
* Used to pass attributes to the mask's DOM element.
|
|
*/
|
|
mask?: SpeedDialPassThroughOptionType;
|
|
/**
|
|
* Used to manage all lifecycle hooks.
|
|
* @see {@link BaseComponent.ComponentHooks}
|
|
*/
|
|
hooks?: ComponentHooks;
|
|
}
|
|
|
|
/**
|
|
* Custom passthrough attributes for each DOM elements
|
|
*/
|
|
export interface SpeedDialPassThroughAttributes {
|
|
[key: string]: any;
|
|
}
|
|
|
|
/**
|
|
* Defines current inline state in SpeedDial component.
|
|
*/
|
|
export interface SpeedDialState {
|
|
/**
|
|
* List of items' id.
|
|
*/
|
|
id: string;
|
|
/**
|
|
* Current visible state as a boolean.
|
|
* @defaultValue false
|
|
*/
|
|
visible: boolean;
|
|
/**
|
|
* Current click state of component as a boolean.
|
|
* @defaultValue false
|
|
*/
|
|
isItemClicked: boolean;
|
|
/**
|
|
* Current focus state as a boolean.
|
|
* @defaultValue false
|
|
*/
|
|
focused: boolean;
|
|
/**
|
|
* Current focused option index as a number.
|
|
* @defaultValue -1
|
|
*/
|
|
focusedOptionIndex: number;
|
|
}
|
|
|
|
/**
|
|
* Defines current options in SpeedDial component.
|
|
*/
|
|
export interface SpeedDialContext {
|
|
/**
|
|
* Current active state of menuitem as a boolean.
|
|
* @defaultValue false
|
|
*/
|
|
active: boolean;
|
|
/**
|
|
* Current hidden state of menuitem as a boolean.
|
|
* @defaultValue false
|
|
*/
|
|
hidden: boolean;
|
|
}
|
|
|
|
/**
|
|
* Defines tooltip options.
|
|
* @see {@link SpeedDialProps.tooltipOptions}
|
|
*/
|
|
export interface SpeedDialTooltipOptions {
|
|
/**
|
|
* Event to show the tooltip, valid values are hover and focus.
|
|
*/
|
|
event: 'hover' | 'focus' | undefined;
|
|
/**
|
|
* Position of element.
|
|
* @defaultValue bottom
|
|
*/
|
|
position: 'bottom' | 'top' | 'left' | 'right' | undefined;
|
|
/**
|
|
* Optional options.
|
|
*/
|
|
[key: string]: any;
|
|
}
|
|
|
|
/**
|
|
* Defines valid properties in SpeedDial component.
|
|
*/
|
|
export interface SpeedDialProps {
|
|
/**
|
|
* MenuModel instance to define the action items.
|
|
*/
|
|
model?: MenuItem[] | undefined;
|
|
/**
|
|
* Specifies the visibility of the overlay.
|
|
* @defaultValue false
|
|
*/
|
|
visible?: boolean | undefined;
|
|
/**
|
|
* Specifies the opening direction of actions.
|
|
* @defaultValue up
|
|
*/
|
|
direction?: 'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right' | undefined;
|
|
/**
|
|
* Transition delay step for each action item.
|
|
* @defaultValue 30
|
|
*/
|
|
transitionDelay?: number | undefined;
|
|
/**
|
|
* Specifies the opening type of actions.
|
|
* @defaultValue linear
|
|
*/
|
|
type?: 'linear' | 'circle' | 'semi-circle' | 'quarter-circle' | undefined;
|
|
/**
|
|
* Radius for *circle types.
|
|
* @defaultValue 0
|
|
*/
|
|
radius?: number | undefined;
|
|
/**
|
|
* Whether to show a mask element behind the speeddial.
|
|
* @defaultValue false
|
|
*/
|
|
mask?: boolean | undefined;
|
|
/**
|
|
* Whether the component is disabled.
|
|
* @defaultValue false
|
|
*/
|
|
disabled?: boolean | undefined;
|
|
/**
|
|
* Whether the actions close when clicked outside.
|
|
* @defaultValue true
|
|
*/
|
|
hideOnClickOutside?: boolean | undefined;
|
|
/**
|
|
* Style class of the button element.
|
|
*/
|
|
buttonClass?: any;
|
|
/**
|
|
* Inline style of the mask element.
|
|
*/
|
|
maskStyle?: any;
|
|
/**
|
|
* Style class of the mask element.
|
|
*/
|
|
maskClass?: string | undefined;
|
|
/**
|
|
* Show icon of the button element.
|
|
* @deprecated since v3.27.0. Use 'showicon' slot.
|
|
*/
|
|
showIcon?: string | undefined;
|
|
/**
|
|
* Hide icon of the button element.
|
|
* @deprecated since v3.27.0. Use 'hideicon' slot.
|
|
*/
|
|
hideIcon?: string | undefined;
|
|
/**
|
|
* Defined to rotate showIcon when hideIcon is not present.
|
|
* @defaultValue true
|
|
*/
|
|
rotateAnimation?: boolean | undefined;
|
|
/**
|
|
* Style class of the element.
|
|
*/
|
|
class?: any;
|
|
/**
|
|
* Inline style of the element.
|
|
*/
|
|
style?: any;
|
|
/**
|
|
* Whether to display the tooltip on items. The modifiers of Tooltip can be used like an object in it. Valid keys are 'event' and 'position'.
|
|
* @type {SpeedDialTooltipOptions}
|
|
*/
|
|
tooltipOptions?: SpeedDialTooltipOptions;
|
|
/**
|
|
* Used to pass all properties of the ButtonProps to the button component.
|
|
* @type {ButtonProps}
|
|
* @defaultValue { rounded: true }
|
|
*/
|
|
buttonProps?: object | undefined;
|
|
/**
|
|
* Used to pass all properties of the ButtonProps to the item component.
|
|
* @type {ButtonProps}
|
|
* @defaultValue { severity: 'secondary', text: true, rounded: true, size: 'small' }
|
|
*/
|
|
actionButtonProps?: object | undefined;
|
|
/**
|
|
* Defines a string value that labels an interactive list element.
|
|
*/
|
|
ariaLabel?: string | undefined;
|
|
/**
|
|
* Identifier of the underlying list element.
|
|
*/
|
|
ariaLabelledby?: string | undefined;
|
|
/**
|
|
* It generates scoped CSS variables using design tokens for the component.
|
|
*/
|
|
dt?: DesignToken<any>;
|
|
/**
|
|
* Used to pass attributes to DOM elements inside the component.
|
|
* @type {SpeedDialPassThroughOptions}
|
|
*/
|
|
pt?: PassThrough<SpeedDialPassThroughOptions>;
|
|
/**
|
|
* Used to configure passthrough(pt) options of the component.
|
|
* @type {PassThroughOptions}
|
|
*/
|
|
ptOptions?: PassThroughOptions;
|
|
/**
|
|
* When enabled, it removes component related styles in the core.
|
|
* @defaultValue false
|
|
*/
|
|
unstyled?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Defines valid slots in SpeedDial component.
|
|
*/
|
|
export interface SpeedDialSlots {
|
|
/**
|
|
* Custom content for each item.
|
|
* @param {Object} scope - item slot's params.
|
|
*/
|
|
item(scope: {
|
|
/**
|
|
* Menuitem instance
|
|
* @type {MenuItem}
|
|
*/
|
|
item: MenuItem;
|
|
/**
|
|
* Item click function
|
|
* @param {Event} event - Browser event.
|
|
*/
|
|
onClick: (event: Event) => void;
|
|
/**
|
|
* Button click function
|
|
* @param {Event} event - Browser event.
|
|
*/
|
|
toggleCallback: (event: Event) => void;
|
|
}): VNode[];
|
|
/**
|
|
* Custom button template.
|
|
* @param {Object} scope - button slot's params.
|
|
*/
|
|
button(scope: {
|
|
/**
|
|
* Visible state of the item
|
|
*/
|
|
visible: boolean;
|
|
/**
|
|
* Button click function
|
|
* @param {Event} event - Browser event.
|
|
* @deprecated since v3.39.0. Use 'toggleCallback' property instead.
|
|
*/
|
|
onClick: (event: Event) => void;
|
|
/**
|
|
* Button click function
|
|
* @param {Event} event - Browser event.
|
|
*/
|
|
toggleCallback: (event: Event) => void;
|
|
}): VNode[];
|
|
/**
|
|
* Custom icon template.
|
|
* @param {Object} scope - icon slot's params.
|
|
*/
|
|
icon(scope: {
|
|
/**
|
|
* Visible state of the item
|
|
*/
|
|
visible: boolean;
|
|
}): VNode[];
|
|
}
|
|
|
|
/**
|
|
* Defines valid emits in SpeedDial component.
|
|
*/
|
|
export interface SpeedDialEmits {
|
|
/**
|
|
* Fired when the button element clicked.
|
|
* @param {Event} event - Browser event.
|
|
*/
|
|
click(event: Event): void;
|
|
/**
|
|
* Fired when the actions are visible.
|
|
*/
|
|
show(): void;
|
|
/**
|
|
* Fired when the actions are hidden.
|
|
*/
|
|
hide(): void;
|
|
/**
|
|
* Callback to invoke when the component receives focus.
|
|
* @param {Event} event - Browser event.
|
|
*/
|
|
focus(event: Event): void;
|
|
/**
|
|
* Callback to invoke when the component loses focus.
|
|
* @param {Event} event - Browser event.
|
|
*/
|
|
blur(event: Event): void;
|
|
}
|
|
|
|
/**
|
|
* **PrimeVue - SpeedDial**
|
|
*
|
|
* _When pressed, a floating action button can display multiple primary actions that can be performed on a page._
|
|
*
|
|
* [Live Demo](https://www.primevue.org/speeddial/)
|
|
* --- ---
|
|
* 
|
|
*
|
|
* @group Component
|
|
*
|
|
*/
|
|
declare class SpeedDial extends ClassComponent<SpeedDialProps, SpeedDialSlots, SpeedDialEmits> {}
|
|
|
|
declare module 'vue' {
|
|
export interface GlobalComponents {
|
|
SpeedDial: GlobalComponentConstructor<SpeedDial>;
|
|
}
|
|
}
|
|
|
|
export default SpeedDial;
|