PronounsPage/components/FlagList.vue

<script setup lang="ts">
import type { Pronoun } from '~/src/classes.ts';
import { buildFlags } from '~/src/flags.ts';
import type { Flag } from '~/src/flags.ts';

const props = withDefaults(defineProps<{
    mainPronoun?: Pronoun | null;
}>(), {
    mainPronoun: null,
});

const modelValue = defineModel<string[]>({ required: true });

const config = useConfig();
const { $translateForPronoun: translateForPronoun } = useNuxtApp();

const allFlags = computed((): Record<string, Flag> => {
    return buildFlags(config.locale);
});

const allFlagsOptions = computed((): Record<string, string> => {
    const entries = Object.entries(allFlags.value).map(([flagName, flag]) => {
        return [flagName, `${translateForPronoun(flag.display, props.mainPronoun)}|${flag.display}`];
    });
    entries.sort((a, b) => a[1].localeCompare(b[1]));
    return Object.fromEntries(entries);
});
</script>

<template>
    <ButtonList v-slot="s" v-model="modelValue" :options="allFlagsOptions">
        <Flag
            :name="s.desc.split('|')[0]"
            :alt="s.desc.split('|')[1]"
            :img="`/flags/${s.v}.png`"
            :asterisk="allFlags[s.v].asterisk"
        />
    </ButtonList>
</template>