loviuz/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

TabbedGroup now supports more tabs

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-10-24 21:45:54 +02:00
parent 5440dfb516
commit 2df9aa8564
1 changed files with 86 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

136
src/UI/Base/TabbedGroup.svelte
View file

@ -1,32 +1,34 @@
<script lang="ts"> <script lang="ts">
/** /**
* Thin wrapper around 'TabGroup' which binds the state * Thin wrapper around 'TabGroup' which binds the state
*/ */
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui"; import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui";
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"; import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource";
import { twJoin } from "tailwind-merge"; import { twJoin } from "tailwind-merge";
/** /**
* If a condition is given for a certain tab, it will only be shown if this condition is true. * If a condition is given for a certain tab, it will only be shown if this condition is true.
* E.g. * E.g.
* condition3 = new ImmutableStore(false) will always hide tab3 (the fourth tab) * condition3 = new ImmutableStore(false) will always hide tab3 (the fourth tab)
*/ */
let tr = new ImmutableStore(true) let tr = new ImmutableStore(true);
export let condition0: Store<boolean> = tr export let condition0: Store<boolean> = tr;
export let condition1: Store<boolean> = tr export let condition1: Store<boolean> = tr;
export let condition2: Store<boolean> = tr export let condition2: Store<boolean> = tr;
export let condition3: Store<boolean> = tr export let condition3: Store<boolean> = tr;
export let condition4: Store<boolean> = tr export let condition4: Store<boolean> = tr;
export let condition5: Store<boolean> = tr;
export let tab: UIEventSource<number> = new UIEventSource<number>(0);
let tabElements: HTMLElement[] = []; export let condition6: Store<boolean> = tr;
$: tabElements[$tab]?.click(); export let tab: UIEventSource<number> = new UIEventSource<number>(0);
$: { let tabElements: HTMLElement[] = [];
if (tabElements[tab.data]) { $: tabElements[$tab]?.click();
window.setTimeout(() => tabElements[tab.data].click(), 50); $: {
} if (tabElements[tab.data]) {
window.setTimeout(() => tabElements[tab.data].click(), 50);
} }
}
</script> </script>
<div class="tabbedgroup flex h-full w-full"> <div class="tabbedgroup flex h-full w-full">
@ -41,31 +43,55 @@
> >
<div class="interactive sticky top-0 flex items-center justify-between"> <div class="interactive sticky top-0 flex items-center justify-between">
<TabList class="flex flex-wrap"> <TabList class="flex flex-wrap">
<Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition0 && "hidden")}> {#if $$slots.title0}
<div bind:this={tabElements[0]} class="flex"> <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition0 && "hidden")}>
<slot name="title0">Tab 0</slot> <div bind:this={tabElements[0]} class="flex">
</div> <slot name="title0">Tab 0</slot>
</Tab> </div>
<Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition1 && "hidden")}> </Tab>
<div bind:this={tabElements[1]} class="flex"> {/if}
<slot name="title1" /> {#if $$slots.title1}
</div> <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition1 && "hidden")}>
</Tab> <div bind:this={tabElements[1]} class="flex">
<Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition2 && "hidden")}> <slot name="title1" />
<div bind:this={tabElements[2]} class="flex"> </div>
<slot name="title2" /> </Tab>
</div> {/if}
</Tab> {#if $$slots.title2}
<Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition3 && "hidden")}> <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition2 && "hidden")}>
<div bind:this={tabElements[3]} class="flex"> <div bind:this={tabElements[2]} class="flex">
<slot name="title3" /> <slot name="title2" />
</div> </div>
</Tab> </Tab>
<Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition4 && "hidden")}> {/if}
<div bind:this={tabElements[4]} class="flex"> {#if $$slots.title3}
<slot name="title4" /> <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition3 && "hidden")}>
</div> <div bind:this={tabElements[3]} class="flex">
</Tab> <slot name="title3" />
</div>
</Tab>
{/if}
{#if $$slots.title4}
<Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition4 && "hidden")}>
<div bind:this={tabElements[4]} class="flex">
<slot name="title4" />
</div>
</Tab>
{/if}
{#if $$slots.title5}
<Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition5 && "hidden")}>
<div bind:this={tabElements[5]} class="flex">
<slot name="title5" />
</div>
</Tab>
{/if}
{#if $$slots.title6}
<Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition6 && "hidden")}>
<div bind:this={tabElements[6]} class="flex">
<slot name="title6" />
</div>
</Tab>
{/if}
</TabList> </TabList>
<slot name="post-tablist" /> <slot name="post-tablist" />
</div> </div>
@ -96,6 +122,16 @@
<div /> <div />
</slot> </slot>
</TabPanel> </TabPanel>
<TabPanel class="tabpanel">
<slot name="content5">
<div />
</slot>
</TabPanel>
<TabPanel class="tabpanel">
<slot name="content6">
<div />
</slot>
</TabPanel>
</TabPanels> </TabPanels>
</div> </div>
</TabGroup> </TabGroup>