vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #5592, #5661 - For Fieldset & Panel

pull/5677/head
tugcekucukoglu 2024-04-30 17:09:06 +03:00
parent 14eca0cc80
commit 8c6c62db04
6 changed files with 60 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/lib/fieldset/Fieldset.d.ts vendored
View File

@ -79,17 +79,17 @@ export interface FieldsetPassThroughOptions {
*/ */
toggler?: FieldsetPassThroughOptionType; toggler?: FieldsetPassThroughOptionType;
/** /**
* Used to pass attributes to the toggler icon's DOM element. * Used to pass attributes to the toggle icon's DOM element.
*/ */
togglerIcon?: FieldsetPassThroughOptionType; toggleIcon?: FieldsetPassThroughOptionType;
/** /**
* Used to pass attributes to the legend title's DOM element. * Used to pass attributes to the legend label's DOM element.
*/ */
legendTitle?: FieldsetPassThroughOptionType; legendLabel?: FieldsetPassThroughOptionType;
/** /**
* Used to pass attributes to the toggleable content's DOM element. * Used to pass attributes to the content container's DOM element.
*/ */
toggleableContent?: FieldsetPassThroughOptionType; contentContainer?: FieldsetPassThroughOptionType;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the content's DOM element.
*/ */
@ -180,9 +180,26 @@ export interface FieldsetSlots {
*/ */
legend: () => VNode[]; legend: () => VNode[];
/** /**
* @deprecated since v4.0. Use the 'toggleicon' slot instead.
* Custom toggler icon template. * Custom toggler icon template.
* @param {Object} scope - toggler icon slot's params.
*/ */
togglericon: () => VNode[]; togglericon(scope: {
/**
* Collapsed state as a boolean
*/
collapsed: boolean;
}): VNode[];
/**
* Custom toggler icon template.
* @param {Object} scope - toggler icon slot's params.
*/
toggleicon(scope: {
/**
* Collapsed state as a boolean
*/
collapsed: boolean;
}): VNode[];
} }
/** /**

11
components/lib/fieldset/Fieldset.vue
View File

@ -2,7 +2,7 @@
<fieldset :class="cx('root')" v-bind="ptmi('root')"> <fieldset :class="cx('root')" v-bind="ptmi('root')">
<legend :class="cx('legend')" v-bind="ptm('legend')"> <legend :class="cx('legend')" v-bind="ptm('legend')">
<slot v-if="!toggleable" name="legend"> <slot v-if="!toggleable" name="legend">
<span :id="id + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span> <span :id="id + '_header'" :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
</slot> </slot>
<a <a
v-if="toggleable" v-if="toggleable"
@ -17,16 +17,17 @@
@keydown="onKeyDown" @keydown="onKeyDown"
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }" v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
> >
<slot name="togglericon" :collapsed="d_collapsed"> <!--TODO: togglericon deprecated since v4.0-->
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="cx('togglericon')" v-bind="ptm('togglericon')" /> <slot :name="$slots.togglericon ? 'togglericon' : 'toggleicon'" :collapsed="d_collapsed">
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="cx('toggleIcon')" v-bind="ptm('toggleIcon')" />
</slot> </slot>
<slot name="legend"> <slot name="legend">
<span :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span> <span :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
</slot> </slot>
</a> </a>
</legend> </legend>
<transition name="p-toggleable-content" v-bind="ptm('transition')"> <transition name="p-toggleable-content" v-bind="ptm('transition')">
<div v-show="!d_collapsed" :id="id + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('toggleablecontent')"> <div v-show="!d_collapsed" :id="id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('contentContainer')">
<div :class="cx('content')" v-bind="ptm('content')"> <div :class="cx('content')" v-bind="ptm('content')">
<slot></slot> <slot></slot>
</div> </div>

6
components/lib/fieldset/style/FieldsetStyle.js
View File

@ -8,9 +8,9 @@ const classes = {
} }
], ],
legend: 'p-fieldset-legend', legend: 'p-fieldset-legend',
legendtitle: 'p-fieldset-legend-label', legendLabel: 'p-fieldset-legend-label',
togglericon: 'p-fieldset-toggle-icon', toggleIcon: 'p-fieldset-toggle-icon',
toggleablecontent: 'p-fieldset-content-container', contentContainer: 'p-fieldset-content-container',
content: 'p-fieldset-content' content: 'p-fieldset-content'
}; };

23
components/lib/panel/Panel.d.ts vendored
View File

@ -94,18 +94,18 @@ export interface PanelPassThroughOptions {
*/ */
title?: PanelPassThroughOptionType; title?: PanelPassThroughOptionType;
/** /**
* Used to pass attributes to the icons' DOM element. * Used to pass attributes to the header actions' DOM element.
*/ */
icons?: PanelPassThroughOptionType; headerActions?: PanelPassThroughOptionType;
/** /**
* Used to pass attributes to the toggler button's DOM element. * Used to pass attributes to the toggle button button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
toggler?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>; toggleButton?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the toggleablecontent's DOM element. * Used to pass attributes to the content container's DOM element.
*/ */
toggleableContent?: PanelPassThroughOptionType; contentContainer?: PanelPassThroughOptionType;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the content's DOM element.
*/ */
@ -214,6 +214,7 @@ export interface PanelSlots {
*/ */
icons(): VNode[]; icons(): VNode[];
/** /**
* @deprecated since v4.0. Use the 'toggleicon' slot instead.
* Custom toggler icon template of panel. * Custom toggler icon template of panel.
* @param {Object} scope - toggler icon slot's params. * @param {Object} scope - toggler icon slot's params.
*/ */
@ -223,6 +224,16 @@ export interface PanelSlots {
*/ */
collapsed: boolean; collapsed: boolean;
}): VNode[]; }): VNode[];
/**
* Custom toggler icon template of panel.
* @param {Object} scope - toggler icon slot's params.
*/
toggleicon(scope: {
/**
* Collapsed state as a boolean
*/
collapsed: boolean;
}): VNode[];
/** /**
* Custom footer template. * Custom footer template.
*/ */

13
components/lib/panel/Panel.vue
View File

@ -4,12 +4,12 @@
<slot :id="id + '_header'" name="header" :class="cx('title')"> <slot :id="id + '_header'" name="header" :class="cx('title')">
<span v-if="header" :id="id + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span> <span v-if="header" :id="id + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
</slot> </slot>
<div :class="cx('icons')" v-bind="ptm('icons')"> <div :class="cx('headerActions')" v-bind="ptm('headerActions')">
<slot name="icons"></slot> <slot name="icons"></slot>
<Button <Button
v-if="toggleable" v-if="toggleable"
:id="id + '_header'" :id="id + '_header'"
:class="cx('toggler')" :class="cx('toggleButton')"
:aria-label="buttonAriaLabel" :aria-label="buttonAriaLabel"
:aria-controls="id + '_content'" :aria-controls="id + '_content'"
:aria-expanded="!d_collapsed" :aria-expanded="!d_collapsed"
@ -17,18 +17,19 @@
@click="toggle" @click="toggle"
@keydown="onKeyDown" @keydown="onKeyDown"
v-bind="toggleButtonProps" v-bind="toggleButtonProps"
:pt="ptm('toggler')" :pt="ptm('toggleButton')"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="togglericon" :collapsed="d_collapsed"> <!--TODO: togglericon deprecated since v4.0-->
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('toggler')['icon']" /> <slot :name="$slots.togglericon ? 'togglericon' : 'toggleicon'" :collapsed="d_collapsed">
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('toggleButton')['icon']" />
</slot> </slot>
</template> </template>
</Button> </Button>
</div> </div>
</div> </div>
<transition name="p-toggleable-content" v-bind="ptm('transition')"> <transition name="p-toggleable-content" v-bind="ptm('transition')">
<div v-show="!d_collapsed" :id="id + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('toggleablecontent')"> <div v-show="!d_collapsed" :id="id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('contentContainer')">
<div :class="cx('content')" v-bind="ptm('content')"> <div :class="cx('content')" v-bind="ptm('content')">
<slot></slot> <slot></slot>
</div> </div>

6
components/lib/panel/style/PanelStyle.js
View File

@ -9,9 +9,9 @@ const classes = {
], ],
header: 'p-panel-header', header: 'p-panel-header',
title: 'p-panel-title', title: 'p-panel-title',
icons: 'p-panel-header-actions', headerActions: 'p-panel-header-actions',
toggler: 'p-panel-toggle-button', toggleButton: 'p-panel-toggle-button',
toggleablecontent: 'p-panel-content-container', contentContainer: 'p-panel-content-container',
content: 'p-panel-content', content: 'p-panel-content',
footer: 'p-panel-footer' footer: 'p-panel-footer'
}; };