yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
203 lines (202 loc) • 6.9 kB
JavaScript
import { defineComponent, ref, computed, onActivated, onDeactivated, resolveComponent, openBlock, createBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, createCommentVNode } from "vue";
import { ElDrawer, ElIcon, drawerEmits } from "element-plus";
import { CloseOutlined } from "../icons";
import ReceiverView from "../ele-config-provider/components/receiver-view";
import { useLayoutState } from "../ele-pro-layout/util";
import { getDialogContainer } from "../ele-dialog/util";
import { drawerProps } from "./props";
const _sfc_main = defineComponent({
name: "EleDrawer",
components: { ElDrawer, ElIcon, CloseOutlined, ReceiverView },
props: drawerProps,
emits: drawerEmits,
setup(props, { emit }) {
const layoutState = useLayoutState();
const drawerRef = ref(null);
const isActivated = ref(true);
const drawerClass = computed(() => {
const classes = ["ele-drawer"];
if (!props.modelValue) {
classes.push("ele-drawer-closed");
}
if (!isActivated.value && props.modelValue) {
classes.push("ele-drawer-hide");
}
if (props.inner) {
classes.push("ele-drawer-inner");
}
if (props.modalClass) {
classes.push(props.modalClass);
}
return classes.join(" ");
});
const teleportTo = computed(() => {
return getDialogContainer(
props.inner,
false,
props.appendTo,
layoutState.modalsEl
);
});
const teleportDisabled = computed(() => {
const appendTo = props.appendTo || "body";
const disabled = appendTo === "body" ? !props.appendToBody : false;
return props.inner ? false : disabled;
});
const handleClose = () => {
if (drawerRef.value && drawerRef.value.handleClose) {
drawerRef.value.handleClose();
}
};
const updateModelValue = (value) => {
emit("update:modelValue", value);
};
const handleDrawerOpen = () => {
emit("open");
};
const handleDrawerOpened = () => {
emit("opened");
};
const handleDrawerClose = () => {
emit("close");
};
const handleDrawerClosed = () => {
emit("closed");
};
const handleDrawerOpenAutoFocus = () => {
emit("openAutoFocus");
};
const handleDrawerCloseAutoFocus = () => {
emit("closeAutoFocus");
};
onActivated(() => {
isActivated.value = true;
});
onDeactivated(() => {
isActivated.value = false;
});
return {
drawerRef,
drawerClass,
teleportTo,
teleportDisabled,
handleClose,
updateModelValue,
handleDrawerOpen,
handleDrawerOpened,
handleDrawerClose,
handleDrawerClosed,
handleDrawerOpenAutoFocus,
handleDrawerCloseAutoFocus
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1 = ["onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_CloseOutlined = resolveComponent("CloseOutlined");
const _component_ElIcon = resolveComponent("ElIcon");
const _component_ReceiverView = resolveComponent("ReceiverView");
const _component_ElDrawer = resolveComponent("ElDrawer");
return openBlock(), createBlock(Teleport, {
to: _ctx.teleportTo,
disabled: _ctx.teleportDisabled
}, [
createVNode(_component_ElDrawer, mergeProps(_ctx.$attrs, {
ref: "drawerRef",
modelValue: _ctx.modelValue,
appendToBody: false,
lockScroll: _ctx.inner ? false : _ctx.lockScroll,
beforeClose: _ctx.beforeClose,
closeOnClickModal: _ctx.closeOnClickModal,
closeOnPressEscape: _ctx.closeOnPressEscape,
openDelay: _ctx.openDelay,
closeDelay: _ctx.closeDelay,
destroyOnClose: _ctx.destroyOnClose,
modal: _ctx.modal,
direction: _ctx.direction,
showClose: false,
size: _ctx.size,
title: _ctx.title,
withHeader: _ctx.withHeader,
modalClass: _ctx.drawerClass,
zIndex: _ctx.zIndex,
headerAriaLevel: _ctx.headerAriaLevel,
onOpen: _ctx.handleDrawerOpen,
onOpened: _ctx.handleDrawerOpened,
onClose: _ctx.handleDrawerClose,
onClosed: _ctx.handleDrawerClosed,
onOpenAutoFocus: _ctx.handleDrawerOpenAutoFocus,
onCloseAutoFocus: _ctx.handleDrawerCloseAutoFocus,
"onUpdate:modelValue": _ctx.updateModelValue
}), createSlots({
header: withCtx(({ close }) => [
createElementVNode("div", {
class: "ele-drawer-header",
style: normalizeStyle(_ctx.headerStyle)
}, [
createElementVNode("div", {
role: "heading",
class: "ele-drawer-title",
style: normalizeStyle(_ctx.titleStyle)
}, [
renderSlot(_ctx.$slots, "header", {}, () => [
createTextVNode(toDisplayString(_ctx.title), 1)
])
], 4),
_ctx.showClose ? (openBlock(), createElementBlock("div", {
key: 0,
class: "ele-drawer-close",
style: normalizeStyle(_ctx.closeBtnStyle),
onClick: close
}, [
renderSlot(_ctx.$slots, "closeBtn", {}, () => [
createVNode(_component_ElIcon, null, {
default: withCtx(() => [
createVNode(_component_CloseOutlined)
]),
_: 1
})
])
], 12, _hoisted_1)) : createCommentVNode("", true)
], 4)
]),
default: withCtx(() => [
createVNode(_component_ReceiverView, {
wrapPosition: false,
class: "ele-drawer-body",
style: normalizeStyle(_ctx.bodyStyle)
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["style"])
]),
_: 2
}, [
_ctx.$slots.footer ? {
name: "footer",
fn: withCtx(() => [
createElementVNode("div", {
class: "ele-drawer-footer",
style: normalizeStyle(_ctx.footerStyle)
}, [
renderSlot(_ctx.$slots, "footer")
], 4)
]),
key: "0"
} : void 0
]), 1040, ["modelValue", "lockScroll", "beforeClose", "closeOnClickModal", "closeOnPressEscape", "openDelay", "closeDelay", "destroyOnClose", "modal", "direction", "size", "title", "withHeader", "modalClass", "zIndex", "headerAriaLevel", "onOpen", "onOpened", "onClose", "onClosed", "onOpenAutoFocus", "onCloseAutoFocus", "onUpdate:modelValue"])
], 8, ["to", "disabled"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};