With clear button

<!--
  Кейс проверяет только закрытое состояние (см. docs/PORTING.md §5).

  Расхождение API: оригинал использует `items`/`itemToStringValue` —
  render-проп с произвольным объектом-значением; reka-ui `AutocompleteItem`
  принимает `value` того же типа, но собственного рендер-пропа `items` у
  `AutocompleteRoot` нет (см. docs/PORTING.md §5) — элементы объявлены
  явным `v-for`, значения оставлены строками (в закрытом состоянии, которое
  проверяет кейс, это не отличимо от объектов).
-->
<script setup lang="ts">
import { computed, ref } from "vue"
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" },
]

const value = ref("")
const filteredItems = computed(() =>
  items.filter((item) => item.value.toLowerCase().includes(value.value.toLowerCase()))
)
</script>

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