New headless demo for toast
Cagatay Civici
parent
c79d79ad93
commit
caaa69ed11
|
|
@ -0,0 +1,224 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire toast UI instead of the default elements.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<Toast position="top-center" group="headless" @close="visible = false">
|
||||||
|
<template #container="{ message, onClose }">
|
||||||
|
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
|
||||||
|
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
|
||||||
|
<div class="flex flex-column gap-3 w-full">
|
||||||
|
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
|
||||||
|
<p class="m-0 text-base text-700">{{ message.detail }}</p>
|
||||||
|
<div class="flex flex-column 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-3 mb-3">
|
||||||
|
<Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
|
||||||
|
<Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
</Toast>
|
||||||
|
<Button @click="show" label="View" />
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
progress: 0,
|
||||||
|
interval: null,
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<Toast position="top-center" group="headless" @close="visible = false">
|
||||||
|
<template #container="{ message, onClose }">
|
||||||
|
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
|
||||||
|
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
|
||||||
|
<div class="flex flex-column gap-3 w-full">
|
||||||
|
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
|
||||||
|
<p class="m-0 text-base text-700">{{ message.detail }}</p>
|
||||||
|
<div class="flex flex-column 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-3 mb-3">
|
||||||
|
<Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
|
||||||
|
<Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
</Toast>
|
||||||
|
<Button @click="show" label="View" />
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<Toast position="top-center" group="headless" @close="visible = false">
|
||||||
|
<template #container="{ message, onClose }">
|
||||||
|
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
|
||||||
|
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
|
||||||
|
<div class="flex flex-column gap-3 w-full">
|
||||||
|
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
|
||||||
|
<p class="m-0 text-base text-700">{{ message.detail }}</p>
|
||||||
|
<div class="flex flex-column 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-3 mb-3">
|
||||||
|
<Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
|
||||||
|
<Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
</Toast>
|
||||||
|
<Button @click="show" label="View" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
progress: 0,
|
||||||
|
interval: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
if (this.interval) {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
show() {
|
||||||
|
if (!this.visible) {
|
||||||
|
this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' });
|
||||||
|
this.visible = true;
|
||||||
|
this.progress = 0;
|
||||||
|
|
||||||
|
if (this.interval) {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.interval = setInterval(() => {
|
||||||
|
if (this.progress <= 100) {
|
||||||
|
this.progress = this.progress + 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.progress >= 100) {
|
||||||
|
this.progress = 100;
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<Toast position="top-center" group="headless" @close="visible = false">
|
||||||
|
<template #container="{ message, onClose }">
|
||||||
|
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
|
||||||
|
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
|
||||||
|
<div class="flex flex-column gap-3 w-full">
|
||||||
|
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
|
||||||
|
<p class="m-0 text-base text-700">{{ message.detail }}</p>
|
||||||
|
<div class="flex flex-column 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-3 mb-3">
|
||||||
|
<Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
|
||||||
|
<Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
</Toast>
|
||||||
|
<Button @click="show" label="View" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useToast } from "primevue/usetoast";
|
||||||
|
import { ref, onUnmounted } from 'vue';
|
||||||
|
const toast = useToast();
|
||||||
|
const visible = ref(false);
|
||||||
|
const progress = ref(0);
|
||||||
|
const interval = ref();
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (interval.value) {
|
||||||
|
clearInterval(interval.value);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const show = () => {
|
||||||
|
if (!visible.value) {
|
||||||
|
toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' });
|
||||||
|
visible.value = true;
|
||||||
|
progress.value = 0;
|
||||||
|
|
||||||
|
if (interval.value) {
|
||||||
|
clearInterval(interval.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
interval.value = setInterval(() => {
|
||||||
|
if (progress.value <= 100) {
|
||||||
|
progress.value = progress.value + 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress.value >= 100) {
|
||||||
|
progress.value = 100;
|
||||||
|
clearInterval(interval.value);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
if (this.interval) {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
show() {
|
||||||
|
if (!this.visible) {
|
||||||
|
this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' });
|
||||||
|
this.visible = true;
|
||||||
|
this.progress = 0;
|
||||||
|
|
||||||
|
if (this.interval) {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.interval = setInterval(() => {
|
||||||
|
if (this.progress <= 100) {
|
||||||
|
this.progress = this.progress + 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.progress >= 100) {
|
||||||
|
this.progress = 100;
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Custom content inside a message is defined with the <i>content</i> option.</p>
|
<p>Custom content inside a message is defined with the <i>content</i> template.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<Toast position="bottom-center" group="bc" @close="onClose">
|
<Toast position="bottom-center" group="bc" @close="onClose">
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/toast/AccessibilityDoc.vue';
|
import AccessibilityDoc from '@/doc/toast/AccessibilityDoc.vue';
|
||||||
import BasicDoc from '@/doc/toast/BasicDoc.vue';
|
import BasicDoc from '@/doc/toast/BasicDoc.vue';
|
||||||
|
import HeadlessDoc from '@/doc/toast/HeadlessDoc.vue';
|
||||||
import ImportDoc from '@/doc/toast/ImportDoc.vue';
|
import ImportDoc from '@/doc/toast/ImportDoc.vue';
|
||||||
import MultipleDoc from '@/doc/toast/MultipleDoc.vue';
|
import MultipleDoc from '@/doc/toast/MultipleDoc.vue';
|
||||||
import PositionDoc from '@/doc/toast/PositionDoc.vue';
|
import PositionDoc from '@/doc/toast/PositionDoc.vue';
|
||||||
|
|
@ -59,6 +60,11 @@ export default {
|
||||||
label: 'Template',
|
label: 'Template',
|
||||||
component: TemplateDoc
|
component: TemplateDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'headless',
|
||||||
|
label: 'Headless',
|
||||||
|
component: HeadlessDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue