65 lines
1.3 KiB
Markdown
65 lines
1.3 KiB
Markdown
# Confirm Dialog
|
|
|
|
This component is to confirm an action with the user.
|
|
|
|
## Usage
|
|
|
|
Call the `confirmDialog` function with options to show a confirmation dialog.
|
|
You need to make sure you include the `Dialogs` component in your root component
|
|
([`App.vue`](#app-vue)).
|
|
|
|
<Story>
|
|
<Button
|
|
@click="
|
|
confirmDialog({
|
|
title: 'Are you sure?',
|
|
message: 'This will permanently delete the file. Are you sure you want to proceed?',
|
|
onConfirm: ({ hideDialog }) => {
|
|
// deleteFile()
|
|
// hideDialog() // closes dialog
|
|
},
|
|
onCancel: () => {}
|
|
})
|
|
"
|
|
>
|
|
Delete File
|
|
</Button>
|
|
</Story>
|
|
|
|
```vue
|
|
<template>
|
|
<Button
|
|
@click="
|
|
confirmDialog({
|
|
title: 'Are you sure?',
|
|
message:
|
|
'This will permanently delete the file. Are you sure you want to proceed?',
|
|
onConfirm: ({ hideDialog }) => {
|
|
// deleteFile()
|
|
// hideDialog() // closes dialog
|
|
},
|
|
onCancel: () => {}
|
|
})
|
|
"
|
|
>
|
|
Delete File
|
|
</Button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { confirmDialog, Button } from 'jingrow-ui'
|
|
</script>
|
|
```
|
|
|
|
### App.vue
|
|
|
|
```vue
|
|
<template>
|
|
<!-- your markup -->
|
|
<Dialogs />
|
|
</template>
|
|
<script setup>
|
|
import { Dialogs } from 'jingrow-ui'
|
|
</script>
|
|
```
|