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

Refactor #4953 - For Fieldset

pull/5206/head
mertsincan 2024-02-02 15:47:17 +00:00
parent db53a48d12
commit 1e8903644c
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,15 +2,15 @@
<fieldset :class="cx('root')" v-bind="ptm('root')"> <fieldset :class="cx('root')" v-bind="ptm('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="ariaId + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span> <span :id="id + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
</slot> </slot>
<a <a
v-if="toggleable" v-if="toggleable"
:id="ariaId + '_header'" :id="id + '_header'"
v-ripple v-ripple
tabindex="0" tabindex="0"
role="button" role="button"
:aria-controls="ariaId + '_content'" :aria-controls="id + '_content'"
:aria-expanded="!d_collapsed" :aria-expanded="!d_collapsed"
:aria-label="buttonAriaLabel" :aria-label="buttonAriaLabel"
@click="toggle" @click="toggle"
@ -26,7 +26,7 @@
</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="ariaId + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')"> <div v-show="!d_collapsed" :id="id + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('toggleablecontent')">
<div :class="cx('content')" v-bind="ptm('content')"> <div :class="cx('content')" v-bind="ptm('content')">
<slot></slot> <slot></slot>
</div> </div>
@ -48,14 +48,21 @@ export default {
emits: ['update:collapsed', 'toggle'], emits: ['update:collapsed', 'toggle'],
data() { data() {
return { return {
id: this.$attrs.id,
d_collapsed: this.collapsed d_collapsed: this.collapsed
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
collapsed(newValue) { collapsed(newValue) {
this.d_collapsed = newValue; this.d_collapsed = newValue;
} }
}, },
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: { methods: {
toggle(event) { toggle(event) {
this.d_collapsed = !this.d_collapsed; this.d_collapsed = !this.d_collapsed;
@ -73,9 +80,6 @@ export default {
} }
}, },
computed: { computed: {
ariaId() {
return UniqueComponentId();
},
buttonAriaLabel() { buttonAriaLabel() {
return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.legend; return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.legend;
} }