fix

package.json

@@ -10,7 +10,7 @@
   },
   
   "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/",
     "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",

src/MeshkeeToast.vue

@@ -1,16 +1,19 @@
 <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>
+            :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, h } from 'vue';
+import { defineComponent } from 'vue';
 import { removeElement } from './helpers.js';
 import Timer from "./timer.js";
 import Positions from './positions.js'
@@ -19,6 +22,10 @@ import eventBus from './bus.js'
 export default defineComponent({
     name: 'Toast',
     props: {
+        title: {
+            type: String,
+            default: 'توجه'
+        },
         message: {
             type: String,
             required: true
@@ -38,6 +45,10 @@ export default defineComponent({
             type: Number,
             default: 3000
         },
+        direction: {
+            type: String,
+            default: 'rtl'
+        },
         dismissible: {
             type: Boolean,
             default: true
@@ -142,7 +153,7 @@ export default defineComponent({
 
                 const wrapper = this.$refs.root;
                 // unmount the component
-                removeElement(wrapper)
+                // removeElement(wrapper);
             }, 150)
         },
 
@@ -153,7 +164,10 @@ export default defineComponent({
                 return
             }
             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;
 

src/api.js

@@ -1,7 +1,42 @@
 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) {
@@ -13,7 +48,9 @@ export const useToast = (globalProps = {}) => {
             };
 
             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 {
                 dismiss: instance.dismiss
             }

src/helpers.js

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

src/theme/bootstrap/_variables.scss

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

src/theme/default/_main.scss

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

src/theme/default/_variables.scss

@@ -1,9 +1,14 @@
 $toast-colors: (
     ) !default;
-$toast-colors: map-merge(("success": #28a745,
-            "info": #17a2b8,
-            "warning": #ffc107,
-            "error": #dc3545,
-            "default": #343a40),
+$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
 );

src/theme/sugar/_variables.scss

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