mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Fixed #5643 - Reimplement: Accordion
This commit is contained in:
mertsincan
parent
6cbb5e0993
commit
10f530f7b1
30 changed files with 1049 additions and 243 deletions
20
components/lib/accordion/Accordion.d.ts
vendored
20
components/lib/accordion/Accordion.d.ts
vendored
|
|
@ -90,6 +90,7 @@ export interface AccordionPassThroughOptions {
|
|||
tab?: AccordionTabPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to AccordionTab helper components.
|
||||
* @deprecated since v4. Use new structure instead.
|
||||
*/
|
||||
accordiontab?: AccordionTabPassThroughOptionType;
|
||||
/**
|
||||
|
|
@ -115,15 +116,20 @@ export interface AccordionState {
|
|||
*/
|
||||
id: string;
|
||||
/**
|
||||
* Current active index state.
|
||||
* Current active value state.
|
||||
*/
|
||||
d_activeIndex: number | number[];
|
||||
d_value: string | string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid properties in Accordion component.
|
||||
*/
|
||||
export interface AccordionProps {
|
||||
/**
|
||||
* Value of the active panel or an array of values in multiple mode.
|
||||
* @defaultValue null
|
||||
*/
|
||||
value?: string | string[] | null | undefined;
|
||||
/**
|
||||
* When enabled, multiple tabs can be activated at the same time.
|
||||
* @defaultValue false
|
||||
|
|
@ -132,6 +138,7 @@ export interface AccordionProps {
|
|||
/**
|
||||
* Index of the active tab or an array of indexes in multiple mode.
|
||||
* @defaultValue null
|
||||
* @deprecated since v4. Use value property instead.
|
||||
*/
|
||||
activeIndex?: number | number[] | null | undefined;
|
||||
/**
|
||||
|
|
@ -200,24 +207,33 @@ export interface AccordionSlots {
|
|||
* Defines valid emits in Accordion component.
|
||||
*/
|
||||
export interface AccordionEmits {
|
||||
/**
|
||||
* Emitted when the active panel changes.
|
||||
* @param {string | string[] | null | undefined} value - Value of new active panel.
|
||||
*/
|
||||
'update:value'(value: string | string[] | null | undefined): void;
|
||||
/**
|
||||
* Emitted when the active tab changes.
|
||||
* @param {number | undefined} value - Index of new active tab.
|
||||
* @deprecated since v4. Use update:value emit instead.
|
||||
*/
|
||||
'update:activeIndex'(value: number | undefined): void;
|
||||
/**
|
||||
* Callback to invoke when a tab gets expanded.
|
||||
* @param {AccordionTabOpenEvent} event - Custom tab open event.
|
||||
* @deprecated since v4.
|
||||
*/
|
||||
'tab-open'(event: AccordionTabOpenEvent): void;
|
||||
/**
|
||||
* Callback to invoke when an active tab is collapsed by clicking on the header.
|
||||
* @param {AccordionTabCloseEvent} event - Custom tab close event.
|
||||
* @deprecated since v4.
|
||||
*/
|
||||
'tab-close'(event: AccordionTabCloseEvent): void;
|
||||
/**
|
||||
* Callback to invoke when an active tab is clicked.
|
||||
* @param {AccordionClickEvent} event - Custom tab click event.
|
||||
* @deprecated since v4.
|
||||
*/
|
||||
'tab-click'(event: AccordionClickEvent): void;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,63 +1,39 @@
|
|||
<template>
|
||||
<div :class="cx('root')" v-bind="ptmi('root')">
|
||||
<div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="cx('tab.root', { tab, index: i })" v-bind="getTabPT(tab, 'root', i)" data-pc-name="accordiontab" :data-pc-index="i" :data-p-active="isTabActive(i)">
|
||||
<div
|
||||
:style="getTabProp(tab, 'headerStyle')"
|
||||
:class="[cx('tab.header', { tab, index: i }), getTabProp(tab, 'headerClass')]"
|
||||
v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header', i) }"
|
||||
:data-p-highlight="isTabActive(i)"
|
||||
:data-p-disabled="getTabProp(tab, 'disabled')"
|
||||
>
|
||||
<a
|
||||
:id="getTabHeaderActionId(i)"
|
||||
:class="cx('tab.headerAction')"
|
||||
:tabindex="getTabProp(tab, 'disabled') ? -1 : tabindex"
|
||||
role="button"
|
||||
:aria-disabled="getTabProp(tab, 'disabled')"
|
||||
:aria-expanded="isTabActive(i)"
|
||||
:aria-controls="getTabContentId(i)"
|
||||
@click="onTabClick($event, tab, i)"
|
||||
@keydown="onTabKeyDown($event, tab, i)"
|
||||
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
|
||||
>
|
||||
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :active="isTabActive(i)" :index="i"></component>
|
||||
<component
|
||||
v-else-if="isTabActive(i)"
|
||||
:is="$slots.collapseicon ? $slots.collapseicon : collapseIcon ? 'span' : 'ChevronDownIcon'"
|
||||
:class="[cx('tab.headerIcon'), collapseIcon]"
|
||||
aria-hidden="true"
|
||||
v-bind="getTabPT(tab, 'headericon', i)"
|
||||
/>
|
||||
<component v-else :is="$slots.expandicon ? $slots.expandicon : expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
|
||||
<span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
|
||||
<template v-if="hasAccordionTab">
|
||||
<AccordionPanel v-for="(tab, i) of tabs" :key="getKey(tab, i)" :value="`${i}`" :pt="{ root: getTabPT(tab, 'root', i) }" :disabled="getTabProp(tab, 'disabled')">
|
||||
<AccordionHeader :class="getTabProp(tab, 'headerClass')" :pt="getHeaderPT(tab, i)">
|
||||
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isItemActive(`${i}`)" :active="isItemActive(`${i}`)" :index="i"></component>
|
||||
<span v-if="tab.props && tab.props.header" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
|
||||
<template #toggleicon="slotProps">
|
||||
<component
|
||||
v-if="slotProps.active"
|
||||
:is="$slots.collapseicon ? $slots.collapseicon : collapseIcon ? 'span' : 'ChevronDownIcon'"
|
||||
:class="[collapseIcon, slotProps.class]"
|
||||
aria-hidden="true"
|
||||
v-bind="getTabPT(tab, 'headericon', i)"
|
||||
/>
|
||||
<component v-else :is="$slots.expandicon ? $slots.expandicon : expandIcon ? 'span' : 'ChevronUpIcon'" :class="[expandIcon, slotProps.class]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
|
||||
</template>
|
||||
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
|
||||
</a>
|
||||
</div>
|
||||
<transition name="p-toggleable-content" v-bind="getTabPT(tab, 'transition', i)">
|
||||
<div
|
||||
v-if="lazy ? isTabActive(i) : true"
|
||||
v-show="lazy ? true : isTabActive(i)"
|
||||
:id="getTabContentId(i)"
|
||||
:style="getTabProp(tab, 'contentStyle')"
|
||||
:class="[cx('tab.toggleableContent'), getTabProp(tab, 'contentClass')]"
|
||||
role="region"
|
||||
:aria-labelledby="getTabHeaderActionId(i)"
|
||||
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent', i) }"
|
||||
>
|
||||
<div :class="cx('tab.content')" v-bind="getTabPT(tab, 'content', i)">
|
||||
<component :is="tab"></component>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</AccordionHeader>
|
||||
<AccordionContent :pt="getContentPT(tab, i)">
|
||||
<component :is="tab"></component>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</template>
|
||||
|
||||
<slot v-else></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
||||
import AccordionContent from 'primevue/accordioncontent';
|
||||
import AccordionHeader from 'primevue/accordionheader';
|
||||
import AccordionPanel from 'primevue/accordionpanel';
|
||||
import ChevronRightIcon from 'primevue/icons/chevronright';
|
||||
import Ripple from 'primevue/ripple';
|
||||
import { DomHandler, UniqueComponentId } from 'primevue/utils';
|
||||
import ChevronUpIcon from 'primevue/icons/chevronup';
|
||||
import { UniqueComponentId } from 'primevue/utils';
|
||||
import { mergeProps } from 'vue';
|
||||
import BaseAccordion from './BaseAccordion.vue';
|
||||
|
||||
|
|
@ -65,42 +41,78 @@ export default {
|
|||
name: 'Accordion',
|
||||
extends: BaseAccordion,
|
||||
inheritAttrs: false,
|
||||
emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
|
||||
emits: ['update:value', 'update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
|
||||
data() {
|
||||
return {
|
||||
id: this.$attrs.id,
|
||||
d_activeIndex: this.activeIndex
|
||||
d_value: this.value
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$attrs.id': function (newValue) {
|
||||
this.id = newValue || UniqueComponentId();
|
||||
},
|
||||
activeIndex(newValue) {
|
||||
this.d_activeIndex = newValue;
|
||||
value(newValue) {
|
||||
this.d_value = newValue;
|
||||
},
|
||||
activeIndex: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
if (this.hasAccordionTab) {
|
||||
this.d_value = this.multiple ? newValue?.map(String) : newValue?.toString();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.id = this.id || UniqueComponentId();
|
||||
},
|
||||
methods: {
|
||||
isItemActive(value) {
|
||||
return this.multiple ? this.d_value?.includes(value) : this.d_value === value;
|
||||
},
|
||||
updateValue(newValue) {
|
||||
const active = this.isItemActive(newValue);
|
||||
|
||||
if (this.multiple) {
|
||||
if (active) {
|
||||
this.d_value = this.d_value.filter((v) => v !== newValue);
|
||||
} else {
|
||||
if (this.d_value) this.d_value.push(newValue);
|
||||
else this.d_value = [newValue];
|
||||
}
|
||||
} else {
|
||||
this.d_value = active ? null : newValue;
|
||||
}
|
||||
|
||||
this.$emit('update:value', this.d_value);
|
||||
|
||||
// @deprecated since v4.
|
||||
this.$emit('update:activeIndex', this.multiple ? this.d_value?.map(Number) : Number(this.d_value));
|
||||
this.$emit(active ? 'tab-close' : 'tab-open', { originalEvent: undefined, index: Number(newValue) });
|
||||
},
|
||||
// @deprecated since v4. Use new structure instead.
|
||||
isAccordionTab(child) {
|
||||
return child.type.name === 'AccordionTab';
|
||||
},
|
||||
isTabActive(index) {
|
||||
return this.multiple ? this.d_activeIndex && this.d_activeIndex.includes(index) : this.d_activeIndex === index;
|
||||
},
|
||||
getTabProp(tab, name) {
|
||||
return tab.props ? tab.props[name] : undefined;
|
||||
},
|
||||
getKey(tab, index) {
|
||||
return this.getTabProp(tab, 'header') || index;
|
||||
},
|
||||
getTabHeaderActionId(index) {
|
||||
return `${this.id}_${index}_header_action`;
|
||||
getHeaderPT(tab, index) {
|
||||
return {
|
||||
root: mergeProps({ onClick: (event) => this.onTabClick(event, index) }, this.getTabProp(tab, 'headerProps'), this.getTabPT(tab, 'header', index)),
|
||||
toggleicon: mergeProps(this.getTabProp(tab, 'headeractionprops'), this.getTabPT(tab, 'headeraction', index))
|
||||
};
|
||||
},
|
||||
getTabContentId(index) {
|
||||
return `${this.id}_${index}_content`;
|
||||
getContentPT(tab, index) {
|
||||
return {
|
||||
root: mergeProps(this.getTabProp(tab, 'contentProps'), this.getTabPT(tab, 'toggleablecontent', index)),
|
||||
transition: this.getTabPT(tab, 'transition', index),
|
||||
content: this.getTabPT(tab, 'content', index)
|
||||
};
|
||||
},
|
||||
getTabPT(tab, key, index) {
|
||||
const count = this.tabs.length;
|
||||
|
|
@ -116,125 +128,18 @@ export default {
|
|||
count,
|
||||
first: index === 0,
|
||||
last: index === count - 1,
|
||||
active: this.isTabActive(index)
|
||||
active: this.isItemActive(`${index}`)
|
||||
}
|
||||
};
|
||||
|
||||
return mergeProps(this.ptm(`tab.${key}`, { tab: tabMetaData }), this.ptm(`accordiontab.${key}`, { accordiontab: tabMetaData }), this.ptm(`accordiontab.${key}`, tabMetaData), this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData));
|
||||
},
|
||||
onTabClick(event, tab, index) {
|
||||
this.changeActiveIndex(event, tab, index);
|
||||
onTabClick(event, index) {
|
||||
this.$emit('tab-click', { originalEvent: event, index });
|
||||
},
|
||||
onTabKeyDown(event, tab, index) {
|
||||
switch (event.code) {
|
||||
case 'ArrowDown':
|
||||
this.onTabArrowDownKey(event);
|
||||
break;
|
||||
|
||||
case 'ArrowUp':
|
||||
this.onTabArrowUpKey(event);
|
||||
break;
|
||||
|
||||
case 'Home':
|
||||
this.onTabHomeKey(event);
|
||||
break;
|
||||
|
||||
case 'End':
|
||||
this.onTabEndKey(event);
|
||||
break;
|
||||
|
||||
case 'Enter':
|
||||
case 'NumpadEnter':
|
||||
case 'Space':
|
||||
this.onTabEnterKey(event, tab, index);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
onTabArrowDownKey(event) {
|
||||
const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement.parentElement);
|
||||
|
||||
nextHeaderAction ? this.changeFocusedTab(event, nextHeaderAction) : this.onTabHomeKey(event);
|
||||
event.preventDefault();
|
||||
},
|
||||
onTabArrowUpKey(event) {
|
||||
const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement.parentElement);
|
||||
|
||||
prevHeaderAction ? this.changeFocusedTab(event, prevHeaderAction) : this.onTabEndKey(event);
|
||||
event.preventDefault();
|
||||
},
|
||||
onTabHomeKey(event) {
|
||||
const firstHeaderAction = this.findFirstHeaderAction();
|
||||
|
||||
this.changeFocusedTab(event, firstHeaderAction);
|
||||
event.preventDefault();
|
||||
},
|
||||
onTabEndKey(event) {
|
||||
const lastHeaderAction = this.findLastHeaderAction();
|
||||
|
||||
this.changeFocusedTab(event, lastHeaderAction);
|
||||
event.preventDefault();
|
||||
},
|
||||
onTabEnterKey(event, tab, index) {
|
||||
this.changeActiveIndex(event, tab, index);
|
||||
|
||||
event.preventDefault();
|
||||
},
|
||||
findNextHeaderAction(tabElement, selfCheck = false) {
|
||||
const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
|
||||
const headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
|
||||
|
||||
return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : null;
|
||||
},
|
||||
findPrevHeaderAction(tabElement, selfCheck = false) {
|
||||
const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
|
||||
const headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
|
||||
|
||||
return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : null;
|
||||
},
|
||||
findFirstHeaderAction() {
|
||||
return this.findNextHeaderAction(this.$el.firstElementChild, true);
|
||||
},
|
||||
findLastHeaderAction() {
|
||||
return this.findPrevHeaderAction(this.$el.lastElementChild, true);
|
||||
},
|
||||
changeActiveIndex(event, tab, index) {
|
||||
if (!this.getTabProp(tab, 'disabled')) {
|
||||
const active = this.isTabActive(index);
|
||||
const eventName = active ? 'tab-close' : 'tab-open';
|
||||
|
||||
if (this.multiple) {
|
||||
if (active) {
|
||||
this.d_activeIndex = this.d_activeIndex.filter((i) => i !== index);
|
||||
} else {
|
||||
if (this.d_activeIndex) this.d_activeIndex.push(index);
|
||||
else this.d_activeIndex = [index];
|
||||
}
|
||||
} else {
|
||||
this.d_activeIndex = this.d_activeIndex === index ? null : index;
|
||||
}
|
||||
|
||||
this.$emit('update:activeIndex', this.d_activeIndex);
|
||||
this.$emit(eventName, { originalEvent: event, index });
|
||||
}
|
||||
},
|
||||
changeFocusedTab(event, element) {
|
||||
if (element) {
|
||||
DomHandler.focus(element);
|
||||
|
||||
if (this.selectOnFocus) {
|
||||
const index = parseInt(element.parentElement.parentElement.dataset.pcIndex, 10);
|
||||
const tab = this.tabs[index];
|
||||
|
||||
this.changeActiveIndex(event, tab, index);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// @deprecated since v4.
|
||||
tabs() {
|
||||
return this.$slots.default().reduce((tabs, child) => {
|
||||
if (this.isAccordionTab(child)) {
|
||||
|
|
@ -249,14 +154,17 @@ export default {
|
|||
|
||||
return tabs;
|
||||
}, []);
|
||||
},
|
||||
hasAccordionTab() {
|
||||
return this.tabs.length;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ChevronDownIcon,
|
||||
AccordionPanel,
|
||||
AccordionHeader,
|
||||
AccordionContent,
|
||||
ChevronUpIcon,
|
||||
ChevronRightIcon
|
||||
},
|
||||
directives: {
|
||||
ripple: Ripple
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,26 @@ export default {
|
|||
name: 'BaseAccordion',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Array],
|
||||
default: undefined
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
activeIndex: {
|
||||
type: [Number, Array],
|
||||
default: null
|
||||
},
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
selectOnFocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
expandIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
|
|
@ -26,18 +34,16 @@ export default {
|
|||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
selectOnFocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
// @deprecated since v4.
|
||||
activeIndex: {
|
||||
type: [Number, Array],
|
||||
default: null
|
||||
}
|
||||
},
|
||||
style: AccordionStyle,
|
||||
provide() {
|
||||
return {
|
||||
$pcAccordion: this,
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,7 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const classes = {
|
||||
root: 'p-accordion p-component',
|
||||
tab: {
|
||||
root: ({ instance, index }) => [
|
||||
'p-accordion-panel',
|
||||
{
|
||||
'p-accordion-panel-active': instance.isTabActive(index)
|
||||
}
|
||||
],
|
||||
header: ({ instance, tab, index }) => [
|
||||
'p-accordion-panel-header',
|
||||
{
|
||||
'p-accordion-panel-header-active': instance.isTabActive(index),
|
||||
'p-disabled': instance.getTabProp(tab, 'disabled')
|
||||
}
|
||||
],
|
||||
headerAction: 'p-accordion-panel-header-content',
|
||||
headerIcon: 'p-accordion-panel-toggle-icon',
|
||||
headerTitle: 'p-accordion-panel-title',
|
||||
toggleableContent: 'p-accordion-panel-content-container',
|
||||
content: 'p-accordion-panel-content'
|
||||
}
|
||||
root: 'p-accordion p-component'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue