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 #3965 - For Fieldset

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-05-19 13:44:25 +03:00
parent 69d6ed9ccc
commit 717e0d79e6
3 changed files with 76 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<template>
<fieldset :class="classes.root" v-bind="ptm('root')">
<legend :class="classes.legend" v-bind="ptm('legend')">
<fieldset :class="css('root')" data-pc-name="fieldset" v-bind="ptm('root')">
<legend :class="css('legend')" v-bind="ptm('legend')">
<slot v-if="!toggleable" name="legend">
<span :id="ariaId + '_header'" :class="classes.legendtitle" v-bind="ptm('legendtitle')">{{ legend }}</span>
<span :id="ariaId + '_header'" :class="css('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
</slot>
<a
v-if="toggleable"
@ -18,16 +18,16 @@
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
>
<slot name="togglericon" :collapsed="d_collapsed">
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="classes.togglericon" v-bind="ptm('togglericon')" />
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="css('togglericon')" v-bind="ptm('togglericon')" />
</slot>
<slot name="legend">
<span :class="classes.legendtitle" v-bind="ptm('legendtitle')">{{ legend }}</span>
<span :class="css('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
</slot>
</a>
</legend>
<transition name="p-toggleable-content">
<div v-show="!d_collapsed" :id="ariaId + '_content'" :class="classes.toggleablecontent" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
<div :class="classes.content" v-bind="ptm('content')">
<div v-show="!d_collapsed" :id="ariaId + '_content'" :class="css('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
<div :class="css('content')" v-bind="ptm('content')">
<slot></slot>
</div>
</div>
@ -36,29 +36,16 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import MinusIcon from 'primevue/icons/minus';
import PlusIcon from 'primevue/icons/plus';
import Ripple from 'primevue/ripple';
import { useStyle } from 'primevue/usestyle';
import { UniqueComponentId } from 'primevue/utils';
import { getComputedClasses, styles } from './FieldsetStyle';
const styleInstance = useStyle(styles, { id: 'primevue_fieldset_style', manual: true });
import BaseFieldset from './BaseFieldset';
export default {
name: 'Fieldset',
extends: BaseComponent,
extends: BaseFieldset,
emits: ['update:collapsed', 'toggle'],
props: {
legend: String,
toggleable: Boolean,
collapsed: Boolean,
toggleButtonProps: {
type: null,
default: null
}
},
data() {
return {
d_collapsed: this.collapsed
@ -67,12 +54,6 @@ export default {
watch: {
collapsed(newValue) {
this.d_collapsed = newValue;
},
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && styleInstance.load();
}
}
},
methods: {
@ -97,9 +78,6 @@ export default {
},
buttonAriaLabel() {
return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.legend;
},
classes() {
return this.isUnstyled ? {} : getComputedClasses(this.$props, this.$data);
}
},
directives: {