PronounsPage/components/Morpheme.vue

<script setup lang="ts">
import { intersection } from '~/src/sets.ts';
import { useMainStore } from '~/store/index.ts';

const props = withDefaults(defineProps<{
    morpheme: string;
    spelling: string;
    highlightsMorphemes?: Set<string>;
}>(), {
    highlightsMorphemes: (props) => {
        return new Set([props.morpheme]);
    },
});

const { highlightMorphemes } = useMainStore();
const { highlightedMorphemes } = storeToRefs(useMainStore());

const isHighlighted = computed((): boolean => {
    return intersection(props.highlightsMorphemes, highlightedMorphemes.value).size > 0;
});
</script>

<template>
    <span
        :class="['morpheme', 'rounded', isHighlighted ? 'text-bg-primary' : '']"
        @mouseenter="highlightMorphemes(highlightsMorphemes)"
        @mouseleave="highlightMorphemes(new Set())"
    ><Spelling escape :text="spelling" /></span>
</template>

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