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

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>

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