Fixed #678 - New ConfirmDialog Component

exports/confirmationservice.d.ts

@@ -0,0 +1 @@
+export * from './components/confirmation/ConfirmationService';

exports/confirmationservice.js

@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/confirmation/ConfirmationService.js');
+            

exports/confirmdialog.d.ts

@@ -0,0 +1 @@
+export * from './components/confirmdialog/ConfirmDialog';

exports/confirmdialog.js

@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/confirmdialog/ConfirmDialog.vue');
+            

exports/useConfirm.d.ts

@@ -0,0 +1 @@
+export * from './components/confirmation/useConfirm';

exports/useConfirm.js

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/confirmation/useConfirm.js');

public/themes/arya-blue/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/arya-green/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/arya-orange/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/arya-purple/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/bootstrap4-dark-blue/theme.css

@@ -2984,6 +2984,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/bootstrap4-dark-purple/theme.css

@@ -2984,6 +2984,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/bootstrap4-light-blue/theme.css

@@ -2984,6 +2984,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/bootstrap4-light-purple/theme.css

@@ -2984,6 +2984,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/fluent-light/theme.css

@@ -2947,6 +2947,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/luna-amber/theme.css

@@ -2959,6 +2959,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/luna-blue/theme.css

@@ -2959,6 +2959,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/luna-green/theme.css

@@ -2959,6 +2959,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/luna-pink/theme.css

@@ -2959,6 +2959,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/md-dark-deeppurple/theme.css

@@ -2996,6 +2996,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);

public/themes/md-dark-indigo/theme.css

@@ -2996,6 +2996,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);

public/themes/md-light-deeppurple/theme.css

@@ -2996,6 +2996,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);

public/themes/md-light-indigo/theme.css

@@ -2996,6 +2996,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);

public/themes/mdc-dark-deeppurple/theme.css

@@ -2996,6 +2996,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);

public/themes/mdc-dark-indigo/theme.css

@@ -2996,6 +2996,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);

public/themes/mdc-light-deeppurple/theme.css

@@ -2996,6 +2996,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);

public/themes/mdc-light-indigo/theme.css

@@ -2996,6 +2996,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);

public/themes/nova-accent/theme.css

@@ -2947,6 +2947,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/nova-alt/theme.css

@@ -2959,6 +2959,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/nova-vue/theme.css

@@ -2959,6 +2959,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/nova/theme.css

@@ -2959,6 +2959,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/rhea/theme.css

@@ -2947,6 +2947,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/saga-blue/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/saga-green/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/saga-orange/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/saga-purple/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/vela-blue/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/vela-green/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/vela-orange/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

public/themes/vela-purple/theme.css

@@ -2972,6 +2972,12 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+  font-size: 2rem;
+}
+.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+  margin-left: 1rem;
+}
 
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);

src/AppMenu.vue

@@ -174,6 +174,7 @@
 
             <div class="menu-category">Overlay</div>
             <div class="menu-items">
+                <router-link to="/confirmdialog">ConfirmDialog <span class="p-tag">New</span></router-link>
                 <router-link to="/dialog">Dialog</router-link>
                 <router-link to="/overlaypanel">OverlayPanel</router-link>
                 <router-link to="/sidebar">Sidebar</router-link>

src/components/confirmation/ConfirmationEventBus.js

@@ -0,0 +1,4 @@
+import mitt from 'mitt';
+const EventBus = mitt();
+
+export default EventBus;

src/components/confirmation/ConfirmationService.js

@@ -0,0 +1,17 @@
+import ConfirmationEventBus from './ConfirmationEventBus';
+import {PrimeVueConfirmSymbol} from './useConfirm';
+
+export default {
+    install: (app) => {
+        const ConfirmationService = {
+            require: (options) => {
+                ConfirmationEventBus.emit('confirm', options);
+            },
+            close: () => {
+                ConfirmationEventBus.emit('close');
+            }
+        };
+        app.config.globalProperties.$confirm = ConfirmationService;
+        app.provide(PrimeVueConfirmSymbol, ConfirmationService);
+    }
+};

src/components/confirmation/useConfirm.d.ts

@@ -0,0 +1,19 @@
+export declare function useConfirm(): { 
+    require(args:{ 
+        message?: string;
+        group?: string;
+        icon?: string;
+        header?: string;
+        accept?: Function;
+        reject?: Function;
+        acceptLabel?: string;
+        rejectLabel?: string;
+        acceptIcon?: string;
+        rejectIcon?: string;
+        blockScroll?: boolean;
+        acceptClass?: string;
+        rejectClass?: string;
+    }): void 
+
+    close(): void 
+}

src/components/confirmation/useConfirm.js

@@ -0,0 +1,12 @@
+import { inject } from 'vue';
+
+export const PrimeVueConfirmSymbol = Symbol();
+
+export function useConfirm() {
+    const PrimeVueConfirm = inject(PrimeVueConfirmSymbol);
+    if (!PrimeVueConfirm) {
+        throw new Error('No PrimeVue Confirmation provided!');
+    } 
+    
+    return PrimeVueConfirm;
+}

src/components/confirmdialog/ConfirmDialog.vue

@@ -0,0 +1,104 @@
+<template>
+    <CDialog v-model:visible="visible" :modal="true" :header="header" :blockScroll="blockScroll" :position="position" class="p-confirm-dialog">
+        <i :class="iconClass" /> 
+        <span class="p-confirm-dialog-message">{{message}}</span>
+        <template #footer>
+            <CDButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()"/>
+            <CDButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" autofocus />
+        </template>
+    </CDialog>
+</template>
+
+<script>
+import ConfirmationEventBus from '../confirmation/ConfirmationEventBus';
+import Dialog from '../dialog/Dialog';
+import Button from '../button/Button';
+
+export default {
+    props: {
+        group: String
+    },
+    data() {
+        return {
+            visible: false,
+            confirmation: null,
+        }
+    },
+    mounted() {
+        ConfirmationEventBus.on('confirm', (options) => {
+            if (!options) {
+                return;
+            }
+
+            if (options.group === this.group) {
+                this.confirmation = options;
+                this.visible = true;
+            }
+        });
+
+        ConfirmationEventBus.on('close', () => {
+            this.visible = false;
+            this.confirmation = null;
+        });
+    },
+    beforeUnmount() {
+        ConfirmationEventBus.off('confirm');
+        ConfirmationEventBus.off('close');
+    },
+    methods: {
+        accept() {
+            if (this.confirmation.accept) {
+                this.confirmation.accept();
+            }
+
+            this.visible = false;
+        },
+        reject() {
+            if (this.confirmation.reject) {
+                this.confirmation.reject();
+            }
+
+            this.visible = false;
+        }
+    },
+    computed: {
+        header() {
+            return this.confirmation ? this.confirmation.header : null;
+        },
+        message() {
+            return this.confirmation ? this.confirmation.message : null;
+        },
+        blockScroll() {
+            return this.confirmation ? this.confirmation.blockScroll : true;
+        },
+        position() {
+            return this.confirmation ? this.confirmation.position : null;
+        },
+        iconClass() {
+            return ['p-confirm-dialog-icon', this.confirmation ? this.confirmation.icon : null];
+        },
+        acceptLabel() {
+            return this.confirmation ? (this.confirmation.acceptLabel || 'Yes') : null;
+        },
+        rejectLabel() {
+            return this.confirmation ? (this.confirmation.rejectLabel || 'No') : null;
+        },
+        acceptIcon() {
+            return this.confirmation ? this.confirmation.acceptIcon : null;
+        },
+        rejectIcon() {
+            return this.confirmation ? this.confirmation.rejectIcon : null;
+        },
+        acceptClass() {
+            return ['p-confirm-dialog-accept', this.confirmation ? this.confirmation.acceptClass : null];
+        },
+        rejectClass() {
+            return ['p-confirm-dialog-reject', this.confirmation ? (this.confirmation.rejectClass || 'p-button-text') : null];
+        }
+    },
+    components: {
+        'CDialog': Dialog,
+        'CDButton': Button
+    }
+}
+</script>

src/components/dialog/Dialog.vue

@@ -411,4 +411,9 @@ export default {
     justify-content: flex-end;
     align-items: flex-end;
 }
+
+.p-confirm-dialog .p-dialog-content {
+    display: flex;
+    align-items: center;
+}
 </style>

src/main.js

@@ -17,6 +17,8 @@ import Chips from './components/chips/Chips';
 import ColorPicker from './components/colorpicker/ColorPicker';
 import Column from './components/column/Column';
 import ColumnGroup from './components/columngroup/ColumnGroup';
+import ConfirmDialog from './components/confirmdialog/ConfirmDialog';
+import ConfirmationService from './components/confirmation/ConfirmationService';
 import ContextMenu from './components/contextmenu/ContextMenu';
 import DataTable from './components/datatable/DataTable';
 import DataView from './components/dataview/DataView';
@@ -52,8 +54,8 @@ import ProgressBar from './components/progressbar/ProgressBar';
 import ProgressSpinner from './components/progressspinner/ProgressSpinner';
 import Rating from './components/rating/Rating';
 import RadioButton from './components/radiobutton/RadioButton';
-import Row from './components/row/Row';
 import Ripple from './components/ripple/Ripple';
+import Row from './components/row/Row';
 import ScrollPanel from './components/scrollpanel/ScrollPanel';
 import SelectButton from './components/selectbutton/SelectButton';
 import Slider from './components/slider/Slider';
@@ -71,9 +73,9 @@ import Tree from './components/tree/Tree';
 import TreeTable from './components/treetable/TreeTable';
 import Toast from './components/toast/Toast';
 import ToastService from './components/toast/ToastService';
+import ToggleButton from './components/togglebutton/ToggleButton';
 import Toolbar from './components/toolbar/Toolbar';
 import Tooltip from './components/tooltip/Tooltip';
-import ToggleButton from './components/togglebutton/ToggleButton';
 import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
 import Galleria from './components/galleria/Galleria';
 
@@ -100,6 +102,7 @@ app.config.globalProperties.$appState = reactive({inputStyle: 'outlined', darkTh
 app.config.globalProperties.$primevue = reactive({ripple: true});
 
 app.use(ToastService);
+app.use(ConfirmationService);
 app.use(router);
 
 app.directive('tooltip', Tooltip);
@@ -120,6 +123,7 @@ app.component('Chips', Chips);
 app.component('ColorPicker', ColorPicker);
 app.component('Column', Column);
 app.component('ColumnGroup', ColumnGroup);
+app.component('ConfirmDialog', ConfirmDialog);
 app.component('ContextMenu', ContextMenu);
 app.component('DataTable', DataTable);
 app.component('DataView', DataView);

src/router/index.js

@@ -132,6 +132,11 @@ const routes = [
         name: 'colorpicker',
         component: () => import('../views/colorpicker/ColorPickerDemo.vue')
     },
+    {
+        path: '/confirmdialog',
+        name: 'confirmdialog',
+        component: () => import('../views/confirmdialog/ConfirmDialogDemo.vue')
+    },
     {
         path: '/contextmenu',
         name: 'contextmenu',

src/views/confirmdialog/ConfirmDialogDemo.vue

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>ConfirmDialog</h1>
+                <p>ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <ConfirmDialog></ConfirmDialog>
+            <ConfirmDialog group="positionDialog"></ConfirmDialog>
+
+            <div class="card">
+                <h5>Basic</h5>
+                <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+                <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+
+                <h5>Position</h5>
+                <div class="p-grid p-dir-col">
+                    <div class="p-col">
+                        <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
+                        <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
+                    </div>
+                    <div class="p-col">
+                        <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
+                        <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
+                        <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
+                    </div>
+                    <div class="p-col">
+                        <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
+                        <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
+                        <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <ConfirmDialogDoc />
+    </div>
+</template>
+
+<script>
+import ConfirmDialogDoc from './ConfirmDialogDoc';
+
+export default {
+    methods: {
+        confirm1() {
+            this.$confirm.require({
+                message: 'Are you sure that you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted'});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected'});
+                }
+            });
+        },
+        confirm2() {
+            this.$confirm.require({
+                message: 'Do you want to delete this record?',
+                header: 'Delete Confirmation',
+                icon: 'pi pi-info-circle',
+                acceptClass: 'p-button-danger',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted'});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected'});
+                }
+            });
+        },
+        confirmPosition(position) {
+            this.$confirm.require({
+                key: 'positionDialog',
+                message: 'Do you want to delete this record?',
+                header: 'Delete Confirmation',
+                icon: 'pi pi-info-circle',
+                position: position,
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted'});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected'});
+                }
+            });
+        }
+    },
+    components: {
+        'ConfirmDialogDoc': ConfirmDialogDoc
+    }
+}
+</script>

src/views/confirmdialog/ConfirmDialogDoc.vue

@@ -0,0 +1,333 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+                <h5>Mitt EventBus</h5>
+                <p>ConfirmDialog requires <a href="https://www.npmjs.com/package/mitt">Mitt</a>, a tiny 200b EventBus implementation.</p>
+<pre v-code>
+<code>
+npm install mitt --save
+
+</code></pre>
+
+                <h5>ConfirmationService</h5>
+                <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
+                    instance is created.</p>
+<pre v-code.script>
+<code>
+import {createApp} from 'vue';
+import ConfirmationService from 'primevue/confirmationservice';
+
+const app = createApp(App);
+app.use(ConfirmationService);
+
+</code></pre>
+
+				<h5>Import</h5>
+<pre v-code.script>
+<code>
+import ConfirmDialog from 'primevue/confirmdialog';
+
+</code></pre>
+
+				<h5>Getting Started</h5>
+				<p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component
+                where it can be shared by any component within the application.</p>
+<pre v-code>
+<code>
+&lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
+
+&lt;Button @click="delete()" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
+</code></pre>
+
+<pre v-code.script>
+<code>
+export default {
+	methods: {
+        delete() {
+            this.$confirm.require({
+                message: 'Are you sure that you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    //callback to execute when user confirms the action
+                },
+                reject: () => {
+                    //callback to execute when user rejects the action
+                }
+            });
+        },
+    }
+}
+
+</code></pre>
+
+                <h5>Composition API</h5>
+                <p>The service can be injected with the <i>useConfirm</i> function.</p>
+<pre v-code.script>
+<code>
+import { defineComponent } from "vue";
+import { useConfirm } from "primevue/useconfirm";
+
+export default defineComponent({
+    setup() {
+        const confirm = useConfirm();
+        confirm.require({
+            message: 'Are you sure that you want to proceed?',
+            header: 'Confirmation',
+            icon: 'pi pi-exclamation-triangle',
+            accept: () => {
+                //callback to execute when user confirms the action
+            },
+            reject: () => {
+                //callback to execute when user rejects the action
+            }
+        });
+    }
+})
+
+</code></pre>
+
+                <h5>Close Confirmation</h5>
+                <p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
+<pre v-code.script>
+<code>
+export default {
+	methods: {
+        discard() {
+            this.$confirm.close();
+        }
+    }
+}
+
+</code></pre>
+
+                <h5>Confirmation Options</h5>
+                <p>ConfirmDialog can be customized with various options listed here.</p>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>message</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Message of the confirmation.</td>
+                            </tr>
+                            <tr>
+                                <td>group</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                            </tr>
+                            <tr>
+                                <td>icon</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Icon to display next to the message.</td>
+                            </tr>
+                            <tr>
+                                <td>header</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Header text of the dialog.</td>
+                            </tr>
+                            <tr>
+                                <td>accept</td>
+                                <td>Function</td>
+                                <td>null</td>
+                                <td>Callback to execute when action is confirmed.</td>
+                            </tr>
+                            <tr>
+                                <td>reject</td>
+                                <td>Function</td>
+                                <td>null</td>
+                                <td>Callback to execute when action is rejected.</td>
+                            </tr>
+                            <tr>
+                                <td>acceptLabel</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Label of the accept button.</td>
+                            </tr>
+                            <tr>
+                                <td>rejectLabel</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Label of the reject button.</td>
+                            </tr>
+                            <tr>
+                                <td>acceptIcon</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Icon of the accept button.</td>
+                            </tr>
+                            <tr>
+                                <td>rejectIcon</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Icon of the reject button.</td>
+                            </tr>
+                            <tr>
+                                <td>acceptClass</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Style class of the accept button.</td>
+                            </tr>
+                            <tr>
+                                <td>rejectClass</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Style class of the reject button.</td>
+                            </tr>
+                            <tr>
+                                <td>blockScroll</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether background scroll should be blocked when dialog is visible.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+				<h5>Properties</h5>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>group</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Styling</h5>
+				<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Element</th>
+						</tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-confirm-dialog</td>
+                                <td>Container element.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Dependencies</h5>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<pre v-code>
+<code><template v-pre>
+&lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
+&lt;ConfirmDialog group="positionDialog"&gt;&lt;/ConfirmDialog&gt;
+
+&lt;div class="card"&gt;
+    &lt;h5&gt;Basic&lt;/h5&gt;
+    &lt;Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"&gt;&lt;/Button&gt;
+    &lt;Button @click="confirm2()" icon="pi pi-times" label="Delete"&gt;&lt;/Button&gt;
+
+    &lt;h5&gt;Position&lt;/h5&gt;
+    &lt;div class="p-grid p-dir-col"&gt;
+        &lt;div class="p-col"&gt;
+            &lt;Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"&gt;&lt;/Button&gt;
+            &lt;Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"&gt;&lt;/Button&gt;
+        &lt;/div&gt;
+        &lt;div class="p-col"&gt;
+            &lt;Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"&gt;&lt;/Button&gt;
+            &lt;Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"&gt;&lt;/Button&gt;
+            &lt;Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"&gt;&lt;/Button&gt;
+        &lt;/div&gt;
+        &lt;div class="p-col"&gt;
+            &lt;Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"&gt;&lt;/Button&gt;
+            &lt;Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"&gt;&lt;/Button&gt;
+            &lt;Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"&gt;&lt;/Button&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</template>
+</code></pre>
+
+<pre v-code.script>
+<code>
+export default {
+    methods: {
+        confirm1() {
+            this.$confirm.require({
+                message: 'Are you sure that you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted'});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected'});
+                }
+            });
+        },
+        confirm2() {
+            this.$confirm.require({
+                message: 'Do you want to delete this record?',
+                header: 'Delete Confirmation',
+                icon: 'pi pi-info-circle',
+                acceptClass: 'p-button-danger',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted'});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected'});
+                }
+            });
+        },
+        confirmPosition(position) {
+            this.$confirm.require({
+                key: 'positionDialog',
+                message: 'Do you want to delete this record?',
+                header: 'Delete Confirmation',
+                icon: 'pi pi-info-circle',
+                position: position,
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted'});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected'});
+                }
+            });
+        }
+    }
+}
+
+</code></pre>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>