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;
/**
* 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.
*/
@ -180,9 +180,26 @@ export interface FieldsetSlots {
*/
legend: () => VNode[];
/**
* @deprecated since v4.0. Use the 'toggleicon' slot instead.
* 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')">
<legend :class="cx('legend')" v-bind="ptm('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>
<a
v-if="toggleable"
@ -17,16 +17,17 @@
@keydown="onKeyDown"
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
>
<slot name="togglericon" :collapsed="d_collapsed">
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="cx('togglericon')" v-bind="ptm('togglericon')" />
<!--TODO: togglericon deprecated since v4.0-->
<slot :name="$slots.togglericon ? 'togglericon' : 'toggleicon'" :collapsed="d_collapsed">
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="cx('toggleIcon')" v-bind="ptm('toggleIcon')" />
</slot>
<slot name="legend">
<span :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
<span :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
</slot>
</a>
</legend>
<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')">
<slot></slot>
</div>

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

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

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

@ -94,18 +94,18 @@ export interface PanelPassThroughOptions {
*/
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}
*/
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.
*/
@ -214,6 +214,7 @@ export interface PanelSlots {
*/
icons(): VNode[];
/**
* @deprecated since v4.0. Use the 'toggleicon' slot instead.
* Custom toggler icon template of panel.
* @param {Object} scope - toggler icon slot's params.
*/
@ -223,6 +224,16 @@ export interface PanelSlots {
*/
collapsed: boolean;
}): 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.
*/

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

@ -4,12 +4,12 @@
<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>
</slot>
<div :class="cx('icons')" v-bind="ptm('icons')">
<div :class="cx('headerActions')" v-bind="ptm('headerActions')">
<slot name="icons"></slot>
<Button
v-if="toggleable"
:id="id + '_header'"
:class="cx('toggler')"
:class="cx('toggleButton')"
:aria-label="buttonAriaLabel"
:aria-controls="id + '_content'"
:aria-expanded="!d_collapsed"
@ -17,18 +17,19 @@
@click="toggle"
@keydown="onKeyDown"
v-bind="toggleButtonProps"
:pt="ptm('toggler')"
:pt="ptm('toggleButton')"
>
<template #icon="slotProps">
<slot name="togglericon" :collapsed="d_collapsed">
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('toggler')['icon']" />
<!--TODO: togglericon deprecated since v4.0-->
<slot :name="$slots.togglericon ? 'togglericon' : 'toggleicon'" :collapsed="d_collapsed">
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('toggleButton')['icon']" />
</slot>
</template>
</Button>
</div>
</div>
<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')">
<slot></slot>
</div>

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

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