Improved headless toasts
Cagatay Civici
parent
def22fcc9f
commit
c974cab367
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Portal>
|
||||
<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
|
||||
v-for="msg of messages"
|
||||
:key="msg.id"
|
||||
|
|
|
|||
|
|
@ -8,11 +8,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-toast-message {
|
||||
backdrop-filter: blur(${dt('toast.blur')});
|
||||
margin: 0 0 1rem 0;
|
||||
border-radius: ${dt('toast.border.radius')};
|
||||
border-width: ${dt('toast.border.width')};
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.p-toast-message-icon {
|
||||
|
|
@ -67,6 +63,18 @@ const theme = ({ dt }) => `
|
|||
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 {
|
||||
font-size: ${dt('toast.close.icon.size')};
|
||||
width: ${dt('toast.close.icon.size')};
|
||||
|
|
|
|||
|
|
@ -5,19 +5,18 @@
|
|||
<div class="card flex justify-center">
|
||||
<Toast position="top-center" group="headless" @close="visible = false">
|
||||
<template #container="{ message, closeCallback }">
|
||||
<section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
|
||||
<i class="pi pi-cloud-upload text-green-400 text-2xl"></i>
|
||||
<div class="flex flex-col gap-4 w-full">
|
||||
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
|
||||
<p class="m-0 text-base text-white">{{ message.detail }}</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
|
||||
<label class="text-right text-xs text-white">{{ 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>
|
||||
<section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
|
||||
<div class="flex items-center gap-5">
|
||||
<i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
|
||||
<span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<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-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
|
||||
</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>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -38,19 +37,18 @@ export default {
|
|||
basic: `
|
||||
<Toast position="top-center" group="headless" @close="visible = false">
|
||||
<template #container="{ message, closeCallback }">
|
||||
<section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
|
||||
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
|
||||
<div class="flex flex-col gap-4 w-full">
|
||||
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
|
||||
<p class="m-0 text-base text-surface-700">{{ message.detail }}</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
|
||||
<label class="text-right text-xs text-white">{{ 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>
|
||||
<section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
|
||||
<div class="flex items-center gap-5">
|
||||
<i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
|
||||
<span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<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-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
|
||||
</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>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -62,19 +60,18 @@ export default {
|
|||
<div class="card flex justify-center">
|
||||
<Toast position="top-center" group="headless" @close="visible = false">
|
||||
<template #container="{ message, closeCallback }">
|
||||
<section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
|
||||
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
|
||||
<div class="flex flex-col gap-4 w-full">
|
||||
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
|
||||
<p class="m-0 text-base text-surface-700">{{ message.detail }}</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
|
||||
<label class="text-right text-xs text-white">{{ 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>
|
||||
<section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
|
||||
<div class="flex items-center gap-5">
|
||||
<i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
|
||||
<span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<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-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
|
||||
</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>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -100,7 +97,7 @@ export default {
|
|||
methods: {
|
||||
show() {
|
||||
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.progress = 0;
|
||||
|
||||
|
|
@ -129,19 +126,18 @@ export default {
|
|||
<div class="card flex justify-center">
|
||||
<Toast position="top-center" group="headless" @close="visible = false">
|
||||
<template #container="{ message, closeCallback }">
|
||||
<section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
|
||||
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
|
||||
<div class="flex flex-col gap-4 w-full">
|
||||
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
|
||||
<p class="m-0 text-base text-surface-700">{{ message.detail }}</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
|
||||
<label class="text-right text-xs text-white">{{ 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>
|
||||
<section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
|
||||
<div class="flex items-center gap-5">
|
||||
<i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
|
||||
<span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<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-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
|
||||
</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>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -166,7 +162,7 @@ onUnmounted(() => {
|
|||
|
||||
const show = () => {
|
||||
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;
|
||||
progress.value = 0;
|
||||
|
||||
|
|
@ -199,7 +195,7 @@ const show = () => {
|
|||
methods: {
|
||||
show() {
|
||||
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.progress = 0;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue