diff --git a/example/src/components/HelloWorld.vue b/example/src/components/HelloWorld.vue index 9025b60..bb13ad8 100644 --- a/example/src/components/HelloWorld.vue +++ b/example/src/components/HelloWorld.vue @@ -144,7 +144,7 @@ max: {{ options.maxToasts }} @@ -228,8 +228,10 @@ export default { onClick: this.onClick } typeof type === 'string' && (options.type = type) + typeof this.options.maxToasts === 'string' && (this.options.maxToasts = parseInt(this.options.maxToasts)) + this.$toast.show(this.message, { ...options, ...this.options diff --git a/src/Toaster.vue b/src/Toaster.vue index 71e8cde..93d8d4d 100644 --- a/src/Toaster.vue +++ b/src/Toaster.vue @@ -83,15 +83,11 @@ export default { }, beforeMount() { this.createParents() + this.setDefaultCss() this.setupContainer() }, mounted() { this.showNotice() - - if (this.useDefaultCss) { - require('./themes/default/index.styl') - } - eventBus.$on('toast-clear', this.close) }, methods: { @@ -112,6 +108,11 @@ export default { 'c-toast-container c-toast-container--bottom' } }, + setDefaultCss() { + const type = this.useDefaultCss ? 'add' : 'remove' + this.parentTop.classList[type]('v--default-css') + this.parentBottom.classList[type]('v--default-css') + }, setupContainer() { const container = document.body container.appendChild(this.parentTop) @@ -194,3 +195,9 @@ export default { } } + diff --git a/src/themes/default/index.styl b/src/themes/default/index.styl index 5a6515c..ad269ca 100644 --- a/src/themes/default/index.styl +++ b/src/themes/default/index.styl @@ -1,5 +1,4 @@ @import './variables'; -@import './colors'; @import './animations'; @import './toast-container'; -@import './toast'; +@import './toast-positions'; diff --git a/src/themes/default/toast-positions.styl b/src/themes/default/toast-positions.styl new file mode 100644 index 0000000..51ba8df --- /dev/null +++ b/src/themes/default/toast-positions.styl @@ -0,0 +1,9 @@ +.c-toast + &--top, &--bottom + align-self center + + &--top-right, &--bottom-right + align-self flex-end + + &--top-left, &--bottom-left + align-self flex-start diff --git a/src/themes/default/toast.styl b/src/themes/default/toast.styl index 846ce70..017363e 100644 --- a/src/themes/default/toast.styl +++ b/src/themes/default/toast.styl @@ -11,12 +11,3 @@ font-family: Avenir, Helvetica, Arial, sans-serif; padding 0.5em 2em word-break break-word - - &--top, &--bottom - align-self center - - &--top-right, &--bottom-right - align-self flex-end - - &--top-left, &--bottom-left - align-self flex-start