Dialog

A dialog is the most intrusive type of popover. They can be used to prompt the user for complex actions.

Create a dialog

To create a dialog, create a bt-dialog component, and give it an id:

<bt-dialog id="my-dialog">
    The dialog content goes here.
</bt-dialog>

You can then customize its content via three slots:

• header: a non-scrollable section at the top of the dialog,
• default: a scrollable area to use for the main content,
• footer: a non-scrollable area at the bottom of the dialog.

Here is a classic agreement dialog:

<bt-dialog id="agreement" :close-by-mask="false" :close-on-escape="false" :show-close="false">
    <template #header>Terms and Conditions</template>
    <template #footer="{close}">
        <bt-button variant="light link" @click="btShowAlert('You must agree 😛!', 'danger', 3000)">I don't agree</bt-button>
        <bt-button @click="close()">I agree</bt-button>
    </template>

    <bt-alert>Please read these terms and conditions carefully before using our Service.</bt-alert>
    <h2>Interpretation and Definitions</h2>
    [...]
</bt-dialog>

Show the dialog

Now that you have a dialog in your page, you have two ways of showing it.

Global function

The easiest way is to call the global btShowDialog method exposed to all Vue apps created with the VueBuilder:

<bt-button @click="btShowDialog('my-dialog-id')">Show dialog</bt-button>

TIP

The dialog and the button don't have to be part of the same app for this to work.

WARNING

For this to work you must have included the dialog service in your app. It is included automatically when you do:

import "@banquette/vue-ui/dialog";

Using the service

The btShowDialog function simply calls the DialogService for you. Calling it manually looks like this:

import { Injector } from "@banquette/dependency-injection";
import { DialogService } from "@banquette/vue-ui/dialog";

Injector.Get(DialogService).show('my-dialog-id');

Manually

You can also manually control the visibility via the visible prop. It also supports v-model, as demonstrated below:

Live demo

Passing data

For each method we've seen previously, you can add as second argument an object that will be passed to the dialog's content via the bag attribute:

<bt-button @click="btShowDialog('user-edit', {id: 12})">Edit user n°12</bt-button>

<bt-dialog id="user-edit" v-slot="{bag}">
    I'll edit the user id {{ bag.id }}.
</bt-dialog>

TIP

The bag is available in each slot (header, default and footer).

Draggable dialog

You can make the dialog draggable by adding a draggable attribute to its declaration:

<bt-dialog id="draggable-dialog" draggable>
    <template #header>Drag me from the header!</template>
    <p>
        You can drag me around.
    </p>
</bt-dialog>

Non modal dialog

By default, all dialogs are modal, but you change that by setting the modal prop to false:

<bt-dialog 
    id="non-modal-dialog"
    :modal="false" 
    :close-by-mask="false" 
    :close-on-escape="false" 
    :lock-scroll="false"
    draggable
>
    <template #header>You can drag me</template>
    <template #footer="{close}"><bt-button @click="close()">Close</bt-button></template>
    <p>
        I'm not a <b>modal</b> dialog.<br/>
        You can still interact with the rest of the page.
    </p>
    <p>
        Also:
        <ul>
            <li>You can't close me by clicking outside.</li>
            <li>You can't close me by pressing escape.</li>
        </ul>
    </p>
</bt-dialog>

Props

Method	Description	Default
visible	Bi-directional visibility control. Can be used with v-model: v-model:visible="...".	false
id	Unique id of the dialog, used to show/hide the dialog using the DialogService.	null
lock-scroll	If true, the scroll on the body is disabled while the dialog is opened.	true
modal	If true, a mask is shown behind the dialog to prevent interactions with the elements behind.	true
close-by-mask	If true, the modal will close if the mask is clicked.	true
close-on-escape	If true, the modal will close if the user press the "Escape" key.	true
teleport	An HTML element or selector to teleport the dialog into.	'body'
destroy-on-close	If true, the content of the dialog is destroyed when the dialog is hidden. If false, the content is only hidden. In either case, the content will only render once the dialog is first shown.	false
show-close	If true, show a close button in the header of the dialog.	true
draggable	If true, the dialog can be dragged by its header.	false

Slots

Name	Description
default	Contain the body of the dialog. Props: close : a function that you can call to close the dialog. bag : an empty object you can use to store variables from the template.
header	Content of the header. If undefined, no header is shown. Props: close : a function that you can call to close the dialog. bag : an empty object you can use to store variables from the template.
footer	Content of the footer. If undefined, no footer is shown. Props: close : a function that you can call to close the dialog. bag : an empty object you can use to store variables from the template.

Theming

Below the list of all CSS variables and selectors available to customize the appearance of the component. If you're not familiar on how the theming works, please refer to the VueThemes documentation.

Variables

Variable	Default	Comment
background	var(--bt-color-white)	-
borderColor	var(--bt-color-gray-50)	-
borderStyle	var(--bt-border-style-base)	-
borderWidth	var(--bt-border-width-base)	-
borderRadius	var(--bt-border-radius-base)	-
shadow	var(--bt-shadow-dialog)	-
headerFontFamily	var(--bt-font-family-base)	-
headerFontSize	var(--bt-font-size-lg)	-
headerFontWeight	var(--bt-font-weight-semibold)	-
headerTextColor	var(--bt-text-color-base)	-
minWidth	30%	-
minHeight	none	-
maxWidth	80%	-
maxHeight	50vh	-

Selectors

Name	Comment
root	The root element.
header	Container of the header.
body	Container of the body.
footer	Container of the footer.
closeIcon	Close icon of the header.

Examples:

cssSelectors: {
    root: {
        border: '...'
    },
    header: {
        background: '...'
    }
}