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

Fixed #5621 - New Component: Tabs

Browse source
This commit is contained in:
mertsincan 2024-04-19 14:51:57 +01:00
parent 53168665d4
commit c80c3ad0ea
57 changed files with 3934 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

48
components/lib/tabpanel/TabPanel.vue
View file

@ -1,12 +1,56 @@
<template>
<slot></slot>
<slot v-if="!$pcTabs"></slot>
<template v-else>
<template v-if="!asChild">
<component v-if="$pcTabs?.lazy ? active : true" v-show="$pcTabs?.lazy ? true : active" :is="as" :class="cx('root')" v-bind="attrs">
<slot></slot>
</component>
</template>
<slot v-else :class="cx('root')" :active="active" :a11yAttrs="a11yAttrs"></slot>
</template>
</template>
<script>
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import BaseTabPanel from './BaseTabPanel.vue';
export default {
name: 'TabPanel',
extends: BaseTabPanel
extends: BaseTabPanel,
inheritAttrs: false,
inject: ['$pcTabs'],
computed: {
active() {
return ObjectUtils.equals(this.$pcTabs?.d_value, this.value);
},
id() {
return `${this.$pcTabs?.id}_tabpanel_${this.value}`;
},
ariaLabelledby() {
return `${this.$pcTabs?.id}_tab_${this.value}`;
},
attrs() {
return mergeProps(this.a11yAttrs, this.ptmi('root', this.ptParams));
},
a11yAttrs() {
return {
id: this.id,
tabindex: this.$pcTabs?.tabindex,
role: 'tabpanel',
'aria-labelledby': this.ariaLabelledby,
'data-pc-name': 'tabpanel',
'data-p-active': this.active
};
},
ptParams() {
return {
context: {
active: this.active
}
};
}
}
};
</script>