diff --git a/api-generator/components/fieldset.js b/api-generator/components/fieldset.js index fc76bfaed..530e298fc 100644 --- a/api-generator/components/fieldset.js +++ b/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.' } ]; diff --git a/components/lib/fieldset/Fieldset.d.ts b/components/lib/fieldset/Fieldset.d.ts index e6f9158ce..9a45da57a 100755 --- a/components/lib/fieldset/Fieldset.d.ts +++ b/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[]; } /** diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue index ef9dd83ad..8ef53bbad 100755 --- a/components/lib/fieldset/Fieldset.vue +++ b/components/lib/fieldset/Fieldset.vue @@ -1,8 +1,8 @@