Dialogs

Dialogs very easy to implement and practical to use in any case and need.

Alert

To generate a dialog we have the global function $vs.dialog the parameters to generate the dialog are

title: title of the dialogue - String
text: internal text of the dialog - String
color: color of the component - Colors, RGB, HEX
accept: function that executes the user accept the dialog - Function
cancel: function that executes the user to cancel the dialog (if it is a confirm type) - Function
type: determines the type of dialog (alert or confirm) - alert, confirm
buttonAccept: determines the type of accept button - Boolean
buttonCancel: determines the type of cancel button - Boolean

TIP

For Composition API, you can use inject to retrieve $vs :

import { inject } from 'vue'

const $vs = inject('$vs')

$vs.dialog({
  title: 'Dialog',
  text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
})

since vuesax3@^4.0.24

Confirm

If you need a dialog of type confirm you can do it just by changing the type as a parameter inside the main function.

TIP

To do some action when the user approves or confirms we have the property accept:myFunctionAccept.

Prompt

To add a dialog of type prompt we have a global function a completely independent component vs-prompt. This allows more flexibility with the input and ability to add any type of input and components.

TIP

The properties of the component are equivalent to those of the global function only with the vs before each property something like

function = color
component = vsColor

  <div slot="input">
    <input v-model="val" type="text" name="" value="">
  </div>

<template lang="html">
  <div class="centerx con-exemple-prompt">
    <!-- <vs-button @click="openPrompt" color="primary" type="border">Run prompt</vs-button> -->
    <div class="modelx">
      {{val==null?'null':val}}
    </div>
     <vs-button @click="activePrompt = true" color="primary" type="border">Run prompt</vs-button>
     <div class="modelx">
       {{valMultipe.value1}}
       {{valMultipe.value2}}
     </div>
     <vs-button @click="activePrompt2 = true" color="primary" type="border">Run prompt inputs</vs-button>

     <vs-prompt
      @cancel="val=''"
      @accept="acceptAlert"
      @close="close"
      v-model:active="activePrompt">
       <div class="con-exemple-prompt">
          Enter the security code
         <vs-input placeholder="Code" v-model="val"/>

         <vs-select
            class="selectExample"
            label="Figuras"
            v-model="select1"
            >
            <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="item,index in options1" />
          </vs-select>
       </div>
     </vs-prompt>

     <vs-prompt
      color="danger"
      @cancel="valMultipe.value1='',valMultipe.value2=''"
      @accept="acceptAlert"
      @close="close"
      :is-valid="validName"
      v-model:active="activePrompt2">
       <div class="con-exemple-prompt">
       Enter your first and last name to <b>continue</b>.
         <vs-input placeholder="Name" v-model="valMultipe.value1"/>
         <vs-input placeholder="Last Name" v-model="valMultipe.value2"/>

         <vs-alert :active="!validName" color="danger" icon="new_releases" >
           Fields can not be empty please enter the data
         </vs-alert>
       </div>
     </vs-prompt>
  </div>
</template>

<script>
export default {
  data(){
    return {
      select1:2,
      options1:[
        {text:'IT',value:0},
        {text:'Blade Runner',value:2},
        {text:'Thor Ragnarok',value:3},
      ],
      activePrompt:false,
      activePrompt2:false,
      val:'',
      valMultipe:{
        value1:'',
        value2:''
      },
    }
  },
  computed:{
    validName(){
      return (this.valMultipe.value1.length > 0 && this.valMultipe.value2.length > 0)
    }
  },
  methods:{
    acceptAlert(color){
      this.$vs.notify({
        color:'success',
        title:'Accept Selected',
        text:'Lorem ipsum dolor sit amet, consectetur'
      })
    },
    close(){
      this.$vs.notify({
        color:'danger',
        title:'Closed',
        text:'You close a dialog!'
      })
    },
  }
}
</script>

<style lang="stylus">
.con-exemple-prompt
  padding 10px;
  padding-bottom 0px;
  .vs-input
    width 100%
    margin-top 10px;
</style>

API #

Name	Type	Parameters	Description	default
active.sync	Boolean		Define if the dialog is active (visible).	false
title	String		Main title of the dialog.	Dialog
color	String		Dialog color and accept buttons.	primary
accept	function		function that is executed when the user approves the dialog.
cancel	function		Function that executes the user cancel the dialog.
close	function		function that is executed when the dialog as closed.
is-valid	Boolean		Determines if it is valid to be able to accept at the prompt.
buttons-hidden	Boolean		Determines if the component has hidden or visible buttons.	false
button-accept	type buttons		Change the type of botton for the accept.	false
button-cancel	type buttons		Change the type of botton for the cancel.	filled
accept-text	String		Change the text of the accept button.	Accept
cancel-text	String		Change the text of the cancel button.	Cancel
icon-pack	String	Icon Pack Class Name	Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.	material-icons
autoclose	Boolean		If false, the prompt will need to be closed manually in @accept/@cancel/@close. Allow the user to close the prompt after a delay, when he needs to, like after a web request.	true

# Dialogs

# Alert

# Confirm

# Prompt

Dialogs

Alert

Confirm

Prompt