PronounsPage/components/Term.vue

<template>
    <div>
        <p v-for="(p, i) in term.definition.split('\n\n')" class="mb-1">
            <template v-if="i === 0">
                <span v-if="term.key && $isGranted('terms')" class="badge bg-primary text-white">
                    <T>sources.submit.key</T><T>quotation.colon</T>
                    {{ term.key }}
                </span>
                <strong><LinkedTextMultiple :texts="term.term" noicons /></strong>
                <span v-if="term.original.length">(<LinkedTextMultiple :texts="term.original" glue="; " noicons />)</span>
                –
            </template>
            <LinkedText :text="p" noicons />
        </p>

        <ul class="list-inline mb-2">
            <li v-for="category in term.categories" class="list-inline-item">
                <a v-if="categoryLink" :href="`?category=${category}`" class="badge bg-primary text-white" @click.prevent="$emit('filter', category)">
                    {{ category }}
                </a>
                <span v-else class="badge bg-primary text-white">
                    {{ category }}
                </span>
            </li>
        </ul>

        <p v-if="flags && (term.flags.length || term.images.length)" class="text-center">
            <img v-for="flag in term.flags" :src="`/flags/${flag}.png`" class="flag m-1" loading="lazy">
            <img
                v-for="image in term.images"
                :src="buildImageUrl($config.public.cloudfront, image, 'flag')"
                class="flag m-1"
                loading="lazy"
            >
        </p>

        <div v-if="config.calendar?.enabled && events && events.length" class="alert">
            <p class="mb-2">
                <Icon v="calendar-star" />
                <nuxt-link :to="{ name: 'calendar' }">
                    <T>calendar.headerLong</T>
                </nuxt-link>:
            </p>
            <ul class="list-unstyled">
                <li v-for="event in events" class="mb-2 ms-3">
                    <CalendarEvent :event="event" ics />
                    <span v-if="$te(`calendar.events.${event.name}___timeDescription`)">
                        <T>calendar.celebrating_custom</T>
                        <T>calendar.events.{{ event.name }}___timeDescription</T>
                        <T>calendar.celebrating_customAfter</T>
                    </span>
                    <span v-else-if="event.level === EventLevel.Day">
                        <T>calendar.celebrating_day</T>
                        <T :params="{ day: event.getRange() }">calendar.dates.{{ event.month }}</T>
                        <T>calendar.celebrating_dayAfter</T>
                    </span>
                    <span v-else-if="event.level === EventLevel.Week">
                        <T>calendar.celebrating_week</T>
                        <T :params="{ day: event.getRange() }">calendar.dates.{{ event.month }}</T>
                        <T>calendar.celebrating_weekAfter</T>
                    </span>
                    <span v-else-if="event.level === EventLevel.Month">
                        <T>calendar.celebrating_month</T>
                        <T v-if="$te('calendar.months_abl')">calendar.months_abl.{{ event.month }}</T>
                        <T v-else>calendar.months.{{ event.month }}</T>
                        <T>calendar.celebrating_monthAfter</T>
                    </span>
                </li>
            </ul>
        </div>

        <div v-for="t in censusKeys">
            <CensusStat
                v-for="potentialType in ['labelsGender', 'labelsSexuality', 'labelsRomantic']"
                :key="potentialType"
                :type="potentialType"
                :item="t"
            />
        </div>

        <div v-if="versions && term.versions.length" class="my-3 mx-2">
            <p>
                <button :class="['btn', versionsShown ? 'btn-primary' : 'btn-outline-primary', 'btn-sm']" @click="versionsShown = !versionsShown">
                    <Icon v="language" />
                    <T>sources.otherVersions</T>
                    <Icon :v="versionsShown ? 'caret-up' : 'caret-down'" />
                </button>
            </p>
            <ul v-if="versionsShown">
                <template v-for="version in term.versions">
                    <li v-if="$locales[version.locale] !== undefined">
                        <h4 class="h6 mb-2">
                            <strong>
                                <a
                                    :href="getUrlForLocale(version.locale)"
                                    target="_blank"
                                    rel="noopener"
                                >{{ $locales[version.locale].fullName }}</a>:
                            </strong>
                        </h4>
                        <Term :term="version" />
                    </li>
                </template>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue';

import useConfig from '../composables/useConfig.ts';
import { EventLevel } from '../src/calendar/helpers.ts';
import type { Event } from '../src/calendar/helpers.ts';
import { TermsEntry } from '../src/classes.ts';
import { buildImageUrl } from '../src/helpers.ts';

import { getUrlForLocale } from '~/src/domain.ts';

export default defineComponent({
    props: {
        term: { required: true, type: TermsEntry },
        categoryLink: { type: Boolean },
        flags: { type: Boolean },
        versions: { type: Boolean },
        events: { default: undefined, type: Array as PropType<Event[] | undefined> },
    },
    emits: ['filter'],
    setup() {
        return {
            config: useConfig(),
        };
    },
    data() {
        return {
            versionsShown: false,
            EventLevel,
            censusKeys: new Set([this.term.key, ...this.term.term].filter((x) => !!x).map((x) => x!.toLowerCase().replace(/ość$/, '_'))),
        };
    },
    methods: { getUrlForLocale, buildImageUrl },
});
</script>

<style scoped lang="scss">
@import "assets/variables";

.flag {
  height: 6 * $spacer;
}
</style>