You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
15 KiB
HTML
376 lines
15 KiB
HTML
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
|
<label for="combobox" class="block text-sm/6 font-medium text-gray-900"
|
|
>Assigned to</label
|
|
>
|
|
<el-autocomplete class="relative mt-2 block">
|
|
<input
|
|
id="combobox"
|
|
type="text"
|
|
class="block w-full rounded-md bg-white py-1.5 pr-12 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-hidden"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400"
|
|
>
|
|
<path
|
|
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<el-options
|
|
anchor="bottom end"
|
|
popover
|
|
class="max-h-56 w-(--input-width) overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 [--anchor-gap:--spacing(1)] focus:outline-hidden sm:text-sm"
|
|
>
|
|
<el-option
|
|
value="Leslie Alexander"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Leslie Alexander</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Michael Foster"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Michael Foster</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Dries Vincent"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Dries Vincent</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Lindsay Walton"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Lindsay Walton</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Courtney Henry"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Courtney Henry</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Tom Cook"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Tom Cook</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Whitney Francis"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Whitney Francis</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Leonard Krasner"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Leonard Krasner</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Floyd Miles"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Floyd Miles</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Emily Selman"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Emily Selman</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Kristin Watson"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Kristin Watson</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Emma Dorsey"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Emma Dorsey</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Alicia Bell"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Alicia Bell</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Jenny Wilson"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1507101105822-7472b28e22ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Jenny Wilson</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Anna Roberts"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Anna Roberts</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Benjamin Russel"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Benjamin Russel</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Jeffrey Webb"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Jeffrey Webb</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Kathryn Murphy"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Kathryn Murphy</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Lawrence Hunter"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1513910367299-bce8d8a0ebf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Lawrence Hunter</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Yvette Armstrong"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1506980595904-70325b7fdd90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Yvette Armstrong</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Angela Fisher"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Angela Fisher</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Blake Reid"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Blake Reid</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Hector Gibbons"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Hector Gibbons</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Fabricio Mendes"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Fabricio Mendes</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Jillian Steward"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Jillian Steward</span>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="Chelsea Hagon"
|
|
class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 shrink-0 rounded-full"
|
|
/>
|
|
<span class="ml-3 truncate">Chelsea Hagon</span>
|
|
</div>
|
|
</el-option>
|
|
</el-options>
|
|
</el-autocomplete>
|