Dropdown

<template>
  <AcceleratorDropdown placeholder="Select an option" :options="options" :validate="false" />
</template>

<script setup lang="ts">
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];
</script>

<template>
  <AcceleratorDropdown placeholder="Search for a fruit" :options="options" searchable :validate="false" />
</template>

<script setup lang="ts">
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];
</script>

<template>
  <AcceleratorDropdown
    v-model:external-search-query="externalSearchQuery"
    :options="externalSearchResults"
    value-key="id"
    label-key="title"
    :loading-options="loading"
    :loading-more-options="loadingMore"
    placeholder="Search for a product"
    searchable
    :validate="false"
    @load-more="search({ loadMore: true })"
  />
</template>

<script lang="ts" setup>

const externalSearchQuery = ref<string | undefined>('');
const externalSearchResults = ref<{ id: number; title: string }[]>([]);
const loading = ref(false);
const loadingMore = ref(false);
const reachedEnd = ref(false);

// Request ID to handle race conditions
let searchRequestId = 0;

const search = async ({ loadMore = false }) => {
  const currentRequestId = ++searchRequestId;

  loading.value = !loadMore;
  loadingMore.value = loadMore;

  if (!loadMore) {
    externalSearchResults.value = [];
    reachedEnd.value = false;
  }

  if (reachedEnd.value && loadMore) {
    loading.value = false;
    loadingMore.value = false;
    return;
  }

  try {
    const searchTerm = externalSearchQuery.value?.trim() || '';
    const limit = 10;

    // use any search API

    // you have to set the dropdown value-key and label-key if they are different from the default. in this case id and title
    const data = await $fetch<{ products: { id: number; title: string }[]; total: number }>('https://dummyjson.com/products/search', {
      params: {
        q: searchTerm,
        skip: externalSearchResults.value.length,
        limit,
      },
    });

    if (currentRequestId === searchRequestId) {
      if (loadMore) {
        externalSearchResults.value.push(...data.products);
        } else {
        externalSearchResults.value = data.products;
      }

      loading.value = false;
      loadingMore.value = false;

      if (data.products.length < limit) {
        reachedEnd.value = true;
      }
    }
  } catch (error) {
    console.error('Search failed:', error);
    if (currentRequestId === searchRequestId) {
      loading.value = false;
      loadingMore.value = false;
    }
  }
};

const searchDebounced = useDebounceFn(search, 500);

watch(externalSearchQuery, () => {
  loading.value = true;
  searchDebounced({ loadMore: false });
  // immediate: true to load initial data
}, { immediate: true });
</script>

<template>
  <AcceleratorDropdown placeholder="Select an option" :options="options" info="Extra info" :validate="false" />
</template>

<script setup lang="ts">
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];
</script>

<template>
  <AcceleratorDropdown placeholder="Select an option" :options="options" custom-error="Manual error" :validate="false" />
</template>

<script setup lang="ts">
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];
</script>

<AcceleratorDropdown loading :options="[]" :validate="false" />

<template>
  <AcceleratorDropdown disabled placeholder="Disabled" :options="options" :validate="false" />
</template>

<script setup lang="ts">
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];
</script>

<template>
<AcceleratorDropdown :options="colorOptions" :validate="false">
  <template #option="{ option }">
    <div class="color-option">
      <span class="color-dot" :style="{ backgroundColor: String(option.value) }"></span>
      <span>{{ option.label }}</span>
    </div>
  </template>
</AcceleratorDropdown>
</template>

<script setup lang="ts">
const colorOptions = [
  { label: 'Red', value: '#ff0000' },
  { label: 'Green', value: '#00ff00' },
  { label: 'Blue', value: '#0000ff' },
];
</script>

<template>
<AcceleratorDropdown :options="colorOptions" :validate="false">
  <template #value="{ option }">
    <div class="color-option">
      <span class="color-dot" :style="{ backgroundColor: String(option.value) }"></span>
      <span>{{ option.label }} (Selected)</span>
    </div>
  </template>
</AcceleratorDropdown>
</template>

<script setup lang="ts">
const colorOptions = [
  { label: 'Red', value: '#ff0000' },
  { label: 'Green', value: '#00ff00' },
  { label: 'Blue', value: '#0000ff' },
];
</script>

<template>
  <AcceleratorDropdown
    v-model="selectedValues"
    :options="options"
    placeholder="Select multiple fruits"
    multiple
    :validate="false"
  />
</template>

<script setup lang="ts">
const selectedValues = ref<string[] | undefined>([]);
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];
</script>

<template>
  <AcceleratorDropdown
    v-model="selectedValues"
    :options="options"
    placeholder="Search and select multiple fruits"
    multiple
    searchable
    :validate="false"
    :info="`Selected values: ${selectedValues ?? []}`"
  />
</template>

<script setup lang="ts">
const selectedValues = ref<string[] | undefined>([]);
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];
</script>

<template>
  <AcceleratorDropdown
    v-model="selectedValues"
    :options="options"
    placeholder="Search and add fruits"
    multiple
    searchable
    allow-create
    :validate="false"
    :info="`Selected values: ${selectedValues ?? []}`"
  />
</template>

<script setup lang="ts">
const selectedValues = ref<string[] | undefined>([]);
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];
</script>

<template>
  <AcceleratorDropdown
    v-model="selectedValues"
    :options="options"
    placeholder="Search and add fruits"
    multiple
    searchable
    allow-create
    :autocomplete="false"
    :validate="false"
    :info="`Selected values: ${selectedValues ?? []}`"
  />
</template>

<script setup lang="ts">
const selectedValues = ref<string[] | undefined>([]);
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];
</script>

<template>
  <AcceleratorDropdown :options="options" size="xs" />
  <AcceleratorDropdown :options="options" size="sm" />
  <AcceleratorDropdown :options="options" size="md" />
</template>

<script setup lang="ts">
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];
</script>

<template>
  <div class="dropdown-group">
    <AcceleratorLabel name="fruit" label="Favorite Fruit" />
    <AcceleratorDropdown
      name="fruit"
      placeholder="Select a fruit"
      :options="options"
    />
  </div>
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];

const schema = toTypedSchema(z.object({
  fruit: z.string().min(1, 'Please select a fruit'),
}));

const { values, errors } = useForm({
  validationSchema: schema,
});
</script>

<template>
  <AcceleratorDropdown
    name="pref_fruit"
    :options="options"
  />
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];

const { values } = useForm({
  initialValues: {
    pref_fruit: 'banana',
  },
});
</script>

<template>
  <AcceleratorDropdown
    v-if="showDropdown"
    name="hidden_fruit"
    :options="options"
  />
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';

const showDropdown = ref(true);
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];

const { values } = useForm({
  keepValuesOnUnmount: true,
});
</script>

<template>
  <div class="dropdown-group">
    <AcceleratorLabel name="fruit" label="Favorite Fruit" />
    <AcceleratorDropdown
      name="fruit"
      placeholder="Select a fruit"
      :options="options"
    />
  </div>
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];

const schema = toTypedSchema(z.object({
  fruit: z.array(z.string()).max(2, 'Please select at most 2 fruits'),
}));

const { values, errors } = useForm({
  validationSchema: schema,
});
</script>