feat: make Select receive custom options

[RyanZhiNie]

📑 Description

In the current version, items prop's value can only be an array of {name, value} and then the array is transformed into options. But these options cannot be customized, e.g., selected or disabled.
I make "slot" be the alternative value, so users can pass their desired option elements into this component.

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• I have checked the page with https://validator.unl.edu/
• All the tests have passed
• My pull request is based on the latest commit (not the npm version).

[vercel]

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

Name	Status	Preview	Comments	Updated
flowbite-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 8, 2023 at 0:34AM (UTC)
flowbite-svelte-update	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 8, 2023 at 0:34AM (UTC)

[vercel]

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

Name	Status	Preview	Comments	Updated
flowbite-svelte-update	🔄 Building (Inspect)			Jan 4, 2023 at 10:17AM (UTC)

[jjagielka]

That request make sense. Couple of suggestions though:

1. export let items: SelectOptionType[] | 'slot' = [];
   This is completely unneeded. Better approach is to use else in the each loop that will trigger when items are empty.

  {#each items as { value, name }}
    <option {value}>{name}</option>
  {:else}
    <slot />
  {/each}

2. placeholder should be independent from items. If we want to make it optional then:

  {#if placeholder}
    <option disabled selected value="">{placeholder}</option>
  {/if}

This will force to change your example in docs to:

<Select id="countries" class="mt-2" bind:value={selected} placeholder="">

3. Why did you change the lines 60-61? It's not connected with what you want to achieve.

[RyanZhiNie]

Nice suggestions. I've updated my changes. Thx.

Why did you change the lines 60-61? It's not connected with what you want to achieve.

I changed these two lines because the html code they generated were inconsistent with the code shown in flowbite website, but you're right, they are not connected with my PR, maybe I will make another PR to fix them.

[jjagielka]

@shinokada - I'm OK with that PR