@ishitatsuyuki/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
111 lines (109 loc) • 2.96 kB
text/typescript
import Icon from '../components/icon/Icon.vue'
export default {
components: {
[Icon.name]: Icon
},
props: {
/** Whether modal is active or not, use the .sync modifier (Vue 2.x) or v-model:active (Vue 3.x) to make it two-way binding */
active: {
type: Boolean,
default: true
},
/** Adds an 'X' button that closes the notification. */
closable: {
type: Boolean,
default: false
},
/** Message text (can contain HTML). */
message: String,
/** Type (color) of the notification, optional. */
type: String,
/** Adds an icon on the left side depending on the type (or the icon prop if defined). */
hasIcon: Boolean,
/** Icon name to use with has-icon. */
icon: String,
/** Icon pack to use. */
iconPack: String,
/** Icon size */
iconSize: {
type: String,
default: 'large'
},
/** Hide notification after duration only not programmatic. */
autoClose: {
type: Boolean,
default: false
},
/** Visibility duration in miliseconds. */
duration: {
type: Number,
default: 2000
}
},
data() {
return {
isActive: this.active
}
},
watch: {
active(value) {
this.isActive = value
},
isActive(value) {
if (value) {
this.setAutoClose()
} else {
if (this.timer) {
clearTimeout(this.timer)
}
}
}
},
computed: {
/**
* Icon name (MDI) based on type.
*/
computedIcon() {
if (this.icon) {
return this.icon
}
switch (this.type) {
case 'info':
return 'information'
case 'success':
return 'check-circle'
case 'warning':
return 'alert'
case 'danger':
return 'alert-circle'
default:
return null
}
}
},
methods: {
/**
* Close the Message and emit events.
*/
close() {
this.isActive = false
this.$emit('close', ...arguments)
this.$emit('update:active', false)
},
/**
* Set timer to auto close message
*/
setAutoClose() {
if (this.autoClose) {
this.timer = setTimeout(() => {
if (this.isActive) {
this.close({action: 'close', method: 'timeout'})
}
}, this.duration)
}
}
},
mounted() {
this.setAutoClose()
}
}