Skip to content

Commit b347731

Browse files
committed
refactor: CAlert: simplify component
- limit dismissible prop functionality to two states (boolean), - delete iconHtml property, - simplify watchers
1 parent e90a43a commit b347731

File tree

1 file changed

+9
-23
lines changed

1 file changed

+9
-23
lines changed

src/components/Alert/CAlert.vue

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,16 @@
88
aria-atomic="true"
99
>
1010
<CButtonClose
11-
v-if="dismissible && dismissible !== 'customButton' "
11+
v-if="dismissible"
1212
@click="dismiss()"
13-
:iconHtml="iconHtml"
14-
:disabled="this.dismissible === 'disabled'"
1513
/>
16-
<slot :dismiss="dismiss">
17-
18-
</slot>
14+
<slot :dismiss="dismiss"></slot>
1915
</div>
2016
</transition>
2117
</template>
2218

2319
<script>
2420
import CButtonClose from '../Button/CButtonClose'
25-
2621
export default {
2722
name: 'CAlert',
2823
components: { CButtonClose },
@@ -31,16 +26,12 @@ export default {
3126
type: String,
3227
default: 'info'
3328
},
34-
dismissible: {
35-
type: [Boolean, String],
36-
validator: val => [false, true, 'disabled', 'customButton'].includes(val)
37-
},
29+
dismissible: Boolean,
3830
show: {
3931
type: [Boolean, Number],
4032
default: true
4133
},
4234
fade: Boolean,
43-
iconHtml: String
4435
},
4536
data () {
4637
return {
@@ -60,24 +51,19 @@ export default {
6051
}
6152
},
6253
watch: {
63-
show (val, oldVal) {
64-
if(val == oldVal) return
65-
this.clearCounter()
54+
show (val) {
6655
this.state = val
6756
},
6857
state: {
6958
immediate: true,
7059
handler (val, oldVal) {
71-
if (val == oldVal) return
72-
60+
this.clearCounter()
7361
if (!val && oldVal) {
74-
this.clearCounter()
7562
this.$emit('dismissed')
7663
} else if (typeof val === 'number' && val) {
7764
this.countdownTimeout = setTimeout(() => {
78-
this.$listeners['update:show'] ?
79-
this.$emit('update:show', this.state - 1) :
80-
this.state--
65+
const isWatched = this.$listeners['update:show']
66+
isWatched ? this.$emit('update:show', this.state - 1) : this.state--
8167
}, 1000)
8268
}
8369
}
@@ -88,7 +74,7 @@ export default {
8874
},
8975
methods: {
9076
dismiss () {
91-
this.$emit('update:show', false)
77+
this.$emit('update:show', 0)
9278
this.state = false
9379
},
9480
clearCounter () {
@@ -100,8 +86,8 @@ export default {
10086
}
10187
}
10288
</script>
103-
<style>
10489

90+
<style>
10591
.fade-enter-active, .fade-leave-active {
10692
transition: opacity .3s;
10793
}

0 commit comments

Comments
 (0)