Missing on:tabChanged event

[abiiranathan]

There is no way to restore the current state of the tabs. It would be nice to have an event fire when the tab changes. Users can update their svelte state and localStorage.

Something like...

<Tabs initialSelectedIndex={$tabIndex} on:tabChanged={index =>{
  tabIndex.set(index);
}>
	<TabList>
		<Tab>Triage</Tab>
	</TabList>

	<TabPanel>	
	     <TriageForm visit_id={visit.id} />	
	</TabPanel>

</Tabs>

[dojoVader]

Facing this current issue also

[dojoVader]

I created a new file just to fix that

`<script>
import { getContext, onMount, tick, createEventDispatcher } from 'svelte';

import getId from 'svelte-tabs/src/id';
import { TABS } from 'svelte-tabs/src/Tabs.svelte';

let tabEl;

const tab = {
    id: getId()
};
const { registerTab, registerTabElement, selectTab, selectedTab, controls } = getContext(TABS);

let isSelected;
$: isSelected = $selectedTab === tab;

registerTab(tab);

const dispatcher = createEventDispatcher();

onMount(async () => {
    await tick();
    registerTabElement(tabEl);
});

function handleTabSelection(tab){
    selectTab(tab);
    dispatcher('changed',tab);
}

</script> <style> .svelte-tabs__tab { border: none; border-bottom: 2px solid transparent; color: #000000; cursor: pointer; list-style: none; display: inline-block; padding: 0.5em 0.75em; } .svelte-tabs__tab:focus { outline: thin dotted; } .svelte-tabs__selected { border-bottom: 2px solid #4F81E5; color: #4F81E5; } </style>

handleTabSelection(tab)}>

`

[abiiranathan]

wow... I need to update. Thanks 👍👍👍

[abiiranathan]

If all is well tested, submit a pull request to @nickyhajal

[dojoVader]

I'll make a pull request.