sajjad
5 months ago
parent
b5d10058bd
commit
875a1c2386
@ -1,92 +1,93 @@
|
||||
import MeshkeeToast from './MeshkeeToast.vue'
|
||||
import { createComponent } from './helpers';
|
||||
import eventBus from './bus.js';
|
||||
import Positions from './positions.js';
|
||||
|
||||
let parentTop = document.querySelector('.v-toast.v-toast--top');
|
||||
let parentBottom = document.querySelector('.v-toast.v-toast--bottom');
|
||||
|
||||
const correctParent = (position) => {
|
||||
switch (position) {
|
||||
case Positions.TOP:
|
||||
case Positions.TOP_RIGHT:
|
||||
case Positions.TOP_LEFT:
|
||||
return parentTop;
|
||||
|
||||
case Positions.BOTTOM:
|
||||
case Positions.BOTTOM_RIGHT:
|
||||
case Positions.BOTTOM_LEFT:
|
||||
return parentBottom;
|
||||
}
|
||||
};
|
||||
const setupContainer = () => {
|
||||
// No need to create them, they already exists
|
||||
if (parentTop && parentBottom) return;
|
||||
|
||||
if (!parentTop) {
|
||||
parentTop = document.createElement('div');
|
||||
parentTop.className = 'v-toast v-toast--top';
|
||||
}
|
||||
|
||||
if (!parentBottom) {
|
||||
parentBottom = document.createElement('div');
|
||||
parentBottom.className = 'v-toast v-toast--bottom'
|
||||
}
|
||||
|
||||
const container = document.body;
|
||||
container.appendChild(parentTop);
|
||||
container.appendChild(parentBottom);
|
||||
};
|
||||
export const useToast = (globalProps = {}) => {
|
||||
return {
|
||||
open(options) {
|
||||
let message = null;
|
||||
if (typeof options === 'string') message = options;
|
||||
|
||||
const defaultProps = {
|
||||
message
|
||||
};
|
||||
|
||||
const propsData = Object.assign({}, defaultProps, globalProps, options);
|
||||
setupContainer();
|
||||
console.log(propsData.position, correctParent(propsData.position ? propsData.position : 'bottom'));
|
||||
const instance = createComponent(MeshkeeToast, propsData, correctParent(propsData.position ? propsData.position : 'bottom'));
|
||||
return {
|
||||
dismiss: instance.dismiss
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
eventBus.emit('toast-clear')
|
||||
},
|
||||
success(message, options = {}) {
|
||||
return this.open(Object.assign({}, {
|
||||
message,
|
||||
type: 'success'
|
||||
}, options))
|
||||
},
|
||||
error(message, options = {}) {
|
||||
return this.open(Object.assign({}, {
|
||||
message,
|
||||
type: 'error'
|
||||
}, options))
|
||||
},
|
||||
info(message, options = {}) {
|
||||
return this.open(Object.assign({}, {
|
||||
message,
|
||||
type: 'info'
|
||||
}, options))
|
||||
},
|
||||
warning(message, options = {}) {
|
||||
return this.open(Object.assign({}, {
|
||||
message,
|
||||
type: 'warning'
|
||||
}, options))
|
||||
},
|
||||
default(message, options = {}) {
|
||||
return this.open(Object.assign({}, {
|
||||
message,
|
||||
type: 'default'
|
||||
}, options))
|
||||
}
|
||||
}
|
||||
};
|
||||
import MeshkeeToast from './components/MeshkeeToast.vue'
|
||||
import { createComponent } from './utils/helpers.js';
|
||||
import eventBus from './utils/bus.js';
|
||||
import Positions from './utils/positions.js';
|
||||
|
||||
let parentTop = document.querySelector('.me-toast.me-toast--top');
|
||||
let parentBottom = document.querySelector('.me-toast.me-toast--bottom');
|
||||
|
||||
const correctParent = (position) => {
|
||||
switch (position) {
|
||||
case Positions.TOP:
|
||||
case Positions.TOP_RIGHT:
|
||||
case Positions.TOP_LEFT:
|
||||
return parentTop;
|
||||
|
||||
case Positions.BOTTOM:
|
||||
case Positions.BOTTOM_RIGHT:
|
||||
case Positions.BOTTOM_LEFT:
|
||||
return parentBottom;
|
||||
}
|
||||
};
|
||||
const setupContainer = () => {
|
||||
// No need to create them, they already exists
|
||||
if (parentTop && parentBottom) return;
|
||||
|
||||
if (!parentTop) {
|
||||
parentTop = document.createElement('div');
|
||||
parentTop.className = 'me-toast me-toast--top';
|
||||
}
|
||||
|
||||
if (!parentBottom) {
|
||||
parentBottom = document.createElement('div');
|
||||
parentBottom.className = 'me-toast me-toast--bottom'
|
||||
}
|
||||
|
||||
const container = document.body;
|
||||
container.appendChild(parentTop);
|
||||
container.appendChild(parentBottom);
|
||||
};
|
||||
export const useToast = (globalProps = {}) => {
|
||||
return {
|
||||
open(options) {
|
||||
let message = null;
|
||||
if (typeof options === 'string') message = options;
|
||||
|
||||
const defaultProps = {
|
||||
message
|
||||
};
|
||||
|
||||
const propsData = Object.assign({}, defaultProps, globalProps, options);
|
||||
setupContainer();
|
||||
const instance = createComponent(MeshkeeToast, propsData, correctParent(propsData.position ? propsData.position : 'bottom'));
|
||||
return {
|
||||
dismiss: instance.dismiss
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
eventBus.emit('toast-clear')
|
||||
},
|
||||
success(title, message, options = {}) {
|
||||
return this.open(Object.assign({}, {
|
||||
title,
|
||||
message,
|
||||
type: 'success',
|
||||
borderColor: '#EDEDED'
|
||||
}, options))
|
||||
},
|
||||
error(title, message, options = {}) {
|
||||
return this.open(Object.assign({}, {
|
||||
title,
|
||||
message,
|
||||
type: 'error',
|
||||
borderColor: '#EDEDED'
|
||||
}, options))
|
||||
},
|
||||
info(title, message, options = {}) {
|
||||
return this.open(Object.assign({}, {
|
||||
title,
|
||||
message,
|
||||
type: 'info'
|
||||
}, options))
|
||||
},
|
||||
preset(title, message, options = {}) {
|
||||
return this.open(Object.assign({}, {
|
||||
title,
|
||||
message,
|
||||
titleColor: 'black',
|
||||
messageColor: 'black',
|
||||
type: 'default'
|
||||
}, options))
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,206 +1,254 @@
|
||||
<template>
|
||||
<transition :enter-active-class="transition.enter" :leave-active-class="transition.leave">
|
||||
<div ref="root" role="alert" v-show="isActive" class="v-toast__item"
|
||||
:class="[`v-toast__item--${type}`, `v-toast__item--${direction}`, `v-toast__item--${position}`]"
|
||||
@mouseover="toggleTimer(true)" @mouseleave="toggleTimer(false)" @click="whenClicked">
|
||||
<div :class="['v-toast__icon', `v-toast__icon--${type}-light`]">
|
||||
<div class="v-toast__icon--image"></div>
|
||||
</div>
|
||||
<div class="mx-2 toast__title" v-html="title"></div>
|
||||
<p class="v-toast__text" v-html="message"></p>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import { removeElement } from './helpers.js';
|
||||
import Timer from "./timer.js";
|
||||
import Positions from './positions.js'
|
||||
import eventBus from './bus.js'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Toast',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: 'توجه'
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: Positions.BOTTOM_RIGHT,
|
||||
validator(value) {
|
||||
return Object.values(Positions).includes(value)
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'rtl'
|
||||
},
|
||||
dismissible: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
onDismiss: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
}
|
||||
},
|
||||
onClick: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
}
|
||||
},
|
||||
queue: Boolean,
|
||||
pauseOnHover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
parentTop: null,
|
||||
parentBottom: null,
|
||||
isHovered: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
correctParent() {
|
||||
switch (this.position) {
|
||||
case Positions.TOP:
|
||||
case Positions.TOP_RIGHT:
|
||||
case Positions.TOP_LEFT:
|
||||
return this.parentTop;
|
||||
|
||||
case Positions.BOTTOM:
|
||||
case Positions.BOTTOM_RIGHT:
|
||||
case Positions.BOTTOM_LEFT:
|
||||
return this.parentBottom;
|
||||
}
|
||||
},
|
||||
transition() {
|
||||
switch (this.position) {
|
||||
case Positions.TOP:
|
||||
case Positions.TOP_RIGHT:
|
||||
case Positions.TOP_LEFT:
|
||||
return {
|
||||
enter: 'v-toast--fade-in-down',
|
||||
leave: 'v-toast--fade-out'
|
||||
};
|
||||
|
||||
case Positions.BOTTOM:
|
||||
case Positions.BOTTOM_RIGHT:
|
||||
case Positions.BOTTOM_LEFT:
|
||||
return {
|
||||
enter: 'v-toast--fade-in-up',
|
||||
leave: 'v-toast--fade-out'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setupContainer() {
|
||||
this.parentTop = document.querySelector('.v-toast.v-toast--top');
|
||||
this.parentBottom = document.querySelector('.v-toast.v-toast--bottom');
|
||||
// No need to create them, they already exists
|
||||
if (this.parentTop && this.parentBottom) return;
|
||||
|
||||
if (!this.parentTop) {
|
||||
this.parentTop = document.createElement('div');
|
||||
this.parentTop.className = 'v-toast v-toast--top';
|
||||
}
|
||||
|
||||
if (!this.parentBottom) {
|
||||
this.parentBottom = document.createElement('div');
|
||||
this.parentBottom.className = 'v-toast v-toast--bottom'
|
||||
}
|
||||
|
||||
const container = document.body;
|
||||
container.appendChild(this.parentTop);
|
||||
container.appendChild(this.parentBottom);
|
||||
},
|
||||
|
||||
shouldQueue() {
|
||||
if (!this.queue) return false;
|
||||
|
||||
return (
|
||||
this.parentTop.childElementCount > 0 ||
|
||||
this.parentBottom.childElementCount > 0
|
||||
)
|
||||
},
|
||||
|
||||
dismiss() {
|
||||
if (this.timer) this.timer.stop();
|
||||
clearTimeout(this.queueTimer);
|
||||
this.isActive = false;
|
||||
|
||||
// Timeout for the animation complete before destroying
|
||||
setTimeout(() => {
|
||||
this.onDismiss.apply(null, arguments);
|
||||
|
||||
const wrapper = this.$refs.root;
|
||||
// unmount the component
|
||||
// removeElement(wrapper);
|
||||
}, 150)
|
||||
},
|
||||
|
||||
showNotice() {
|
||||
if (this.shouldQueue()) {
|
||||
// Call recursively if it should queue
|
||||
this.queueTimer = setTimeout(this.showNotice, 250);
|
||||
return
|
||||
}
|
||||
console.log(this.correctParent);
|
||||
document.querySelector('.v-toast--bottom').insertAdjacentElement('afterbegin', this.$refs.root);
|
||||
this.correctParent.appendChild(this.$refs.root);
|
||||
console.log(this.$refs.root);
|
||||
document.querySelector('.v-toast--bottom').appendChild(this.$refs.root);
|
||||
|
||||
this.$options.elem = this.correctParent;
|
||||
|
||||
this.isActive = true;
|
||||
|
||||
if (this.duration) {
|
||||
this.timer = new Timer(this.dismiss, this.duration);
|
||||
}
|
||||
},
|
||||
|
||||
whenClicked() {
|
||||
if (!this.dismissible) return;
|
||||
this.onClick.apply(null, arguments);
|
||||
this.dismiss()
|
||||
},
|
||||
|
||||
toggleTimer(newVal) {
|
||||
if (!this.pauseOnHover || !this.timer) return;
|
||||
newVal ? this.timer.pause() : this.timer.resume();
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
eventBus.off('toast-clear', this.dismiss)
|
||||
},
|
||||
beforeMount() {
|
||||
this.setupContainer()
|
||||
},
|
||||
mounted() {
|
||||
this.showNotice();
|
||||
eventBus.on('toast-clear', this.dismiss)
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import './theme/bootstrap';
|
||||
</style>
|
||||
<template>
|
||||
<transition :enter-active-class="transition.enter" :leave-active-class="transition.leave">
|
||||
<div ref="root" role="alert" v-show="isActive" :class="[`me-toast__root me-toast__root--${position}`]">
|
||||
<div :class="`me-toast__item--${direction}`">
|
||||
<div @mouseenter="toggleTimer(true)" @mouseleave="toggleTimer(false)"
|
||||
:class="[`me-toast__item me-toast__item--${type}-light`]">
|
||||
<div class="me-toast__box">
|
||||
<div :class="['me-toast__icon', `me-toast__icon--${type}`]">
|
||||
<div class="me-toast__icon--image"></div>
|
||||
</div>
|
||||
<div class="me-toast__title"
|
||||
:style="`color: ${titleColor};font-family: ${titleFontFamily}; ${direction == 'rtl' ? `border-left: 0.5px dashed ${borderColor};` : `border-right: 0.5px dashed ${borderColor};`}`"
|
||||
v-html="title">
|
||||
</div>
|
||||
<p class="me-toast__message" :style="`color: ${messageColor};font-family: ${messageFontFamily};`"
|
||||
v-html="message"></p>
|
||||
</div>
|
||||
<!-- close button -->
|
||||
<div class="me-toast__close" @click="whenClicked"></div>
|
||||
</div>
|
||||
<div :class="[`me-toast__progress me-toast__progress--${type}-light`]">
|
||||
<div ref="progress_bar" :class="[`me-toast__bar me-toast__bar--${type}`]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import { removeElement } from '../utils/helpers.js';
|
||||
import Timer from "../utils/timer.js";
|
||||
import Positions from '../utils/positions.js'
|
||||
import eventBus from '../utils/bus.js';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Toast',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: 'توجه'
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
titleFontFamily: {
|
||||
type: String,
|
||||
default: 'IranYekan-Regular'
|
||||
},
|
||||
messageFontFamily: {
|
||||
type: String,
|
||||
default: 'IranYekan-light'
|
||||
},
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
messageColor: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#888888'
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: Positions.BOTTOM_RIGHT,
|
||||
validator(value) {
|
||||
return Object.values(Positions).includes(value)
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 6000
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'rtl'
|
||||
},
|
||||
dismissible: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
onDismiss: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
}
|
||||
},
|
||||
onClick: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
}
|
||||
},
|
||||
queue: Boolean,
|
||||
pauseOnHover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
parentTop: null,
|
||||
parentBottom: null,
|
||||
isHovered: false,
|
||||
timer: null,
|
||||
}
|
||||
},
|
||||
// watch: {
|
||||
// 'timer.delay': {
|
||||
// deep: true,
|
||||
// handler(newVal) {
|
||||
// console.log(newVal);
|
||||
// if (!this.timer) return
|
||||
// console.log(this.timer, (this.timer.delay / this.duration) * 100);
|
||||
// this.getTimerWidth = 100 - ((this.timer.delay / this.duration) * 100);
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
computed: {
|
||||
correctParent() {
|
||||
switch (this.position) {
|
||||
case Positions.TOP:
|
||||
case Positions.TOP_RIGHT:
|
||||
case Positions.TOP_LEFT:
|
||||
return this.parentTop;
|
||||
|
||||
case Positions.BOTTOM:
|
||||
case Positions.BOTTOM_RIGHT:
|
||||
case Positions.BOTTOM_LEFT:
|
||||
return this.parentBottom;
|
||||
}
|
||||
},
|
||||
transition() {
|
||||
switch (this.position) {
|
||||
case Positions.TOP:
|
||||
case Positions.TOP_RIGHT:
|
||||
case Positions.TOP_LEFT:
|
||||
return {
|
||||
enter: 'me-toast--fade-in-down',
|
||||
leave: 'me-toast--fade-out'
|
||||
};
|
||||
|
||||
case Positions.BOTTOM:
|
||||
case Positions.BOTTOM_RIGHT:
|
||||
case Positions.BOTTOM_LEFT:
|
||||
return {
|
||||
enter: 'me-toast--fade-in-up',
|
||||
leave: 'me-toast--fade-out'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setupContainer() {
|
||||
this.parentTop = document.querySelector('.me-toast.me-toast--top');
|
||||
this.parentBottom = document.querySelector('.me-toast.me-toast--bottom');
|
||||
// No need to create them, they already exists
|
||||
if (this.parentTop && this.parentBottom) return;
|
||||
|
||||
if (!this.parentTop) {
|
||||
this.parentTop = document.createElement('div');
|
||||
this.parentTop.className = 'me-toast me-toast--top';
|
||||
}
|
||||
|
||||
if (!this.parentBottom) {
|
||||
this.parentBottom = document.createElement('div');
|
||||
this.parentBottom.className = 'me-toast me-toast--bottom'
|
||||
}
|
||||
|
||||
const container = document.body;
|
||||
container.appendChild(this.parentTop);
|
||||
container.appendChild(this.parentBottom);
|
||||
},
|
||||
|
||||
shouldQueue() {
|
||||
if (!this.queue) return false;
|
||||
|
||||
return (
|
||||
this.parentTop.childElementCount > 0 ||
|
||||
this.parentBottom.childElementCount > 0
|
||||
)
|
||||
},
|
||||
|
||||
dismiss() {
|
||||
if (this.timer) this.timer.stop();
|
||||
clearTimeout(this.queueTimer);
|
||||
this.isActive = false;
|
||||
|
||||
// Timeout for the animation complete before destroying
|
||||
setTimeout(() => {
|
||||
this.onDismiss.apply(null, arguments);
|
||||
|
||||
const wrapper = this.$refs.root;
|
||||
// unmount the component
|
||||
removeElement(wrapper);
|
||||
}, 150)
|
||||
},
|
||||
|
||||
showNotice() {
|
||||
if (this.shouldQueue()) {
|
||||
// Call recursively if it should queue
|
||||
this.queueTimer = setTimeout(this.showNotice, 250);
|
||||
return
|
||||
}
|
||||
document.querySelector('.me-toast--bottom').insertAdjacentElement('afterbegin', this.$refs.root);
|
||||
this.correctParent.appendChild(this.$refs.root);
|
||||
document.querySelector('.me-toast--bottom').appendChild(this.$refs.root);
|
||||
|
||||
this.$options.elem = this.correctParent;
|
||||
|
||||
this.isActive = true;
|
||||
|
||||
if (this.duration) {
|
||||
this.timer = new Timer(this.dismiss, this.duration);
|
||||
this.timer.move(this.$refs.progress_bar);
|
||||
}
|
||||
},
|
||||
whenClicked() {
|
||||
if (!this.dismissible) return;
|
||||
this.onClick.apply(null, arguments);
|
||||
this.dismiss()
|
||||
},
|
||||
|
||||
toggleTimer(newVal) {
|
||||
if (!this.pauseOnHover || !this.timer) return;
|
||||
if (newVal) {
|
||||
this.timer.move(this.$refs.progress_bar, true);
|
||||
this.timer.pause();
|
||||
} else {
|
||||
this.timer.move(this.$refs.progress_bar);
|
||||
this.timer.resume();
|
||||
}
|
||||
// newVal ? this.timer.pause(); : this.timer.resume();
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
eventBus.off('toast-clear', this.dismiss)
|
||||
},
|
||||
beforeMount() {
|
||||
this.setupContainer()
|
||||
},
|
||||
mounted() {
|
||||
this.showNotice();
|
||||
eventBus.on('toast-clear', this.dismiss)
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -1,51 +1,12 @@
|
||||
// Import vue component
|
||||
import Vue from 'vue';
|
||||
import MeshkeeToast from './MeshkeeToast.vue';
|
||||
import { useToast } from './api';
|
||||
|
||||
// Vue.prototype.$meshkeeToast = function () {
|
||||
// console.log(324);
|
||||
// return 321;
|
||||
// }
|
||||
// // Declare install function executed by Vue.use()
|
||||
// export function install(Vue) {
|
||||
// console.log(43);
|
||||
|
||||
// if (install.installed) return;
|
||||
// install.installed = true;
|
||||
// Vue.prototype.$meshkeeToast = function () {
|
||||
// console.log(324);
|
||||
// return 321;
|
||||
// }
|
||||
// Vue.component('MeshkeeToast', MeshkeeToast);
|
||||
// }
|
||||
|
||||
// // Create module definition for Vue.use()
|
||||
// const plugin = {
|
||||
// install,
|
||||
// };
|
||||
|
||||
// // Auto-install when vue is found (eg. in browser via <script> tag)
|
||||
// let GlobalVue = null;
|
||||
// if (typeof window !== 'undefined') {
|
||||
// GlobalVue = window.Vue;
|
||||
// } else if (typeof global !== 'undefined') {
|
||||
// GlobalVue = global.Vue;
|
||||
// }
|
||||
// console.log(global, GlobalVue);
|
||||
// if (GlobalVue) {
|
||||
// GlobalVue.use(plugin);
|
||||
// }
|
||||
|
||||
// // To allow use as module (npm/webpack/etc.) export component
|
||||
// export default MeshkeeToast;
|
||||
export default {
|
||||
install(Vue, options) {
|
||||
// Let's register our component globally
|
||||
// https://vuejs.org/v2/guide/components-registration.html
|
||||
Vue.prototype.$meshkeeToast = function () {
|
||||
const { open } = useToast(options);
|
||||
open('Vue');
|
||||
}
|
||||
}
|
||||
import { useToast } from './api';
|
||||
|
||||
// To allow use as module (npm/webpack/etc.) export component
|
||||
export default {
|
||||
install(Vue, options) {
|
||||
// Let's register our component globally
|
||||
// https://vuejs.org/v2/guide/components-registration.html
|
||||
Vue.prototype.$metoast = () => {
|
||||
return new useToast(options);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1,59 +1,135 @@
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.v-toast--fade-out {
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.v-toast--fade-in-down {
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.v-toast--fade-in-up {
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
/**
|
||||
* Vue Transitions
|
||||
*/
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 150ms ease-out;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.me-toast--fade-out {
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.me-toast--fade-in-down {
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.me-toast--fade-in-up {
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
/**
|
||||
* Meshkeetoast Transitions
|
||||
*/
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 150ms ease-out;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
// progress bar
|
||||
// @-webkit-keyframes progress {
|
||||
// 0% {
|
||||
// width: 0%;
|
||||
// }
|
||||
|
||||
// 50% {
|
||||
// width: 50%;
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @-moz-keyframes progress {
|
||||
// 0% {
|
||||
// width: 0%;
|
||||
// }
|
||||
|
||||
// 50% {
|
||||
// width: 50%;
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @-o-keyframes progress {
|
||||
// 0% {
|
||||
// width: 0%;
|
||||
// }
|
||||
|
||||
// 50% {
|
||||
// width: 50%;
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// @keyframes progress {
|
||||
// 0% {
|
||||
// width: 0%;
|
||||
// }
|
||||
|
||||
// 50% {
|
||||
// width: 50%;
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// .me-toast__progress {
|
||||
// -webkit-animation-name: progress;
|
||||
// -moz-animation-name: progress;
|
||||
// -o-animation-name: progress;
|
||||
// animation-name: progress;
|
||||
// -webkit-animation: progress 2s linear;
|
||||
// -moz-animation: progress 2s linear;
|
||||
// -o-animation: progress 2s linear;
|
||||
// -ms-animation: progress 2s linear;
|
||||
// }
|
||||
|
||||
// .me-toast__root:hover>.me-toast__bar {
|
||||
// -webkit-animation-play-state: paused;
|
||||
// animation-play-state: paused;
|
||||
// }
|
||||
@ -1 +0,0 @@
|
||||
$toast-icons-path: "./theme/sugar/icons" !default;
|
||||
@ -1,5 +0,0 @@
|
||||
@import '../default/variables';
|
||||
@import 'variables';
|
||||
@import '../animations';
|
||||
@import '../default/main';
|
||||
@import '../sugar/icons';
|
||||
@ -1,95 +1,148 @@
|
||||
.v-toast {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 2em;
|
||||
overflow: hidden;
|
||||
z-index: 1090;
|
||||
pointer-events: none;
|
||||
|
||||
&__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
animation-duration: 150ms;
|
||||
margin: 0.5em 0;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 0.25em;
|
||||
pointer-events: auto;
|
||||
opacity: 0.92;
|
||||
color: #fff;
|
||||
min-height: 3em;
|
||||
cursor: pointer;
|
||||
|
||||
// Directions
|
||||
&__item--rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&__item--ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $color, $value in $toast-colors {
|
||||
|
||||
&--#{$color} {
|
||||
background-color: $value !important;
|
||||
}
|
||||
|
||||
& .v-toast__icon--#{$color} {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: #000
|
||||
}
|
||||
|
||||
// Individual toast position
|
||||
&.v-toast__item--top,
|
||||
&.v-toast__item--bottom {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&.v-toast__item--top-right,
|
||||
&.v-toast__item--bottom-right {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
&.v-toast__item--top-left,
|
||||
&.v-toast__item--bottom-left {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin: 0;
|
||||
padding: 0.5em 1em;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Notice container positions
|
||||
&.v-toast--top {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.v-toast--bottom {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
&.v-toast--custom-parent {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 0;
|
||||
position: fixed !important;
|
||||
}
|
||||
.me-toast {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 2em;
|
||||
overflow: hidden;
|
||||
z-index: 1090;
|
||||
pointer-events: none;
|
||||
|
||||
&__root {
|
||||
display: flex;
|
||||
|
||||
// Individual toast position
|
||||
&.me-toast__root--top,
|
||||
&.me-toast__root--bottom {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&.me-toast__root--top-right,
|
||||
&.me-toast__root--bottom-right {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
&.me-toast__root--top-left,
|
||||
&.me-toast__root--bottom-left {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
animation-duration: 150ms;
|
||||
margin: 0.3em 0;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 0.25em;
|
||||
pointer-events: auto;
|
||||
opacity: 0.92;
|
||||
color: #fff;
|
||||
min-height: 49px;
|
||||
width: 490px;
|
||||
cursor: pointer;
|
||||
|
||||
& .me-toast__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
// Directions
|
||||
|
||||
&--rtl {
|
||||
direction: rtl;
|
||||
|
||||
.me-toast__icon {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--ltr {
|
||||
direction: ltr;
|
||||
|
||||
.me-toast__icon {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $color, $value in $toast-colors {
|
||||
|
||||
&--#{$color} {
|
||||
background-color: $value !important;
|
||||
}
|
||||
|
||||
& .me-toast__icon--#{$color} {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 12px;
|
||||
padding: 0 16px;
|
||||
height: 65%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__message {
|
||||
font-size: 10px;
|
||||
margin-right: 16px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $color, $value in $toast-colors {
|
||||
|
||||
&__progress--#{$color} {
|
||||
background: $value !important;
|
||||
}
|
||||
|
||||
.me-toast__bar--#{$color} {
|
||||
background-color: $value ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&__progress {
|
||||
width: 490px;
|
||||
border-radius: 12px;
|
||||
|
||||
.me-toast__bar {
|
||||
width: 1%;
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// Notice container positions
|
||||
&.me-toast--top {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.me-toast--bottom {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
&.me-toast--custom-parent {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 0;
|
||||
position: fixed !important;
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,15 @@
|
||||
$toast-colors: (
|
||||
) !default;
|
||||
$toast-colors: map-merge(("success": #32CAD5,
|
||||
"success-light": #32CAD5CC,
|
||||
"info": #E8E8E8,
|
||||
"info-light": #F7F7F7,
|
||||
"warning": #febc22,
|
||||
"warning-light": #febc22,
|
||||
"error": #EE3552,
|
||||
"error-light": #EE3552CC,
|
||||
"default": #000,
|
||||
"default-light": #3E3E3E),
|
||||
$toast-colors
|
||||
);
|
||||
$toast-colors: (
|
||||
) !default;
|
||||
$toast-colors: map-merge(("success": #32CAD5,
|
||||
"success-light": #32CAD5CC,
|
||||
"info": #000000,
|
||||
"info-light": #3E3E3E,
|
||||
"warning": #febc22,
|
||||
"warning-light": #febc22,
|
||||
"error": #EE3552,
|
||||
"error-light": #EE3552CC,
|
||||
"default": #E8E8E8,
|
||||
"default-light": #F7F7F7),
|
||||
$toast-colors
|
||||
);
|
||||
$toast-icons-path: "../sugar/icons" !default;
|
||||
@ -1,3 +1,4 @@
|
||||
@import 'variables';
|
||||
@import '../animations';
|
||||
@import 'main';
|
||||
@import 'variables';
|
||||
@import '../animations';
|
||||
@import 'main';
|
||||
@import '../sugar/icons';
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 759 B |
|
After Width: | Height: | Size: 759 B |
|
Before Width: | Height: | Size: 466 B After Width: | Height: | Size: 616 B |
|
Before Width: | Height: | Size: 142 B |
|
After Width: | Height: | Size: 211 B |
|
Before Width: | Height: | Size: 453 B After Width: | Height: | Size: 211 B |
|
Before Width: | Height: | Size: 308 B After Width: | Height: | Size: 474 B |
|
Before Width: | Height: | Size: 589 B |
@ -1,24 +0,0 @@
|
||||
export default class Timer {
|
||||
constructor(callback, delay) {
|
||||
this.startedAt = Date.now();
|
||||
this.callback = callback;
|
||||
this.delay = delay;
|
||||
|
||||
this.timer = setTimeout(callback, delay);
|
||||
}
|
||||
|
||||
pause() {
|
||||
this.stop();
|
||||
this.delay -= Date.now() - this.startedAt;
|
||||
}
|
||||
|
||||
resume() {
|
||||
this.stop();
|
||||
this.startedAt = Date.now();
|
||||
this.timer = setTimeout(this.callback, this.delay);
|
||||
}
|
||||
|
||||
stop() {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
import mitt from 'mitt'
|
||||
const eventBus = mitt();
|
||||
import mitt from 'mitt'
|
||||
const eventBus = mitt();
|
||||
export default eventBus;
|
||||
@ -1,48 +1,30 @@
|
||||
import Vue from 'vue';
|
||||
export const removeElement = (el) => {
|
||||
console.log(el);
|
||||
if (typeof el.remove !== 'undefined') {
|
||||
el.remove()
|
||||
} else {
|
||||
if (el.parentNode) el.parentNode.removeChild(el)
|
||||
}
|
||||
}
|
||||
|
||||
export const createComponent = (component, props, parentContainer, slots = {}) => {
|
||||
// const vNode = h(component, props, slots)
|
||||
// const container = document.createElement('div');
|
||||
// console.log(parentContainer, container);
|
||||
// container.classList.add('v-toast--pending')
|
||||
// parentContainer.appendChild(container);
|
||||
// h(vNode, container);
|
||||
|
||||
// return vNode.component
|
||||
// return Vue.component('MeshkeeToast', {
|
||||
// render: (createElement) => {
|
||||
// return createElement(
|
||||
// 'div',
|
||||
// { class: { 'v-toast--pending': true } },
|
||||
// MeshkeeToast
|
||||
// )
|
||||
// }
|
||||
// });
|
||||
const toastTpl = Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
return h(
|
||||
component,
|
||||
{
|
||||
style: this.extStyle,
|
||||
props
|
||||
}
|
||||
)
|
||||
}
|
||||
});
|
||||
let toastVM = new toastTpl();
|
||||
const tpl = toastVM.$mount().$el;
|
||||
parentContainer.appendChild(tpl);
|
||||
return toastVM.$children[0];
|
||||
}
|
||||
import Vue from 'vue';
|
||||
export const removeElement = (el) => {
|
||||
if (typeof el.remove !== 'undefined') {
|
||||
el.remove()
|
||||
} else {
|
||||
if (el.parentNode) el.parentNode.removeChild(el)
|
||||
}
|
||||
}
|
||||
|
||||
export const createComponent = (component, props, parentContainer, slots = {}) => {
|
||||
const toastTpl = Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
return h(
|
||||
component,
|
||||
{
|
||||
style: this.extStyle,
|
||||
props
|
||||
}
|
||||
)
|
||||
}
|
||||
});
|
||||
let toastVM = new toastTpl();
|
||||
const tpl = toastVM.$mount().$el;
|
||||
parentContainer.appendChild(tpl);
|
||||
return toastVM.$children[0];
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
export default Object.freeze({
|
||||
TOP_RIGHT: 'top-right',
|
||||
TOP: 'top',
|
||||
TOP_LEFT: 'top-left',
|
||||
BOTTOM_RIGHT: 'bottom-right',
|
||||
BOTTOM: 'bottom',
|
||||
BOTTOM_LEFT: 'bottom-left',
|
||||
export default Object.freeze({
|
||||
TOP_RIGHT: 'top-right',
|
||||
TOP: 'top',
|
||||
TOP_LEFT: 'top-left',
|
||||
BOTTOM_RIGHT: 'bottom-right',
|
||||
BOTTOM: 'bottom',
|
||||
BOTTOM_LEFT: 'bottom-left',
|
||||
})
|
||||
@ -0,0 +1,47 @@
|
||||
export default class Timer {
|
||||
constructor(callback, delay) {
|
||||
this.startedAt = Date.now();
|
||||
this.callback = callback;
|
||||
this.delay = delay;
|
||||
this.timer = setTimeout(callback, delay);
|
||||
this.index = 0;
|
||||
this.width = 0;
|
||||
this.widthTimer = null;
|
||||
}
|
||||
|
||||
pause() {
|
||||
this.stop();
|
||||
this.delay -= Date.now() - this.startedAt;
|
||||
}
|
||||
|
||||
resume() {
|
||||
this.stop();
|
||||
this.startedAt = Date.now();
|
||||
this.timer = setTimeout(this.callback, this.delay);
|
||||
}
|
||||
|
||||
stop() {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
|
||||
move(elem, stop) {
|
||||
if (stop) {
|
||||
this.index = 0;
|
||||
return clearInterval(this.widthTimer);
|
||||
}
|
||||
|
||||
if (this.index == 0) {
|
||||
this.index = 1;
|
||||
this.widthTimer = setInterval(() => {
|
||||
if (this.width >= 100) {
|
||||
clearInterval(this.widthTimer);
|
||||
this.index = 0;
|
||||
} else {
|
||||
this.width++;
|
||||
elem.style.width = this.width + "%";
|
||||
}
|
||||
}, (this.delay / 100));
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue