PronounsPage/components/NameCount.vue

<template>
    <ul>
        <template v-for="version in versions">
            <li v-for="(ordinalDesc, ordinal) in config.names.countOrdinal" class="my-1">
                <strong>
                    {{ version }}
                    <small v-if="ordinalDesc">({{ ordinalDesc }})</small>:
                </strong>
                <span
                    v-for="(icon, key) in config.names.countSex"
                    :key="key"
                    class="badge bg-light text-dark badge-big border mx-1"
                >
                    <Icon :v="icon" />
                    {{ count(version, key, ordinal) }}
                </span>
            </li>
        </template>
    </ul>
</template>

<script>
import useConfig from '../composables/useConfig.ts';
import nameCount from '../data/names/nameCount.js';

export default {
    props: {
        name: { required: true },
    },
    setup() {
        return {
            config: useConfig(),
        };
    },
    computed: {
        versions() {
            return this.name.split('/');
        },
    },
    methods: {
        count(name, sex, ordinal) {
            const counts = nameCount[name.toUpperCase()];
            if (counts === undefined) {
                return 0;
            }

            return counts[sex][parseInt(ordinal) - 1];
        },
    },
};
</script>

<style lang="scss" scoped>
    .badge-big {
        font-size: 1em;
        font-weight: normal;
    }
</style>