PronounsPage/components/PronunciationInput.vue

<template>
    <div class="input-group input-group-sm w-auto">
        <span class="input-group-text">/</span>
        <input
            v-model="rawPronunciation"
            class="form-control mw-input"
            :placeholder="$t('profile.pronunciation.ipa')"
            maxlength="255"
        >
        <span class="input-group-text">/</span>
        <PronunciationSpeaker
            v-for="voice in voices"
            :key="voice"
            class="btn btn-sm rounded-start-0 btn-outline-secondary"
            :pronunciation="modelValue"
            :voice="voice"
        />
    </div>
</template>

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

import useConfig from '../composables/useConfig.ts';
import { escapePronunciationString, unescapePronunciationString } from '../src/helpers.ts';

export default defineComponent({
    props: {
        modelValue: { default: null, type: String as PropType<string | null> },
    },
    emits: ['update:modelValue'],
    setup() {
        return {
            config: useConfig(),
        };
    },
    computed: {
        rawPronunciation: {
            get(): string {
                if (this.modelValue) {
                    const phonemes = this.modelValue.substring(1, this.modelValue.length - 1);
                    return unescapePronunciationString(phonemes);
                } else {
                    return '';
                }
            },
            set(rawPronunciation: string) {
                let pronunciation;
                if (rawPronunciation) {
                    pronunciation = `/${escapePronunciationString(rawPronunciation)}/`;
                } else {
                    pronunciation = null;
                }

                this.$emit('update:modelValue', pronunciation);
            },
        },
        voices(): string[] {
            if (this.config.pronunciation?.enabled) {
                return Object.keys(this.config.pronunciation.voices);
            } else {
                return [];
            }
        },
    },
});
</script>