@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
298 lines (297 loc) • 9.42 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
return value;
};
import { ref, onMounted, watch, computed, resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createElementVNode, normalizeClass, createElementBlock, renderSlot, Fragment, createTextVNode, toDisplayString, createCommentVNode, resolveDynamicComponent, h } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { f as funInterceptor } from "./interceptor-956b24fc.js";
import { P as Popup, p as popupProps } from "./index-c55ad69e.js";
import Button from "./Button.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import Overlay from "./Overlay.js";
import "../locale/lang";
import { C as CreateComponent } from "./mountComponent-8b24c346.js";
import "@cqmcui/icons-vue";
const { componentName, create, translate } = createComponent("dialog");
const _sfc_main = create({
inheritAttrs: false,
components: {
[Popup.name]: Popup,
[Button.name]: Button
},
props: {
...popupProps,
closeOnClickOverlay: {
type: Boolean,
default: false
},
title: {
type: String,
default: ""
},
content: {
type: [String, Object],
default: ""
},
noFooter: {
type: Boolean,
default: false
},
noOkBtn: {
type: Boolean,
default: false
},
noCancelBtn: {
type: Boolean,
default: false
},
cancelText: {
type: String,
default: ""
},
okText: {
type: String,
default: ""
},
cancelAutoClose: {
type: Boolean,
default: true
},
textAlign: {
type: String,
default: "center"
},
closeOnPopstate: {
type: Boolean,
default: false
},
footerDirection: {
type: String,
default: "horizontal"
//vertical
},
customClass: {
type: String,
default: ""
},
popStyle: {
type: Object
},
beforeClose: Function
},
emits: ["update", "update:visible", "ok", "cancel", "opened", "closed"],
setup(props, { emit }) {
const showPopup = ref(props.visible);
onMounted(() => {
if (props.closeOnPopstate) {
window.addEventListener("popstate", function() {
closed("page");
});
}
});
watch(
() => props.visible,
(value) => {
showPopup.value = value;
if (value) {
emit("opened");
}
}
);
const classes = computed(() => {
return {
[componentName]: true,
[props.customClass]: true
};
});
const update = (val) => {
emit("update", val);
emit("update:visible", val);
};
const closed = (action) => {
funInterceptor(props.beforeClose, {
args: [action],
done: () => {
update(false);
emit("closed");
}
});
};
const onCancel = () => {
emit("cancel");
if (props.cancelAutoClose) {
closed("cancel");
}
};
const onOk = () => {
emit("ok");
closed("ok");
};
const contentStyle = computed(() => {
return {
textAlign: props.textAlign
};
});
return {
closed,
classes,
onCancel,
onOk,
showPopup,
contentStyle,
translate
};
}
});
const _hoisted_1 = {
key: 0,
class: "cqmc-dialog__header"
};
const _hoisted_2 = ["innerHTML"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_nut_button = resolveComponent("cqmc-button");
const _component_nut_popup = resolveComponent("cqmc-popup");
return openBlock(), createBlock(_component_nut_popup, {
teleport: _ctx.teleport,
visible: _ctx.showPopup,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = $event),
"close-on-click-overlay": _ctx.closeOnClickOverlay,
"lock-scroll": _ctx.lockScroll,
"pop-class": _ctx.popClass,
"overlay-class": _ctx.overlayClass,
"overlay-style": _ctx.overlayStyle,
style: normalizeStyle(_ctx.popStyle),
round: "",
onClickOverlay: _ctx.closed,
onClickCloseIcon: _ctx.closed
}, {
default: withCtx(() => [
createElementVNode("view", {
class: normalizeClass(_ctx.classes)
}, [
_ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("view", _hoisted_1, [
_ctx.$slots.header ? renderSlot(_ctx.$slots, "header", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createTextVNode(toDisplayString(_ctx.title), 1)
], 64))
])) : createCommentVNode("", true),
createElementVNode("view", {
class: "cqmc-dialog__content",
style: normalizeStyle(_ctx.contentStyle)
}, [
_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : typeof _ctx.content === "string" ? (openBlock(), createElementBlock("view", {
key: 1,
innerHTML: _ctx.content
}, null, 8, _hoisted_2)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.content), { key: 2 }))
], 4),
!_ctx.noFooter ? (openBlock(), createElementBlock("view", {
key: 1,
class: normalizeClass(["cqmc-dialog__footer", { [_ctx.footerDirection]: _ctx.footerDirection }])
}, [
_ctx.$slots.footer ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
!_ctx.noCancelBtn ? (openBlock(), createBlock(_component_nut_button, {
key: 0,
size: "small",
plain: "",
type: "primary",
class: "cqmc-dialog__footer-cancel",
onClick: _ctx.onCancel
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1)
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true),
!_ctx.noOkBtn ? (openBlock(), createBlock(_component_nut_button, {
key: 1,
size: "small",
type: "primary",
class: "cqmc-dialog__footer-ok",
onClick: _ctx.onOk
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true)
], 64))
], 2)) : createCommentVNode("", true)
], 2)
]),
_: 3
}, 8, ["teleport", "visible", "close-on-click-overlay", "lock-scroll", "pop-class", "overlay-class", "overlay-style", "style", "onClickOverlay", "onClickCloseIcon"]);
}
const Dialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
class DialogOptions {
constructor() {
__publicField(this, "title", "");
__publicField(this, "content", "");
__publicField(this, "cancelText", "");
__publicField(this, "okText", "");
__publicField(this, "textAlign", "center");
__publicField(this, "customClass", "");
__publicField(this, "overlayStyle", {});
__publicField(this, "overlayClass", "");
__publicField(this, "popStyle", {});
__publicField(this, "popClass", "");
__publicField(this, "teleport", "body");
__publicField(this, "id", (/* @__PURE__ */ new Date()).getTime());
__publicField(this, "footerDirection", "horizontal");
//使用横纵方向 可选值 horizontal、vertical
// function
__publicField(this, "onUpdate");
__publicField(this, "onOk");
__publicField(this, "onCancel");
__publicField(this, "onOpened");
__publicField(this, "onClosed");
__publicField(this, "beforeClose");
__publicField(this, "visible", true);
__publicField(this, "noFooter", false);
__publicField(this, "noOkBtn", false);
__publicField(this, "noCancelBtn", false);
__publicField(this, "okBtnDisabled", false);
__publicField(this, "closeOnPopstate", false);
__publicField(this, "lockScroll", true);
}
}
class DialogFunction {
constructor(_options) {
__publicField(this, "options", new DialogOptions());
__publicField(this, "instance");
const options = Object.assign(this.options, _options);
const { unmount } = CreateComponent(options, {
name: "dialog",
components: [Popup, Button, Overlay],
wrapper: (elWrap, root) => {
return {
setup() {
options.onUpdate = (val) => {
if (val == false) {
unmount();
}
};
if (options == null ? void 0 : options.onOpened) {
options == null ? void 0 : options.onOpened();
}
options.teleport = `#${root.id}`;
return () => {
return h(Dialog, options);
};
}
};
}
});
}
}
const showDialog = function(options) {
return new DialogFunction(options);
};
showDialog.install = (app) => {
app.use(Dialog);
};
export {
DialogOptions,
Dialog as default,
showDialog
};