← All changes | modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-handler.js +6 -11 4.3.2 → 3.35.0-dev4 View file →

		@@ -1,8 +1,7 @@
1	1	import { register } from '@elementor/frontend-handlers';
2	2	import { Alpine } from '@elementor/alpinejs';
3		-import { TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE, getTabId, getTabContentId, getIndex, getNextTab, getDirectTabCount } from './utils';
4		-import { getActiveTabId, setActiveTabIndex, validateActiveTab } from './editor-tabs-state';
	3	+import { TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE, getTabId, getTabContentId, getIndex, getNextTab } from './utils';
5	4
6	5	const SELECTED_CLASS = 'e--selected';
7	6
8	7	register( {
		@@ -9,17 +8,11 @@
9	8	elementType: 'e-tabs',
10	9	id: 'e-tabs-handler',
11	10	callback: ( { element, settings } ) => {
12	11	const tabsId = element.dataset.id;
13		- const defaultActiveTab = settings[ 'default-active-tab' ];
14	12
15	13	Alpine.data( `eTabs${ tabsId }`, () => ( {
16		- init() {
17		- validateActiveTab( tabsId, getDirectTabCount( this.$el ) );
18		- },
19		- get activeTab() {
20		- return getActiveTabId( tabsId, defaultActiveTab );
21		- },
	14	+ activeTab: settings[ 'default-active-tab' ],
22	15
23	16	navigateTabs( { key, target: tab } ) {
24	17	const nextTab = getNextTab( key, tab );
25	18
		@@ -31,9 +24,11 @@
31	24
32	25	return getTabId( tabsId, index );
33	26	},
34	27	'@click'() {
35		- setActiveTabIndex( tabsId, getIndex( this.$el, TAB_ELEMENT_TYPE ) );
	28	+ const id = this.$el.id;
	29	+
	30	+ this.activeTab = id;
36	31	},
37	32	'@keydown.arrow-right.prevent'( event ) {
38	33	this.navigateTabs( event );
39	34	},
		@@ -42,9 +37,9 @@
42	37	},
43	38	':class'() {
44	39	const id = this.$el.id;
45	40
46		- return { [ SELECTED_CLASS ]: this.activeTab === id };
	41	+ return this.activeTab === id ? SELECTED_CLASS : '';
47	42	},
48	43	':aria-selected'() {
49	44	const id = this.$el.id;
50	45