Svelte MultiSelect

<script>
  import MultiSelect from 'svelte-multiselect'
  import { languages } from '$site/options'
  import { LanguageSlot, MinusIcon } from '$site'
  import { Icon } from 'svelte-zoo'
</script>

<MultiSelect
  options={languages}
  maxSelect={5}
  placeholder="What languages do you know?"
  selected={['Python', 'TypeScript', 'Julia']}
  let:option
>
  <LanguageSlot {option} />
  <Icon slot="expand-icon" let:open icon={open ? 'Collapse' : 'Expand'} />
  <MinusIcon slot="remove-icon" width="1em" />
</MultiSelect>

<script>
  import MultiSelect from 'svelte-multiselect'
  import { languages } from '$site/options'
  import { LanguageSlot } from '$site'
  import { Icon } from 'svelte-zoo'

  // local variable used in CollapseIcon on:click callback to close dropdown
  let open
</script>

<MultiSelect
  options={languages}
  maxSelect={5}
  placeholder="What languages do you know?"
  selected={[`Python`, `TypeScript`, `Julia`]}
  bind:open
>
  <LanguageSlot let:option {option} slot="selected" />
  <LanguageSlot let:option {option} slot="option" />
  <button
    slot="expand-icon"
    let:open
    on:click={() => (open = false)}
    on:keyup|preventDefault={(event) => {
      if ([`Enter`, `Space`].includes(event.code)) open = !open
    }}
  >
    <Icon icon={open ? `Collapse` : `Expand`} />
  </button>
  <span slot="remove-icon" style="width: 2ex;">x</span>
</MultiSelect>

<script>
  import MultiSelect from 'svelte-multiselect'
  import { languages } from '$site/options'
  import { LanguageSlot } from '$site'
  import { Icon } from 'svelte-zoo'

  let selected = [`Python`, `TypeScript`, `Julia`]
  let searchText = `Julia`
</script>

<MultiSelect
  options={languages}
  bind:searchText
  bind:selected
  maxSelect={5}
  placeholder="What languages do you know?"
  open
  allowUserOptions
>
  <span slot="user-msg" let:msg>{msg} {selected?.includes(searchText) ? '🤦' : '👷'}</span>
</MultiSelect>