Refactored ConfirmDialog demos
Cagatay Civici
parent
916a9dfbc9
commit
b9c0574c5a
|
|
@ -15,6 +15,7 @@
|
|||
:unstyled="unstyled"
|
||||
>
|
||||
<template v-if="$slots.container" #container="slotProps">
|
||||
sds
|
||||
<slot name="container" :message="confirmation" :onClose="slotProps.onClose" :onAccept="accept" :onReject="reject" />
|
||||
</template>
|
||||
<template v-if="!$slots.container">
|
||||
|
|
|
|||
|
|
@ -78,7 +78,8 @@ export default {
|
|||
basic: `
|
||||
<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: {
|
||||
basic: `
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<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>
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
basic: `
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
<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: `
|
||||
<template>
|
||||
|
|
@ -26,7 +26,7 @@ export default {
|
|||
<ConfirmDialog></ConfirmDialog>
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -51,7 +51,8 @@ export default {
|
|||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
acceptClass: 'p-button-danger',
|
||||
rejectClass: 'p-button-text p-button-text',
|
||||
acceptClass: 'p-button-danger p-button-text',
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
|
||||
},
|
||||
|
|
@ -70,7 +71,7 @@ export default {
|
|||
<ConfirmDialog></ConfirmDialog>
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -100,7 +101,8 @@ const confirm2 = () => {
|
|||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
acceptClass: 'p-button-danger',
|
||||
rejectClass: 'p-button-text p-button-text',
|
||||
acceptClass: 'p-button-danger p-button-text',
|
||||
accept: () => {
|
||||
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?',
|
||||
header: 'Delete Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
acceptClass: 'p-button-danger',
|
||||
rejectClass: 'p-button-text p-button-text',
|
||||
acceptClass: 'p-button-danger p-button-text',
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</DocSectionText>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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"></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>
|
||||
<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"></Button>
|
||||
<Button label="Cancel" outlined @click="onReject"></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"></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>
|
||||
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>
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<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>
|
||||
<ConfirmDialog group="positionDialog"></ConfirmDialog>
|
||||
<ConfirmDialog group="positioned"></ConfirmDialog>
|
||||
<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('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
|
||||
</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('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>
|
||||
|
|
@ -28,12 +28,12 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<ConfirmDialog group="positionDialog"></ConfirmDialog>
|
||||
<div class="flex flex-wrap justify-content-center gap-2 mb-2">
|
||||
<ConfirmDialog group="positioned"></ConfirmDialog>
|
||||
<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('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
|
||||
</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('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>
|
||||
|
|
@ -47,13 +47,13 @@ export default {
|
|||
options: `
|
||||
<template>
|
||||
<Toast />
|
||||
<ConfirmDialog group="positionDialog"></ConfirmDialog>
|
||||
<ConfirmDialog group="positioned"></ConfirmDialog>
|
||||
<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('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
|
||||
</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('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>
|
||||
|
|
@ -71,16 +71,16 @@ export default {
|
|||
methods: {
|
||||
confirmPosition(position) {
|
||||
this.$confirm.require({
|
||||
group: 'positionDialog',
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
group: 'positioned',
|
||||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
position: position,
|
||||
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: () => {
|
||||
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: `
|
||||
<template>
|
||||
<Toast />
|
||||
<ConfirmDialog group="positionDialog"></ConfirmDialog>
|
||||
<ConfirmDialog group="positioned"></ConfirmDialog>
|
||||
<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('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
|
||||
</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('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>
|
||||
|
|
@ -119,16 +119,16 @@ const toast = useToast();
|
|||
|
||||
const confirmPosition = (position) => {
|
||||
confirm.require({
|
||||
group: 'positionDialog',
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
group: 'positioned',
|
||||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
position: position,
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
|
||||
},
|
||||
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: {
|
||||
confirmPosition(position) {
|
||||
this.$confirm.require({
|
||||
group: 'positionDialog',
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
group: 'positioned',
|
||||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
position: position,
|
||||
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: () => {
|
||||
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 });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
import AccessibilityDoc from '@/doc/confirmdialog/AccessibilityDoc.vue';
|
||||
import BasicDoc from '@/doc/confirmdialog/BasicDoc.vue';
|
||||
import ConfirmationServiceDoc from '@/doc/confirmdialog/ConfirmationServiceDoc.vue';
|
||||
import HeadlessDoc from '@/doc/confirmdialog/HeadlessDoc.vue';
|
||||
import ImportDoc from '@/doc/confirmdialog/ImportDoc.vue';
|
||||
import PositionDoc from '@/doc/confirmdialog/PositionDoc.vue';
|
||||
import TemplateDoc from '@/doc/confirmdialog/TemplateDoc.vue';
|
||||
|
|
@ -31,7 +32,7 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 'confirmation-service',
|
||||
label: 'Confirmation Service',
|
||||
label: 'Service',
|
||||
component: ConfirmationServiceDoc
|
||||
},
|
||||
{
|
||||
|
|
@ -49,6 +50,11 @@ export default {
|
|||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'headless',
|
||||
label: 'Headless',
|
||||
component: HeadlessDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
|
|
|
|||
Loading…
Reference in New Issue