Skip to content

Commit d3c2a19

Browse files
thecrypticacethecrypticace
committed
Add Vue empty states example
1 parent 475db7c commit d3c2a19

File tree

1 file changed

+156
-0
lines changed

1 file changed

+156
-0
lines changed

‎packages/playground-vue/src/components/combobox/combobox-virtual-with-empty-states.vue‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<script setup lang="ts">
2+
import { computed, ref } from 'vue'
3+
import { Combobox, ComboboxLabel, ComboboxInput, ComboboxOption, ComboboxOptions, ComboboxButton } from '@headlessui/vue'
4+
5+
type Option = {
6+
name: string
7+
disabled: boolean
8+
empty?: boolean
9+
}
10+
11+
let list = ref([
12+
{name: 'Alice', disabled: false},
13+
{name: 'Bob', disabled: false},
14+
{name: 'Charlie', disabled: false},
15+
{name: 'David', disabled: false},
16+
{name: 'Eve', disabled: false},
17+
{name: 'Fred', disabled: false},
18+
{name: 'George', disabled: false},
19+
{name: 'Helen', disabled: false},
20+
{name: 'Iris', disabled: false},
21+
{name: 'John', disabled: false},
22+
{name: 'Kate', disabled: false},
23+
{name: 'Linda', disabled: false},
24+
{name: 'Michael', disabled: false},
25+
{name: 'Nancy', disabled: false},
26+
{name: 'Oscar', disabled: true},
27+
{name: 'Peter', disabled: false},
28+
{name: 'Quentin', disabled: false},
29+
{name: 'Robert', disabled: false},
30+
{name: 'Sarah', disabled: false},
31+
{name: 'Thomas', disabled: false},
32+
{name: 'Ursula', disabled: false},
33+
{name: 'Victor', disabled: false},
34+
{name: 'Wendy', disabled: false},
35+
{name: 'Xavier', disabled: false},
36+
{name: 'Yvonne', disabled: false},
37+
{name: 'Zachary', disabled: false},
38+
])
39+
40+
let emptyOption = { name: 'No results', disabled: true, empty: true }
41+
42+
let query = ref('')
43+
let selectedPerson = ref<Option | null>(list[0])
44+
let optionsRef = ref<HTMLUListElement | null>(null)
45+
46+
let filtered = computed(() => {
47+
return query.value === ''
48+
? list.value
49+
: list.value.filter((item) => item.name.toLowerCase().includes(query.value.toLowerCase()))
50+
})
51+
52+
function addPerson() {
53+
let person = { name: query.value, disabled: false }
54+
list.value.push(person)
55+
selectedPerson.value = person
56+
}
57+
58+
</script>
59+
<template>
60+
<div class="mx-auto max-w-fit">
61+
<div class="py-8 font-mono text-xs">Selected person: {{ selectedPerson?.name ?? "N/A" }}</div>
62+
<Combobox
63+
:virtual="{
64+
options: filtered.length > 0 ? filtered : [emptyOption],
65+
disabled: (option) => option.disabled || option.empty,
66+
}"
67+
:value="selectedPerson"
68+
nullable
69+
@change="(value) => {
70+
selectedPerson = value
71+
query = ''
72+
}"
73+
as="div"
74+
>
75+
<ComboboxLabel class="block text-sm font-medium leading-5 text-gray-700">
76+
Person
77+
</ComboboxLabel>
78+
79+
<div class="relative">
80+
<span class="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
81+
<ComboboxInput
82+
@change="(e) => query = e.target.value"
83+
:displayValue="(option: Option | null) => option?.name ?? ''"
84+
class="border-none px-3 py-1 outline-none"
85+
/>
86+
<ComboboxButton as="button">
87+
<span class="pointer-events-none flex items-center px-2">
88+
<svg
89+
class="h-5 w-5 text-gray-400"
90+
viewBox="0 0 20 20"
91+
fill="none"
92+
stroke="currentColor"
93+
>
94+
<path
95+
d="M7 7l3-3 3 3m0 6l-3 3-3-3"
96+
strokeWidth="1.5"
97+
strokeLinecap="round"
98+
strokeLinejoin="round"
99+
/>
100+
</svg>
101+
</span>
102+
</ComboboxButton>
103+
</span>
104+
105+
<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
106+
<ComboboxOptions
107+
:ref="optionsRef"
108+
:class="[
109+
'shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5',
110+
filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
111+
]"
112+
v-slot="{ option }"
113+
>
114+
<template v-if="option.empty">
115+
<ComboboxOption
116+
:value="option"
117+
class="relative w-full cursor-default select-none py-2 px-3 focus:outline-none text-center"
118+
disabled
119+
>
120+
<div class="grid grid-cols-1 grid-rows-1 h-full relative">
121+
<div class="absolute inset-0">
122+
<svg fill="none" viewBox="0 0 24 24" stroke-width="0.5" stroke="currentColor" class="text-gray-500/5 -translate-y-1/4">
123+
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
124+
</svg>
125+
</div>
126+
<div class="z-20 col-start-1 row-start-1 col-span-full row-span-full p-8 flex flex-col justify-center items-center">
127+
<h3 class="mx-2 text-xl mb-4 text-gray-400 font-semibold">No people found</h3>
128+
</div>
129+
</div>
130+
</ComboboxOption>
131+
</template>
132+
<template v-else>
133+
<ComboboxOption
134+
as="template"
135+
v-slot="{ active }"
136+
:disabled="option.disabled"
137+
:value="option"
138+
>
139+
<div
140+
:class="[
141+
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
142+
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
143+
]"
144+
>
145+
<span class='block truncate'>
146+
{{ option.name }}
147+
</span>
148+
</div>
149+
</ComboboxOption>
150+
</template>
151+
</ComboboxOptions>
152+
</div>
153+
</div>
154+
</Combobox>
155+
</div>
156+
</template>

0 commit comments

Comments
 (0)