@arco-design/web-vue
Version:
Arco Design Vue 2.0: A Vue.js 3 UI Library
409 lines (408 loc) • 13.5 kB
JavaScript
;
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var clientOnly = require("../_components/client-only.js");
var index = require("../button/index.js");
var iconHover = require("../_components/icon-hover.js");
var index$1 = require("../icon/icon-close/index.js");
var index$2 = require("../locale/index.js");
var useOverflow = require("../_hooks/use-overflow.js");
var dom = require("../_utils/dom.js");
var usePopupManager = require("../_hooks/use-popup-manager.js");
var is = require("../_utils/is.js");
var keyboard = require("../_utils/keyboard.js");
var useTeleportContainer = require("../_hooks/use-teleport-container.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper.js");
const DRAWER_PLACEMENTS = ["top", "right", "bottom", "left"];
const _sfc_main = vue.defineComponent({
name: "Drawer",
components: {
ClientOnly: clientOnly,
ArcoButton: index["default"],
IconHover: iconHover,
IconClose: index$1
},
inheritAttrs: false,
props: {
visible: {
type: Boolean,
default: false
},
defaultVisible: {
type: Boolean,
default: false
},
placement: {
type: String,
default: "right",
validator: (value) => DRAWER_PLACEMENTS.includes(value)
},
title: String,
mask: {
type: Boolean,
default: true
},
maskClosable: {
type: Boolean,
default: true
},
closable: {
type: Boolean,
default: true
},
okText: String,
cancelText: String,
okLoading: {
type: Boolean,
default: false
},
okButtonProps: {
type: Object
},
cancelButtonProps: {
type: Object
},
unmountOnClose: Boolean,
width: {
type: [Number, String],
default: 250
},
height: {
type: [Number, String],
default: 250
},
popupContainer: {
type: [String, Object],
default: "body"
},
drawerStyle: {
type: Object
},
bodyClass: {
type: [String, Array]
},
bodyStyle: {
type: [String, Object, Array]
},
onBeforeOk: {
type: Function
},
onBeforeCancel: {
type: Function
},
escToClose: {
type: Boolean,
default: true
},
renderToBody: {
type: Boolean,
default: true
},
header: {
type: Boolean,
default: true
},
footer: {
type: Boolean,
default: true
},
hideCancel: {
type: Boolean,
default: false
}
},
emits: {
"update:visible": (visible) => true,
"ok": (e) => true,
"cancel": (e) => true,
"open": () => true,
"close": () => true,
"beforeOpen": () => true,
"beforeClose": () => true
},
setup(props, { emit }) {
const { popupContainer } = vue.toRefs(props);
const prefixCls = globalConfig.getPrefixCls("drawer");
const { t } = index$2.useI18n();
const _visible = vue.ref(props.defaultVisible);
const computedVisible = vue.computed(() => {
var _a;
return (_a = props.visible) != null ? _a : _visible.value;
});
const _okLoading = vue.ref(false);
const mergedOkLoading = vue.computed(() => props.okLoading || _okLoading.value);
const { teleportContainer, containerRef } = useTeleportContainer.useTeleportContainer({
popupContainer,
visible: computedVisible
});
const mounted = vue.ref(computedVisible.value);
let globalKeyDownListener = false;
const handleGlobalKeyDown = (ev) => {
if (props.escToClose && ev.key === keyboard.KEYBOARD_KEY.ESC && isLastDialog()) {
handleCancel(ev);
}
};
const addGlobalKeyDownListener = () => {
if (props.escToClose && !globalKeyDownListener) {
globalKeyDownListener = true;
dom.on(document.documentElement, "keydown", handleGlobalKeyDown);
}
};
const removeGlobalKeyDownListener = () => {
if (globalKeyDownListener) {
globalKeyDownListener = false;
dom.off(document.documentElement, "keydown", handleGlobalKeyDown);
}
};
const { zIndex, isLastDialog } = usePopupManager("dialog", {
visible: computedVisible
});
const isFixed = vue.computed(() => {
return (containerRef == null ? void 0 : containerRef.value) === document.body;
});
let promiseNumber = 0;
const close = () => {
promiseNumber++;
if (_okLoading.value) {
_okLoading.value = false;
}
_visible.value = false;
emit("update:visible", false);
};
const handleOk = async (e) => {
const currentPromiseNumber = promiseNumber;
const closed = await new Promise(
async (resolve) => {
var _a;
if (is.isFunction(props.onBeforeOk)) {
let result = props.onBeforeOk((closed2 = true) => resolve(closed2));
if (is.isPromise(result) || !is.isBoolean(result)) {
_okLoading.value = true;
}
if (is.isPromise(result)) {
try {
result = (_a = await result) != null ? _a : true;
} catch (error) {
result = false;
throw error;
}
}
if (is.isBoolean(result)) {
resolve(result);
}
} else {
resolve(true);
}
}
);
if (currentPromiseNumber === promiseNumber) {
if (closed) {
emit("ok", e);
close();
} else if (_okLoading.value) {
_okLoading.value = false;
}
}
};
const handleCancel = (e) => {
var _a;
let result = true;
if (is.isFunction(props.onBeforeCancel)) {
result = (_a = props.onBeforeCancel()) != null ? _a : false;
}
if (result) {
emit("cancel", e);
close();
}
};
const handleMask = (e) => {
if (props.maskClosable) {
handleCancel(e);
}
};
const handleOpen = () => {
if (computedVisible.value) {
emit("open");
}
};
const handleClose = () => {
if (!computedVisible.value) {
mounted.value = false;
resetOverflow();
emit("close");
}
};
const { setOverflowHidden, resetOverflow } = useOverflow.useOverflow(containerRef);
vue.onMounted(() => {
if (computedVisible.value) {
mounted.value = true;
setOverflowHidden();
addGlobalKeyDownListener();
}
});
vue.onBeforeUnmount(() => {
resetOverflow();
removeGlobalKeyDownListener();
});
vue.watch(computedVisible, (visible) => {
if (_visible.value !== visible) {
_visible.value = visible;
}
if (visible) {
emit("beforeOpen");
mounted.value = true;
setOverflowHidden();
addGlobalKeyDownListener();
} else {
emit("beforeClose");
removeGlobalKeyDownListener();
}
});
const style = vue.computed(() => {
var _a;
const style2 = {
[props.placement]: 0,
...(_a = props.drawerStyle) != null ? _a : {}
};
if (["right", "left"].includes(props.placement)) {
style2.width = is.isNumber(props.width) ? `${props.width}px` : props.width;
} else {
style2.height = is.isNumber(props.height) ? `${props.height}px` : props.height;
}
return style2;
});
return {
prefixCls,
style,
t,
mounted,
computedVisible,
mergedOkLoading,
zIndex,
handleOk,
handleCancel,
handleOpen,
handleClose,
handleMask,
isFixed,
teleportContainer
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_icon_close = vue.resolveComponent("icon-close");
const _component_icon_hover = vue.resolveComponent("icon-hover");
const _component_arco_button = vue.resolveComponent("arco-button");
const _component_client_only = vue.resolveComponent("client-only");
return vue.openBlock(), vue.createBlock(_component_client_only, null, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.Teleport, {
to: _ctx.teleportContainer,
disabled: !_ctx.renderToBody
}, [
!_ctx.unmountOnClose || _ctx.computedVisible || _ctx.mounted ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
key: 0,
class: `${_ctx.prefixCls}-container`,
style: _ctx.isFixed ? { zIndex: _ctx.zIndex } : { zIndex: "inherit", position: "absolute" }
}, _ctx.$attrs), [
vue.createVNode(vue.Transition, {
name: "fade-drawer",
appear: ""
}, {
default: vue.withCtx(() => [
_ctx.mask ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(`${_ctx.prefixCls}-mask`),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleMask && _ctx.handleMask(...args))
}, null, 2)), [
[vue.vShow, _ctx.computedVisible]
]) : vue.createCommentVNode("v-if", true)
]),
_: 1
}),
vue.createVNode(vue.Transition, {
name: `slide-${_ctx.placement}-drawer`,
appear: "",
onAfterEnter: _ctx.handleOpen,
onAfterLeave: _ctx.handleClose,
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.prefixCls),
style: vue.normalizeStyle(_ctx.style)
}, [
_ctx.header ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(`${_ctx.prefixCls}-header`)
}, [
vue.renderSlot(_ctx.$slots, "header", {}, () => [
_ctx.$slots.title || _ctx.title ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(`${_ctx.prefixCls}-title`)
}, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
])
], 2)) : vue.createCommentVNode("v-if", true),
_ctx.closable ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
tabindex: "-1",
role: "button",
"aria-label": "Close",
class: vue.normalizeClass(`${_ctx.prefixCls}-close-btn`),
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
}, [
vue.createVNode(_component_icon_hover, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_icon_close)
]),
_: 1
})
], 2)) : vue.createCommentVNode("v-if", true)
])
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass([`${_ctx.prefixCls}-body`, _ctx.bodyClass]),
style: vue.normalizeStyle(_ctx.bodyStyle)
}, [
vue.renderSlot(_ctx.$slots, "default")
], 6),
_ctx.footer ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(`${_ctx.prefixCls}-footer`)
}, [
vue.renderSlot(_ctx.$slots, "footer", {}, () => [
!_ctx.hideCancel ? (vue.openBlock(), vue.createBlock(_component_arco_button, vue.mergeProps({ key: 0 }, _ctx.cancelButtonProps, { onClick: _ctx.handleCancel }), {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.cancelText || _ctx.t("drawer.cancelText")), 1)
]),
_: 1
}, 16, ["onClick"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(_component_arco_button, vue.mergeProps({
type: "primary",
loading: _ctx.mergedOkLoading
}, _ctx.okButtonProps, { onClick: _ctx.handleOk }), {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.okText || _ctx.t("drawer.okText")), 1)
]),
_: 1
}, 16, ["loading", "onClick"])
])
], 2)) : vue.createCommentVNode("v-if", true)
], 6), [
[vue.vShow, _ctx.computedVisible]
])
]),
_: 3
}, 8, ["name", "onAfterEnter", "onAfterLeave"])
], 16)), [
[vue.vShow, _ctx.computedVisible || _ctx.mounted]
]) : vue.createCommentVNode("v-if", true)
], 8, ["to", "disabled"]))
]),
_: 3
});
}
var _Drawer = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = _Drawer;