vue-jackbox

Requirements

• Vue.js 2.x

Installation

# npm
$ npm install vue-jackbox

# yarn
$ yarn add vue-jackbox

Try it

• Demo

API

Available methods inside a VueJS component

The same parameters apply to all the methods in $alert expect the method hide and clearDefault

Parameter | Type |Default| Description --------- | ---- | ------|----------- title | HTML/string | empty | The dialog title message | HTML/string | empty | The dialog message question | HTML/string | empty | The dialog question placeholder | string | empty | Input placeholder for prompt value | string | empty | Input value for prompt label | HTML/string | empty | Input label for prompt centerButtons | boolean | false | Center action buttons in dialog footer cancelOnBackdrop | boolean | false | Cancel dialog on backdrop click showBackdrop | boolean | true | Option to display backdrop cancelOnEsc | boolean | true | Cancel dialog on esc duration | number | -1 | The duration for which the alert will be shown, -1 = infinite ok | object | {text: 'Continue', action: null} | Text and callback on ok button. cancel | object | {text: 'Cancel', action: null} | Text and callback on cancel button. state | string | information | Sets color on dialog, options: information, critical, warning ,success buttons | string[] | ['cancel', 'ok'] | Select which buttons to show, you can add a custom button, but you will also need to add property for that. icon | HTML/String | ! | What icon to display, can me svg, text or img tag

Adding custom buttons

this.$alert({
  title: 'This is an test alert',
  message: 'I´m just testing',
  retry: { text: 'Retry', className: 'jb-dialog__button--action', action: () => { this.doRetry(); } },
  buttons: ['cancel', 'retry', 'ok'],
})

If any of the values is not present on the method call then the default values will be used.

All dialogs use the same code in the background, so all options are always available, the diffrent methods are just short hands. (Except for the prompt, that is the only one that supports the input.)

Show an alert

this.$alert({
  title: 'This is an test alert',
  message: 'I´m just testing'
})

Show an confirm

this.$confirm({
  title: 'Unsaved changes',
  message: 'You have made changes that are not yet saved, if you continue these will get lost.',
  question: 'Do you want to discard changes and continue?',
  state: 'critical',
  ok: {
    action: () => { this.$emit('close'); },
  },
});

Show an prompt

this.$prompt({
  title: 'Change name',
  message: 'Enter the new first name',
  placeholder: 'Enter first name',
  value: this.firstName,
  ok: {
    action: (value) => { this.firstName = value; }
  }
})

Show an notification

this.$alert({
  title: 'Name changed!',
  message: `Your name has successfully been changed to <strong>${this.firstName}</strong>`,
  state: 'success'
})

Usage

main.js

import Vue from 'vue'
import VueJackBox from 'vue-jackbox'
import App from './App'

Vue.use(VueJackBox)

And import stylesheets manually:

import 'vue-jackbox/dist/vue-jackbox.css';

App.vue

<template>
    <div id="app"></div>
</template>

<script>

export default {
  mounted () {
    this.$notification(
        {
          title: 'App loaded',
          text: 'The app has loaded successfully!',
          state: 'success'
        });
  }
}
</script>

<style>
</style>

License

The MIT License