From 9ccfb0044d7a760c3bc4be0df0e5c587117f16e2 Mon Sep 17 00:00:00 2001
From: sajjad <sajjad.t.dev@gmail.com>
Date: Mon, 18 Mar 2024 06:50:27 -0700
Subject: [PATCH] fix

---
 package.json                        |   2 +-
 src/MeshkeeToast.vue                |  26 +++--
 src/api.js                          |  39 ++++++-
 src/helpers.js                      |   1 -
 src/theme/bootstrap/_variables.scss |   2 +-
 src/theme/default/_main.scss        | 157 +++++++++++++++-------------
 src/theme/default/_variables.scss   |  15 ++-
 src/theme/sugar/_variables.scss     |  13 ++-
 src/theme/sugar/icons.scss          |  30 ++++--
 src/theme/sugar/icons/info-1.png    | Bin 0 -> 142 bytes
 10 files changed, 189 insertions(+), 96 deletions(-)
 create mode 100644 src/theme/sugar/icons/info-1.png

diff --git a/package.json b/package.json
index 9b02920..019832f 100644
--- a/package.json
+++ b/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",
diff --git a/src/MeshkeeToast.vue b/src/MeshkeeToast.vue
index 15722d4..ae0d772 100644
--- a/src/MeshkeeToast.vue
+++ b/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;
 
diff --git a/src/api.js b/src/api.js
index 811a1d0..5e4018c 100644
--- a/src/api.js
+++ b/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
             }
diff --git a/src/helpers.js b/src/helpers.js
index fab2da6..e9e1660 100644
--- a/src/helpers.js
+++ b/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
         }
diff --git a/src/theme/bootstrap/_variables.scss b/src/theme/bootstrap/_variables.scss
index c084f32..1c61993 100644
--- a/src/theme/bootstrap/_variables.scss
+++ b/src/theme/bootstrap/_variables.scss
@@ -1 +1 @@
-$toast-icons-path: "../sugar/icons" !default;
\ No newline at end of file
+$toast-icons-path: "./theme/sugar/icons" !default;
\ No newline at end of file
diff --git a/src/theme/default/_main.scss b/src/theme/default/_main.scss
index 3ce726f..cc2204b 100644
--- a/src/theme/default/_main.scss
+++ b/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;
     }
-  }
\ No newline at end of file
+  }
+
+  &__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;
+  }
+}
\ No newline at end of file
diff --git a/src/theme/default/_variables.scss b/src/theme/default/_variables.scss
index 619ad2e..aa141b1 100644
--- a/src/theme/default/_variables.scss
+++ b/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
 );
\ No newline at end of file
diff --git a/src/theme/sugar/_variables.scss b/src/theme/sugar/_variables.scss
index 83e96e8..f6d30ba 100644
--- a/src/theme/sugar/_variables.scss
+++ b/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
 );
\ No newline at end of file
diff --git a/src/theme/sugar/icons.scss b/src/theme/sugar/icons.scss
index 0655fd4..3222e78 100644
--- a/src/theme/sugar/icons.scss
+++ b/src/theme/sugar/icons.scss
@@ -3,17 +3,30 @@
         opacity: 1;
         min-height: 4em;
 
-        .v-toast__text {
-            padding: 1.5em 1em;
+        .v-toast__title {
+            font-size: 12px;
+            border-left: 1px dashed #888888;
+            padding-left: 24px;
         }
 
         .v-toast__icon {
+            height: 100%;
+            background: #32CAD5CC;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 16px;
+        }
+
+        .v-toast__icon--image {
             display: block;
             width: 27px;
             min-width: 27px;
             height: 27px;
-            margin-left: 1em;
+            background-size: cover !important;
+            background-position: center !important;
             // background: url(#{$toast-icons-path}/info.svg) no-repeat;
+            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAh1BMVEX///8AAAD7+/v5+fmurq729vbx8fHt7e0jIyPm5ubLy8vo6Oja2try8vJbW1vExMSIiIhlZWU+Pj7U1NRLS0uwsLCnp6cbGxufn5/g4OCOjo56enpra2u2trYuLi4zMzN3d3eXl5eCgoJNTU07OzsnJycODg4xMTFVVVW9vb1EREQdHR0UFBSEy58IAAAGp0lEQVR4nO2djXaqSgyFHQUERFFRqigKLXJb6/s/31Vv22P9IQlwzySu+R7Alb1khsxOMnQ6BoPBYDAYDAaD4fnpB+E8jufhsq87kv+Drj+eHdQXL/ux39UdUbt4+UZdsck93VG1x2B8uNZ3/ifHA92RtYTl3tN3wrV0x9YGzuSRvhMT+ZtOsK0SqNR0qTvChvgPn9CfJzXSHWMjohdIoFKfge4oG9AH/8ETW7lbaneEEajUSHegtVngBCq10B1pTQKsQKWEbqhrvMK17lhrEeEFKiXylUH4C5Va6Y62BgOKQFUKfGPEJIVKYA6OfBd+I++d6KDSmT8cbN0RUyHtpCfEZacWVWGqO2IqOVVhrjtiKq9Uha+6I6aSURVmuiOm8vwKV0+vMKEqHOuOmAr69PtNrDtiKiFVoa87YioeVaG4w0V3TxNY6A6YDvGVL26j6XR8mkJxy/BIQRE4k1gwJR3yBR7xO53hP3iBxVB3tLUg/Ilz3bHWA1u2UOpdd6h1Qdv6Qk39I+lTP6NnxhiB4vyLXyAyG4HZzC/AfzHRHWFjgHeGuGPhHaKKU8ZeZFXtBjt/0JHh5j3dsbXFILlTxfhMnqh1r9Nx5qPyUl45Sh3dMbVO38+z0X463Y+y3H8+ed/0bPtp1p7BYDAYDFS6zhHbluiKAgyD0EpWk7fCPbLbFu+rOBLXOfOA3jKMs/29U4W7DsWLtIM4qzT1iw/dITbADhZrYMbiRCb0b/TSNbafbS/veDH0kzekujPCuhGHH6ub+TsIQR36drjaUeUd2QopONn+6rOGvBMi2hGDfFpTnpLgdl/bS1S47zXRCjGYVsmUc5rqpKQ3w332fBUGCfnVIEphRJqGqYDpOvTfW9LHtPE5bE8fy6Qmqpw8JxPq1nPNsq3194XLbRafOKoFM9Gt6Df9dh/QE8yWIbnnF4bZpJPTNEW7YcvsfW/f7TT8LN7Xr+N8EefJ6wThzlyS6ZZ0RW92FWC5X1mRc+nx2suUsljZ2W2/Gg3dLL3fZuCh+rzOsGvO//MynI6jiiUUIg2Nt78XOpKvDrXdawQU4j2cRH79evkprNkckYfgxmX4Necvjg8WcnPATHXt+Blt8wPaGsOMWjC8CcPD730OwgEQ3pOIOITIbe0+A4/IsrVokMAjsiwNDAJwdze7lI0I/JRyO94T6YHTlfxSNhoDsJrBL2WjAadt0hvYc0jgRmibwg/gzFqmO8KG9MGasORRrhPwMhSessGHJ5FjzZdce1Y38K/fV9MHH1J2FRki4DJ8EZ6ywWk309IvHjApZVaRIQOXcJhVZMiA89s76YNP4PmeoctGAj4birzk4wL4HgXpyxCs9rNuZsMAWqUSbwy+xAbtbhFtsxWAF7OW0ge4c0ih+JMT2HUq/eTkQALFm92wgSH95AR2Ysx0R9gQ+LJE6bfReKCdz68/gcYcEvgib2DtN2BVTbqBYYOXQUo3MOC79KUvQ/DkJL7mBPZeSjcwhmDNSXibEKLZS7qBAdacttKXIVhzynRH2BD480fSS78foELpBgZYc9rqjrAhsNkt3UeEzW7pBgaYson3EUGzW7qBAZvd0g0MOGWT3oEBflfmU7qPCM54SzcwHNM0K97AAM1ul9+cEw0wZZO+DOE2IekGBmh2izcwwDahnfDSL2x2S/cRYbNbuoEBXwoifRmCZvdUeD/iELzvUvq4IXxykr4M4el06csQNLs3wpNSeMCC2X1JZGCzW/pGA881C/eCEd9UzXTH2IwlKFBlumNshgUrfJN9skB8Rb1Ej1T2En62Kmx2K3RO000LhmYAfHI6MsXYwcP0dOsyP9cR9xF1+AQcJP/d98avTRr5OdXquowX//xM9leiJuAccArV+6Pdxo4Wl/3v7GxH/Oe3D5l/3U/T6/tWdrVTzbgdlvF37B0p1nm49AaOM/CWfpxkszvXTbJrK4JTtts/03Ur6jguszbi9q81LZndp4j8pjFFIbMrJeA7r4hw+/YqbHYTSbjl6Ohvi+PImD2hHdTJCc+E2QN6BnPLJVYfzzJ4W7e0lxlTR7ULOqUodmN+6++LboPP6Pwwixn3EjVXWK55Lr9vmj6lswWzFO0WhAv1kE3lpdlcwFkY95h8yKjW1MtpypHFeHO5gv5CPIws9ovvEuKf6K4tcd3ehAPiNPGZnd9xhKhPexTZXNyf90MAOabTlRVws5dodNOHGjejJF1yswdr4Vnr4vJpLXfFWxb7ch/Me3T7XhSm8ZGPaDmQ8To3GAwGg8FgMBgMtfgX4phcSjYMW/wAAAAASUVORK5CYII=');
 
             [dir="rtl"] & {
                 margin-left: unset;
@@ -21,15 +34,18 @@
             }
         }
 
-        &.v-toast__item--success .v-toast__icon {
-            // background: url(#{$toast-icons-path}/success.svg) no-repeat;
+        &.v-toast__item--success {
+            .v-toast__icon--image {
+                // background: url(#{$toast-icons-path}/success.svg) no-repeat;
+                background: url('data:image/jpeg;base64,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');
+            }
         }
 
-        &.v-toast__item--error .v-toast__icon {
+        &.v-toast__item--error .v-toast__icon--image {
             // background: url(#{$toast-icons-path}/error.svg) no-repeat;
         }
 
-        &.v-toast__item--warning .v-toast__icon {
+        &.v-toast__item--warning .v-toast__icon--image {
             // background: url(#{$toast-icons-path}/warning.svg) no-repeat;
         }
     }
diff --git a/src/theme/sugar/icons/info-1.png b/src/theme/sugar/icons/info-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..773fbfb05096fc49c2d666851f9a3ee8b1f5bf61
GIT binary patch
literal 142
zcmeAS@N?(olHy`uVBq!ia0vp^j6f{H!3HFK_`(+gDb50q$YKTtZeb8+WSBKa0;H-q
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzOtu_V@L(#+K!W)3=BNYOMbtfk#~uEmm^Cp
i$AXDnYgJD!uI4=v&%AF+<)ZsQ<qV##elF{r5}E+|2qjbi

literal 0
HcmV?d00001