Refactor ActivityListItem to use function props for image caching

Replace @Emit decorator with function prop pattern for better parent control over image caching behavior. ActivityListItem now accepts onImageCache function prop that parent components can use to handle image caching with custom logic. Updated HomeView to use new function prop interface with simplified method signature.

src/components/ActivityListItem.vue

@@ -73,7 +73,7 @@
             class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
             :src="record.image"
             alt="Activity image"
-            @load="cacheImage(record.image)"
+            @load="handleImageLoad(record.image)"
           />
         </a>
       </div>
@@ -248,7 +248,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
+import { Component, Prop, Vue } from "vue-facing-decorator";
 import { GiveRecordWithContactInfo } from "@/interfaces/give";
 import EntityIcon from "./EntityIcon.vue";
 import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
@@ -274,6 +274,13 @@ export default class ActivityListItem extends Vue {
   @Prop() activeDid!: string;
   @Prop() confirmerIdList?: string[];
 
+  /**
+   * Function prop for handling image caching
+   * Called when an image loads successfully, allowing parent to control caching behavior
+   */
+  @Prop({ type: Function, default: () => {} })
+  onImageCache!: (imageUrl: string) => void | Promise<void>;
+
   isHiddenDid = isHiddenDid;
   notify!: ReturnType<typeof createNotifyHelpers>;
   $notify!: (notification: any, timeout?: number) => void;
@@ -290,9 +297,12 @@ export default class ActivityListItem extends Vue {
     this.notify.warning(NOTIFY_UNKNOWN_PERSON.message, TIMEOUTS.STANDARD);
   }
 
-  @Emit()
-  cacheImage(image: string) {
-    return image;
+  /**
+   * Handle image load event - call function prop for caching
+   * Allows parent to control caching behavior and validation
+   */
+  handleImageLoad(imageUrl: string): void {
+    this.onImageCache(imageUrl);
   }
 
   get fetchAmount(): string {

src/views/HomeView.vue

@@ -227,9 +227,9 @@ Raymer * @version 1.0.0 */
             :is-registered="isRegistered"
             :active-did="activeDid"
             :confirmer-id-list="record.confirmerIdList"
+            :on-image-cache="cacheImageData"
             @load-claim="onClickLoadClaim"
             @view-image="openImageViewer"
-            @cache-image="cacheImageData"
             @confirm-claim="confirmClaim"
           />
         </ul>
@@ -1740,11 +1740,10 @@ export default class HomeView extends Vue {
    * Caches image data for sharing
    *
    * @public
-   * Called by ActivityListItem component
-   * @param event Event object
+   * Called by ActivityListItem component function prop
    * @param imageUrl URL of image to cache
    */
-  async cacheImageData(_event: Event, imageUrl: string) {
+  async cacheImageData(imageUrl: string) {
     try {
       // For images that might fail CORS, just store the URL
       // The Web Share API will handle sharing the URL appropriately