Files
chatwoot/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
Shivam Mishra c51a458c25 style: apply fixes for eslint issues [cw-3590] (#10210)
These fixes are all auto generated and can be merged directly

Fixes the following issues

1. Event used on components should be hypenated
2. Attribute orders in components
3. Use `unmounted` instead of `destroyed`
4. Add explicit `emits` declarations for components, autofixed [using
this
script](https://gist.github.com/scmmishra/6f549109b96400006bb69bbde392eddf)


We ignore the top level v-if for now, we will fix it later
2024-10-03 15:02:12 +05:30

101 lines
2.4 KiB
Vue

<script>
export default {
props: {
emailAttributes: {
type: Object,
default: () => ({}),
},
isIncoming: {
type: Boolean,
default: true,
},
cc: {
type: Array,
default: () => [],
},
bcc: {
type: Array,
default: () => [],
},
},
computed: {
fromMail() {
const from = this.emailAttributes.from || [];
return from.join(', ');
},
toMails() {
const to = this.emailAttributes.to || [];
return to.join(', ');
},
ccMails() {
const cc = this.emailAttributes.cc || this.cc || [];
return cc.join(', ');
},
bccMails() {
const bcc = this.emailAttributes.bcc || this.bcc || [];
return bcc.join(', ');
},
subject() {
return this.emailAttributes.subject || '';
},
showHead() {
return this.toMails || this.ccMails || this.bccMails || this.fromMail;
},
},
};
</script>
<!-- eslint-disable-next-line vue/no-root-v-if -->
<template>
<div
v-if="showHead"
class="message__mail-head"
:class="{ 'is-incoming': isIncoming }"
>
<div v-if="fromMail" class="meta-wrap">
<span class="message__content--type">{{ $t('EMAIL_HEADER.FROM') }}:</span>
<span>{{ fromMail }}</span>
</div>
<div v-if="toMails" class="meta-wrap">
<span class="message__content--type">{{ $t('EMAIL_HEADER.TO') }}:</span>
<span>{{ toMails }}</span>
</div>
<div v-if="ccMails" class="meta-wrap">
<span class="message__content--type">{{ $t('EMAIL_HEADER.CC') }}:</span>
<span>{{ ccMails }}</span>
</div>
<div v-if="bccMails" class="meta-wrap">
<span class="message__content--type">{{ $t('EMAIL_HEADER.BCC') }}:</span>
<span>{{ bccMails }}</span>
</div>
<div v-if="subject" class="meta-wrap">
<span class="message__content--type">
{{ $t('EMAIL_HEADER.SUBJECT') }}:
</span>
<span>{{ subject }}</span>
</div>
</div>
</template>
<style lang="scss" scoped>
.message__mail-head {
padding-bottom: var(--space-small);
margin-bottom: var(--space-small);
border-bottom: 1px solid var(--w-300);
&.is-incoming {
border-bottom: 1px solid var(--color-border-light);
}
}
.meta-wrap {
.message__content--type {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-mini);
}
span {
font-size: var(--font-size-mini);
}
}
</style>