47 lines
1.1 KiB
Svelte
47 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { Tab, TabEvents } from '$lib/types';
|
|
import { createEventDispatcher } from 'svelte';
|
|
import { fade } from 'svelte/transition';
|
|
export let isCloseable = true;
|
|
export let tabs: Tab[] = [];
|
|
export let title: string;
|
|
export let isOpen = false;
|
|
|
|
$: activeTabID = tabs[0]?.id;
|
|
|
|
const dispatch = createEventDispatcher<TabEvents>();
|
|
const toggleTabs = (tab: Tab) => {
|
|
activeTabID = tab.id;
|
|
dispatch('select', tab);
|
|
};
|
|
</script>
|
|
|
|
<div class="flex cursor-default">
|
|
<span class="mr-2 font-semibold" on:click|stopPropagation={() => (isOpen = !isOpen)}>
|
|
{#if isCloseable}
|
|
<i class="fas fa-chevron-right icon" class:isOpen />
|
|
{/if}
|
|
{title}</span>
|
|
{#if isOpen && tabs}
|
|
<ul class="tabs" transition:fade>
|
|
{#each tabs as tab}
|
|
<div
|
|
class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}"
|
|
on:click|stopPropagation={() => toggleTabs(tab)}>
|
|
<i class="mr-1 {tab.icon}" />
|
|
{tab.title}
|
|
</div>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.icon {
|
|
transition-duration: 0.5s;
|
|
}
|
|
.isOpen {
|
|
transform: rotate(90deg);
|
|
}
|
|
</style>
|