Option grouping

This is a perfect little component. In some cases where there are many fields it would be nice if a single Multiselect could contain several options, perhaps like this:

<script>
  import MultiSelect from 'svelte-multiselect'

  const genreTags = [`Rock`, `Electronic`, `Opera`]
  const keyTags = [`C`, `D`, `E`, `F`, `G`, `A`, `B`]
  const scaleTags = [`Major`, `Minor`]

  let selectedTags = []
</script>

<MultiSelect
  bind:selectedTags
  options={[genreTags, keyTags, scaleTags]}
  maxSelect={[null, 1, 1]}
  required={[true, true, false]}
  placeholder="Select Tags"
/>

I need this in my app - are you open to an PR (if this isn’t already supported)?

[janosh]

1. Let’s go with disabling allowUserOptions entirely when options are grouped for now.
2. Fair point. We’ll stick with a single defaultDisabledTitle for all groups.

As I said, happy to take a PR for this. Though the default way to group options should be an object of arrays imo:

<script>
  import MultiSelect from 'svelte-multiselect'

  const options: Record<string, Option[]> = {
    Genre: [`Rock`, `Electronic`, `Opera`],
    Key: [`C`, `D`, `E`, `F`, `G`, `A`, `B`],
    Scale: [`Major`, `Minor`],
  }

  let selected = []
</script>

<MultiSelect
  bind:selected
  {options}
  maxSelect={[null, 1, 1]}
  required={[true, true, false]}
  allowUserOptions={[true, false, true]}
  placeholder="Select Tags"
/>

We can expand to

options: Record<string, { label: string, options: Option[], required: boolean, maxSelect: number | null }>

later.

[lysdexic-audio]

Sorry @janosh bit too pressured at work to get onto doing this properly - working around it for now. Anyone else wants to jump in please do