选择器

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

    const optionList = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映', disabled: true },
        { value: 'xigua', label: '西瓜视频' },
    ];
</script>

<Select aria-label="业务线" {optionList} style="width: 120px" value="douyin" />
<br />
<br />
<Select aria-label="业务线" disabled optionList={optionList.filter((option) => !option.disabled)} style="width: 120px" value="douyin" />
<br />
<br />
<Select aria-label="业务线" {optionList} placeholder="请选择业务线" style="width: 120px" />

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

    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>

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

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

    const optionList = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'xigua', label: '西瓜视频' },
    ];
    const onExceed = () => Toast.warning('最多只允许选择两项');
</script>

<Select aria-label="Select 示例" multiple {optionList} style="width: 320px" value={['douyin', 'ulikecam']} />
<br />
<br />
<Select aria-label="Select 示例" maxTagCount={2} multiple {optionList} restTagsPopoverProps={{ position: 'top' }} showRestTagsPopover style="width: 320px" value={['douyin', 'ulikecam', 'jianying']} />
<br />
<br />
<Select aria-label="Select 示例" max={2} multiple {onExceed} {optionList} style="width: 320px" value={['douyin']} />
<br />
<br />
<Select aria-label="Select 示例" ellipsisTrigger expandRestTagsOnClick maxTagCount={2} multiple {optionList} restTagsPopoverProps={{ position: 'top' }} showRestTagsPopover style="width: 220px" value={['xigua', 'ulikecam', 'jianying', 'douyin']} />

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

    const asia = { key: 'asia', label: 'Asia' };
    const europe = { key: 'europe', label: 'Europe' };
    const southAmerica = { key: 'south-america', label: 'South America' };

    const optionList = [
        { value: 'a-1', label: 'China', group: asia },
        { value: 'a-2', label: 'Korea', group: asia },
        { value: 'b-1', label: 'Germany', group: europe },
        { value: 'b-2', label: 'France', group: europe },
        { value: 'c-1', label: 'Peru', group: southAmerica },
    ];
</script>

<Select aria-label="地区" filter {optionList} placeholder="" style="width: 180px" />

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

    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' }],
        },
    ];

    const optionList = data.flatMap(({ label, children }) => children.map((option) => ({ ...option, group: { key: label, label } })));
</script>

<Select aria-label="地区" filter {optionList} placeholder="" style="width: 180px">
    {#snippet groupLabel({ group })}
        <strong>{group.label}</strong>
    {/snippet}
</Select>

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

    const optionList = [{ value: 'ulikecam', label: '轻颜相机' }];
</script>

<Select aria-label="small" {optionList} placeholder="请选择业务线" size="small" style="width: 180px" />
<br />
<br />
<Select aria-label="default" {optionList} placeholder="请选择业务线" style="width: 180px" />
<br />
<br />
<Select aria-label="large" {optionList} placeholder="请选择业务线" size="large" style="width: 180px" />

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

    const optionList = [{ value: 'ulikecam', label: '轻颜相机' }];
</script>

<Select aria-label="default" {optionList} style="width: 180px" />
<br />
<br />
<Select aria-label="warning" {optionList} style="width: 180px" validateStatus="warning" />
<br />
<br />
<Select aria-label="error" {optionList} style="width: 180px" validateStatus="error" />

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

    const optionList = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'xigua', label: '西瓜视频' },
    ];
</script>

<Select aria-label="Select 示例" {optionList} showClear style="width: 320px" value="ulikecam">
    {#snippet prefix()}
        <IconVigoLogo />
    {/snippet}
</Select>
<br />
<br />
<Select aria-label="Select 示例" {optionList} showArrow={false} style="width: 320px" value="ulikecam">
    {#snippet prefix()}
        <IconVigoLogo />
    {/snippet}
    {#snippet suffix()}
        <IconGift />
    {/snippet}
</Select>

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

    const optionList = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'duoshan', label: '多闪' },
        { value: 'xigua', label: '西瓜视频' },
    ];
    const innerSlotStyle = 'background-color: var(--color-white); height: 36px; display: flex; align-items: center; cursor: pointer; padding-left: 32px; border-top: 1px solid var(--semi-color-border); border-radius: 0 0 6px 6px; color: var(--semi-color-link)';
    const outSlotStyle = 'background-color: var(--semi-color-fill-0); height: 36px; display: flex; padding-left: 32px; color: var(--semi-color-link); align-items: center; cursor: pointer; border-top: 1px solid var(--semi-color-border); border-radius: 0 0 6px 6px';
</script>

<div>
    <p>outerBottomSlot:</p>
    <Select aria-label="outerBottomSlot" autoAdjustOverflow={false} defaultOpen dropdownStyle="width: 180px" maxHeight={150} {optionList} placeholder="自定义外侧底部slot，始终显示" position="bottom" style="width: 300px">
        {#snippet outerBottomSlot()}
            <div style={outSlotStyle}>
                <span style="color: var(--semi-color-link)">未找到应用?</span>
            </div>
        {/snippet}
    </Select>
    <p style="margin-top: 200px">innerBottomSlot:</p>
    <Select aria-label="innerBottomSlot" dropdownStyle="width: 180px" maxHeight={150} {optionList} placeholder="自定义内侧底部slot，滚动至底部显示" style="width: 300px">
        {#snippet innerBottomSlot()}
            <div style={innerSlotStyle}>点击加载更多</div>
        {/snippet}
    </Select>
</div>

<script lang="ts">
    import { RadioGroup, Select, type RadioChangeEvent, type SelectValue } from '@fibrae/semi-ui-svelte';

    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: '反馈' },
    ];

    let key = $state('component');
    let value = $state<SelectValue>({ value: 'faq', label: '常见问题' });

    const changeCategory = (event: RadioChangeEvent) => {
        key = String(event.target.value);
    };
</script>

<Select aria-label="选项" autoAdjustOverflow={false} bind:value defaultOpen onChangeWithObject optionList={list[key]} style="width: 200px">
    {#snippet outerTopSlot()}
        <!-- The radio group switches with arrow keys, so categories need no tabpanel association -->
        <div style="padding: 8px 12px; border-bottom: 0.5px solid var(--semi-color-border)">
            <RadioGroup aria-label="选项分类" buttonSize="small" onChange={changeCategory} options={categoryOptions} type="button" value={key} />
        </div>
    {/snippet}
</Select>

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

    const optionList = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'xigua', label: '西瓜视频' },
    ];

    let value = $state<string | undefined>('xigua');
</script>

<Select aria-label="业务线" bind:value {optionList} placeholder="受控的Select" style="width: 300px" />

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

    let options = $state([1, 2, 3, 4]);

    const optionList = $derived(options.map((option) => ({ value: option, label: String(option) })));

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

<Select aria-label="数字" {optionList} placeholder="请选择" style="width: 180px" value={4} />
<br />
<br />
<Button onclick={add}>changeOptions Dynamic</Button>

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

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

    let province = $state(provinces[0]);
    let city = $state<string | undefined>(maps[provinces[0]][0]);

    const provinceList = provinces.map((item) => ({ value: item, label: item }));
    const cityList = $derived(maps[province].map((item) => ({ value: item, label: item })));

    const changeProvince = (next: SelectValue) => {
        if (typeof next !== 'string') {
            return;
        }
        province = next;
        city = maps[next][0];
    };
</script>

<Select aria-label="省份" onChange={changeProvince} optionList={provinceList} style="width: 150px; margin: 10px" value={province} />
<Select aria-label="城市" bind:value={city} optionList={cityList} style="width: 150px; margin: 10px" />

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

    const businessList = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'xigua', label: '西瓜视频' },
    ];
    const semiList = Array.from({ length: 5 }, (_, i) => ({ value: `semi-${i}`, label: `Semi-${i}` }));
</script>

<Select aria-label="单选" filter optionList={businessList} placeholder="带搜索功能的单选" style="width: 180px" />
<br />
<br />
<Select aria-label="多选" autoClearSearchValue={false} filter multiple optionList={semiList} placeholder="带搜索功能的多选" style="width: 300px" />

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

    const businessList = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'xigua', label: '西瓜视频' },
    ];
    const semiList = Array.from({ length: 5 }, (_, i) => ({ value: `semi-${i}`, label: `Semi-${i}` }));
</script>

<Select aria-label="单选" filter optionList={businessList} placeholder="我的搜索框在下拉菜单中" searchPlaceholder="带搜索功能的单选" searchPosition="dropdown" style="width: 200px" value="ulikecam" />
<br />
<br />
<Select aria-label="多选" autoClearSearchValue={false} filter multiple optionList={semiList} placeholder="我的搜索框在下拉菜单中" searchPlaceholder="带搜索功能的多选" searchPosition="dropdown" style="width: 300px" value={['semi-1']} />

<script lang="ts">
    import { debounce } from 'es-toolkit';
    import { Select, type SelectValue } from '@fibrae/semi-ui-svelte';

    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 };
        });
    };

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

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

<Select aria-label="远程搜索" bind:value emptyContent={null} filter {loading} multiple onChangeWithObject onSearch={handleSearch} optionList={list} remote style="width: 300px" />

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

    const optionList = [
        { value: 'douyin', label: 'douyin' },
        { value: 'ulikecam', label: 'HOTSOON' },
        { value: 'jianying', label: 'PIPIXIA' },
        { value: 'xigua', label: 'XIGUA' },
    ];

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

<Select aria-label="业务线" filter={searchLabel} {optionList} placeholder="try douyin" style="width: 180px" />

<script lang="ts">
    import { Avatar, Select, Tag, type SelectOptionProps, type SelectValue } from '@fibrae/semi-ui-svelte';

    const optionStyle = 'display: flex; padding-left: 24px; padding-top: 10px; padding-bottom: 10px';

    const list = [
        {
            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',
        },
    ].map((item) => ({ ...item, value: item.name, label: item.name, showTick: true, style: optionStyle }));

    const onChange = (value: SelectValue) => console.log(value);
</script>

{#snippet optionLabel({ option }: { option: SelectOptionProps })}
    <Avatar alt="" size="small" src={option.avatar} />
    <div style="margin-left: 8px">
        <div style="font-size: 14px">{option.name}</div>
        <div style="color: var(--color-text-2); font-size: 12px; line-height: 16px; font-weight: normal">
            {option.email}
        </div>
    </div>
{/snippet}

<Select aria-label="单选" {onChange} {optionLabel} optionList={list} placeholder="请选择" style="width: 280px; height: 40px" value="申悦">
    {#snippet 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>
    {/snippet}
</Select>
<Select aria-label="多选圆形头像" maxTagCount={2} multiple {onChange} {optionLabel} optionList={list} placeholder="请选择" style="width: 280px; margin-top: 20px" value={['申悦', '曲晨一']}>
    {#snippet tag({ option, onClose })}
        <Tag avatarShape="circle" avatarSrc={option.avatar} closable {onClose} size="large">
            {option.name}
        </Tag>
    {/snippet}
</Select>
<Select aria-label="多选方形头像" maxTagCount={2} multiple {onChange} {optionLabel} optionList={list} placeholder="请选择" style="width: 280px; margin-top: 20px" value={['申悦', '曲晨一']}>
    {#snippet tag({ option, onClose })}
        <Tag avatarShape="square" avatarSrc={option.avatar} closable {onClose} size="large">
            {option.name}
        </Tag>
    {/snippet}
</Select>

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

    const optionList = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'xigua', label: '西瓜视频' },
    ];
</script>

<Select aria-label="业务线" dropdownClassName="test" dropdownStyle="width: 250px" {optionList} placeholder="自定义弹出层样式的" style="width: 180px" />

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

    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 },
    ];

    let cbValue = $state<SelectValue>();
    let multipleCbValue = $state<SelectValue>();

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

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

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

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

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

<Select allowCreate aria-label="业务线" defaultActiveFirstOption filter multiple onChange={(value) => console.log(value)} {optionList} style="width: 400px" />
<br />
<br />
<Select allowCreate aria-label="业务线" defaultActiveFirstOption filter multiple onChange={(value) => console.log(value)} {optionList} placeholder="With createItem" style="width: 400px">
    {#snippet createItem({ inputValue, style })}
        <div style={`padding: 10px; ${style ?? ''}`}>Create Item：{inputValue}</div>
    {/snippet}
</Select>

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

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

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

<script lang="ts">
    import { IconAppCenter, IconChevronDown } from '@fibrae/semi-icons-svelte';
    import { Select, Tag, type SelectValue } from '@fibrae/semi-ui-svelte';

    let valList = $state<SelectValue>(['douyin', 'ulikecam']);

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

<div>
    <h4>不同背景色的触发器</h4>
    <Select aria-label="不同背景色的触发器" bind:value={valList} filter multiple optionList={list} searchPosition="dropdown" style="width: 240px">
        {#snippet trigger({ value })}
            <div style="min-width: 112px; background-color: var(--semi-color-primary-light-default); height: 32px; display: flex; align-items: center; padding-left: 12px; border-radius: 3px; color: var(--semi-color-primary)">
                <div style="font-weight: 600; flex-shrink: 0; font-size: 14px">业务线</div>
                <div style="margin: 4px; white-space: nowrap; text-overflow: ellipsis; flex-grow: 1; overflow: hidden">
                    {value.map((item) => item.label).join(' , ')}
                </div>
                <IconAppCenter style="margin-right: 8px; flex-shrink: 0" />
            </div>
        {/snippet}
    </Select>
    <br />
    <br />
    <h4>使用 circle Tag 作为触发器</h4>
    <Select aria-label="circle Tag 触发器" bind:value={valList} filter multiple optionList={list} searchPosition="dropdown" style="width: 240px; margin-top: 20px; outline: 0">
        {#snippet trigger({ value })}
            <div style="margin: 4px; white-space: nowrap; text-overflow: ellipsis; flex-grow: 1; overflow: hidden; display: flex; align-items: center">
                <Tag color="cyan" shape="circle" size="large">
                    {value.map((item) => item.label).join(' / ')}
                    {#snippet suffixIcon()}
                        <IconChevronDown />
                    {/snippet}
                </Tag>
            </div>
        {/snippet}
    </Select>
</div>

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

    let valList = $state<SelectValue>(['douyin', 'ulikecam']);
    let inputVal = $state('');

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

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

<h4>可对已选项拖拽重新排序的 Select</h4>
<Select aria-label="可拖拽排序的 Select" bind:value={valList} filter multiple optionList={list} style="width: 240px">
    {#snippet trigger({ value, onSearch })}
        <div role="presentation" onkeydown={(event) => event.stopPropagation()}>
            <TagInput
                allowDuplicates={false}
                draggable
                inputValue={inputVal}
                onChange={handleSort}
                onInputChange={(word) => {
                    onSearch(word);
                    inputVal = word;
                }}
                showClear
                value={value.map((item) => String(item.label))}
            />
        </div>
    {/snippet}
</Select>

<script lang="ts">
    import { Checkbox, Highlight, Select, type SelectOptionItemSnippetProps } from '@fibrae/semi-ui-svelte';

    let inputValue = $state('');

    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>

<!--
    Put style on the outer DOM or the virtual list breaks; add selected/focused/disabled styles from the snippet
    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
-->
{#snippet optionItem({ id, disabled, selected, label, focused, class: className, style, onclick, onmouseenter }: SelectOptionItemSnippetProps)}
    <div
        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,
        ]}
        {id}
        role="option"
        {style}
        {onclick}
        {onmouseenter}
    >
        <Checkbox checked={selected} />
        <div class="option-right">
            <Highlight searchWords={[inputValue]} sourceString={String(label)} />
        </div>
    </div>
{/snippet}

<Select aria-label="单选" dropdownClassName="components-select-demo-renderOptionItem" filter onSearch={(value) => (inputValue = value)} {optionItem} {optionList} placeholder="单选" style="width: 180px" />
<br />
<br />
<Select aria-label="多选" dropdownClassName="components-select-demo-renderOptionItem" filter multiple onSearch={(value) => (inputValue = value)} {optionItem} {optionList} placeholder="多选" style="width: 320px" />