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.
428 lines
17 KiB
HTML
428 lines
17 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="autocomplete" class="block text-sm/6 font-medium text-gray-900"
|
|
>Assigned to</label
|
|
>
|
|
<el-autocomplete class="relative mt-2 block">
|
|
<input
|
|
id="autocomplete"
|
|
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"
|
|
>
|
|
<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-60 w-(--input-width) overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 [--anchor-gap:--spacing(1)] 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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Leslie Alexander
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Michael Foster
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Dries Vincent
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Lindsay Walton
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Courtney Henry
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Tom Cook
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Whitney Francis
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Leonard Krasner
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Floyd Miles
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Emily Selman
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Kristin Watson
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Emma Dorsey
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Alicia Bell
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Jenny Wilson
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Anna Roberts
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Benjamin Russel
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Jeffrey Webb
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Kathryn Murphy
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Lawrence Hunter
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Yvette Armstrong
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Angela Fisher
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Blake Reid
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Hector Gibbons
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Fabricio Mendes
|
|
<span class="sr-only"> is online</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-gray-200"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Jillian Steward
|
|
<span class="sr-only"> is offline</span>
|
|
</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">
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-block size-2 shrink-0 rounded-full bg-green-400 forced-colors:bg-[Highlight]"
|
|
></span>
|
|
<span class="ml-3 truncate">
|
|
Chelsea Hagon
|
|
<span class="sr-only"> is online</span>
|
|
</span>
|
|
</div>
|
|
</el-option>
|
|
</el-options>
|
|
</el-autocomplete>
|