mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-22 12:03:25 -04:00
10180aa6a3
the #shared alias used by Nuxt cannot be easily disabled and to prevent breackage with jiti, we make use of it
37 lines
982 B
Vue
37 lines
982 B
Vue
<script setup lang="ts">
|
|
import { intersection } from '#shared/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>
|