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.
63 lines
1.5 KiB
63 lines
1.5 KiB
<script>
|
|
import Icon from '$/client/components/Icon.svelte';
|
|
import { createEventDispatcher } from "svelte";
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
export let icon_size = "36px";
|
|
export let panels = [];
|
|
export let selected;
|
|
export let vertical = false;
|
|
console.log("panels", panels);
|
|
|
|
const activate = (index) => {
|
|
panels = panels.map((x, i) => {
|
|
x.active = i == index;
|
|
if(x.active) selected = x;
|
|
return x;
|
|
});
|
|
|
|
dispatch("select", {index, selected});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|
|
|
|
<content>
|
|
{#if vertical}
|
|
<tabs class="vertical">
|
|
{#each panels as panel, i}
|
|
<a class:active={ panel.active} on:click={ () => activate(i) }>
|
|
{#if panel.icon}<Icon name={ panel.icon } size={ icon_size } />{/if}
|
|
{panel.title}
|
|
</a>
|
|
<component>
|
|
{#if panel.active}
|
|
<svelte:component this={panel.component} {...panel.props}/>
|
|
{/if}
|
|
</component>
|
|
{/each}
|
|
</tabs>
|
|
{:else}
|
|
<tabs>
|
|
{#each panels as panel, i}
|
|
<a class:active={ panel.active} on:click={ () => activate(i) }>
|
|
{#if panel.icon}<Icon name={ panel.icon } size={ icon_size } />{/if}
|
|
{panel.title}
|
|
</a>
|
|
{/each}
|
|
</tabs>
|
|
<component>
|
|
{#each panels as panel}
|
|
{#if panel.active}
|
|
<svelte:component this={selected.component} {...selected.props} />
|
|
{/if}
|
|
{/each}
|
|
</component>
|
|
{/if}
|
|
</content>
|
|
|