PronounsPage/routes/nounTemplates.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']" />

        <section v-if="$config.nouns.templates?.filter" class="sticky-top">
            <div class="input-group mb-3 bg-white">
                <span class="input-group-text">
                    <Icon v="filter" />
                </span>
                <input ref="filter" v-model="filter" class="form-control border-primary" :placeholder="$t('crud.filterLong')">
                <button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $tRefs.filter?.focus()">
                    <Icon v="times" />
                </button>
            </div>
        </section>

        <NounTemplatesTable :filter="filter" />
    </Page>
</template>

<script lang="ts">
import Vue from 'vue';
import { head } from '../src/helpers.ts';

interface Refs {
    filter: HTMLInputElement | undefined;
}

export default Vue.extend({
    data() {
        return {
            filter: '',
        };
    },
    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;
        },
    },
});
</script>