npm package: @la-ots/pelican-vue-toast-notification
Description: Vue.js toast notification plugin, customized from https://github.com/ankurk91/vue-toast-notification
Author: LA-OTS
Latest version: 1.0.0

# Vue Toast Notification

Pelican Toast Notification

https://pelican.ots.la.gov/

## Installation

```bash
npm i @la-ots/pelican-vue-toast-notification
```

## Usage

```js
import Vue from 'vue';
import VueToast from '@la-ots/pelican-vue-toast-notification/src/index.js';
// Import one of the available themes
import '@la-ots/pelican-vue-toast-notification/src/themes/default/index.scss';
//or theme with icons
//import '@la-ots/pelican-vue-toast-notification/src/themes/sugar/index.scss';

Vue.use(VueToast);
//Vue.$toast.open({/* options */});
let instance = Vue.$toast.open('You did it!');

// Force dismiss specific toast
instance.dismiss();
// Dismiss all opened toast immediately
Vue.$toast.clear();
```

## Available options

The API methods accepts these options:

| Attribute        | Type                | Default              | Description      |
| :---             | :---:               | :---:                | :---             |
|  message         | String              | --                   |  Message text/html (required)   |
|  type            | String              | `success`            |  One of `success`, `info`, `warning`, `error`, `default`  |
|  position        | String              | `bottom-right`       |  One of `top`, `bottom`, `top-right`, `bottom-right`,`top-left`, `bottom-left`  |
|  duration        | Number              | `3000`               |  Visibility duration in milliseconds, set to `0` to keep toast visible    |
|  dismissible     | Boolean             | `true`               |  Allow user dismiss by clicking    |
|  onClick         | Function            | --                   |  Do something when user clicks    |
|  onDismiss       | Function            | --                   |  Do something after toast gets dismissed    |
|  queue           | Boolean             | `false`              |  Wait for existing to dismiss before showing new     |
|  pauseOnHover    | Boolean             | `true`               |  Pause the timer when mouse on over a toast    |

## API methods

### `Vue.$toast.open(options)`

This is generic method, you can use this method to make any kind of toast.

```js
// Can accept a message as string and apply rest of options from defaults
Vue.$toast.open('Howdy!');

// Can accept an Object of options
Vue.$toast.open({
    message: 'Something went wrong!',
    type: 'error',
    // all of other options may go here
});
```

### `Vue.$toast.success(message,?options)`

There are some proxy methods to make it more readable.

```js
Vue.$toast.success('Profile saved.', {
    // optional options Object
})
```

### `Vue.$toast.error(message,?options)`

### `Vue.$toast.warning(message,?options)`

### `Vue.$toast.info(message,?options)`

### `Vue.$toast.default(message,?options)`

## Global options

You can set options for all the instances during plugin initialization

```js
Vue.use(VueToast, {
    // One of the options
    position: 'top'
})
```

Further you can override option when creating new instances

```js
Vue.$toast.success('Order placed.', {
    // override the global option
    position: 'bottom'
})

## Run examples on your localhost

* Clone this repo
* Make sure you have node-js `>=16.9` and [pnpm](https://pnpm.io/) `>=7.2` pre-installed
* Install dependencies - `pnpm install`
* Run webpack dev server - `npm start`
* This should open the demo page in your default web browser

## Acknowledgements

* Buefy [Toast](https://buefy.org/documentation/toast) component
* ankurk91 [https://github.com/ankurk91/vue-toast-notification]

## License

[MIT](LICENSE.txt) License