2023-02-28 17:39:21 +00:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* Panel is a container with the optional content toggle feature.
|
|
|
|
*
|
|
|
|
* [Live Demo](https://www.primevue.org/panel/)
|
|
|
|
*
|
|
|
|
* @module panel
|
|
|
|
*
|
|
|
|
*/
|
2022-12-08 11:04:25 +00:00
|
|
|
import { ButtonHTMLAttributes, VNode } from 'vue';
|
2022-09-06 12:03:37 +00:00
|
|
|
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
|
|
|
|
2023-02-28 17:39:21 +00:00
|
|
|
/**
|
|
|
|
* Custom toggle event.
|
2023-03-06 20:35:39 +00:00
|
|
|
* @see {@link PanelEmits.toggle}
|
2023-02-28 17:39:21 +00:00
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface PanelToggleEvent {
|
|
|
|
/**
|
|
|
|
* Browser event.
|
|
|
|
*/
|
|
|
|
originalEvent: Event;
|
|
|
|
/**
|
|
|
|
* Collapsed state as a boolean
|
|
|
|
*/
|
|
|
|
value: boolean;
|
|
|
|
}
|
|
|
|
|
2023-02-28 17:39:21 +00:00
|
|
|
/**
|
|
|
|
* Defines valid properties in Panel component.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface PanelProps {
|
|
|
|
/**
|
|
|
|
* Header text of the panel.
|
|
|
|
*/
|
|
|
|
header?: string;
|
|
|
|
/**
|
|
|
|
* Defines if content of panel can be expanded and collapsed.
|
2023-03-10 14:00:58 +00:00
|
|
|
* @defaultValue false
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
toggleable?: boolean;
|
|
|
|
/**
|
|
|
|
* Defines the initial state of panel content.
|
2023-03-10 14:00:58 +00:00
|
|
|
* @defaultValue false
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
collapsed?: boolean;
|
2022-09-14 11:26:01 +00:00
|
|
|
/**
|
|
|
|
* Uses to pass the custom value to read for the button inside the component.
|
|
|
|
*/
|
2022-12-08 11:04:25 +00:00
|
|
|
toggleButtonProps?: ButtonHTMLAttributes | undefined;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
2023-02-28 17:39:21 +00:00
|
|
|
/**
|
|
|
|
* Defines valid slots in Panel slots.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface PanelSlots {
|
|
|
|
/**
|
|
|
|
* Custom content template.
|
|
|
|
*/
|
2023-02-28 17:39:21 +00:00
|
|
|
default(): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Custom header template.
|
|
|
|
*/
|
2023-02-28 17:39:21 +00:00
|
|
|
header(): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Custom icons template.
|
|
|
|
*/
|
2023-02-28 17:39:21 +00:00
|
|
|
icons(): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
2023-02-28 17:39:21 +00:00
|
|
|
/**
|
|
|
|
* Defines valid emits in Panel component.
|
|
|
|
*/
|
|
|
|
export interface PanelEmits {
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* 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.
|
|
|
|
*/
|
2022-09-14 11:26:01 +00:00
|
|
|
toggle: (event: PanelToggleEvent) => void;
|
2023-02-28 17:39:21 +00:00
|
|
|
}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2023-02-28 17:39:21 +00:00
|
|
|
/**
|
|
|
|
* **PrimeVue - Panel**
|
|
|
|
*
|
|
|
|
* _Panel is a container with the optional content toggle feature._
|
|
|
|
*
|
|
|
|
* [Live Demo](https://www.primevue.org/panel/)
|
|
|
|
* --- ---
|
2023-03-03 10:55:20 +00:00
|
|
|
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
|
2023-02-28 17:39:21 +00:00
|
|
|
*
|
|
|
|
* @group Component
|
|
|
|
*
|
|
|
|
*/
|
2023-03-01 12:30:54 +00:00
|
|
|
declare class Panel extends ClassComponent<PanelProps, PanelSlots, PanelEmits> {}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
|
|
|
declare module '@vue/runtime-core' {
|
|
|
|
interface GlobalComponents {
|
2022-09-14 11:26:01 +00:00
|
|
|
Panel: GlobalComponentConstructor<Panel>;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Panel;
|