✨ New feature - position: center option. #hacktoberfest

README.md

@@ -54,19 +54,19 @@ setTimeout(this.$toast.clear, 3000);
 
 The API methods accepts these options:
 
-| Attribute     |      Type       |    Default     | Description                                                                   |
-| :------------ | :-------------: | :------------: | :---------------------------------------------------------------------------- |
-| message       |     String      |       --       | Message text/html (required)                                                  |
-| type          |     String      |   `default`    | One of `success`, `info`, `warning`, `error`, `default`                       |
-| position      |     String      | `bottom-right` | One of `top`, `bottom`, `top-right`, `bottom-right`,`top-left`, `bottom-left` |
-| duration      | Number or false |     `4000`     | Visibility duration in milliseconds or `false` that disables duration         |
-| dismissible   |     Boolean     |     `true`     | Allow user close by clicking                                                  |
-| onClick       |    Function     |       --       | Do something when user clicks                                                 |
-| onClose       |    Function     |       --       | Do something after toast gets dismissed                                       |
-| queue         |     Boolean     |    `false`     | Wait for existing to close before showing new                                 |
-| maxToasts     | Number or false |    `false`     | Defines the max of toasts showed in simultaneous                              |
-| pauseOnHover  |     Boolean     |     `true`     | Pause the timer when mouse on over a toast                                    |
-| useDefaultCss |     Boolean     |     `true`     | User default css styles                                                       |
+| Attribute     |      Type       |    Default     | Description                                                                             |
+| :------------ | :-------------: | :------------: | :---------------------------------------------------------------------------------------|
+| message       |     String      |       --       | Message text/html (required)                                                            |
+| type          |     String      |   `default`    | One of `success`, `info`, `warning`, `error`, `default`                                 |
+| position      |     String      | `bottom-right` | One of `top`, `bottom`, `center`, `top-right`, `bottom-right`,`top-left`, `bottom-left` |
+| duration      | Number or false |     `4000`     | Visibility duration in milliseconds or `false` that disables duration                   |
+| dismissible   |     Boolean     |     `true`     | Allow user close by clicking                                                            |
+| onClick       |    Function     |       --       | Do something when user clicks                                                           |
+| onClose       |    Function     |       --       | Do something after toast gets dismissed                                                 |
+| queue         |     Boolean     |    `false`     | Wait for existing to close before showing new                                           |
+| maxToasts     | Number or false |    `false`     | Defines the max of toasts showed in simultaneous                                        |
+| pauseOnHover  |     Boolean     |     `true`     | Pause the timer when mouse on over a toast                                              |
+| useDefaultCss |     Boolean     |     `true`     | User default css styles                                                                 |
 
 ## API methods
 

src/Toaster.vue

@@ -77,6 +77,7 @@ export default {
       isActive: false,
       parentTop: null,
       parentBottom: null,
+      parentCenter: null,
       isHovered: false,
       timer: null
     }
@@ -94,8 +95,9 @@ export default {
     createParents() {
       this.parentTop = document.querySelector('.vue-toaster-container--top')
       this.parentBottom = document.querySelector('.vue-toaster-container--bottom')
+      this.parentCenter = document.querySelector('.vue-toaster-container--center')
 
-      if (this.parentTop && this.parentBottom) return
+      if (this.parentTop && this.parentBottom && this.parentCenter) return
 
       if (!this.parentTop) {
         this.parentTop = document.createElement('div')
@@ -107,16 +109,23 @@ export default {
         this.parentBottom.className =
           'vue-toaster-container vue-toaster-container--bottom'
       }
+
+      if (!this.parentCenter) {
+        this.parentCenter = document.createElement('div')
+        this.parentCenter.className = 'vue-toaster-container vue-toaster-container--center'
+      }
     },
     setDefaultCss() {
       const type = this.useDefaultCss ? 'add' : 'remove'
       this.parentTop.classList[type]('v--default-css')
       this.parentBottom.classList[type]('v--default-css')
+      this.parentCenter.classList[type]('v--default-css')
     },
     setupContainer() {
       const container = document.body
       container.appendChild(this.parentTop)
       container.appendChild(this.parentBottom)
+      container.appendChild(this.parentCenter)
     },
     shouldQueue() {
       if (!this.queue && this.maxToasts === false) {
@@ -126,13 +135,14 @@ export default {
       if (this.maxToasts !== false) {
         return (
           this.maxToasts <=
-          this.parentTop.childElementCount + this.parentBottom.childElementCount
+          this.parentTop.childElementCount + this.parentBottom.childElementCount + this.parentCenter.childElementCount
         )
       }
 
       return (
         this.parentTop.childElementCount > 0 ||
-        this.parentBottom.childElementCount > 0
+        this.parentBottom.childElementCount > 0 ||
+        this.parentCenter.childElementCount > 0
       )
     },
     showNotice() {
@@ -174,7 +184,7 @@ export default {
   },
   computed: {
     correctParent() {
-      return definePosition(this.position, this.parentTop, this.parentBottom)
+      return definePosition(this.position, this.parentTop, this.parentBottom, this.parentCenter)
     },
     transition() {
       return definePosition(
@@ -186,6 +196,10 @@ export default {
         {
           enter: 'vue-toaster-fade-in-up',
           leave: 'vue-toaster-fade-out'
+        },
+        {
+          enter: 'vue-toaster-fade-in-grow',
+          leave: 'vue-toaster-fade-out'
         }
       )
     }

src/defaults/positions.js

@@ -4,11 +4,12 @@ const POSITIONS = {
   TOP_LEFT: 'top-left',
   BOTTOM_RIGHT: 'bottom-right',
   BOTTOM: 'bottom',
-  BOTTOM_LEFT: 'bottom-left'
+  BOTTOM_LEFT: 'bottom-left',
+  CENTER: 'center',
 }
 export default Object.freeze(POSITIONS)
 
-export function definePosition(position, top, bottom) {
+export function definePosition(position, top, bottom, center) {
   let result = null
   switch (position) {
     case POSITIONS.TOP:
@@ -22,6 +23,9 @@ export function definePosition(position, top, bottom) {
     case POSITIONS.BOTTOM_LEFT:
       result = bottom
       break
+    case POSITIONS.CENTER:
+      result =  center
+      break
   }
   return result
 }

src/themes/default/animations.styl

@@ -32,6 +32,17 @@
 .vue-toaster-fade-in-up
   animation-name vue-toaster-fade-in-up
 
+@keyframes vue-toaster-fade-in-grow
+  from
+    opacity .5
+    transform scale(0)
+  to
+    opacity 1
+    transform scale(1)
+
+.vue-toaster-fade-in-up
+  animation-name vue-toaster-fade-in-grow
+
 // VUE
 
 .vue-toaster-fade-enter-active

src/themes/default/toast-container.styl

@@ -10,10 +10,12 @@
   z-index 9999
   pointer-events none
 
-  &--top
+  &--top, &--center
     flex-direction column
   &--bottom
     flex-direction column-reverse
+  &--center
+    justify-content center
 
   @media screen and (max-width 768px)
     padding 0

src/themes/default/toast-positions.styl

@@ -1,5 +1,5 @@
 .vue-toaster
-  &--top, &--bottom
+  &--top, &--bottom, &--center
     align-self center
 
   &--top-right, &--bottom-right