feat(alert): Hide dismiss button for auto-dismissing alerts (bootstrap-vue#791)

tmorehouse · web-flow · commit 080bb204318a · 2017-08-09T23:46:53.000-03:00
* feat(alert): Hide dismiss button for auto-dismissing

* [alert] Update README.md

* [alert] update example files
diff --git a/docs/components/alert/README.md b/docs/components/alert/README.md
@@ -17,7 +17,7 @@
         Dismissible Alert!
     </b-alert>
 
-    <b-alert :show="dismissCountDown" dismissible variant="warning" @dismiss-count-down="countDownChanged">
+    <b-alert :show="dismissCountDown" variant="warning" @dismiss-count-down="countDownChanged">
         This alert will dismiss after {{dismissCountDown}} seconds...
     </b-alert>
 
@@ -76,3 +76,5 @@ with the dismiss button.
 #### 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.
diff --git a/examples/alert/demo.html b/examples/alert/demo.html
@@ -22,7 +22,6 @@
     </b-alert>
 
     <b-alert :show="dismissCountDown"
-             dismissible
              variant="warning"
              @dismiss-count-down="countDownChanged"
     >
@@ -34,4 +33,4 @@
     <b-btn @click="showDismissibleAlert=true" variant="info" class="m-1" ref="dismissible_alert_btn">
         Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
     </b-btn>
-</div>
+</div>
diff --git a/lib/components/alert.vue b/lib/components/alert.vue
@@ -9,7 +9,7 @@
                 class="close"
                 data-dismiss="alert"
                 :aria-label="dismissLabel"
-                v-if="dismissible"
+                v-if="localDismissible"
                 @click.stop.prevent="dismiss"
         >
             <span aria-hidden="true">&times;</span>
@@ -25,7 +25,8 @@
         data() {
             return {
                 countDownTimerId: null,
-                dismissed: false
+                dismissed: false,
+                localDismissible: this.dismissible
             };
         },
         created() {
@@ -35,7 +36,7 @@
         },
         computed: {
             classObject() {
-                return ['alert', this.alertVariant, this.dismissible ? 'alert-dismissible' : ''];
+                return ['alert', this.alertVariant, this.localDismissible ? 'alert-dismissible' : ''];
             },
             alertVariant() {
                 const variant = this.state || this.variant || 'info';
@@ -92,9 +93,13 @@
 
                 // 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;
+
                 let dismissCountDown = this.show;
                 this.$emit('dismiss-count-down', dismissCountDown);
 
