forked from jsnbuchanan/crowd-funder-for-time-pwa
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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user