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 #3983 - For TabView

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-05-24 10:07:13 +03:00
parent 0ddf82f471
commit 6e65824aeb
3 changed files with 29 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

5
components/lib/tabview/TabView.d.ts vendored
View file

@ -8,6 +8,7 @@
*
*/
import { ButtonHTMLAttributes, VNode } from 'vue';
import { TabPanelPassThroughOptionType } from '../tabpanel';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type TabViewPassThroughOptionType = TabViewPassThroughAttributes | ((options: { props: TabViewProps; state: TabViewState }) => TabViewPassThroughAttributes) | null | undefined;
@ -55,6 +56,10 @@ export interface TabViewPassThroughOptions {
* Uses to pass attributes to the list's DOM element.
*/
nav?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to TabPanel helper components.
*/
tab?: TabPanelPassThroughOptionType;
/**
* Uses to pass attributes to the inkbar's DOM element.
*/

19
components/lib/tabview/TabView.vue
View file

@ -29,7 +29,7 @@
:data-p-highlight="d_activeIndex === index"
:data-p-disabled="getTabProp(tab, 'disabled')"
data-pc-section="header"
v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'header') }"
v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root', index), ...getTabPT(tab, 'header', index) }"
>
<a
:id="getTabHeaderActionId(index)"
@ -43,9 +43,9 @@
@click="onTabClick($event, tab, index)"
@keydown="onTabKeyDown($event, tab, index)"
data-pc-section="headeraction"
v-bind="{ ...getTabProp(tab, 'headerActionProps'), ...getTabPT(tab, 'headerAction') }"
v-bind="{ ...getTabProp(tab, 'headerActionProps'), ...getTabPT(tab, 'headerAction', index) }"
>
<span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" data-pc-section="headertitle" v-bind="getTabPT(tab, 'headerTitle')">{{ tab.props.header }}</span>
<span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" data-pc-section="headertitle" v-bind="getTabPT(tab, 'headerTitle', index)">{{ tab.props.header }}</span>
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
</a>
</li>
@ -79,7 +79,7 @@
role="tabpanel"
:aria-labelledby="getTabHeaderActionId(index)"
data-pc-section="content"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'content') }"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'root', index), ...getTabPT(tab, 'content', index) }"
>
<component :is="tab"></component>
</div>
@ -145,14 +145,19 @@ export default {
getTabContentId(index) {
return `${this.id}_${index}_content`;
},
getTabPT(tab, key) {
return this.ptmo(this.getTabProp(tab, 'pt'), key, {
getTabPT(tab, key, index) {
const tabMetaData = {
props: tab.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index
}
});
};
return { ...this.ptm(`tab.${key}`, { tab: tabMetaData }), ...this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData) };
},
onScroll(event) {
this.scrollable && this.updateButtonState();