Improved headless toasts
parent
def22fcc9f
commit
c974cab367
|
@ -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"
|
||||||
|
|
|
@ -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')};
|
||||||
|
|
|
@ -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>
|
||||||
<div class="flex gap-4 mb-4">
|
<div class="flex gap-4 mb-4 justify-end">
|
||||||
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
|
<Button label="Another Upload?" size="small" @click="closeCallback"></Button>
|
||||||
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
|
<Button label="Cancel" size="small" @click="closeCallback"></Button>
|
||||||
</div>
|
|
||||||
</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>
|
||||||
<div class="flex gap-4 mb-4">
|
<div class="flex gap-4 mb-4 justify-end">
|
||||||
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
|
<Button label="Another Upload?" size="small" @click="closeCallback"></Button>
|
||||||
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
|
<Button label="Cancel" size="small" @click="closeCallback"></Button>
|
||||||
</div>
|
|
||||||
</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>
|
||||||
<div class="flex gap-4 mb-4">
|
<div class="flex gap-4 mb-4 justify-end">
|
||||||
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
|
<Button label="Another Upload?" size="small" @click="closeCallback"></Button>
|
||||||
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
|
<Button label="Cancel" size="small" @click="closeCallback"></Button>
|
||||||
</div>
|
|
||||||
</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>
|
||||||
<div class="flex gap-4 mb-4">
|
<div class="flex gap-4 mb-4 justify-end">
|
||||||
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
|
<Button label="Another Upload?" size="small" @click="closeCallback"></Button>
|
||||||
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
|
<Button label="Cancel" size="small" @click="closeCallback"></Button>
|
||||||
</div>
|
|
||||||
</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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue