yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
343 lines (342 loc) • 12.6 kB
JavaScript
import { defineComponent, ref, computed, watch, onMounted, onActivated, onDeactivated, nextTick, resolveComponent, createBlock, openBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, normalizeStyle, normalizeClass, renderSlot, createElementVNode, createElementBlock, createCommentVNode, createTextVNode, toDisplayString, withModifiers, resolveDynamicComponent } from "vue";
import { ElIcon, ElDialog } from "element-plus";
import { ResizeOutlined, ExpandOutlined, CompressOutlined, CloseOutlined } from "../icons";
import ReceiverView from "../ele-config-provider/components/receiver-view";
import { useLayoutState, useResponsive } from "../ele-pro-layout/util";
import { wrapperClass, getDialogContainer, useDialogEvent, closedClass } from "./util";
import { eleDialogEmits, eleDialogProps } from "./props";
const _sfc_main = defineComponent({
name: "EleDialog",
components: {
ElDialog,
ElIcon,
CloseOutlined,
CompressOutlined,
ExpandOutlined,
ResizeOutlined,
ReceiverView
},
inheritAttrs: false,
props: eleDialogProps,
emits: eleDialogEmits,
setup(props, { emit }) {
const layoutState = useLayoutState();
const isResponsive = useResponsive(props);
const dialogRef = ref(null);
const isFullscreen = ref(props.fullscreen ?? false);
const isActivated = ref(true);
const modalClass = computed(() => {
const classes = [wrapperClass];
if (props.responsive ?? isResponsive.value ?? true) {
classes.push("ele-dialog-responsive");
}
if (props.alignCenter || props.position === "center") {
classes.push("ele-dialog-center");
} else if (props.position === "top") {
classes.push("ele-dialog-top");
} else if (props.position === "bottom") {
classes.push("ele-dialog-bottom");
} else if (props.position === "left") {
classes.push("ele-dialog-left");
} else if (props.position === "right") {
classes.push("ele-dialog-right");
} else if (props.position === "leftTop") {
classes.push("ele-dialog-left-top");
} else if (props.position === "leftBottom") {
classes.push("ele-dialog-left-bottom");
} else if (props.position === "rightTop") {
classes.push("ele-dialog-right-top");
} else if (props.position === "rightBottom") {
classes.push("ele-dialog-right-bottom");
}
if (props.draggable) {
classes.push("ele-dialog-movable");
}
if (props.resizable) {
classes.push("ele-dialog-resizable");
}
if (props.multiple) {
classes.push("ele-dialog-multiple");
}
if (isFullscreen.value) {
classes.push("ele-dialog-fullscreen");
}
if (!props.modelValue) {
classes.push(closedClass);
}
if (!isActivated.value && props.modelValue) {
classes.push("ele-dialog-hide");
}
if (props.inner) {
classes.push("ele-dialog-inner");
}
if (props.modalClass) {
classes.push(props.modalClass);
}
return classes.join(" ");
});
const teleportTo = computed(() => {
return getDialogContainer(
props.inner,
props.multiple,
props.appendTo,
layoutState.dialogsEl
);
});
const teleportDisabled = computed(() => {
const appendTo = props.appendTo || "body";
const disabled = appendTo === "body" ? !props.appendToBody : false;
return props.multiple || props.inner ? false : disabled;
});
const {
handleHeaderMousedown,
handleHeaderTouchstart,
handleResizeMousedown,
handleResizeTouchstart,
bindAutoTopEvent,
unbindAutoTopEvent,
topDialog,
setInitPosition,
resetDialogStyle
} = useDialogEvent(dialogRef, props, isFullscreen);
const updateModelValue = (modelValue) => {
emit("update:modelValue", modelValue);
};
const toggleFullscreen = (fullscreen) => {
isFullscreen.value = fullscreen ?? !isFullscreen.value;
nextTick(() => {
topDialog();
});
emit("update:fullscreen", isFullscreen.value);
};
const handleOpen = () => {
if (props.resetOnClose || props.destroyOnClose) {
isFullscreen.value = props.fullscreen ?? false;
}
nextTick(() => {
if (props.resetOnClose) {
resetDialogStyle();
} else {
setInitPosition();
}
topDialog();
});
emit("open");
};
const handleOpened = () => {
bindAutoTopEvent();
emit("opened");
};
const handleClose = () => {
unbindAutoTopEvent();
emit("close");
};
const handleClosed = () => {
emit("closed");
};
const handleOpenAutoFocus = () => {
emit("openAutoFocus");
};
const handleCloseAutoFocus = () => {
emit("closeAutoFocus");
};
watch(
() => props.fullscreen,
(fullscreen) => {
isFullscreen.value = fullscreen ?? false;
}
);
onMounted(() => {
if (props.modelValue) {
setInitPosition();
}
});
onActivated(() => {
isActivated.value = true;
});
onDeactivated(() => {
isActivated.value = false;
});
return {
dialogRef,
isFullscreen,
modalClass,
teleportTo,
teleportDisabled,
handleHeaderMousedown,
handleHeaderTouchstart,
handleResizeMousedown,
handleResizeTouchstart,
updateModelValue,
toggleFullscreen,
handleOpen,
handleOpened,
handleClose,
handleClosed,
handleOpenAutoFocus,
handleCloseAutoFocus
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_CompressOutlined = resolveComponent("CompressOutlined");
const _component_ExpandOutlined = resolveComponent("ExpandOutlined");
const _component_ElIcon = resolveComponent("ElIcon");
const _component_CloseOutlined = resolveComponent("CloseOutlined");
const _component_ResizeOutlined = resolveComponent("ResizeOutlined");
const _component_ReceiverView = resolveComponent("ReceiverView");
const _component_ElDialog = resolveComponent("ElDialog");
return openBlock(), createBlock(Teleport, {
to: _ctx.teleportTo,
disabled: _ctx.teleportDisabled
}, [
createVNode(_component_ElDialog, mergeProps(_ctx.$attrs, {
ref: "dialogRef",
modelValue: _ctx.modelValue,
title: _ctx.title,
width: _ctx.width,
fullscreen: false,
modal: _ctx.multiple ? false : _ctx.modal,
modalClass: _ctx.modalClass,
appendToBody: false,
lockScroll: _ctx.inner || _ctx.multiple ? false : _ctx.lockScroll,
openDelay: _ctx.openDelay,
closeDelay: _ctx.closeDelay,
closeOnClickModal: _ctx.closeOnClickModal,
closeOnPressEscape: _ctx.closeOnPressEscape,
showClose: false,
beforeClose: _ctx.beforeClose,
draggable: false,
overflow: false,
center: _ctx.center,
alignCenter: false,
destroyOnClose: _ctx.destroyOnClose,
zIndex: _ctx.zIndex,
headerAriaLevel: _ctx.headerAriaLevel,
"onUpdate:modelValue": _ctx.updateModelValue,
onOpen: _ctx.handleOpen,
onOpened: _ctx.handleOpened,
onClose: _ctx.handleClose,
onClosed: _ctx.handleClosed,
onOpenAutoFocus: _ctx.handleOpenAutoFocus,
onCloseAutoFocus: _ctx.handleCloseAutoFocus
}), createSlots({
header: withCtx(({ close, titleId, titleClass }) => [
createElementVNode("div", {
style: normalizeStyle(_ctx.headerStyle),
class: "ele-dialog-header",
onMousedown: _cache[6] || (_cache[6] = (...args) => _ctx.handleHeaderMousedown && _ctx.handleHeaderMousedown(...args)),
onTouchstart: _cache[7] || (_cache[7] = (...args) => _ctx.handleHeaderTouchstart && _ctx.handleHeaderTouchstart(...args))
}, [
createElementVNode("div", {
class: "ele-dialog-title",
style: normalizeStyle(_ctx.titleStyle)
}, [
renderSlot(_ctx.$slots, "header", {
close,
titleId,
titleClass
}, () => [
createTextVNode(toDisplayString(_ctx.title), 1)
])
], 4),
_ctx.maxable ? (openBlock(), createElementBlock("div", {
key: 0,
class: "ele-dialog-tool ele-dialog-tool-max",
style: normalizeStyle(_ctx.fullscreenBtnStyle),
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen()),
onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
}, ["stop"])),
onTouchstart: _cache[2] || (_cache[2] = withModifiers(() => {
}, ["stop"]))
}, [
renderSlot(_ctx.$slots, "maxIcon", { fullscreen: _ctx.isFullscreen }, () => [
createVNode(_component_ElIcon, null, {
default: withCtx(() => [
_ctx.isFullscreen ? (openBlock(), createBlock(_component_CompressOutlined, { key: 0 })) : (openBlock(), createBlock(_component_ExpandOutlined, { key: 1 }))
]),
_: 1
})
])
], 36)) : createCommentVNode("", true),
_ctx.showClose ? (openBlock(), createElementBlock("div", {
key: 1,
class: "ele-dialog-tool",
style: normalizeStyle(_ctx.closeBtnStyle),
onClick: _cache[3] || (_cache[3] = ($event) => _ctx.updateModelValue(false)),
onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {
}, ["stop"])),
onTouchstart: _cache[5] || (_cache[5] = withModifiers(() => {
}, ["stop"]))
}, [
renderSlot(_ctx.$slots, "closeIcon", {}, () => [
createVNode(_component_ElIcon, null, {
default: withCtx(() => [
_ctx.closeIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.closeIcon), { key: 0 })) : (openBlock(), createBlock(_component_CloseOutlined, { key: 1 }))
]),
_: 1
})
])
], 36)) : createCommentVNode("", true)
], 36),
_ctx.resizable ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass([
"ele-dialog-resize-icon",
{ "is-horizontal": _ctx.resizable === "horizontal" },
{ "is-vertical": _ctx.resizable === "vertical" }
]),
style: normalizeStyle(_ctx.resizeIconStyle),
onMousedown: _cache[8] || (_cache[8] = (...args) => _ctx.handleResizeMousedown && _ctx.handleResizeMousedown(...args)),
onTouchstart: _cache[9] || (_cache[9] = (...args) => _ctx.handleResizeTouchstart && _ctx.handleResizeTouchstart(...args))
}, [
renderSlot(_ctx.$slots, "resizeIcon", {}, () => [
createVNode(_component_ElIcon, null, {
default: withCtx(() => [
createVNode(_component_ResizeOutlined)
]),
_: 1
})
])
], 38)) : createCommentVNode("", true)
]),
default: withCtx(() => [
createVNode(_component_ReceiverView, {
wrapPosition: false,
class: normalizeClass(["ele-dialog-body", { "is-form": _ctx.form }]),
style: normalizeStyle(_ctx.bodyStyle)
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class", "style"])
]),
_: 2
}, [
_ctx.$slots.footer ? {
name: "footer",
fn: withCtx(() => [
createElementVNode("div", {
class: "ele-dialog-footer",
style: normalizeStyle(_ctx.footerStyle)
}, [
renderSlot(_ctx.$slots, "footer")
], 4)
]),
key: "0"
} : void 0
]), 1040, ["modelValue", "title", "width", "modal", "modalClass", "lockScroll", "openDelay", "closeDelay", "closeOnClickModal", "closeOnPressEscape", "beforeClose", "center", "destroyOnClose", "zIndex", "headerAriaLevel", "onUpdate:modelValue", "onOpen", "onOpened", "onClose", "onClosed", "onOpenAutoFocus", "onCloseAutoFocus"])
], 8, ["to", "disabled"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};