sajjad
4 months ago
commit
1cb67ddba8
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
@ -0,0 +1,18 @@
|
||||
import commonjs from '@rollup/plugin-commonjs'; // Convert CommonJS modules to ES6
|
||||
import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
|
||||
import buble from '@rollup/plugin-buble'; // Transpile/polyfill with reasonable browser support
|
||||
export default {
|
||||
input: 'src/main.js', // Path relative to package.json
|
||||
output: {
|
||||
name: 'MeshkeeToast',
|
||||
exports: 'named',
|
||||
},
|
||||
plugins: [
|
||||
commonjs(),
|
||||
vue({
|
||||
css: true, // Dynamically inject css as a <style> tag
|
||||
compileTemplate: true, // Explicitly convert template to render function
|
||||
}),
|
||||
buble(), // Transpile to ES5
|
||||
],
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "meshkeetoast",
|
||||
"version": "0.1.0",
|
||||
"main": "dist/MeshkeeToast.umd.js",
|
||||
"style": "dist/theme-bootstrap.css",
|
||||
"module": "dist/MeshkeeToast.esm.js",
|
||||
"unpkg": "dist/MeshkeeToast.min.js",
|
||||
"browser": {
|
||||
"./sfc": "src/MeshkeeToast.vue"
|
||||
},
|
||||
|
||||
"scripts": {
|
||||
"build": "npm run build:umd & npm run build:es & npm run build:unpkg",
|
||||
"postbuild": "cp -r src/theme dist/",
|
||||
"build:umd": "rollup --config build/rollup.config.js --format umd --file dist/MeshkeeToast.umd.js",
|
||||
"build:es": "rollup --config build/rollup.config.js --format es --file dist/MeshkeeToast.esm.js",
|
||||
"build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/MeshkeeToast.min.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-buble": "^0.21.3",
|
||||
"@rollup/plugin-commonjs": "^11.1.0",
|
||||
"rollup": "^1.17.0",
|
||||
"rollup-plugin-vue": "^5.0.1",
|
||||
"vue": "^2.6.10",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vue/cli-service": "^5.0.8",
|
||||
"mitt": "^3.0.1",
|
||||
"sass": "^1.72.0",
|
||||
"sass-loader": "^14.1.1",
|
||||
"style-loader": "^3.3.4",
|
||||
"svg-url-loader": "^8.0.0",
|
||||
"vue-loader": "^17.4.2"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,192 @@
|
||||
<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--${position}`]" @mouseover="toggleTimer(true)"
|
||||
@mouseleave="toggleTimer(false)" @click="whenClicked">
|
||||
<div class="v-toast__icon"></div>
|
||||
<p class="v-toast__text" v-html="message"></p>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, h } 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: {
|
||||
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
|
||||
},
|
||||
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);
|
||||
this.correctParent.insertAdjacentElement('afterbegin', 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>
|
||||
@ -0,0 +1,55 @@
|
||||
import MeshkeeToast from './MeshkeeToast.vue'
|
||||
import { createComponent } from './helpers';
|
||||
import eventBus from './bus.js';
|
||||
|
||||
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);
|
||||
const instance = createComponent(MeshkeeToast, propsData, document.body);
|
||||
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))
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,3 @@
|
||||
import mitt from 'mitt'
|
||||
const eventBus = mitt();
|
||||
export default eventBus;
|
||||
@ -0,0 +1,49 @@
|
||||
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,
|
||||
{
|
||||
class: ['lx-toast', 'lx-toast-lx-word-wrap'],
|
||||
style: this.extStyle,
|
||||
props
|
||||
}
|
||||
)
|
||||
}
|
||||
});
|
||||
let toastVM = new toastTpl();
|
||||
const tpl = toastVM.$mount().$el;
|
||||
parentContainer.appendChild(tpl);
|
||||
return toastVM.$children[0];
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
// 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');
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +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',
|
||||
})
|
||||
@ -0,0 +1,59 @@
|
||||
@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;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
$toast-icons-path: "../sugar/icons" !default;
|
||||
@ -0,0 +1,5 @@
|
||||
@import '../default/variables';
|
||||
@import 'variables';
|
||||
@import '../animations';
|
||||
@import '../default/main';
|
||||
@import '../sugar/icons';
|
||||
@ -0,0 +1,78 @@
|
||||
.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;
|
||||
|
||||
// Colors
|
||||
@each $color, $value in $toast-colors {
|
||||
&--#{$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;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
$toast-colors: (
|
||||
) !default;
|
||||
$toast-colors: map-merge(("success": #28a745,
|
||||
"info": #17a2b8,
|
||||
"warning": #ffc107,
|
||||
"error": #dc3545,
|
||||
"default": #343a40),
|
||||
$toast-colors
|
||||
);
|
||||
@ -0,0 +1,3 @@
|
||||
@import 'variables';
|
||||
@import '../animations';
|
||||
@import 'main';
|
||||
@ -0,0 +1,12 @@
|
||||
$toast-icons-path: "./icons" !default;
|
||||
$toast-colors: () !default;
|
||||
$toast-colors: map-merge(
|
||||
(
|
||||
"success": #47d78a,
|
||||
"info": #1c85d5,
|
||||
"warning": #febc22,
|
||||
"error": #f7471c,
|
||||
"default": #343a40
|
||||
),
|
||||
$toast-colors
|
||||
);
|
||||
@ -0,0 +1,36 @@
|
||||
.v-toast {
|
||||
&__item {
|
||||
opacity: 1;
|
||||
min-height: 4em;
|
||||
|
||||
.v-toast__text {
|
||||
padding: 1.5em 1em;
|
||||
}
|
||||
|
||||
.v-toast__icon {
|
||||
display: block;
|
||||
width: 27px;
|
||||
min-width: 27px;
|
||||
height: 27px;
|
||||
margin-left: 1em;
|
||||
// background: url(#{$toast-icons-path}/info.svg) no-repeat;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-toast__item--success .v-toast__icon {
|
||||
// background: url(#{$toast-icons-path}/success.svg) no-repeat;
|
||||
}
|
||||
|
||||
&.v-toast__item--error .v-toast__icon {
|
||||
// background: url(#{$toast-icons-path}/error.svg) no-repeat;
|
||||
}
|
||||
|
||||
&.v-toast__item--warning .v-toast__icon {
|
||||
// background: url(#{$toast-icons-path}/warning.svg) no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 466 B |
|
After Width: | Height: | Size: 453 B |
|
After Width: | Height: | Size: 308 B |
|
After Width: | Height: | Size: 589 B |
@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import '../animations';
|
||||
@import '../default/main';
|
||||
@import 'icons';
|
||||
@ -0,0 +1,24 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue