tav-ui
Version:
240 lines (237 loc) • 8.41 kB
JavaScript
import { defineComponent, provide, ref, nextTick, unref, getCurrentInstance, computed, toRef, watchEffect, watch, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createVNode, renderSlot, renderList, normalizeProps, guardReactiveProps } from 'vue';
import { omit } from 'lodash-es';
import { isFunction } from '../../../utils/is2.mjs';
import { deepMerge } from '../../../utils/basic2.mjs';
import { mitt } from '../../../utils/mitt2.mjs';
import ModalContent from './components/ModalContent2.mjs';
import ModalWrapper from './components/ModalWrapper2.mjs';
import ModalClose from './components/ModalClose2.mjs';
import ModalFooter from './components/ModalFooter2.mjs';
import ModalHeader from './components/ModalHeader2.mjs';
import { basicProps } from './types2.mjs';
import { useFullScreen } from './hooks/useModalFullScreen2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
const _sfc_main = defineComponent({
name: "TaModal",
components: {
ModalContent,
ModalWrapper,
ModalClose,
ModalFooter,
ModalHeader
},
inheritAttrs: false,
props: basicProps,
emits: ["visible-change", "height-change", "cancel", "ok", "register", "update:visible"],
setup(props, { emit, attrs }) {
const modalEmitter = mitt();
provide("modalEmitter", modalEmitter);
const visibleRef = ref(false);
const propsRef = ref(null);
const modalWrapperRef = ref(null);
const prefixCls = "ta-basic-modal";
const extHeightRef = ref(0);
const modalMethods = {
redoThumbHeight: () => modalEmitter.emit("redoThumbHeight"),
setModalProps,
emitVisible: void 0,
redoModalHeight: () => {
nextTick(() => {
if (unref(modalWrapperRef))
unref(modalWrapperRef).setModalHeight();
});
}
};
const instance = getCurrentInstance();
if (instance)
emit("register", modalMethods, instance.uid);
const getMergeProps = computed(() => {
return {
...props,
...unref(propsRef)
};
});
const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({
modalWrapperRef,
extHeightRef,
wrapClassName: toRef(props, "wrapClassName")
});
const getProps = computed(() => {
const opt = {
...unref(getMergeProps),
visible: unref(visibleRef),
okButtonProps: void 0,
cancelButtonProps: void 0,
title: void 0
};
return {
...opt,
wrapClassName: unref(getWrapClassName)
};
});
const getBindValue = computed(() => {
const attr = {
...attrs,
...unref(getMergeProps),
visible: unref(visibleRef),
wrapClassName: `${unref(getWrapClassName)} ta-basic-modal`
};
if (unref(fullScreenRef))
return omit(attr, ["height", "title"]);
return omit(attr, "title");
});
const getWrapperHeight = computed(() => {
if (unref(fullScreenRef))
return void 0;
return unref(getProps).height;
});
watchEffect(() => {
visibleRef.value = !!props.visible;
fullScreenRef.value = !!props.defaultFullscreen;
});
watch(() => unref(visibleRef), (v) => {
emit("visible-change", v);
emit("update:visible", v);
instance && modalMethods.emitVisible?.(v, instance.uid);
nextTick(() => {
if (props.scrollTop && v && unref(modalWrapperRef))
unref(modalWrapperRef).scrollTop();
});
}, {
immediate: false
});
async function handleCancel(e) {
e?.stopPropagation();
if (e.target?.classList?.contains(`${prefixCls}-close--custom`))
return;
if (props.closeFunc && isFunction(props.closeFunc)) {
const isClose = await props.closeFunc();
visibleRef.value = !isClose;
return;
}
visibleRef.value = false;
emit("cancel", e);
}
function setModalProps(props2) {
propsRef.value = deepMerge(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,
modalWrapperRef,
handleExtHeight,
handleHeightChange,
handleTitleDbClick,
getWrapperHeight
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ModalClose = resolveComponent("ModalClose");
const _component_ModalHeader = resolveComponent("ModalHeader");
const _component_ModalFooter = resolveComponent("ModalFooter");
const _component_ModalWrapper = resolveComponent("ModalWrapper");
const _component_ModalContent = resolveComponent("ModalContent");
return openBlock(), createBlock(_component_ModalContent, mergeProps(_ctx.getBindValue, { onCancel: _ctx.handleCancel }), createSlots({
default: withCtx(() => [
createVNode(_component_ModalWrapper, 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: withCtx(() => [
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: withCtx(() => [
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: withCtx(() => [
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: withCtx(() => [
createVNode(_component_ModalFooter, mergeProps(_ctx.getBindValue, {
onOk: _ctx.handleOk,
onCancel: _ctx.handleCancel
}), createSlots({ _: 2 }, [
renderList(Object.keys(_ctx.$slots), (item) => {
return {
name: item,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
])
};
})
]), 1040, ["onOk", "onCancel"])
])
} : void 0,
renderList(Object.keys(_ctx.omit(_ctx.$slots, "default")), (item) => {
return {
name: item,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
])
};
})
]), 1040, ["onCancel"]);
}
var Modal = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/modal/src/modal.vue"]]);
export { Modal as default };
//# sourceMappingURL=modal2.mjs.map