Transfer

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

    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>

<template>
    <Transfer :dataSource="data" :style="{ width: '568px', height: '416px' }" @change="onChange" />
</template>

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

    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>

<template>
    <Transfer :dataSource="dataWithGroup" :defaultValue="[6]" style="width: 568px" type="groupList" @change="(values, items) => console.log(values, items)" />
</template>

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

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

    const searchText = ref('');

    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>

<template>
    <Transfer :dataSource="data" :defaultValue="['xiakeman@example.com', 'shenyue@example.com']" :filter="customFilter" :inputProps="inputProps" :style="{ width: '568px' }" @change="onChange" @search="searchText = $event">
        <template #sourceItem="{ item, checked, onChange: onItemChange }">
            <div class="components-transfer-demo-source-item">
                <Checkbox :modelValue="checked" :style="{ height: '52px', alignItems: 'center' }" @change="onItemChange">
                    <Avatar :color="(item as Person).color" size="small">{{ (item as 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>
        </template>
        <template #selectedItem="{ item, onRemove }">
            <div class="components-transfer-demo-selected-item">
                <Avatar :color="(item as Person).color" size="small">{{ (item as 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" @click="onRemove">
                    <template #icon>
                        <IconClose />
                    </template>
                </Button>
            </div>
        </template>
    </Transfer>
</template>

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

    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>

<template>
    <Transfer :dataSource="data" :defaultValue="[2, 4]" disabled :style="{ width: '568px', height: '416px' }" @change="onChange" />
</template>

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

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

<template>
    <Transfer :dataSource="data" :defaultValue="[2, 4]" draggable style="width: 568px; height: 416px" @change="(values, items) => console.log(values, items)" />
</template>

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

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

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

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

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

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

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

    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>

<template>
    <Transfer :dataSource="data" :defaultValue="['xiakeman@example.com', 'shenyue@example.com']" draggable :filter="customFilter" :inputProps="inputProps" :style="{ width: '568px' }" @change="onChange">
        <template #sourceItem="{ item, checked, onChange: onItemChange }">
            <div class="components-transfer-demo-source-item">
                <Checkbox :modelValue="checked" :style="{ height: '52px', alignItems: 'center' }" @change="onItemChange">
                    <Avatar :color="(item as Person).color" size="small">{{ (item as Person).abbr }}</Avatar>
                    <div class="info">
                        <div class="name">{{ item.label }}</div>
                        <div class="email">{{ item.value }}</div>
                    </div>
                </Checkbox>
            </div>
        </template>
        <template #selectedItem="{ item, handle, onRemove }">
            <div v-if="handle" class="components-transfer-demo-selected-item">
                <component :is="handle">
                    <IconHandle class="semi-right-item-drag-handler" />
                </component>
                <Avatar :color="(item as Person).color" size="small">{{ (item as 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" @click="onRemove">
                    <template #icon>
                        <IconClose />
                    </template>
                </Button>
            </div>
        </template>
    </Transfer>
</template>

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

    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', alignItems: 'center' };
</script>

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

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

    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>

<template>
    <Transfer class="component-transfer-demo-custom-panel" :dataSource="dataSource" @change="onChange">
        <template #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="搜索门店" showClear :style="{ width: '454px', margin: '12px 14px' }" @change="onSearch">
                        <template #prefix>
                            <IconSearch />
                        </template>
                    </Input>
                    <div class="panel-controls sp-font">
                        <span>待选门店: {{ filterData.length }}</span>
                        <Button size="small" theme="borderless" @click="onAllClick">
                            {{ allChecked ? '取消全选' : '全选' }}
                        </Button>
                    </div>
                    <div class="panel-list">
                        <Spin v-if="loading" />
                        <div v-else-if="noMatch" class="empty sp-font">
                            {{ inputValue ? '无搜索结果' : '暂无内容' }}
                        </div>
                        <template v-else>
                            <div v-for="item in filterData" :key="item.key" class="semi-transfer-item panel-item">
                                <p>{{ item.label }}</p>
                                <Button class="panel-item-remove" size="small" theme="borderless" type="primary" @click="onSelectOrRemove(item)">
                                    {{ selectedItems.has(item.key) ? '删除' : '添加' }}
                                </Button>
                            </div>
                        </template>
                    </div>
                </div>
            </section>
        </template>
        <template #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" @click="onClear">清空</Button>
                </div>
                <div class="panel-main">
                    <div v-if="!selectedData.length" class="empty sp-font">暂无数据，请从左侧筛选</div>
                    <template v-else>
                        <div v-for="item in selectedData" :key="item.key" class="semi-transfer-item panel-item">
                            <p>{{ item.label }}</p>
                            <Button class="panel-item-remove" size="small" theme="borderless" type="primary" @click="onRemove(item)"> 删除 </Button>
                        </div>
                    </template>
                </div>
            </section>
        </template>
    </Transfer>
</template>

<script setup lang="ts">
    import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
    import { DragDropManager } from '@dnd-kit/dom';
    import { Sortable, isSortable } from '@dnd-kit/dom/sortable';
    import { IconHandle, IconSearch } from '@fibrous/semi-icons-vue';
    import { Button, Input, Spin, Transfer, type TransferDataItem, type TransferValue } from '@fibrous/semi-ui-vue';

    type SortableId = string | number;

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

    const values = ref<TransferValue>([2, 4]);

    // Items drag by value, falling back to key
    const sortableId = (item: TransferDataItem): SortableId => item.value ?? item.key;

    const manager = new DragDropManager();
    const sortables = new Map<SortableId, Sortable>();
    const itemElements = new Map<SortableId, HTMLElement>();
    const handleElements = new Map<SortableId, HTMLElement>();

    const bindElement = (elements: Map<SortableId, HTMLElement>, id: SortableId, element: unknown) => {
        if (element instanceof HTMLElement) {
            elements.set(id, element);
        } else {
            elements.delete(id);
        }
    };

    // One Sortable per selected item, synced after the DOM updates when items change
    const syncSortables = () => {
        values.value.forEach((id, index) => {
            const element = itemElements.get(id);
            if (!element) {
                return;
            }
            const sortable = sortables.get(id);
            if (sortable) {
                sortable.index = index;
            } else {
                sortables.set(id, new Sortable({ id, index, element, handle: handleElements.get(id) }, manager));
            }
        });
        for (const [id, sortable] of sortables) {
            if (!values.value.includes(id)) {
                sortable.destroy();
                sortables.delete(id);
            }
        }
    };

    // The selected order is the value array order, so write it back to v-model after a drop
    const stopListening = manager.monitor.addEventListener('dragend', (event) => {
        const { source } = event.operation;
        if (event.canceled || !isSortable(source) || source.initialIndex === source.index) {
            return;
        }
        const next = [...values.value];
        const [moved] = next.splice(source.initialIndex, 1);
        next.splice(source.index, 0, moved);
        values.value = next;
    });

    watch(values, syncSortables, { flush: 'post' });
    onMounted(syncSortables);
    onBeforeUnmount(() => {
        stopListening();
        sortables.forEach((sortable) => sortable.destroy());
        manager.destroy();
    });

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

<template>
    <Transfer v-model="values" class="component-transfer-demo-custom-panel" :dataSource="dataSource" @change="onChange">
        <template #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="搜索门店" showClear :style="{ width: '454px', margin: '12px 14px' }" @change="onSearch">
                        <template #prefix>
                            <IconSearch />
                        </template>
                    </Input>
                    <div class="panel-controls sp-font">
                        <span>待选门店: {{ filterData.length }}</span>
                        <Button size="small" theme="borderless" @click="onAllClick">
                            {{ allChecked ? '取消全选' : '全选' }}
                        </Button>
                    </div>
                    <div class="panel-list">
                        <Spin v-if="loading" />
                        <div v-else-if="noMatch" class="empty sp-font">
                            {{ inputValue ? '无搜索结果' : '暂无内容' }}
                        </div>
                        <template v-else>
                            <div v-for="item in filterData" :key="item.key" class="semi-transfer-item panel-item">
                                <div class="panel-item-main" :style="{ flexGrow: 1 }">
                                    <p :style="{ margin: '0 12px' }">{{ item.label }}</p>
                                    <Button class="panel-item-remove" size="small" theme="borderless" type="primary" @click="onSelectOrRemove(item)">
                                        {{ selectedItems.has(item.key) ? '删除' : '添加' }}
                                    </Button>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </section>
        </template>
        <template #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" @click="onClear">清空</Button>
                </div>
                <div class="panel-main" :style="{ display: 'block' }">
                    <div :style="{ overflow: 'auto', display: 'flex', flexDirection: 'column', rowGap: '8px' }">
                        <div v-for="item in selectedData" :key="item.key" :ref="(element) => bindElement(itemElements, sortableId(item), element)">
                            <div class="semi-transfer-item panel-item">
                                <!-- Only the handle drags; the Accessibility plugin adds a button role and Tab stop -->
                                <span :ref="(element) => bindElement(handleElements, sortableId(item), element)" :aria-label="String(item.label)" :style="{ lineHeight: 0 }">
                                    <IconHandle class="pane-item-drag-handler" />
                                </span>
                                <div class="panel-item-main" :style="{ flexGrow: 1 }">
                                    <p :style="{ margin: '0 12px' }">{{ item.label }}</p>
                                    <Button class="panel-item-remove" size="small" theme="borderless" type="primary" @click="onRemove(item)"> 删除 </Button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </template>
    </Transfer>
</template>

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

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

    const value = ref<Array<string | number>>(['Shanghai']);
</script>

<template>
    <div style="margin: 10px; padding: 10px; width: 600px">
        <Transfer v-model="value" :dataSource="treeData" type="treeList" />
    </div>
</template>