Fixed #678 - New ConfirmDialog Component
Cagatay Civici
parent
224ee74788
commit
0fbadafef8
|
|
@ -0,0 +1 @@
|
|||
export * from './components/confirmation/ConfirmationService';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
'use strict';
|
||||
module.exports = require('./components/confirmation/ConfirmationService.js');
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './components/confirmdialog/ConfirmDialog';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
'use strict';
|
||||
module.exports = require('./components/confirmdialog/ConfirmDialog.vue');
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './components/confirmation/useConfirm';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
'use strict';
|
||||
module.exports = require('./components/confirmation/useConfirm.js');
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
import mitt from 'mitt';
|
||||
const EventBus = mitt();
|
||||
|
||||
export default EventBus;
|
||||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
|
||||
<Button @click="delete()" icon="pi pi-check" label="Confirm"></Button>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
Loading…
Reference in New Issue