vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactored ConfirmDialog demos

Browse source
This commit is contained in:
Cagatay Civici 2023-10-28 16:59:59 +03:00
parent 916a9dfbc9
commit b9c0574c5a
8 changed files with 239 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

63
doc/confirmdialog/TemplateDoc.vue
View file

@ -1,17 +1,17 @@
<template>
<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>
<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
<ConfirmDialog group="templating">
<template #message="slotProps">
<div class="flex p-4">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
<p class="pl-2">{{ slotProps.message.message }}</p>
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
</template>
</ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
<div class="card flex justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
</div>
<DocSectionCode :code="code" />
</template>
@ -22,28 +22,28 @@ export default {
return {
code: {
basic: `
<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
<ConfirmDialog group="templating">
<template #message="slotProps">
<div class="flex p-4">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
<p class="pl-2">{{ slotProps.message.message }}</p>
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
</template>
</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: `
<template>
<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
<ConfirmDialog group="templating">
<template #message="slotProps">
<div class="flex p-4">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
<p class="pl-2">{{ slotProps.message.message }}</p>
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
</template>
</ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
<div class="card flex justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
</div>
<Toast />
</template>
@ -54,11 +54,12 @@ export default {
showTemplate() {
this.$confirm.require({
group: 'templating',
header: 'Terms and Conditions',
message: 'Do you accept that?',
header: 'Confirmation',
message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle',
acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times',
acceptClass: 'p-button-outlined',
accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
@ -73,16 +74,16 @@ export default {
`,
composition: `
<template>
<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
<ConfirmDialog group="templating">
<template #message="slotProps">
<div class="flex p-4">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
<p class="pl-2">{{ slotProps.message.message }}</p>
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
</template>
</ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
<div class="card flex justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
</div>
<Toast />
</template>
@ -97,11 +98,12 @@ const toast = useToast();
const showTemplate = () => {
confirm.require({
group: 'templating',
header: 'Terms and Conditions',
message: 'Do you accept that?',
header: 'Confirmation',
message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle',
acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times',
acceptClass: 'p-button-outlined',
accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
@ -119,11 +121,12 @@ const showTemplate = () => {
showTemplate() {
this.$confirm.require({
group: 'templating',
header: 'Terms and Conditions',
message: 'Do you accept that?',
header: 'Confirmation',
message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle',
acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times',
acceptClass: 'p-button-outlined',
accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},