Autocomplete

<script setup>
import { ref } from "vue";
import { Autocomplete } from "@dicehub/kappa/components/autocomplete";

const inputValue = ref("");
const fruits = [
  { label: "Apple", value: "apple" },
  { label: "Blueberry", value: "blueberry" },
  { label: "Pear", value: "pear" },
];
</script>

<template>
  <Autocomplete
    v-model:input-value="inputValue"
    :items="fruits"
    :input-attrs="{ 'aria-label': 'Type a fruit' }"
    clearable
    placeholder="Type a fruit..."
  />
  <p>Input: {{ inputValue || "empty" }}</p>
</template>

<script setup>
import { Autocomplete } from "@dicehub/kappa/components/autocomplete";

const countries = [
  { label: "Germany", value: "de" },
  { label: "Japan", value: "jp" },
  { label: "United States", value: "us" },
];
</script>

<template>
  <Autocomplete
    :items="countries"
    :input-attrs="{ 'aria-describedby': 'country-help' }"
    label="Country"
    placeholder="Search countries..."
  />
  <p id="country-help">Start typing to filter countries.</p>
</template>

<script setup>
import { Autocomplete } from "@dicehub/kappa/components/autocomplete";

const countries = [
  { label: "Germany", value: "de" },
  { label: "Japan", value: "jp" },
  { label: "United States", value: "us" },
];
</script>

<template>
  <Autocomplete
    :items="countries"
    :input-attrs="{ 'aria-describedby': 'country-error' }"
    invalid
    label="Country"
    placeholder="Search countries..."
  />
  <p id="country-error">Please enter a supported country.</p>
</template>

<script setup>
import { computed, ref } from "vue";
import {
  Autocomplete,
  createAutocompleteCollection,
} from "@dicehub/kappa/components/autocomplete";

const query = ref("");
const regions = [
  { label: "US East", value: "us-east", group: "North America" },
  { label: "EU Central", value: "eu-central", group: "Europe" },
  { label: "AP Northeast", value: "ap-northeast", group: "Asia Pacific" },
];

const collection = computed(() =>
  createAutocompleteCollection({
    items: query.value.trim()
      ? regions.filter((item) =>
          item.label.toLowerCase().includes(query.value.trim().toLowerCase()),
        )
      : [],
    groupBy: (item) => item.group,
    itemToString: (item) => item.label,
    itemToValue: (item) => item.value,
  }),
);
</script>

<template>
  <Autocomplete v-model:input-value="query" :collection="collection">
    <Autocomplete.InputGroup
      aria-label="Find a region"
      placeholder="Find a region..."
    />
    <Autocomplete.Content>
      <Autocomplete.Empty>No matching region.</Autocomplete.Empty>
      <Autocomplete.List :render-items="false">
        <Autocomplete.Group
          v-for="[group, items] in collection.group()"
          :key="group"
        >
          <Autocomplete.GroupLabel>{{ group }}</Autocomplete.GroupLabel>
          <Autocomplete.Item v-for="item in items" :key="item.value" :item="item">
            {{ item.label }}
          </Autocomplete.Item>
        </Autocomplete.Group>
      </Autocomplete.List>
    </Autocomplete.Content>
  </Autocomplete>
</template>

<script setup>
import { Autocomplete } from "@dicehub/kappa/components/autocomplete";

const fruits = [
  { label: "Apple", value: "apple" },
  { label: "Blueberry", value: "blueberry" },
];
</script>

<template>
  <Autocomplete size="xs" :items="fruits" :input-attrs="{ 'aria-label': 'Extra small' }" />
  <Autocomplete size="sm" :items="fruits" :input-attrs="{ 'aria-label': 'Small' }" />
  <Autocomplete size="base" :items="fruits" :input-attrs="{ 'aria-label': 'Base' }" />
  <Autocomplete size="lg" :items="fruits" :input-attrs="{ 'aria-label': 'Large' }" />
</template>

<script setup>
import { Autocomplete } from "@dicehub/kappa/components/autocomplete";

const projects = [
  { label: "Aerofoil study", value: "aerofoil" },
  { label: "Cavity benchmark", value: "cavity" },
  { label: "Cylinder wake", value: "cylinder" },
];

const startsWith = (item, query) =>
  item.label.toLowerCase().startsWith(query.trim().toLowerCase());
</script>

<template>
  <Autocomplete
    :items="projects"
    :filter="startsWith"
    :input-attrs="{ 'aria-label': 'Filter projects' }"
    empty-text="No project starts with that text."
    placeholder="Filter projects..."
    show-on-empty
    show-trigger
  />
</template>

<script setup>
import { Autocomplete } from "@dicehub/kappa/components/autocomplete";

const fruits = [
  { label: "Apple", value: "apple" },
  { label: "Blueberry", value: "blueberry" },
];
</script>

<template>
  <Autocomplete
    :items="fruits"
    disabled
    label="Disabled"
    placeholder="Unavailable"
  />
  <Autocomplete
    :items="fruits"
    :default-value="['apple']"
    label="Read only"
    read-only
  />
</template>