From ff178ac9d31e529d8cebb265fa9e5ad596a9ef0a Mon Sep 17 00:00:00 2001 From: mertsincan Date: Tue, 21 Mar 2023 15:53:39 +0000 Subject: [PATCH] Add passthrough(pt) option to Panel --- components/lib/panel/Panel.d.ts | 73 ++++++++++++++++++ components/lib/panel/Panel.vue | 6 +- doc/common/apidoc/index.json | 128 ++++++++++++++++++++++++++++++++ 3 files changed, 205 insertions(+), 2 deletions(-) diff --git a/components/lib/panel/Panel.d.ts b/components/lib/panel/Panel.d.ts index 256cbfa16..e7c7fecbb 100755 --- a/components/lib/panel/Panel.d.ts +++ b/components/lib/panel/Panel.d.ts @@ -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[]; } /** diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue index b906d729a..364deae4e 100755 --- a/components/lib/panel/Panel.vue +++ b/components/lib/panel/Panel.vue @@ -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') }" > - + + + diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index a86746fcb..811ad63fb 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -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[]", "description": "Custom header template." }, + { + "name": "headericon", + "parameters": [ + { + "name": "scope", + "optional": false, + "type": "{\n \t collapsed: boolean, // Collapsed state as a boolean\n }", + "description": "header icon slot's params." + } + ], + "returnType": "VNode[]", + "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": {