# Dialog

## Demos

### Modal and non-modal

[[ demo src="/demo/dialog/modal.vue" ]]

### Customized content

[[ demo src="/demo/dialog/custom.vue" ]]

### Async support

[[ demo src="/demo/dialog/async.vue" ]]

### Draggable

[[ demo src="/demo/dialog/draggable.vue" ]]

### Stacking order

[[ demo src="/demo/dialog/stack.vue" ]]

## API

### Props

| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `modal` | `boolean=` | `true` | Whether to display a backdrop to block interactions with the content underneath. Modal dialogs preempt focus by default (will return focus when closed). |
| `title` | `string=` | - | The title of the dialog. Will be ignored if `title` slot is specified. |
| `open` | `boolean=` | `false` | [^open] |
| `closable` | `boolean=` | `true` | Whether to display a close button at the top right corner. |
| `outside-closable` | `boolean=` | `false` | Wether to close the dialog when user click outside. |
| `draggable` | `boolean=` | `false` | Whether the dialog is draggable. |
| `escapable` | `boolean=` | `false` | Whether to allow closing the dialog after pressing <kbd>esc</kbd>. Only works when `closable` is set to `true`. |
| `inline` | `boolean=` | `false` | Whether the dialog is displayed inline thus takes up space. |
| `footless` | `boolean=` | `false` | Whether to hide the default footer. |
| `loading` | `boolean=` | `false` | Wehter the dialog is in loading state. When loading, the OK button will enter loading state as well and become unclickable. |
| `priority` | `number=` | - | The stacking priority of the dialog overlay. See the [`priority`](./overlay#props) prop of [`Overlay`](./overlay) component. |
| `before-close` | `function(string)=: boolean=|Promise<boolean=>` | - | [^before-close] |
| `overlay-class` | `string|Object=` | - | The class expression applied to the root element of the dialog overlay. See the [`overlay-class`](./overlay#props) prop of [`Overlay`](./overlay) component. |

^^^ui
Style variants.

+++Enum values
| Value | Description |
| -- | -- |
| `s` | Small sized content (not the dimension of the dialog itself). |
| `m` | Medium sized content (not the dimension of the dialog itself). |
| `narrow` | Narrow width. |
| `medium` | Medium width. |
| `wide` | Wide width. |
| `fullscreen` | Fullscreen dialogs. |
| `auto` | Auto-fit dialogs. |
+++
^^^

^^^open
:::badges
`.sync`
:::

Whether the dialog is open.
^^^

^^^before-close
Executed when user interaction is about to trigger closing the dialog. The type is `function(type: string): boolean=|Promise<boolean=>`, where `type` being the action type of the closing behavior. Available values by default are `'ok'/'cancel'`. The return value can be a `boolean` or a `Promise` that resolves a `boolean` value, to handle the situation that an async process is responsible for deciding whether to close the dialog. Will keep the dialog open when returning `false` or the `Promise` resolves with `false`.

+++Code example
```html
<veui-dialog :open.sync="dialogOpen" :before-close="submit">...</veui-dialog>
```

```js
methods: {
  submit (type) {
    if (type === 'ok') {
      return axios.post('/item/create', {/* ... */})
        .then(({ id, error }) => {
          if (error) {
            this.showError(error)
            return false // resolving `false` will keep the dialog open
          }
        })
    }
    // resolving non-`false` value will close the dialog
  },
  // ...
}
```
+++
^^^

### Slots

| Name | Description |
| -- | -- |
| `default` | The content of the dialog. |
| `title` | The title of the dialog. Will ignore the `title` prop if this slot is specified. |
| `foot` | [^slot-foot] |

^^^slot-foot
The foot of the dialog. Displays “OK” and “Cancel” buttons by default.


+++Scope properties
| Name | Type | Description |
| -- | -- | -- |
| `close` | `function(type: string): void` | The callback to trigger closing the dialog. `type` is the action type and will be passed into `before-close` hook as the first argument. And an event named after `type` will be triggered synchronously. |
+++
^^^

### Events

| Name | Description |
| -- | -- |
| `ok` | Triggered after the “OK” button is clicked or the dialog is closed with the slot scope function call `close('ok')`. |
| `cancel` | Triggered after the “Cancel” button or the close button is clicked, or <kbd>esc</kbd> is pressed, or the dialog is closed with the slot scope function call `close('cancel')`. |
| <var>&lt;value&gt;</var> | Triggered when the dialog is closed with the slot scope function call `close(value)`. |
| `afterclose` | Triggered after the dialog is closed. If leave transition is provided by theme, then `afterclose` will be triggered when the transition finishes. |

### Icons

| Name | Description |
| -- | -- |
| `close` | Close. |