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

Headless demo callback updates

Browse source
This commit is contained in:
tugcekucukoglu 2023-10-31 16:03:45 +03:00
parent 45cf341c9d
commit 8ec53fc790
4 changed files with 48 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

24
doc/confirmdialog/HeadlessDoc.vue
View file

@ -3,7 +3,7 @@
<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 }">
<template #container="{ message, acceptCallback, rejectCallback }">
<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>
@ -11,8 +11,8 @@
<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>
<Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
</div>
</div>
</template>
@ -30,7 +30,7 @@ export default {
code: {
basic: `
<ConfirmDialog group="headless">
<template #container="{ message, onAccept, onReject }">
<template #container="{ message, acceptCallback, rejectCallback }">
<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>
@ -38,8 +38,8 @@ export default {
<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>
<Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
</div>
</div>
</template>
@ -49,7 +49,7 @@ export default {
options: `
<template>
<ConfirmDialog group="headless">
<template #container="{ message, onAccept, onReject }">
<template #container="{ message, acceptCallback, rejectCallback }">
<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>
@ -57,8 +57,8 @@ export default {
<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>
<Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
</div>
</div>
</template>
@ -92,7 +92,7 @@ export default {
composition: `
<template>
<ConfirmDialog group="headless">
<template #container="{ message, onAccept, onReject }">
<template #container="{ message, acceptCallback, rejectCallback }">
<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>
@ -100,8 +100,8 @@ export default {
<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>
<Button label="Save" @click="acceptCallback"></Button>
<Button label="Cancel" outlined @click="rejectCallback"></Button>
</div>
</div>
</template>