PronounsPage/components/Morpheme.vue

<template>
    <span
        :class="['morpheme', 'rounded', highlightedMorpheme == baseMorpheme ? 'bg-primary text-white' : '']"
        @mouseenter="highlightMorpheme(baseMorpheme)"
        @mouseleave="highlightMorpheme(null)"
        @touchstart="highlightMorpheme(highlightedMorpheme == baseMorpheme ? null : baseMorpheme)"
    ><Spelling escape :text="prepend + pronoun.getMorpheme(morpheme, counter) + append" /></span>
</template>

<script>
import { mapState } from 'vuex';

export default {
    props: {
        pronoun: { required: true },
        morpheme: { required: true },
        counter: { default: 0 },

        prepend: { default: '' },
        append: { default: '' },
    },
    computed: {
        baseMorpheme: {
            get() {
                if (this.morpheme[0] == '\'') {
                    return this.morpheme.substring(1);
                } else {
                    return this.morpheme;
                }
            },
        },
        ...mapState(['highlightedMorpheme']),
    },
    methods: {
        highlightMorpheme(morpheme) {
            this.$store.commit('highlightMorpheme', morpheme);
        },
    },
};
</script>

<style>
    .morpheme {
        margin: 0 -0.15rem;
        padding: 0 0.15rem;
    }
</style>