<template>
  <v-app>
    <v-container>
      <v-autocomplete
        v-model="selectedItems"
        :items="items"
        label="test"
        multiple
      >
        <template #prepend-item>
          <v-list-item @click="selectAll()">
            <v-list-item-title> Select all </v-list-item-title>
          </v-list-item>
        </template>
        <template #selection="{ item, index }">
          <template v-if="selectedItems.length > 5">
            <span v-if="!index">{{ selectedItems.length }}</span>
          </template>
          <template v-else>
            <span v-if="index" class="hint mr-1"> or </span>
            <v-chip
              :style="{ height: '24px' }"
              size="small"
              variant="flat"
              label
            >
              {{ item.title }}
            </v-chip>
          </template>
        </template>
      </v-autocomplete>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const selectedItems = ref([])
  const items = Array.from({ length: 10000 }, (_, i) => ({ title: `Item ${i}`, value: i }))

  function selectAll () {
    selectedItems.value =
      items.length === selectedItems.value.length ? [] : items.map(c => c.value)
  }
</script>