Tabs

<script lang="ts">
    import { Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    const tabList: PlainTab[] = [
        { itemKey: '1', tab: '文档' },
        { itemKey: '2', tab: '快速起步' },
        { itemKey: '3', tab: '帮助' },
    ];
    const paragraphStyle = 'line-height: 1.8';
    const questionStyle = 'line-height: 1.8; color: var(--semi-color-text-0); font-weight: 600';
    const answerStyle = 'line-height: 1.8; color: var(--semi-color-text-1)';
    const codeStyle = 'margin: 24px 0; padding: 20px; border: none; white-space: normal; border-radius: var(--semi-border-radius-medium); color: var(--semi-color-text-1); background-color: var(--semi-color-fill-0)';
</script>

<div>
    <Tabs {tabList} type="line">
        {#snippet panel({ itemKey })}
            {#if itemKey === '1'}
                <h3>文档</h3>
                <p style={paragraphStyle}>Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</p>
                <p style={paragraphStyle}>区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势：</p>
                <ul>
                    <li>
                        <p>Semi Design 以内容优先进行设计。</p>
                    </li>
                    <li>
                        <p>更容易地自定义主题。</p>
                    </li>
                    <li>
                        <p>适用国际化场景。</p>
                    </li>
                    <li>
                        <p>效率场景加入人性化关怀。</p>
                    </li>
                </ul>
            {:else if itemKey === '2'}
                <h3>快速起步</h3>
                <pre style={codeStyle}><code>yarn add @fibrae/semi-ui-svelte</code></pre>
            {:else}
                <h3>帮助</h3>
                <p style={questionStyle}>Q：有新组件需求、或者现有组件feature不能满足业务需求？</p>
                <p style={answerStyle}>右上角问题反馈，提交issue，label选择Feature Request / New Component Request 我们会高优处理这些需求。</p>
                <p style={questionStyle}>Q：对组件的使用有疑惑？</p>
                <p style={answerStyle}>欢迎进我们的客服lark群进行咨询提问。</p>
            {/if}
        {/snippet}
    </Tabs>
</div>

<script lang="ts">
    import { Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    const tabList: PlainTab[] = [
        { itemKey: '1', tab: '文档' },
        { itemKey: '2', tab: '快速起步' },
        { itemKey: '3', tab: '帮助' },
    ];
</script>

<Tabs {tabList} type="button">
    {#snippet panel({ item })}{item.tab}{/snippet}
</Tabs>

<script lang="ts">
    import { Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    const contentList = ['文档', '快速起步', '帮助'];
    const tabList: PlainTab[] = [
        { tab: '文档', itemKey: '1' },
        { tab: '快速起步', itemKey: '2' },
        { tab: '帮助', itemKey: '3' },
    ];
    let key = $state<string | null | undefined>('1');
</script>

<Tabs bind:activeKey={key} {tabList} type="card">
    <div>{contentList[Number(key) - 1]}</div>
</Tabs>

<script lang="ts">
    import { Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    const contentList = ['文档', '快速起步', '帮助'];
    const tabList: PlainTab[] = [
        { tab: '文档', itemKey: '1' },
        { tab: '快速起步', itemKey: '2' },
        { tab: '帮助', itemKey: '3' },
    ];
    let key = $state<string | null | undefined>('1');
</script>

<Tabs bind:activeKey={key} {tabList} type="slash">
    <div>{contentList[Number(key) - 1]}</div>
</Tabs>

<script lang="ts">
    import { IconFile, IconGlobe, IconHelpCircle } from '@fibrae/semi-icons-svelte';
    import { Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    const tabList: PlainTab[] = [
        { itemKey: '1', tab: '文档' },
        { itemKey: '2', tab: '快速起步' },
        { itemKey: '3', tab: '帮助' },
    ];
    const icons = { '1': IconFile, '2': IconGlobe, '3': IconHelpCircle } as const;
</script>

<Tabs {tabList}>
    {#snippet tab({ item })}
        {@const Icon = icons[item.itemKey as keyof typeof icons]}
        <span><Icon />{item.tab}</span>
    {/snippet}
    {#snippet panel({ item })}{item.tab}{/snippet}
</Tabs>

<script lang="ts">
    import { Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    const tabList: PlainTab[] = Array.from({ length: 10 }, (_, i) => ({ itemKey: `Tab-${i}`, tab: `Tab-${i}` }));
</script>

<Tabs more={4} style="width: 60%; margin: 20px" {tabList} type="card">
    {#snippet panel({ index })}Content of card tab {index}{/snippet}
</Tabs>

<script lang="ts">
    import { Button, Tabs, type PlainTab, type TabsMore } from '@fibrae/semi-ui-svelte';

    const tabList: PlainTab[] = Array.from({ length: 10 }, (_, i) => ({ itemKey: `Tab-${i}`, tab: `Tab-${i}` }));
    const more: TabsMore = { count: 4, dropdownProps: { trigger: 'click', position: 'bottomRight' } };
</script>

<Tabs {more} style="width: 60%; margin: 20px" {tabList} type="card">
    {#snippet moreTrigger()}
        <Button type="tertiary">Click to show More</Button>
    {/snippet}
    {#snippet panel({ index })}Content of card tab {index}{/snippet}
</Tabs>

<script lang="ts">
    import { IconFile, IconGlobe, IconHelpCircle } from '@fibrae/semi-icons-svelte';
    import { Radio, RadioGroup, Tabs, type PlainTab, type RadioValue, type TabType } from '@fibrae/semi-ui-svelte';

    let value = $state<RadioValue | undefined>('line');
    const type = $derived(value as TabType);
    const tabList: PlainTab[] = [
        { itemKey: '1', tab: '文档' },
        { itemKey: '2', tab: '快速起步' },
        { itemKey: '3', tab: '帮助' },
    ];
    const icons = { '1': IconFile, '2': IconGlobe, '3': IconHelpCircle } as const;
    const contentStyle = 'padding: 0 24px';
    const paragraphStyle = 'line-height: 1.8';
    const questionStyle = 'line-height: 1.8; color: var(--semi-color-text-0); font-weight: 600';
    const answerStyle = 'line-height: 1.8; color: var(--semi-color-text-1)';
    const codeStyle = 'margin: 24px 0; padding: 20px; border: none; white-space: normal; border-radius: 6px; color: var(--semi-color-text-1); background-color: var(--semi-color-fill-0)';
</script>

<RadioGroup bind:value style="display: flex; width: 200px; justify-content: center" type="button">
    <Radio value="line">Line</Radio>
    <Radio value="card">Card</Radio>
    <Radio value="button">Button</Radio>
</RadioGroup>
<br />
<br />
<Tabs {tabList} tabPosition="left" {type}>
    {#snippet tab({ item })}
        {@const Icon = icons[item.itemKey as keyof typeof icons]}
        <span><Icon />{item.tab}</span>
    {/snippet}
    {#snippet panel({ itemKey })}
        <div style={contentStyle}>
            {#if itemKey === '1'}
                <h3>文档</h3>
                <p style={paragraphStyle}>Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</p>
                <p style={paragraphStyle}>区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势：</p>
            {:else if itemKey === '2'}
                <h3>快速起步</h3>
                <pre style={codeStyle}><code>yarn add @fibrae/semi-ui-svelte</code></pre>
            {:else}
                <h3>帮助</h3>
                <p style={questionStyle}>Q：有新组件需求、或者现有组件feature不能满足业务需求？</p>
                <p style={answerStyle}>右上角问题反馈，提交issue，label选择Feature Request / New Component Request 我们会高优处理这些需求。</p>
                <p style={questionStyle}>Q：对组件的使用有疑惑？</p>
                <p style={answerStyle}>欢迎进我们的客服lark群进行咨询提问。</p>
            {/if}
        </div>
    {/snippet}
</Tabs>

<script lang="ts">
    import { Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    const tabList: PlainTab[] = Array.from({ length: 10 }, (_, i) => ({ itemKey: `Tab-${i}`, tab: `Tab-${i}` }));
</script>

<Tabs collapsible style="width: 60%; margin: 20px" {tabList} type="card">
    {#snippet panel({ index })}Content of card tab {index}{/snippet}
</Tabs>

<script lang="ts">
    import { Dropdown, DropdownItem, DropdownMenu, Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    let activeKey = $state<string | null | undefined>('Tab-0');
    const tabList: PlainTab[] = Array.from({ length: 10 }, (_, i) => ({ itemKey: `Tab-${i}`, tab: `Tab-${i}` }));
    const arrowStyle = 'width: 32px; height: 32px; margin: 0 12px; display: flex; justify-content: center; align-items: center; padding: 0; border: none; border-radius: 100%; background: var(--semi-grey-1); color: var(--semi-color-text); font-family: inherit; font-size: inherit; cursor: pointer';
</script>

<Tabs bind:activeKey collapsible style="width: 50%; margin: 20px" {tabList} type="card">
    {#snippet arrow({ items, position, onClick })}
        <Dropdown>
            {#snippet child({ props })}
                <button {...props} style={arrowStyle} type="button" onclick={onClick}>
                    {position === 'start' ? '←' : '→'}
                </button>
            {/snippet}
            {#snippet content()}
                <DropdownMenu>
                    {#each items as item (item.itemKey)}
                        <DropdownItem onclick={() => (activeKey = item.itemKey)}>{item.itemKey}</DropdownItem>
                    {/each}
                </DropdownMenu>
            {/snippet}
        </Dropdown>
    {/snippet}
    {#snippet panel({ index })}Content of card tab {index}{/snippet}
</Tabs>

<script lang="ts">
    import { Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    const positions = ['start', 'both', 'end'] as const;
    const tabList: PlainTab[] = Array.from({ length: 10 }, (_, i) => ({ itemKey: `Tab-${i}`, tab: `Tab-${i}` }));
</script>

{#each positions as position (position)}
    <Tabs arrowPosition={position} collapsible style="width: 60%; margin: 20px" {tabList} type="card">
        {#snippet panel({ index })}Content of card tab {index}{/snippet}
    </Tabs>
{/each}

<script lang="ts">
    import { Button, Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    let count = $state(8);
    const tabList = $derived<PlainTab[]>(Array.from({ length: count }, (_, i) => ({ itemKey: `${i}`, tab: `Tab-${i + 1}` })));

    const boxStyle = 'border: 1px solid var(--semi-color-border); padding: 12px';
    const noteStyle = 'margin-bottom: 8px; color: var(--semi-color-text-2); font-size: 12px';
</script>

{#snippet panel({ index }: { index: number })}Content of Tab {index + 1}{/snippet}

<div>
    <div style="margin-bottom: 12px">
        <Button style="margin-right: 8px" onclick={() => (count = Math.max(3, count - 2))}>减少 Tab</Button>
        <Button onclick={() => (count = Math.min(15, count + 2))}>增加 Tab</Button>
        <span style="margin-left: 12px">当前 Tab 数量: {count}</span>
    </div>

    <div style={`${boxStyle}; margin-bottom: 16px`}>
        <p style={noteStyle}>collapsible="auto" - 自动检测溢出</p>
        <Tabs collapsible="auto" {panel} {tabList} type="card" />
    </div>

    <div style={`${boxStyle}; max-width: 400px`}>
        <p style={noteStyle}>固定宽度 400px，测试较窄容器</p>
        <Tabs collapsible="auto" {panel} {tabList} type="card" />
    </div>
</div>

<script lang="ts">
    import { Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    const tabList: PlainTab[] = [
        { itemKey: '1', tab: '文档' },
        { itemKey: '2', tab: '快速起步', disabled: true },
        { itemKey: '3', tab: '帮助' },
    ];
</script>

<Tabs activeKey="1" {tabList}>
    {#snippet panel({ item })}{item.tab}{/snippet}
</Tabs>

<script lang="ts">
    import { Button, Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    const tabList: PlainTab[] = [
        { itemKey: '1', tab: '文档' },
        { itemKey: '2', tab: '快速起步' },
        { itemKey: '3', tab: '帮助' },
    ];

    const onExtraClick = () => {
        alert('you have clicked me!');
    };
</script>

<Tabs activeKey="1" {tabList}>
    {#snippet tabBarExtraContent()}
        <Button onclick={onExtraClick}>Extra Action</Button>
    {/snippet}
    {#snippet panel({ item })}{item.tab}{/snippet}
</Tabs>

<script lang="ts">
    import { Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    const tabList: PlainTab[] = [
        { itemKey: '1', tab: '文档' },
        { itemKey: '2', tab: '快速起步' },
        { itemKey: '3', tab: '帮助' },
    ];
</script>

<Tabs activeKey="1" {tabList}>
    {#snippet tabBar({ tabBarProps, tabBar })}
        <div class="tab-bar-box">
            这是二次封装的Tab Bar，当前ActiveKey：{tabBarProps.activeKey}
            {@render tabBar()}
        </div>
    {/snippet}
    {#snippet panel({ item })}{item.tab}{/snippet}
</Tabs>

<script lang="ts">
    import { TabItem, Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    let activeKey = $state<string | null | undefined>('1');
    let tabList = $state<PlainTab[]>([
        { itemKey: '1', tab: '文档' },
        { itemKey: '2', tab: '表格' },
        { itemKey: '3', tab: '幻灯片' },
        { itemKey: '4', tab: '表单' },
    ]);
    const contents: Record<string, string> = { '1': '文档内容', '2': '表格内容', '3': '幻灯片内容', '4': '表单内容' };

    // HTML5 drag and drop on the TabItems: the website has no sortable library for Svelte, and a sortable list would wrap
    // each tab in a button-role element that nests focusable tabs. Known limit: pointer only; use a sortable library for keyboard sorting.
    let draggingKey = $state<string | null>(null);
    const moveTo = (targetKey: string) => {
        const from = tabList.findIndex((item) => item.itemKey === draggingKey);
        const to = tabList.findIndex((item) => item.itemKey === targetKey);
        if (from < 0 || to < 0 || from === to) return;
        const next = [...tabList];
        const [moved] = next.splice(from, 1);
        next.splice(to, 0, moved);
        tabList = next;
    };
</script>

<Tabs bind:activeKey {tabList} type="line">
    <!-- the bar keeps Semi's own .semi-tabs-bar shell; the TabItems inside select their Tabs by themselves -->
    {#snippet tabBar()}
        <div aria-orientation="horizontal" class="semi-tabs-bar semi-tabs-bar-line semi-tabs-bar-top" role="tablist">
            {#each tabList as item (item.itemKey)}
                <TabItem
                    draggable="true"
                    itemKey={item.itemKey}
                    selected={activeKey === item.itemKey}
                    style={`cursor: grab; opacity: ${draggingKey === item.itemKey ? 0.5 : 1}; display: inline-flex`}
                    ondragend={() => (draggingKey = null)}
                    ondragenter={(event) => {
                        event.preventDefault();
                        moveTo(item.itemKey);
                    }}
                    ondragover={(event) => event.preventDefault()}
                    ondragstart={() => (draggingKey = item.itemKey)}
                >
                    {#snippet tab()}{item.tab}{/snippet}
                </TabItem>
            {/each}
        </div>
    {/snippet}
    {#snippet panel({ itemKey })}
        <div style="padding: 20px">{contents[itemKey]}</div>
    {/snippet}
</Tabs>

<script lang="ts">
    import { Button, ButtonGroup, Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    let newTabIndex = 0;
    let tabList = $state<PlainTab[]>([
        { tab: 'Tab 1', itemKey: '1' },
        { tab: 'Tab 2', itemKey: '2' },
    ]);
    const contents: Record<string, string> = { '1': 'Content of Tab Pane 1', '2': 'Content of Tab Pane 2' };
    let activeKey = $state<string | null | undefined>('1');

    const add = () => {
        const index = newTabIndex++;
        tabList = [...tabList, { tab: `New Tab ${index}`, itemKey: `newTab${index}` }];
        activeKey = `newTab${index}`;
    };

    const remove = () => {
        if (tabList.length > 1) {
            tabList = tabList.slice(0, -1);
            activeKey = tabList[tabList.length - 1].itemKey;
        }
    };
</script>

<Tabs bind:activeKey {tabList}>
    {#snippet tabBarExtraContent()}
        <ButtonGroup>
            <Button onclick={add}>新增</Button>
            <Button onclick={remove}>删除</Button>
        </ButtonGroup>
    {/snippet}
    {#snippet panel({ itemKey })}{contents[itemKey] ?? 'New Tab Pane'}{/snippet}
</Tabs>

<script lang="ts">
    import { Tabs, type PlainTab } from '@fibrae/semi-ui-svelte';

    let tabList = $state<PlainTab[]>([
        { tab: '文档', itemKey: '1', closable: true },
        { tab: '快速起步', itemKey: '2', closable: true },
        { tab: '帮助', itemKey: '3', closable: false },
    ]);

    const close = (key: string) => {
        tabList = tabList.filter((t) => t.itemKey !== key);
    };
</script>

<Tabs onTabClose={close} {tabList} type="card">
    {#snippet panel({ item })}{item.tab}{/snippet}
</Tabs>