useDropdown

• Recibirás la referencia del dropdown y dos funciones para controlar el dropdown.

Implementación del Composable:

export const useDropdown = () => {
  const showDropdown = ref(false);

  const handleDropdown = () => {
    showDropdown.value = !showDropdown.value;
  };

  const closeDropdown = () => {
    showDropdown.value = false;
  };

  return {
    showDropdown, // referencia
    handleDropdown, // cambia el estado de la referencia.
    closeDropdown, // cambia el estado de la referencia.
  };
};

Ejemplo de uso:

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

const { handleDropdown, closeDropdown, showDropdown } = useDropdown();

const currentLanguage = ref();

const switchLocale = (language: (typeof FLAGS)[number]) => {
  handleDropdown();
};
</script>
<template>
  <div
    :class="isMobile ? 'switchboards-down' : 'switchboards'"
    @click="handleDropdown"
    v-outside-click="closeDropdown"
  >
    <div class="switchboards__container">
      <UiButtonsLanguage
        :icon="currentLanguage.icon"
        :title="currentLanguage.name"
      />
    </div>
    <Transition name="dropdown-transition">
      <LanguageDropdown
        v-if="showDropdown"
        :flags="FLAGS"
        @switch-locale="switchLocale"
      >
      </LanguageDropdown>
    </Transition>
  </div>
</template>