fix: Fab actions does not take into account on.listener handler (close …

…#955)

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,14 +46,14 @@
       v-bind="actions[0]"
       size="1.15rem"
       renderer="fab"
+      v-on="action.on ? { [action.on.event]: action.on.listener } : {}"
     />
   </div>
 </template>
 
 <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>