Files
chatwoot/app/javascript/widget/components/Banner.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

54 lines
1.0 KiB
Vue

<script>
import { BUS_EVENTS } from 'shared/constants/busEvents';
import { emitter } from 'shared/helpers/mitt';
export default {
data() {
return {
showBannerMessage: false,
bannerMessage: '',
bannerType: 'error',
};
},
mounted() {
emitter.on(BUS_EVENTS.SHOW_ALERT, ({ message, type = 'error' }) => {
this.bannerMessage = message;
this.bannerType = type;
this.showBannerMessage = true;
setTimeout(() => {
this.showBannerMessage = false;
}, 3000);
});
},
};
</script>
<!-- eslint-disable-next-line vue/no-root-v-if -->
<template>
<div v-if="showBannerMessage" :class="`banner ${bannerType}`">
<span>
{{ bannerMessage }}
</span>
</div>
</template>
<style scoped lang="scss">
@import 'widget/assets/scss/variables.scss';
.banner {
color: $color-white;
font-size: $font-size-default;
font-weight: $font-weight-bold;
padding: $space-slab;
text-align: center;
&.success {
background: $color-success;
}
&.error {
background: $color-error;
}
}
</style>