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="Framework" description="Choose a suggestion or keep your own text.">
      <Autocomplete v-model="text" :options="options" placeholder="Type a framework name" />
    </FormField>
    <Text tone="muted" size="sm">Text: {{ 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.nameEn || tag.name).toLowerCase().includes(value.trim().toLowerCase()))
        .slice(0, 10)
        .map(tag => ({ value: tag.id, label: tag.nameEn || 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="Tag search"
      description="Fetch suggestions while typing; arbitrary text is also accepted."
    >
      <Autocomplete
        v-model="text"
        :options="options"
        :loading="loading"
        placeholder="Try novel or music"
        @query="query"
      >
        <template #leading><Search /></template>
        <template #empty>
          {{
            error
              ? 'Could not load suggestions. Edit the text to retry.'
              : text.trim()
                ? 'No suggestions. You can still use this text.'
                : 'Type to search for tags.'
          }}
        </template>
      </Autocomplete>
    </FormField>
    <Text tone="muted" size="sm">Text: {{ 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="Small">
      <Autocomplete :options="options" size="sm" placeholder="Type a query" />
    </FormField>
    <FormField label="Secondary">
      <Autocomplete :options="options" variant="secondary" placeholder="Type a query" />
    </FormField>
    <FormField label="Large">
      <Autocomplete :options="options" size="lg" placeholder="Type a query" />
    </FormField>
    <FormField label="Invalid" error="Enter a status value.">
      <Autocomplete :options="[]" model-value="status:" />
    </FormField>
    <FormField label="Read only">
      <Autocomplete :options="options" model-value="entry:http" readonly />
    </FormField>
    <FormField label="Disabled" 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('Enter a framework name')),
  })

  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="Primary framework"
      description="Choose a suggestion or enter another framework."
      required
    >
      <Autocomplete
        v-model="values.framework"
        :options="options"
        name="framework"
        placeholder="Choose or enter a framework"
        @submit="form?.submit()"
      />
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">Save</Button>
    <Text v-if="saved" role="status" tone="muted" size="sm">Saved: {{ saved }}</Text>
  </Form>
</template>