feat: Add confirmDialog api

Co-authored-by: Saqib Ansari <[email protected]>

docs/components/confirm-dialog.md

@@ -0,0 +1,62 @@
+# 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
+ },
+ })
+ "
+ >
+ 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
+ },
+ })
+ "
+ >
+ Delete File
+ </Button>
+</template>
+
+<script setup>
+import { confirmDialog, Button } from 'frappe-ui'
+</script>
+```
+
+### App.vue
+
+```vue
+<template>
+ <!-- your markup -->
+ <Dialogs />
+</template>
+<script setup>
+import { Dialogs } from 'frappe-ui'
+</script>
+```

src/components/ConfirmDialog.vue

@@ -0,0 +1,56 @@
+<template>
+ <Dialog v-model="showDialog" :options="{ title }">
+ <template #body-content>
+ <div class="space-y-4">
+ <p class="text-p-base text-gray-800" v-if="message" v-html="message" />
+ </div>
+ </template>
+ <template #actions>
+ <Button class="w-full" v-bind="primaryActionProps" />
+ </template>
+ </Dialog>
+</template>
+<script>
+import Dialog from './Dialog.vue'
+export default {
+ name: 'ConfirmDialog',
+ props: ['title', 'message', 'fields', 'onConfirm'],
+ expose: ['show', 'hide'],
+ components: {
+ Dialog,
+ },
+ data() {
+ return {
+ showDialog: true,
+ isLoading: false,
+ }
+ },
+ methods: {
+ handleConfirmation() {
+ try {
+ this.onConfirm?.({
+ hideDialog: this.hide,
+ })
+ } finally {
+ this.isLoading = false
+ }
+ },
+ show() {
+ this.showDialog = true
+ },
+ hide() {
+ this.showDialog = false
+ },
+ },
+ computed: {
+ primaryActionProps() {
+ return {
+ label: 'Confirm',
+ variant: 'solid',
+ loading: this.isLoading,
+ onClick: this.handleConfirmation,
+ }
+ },
+ },
+}
+</script>

src/components/Dialogs.vue

@@ -0,0 +1,8 @@
+<template>
+ <div>
+ <component v-for="dialog in dialogs" :is="dialog"></component>
+ </div>
+</template>
+<script setup>
+import { dialogs } from '../utils/confirmDialog.js'
+</script>

src/index.js

@@ -9,6 +9,7 @@ export { default as Card } from './components/Card.vue'
 export { default as Checkbox } from './components/Checkbox.vue'
 export { default as DatePicker } from './components/DatePicker.vue'
 export { default as Dialog } from './components/Dialog.vue'
+export { default as Dialogs } from './components/Dialogs.vue'
 export { default as Divider } from './components/Divider.vue'
 export { default as Dropdown } from './components/Dropdown.vue'
 export { default as ErrorMessage } from './components/ErrorMessage.vue'
@@ -86,3 +87,4 @@ export { setConfig, getConfig } from './utils/config.js'
 // plugin
 export { default as pageMetaPlugin } from './utils/pageMeta.js'
 export { default as FrappeUI } from './utils/plugin.js'
+export { confirmDialog } from './utils/confirmDialog.js'

src/utils/confirmDialog.js

@@ -0,0 +1,25 @@
+import ConfirmDialog from '../components/ConfirmDialog.vue'
+import { h, ref } from 'vue'
+
+export function confirmDialog({
+ title = 'Untitled',
+ message = '',
+ fields = [],
+ onConfirm,
+}) {
+ renderDialog(
+ h(ConfirmDialog, {
+ title,
+ message,
+ fields,
+ onConfirm,
+ })
+ )
+}
+
+export const dialogs = ref([])
+
+export function renderDialog(component) {
+ component.id = dialogs.length
+ dialogs.value.push(component)
+}