sajjad.talkhabi
/
meshkeetoast
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

fix

Browse Source
master
sajjad 6 months ago
parent 1cb67ddba8
commit 9ccfb0044d
10 changed files with 189 additions and 96 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape View File

@ -10,7 +10,7 @@
}, },
"scripts": { "scripts": {
"build": "npm run build:umd & npm run build:es & npm run build:unpkg", "build": "vue-cli-service build & npm run build:umd & npm run build:es & npm run build:unpkg",
"postbuild": "cp -r src/theme dist/", "postbuild": "cp -r src/theme dist/",
"build:umd": "rollup --config build/rollup.config.js --format umd --file dist/MeshkeeToast.umd.js", "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:es": "rollup --config build/rollup.config.js --format es --file dist/MeshkeeToast.esm.js",

26
src/MeshkeeToast.vue
Unescape View File

@ -1,16 +1,19 @@
<template> <template>
<transition :enter-active-class="transition.enter" :leave-active-class="transition.leave"> <transition :enter-active-class="transition.enter" :leave-active-class="transition.leave">
<div ref="root" role="alert" v-show="isActive" class="v-toast__item" <div ref="root" role="alert" v-show="isActive" class="v-toast__item"
:class="[`v-toast__item--${type}`, `v-toast__item--${position}`]" @mouseover="toggleTimer(true)" :class="[`v-toast__item--${type}`, `v-toast__item--${direction}`, `v-toast__item--${position}`]"
@mouseleave="toggleTimer(false)" @click="whenClicked"> @mouseover="toggleTimer(true)" @mouseleave="toggleTimer(false)" @click="whenClicked">
<div class="v-toast__icon"></div> <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> <p class="v-toast__text" v-html="message"></p>
</div> </div>
</transition> </transition>
</template> </template>
<script> <script>
import { defineComponent, h } from 'vue'; import { defineComponent } from 'vue';
import { removeElement } from './helpers.js'; import { removeElement } from './helpers.js';
import Timer from "./timer.js"; import Timer from "./timer.js";
import Positions from './positions.js' import Positions from './positions.js'
@ -19,6 +22,10 @@ import eventBus from './bus.js'
export default defineComponent({ export default defineComponent({
name: 'Toast', name: 'Toast',
props: { props: {
title: {
type: String,
default: 'توجه'
},
message: { message: {
type: String, type: String,
required: true required: true
@ -38,6 +45,10 @@ export default defineComponent({
type: Number, type: Number,
default: 3000 default: 3000
}, },
direction: {
type: String,
default: 'rtl'
},
dismissible: { dismissible: {
type: Boolean, type: Boolean,
default: true default: true
@ -142,7 +153,7 @@ export default defineComponent({
const wrapper = this.$refs.root; const wrapper = this.$refs.root;
// unmount the component // unmount the component
removeElement(wrapper) // removeElement(wrapper);
}, 150) }, 150)
}, },
@ -153,7 +164,10 @@ export default defineComponent({
return return
} }
console.log(this.correctParent); console.log(this.correctParent);
this.correctParent.insertAdjacentElement('afterbegin', this.$refs.root); 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.$options.elem = this.correctParent;

39
src/api.js
Unescape View File

@ -1,7 +1,42 @@
import MeshkeeToast from './MeshkeeToast.vue' import MeshkeeToast from './MeshkeeToast.vue'
import { createComponent } from './helpers'; import { createComponent } from './helpers';
import eventBus from './bus.js'; 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 = {}) => { export const useToast = (globalProps = {}) => {
return { return {
open(options) { open(options) {
@ -13,7 +48,9 @@ export const useToast = (globalProps = {}) => {
}; };
const propsData = Object.assign({}, defaultProps, globalProps, options); const propsData = Object.assign({}, defaultProps, globalProps, options);
const instance = createComponent(MeshkeeToast, propsData, document.body); setupContainer();
console.log(propsData.position, correctParent(propsData.position ? propsData.position : 'bottom'));
const instance = createComponent(MeshkeeToast, propsData, correctParent(propsData.position ? propsData.position : 'bottom'));
return { return {
dismiss: instance.dismiss dismiss: instance.dismiss
} }

1
src/helpers.js
Unescape View File

@ -35,7 +35,6 @@ export const createComponent = (component, props, parentContainer, slots = {}) =
return h( return h(
component, component,
{ {
class: ['lx-toast', 'lx-toast-lx-word-wrap'],
style: this.extStyle, style: this.extStyle,
props props
} }

2
src/theme/bootstrap/_variables.scss
Unescape View File

@ -1 +1 @@
$toast-icons-path: "../sugar/icons" !default; $toast-icons-path: "./theme/sugar/icons" !default;

135
src/theme/default/_main.scss
Unescape View File

@ -1,78 +1,95 @@
.v-toast { .v-toast {
position: fixed; position: fixed;
display: flex; display: flex;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
padding: 2em; padding: 2em;
overflow: hidden; overflow: hidden;
z-index: 1090; z-index: 1090;
pointer-events: none; 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 { &__item {
color: #000 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;
// Individual toast position // Directions
&.v-toast__item--top, &.v-toast__item--bottom { &__item--rtl {
align-self: center; direction: rtl;
} }
&__item--ltr {
direction: ltr;
}
// Colors
@each $color, $value in $toast-colors {
&.v-toast__item--top-right, &.v-toast__item--bottom-right { &--#{$color} {
align-self: flex-end; background-color: $value !important;
} }
&.v-toast__item--top-left, &.v-toast__item--bottom-left { & .v-toast__icon--#{$color} {
align-self: flex-start; background-color: $value;
} }
} }
&__text { &--warning {
margin: 0; color: #000
padding: 0.5em 1em;
word-break: break-word;
} }
&__icon { // Individual toast position
display: none; &.v-toast__item--top,
&.v-toast__item--bottom {
align-self: center;
} }
// Notice container positions &.v-toast__item--top-right,
&.v-toast--top { &.v-toast__item--bottom-right {
flex-direction: column; align-self: flex-end;
} }
&.v-toast--bottom { &.v-toast__item--top-left,
flex-direction: column-reverse; &.v-toast__item--bottom-left {
align-self: flex-start;
} }
}
&.v-toast--custom-parent { &__text {
position: absolute; margin: 0;
} padding: 0.5em 1em;
word-break: break-word;
}
@media screen and (max-width: 768px) { &__icon {
padding: 0; display: none;
position: fixed !important; }
}
// 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;
} }
}

15
src/theme/default/_variables.scss
Unescape View File

@ -1,9 +1,14 @@
$toast-colors: ( $toast-colors: (
) !default; ) !default;
$toast-colors: map-merge(("success": #28a745, $toast-colors: map-merge(("success": #32CAD5,
"info": #17a2b8, "success-light": #32CAD5CC,
"warning": #ffc107, "info": #E8E8E8,
"error": #dc3545, "info-light": #F7F7F7,
"default": #343a40), "warning": #febc22,
"warning-light": #febc22,
"error": #EE3552,
"error-light": #EE3552CC,
"default": #000,
"default-light": #3E3E3E),
$toast-colors $toast-colors
); );

13
src/theme/sugar/_variables.scss
Unescape View File

@ -2,11 +2,16 @@ $toast-icons-path: "./icons" !default;
$toast-colors: () !default; $toast-colors: () !default;
$toast-colors: map-merge( $toast-colors: map-merge(
( (
"success": #47d78a, "success": #32CAD5,
"info": #1c85d5, "success-light": #32CAD5CC,
"info": #E8E8E8,
"info-light": #F7F7F7,
"warning": #febc22, "warning": #febc22,
"error": #f7471c, "warning-light": #febc22,
"default": #343a40 "error": #EE3552,
"error-light": #EE3552CC,
"default": #000,
"default-light": #3E3E3E
), ),
$toast-colors $toast-colors
); );

30
src/theme/sugar/icons.scss
View File

File diff suppressed because one or more lines are too long

BIN
src/theme/sugar/icons/info-1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 B

Write Preview
Loading…
Cancel
Save