Dialog

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

Modal dialogs are used in Kirby's Panel in many places for quick actions like adding new pages, changing titles, etc. that don't necessarily need a full new view. You can create your own modals for your fields and other plugins or reuse our existing modals to invoke typical Panel actions.

Props

Prop	Type	Default	Description
autofocus	`boolean`	true
cancelButton	`string`\|`boolean`	true
icon	`string`	"check"	The icon type for the submit button
size	`string` Supported values: small, medium, large	"default"	The modal size can be adjusted with the size prop
submitButton	`string`\|`boolean`	true	The text for the submit button
theme	`string` Supported values: positive, negative	–	The theme of the submit button
visible	`boolean`	–	Dialogs are only openend on demand with the `open()` method. If you need a dialog that's visible on creation, you can set the `visible` prop

Methods

Method	Parameters	Description
cancel	–	Triggers the `@cancel` event and closes the dialog.
close	–	Triggers the `@close` event and closes the dialog.
error	`string` message	Shows the error notification bar in the dialog with the given message
open	–	Opens the dialog and triggers the `@open` event
success	`string` message	Shows the success notification bar in the dialog with the given message

Events

Event	Description	Passes
cancel	This event is triggered whenever the cancel button or the backdrop is clicked.	–
close	This event is triggered when the dialog is being closed. This happens independently from the cancel event.	–
open	This event is triggered as soon as the dialog opens.	–
ready		–
submit	This event is triggered when the submit button is clicked.	–

Slots

Slot	Description
default
footer

Examples

Simple

By default, the dialog component is coming with cancel and submit buttons in the footer. You can control those with the dialog props.

<k-button @click="$refs.dialog.open()">Open Dialog</k-button>

<k-dialog
  ref="dialog"
  submitButton="Delete"
  theme="negative"
  icon="trash"
>
  <k-text>
    Do you really want to delete the user:<br>
    <strong>bastian</strong>?
  </k-text>
</k-dialog>

Detailed

If you need more control over the available buttons in the footer, or you want to create a dialog without buttons, you can overwrite the footer slot.

<k-button @click="$refs.dialog.open()">Open Dialog</k-button>

<k-dialog ref="dialog">
  <template>
    <k-text>
      Do you really want to delete the user:<br>
      <strong>bastian</strong>?
    </k-text>
  </template>

  <template slot="footer">
    <k-button-group>
      <k-button icon="times" @click="$refs.dialog.close()">Cancel</k-button>
      <k-button icon="trash" theme="negative" @click="$refs.dialog.close()">Delete</k-button>
    </k-button-group>
  </template>
</k-dialog>

Forms in dialogs

A dialog can easily be combined with a form by using the k-form component. It's important though to setup the submit events correctly.

<template>
  <k-dialog ref="dialog" @submit="$refs.form.submit()">
    <k-form
      ref="form"
      v-model="page"
      :fields="{
        title: {
          label: 'Title',
          type: 'text'
        }
      }"
      @submit="submit"
    />
  </k-dialog>
</template>

<script>
export default {
  data() {
    return {
      page: {
        title: null
      }
    }
  },
  methods: {
    submit() {
      this.$api
        .patch('/some/endpoint', { title: this.page.title })
        .then(() => {
          this.$refs.dialog.close();
        })
        .catch(() => {
          this.error("The title could not be saved");
        });
    }
  }
}
</script>

As you can see in the example, the @submit event of the dialog is used to trigger the submit() method of the form. The @submit event of the form is then used to actually trigger the defined submit method.

In the submit method the API call is done. On success, the dialog will be closed, while catch() will take care of showing the error notification bar in the dialog and keep it open.

By setting up the dialog and form like this, you can make sure that the ok button and any submit events within the form (i.e. enter key) are doing the same.

CSS classes

.k-dialog