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

Fixed #3794 - TabView: new passthrough(pt) property implementation

pull/3841/head
Tuğçe Küçükoğlu 2023-03-24 09:46:57 +03:00
parent 0880120766
commit b63bc4db2f
6 changed files with 219 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/tabpanel.js
View File

@ -52,6 +52,12 @@ const TabPanelProps = [
type: 'boolean',
default: 'null',
description: 'Whether the tab is disabled.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

24
api-generator/components/tabview.js
View File

@ -40,6 +40,12 @@ const TabViewProps = [
type: 'any',
default: 'null',
description: 'Uses to pass all properties of the HTMLButtonElement to the next button.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -78,11 +84,27 @@ const TabViewEvents = [
}
];
const TabViewSlots = [
{
name: 'default',
description: 'Default slot to detect TabPanel components.'
},
{
name: 'previcon',
description: 'Previous button icon template for the scrollable component.'
},
{
name: 'nexticon',
description: 'Next button icon template for the scrollable component.'
}
];
module.exports = {
tabview: {
name: 'TabView',
description: 'TabView is a container component to group content with tabs.',
props: TabViewProps,
event: TabViewEvents
event: TabViewEvents,
slots: TabViewSlots
}
};

54
components/lib/tabpanel/TabPanel.d.ts vendored
View File

@ -8,8 +8,50 @@
*
*/
import { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, VNode } from 'vue';
import { TabViewPassThroughOptions } from '../tabview';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type TabPanelPassThroughOptionType = TabPanelPassThroughAttributes | ((options: TabPanelPassThroughMethodOptions) => TabPanelPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface TabPanelPassThroughMethodOptions {
props: TabPanelProps;
parent: TabViewPassThroughOptions;
}
/**
* Custom passthrough(pt) options.
* @see {@link TabPanelProps.pt}
*/
export interface TabPanelPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: TabPanelPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
*/
header?: TabPanelPassThroughOptionType;
/**
* Uses to pass attributes to the header action's DOM element.
*/
headeraction?: TabPanelPassThroughOptionType;
/**
* Uses to pass attributes to the title's DOM element.
*/
headertitle?: TabPanelPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
*/
content?: TabPanelPassThroughOptionType;
}
export interface TabPanelPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in TabPanel component.
*/
@ -20,30 +62,37 @@ export interface TabPanelProps {
header?: string | undefined;
/**
* Inline style of the tab header.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
headerStyle?: any;
/**
* Style class of the tab header.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
headerClass?: any;
/**
* Uses to pass all properties of the HTMLLiElement to the tab header.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
headerProps?: LiHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
headerActionProps?: AnchorHTMLAttributes | undefined;
/**
* Inline style of the tab content.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
contentStyle?: any;
/**
* Style class of the tab content.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
contentClass?: any;
/**
* Uses to pass all properties of the HTMLDivElement to the tab content.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
contentProps?: HTMLAttributes | undefined;
/**
@ -51,6 +100,11 @@ export interface TabPanelProps {
* @defaultValue false
*/
disabled?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {TabPanelPassThroughOptions}
*/
pt?: TabPanelPassThroughOptions;
}
/**
* Defines valid slots in TabPanel slots.

2
components/lib/tabpanel/TabPanel.vue
View File

@ -3,8 +3,10 @@
</template>
<script>
import ComponentBase from 'primevue/base';
export default {
name: 'TabPanel',
extends: ComponentBase,
props: {
header: null,
headerStyle: null,

97
components/lib/tabview/TabView.d.ts vendored
View File

@ -10,6 +10,8 @@
import { ButtonHTMLAttributes, VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type TabViewPassThroughOptionType = TabViewPassThroughAttributes | ((options: { props: TabViewProps; state: TabViewState }) => TabViewPassThroughAttributes) | null | undefined;
/**
* Custom tab change event.
* @see {@link TabViewEmits['tab-change']}
@ -32,6 +34,86 @@ export interface TabViewChangeEvent {
*/
export interface TabViewClickEvent extends TabViewChangeEvent {}
/**
* Custom passthrough(pt) options.
* @see {@link TabViewProps.pt}
*/
export interface TabViewPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the nav container's DOM element.
*/
navcontainer?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the nav content's DOM element.
*/
navcontent?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
*/
nav?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the list items' DOM element.
*/
tabheader?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the inkbar's DOM element.
*/
inkbar?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the previous button's DOM element.
*/
prevbutton?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the previous button icon's DOM element.
*/
previcon?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the nex button's DOM element.
*/
nextbutton?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the next button icon's DOM element.
*/
nexticon?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the panel's DOM element.
*/
panelcontent?: TabViewPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface TabViewPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in TabView component.
*/
export interface TabViewState {
/**
* Current collapsed state as a boolean.
*/
d_activeIndex: number;
/**
* Unique id for the TabView component.
*/
id: string;
/**
* Current state of previous button.
*/
isPrevButtonDisabled: boolean;
/**
* Current state of the next button.
*/
isNextButtonDisabled: boolean;
}
/**
* Defines valid properties in TabView component.
*/
@ -63,12 +145,19 @@ export interface TabViewProps {
selectOnFocus?: boolean | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the previous button.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
previousButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the next button.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
nextButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {TabViewPassThroughOptions}
*/
pt?: TabViewPassThroughOptions;
}
/**
@ -79,6 +168,14 @@ export interface TabViewSlots {
* Default slot to detect TabPanel components.
*/
default(): VNode[];
/**
* Previous button icon template for the scrollable component.
*/
previcon(): VNode[];
/**
* Next button icon template for the scrollable component.
*/
nexticon(): VNode[];
}
/**

51
components/lib/tabview/TabView.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="contentClasses">
<div class="p-tabview-nav-container">
<div :class="contentClasses" v-bind="ptm('root')">
<div class="p-tabview-nav-container" v-bind="ptm('navcontainer')">
<button
v-if="scrollable && !isPrevButtonDisabled"
ref="prevBtn"
@ -10,13 +10,23 @@
:tabindex="tabindex"
:aria-label="prevButtonAriaLabel"
@click="onPrevButtonClick"
v-bind="previousButtonProps"
v-bind="{ ...previousButtonProps, ...ptm('prevbutton') }"
>
<span class="pi pi-chevron-left" aria-hidden="true"></span>
<slot name="previcon">
<span class="pi pi-chevron-left" aria-hidden="true" v-bind="ptm('previcon')"></span>
</slot>
</button>
<div ref="content" class="p-tabview-nav-content" @scroll="onScroll">
<ul ref="nav" class="p-tabview-nav" role="tablist">
<li v-for="(tab, i) of tabs" :key="getKey(tab, i)" :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" role="presentation" :data-index="i" v-bind="getTabProp(tab, 'headerProps')">
<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')">
<li
v-for="(tab, i) of tabs"
:key="getKey(tab, i)"
:style="getTabProp(tab, 'headerStyle')"
:class="getTabHeaderClass(tab, i)"
role="presentation"
:data-index="i"
v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'header') }"
>
<a
:id="getTabHeaderActionId(i)"
v-ripple
@ -28,13 +38,13 @@
:aria-controls="getTabContentId(i)"
@click="onTabClick($event, tab, i)"
@keydown="onTabKeyDown($event, tab, i)"
v-bind="getTabProp(tab, 'headerActionProps')"
v-bind="{ ...getTabProp(tab, 'headerActionProps'), ...getTabPT(tab, 'headeraction') }"
>
<span v-if="tab.props && tab.props.header" class="p-tabview-title">{{ tab.props.header }}</span>
<span v-if="tab.props && tab.props.header" class="p-tabview-title" 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"></li>
<li ref="inkbar" class="p-tabview-ink-bar" role="presentation" aria-hidden="true" v-bind="ptm('inkbar')"></li>
</ul>
</div>
<button
@ -46,12 +56,14 @@
:tabindex="tabindex"
:aria-label="nextButtonAriaLabel"
@click="onNextButtonClick"
v-bind="nextButtonProps"
v-bind="{ ...nextButtonProps, ...ptm('nextbutton') }"
>
<span class="pi pi-chevron-right" aria-hidden="true"></span>
<slot name="nexticon">
<span class="pi pi-chevron-right" aria-hidden="true" v-bind="ptm('nexticon')"></span>
</slot>
</button>
</div>
<div class="p-tabview-panels">
<div class="p-tabview-panels" v-bind="ptm('panelcontent')">
<template v-for="(tab, i) of tabs" :key="getKey(tab, i)">
<div
v-if="lazy ? isTabActive(i) : true"
@ -60,7 +72,7 @@
:class="getTabContentClass(tab)"
role="tabpanel"
:aria-labelledby="getTabHeaderActionId(i)"
v-bind="getTabProp(tab, 'contentProps')"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'content') }"
>
<component :is="tab"></component>
</div>
@ -70,11 +82,13 @@
</template>
<script>
import ComponentBase from 'primevue/base';
import Ripple from 'primevue/ripple';
import { DomHandler, UniqueComponentId } from 'primevue/utils';
export default {
name: 'TabView',
extends: ComponentBase,
emits: ['update:activeIndex', 'tab-change', 'tab-click'],
props: {
activeIndex: {
@ -152,6 +166,15 @@ export default {
getTabContentId(index) {
return `${this.id}_${index}_content`;
},
getTabPT(tab, key) {
return this.ptmo(this.getTabProp(tab, 'pt'), key, {
props: tab.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
onScroll(event) {
this.scrollable && this.updateButtonState();