Skip to content

Commit c55d4ca

Browse files
alexsashareganalexsasharegan
authored
fix(b-alert): add dismissible check for dismiss btn (bootstrap-vue#1008)
Fixes bootstrap-vue#1007
1 parent 738c0be commit c55d4ca

File tree

1 file changed

+87
-88
lines changed

1 file changed

+87
-88
lines changed

‎lib/components/alert.vue

Lines changed: 87 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -3,113 +3,112 @@
33
:class="classObject"
44
role="alert"
55
aria-live="polite"
6-
aria-atomic="true"
7-
>
8-
<button type="button"
6+
aria-atomic="true">
7+
<button v-if="dismissible"
8+
type="button"
99
class="close"
1010
data-dismiss="alert"
1111
:aria-label="dismissLabel"
12-
@click.stop.prevent="dismiss"
13-
>
12+
@click.stop.prevent="dismiss">
1413
<span aria-hidden="true">&times;</span>
1514
</button>
1615
<slot></slot>
1716
</div>
1817
</template>
1918

2019
<script>
21-
import {warn} from '../utils';
20+
import { warn } from '../utils';
2221
23-
export default {
24-
data() {
25-
return {
26-
countDownTimerId: null,
27-
dismissed: false
28-
};
22+
export default {
23+
data() {
24+
return {
25+
countDownTimerId: null,
26+
dismissed: false
27+
};
28+
},
29+
created() {
30+
if (this.state) {
31+
warn('<b-alert> "state" property is deprecated, please use "variant" property instead.');
32+
}
33+
},
34+
computed: {
35+
classObject() {
36+
return ['alert', this.alertVariant, this.dismissible ? 'alert-dismissible' : ''];
2937
},
30-
created() {
31-
if (this.state) {
32-
warn('<b-alert> "state" property is deprecated, please use "variant" property instead.');
33-
}
38+
alertVariant() {
39+
const variant = this.state || this.variant || 'info';
40+
return `alert-${variant}`;
3441
},
35-
computed: {
36-
classObject() {
37-
return ['alert', this.alertVariant, this.dismissible ? 'alert-dismissible' : ''];
38-
},
39-
alertVariant() {
40-
const variant = this.state || this.variant || 'info';
41-
return `alert-${variant}`;
42-
},
43-
localShow() {
44-
return !this.dismissed && (this.countDownTimerId || this.show);
45-
}
42+
localShow() {
43+
return !this.dismissed && (this.countDownTimerId || this.show);
44+
}
45+
},
46+
props: {
47+
variant: {
48+
type: String,
49+
default: 'info'
4650
},
47-
props: {
48-
variant: {
49-
type: String,
50-
default: 'info'
51-
},
52-
state: {
53-
type: String,
54-
default: null
55-
},
56-
dismissible: {
57-
type: Boolean,
58-
default: false
59-
},
60-
dismissLabel: {
61-
type: String,
62-
default: 'Close'
63-
},
64-
show: {
65-
type: [Boolean, Number],
66-
default: false
67-
}
51+
state: {
52+
type: String,
53+
default: null
6854
},
69-
watch: {
70-
show() {
71-
this.showChanged();
72-
}
55+
dismissible: {
56+
type: Boolean,
57+
default: false
58+
},
59+
dismissLabel: {
60+
type: String,
61+
default: 'Close'
7362
},
74-
mounted() {
63+
show: {
64+
type: [Boolean, Number],
65+
default: false
66+
}
67+
},
68+
watch: {
69+
show() {
7570
this.showChanged();
71+
}
72+
},
73+
mounted() {
74+
this.showChanged();
75+
},
76+
methods: {
77+
dismiss() {
78+
this.clearCounter();
79+
this.dismissed = true;
80+
if (typeof this.show === 'number') {
81+
this.$emit('dismiss-count-down', 0);
82+
}
83+
this.$emit('dismissed');
7684
},
77-
methods: {
78-
dismiss() {
79-
this.clearCounter();
80-
this.dismissed = true;
81-
if (typeof this.show === 'number') {
82-
this.$emit('dismiss-count-down', 0);
83-
}
84-
this.$emit('dismissed');
85-
},
86-
clearCounter() {
87-
if (this.countDownTimerId) {
88-
clearInterval(this.countDownTimerId);
89-
this.countDownTimerId = null;
90-
}
91-
},
92-
showChanged() {
93-
// Reset dismiss status
94-
this.dismissed = false;
95-
96-
// No timer for boolean values
97-
if (this.show === true || this.show === false || this.show === null || this.show === 0) {
98-
return;
99-
}
85+
clearCounter() {
86+
if (this.countDownTimerId) {
87+
clearInterval(this.countDownTimerId);
88+
this.countDownTimerId = null;
89+
}
90+
},
91+
showChanged() {
92+
// Reset dismiss status
93+
this.dismissed = false;
10094
101-
let dismissCountDown = this.show;
102-
103-
// Start counter
104-
this.clearCounter();
105-
this.countDownTimerId = setInterval(() => {
106-
if (dismissCountDown < 2) {
107-
return this.dismiss();
108-
}
109-
dismissCountDown--;
110-
this.$emit('dismiss-count-down', dismissCountDown);
111-
}, 1000);
95+
// No timer for boolean values
96+
if (this.show === true || this.show === false || this.show === null || this.show === 0) {
97+
return;
11298
}
99+
100+
let dismissCountDown = this.show;
101+
102+
// Start counter
103+
this.clearCounter();
104+
this.countDownTimerId = setInterval(() => {
105+
if (dismissCountDown < 2) {
106+
return this.dismiss();
107+
}
108+
dismissCountDown--;
109+
this.$emit('dismiss-count-down', dismissCountDown);
110+
}, 1000);
113111
}
114-
};
112+
}
113+
};
115114
</script>

0 commit comments

Comments
 (0)