PronounsPage/routes/nouns.vue

<template>
    <Page>
        <NounsNav />

        <h2>
            <Icon v="book" />
            <T>nouns.headerLonger</T>
        </h2>

        <section>
            <T>nouns.intro</T>

            <Share :title="$t('nouns.headerLong')" />
        </section>

        <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />

        <NounsExtra>
            <details v-if="$config.nouns.collapsable" ref="dictionarywrapper" class="border mb-3">
                <summary class="bg-light p-3" @click="$tRefs.collapsabledictionary?.loadNouns()">
                    <h4 class="h5 d-inline">
                        <Icon v="book" />
                        <T>nouns.dictionary</T>
                    </h4>
                </summary>
                <div class="border-top">
                    <Dictionary ref="collapsabledictionary" />
                </div>
            </details>
            <Dictionary v-else ref="dictionary" load />
        </NounsExtra>
    </Page>
</template>

<script lang="ts">
import { head } from '../src/helpers.ts';
import NounsNav from '../data/nouns/NounsNav.vue';
import NounsExtra from '../data/nouns/NounsExtra.vue';
import hash from '../plugins/hash.ts';
import type Dictionary from '../components/Dictionary.vue';

interface Refs {
    dictionarywrapper: HTMLDetailsElement | undefined;
    collapsabledictionary: InstanceType<typeof Dictionary> | undefined;
    dictionary: InstanceType<typeof Dictionary> | undefined;
}

export default hash.extend({
    components: { NounsNav, NounsExtra },
    head() {
        return head({
            title: this.$t('nouns.headerLonger'),
            description: this.$t('nouns.description'),
        }, this.$translator);
    },
    computed: {
        $tRefs(): Refs {
            return this.$refs as unknown as Refs;
        },
    },
    mounted() {
        this.handleHash(this.$config.nouns.hashNamespace || '', (filter) => {
            if (this.$tRefs.dictionarywrapper) {
                this.$tRefs.dictionarywrapper.open = true;
                this.$tRefs.collapsabledictionary?.setFilter(filter);
            } else {
                this.$tRefs.dictionary?.setFilter(filter);
            }
        });
    },
});
</script>