vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add passthrough(pt) option to Panel

pull/3841/head
mertsincan 2023-03-21 15:53:39 +00:00 committed by Tuğçe Küçükoğlu
parent 37952b363b
commit ff178ac9d3
3 changed files with 205 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
components/lib/panel/Panel.d.ts vendored
View File

@ -10,6 +10,8 @@
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}
@ -25,6 +27,62 @@ export interface PanelToggleEvent {
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 states in Panel component.
*/
export interface PanelState {
/**
* Current collapsed state as a boolean
*/
d_collapsed: boolean;
}
/**
* Defines valid properties in Panel component.
*/
@ -47,6 +105,11 @@ export interface PanelProps {
* Uses to pass the custom value to read for the button inside the component.
*/
toggleButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {PanelPassThroughOptions}
*/
pt?: PanelPassThroughOptions;
}
/**
@ -65,6 +128,16 @@ export interface PanelSlots {
* 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[];
}
/**

6
components/lib/panel/Panel.vue
View File

@ -12,7 +12,7 @@
v-ripple
type="button"
role="button"
class="p-panel-toggler p-link"
class="p-panel-header-icon p-panel-toggler p-link"
:aria-label="buttonAriaLabel"
:aria-controls="ariaId + '_content'"
:aria-expanded="!d_collapsed"
@ -20,7 +20,9 @@
@keydown="onKeyDown"
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
>
<span :class="['p-panel-header-icon', { 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }]" v-bind="ptm('headericon')"></span>
<slot name="headericon" :collapsed="d_collapsed">
<span :class="{ 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }" v-bind="ptm('headericon')"></span>
</slot>
</button>
</div>
</div>

128
doc/common/apidoc/index.json
View File

@ -17407,6 +17407,90 @@
}
]
},
"PanelPassThroughAttributes": {
"description": "Custom passthrough attributes for each DOM elements",
"relatedProp": "",
"props": [
{
"name": "[key: string]",
"optional": false,
"readonly": false,
"type": "any"
}
],
"methods": []
},
"PanelPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "PanelProps.pt",
"props": [
{
"name": "content",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the content's DOM element."
},
{
"name": "header",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the header's DOM element."
},
{
"name": "headericon",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the headericon's DOM element."
},
{
"name": "icons",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the title's DOM element."
},
{
"name": "root",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the root's DOM element."
},
{
"name": "title",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the title's DOM element."
},
{
"name": "toggleablecontent",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the toggleablecontent's DOM element."
},
{
"name": "toggler",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the toggler's DOM element."
}
],
"methods": []
},
"PanelProps": {
"description": "Defines valid properties in Panel component.",
"relatedProp": "",
@ -17427,6 +17511,14 @@
"default": "",
"description": "Header text of the panel."
},
{
"name": "pt",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptions",
"default": "",
"description": "Uses to pass attributes to DOM elements inside the component."
},
{
"name": "toggleButtonProps",
"optional": true,
@ -17463,6 +17555,19 @@
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom header template."
},
{
"name": "headericon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>collapsed</b>: boolean, // Collapsed state as a boolean\n }",
"description": "header icon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom header icon template of panel."
},
{
"name": "icons",
"parameters": [],
@ -17471,6 +17576,21 @@
}
]
},
"PanelState": {
"description": "Defines current inline states in Panel component.",
"relatedProp": "",
"props": [
{
"name": "d_collapsed",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "",
"description": "Current collapsed state as a boolean"
}
],
"methods": []
},
"PanelToggleEvent": {
"description": "Custom toggle event.",
"relatedProp": "PanelEmits.toggle",
@ -17495,6 +17615,14 @@
"methods": []
}
}
},
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"PanelPassThroughOptionType": {
"values": "PanelPassThroughAttributes | Function | null | undefined"
}
}
}
},
"panelmenu": {