Liste déroulante

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox } from 'vectis-ui'

const country = ref('')

const options = [
  { value: 'be', label: 'Belgium' },
  { value: 'ca', label: 'Canada' },
  { value: 'fr', label: 'France' },
  { value: 'ch', label: 'Switzerland' },
]
</script>

<template>
  <VCombobox
    v-model="country"
    :options="options"
    aria-label="Country"
    placeholder="Choose a country"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox } from 'vectis-ui'

const country = ref('fr')

const countries = [
  { value: 'be', label: 'Belgium' },
  { value: 'ca', label: 'Canada' },
  { value: 'ci', label: "Côte d'Ivoire" },
  { value: 'fr', label: 'France' },
  { value: 'lu', label: 'Luxembourg' },
  { value: 're', label: 'Réunion' },
  { value: 'ch', label: 'Switzerland' },
]
</script>

<template>
  <div class="column">
    <VCombobox
      v-model="country"
      :options="countries"
      label="Country"
      hint="Type to narrow the list down. Accents are ignored, so reunion finds Réunion."
      placeholder="Choose a country"
      clearable
    />
  </div>
</template>

<style scoped>
.column {
  max-inline-size: 26rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox } from 'vectis-ui'

const countries = [
  { value: 'be', label: 'Belgium' },
  { value: 'ca', label: 'Canada' },
  { value: 'fr', label: 'France' },
  { value: 'ch', label: 'Switzerland' },
]

/* Multiple mode on every row: the chips are what shows that the panel and the field are
   not the only things following the step. */
const rows = ref(
  (['sm', 'md', 'lg'] as const).flatMap((size) => [
    { key: size, size, compact: false, label: size, selected: ['fr'] },
    { key: `${size}-compact`, size, compact: true, label: `${size}, compact`, selected: ['fr'] },
  ]),
)
</script>

<template>
  <div class="column">
    <VCombobox
      v-for="row in rows"
      :key="row.key"
      v-model="row.selected"
      :options="countries"
      :size="row.size"
      :compact="row.compact"
      :label="row.label"
      multiple
    />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 26rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox } from 'vectis-ui'

const chosen = ref('fr')

const countries = [
  { value: 'be', label: 'Belgium' },
  { value: 'ca', label: 'Canada' },
  { value: 'fr', label: 'France' },
  { value: 'ch', label: 'Switzerland' },
]
</script>

<template>
  <div class="column">
    <VCombobox
      v-model="chosen"
      :options="countries"
      clearable
      label="Clearable"
      hint="The cross empties the selection and the search at once"
    />

    <VCombobox
      :options="countries"
      model-value="fr"
      invalid
      label="Invalid"
      hint="For a rule the browser cannot check by itself"
    />

    <VCombobox :options="countries" model-value="fr" disabled label="Disabled" />

    <!-- Frozen rather than out of reach: it still takes the focus and can be copied from. -->
    <VCombobox
      :options="countries"
      model-value="fr"
      readonly
      clearable
      label="Read-only"
      hint="Set by your subscription"
    />

    <VCombobox :options="[]" loading label="Loading" placeholder="Fetching the list" />

    <!-- No option and nothing loading: the panel says so rather than opening empty. -->
    <VCombobox
      :options="[]"
      empty-text="No country matches"
      label="Nothing to show"
      placeholder="Open me"
    />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 26rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox } from 'vectis-ui'

/* Labels wider than the field: the panel is at least as wide as what it is anchored to,
   so it takes more than that here and the two alignments become visible. */
const departments = [
  { value: 'ops', label: 'Operations and logistics' },
  { value: 'fin', label: 'Finance and accounting' },
  { value: 'eng', label: 'Engineering and platform' },
  { value: 'hr', label: 'People and culture' },
]

const placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'] as const

const chosen = ref<Record<string, string>>({
  'bottom-start': 'ops',
  'bottom-end': 'fin',
  'top-start': 'eng',
  'top-end': 'hr',
})
</script>

<template>
  <div class="grid">
    <VCombobox
      v-for="placement in placements"
      :key="placement"
      v-model="chosen[placement]"
      :options="departments"
      :placement="placement"
      :label="placement"
    />
  </div>
</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--vectis-space-5);
  max-inline-size: 26rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox, type ComboboxItem } from 'vectis-ui'

const country = ref('fr')

/* An entry is an option, a named block, or a separator, and the three mix freely. A group
   the search empties disappears with its name, and a stranded separator is dropped. */
const items: ComboboxItem[] = [
  {
    label: 'Europe',
    options: [
      { value: 'fr', label: 'France' },
      { value: 'be', label: 'Belgium' },
      { value: 'ch', label: 'Switzerland' },
      { value: 'lu', label: 'Luxembourg' },
    ],
  },
  { separator: true },
  {
    label: 'Africa',
    options: [
      { value: 're', label: 'Réunion' },
      { value: 'ci', label: "Côte d'Ivoire" },
      { value: 'ma', label: 'Morocco' },
    ],
  },
  {
    label: 'America',
    options: [
      { value: 'ca', label: 'Canada' },
      { value: 'us', label: 'United States' },
      { value: 'br', label: 'Brazil' },
    ],
  },
  { separator: true },
  { value: 'other', label: 'Other, not listed' },
]
</script>

<template>
  <div class="column">
    <VCombobox v-model="country" :options="items" label="Country" placeholder="Choose a country" />
  </div>
</template>

<style scoped>
.column {
  max-inline-size: 26rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox } from 'vectis-ui'

const served = ref(['fr', 'be'])

const countries = [
  { value: 'be', label: 'Belgium' },
  { value: 'ca', label: 'Canada' },
  { value: 'ci', label: "Côte d'Ivoire" },
  { value: 'fr', label: 'France' },
  { value: 'lu', label: 'Luxembourg' },
  { value: 'mc', label: 'Monaco', disabled: true },
  { value: 're', label: 'Réunion' },
  { value: 'ch', label: 'Switzerland' },
]
</script>

<template>
  <div class="column">
    <VCombobox
      v-model="served"
      :options="countries"
      multiple
      clearable
      label="Served countries"
      hint="Click elsewhere: the search field folds away and only the chips remain"
      placeholder="Add a country"
    />
    <output class="value" aria-label="Chosen values">{{ served.join(', ') || 'none' }}</output>
  </div>
</template>

<style scoped>
.column {
  display: grid;
  gap: var(--vectis-space-3);
  max-inline-size: 26rem;
}
.value {
  font-family: var(--vectis-text-family-code);
  font-size: var(--vectis-text-body-sm-size);
  color: var(--vectis-color-text-muted);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox } from 'vectis-ui'

const served = ref(['fr', 'be', 'ch', 'lu'])

const countries = [
  { value: 'be', label: 'Belgium' },
  { value: 'ca', label: 'Canada' },
  { value: 'ci', label: "Côte d'Ivoire" },
  { value: 'fr', label: 'France' },
  { value: 'lu', label: 'Luxembourg' },
  { value: 'mc', label: 'Monaco', disabled: true },
  { value: 're', label: 'Réunion' },
  { value: 'ch', label: 'Switzerland' },
]
</script>

<template>
  <div class="column">
    <VCombobox
      v-model="served"
      :options="countries"
      multiple
      display="text"
      clearable
      label="Served countries"
      hint="One line of labels, cut short when it runs out of room"
      placeholder="Add a country"
    />
  </div>
</template>

<style scoped>
.column {
  max-inline-size: 20rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox } from 'vectis-ui'

const chips = ref(['fr', 'be', 'ch', 'lu', 're'])
const text = ref(['fr', 'be', 'ch', 'lu', 're'])

const countries = [
  { value: 'be', label: 'Belgium' },
  { value: 'ca', label: 'Canada' },
  { value: 'ci', label: "Côte d'Ivoire" },
  { value: 'fr', label: 'France' },
  { value: 'lu', label: 'Luxembourg' },
  { value: 're', label: 'Réunion' },
  { value: 'ch', label: 'Switzerland' },
]
</script>

<template>
  <div class="column">
    <VCombobox
      v-model="chips"
      :options="countries"
      multiple
      :max="2"
      label="Served countries"
      hint="Two chips, the rest counted until the field is focused"
    />
    <VCombobox
      v-model="text"
      :options="countries"
      multiple
      display="text"
      :max="2"
      :overflow-text="(count) => `+${count} countries`"
      label="Served countries, as text"
    />
  </div>
</template>

<style scoped>
.column {
  display: grid;
  gap: 1rem;
  max-inline-size: 20rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox } from 'vectis-ui'
import { search, swap_vert as swapVert } from 'vectis-ui/icons'

const topic = ref('')
const tags = ref(['design', 'a11y'])
const order = ref<'A to Z' | 'Z to A'>('A to Z')

const options = [
  { value: 'design', label: 'Design' },
  { value: 'a11y', label: 'Accessibility' },
  { value: 'perf', label: 'Performance' },
  { value: 'docs', label: 'Documentation' },
]

function switchOrder() {
  order.value = order.value === 'A to Z' ? 'Z to A' : 'A to Z'
}
</script>

<template>
  <div class="fields">
    <VCombobox
      v-model="topic"
      :options="options"
      :icon-start="search"
      label="Decorative icon"
      placeholder="Search a topic"
    />

    <!-- The icon is rendered before the chips, so a multiple field keeps both. -->
    <VCombobox
      v-model="tags"
      :options="options"
      multiple
      :icon-start="search"
      label="Beside the chips"
    />

    <VCombobox
      v-model="topic"
      :options="options"
      :icon-start="swapVert"
      icon-start-label="Switch the order"
      label="Clickable icon"
      :hint="`Sorted ${order}.`"
      placeholder="Search a topic"
      @click:icon-start="switchOrder"
    />
  </div>
</template>

<style scoped>
.fields {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 26rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox, type ComboboxOption } from 'vectis-ui'
import {
  description,
  folder_zip as folderZip,
  image,
  picture_as_pdf as pictureAsPdf,
  table_chart as tableChart,
  video_file as videoFile,
} from 'vectis-ui/icons'

const type = ref('img')

/* `icon` takes what every icon prop in the library takes. A row without one starts
   straight at its label rather than reserving a blank column. */
const types: ComboboxOption[] = [
  { value: 'doc', label: 'Document', icon: description },
  { value: 'img', label: 'Image', icon: image },
  { value: 'vid', label: 'Video', icon: videoFile },
  { value: 'pdf', label: 'PDF', icon: pictureAsPdf },
  { value: 'zip', label: 'Archive', icon: folderZip },
  { value: 'raw', label: 'Anything else' },
  { value: 'xls', label: 'Spreadsheet', icon: tableChart, disabled: true },
]
</script>

<template>
  <div class="column">
    <VCombobox v-model="type" :options="types" label="File type" placeholder="Choose a type" />
  </div>
</template>

<style scoped>
.column {
  max-inline-size: 26rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox, type ComboboxOption } from 'vectis-ui'

const CATALOGUE: ComboboxOption[] = Array.from({ length: 120 }, (_, i) => ({
  value: `ref-${i + 1}`,
  label: `Reference ${String(i + 1).padStart(3, '0')}`,
}))

/* Stands in for a server: latency, and the filtering done on its side. */
function fetchReferences(query: string): Promise<ComboboxOption[]> {
  const found = CATALOGUE.filter((option) =>
    option.label.toLowerCase().includes(query.toLowerCase()),
  )
  return new Promise((resolve) => setTimeout(() => resolve(found.slice(0, 20)), 400))
}

const reference = ref('')
const options = ref<ComboboxOption[]>([])
const loading = ref(false)

/* A token, so a slow answer to an old keystroke cannot overwrite a fresh one. */
let latest = 0

async function onSearch(query: string) {
  const current = ++latest
  loading.value = true
  const found = await fetchReferences(query)
  if (current !== latest) return
  options.value = found
  loading.value = false
}
</script>

<template>
  <div class="column">
    <VCombobox
      v-model="reference"
      :options="options"
      :loading="loading"
      :filter="false"
      label="Reference"
      hint="The list is narrowed by the source, so local filtering is turned off"
      placeholder="Search for a reference"
      empty-text="No reference matches"
      clearable
      @search="onSearch"
    />
  </div>
</template>

<style scoped>
.column {
  max-inline-size: 26rem;
}
</style>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { VCombobox, type ComboboxOption } from 'vectis-ui'

const PAGE_SIZE = 20

const CATALOGUE: ComboboxOption[] = Array.from({ length: 120 }, (_, i) => ({
  value: `ref-${i + 1}`,
  label: `Reference ${String(i + 1).padStart(3, '0')}`,
}))

function fetchPage(query: string, page: number) {
  const found = CATALOGUE.filter((option) =>
    option.label.toLowerCase().includes(query.toLowerCase()),
  )
  return new Promise<{ items: ComboboxOption[]; total: number }>((resolve) =>
    setTimeout(
      () =>
        resolve({
          items: found.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE),
          total: found.length,
        }),
      400,
    ),
  )
}

const reference = ref('')
const options = ref<ComboboxOption[]>([])
const loading = ref(false)
const total = ref(0)
const page = ref(0)
const query = ref('')

const hasMore = computed(() => options.value.length < total.value)

async function onSearch(term: string) {
  query.value = term
  page.value = 0
  loading.value = true
  const result = await fetchPage(term, 0)
  options.value = result.items
  total.value = result.total
  loading.value = false
}

/* The component asks once per page and waits: the next request only goes out when the
   sentinel comes back into view, which it cannot do until this one has landed. */
async function onLoadMore() {
  loading.value = true
  const result = await fetchPage(query.value, page.value + 1)
  page.value += 1
  options.value = [...options.value, ...result.items]
  loading.value = false
}
</script>

<template>
  <div class="column">
    <VCombobox
      v-model="reference"
      :options="options"
      :loading="loading"
      :has-more="hasMore"
      :filter="false"
      label="Reference"
      hint="Scroll to the foot of the list: the next page is asked for as the end comes into view"
      placeholder="Search for a reference"
      @search="onSearch"
      @load-more="onLoadMore"
    />
    <output class="count" aria-label="Options loaded"
      >{{ options.length }} loaded of {{ total }}</output
    >
  </div>
</template>

<style scoped>
.column {
  display: grid;
  gap: var(--vectis-space-3);
  max-inline-size: 26rem;
}
.count {
  font-family: var(--vectis-text-family-code);
  font-size: var(--vectis-text-body-sm-size);
  color: var(--vectis-color-text-muted);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCombobox } from 'vectis-ui'

const country = ref('fr')

const countries = [
  { value: 'be', label: 'Belgium' },
  { value: 'ca', label: 'Canada' },
  { value: 'fr', label: 'France' },
  { value: 'lu', label: 'Luxembourg' },
  { value: 'ch', label: 'Switzerland' },
]

const capitals: Record<string, string> = {
  be: 'Brussels',
  ca: 'Ottawa',
  fr: 'Paris',
  lu: 'Luxembourg',
  ch: 'Bern',
}
</script>

<template>
  <div class="column">
    <VCombobox v-model="country" :options="countries" label="Country">
      <template #option="{ option, selected }">
        <span class="row">
          <span>{{ option.label }}</span>
          <small class="capital"
            >{{ capitals[option.value] }}{{ selected ? ' · chosen' : '' }}</small
          >
        </span>
      </template>
    </VCombobox>
  </div>
</template>

<style scoped>
.column {
  max-inline-size: 26rem;
}
/* The slot replaces the label, so its content is laid out inside the row the panel
   already spaces and aligns. */
.row {
  display: grid;
}
.capital {
  color: var(--vectis-color-text-muted);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VChip, VCombobox, type ComboboxOption } from 'vectis-ui'
import {
  description,
  image,
  picture_as_pdf as pictureAsPdf,
  video_file as videoFile,
} from 'vectis-ui/icons'

const chosen = ref(['doc', 'img'])

const types: ComboboxOption[] = [
  { value: 'doc', label: 'Document', icon: description },
  { value: 'img', label: 'Image', icon: image },
  { value: 'vid', label: 'Video', icon: videoFile },
  { value: 'pdf', label: 'PDF', icon: pictureAsPdf },
]
</script>

<template>
  <div class="column">
    <VCombobox
      v-model="chosen"
      :options="types"
      multiple
      label="File types"
      placeholder="Add a type"
    >
      <!--
        `size` and `compact` are the step the field worked out for its chips, which cannot
        be guessed from out here, and `remove` is what keeps the value removable.
      -->
      <template #chip="{ option, label, remove, size, compact }">
        <VChip
          :icon-start="option?.icon"
          :size="size"
          :compact="compact"
          :dismiss-label="`Remove ${label}`"
          variant="outline"
          tone="accent"
          dismissible
          @dismiss="remove"
        >
          {{ label }}
        </VChip>
      </template>
    </VCombobox>
  </div>
</template>

<style scoped>
.column {
  max-inline-size: 26rem;
}
</style>