PronounsPage/components/pronouns/PronounsMultipleGenerator.vue

<script setup lang="ts">
import { loadPronouns } from '~/src/data.ts';

const config = useConfig();
const pronouns = await loadPronouns(config);

const multiple = ref(config.pronouns.multiple ? config.pronouns.multiple.examples[0].split('&') : []);

const path = computed((): string | null => {
    if (!multiple.value.length) {
        return null;
    }

    return multiple.value.join('&');
});

const togglePronoun = (name: string): void => {
    const index = multiple.value.indexOf(name);
    if (index > -1) {
        multiple.value.splice(index, 1);
    } else {
        multiple.value.push(name);
    }
};
</script>

<template>
    <PronounsGenerator type="alt" :path="path">
        <div class="card-title">
            <ul class="list-inline d-inline mb-0">
                <template v-for="(pronoun, pronounName) in pronouns" :key="pronoun.canonicalName">
                    <li v-if="!pronoun.hidden" class="list-inline-item">
                        <button
                            type="button"
                            :class="['btn', multiple.includes(pronounName) ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
                            @click="togglePronoun(pronounName)"
                        >
                            <Spelling :text="pronoun.name('')" />
                        </button>
                    </li>
                </template>
            </ul>
        </div>
    </PronounsGenerator>
</template>