选择器

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

<template>
    <Select aria-label="业务线" defaultValue="douyin" style="width: 120px">
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option disabled value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
    <br />
    <br />
    <Select aria-label="业务线" defaultValue="douyin" disabled style="width: 120px">
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
    </Select>
    <br />
    <br />
    <Select aria-label="业务线" placeholder="请选择业务线" style="width: 120px">
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option disabled value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
</template>

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

    const list = [
        { value: 'douyin', label: '抖音', otherKey: 0 },
        { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
        { value: 'jianying', label: '剪映', otherKey: 2 },
        { value: 'toutiao', label: '今日头条', otherKey: 3 },
    ];
</script>

<template>
    <Select aria-label="业务线" :optionList="list" placeholder="请选择业务线" style="width: 180px" />
</template>

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

    const onExceed = () => Toast.warning('最多只允许选择两项');
</script>

<template>
    <Select aria-label="Select 示例" :defaultValue="['douyin', 'ulikecam']" multiple style="width: 320px">
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
    <br />
    <br />
    <Select aria-label="Select 示例" :defaultValue="['douyin', 'ulikecam', 'jianying']" :maxTagCount="2" multiple :restTagsPopoverProps="{ position: 'top' }" showRestTagsPopover style="width: 320px">
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
    <br />
    <br />
    <Select aria-label="Select 示例" :defaultValue="['douyin']" :max="2" multiple style="width: 320px" @exceed="onExceed">
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
    <br />
    <br />
    <Select aria-label="Select 示例" :defaultValue="['xigua', 'ulikecam', 'jianying', 'douyin']" ellipsisTrigger expandRestTagsOnClick :maxTagCount="2" multiple :restTagsPopoverProps="{ position: 'top' }" showRestTagsPopover style="width: 220px">
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
</template>

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

<template>
    <Select aria-label="地区" filter placeholder="" style="width: 180px">
        <Select.OptGroup label="Asia">
            <Select.Option value="a-1">China</Select.Option>
            <Select.Option value="a-2">Korea</Select.Option>
        </Select.OptGroup>
        <Select.OptGroup label="Europe">
            <Select.Option value="b-1">Germany</Select.Option>
            <Select.Option value="b-2">France</Select.Option>
        </Select.OptGroup>
        <Select.OptGroup label="South America">
            <Select.Option value="c-1">Peru</Select.Option>
        </Select.OptGroup>
    </Select>
</template>

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

    const data = [
        {
            label: 'Asia',
            children: [
                { value: 'a-1', label: 'China' },
                { value: 'a-2', label: 'Korea' },
            ],
        },
        {
            label: 'Europe',
            children: [
                { value: 'b-1', label: 'Germany' },
                { value: 'b-2', label: 'France' },
            ],
        },
        {
            label: 'South America',
            children: [{ value: 'c-1', label: 'Peru' }],
        },
    ];
</script>

<template>
    <Select aria-label="地区" filter placeholder="" style="width: 180px">
        <Select.OptGroup v-for="group in data" :key="group.label" :label="group.label">
            <Select.Option v-for="option in group.children" :key="option.value" :label="option.label" :value="option.value" />
        </Select.OptGroup>
    </Select>
</template>

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

<template>
    <Select aria-label="small" placeholder="请选择业务线" size="small" :style="{ width: '180px' }">
        <SelectOption value="ulikecam">轻颜相机</SelectOption>
    </Select>
    <br />
    <br />
    <Select aria-label="default" placeholder="请选择业务线" :style="{ width: '180px' }">
        <SelectOption value="ulikecam">轻颜相机</SelectOption>
    </Select>
    <br />
    <br />
    <Select aria-label="large" placeholder="请选择业务线" size="large" :style="{ width: '180px' }">
        <SelectOption value="ulikecam">轻颜相机</SelectOption>
    </Select>
</template>

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

<template>
    <Select aria-label="default" :style="{ width: '180px' }">
        <SelectOption value="ulikecam">轻颜相机</SelectOption>
    </Select>
    <br />
    <br />
    <Select aria-label="warning" :style="{ width: '180px' }" validateStatus="warning">
        <SelectOption value="ulikecam">轻颜相机</SelectOption>
    </Select>
    <br />
    <br />
    <Select aria-label="error" :style="{ width: '180px' }" validateStatus="error">
        <SelectOption value="ulikecam">轻颜相机</SelectOption>
    </Select>
</template>

<script setup lang="ts">
    import { IconGift, IconVigoLogo } from '@fibrous/semi-icons-vue';
    import { Select } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Select aria-label="Select 示例" defaultValue="ulikecam" showClear style="width: 320px">
        <template #prefix>
            <IconVigoLogo />
        </template>
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
    <br />
    <br />
    <Select aria-label="Select 示例" defaultValue="ulikecam" :showArrow="false" style="width: 320px">
        <template #prefix>
            <IconVigoLogo />
        </template>
        <template #suffix>
            <IconGift />
        </template>
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
</template>

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

    const innerSlotStyle = {
        backgroundColor: 'var(--color-white)',
        height: '36px',
        display: 'flex',
        alignItems: 'center',
        cursor: 'pointer',
        paddingLeft: '32px',
        borderTop: '1px solid var(--semi-color-border)',
        borderRadius: '0 0 6px 6px',
        color: 'var(--semi-color-link)',
    };
    const outSlotStyle = {
        backgroundColor: 'var(--semi-color-fill-0)',
        height: '36px',
        display: 'flex',
        paddingLeft: '32px',
        color: 'var(--semi-color-link)',
        alignItems: 'center',
        cursor: 'pointer',
        borderTop: '1px solid var(--semi-color-border)',
        borderRadius: '0 0 6px 6px',
    };
</script>

<template>
    <div>
        <p>outerBottomSlot:</p>
        <Select aria-label="outerBottomSlot" :autoAdjustOverflow="false" defaultOpen :dropdownStyle="{ width: '180px' }" :maxHeight="150" placeholder="自定义外侧底部slot，始终显示" position="bottom" :style="{ width: '300px' }">
            <SelectOption value="douyin">抖音</SelectOption>
            <SelectOption value="ulikecam">轻颜相机</SelectOption>
            <SelectOption value="jianying">剪映</SelectOption>
            <SelectOption value="duoshan">多闪</SelectOption>
            <SelectOption value="xigua">西瓜视频</SelectOption>
            <template #outerBottomSlot>
                <div :style="outSlotStyle">
                    <span :style="{ color: 'var(--semi-color-link)' }">未找到应用?</span>
                </div>
            </template>
        </Select>
        <p :style="{ marginTop: '200px' }">innerBottomSlot:</p>
        <Select aria-label="innerBottomSlot" :dropdownStyle="{ width: '180px' }" :maxHeight="150" placeholder="自定义内侧底部slot，滚动至底部显示" :style="{ width: '300px' }">
            <SelectOption value="douyin">抖音</SelectOption>
            <SelectOption value="ulikecam">轻颜相机</SelectOption>
            <SelectOption value="jianying">剪映</SelectOption>
            <SelectOption value="duoshan">多闪</SelectOption>
            <SelectOption value="xigua">西瓜视频</SelectOption>
            <template #innerBottomSlot>
                <div :style="innerSlotStyle">点击加载更多</div>
            </template>
        </Select>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { RadioGroup, Select, type RadioChangeEvent } from '@fibrous/semi-ui-vue';

    interface Item {
        value: string;
        label: string;
    }

    const list: Record<string, Item[]> = {
        component: [
            { value: 'select', label: '选择器' },
            { value: 'tabs', label: '标签' },
            { value: 'avatar', label: '头像' },
            { value: 'button', label: '按钮' },
        ],
        design: [
            { value: 'color', label: '颜色' },
            { value: 'dark', label: '暗色模式' },
            { value: 'icon', label: '图标' },
            { value: 'font', label: '字体' },
        ],
        feedback: [
            { value: 'faq', label: '常见问题' },
            { value: 'join', label: '加入用户群' },
            { value: 'hornbill', label: '犀鸟反馈问题' },
        ],
    };
    const categoryOptions = [
        { value: 'component', label: '组件' },
        { value: 'design', label: '设计' },
        { value: 'feedback', label: '反馈' },
    ];
    const categoryWrapper = {
        padding: '8px 12px',
        borderBottom: '0.5px solid var(--semi-color-border)',
    };

    const key = ref('component');
    const value = ref<Item | undefined>({ value: 'faq', label: '常见问题' });
    const changeCategory = (event: RadioChangeEvent) => {
        key.value = String(event.target.value);
    };
</script>

<template>
    <Select v-model="value" aria-label="选项" :autoAdjustOverflow="false" changeWithObject defaultOpen :optionList="list[key]" :style="{ width: '200px' }">
        <template #outerTopSlot>
            <!-- The radio group switches with arrow keys, so categories need no tabpanel association -->
            <div :style="categoryWrapper">
                <RadioGroup aria-label="选项分类" buttonSize="small" :modelValue="key" :options="categoryOptions" type="button" @change="changeCategory" />
            </div>
        </template>
    </Select>
</template>

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

    const value = ref<string | undefined>('xigua');
</script>

<template>
    <Select v-model="value" aria-label="业务线" placeholder="受控的Select" style="width: 300px">
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
</template>

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

    const options = ref([1, 2, 3, 4]);

    function add() {
        const length = Math.ceil(Math.random() * 10);
        options.value = Array.from({ length }, (_, i) => i + 1);
    }
</script>

<template>
    <Select aria-label="数字" :modelValue="4" placeholder="请选择" style="width: 180px">
        <Select.Option v-for="option in options" :key="option" :value="option">{{ option }}</Select.Option>
    </Select>
    <br />
    <br />
    <Button @click="add">changeOptions Dynamic</Button>
</template>

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

    const provinces = ['四川', '广东'];
    const maps: Record<string, string[]> = {
        四川: ['成都', '都江堰'],
        广东: ['广州', '深圳', '东莞'],
    };

    const province = ref(provinces[0]);
    const cities = computed(() => maps[province.value]);
    const city = ref<string | undefined>(cities.value[0]);

    function changeProvince(newProvince?: string) {
        if (!newProvince) {
            return;
        }
        province.value = newProvince;
        city.value = maps[newProvince][0];
    }
</script>

<template>
    <Select aria-label="省份" :modelValue="province" style="width: 150px; margin: 10px" @change="changeProvince">
        <Select.Option v-for="item in provinces" :key="item" :value="item">{{ item }}</Select.Option>
    </Select>
    <Select v-model="city" aria-label="城市" style="width: 150px; margin: 10px">
        <Select.Option v-for="item in cities" :key="item" :value="item">{{ item }}</Select.Option>
    </Select>
</template>

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

<template>
    <Select aria-label="单选" filter placeholder="带搜索功能的单选" style="width: 180px">
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
    <br />
    <br />
    <Select aria-label="多选" :autoClearSearchValue="false" filter multiple placeholder="带搜索功能的多选" style="width: 300px">
        <Select.Option value="semi-0">Semi-0</Select.Option>
        <Select.Option value="semi-1">Semi-1</Select.Option>
        <Select.Option value="semi-2">Semi-2</Select.Option>
        <Select.Option value="semi-3">Semi-3</Select.Option>
        <Select.Option value="semi-4">Semi-4</Select.Option>
    </Select>
</template>

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

<template>
    <Select aria-label="单选" defaultValue="ulikecam" filter placeholder="我的搜索框在下拉菜单中" searchPlaceholder="带搜索功能的单选" searchPosition="dropdown" style="width: 200px">
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
    <br />
    <br />
    <Select aria-label="多选" :autoClearSearchValue="false" :defaultValue="['semi-1']" filter multiple placeholder="我的搜索框在下拉菜单中" searchPlaceholder="带搜索功能的多选" searchPosition="dropdown" style="width: 300px">
        <Select.Option value="semi-0">Semi-0</Select.Option>
        <Select.Option value="semi-1">Semi-1</Select.Option>
        <Select.Option value="semi-2">Semi-2</Select.Option>
        <Select.Option value="semi-3">Semi-3</Select.Option>
        <Select.Option value="semi-4">Semi-4</Select.Option>
    </Select>
</template>

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

    interface Item {
        value: string;
        label: string;
        type: number;
    }

    const mockSearch = (inputValue: string): Item[] => {
        const length = Math.ceil(Math.random() * 100);
        return Array.from({ length }, (_v, i) => {
            return { value: inputValue + i, label: `相近业务 ${inputValue}${i}`, type: i + 1 };
        });
    };

    const loading = ref(false);
    const list = ref<Item[]>([
        { value: 'douyin', label: '抖音', type: 1 },
        { value: 'xingtu', label: '醒图', type: 2 },
        { value: 'jianying', label: '剪映', type: 3 },
        { value: 'toutiao', label: '今日头条', type: 4 },
    ]);
    const value = ref<Item[]>([]);

    const handleSearch = debounce((inputValue: string) => {
        loading.value = true;
        if (inputValue) {
            const result = mockSearch(inputValue);
            setTimeout(() => {
                loading.value = false;
                list.value = result;
            }, 1000);
        } else {
            loading.value = false;
        }
    }, 1000);
</script>

<template>
    <Select v-model="value" aria-label="远程搜索" changeWithObject filter :loading="loading" multiple :optionList="list" remote style="width: 300px" @search="handleSearch">
        <template #emptyContent />
    </Select>
</template>

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

    function searchLabel(sugInput: string, option: SelectOptionProps) {
        const label = String(option.label).toUpperCase();
        const sug = sugInput.toUpperCase();
        return label.includes(sug);
    }
</script>

<template>
    <Select aria-label="业务线" :filter="searchLabel" placeholder="try douyin" style="width: 180px">
        <Select.Option value="douyin">douyin</Select.Option>
        <Select.Option value="ulikecam">HOTSOON</Select.Option>
        <Select.Option value="jianying">PIPIXIA</Select.Option>
        <Select.Option value="xigua">XIGUA</Select.Option>
    </Select>
</template>

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

    interface ListItem {
        name: string;
        email: string;
        avatar: string;
    }

    const list: ListItem[] = [
        {
            name: '夏可漫',
            email: 'xiakeman@example.com',
            avatar: '/assets/placeholder/avatar-a.svg',
        },
        {
            name: '申悦',
            email: 'shenyue@example.com',
            avatar: '/assets/root-web-sites/bag.jpeg',
        },
        {
            name: '曲晨一',
            email: 'quchenyi@example.com',
            avatar: '/assets/placeholder/avatar-c.svg',
        },
        {
            name: '文嘉茂',
            email: 'wenjiamao@example.com',
            avatar: '/assets/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png',
        },
    ];

    const onChange = (value: unknown) => console.log(value);

    const optionStyle = {
        display: 'flex',
        paddingLeft: '24px',
        paddingTop: '10px',
        paddingBottom: '10px',
    };
</script>

<template>
    <Select aria-label="单选" defaultValue="申悦" placeholder="请选择" style="width: 280px; height: 40px" @change="onChange">
        <template #selectedItem="{ option }">
            <div style="display: flex; align-items: center">
                <Avatar alt="" size="small" :src="option.avatar" />
                <span style="margin-left: 8px">{{ option.email }}</span>
            </div>
        </template>
        <Select.Option v-for="item in list" :key="item.email" v-bind="item" showTick :style="optionStyle" :value="item.name">
            <Avatar alt="" size="small" :src="item.avatar" />
            <div style="margin-left: 8px">
                <div style="font-size: 14px">{{ item.name }}</div>
                <div style="color: var(--color-text-2); font-size: 12px; line-height: 16px; font-weight: normal">
                    {{ item.email }}
                </div>
            </div>
        </Select.Option>
    </Select>
    <Select aria-label="多选圆形头像" :defaultValue="['申悦', '曲晨一']" :maxTagCount="2" multiple placeholder="请选择" style="width: 280px; margin-top: 20px" @change="onChange">
        <template #tag="{ option, onClose }">
            <Tag :avatarSrc="option.avatar" avatarShape="circle" closable size="large" @close="onClose">
                {{ option.name }}
            </Tag>
        </template>
        <Select.Option v-for="item in list" :key="item.email" v-bind="item" showTick :style="optionStyle" :value="item.name">
            <Avatar alt="" size="small" :src="item.avatar" />
            <div style="margin-left: 8px">
                <div style="font-size: 14px">{{ item.name }}</div>
                <div style="color: var(--color-text-2); font-size: 12px; line-height: 16px; font-weight: normal">
                    {{ item.email }}
                </div>
            </div>
        </Select.Option>
    </Select>
    <Select aria-label="多选方形头像" :defaultValue="['申悦', '曲晨一']" :maxTagCount="2" multiple placeholder="请选择" style="width: 280px; margin-top: 20px" @change="onChange">
        <template #tag="{ option, onClose }">
            <Tag :avatarSrc="option.avatar" avatarShape="square" closable size="large" @close="onClose">
                {{ option.name }}
            </Tag>
        </template>
        <Select.Option v-for="item in list" :key="item.email" v-bind="item" showTick :style="optionStyle" :value="item.name">
            <Avatar alt="" size="small" :src="item.avatar" />
            <div style="margin-left: 8px">
                <div style="font-size: 14px">{{ item.name }}</div>
                <div style="color: var(--color-text-2); font-size: 12px; line-height: 16px; font-weight: normal">
                    {{ item.email }}
                </div>
            </div>
        </Select.Option>
    </Select>
</template>

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

    const dropdownStyle = { width: '250px' };
</script>

<template>
    <Select aria-label="业务线" :dropdownStyle="dropdownStyle" dropdownClassName="test" placeholder="自定义弹出层样式的" style="width: 180px">
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="ulikecam">轻颜相机</Select.Option>
        <Select.Option value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
</template>

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

    interface Item {
        value: string;
        label: string;
        type: number;
    }

    const list: Item[] = [
        { value: 'douyin', label: '抖音', type: 1 },
        { value: 'ulikecam', label: '轻颜相机', type: 2 },
        { value: 'jianying', label: '剪映', type: 3 },
        { value: 'toutiao', label: '今日头条', type: 4 },
    ];
    const cbValue = ref<Item>();
    const multipleCbValue = ref<Item[]>();
    // Select infers its value type from the value, not from optionList, so an empty typed default gives change Item[]
    const noItems: Item[] = [];

    const onChange = (value?: Item) => {
        cbValue.value = value;
        console.log(value);
    };

    const onMultipleChange = (value: Item[]) => {
        multipleCbValue.value = value;
        console.log(value);
    };
</script>

<template>
    <div>
        <div>
            <Select aria-label="单选" changeWithObject :defaultValue="list[0]" :optionList="list" placeholder="单选" style="width: 150px" @change="onChange" />
            <h4 id="select-on-change-with-object-single">onChange回调:</h4>
            <TextArea aria-labelledby="select-on-change-with-object-single" autosize :modelValue="JSON.stringify(cbValue)" :rows="2" style="width: 320px; margin-bottom: 48px" />
        </div>
        <div>
            <Select aria-label="多选" changeWithObject :defaultValue="noItems" multiple :optionList="list" placeholder="多选" style="width: 320px" @change="onMultipleChange" />
            <h4 id="select-on-change-with-object-multiple">onChange回调:</h4>
            <TextArea aria-labelledby="select-on-change-with-object-multiple" autosize :modelValue="JSON.stringify(multipleCbValue)" style="width: 320px" />
        </div>
    </div>
</template>

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

    const optionList = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'toutiao', label: '今日头条' },
    ];
</script>

<template>
    <Select allowCreate aria-label="业务线" defaultActiveFirstOption filter multiple :optionList="optionList" style="width: 400px" @change="(value) => console.log(value)" />
    <br />
    <br />
    <Select allowCreate aria-label="业务线" defaultActiveFirstOption filter multiple :optionList="optionList" placeholder="With renderCreateItem" style="width: 400px" @change="(value) => console.log(value)">
        <template #createItem="{ inputValue, style }">
            <div :style="[{ padding: '10px' }, style]">Create Item：{{ inputValue }}</div>
        </template>
    </Select>
</template>

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

    const options = Array.from({ length: 3000 }, (_, i) => ({ label: `option-${i}`, value: i }));
    const virtualize = {
        height: 270,
        width: '100%',
        itemSize: 36,
    };
</script>

<template>
    <Select aria-label="virtualize" filter :optionList="options" placeholder="拥有3k个Option的Select" :style="{ width: '260px' }" :virtualize="virtualize" />
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { IconAppCenter, IconChevronDown } from '@fibrous/semi-icons-vue';
    import { Select, Tag } from '@fibrous/semi-ui-vue';

    const valList = ref(['douyin', 'ulikecam']);
    const list = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'toutiao', label: '今日头条' },
    ];
</script>

<template>
    <div>
        <h4>不同背景色的触发器</h4>
        <Select v-model="valList" aria-label="不同背景色的触发器" filter multiple :optionList="list" searchPosition="dropdown" :style="{ width: '240px' }">
            <template #trigger="{ value }">
                <div
                    :style="{
                        minWidth: '112px',
                        backgroundColor: 'var(--semi-color-primary-light-default)',
                        height: '32px',
                        display: 'flex',
                        alignItems: 'center',
                        paddingLeft: '12px',
                        borderRadius: '3px',
                        color: 'var(--semi-color-primary)',
                    }"
                >
                    <div :style="{ fontWeight: 600, flexShrink: 0, fontSize: '14px' }">业务线</div>
                    <div
                        :style="{
                            margin: '4px',
                            whiteSpace: 'nowrap',
                            textOverflow: 'ellipsis',
                            flexGrow: 1,
                            overflow: 'hidden',
                        }"
                    >
                        {{ value.map((item) => item.label).join(' , ') }}
                    </div>
                    <IconAppCenter :style="{ marginRight: '8px', flexShrink: 0 }" />
                </div>
            </template>
        </Select>
        <br />
        <br />
        <h4>使用 circle Tag 作为触发器</h4>
        <Select v-model="valList" aria-label="circle Tag 触发器" filter multiple :optionList="list" searchPosition="dropdown" :style="{ width: '240px', marginTop: '20px', outline: 0 }">
            <template #trigger="{ value }">
                <div
                    :style="{
                        margin: '4px',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        flexGrow: 1,
                        overflow: 'hidden',
                        display: 'flex',
                        alignItems: 'center',
                    }"
                >
                    <Tag color="cyan" shape="circle" size="large">
                        {{ value.map((item) => item.label).join(' / ') }}
                        <template #suffixIcon>
                            <IconChevronDown />
                        </template>
                    </Tag>
                </div>
            </template>
        </Select>
    </div>
</template>

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

    const valList = ref(['douyin', 'ulikecam']);
    const inputVal = ref('');
    const list = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'toutiao', label: '今日头条' },
    ];

    const handleSort = (currentLabels: string[]) => {
        valList.value = currentLabels.flatMap((item) => list.find((i) => i.label === item)?.value ?? []);
    };
</script>

<template>
    <h4>可对已选项拖拽重新排序的 Select</h4>
    <Select v-model="valList" aria-label="可拖拽排序的 Select" filter multiple :optionList="list" :style="{ width: '240px' }">
        <template #trigger="{ value, onSearch }">
            <div role="presentation" @keydown.stop>
                <TagInput
                    :allowDuplicates="false"
                    draggable
                    :inputValue="inputVal"
                    :modelValue="value.map((item) => String(item.label))"
                    showClear
                    @change="handleSort"
                    @inputChange="
                        (word) => {
                            onSearch(word);
                            inputVal = word;
                        }
                    "
                />
            </div>
        </template>
    </Select>
</template>

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

    const inputValue = ref('');

    const optionList = [
        { value: 'douyin', label: '抖音', otherKey: 0 },
        { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
        { value: 'jianying', label: '剪映', otherKey: 2 },
        { value: 'toutiao', label: '今日头条', otherKey: 3 },
    ];
</script>

<template>
    <Select aria-label="单选" dropdownClassName="components-select-demo-renderOptionItem" filter :optionList="optionList" placeholder="单选" style="width: 180px" @search="inputValue = $event">
        <!--
            Put style on the outer DOM or the virtual list breaks; add selected/focused/disabled styles from the slot
            params; bind onMouseenter and class on the outer DOM or arrow keys display wrongly; put id there so screen
            readers announce the option the arrow keys reach
        -->
        <template #optionItem="{ id, disabled, selected, label, focused, class: className, style, onClick, onMouseenter }">
            <div
                :id="id"
                :aria-disabled="disabled"
                :aria-selected="selected"
                :class="[
                    'custom-option-render',
                    {
                        'custom-option-render-focused': focused,
                        'custom-option-render-disabled': disabled,
                        'custom-option-render-selected': selected,
                    },
                    className,
                ]"
                role="option"
                :style="style"
                @click="onClick"
                @mouseenter="onMouseenter"
            >
                <Checkbox :modelValue="selected" />
                <div class="option-right">
                    <Highlight :searchWords="[inputValue]" :sourceString="String(label)" />
                </div>
            </div>
        </template>
    </Select>
    <br />
    <br />
    <Select aria-label="多选" dropdownClassName="components-select-demo-renderOptionItem" filter multiple :optionList="optionList" placeholder="多选" style="width: 320px" @search="inputValue = $event">
        <template #optionItem="{ id, disabled, selected, label, focused, class: className, style, onClick, onMouseenter }">
            <div
                :id="id"
                :aria-disabled="disabled"
                :aria-selected="selected"
                :class="[
                    'custom-option-render',
                    {
                        'custom-option-render-focused': focused,
                        'custom-option-render-disabled': disabled,
                        'custom-option-render-selected': selected,
                    },
                    className,
                ]"
                role="option"
                :style="style"
                @click="onClick"
                @mouseenter="onMouseenter"
            >
                <Checkbox :modelValue="selected" />
                <div class="option-right">
                    <Highlight :searchWords="[inputValue]" :sourceString="String(label)" />
                </div>
            </div>
        </template>
    </Select>
</template>