ivue-material-plus
Version:
A high quality UI components Library with Vue.js
276 lines (274 loc) • 6.91 kB
JavaScript
import { createApp, getCurrentInstance, h } from 'vue';
import Modal from './index2.mjs';
export { default } from './index2.mjs';
import { isClient } from '../../utils/helpers.mjs';
import { IvueIcon } from '../ivue-icon/index.mjs';
import { IvueButton } from '../ivue-button/index.mjs';
import { IvueSpin } from '../ivue-spin/index.mjs';
const prefixCls = "ivue-modal-instance";
Modal.newInstance = (properties) => {
if (!isClient) {
return;
}
const _props = properties || {};
const container = document.createElement("div");
document.body.appendChild(container);
let _instance = null;
const Instance = 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 = 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 = h(
"div",
{
class: `${prefixCls}--head`
},
[
h(
IvueIcon,
{
class: [
`${prefixCls}--head__icon`,
`${prefixCls}--head__${this.iconType}`
]
},
{
default: () => this.iconName
}
),
h("div", {
class: `${prefixCls}--head__title`,
innerHTML: this.title
})
]
);
}
let bodyRender;
if (this.render) {
bodyRender = h(
"div",
{
class: `${prefixCls}--body ${prefixCls}--body__render`
},
[this.render(h)]
);
} else {
bodyRender = h(
"div",
{
class: `${prefixCls}--body`
},
[
h("div", {
innerHTML: this.content
})
]
);
}
const footerRender = [];
if (this.showCancel) {
footerRender.push(
h(
IvueButton,
{
class: "ivue-modal-footer--button",
outline: true,
color: "#dcdfe6",
onClick: this.handleCancel
},
() => this.cancelText
)
);
}
footerRender.push(
h(
IvueButton,
{
class: "ivue-modal-footer--button",
status: "primary",
depressed: true,
loading: this.buttonLoading,
onClick: this.handleConfirm
},
() => this.confirmText
)
);
return h(
Modal,
{
..._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"
},
() => h(
"div",
{
class: prefixCls
},
[
headRender,
bodyRender,
h(
"div",
{
class: `${prefixCls}--footer`
},
footerRender
),
this.loadingType === "spin" && h(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
};
};
//# sourceMappingURL=instance.mjs.map