UNPKG

buefy

Version:

Lightweight UI components for Vue.js based on Bulma

139 lines (124 loc) 3.71 kB
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 };