From dd034576969646af3e90e42229f55ff20f22cc50 Mon Sep 17 00:00:00 2001
From: cnouguier <ch.nouguier@gmail.com>
Date: Tue, 24 Sep 2024 10:59:43 +0200
Subject: [PATCH] fix: Fab actions does not take into account on.listener
 handler (close #955)

---
 core/client/components/layout/KFab.vue | 26 ++++++--------------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/core/client/components/layout/KFab.vue b/core/client/components/layout/KFab.vue
index 09ba03bfa..64c94d4f1 100644
--- a/core/client/components/layout/KFab.vue
+++ b/core/client/components/layout/KFab.vue
@@ -15,11 +15,12 @@
       <!-- Render a grid menu if the number of actions is higher than the expandable limit -->
       <q-menu v-if="actions.length > expandableLimit" v-model="isOpened" ref="menu" persistent fit anchor="top left" self="bottom right">
         <div class="q-pa-sm row" style="max-width: 50vw">
-          <template v-for="action in actions" :key="action.uid">
+          <template v-for="action in actions" :key="action.id">
             <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <KAction
                 v-bind="action"
                 renderer="item"
+                v-on="action.on ? { [action.on.event]: action.on.listener } : {}"
                 @triggered="isOpened = false"
               />
             </div>
@@ -28,10 +29,11 @@
       </q-menu>
       <!-- Render an expandable list of actions -->
       <div v-else>
-        <template v-for="action in actions" :key="action.uid">
+        <template v-for="action in actions" :key="action.id">
           <KAction
             v-bind="action"
             renderer="fab-action"
+            v-on="action.on ? { [action.on.event]: action.on.listener } : {}"
             :iconRight="actionsAlign === 'left' ? true : false"
           />
         </template>
@@ -44,6 +46,7 @@
       v-bind="actions[0]"
       size="1.15rem"
       renderer="fab"
+      v-on="action.on ? { [action.on.event]: action.on.listener } : {}"
     />
   </div>
 </template>
@@ -51,7 +54,6 @@
 <script setup>
 import _ from 'lodash'
 import { ref, computed } from 'vue'
-import { uid } from 'quasar'
 import { Layout } from '../../layout'
 import KAction from '../action/KAction.vue'
 
@@ -86,23 +88,7 @@ const icon = computed(() => {
   return fab.icon || 'las la-ellipsis-v'
 })
 const actions = computed(() => {
-  // let fabActions = fab.mode ? fab.content[fab.mode] : fab.content
-  // if (!fabActions) return null
-  const actions = []
-  // Apply filtering
-  _.forEach(fab.components, (action) => {
-    let isVisible = _.get(action, 'visible', true)
-    // Can be a functional call
-    if (typeof isVisible === 'function') {
-      isVisible = isVisible()
-    }
-    if (isVisible) {
-      action.uid = uid()
-      if (!action.color) action.color = 'primary'
-      actions.push(action)
-    }
-  })
-  return actions
+  return fab.components
 })
 </script>