Tabs

<script setup lang="ts">
    import { TabPane, Tabs } from '@fibrous/semi-ui-vue';

    const paragraphStyle = { lineHeight: 1.8 };
    const questionStyle = { lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 };
    const answerStyle = { lineHeight: 1.8, color: 'var(--semi-color-text-1)' };
    const codeStyle = {
        margin: '24px 0',
        padding: '20px',
        border: 'none',
        whiteSpace: 'normal',
        borderRadius: 'var(--semi-border-radius-medium)',
        color: 'var(--semi-color-text-1)',
        backgroundColor: 'var(--semi-color-fill-0)',
    };
</script>

<template>
    <div>
        <Tabs type="line">
            <TabPane itemKey="1">
                <template #tab>文档</template>
                <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>
            </TabPane>
            <TabPane itemKey="2">
                <template #tab>快速起步</template>
                <h3>快速起步</h3>
                <pre :style="codeStyle"><code>yarn add @fibrous/semi-ui-vue</code></pre>
            </TabPane>
            <TabPane itemKey="3">
                <template #tab>帮助</template>
                <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>
            </TabPane>
        </Tabs>
    </div>
</template>

<script setup lang="ts">
    import { TabPane, Tabs } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Tabs type="button">
        <TabPane itemKey="1">
            <template #tab>文档</template>
            文档
        </TabPane>
        <TabPane itemKey="2">
            <template #tab>快速起步</template>
            快速起步
        </TabPane>
        <TabPane itemKey="3">
            <template #tab>帮助</template>
            帮助
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Tabs } from '@fibrous/semi-ui-vue';

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

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

<script setup lang="ts">
    import { ref } from 'vue';
    import { Tabs } from '@fibrous/semi-ui-vue';

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

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

<script setup lang="ts">
    import { IconFile, IconGlobe, IconHelpCircle } from '@fibrous/semi-icons-vue';
    import { TabPane, Tabs } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Tabs>
        <TabPane itemKey="1">
            <template #tab>
                <span><IconFile />文档</span>
            </template>
            文档
        </TabPane>
        <TabPane itemKey="2">
            <template #tab>
                <span><IconGlobe />快速起步</span>
            </template>
            快速起步
        </TabPane>
        <TabPane itemKey="3">
            <template #tab>
                <span><IconHelpCircle />帮助</span>
            </template>
            帮助
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { TabPane, Tabs } from '@fibrous/semi-ui-vue';

    const indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
</script>

<template>
    <Tabs :more="4" :style="{ width: '60%', margin: '20px' }" type="card">
        <TabPane v-for="i in indexes" :key="i" :itemKey="`Tab-${i}`">
            <template #tab>Tab-{{ i }}</template>
            Content of card tab {{ i }}
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { Button, TabPane, Tabs, type TabsMore } from '@fibrous/semi-ui-vue';

    const indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    const more: TabsMore = { count: 4, dropdownProps: { trigger: 'click', position: 'bottomRight' } };
</script>

<template>
    <Tabs :more="more" :style="{ width: '60%', margin: '20px' }" type="card">
        <template #more>
            <Button type="tertiary">Click to show More</Button>
        </template>
        <TabPane v-for="i in indexes" :key="i" :itemKey="`Tab-${i}`">
            <template #tab>Tab-{{ i }}</template>
            Content of card tab {{ i }}
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { IconFile, IconGlobe, IconHelpCircle } from '@fibrous/semi-icons-vue';
    import { Radio, RadioGroup, TabPane, Tabs, type RadioValue, type TabType } from '@fibrous/semi-ui-vue';

    const type = ref<RadioValue | undefined>('line');
    const contentStyle = { padding: '0 24px' };
    const paragraphStyle = { lineHeight: 1.8 };
    const questionStyle = { lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 };
    const answerStyle = { lineHeight: 1.8, color: 'var(--semi-color-text-1)' };
    const codeStyle = {
        margin: '24px 0',
        padding: '20px',
        border: 'none',
        whiteSpace: 'normal',
        borderRadius: '6px',
        color: 'var(--semi-color-text-1)',
        backgroundColor: 'var(--semi-color-fill-0)',
    };
</script>

<template>
    <RadioGroup v-model="type" :style="{ display: 'flex', width: '200px', justifyContent: 'center' }" type="button">
        <Radio value="line">Line</Radio>
        <Radio value="card">Card</Radio>
        <Radio value="button">Button</Radio>
    </RadioGroup>
    <br />
    <br />
    <Tabs tabPosition="left" :type="type as TabType">
        <TabPane itemKey="1">
            <template #tab>
                <span><IconFile />文档</span>
            </template>
            <div :style="contentStyle">
                <h3>文档</h3>
                <p :style="paragraphStyle">Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</p>
                <p :style="paragraphStyle">区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势：</p>
            </div>
        </TabPane>
        <TabPane itemKey="2">
            <template #tab>
                <span><IconGlobe />快速起步</span>
            </template>
            <div :style="contentStyle">
                <h3>快速起步</h3>
                <pre :style="codeStyle"><code>yarn add @fibrous/semi-ui-vue</code></pre>
            </div>
        </TabPane>
        <TabPane itemKey="3">
            <template #tab>
                <span><IconHelpCircle />帮助</span>
            </template>
            <div :style="contentStyle">
                <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>
            </div>
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { TabPane, Tabs } from '@fibrous/semi-ui-vue';

    const indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
</script>

<template>
    <Tabs collapsible :style="{ width: '60%', margin: '20px' }" type="card">
        <TabPane v-for="i in indexes" :key="i" :itemKey="`Tab-${i}`">
            <template #tab>Tab-{{ i }}</template>
            Content of card tab {{ i }}
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Dropdown, TabPane, Tabs } from '@fibrous/semi-ui-vue';

    const activeKey = ref('Tab-0');
    const indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    const arrowStyle = {
        width: '32px',
        height: '32px',
        margin: '0 12px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '0',
        border: 'none',
        borderRadius: '100%',
        background: 'var(--semi-grey-1)',
        color: 'var(--semi-color-text)',
        fontFamily: 'inherit',
        fontSize: 'inherit',
        cursor: 'pointer',
    };
</script>

<template>
    <Tabs v-model:activeKey="activeKey" collapsible :style="{ width: '50%', margin: '20px' }" type="card">
        <template #arrow="{ items, position, onClick }">
            <Dropdown>
                <button :style="arrowStyle" type="button" @click="onClick">
                    {{ position === 'start' ? '←' : '→' }}
                </button>
                <template #content>
                    <Dropdown.Menu>
                        <Dropdown.Item v-for="item in items" :key="item.itemKey" @click="activeKey = item.itemKey">
                            {{ item.itemKey }}
                        </Dropdown.Item>
                    </Dropdown.Menu>
                </template>
            </Dropdown>
        </template>
        <TabPane v-for="i in indexes" :key="i" :itemKey="`Tab-${i}`">
            <template #tab>Tab-{{ i }}</template>
            Content of card tab {{ i }}
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { TabPane, Tabs } from '@fibrous/semi-ui-vue';

    const positions = ['start', 'both', 'end'] as const;
    const indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
</script>

<template>
    <Tabs v-for="position in positions" :key="position" :arrowPosition="position" collapsible :style="{ width: '60%', margin: '20px' }" type="card">
        <TabPane v-for="i in indexes" :key="i" :itemKey="`Tab-${i}`">
            <template #tab>Tab-{{ i }}</template>
            Content of card tab {{ i }}
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { Button, TabPane, Tabs } from '@fibrous/semi-ui-vue';

    const count = ref(8);
    const indexes = computed(() => Array.from({ length: count.value }, (_, i) => i));

    const boxStyle = { border: '1px solid var(--semi-color-border)', padding: '12px' };
    const noteStyle = { marginBottom: '8px', color: 'var(--semi-color-text-2)', fontSize: '12px' };
</script>

<template>
    <div>
        <div :style="{ marginBottom: '12px' }">
            <Button :style="{ marginRight: '8px' }" @click="count = Math.max(3, count - 2)">减少 Tab</Button>
            <Button @click="count = Math.min(15, count + 2)">增加 Tab</Button>
            <span :style="{ marginLeft: '12px' }">当前 Tab 数量: {{ count }}</span>
        </div>

        <div :style="{ ...boxStyle, marginBottom: '16px' }">
            <p :style="noteStyle">collapsible="auto" - 自动检测溢出</p>
            <Tabs collapsible="auto" type="card">
                <TabPane v-for="i in indexes" :key="i" :itemKey="`${i}`">
                    <template #tab>Tab-{{ i + 1 }}</template>
                    Content of Tab {{ i + 1 }}
                </TabPane>
            </Tabs>
        </div>

        <div :style="{ ...boxStyle, maxWidth: '400px' }">
            <p :style="noteStyle">固定宽度 400px，测试较窄容器</p>
            <Tabs collapsible="auto" type="card">
                <TabPane v-for="i in indexes" :key="i" :itemKey="`${i}`">
                    <template #tab>Tab-{{ i + 1 }}</template>
                    Content of Tab {{ i + 1 }}
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { TabPane, Tabs } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Tabs defaultActiveKey="1">
        <TabPane itemKey="1">
            <template #tab>文档</template>
            文档
        </TabPane>
        <TabPane disabled itemKey="2">
            <template #tab>快速起步</template>
            快速起步
        </TabPane>
        <TabPane itemKey="3">
            <template #tab>帮助</template>
            帮助
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { Button, TabPane, Tabs } from '@fibrous/semi-ui-vue';

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

<template>
    <Tabs defaultActiveKey="1">
        <template #tabBarExtraContent>
            <Button @click="onExtraClick">Extra Action</Button>
        </template>
        <TabPane itemKey="1">
            <template #tab>文档</template>
            文档
        </TabPane>
        <TabPane itemKey="2">
            <template #tab>快速起步</template>
            快速起步
        </TabPane>
        <TabPane itemKey="3">
            <template #tab>帮助</template>
            帮助
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { TabPane, Tabs } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Tabs defaultActiveKey="1">
        <template #tabBar="{ tabBarProps, tabBar }">
            <div class="tab-bar-box">
                这是二次封装的Tab Bar，当前ActiveKey：{{ tabBarProps.activeKey }}
                <component :is="tabBar" />
            </div>
        </template>
        <TabPane itemKey="1">
            <template #tab>文档</template>
            文档
        </TabPane>
        <TabPane itemKey="2">
            <template #tab>快速起步</template>
            快速起步
        </TabPane>
        <TabPane itemKey="3">
            <template #tab>帮助</template>
            帮助
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { TabItem, TabPane, Tabs } from '@fibrous/semi-ui-vue';

    const activeKey = ref('1');
    const items = ref([
        { itemKey: '1', tab: '文档', content: '文档内容' },
        { itemKey: '2', tab: '表格', content: '表格内容' },
        { itemKey: '3', tab: '幻灯片', content: '幻灯片内容' },
        { itemKey: '4', tab: '表单', content: '表单内容' },
    ]);

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

<template>
    <Tabs v-model:activeKey="activeKey" type="line">
        <!-- the bar keeps Semi's own .semi-tabs-bar shell; the TabItems inside select their Tabs by themselves -->
        <template #tabBar>
            <div aria-orientation="horizontal" class="semi-tabs-bar semi-tabs-bar-line semi-tabs-bar-top" role="tablist">
                <TabItem
                    v-for="item in items"
                    :key="item.itemKey"
                    draggable="true"
                    :itemKey="item.itemKey"
                    :selected="activeKey === item.itemKey"
                    :style="{ cursor: 'grab', opacity: draggingKey === item.itemKey ? 0.5 : 1, display: 'inline-flex' }"
                    @dragend="draggingKey = null"
                    @dragenter.prevent="moveTo(item.itemKey)"
                    @dragover.prevent
                    @dragstart="draggingKey = item.itemKey"
                >
                    <template #tab>{{ item.tab }}</template>
                </TabItem>
            </div>
        </template>
        <TabPane v-for="item in items" :key="item.itemKey" :itemKey="item.itemKey">
            <div :style="{ padding: '20px' }">{{ item.content }}</div>
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, ButtonGroup, TabPane, Tabs } from '@fibrous/semi-ui-vue';

    let newTabIndex = 0;
    const panes = ref([
        { title: 'Tab 1', content: 'Content of Tab Pane 1', itemKey: '1' },
        { title: 'Tab 2', content: 'Content of Tab Pane 2', itemKey: '2' },
    ]);
    const activeKey = ref('1');

    const add = () => {
        const index = newTabIndex++;
        panes.value.push({ title: `New Tab ${index}`, content: 'New Tab Pane', itemKey: `newTab${index}` });
        activeKey.value = `newTab${index}`;
    };

    const remove = () => {
        if (panes.value.length > 1) {
            panes.value.pop();
            activeKey.value = panes.value[panes.value.length - 1].itemKey;
        }
    };
</script>

<template>
    <Tabs v-model:activeKey="activeKey">
        <template #tabBarExtraContent>
            <ButtonGroup>
                <Button @click="add">新增</Button>
                <Button @click="remove">删除</Button>
            </ButtonGroup>
        </template>
        <TabPane v-for="pane in panes" :key="pane.itemKey" :itemKey="pane.itemKey">
            <template #tab>{{ pane.title }}</template>
            {{ pane.content }}
        </TabPane>
    </Tabs>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { TabPane, Tabs } from '@fibrous/semi-ui-vue';

    const tabList = ref([
        { tab: '文档', itemKey: '1', text: '文档', closable: true },
        { tab: '快速起步', itemKey: '2', text: '快速起步', closable: true },
        { tab: '帮助', itemKey: '3', text: '帮助', closable: false },
    ]);

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

<template>
    <Tabs defaultActiveKey="1" type="card" @tabClose="close">
        <TabPane v-for="t in tabList" :key="t.itemKey" :closable="t.closable" :itemKey="t.itemKey">
            <template #tab>{{ t.tab }}</template>
            {{ t.text }}
        </TabPane>
    </Tabs>
</template>