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

refactor: #7090 for Fieldset

pull/7007/merge
Mert Sincan 2025-01-14 11:11:12 +00:00
parent 733d2d8f37
commit 2b97123737
1 changed files with 4 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/primevue/src/fieldset/Fieldset.vue
View File

@ -2,13 +2,13 @@
<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 name="legend" :toggleCallback="toggle"> <slot name="legend" :toggleCallback="toggle">
<span v-if="!toggleable" :id="id + '_header'" :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span> <span v-if="!toggleable" :id="$id + '_header'" :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
<button <button
v-if="toggleable" v-if="toggleable"
:id="id + '_header'" :id="$id + '_header'"
v-ripple v-ripple
type="button" type="button"
:aria-controls="id + '_content'" :aria-controls="$id + '_content'"
:aria-expanded="!d_collapsed" :aria-expanded="!d_collapsed"
:aria-label="buttonAriaLabel" :aria-label="buttonAriaLabel"
:class="cx('toggleButton')" :class="cx('toggleButton')"
@ -25,7 +25,7 @@
</slot> </slot>
</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('contentContainer')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('contentContainer')"> <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>
@ -35,7 +35,6 @@
</template> </template>
<script> <script>
import { UniqueComponentId } from '@primevue/core/utils';
import MinusIcon from '@primevue/icons/minus'; import MinusIcon from '@primevue/icons/minus';
import PlusIcon from '@primevue/icons/plus'; import PlusIcon from '@primevue/icons/plus';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
@ -48,21 +47,14 @@ 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;