PronounsPage/components/pronouns/PronounsMorphemeWithPronunciation.vue

<script setup lang="ts">
import type { Pronoun } from '~/src/classes.ts';
import { loadPronounExamples } from '~/src/data.ts';
import type { Example } from '~/src/language/examples.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) => {
        return new Set([props.morpheme]);
    },
});

const pronounExamples = await loadPronounExamples();

const examples = computed((): Example[] => {
    return pronounExamples.map((example) => example.example(props.pronoun, props.counter));
});
</script>

<template>
    <MorphemeWithPronunciation
        :morpheme
        :example-values="pronoun.toExampleValues(counter)"
        :prefix="{ spelling: prepend, pronunciation: prependPr }"
        :suffix="{ spelling: append, pronunciation: appendPr }"
        :highlights-morphemes
        :examples
    />
</template>