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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/4696/head
tugcekucukoglu 2023-10-25 18:27:40 +03:00
parent b0fa143adb c79d79ad93
commit 670f868d5c
7 changed files with 58 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
doc/toast/BasicDoc.vue
View File

@ -1,8 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as
severity, summary and detail.
Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface that defines properties such as severity, summary and
detail.
</p>
</DocSectionText>
<div class="card flex justify-content-center">

1
doc/toast/MultipleDoc.vue
View File

@ -16,7 +16,6 @@ export default {
basic: `
<Toast />
<Button label="Multiple" severity="warning" @click="showMultiple()" />
`,
options: `
<template>

22
doc/toast/PositionDoc.vue
View File

@ -1,12 +1,12 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Location of the messages is customized with the <i>position</i> property.</p>
<p>A message can be targeted to a certain Toast component by matching the <i>group</i> keys whereas location is customized with the <i>position</i>.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="flex flex-wrap gap-2">
<Button label="Top Left" class="mr-2" @click="showTopLeft" />
<Button label="Top Left" @click="showTopLeft" />
<Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<Button label="Bottom Right" severity="success" @click="showBottomRight" />
<Button label="Bottom Right" severity="help" @click="showBottomRight" />
</div>
</div>
<DocSectionCode :code="code" />
@ -22,11 +22,9 @@ export default {
<Toast position="bottom-left" group="bl" />
<Toast position="bottom-right" group="br" />
<div class="flex flex-wrap gap-2">
<Button label="Top Left" class="mr-2" @click="showTopLeft" />
<Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<Button label="Bottom Right" severity="success" @click="showBottomRight" />
</div>
<Button label="Top Left" @click="showTopLeft" />
<Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<Button label="Bottom Right" severity="help" @click="showBottomRight" />
`,
options: `
<template>
@ -36,9 +34,9 @@ export default {
<Toast position="bottom-right" group="br" />
<div class="flex flex-wrap gap-2">
<Button label="Top Left" class="mr-2" @click="showTopLeft" />
<Button label="Top Left" @click="showTopLeft" />
<Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<Button label="Bottom Right" severity="success" @click="showBottomRight" />
<Button label="Bottom Right" severity="help" @click="showBottomRight" />
</div>
</div>
</template>
@ -67,9 +65,9 @@ export default {
<Toast position="bottom-right" group="br" />
<div class="flex flex-wrap gap-2">
<Button label="Top Left" class="mr-2" @click="showTopLeft" />
<Button label="Top Left" @click="showTopLeft" />
<Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<Button label="Bottom Right" severity="success" @click="showBottomRight" />
<Button label="Bottom Right" severity="help" @click="showBottomRight" />
</div>
</div>
</template>

10
doc/toast/SeverityDoc.vue
View File

@ -20,12 +20,10 @@ export default {
code: {
basic: `
<Toast />
<div class="flex flex-wrap gap-2">
<Button label="Success" severity="success" @click="showSuccess" />
<Button label="Info" severity="info" @click="showInfo" />
<Button label="Warn" severity="warning" @click="showWarn" />
<Button label="Error" severity="danger" @click="showError" />
</div>
<Button label="Success" severity="success" @click="showSuccess" />
<Button label="Info" severity="info" @click="showInfo" />
<Button label="Warn" severity="warning" @click="showWarn" />
<Button label="Error" severity="danger" @click="showError" />
`,
options: `
<template>

14
doc/toast/StickyDoc.vue
View File

@ -4,8 +4,8 @@
</DocSectionText>
<div class="card flex justify-content-center">
<div class="flex flex-wrap gap-2">
<Button @click="showSticky" label="Sticky" severity="success" />
<Button label="Clear" @click="clear()" />
<Button @click="showSticky" label="Sticky" />
<Button label="Clear" severity="secondary" @click="clear()" />
</div>
</div>
<DocSectionCode :code="code" />
@ -19,15 +19,15 @@ export default {
basic: `
<Toast />
<Button @click="showSticky" label="Sticky" />
<Button label="Clear" @click="clear()" />
<Button label="Clear" severity="secondary" @click="clear()" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Toast />
<div class="flex flex-wrap gap-2">
<Button @click="showSticky" label="Sticky" severity="success" />
<Button label="Clear" @click="clear()" />
<Button @click="showSticky" label="Sticky" />
<Button label="Clear" severity="secondary" @click="clear()" />
</div>
</div>
</template>
@ -50,8 +50,8 @@ export default {
<div class="card flex justify-content-center">
<Toast />
<div class="flex flex-wrap gap-2">
<Button @click="showSticky" label="Sticky" severity="success" />
<Button label="Clear" @click="clear()" />
<Button @click="showSticky" label="Sticky" />
<Button label="Clear" severity="secondary" @click="clear()" />
</div>
</div>
</template>

89
doc/toast/TemplateDoc.vue
View File

@ -5,19 +5,17 @@
<div class="card flex justify-content-center">
<Toast position="bottom-center" group="bc" @close="onClose">
<template #message="slotProps">
<div class="flex flex-column align-items-center" style="flex: 1">
<div class="text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
</div>
<div class="flex gap-2">
<Button severity="success" label="Yes" @click="onConfirm()"></Button>
<Button severity="secondary" label="No" @click="onReject()"></Button>
<div class="flex flex-column align-items-start" style="flex: 1">
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-900">Amy Elsner</span>
</div>
<div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
<Button severity="success" outlined class="p-button-sm" label="Reply" @click="onReply()"></Button>
</div>
</template>
</Toast>
<Button @click="showTemplate" label="Confirm" />
<Button @click="showTemplate" label="View" />
</div>
<DocSectionCode :code="code" />
</template>
@ -31,38 +29,34 @@ export default {
basic: `
<Toast position="bottom-center" group="bc" @close="onClose">
<template #message="slotProps">
<div class="flex flex-column align-items-center" style="flex: 1">
<div class="text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
</div>
<div class="flex gap-2">
<Button severity="success" label="Yes" @click="onConfirm()"></Button>
<Button severity="secondary" label="No" @click="onReject()"></Button>
<div class="flex flex-column align-items-start" style="flex: 1">
<div class="flex align-items-center gap-2">
<Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-900">Amy Elsner</span>
</div>
<div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
<Button severity="success" outlined class="p-button-sm" label="Reply" @click="onReply()"></Button>
</div>
</template>
</Toast>
<Button @click="showTemplate" label="Confirm" />
<Button @click="showTemplate" label="View" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Toast position="bottom-center" group="bc" @close="onClose">
<template #message="slotProps">
<div class="flex flex-column align-items-center" style="flex: 1">
<div class="text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
</div>
<div class="flex gap-2">
<Button severity="success" label="Yes" @click="onConfirm()"></Button>
<Button severity="secondary" label="No" @click="onReject()"></Button>
<div class="flex flex-column align-items-start" style="flex: 1">
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-900">Amy Elsner</span>
</div>
<div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
<Button severity="success" outlined class="p-button-sm" label="Reply" @click="onReply()"></Button>
</div>
</template>
</Toast>
<Button @click="showTemplate" label="Confirm" />
<Button @click="showTemplate" label="View" />
</div>
</template>
@ -76,15 +70,11 @@ export default {
methods: {
showTemplate() {
if (!this.visible) {
this.$toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' });
this.$toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
this.visible = true;
}
},
onConfirm() {
this.$toast.removeGroup('bc');
this.visible = false;
},
onReject() {
onReply() {
this.$toast.removeGroup('bc');
this.visible = false;
},
@ -100,19 +90,17 @@ export default {
<div class="card flex justify-content-center">
<Toast position="bottom-center" group="bc" @close="onClose">
<template #message="slotProps">
<div class="flex flex-column align-items-center" style="flex: 1">
<div class="text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
</div>
<div class="flex gap-2">
<Button severity="success" label="Yes" @click="onConfirm()"></Button>
<Button severity="secondary" label="No" @click="onReject()"></Button>
<div class="flex flex-column align-items-start" style="flex: 1">
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-900">Amy Elsner</span>
</div>
<div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
<Button severity="success" outlined class="p-button-sm" label="Reply" @click="onReply()"></Button>
</div>
</template>
</Toast>
<Button @click="showTemplate" label="Confirm" />
<Button @click="showTemplate" label="View" />
</div>
</template>
@ -124,17 +112,12 @@ const visible = ref(false);
const showTemplate = () => {
if (!visible.value) {
toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' });
toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
visible.value = true;
}
};
const onConfirm = () => {
toast.removeGroup('bc');
visible.value = false;
}
const onReject = () => {
const onReply = () => {
toast.removeGroup('bc');
visible.value = false;
}
@ -150,15 +133,11 @@ const onClose = () => {
methods: {
showTemplate() {
if (!this.visible) {
this.$toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' });
this.$toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
this.visible = true;
}
},
onConfirm() {
this.$toast.removeGroup('bc');
this.visible = false;
},
onReject() {
onReply() {
this.$toast.removeGroup('bc');
this.visible = false;
},

2
doc/toast/ToastServiceDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<div class="doc-section-description">
<p><i>$toast</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useToast</i> function for Composition API.</p>
<p>The service is available with the <i>useToast</i> function for Composition API or using the <i>$toast</i> property of the application for Options API.</p>
</div>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>