# vue-lsi-util

[![npm version](https://img.shields.io/npm/v/vue-lsi-util.svg?style=flat-square)](https://www.npmjs.org/package/vue-lsi-util)
[![install size](https://packagephobia.now.sh/badge?p=vue-lsi-util)](https://packagephobia.now.sh/result?p=vue-lsi-util)
[![npm downloads](https://img.shields.io/npm/dm/vue-lsi-util.svg?style=flat-square)](http://npm-stat.com/charts.html?package=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")
```