Refactor #3983 - For Accordion
parent
aa61a6323e
commit
cfc8674761
|
@ -8,6 +8,7 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
import { VNode } from 'vue';
|
import { VNode } from 'vue';
|
||||||
|
import { AccordionTabPassThroughOptionType } from '../accordiontab';
|
||||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||||
|
|
||||||
export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes) | null | undefined;
|
export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes) | null | undefined;
|
||||||
|
@ -58,6 +59,10 @@ export interface AccordionPassThroughOptions {
|
||||||
* Uses to pass attributes to the root's DOM element.
|
* Uses to pass attributes to the root's DOM element.
|
||||||
*/
|
*/
|
||||||
root?: AccordionPassThroughOptionType;
|
root?: AccordionPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to AccordionTab helper components.
|
||||||
|
*/
|
||||||
|
tab?: AccordionTabPassThroughOptionType;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="p-accordion p-component" v-bind="ptm('root')">
|
<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 v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i" v-bind="getTabPT(tab, 'root', i)">
|
||||||
<div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header') }">
|
<div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header', i) }">
|
||||||
<a
|
<a
|
||||||
:id="getTabHeaderActionId(i)"
|
:id="getTabHeaderActionId(i)"
|
||||||
class="p-accordion-header-link p-accordion-header-action"
|
class="p-accordion-header-link p-accordion-header-action"
|
||||||
|
@ -12,12 +12,12 @@
|
||||||
:aria-controls="getTabContentId(i)"
|
:aria-controls="getTabContentId(i)"
|
||||||
@click="onTabClick($event, tab, i)"
|
@click="onTabClick($event, tab, i)"
|
||||||
@keydown="onTabKeyDown($event, tab, i)"
|
@keydown="onTabKeyDown($event, tab, i)"
|
||||||
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction') }"
|
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
|
||||||
>
|
>
|
||||||
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
|
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
|
||||||
<component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="['p-accordion-toggle-icon', collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')" />
|
<component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="['p-accordion-toggle-icon', collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
|
||||||
<component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="['p-accordion-toggle-icon', expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')" />
|
<component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="['p-accordion-toggle-icon', expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
|
||||||
<span v-if="tab.props && tab.props.header" class="p-accordion-header-text" v-bind="getTabPT(tab, 'headertitle')">{{ tab.props.header }}</span>
|
<span v-if="tab.props && tab.props.header" class="p-accordion-header-text" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
|
||||||
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
|
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -30,9 +30,9 @@
|
||||||
:class="getTabContentClass(tab)"
|
:class="getTabContentClass(tab)"
|
||||||
role="region"
|
role="region"
|
||||||
:aria-labelledby="getTabHeaderActionId(i)"
|
:aria-labelledby="getTabHeaderActionId(i)"
|
||||||
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent') }"
|
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent', i) }"
|
||||||
>
|
>
|
||||||
<div class="p-accordion-content" v-bind="getTabPT(tab, 'content')">
|
<div class="p-accordion-content" v-bind="getTabPT(tab, 'content', i)">
|
||||||
<component :is="tab"></component>
|
<component :is="tab"></component>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -118,14 +118,19 @@ export default {
|
||||||
getTabContentId(index) {
|
getTabContentId(index) {
|
||||||
return `${this.id}_${index}_content`;
|
return `${this.id}_${index}_content`;
|
||||||
},
|
},
|
||||||
getTabPT(tab, key) {
|
getTabPT(tab, key, index) {
|
||||||
return this.ptmo(this.getTabProp(tab, 'pt'), key, {
|
const tabMetaData = {
|
||||||
props: tab.props,
|
props: tab.props,
|
||||||
parent: {
|
parent: {
|
||||||
props: this.$props,
|
props: this.$props,
|
||||||
state: this.$data
|
state: this.$data
|
||||||
|
},
|
||||||
|
context: {
|
||||||
|
index
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
|
|
||||||
|
return { ...this.ptm(`tab.${key}`, { tab: tabMetaData }), ...this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData) };
|
||||||
},
|
},
|
||||||
onTabClick(event, tab, index) {
|
onTabClick(event, tab, index) {
|
||||||
this.changeActiveIndex(event, tab, index);
|
this.changeActiveIndex(event, tab, index);
|
||||||
|
|
|
@ -19,6 +19,7 @@ export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughA
|
||||||
export interface AccordionTabPassThroughMethodOptions {
|
export interface AccordionTabPassThroughMethodOptions {
|
||||||
props: AccordionTabProps;
|
props: AccordionTabProps;
|
||||||
parent: AccordionPassThroughOptions;
|
parent: AccordionPassThroughOptions;
|
||||||
|
context: AccordionTabContext;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -114,6 +115,16 @@ export interface AccordionTabProps {
|
||||||
pt?: AccordionTabPassThroughOptions;
|
pt?: AccordionTabPassThroughOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines current options in AccordionTab component.
|
||||||
|
*/
|
||||||
|
export interface AccordionTabContext {
|
||||||
|
/**
|
||||||
|
* Current index of the tab.
|
||||||
|
*/
|
||||||
|
index: number;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Defines valid slots in AcordionTab slots.
|
* Defines valid slots in AcordionTab slots.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -28,10 +28,11 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getOption(obj = {}, key = '') {
|
getOption(options, key = '') {
|
||||||
const fKey = ObjectUtils.convertToFlatCase(key);
|
const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
|
||||||
|
const fKey = fKeys.shift();
|
||||||
|
|
||||||
return obj[Object.keys(obj).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''];
|
return fKey ? (typeof options === 'object' ? this.getOption(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], fKeys.join('.')) : undefined) : options;
|
||||||
},
|
},
|
||||||
getPTValue(obj = {}, key = '', params = {}) {
|
getPTValue(obj = {}, key = '', params = {}) {
|
||||||
const self = ObjectUtils.getItemValue(this.getOption(obj, key), params);
|
const self = ObjectUtils.getItemValue(this.getOption(obj, key), params);
|
||||||
|
@ -55,6 +56,7 @@ export default {
|
||||||
return !this.isUnstyled ? ObjectUtils.getItemValue(this.getOption(this.$options.css && this.$options.css.classes, key), { instance: this, props: this.$props, state: this.$data, ...params }) : undefined;
|
return !this.isUnstyled ? ObjectUtils.getItemValue(this.getOption(this.$options.css && this.$options.css.classes, key), { instance: this, props: this.$props, state: this.$data, ...params }) : undefined;
|
||||||
},
|
},
|
||||||
cxo(obj = {}, key = '', params = {}) {
|
cxo(obj = {}, key = '', params = {}) {
|
||||||
|
// @todo
|
||||||
return !this.isUnstyled ? ObjectUtils.getItemValue(this.getOption(obj.css && obj.css.classes, key), { instance: obj, props: obj && obj.props, state: obj && obj.data, ...params }) : undefined;
|
return !this.isUnstyled ? ObjectUtils.getItemValue(this.getOption(obj.css && obj.css.classes, key), { instance: obj, props: obj && obj.props, state: obj && obj.data, ...params }) : undefined;
|
||||||
},
|
},
|
||||||
sx(key = '', when = true, params = {}) {
|
sx(key = '', when = true, params = {}) {
|
||||||
|
|
Loading…
Reference in New Issue