ivue-material-plus
Version:
A high quality UI components Library with Vue.js
281 lines (276 loc) • 7.07 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index = require('./index2.js');
var helpers = require('../../utils/helpers.js');
var index$1 = require('../ivue-icon/index.js');
var index$2 = require('../ivue-button/index.js');
var index$3 = require('../ivue-spin/index.js');
const prefixCls = "ivue-modal-instance";
index["default"].newInstance = (properties) => {
if (!helpers.isClient) {
return;
}
const _props = properties || {};
const container = document.createElement("div");
document.body.appendChild(container);
let _instance = null;
const Instance = vue.createApp({
data() {
return Object.assign({}, _props, {
visible: false,
width: 416,
title: "",
content: "",
iconType: "",
iconName: "",
confirmText: "\u786E\u8BA4",
cancelText: "\u53D6\u6D88",
showCancel: false,
loading: false,
loadingType: "spin",
scrollable: false,
closable: false,
closing: false,
buttonLoading: false,
spinLoading: false
});
},
created() {
_instance = vue.getCurrentInstance();
},
methods: {
handleCancel() {
if (this.closing) {
return;
}
this.$refs.modal.data.visible = false;
this.setLoading(false);
this.onCancel();
this.remove();
},
handleConfirm() {
if (this.closing) {
return;
}
if (this.loading) {
this.setLoading(true);
} else {
this.$refs.modal.data.visible = false;
this.remove();
}
this.onConfirm();
},
setLoading(value) {
if (this.loadingType === "spin") {
this.spinLoading = value;
}
if (this.loadingType === "button") {
this.buttonLoading = value;
}
},
remove() {
this.closing = true;
setTimeout(() => {
this.closing = false;
this.destroy();
}, 300);
},
destroy() {
Instance.unmount();
container && document.body.removeChild(container);
this.onRemove();
},
onConfirm() {
},
onCancel() {
},
onRemove() {
}
},
render() {
let headRender;
if (this.title) {
headRender = vue.h(
"div",
{
class: `${prefixCls}--head`
},
[
vue.h(
index$1.IvueIcon,
{
class: [
`${prefixCls}--head__icon`,
`${prefixCls}--head__${this.iconType}`
]
},
{
default: () => this.iconName
}
),
vue.h("div", {
class: `${prefixCls}--head__title`,
innerHTML: this.title
})
]
);
}
let bodyRender;
if (this.render) {
bodyRender = vue.h(
"div",
{
class: `${prefixCls}--body ${prefixCls}--body__render`
},
[this.render(vue.h)]
);
} else {
bodyRender = vue.h(
"div",
{
class: `${prefixCls}--body`
},
[
vue.h("div", {
innerHTML: this.content
})
]
);
}
const footerRender = [];
if (this.showCancel) {
footerRender.push(
vue.h(
index$2.IvueButton,
{
class: "ivue-modal-footer--button",
outline: true,
color: "#dcdfe6",
onClick: this.handleCancel
},
() => this.cancelText
)
);
}
footerRender.push(
vue.h(
index$2.IvueButton,
{
class: "ivue-modal-footer--button",
status: "primary",
depressed: true,
loading: this.buttonLoading,
onClick: this.handleConfirm
},
() => this.confirmText
)
);
return vue.h(
index["default"],
{
..._props,
width: this.width,
scrollable: this.scrollable,
closable: this.closable,
modelValue: this.visible,
"onUpdate:modelValue": (status) => {
this.visible = status;
},
"onOn-cancel": this.handleCancel,
ref: "modal"
},
() => vue.h(
"div",
{
class: prefixCls
},
[
headRender,
bodyRender,
vue.h(
"div",
{
class: `${prefixCls}--footer`
},
footerRender
),
this.loadingType === "spin" && vue.h(index$3.IvueSpin, {
class: "ivue-modal-spin",
fix: true,
show: this.spinLoading
})
]
)
);
}
});
Instance.mount(container);
const modal = _instance.refs.modal;
return {
show(props) {
modal.$parent.showCancel = props.showCancel;
modal.$parent.iconType = props.icon;
switch (props.icon) {
case "info":
modal.$parent.iconName = "info";
break;
case "success":
modal.$parent.iconName = "check_circle";
break;
case "warning":
modal.$parent.iconName = "warning";
break;
case "error":
modal.$parent.iconName = "error";
break;
case "confirm":
modal.$parent.iconName = "help";
break;
}
if ("loadingType" in props) {
modal.$parent.loadingType = props.loadingType;
}
if ("width" in props) {
modal.$parent.width = props.width;
}
if ("closable" in props) {
modal.$parent.closable = props.closable;
}
if ("title" in props) {
modal.$parent.title = props.title;
}
if ("content" in props) {
modal.$parent.content = props.content;
}
if ("confirmText" in props) {
modal.$parent.confirmText = props.confirmText;
}
if ("cancelText" in props) {
modal.$parent.cancelText = props.cancelText;
}
if ("onCancel" in props) {
modal.$parent.onCancel = props.onCancel;
}
if ("onConfirm" in props) {
modal.$parent.onConfirm = props.onConfirm;
}
if ("loading" in props) {
modal.$parent.loading = props.loading;
}
if ("scrollable" in props) {
modal.$parent.scrollable = props.scrollable;
}
modal.$parent.onRemove = props.onRemove;
modal.data.visible = true;
},
remove() {
modal.data.visible = false;
modal.$parent.setLoading();
modal.$parent.remove();
},
component: modal
};
};
exports["default"] = index["default"];
//# sourceMappingURL=instance.js.map