useCountries

• Este composable te devuelve un array de arrays con [clave, traduccion, valor][], ya que para los formularios, en los paises:

  • comparar su clave para actualizar el codigo de numero de telefono [clave]
  • el dropdown tiene que mostrar la traduccion [traduccion]
  • usar un valor que quiera pasar en el formulario [valor]

Implementación del Composable:

import { COUNTRIES_AND_PHONE } from "@/constants/countriesPhone"; // Lista de países con código y nombre en español

export function useCountries() {
  const { messages, locale } = useI18n(); // Accede a las traducciones actuales y al idioma activo

  // Computed que devuelve una lista de países traducidos
  const countries = computed(() => {
    const allMessages = messages.value[locale.value]; // Obtiene los mensajes del idioma actual
    const translatedCountries = allMessages?.countries ?? {}; // Extrae las traducciones de países o un objeto vacío por defecto

    // Mapea los códigos de país a una tupla: [código, nombre traducido, nombre en español]
    return Object.entries(translatedCountries).map(([code, translatedName]) => {
      const spanishName =
        COUNTRIES_AND_PHONE.find((c) => c.code === code)?.name ?? // Busca el nombre en español por código
        translatedName; // Si no lo encuentra, usa el nombre traducido
      return [code, translatedName, spanishName]; // Devuelve la tupla
    });
  });

  return countries; // Devuelve el array computado de países
}

Ejemplo de uso en un formulario que use SelectField:

SelectField maneja automaticamente arrays de items con llave, traduccion y valor.

<script setup lang="ts">
//imports necesarios

const { data: contactFormLocale } = await useLocales<BaseFormLocales>(
  "contact-form"
);
const countries = useCountries(); // USO DEL COMPOSABLE
const {
  formData: contact,
  codes,
  invalidFields,
  validationMessages,
} = useForm<ContactData, BaseFormLocales>(
  {
    // otros campos
    country: "",
    code: "",
  },
  shallowRef(contactFormLocale)
);

const contactProcess = async () => {
  const { country, code: phoneCode } = contact;

  try {
    const { success } = await sendZohoForm(visibleVertical, "contact", {
      pais: country[2], // paso el valor
      codigoTelefono: phoneCode,
    });

    if (!success) {
      showAlert.value = true;
      message.value = contactFormLocale.api_error;
    }
  } catch {
    showAlert.value = true;
    message.value = contactFormLocale.api_error;
  }
};
</script>

<template>
  <form
    class="contact-form"
    @submit.prevent="contactProcess"
    v-if="contactFormLocale"
  >
    <!-- se pasa el array de countries recibido por es useCountries -->
    <UiFormSelectField
      class="contact-form__grid-item"
      auto-complete="country-name"
      :feedback="validationMessages.get('country')"
      input-id="country"
      :label="contactFormLocale?.country"
      :options="countries"
      v-model.trim="contact.country"
    ></UiFormSelectField>
    <UiFormSelectField
      class="contact-form__grid-item--two"
      auto-complete="tel-country-code"
      input-id="code"
      :label="contactFormLocale?.phone_code"
      :options="codes ?? []"
      v-model.trim="contact.code"
    ></UiFormSelectField>
    <!-- ... demas componentes de formulario -->
  </form>
</template>

<style scoped lang="scss">
//..estilos
</style>

Ejemplo de uso generico en componente de ejemplo CountrySelect:

<script setup lang="ts">
import { useCountries } from "@/composables/useCountries";

const countries = useCountries();
</script>

<template>
  <div>
    <label for="country">Selecciona un país:</label>
    <select id="country" class="border p-2 rounded mt-2">
      <option
        v-for="[code, translatedName, spanishName] in countries"
        :key="code"
        :value="code"
      >
        {{ translatedName }} ({{ spanishName }})
      </option>
    </select>
  </div>
</template>