Fix default css import #8, #12

MeForma · Feb 6, 2021 · 712c74d · 712c74d
1 parent 438b931
commit 712c74d
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 17 deletions.
diff --git a/example/src/components/HelloWorld.vue b/example/src/components/HelloWorld.vue
@@ -144,7 +144,7 @@
 
                   <span
                     class="c-code--object-line"
-                    v-if="options.maxToasts !== false"
+                    v-if="options.maxToasts || options.maxToasts === 0"
                   >
                     <code>max:</code>
                     <code class="c-code--number">{{ options.maxToasts }}</code>
@@ -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
@@ -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 {
   }
 }
 </script>
+<style lang="stylus">
+@import './themes/default/index.styl'
+.v--default-css
+  @import './colors'
+  @import './toast'
+</style>
diff --git 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
@@ -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
@@ -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