vue-greenborn-modal-manager

vue-greenborn-modal-manager

Gestor de modales genérico y autocontenido para Vue 3, extraído y genericizado del ModalsManager de la aplicación SGI. Soporta modales anidados, pasaje de parámetros, componentes compuestos (body/header/footer), alertas y confirmaciones. Sin Pinia (estado vía composable/singleton de módulo) y sin dependencias de UI (CSS propio que reemplaza Bootstrap + PrimeVue).

Instalación

npm install vue-greenborn-modal-manager

Uso básico

1. Monta el contenedor una sola vez (en la raíz de la app)

<!-- App.vue -->
<template>
  <Header />
  <RouterView />
  <ModalContainer />
</template>

<script>
import { ModalContainer } from 'vue-greenborn-modal-manager'
import 'vue-greenborn-modal-manager/style.css'

export default { components: { ModalContainer } }
</script>

2. Abre un modal desde cualquier componente

import { useModal } from 'vue-greenborn-modal-manager'

const { mostrar_modal, ocultar_modal, mostrar_alerta, mostrar_confirm } = useModal()

// Componente simple → se usa como body
mostrar_modal(FormImputar, 'Imputación', { modelo }, { size: 'full' })

// Componente compuesto (body + header + footer opcionales)
mostrar_modal(
  { body: formDatos, header: FormDatosHeader, footer: Botonera },
  'Título',
  { _callback_guardar: async (p) => { /* ... */ } },
  { size: 'md' }
)

// Helpers
mostrar_alerta('Operación exitosa')
mostrar_confirm({
  title: 'Atención',
  text: '¿Eliminar el registro?',
  confirmar_accion: () => borrar(),
  no_confirma_accion: () => {},
  severity_confirmar: 'danger', // 'success' | 'danger' | 'warn' | 'primary' | 'secondary'
})

API

useModal()

Devuelve el estado y funciones compartidos (singleton de módulo). Las funciones:

mostrar_modal — parámetros inyectados

Al cuerpo/header/footer se les pasa :parametros con el objeto que definiste más dos claves reservadas:

• parametros._modal_cod — identificador para ocultar_modal().
• parametros._config_modal — la configuración del modal.

Un canal típico para que el body exponga su función de guardar al footer:

// call site
const modalState = reactive({ guardar: null })
mostrar_modal({ body, footer }, 'Título', { _modalState: modalState }, { size: 'md' })

// body: registra su handler
if (props.parametros._modalState) props.parametros._modalState.guardar = guardar

// footer: lo invoca
<button @click="parametros._modalState?.guardar?.()">Guardar</button>

config_modal

Redimensionado manual

Todo modal es redimensionable por defecto (salvo resizable: false, o los helpers mostrar_alerta/mostrar_confirm, que son de tamaño fijo). Aparecen tres zonas de agarre en los bordes del diálogo, igual que en una ventana de escritorio:

• Borde derecho: redimensiona sólo el ancho (cursor: ew-resize).
• Borde inferior: redimensiona sólo el alto (cursor: ns-resize).
• Esquina inferior derecha: redimensiona ancho y alto a la vez (cursor: nwse-resize).

El tamaño manual tiene prioridad sobre size y styles.width/styles.height una vez que el usuario redimensiona el modal, y se descarta automáticamente al cerrarlo (la próxima apertura vuelve al tamaño definido por config_modal). Está acotado a un mínimo de 280×160px y a los mismos máximos que el CSS (95vw / 92vh).

Modales anidados

Basta con llamar a mostrar_modal() desde el body de otro modal: la pila mantiene hasta MAX_MODALS_LVLS = 20 slots y cada capa se apila con mayor z-index. Cerrar el hijo no afecta al padre.

z-index (apilamiento)

La pila de modales se monta en Teleport to="body" y siempre usa una base de z-index alta para sobreponerse al resto de la interfaz (navbar, sidebar, dropdowns, etc.):

• La base por defecto es Z_INDEX_BASE = 2000, por encima de Bootstrap (1050) y PrimeVue (1100).
• Cada capa apilada suma 1 a la base: la primera usa 2000, la segunda 2001, y así hasta 2000 + 19.

Si tu aplicación necesita una base distinta, ajústala en caliente desde cualquier componente sin tocar la librería:

import { useModal } from 'vue-greenborn-modal-manager'

const { set_z_index_base } = useModal()
set_z_index_base(5000) // todos los modales se re-apilan al instante

Si algún elemento de tu app (p. ej. un toast o overlay de debug) usa z-index: 9999, súbelo en consecuencia o baja la base con set_z_index_base() para que los modales sigan quedando por encima.

Estilos propios

La hoja style.css define todo el tema (overlay, panel, header/body/footer, botones y escala de anchos) y replica las severidades de PrimeVue con las clases gmm-btn-*:

• gmm-btn-primary, gmm-btn-secondary, gmm-btn-success, gmm-btn-danger, gmm-btn-warn.

Puedes sobreescribirlas en tu proyecto apuntando a las mismas clases.

Desarrollo

npm install
npm run dev      # demo en http://localhost:5175
npm run build    # compila lib (ESM + UMD)

Licencia

MIT