vue-lsi-util

Instalación:

Using npm:

npm install vue-lsi-util

En el package.json, en dependencies, cambiar la versión por:

"vue-lsi-util": "latest"

En el store, agregar a las importaciones:

import snackbar from 'vue-lsi-util/snackbar'
import loading from 'vue-lsi-util/loading'
import alertDialog from 'vue-lsi-util/alertDialog'
import sonidos from 'vue-lsi-util/sonidos'

En el store, agregar a modules:

snackbar, loading, alertDialog, sonidos

En el script de la App:

import LSIMensajes from 'vue-lsi-util'
import store from '@/store'

En el components de la App agregar:

LSIMensajes

En el template de la App:

<LSIMensajes />

Ejemplos de uso

snackbar (mensajes de error):

Para mostrarlo:

store.dispatch("snackbar/mostrar", "Mensaje de error")

loading (mensaje de carga):

Para mostrarlo:

store.dispatch("loading/mostrar", "Cargando datos...")

Para ocultarlo:

store.dispatch("loading/ocultar")

alertDialog (preguntas, o pedidos de confirmación)

Para mostrarlo:

store.dispatch("alertDialog/mostrar", payload)

Atributos posibles del payload:

  - titulo
  - mensaje (el ; se usa como separador de renglones y se reemplaza por <br>)
  - botonPrimario
  - botonSecundario
  - botonTerciario
  - callback

Ejemplo de uso (versión ultra resumida):

store.dispatch("alertDialog/mostrar", { mensaje: 'El proceso finalizó <b>exitosamente</b>' })

Ejemplo de uso (versión muy resumida):

store.dispatch("alertDialog/mostrar", 
    {   titulo: 'Proceso exitoso 👍', 
        mensaje: 'El proceso finalizó <b>exitosamente</b>'
    }
)

Ejemplo de uso (versión resumida):

store.dispatch("alertDialog/mostrar", 
    {   titulo: 'Proceso exitoso 👍', 
        mensaje: 'El proceso finalizó <b>exitosamente</b>', 
        botonPrimario: "Entendido"
    }
)

Ejemplo de uso (versión completa):

const textoPrimario="Si, borrarlo"
const textoSecundario="Lo voy a pensar"
const textoTerciario="OK, no lo borres"
const ad={
  titulo: 'Confirma la eliminación?',
  mensaje: 'Este proceso es <b>irreversible</b>;;Está <u>completamente seguro?</u>',
  botonPrimario: textoPrimario,
  botonSecundario: textoSecundario,
  botonTerciario: textoTerciario,
  callback: ((respuesta) => {
    if (respuesta==textoPrimario) {
      console.log("Presionó el botón primario")
    } else if (respuesta==textoSecundario) {
      console.log("Presionó el botón secundario")
    } else {
      console.log("Presionó el botón terciario")
    }
  })
}
store.dispatch("alertDialog/mostrar", ad)

sonidos (éxito o error):

store.dispatch("sonidos/exito")

Para ocultarlo:

store.dispatch("sonidos/error")