Reverted #4646 - For TabView and Accordion
parent
7959929c16
commit
40f231b1f5
|
@ -57,7 +57,7 @@
|
||||||
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
||||||
import ChevronRightIcon from 'primevue/icons/chevronright';
|
import ChevronRightIcon from 'primevue/icons/chevronright';
|
||||||
import Ripple from 'primevue/ripple';
|
import Ripple from 'primevue/ripple';
|
||||||
import { DomHandler, HelperSet, UniqueComponentId } from 'primevue/utils';
|
import { DomHandler, UniqueComponentId } from 'primevue/utils';
|
||||||
import { mergeProps } from 'vue';
|
import { mergeProps } from 'vue';
|
||||||
import BaseAccordion from './BaseAccordion.vue';
|
import BaseAccordion from './BaseAccordion.vue';
|
||||||
|
|
||||||
|
@ -65,16 +65,10 @@ export default {
|
||||||
name: 'Accordion',
|
name: 'Accordion',
|
||||||
extends: BaseAccordion,
|
extends: BaseAccordion,
|
||||||
emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
|
emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
$accordionTabs: this.d_accordionTabs
|
|
||||||
};
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
id: this.$attrs.id,
|
id: this.$attrs.id,
|
||||||
d_activeIndex: this.activeIndex,
|
d_activeIndex: this.activeIndex
|
||||||
d_accordionTabs: new HelperSet({ type: 'AccordionTab' })
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -88,10 +82,10 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.id = this.id || UniqueComponentId();
|
this.id = this.id || UniqueComponentId();
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
|
||||||
this.d_accordionTabs.clear();
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
|
isAccordionTab(child) {
|
||||||
|
return child.type.name === 'AccordionTab';
|
||||||
|
},
|
||||||
isTabActive(index) {
|
isTabActive(index) {
|
||||||
return this.multiple ? this.d_activeIndex && this.d_activeIndex.includes(index) : this.d_activeIndex === index;
|
return this.multiple ? this.d_activeIndex && this.d_activeIndex.includes(index) : this.d_activeIndex === index;
|
||||||
},
|
},
|
||||||
|
@ -241,7 +235,19 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
tabs() {
|
tabs() {
|
||||||
return this.d_accordionTabs.get(this);
|
return this.$slots.default().reduce((tabs, child) => {
|
||||||
|
if (this.isAccordionTab(child)) {
|
||||||
|
tabs.push(child);
|
||||||
|
} else if (child.children && child.children instanceof Array) {
|
||||||
|
child.children.forEach((nestedChild) => {
|
||||||
|
if (this.isAccordionTab(nestedChild)) {
|
||||||
|
tabs.push(nestedChild);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return tabs;
|
||||||
|
}, []);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
|
@ -7,13 +7,6 @@ import BaseAccordionTab from './BaseAccordionTab.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AccordionTab',
|
name: 'AccordionTab',
|
||||||
extends: BaseAccordionTab,
|
extends: BaseAccordionTab
|
||||||
inject: ['$accordionTabs'],
|
|
||||||
mounted() {
|
|
||||||
this.$accordionTabs?.add(this.$);
|
|
||||||
},
|
|
||||||
unmounted() {
|
|
||||||
this.$accordionTabs?.delete(this.$);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -7,13 +7,6 @@ import BaseTabPanel from './BaseTabPanel.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TabPanel',
|
name: 'TabPanel',
|
||||||
extends: BaseTabPanel,
|
extends: BaseTabPanel
|
||||||
inject: ['$tabPanels'],
|
|
||||||
mounted() {
|
|
||||||
this.$tabPanels?.add(this.$);
|
|
||||||
},
|
|
||||||
unmounted() {
|
|
||||||
this.$tabPanels?.delete(this.$);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -95,7 +95,7 @@
|
||||||
import ChevronLeftIcon from 'primevue/icons/chevronleft';
|
import ChevronLeftIcon from 'primevue/icons/chevronleft';
|
||||||
import ChevronRightIcon from 'primevue/icons/chevronright';
|
import ChevronRightIcon from 'primevue/icons/chevronright';
|
||||||
import Ripple from 'primevue/ripple';
|
import Ripple from 'primevue/ripple';
|
||||||
import { DomHandler, HelperSet, UniqueComponentId } from 'primevue/utils';
|
import { DomHandler, UniqueComponentId } from 'primevue/utils';
|
||||||
import { mergeProps } from 'vue';
|
import { mergeProps } from 'vue';
|
||||||
import BaseTabView from './BaseTabView.vue';
|
import BaseTabView from './BaseTabView.vue';
|
||||||
|
|
||||||
|
@ -103,18 +103,12 @@ export default {
|
||||||
name: 'TabView',
|
name: 'TabView',
|
||||||
extends: BaseTabView,
|
extends: BaseTabView,
|
||||||
emits: ['update:activeIndex', 'tab-change', 'tab-click'],
|
emits: ['update:activeIndex', 'tab-change', 'tab-click'],
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
$tabPanels: this.d_tabPanels
|
|
||||||
};
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
id: this.$attrs.id,
|
id: this.$attrs.id,
|
||||||
d_activeIndex: this.activeIndex,
|
d_activeIndex: this.activeIndex,
|
||||||
isPrevButtonDisabled: true,
|
isPrevButtonDisabled: true,
|
||||||
isNextButtonDisabled: false,
|
isNextButtonDisabled: false
|
||||||
d_tabPanels: new HelperSet({ type: 'TabPanel' })
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -140,6 +134,9 @@ export default {
|
||||||
this.d_tabPanels.clear();
|
this.d_tabPanels.clear();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
isTabPanel(child) {
|
||||||
|
return child.type.name === 'TabPanel';
|
||||||
|
},
|
||||||
isTabActive(index) {
|
isTabActive(index) {
|
||||||
return this.d_activeIndex === index;
|
return this.d_activeIndex === index;
|
||||||
},
|
},
|
||||||
|
@ -348,7 +345,19 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
tabs() {
|
tabs() {
|
||||||
return this.d_tabPanels.get(this);
|
return this.$slots.default().reduce((tabs, child) => {
|
||||||
|
if (this.isTabPanel(child)) {
|
||||||
|
tabs.push(child);
|
||||||
|
} else if (child.children && child.children instanceof Array) {
|
||||||
|
child.children.forEach((nestedChild) => {
|
||||||
|
if (this.isTabPanel(nestedChild)) {
|
||||||
|
tabs.push(nestedChild);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return tabs;
|
||||||
|
}, []);
|
||||||
},
|
},
|
||||||
prevButtonAriaLabel() {
|
prevButtonAriaLabel() {
|
||||||
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.previous : undefined;
|
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.previous : undefined;
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')" data-pc-name="treetable">
|
<div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')" data-pc-name="treetable">
|
||||||
|
<slot></slot>
|
||||||
<div v-if="loading && loadingMode === 'mask'" :class="cx('loadingWrapper')" v-bind="ptm('loadingWrapper')">
|
<div v-if="loading && loadingMode === 'mask'" :class="cx('loadingWrapper')" v-bind="ptm('loadingWrapper')">
|
||||||
<div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
|
<div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
|
||||||
<slot name="loadingicon" :class="cx('loadingIcon')">
|
<slot name="loadingicon" :class="cx('loadingIcon')">
|
||||||
|
|
Loading…
Reference in New Issue