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

Accordion pt completed - panel dts changes

Browse source
This commit is contained in:
Bahadır Sofuoğlu 2023-03-23 17:42:14 +03:00 • committed by Tuğçe Küçükoğlu
parent aff4519b9d
commit 311734be29
4 changed files with 130 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

46
components/lib/accordion/Accordion.d.ts vendored
View file

@ -10,6 +10,15 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface AccordionPassThroughMethodOptions {
props: AccordionProps;
state: AccordionState;
}
/**
* Custom tab open event.
* @see {@link AccordionEmits.tab-open}
@ -40,6 +49,38 @@ export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
*/
export interface AccordionClickEvent extends AccordionTabOpenEvent {}
/**
* Custom passthrough(pt) options.
* @see {@link AccordionProps.pt}
*/
export interface AccordionPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: AccordionPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface AccordionPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in Accordion component.
*/
export interface AccordionState {
/**
* Current id state as a string
*/
id: string;
/**
* Current active index state as a boolean
*/
d_activeIndex: boolean;
}
/**
* Defines valid properties in Accordion component.
*/
@ -79,6 +120,11 @@ export interface AccordionProps {
* @defaultValue false
*/
selectOnFocus?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {AccordionPassThroughOptions}
*/
pt?: AccordionPassThroughOptions;
}
/**

13
components/lib/accordion/Accordion.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="p-accordion p-component" v-bind="ptm('root')">
<div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i" v-bind="getTabPT(tab, 'root')">
<div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'tabheader') }">
<div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header') }">
<a
:id="getTabHeaderActionId(i)"
class="p-accordion-header-link p-accordion-header-action"
@ -12,10 +12,11 @@
: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 :class="getTabHeaderIconClass(i)" aria-hidden="true"></span>
<span v-if="tab.props && tab.props.header" class="p-accordion-header-text">{{ tab.props.header }}</span>
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
<span v-else :class="getTabHeaderIconClass(i)" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')"></span>
<span v-if="tab.props && tab.props.header" class="p-accordion-header-text" v-bind="getTabPT(tab, 'headertitle')">{{ tab.props.header }}</span>
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
</a>
</div>
@ -28,9 +29,9 @@
:class="getTabContentClass(tab)"
role="region"
:aria-labelledby="getTabHeaderActionId(i)"
v-bind="getTabProp(tab, 'contentProps')"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent') }"
>
<div class="p-accordion-content">
<div class="p-accordion-content" v-bind="getTabPT(tab, 'content')">
<component :is="tab"></component>
</div>
</div>