vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3797 - Fieldset updates

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-03-24 18:07:46 +03:00
parent 1ccf0f13b9
commit 02307960ec
3 changed files with 96 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

20
components/lib/fieldset/Fieldset.vue
View file

@ -1,8 +1,8 @@
<template>
<fieldset :class="['p-fieldset p-component', { 'p-fieldset-toggleable': toggleable }]">
<legend class="p-fieldset-legend">
<fieldset :class="['p-fieldset p-component', { 'p-fieldset-toggleable': toggleable }]" v-bind="ptm('root')">
<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 class="p-fieldset-content">
<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" 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,