General: Passthrough default props and icons

[m-thorsen]

Describe the feature you would like to see added

Add possibility to define default props via passthrough.
Add possibility to set icons and/or default slot content via passthrough.

In order to keep configuration to a single config file and/or plugin and eliminate the need for wrapping.

Some examples:

• I always change the Panel collapse icon to angle - similar to accordion
• I always set dialog defaults draggable=false, modal=true
• I always set Select/Multiselect props auto-filter-focus=true, scroll-height=

Is your feature request related to a problem?

Having to wrap/extend/template component every project and/or usage.

Describe the solution you'd like

Some examples:

Panel

<Panel :pt="{
   togglerIcon: ({ props}) => ({
      icon: props.collapsed ? 'pi-angle-up' : 'pi-angle-down'
   })
}" />

AND/OR

import { Icon } from '@iconify/vue';
...
<Panel :pt="{
   togglerIcon: ({ props}) => ({
      icon:  `<Icon icon=${props.collapsed ? 'mdi:chevron-up'  :  'mdi:chevron-down'} />`
   })
}" />

AND/OR

import { Icon } from '@iconify/vue';
...
<Panel :pt="{
   slots: {
      togglericon: ({ props}) => `<Icon icon=${props.collapsed ? 'mdi:chevron-up'  :  'mdi:chevron-down'} />`
   }
}
}" />

Dialog

<Dialog :pt="{
   root: {
      modal: true,
      draggable: false,
   }
}" />

OR

<Dialog :pt="{
   modal: true,
   draggable: false,
}" />

Describe alternatives you have considered

Wrapping each component, templating every use case

Additional context

The passthrough options seems like very natural place for this!

[mertsincan]

Hi @m-thorsen,

I did a preliminary study on this. https://twitter.com/primevue/status/1656258065014968324 Certainly, I plan to create an API related to it and enable this functionality on a component basis, but that will be in the future. Right now, I am working on developing a new styled mode structure. Once I complete this task, I will move on to configuring the default options.

Best Regards,

[slavco86]

Faced the same problem as well. Lack of ability to pass through prop values down to internal components of more complex components. E.g. passing props to Button inside DataTable, such as severity, label. Any update on this, @mertsincan ? Is this something we can expect to see in V4?

[alqa-dash]

Interesting thread. I tried to change Panel toggle icon but with example above it does not work. At least in v.3.51.0. <Panel :pt="{ togglerIcon: ({ props}) => ({ icon: props.collapsed ? 'pi-angle-up' : 'pi-angle-down' }) }" />

I manage to change icon with <template #togglericon> but want to know is it possible with passthrough approach?

Looks like passthrough options are pretty powerful.