PronounsPage/components/MorphemeWithPronunciation.vue

<script setup lang="ts">
import type { Pronoun, Example } from '~/src/classes.ts';
import { loadPronounExamples } from '~/src/data.ts';

const props = withDefaults(defineProps<{
    pronoun: Pronoun;
    morpheme: string;
    counter?: number;
    prepend?: string;
    prependPr?: string;
    append?: string;
    appendPr?: string;
    highlightsMorphemes?: Set<string>;
}>(), {
    counter: 0,
    prepend: '',
    prependPr: '',
    append: '',
    appendPr: '',
    highlightsMorphemes: (props) => {
        if (props.morpheme.startsWith('\'')) {
            return new Set([props.morpheme.substring(1)]);
        }
        return new Set([props.morpheme]);
    },
});

const examples = await loadPronounExamples();

const visibleExamples = computed((): Example[] => {
    return examples.filter((example) => {
        return example.requiredMorphemesPresent(props.pronoun, props.counter) &&
            [...props.highlightsMorphemes.values()].some((morpheme) => example.hasMorpheme(morpheme));
    });
});

const pronunciation = computed((): string | null => {
    const pronunciation = props.pronoun.getPronunciation(props.morpheme, props.counter);
    if (!props.pronoun.pronounceable || !pronunciation || pronunciation.startsWith('=')) {
        return null;
    }
    return `/${props.prependPr}${props.pronoun.getPronunciation(props.morpheme, props.counter)}${props.appendPr}/`;
});
</script>

<template>
    <Popover v-if="pronoun.getMorpheme(morpheme, counter)" resize>
        <Morpheme
            :pronoun="pronoun"
            :morpheme="morpheme"
            :counter="counter"
            :prepend="prepend"
            :append="append"
            :highlights-morphemes="highlightsMorphemes"
        />
        <Pronunciation v-if="pronunciation" :pronunciation="pronunciation" text />
        <template v-if="visibleExamples.length > 0" #content>
            <ul class="my-0 ps-3">
                <li v-for="example in visibleExamples" class="my-1">
                    <Example
                        :example="example"
                        :pronoun="pronoun"
                        :counter="counter"
                    />
                </li>
            </ul>
        </template>
    </Popover>
</template>