buefy 0.9.9 → 0.9.13

package/src/components/toast/Toast.vue

@@ -3,7 +3,7 @@
         :enter-active-class="transition.enter"
         :leave-active-class="transition.leave">
         <div
-            @mouseover="pause"
+            @mouseenter="pause"
             @mouseleave="removePause"
             v-show="isActive"
             class="toast"

package/src/index.js

@@ -17,6 +17,8 @@ const Buefy = {
         }
         // Config component
         registerComponentProgrammatic(Vue, 'config', ConfigComponent)
+
+        Vue.prototype.$buefy.globalNoticeInterval = null
     }
 }
 

package/src/scss/buefy.scss

@@ -17,6 +17,7 @@
 @import "components/_modal";
 @import "components/_navbar";
 @import "components/_notices";
+@import "components/_notification";
 @import "components/_numberinput";
 @import "components/_pagination";
 @import "components/_progress";

package/src/scss/components/_loading.scss

@@ -9,12 +9,13 @@ $loading-full-page-icon-size: 5em !default;
     display: none;
     justify-content: center;
     overflow: hidden;
-    z-index: 999;
+    z-index: 29;
     &.is-active {
         display: flex
     }
     &.is-full-page {
         position: fixed;
+        z-index: 999;
         .loading-icon {
             &:after {
                 top: calc(50% - #{$loading-full-page-icon-size * 0.5});

package/src/scss/components/_message.scss

@@ -4,4 +4,7 @@
         padding-top: 0;
         border: 0;
     }
+    progress {
+    	height: 5px;
+    }
 }

package/src/scss/components/_notification.scss

@@ -0,0 +1,8 @@
+.notification {
+	.progress-wrapper {
+    	position: absolute;
+    	bottom: 0;
+    	left: 0;
+    	width: 100%;
+	}
+}

package/src/scss/components/_progress.scss

@@ -63,6 +63,10 @@
                 }
             }
         }
+
+        &.is-squared {
+            border-radius: 0;
+        }
     }
 
     &.is-not-native {
@@ -94,4 +98,8 @@
             }
         }
     }
+    
+    &.is-squared {
+        border-radius: 0;
+    }
 }

package/src/utils/MessageMixin.js

@@ -33,11 +33,16 @@ export default {
         duration: {
             type: Number,
             default: 2000
+        },
+        progressBar: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
         return {
-            isActive: this.active
+            isActive: this.active,
+            remainingTime: this.duration / 1000 // in seconds
         }
     },
     watch: {
@@ -47,6 +52,7 @@ export default {
         isActive(value) {
             if (value) {
                 this.setAutoClose()
+                this.setDurationProgress()
             } else {
                 if (this.timer) {
                     clearTimeout(this.timer)
@@ -82,6 +88,7 @@ export default {
          */
         close() {
             this.isActive = false
+            this.resetDurationProgress()
             this.$emit('close')
             this.$emit('update:active', false)
         },
@@ -99,6 +106,30 @@ export default {
                     }
                 }, this.duration)
             }
+        },
+        setDurationProgress() {
+            if (this.progressBar) {
+                /**
+                 * Runs every one second to set the duration passed before
+                 * the alert will auto close to show it in the progress bar (Remaining Time)
+                 */
+                this.$buefy.globalNoticeInterval = setInterval(() => {
+                    if (this.remainingTime !== 0) {
+                        this.remainingTime -= 1
+                    } else {
+                        this.resetDurationProgress()
+                    }
+                }, 1000)
+            }
+        },
+        resetDurationProgress() {
+            /**
+             * Wait until the component get closed and then reset
+             **/
+            setTimeout(() => {
+                this.remainingTime = this.duration / 1000
+                clearInterval(this.$buefy.globalNoticeInterval)
+            }, 100)
         }
     },
     mounted() {

package/src/utils/NoticeMixin.js

@@ -83,6 +83,7 @@ export default {
         pause() {
             if (this.pauseOnHover && !this.indefinite) {
                 this.isPaused = true
+                clearInterval(this.$buefy.globalNoticeInterval)
             }
         },
         removePause() {