tav-ui
Version:
244 lines (239 loc) • 8.71 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashEs = require('lodash-es');
var is = require('../../../utils/is2.js');
var basic = require('../../../utils/basic2.js');
var mitt = require('../../../utils/mitt2.js');
var ModalContent = require('./components/ModalContent2.js');
var ModalWrapper = require('./components/ModalWrapper2.js');
var ModalClose = require('./components/ModalClose2.js');
var ModalFooter = require('./components/ModalFooter2.js');
var ModalHeader = require('./components/ModalHeader2.js');
var types = require('./types2.js');
var useModalFullScreen = require('./hooks/useModalFullScreen2.js');
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
const _sfc_main = vue.defineComponent({
name: "TaModal",
components: {
ModalContent: ModalContent["default"],
ModalWrapper: ModalWrapper["default"],
ModalClose: ModalClose["default"],
ModalFooter: ModalFooter["default"],
ModalHeader: ModalHeader["default"]
},
inheritAttrs: false,
props: types.basicProps,
emits: ["visible-change", "height-change", "cancel", "ok", "register", "update:visible"],
setup(props, { emit, attrs }) {
const modalEmitter = mitt.mitt();
vue.provide("modalEmitter", modalEmitter);
const visibleRef = vue.ref(false);
const propsRef = vue.ref(null);
const modalWrapperRef = vue.ref(null);
const prefixCls = "ta-basic-modal";
const extHeightRef = vue.ref(0);
const modalMethods = {
redoThumbHeight: () => modalEmitter.emit("redoThumbHeight"),
setModalProps,
emitVisible: void 0,
redoModalHeight: () => {
vue.nextTick(() => {
if (vue.unref(modalWrapperRef))
vue.unref(modalWrapperRef).setModalHeight();
});
}
};
const instance = vue.getCurrentInstance();
if (instance)
emit("register", modalMethods, instance.uid);
const getMergeProps = vue.computed(() => {
return {
...props,
...vue.unref(propsRef)
};
});
const { handleFullScreen, getWrapClassName, fullScreenRef } = useModalFullScreen.useFullScreen({
modalWrapperRef,
extHeightRef,
wrapClassName: vue.toRef(props, "wrapClassName")
});
const getProps = vue.computed(() => {
const opt = {
...vue.unref(getMergeProps),
visible: vue.unref(visibleRef),
okButtonProps: void 0,
cancelButtonProps: void 0,
title: void 0
};
return {
...opt,
wrapClassName: vue.unref(getWrapClassName)
};
});
const getBindValue = vue.computed(() => {
const attr = {
...attrs,
...vue.unref(getMergeProps),
visible: vue.unref(visibleRef),
wrapClassName: `${vue.unref(getWrapClassName)} ta-basic-modal`
};
if (vue.unref(fullScreenRef))
return lodashEs.omit(attr, ["height", "title"]);
return lodashEs.omit(attr, "title");
});
const getWrapperHeight = vue.computed(() => {
if (vue.unref(fullScreenRef))
return void 0;
return vue.unref(getProps).height;
});
vue.watchEffect(() => {
visibleRef.value = !!props.visible;
fullScreenRef.value = !!props.defaultFullscreen;
});
vue.watch(() => vue.unref(visibleRef), (v) => {
emit("visible-change", v);
emit("update:visible", v);
instance && modalMethods.emitVisible?.(v, instance.uid);
vue.nextTick(() => {
if (props.scrollTop && v && vue.unref(modalWrapperRef))
vue.unref(modalWrapperRef).scrollTop();
});
}, {
immediate: false
});
async function handleCancel(e) {
e?.stopPropagation();
if (e.target?.classList?.contains(`${prefixCls}-close--custom`))
return;
if (props.closeFunc && is.isFunction(props.closeFunc)) {
const isClose = await props.closeFunc();
visibleRef.value = !isClose;
return;
}
visibleRef.value = false;
emit("cancel", e);
}
function setModalProps(props2) {
propsRef.value = basic.deepMerge(vue.unref(propsRef) || {}, props2);
if (Reflect.has(props2, "visible"))
visibleRef.value = !!props2.visible;
if (Reflect.has(props2, "defaultFullscreen"))
fullScreenRef.value = !!props2.defaultFullscreen;
}
function handleOk(e) {
emit("ok", e);
}
function handleHeightChange(height) {
emit("height-change", height);
}
function handleExtHeight(height) {
extHeightRef.value = height;
}
function handleTitleDbClick(e) {
if (!props.canFullscreen)
return;
e.stopPropagation();
handleFullScreen(e);
}
return {
handleCancel,
getBindValue,
getProps,
handleFullScreen,
fullScreenRef,
getMergeProps,
handleOk,
visibleRef,
omit: lodashEs.omit,
modalWrapperRef,
handleExtHeight,
handleHeightChange,
handleTitleDbClick,
getWrapperHeight
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ModalClose = vue.resolveComponent("ModalClose");
const _component_ModalHeader = vue.resolveComponent("ModalHeader");
const _component_ModalFooter = vue.resolveComponent("ModalFooter");
const _component_ModalWrapper = vue.resolveComponent("ModalWrapper");
const _component_ModalContent = vue.resolveComponent("ModalContent");
return vue.openBlock(), vue.createBlock(_component_ModalContent, vue.mergeProps(_ctx.getBindValue, { onCancel: _ctx.handleCancel }), vue.createSlots({
default: vue.withCtx(() => [
vue.createVNode(_component_ModalWrapper, vue.mergeProps({
ref: "modalWrapperRef",
"use-wrapper": _ctx.getProps.useWrapper,
"footer-offset": _ctx.wrapperFooterOffset,
"full-screen": _ctx.fullScreenRef,
loading: _ctx.getProps.loading,
"loading-tip": _ctx.getProps.loadingTip,
"min-height": _ctx.getProps.minHeight,
height: _ctx.getWrapperHeight,
visible: _ctx.visibleRef,
"modal-footer-height": _ctx.footer !== void 0 && !_ctx.footer ? 0 : void 0
}, _ctx.omit(_ctx.getProps.wrapperProps, "visible", "height", "modalFooterHeight"), {
onExtHeight: _ctx.handleExtHeight,
onHeightChange: _ctx.handleHeightChange
}), {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["use-wrapper", "footer-offset", "full-screen", "loading", "loading-tip", "min-height", "height", "visible", "modal-footer-height", "onExtHeight", "onHeightChange"])
]),
_: 2
}, [
!_ctx.$slots.closeIcon ? {
name: "closeIcon",
fn: vue.withCtx(() => [
vue.createVNode(_component_ModalClose, {
"can-fullscreen": _ctx.getProps.canFullscreen,
"full-screen": _ctx.fullScreenRef,
onCancel: _ctx.handleCancel,
onFullscreen: _ctx.handleFullScreen
}, null, 8, ["can-fullscreen", "full-screen", "onCancel", "onFullscreen"])
])
} : void 0,
!_ctx.$slots.title ? {
name: "title",
fn: vue.withCtx(() => [
vue.createVNode(_component_ModalHeader, {
"help-message": _ctx.getProps.helpMessage,
title: _ctx.getMergeProps.title,
onDblclick: _ctx.handleTitleDbClick
}, null, 8, ["help-message", "title", "onDblclick"])
])
} : void 0,
!_ctx.$slots.footer ? {
name: "footer",
fn: vue.withCtx(() => [
vue.createVNode(_component_ModalFooter, vue.mergeProps(_ctx.getBindValue, {
onOk: _ctx.handleOk,
onCancel: _ctx.handleCancel
}), vue.createSlots({ _: 2 }, [
vue.renderList(Object.keys(_ctx.$slots), (item) => {
return {
name: item,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, item, vue.normalizeProps(vue.guardReactiveProps(data || {})))
])
};
})
]), 1040, ["onOk", "onCancel"])
])
} : void 0,
vue.renderList(Object.keys(_ctx.omit(_ctx.$slots, "default")), (item) => {
return {
name: item,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, item, vue.normalizeProps(vue.guardReactiveProps(data || {})))
])
};
})
]), 1040, ["onCancel"]);
}
var Modal = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/modal/src/modal.vue"]]);
exports["default"] = Modal;
//# sourceMappingURL=modal2.js.map