initial commit

2023-05-30 15:04:51 -05:00
commit 539805dacb
20 changed files with 14788 additions and 0 deletions
--- a/components/vlDropdown.vue
+++ b/components/vlDropdown.vue
@@ -0,0 +1,151 @@
+<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>