fix: Fix passthrough declarative syntax in subcomponent

[YannisJustine]

Defect Fixes

• fix: Paginator passthrough to style selected button does not work #8237
• fix: Paginator: Passthrough not working in declarative syntax #8023
• fix: Menubar: Passthroug not working for the child elements #6295

How To Resolve

Cause

Issue with Passthrough declarative syntax:

• When using Passthrough declarative syntax (pt) in a component with child components,
  the passthrough properties are not applied correctly. Here's an example of the problematic code:

<Menubar 
    :pt:rootList:style="'background-color: red'"
    :pt:itemLabel:style="'color: blue'"
    :pt:item:style="'background-color: yellow'"
    :pt:itemContent:style="'background-color: pink'"
    :pt:submenu:style="'background-color: orange'"
    :pt:separator:style="'border-block-start: 3px solid black'"
/>

or

<Paginator
    rows="10"
    totalRecords="100"
    pt:root="mt-8"
    :pt:page="(options: any) => options.context.active ? '!bg-black !text-white' : ''"
  />

Underlying Problem:

• When invoking this.ptm, the ptm function internally calls the _getPTSelf function.
• The _getPTSelf function relies on the this.$_attrsPT variable to retrieve the passthrough attributes (e.g., pt:name attributes).
• However, when a child component is involved, this.$_attrsPT does not contains the passthrough attributes from the parent component.

primevue/packages/core/src/basecomponent/BaseComponent.vue

Lines 378 to 392 in 9ac4c5a

	$_attrsPT() {
	return Object.entries(this.$attrs || {})
	.filter(([key]) => key?.startsWith('pt:'))
	.reduce((result, [key, value]) => {
	const [, ...rest] = key.split(':');
	rest?.reduce((currentObj, nestedKey, index, array) => {
	!currentObj[nestedKey] && (currentObj[nestedKey] = index === array.length - 1 ? value : {});
	return currentObj[nestedKey];
	}, result);
	return result;
	}, {});
	},

Solution

Using parentInstance $attrs when possible:

• To resolve the issue, we can identify if the current component has a parent component (this.$parentInstance).:

$_attrsPT() {
    return Object.entries((this.$parentInstance && this.$parentInstance != this) ? this.$parentInstance.$attrs || {} : this.$attrs || {})
        .filter(([key]) => key?.startsWith('pt:'))
        .reduce((result, [key, value]) => {
            const [, ...rest] = key.split(':');

            rest?.reduce((currentObj, nestedKey, index, array) => {
                !currentObj[nestedKey] && (currentObj[nestedKey] = index === array.length - 1 ? value : {});

                return currentObj[nestedKey];
            }, result);

            return result;
        }, {});
}

Compatibility:

This modification is fully backward compatible and should not break existing code.