buefy
Version:
Lightweight UI components for Vue.js based on Bulma
139 lines (124 loc) • 3.71 kB
JavaScript
import { r as removeElement } from './chunk-e5fce48f.js';
import { c as config } from './chunk-9e3207cc.js';
var NoticeMixin = {
props: {
type: {
type: String,
default: 'is-dark'
},
message: String,
duration: Number,
queue: {
type: Boolean,
default: undefined
},
position: {
type: String,
default: 'is-top',
validator: function validator(value) {
return ['is-top-right', 'is-top', 'is-top-left', 'is-bottom-right', 'is-bottom', 'is-bottom-left'].indexOf(value) > -1;
}
},
container: String
},
data: function data() {
return {
isActive: false,
parentTop: null,
parentBottom: null,
newContainer: this.container || config.defaultContainerElement
};
},
computed: {
correctParent: function correctParent() {
switch (this.position) {
case 'is-top-right':
case 'is-top':
case 'is-top-left':
return this.parentTop;
case 'is-bottom-right':
case 'is-bottom':
case 'is-bottom-left':
return this.parentBottom;
}
},
transition: function transition() {
switch (this.position) {
case 'is-top-right':
case 'is-top':
case 'is-top-left':
return {
enter: 'fadeInDown',
leave: 'fadeOut'
};
case 'is-bottom-right':
case 'is-bottom':
case 'is-bottom-left':
return {
enter: 'fadeInUp',
leave: 'fadeOut'
};
}
}
},
methods: {
shouldQueue: function shouldQueue() {
var queue = this.queue !== undefined ? this.queue : config.defaultNoticeQueue;
if (!queue) return false;
return this.parentTop.childElementCount > 0 || this.parentBottom.childElementCount > 0;
},
close: function close() {
var _this = this;
clearTimeout(this.timer);
this.isActive = false; // Timeout for the animation complete before destroying
setTimeout(function () {
_this.$destroy();
removeElement(_this.$el);
}, 150);
},
showNotice: function showNotice() {
var _this2 = this;
if (this.shouldQueue()) {
// Call recursively if should queue
setTimeout(function () {
return _this2.showNotice();
}, 250);
return;
}
this.correctParent.insertAdjacentElement('afterbegin', this.$el);
this.isActive = true;
if (!this.indefinite) {
this.timer = setTimeout(function () {
return _this2.close();
}, this.newDuration);
}
},
setupContainer: function setupContainer() {
this.parentTop = document.querySelector('.notices.is-top');
this.parentBottom = document.querySelector('.notices.is-bottom');
if (this.parentTop && this.parentBottom) return;
if (!this.parentTop) {
this.parentTop = document.createElement('div');
this.parentTop.className = 'notices is-top';
}
if (!this.parentBottom) {
this.parentBottom = document.createElement('div');
this.parentBottom.className = 'notices is-bottom';
}
var container = document.querySelector(this.newContainer) || document.body;
container.appendChild(this.parentTop);
container.appendChild(this.parentBottom);
if (this.newContainer) {
this.parentTop.classList.add('has-custom-container');
this.parentBottom.classList.add('has-custom-container');
}
}
},
beforeMount: function beforeMount() {
this.setupContainer();
},
mounted: function mounted() {
this.showNotice();
}
};
export { NoticeMixin as N };