From 107a4e814cb7877d15dd6e23eb5e6e4b73eb08ca Mon Sep 17 00:00:00 2001 From: richardev <17192512+richardevcom@users.noreply.github.com> Date: Wed, 11 Oct 2023 01:22:01 +0300 Subject: [PATCH 1/7] =?UTF-8?q?=E2=9C=A8=20New=20feature=20-=20Added=20`po?= =?UTF-8?q?sition:=20center`=20option.=20@richardevcom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/defaults/positions.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/defaults/positions.js b/src/defaults/positions.js index a898bef..8f3382a 100644 --- a/src/defaults/positions.js +++ b/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 } From ba395149079472025b10aa1e4b8a60fb8d4e46b9 Mon Sep 17 00:00:00 2001 From: richardev <17192512+richardevcom@users.noreply.github.com> Date: Wed, 11 Oct 2023 01:23:21 +0300 Subject: [PATCH 2/7] =?UTF-8?q?=E2=9C=A8=20New=20feature=20-=20Added=20`po?= =?UTF-8?q?sition:=20center`=20option.=20@richardevcom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/themes/default/animations.styl | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/themes/default/animations.styl b/src/themes/default/animations.styl index 421bbca..a67e35e 100644 --- a/src/themes/default/animations.styl +++ b/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 From 18baf09aa90a8652fc7e2b2d4f90b5500c5a2f7f Mon Sep 17 00:00:00 2001 From: richardev <17192512+richardevcom@users.noreply.github.com> Date: Wed, 11 Oct 2023 01:24:17 +0300 Subject: [PATCH 3/7] =?UTF-8?q?=E2=9C=A8=20New=20feature=20-=20Added=20`po?= =?UTF-8?q?sition:=20center`=20option.=20@richardevcom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/themes/default/toast-container.styl | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/themes/default/toast-container.styl b/src/themes/default/toast-container.styl index 2ab3c4a..22f6146 100644 --- a/src/themes/default/toast-container.styl +++ b/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 From 4f74aa66598ae57355f48882225341021408c81b Mon Sep 17 00:00:00 2001 From: richardev <17192512+richardevcom@users.noreply.github.com> Date: Wed, 11 Oct 2023 01:24:47 +0300 Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=A8=20New=20feature=20-=20Added=20`po?= =?UTF-8?q?sition:=20center`=20option.=20@richardevcom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/themes/default/toast-positions.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/default/toast-positions.styl b/src/themes/default/toast-positions.styl index 5970678..5026dc6 100644 --- a/src/themes/default/toast-positions.styl +++ b/src/themes/default/toast-positions.styl @@ -1,5 +1,5 @@ .vue-toaster - &--top, &--bottom + &--top, &--bottom, &--center align-self center &--top-right, &--bottom-right From cac1e9b7a9fa79a71fc59b53148dca6e4bb19eac Mon Sep 17 00:00:00 2001 From: richardev <17192512+richardevcom@users.noreply.github.com> Date: Wed, 11 Oct 2023 01:30:09 +0300 Subject: [PATCH 5/7] =?UTF-8?q?=E2=9C=A8=20New=20feature=20-=20Added=20`po?= =?UTF-8?q?sition:=20center`=20option.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Toaster.vue | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/Toaster.vue b/src/Toaster.vue index 94ddce3..b0e986b 100644 --- a/src/Toaster.vue +++ b/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,24 @@ 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 +136,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 +185,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 +197,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' } ) } From 5d319a829961602ce306df59ac48fc88e8552b41 Mon Sep 17 00:00:00 2001 From: richardev <17192512+richardevcom@users.noreply.github.com> Date: Wed, 11 Oct 2023 01:32:04 +0300 Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=93=9D=20New=20option=20documented=20?= =?UTF-8?q?-=20`position:=20center`.=20@richardevcom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 3e538fb..3cf805b 100644 --- a/README.md +++ b/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 From ec667b3001079a040b466cd83da8c7eaabbc3c9a Mon Sep 17 00:00:00 2001 From: richardev <17192512+richardevcom@users.noreply.github.com> Date: Wed, 11 Oct 2023 01:40:19 +0300 Subject: [PATCH 7/7] =?UTF-8?q?=E2=9C=A8=20New=20feature=20-=20Added=20`po?= =?UTF-8?q?sition:=20center`=20option.=20@richardevcom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Toaster.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Toaster.vue b/src/Toaster.vue index b0e986b..1ccaadd 100644 --- a/src/Toaster.vue +++ b/src/Toaster.vue @@ -112,8 +112,7 @@ export default { if (!this.parentCenter) { this.parentCenter = document.createElement('div') - this.parentCenter.className = - 'vue-toaster-container vue-toaster-container--center' + this.parentCenter.className = 'vue-toaster-container vue-toaster-container--center' } }, setDefaultCss() {