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

Improved headless toasts

pull/5806/head
Cagatay Civici 2024-05-26 12:41:32 +03:00
parent def22fcc9f
commit c974cab367
3 changed files with 64 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/toast/Toast.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Portal> <Portal>
<div ref="container" :class="cx('root')" :style="sx('root', true, { position })" v-bind="ptmi('root')"> <div ref="container" :class="cx('root')" :style="sx('root', true, { position })" v-bind="ptmi('root')">
<transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="{ ...ptm('message'), ...ptm('transition') }"> <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="{ ...ptm('transition') }">
<ToastMessage <ToastMessage
v-for="msg of messages" v-for="msg of messages"
:key="msg.id" :key="msg.id"

16
components/lib/toast/style/ToastStyle.js
View File

@ -8,11 +8,7 @@ const theme = ({ dt }) => `
} }
.p-toast-message { .p-toast-message {
backdrop-filter: blur(${dt('toast.blur')});
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
border-radius: ${dt('toast.border.radius')};
border-width: ${dt('toast.border.width')};
border-style: solid;
} }
.p-toast-message-icon { .p-toast-message-icon {
@ -67,6 +63,18 @@ const theme = ({ dt }) => `
user-select: none; user-select: none;
} }
.p-toast-message-info,
.p-toast-message-success,
.p-toast-message-warn,
.p-toast-message-error,
.p-toast-message-secondary,
.p-toast-message-contrast {
border-width: ${dt('toast.border.width')};
border-style: solid;
backdrop-filter: blur(${dt('toast.blur')});
border-radius: ${dt('toast.border.radius')};
}
.p-toast-close-icon { .p-toast-close-icon {
font-size: ${dt('toast.close.icon.size')}; font-size: ${dt('toast.close.icon.size')};
width: ${dt('toast.close.icon.size')}; width: ${dt('toast.close.icon.size')};

90
doc/toast/HeadlessDoc.vue
View File

@ -5,19 +5,18 @@
<div class="card flex justify-center"> <div class="card flex justify-center">
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, closeCallback }"> <template #container="{ message, closeCallback }">
<section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px"> <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
<i class="pi pi-cloud-upload text-green-400 text-2xl"></i> <div class="flex items-center gap-5">
<div class="flex flex-col gap-4 w-full"> <i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p> <span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
<p class="m-0 text-base text-white">{{ message.detail }}</p> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar> <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label> <label class="text-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
</div>
<div class="flex gap-4 mb-4">
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
</div> </div>
<div class="flex gap-4 mb-4 justify-end">
<Button label="Another Upload?" size="small" @click="closeCallback"></Button>
<Button label="Cancel" size="small" @click="closeCallback"></Button>
</div> </div>
</section> </section>
</template> </template>
@ -38,19 +37,18 @@ export default {
basic: ` basic: `
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, closeCallback }"> <template #container="{ message, closeCallback }">
<section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px"> <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <div class="flex items-center gap-5">
<div class="flex flex-col gap-4 w-full"> <i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p> <span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
<p class="m-0 text-base text-surface-700">{{ message.detail }}</p> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar> <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label> <label class="text-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
</div>
<div class="flex gap-4 mb-4">
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
</div> </div>
<div class="flex gap-4 mb-4 justify-end">
<Button label="Another Upload?" size="small" @click="closeCallback"></Button>
<Button label="Cancel" size="small" @click="closeCallback"></Button>
</div> </div>
</section> </section>
</template> </template>
@ -62,19 +60,18 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, closeCallback }"> <template #container="{ message, closeCallback }">
<section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px"> <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <div class="flex items-center gap-5">
<div class="flex flex-col gap-4 w-full"> <i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p> <span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
<p class="m-0 text-base text-surface-700">{{ message.detail }}</p> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar> <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label> <label class="text-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
</div>
<div class="flex gap-4 mb-4">
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
</div> </div>
<div class="flex gap-4 mb-4 justify-end">
<Button label="Another Upload?" size="small" @click="closeCallback"></Button>
<Button label="Cancel" size="small" @click="closeCallback"></Button>
</div> </div>
</section> </section>
</template> </template>
@ -100,7 +97,7 @@ export default {
methods: { methods: {
show() { show() {
if (!this.visible) { if (!this.visible) {
this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' }); this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg' });
this.visible = true; this.visible = true;
this.progress = 0; this.progress = 0;
@ -129,19 +126,18 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, closeCallback }"> <template #container="{ message, closeCallback }">
<section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px"> <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <div class="flex items-center gap-5">
<div class="flex flex-col gap-4 w-full"> <i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p> <span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
<p class="m-0 text-base text-surface-700">{{ message.detail }}</p> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar> <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label> <label class="text-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
</div>
<div class="flex gap-4 mb-4">
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
</div> </div>
<div class="flex gap-4 mb-4 justify-end">
<Button label="Another Upload?" size="small" @click="closeCallback"></Button>
<Button label="Cancel" size="small" @click="closeCallback"></Button>
</div> </div>
</section> </section>
</template> </template>
@ -166,7 +162,7 @@ onUnmounted(() => {
const show = () => { const show = () => {
if (!visible.value) { if (!visible.value) {
toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' }); toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg' });
visible.value = true; visible.value = true;
progress.value = 0; progress.value = 0;
@ -199,7 +195,7 @@ const show = () => {
methods: { methods: {
show() { show() {
if (!this.visible) { if (!this.visible) {
this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' }); this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg' });
this.visible = true; this.visible = true;
this.progress = 0; this.progress = 0;