Refactor #3965 - For TabView
Tuğçe Küçükoğlu
parent
61d659d3de
commit
85f6669263
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
|
||||
export default {
|
||||
name: 'BaseTabPanel',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
header: null,
|
||||
headerStyle: null,
|
||||
headerClass: null,
|
||||
headerProps: null,
|
||||
headerActionProps: null,
|
||||
contentStyle: null,
|
||||
contentClass: null,
|
||||
contentProps: null,
|
||||
disabled: Boolean
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -3,20 +3,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import BaseTabPanel from './BaseTabPanel.vue';
|
||||
|
||||
export default {
|
||||
name: 'TabPanel',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
header: null,
|
||||
headerStyle: null,
|
||||
headerClass: null,
|
||||
headerProps: null,
|
||||
headerActionProps: null,
|
||||
contentStyle: null,
|
||||
contentClass: null,
|
||||
contentProps: null,
|
||||
disabled: Boolean
|
||||
}
|
||||
extends: BaseTabPanel
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,163 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-tabview-nav-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-tabview-scrollable .p-tabview-nav-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-tabview-nav-content {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
overscroll-behavior: contain auto;
|
||||
}
|
||||
|
||||
.p-tabview-nav {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-tabview-header-action {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-tabview-ink-bar {
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-tabview-header-action:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-tabview-title {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.p-tabview-nav-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-tabview-nav-prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-tabview-nav-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.p-tabview-nav-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => [
|
||||
'p-tabview p-component',
|
||||
{
|
||||
'p-tabview-scrollable': props.scrollable
|
||||
}
|
||||
],
|
||||
navContainer: 'p-tabview-nav-container',
|
||||
previousButton: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
|
||||
previousIcon: ({ props }) => props.prevIcon,
|
||||
navContent: 'p-tabview-nav-content',
|
||||
nav: 'p-tabview-nav',
|
||||
tab: {
|
||||
header: ({ instance, tab, index }) => [
|
||||
'p-tabview-header',
|
||||
instance.getTabProp(tab, 'headerClass'),
|
||||
{
|
||||
'p-highlight': instance.d_activeIndex === index,
|
||||
'p-disabled': instance.getTabProp(tab, 'disabled')
|
||||
}
|
||||
],
|
||||
headerAction: 'p-tabview-nav-link p-tabview-header-action',
|
||||
headerTitle: 'p-tabview-title',
|
||||
content: ({ instance, tab }) => ['p-tabview-panel', instance.getTabProp(tab, 'contentClass')]
|
||||
},
|
||||
inkbar: 'p-tabview-ink-bar',
|
||||
nextButton: 'p-tabview-nav-next p-tabview-nav-btn p-link',
|
||||
nextIcon: ({ props }) => props.nextIcon,
|
||||
panelContainer: 'p-tabview-panels'
|
||||
};
|
||||
|
||||
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tabview_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseTabView',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
selectOnFocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
previousButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
nextButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
prevIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
nextIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes
|
||||
},
|
||||
watch: {
|
||||
isUnstyled: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
!newValue && loadStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -166,6 +166,11 @@ export interface TabViewProps {
|
|||
* @type {TabViewPassThroughOptions}
|
||||
*/
|
||||
pt?: TabViewPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,50 +1,55 @@
|
|||
<template>
|
||||
<div :class="contentClasses" v-bind="ptm('root')">
|
||||
<div class="p-tabview-nav-container" v-bind="ptm('navcontainer')">
|
||||
<div :class="cx('root')" data-pc-name="tabview" data-pc-section="root" v-bind="ptm('root')">
|
||||
<div :class="cx('navContainer')" data-pc-section="navcontainer" v-bind="ptm('navContainer')">
|
||||
<button
|
||||
v-if="scrollable && !isPrevButtonDisabled"
|
||||
ref="prevBtn"
|
||||
v-ripple
|
||||
type="button"
|
||||
class="p-tabview-nav-prev p-tabview-nav-btn p-link"
|
||||
:class="cx('previousButton')"
|
||||
:tabindex="tabindex"
|
||||
:aria-label="prevButtonAriaLabel"
|
||||
@click="onPrevButtonClick"
|
||||
v-bind="{ ...previousButtonProps, ...ptm('prevbutton') }"
|
||||
data-pc-section="previousbutton"
|
||||
v-bind="{ ...previousButtonProps, ...ptm('previousButton') }"
|
||||
>
|
||||
<slot name="previcon">
|
||||
<component :is="prevIcon ? 'span' : 'ChevronLeftIcon'" aria-hidden="true" :class="prevIcon" v-bind="ptm('previcon')" />
|
||||
<component :is="prevIcon ? 'span' : 'ChevronLeftIcon'" aria-hidden="true" :class="prevIcon" data-pc-section="previousicon" v-bind="ptm('previousIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
<div ref="content" class="p-tabview-nav-content" @scroll="onScroll" v-bind="ptm('navcontent')">
|
||||
<ul ref="nav" class="p-tabview-nav" role="tablist" v-bind="ptm('nav')">
|
||||
<div ref="content" :class="cx('navContent')" @scroll="onScroll" data-pc-section="navcontent" v-bind="ptm('navContent')">
|
||||
<ul ref="nav" :class="cx('nav')" role="tablist" data-pc-section="nav" v-bind="ptm('nav')">
|
||||
<li
|
||||
v-for="(tab, i) of tabs"
|
||||
:key="getKey(tab, i)"
|
||||
v-for="(tab, index) of tabs"
|
||||
:key="getKey(tab, index)"
|
||||
:style="getTabProp(tab, 'headerStyle')"
|
||||
:class="getTabHeaderClass(tab, i)"
|
||||
:class="cx('tab.header', { tab, index })"
|
||||
role="presentation"
|
||||
:data-index="i"
|
||||
:data-index="index"
|
||||
: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') }"
|
||||
>
|
||||
<a
|
||||
:id="getTabHeaderActionId(i)"
|
||||
:id="getTabHeaderActionId(index)"
|
||||
v-ripple
|
||||
class="p-tabview-nav-link p-tabview-header-action"
|
||||
:tabindex="getTabProp(tab, 'disabled') || !isTabActive(i) ? -1 : tabindex"
|
||||
:class="cx('tab.headerAction')"
|
||||
:tabindex="getTabProp(tab, 'disabled') || !isTabActive(index) ? -1 : tabindex"
|
||||
role="tab"
|
||||
:aria-disabled="getTabProp(tab, 'disabled')"
|
||||
:aria-selected="isTabActive(i)"
|
||||
:aria-controls="getTabContentId(i)"
|
||||
@click="onTabClick($event, tab, i)"
|
||||
@keydown="onTabKeyDown($event, tab, i)"
|
||||
v-bind="{ ...getTabProp(tab, 'headerActionProps'), ...getTabPT(tab, 'headeraction') }"
|
||||
:aria-selected="isTabActive(index)"
|
||||
:aria-controls="getTabContentId(index)"
|
||||
@click="onTabClick($event, tab, index)"
|
||||
@keydown="onTabKeyDown($event, tab, index)"
|
||||
data-pc-section="headeraction"
|
||||
v-bind="{ ...getTabProp(tab, 'headerActionProps'), ...getTabPT(tab, 'headerAction') }"
|
||||
>
|
||||
<span v-if="tab.props && tab.props.header" class="p-tabview-title" 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')">{{ tab.props.header }}</span>
|
||||
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
|
||||
</a>
|
||||
</li>
|
||||
<li ref="inkbar" class="p-tabview-ink-bar" role="presentation" aria-hidden="true" v-bind="ptm('inkbar')"></li>
|
||||
<li ref="inkbar" :class="cx('inkbar')" role="presentation" aria-hidden="true" data-pc-section="inkbar" v-bind="ptm('inkbar')"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -52,26 +57,28 @@
|
|||
ref="nextBtn"
|
||||
v-ripple
|
||||
type="button"
|
||||
class="p-tabview-nav-next p-tabview-nav-btn p-link"
|
||||
:class="cx('nextButton')"
|
||||
:tabindex="tabindex"
|
||||
:aria-label="nextButtonAriaLabel"
|
||||
@click="onNextButtonClick"
|
||||
v-bind="{ ...nextButtonProps, ...ptm('nextbutton') }"
|
||||
data-pc-section="nextbutton"
|
||||
v-bind="{ ...nextButtonProps, ...ptm('nextButton') }"
|
||||
>
|
||||
<slot name="nexticon">
|
||||
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" aria-hidden="true" :class="nextIcon" v-bind="ptm('nexticon')" />
|
||||
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" aria-hidden="true" :class="nextIcon" data-pc-section="nexticon" v-bind="ptm('nextIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-tabview-panels" v-bind="ptm('panelcontainer')">
|
||||
<template v-for="(tab, i) of tabs" :key="getKey(tab, i)">
|
||||
<div :class="cx('panelContainer')" data-pc-section="panelcontainer" v-bind="ptm('panelContainer')">
|
||||
<template v-for="(tab, index) of tabs" :key="getKey(tab, index)">
|
||||
<div
|
||||
v-if="lazy ? isTabActive(i) : true"
|
||||
v-show="lazy ? true : isTabActive(i)"
|
||||
v-if="lazy ? isTabActive(index) : true"
|
||||
v-show="lazy ? true : isTabActive(index)"
|
||||
:style="getTabProp(tab, 'contentStyle')"
|
||||
:class="getTabContentClass(tab)"
|
||||
:class="cx('tab.content', { tab })"
|
||||
role="tabpanel"
|
||||
:aria-labelledby="getTabHeaderActionId(i)"
|
||||
:aria-labelledby="getTabHeaderActionId(index)"
|
||||
data-pc-section="content"
|
||||
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'content') }"
|
||||
>
|
||||
<component :is="tab"></component>
|
||||
|
|
@ -82,54 +89,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import ChevronLeftIcon from 'primevue/icons/chevronleft';
|
||||
import ChevronRightIcon from 'primevue/icons/chevronright';
|
||||
import Ripple from 'primevue/ripple';
|
||||
import { DomHandler, UniqueComponentId } from 'primevue/utils';
|
||||
import BaseTabView from './BaseTabView.vue';
|
||||
|
||||
export default {
|
||||
name: 'TabView',
|
||||
extends: BaseComponent,
|
||||
extends: BaseTabView,
|
||||
emits: ['update:activeIndex', 'tab-change', 'tab-click'],
|
||||
props: {
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
selectOnFocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
previousButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
nextButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
prevIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
nextIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: this.$attrs.id,
|
||||
|
|
@ -285,18 +254,18 @@ export default {
|
|||
const headerElement = selfCheck ? tabElement : tabElement.nextElementSibling;
|
||||
|
||||
return headerElement
|
||||
? DomHandler.hasClass(headerElement, 'p-disabled') || DomHandler.hasClass(headerElement, 'p-tabview-ink-bar')
|
||||
? DomHandler.getAttribute(headerElement, 'data-p-disabled') || DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar'
|
||||
? this.findNextHeaderAction(headerElement)
|
||||
: DomHandler.findSingle(headerElement, '.p-tabview-header-action')
|
||||
: DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')
|
||||
: null;
|
||||
},
|
||||
findPrevHeaderAction(tabElement, selfCheck = false) {
|
||||
const headerElement = selfCheck ? tabElement : tabElement.previousElementSibling;
|
||||
|
||||
return headerElement
|
||||
? DomHandler.hasClass(headerElement, 'p-disabled') || DomHandler.hasClass(headerElement, 'p-tabview-ink-bar')
|
||||
? DomHandler.getAttribute(headerElement, 'data-p-disabled') || DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar'
|
||||
? this.findPrevHeaderAction(headerElement)
|
||||
: DomHandler.findSingle(headerElement, '.p-tabview-header-action')
|
||||
: DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')
|
||||
: null;
|
||||
},
|
||||
findFirstHeaderAction() {
|
||||
|
|
@ -353,30 +322,9 @@ export default {
|
|||
const { prevBtn, nextBtn } = this.$refs;
|
||||
|
||||
return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + DomHandler.getWidth(el) : acc), 0);
|
||||
},
|
||||
getTabHeaderClass(tab, i) {
|
||||
return [
|
||||
'p-tabview-header',
|
||||
this.getTabProp(tab, 'headerClass'),
|
||||
{
|
||||
'p-highlight': this.d_activeIndex === i,
|
||||
'p-disabled': this.getTabProp(tab, 'disabled')
|
||||
}
|
||||
];
|
||||
},
|
||||
getTabContentClass(tab) {
|
||||
return ['p-tabview-panel', this.getTabProp(tab, 'contentClass')];
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
contentClasses() {
|
||||
return [
|
||||
'p-tabview p-component',
|
||||
{
|
||||
'p-tabview-scrollable': this.scrollable
|
||||
}
|
||||
];
|
||||
},
|
||||
tabs() {
|
||||
return this.$slots.default().reduce((tabs, child) => {
|
||||
if (this.isTabPanel(child)) {
|
||||
|
|
@ -408,75 +356,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-tabview-nav-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-tabview-scrollable .p-tabview-nav-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-tabview-nav-content {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
overscroll-behavior: contain auto;
|
||||
}
|
||||
|
||||
.p-tabview-nav {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-tabview-header-action {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-tabview-ink-bar {
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-tabview-header-action:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-tabview-title {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.p-tabview-nav-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-tabview-nav-prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-tabview-nav-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.p-tabview-nav-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue