refactor: move click listener to button in ContextMenu

simonwep · May 3, 2024 · b53eb29 · b53eb29
1 parent 224f6bc
commit b53eb29
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>