feat: improve dropdown (#1788)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1788
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/home/TheNavigation.vue

@@ -33,8 +33,10 @@
 			<notifications/>
 			<div class="user">
 				<dropdown class="is-right" ref="usernameDropdown">
-					<template #trigger>
+					<template #trigger="{toggleOpen}">
 						<x-button
+							class="username-dropdown-trigger"
+							@click="toggleOpen()"
 							variant="secondary"
 							:shadow="false"
 						>
@@ -203,16 +205,13 @@ $hamburger-menu-icon-width: 28px;
 			display: flex;
 			align-items: center;
 
-			:deep(.dropdown-trigger) {
+			.username-dropdown-trigger {
 				line-height: 1;
+				padding: 0 0.25rem;
+				height: 1rem;
 
-				.button {
+				.icon {
-					padding: 0 0.25rem;
+					width: .5rem;
-					height: 1rem;
-
-					.icon {
-						width: .5rem;
-					}
 				}
 			}
 
@@ -254,7 +253,7 @@ $hamburger-menu-icon-width: 28px;
 			margin-right: var(--button-padding-horizontal);
 		}
 
-		:deep(.dropdown-trigger .button) {
+		.username-dropdown-trigger {
 			background: none;
 
 			&:focus:not(:active), &:active {

src/components/misc/dropdown.vue

@@ -1,10 +1,11 @@
 <template>
 	<div class="dropdown is-right is-active" ref="dropdown">
-		<div class="dropdown-trigger is-flex" @click="open = !open">
+		<slot name="trigger" :close="close" :toggleOpen="toggleOpen">
-			<slot name="trigger" :close="close">
+			<BaseButton class="dropdown-trigger is-flex" @click="toggleOpen">
 				<icon :icon="triggerIcon" class="icon"/>
-			</slot>
+			</BaseButton>
-		</div>
+		</slot>
+
 		<transition name="fade">
 			<div class="dropdown-menu" v-if="open">
 				<div class="dropdown-content">
@@ -15,46 +16,42 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {ref} from 'vue'
-import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+import {onClickOutside} from '@vueuse/core'
 
-export default defineComponent({
+import BaseButton from '@/components/base/BaseButton.vue'
-	name: 'dropdown',
+
-	data() {
+defineProps({
-		return {
+	triggerIcon: {
-			open: false,
+		type: String,
-		}
+		default: 'ellipsis-h',
-	},
-	mounted() {
-		document.addEventListener('click', this.handleClickOutside)
-	},
-	beforeUnmount() {
-		document.removeEventListener('click', this.handleClickOutside)
-	},
-	props: {
-		triggerIcon: {
-			type: String,
-			default: 'ellipsis-h',
-		},
-	},
-	emits: ['close'],
-	methods: {
-		close() {
-			this.open = false
-		},
-		toggleOpen() {
-			this.open = !this.open
-		},
-		handleClickOutside(e) {
-			if (!this.open) {
-				return
-			}
-			closeWhenClickedOutside(e, this.$refs.dropdown, () => {
-				this.open = false
-				this.$emit('close', e)
-			})
-		},
 	},
 })
+const emit = defineEmits(['close'])
+
+const open = ref(false)
+
+function close() {
+	open.value = false
+}
+
+function toggleOpen() {
+	open.value = !open.value
+}
+
+const dropdown = ref()
+onClickOutside(dropdown, (e: Event) => {
+	if (!open.value) {
+		return
+	}
+	close()
+	emit('close', e)
+})
 </script>
+
+<style lang="scss" scoped>
+.dropdown-menu  .dropdown-content {
+	box-shadow: var(--shadow-md);
+}
+</style>

src/styles/theme/theme.scss

@@ -144,10 +144,6 @@ button.table {
   margin-right: 4px;
 }
 
-.dropdown-menu  .dropdown-content {
-	box-shadow: var(--shadow-md);
-}
-
 .is-strikethrough {
   text-decoration: line-through;
 }