Autocomplete 自动补全

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { Autocomplete, FormField, Stack, Text } from '@hina-ui/vue'

  const text = ref('')
  const candidates = ['Vue', 'React', 'Svelte', 'Solid', 'Angular']
  const options = computed(() =>
    candidates
      .filter(label => label.toLowerCase().includes(text.value.toLowerCase()))
      .map(label => ({ value: label, label })),
  )
</script>

<template>
  <Stack class="w-full max-w-sm">
    <FormField label="框架" description="选择建议，也可以保留自己输入的文字。">
      <Autocomplete v-model="text" :options="options" placeholder="输入框架名称" />
    </FormField>
    <Text tone="muted" size="sm">文本：{{ text || '—' }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { refDebounced } from '@vueuse/core'
  import { useRuntimeConfig } from '#app'
  import { Search } from '@lucide/vue'
  import {
    Autocomplete,
    FormField,
    Stack,
    Text,
    type AutocompleteOption,
    type CompletionContext,
  } from '@hina-ui/vue'

  const text = ref('')
  const search = ref('')
  const keyword = refDebounced(search, 250)
  const options = ref<AutocompleteOption[]>([])
  const loading = ref(false)
  const error = ref(false)
  const baseURL = useRuntimeConfig().app.baseURL

  function query(context: CompletionContext) {
    if (search.value === context.text) return
    search.value = context.text
    options.value = []
    loading.value = !!context.text.trim()
    error.value = false
  }

  watch(keyword, async (value, _, onCleanup) => {
    const controller = new AbortController()
    onCleanup(() => controller.abort())
    if (!value.trim()) {
      options.value = []
      loading.value = false
      return
    }
    loading.value = true
    error.value = false
    try {
      const response = await fetch(`${baseURL}demo/tags.json`, { signal: controller.signal })
      if (!response.ok) throw new Error(String(response.status))
      const result = (await response.json()) as {
        data: { items: { id: number; name: string; nameEn: string }[] }
      }
      if (controller.signal.aborted || search.value !== value) return
      options.value = result.data.items
        .filter(tag => tag.name.toLowerCase().includes(value.trim().toLowerCase()))
        .slice(0, 10)
        .map(tag => ({ value: tag.id, label: tag.name }))
    } catch {
      if (!controller.signal.aborted && search.value === value) error.value = true
    } finally {
      if (!controller.signal.aborted && search.value === value) loading.value = false
    }
  })
</script>

<template>
  <Stack class="w-full max-w-sm">
    <FormField label="标签搜索" description="输入时请求候选，也允许保留候选之外的文本。">
      <Autocomplete
        v-model="text"
        :options="options"
        :loading="loading"
        placeholder="试试「小说」或「音乐」"
        @query="query"
      >
        <template #leading><Search /></template>
        <template #empty>
          {{
            error
              ? '候选加载失败，修改文字后重试。'
              : text.trim()
                ? '没有建议，仍可使用当前文本。'
                : '输入文字搜索标签。'
          }}
        </template>
      </Autocomplete>
    </FormField>
    <Text tone="muted" size="sm">文本：{{ text || '—' }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { Autocomplete, FormField, Stack } from '@hina-ui/vue'
  const options = [
    { value: 'http', label: 'entry:http' },
    { value: 'rpc', label: 'entry:rpc' },
  ]
</script>

<template>
  <Stack class="w-full max-w-sm" gap="lg">
    <FormField label="小号">
      <Autocomplete :options="options" size="sm" placeholder="输入查询" />
    </FormField>
    <FormField label="次级形态">
      <Autocomplete :options="options" variant="secondary" placeholder="输入查询" />
    </FormField>
    <FormField label="大号">
      <Autocomplete :options="options" size="lg" placeholder="输入查询" />
    </FormField>
    <FormField label="校验失败" error="请输入状态值。">
      <Autocomplete :options="[]" model-value="status:" />
    </FormField>
    <FormField label="只读">
      <Autocomplete :options="options" model-value="entry:http" readonly />
    </FormField>
    <FormField label="禁用" disabled>
      <Autocomplete :options="options" model-value="entry:http" />
    </FormField>
  </Stack>
</template>

<script setup lang="ts">
  import { computed, reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Autocomplete, Button, Form, FormField, Text } from '@hina-ui/vue'

  const form = ref<InstanceType<typeof Form>>()
  const values = reactive({ framework: '' })
  const saved = ref('')
  const candidates = ['Vue', 'React', 'Svelte', 'Solid', 'Angular']
  const options = computed(() =>
    candidates
      .filter(label => label.toLowerCase().includes(values.framework.toLowerCase()))
      .map(label => ({ value: label, label })),
  )
  const schema = v.object({
    framework: v.pipe(v.string(), v.trim(), v.nonEmpty('请输入框架名称')),
  })

  async function save(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    saved.value = (data as { framework: string }).framework
  }
</script>

<template>
  <Form
    ref="form"
    v-slot="{ submitting }"
    :values="values"
    :rules="schema"
    class="w-full max-w-sm"
    @submit="save"
  >
    <FormField
      name="framework"
      label="主要框架"
      description="选择建议，也可以填写其他框架。"
      required
    >
      <Autocomplete
        v-model="values.framework"
        :options="options"
        name="framework"
        placeholder="选择或输入框架名称"
        @submit="form?.submit()"
      />
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">保存</Button>
    <Text v-if="saved" role="status" tone="muted" size="sm">已保存：{{ saved }}</Text>
  </Form>
</template>