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

Refactor #3965 - For Accordion

pull/3997/head
mertsincan 2023-05-24 00:40:14 +01:00
parent 78552d81cf
commit e58fc57621
7 changed files with 175 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/lib/accordion/Accordion.d.ts vendored
View File

@ -128,6 +128,11 @@ export interface AccordionProps {
* @type {AccordionPassThroughOptions}
*/
pt?: AccordionPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**

111
components/lib/accordion/Accordion.vue
View File

@ -1,10 +1,17 @@
<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', i)">
<div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header', i) }">
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="accordion" data-pc-section="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-section="root" :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-pc-section="header"
:data-p-highlight="isTabActive(i)"
:data-p-disabled="getTabProp(tab, 'disabled')"
>
<a
:id="getTabHeaderActionId(i)"
class="p-accordion-header-link p-accordion-header-action"
:class="cx('tab.headerAction')"
:tabindex="getTabProp(tab, 'disabled') ? -1 : tabindex"
role="button"
:aria-disabled="getTabProp(tab, 'disabled')"
@ -13,11 +20,12 @@
@click="onTabClick($event, tab, i)"
@keydown="onTabKeyDown($event, tab, i)"
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
data-pc-section="headeraction"
>
<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', i)" />
<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', i)">{{ tab.props.header }}</span>
<component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('tab.headerIcon'), collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" data-pc-section="headericon" />
<component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" data-pc-section="headericon" />
<span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)" data-pc-section="headertitle">{{ tab.props.header }}</span>
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
</a>
</div>
@ -27,12 +35,13 @@
v-show="lazy ? true : isTabActive(i)"
:id="getTabContentId(i)"
:style="getTabProp(tab, 'contentStyle')"
:class="getTabContentClass(tab)"
:class="[cx('tab.toggleableContent'), getTabProp(tab, 'contentClass')]"
role="region"
:aria-labelledby="getTabHeaderActionId(i)"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent', i) }"
data-pc-section="toggleablecontent"
>
<div class="p-accordion-content" v-bind="getTabPT(tab, 'content', i)">
<div :class="cx('tab.content')" v-bind="getTabPT(tab, 'content', i)" data-pc-section="content">
<component :is="tab"></component>
</div>
</div>
@ -42,46 +51,16 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
import { DomHandler, UniqueComponentId } from 'primevue/utils';
import BaseAccordion from './BaseAccordion.vue';
export default {
name: 'Accordion',
extends: BaseComponent,
extends: BaseAccordion,
emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
props: {
multiple: {
type: Boolean,
default: false
},
activeIndex: {
type: [Number, Array],
default: null
},
lazy: {
type: Boolean,
default: false
},
expandIcon: {
type: String,
default: undefined
},
collapseIcon: {
type: String,
default: undefined
},
tabindex: {
type: Number,
default: 0
},
selectOnFocus: {
type: Boolean,
default: false
}
},
data() {
return {
id: this.$attrs.id,
@ -194,15 +173,15 @@ export default {
},
findNextHeaderAction(tabElement, selfCheck = false) {
const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
const headerElement = DomHandler.findSingle(nextTabElement, '.p-accordion-header');
const headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
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, '.p-accordion-header');
const headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
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);
@ -235,33 +214,12 @@ export default {
DomHandler.focus(element);
if (this.selectOnFocus) {
const index = parseInt(element.parentElement.parentElement.dataset.index, 10);
const index = parseInt(element.parentElement.parentElement.dataset.pcIndex, 10);
const tab = this.tabs[index];
this.changeActiveIndex(event, tab, index);
}
}
},
getTabClass(i) {
return [
'p-accordion-tab',
{
'p-accordion-tab-active': this.isTabActive(i)
}
];
},
getTabHeaderClass(tab, i) {
return [
'p-accordion-header',
this.getTabProp(tab, 'headerClass'),
{
'p-highlight': this.isTabActive(i),
'p-disabled': this.getTabProp(tab, 'disabled')
}
];
},
getTabContentClass(tab) {
return ['p-toggleable-content', this.getTabProp(tab, 'contentClass')];
}
},
computed: {
@ -290,22 +248,3 @@ export default {
}
};
</script>
<style>
.p-accordion-header-action {
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
position: relative;
text-decoration: none;
}
.p-accordion-header-action:focus {
z-index: 1;
}
.p-accordion-header-text {
line-height: 1;
}
</style>

95
components/lib/accordion/BaseAccordion.vue Normal file
View File

@ -0,0 +1,95 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-accordion-header-action {
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
position: relative;
text-decoration: none;
}
.p-accordion-header-action:focus {
z-index: 1;
}
.p-accordion-header-text {
line-height: 1;
}
`;
const classes = {
root: 'p-accordion p-component',
tab: {
root: ({ instance, index }) => [
'p-accordion-tab',
{
'p-accordion-tab-active': instance.isTabActive(index)
}
],
header: ({ instance, tab, index }) => [
'p-accordion-header',
{
'p-highlight': instance.isTabActive(index),
'p-disabled': instance.getTabProp(tab, 'disabled')
}
],
headerAction: 'p-accordion-header-link p-accordion-header-action',
headerIcon: 'p-accordion-toggle-icon',
headerTitle: 'p-accordion-header-text',
toggleableContent: 'p-toggleable-content',
content: 'p-accordion-content'
}
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true });
export default {
name: 'BaseAccordion',
extends: BaseComponent,
props: {
multiple: {
type: Boolean,
default: false
},
activeIndex: {
type: [Number, Array],
default: null
},
lazy: {
type: Boolean,
default: false
},
expandIcon: {
type: String,
default: undefined
},
collapseIcon: {
type: String,
default: undefined
},
tabindex: {
type: Number,
default: 0
},
selectOnFocus: {
type: Boolean,
default: false
}
},
css: {
classes
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>

15
components/lib/accordiontab/AccordionTab.vue
View File

@ -3,21 +3,10 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import BaseAccordionTab from './BaseAccordionTab.vue';
export default {
name: 'AccordionTab',
extends: BaseComponent,
props: {
header: null,
headerStyle: null,
headerClass: null,
headerProps: null,
headerActionProps: null,
contentStyle: null,
contentClass: null,
contentProps: null,
disabled: Boolean
}
extends: BaseAccordionTab
};
</script>

19
components/lib/accordiontab/BaseAccordionTab.vue Normal file
View File

@ -0,0 +1,19 @@
<script>
import BaseComponent from 'primevue/basecomponent';
export default {
name: 'BaseAccordionTab',
extends: BaseComponent,
props: {
header: null,
headerStyle: null,
headerClass: null,
headerProps: null,
headerActionProps: null,
contentStyle: null,
contentClass: null,
contentProps: null,
disabled: Boolean
}
};
</script>

22
components/lib/basecomponent/BaseComponent.vue
View File

@ -28,15 +28,19 @@ export default {
}
},
methods: {
getOption(options, key = '') {
getOptionValue(options, key = '', params = {}) {
const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
const fKey = fKeys.shift();
return fKey ? (typeof options === 'object' ? this.getOption(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], fKeys.join('.')) : undefined) : options;
return fKey
? ObjectUtils.isObject(options)
? this.getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
: undefined
: ObjectUtils.getItemValue(options, params);
},
getPTValue(obj = {}, key = '', params = {}) {
const self = ObjectUtils.getItemValue(this.getOption(obj, key), params);
const globalPT = ObjectUtils.getItemValue(this.getOption(this.defaultPT, key), params);
const self = this.getOptionValue(obj, key, params);
const globalPT = this.getOptionValue(this.defaultPT, key, params);
const merged = mergeProps(self, globalPT);
return merged;
@ -53,16 +57,16 @@ export default {
return this.getPTValue(obj, key, params);
},
cx(key = '', params = {}) {
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 ? this.getOptionValue(this.$options.css && this.$options.css.classes, key, { instance: this, props: this.$props, state: this.$data, ...params }) : undefined;
},
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 ? this.getOptionValue(obj.css && obj.css.classes, key, { instance: obj, props: obj && obj.props, state: obj && obj.data, ...params }) : undefined;
},
sx(key = '', when = true, params = {}) {
if (when) {
const self = ObjectUtils.getItemValue(this.getOption(this.$options.css && this.$options.css.inlineStyles, key), { instance: this, props: this.$props, state: this.$data, ...params });
const base = ObjectUtils.getItemValue(this.getOption(inlineStyles, key), { instance: this, props: this.$props, state: this.$data, ...params });
const self = this.getOptionValue(this.$options.css && this.$options.css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, ...params });
const base = this.getOptionValue(inlineStyles, key, { instance: this, props: this.$props, state: this.$data, ...params });
return [base, self];
}
@ -72,7 +76,7 @@ export default {
},
computed: {
defaultPT() {
return ObjectUtils.getItemValue(this.getOption(this.$primevue.config.pt, this.$.type.name), this.defaultsParams);
return this.getOptionValue(this.$primevue.config.pt, this.$.type.name, this.defaultsParams);
},
defaultsParams() {
return { instance: this };

20
components/lib/utils/ObjectUtils.js
View File

@ -80,10 +80,6 @@ export default {
}
},
isFunction(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
},
getItemValue(obj, ...params) {
return this.isFunction(obj) ? obj(...params) : obj;
},
@ -218,6 +214,22 @@ export default {
return !this.isEmpty(value);
},
isFunction(value) {
return !!(value && value.constructor && value.call && value.apply);
},
isObject(value) {
return value !== null && value instanceof Object && value.constructor === Object;
},
isDate(value) {
return value !== null && value instanceof Date && value.constructor === Date;
},
isArray(value) {
return value !== null && Array.isArray(value);
},
isPrintableCharacter(char = '') {
return this.isNotEmpty(char) && char.length === 1 && char.match(/\S| /);
},