How to create your own Tab component?

[slinso]

I wanted to implement some custom styled Tabs based on the headless Tab component. I know, that svelte does not support inheritance, but I tried the workarounds mentioned in Svelte #192 but I can not get it to work.
I always end up with this error:
Error: <TabList /> is missing a parent <TabGroup /> component.

I have your TabGroup Wrapper Element.

<TabGroup class="col-span-3">
	<TabList>
		<TabItem>Tab 1</TabItem>
		<TabItem>Tab 2</TabItem>
		<TabItem>Tab 3</TabItem>
	</TabList>
...

And then I wrap the TabList in my own TabList Element:

<script lang="ts">
	import { TabList } from '@rgossiaux/svelte-headlessui';
</script>

<TabList {...$$props} class="relative z-0 flex flex-1 divide-x divide-gray-200 rounded-lg shadow">
	<slot />
</TabList>

Why is the context undefined? It should be passed down the subtree? Shouldn't it?

[rgossiaux]

Works fine for me: https://svelte.dev/repl/42d9fb51060045be822ff19c459e5833?version=3.46.4

[slinso]

Strange, I simplified my code to match your REPL, but I still get the context error. I will try to debug it further.

[slinso]

Sorry, stupid mistake. I hat two Tab Containers on my page and only refactored one of them. The old one threw the error, but that was not obvious from the console messages.

[rgossiaux]

No worries, glad you figured it out!

[jet10000]

<script>

    import {Tab, TabGroup, TabList, TabPanel, TabPanels} from "@rgossiaux/svelte-headlessui";

    let categories = {
        Recent: [
            {
                id: 1,
                title: 'Does drinking coffee make you smarter?',
                date: '5h ago',
                commentCount: 5,
                shareCount: 2,
            },
            {
                id: 2,
                title: "So you've bought coffee... now what?",
                date: '2h ago',
                commentCount: 3,
                shareCount: 2,
            },
        ],
        Popular: [
            {
                id: 1,
                title: 'Is tech making coffee better or worse?',
                date: 'Jan 7',
                commentCount: 29,
                shareCount: 16,
            },
            {
                id: 2,
                title: 'The most innovative things happening in coffee',
                date: 'Mar 19',
                commentCount: 24,
                shareCount: 12,
            },
        ],
        Trending: [
            {
                id: 1,
                title: 'Ask Me Anything: 10 answers to your questions about coffee',
                date: '2d ago',
                commentCount: 9,
                shareCount: 5,
            },
            {
                id: 2,
                title: "The worst advice we've ever heard about coffee",
                date: '4d ago',
                commentCount: 1,
                shareCount: 2,
            },
        ],
    }
</script>

            <div class="not-prose">
                <TabGroup>
                    <TabList class="tabs">
                        {#each Object.keys(categories) as category}
                            <Tab let:selected>
                                {#if selected}
                                    <button class="tab tab-bordered tab-active">{category}</button>
                                {:else }
                                    <button class="tab tab-bordered"> {category}</button>
                                {/if}
                            </Tab>
                        {/each}
                    </TabList>
                    <TabPanels class="mt-2">
                        {#each Object.values(categories) as posts, idx}
                            <TabPanel
                                    :key="{idx}"
                                    class=""
                            >
                                <ul>
                                    {#each posts as post}
                                        <li
                                                key="{post.id}"
                                                class="relative p-3 rounded-md hover:glass hover:shadow-none"
                                        >
                                            <h3 class="leading-5">
                                                { post.title }
                                            </h3>
                                            <ul class="flex mt-1 space-x-1 text-xs leading-4 text-gray-500">
                                                <li>{ post.date }</li>
                                                <li>&middot;</li>
                                                <li>{ post.commentCount } comments</li>
                                                <li>&middot;</li>
                                                <li>{ post.shareCount } shares</li>
                                            </ul>
                                            <a href="#" class="absolute inset-0 rounded-md focus:z-10"/>
                                        </li>
                                    {/each}
                                </ul>
                            </TabPanel>
                        {/each}
                    </TabPanels>
                </TabGroup>
            </div>

Tailwindcss https://tailwindcss.com/
Daisyui https://daisyui.com/
svelte https://svelte.dev/

https://headlessui.dev/vue/tabs