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

Headless demo callback updates

pull/4806/head
tugcekucukoglu 2023-10-31 16:03:45 +03:00
parent 45cf341c9d
commit 8ec53fc790
4 changed files with 48 additions and 48 deletions
Show Stats 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> <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> </DocSectionText>
<ConfirmDialog group="headless"> <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="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"> <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> <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> <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p> <p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4"> <div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="onAccept" class="w-8rem"></Button> <Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button> <Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -30,7 +30,7 @@ export default {
code: { code: {
basic: ` basic: `
<ConfirmDialog group="headless"> <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="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"> <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> <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> <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p> <p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4"> <div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="onAccept" class="w-8rem"></Button> <Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button> <Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -49,7 +49,7 @@ export default {
options: ` options: `
<template> <template>
<ConfirmDialog group="headless"> <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="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"> <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> <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> <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p> <p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4"> <div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="onAccept" class="w-8rem"></Button> <Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button> <Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -92,7 +92,7 @@ export default {
composition: ` composition: `
<template> <template>
<ConfirmDialog group="headless"> <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="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"> <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> <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> <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p> <p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4"> <div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="onAccept"></Button> <Button label="Save" @click="acceptCallback"></Button>
<Button label="Cancel" outlined @click="onReject"></Button> <Button label="Cancel" outlined @click="rejectCallback"></Button>
</div> </div>
</div> </div>
</template> </template>

24
doc/confirmpopup/HeadlessDoc.vue
View File

@ -3,12 +3,12 @@
<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> <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> </DocSectionText>
<ConfirmPopup group="headless"> <ConfirmPopup group="headless">
<template #container="{ message, onAccept, onReject }"> <template #container="{ message, acceptCallback, rejectCallback }">
<div class="bg-gray-900 text-white border-round p-3"> <div class="bg-gray-900 text-white border-round p-3">
<span>{{ message.message }}</span> <span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3"> <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="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
<Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button> <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -26,12 +26,12 @@ export default {
code: { code: {
basic: ` basic: `
<ConfirmPopup group="headless"> <ConfirmPopup group="headless">
<template #container="{ message, onAccept, onReject }"> <template #container="{ message, acceptCallback, rejectCallback }">
<div class="bg-gray-900 text-white border-round p-3"> <div class="bg-gray-900 text-white border-round p-3">
<span>{{ message.message }}</span> <span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3"> <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="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
<Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button> <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -42,12 +42,12 @@ export default {
<template> <template>
<Toast /> <Toast />
<ConfirmPopup group="headless"> <ConfirmPopup group="headless">
<template #container="{ message, onAccept, onReject }"> <template #container="{ message, acceptCallback, rejectCallback }">
<div class="bg-gray-900 text-white border-round p-3"> <div class="bg-gray-900 text-white border-round p-3">
<span>{{ message.message }}</span> <span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3"> <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="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
<Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button> <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -81,12 +81,12 @@ export default {
<template> <template>
<Toast /> <Toast />
<ConfirmPopup group="headless"> <ConfirmPopup group="headless">
<template #container="{ message, onAccept, onReject }"> <template #container="{ message, acceptCallback, rejectCallback }">
<div class="bg-gray-900 text-white border-round p-3"> <div class="bg-gray-900 text-white border-round p-3">
<span>{{ message.message }}</span> <span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3"> <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="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
<Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button> <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
</div> </div>
</div> </div>
</template> </template>

24
doc/dialog/HeadlessDoc.vue
View File

@ -14,7 +14,7 @@
} }
}" }"
> >
<template #container="{ onClose }"> <template #container="{ closeCallback }">
<div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))"> <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
<path <path
@ -35,8 +35,8 @@
<InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText> <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText>
</div> </div>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<Button label="Sign-In" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button> <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
<Button label="Cancel" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button> <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -63,7 +63,7 @@ export default {
} }
}" }"
> >
<template #container="{ onClose }"> <template #container="{ closeCallback }">
<div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))"> <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
<path d="..." fill="var(--primary-700)"/> <path d="..." fill="var(--primary-700)"/>
@ -78,8 +78,8 @@ export default {
<InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText> <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText>
</div> </div>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<Button label="Sign-In" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button> <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
<Button label="Cancel" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button> <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -99,7 +99,7 @@ export default {
} }
}" }"
> >
<template #container="{ onClose }"> <template #container="{ closeCallback }">
<div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))"> <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
<path <path
@ -120,8 +120,8 @@ export default {
<InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText> <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText>
</div> </div>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<Button label="Sign-In" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button> <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
<Button label="Cancel" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button> <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -153,7 +153,7 @@ export default {
} }
}" }"
> >
<template #container="{ onClose }"> <template #container="{ closeCallback }">
<div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))"> <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
<path <path
@ -174,8 +174,8 @@ export default {
<InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText> <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText>
</div> </div>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<Button label="Sign-In" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button> <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
<Button label="Cancel" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button> <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
</div> </div>
</div> </div>
</template> </template>

24
doc/toast/HeadlessDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, onClose }"> <template #container="{ message, closeCallback }">
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px"> <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
<div class="flex flex-column gap-3 w-full"> <div class="flex flex-column gap-3 w-full">
@ -15,8 +15,8 @@
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label> <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
</div> </div>
<div class="flex gap-3 mb-3"> <div class="flex gap-3 mb-3">
<Button label="Another Upload?" text class="p-0" @click="onClose"></Button> <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
<Button label="Cancel" text class="text-white p-0" @click="onClose"></Button> <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
</div> </div>
</div> </div>
</section> </section>
@ -37,7 +37,7 @@ export default {
code: { code: {
basic: ` basic: `
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, onClose }"> <template #container="{ message, closeCallback }">
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px"> <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
<div class="flex flex-column gap-3 w-full"> <div class="flex flex-column gap-3 w-full">
@ -48,8 +48,8 @@ export default {
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label> <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
</div> </div>
<div class="flex gap-3 mb-3"> <div class="flex gap-3 mb-3">
<Button label="Another Upload?" text class="p-0" @click="onClose"></Button> <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
<Button label="Cancel" text class="text-white p-0" @click="onClose"></Button> <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
</div> </div>
</div> </div>
</section> </section>
@ -61,7 +61,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, onClose }"> <template #container="{ message, closeCallback }">
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px"> <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
<div class="flex flex-column gap-3 w-full"> <div class="flex flex-column gap-3 w-full">
@ -72,8 +72,8 @@ export default {
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label> <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
</div> </div>
<div class="flex gap-3 mb-3"> <div class="flex gap-3 mb-3">
<Button label="Another Upload?" text class="p-0" @click="onClose"></Button> <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
<Button label="Cancel" text class="text-white p-0" @click="onClose"></Button> <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
</div> </div>
</div> </div>
</section> </section>
@ -128,7 +128,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, onClose }"> <template #container="{ message, closeCallback }">
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px"> <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
<div class="flex flex-column gap-3 w-full"> <div class="flex flex-column gap-3 w-full">
@ -139,8 +139,8 @@ export default {
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label> <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
</div> </div>
<div class="flex gap-3 mb-3"> <div class="flex gap-3 mb-3">
<Button label="Another Upload?" text class="p-0" @click="onClose"></Button> <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
<Button label="Cancel" text class="text-white p-0" @click="onClose"></Button> <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
</div> </div>
</div> </div>
</section> </section>