Convert Vue components to use @Emit decorator instead of manual emits declarations

Replace manual emits declarations with proper @Emit decorator usage across components:
- ActivityListItem: Add @Emit methods for viewImage, loadClaim, confirmClaim
- ContactInputForm: Convert handleQRScan to use @Emit("qr-scan")
- ContactBulkActions: Add @Emit methods for toggle-all-selection, copy-selected
- ContactListHeader: Add @Emit methods for all 5 emitted events
- MembersList: Add @Emit("error") method for error handling
- LargeIdenticonModal: Add @Emit("close") method
- ContactListItem: Add @Emit methods for all 4 emitted events

Update all templates to call emit methods instead of direct $emit calls.
Fix TypeScript type issues with optional parameters.
Resolves Vue warning about undeclared emitted events.

Follows vue-facing-decorator best practices and improves code consistency.
This commit is contained in:
Matthew Raymer
2025-07-30 05:50:39 +00:00
parent 9136a9c622
commit 07c5c6fd31
13 changed files with 202 additions and 83 deletions

View File

@@ -52,7 +52,7 @@
<a
class="cursor-pointer"
data-testid="circle-info-link"
@click="$emit('loadClaim', record.jwtId)"
@click="emitLoadClaim(record.jwtId)"
>
<font-awesome icon="circle-info" class="fa-fw text-slate-500" />
</a>
@@ -67,7 +67,7 @@
>
<a
class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
@click="$emit('viewImage', record.image)"
@click="emitViewImage(record.image)"
>
<img
class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
@@ -80,7 +80,7 @@
<!-- Description -->
<p class="font-medium">
<a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
<a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
{{ description }}
</a>
</p>
@@ -248,7 +248,7 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-facing-decorator";
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
import { GiveRecordWithContactInfo } from "@/interfaces/give";
import EntityIcon from "./EntityIcon.vue";
import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
@@ -340,7 +340,19 @@ export default class ActivityListItem extends Vue {
return true;
}
handleConfirmClick() {
// Emit methods using @Emit decorator
@Emit("viewImage")
emitViewImage(imageUrl: string) {
return imageUrl;
}
@Emit("loadClaim")
emitLoadClaim(jwtId: string) {
return jwtId;
}
@Emit("confirmClaim")
emitConfirmClaim() {
if (!this.canConfirm) {
notifyWhyCannotConfirm(
(msg, timeout) => this.notify.info(msg.text ?? "", timeout),
@@ -352,7 +364,11 @@ export default class ActivityListItem extends Vue {
);
return;
}
this.$emit("confirmClaim", this.record);
return this.record;
}
handleConfirmClick() {
this.emitConfirmClaim();
}
get friendlyDate(): string {