Transfer

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

    const data = Array.from({ length: 100 }, (_v, i) => ({
        label: `选项名称 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    }));

    const onChange = (values: TransferValue, items: TransferDataItem[]) => console.log(values, items);
</script>

<Transfer dataSource={data} {onChange} style="width: 568px; height: 416px" />

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

    const dataWithGroup = [
        {
            title: '类别A',
            children: [
                { label: 'A-1', value: 1, disabled: false, key: 1 },
                { label: 'A-2', value: 2, disabled: false, key: 2 },
                { label: 'A-3', value: 3, disabled: false, key: 3 },
            ],
        },
        {
            title: '类别B',
            children: [
                { label: 'B-1', value: 4, disabled: false, key: 4 },
                { label: 'B-2', value: 5, disabled: false, key: 5 },
                { label: 'B-3（disabled）', value: 6, disabled: true, key: 6 },
            ],
        },
        {
            title: '类别C',
            children: [
                { label: 'C-1', value: 7, disabled: false, key: 7 },
                { label: 'C-2', value: 8, disabled: false, key: 8 },
                { label: 'C-3', value: 9, disabled: false, key: 9 },
                { label: 'C-4', value: 10, disabled: false, key: 10 },
                { label: 'C-5', value: 11, disabled: false, key: 11 },
                { label: 'C-6', value: 12, disabled: false, key: 12 },
                { label: 'C-7', value: 13, disabled: false, key: 13 },
            ],
        },
    ];
</script>

<Transfer dataSource={dataWithGroup} onChange={(values, items) => console.log(values, items)} style="width: 568px" type="groupList" value={[6]} />

<script lang="ts">
    import { IconClose } from '@fibrae/semi-icons-svelte';
    import { Avatar, Button, Checkbox, Highlight, Transfer, type AvatarColor, type TransferDataItem, type TransferValue } from '@fibrae/semi-ui-svelte';

    interface Person extends TransferDataItem {
        abbr: string;
        color: AvatarColor;
    }

    let searchText = $state('');

    const customFilter = (searchValue: string, item: TransferDataItem) => String(item.value).includes(searchValue) || String(item.label).includes(searchValue);

    const data = [
        { label: '夏可漫', value: 'xiakeman@example.com', abbr: '夏', color: 'amber', area: 'US', key: 1 },
        { label: '申悦', value: 'shenyue@example.com', abbr: '申', color: 'indigo', area: 'UK', key: 2 },
        { label: '文嘉茂', value: 'wenjiamao@example.com', abbr: '文', color: 'cyan', area: 'HK', key: 3 },
        { label: '曲晨一', value: 'quchenyi@example.com', abbr: '曲', color: 'blue', area: 'India', key: 4 },
        { label: '曲晨二', value: 'quchener@example.com', abbr: '二', color: 'blue', area: 'India', key: 5 },
        { label: '曲晨三', value: 'quchensan@example.com', abbr: '三', color: 'blue', area: 'India', key: 6 },
    ] satisfies Person[];

    const inputProps = { placeholder: '搜索姓名或邮箱' };

    const onChange = (values: TransferValue, items: TransferDataItem[]) => console.log(values, items);
</script>

<Transfer dataSource={data} filter={customFilter} {inputProps} {onChange} onSearch={(value) => (searchText = value)} style="width: 568px" value={['xiakeman@example.com', 'shenyue@example.com']}>
    {#snippet sourceItem({ item, checked, onChange: onItemChange })}
        {@const person = item as Person}
        <div class="components-transfer-demo-source-item">
            <Checkbox {checked} onChange={onItemChange} style="height: 52px; align-items: center">
                <Avatar color={person.color} size="small">{person.abbr}</Avatar>
                <div class="info">
                    <div class="name">
                        <Highlight searchWords={[searchText]} sourceString={String(item.label)} />
                    </div>
                    <div class="email">
                        <Highlight searchWords={[searchText]} sourceString={String(item.value)} />
                    </div>
                </div>
            </Checkbox>
        </div>
    {/snippet}
    {#snippet selectedItem({ item, onRemove })}
        {@const person = item as Person}
        <div class="components-transfer-demo-selected-item">
            <Avatar color={person.color} size="small">{person.abbr}</Avatar>
            <div class="info">
                <div class="name">{item.label}</div>
                <div class="email">{item.value}</div>
            </div>
            <Button aria-label={`移除 ${item.label}`} class="remove" size="small" theme="borderless" type="tertiary" onclick={onRemove}>
                {#snippet icon()}<IconClose />{/snippet}
            </Button>
        </div>
    {/snippet}
</Transfer>

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

    const data = Array.from({ length: 20 }, (_v, i) => ({
        label: `选项名称 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    }));

    const onChange = (values: TransferValue, items: TransferDataItem[]) => console.log(values, items);
</script>

<Transfer dataSource={data} disabled {onChange} style="width: 568px; height: 416px" value={[2, 4]} />

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

    const data = Array.from({ length: 30 }, (_, i) => ({
        label: `选项名称 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    }));
</script>

<Transfer dataSource={data} draggable onChange={(values, items) => console.log(values, items)} style="width: 568px; height: 416px" value={[2, 4]} />

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

    const data = Array.from({ length: 100 }, (_, i) => ({
        label: `选项名称 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    }));
</script>

<Transfer dataSource={data} onChange={(values, items) => console.log(values, items)} pagination={{ pageSize: 10 }} style="width: 568px; height: 416px" />

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

    let currentPage = $state(1);
    const data = Array.from({ length: 100 }, (_, i) => ({
        label: `选项名称 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    }));
</script>

<div>
    <ButtonGroup style="margin-bottom: 12px">
        <Button onclick={() => (currentPage = 1)}>第1页</Button>
        <Button onclick={() => (currentPage = 2)}>第2页</Button>
        <Button onclick={() => (currentPage = 5)}>第5页</Button>
        <Button onclick={() => (currentPage = 10)}>第10页</Button>
    </ButtonGroup>
    <div>当前页码: {currentPage}</div>
    <Transfer dataSource={data} onChange={(values, items) => console.log(values, items)} pagination={{ pageSize: 10, currentPage, onPageChange: (page) => (currentPage = page) }} style="width: 568px; height: 416px" />
</div>

<script lang="ts">
    import { IconClose, IconHandle } from '@fibrae/semi-icons-svelte';
    import { Avatar, Button, Checkbox, Transfer, type AvatarColor, type TransferDataItem, type TransferValue } from '@fibrae/semi-ui-svelte';

    interface Person extends TransferDataItem {
        abbr: string;
        color: AvatarColor;
    }

    const customFilter = (searchValue: string, item: TransferDataItem) => String(item.value).includes(searchValue) || String(item.label).includes(searchValue);

    const data = [
        { label: '夏可漫', value: 'xiakeman@example.com', abbr: '夏', color: 'amber', area: 'US', key: 1 },
        { label: '申悦', value: 'shenyue@example.com', abbr: '申', color: 'indigo', area: 'UK', key: 2 },
        { label: '文嘉茂', value: 'wenjiamao@example.com', abbr: '文', color: 'cyan', area: 'HK', key: 3 },
        { label: '曲晨一', value: 'quchenyi@example.com', abbr: '曲', color: 'blue', area: 'India', key: 4 },
        { label: '曲晨二', value: 'quchener@example.com', abbr: '二', color: 'blue', area: 'India', key: 5 },
        { label: '曲晨三', value: 'quchensan@example.com', abbr: '三', color: 'blue', area: 'India', key: 6 },
    ] satisfies Person[];

    const inputProps = { placeholder: '搜索姓名或邮箱' };

    const onChange = (values: TransferValue, items: TransferDataItem[]) => console.log(values, items);
</script>

{#snippet grip()}
    <IconHandle class="semi-right-item-drag-handler" />
{/snippet}

<Transfer dataSource={data} draggable filter={customFilter} {inputProps} {onChange} style="width: 568px" value={['xiakeman@example.com', 'shenyue@example.com']}>
    {#snippet sourceItem({ item, checked, onChange: onItemChange })}
        {@const person = item as Person}
        <div class="components-transfer-demo-source-item">
            <Checkbox {checked} onChange={onItemChange} style="height: 52px; align-items: center">
                <Avatar color={person.color} size="small">{person.abbr}</Avatar>
                <div class="info">
                    <div class="name">{item.label}</div>
                    <div class="email">{item.value}</div>
                </div>
            </Checkbox>
        </div>
    {/snippet}
    {#snippet selectedItem({ item, handle, onRemove })}
        {@const person = item as Person}
        {#if handle}
            <div class="components-transfer-demo-selected-item">
                {@render handle(grip)}
                <Avatar color={person.color} size="small">{person.abbr}</Avatar>
                <div class="info">
                    <div class="name">{item.label}</div>
                    <div class="email">{item.value}</div>
                </div>
                <Button aria-label={`移除 ${item.label}`} class="remove" size="small" theme="borderless" type="tertiary" onclick={onRemove}>
                    {#snippet icon()}<IconClose />{/snippet}
                </Button>
            </div>
        {/if}
    {/snippet}
</Transfer>

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

    const data = Array.from({ length: 30 }, (_v, i) => ({
        label: `选项名称 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    }));

    const headerStyle = 'margin: 10px 0 0 10px; height: 24px; display: flex; align-items: center';
</script>

<Transfer dataSource={data} style="width: 568px; height: 416px">
    {#snippet sourceHeader({ num, showButton, allChecked, onAllClick })}
        <div style={headerStyle}>
            <span>共 {num} 项</span>
            {#if showButton}
                <Button size="small" theme="borderless" type="tertiary" onclick={onAllClick}>
                    {allChecked ? '取消全选' : '全选'}
                </Button>
            {/if}
        </div>
    {/snippet}
    {#snippet selectedHeader({ num, showButton, onClear })}
        <div style={headerStyle}>
            <span>{num} 项已选</span>
            {#if showButton}
                <Button size="small" theme="borderless" type="tertiary" onclick={onClear}>清空</Button>
            {/if}
        </div>
    {/snippet}
</Transfer>

<script lang="ts">
    import { IconSearch } from '@fibrae/semi-icons-svelte';
    import { Button, Input, Spin, Transfer, type TransferValue } from '@fibrae/semi-ui-svelte';

    const dataSource = Array.from({ length: 100 }, (_v, i) => ({
        label: `海底捞门店 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    }));

    const onChange = (values: TransferValue) => console.log(values);
</script>

<Transfer class="component-transfer-demo-custom-panel" {dataSource} {onChange}>
    {#snippet sourcePanel({ loading, noMatch, filterData, selectedItems, allChecked, onAllClick, inputValue, onSearch, onSelectOrRemove })}
        <section class="source-panel">
            <div class="panel-header sp-font">门店列表</div>
            <div class="panel-main">
                <Input aria-label="搜索门店" onChange={(value) => onSearch(value)} showClear style="width: 454px; margin: 12px 14px">
                    {#snippet prefix()}<IconSearch />{/snippet}
                </Input>
                <div class="panel-controls sp-font">
                    <span>待选门店: {filterData.length}</span>
                    <Button size="small" theme="borderless" onclick={onAllClick}>
                        {allChecked ? '取消全选' : '全选'}
                    </Button>
                </div>
                <div class="panel-list">
                    {#if loading}
                        <Spin />
                    {:else if noMatch}
                        <div class="empty sp-font">
                            {inputValue ? '无搜索结果' : '暂无内容'}
                        </div>
                    {:else}
                        {#each filterData as item (item.key)}
                            <div class="semi-transfer-item panel-item">
                                <p>{item.label}</p>
                                <Button class="panel-item-remove" size="small" theme="borderless" type="primary" onclick={() => onSelectOrRemove(item)}>
                                    {selectedItems.has(item.key) ? '删除' : '添加'}
                                </Button>
                            </div>
                        {/each}
                    {/if}
                </div>
            </div>
        </section>
    {/snippet}
    {#snippet selectedPanel({ selectedData, onClear, onRemove })}
        <section class="selected-panel">
            <div class="panel-header sp-font">
                <div>已选同步门店: {selectedData.length}</div>
                <Button size="small" theme="borderless" type="primary" onclick={onClear}>清空</Button>
            </div>
            <div class="panel-main">
                {#if !selectedData.length}
                    <div class="empty sp-font">暂无数据，请从左侧筛选</div>
                {:else}
                    {#each selectedData as item (item.key)}
                        <div class="semi-transfer-item panel-item">
                            <p>{item.label}</p>
                            <Button class="panel-item-remove" size="small" theme="borderless" type="primary" onclick={() => onRemove(item)}>删除</Button>
                        </div>
                    {/each}
                {/if}
            </div>
        </section>
    {/snippet}
</Transfer>

<script lang="ts">
    import { untrack, type ComponentProps } from 'svelte';
    import { DragDropManager } from '@dnd-kit/dom';
    import { isSortable, OptimisticSortingPlugin, Sortable } from '@dnd-kit/dom/sortable';
    import { DragDropProvider } from '@dnd-kit/svelte';
    import { IconHandle, IconSearch } from '@fibrae/semi-icons-svelte';
    import { Button, Input, Spin, Transfer, type TransferDataItem, type TransferOnSortEnd, type TransferValue } from '@fibrae/semi-ui-svelte';

    type ProviderProps = ComponentProps<typeof DragDropProvider>;

    const dataSource = Array.from({ length: 100 }, (_v, i) => ({
        label: `海底捞门店 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    }));

    let value = $state<TransferValue>([2, 4]);
    // The order shown while dragging; cleared on drop, so Transfer's value stays the only truth
    let preview = $state.raw<TransferDataItem[] | null>(null);

    // The default plugins keep the Accessibility one, which gives each handle a button role and Tab stop for keyboard sorting
    const manager = new DragDropManager();
    // OptimisticSortingPlugin moves DOM nodes itself, which collides with Svelte's keyed each; `preview` drives the order instead
    const sortablePlugins: ConstructorParameters<typeof Sortable>[0]['plugins'] = (defaults) => defaults.filter((plugin) => plugin !== OptimisticSortingPlugin);

    // Only the handle drags; it is found inside the row once the row's children are rendered
    const sortable = (id: string | number, position: () => number) => (row: HTMLElement) => {
        const item = new Sortable({ id, index: untrack(position), element: row, handle: row.querySelector<HTMLElement>('[data-sort-handle]') ?? undefined, plugins: sortablePlugins }, manager);
        $effect(() => {
            item.index = position();
        });
        return () => item.destroy();
    };

    const onDragOver = (selectedData: TransferDataItem[]): ProviderProps['onDragOver'] => {
        return ({ operation: { source, target } }) => {
            if (!isSortable(source) || !isSortable(target) || source.id === target.id) return;
            const next = [...(preview ?? selectedData)];
            const from = next.findIndex((item) => item.key === source.id);
            const to = next.findIndex((item) => item.key === target.id);
            if (from < 0 || to < 0) return;
            next.splice(to, 0, ...next.splice(from, 1));
            preview = next;
        };
    };

    const onDragEnd = (selectedData: TransferDataItem[], onSortEnd: TransferOnSortEnd): ProviderProps['onDragEnd'] => {
        return ({ canceled, operation: { source } }) => {
            if (!canceled && preview && source) {
                const oldIndex = selectedData.findIndex((item) => item.key === source.id);
                const newIndex = preview.findIndex((item) => item.key === source.id);
                if (oldIndex !== newIndex) onSortEnd({ oldIndex, newIndex });
            }
            preview = null;
        };
    };

    const onChange = (next: TransferValue) => console.log(next);
</script>

<Transfer bind:value class="component-transfer-demo-custom-panel" {dataSource} {onChange}>
    {#snippet sourcePanel({ loading, noMatch, filterData, selectedItems, allChecked, onAllClick, inputValue, onSearch, onSelectOrRemove })}
        <section class="source-panel">
            <div class="panel-header sp-font">门店列表</div>
            <div class="panel-main">
                <Input aria-label="搜索门店" onChange={(text) => onSearch(text)} showClear style="width: 454px; margin: 12px 14px">
                    {#snippet prefix()}<IconSearch />{/snippet}
                </Input>
                <div class="panel-controls sp-font">
                    <span>待选门店: {filterData.length}</span>
                    <Button size="small" theme="borderless" onclick={onAllClick}>
                        {allChecked ? '取消全选' : '全选'}
                    </Button>
                </div>
                <div class="panel-list">
                    {#if loading}
                        <Spin />
                    {:else if noMatch}
                        <div class="empty sp-font">
                            {inputValue ? '无搜索结果' : '暂无内容'}
                        </div>
                    {:else}
                        {#each filterData as item (item.key)}
                            <div class="semi-transfer-item panel-item">
                                <div class="panel-item-main" style="flex-grow: 1">
                                    <p style="margin: 0 12px">{item.label}</p>
                                    <Button class="panel-item-remove" size="small" theme="borderless" type="primary" onclick={() => onSelectOrRemove(item)}>
                                        {selectedItems.has(item.key) ? '删除' : '添加'}
                                    </Button>
                                </div>
                            </div>
                        {/each}
                    {/if}
                </div>
            </div>
        </section>
    {/snippet}
    {#snippet selectedPanel({ selectedData, onClear, onRemove, onSortEnd })}
        {@const ordered = preview ?? selectedData}
        <section class="selected-panel">
            <div class="panel-header sp-font">
                <div>已选同步门店: {selectedData.length}</div>
                <Button size="small" theme="borderless" type="primary" onclick={onClear}>清空</Button>
            </div>
            <div class="panel-main" style="display: block">
                <DragDropProvider {manager} onDragEnd={onDragEnd(selectedData, onSortEnd)} onDragOver={onDragOver(selectedData)}>
                    <div style="overflow: auto; display: flex; flex-direction: column; row-gap: 8px">
                        <!-- Keyed by key: dnd-kit reorders the rows mid-drag, and the keyed each moves them with their data -->
                        {#each ordered as item, position (item.key)}
                            <div {@attach sortable(item.key, () => position)}>
                                <div class="semi-transfer-item panel-item">
                                    <span aria-label={String(item.label)} data-sort-handle style="line-height: 0">
                                        <IconHandle class="pane-item-drag-handler" />
                                    </span>
                                    <div class="panel-item-main" style="flex-grow: 1">
                                        <p style="margin: 0 12px">{item.label}</p>
                                        <Button class="panel-item-remove" size="small" theme="borderless" type="primary" onclick={() => onRemove(item)}>删除</Button>
                                    </div>
                                </div>
                            </div>
                        {/each}
                    </div>
                </DragDropProvider>
            </div>
        </section>
    {/snippet}
</Transfer>

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

    const treeData: TransferTreeItem[] = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        { label: 'Beijing', value: 'Beijing', key: '0-0-0', children: [] },
                        { label: 'Shanghai', value: 'Shanghai', key: '0-0-1', children: [] },
                        { label: 'Chengdu', value: 'Chengdu', key: '0-0-2', children: [] },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [{ label: 'Osaka', value: 'Osaka', key: '0-1-0', children: [] }],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                { label: 'United States', value: 'United States', key: '1-0', children: [] },
                { label: 'Canada', value: 'Canada', key: '1-1', children: [] },
                { label: 'Mexico', value: 'Mexico', disabled: true, key: '1-2', children: [] },
                { label: 'Cuba', value: 'Cuba', key: '1-3', children: [] },
            ],
        },
    ];

    let value = $state<TransferValue>(['Shanghai']);
</script>

<div style="margin: 10px; padding: 10px; width: 600px">
    <Transfer bind:value dataSource={treeData} type="treeList" />
</div>

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

    const treeData = [
        {
            label: '文件夹 1',
            value: 'folder1',
            key: 'folder1',
            children: [
                { label: '文件 1-1', value: 'file1-1', key: 'file1-1', children: [] },
                { label: '文件 1-2', value: 'file1-2', key: 'file1-2', children: [] },
                {
                    label: '子文件夹 1',
                    value: 'subfolder1',
                    key: 'subfolder1',
                    children: [
                        { label: '文件 1-1-1', value: 'file1-1-1', key: 'file1-1-1', children: [] },
                        { label: '文件 1-1-2', value: 'file1-1-2', key: 'file1-1-2', children: [] },
                    ],
                },
            ],
        },
        {
            label: '文件夹 2',
            value: 'folder2',
            key: 'folder2',
            children: [
                { label: '文件 2-1', value: 'file2-1', key: 'file2-1', children: [] },
                { label: '文件 2-2', value: 'file2-2', key: 'file2-2', children: [] },
            ],
        },
        { label: '独立文件', value: 'file3', key: 'file3', children: [] },
    ];

    let value = $state<TransferValue>([]);
</script>

<Transfer bind:value dataSource={treeData} style="width: 600px" type="treeList">
    {#snippet sourceHeader({ num, leafOnlyNum, showButton, allChecked, onAllClick })}
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--semi-color-border)">
            <span>
                <strong>文件总数：</strong>
                {leafOnlyNum !== undefined ? leafOnlyNum : num} 个文件
                {#if leafOnlyNum !== undefined}
                    <span style="color: var(--semi-color-text-2); margin-inline-start: 8px; font-size: 12px"> （总节点数：{num}） </span>
                {/if}
            </span>
            {#if showButton}
                <Button size="small" theme="borderless" type="tertiary" onclick={onAllClick}>
                    {allChecked ? '取消全选' : '全选'}
                </Button>
            {/if}
        </div>
    {/snippet}
</Transfer>