chore: add combobox demo

storage/framework/core/components/combobox/src/ComboboxDemo.vue

@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from '@headlessui/vue'
+
+import { computed, ref } from 'vue'
+import type { Ref } from 'vue'
+
+interface Person {
+  id: number
+  name: string
+}
+
+const people = ref<Person[]>([
+  { id: 1, name: 'Wade Cooper' },
+  { id: 2, name: 'Arlene Mccoy' },
+  { id: 3, name: 'Devon Webb' },
+  { id: 4, name: 'Tom Cook' },
+  { id: 5, name: 'Tanya Fox' },
+  { id: 6, name: 'Hellen Schmidt' },
+])
+
+const selected = ref<Person | null>(null)
+const query = ref<string>('')
+const filteredPeople = computed(() =>
+  query.value === ''
+    ? people
+    : people.value.filter((person: Person) =>
+        person.name
+          .toLowerCase()
+          .replace(/\s+/g, '')
+          .includes(query.value.toLowerCase().replace(/\s+/g, '')),
+      ),
+) as Ref<Person[]>
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <div class="relative z-20 mr-auto inline-block flex text-left">
+      <Combobox v-model="selected">
+        <div class="relative mt-1">
+          <div
+            class="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md sm:text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-white/75 focus-visible:ring-offset-teal-300"
+          >
+            <ComboboxInput
+              class="w-full border-none py-2 pl-3 pr-10 text-sm text-gray-900 leading-5 focus:outline-none focus:ring-0"
+              :display-value="(person: any) => person?.name"
+              placeholder="Search..."
+              @change="query = $event.target.value"
+            />
+            <ComboboxButton
+              class="absolute inset-y-0 right-0 flex items-center pr-2"
+            >
+              <div class="i-heroicons-chevron-up-down-20-solid" />
+            </ComboboxButton>
+          </div>
+          <TransitionRoot
+            leave="transition ease-in duration-100"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+            @after-leave="query = ''"
+          >
+            <ComboboxOptions
+              class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 sm:text-sm focus:outline-none"
+            >
+              <div
+                v-if="filteredPeople.length === 0 && query !== ''"
+                class="relative cursor-default select-none px-4 py-2 text-gray-700"
+              >
+                Nothing found.
+              </div>
+
+              <ComboboxOption
+                v-for="person in filteredPeople"
+                :key="person.id"
+                v-slot="{ selected, active }"
+                as="template"
+                :value="person"
+              >
+                <li
+                  class="relative cursor-default select-none py-2 pl-10 pr-4"
+                  :class="{
+                    'bg-teal-600 text-white': active,
+                    'text-gray-900': !active,
+                  }"
+                >
+                  <span
+                    class="block truncate"
+                    :class="{ 'font-medium': selected, 'font-normal': !selected }"
+                  >
+                    {{ person.name }}
+                  </span>
+                  <span
+                    v-if="selected"
+                    class="absolute inset-y-0 left-0 flex items-center pl-3"
+                    :class="{ 'text-white': active, 'text-teal-600': !active }"
+                  >
+                    <div class="i-heroicons-check-20-solid" />
+                  </span>
+                </li>
+              </ComboboxOption>
+            </ComboboxOptions>
+          </TransitionRoot>
+        </div>
+      </Combobox>
+    </div>
+  </div>
+</template>