v-slim-dialog

v-slim-dialog

Slim Dialog for Vuejs

Installation

yarn add v-slim-dialog
# Or using npm
npm install v-slim-dialog --save

Usage

import Vue from 'vue'

import 'v-slim-dialog/dist/v-slim-dialog.css'
import SlimDialog from 'v-slim-dialog'

Vue.use(SlimDialog)

Options params

Name	Type	Required	Default value	Info
title	String	No		Title of modal
okLabel	String	No	OK	Label of button OK
cancelLabel	String	No	Cancel	Label of button cancel
size	String('sm'or'lg')	No		Size of modal
prompt	Object	No		Hash for prompt {value: '', invalidMessage: 'invalid!', component: VueComponent}

In your component

alert

//...
methods: {
  /**
   * @param String message
   * @param Object options default { title, okLabel = 'OK', size }
   */
  showAlert() {
    const options = {title: 'Info', size: 'sm'}
    this.$dialogs.alert('Your message', options)
    .then(res => {
      console.log(res) // {ok: true|false|undefined}
    })
  }
}
//...

confirm

//...
methods: {
  /**
   * @param String message
   * @param Object options default { title, cancelLabel = 'Cancel', okLabel = 'OK', size }
   */
  showConfirm() {
    const options = {title: 'Confirm?', cancelLabel: 'No'}
    this.$dialogs.confirm('Your message!', options)
    .then(res => {
      console.log(res) // {ok: true|false|undefined}
    })
  }

}
//...

prompt

//...
methods: {
  /**
   * @param String message
   * @param Object options default { title, okLabel = 'OK', size, prompt }
   */
  showPrompt() {
    const options = {title: 'Continue?', okLabel: 'Continue'}
    this.$dialogs.prompt('Your message!', options)
    .then(res => {
      console.log(res) // {value: 'user input', ok: true|false|undefined}
    })

    // with custom input prompt
    const options = {title: 'Continue?', prompt: {component: 'cpf-cnpj'}}
    this.$dialogs.prompt('Your message!', options)
    .then(res => {
      console.log(res) // {value: 'user input', ok: true|false|undefined}
    })

    // or
    import YourComponent from './YourComponent'
    const options = {title: 'Continue?', prompt: {component: YourComponent}}
    this.$dialogs.prompt('Your message!', options)
    .then(res => {
      console.log(res) // {value: 'user input', ok: true|false|undefined}
    })

  }

}
//...

Sample custom prompt Component

This is the default component if you do not report

<template>
  <input v-model='model'>
</template>

<script>
export default {
  props: {
    value: [Number, String]
  },

  computed: {
    model: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('input', v)
      }
    }
  },
  methods: {
    isValid() {
      return Boolean(String(this.model).trim())
    }
  },
  mounted() {
    this.$el.focus()
  }
}
</script>

Development

# install dependencies
yarn install

# build with minification
yarn release

# publish
bin/publish