<template>
<transition name="messagebox-wrapper-fade">
<div class="xigua-modal-dialog message-box-wrapper"
:class="{'xigua-modal-hidden': !showModal}"
v-show="visible"
@click.stop="handleWrapperClick">
<!-- start slot name=message-box -->
<slot name="message-box">
<div class="message-box" :class="[customDefaultClass, messageBoxCustom]" @click.stop="">
<!-- start slot name=header-wrapper -->
<slot name="header-wrapper">
<div class="xigua-modal-header" v-if="title !== undefined || true">
<slot name="title">
<button type="button" class="close" @click.stop="handleAction('cancel')">×</button>
<h3 class="xigua-modal-title">{{ title }}</h3>
</slot>
</div>
</slot>
<!-- end slot name=header-wrapper -->
<!-- start slot name=content-wrapper -->
<slot name="content-wrapper">
<div class="message-box-content">
<!-- start slot name=content -->
<slot name="content">
<div class="message-box-content-alert-text" v-if="type == 'alert' || type == 'msgbox'">{{ message }}</div>
<div class="message-box-content-confirm-text" v-if="type == 'confirm'">{{ message }}</div>
<!-- start slot name=prompt -->
<slot name="prompt">
<div class="message-box-content-prompt" v-if="type == 'prompt'">
<div class="message-box-content-prompt-title">{{message}}</div>
<!-- start slot name=prompt-content -->
<slot name="prompt-content">
<div class="message-box-content-prompt-content" >
<input class="message-box-content-prompt-content-input" autofocus="autofocus" v-model="inputValue" @keyup.enter="handleAction('confirm')" :placeholder="inputPlaceholder"></input>
<div class="message-box-content-prompt-content-errMessage" :class="errorMessageClass">{{inputErrorMessage}}</div>
</div>
</slot>
<!-- end slot name=prompt-content -->
</div>
</slot>
<!-- end slot name=prompt -->
<slot name="self"></slot>
</slot>
<!-- end slot name=content -->
</div>
</slot>
<!-- end slot name=content-wrapper -->
<!-- start slot name=btns-wrapper -->
<slot name="btns-wapper">
<div class="dialog-footer message-box-btns">
<slot name="btns">
<button
class="message-box-confirm"
:class="[ confirmButtonClass, buttonDisabledClass ]"
v-if="showConfirmButton"
:disabled="confirmBtnDisabled" @click.stop="handleAction('confirm')">{{ confirmButtonText }}</button>
<button :class="[ cancelButtonClass ]" v-if="showCancelButton" @click.stop="handleAction('cancel')">{{ cancelButtonText }}</button>
</slot>
</div>
</slot>
<!-- end slot name=btns-wrapper -->
</div>
</slot>
<!-- end slot name=message-box -->
</div>
</transition>
</template>
<script>
import {
addClass,
removeClass
} from 'wind-dom/src/class';
let typeMap = {
success: 'circle-check',
info: 'information',
warning: 'warning',
error: 'circle-cross'
};
export default {
data() {
return {
title: undefined,
message: '',
type: '',
closeOnClickModal: true,
closeOnPressEscape: true,
customDefaultClass: 'message-box-default',
customAnimaiClass: 'message-box-enter',
inputValue: '',
inputPlaceholder: '',
inputPattern: null,
inputErrorMessage: 'input error',
errorMessageClass: 'hidden',
showConfirmButton: true,
showCancelButton: true,
showModal: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
confirmButtonClass: 'btn btn-primary',
cancelButtonClass: 'btn btn-default',
visible: false,
lockScroll: true,
resolve: null,
reject: null
};
},
props: {
componentTitle: {
}
},
mounted () {
let that = this;
if (that.lockScroll) {
document.body.style.overflow = 'hidden';
}
},
computed: {
messageBoxCustom () {
let that = this;
return that.visible ? that.customAnimaiClass : '';
},
buttonDisabledClass () {
let that = this;
return that.confirmBtnDisabled ? 'btn-disabled' : '';
},
inputWrong () {
let that = this;
if (!that.inputPattern) {
return false;
}
return !that.inputPattern.test(that.inputValue);
},
confirmBtnDisabled () {
let that = this;
if (that.type === 'prompt' && that.inputPattern && that.inputWrong) {
return true;
} else {
return false;
}
}
},
methods: {
modalClose () {
let that = this;
if (!closeOnClickModal) {
return;
}
that.close ();
},
close () {
this.closed = true;
this.visible = false;
this.$el.addEventListener('transitionend', this.destroyElement);
},
destroyElement() {
if (this.lockScroll) {
document.body.style.overflow = '';
}
this.$el.removeEventListener('transitionend', this.destroyElement);
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
},
doClose() {
this.visible = false;
this._closing = true;
this.onClose && this.onClose();
if (this.lockScroll) {
setTimeout(() => {
if (this.modal && this.bodyOverflow !== 'hidden') {
document.body.style.overflow = this.bodyOverflow;
document.body.style.paddingRight = this.bodyPaddingRight;
}
this.bodyOverflow = null;
this.bodyPaddingRight = null;
}, 200);
}
this.opened = false;
if (!this.transition) {
this.doAfterClose();
}
},
handleWrapperClick() {
if (this.closeOnClickModal) {
this.handleAction('cancel');
}
},
handleAction(action) {
if (action === 'confirm' && this.confirmBtnDisabled) {
return;
}
this.setPromise(action);
this.close();
},
setPromise (action) {
let that = this;
if (!that.reject && !that.resolve) {
if (that.callback) {
callback();
} else {
return;
}
}
let type = that.type;
let message = {
type: action
};
if (type === 'alert' || action === 'confirm'){
if (type === 'prompt') {
message.value = that.inputValue;
} else {
message.value = true;
}
that.resolve(message);
} else if (action === 'cancel') {
message.value = false;
that.reject(message);
}
}
},
watch: {
inputWrong (val) {
let that = this;
that.errorMessageClass = !val ? 'hidden' : 'show';
},
visible (val) {
if (this.type === 'alert' || this.type === 'confirm') {
this.$nextTick(() => {
this.$el.querySelector('button.message-box-confirm').focus();
});
}
if (this.type !== 'prompt') return;
if (val) {
setTimeout(() => {
this.$el.querySelector('input').focus();
}, 500);
} else {
this.editorErrorMessage = '';
removeClass(this.$el.querySelector('input'), 'invalid');
}
}
},
};
</script>
export default (Vue) => {
let MessageBoxConstructor = Vue.extend(require('./message.box.vue'));
let instance;
let defaultCallback = (action) => {
instance.resolve({
value: instance.vm.inputValue,
action: action
});
};
let MessageBox = function (options) {
options = options || {};
if (typeof options === 'string') {
options = {
message: options
};
}
let userOnClose = options.onClose;
options.onClose = function () {
MessageBox.close(id, userOnClose);
};
instance = new MessageBoxConstructor({
data: options
});
instance.vm = instance.$mount();
document.body.appendChild(instance.vm.$el);
instance.vm.visible = true;
instance.dom = instance.vm.$el;
return instance.vm;
};
['alert', 'confirm', 'prompt', 'msgbox'].forEach(type => {
let proxy = '$' + type;
MessageBox[proxy] = (options) => {
options.type = type;
let promise = new Promise(function (resolve, reject) {
options.resolve = resolve;
options.reject = reject;
});
MessageBox(options);
return promise;
};
Vue.prototype[proxy] = MessageBox[proxy];
});
return MessageBoxConstructor;
};