mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 11:37:58 +00:00
79aa5a5d7f
# Pull Request Template ## Description This PR will replace the usage of `alertMixin` from the code base with the `useAlert` composable. Fixes https://linear.app/chatwoot/issue/CW-3462/replace-alertmixin-usage-with-usealert ## Type of change - [x] Breaking change (fix or feature that would cause existing functionality not to work as expected) ## How Has This Been Tested? Please refer this issue description https://linear.app/chatwoot/issue/CW-3462/replace-alertmixin-usage-with-usealert ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] 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 - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Sojan Jose <sojan@pepalo.com>
85 lines
1.8 KiB
Vue
85 lines
1.8 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 { useAlert } from 'dashboard/composables';
|
|
|
|
export default {
|
|
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);
|
|
useAlert(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>
|