vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'prod'

pull/4713/head
Cagatay Civici 2023-10-28 22:04:58 +03:00
parent 6897f7f4fe 9bec0e1ee3
commit 2d4b5544a3
16 changed files with 445 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/styles/layout/_doc.scss
View File

@ -343,8 +343,8 @@
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
position: relative; position: relative;
scroll-margin-top: 6.5rem; scroll-margin-top: 6.5rem;
background-color: var(--highlight-bg); background-color: var(--doc-highlight-text-bg);
color: var(--highlight-text-color); color: var(--doc-highlight-text-color);
border-radius: 6px; border-radius: 6px;
padding: 2px 6px; padding: 2px 6px;
font-weight: 600; font-weight: 600;

1
components/lib/confirmdialog/ConfirmDialog.vue
View File

@ -55,7 +55,6 @@ import BaseConfirmDialog from './BaseConfirmDialog.vue';
export default { export default {
name: 'ConfirmDialog', name: 'ConfirmDialog',
extends: BaseConfirmDialog, extends: BaseConfirmDialog,
confirmListener: null, confirmListener: null,
closeListener: null, closeListener: null,
data() { data() {

4
components/lib/confirmpopup/style/ConfirmPopupStyle.js
View File

@ -86,8 +86,8 @@ const classes = {
icon: ({ instance }) => ['p-confirm-popup-icon', instance.confirmation ? instance.confirmation.icon : null], icon: ({ instance }) => ['p-confirm-popup-icon', instance.confirmation ? instance.confirmation.icon : null],
message: 'p-confirm-popup-message', message: 'p-confirm-popup-message',
footer: 'p-confirm-popup-footer', footer: 'p-confirm-popup-footer',
rejectButton: ({ instance }) => ['p-confirm-popup-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null], rejectButton: ({ instance }) => ['p-confirm-popup-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-sm p-button-text' : null],
acceptButton: 'p-confirm-popup-accept' acceptButton: ({ instance }) => ['p-confirm-popup-accept', instance.confirmation && !instance.confirmation.acceptClass ? 'p-button-sm' : null]
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

3
doc/confirmdialog/AccessibilityDoc.vue
View File

@ -78,7 +78,8 @@ export default {
basic: ` basic: `
<ConfirmDialog id="confirm" /> <ConfirmDialog id="confirm" />
<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>` <Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
`
}, },
code2: { code2: {
basic: ` basic: `

19
doc/confirmdialog/BasicDoc.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<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. <i>target</i> attribute is mandatory to align the popup to its caller.</p> <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. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
</DocSectionText> </DocSectionText>
<ConfirmDialog></ConfirmDialog> <ConfirmDialog></ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button> <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -18,7 +18,7 @@ export default {
basic: ` basic: `
<ConfirmDialog></ConfirmDialog> <ConfirmDialog></ConfirmDialog>
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button> <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
`, `,
options: ` options: `
<template> <template>
@ -26,7 +26,7 @@ export default {
<ConfirmDialog></ConfirmDialog> <ConfirmDialog></ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button> <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
</div> </div>
</template> </template>
@ -51,7 +51,8 @@ export default {
message: 'Do you want to delete this record?', message: 'Do you want to delete this record?',
header: 'Delete Confirmation', header: 'Delete Confirmation',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
acceptClass: 'p-button-danger', rejectClass: 'p-button-text p-button-text',
acceptClass: 'p-button-danger p-button-text',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
}, },
@ -70,7 +71,7 @@ export default {
<ConfirmDialog></ConfirmDialog> <ConfirmDialog></ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button> <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
</div> </div>
</template> </template>
@ -100,7 +101,8 @@ const confirm2 = () => {
message: 'Do you want to delete this record?', message: 'Do you want to delete this record?',
header: 'Delete Confirmation', header: 'Delete Confirmation',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
acceptClass: 'p-button-danger', rejectClass: 'p-button-text p-button-text',
acceptClass: 'p-button-danger p-button-text',
accept: () => { accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
}, },
@ -133,7 +135,8 @@ const confirm2 = () => {
message: 'Do you want to delete this record?', message: 'Do you want to delete this record?',
header: 'Delete Confirmation', header: 'Delete Confirmation',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
acceptClass: 'p-button-danger', rejectClass: 'p-button-text p-button-text',
acceptClass: 'p-button-danger p-button-text',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
}, },

2
doc/confirmdialog/ConfirmationServiceDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<div class="doc-section-description"> <div class="doc-section-description">
<p><i>$confirm</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useConfirm</i> function for Composition API.</p> <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
</div> </div>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template> </template>

156
doc/confirmdialog/HeadlessDoc.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire confirmation UI instead of the default elements.</p>
</DocSectionText>
<ConfirmDialog group="headless">
<template #container="{ message, onAccept, onReject }">
<div class="flex flex-column align-items-center p-5 surface-overlay border-round">
<div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
<i class="pi pi-question text-5xl"></i>
</div>
<span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="onAccept" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
</div>
</div>
</template>
</ConfirmDialog>
<div class="card flex justify-content-center">
<Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<ConfirmDialog group="headless">
<template #container="{ message, onAccept, onReject }">
<div class="flex flex-column align-items-center p-5 surface-overlay border-round">
<div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
<i class="pi pi-question text-5xl"></i>
</div>
<span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="onAccept" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
</div>
</div>
</template>
</ConfirmDialog>
<Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
`,
options: `
<template>
<ConfirmDialog group="headless">
<template #container="{ message, onAccept, onReject }">
<div class="flex flex-column align-items-center p-5 surface-overlay border-round">
<div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
<i class="pi pi-question text-5xl"></i>
</div>
<span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="onAccept" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
</div>
</div>
</template>
</ConfirmDialog>
<div class="card flex justify-content-center">
<Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
</div>
<Toast />
</template>
<script>
export default {
methods: {
requireConfirmation() {
this.$confirm.require({
group: 'headless',
header: 'Are you sure?',
message: 'Please confirm to proceed.',
accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
reject: () => {
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
}
}
};
<\/script>
`,
composition: `
<template>
<ConfirmDialog group="headless">
<template #container="{ message, onAccept, onReject }">
<div class="flex flex-column align-items-center p-5 surface-overlay border-round">
<div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
<i class="pi pi-question text-5xl"></i>
</div>
<span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="onAccept"></Button>
<Button label="Cancel" outlined @click="onReject"></Button>
</div>
</div>
</template>
</ConfirmDialog>
<div class="card flex justify-content-center">
<Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
</div>
<Toast />
</template>
<script setup>
import { useConfirm } from "primevue/useconfirm";
import { useToast } from "primevue/usetoast";
const confirm = useConfirm();
const toast = useToast();
const requireConfirmation = () => {
confirm.require({
group: 'headless',
header: 'Are you sure?',
message: 'Please confirm to proceed.',
accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
reject: () => {
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
};
<\/script>
`
}
};
},
methods: {
requireConfirmation() {
this.$confirm.require({
group: 'headless',
header: 'Are you sure?',
message: 'Please confirm to proceed.',
accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
reject: () => {
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
}
}
};
</script>

56
doc/confirmdialog/PositionDoc.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>The <i>position</i> property of the confirm options is used to display a Dialog at all edges and corners of the screen.</p> <p>The <i>position</i> property of the confirm options specifies the location of the Dialog.</p>
</DocSectionText> </DocSectionText>
<ConfirmDialog group="positionDialog"></ConfirmDialog> <ConfirmDialog group="positioned"></ConfirmDialog>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-3">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button> <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-3">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@ -28,12 +28,12 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<ConfirmDialog group="positionDialog"></ConfirmDialog> <ConfirmDialog group="positioned"></ConfirmDialog>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-3">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button> <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-3">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@ -47,13 +47,13 @@ export default {
options: ` options: `
<template> <template>
<Toast /> <Toast />
<ConfirmDialog group="positionDialog"></ConfirmDialog> <ConfirmDialog group="positioned"></ConfirmDialog>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-3">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button> <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-3">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@ -71,16 +71,16 @@ export default {
methods: { methods: {
confirmPosition(position) { confirmPosition(position) {
this.$confirm.require({ this.$confirm.require({
group: 'positionDialog', group: 'positioned',
message: 'Do you want to delete this record?', message: 'Are you sure you want to proceed?',
header: 'Delete Confirmation', header: 'Confirmation',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
position: position, position: position,
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
}, },
reject: () => { reject: () => {
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
} }
}); });
}, },
@ -91,13 +91,13 @@ export default {
composition: ` composition: `
<template> <template>
<Toast /> <Toast />
<ConfirmDialog group="positionDialog"></ConfirmDialog> <ConfirmDialog group="positioned"></ConfirmDialog>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-3">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button> <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2"> <div class="flex flex-wrap justify-content-center gap-2 mb-3">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@ -119,16 +119,16 @@ const toast = useToast();
const confirmPosition = (position) => { const confirmPosition = (position) => {
confirm.require({ confirm.require({
group: 'positionDialog', group: 'positioned',
message: 'Do you want to delete this record?', message: 'Are you sure you want to proceed?',
header: 'Delete Confirmation', header: 'Confirmation',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
position: position, position: position,
accept: () => { accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
}, },
reject: () => { reject: () => {
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
} }
}); });
}; };
@ -140,16 +140,16 @@ const confirmPosition = (position) => {
methods: { methods: {
confirmPosition(position) { confirmPosition(position) {
this.$confirm.require({ this.$confirm.require({
group: 'positionDialog', group: 'positioned',
message: 'Do you want to delete this record?', message: 'Are you sure you want to proceed?',
header: 'Delete Confirmation', header: 'Confirmation',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
position: position, position: position,
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
}, },
reject: () => { reject: () => {
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
} }
}); });
} }

72
doc/confirmdialog/TemplateDoc.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Templating allows customizing the content where the message instance is available as the implicit variable.</p> <p>Templating allows customizing the message content.</p>
</DocSectionText> </DocSectionText>
<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }"> <ConfirmDialog group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex p-4"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p class="pl-2">{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button> <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,28 +22,28 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }"> <ConfirmDialog group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex p-4"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p class="pl-2">{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button> <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
`, `,
options: ` options: `
<template> <template>
<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }"> <ConfirmDialog group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex p-4"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
<p class="pl-2">{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button> <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
</div> </div>
<Toast /> <Toast />
</template> </template>
@ -54,11 +54,13 @@ export default {
showTemplate() { showTemplate() {
this.$confirm.require({ this.$confirm.require({
group: 'templating', group: 'templating',
header: 'Terms and Conditions', header: 'Confirmation',
message: 'Do you accept that?', message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle', icon: 'pi pi-exclamation-circle',
acceptIcon: 'pi pi-check', acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times', rejectIcon: 'pi pi-times',
rejectClass: 'p-button-sm',
acceptClass: 'p-button-outlined p-button-sm',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
}, },
@ -73,16 +75,16 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }"> <ConfirmDialog group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex p-4"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p class="pl-2">{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button> <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
</div> </div>
<Toast /> <Toast />
</template> </template>
@ -97,11 +99,13 @@ const toast = useToast();
const showTemplate = () => { const showTemplate = () => {
confirm.require({ confirm.require({
group: 'templating', group: 'templating',
header: 'Terms and Conditions', header: 'Confirmation',
message: 'Do you accept that?', message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle', icon: 'pi pi-exclamation-circle',
acceptIcon: 'pi pi-check', acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times', rejectIcon: 'pi pi-times',
rejectClass: 'p-button-sm',
acceptClass: 'p-button-outlined p-button-sm',
accept: () => { accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
}, },
@ -119,11 +123,13 @@ const showTemplate = () => {
showTemplate() { showTemplate() {
this.$confirm.require({ this.$confirm.require({
group: 'templating', group: 'templating',
header: 'Terms and Conditions', header: 'Confirmation',
message: 'Do you accept that?', message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle', icon: 'pi pi-exclamation-circle',
acceptIcon: 'pi pi-check', acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times', rejectIcon: 'pi pi-times',
rejectClass: 'p-button-sm',
acceptClass: 'p-button-outlined p-button-sm',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
}, },

2
doc/confirmpopup/AccessibilityDoc.vue
View File

@ -6,7 +6,7 @@
<i>aria-modal</i> is added since focus is kept within the popup. <i>aria-modal</i> is added since focus is kept within the popup.
</p> </p>
<p> <p>
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmPopup adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
trigger and the dialog is defined. trigger and the dialog is defined.
</p> </p>
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />

20
doc/confirmpopup/BasicDoc.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p> <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
</DocSectionText> </DocSectionText>
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -17,10 +17,8 @@ export default {
code: { code: {
basic: ` basic: `
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
</div>
`, `,
options: ` options: `
<template> <template>
@ -28,7 +26,7 @@ export default {
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
</div> </div>
</template> </template>
@ -53,7 +51,7 @@ export default {
target: event.currentTarget, target: event.currentTarget,
message: 'Do you want to delete this record?', message: 'Do you want to delete this record?',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
acceptClass: 'p-button-danger', acceptClass: 'p-button-danger p-button-sm',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
}, },
@ -72,7 +70,7 @@ export default {
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
</div> </div>
</template> </template>
@ -102,7 +100,7 @@ const confirm2 = (event) => {
target: event.currentTarget, target: event.currentTarget,
message: 'Do you want to delete this record?', message: 'Do you want to delete this record?',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
acceptClass: 'p-button-danger', acceptClass: 'p-button-danger p-button-sm',
accept: () => { accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
}, },
@ -135,7 +133,7 @@ const confirm2 = (event) => {
target: event.currentTarget, target: event.currentTarget,
message: 'Do you want to delete this record?', message: 'Do you want to delete this record?',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
acceptClass: 'p-button-danger', acceptClass: 'p-button-danger p-button-sm',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
}, },

2
doc/confirmpopup/ConfirmationServiceDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<div class="doc-section-description"> <div class="doc-section-description">
<p><i>$confirm</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useConfirm</i> function for Composition API.</p> <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
</div> </div>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template> </template>

140
doc/confirmpopup/HeadlessDoc.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire confirmation UI instead of the default elements.</p>
</DocSectionText>
<ConfirmPopup group="headless">
<template #container="{ message, onAccept, onReject }">
<div class="bg-gray-900 text-white border-round p-3">
<span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3">
<Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
<Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
</div>
</div>
</template>
</ConfirmPopup>
<div class="card flex justify-content-center">
<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<ConfirmPopup group="headless">
<template #container="{ message, onAccept, onReject }">
<div class="bg-gray-900 text-white border-round p-3">
<span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3">
<Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
<Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
</div>
</div>
</template>
</ConfirmPopup>
<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
`,
options: `
<template>
<Toast />
<ConfirmPopup group="headless">
<template #container="{ message, onAccept, onReject }">
<div class="bg-gray-900 text-white border-round p-3">
<span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3">
<Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
<Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
</div>
</div>
</template>
</ConfirmPopup>
<div class="card flex justify-content-center">
<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
</div>
</template>
<script>
export default {
methods: {
requireConfirmation(event) {
this.$confirm.require({
target: event.currentTarget,
group: 'headless',
message: 'Are you sure? You cannot undo this.',
accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
reject: () => {
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
}
}
};
<\/script>
`,
composition: `
<template>
<Toast />
<ConfirmPopup group="headless">
<template #container="{ message, onAccept, onReject }">
<div class="bg-gray-900 text-white border-round p-3">
<span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3">
<Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
<Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
</div>
</div>
</template>
</ConfirmPopup>
<div class="card flex justify-content-center">
<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
</div>
</template>
<script setup>
import { useConfirm } from "primevue/useconfirm";
import { useToast } from "primevue/usetoast";
const confirm = useConfirm();
const toast = useToast();
const requireConfirmation = (event) => {
confirm.require({
target: event.currentTarget,
group: 'headless',
message: 'Are you sure? You cannot undo this.',
accept: () => {
toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
},
reject: () => {
toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
}
});
}
<\/script>
`
}
};
},
methods: {
requireConfirmation(event) {
this.$confirm.require({
target: event.currentTarget,
group: 'headless',
message: 'Are you sure? You cannot undo this.',
accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
reject: () => {
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
}
}
};
</script>

74
doc/confirmpopup/TemplateDoc.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Templating allows customizing the content where the message instance is available as the implicit variable.</p> <p>Templating allows customizing the message content.</p>
</DocSectionText> </DocSectionText>
<ConfirmPopup group="demo"> <ConfirmPopup group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex p-4"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p class="pl-2">{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button> <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,31 +22,29 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<ConfirmPopup group="demo"> <ConfirmPopup group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex p-4"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p class="pl-2">{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
</div>
`, `,
options: ` options: `
<template> <template>
<Toast /> <Toast />
<ConfirmPopup group="demo"> <ConfirmPopup group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex p-4"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p class="pl-2">{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button> <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
</div> </div>
</template> </template>
@ -56,11 +54,13 @@ export default {
showTemplate(event) { showTemplate(event) {
this.$confirm.require({ this.$confirm.require({
target: event.currentTarget, target: event.currentTarget,
group: 'demo', group: 'templating',
message: 'Do you accept that?', message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle', icon: 'pi pi-exclamation-circle',
acceptIcon: 'pi pi-check', acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times', rejectIcon: 'pi pi-times',
rejectClass: 'p-button-sm',
acceptClass: 'p-button-outlined p-button-sm',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
}, },
@ -76,16 +76,16 @@ export default {
composition: ` composition: `
<template> <template>
<Toast /> <Toast />
<ConfirmPopup group="demo"> <ConfirmPopup group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex p-4"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p class="pl-2">{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button> <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
</div> </div>
</template> </template>
@ -99,11 +99,13 @@ const toast = useToast();
const showTemplate = (event) => { const showTemplate = (event) => {
confirm.require({ confirm.require({
target: event.currentTarget, target: event.currentTarget,
group: 'demo', group: 'templating',
message: 'Do you accept that?', message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle', icon: 'pi pi-exclamation-circle',
acceptIcon: 'pi pi-check', acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times', rejectIcon: 'pi pi-times',
rejectClass: 'p-button-sm',
acceptClass: 'p-button-outlined p-button-sm',
accept: () => { accept: () => {
toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000}); toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
}, },
@ -121,11 +123,13 @@ const showTemplate = (event) => {
showTemplate(event) { showTemplate(event) {
this.$confirm.require({ this.$confirm.require({
target: event.currentTarget, target: event.currentTarget,
group: 'demo', group: 'templating',
message: 'Do you accept that?', message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle', icon: 'pi pi-exclamation-circle',
acceptIcon: 'pi pi-check', acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times', rejectIcon: 'pi pi-times',
rejectClass: 'p-button-sm',
acceptClass: 'p-button-outlined p-button-sm',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
}, },

8
pages/confirmdialog/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/confirmdialog/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/confirmdialog/AccessibilityDoc.vue';
import BasicDoc from '@/doc/confirmdialog/BasicDoc.vue'; import BasicDoc from '@/doc/confirmdialog/BasicDoc.vue';
import ConfirmationServiceDoc from '@/doc/confirmdialog/ConfirmationServiceDoc.vue'; import ConfirmationServiceDoc from '@/doc/confirmdialog/ConfirmationServiceDoc.vue';
import HeadlessDoc from '@/doc/confirmdialog/HeadlessDoc.vue';
import ImportDoc from '@/doc/confirmdialog/ImportDoc.vue'; import ImportDoc from '@/doc/confirmdialog/ImportDoc.vue';
import PositionDoc from '@/doc/confirmdialog/PositionDoc.vue'; import PositionDoc from '@/doc/confirmdialog/PositionDoc.vue';
import TemplateDoc from '@/doc/confirmdialog/TemplateDoc.vue'; import TemplateDoc from '@/doc/confirmdialog/TemplateDoc.vue';
@ -31,7 +32,7 @@ export default {
}, },
{ {
id: 'confirmation-service', id: 'confirmation-service',
label: 'Confirmation Service', label: 'Service',
component: ConfirmationServiceDoc component: ConfirmationServiceDoc
}, },
{ {
@ -49,6 +50,11 @@ export default {
label: 'Template', label: 'Template',
component: TemplateDoc component: TemplateDoc
}, },
{
id: 'headless',
label: 'Headless',
component: HeadlessDoc
},
{ {
id: 'accessibility', id: 'accessibility',
label: 'Accessibility', label: 'Accessibility',

8
pages/confirmpopup/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/confirmpopup/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/confirmpopup/AccessibilityDoc.vue';
import BasicDoc from '@/doc/confirmpopup/BasicDoc.vue'; import BasicDoc from '@/doc/confirmpopup/BasicDoc.vue';
import ConfirmationServiceDoc from '@/doc/confirmpopup/ConfirmationServiceDoc.vue'; import ConfirmationServiceDoc from '@/doc/confirmpopup/ConfirmationServiceDoc.vue';
import HeadlessDoc from '@/doc/confirmpopup/HeadlessDoc.vue';
import ImportDoc from '@/doc/confirmpopup/ImportDoc.vue'; import ImportDoc from '@/doc/confirmpopup/ImportDoc.vue';
import TemplateDoc from '@/doc/confirmpopup/TemplateDoc.vue'; import TemplateDoc from '@/doc/confirmpopup/TemplateDoc.vue';
import PTComponent from '@/doc/confirmpopup/pt/index.vue'; import PTComponent from '@/doc/confirmpopup/pt/index.vue';
@ -30,7 +31,7 @@ export default {
}, },
{ {
id: 'confirmation-service', id: 'confirmation-service',
label: 'Confirmation Service', label: 'Service',
component: ConfirmationServiceDoc component: ConfirmationServiceDoc
}, },
{ {
@ -43,6 +44,11 @@ export default {
label: 'Template', label: 'Template',
component: TemplateDoc component: TemplateDoc
}, },
{
id: 'headless',
label: 'Headless',
component: HeadlessDoc
},
{ {
id: 'accessibility', id: 'accessibility',
label: 'Accessibility', label: 'Accessibility',