Fixed #5719 - Fieldset: #legend updates
tugcekucukoglu
parent
731951b0a9
commit
d4be481ec8
|
|
@ -177,8 +177,15 @@ export interface FieldsetSlots {
|
|||
default: () => VNode[];
|
||||
/**
|
||||
* Custom legend template.
|
||||
* @param {Object} scope - legend slot's params.
|
||||
*/
|
||||
legend: () => VNode[];
|
||||
legend(scope: {
|
||||
/**
|
||||
* Toggle function.
|
||||
* @param {Event} event - Browser event
|
||||
*/
|
||||
toggleCallback: (event: Event) => void;
|
||||
}): VNode[];
|
||||
/**
|
||||
* @deprecated since v4.0. Use the 'toggleicon' slot instead.
|
||||
* Custom toggler icon template.
|
||||
|
|
|
|||
|
|
@ -1,30 +1,27 @@
|
|||
<template>
|
||||
<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('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
|
||||
</slot>
|
||||
<a
|
||||
v-if="toggleable"
|
||||
:id="id + '_header'"
|
||||
v-ripple
|
||||
tabindex="0"
|
||||
role="button"
|
||||
:aria-controls="id + '_content'"
|
||||
:aria-expanded="!d_collapsed"
|
||||
:aria-label="buttonAriaLabel"
|
||||
@click="toggle"
|
||||
@keydown="onKeyDown"
|
||||
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
|
||||
>
|
||||
<!--TODO: togglericon deprecated since v4.0-->
|
||||
<slot :name="$slots.toggleicon ? 'toggleicon' : 'togglericon'" :collapsed="d_collapsed">
|
||||
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="cx('toggleIcon')" v-bind="ptm('toggleIcon')" />
|
||||
</slot>
|
||||
<slot name="legend">
|
||||
<slot name="legend" :toggleCallback="toggle">
|
||||
<span v-if="!toggleable" :id="id + '_header'" :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
|
||||
<button
|
||||
v-if="toggleable"
|
||||
:id="id + '_header'"
|
||||
v-ripple
|
||||
type="button"
|
||||
:aria-controls="id + '_content'"
|
||||
:aria-expanded="!d_collapsed"
|
||||
:aria-label="buttonAriaLabel"
|
||||
@click="toggle"
|
||||
@keydown="onKeyDown"
|
||||
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
|
||||
>
|
||||
<!--TODO: togglericon deprecated since v4.0-->
|
||||
<slot :name="$slots.toggleicon ? 'toggleicon' : 'togglericon'" :collapsed="d_collapsed">
|
||||
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="cx('toggleIcon')" v-bind="ptm('toggleIcon')" />
|
||||
</slot>
|
||||
<span :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
|
||||
</slot>
|
||||
</a>
|
||||
</button>
|
||||
</slot>
|
||||
</legend>
|
||||
<transition name="p-toggleable-content" v-bind="ptm('transition')">
|
||||
<div v-show="!d_collapsed" :id="id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('contentContainer')">
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ const theme = ({ dt }) => `
|
|||
|
||||
.p-fieldset-legend {
|
||||
background: ${dt('fieldset.legend.background')};
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
border: 0 none;
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
|
@ -23,7 +22,7 @@ const theme = ({ dt }) => `
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.p-fieldset-toggleable > .p-fieldset-legend > a {
|
||||
.p-fieldset-toggleable > .p-fieldset-legend > button {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
|
|
@ -34,12 +33,18 @@ const theme = ({ dt }) => `
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: transparent;
|
||||
color: ${dt('fieldset.legend.color')};
|
||||
border: 0 none;
|
||||
border-radius: ${dt('border.radius.md')};
|
||||
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
outline-color: transparent;
|
||||
}
|
||||
|
||||
.p-fieldset-legend-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.p-fieldset-toggleable > .p-fieldset-legend > a:focus-visible {
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
|
||||
outline-offset: ${dt('focus.ring.offset')};
|
||||
|
|
|
|||
|
|
@ -31719,16 +31719,22 @@
|
|||
"readonly": false,
|
||||
"type": "Function",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "legend",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "Function",
|
||||
"default": ""
|
||||
}
|
||||
],
|
||||
"methods": [
|
||||
{
|
||||
"name": "legend",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "scope",
|
||||
"optional": false,
|
||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Toggle function.</span>\n}",
|
||||
"description": "legend slot's params."
|
||||
}
|
||||
],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom legend template."
|
||||
},
|
||||
{
|
||||
"name": "togglericon",
|
||||
"parameters": [
|
||||
|
|
@ -31918,7 +31924,7 @@
|
|||
"description": "Defines methods that can be accessed by the component's reference.",
|
||||
"values": [
|
||||
{
|
||||
"name": "basicUpload",
|
||||
"name": "upload",
|
||||
"parameters": [],
|
||||
"returnType": "void",
|
||||
"description": "Upload file."
|
||||
|
|
|
|||
Loading…
Reference in New Issue