Refactor #3797 - Fieldset updates

api-generator/components/fieldset.js

@@ -22,6 +22,12 @@ const FieldsetProps = [
         type: 'string',
         default: 'null',
         description: 'Uses to pass the custom value to read for the AnchorHTMLAttributes inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -47,7 +53,11 @@ const FieldsetEvents = [
 const FieldsetSlots = [
     {
         name: 'legend',
-        description: "Custom content for the component's header"
+        description: 'Custom legend template.'
+    },
+    {
+        name: 'togglericon',
+        description: 'Custom toggler icon template.'
     }
 ];
 

components/lib/fieldset/Fieldset.d.ts

@@ -10,6 +10,16 @@
 import { AnchorHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type FieldsetPassThroughOptionType = FieldsetPassThroughAttributes | ((options: FieldsetPassThroughMethodOptions) => FieldsetPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FieldsetPassThroughMethodOptions {
+    props: FieldsetProps;
+    state: FieldsetState;
+}
+
 /**
  * Custom toggle event.
  * @see {@link FieldsetEmits.toggle}
@@ -25,6 +35,59 @@ export interface FieldsetToggleEvent {
     value: boolean;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FieldsetProps.pt}
+ */
+export interface FieldsetPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the legend's DOM element.
+     */
+    legend?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the legend title's DOM element.
+     */
+    legendtitle?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggler's DOM element.
+     */
+    toggler?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggler icon's DOM element.
+     */
+    togglericon?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggleable content's DOM element.
+     */
+    toggleablecontent?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: FieldsetPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface FieldsetPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Fieldset component.
+ */
+export interface FieldsetState {
+    /**
+     * Current collapsed state as a boolean.
+     * @defaultValue false
+     */
+    d_collapsed: boolean;
+}
+
 /**
  * Defines valid properties in Fieldset component.
  */
@@ -45,8 +108,14 @@ export interface FieldsetProps {
     collapsed?: boolean | undefined;
     /**
      * Uses to pass the custom value to read for the AnchorHTMLAttributes inside the component.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     toggleButtonProps?: AnchorHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {FieldsetPassThroughOptions}
+     */
+    pt?: FieldsetPassThroughOptions;
 }
 
 /**
@@ -61,6 +130,10 @@ export interface FieldsetSlots {
      * Custom legend template.
      */
     legend: () => VNode[];
+    /**
+     * Custom toggler icon template.
+     */
+    togglericon: () => VNode[];
 }
 
 /**

components/lib/fieldset/Fieldset.vue

@@ -1,8 +1,8 @@
 <template>
-    <fieldset :class="['p-fieldset p-component', { 'p-fieldset-toggleable': toggleable }]">
+    <fieldset :class="['p-fieldset p-component', { 'p-fieldset-toggleable': toggleable }]" v-bind="ptm('root')">
-        <legend class="p-fieldset-legend">
+        <legend class="p-fieldset-legend" v-bind="ptm('legend')">
             <slot v-if="!toggleable" name="legend">
-                <span :id="ariaId + '_header'" class="p-fieldset-legend-text">{{ legend }}</span>
+                <span :id="ariaId + '_header'" class="p-fieldset-legend-text" v-bind="ptm('legendtitle')">{{ legend }}</span>
             </slot>
             <a
                 v-if="toggleable"
@@ -15,17 +15,19 @@
                 :aria-label="buttonAriaLabel"
                 @click="toggle"
                 @keydown="onKeyDown"
-                v-bind="toggleButtonProps"
+                v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
             >
-                <span :class="iconClass"></span>
+                <slot name="togglericon" :collapsed="d_collapsed">
+                    <span :class="iconClass" v-bind="ptm('togglericon')"></span>
+                </slot>
                 <slot name="legend">
-                    <span class="p-fieldset-legend-text">{{ legend }}</span>
+                    <span class="p-fieldset-legend-text" v-bind="ptm('legendtitle')">{{ legend }}</span>
                 </slot>
             </a>
         </legend>
         <transition name="p-toggleable-content">
-            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'">
+            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
-                <div class="p-fieldset-content">
+                <div class="p-fieldset-content" v-bind="ptm('content')">
                     <slot></slot>
                 </div>
             </div>
@@ -34,11 +36,13 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Fieldset',
+    extends: ComponentBase,
     emits: ['update:collapsed', 'toggle'],
     props: {
         legend: String,