PronounsPage/components/Term.vue

<script setup lang="ts">
import useConfig from '~/composables/useConfig.ts';
import { EventLevel } from '~/src/calendar/helpers.ts';
import type { Event } from '~/src/calendar/helpers.ts';
import type { TermsEntry } from '~/src/classes.ts';
import { getUrlForLocale } from '~/src/domain.ts';
import { buildImageUrl } from '~/src/helpers.ts';

const props = defineProps<{
    term: TermsEntry;
    categoryLink?: boolean;
    flags?: boolean;
    versions?: boolean;
    events?: Event[];
}>();

const emit = defineEmits<{
    filter: [category: string];
}>();

const config = useConfig();

const categoriesTexts = Object.fromEntries(config.terminology.categories?.map((category) => {
    return [category.key, category.text];
}) ?? []);

const versionsShown = ref(false);
const censusKeys = new Set([props.term.key, ...props.term.term].filter((x) => !!x).map((x) => x!.toLowerCase().replace(/ość$/, '_')));
</script>

<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" :key="category" class="list-inline-item">
                <a v-if="categoryLink" :href="`?category=${category}`" class="badge bg-primary text-white" @click.prevent="emit('filter', category)">
                    {{ categoriesTexts[category] }}
                </a>
                <span v-else class="badge bg-primary text-white">
                    {{ categoriesTexts[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
                    type="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>

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

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