From fff0c59e2749808fbc83e2b3efd3e29bbba30c0b Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Wed, 27 Mar 2024 18:45:43 +0300 Subject: [PATCH] Confirm* demo updates --- doc/confirmdialog/BasicDoc.vue | 71 ++++++++++++++++++++--------- doc/confirmdialog/PositionDoc.vue | 38 +++++++++++----- doc/confirmdialog/TemplateDoc.vue | 51 +++++++++++++-------- doc/confirmpopup/BasicDoc.vue | 75 +++++++++++++++++++++---------- doc/confirmpopup/TemplateDoc.vue | 45 +++++++++++-------- doc/steps/TemplateDoc.vue | 1 - 6 files changed, 189 insertions(+), 92 deletions(-) diff --git a/doc/confirmdialog/BasicDoc.vue b/doc/confirmdialog/BasicDoc.vue index b1dc45d75..4c5cd1add 100644 --- a/doc/confirmdialog/BasicDoc.vue +++ b/doc/confirmdialog/BasicDoc.vue @@ -38,9 +38,14 @@ export default { message: 'Are you sure you want to proceed?', header: 'Confirmation', icon: 'pi pi-exclamation-triangle', - rejectClass: 'p-button-secondary p-button-outlined', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Save' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, @@ -54,10 +59,15 @@ export default { message: 'Do you want to delete this record?', header: 'Danger Zone', icon: 'pi pi-info-circle', - rejectLabel: 'Cancel', - acceptLabel: 'Delete', - rejectClass: 'p-button-secondary p-button-outlined', - acceptClass: 'p-button-danger', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Delete', + severity: 'danger' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); }, @@ -92,9 +102,14 @@ const confirm1 = () => { message: 'Are you sure you want to proceed?', header: 'Confirmation', icon: 'pi pi-exclamation-triangle', - rejectClass: 'p-button-secondary p-button-outlined', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Save' + }, accept: () => { toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, @@ -110,9 +125,15 @@ const confirm2 = () => { header: 'Danger Zone', icon: 'pi pi-info-circle', rejectLabel: 'Cancel', - acceptLabel: 'Delete', - rejectClass: 'p-button-secondary p-button-outlined', - acceptClass: 'p-button-danger', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Delete', + severity: 'danger' + }, accept: () => { toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); }, @@ -132,9 +153,14 @@ const confirm2 = () => { message: 'Are you sure you want to proceed?', header: 'Confirmation', icon: 'pi pi-exclamation-triangle', - rejectClass: 'p-button-secondary p-button-outlined', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Save' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, @@ -148,10 +174,15 @@ const confirm2 = () => { message: 'Do you want to delete this record?', header: 'Danger Zone', icon: 'pi pi-info-circle', - rejectLabel: 'Cancel', - acceptLabel: 'Delete', - rejectClass: 'p-button-secondary p-button-outlined', - acceptClass: 'p-button-danger', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Delete', + severity: 'danger' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); }, diff --git a/doc/confirmdialog/PositionDoc.vue b/doc/confirmdialog/PositionDoc.vue index ac8fa5cbe..325039aea 100644 --- a/doc/confirmdialog/PositionDoc.vue +++ b/doc/confirmdialog/PositionDoc.vue @@ -77,9 +77,15 @@ export default { icon: 'pi pi-info-circle', position: position, rejectClass: 'p-button-secondary p-button-text', - acceptClass: 'p-button-text', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + text: true + }, + acceptProps: { + label: 'Save', + text: true + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 }); }, @@ -128,10 +134,15 @@ const confirmPosition = (position) => { header: 'Confirmation', icon: 'pi pi-info-circle', position: position, - rejectClass: 'p-button-secondary p-button-text', - acceptClass: 'p-button-text', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + text: true + }, + acceptProps: { + label: 'Save', + text: true + }, accept: () => { toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 }); }, @@ -153,10 +164,15 @@ const confirmPosition = (position) => { header: 'Confirmation', icon: 'pi pi-info-circle', position: position, - rejectClass: 'p-button-secondary p-button-text', - acceptClass: 'p-button-text', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + text: true + }, + acceptProps: { + label: 'Save', + text: true + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 }); }, diff --git a/doc/confirmdialog/TemplateDoc.vue b/doc/confirmdialog/TemplateDoc.vue index 38850982b..6356801f4 100644 --- a/doc/confirmdialog/TemplateDoc.vue +++ b/doc/confirmdialog/TemplateDoc.vue @@ -57,12 +57,17 @@ export default { header: 'Confirmation', message: 'Please confirm to proceed moving forward.', icon: 'pi pi-exclamation-circle', - acceptIcon: 'pi pi-check', - rejectIcon: 'pi pi-times', - rejectClass: 'p-button-outlined p-button-sm', - acceptClass: 'p-button-sm', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + icon: 'pi pi-times', + outlined: true, + size: 'small' + }, + acceptProps: { + label: 'Save', + icon: 'pi pi-check', + size: 'small' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, @@ -104,12 +109,17 @@ const showTemplate = () => { header: 'Confirmation', message: 'Please confirm to proceed moving forward.', icon: 'pi pi-exclamation-circle', - acceptIcon: 'pi pi-check', - rejectIcon: 'pi pi-times', - rejectClass: 'p-button-outlined p-button-sm', - acceptClass: 'p-button-sm', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + icon: 'pi pi-times', + outlined: true, + size: 'small' + }, + acceptProps: { + label: 'Save', + icon: 'pi pi-check', + size: 'small' + }, accept: () => { toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, @@ -130,12 +140,17 @@ const showTemplate = () => { header: 'Confirmation', message: 'Please confirm to proceed moving forward.', icon: 'pi pi-exclamation-circle', - acceptIcon: 'pi pi-check', - rejectIcon: 'pi pi-times', - rejectClass: 'p-button-outlined p-button-sm', - acceptClass: 'p-button-sm', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + icon: 'pi pi-times', + outlined: true, + size: 'small' + }, + acceptProps: { + label: 'Save', + icon: 'pi pi-check', + size: 'small' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, diff --git a/doc/confirmpopup/BasicDoc.vue b/doc/confirmpopup/BasicDoc.vue index 2bbb340a5..478dc8357 100644 --- a/doc/confirmpopup/BasicDoc.vue +++ b/doc/confirmpopup/BasicDoc.vue @@ -38,10 +38,14 @@ export default { target: event.currentTarget, message: 'Are you sure you want to proceed?', icon: 'pi pi-exclamation-triangle', - rejectClass: 'p-button-secondary p-button-outlined p-button-sm', - acceptClass: 'p-button-sm', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Save' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, @@ -55,10 +59,15 @@ export default { target: event.currentTarget, message: 'Do you want to delete this record?', icon: 'pi pi-info-circle', - rejectClass: 'p-button-secondary p-button-outlined p-button-sm', - acceptClass: 'p-button-danger p-button-sm', - rejectLabel: 'Cancel', - acceptLabel: 'Delete', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Delete', + severity: 'danger' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); }, @@ -93,10 +102,14 @@ const confirm1 = (event) => { target: event.currentTarget, message: 'Are you sure you want to proceed?', icon: 'pi pi-exclamation-triangle', - rejectClass: 'p-button-secondary p-button-outlined p-button-sm', - acceptClass: 'p-button-sm', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Save' + }, accept: () => { toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, @@ -111,10 +124,15 @@ const confirm2 = (event) => { target: event.currentTarget, message: 'Do you want to delete this record?', icon: 'pi pi-info-circle', - rejectClass: 'p-button-secondary p-button-outlined p-button-sm', - acceptClass: 'p-button-danger p-button-sm', - rejectLabel: 'Cancel', - acceptLabel: 'Delete', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Delete', + severity: 'danger' + }, accept: () => { toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); }, @@ -134,10 +152,14 @@ const confirm2 = (event) => { target: event.currentTarget, message: 'Are you sure you want to proceed?', icon: 'pi pi-exclamation-triangle', - rejectClass: 'p-button-secondary p-button-outlined p-button-sm', - acceptClass: 'p-button-sm', - rejectLabel: 'Cancel', - acceptLabel: 'Save', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Save' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, @@ -151,10 +173,15 @@ const confirm2 = (event) => { target: event.currentTarget, message: 'Do you want to delete this record?', icon: 'pi pi-info-circle', - rejectClass: 'p-button-secondary p-button-outlined p-button-sm', - acceptClass: 'p-button-danger p-button-sm', - rejectLabel: 'Cancel', - acceptLabel: 'Delete', + rejectProps: { + label: 'Cancel', + severity: 'secondary', + outlined: true + }, + acceptProps: { + label: 'Delete', + severity: 'danger' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); }, diff --git a/doc/confirmpopup/TemplateDoc.vue b/doc/confirmpopup/TemplateDoc.vue index 610866079..27801ce8e 100644 --- a/doc/confirmpopup/TemplateDoc.vue +++ b/doc/confirmpopup/TemplateDoc.vue @@ -57,12 +57,15 @@ export default { group: 'templating', message: 'Please confirm to proceed moving forward.', icon: 'pi pi-exclamation-circle', - acceptIcon: 'pi pi-check', - rejectIcon: 'pi pi-times', - acceptLabel: 'Confirm', - rejectLabel: 'Cancel', - rejectClass: 'p-button-outlined p-button-sm', - acceptClass: 'p-button-sm', + rejectProps: { + icon: 'pi pi-times', + label: 'Cancel', + outlined: true + }, + acceptProps: { + icon: 'pi pi-check', + label: 'Confirm' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, @@ -104,12 +107,15 @@ const showTemplate = (event) => { group: 'templating', message: 'Please confirm to proceed moving forward.', icon: 'pi pi-exclamation-circle', - acceptIcon: 'pi pi-check', - rejectIcon: 'pi pi-times', - acceptLabel: 'Confirm', - rejectLabel: 'Cancel', - rejectClass: 'p-button-outlined p-button-sm', - acceptClass: 'p-button-sm', + rejectProps: { + icon: 'pi pi-times', + label: 'Cancel', + outlined: true + }, + acceptProps: { + icon: 'pi pi-check', + label: 'Confirm' + }, accept: () => { toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000}); }, @@ -130,12 +136,15 @@ const showTemplate = (event) => { group: 'templating', message: 'Please confirm to proceed moving forward.', icon: 'pi pi-exclamation-circle', - acceptIcon: 'pi pi-check', - rejectIcon: 'pi pi-times', - acceptLabel: 'Confirm', - rejectLabel: 'Cancel', - rejectClass: 'p-button-outlined p-button-sm', - acceptClass: 'p-button-sm', + rejectProps: { + icon: 'pi pi-times', + label: 'Cancel', + outlined: true + }, + acceptProps: { + icon: 'pi pi-check', + label: 'Confirm' + }, accept: () => { this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, diff --git a/doc/steps/TemplateDoc.vue b/doc/steps/TemplateDoc.vue index c94e4590f..8df116b53 100644 --- a/doc/steps/TemplateDoc.vue +++ b/doc/steps/TemplateDoc.vue @@ -124,7 +124,6 @@ const items = ref([ }; } }; -