[Feature Request]: Support Remaining time progress in Notification (p…

…rogrammatically) (buefy#3536)

* Initial code

* Finishing

* Finished

* Snapshot written

* Make progress not rounded

* added remaining time progressbar in Notification

* added remaining time progressbar in Notification

* Ran tests

* used rounded property in progress component

* support remaining time progress in notification that opens programmatically

* support remaining time progress in notification that opens programmatically

* added example

* added example and used v-show in Message.vue

docs/pages/components/notification/examples/ExAutoClose.vue

@@ -5,7 +5,8 @@
             :disabled="isActive"
             @click="isActive = true" />
         <b-notification
-            auto-close type="is-danger"
+            auto-close 
+            type="is-danger"
             v-model="isActive"
             aria-close-label="Close notification">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

docs/pages/components/notification/examples/ExProgrammatically.vue

@@ -20,6 +20,11 @@
                 type="is-link"
                 size="is-medium"
                 @click="pause" />
+            <b-button
+                label="Launch notification (shows remaining time in progress)"
+                type="is-primary"
+                size="is-medium"
+                @click="progress" />
         </div>
     </section>
 </template>
@@ -55,6 +60,14 @@
                     pauseOnHover: true,
                 })
             },
+            progress() {
+                this.$buefy.notification.open({
+                    message: `I can show you a little progress bar displaying the remaining time!`,
+                    duration: 5000,
+                    progressBar: true,
+                    type: 'is-primary',
+                })
+            },
         }
     }
 </script>

src/components/message/Message.vue

@@ -1,7 +1,7 @@
 <template>
     <transition name="fade">
         <article
-            v-if="isActive"
+            v-show="isActive"
             class="message"
             :class="[type, size]">
             <header v-if="$slots.header || title" class="message-header">

src/components/notification/Notification.vue

@@ -32,7 +32,7 @@
                 </div>
             </div>
             <b-progress
-                v-if="autoClose && progressBar"
+                v-if="progressBar"
                 :value="remainingTime - 1"
                 :max="duration / 1000 - 1"
                 :type="type"

src/scss/components/_message.scss

@@ -5,6 +5,6 @@
         border: 0;
     }
     progress {
-    	height: 10px;
+    	height: 5px;
     }
 }

src/utils/MessageMixin.js

@@ -88,6 +88,7 @@ export default {
          */
         close() {
             this.isActive = false
+            this.resetDurationProgress()
             this.$emit('close')
             this.$emit('update:active', false)
         },
@@ -107,25 +108,28 @@ export default {
             }
         },
         setDurationProgress() {
-            if (this.autoClose && this.progressBar) {
+            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
+                 * the alert will auto close to show it in the progress bar (Remaining Time)
                  */
                 this.progress = setInterval(() => {
-                    if (this.remainingTime !== 0 && this.active) {
+                    if (this.remainingTime !== 0) {
                         this.remainingTime -= 1
                     } else {
-                        /**
-                        * Wait until the component get closed and then reset
-                        **/
-                        window.setTimeout(() => {
-                            this.remainingTime = this.duration / 1000
-                            clearInterval(this.progress)
-                        }, 100)
+                        this.resetDurationProgress()
                     }
                 }, 1000)
             }
+        },
+        resetDurationProgress() {
+            /**
+             * Wait until the component get closed and then reset
+             **/
+            window.setTimeout(() => {
+                this.remainingTime = this.duration / 1000
+                clearInterval(this.progress)
+            }, 100)
         }
     },
     mounted() {