Form integration

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

  Упрощение (не влияет на закрытое состояние): `react-hook-form`/`zod`/
  `sonner` из оригинала не подтянуты — форма ни разу не отправляется в
  статичном скриншоте, поэтому валидация и toast-уведомление никогда не
  видны. Значение поля — обычный `ref`, состояние ошибки всегда `false`
  (форма не тронута), что даёт тот же закрытый DOM, что и у оригинала до
  первого submit.
-->
<script setup lang="ts">
import { ref } from "vue"
import { Autocomplete, AutocompleteContent, AutocompleteEmpty, AutocompleteInput, AutocompleteItem, AutocompleteList } from "@/components/reui/autocomplete"
import { Button } from "@/components/ui/button"
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from "@/components/ui/field"

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("")

function reset() {
  value.value = ""
}
</script>

<template>
  <div class="w-full max-w-xs">
    <form @submit.prevent>
      <FieldGroup>
        <FieldSet>
          <FieldGroup>
            <Field>
              <FieldLabel for="autocomplete-feature">Select Feature</FieldLabel>
              <Autocomplete v-model="value">
                <AutocompleteInput id="autocomplete-feature" placeholder="e.g. feature" />
                <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>
              <FieldDescription>Search and select a component feature.</FieldDescription>
            </Field>
          </FieldGroup>
        </FieldSet>
        <Field orientation="horizontal">
          <Button variant="outline" type="button" class="flex-1" @click="reset">Cancel</Button>
          <Button type="submit" class="flex-1">Submit</Button>
        </Field>
      </FieldGroup>
    </form>
  </div>
</template>