Chatwoot/app/javascript/widget/components/ChatHeaderExpanded.vue
Pranav Raj S 9c31d7c672
feat: Use vue-router on widget route management (#3415)
* feat: Add vue-router to widget

Co-authored-by: Pranav <pranav@chatwoot.com>

* Move to dynamic imports

* Move to routerMixin

* Fix popup button display

* Remove unnecessary import

* router -> route

* Fix open state

* Fix issues

* Remove used CSS

* Fix specs

* Fix specs

* Fix widgetColor specs

* Fix mutation specs

* Fixes broken lint errors

* Fixes issues with widget flow

Co-authored-by: Nithin <nithin@chatwoot.com>
Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2022-01-12 16:25:27 +05:30

50 lines
1.1 KiB
Vue
Executable file

<template>
<header class="header-expanded bg-white py-6 px-5 relative box-border w-full">
<div
class="flex items-start"
:class="[avatarUrl ? 'justify-between' : 'justify-end']"
>
<img v-if="avatarUrl" class="h-12 rounded-full" :src="avatarUrl" />
<header-actions :show-popout-button="showPopoutButton" />
</div>
<h2
class="text-slate-900 mt-5 text-3xl mb-3 font-normal"
v-html="introHeading"
/>
<p class="text-lg text-black-700 leading-normal" v-html="introBody" />
</header>
</template>
<script>
import { mapGetters } from 'vuex';
import HeaderActions from './HeaderActions';
export default {
name: 'ChatHeaderExpanded',
components: {
HeaderActions,
},
props: {
avatarUrl: {
type: String,
default: '',
},
introHeading: {
type: String,
default: '',
},
introBody: {
type: String,
default: '',
},
showPopoutButton: {
type: Boolean,
default: false,
},
},
computed: {
...mapGetters({
widgetColor: 'appConfig/getWidgetColor',
}),
},
};
</script>