Add key style to ObjectOption for per-option inline CSS

[janosh]

Closes #251.

Adds key style to type ObjectOption:

export type ObjectOption = {
  label: string | number // user-displayed text
  value?: unknown // associated value, can be anything incl. objects (defaults to label if undefined)
  // ...
+ style?: string | { option: string; selected: string } // single CSS string or an object with keys
+ // 'option' and 'selected' for styles that only apply to the dropdown and list of selected
+ // options, respectively
}

Example code

<script>
  import MultiSelect from 'svelte-multiselect'

  const foods = `🍇 Grapes, 🍈 Melon, 🍉 Watermelon, 🍊 Tangerine, 🍋 Lemon, 🍌 Banana, 🍍 Pineapple`.split(`, `)

  function random_color() {
    const r = Math.floor(Math.random() * 255)
    const g = Math.floor(Math.random() * 255)
    const b = Math.floor(Math.random() * 255)
    return `rgb(${r}, ${g}, ${b})`
  }
</script>

<MultiSelect
  options={foods.map(label => ({ label, style: `background-color: ${random_color()}` }))}
/>

You can try it out on https://multiselect.janosh.dev/ui.

@paul-brenner Would this address your use case? Feel free to suggest changes.

[paul-brenner]

Wow this looks great. One follow up question:
Does this approach tie the styling of the selected background to the background of the dropdown options? More specifically, does it allow styling the selected items as you have done here, but then making the dropdown background white to look more like the pills that openbook.fyi built

For context, my co-founder and designer are pushing me to make something that looks like the cute little dropdowns in airtable forms:

[janosh]

Does this approach tie the styling of the selected background to the background of the dropdown options

Good question, no it doesn't. I should have mentioned this above. The style key can be a string (as shown above) or an object with selected and option keys which will only apply to selected options and dropdown options, respectively.

style?: string | { option: string; selected: string } // single CSS string or an object with keys ....

[paul-brenner]

Love it!
And I'll just leave the feedback here: svelte-multiselect has been great to work with. I've combed through every example multiple times. So if you ever thought "does anyone even look at all these examples that I'm putting so much effort into" the answer is 100% yes. Thank you!

[janosh]

Thanks for the feedback! That's great to hear! 😄