buefy
Version:
Lightweight UI components for Vue.js based on Bulma
141 lines (125 loc) • 3.75 kB
JavaScript
'use strict';
var __chunk_2 = require('./chunk-59b91990.js');
var __chunk_3 = require('./chunk-e45e0329.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 || __chunk_3.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 : __chunk_3.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();
__chunk_2.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();
}
};
exports.NoticeMixin = NoticeMixin;