vueless/components/vlDropdown.vue

<script setup>
const hex = ref((Math.random() * 0xfffff * 1000000).toString(16).slice(0, 6).toString());
const dropdownOpen = ref(false);
const dropdownButton = ref(null);
const dropdown = ref(null);

function dropdownButtonKeypress(event) {
	if (event.key !== "Enter" && event.key !== " " && event.key !== "ArrowUp" && event.key !== "ArrowDown" || dropdownOpen.value === true) return;
	event.preventDefault();

	if (event.key === "ArrowUp") {
		dropdownOpen.value = true;
		setTimeout(() => {
			dropdown.value.children[dropdown.value.children.length - 1].focus();
		})
		return;
	}

	if (event.key === "ArrowDown") {
		dropdownOpen.value = true;
		setTimeout(() => {
			dropdown.value.children[1].focus();
		})
		return;
	}

	if (event.key === "Enter" || event.key === " ") {
		dropdownOpen.value = !dropdownOpen.value;
		setTimeout(() => {
			dropdown.value.children[1].focus();
		})
	}
}

function dropdownKeypress(event) {
	if (event.key === "ArrowUp") {
		event.preventDefault();
		const focusedElement = document.activeElement;
		const elements = Array.from(dropdown.value.children).filter(
			(el) => el.tabIndex === 0
		);
		const currentIndex = elements.indexOf(focusedElement);
		const nextIndex = currentIndex > 0 ? currentIndex - 1 : elements.length - 1;
		elements[nextIndex].focus();
	}

	if (event.key === "ArrowDown") {
		event.preventDefault();
		const focusedElement = document.activeElement;
		const elements = Array.from(dropdown.value.children).filter(
			(el) => el.tabIndex === 0
		);
		const currentIndex = elements.indexOf(focusedElement);
		const nextIndex = currentIndex < elements.length - 1 ? currentIndex + 1 : 0;
		elements[nextIndex].focus();
	}

	if (event.key === "Escape" || event.key === "Esc") {
		event.preventDefault();
		dropdownButton.value.focus();
		dropdownOpen.value = false;
	}
}
</script>

<template>
	<div class="vl-dropdown-button">
		<button :id="`menubutton-${hex}`" :aria-controls="`menu-${hex}`" class="vl-button"
			@click.exact="dropdownOpen = !dropdownOpen;" @keydown="dropdownButtonKeypress($event)" ref="dropdownButton"
			aria-haspopup="menu" :aria-expanded="dropdownOpen" :data-state="(dropdownOpen) ? 'open' : 'closed'">
			Dropdown
			<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
				<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
					d="m6 9l6 6l6-6" />
			</svg>
		</button>
		<Transition name="vl-dropdown">
			<div class="vl-dropdown" :id="`menu-${hex}`" tabindex="-1" :aria-labelledby="`menubutton-${hex}`"
				:data-state="(dropdownOpen) ? 'open' : 'closed'" :key="dropdownOpen" :hidden="!dropdownOpen" role="menu"
				@keydown="dropdownKeypress($event)" :aria-hidden="!dropdownOpen" ref="dropdown">
				<span class="vl-diamond"><svg style="display:block" width="10" height="5" viewBox="0 0 30 10"
						preserveAspectRatio="none">
						<polygon points="0,0 30,0 15,10" style=""></polygon>
					</svg></span>
				<slot />
			</div>
		</Transition>
	</div>
</template>

<style>
.vl-dropdown-button .vl-button[data-state="open"] svg {
	transform: rotate(180deg);
}

.vl-dropdown-button .vl-button svg {
	transition: transform 300ms ease;
}

.vl-dropdown-button {
	position: relative;
}

.vl-diamond {
	position: absolute;
	top: 0px;
	transform-origin: center 0px 0px;
	transform: rotate(180deg) translateX(50%);
	left: 50%;
}

.vl-diamond svg {
	fill: #070809;
}

.vl-dropdown[data-state="open"] {
	display: flex;
}

.vl-dropdown {
	position: absolute;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-right: 4px;
	padding-left: 4px;
	margin-top: 8px;
	left: -25%;
	width: 150%;
	background: #070809;
	border-radius: 6px;
	flex-direction: column;
	gap: 2px 0;
}

.vl-dropdown button {
	width: 100%;
	background: unset;
	border: unset;
	justify-content: start;
	border-radius: 6px;
}

.vl-dropdown button:hover {
	background: #090a0b;
}

.vl-dropdown button:focus {
	outline: 0;
	background-color: hsl(226, 79%, 37.5%);
}
</style>