Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 2,285 Bytes
b2ecf7d 86c4ad7 b2ecf7d 9d298eb b2ecf7d 86c4ad7 b2ecf7d 86c4ad7 b2ecf7d 86c4ad7 b2ecf7d 86c4ad7 b2ecf7d 86c4ad7 b2ecf7d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { slide } from "svelte/transition";
import IconCaretDownV2 from "../../..//Icons/IconCaretDownV2.svelte";
export let classNames = "";
export let isLoading = false;
export let groupNames: string[];
const dispatch = createEventDispatcher<{ groupSelected: string }>();
let containerEl: HTMLElement;
let isOptionsVisible = false;
let selectedGroupName: string;
function chooseInputGroup(idx: number) {
hideOptions();
const inputGroup = groupNames[idx];
selectedGroupName = inputGroup;
dispatch("groupSelected", selectedGroupName);
}
function toggleOptionsVisibility() {
isOptionsVisible = !isOptionsVisible;
}
function onClick(e: MouseEvent | TouchEvent) {
let targetElement = e.target;
do {
if (targetElement === containerEl) {
// This is a click inside. Do nothing, just return.
return;
}
targetElement = (targetElement as HTMLElement).parentElement;
} while (targetElement);
// This is a click outside
hideOptions();
}
function hideOptions() {
isOptionsVisible = false;
}
</script>
<svelte:window on:click={onClick} />
<div
class="relative mb-1.5 {classNames}
{isLoading && 'pointer-events-none opacity-50'}
{isOptionsVisible && 'z-10'}"
bind:this={containerEl}
>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="inline-flex w-32 justify-between rounded-md border border-gray-100 px-4 py-1"
on:click={toggleOptionsVisibility}
>
<div class="truncate text-sm">{selectedGroupName ?? "Groups"}</div>
<IconCaretDownV2
classNames="-mr-1 ml-2 h-5 w-5 transition ease-in-out transform {isOptionsVisible && '-rotate-180'}"
/>
</div>
{#if isOptionsVisible}
<div
class="absolute right-0 mt-1 w-full origin-top-right rounded-md ring-1 ring-black ring-opacity-10"
transition:slide
>
<div class="rounded-md bg-white py-1" role="none">
{#each groupNames as inputGroup, i}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="truncate px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-200"
on:click={() => chooseInputGroup(i)}
>
{inputGroup}
</div>
{/each}
</div>
</div>
{/if}
</div>
|