PronounsPage/components/T.vue

<template>
    <component :is="Array.isArray(txt) ? 'div' : 'span'" :class="[translationMode ? 't-translation-mode' : '', modified ? 't-modified' : '']" @click="clicked">
        <template v-if="Array.isArray(txt)">
            <p v-for="p in txt">
                <Icon v-if="icon" :v="icon" /><LinkedText :text="p" />
            </p>
        </template><template v-else>
            <Icon v-if="icon" :v="icon" /><LinkedText :text="txt" />
        </template>
    </component>
</template>

<script>
import { mapState } from 'vuex';
import { sessionCookieSetting } from '../src/cookieSettings.ts';

export default {
    props: {
        params: {},
        icon: {},
    },
    data() {
        return {
            key: (this.$slots.default[0].text || '').trim(),
        };
    },
    computed: {
        ...mapState([
            'translationMode',
            'translationChanges',
        ]),
        modified() {
            return this.translationMode && this.translationChanges.hasOwnProperty(this.key);
        },
        txt() {
            return this.modified
                ? this.$translator.applyParams(this.translationChanges[this.key], this.params || {})
                : this.$translator.translate(this.key, this.params || {});
        },
    },
    methods: {
        async clicked(e) {
            if (!this.translationMode) {
                return;
            }

            e.preventDefault();
            e.stopPropagation();

            const base = this.$translator.get(this.key, false, true);

            const newValue = await this.$editor(
                this.modified
                    ? this.translationChanges[this.key]
                    : this.$translator.get(this.key),
                {
                    icon: 'language',
                    header: this.key,
                    message: base
                        ? `<div class="small alert alert-info">${
                            Array.isArray(base)
                                ? `<ul>${base.map((el) => `<li>${el}</el>`)}</ul>`
                                : base
                        }</div>`
                        : undefined,
                    margin: false,
                },
                'info',
            );

            if (newValue !== undefined) {
                this.$store.commit('translate', { translator: this.$translator, key: this.key, newValue });
                this.$cookies.set('translations', this.$store.state.translationChanges, sessionCookieSetting);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "assets/variables";

.t-translation-mode {
    border: 1px solid rgba($primary, 50%);
    cursor: alias;
    &:hover {
        border: 1px solid $primary;
    }
}

.t-modified {
    background-color: rgba($primary, 30%);
}
</style>