From b53eb29ff790896b81e02b15a345482e40120908 Mon Sep 17 00:00:00 2001
From: Simon Reinisch <simon@reinisch.io>
Date: Fri, 3 May 2024 17:31:43 +0200
Subject: [PATCH] refactor: move click listener to button in ContextMenu

---
 src/app/components/base/context-menu/ContextMenu.vue      | 5 ++---
 .../overview/widgets/charts/sankey-chart/SankeyChart.vue  | 8 +++++---
 src/app/pages/navigation/admin/AdminButton.vue            | 4 +++-
 .../pages/navigation/currency/ChangeCurrencyButton.vue    | 4 +++-
 .../pages/navigation/language/ChangeLanguageButton.vue    | 4 +++-
 src/app/pages/navigation/tools/ToolsButton.vue            | 4 +++-
 src/app/pages/navigation/year/ChangeYearButton.vue        | 4 +++-
 7 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/app/components/base/context-menu/ContextMenu.vue b/src/app/components/base/context-menu/ContextMenu.vue
index 4a0eb36..140b83d 100644
--- a/src/app/components/base/context-menu/ContextMenu.vue
+++ b/src/app/components/base/context-menu/ContextMenu.vue
@@ -1,7 +1,6 @@
 <template>
-  <!-- TODO: Forward click to slot -->
-  <div ref="reference" v-tooltip="{ text: tooltip, position: tooltipPosition }" :class="classes" @click="toggle">
-    <slot />
+  <div ref="reference" v-tooltip="{ text: tooltip, position: tooltipPosition }" :class="classes">
+    <slot :toggle="toggle" />
   </div>
   <div ref="popper" :class="[$style.popper, { [$style.visible]: visible }]">
     <ul :class="listClasses">
diff --git a/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue b/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue
index e9f168a..bb1fd47 100644
--- a/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue
+++ b/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue
@@ -3,9 +3,11 @@
     <EChart ref="chart" :class="[$style.sankeyChart, classes]" :options="options" />
 
     <ContextMenu v-if="chart" position="top-end" :class="$style.downloadMenu">
-      <button type="button" :class="$style.downloadBtn">
-        <RiDownloadCloud2Line size="18" />
-      </button>
+      <template #default="{ toggle }">
+        <button type="button" :class="$style.downloadBtn" @click="toggle">
+          <RiDownloadCloud2Line size="18" />
+        </button>
+      </template>
 
       <template #options>
         <ContextMenuButton :icon="RiLandscapeLine" :text="t('page.dashboard.downloadAsPNG')" @click="downloadPNG" />
diff --git a/src/app/pages/navigation/admin/AdminButton.vue b/src/app/pages/navigation/admin/AdminButton.vue
index da535e1..df6b306 100644
--- a/src/app/pages/navigation/admin/AdminButton.vue
+++ b/src/app/pages/navigation/admin/AdminButton.vue
@@ -5,7 +5,9 @@
     tooltip-position="right"
     :class="classes"
   >
-    <Button :icon="RiShieldFlashLine" textual color="dimmed" />
+    <template #default="{ toggle }">
+      <Button :icon="RiShieldFlashLine" textual color="dimmed" @click="toggle" />
+    </template>
 
     <template #options>
       <CreateUserButton />
diff --git a/src/app/pages/navigation/currency/ChangeCurrencyButton.vue b/src/app/pages/navigation/currency/ChangeCurrencyButton.vue
index 49b9e90..bfa5772 100644
--- a/src/app/pages/navigation/currency/ChangeCurrencyButton.vue
+++ b/src/app/pages/navigation/currency/ChangeCurrencyButton.vue
@@ -5,7 +5,9 @@
     :options="currencies"
     @select="changeCurrency($event.id as AvailableCurrency)"
   >
-    <Button :class="classes" :icon="RiCurrencyLine" textual color="dimmed" />
+    <template #default="{ toggle }">
+      <Button :class="classes" :icon="RiCurrencyLine" textual color="dimmed" @click="toggle" />
+    </template>
   </ContextMenu>
 </template>
 
diff --git a/src/app/pages/navigation/language/ChangeLanguageButton.vue b/src/app/pages/navigation/language/ChangeLanguageButton.vue
index 511415f..eb33fd6 100644
--- a/src/app/pages/navigation/language/ChangeLanguageButton.vue
+++ b/src/app/pages/navigation/language/ChangeLanguageButton.vue
@@ -5,7 +5,9 @@
     :options="locales"
     @select="changeLocale($event.id as AvailableLocale)"
   >
-    <Button :class="classes" :icon="RiGlobalLine" textual color="dimmed" />
+    <template #default="{ toggle }">
+      <Button :class="classes" :icon="RiGlobalLine" textual color="dimmed" @click="toggle" />
+    </template>
   </ContextMenu>
 </template>
 
diff --git a/src/app/pages/navigation/tools/ToolsButton.vue b/src/app/pages/navigation/tools/ToolsButton.vue
index 3f0995e..c58855b 100644
--- a/src/app/pages/navigation/tools/ToolsButton.vue
+++ b/src/app/pages/navigation/tools/ToolsButton.vue
@@ -4,7 +4,9 @@
     :position="media === 'mobile' ? 'top' : 'right-end'"
     tooltip-position="right"
   >
-    <Button :class="classes" :icon="RiToolsLine" textual color="dimmed"></Button>
+    <template #default="{ toggle }">
+      <Button :class="classes" :icon="RiToolsLine" textual color="dimmed" @click="toggle"></Button>
+    </template>
 
     <template #options>
       <LoadDemoDataButton v-if="status === 'idle'" />
diff --git a/src/app/pages/navigation/year/ChangeYearButton.vue b/src/app/pages/navigation/year/ChangeYearButton.vue
index 38fb5d6..b98d75a 100644
--- a/src/app/pages/navigation/year/ChangeYearButton.vue
+++ b/src/app/pages/navigation/year/ChangeYearButton.vue
@@ -7,7 +7,9 @@
     :highlight="state.activeYear"
     @select="changeYear($event.id as number)"
   >
-    <Button :class="classes" :icon="RiCalendarLine" textual color="dimmed" />
+    <template #default="{ toggle }">
+      <Button :class="classes" :icon="RiCalendarLine" textual color="dimmed" @click="toggle" />
+    </template>
   </ContextMenu>
 </template>