mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.1 KiB
52 lines
1.1 KiB
6 years ago
|
|
||
|
|
||
|
<script context="module">
|
||
|
export const TABS = {};
|
||
|
</script>
|
||
|
|
||
|
<script>
|
||
|
import { setContext } from 'svelte';
|
||
|
import { writable } from 'svelte/store';
|
||
|
|
||
|
const tabs = [];
|
||
|
const panels = [];
|
||
|
const selectedTab = writable(null);
|
||
|
const selectedPanel = writable(null);
|
||
|
|
||
|
setContext(TABS, {
|
||
|
registerTab: tab => {
|
||
|
tabs.push(tab);
|
||
|
selectedTab.update(current => current || tab);
|
||
|
},
|
||
|
|
||
|
unregisterTab: tab => {
|
||
|
const i = tabs.indexOf(tab);
|
||
|
tabs.splice(i, 1);
|
||
|
selectedTab.update(current => current === tab ? (tabs[i] || tabs[tabs.length - 1]) : current);
|
||
|
},
|
||
|
|
||
|
registerPanel: panel => {
|
||
|
panels.push(panel);
|
||
|
selectedPanel.update(current => current || panel);
|
||
|
},
|
||
|
|
||
|
unregisterPanel: panel => {
|
||
|
const i = panels.indexOf(panel);
|
||
|
panels.splice(i, 1);
|
||
|
selectedPanel.update(current => current === panel ? (panels[i] || panels[panels.length - 1]) : current);
|
||
|
},
|
||
|
|
||
|
selectTab: tab => {
|
||
|
const i = tabs.indexOf(tab);
|
||
|
selectedTab.set(tab);
|
||
|
selectedPanel.set(panels[i]);
|
||
|
},
|
||
|
|
||
|
selectedTab,
|
||
|
selectedPanel
|
||
|
});
|
||
|
</script>
|
||
|
|
||
|
<div class="tabs">
|
||
|
<slot></slot>
|
||
|
</div>
|