vinet/viossa.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: added vueuse for onClickOutside, upgraded functionality for hamburger menu and locale picker

Browse source
This commit is contained in:
Benjamin Singleton 2025-06-14 12:38:57 -05:00
parent 3b74fc00f1
commit 6ea53dc652
4 changed files with 80 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

36
apps/vdn-static/src/components/organisms/LocalePicker.vue
View file

@ -1,44 +1,28 @@
<script setup lang="ts">
import { LOCALE_IDS, localeId, useLocale, type LocaleId } from "@/i18n";
import { onMounted, onUnmounted, ref, useTemplateRef } from "vue";
import { ref } from "vue";
import { vOnClickOutside } from "@vueuse/components";
const isOpen = ref<boolean>(false);
const dropdownRef = useTemplateRef("dropdown");
const toggleOpen = (): void => {
isOpen.value = !isOpen.value;
};
const close = (): void => {
isOpen.value = false;
};
const setLocaleId = (id: LocaleId): void => {
localeId.value = id;
close();
};
const detectFocus = (e: MouseEvent) => {
if (!isOpen) {
return;
}
const dropdown = dropdownRef.value;
if (!dropdown) {
return;
}
const { target } = e;
const focused =
target instanceof Node
&& (dropdown === target || dropdown.contains(target));
if (!focused) {
isOpen.value = false;
}
};
onMounted(() => window.addEventListener("click", detectFocus));
onUnmounted(() => window.removeEventListener("click", detectFocus));
</script>
<template>
<div :class="['dropdown', isOpen && 'is-active']" ref="dropdown">
<div
:class="['dropdown', isOpen && 'is-active']"
v-on-click-outside="close">
<div class="dropdown-trigger">
<button
class="button"