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

Update dialog docs

pull/5161/head
Cagatay Civici 2024-01-24 09:54:02 +03:00
parent 88bb7e6980
commit c9901c3c0c
8 changed files with 168 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
doc/confirmdialog/BasicDoc.vue
View File

@ -4,8 +4,8 @@
</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()" label="Save" outlined></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button> <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -17,16 +17,16 @@ export default {
code: { code: {
basic: ` basic: `
<ConfirmDialog></ConfirmDialog> <ConfirmDialog></ConfirmDialog>
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1()" label="Save" outlined></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button> <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
`, `,
options: ` options: `
<template> <template>
<Toast /> <Toast />
<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()" label="Save" outlined></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button> <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
</div> </div>
</template> </template>
@ -38,6 +38,9 @@ export default {
message: 'Are you sure you want to proceed?', message: 'Are you sure you want to proceed?',
header: 'Confirmation', header: 'Confirmation',
icon: 'pi pi-exclamation-triangle', icon: 'pi pi-exclamation-triangle',
rejectClass: 'p-button-secondary p-button-outlined',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
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 });
}, },
@ -49,10 +52,12 @@ export default {
confirm2() { confirm2() {
this.$confirm.require({ this.$confirm.require({
message: 'Do you want to delete this record?', message: 'Do you want to delete this record?',
header: 'Delete Confirmation', header: 'Danger Zone',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
rejectClass: 'p-button-text p-button-text', rejectLabel: 'Cancel',
acceptClass: 'p-button-danger p-button-text', acceptLabel: 'Delete',
rejectClass: 'p-button-secondary p-button-outlined',
acceptClass: 'p-button-danger',
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,8 +75,8 @@ export default {
<Toast /> <Toast />
<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()" label="Save" outlined></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button> <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
</div> </div>
</template> </template>
@ -87,6 +92,9 @@ const confirm1 = () => {
message: 'Are you sure you want to proceed?', message: 'Are you sure you want to proceed?',
header: 'Confirmation', header: 'Confirmation',
icon: 'pi pi-exclamation-triangle', icon: 'pi pi-exclamation-triangle',
rejectClass: 'p-button-secondary p-button-outlined',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
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 });
}, },
@ -99,10 +107,12 @@ const confirm1 = () => {
const confirm2 = () => { const confirm2 = () => {
confirm.require({ confirm.require({
message: 'Do you want to delete this record?', message: 'Do you want to delete this record?',
header: 'Delete Confirmation', header: 'Danger Zone',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
rejectClass: 'p-button-text p-button-text', rejectLabel: 'Cancel',
acceptClass: 'p-button-danger p-button-text', acceptLabel: 'Delete',
rejectClass: 'p-button-secondary p-button-outlined',
acceptClass: 'p-button-danger',
accept: () => { accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
}, },
@ -122,6 +132,9 @@ const confirm2 = () => {
message: 'Are you sure you want to proceed?', message: 'Are you sure you want to proceed?',
header: 'Confirmation', header: 'Confirmation',
icon: 'pi pi-exclamation-triangle', icon: 'pi pi-exclamation-triangle',
rejectClass: 'p-button-secondary p-button-outlined',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
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 });
}, },
@ -133,10 +146,12 @@ const confirm2 = () => {
confirm2() { confirm2() {
this.$confirm.require({ this.$confirm.require({
message: 'Do you want to delete this record?', message: 'Do you want to delete this record?',
header: 'Delete Confirmation', header: 'Danger Zone',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
rejectClass: 'p-button-text p-button-text', rejectLabel: 'Cancel',
acceptClass: 'p-button-danger p-button-text', acceptLabel: 'Delete',
rejectClass: 'p-button-secondary p-button-outlined',
acceptClass: 'p-button-danger',
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 });
}, },

8
doc/confirmdialog/HeadlessDoc.vue
View File

@ -18,7 +18,7 @@
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button> <Button @click="requireConfirmation()" label="Save"></Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -44,7 +44,7 @@ export default {
</div> </div>
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button> <Button @click="requireConfirmation()" label="Save"></Button>
`, `,
options: ` options: `
<template> <template>
@ -64,7 +64,7 @@ export default {
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button> <Button @click="requireConfirmation()" label="Save"></Button>
</div> </div>
<Toast /> <Toast />
</template> </template>
@ -107,7 +107,7 @@ export default {
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button> <Button @click="requireConfirmation()" label="Save"></Button>
</div> </div>
<Toast /> <Toast />
</template> </template>

76
doc/confirmdialog/PositionDoc.vue
View File

@ -5,18 +5,18 @@
<ConfirmDialog group="positioned"></ConfirmDialog> <ConfirmDialog group="positioned"></ConfirmDialog>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-3"> <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="secondary" 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="secondary" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-3"> <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="secondary" 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="secondary" 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="secondary" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -30,18 +30,18 @@ export default {
basic: ` basic: `
<ConfirmDialog group="positioned"></ConfirmDialog> <ConfirmDialog group="positioned"></ConfirmDialog>
<div class="flex flex-wrap justify-content-center gap-2 mb-3"> <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="secondary" 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="secondary" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-3"> <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="secondary" 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="secondary" 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="secondary" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
</div> </div>
`, `,
options: ` options: `
@ -50,18 +50,18 @@ export default {
<ConfirmDialog group="positioned"></ConfirmDialog> <ConfirmDialog group="positioned"></ConfirmDialog>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-3"> <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="secondary" 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="secondary" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-3"> <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="secondary" 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="secondary" 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="secondary" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -76,6 +76,10 @@ export default {
header: 'Confirmation', header: 'Confirmation',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
position: position, position: position,
rejectClass: 'p-button-secondary p-button-text',
acceptClass: 'p-button-text',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
}, },
@ -94,18 +98,18 @@ export default {
<ConfirmDialog group="positioned"></ConfirmDialog> <ConfirmDialog group="positioned"></ConfirmDialog>
<div class="card"> <div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-3"> <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="secondary" 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="secondary" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2 mb-3"> <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="secondary" 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="secondary" 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="secondary" style="min-width: 10rem"></Button>
</div> </div>
<div class="flex flex-wrap justify-content-center gap-2"> <div class="flex flex-wrap justify-content-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -124,6 +128,10 @@ const confirmPosition = (position) => {
header: 'Confirmation', header: 'Confirmation',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
position: position, position: position,
rejectClass: 'p-button-secondary p-button-text',
acceptClass: 'p-button-text',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
accept: () => { accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 }); toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
}, },
@ -145,6 +153,10 @@ const confirmPosition = (position) => {
header: 'Confirmation', header: 'Confirmation',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
position: position, position: position,
rejectClass: 'p-button-secondary p-button-text',
acceptClass: 'p-button-text',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
}, },

26
doc/confirmdialog/TemplateDoc.vue
View File

@ -11,7 +11,7 @@
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button> <Button @click="showTemplate()" label="Save"></Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -30,7 +30,7 @@ export default {
</div> </div>
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button> <Button @click="showTemplate()" label="Save"></Button>
`, `,
options: ` options: `
<template> <template>
@ -43,7 +43,7 @@ export default {
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button> <Button @click="showTemplate()" label="Save"></Button>
</div> </div>
<Toast /> <Toast />
</template> </template>
@ -59,8 +59,10 @@ export default {
icon: 'pi pi-exclamation-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', rejectClass: 'p-button-outlined p-button-sm',
acceptClass: 'p-button-outlined p-button-sm', acceptClass: 'p-button-sm',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
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 });
}, },
@ -84,7 +86,7 @@ export default {
</template> </template>
</ConfirmDialog> </ConfirmDialog>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button> <Button @click="showTemplate()" label="Save"></Button>
</div> </div>
<Toast /> <Toast />
</template> </template>
@ -104,8 +106,10 @@ const showTemplate = () => {
icon: 'pi pi-exclamation-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', rejectClass: 'p-button-outlined p-button-sm',
acceptClass: 'p-button-outlined p-button-sm', acceptClass: 'p-button-sm',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
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 });
}, },
@ -128,8 +132,10 @@ const showTemplate = () => {
icon: 'pi pi-exclamation-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', rejectClass: 'p-button-outlined p-button-sm',
acceptClass: 'p-button-outlined p-button-sm', acceptClass: 'p-button-sm',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
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 });
}, },

37
doc/confirmpopup/BasicDoc.vue
View File

@ -4,8 +4,8 @@
</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)" label="Save" outlined></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button> <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -17,16 +17,16 @@ export default {
code: { code: {
basic: ` basic: `
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="confirm1($event)" label="Save" outlined></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button> <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
`, `,
options: ` options: `
<template> <template>
<Toast /> <Toast />
<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)" label="Save" outlined></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button> <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
</div> </div>
</template> </template>
@ -38,6 +38,10 @@ export default {
target: event.currentTarget, target: event.currentTarget,
message: 'Are you sure you want to proceed?', message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle', icon: 'pi pi-exclamation-triangle',
rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
acceptClass: 'p-button-sm',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
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 });
}, },
@ -51,7 +55,10 @@ 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',
rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
acceptClass: 'p-button-danger p-button-sm', acceptClass: 'p-button-danger p-button-sm',
rejectLabel: 'Cancel',
acceptLabel: 'Delete',
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 });
}, },
@ -69,8 +76,8 @@ export default {
<Toast /> <Toast />
<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)" label="Save" outlined></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button> <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
</div> </div>
</template> </template>
@ -86,6 +93,10 @@ const confirm1 = (event) => {
target: event.currentTarget, target: event.currentTarget,
message: 'Are you sure you want to proceed?', message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle', icon: 'pi pi-exclamation-triangle',
rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
acceptClass: 'p-button-sm',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
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 });
}, },
@ -100,7 +111,10 @@ 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',
rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
acceptClass: 'p-button-danger p-button-sm', acceptClass: 'p-button-danger p-button-sm',
rejectLabel: 'Cancel',
acceptLabel: 'Delete',
accept: () => { accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
}, },
@ -120,6 +134,10 @@ const confirm2 = (event) => {
target: event.currentTarget, target: event.currentTarget,
message: 'Are you sure you want to proceed?', message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle', icon: 'pi pi-exclamation-triangle',
rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
acceptClass: 'p-button-sm',
rejectLabel: 'Cancel',
acceptLabel: 'Save',
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 });
}, },
@ -133,7 +151,10 @@ 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',
rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
acceptClass: 'p-button-danger p-button-sm', acceptClass: 'p-button-danger p-button-sm',
rejectLabel: 'Cancel',
acceptLabel: 'Delete',
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 });
}, },

38
doc/confirmpopup/HeadlessDoc.vue
View File

@ -4,17 +4,17 @@
</DocSectionText> </DocSectionText>
<ConfirmPopup group="headless"> <ConfirmPopup group="headless">
<template #container="{ message, acceptCallback, rejectCallback }"> <template #container="{ message, acceptCallback, rejectCallback }">
<div class="bg-gray-900 text-white border-round p-3"> <div class="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="acceptCallback" size="small" outlined></Button> <Button label="Save" @click="acceptCallback" size="small"></Button>
<Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button> <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
</div> </div>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="requireConfirmation($event)" label="Save"></Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -27,33 +27,33 @@ export default {
basic: ` basic: `
<ConfirmPopup group="headless"> <ConfirmPopup group="headless">
<template #container="{ message, acceptCallback, rejectCallback }"> <template #container="{ message, acceptCallback, rejectCallback }">
<div class="bg-gray-900 text-white border-round p-3"> <div class="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="acceptCallback" size="small" outlined></Button> <Button label="Save" @click="acceptCallback" size="small"></Button>
<Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button> <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
</div> </div>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="requireConfirmation($event)" label="Save"></Button>
`, `,
options: ` options: `
<template> <template>
<Toast /> <Toast />
<ConfirmPopup group="headless"> <ConfirmPopup group="headless">
<template #container="{ message, acceptCallback, rejectCallback }"> <template #container="{ message, acceptCallback, rejectCallback }">
<div class="bg-gray-900 text-white border-round p-3"> <div class="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="acceptCallback" size="small" outlined></Button> <Button label="Save" @click="acceptCallback" size="small"></Button>
<Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button> <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
</div> </div>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="requireConfirmation($event)" label="Save"></Button>
</div> </div>
</template> </template>
@ -64,7 +64,7 @@ export default {
this.$confirm.require({ this.$confirm.require({
target: event.currentTarget, target: event.currentTarget,
group: 'headless', group: 'headless',
message: 'Are you sure? You cannot undo this.', message: 'Save your current process?',
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 });
}, },
@ -82,17 +82,17 @@ export default {
<Toast /> <Toast />
<ConfirmPopup group="headless"> <ConfirmPopup group="headless">
<template #container="{ message, acceptCallback, rejectCallback }"> <template #container="{ message, acceptCallback, rejectCallback }">
<div class="bg-gray-900 text-white border-round p-3"> <div class="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="acceptCallback" size="small" outlined></Button> <Button label="Save" @click="acceptCallback" size="small"></Button>
<Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button> <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
</div> </div>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="requireConfirmation($event)" label="Save"></Button>
</div> </div>
</template> </template>
@ -107,7 +107,7 @@ const requireConfirmation = (event) => {
confirm.require({ confirm.require({
target: event.currentTarget, target: event.currentTarget,
group: 'headless', group: 'headless',
message: 'Are you sure? You cannot undo this.', message: 'Save your current process?',
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});
}, },
@ -126,7 +126,7 @@ const requireConfirmation = (event) => {
this.$confirm.require({ this.$confirm.require({
target: event.currentTarget, target: event.currentTarget,
group: 'headless', group: 'headless',
message: 'Are you sure? You cannot undo this.', message: 'Save your current process?',
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 });
}, },

34
doc/confirmpopup/TemplateDoc.vue
View File

@ -4,14 +4,14 @@
</DocSectionText> </DocSectionText>
<ConfirmPopup group="templating"> <ConfirmPopup group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
<i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="showTemplate($event)" label="Save"></Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -24,27 +24,27 @@ export default {
basic: ` basic: `
<ConfirmPopup group="templating"> <ConfirmPopup group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
<i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="showTemplate($event)" label="Save"></Button>
`, `,
options: ` options: `
<template> <template>
<Toast /> <Toast />
<ConfirmPopup group="templating"> <ConfirmPopup group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
<i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="showTemplate($event)" label="Save"></Button>
</div> </div>
</template> </template>
@ -59,8 +59,10 @@ export default {
icon: 'pi pi-exclamation-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', acceptLabel: 'Confirm',
acceptClass: 'p-button-outlined p-button-sm', rejectLabel: 'Cancel',
rejectClass: 'p-button-outlined p-button-sm',
acceptClass: '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 });
}, },
@ -78,14 +80,14 @@ export default {
<Toast /> <Toast />
<ConfirmPopup group="templating"> <ConfirmPopup group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
<i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button> <Button @click="showTemplate($event)" label="Save"></Button>
</div> </div>
</template> </template>
@ -104,8 +106,10 @@ const showTemplate = (event) => {
icon: 'pi pi-exclamation-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', acceptLabel: 'Confirm',
acceptClass: 'p-button-outlined p-button-sm', rejectLabel: 'Cancel',
rejectClass: 'p-button-outlined p-button-sm',
acceptClass: '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});
}, },
@ -128,8 +132,10 @@ const showTemplate = (event) => {
icon: 'pi pi-exclamation-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', acceptLabel: 'Confirm',
acceptClass: 'p-button-outlined p-button-sm', rejectLabel: 'Cancel',
rejectClass: 'p-button-outlined p-button-sm',
acceptClass: '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
doc/dialog/TemplateDoc.vue
View File

@ -22,7 +22,7 @@
<InputText id="Email" class="flex-auto" autocomplete="off" /> <InputText id="Email" class="flex-auto" autocomplete="off" />
</div> </div>
<template #footer> <template #footer>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Save" outlined @click="visible = false" autofocus />
</template> </template>
</Dialog> </Dialog>
</div> </div>
@ -55,7 +55,7 @@ export default {
<InputText id="Email" class="flex-auto" autocomplete="off" /> <InputText id="Email" class="flex-auto" autocomplete="off" />
</div> </div>
<template #footer> <template #footer>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Save" outlined @click="visible = false" autofocus />
</template> </template>
</Dialog> </Dialog>
`, `,
@ -80,7 +80,7 @@ export default {
<InputText id="Email" class="flex-auto" autocomplete="off" /> <InputText id="Email" class="flex-auto" autocomplete="off" />
</div> </div>
<template #footer> <template #footer>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Save" outlined @click="visible = false" autofocus />
</template> </template>
</Dialog> </Dialog>
</div> </div>
@ -117,7 +117,7 @@ export default {
<InputText id="Email" class="flex-auto" autocomplete="off" /> <InputText id="Email" class="flex-auto" autocomplete="off" />
</div> </div>
<template #footer> <template #footer>
<Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus /> <Button label="Save" outlined @click="visible = false" autofocus />
</template> </template>
</Dialog> </Dialog>
</div> </div>