PronounsPage/components/nouns/NounsClassExample.vue

<script setup lang="ts">
import { loadNounsData } from '~/src/data.ts';
import { symbolsByNumeri } from '~/src/nouns.ts';
import type { NounClass, NounConvention, NounWord, Numerus } from '~/src/nouns.ts';

const props = withDefaults(defineProps<{
    nounClass: NounClass & { key: string };
    nounConvention: WithKey<NounConvention>;
    numerus?: Numerus;
}>(), {
    numerus: 'singular',
});

const nounsData = await loadNounsData();

if (nounsData === undefined) {
    throw new Error('nounsData is undefined');
}

const template = computed(() => props.nounConvention.templates[props.nounClass.key]);

const stem = computed(() => {
    if (!template.value) {
        return undefined;
    }
    return props.nounClass.exampleStems[template.value.stem ?? 'default'];
});

const word = computed((): NounWord | undefined => {
    if (!stem.value || !template.value) {
        return undefined;
    }
    return {
        spelling: stem.value + template.value.suffix,
        convention: props.nounConvention.key,
        declension: template.value.declension,
    };
});
</script>

<template>
    <div v-if="word" class="mb-3">
        <h5 class="h6">
            {{ symbolsByNumeri[numerus] }} <T>nouns.{{ numerus }}</T>
        </h5>
        <NounsDeclension :word open :numerus />
    </div>
</template>