Small autocomplete

<!--
  Кейс проверяет только закрытое состояние (см. docs/PORTING.md §5).
-->
<script setup lang="ts">
import { Autocomplete, AutocompleteContent, AutocompleteEmpty, AutocompleteInput, AutocompleteItem, AutocompleteList } from "@/components/reui/autocomplete"

interface Item {
  id: string
  value: string
}

const items: Item[] = [
  { id: "t1", value: "feature" },
  { id: "t2", value: "fix" },
  { id: "t3", value: "bug" },
  { id: "t4", value: "docs" },
  { id: "t5", value: "internal" },
  { id: "t6", value: "mobile" },
  { id: "c-accordion", value: "component: accordion" },
  { id: "c-alert-dialog", value: "component: alert dialog" },
  { id: "c-autocomplete", value: "component: autocomplete" },
  { id: "c-avatar", value: "component: avatar" },
]
</script>

<template>
  <div class="w-full max-w-xs">
    <Autocomplete>
      <AutocompleteInput placeholder="Search items" size="sm" show-trigger show-clear />
      <AutocompleteContent>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          <AutocompleteItem v-for="item in items" :key="item.id" :value="item.value">
            {{ item.value }}
          </AutocompleteItem>
        </AutocompleteList>
      </AutocompleteContent>
    </Autocomplete>
  </div>
</template>