Skip to content

Instantly share code, notes, and snippets.

@TheDhejavu

TheDhejavu/Toaster.vue

Created October 14, 2019 14:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TheDhejavu/80f5c4e8dca23cf603a30991bbe7131f to your computer and use it in GitHub Desktop.
Save TheDhejavu/80f5c4e8dca23cf603a30991bbe7131f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Toaster.vue
<template>
<div class="toaster-container">
<transition-group
name="slide"
enter-active-class="animated quick bounceInRight"
leave-active-class="animated quick bounceOutRight"
>
<div :class="[t.theme, 'toaster']" v-for='t in toasters' :key='t.key'>
<!-- SUCCESS TOASTER CONTENT -->
<div class="flex" v-if="t.theme == 'success'">
<span class="icon">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.4213 5.59413L9.91153 5.08027C9.80596 4.97385 9.6341 4.97315 9.52768 5.07874L6.33044 8.25028L4.978 6.88688C4.87244 6.78046 4.70058 6.77975 4.59416 6.88532L4.08027 7.39506C3.97385 7.50062 3.97315 7.67248 4.07874 7.77893L6.13211 9.84893C6.23768 9.95535 6.40954 9.95605 6.51596 9.85047L10.4198 5.978C10.5262 5.87242 10.5268 5.70056 10.4213 5.59413Z" fill="#09902C"/>
<path d="M7 0C3.134 0 0 3.134 0 7C0 10.866 3.134 14 7 14C10.866 14 14 10.866 14 7C14 3.134 10.866 0 7 0ZM7 1.35484C10.1199 1.35484 12.6452 3.87967 12.6452 7C12.6452 10.1199 10.1203 12.6452 7 12.6452C3.88015 12.6452 1.35484 10.1203 1.35484 7C1.35484 3.88015 3.87967 1.35484 7 1.35484Z" fill="#09902C"/>
</svg>
</span>
<span class="message">{{ t.message }} </span>
<button class="btn btn-close to-right" @click="remove(t)">
<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.38983 1.63794L4.47085 3.55762L6.38983 5.47729C6.5336 5.62111 6.5336 5.8556 6.38983 6.00254L5.69287 6.69975C5.54911 6.84357 5.3147 6.84357 5.16781 6.69975L3.24883 4.78008L1.32985 6.69975C1.18608 6.84357 0.951677 6.84357 0.804784 6.69975L0.107825 6.00254C-0.0359418 5.85872 -0.0359418 5.62424 0.107825 5.47729L2.02681 3.55762L0.107825 1.63794C-0.0359418 1.49413 -0.0359418 1.25964 0.107825 1.11269L0.804784 0.415482C0.948552 0.271662 1.18296 0.271662 1.32985 0.415482L3.24883 2.33515L5.16781 0.415482C5.31158 0.271662 5.54598 0.271662 5.69287 0.415482L6.38983 1.11269C6.53672 1.25651 6.53672 1.491 6.38983 1.63794Z" fill="#09902C"/>
</svg>
</button>
</div>
<!-- END -->
<!-- WARNING TOASTER CONTENT-->
<div class="flex" v-if="t.theme == 'warning'">
<span class="icon">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 0C3.134 0 0 3.134 0 7C0 10.866 3.134 14 7 14C10.866 14 14 10.866 14 7C14 3.134 10.866 0 7 0ZM7 1.35484C10.1199 1.35484 12.6452 3.87967 12.6452 7C12.6452 10.1199 10.1203 12.6452 7 12.6452C3.88015 12.6452 1.35484 10.1203 1.35484 7C1.35484 3.88015 3.87967 1.35484 7 1.35484Z" fill="#D89F00"/>
<path d="M8.26077 3.37798L8.05677 7.45798C8.04719 7.64958 7.88906 7.8 7.69722 7.8H6.70212C6.51029 7.8 6.35216 7.64958 6.34257 7.45798L6.13857 3.37798C6.1283 3.17235 6.29223 3 6.49812 3H7.90122C8.10711 3 8.27105 3.17235 8.26077 3.37798Z" fill="#D89F00"/>
<path d="M7.1999 10.68C6.53822 10.68 5.9999 10.1417 5.9999 9.48003C5.9999 8.81835 6.53822 8.28003 7.1999 8.28003C7.86158 8.28003 8.3999 8.81835 8.3999 9.48003C8.3999 10.1417 7.86158 10.68 7.1999 10.68Z" fill="#D89F00"/>
</svg>
</span>
<span class="message">{{ t.message }} </span>
<button class="btn btn-close to-right" @click="remove(t)">
<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.38983 1.63794L4.47085 3.55762L6.38983 5.47729C6.5336 5.62111 6.5336 5.8556 6.38983 6.00254L5.69287 6.69975C5.54911 6.84357 5.3147 6.84357 5.16781 6.69975L3.24883 4.78008L1.32985 6.69975C1.18608 6.84357 0.951677 6.84357 0.804784 6.69975L0.107825 6.00254C-0.0359418 5.85872 -0.0359418 5.62424 0.107825 5.47729L2.02681 3.55762L0.107825 1.63794C-0.0359418 1.49413 -0.0359418 1.25964 0.107825 1.11269L0.804784 0.415482C0.948552 0.271662 1.18296 0.271662 1.32985 0.415482L3.24883 2.33515L5.16781 0.415482C5.31158 0.271662 5.54598 0.271662 5.69287 0.415482L6.38983 1.11269C6.53672 1.25651 6.53672 1.491 6.38983 1.63794Z" fill="#D89F00"/>
</svg>
</button>
</div>
<!-- END -->
<!-- ERROR TOASTER CONTENT -->
<div class="flex" v-if="t.theme == 'error'">
<span class="icon">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 0C3.13306 0 0 3.13306 0 7C0 10.8669 3.13306 14 7 14C10.8669 14 14 10.8669 14 7C14 3.13306 10.8669 0 7 0ZM7 12.6452C3.88105 12.6452 1.35484 10.119 1.35484 7C1.35484 3.88105 3.88105 1.35484 7 1.35484C10.119 1.35484 12.6452 3.88105 12.6452 7C12.6452 10.119 10.119 12.6452 7 12.6452Z" fill="#F51604"/>
<path d="M9.60097 5.40979L8.01128 7.00005L9.60097 8.59031C9.72007 8.70945 9.72007 8.9037 9.60097 9.02543L9.02361 9.603C8.90451 9.72214 8.71033 9.72214 8.58864 9.603L6.99895 8.01274L5.40927 9.603C5.29017 9.72214 5.09599 9.72214 4.9743 9.603L4.39694 9.02543C4.27784 8.90629 4.27784 8.71204 4.39694 8.59031L5.98663 7.00005L4.39694 5.40979C4.27784 5.29065 4.27784 5.0964 4.39694 4.97467L4.9743 4.39709C5.0934 4.27795 5.28758 4.27795 5.40927 4.39709L6.99895 5.98736L8.58864 4.39709C8.70774 4.27795 8.90192 4.27795 9.02361 4.39709L9.60097 4.97467C9.72265 5.09381 9.72265 5.28806 9.60097 5.40979Z" fill="#F51604"/>
</svg>
</span>
<span class="message">{{ t.message }} </span>
<button class="btn btn-close to-right" @click="remove(t)">
<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.38983 1.63794L4.47085 3.55762L6.38983 5.47729C6.5336 5.62111 6.5336 5.8556 6.38983 6.00254L5.69287 6.69975C5.54911 6.84357 5.3147 6.84357 5.16781 6.69975L3.24883 4.78008L1.32985 6.69975C1.18608 6.84357 0.951677 6.84357 0.804784 6.69975L0.107825 6.00254C-0.0359418 5.85872 -0.0359418 5.62424 0.107825 5.47729L2.02681 3.55762L0.107825 1.63794C-0.0359418 1.49413 -0.0359418 1.25964 0.107825 1.11269L0.804784 0.415482C0.948552 0.271662 1.18296 0.271662 1.32985 0.415482L3.24883 2.33515L5.16781 0.415482C5.31158 0.271662 5.54598 0.271662 5.69287 0.415482L6.38983 1.11269C6.53672 1.25651 6.53672 1.491 6.38983 1.63794Z" fill="#F51604"/>
</svg>
</button>
</div>
<!--END -->
</div>
</transition-group>
</div>
</template>
<script>
import shortId from "shortid";
import "animate.css";
/**
* Todo: This is a toaster plugin for displaying alerts.
* @name Toaster
* @error : this.$toaster.error("message",{})
* @warning : this.$toaster.warning("message ", {})
* @success : this.$toaster.success("message ", {})
*/
export default {
name: "Toaster",
props: {
timeout: {
type: Number,
default: 5000
}
},
methods: {
success (message, option = {}) {
this.add(message, {theme: 'success', timeout: option.timeout})
},
warning (message, option = {}) {
this.add(message, {theme: 'warning', timeout: option.timeout})
},
error (message, option = {}) {
this.add(message, {theme: 'error', timeout: option.timeout})
},
add (message, {theme, timeout}) {
if (!this.$parent) {
this.$mount()
document.body.appendChild(this.$el)
}
let toast = {message, theme, key: shortId.generate()}
this.toasters.push(toast)
setTimeout( () => this.remove(toast), timeout || this.timeout)
},
remove (toast) {
let i = this.toasters.indexOf(toast)
if (i >= 0) {
this.toasters.splice(i, 1)
}
}
},
data () {
return {
toasters: []
}
}
}
</script>
<style lang="scss">
.toaster-container{
position: fixed;
bottom: 50px;
right: 0;
z-index: 999;
width: 300px;
padding-left: 10px;
padding-right :10px;
.toaster{
margin-bottom:20px;
border-radius:5px;
width: 277px;
min-height:50px;
position:relative;
padding:10px;
transition: transform .3s ease-out;
transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1);
transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1);
transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1), -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1);
transition: all 0.3s cubic-bezier(0, 0, 0.21, 1);
.icon{
padding:11px 10px;
position:relative;
}
.message{
font-size:0.8rem;
padding:0 20px;
padding-top:7px;
padding-left:10px;
line-height:1.1rem;
letter-spacing: 0.02em;
font-family: $font-family-medium;
}
.btn-close{
background:none;
border:none;
border-radius:100%;
top:10px;
right:0;
padding:6px 10px;;
color:#fff;
box-shadow:none;
svg{
height:10px;
width:10px;
}
}
&.success {
border-left:3px solid $green;
background: $light-green;
color:$green;
}
&.error {
border-left:3px solid $red;
background: $light-red;
color:$red;
}
&.warning {
border-left:3px solid $orange;
background: $light-orange;
color:$orange
}
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment