fix(alert): Fix auto-dimissing alert "bug"

docs/components/alert/README.md

@@ -17,7 +17,9 @@
     </b-alert>
 
     <b-alert :show="dismissCountDown"
+             dismissible
              variant="warning"
+             @dismissed="dismissCountdown=0"
              @dismiss-count-down="countDownChanged">
       <p>This alert will dismiss after {{dismissCountDown}} seconds...</p>
       <b-progress variant="warning"
@@ -57,33 +59,32 @@ export default {
 <!-- alert.vue -->
 ```
 
-### Alert contextual variants
+## Alert contextual variants
 For proper styling of `<b-alert>`, use one of the four required contextual variants by setting the
 `variant` prop to one of the following: `info`, `success`, `warning` or `danger`.
 The default is `info`.
 
-#### Conveying meaning to assistive technologies:
+### Conveying meaning to assistive technologies:
 Using color variants to add meaning only provides a visual indication, which will not
 be conveyed to users of assistive technologies – such as screen readers. Ensure that
 information denoted by the color is either obvious from the content itself (e.g. the
 visible text), or is included through alternative means, such as additional text hidden
 with the .sr-only class.
 
-### Additional content inside alerts
+## Additional content inside alerts
 `<b-alerts>` can also contain additional HTML elements like headings and paragraphs,
 which will be styled with the appropriate color matching the variant.
 
-#### Color of links within alerts:
+### Color of links within alerts:
 Use the `.alert-link` utility CSS class to quickly provide matching colored links
 within any alert.
 
-### Dismissing
+## Dismissing
 Using the `dismissible` prop it’s possible to dismiss any `<b-alert>` inline. This will add 
 a close `X` button.  use the `dismiss-label` to change the hidden label text associated
 with the dismiss button.
 
-#### Auto dismissing alerts:
+### Auto dismissing alerts:
 To create a `<b-alert>` that dismisses automatically after a period of time, set 
 the `show` prop to the number of seconds you would like the `<b-alert>` to remain visible for.
 
-Note that the dismiss button will not be shown for auto-dismissing alerts.

docs/components/alert/meta.json

@@ -16,5 +16,11 @@
           }
       ]
     }
+  ],
+  "slots": [
+    {
+      "name": "dismiss",
+      "description": "Content for the dismiss button."
+    }
   ]
 }

lib/components/alert.vue

@@ -9,10 +9,9 @@
                 class="close"
                 data-dismiss="alert"
                 :aria-label="dismissLabel"
-                v-if="localDismissible"
                 @click.stop.prevent="dismiss"
         >
-            <span aria-hidden="true">&times;</span>
+            <span class="d-inline-block" aria-hidden="true"><slot name="dismiss">&times;</slot></span>
         </button>
         <slot></slot>
     </div>
@@ -22,24 +21,22 @@
     import {warn} from '../utils';
 
     export default {
+        model: {
+            prop: 'show',
+            event: 'input'
+        },
         data() {
             return {
                 countDownTimerId: null,
-                dismissed: false,
-                localDismissible: this.dismissible
+                dismissed: false
             };
         },
-        created() {
-            if (this.state) {
-                warn('<b-alert> "state" property is deprecated, please use "variant" property instead.');
-            }
-        },
         computed: {
             classObject() {
-                return ['alert', this.alertVariant, this.localDismissible ? 'alert-dismissible' : ''];
+                return ['alert', this.alertVariant, this.dismissible ? 'alert-dismissible' : ''];
             },
             alertVariant() {
-                const variant = this.state || this.variant || 'info';
+                const variant = this.variant;
                 return `alert-${variant}`;
             },
             localShow() {
@@ -51,10 +48,6 @@
                 type: String,
                 default: 'info'
             },
-            state: {
-                type: String,
-                default: null
-            },
             dismissible: {
                 type: Boolean,
                 default: false
@@ -81,9 +74,17 @@
         },
         methods: {
             dismiss() {
+                this.clearCounter();
                 this.dismissed = true;
                 this.$emit('dismissed');
-                this.clearCounter();
+                this.$emit('input', false);
+                if (typeof this.show === 'number') {
+                    this.$emit('dismiss-count-down', 0);
+                    this.$emit('input', 0);
+                } else {
+                    this.$emit('input', false);
+                }
+
             },
             clearCounter() {
                 if (this.countDownTimerId) {
@@ -92,30 +93,28 @@
                 }
             },
             showChanged() {
+                // Reset counter status
+                this.clearCounter();
                 // Reset dismiss status
                 this.dismissed = false;
 
                 // No timer for boolean values
                 if (this.show === true || this.show === false || this.show === null || this.show === 0) {
-                    this.localDismissible = this.dismissible;
                     return;
                 }
 
-                // Hide dismiss button for auto-dismissing
-                this.localDismissible = false;
-
                 // Start counter
-                this.clearCounter();
                 let dismissCountDown = this.show;
                 this.$emit('dismiss-count-down', dismissCountDown);
                 this.countDownTimerId = setInterval(() => {
-                    dismissCountDown--;
-                    this.$emit('dismiss-count-down', dismissCountDown);
                     if (dismissCountDown < 1) {
-                        this.dismiss();
-                        this.clearCounter();
+                        this.dismiss;
+                        return;
                     }
-                }, 1000);
+                    dismissCountDown--;
+                    this.$emit('dismiss-count-down', dismissCountDown);
+                    this.$emit('input', dismissCountDown);
+                 }, 1000);
             }
         }
     };