fix: make padding for actions with custom renderers clickable

https://web.tracklify.com/project/2b7ZVgE5/AdminForth/1394/7dhmHy1b/click-area-is-broken:

Author: yaroslav8765

adminforth/documentation/docs/tutorial/03-Customization/09-Actions.md

@@ -224,7 +224,7 @@ Keep the `<slot />` (that's where AdminForth renders the default button) and emi
   <!-- Keep the slot: AdminForth renders the default action button/icon here -->
   <!-- Emit `callAction` (optionally with a payload) to trigger the action when the wrapper is clicked -->
   <!-- Example: provide `meta.extra` to send custom data. In list views we merge with `row` so recordId context is kept. -->
-  <div :style="styleObj" @click="emit('callAction', { ...props.row, ...(props.meta?.extra ?? {}) })">
+  <div :style="styleObj" @click="click({ ...props.row, ...(props.meta?.extra ?? {}) })">
     <slot />
   </div>
 </template>
@@ -248,6 +248,14 @@ const styleObj = computed(() => ({
   borderRadius: (props.meta?.radius ?? 8) + 'px',
   padding: (props.meta?.padding ?? 2) + 'px',
 }));
+
+function click(payload: any) {
+  emit('callAction', { ...props.row, ...(props.meta?.extra ?? {}) })
+}
+//we need to define this expose, because padding is added by adminforth wrapper and to trigger click on this padding we use this expose
+defineExpose({
+  click
+});
 </script>
 ```
 

adminforth/spa/src/components/ThreeDotsMenu.vue

@@ -43,13 +43,17 @@
               </div>
             </div>
           </li>
-          <li v-for="action in customActions" :key="action.id">
-            <div class="wrapper"> 
+          <li v-for="(action, i) in customActions" :key="action.id">
+            <div 
+              class="wrapper"                 
+              @click="injectedComponentClick(threeDotsDropdownItems ? threeDotsDropdownItems.length + i : i)"
+            > 
               <component
+                :ref="(el: any) => setComponentRef(el, threeDotsDropdownItems ? threeDotsDropdownItems.length + i : i)"
                 :is="(action.customComponent && getCustomComponent(formatComponent(action.customComponent))) || CallActionWrapper"
                 :meta="formatComponent(action.customComponent).meta"
                 @callAction="(payload? : Object) => handleActionClick(action, payload)"
-              >
+]              >
                 <a @click.prevent class="block">
                   <div class="flex items-center gap-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
                     <component 
@@ -173,6 +177,7 @@ function startBulkAction(actionId: string) {
 }
 
 async function injectedComponentClick(index: number) {
+  console.log('Injected component click triggered for index:', index);
   const componentRef = threeDotsDropdownItemsRefs.value[index];
   if (componentRef && 'click' in componentRef) {
     (componentRef as any).click?.();

dev-demo/custom/RequireTwoFaGate.vue

@@ -15,4 +15,8 @@
     const verificationResult = await modal.get2FaConfirmationResult();
     emit('callAction',  { verificationResult } );
   }
+
+  defineExpose({
+    click: onClick
+  });
 </script>