A multi-select combobox

<!--
  `anchor`/`useComboboxAnchor` приняты ради совместимости сигнатуры, но не
  влияют на позиционирование попапа у reka-ui (см. `useComboboxAnchor.ts`
  и `ComboboxContent.vue`) — `:ref` на `ComboboxChips` намеренно не
  привязан к `anchor` (компонентный template-ref дал бы публичный
  instance, а не DOM-узел, и всё равно ни на что не влиял бы).
  `@remove` на `ComboboxChip` — сознательное упрощение reka-ui: значение
  из `modelValue` приложение убирает само (см. docs/PORTING.md, раздел
  про `ui-combobox`).
-->
<script setup lang="ts">
import { ref } from "vue"
import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxValue, useComboboxAnchor } from "@/components/ui/combobox"
import { Field } from "@/components/ui/field"

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
const anchor = useComboboxAnchor()
const selected = ref<string[]>([frameworks[0]!])

function handleRemove(value: string) {
  selected.value = selected.value.filter((v) => v !== value)
}
</script>

<template>
  <Field class="max-w-xs">
    <Combobox
      multiple
      :model-value="selected"
      @update:model-value="(v) => (selected = v as unknown as string[])"
    >
      <ComboboxChips>
        <ComboboxValue v-slot="{ value }">
          <ComboboxChip
            v-for="v in (value as string[]) ?? []"
            :key="v"
            @remove="handleRemove(v)"
          >
            {{ v }}
          </ComboboxChip>
          <ComboboxChipsInput placeholder="Select frameworks..." />
        </ComboboxValue>
      </ComboboxChips>
      <ComboboxContent :anchor="anchor">
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          <ComboboxItem v-for="item in frameworks" :key="item" :value="item">
            {{ item }}
          </ComboboxItem>
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  </Field>
</template>