Skip to content

Commit

Permalink
add multiple Combobox example to playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@RobinMalfait
RobinMalfait committed Mar 16, 2022
1 parent 74f05d7 commit 2d14148
Show file tree
Hide file tree
Showing 3 changed files with 320 additions and 0 deletions.
158 changes: 158 additions & 0 deletions packages/playground-react/pages/combobox/multi-select.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
import React, { useState } from 'react'
import { Combobox } from '@headlessui/react'

function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}

let people = [
{ 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' },
{ id: 7, name: 'Caroline Schultz' },
{ id: 8, name: 'Mason Heaney' },
{ id: 9, name: 'Claudie Smitham' },
{ id: 10, name: 'Emil Schaefer' },
]

export default function Home() {
return (
<div className="flex h-full w-screen justify-center space-x-4 bg-gray-50 p-12">
<MultiPeopleList />
</div>
)
}

function MultiPeopleList() {
let [query, setQuery] = useState('')
let [activePersons, setActivePersons] = useState([people[2], people[3]])

return (
<div className="w-full max-w-4xl">
<div className="space-y-1">
<form
onSubmit={(e) => {
e.preventDefault()
console.log([...new FormData(e.currentTarget).entries()])
}}
>
<Combobox value={activePersons} onChange={setActivePersons} name="people">
<Combobox.Label className="block text-sm font-medium leading-5 text-gray-700">
Assigned to
</Combobox.Label>

<div className="relative">
<span className="inline-block w-full rounded-md shadow-sm">
<div className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus-within:border-blue-700 focus-within:outline-none focus-within:ring-1 focus-within:ring-blue-700 sm:text-sm sm:leading-5">
<span className="block flex flex-wrap gap-2">
{activePersons.map((person) => (
<span
key={person.id}
className="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5"
>
<span>{person.name}</span>
<svg
className="h-4 w-4 cursor-pointer"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
onClick={(e) => {
e.stopPropagation()
e.preventDefault()
setActivePersons((existing) => existing.filter((p) => p !== person))
}}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</span>
))}
<Combobox.Input
onChange={(event) => setQuery(event.target.value)}
className="border-none p-0 focus:ring-0"
placeholder="Search..."
/>
</span>
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
<svg
className="h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="none"
stroke="currentColor"
>
<path
d="M7 7l3-3 3 3m0 6l-3 3-3-3"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Combobox.Button>
</div>
</span>

<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
<Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
{people
.filter((person) => person.name.toLowerCase().includes(query.toLowerCase()))
.map((person) => (
<Combobox.Option
key={person.id}
value={person}
className={({ active }) => {
return classNames(
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
)
}}
>
{({ active, selected }) => (
<>
<span
className={classNames(
'block truncate',
selected ? 'font-semibold' : 'font-normal'
)}
>
{person.name}
</span>
{selected && (
<span
className={classNames(
'absolute inset-y-0 right-0 flex items-center pr-4',
active ? 'text-white' : 'text-indigo-600'
)}
>
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
</span>
)}
</>
)}
</Combobox.Option>
))}
</Combobox.Options>
</div>
</div>
</Combobox>
<button className="mt-2 inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
Submit
</button>
</form>
</div>
</div>
)
}
157 changes: 157 additions & 0 deletions packages/playground-vue/src/components/combobox/multi-select.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<template>
<div class="flex h-full w-screen justify-center space-x-4 bg-gray-50 p-12">
<div class="w-full max-w-4xl">
<div class="space-y-1">
<form @submit="onSubmit">
<Combobox v-model="activePersons" name="people">
<ComboboxLabel class="block text-sm font-medium leading-5 text-gray-700">
Assigned to
</ComboboxLabel>

<div class="relative">
<span class="inline-block w-full rounded-md shadow-sm">
<div
class="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus-within:border-blue-700 focus-within:outline-none focus-within:ring-1 focus-within:ring-blue-700 sm:text-sm sm:leading-5"
>
<span class="block flex flex-wrap gap-2">
<span v-if="activePersons.length === 0" class="p-0.5">Empty</span>
<span
v-for="person in activePersons"
:key="person.id"
class="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5"
>
<span>{{ person.name }}</span>
<svg
class="h-4 w-4 cursor-pointer"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
@click="removePerson(person)"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</span>
<ComboboxInput
@change="query = $event.target.value"
class="border-none p-0 focus:ring-0"
placeholder="Search..."
/>
</span>
<ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
<svg
class="h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="none"
stroke="currentColor"
>
<path
d="M7 7l3-3 3 3m0 6l-3 3-3-3"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</ComboboxButton>
</div>
</span>

<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
<ComboboxOptions
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
>
<ComboboxOption
v-for="person in people"
:key="person.id"
:value="person"
as="template"
v-slot="{ active, selected }"
>
<li
class="relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none"
:class="active ? 'bg-indigo-600 text-white' : 'text-gray-900'"
>
<span
class="block truncate"
:class="{ 'font-semibold': selected, 'font-normal': !selected }"
>
{{ person.name }}
</span>
<span
v-if="selected"
class="absolute inset-y-0 right-0 flex items-center pr-4"
:class="{ 'text-white': active, 'text-indigo-600': !active }"
>
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
</span>
</li>
</ComboboxOption>
</ComboboxOptions>
</div>
</div>
</Combobox>
<button
class="mt-2 inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Submit
</button>
</form>
</div>
</div>
</div>
</template>

<script setup>
import { ref } from 'vue'
import {
Combobox,
ComboboxLabel,
ComboboxInput,
ComboboxButton,
ComboboxOptions,
ComboboxOption,
} from '@headlessui/vue'
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
let query = ref('')
let people = [
{ 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' },
{ id: 7, name: 'Caroline Schultz' },
{ id: 8, name: 'Mason Heaney' },
{ id: 9, name: 'Claudie Smitham' },
{ id: 10, name: 'Emil Schaefer' },
]
let activePersons = ref([people[2], people[3]])
function onSubmit(e) {
e.preventDefault()
console.log([...new FormData(e.currentTarget).entries()])
}
function removePerson() {
e.stopPropagation()
e.preventDefault()
activePersons.value = activePersons.value.filter((p) => p !== person)
}
</script>
5 changes: 5 additions & 0 deletions packages/playground-vue/src/routes.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@
"name": "Command Palette (w/ Groups)",
"path": "/combobox/command-palette-with-groups",
"component": "./components/combobox/command-palette-with-groups.vue"
},
{
"name": "Combobox multi select",
"path": "/combobox/multi-select",
"component": "./components/combobox/multi-select.vue"
}
]
},
Expand Down

0 comments on commit 2d14148

Please sign in to comment.