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>
|
||||
<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>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast position="bottom-center" group="bc" @close="onClose">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<script>
|
||||
import AccessibilityDoc from '@/doc/toast/AccessibilityDoc.vue';
|
||||
import BasicDoc from '@/doc/toast/BasicDoc.vue';
|
||||
import HeadlessDoc from '@/doc/toast/HeadlessDoc.vue';
|
||||
import ImportDoc from '@/doc/toast/ImportDoc.vue';
|
||||
import MultipleDoc from '@/doc/toast/MultipleDoc.vue';
|
||||
import PositionDoc from '@/doc/toast/PositionDoc.vue';
|
||||
|
|
@ -59,6 +60,11 @@ export default {
|
|||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'headless',
|
||||
label: 'Headless',
|
||||
component: HeadlessDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
|
|
|
|||
Loading…
Reference in New Issue