<c-autocomplete>

<template>
  <div>
    <c-autocomplete
      v-model="language"
      clearable
      hint="Type to filter the options"
      label="Programming language"
      placeholder="Start typing to search"
    >
      <c-option value="js">
        <c-option-value>JavaScript</c-option-value>
      </c-option>

      <c-option value="ts">
        <c-option-value>TypeScript</c-option-value>
      </c-option>

      <c-option value="py">
        <c-option-value>Python</c-option-value>
      </c-option>

      <c-option value="rs">
        <c-option-value>Rust</c-option-value>
      </c-option>
    </c-autocomplete>

    <p>Value: {{ language ?? 'null' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const language = ref<string | null>(null);
</script>

<template>
  <div>
    <!-- The default filter matches the start of the label; this one matches
         anywhere in it. -->
    <c-autocomplete
      v-model="country"
      :filter="filter"
      :items.prop="items"
      clearable
      hint="Matches anywhere in the label"
      label="Country"
      placeholder="Type to filter"
    />

    <p>Value: {{ country ?? 'null' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import type { CAutocompleteFilter, CAutocompleteItem } from '@cscfi/csc-ui';

const items: CAutocompleteItem[] = [
  { name: 'Austria', value: 'at' },
  { name: 'Denmark', value: 'dk' },
  { name: 'Estonia', value: 'ee' },
  { name: 'Finland', value: 'fi' },
  { name: 'France', value: 'fr' },
  { name: 'Germany', value: 'de' },
  { name: 'Iceland', value: 'is' },
  { name: 'Netherlands', value: 'nl' },
  { name: 'Norway', value: 'no' },
  { name: 'Sweden', value: 'se' },
];

// Typed via CAutocompleteFilter, so `option` and `query` are fully inferred.
// A custom-element binding can't infer an inline arrow's params, so define
// the predicate here rather than in the template.
const filter: CAutocompleteFilter = (option, query) =>
  option.label.toLowerCase().includes(query.toLowerCase());

const country = ref<string | null>(null);
</script>

<template>
  <div>
    <!-- With `external`, the autocomplete renders `items` verbatim and only
         emits `change:query`; filtering happens in a simulated server request.
         The event also fires with an empty string when the panel opens, which
         is what loads the initial unfiltered list. The component ships no
         debounce — do it in the handler, as here. -->
    <c-autocomplete
      v-model="country"
      :items.prop="items"
      :loading="loading"
      external
      hint="Options are fetched as you type"
      label="Country"
      placeholder="Type to search"
      clearable
      @change:query="onQuery"
    />

    <p>Value: {{ country ?? 'null' }}</p>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue';

import type { CAutocompleteItem } from '@cscfi/csc-ui';

// ---- a pretend server ------------------------------------------------
const ALL: CAutocompleteItem[] = [
  { name: 'Austria', value: 'at' },
  { name: 'Denmark', value: 'dk' },
  { name: 'Estonia', value: 'ee' },
  { name: 'Finland', value: 'fi' },
  { name: 'France', value: 'fr' },
  { name: 'Germany', value: 'de' },
  { name: 'Iceland', value: 'is' },
  { name: 'Netherlands', value: 'nl' },
  { name: 'Norway', value: 'no' },
  { name: 'Sweden', value: 'se' },
];

const search = (query: string): Promise<CAutocompleteItem[]> =>
  new Promise((resolve) =>
    setTimeout(
      () =>
        resolve(
          ALL.filter((item) =>
            item.name.toLowerCase().includes(query.toLowerCase()),
          ),
        ),
      600,
    ),
  );
// -----------------------------------------------------------------------

const country = ref<string | null>(null);

const items = ref<CAutocompleteItem[]>([]);

const loading = ref(false);

let debounce: ReturnType<typeof setTimeout> | undefined;

// Drop responses a newer query has superseded.
let requestId = 0;

const load = async (query: string) => {
  const id = ++requestId;
  loading.value = true;

  const result = await search(query);

  if (id !== requestId) return;
  items.value = result;
  loading.value = false;
};

const onQuery = (event: Event) => {
  clearTimeout(debounce);

  const query = (event as CustomEvent<string>).detail;
  debounce = setTimeout(() => load(query), 300);
};

onBeforeUnmount(() => clearTimeout(debounce));
</script>

<template>
  <div>
    <c-autocomplete
      v-model="language"
      label="Programming language"
      size="small"
    >
      <c-option value="js">
        <c-option-value>JavaScript</c-option-value>
      </c-option>

      <c-option value="ts">
        <c-option-value>TypeScript</c-option-value>
      </c-option>

      <c-option value="py">
        <c-option-value>Python</c-option-value>
      </c-option>
    </c-autocomplete>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const language = ref<string | null>(null);
</script>

<template>
  <div>
    <c-select
      v-model="country"
      clearable
      hint="Each c-option provides a name and a value"
      label="Country"
      placeholder="Choose a country"
    >
      <c-option name="Finland" value="fi">Finland</c-option>

      <c-option name="Sweden" value="se">Sweden</c-option>

      <c-option name="Norway" value="no">Norway</c-option>

      <c-option name="Denmark" value="dk" disabled>Denmark</c-option>
    </c-select>

    <p>Value: {{ country ?? 'null' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const country = ref<string | null>(null);
</script>

<template>
  <div>
    <c-autocomplete
      v-model="language"
      clearable
      hint="c-option-value marks the text that gets match highlighting"
      label="Programming language"
      placeholder="Start typing to search"
    >
      <c-option value="js">
        <c-option-value>JavaScript</c-option-value>
      </c-option>

      <c-option value="ts">
        <c-option-value>TypeScript</c-option-value>
      </c-option>

      <c-option value="py">
        <c-option-value>Python</c-option-value>
      </c-option>

      <c-option value="rs">
        <c-option-value>Rust</c-option-value>
      </c-option>
    </c-autocomplete>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const language = ref<string | null>(null);
</script>