/** * * Panel is a container with the optional content toggle feature. * * [Live Demo](https://www.primevue.org/panel/) * * @module panel * */ import { ButtonHTMLAttributes, VNode } from 'vue'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; export declare type PanelPassThroughOptionType = PanelPassThroughAttributes | ((options: { props: PanelProps; state: PanelState }) => PanelPassThroughAttributes) | null | undefined; /** * Custom toggle event. * @see {@link PanelEmits.toggle} */ export interface PanelToggleEvent { /** * Browser event. */ originalEvent: Event; /** * Collapsed state as a boolean */ value: boolean; } /** * Custom passthrough(pt) options. * @see {@link PanelProps.pt} */ export interface PanelPassThroughOptions { /** * Uses to pass attributes to the root's DOM element. */ root?: PanelPassThroughOptionType; /** * Uses to pass attributes to the header's DOM element. */ header?: PanelPassThroughOptionType; /** * Uses to pass attributes to the title's DOM element. */ title?: PanelPassThroughOptionType; /** * Uses to pass attributes to the title's DOM element. */ icons?: PanelPassThroughOptionType; /** * Uses to pass attributes to the toggler's DOM element. */ toggler?: PanelPassThroughOptionType; /** * Uses to pass attributes to the headericon's DOM element. */ headericon?: PanelPassThroughOptionType; /** * Uses to pass attributes to the toggleablecontent's DOM element. */ toggleablecontent?: PanelPassThroughOptionType; /** * Uses to pass attributes to the content's DOM element. */ content?: PanelPassThroughOptionType; } /** * Custom passthrough attributes for each DOM elements */ export interface PanelPassThroughAttributes { [key: string]: any; } /** * Defines current inline state in Panel component. */ export interface PanelState { /** * Current collapsed state as a boolean */ d_collapsed: boolean; } /** * Defines valid properties in Panel component. */ export interface PanelProps { /** * Header text of the panel. */ header?: string; /** * Defines if content of panel can be expanded and collapsed. * @defaultValue false */ toggleable?: boolean; /** * Defines the initial state of panel content. * @defaultValue false */ collapsed?: boolean; /** * Uses to pass the custom value to read for the button inside the component. * @deprecated since v3.26.0. Use 'pt' property instead. */ toggleButtonProps?: ButtonHTMLAttributes | undefined; /** * Uses to pass attributes to DOM elements inside the component. * @type {PanelPassThroughOptions} */ pt?: PanelPassThroughOptions; } /** * Defines valid slots in Panel slots. */ export interface PanelSlots { /** * Custom content template. */ default(): VNode[]; /** * Custom header template. */ header(): VNode[]; /** * Custom icons template. */ icons(): VNode[]; /** * Custom header icon template of panel. * @param {Object} scope - header icon slot's params. */ headericon(scope: { /** * Collapsed state as a boolean */ collapsed: boolean; }): VNode[]; } /** * Defines valid emits in Panel component. */ export interface PanelEmits { /** * Emitted when the collapsed changes. * @param {boolean} value - New value. */ 'update:collapsed'(value: boolean): void; /** * Callback to invoke when a tab toggle. * @param {PanelToggleEvent} event - Custom toggle event. */ toggle(event: PanelToggleEvent): void; } /** * **PrimeVue - Panel** * * _Panel is a container with the optional content toggle feature._ * * [Live Demo](https://www.primevue.org/panel/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * * @group Component * */ declare class Panel extends ClassComponent {} declare module '@vue/runtime-core' { interface GlobalComponents { Panel: GlobalComponentConstructor; } } export default Panel;