mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-04 04:57:51 +00:00
b474929f5e
# Replace the deprecated `eventBus` with mitt.js ## Description Since eventBus and it's respective methods are deprecated and removed from all future releases of vue, this was blocking us from migrating. This PR replaces eventBus with [mitt](https://github.com/developit/mitt). I have created a wrapper mitt.js to simulate the same old event names so it's backwards compatible, without making a lot of changes. Fixes # (issue) ## Type of change Please delete options that are not relevant. - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality not to work as expected) - [ ] This change requires a documentation update ## How Has This Been Tested? 1. Made sure all the places we're listening to bus events are working as expected. 2. Respective specsf or the events from mitt. ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [x] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] Any dependent changes have been merged and published in downstream modules
86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<template>
|
|
<div class="code--container">
|
|
<div class="code--action-area">
|
|
<form
|
|
v-if="enableCodePen"
|
|
class="code--codeopen-form"
|
|
action="https://codepen.io/pen/define"
|
|
method="POST"
|
|
target="_blank"
|
|
>
|
|
<input type="hidden" name="data" :value="codepenScriptValue" />
|
|
|
|
<button type="submit" class="button secondary tiny">
|
|
{{ $t('COMPONENTS.CODE.CODEPEN') }}
|
|
</button>
|
|
</form>
|
|
<button class="button secondary tiny" @click="onCopy">
|
|
{{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
|
|
</button>
|
|
</div>
|
|
<highlightjs v-if="script" :language="lang" :code="script" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import 'highlight.js/styles/default.css';
|
|
import { copyTextToClipboard } from 'shared/helpers/clipboard';
|
|
import alertMixin from 'shared/mixins/alertMixin';
|
|
|
|
export default {
|
|
mixins: [alertMixin],
|
|
props: {
|
|
script: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
lang: {
|
|
type: String,
|
|
default: 'javascript',
|
|
},
|
|
enableCodePen: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
codepenTitle: {
|
|
type: String,
|
|
default: 'Chatwoot Codepen',
|
|
},
|
|
},
|
|
computed: {
|
|
codepenScriptValue() {
|
|
const lang = this.lang === 'javascript' ? 'js' : this.lang;
|
|
return JSON.stringify({
|
|
title: this.codepenTitle,
|
|
private: true,
|
|
[lang]: this.script,
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
async onCopy(e) {
|
|
e.preventDefault();
|
|
await copyTextToClipboard(this.script);
|
|
this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.code--container {
|
|
position: relative;
|
|
text-align: left;
|
|
|
|
.code--action-area {
|
|
top: var(--space-small);
|
|
position: absolute;
|
|
right: var(--space-small);
|
|
}
|
|
|
|
.code--codeopen-form {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
</style>
|