useModal

Este composable permite controlar la apertura, cierre y gestión de datos en un modal dentro de tu aplicación Vue.

Implementación del Composable:

export function useModal() {
  const showModal = ref(false);
  const dataModal = ref();

  function useOpenModal() {
    showModal.value = true;
  }

  function useCloseModal() {
    showModal.value = false;
  }

  function useOpenModalWithData<T>(data: T) {
    dataModal.value = data;
    useOpenModal();
  }

  const useAutoCloseModal = () => {
    showModal.value = true;
    setTimeout(() => {
      showModal.value = false;
    }, 5000);
  };

  function useOpenScrollableModal() {
    const root = document.documentElement.style;
    root.overflow = "hidden";
    useOpenModal();
  }

  function useCloseScrollableModal() {
    const root = document.documentElement.style;
    root.overflow = "auto";
    useCloseModal();
  }

  return {
    dataModal, // Datos que serán pasados al modal cuando se abra.
    showModal, // Estado reactivo que indica si el modal está abierto.
    useAutoCloseModal, // Abre el modal y lo cierra automáticamente después de 5 segundos.
    useCloseModal, // Cierra el modal.
    useOpenModal, // Abre el modal sin datos adicionales.
    useOpenModalWithData, // Abre el modal y pasa datos a dataModal.
    useOpenScrollableModal, // Abre el modal y bloquea el scroll del fondo.
    useCloseScrollableModal, // Cierra el modal y restablece el scroll del fondo.
  };
}

Implementación del Script:

const {
  showModal,
  dataModal,
  useOpenModal,
  useCloseModal,
  useOpenModalWithData,
  useAutoCloseModal,
  useOpenScrollableModal,
  useCloseScrollableModal,
} = useModal();

Implementación del Template:

<template>
  <button @click="useOpenModal">Abrir modal</button>
  <button @click="() => useOpenModalWithData({ message: 'Hola Mundo' })">
    Abrir con datos
  </button>
  <button @click="useAutoCloseModal">Abrir auto-cierre</button>

  <UiModal v-if="showModal" @close="useCloseModal">
    <template #default>
      <p>{{ dataModal?.message }}</p>
    </template>
  </UiModal>
</template>