PronounsPage/components/pronouns/PronounsGrammarTables.vue

<script setup lang="ts">
import type { Pronoun, PronounExample } from '~/src/classes.ts';
import type { Example } from '~/src/language/examples.ts';
import type { GrammarTableDefinition } from '~/src/language/grammarTables.ts';

const props = defineProps<{
    pronoun: Pronoun;
    counter: number;
    pronounExamples: PronounExample[];
    comprehensive: boolean;
}>();

const config = useConfig();

const grammarTables = computed((): (GrammarTableDefinition | string)[] => {
    if (!config.pronouns.grammarTables) {
        return [];
    }
    if (Array.isArray(config.pronouns.grammarTables)) {
        return config.pronouns.grammarTables;
    }
    return props.comprehensive ? config.pronouns.grammarTables.comprehensive : config.pronouns.grammarTables.simple;
});

const exampleValues = computed(() => props.pronoun.toExampleValues(props.counter));

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

<template>
    <section v-if="grammarTables.length > 0">
        <h2 class="h4">
            <Icon v="spell-check" />
            <T>pronouns.grammarTable</T><T>quotation.colon</T>
        </h2>
        <template
            v-for="(grammarTable, t) in grammarTables"
            :key="t"
        >
            <p v-if="typeof grammarTable === 'string'" class="small">
                <LinkedText :text="grammarTable" />
            </p>
            <GrammarTable
                v-else
                :grammar-table="grammarTable"
                :example-values
                :examples
            />
        </template>
    </section>
</template>