Added options-slot (Variant 2)

[jbirtel]

I actually implemented this as an alternative to the first option. I actually like that one a bit better, because it is simpler imo. Link to the Other PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svelecte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 27, 2024 3:53pm
svelecte-v5	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 27, 2024 3:53pm

[mskocik]

Why the example implementation for this use case (display icon in dropdown based on selection state) is not enough for you?

[jbirtel]

I already implemented it this way right now. However, I want to keep the search highlighting with the custom icon.

[mskocik]

You can provide custom icon and keep the highlighting

The only downside is that you can't pass icon as svelte component. Is this what you are trying to do?

Can you show me in REPL what would you like to achieve?

[jbirtel]

How did you insert the icon here? I think it would be enough for now 🤔 However, I cannot not insert it as a string, but rather directly as HTML

<div class="multiselect-options" slot="option" let:item>
    <div class="icon-checkbox" class:selected={item.$selected}
            class:borderless={!autocompleteConfig.multiple}></div>
    <div class="sv-item--content">{@html item?.label || item?.text}</div>
</div>

Then, the icon is inserted in the css as background of the .icon-checkbox::before

[mskocik]

REPL with your slot and inserting icon as ::before pseudo-element. Still I don't understand what is missing in current implementation 🤔

[jbirtel]

That is exactly how I implemented it. However, the highlighting of the search is missing in that case, so when I type „on“ I expext One and Second to be highlighted. And I just wanted to get that status quo back with my implementation

[mskocik]

Oh yes, I got sidetracked from original issue to 'icon' discussion.

I am closing this as it is achievable by other means. And let's continue discussion on #250