Vue-jackbox NPM

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>