@sdata/web-vue 1.12.0 → 1.14.0

package/es/date-picker/range-picker.vue_vue_type_script_lang.js

@@ -11,6 +11,7 @@ import useMergeState from "../_hooks/use-merge-state.js";
 import { useI18n } from "../locale/index.js";
 import Trigger from "../trigger/index.js";
 import { dayjs, getDateValue, getNow, getSortedDayjsArray, initializeDateLocale, isValueChange } from "../_utils/date.js";
+import { useConfigProviderProp } from "../_hooks/use-config-provider-prop.js";
 import IconCalendar from "../icon/icon-calendar/index.js";
 import { getFormattedValue, isValidInputValue } from "../time-picker/utils/index.js";
 import useFormat from "./hooks/use-format.js";
@@ -258,11 +259,54 @@ var range_picker_vue_vue_type_script_lang_default = defineComponent({
 		}
 	},
 	setup(props, { emit, slots }) {
-		const { mode, showTime, format, modelValue, defaultValue, popupVisible, defaultPopupVisible, placeholder, timePickerProps, disabled, disabledDate, disabledTime, locale, pickerValue, defaultPickerValue, valueFormat, size, error, dayStartOfWeek, exchangeTime, previewShortcut, showConfirmBtn, allowClear } = toRefs(props);
+		const { mode, showTime, format, modelValue, defaultValue, popupVisible, defaultPopupVisible, placeholder, timePickerProps, disabled, disabledDate, disabledTime, locale, pickerValue, defaultPickerValue, valueFormat, size, error, dayStartOfWeek, shortcuts, shortcutsPosition, exchangeTime, previewShortcut, showConfirmBtn, allowClear, abbreviation } = toRefs(props);
+		const { mergedValue: mergedDayStartOfWeek } = useConfigProviderProp(dayStartOfWeek, {
+			propNames: ["dayStartOfWeek", "day-start-of-week"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$da;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$da = configProviderCtx.datePicker) === null || _configProviderCtx$da === void 0 ? void 0 : _configProviderCtx$da.dayStartOfWeek;
+			}
+		});
+		const { mergedValue: mergedShortcuts } = useConfigProviderProp(shortcuts, {
+			propNames: ["shortcuts"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$da2;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$da2 = configProviderCtx.datePicker) === null || _configProviderCtx$da2 === void 0 ? void 0 : _configProviderCtx$da2.shortcuts;
+			}
+		});
+		const { mergedValue: mergedShortcutsPosition } = useConfigProviderProp(shortcutsPosition, {
+			propNames: ["shortcutsPosition", "shortcuts-position"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$da3;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$da3 = configProviderCtx.datePicker) === null || _configProviderCtx$da3 === void 0 ? void 0 : _configProviderCtx$da3.shortcutsPosition;
+			}
+		});
+		const { mergedValue: mergedPreviewShortcut } = useConfigProviderProp(previewShortcut, {
+			propNames: ["previewShortcut", "preview-shortcut"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$da4;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$da4 = configProviderCtx.datePicker) === null || _configProviderCtx$da4 === void 0 ? void 0 : _configProviderCtx$da4.previewShortcut;
+			}
+		});
+		const { mergedValue: mergedShowConfirmBtn } = useConfigProviderProp(showConfirmBtn, {
+			propNames: ["showConfirmBtn", "show-confirm-btn"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$da5;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$da5 = configProviderCtx.datePicker) === null || _configProviderCtx$da5 === void 0 ? void 0 : _configProviderCtx$da5.showConfirmBtn;
+			}
+		});
+		const { mergedValue: mergedAbbreviation } = useConfigProviderProp(abbreviation, {
+			propNames: ["abbreviation"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$da6;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$da6 = configProviderCtx.datePicker) === null || _configProviderCtx$da6 === void 0 ? void 0 : _configProviderCtx$da6.abbreviation;
+			}
+		});
 		const { locale: globalLocal } = useI18n();
 		const configCtx = inject(configProviderInjectionKey, void 0);
 		watchEffect(() => {
-			initializeDateLocale(globalLocal.value, dayStartOfWeek.value);
+			var _mergedDayStartOfWeek;
+			initializeDateLocale(globalLocal.value, (_mergedDayStartOfWeek = mergedDayStartOfWeek.value) !== null && _mergedDayStartOfWeek !== void 0 ? _mergedDayStartOfWeek : 0);
 		});
 		const mergedExchangeTime = computed(() => {
 			var _configCtx$exchangeTi;
@@ -392,7 +436,7 @@ var range_picker_vue_vue_type_script_lang_default = defineComponent({
 			disabledDate,
 			disabledTime
 		}));
-		const needConfirm = computed(() => isDateTime.value || showConfirmBtn.value);
+		const needConfirm = computed(() => isDateTime.value || mergedShowConfirmBtn.value);
 		const confirmBtnDisabled = computed(() => needConfirm.value && (!isCompleteRangeValue(forSelectedValue.value) || isDisabledDate(forSelectedValue.value[0], "start") || isDisabledDate(forSelectedValue.value[1], "end")));
 		watch(panelVisible, (newVisible) => {
 			startHeaderMode.value = void 0;
@@ -603,15 +647,15 @@ var range_picker_vue_vue_type_script_lang_default = defineComponent({
 			onInputPressEnter,
 			rangePanelProps: computed(() => _objectSpread2(_objectSpread2({}, pick(props, [
 				"mode",
-				"showTime",
-				"shortcuts",
-				"shortcutsPosition",
-				"dayStartOfWeek",
 				"disabledDate",
 				"disabledTime",
 				"hideTrigger",
-				"abbreviation"
+				"showTime"
 			])), {}, {
+				shortcuts: mergedShortcuts.value,
+				shortcutsPosition: mergedShortcutsPosition.value,
+				dayStartOfWeek: mergedDayStartOfWeek.value,
+				abbreviation: mergedAbbreviation.value,
 				prefixCls,
 				format: parseValueFormat.value,
 				value: panelValue.value,
@@ -629,8 +673,8 @@ var range_picker_vue_vue_type_script_lang_default = defineComponent({
 				onCellClick: onPanelCellClick,
 				onCellMouseEnter: onPanelCellMouseEnter,
 				onShortcutClick: onPanelShortcutClick,
-				onShortcutMouseEnter: previewShortcut.value ? onPanelShortcutMouseEnter : void 0,
-				onShortcutMouseLeave: previewShortcut.value ? onPanelShortcutMouseLeave : void 0,
+				onShortcutMouseEnter: mergedPreviewShortcut.value ? onPanelShortcutMouseEnter : void 0,
+				onShortcutMouseLeave: mergedPreviewShortcut.value ? onPanelShortcutMouseLeave : void 0,
 				onConfirm: onPanelConfirm,
 				onTimePickerSelect,
 				startHeaderMode: startHeaderMode.value,

package/es/descriptions/descriptions.d.ts

@@ -80,7 +80,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     data: DescData[];
-    tableLayout: "fixed" | "auto";
+    tableLayout: "auto" | "fixed";
     column: number | ResponsiveValue;
     layout: "horizontal" | "vertical" | "inline-horizontal" | "inline-vertical";
     bordered: boolean;

package/es/descriptions/index.d.ts

@@ -43,7 +43,7 @@ declare const Descriptions: {
         };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
         data: import("./interface").DescData[];
-        tableLayout: "fixed" | "auto";
+        tableLayout: "auto" | "fixed";
         column: number | import("..").ResponsiveValue;
         layout: "horizontal" | "vertical" | "inline-horizontal" | "inline-vertical";
         bordered: boolean;
@@ -98,7 +98,7 @@ declare const Descriptions: {
         };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         data: import("./interface").DescData[];
-        tableLayout: "fixed" | "auto";
+        tableLayout: "auto" | "fixed";
         column: number | import("..").ResponsiveValue;
         layout: "horizontal" | "vertical" | "inline-horizontal" | "inline-vertical";
         bordered: boolean;
@@ -150,7 +150,7 @@ declare const Descriptions: {
     };
 }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     data: import("./interface").DescData[];
-    tableLayout: "fixed" | "auto";
+    tableLayout: "auto" | "fixed";
     column: number | import("..").ResponsiveValue;
     layout: "horizontal" | "vertical" | "inline-horizontal" | "inline-vertical";
     bordered: boolean;

package/es/drawer/drawer.js

@@ -22,14 +22,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 			name: "fade-drawer",
 			appear: ""
 		}, {
-			default: withCtx(() => [_ctx.mask ? withDirectives((openBlock(), createElementBlock("div", {
+			default: withCtx(() => [_ctx.mergedMask ? withDirectives((openBlock(), createElementBlock("div", {
 				key: 0,
 				class: normalizeClass(`${_ctx.prefixCls}-mask`),
 				onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleMask && _ctx.handleMask(...args))
 			}, null, 2)), [[vShow, _ctx.computedVisible]]) : createCommentVNode("", true)]),
 			_: 1
 		}), createVNode(Transition, {
-			name: `slide-${_ctx.placement}-drawer`,
+			name: `slide-${_ctx.mergedPlacement}-drawer`,
 			appear: "",
 			onAfterEnter: _ctx.handleOpen,
 			onAfterLeave: _ctx.handleClose
@@ -38,13 +38,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 				class: normalizeClass(_ctx.prefixCls),
 				style: normalizeStyle(_ctx.style)
 			}, [
-				_ctx.header ? (openBlock(), createElementBlock("div", {
+				_ctx.mergedHeader ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(`${_ctx.prefixCls}-header`)
 				}, [renderSlot(_ctx.$slots, "header", {}, () => [_ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(`${_ctx.prefixCls}-title`)
-				}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(_ctx.title), 1)])], 2)) : createCommentVNode("", true), _ctx.closable ? (openBlock(), createElementBlock("div", {
+				}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(_ctx.title), 1)])], 2)) : createCommentVNode("", true), _ctx.mergedClosable ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					tabindex: "-1",
 					role: "button",
@@ -59,17 +59,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 					class: normalizeClass([`${_ctx.prefixCls}-body`, _ctx.bodyClass]),
 					style: normalizeStyle(_ctx.bodyStyle)
 				}, [renderSlot(_ctx.$slots, "default")], 6),
-				_ctx.footer ? (openBlock(), createElementBlock("div", {
+				_ctx.mergedFooter ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					class: normalizeClass(`${_ctx.prefixCls}-footer`)
-				}, [renderSlot(_ctx.$slots, "footer", {}, () => [!_ctx.hideCancel ? (openBlock(), createBlock(_component_sd_button, mergeProps({ key: 0 }, _ctx.cancelButtonProps, { onClick: _ctx.handleCancel }), {
-					default: withCtx(() => [createTextVNode(toDisplayString(_ctx.cancelText || _ctx.t("drawer.cancelText")), 1)]),
+				}, [renderSlot(_ctx.$slots, "footer", {}, () => [!_ctx.mergedHideCancel ? (openBlock(), createBlock(_component_sd_button, mergeProps({ key: 0 }, _ctx.mergedCancelButtonProps, { onClick: _ctx.handleCancel }), {
+					default: withCtx(() => [createTextVNode(toDisplayString(_ctx.mergedCancelText || _ctx.t("drawer.cancelText")), 1)]),
 					_: 1
 				}, 16, ["onClick"])) : createCommentVNode("", true), createVNode(_component_sd_button, mergeProps({
 					type: "primary",
 					loading: _ctx.mergedOkLoading
-				}, _ctx.okButtonProps, { onClick: _ctx.handleOk }), {
-					default: withCtx(() => [createTextVNode(toDisplayString(_ctx.okText || _ctx.t("drawer.okText")), 1)]),
+				}, _ctx.mergedOkButtonProps, { onClick: _ctx.handleOk }), {
+					default: withCtx(() => [createTextVNode(toDisplayString(_ctx.mergedOkText || _ctx.t("drawer.okText")), 1)]),
 					_: 1
 				}, 16, ["loading", "onClick"])])], 2)) : createCommentVNode("", true)
 			], 6), [[vShow, _ctx.computedVisible]])]),

package/es/drawer/drawer.vue.d.ts

@@ -100,6 +100,16 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     t: (key: string, ...args: any[]) => string;
     mounted: import("vue").Ref<boolean, boolean>;
     computedVisible: import("vue").ComputedRef<boolean>;
+    mergedMask: import("vue").ComputedRef<boolean | undefined>;
+    mergedPlacement: import("vue").ComputedRef<"top" | "bottom" | "left" | "right" | undefined>;
+    mergedClosable: import("vue").ComputedRef<boolean | undefined>;
+    mergedHeader: import("vue").ComputedRef<boolean | undefined>;
+    mergedFooter: import("vue").ComputedRef<boolean | undefined>;
+    mergedHideCancel: import("vue").ComputedRef<boolean | undefined>;
+    mergedOkText: import("vue").ComputedRef<string | undefined>;
+    mergedCancelText: import("vue").ComputedRef<string | undefined>;
+    mergedOkButtonProps: import("vue").ComputedRef<ButtonProps | undefined>;
+    mergedCancelButtonProps: import("vue").ComputedRef<ButtonProps | undefined>;
     mergedOkLoading: import("vue").ComputedRef<boolean>;
     zIndex: Readonly<import("vue").Ref<number, number>>;
     handleOk: (e: Event) => Promise<void>;
@@ -213,11 +223,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onBeforeOpen?: (() => any) | undefined;
     onBeforeClose?: (() => any) | undefined;
 }>, {
+    visible: boolean;
     footer: boolean;
     header: boolean;
     mask: boolean;
     popupContainer: string | HTMLElement;
-    visible: boolean;
     unmountOnClose: boolean;
     defaultVisible: boolean;
     placement: "top" | "bottom" | "left" | "right";
@@ -704,7 +714,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             default: boolean;
         };
     }>> & Readonly<{}>, {
-        size: "mini" | "small" | "medium" | "large";
+        size: "small" | "mini" | "medium" | "large";
         disabled: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     IconClose: {

package/es/drawer/drawer.vue_vue_type_script_lang.js

@@ -11,6 +11,7 @@ import { useI18n } from "../locale/index.js";
 import client_only_default from "../_components/client-only.js";
 import usePopupManager from "../_hooks/use-popup-manager.js";
 import { useTeleportContainer } from "../_hooks/use-teleport-container.js";
+import { useConfigProviderProp } from "../_hooks/use-config-provider-prop.js";
 import { useOverflow } from "../_hooks/use-overflow.js";
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
 //#region components/drawer/drawer.vue?vue&type=script&lang.ts
@@ -276,9 +277,107 @@ var drawer_vue_vue_type_script_lang_default = defineComponent({
 	* @version 2.33.0
 	*/
 	setup(props, { emit }) {
-		const { popupContainer } = toRefs(props);
+		const { popupContainer, placement, mask, maskClosable, escToClose, closable, header, footer, hideCancel, okText, cancelText, okButtonProps, cancelButtonProps, width, height } = toRefs(props);
 		const prefixCls = getPrefixCls("drawer");
 		const { t } = useI18n();
+		const { mergedValue: mergedPlacement } = useConfigProviderProp(placement, {
+			propNames: ["placement"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr = configProviderCtx.drawer) === null || _configProviderCtx$dr === void 0 ? void 0 : _configProviderCtx$dr.placement;
+			}
+		});
+		const { mergedValue: mergedMask } = useConfigProviderProp(mask, {
+			propNames: ["mask"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr2;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr2 = configProviderCtx.drawer) === null || _configProviderCtx$dr2 === void 0 ? void 0 : _configProviderCtx$dr2.mask;
+			}
+		});
+		const { mergedValue: mergedMaskClosable } = useConfigProviderProp(maskClosable, {
+			propNames: ["maskClosable", "mask-closable"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr3;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr3 = configProviderCtx.drawer) === null || _configProviderCtx$dr3 === void 0 ? void 0 : _configProviderCtx$dr3.maskClosable;
+			}
+		});
+		const { mergedValue: mergedEscToClose } = useConfigProviderProp(escToClose, {
+			propNames: ["escToClose", "esc-to-close"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr4;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr4 = configProviderCtx.drawer) === null || _configProviderCtx$dr4 === void 0 ? void 0 : _configProviderCtx$dr4.escToClose;
+			}
+		});
+		const { mergedValue: mergedClosable } = useConfigProviderProp(closable, {
+			propNames: ["closable"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr5;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr5 = configProviderCtx.drawer) === null || _configProviderCtx$dr5 === void 0 ? void 0 : _configProviderCtx$dr5.closable;
+			}
+		});
+		const { mergedValue: mergedHeader } = useConfigProviderProp(header, {
+			propNames: ["header"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr6;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr6 = configProviderCtx.drawer) === null || _configProviderCtx$dr6 === void 0 ? void 0 : _configProviderCtx$dr6.header;
+			}
+		});
+		const { mergedValue: mergedFooter } = useConfigProviderProp(footer, {
+			propNames: ["footer"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr7;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr7 = configProviderCtx.drawer) === null || _configProviderCtx$dr7 === void 0 ? void 0 : _configProviderCtx$dr7.footer;
+			}
+		});
+		const { mergedValue: mergedHideCancel } = useConfigProviderProp(hideCancel, {
+			propNames: ["hideCancel", "hide-cancel"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr8;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr8 = configProviderCtx.drawer) === null || _configProviderCtx$dr8 === void 0 ? void 0 : _configProviderCtx$dr8.hideCancel;
+			}
+		});
+		const { mergedValue: mergedOkText } = useConfigProviderProp(okText, {
+			propNames: ["okText", "ok-text"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr9;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr9 = configProviderCtx.drawer) === null || _configProviderCtx$dr9 === void 0 ? void 0 : _configProviderCtx$dr9.okText;
+			}
+		});
+		const { mergedValue: mergedCancelText } = useConfigProviderProp(cancelText, {
+			propNames: ["cancelText", "cancel-text"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr10;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr10 = configProviderCtx.drawer) === null || _configProviderCtx$dr10 === void 0 ? void 0 : _configProviderCtx$dr10.cancelText;
+			}
+		});
+		const { mergedValue: mergedOkButtonProps } = useConfigProviderProp(okButtonProps, {
+			propNames: ["okButtonProps", "ok-button-props"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr11;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr11 = configProviderCtx.drawer) === null || _configProviderCtx$dr11 === void 0 ? void 0 : _configProviderCtx$dr11.okButtonProps;
+			}
+		});
+		const { mergedValue: mergedCancelButtonProps } = useConfigProviderProp(cancelButtonProps, {
+			propNames: ["cancelButtonProps", "cancel-button-props"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr12;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr12 = configProviderCtx.drawer) === null || _configProviderCtx$dr12 === void 0 ? void 0 : _configProviderCtx$dr12.cancelButtonProps;
+			}
+		});
+		const { mergedValue: mergedWidth } = useConfigProviderProp(width, {
+			propNames: ["width"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr13;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr13 = configProviderCtx.drawer) === null || _configProviderCtx$dr13 === void 0 ? void 0 : _configProviderCtx$dr13.width;
+			}
+		});
+		const { mergedValue: mergedHeight } = useConfigProviderProp(height, {
+			propNames: ["height"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$dr14;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$dr14 = configProviderCtx.drawer) === null || _configProviderCtx$dr14 === void 0 ? void 0 : _configProviderCtx$dr14.height;
+			}
+		});
 		const _visible = ref(props.defaultVisible);
 		const computedVisible = computed(() => {
 			var _props$visible;
@@ -286,7 +385,7 @@ var drawer_vue_vue_type_script_lang_default = defineComponent({
 		});
 		const _okLoading = ref(false);
 		const mergedOkLoading = computed(() => props.okLoading || _okLoading.value);
-		const classNames = computed(() => [`${prefixCls}-container`, { [`${prefixCls}-penetrable`]: !props.mask }]);
+		const classNames = computed(() => [`${prefixCls}-container`, { [`${prefixCls}-penetrable`]: !mergedMask.value }]);
 		const { teleportContainer, containerRef } = useTeleportContainer({
 			popupContainer,
 			visible: computedVisible
@@ -294,10 +393,10 @@ var drawer_vue_vue_type_script_lang_default = defineComponent({
 		const mounted = ref(computedVisible.value);
 		let globalKeyDownListener = false;
 		const handleGlobalKeyDown = (ev) => {
-			if (props.escToClose && ev.key === KEYBOARD_KEY.ESC && isLastDialog()) handleCancel(ev);
+			if (mergedEscToClose.value && ev.key === KEYBOARD_KEY.ESC && isLastDialog()) handleCancel(ev);
 		};
 		const addGlobalKeyDownListener = () => {
-			if (props.escToClose && !globalKeyDownListener) {
+			if (mergedEscToClose.value && !globalKeyDownListener) {
 				globalKeyDownListener = true;
 				on(document.documentElement, "keydown", handleGlobalKeyDown);
 			}
@@ -364,7 +463,7 @@ var drawer_vue_vue_type_script_lang_default = defineComponent({
 			}
 		};
 		const handleMask = (e) => {
-			if (props.maskClosable) handleCancel(e);
+			if (mergedMaskClosable.value) handleCancel(e);
 		};
 		const handleOpen = () => {
 			if (computedVisible.value) emit("open");
@@ -381,7 +480,7 @@ var drawer_vue_vue_type_script_lang_default = defineComponent({
 			if (computedVisible.value) {
 				mounted.value = true;
 				setOverflowHidden();
-				addGlobalKeyDownListener();
+				if (mergedEscToClose.value) addGlobalKeyDownListener();
 			}
 		});
 		onBeforeUnmount(() => {
@@ -404,14 +503,24 @@ var drawer_vue_vue_type_script_lang_default = defineComponent({
 			prefixCls,
 			classNames,
 			style: computed(() => {
-				const style = _objectSpread2({ [props.placement]: 0 }, props.drawerStyle);
-				if (["right", "left"].includes(props.placement)) style.width = isNumber(props.width) ? `${props.width}px` : props.width;
-				else style.height = isNumber(props.height) ? `${props.height}px` : props.height;
+				const style = _objectSpread2({ [mergedPlacement.value]: 0 }, props.drawerStyle);
+				if (["right", "left"].includes(mergedPlacement.value)) style.width = isNumber(mergedWidth.value) ? `${mergedWidth.value}px` : mergedWidth.value;
+				else style.height = isNumber(mergedHeight.value) ? `${mergedHeight.value}px` : mergedHeight.value;
 				return style;
 			}),
 			t,
 			mounted,
 			computedVisible,
+			mergedMask,
+			mergedPlacement,
+			mergedClosable,
+			mergedHeader,
+			mergedFooter,
+			mergedHideCancel,
+			mergedOkText,
+			mergedCancelText,
+			mergedOkButtonProps,
+			mergedCancelButtonProps,
 			mergedOkLoading,
 			zIndex,
 			handleOk,

package/es/drawer/index.d.ts

@@ -107,6 +107,16 @@ declare const Drawer: {
         t: (key: string, ...args: any[]) => string;
         mounted: import("vue").Ref<boolean, boolean>;
         computedVisible: import("vue").ComputedRef<boolean>;
+        mergedMask: import("vue").ComputedRef<boolean | undefined>;
+        mergedPlacement: import("vue").ComputedRef<"top" | "bottom" | "left" | "right" | undefined>;
+        mergedClosable: import("vue").ComputedRef<boolean | undefined>;
+        mergedHeader: import("vue").ComputedRef<boolean | undefined>;
+        mergedFooter: import("vue").ComputedRef<boolean | undefined>;
+        mergedHideCancel: import("vue").ComputedRef<boolean | undefined>;
+        mergedOkText: import("vue").ComputedRef<string | undefined>;
+        mergedCancelText: import("vue").ComputedRef<string | undefined>;
+        mergedOkButtonProps: import("vue").ComputedRef<import("..").ButtonProps | undefined>;
+        mergedCancelButtonProps: import("vue").ComputedRef<import("..").ButtonProps | undefined>;
         mergedOkLoading: import("vue").ComputedRef<boolean>;
         zIndex: Readonly<import("vue").Ref<number, number>>;
         handleOk: (e: Event) => Promise<void>;
@@ -125,11 +135,11 @@ declare const Drawer: {
         beforeOpen: () => true;
         beforeClose: () => true;
     }, import("vue").PublicProps, {
+        visible: boolean;
         footer: boolean;
         header: boolean;
         mask: boolean;
         popupContainer: string | HTMLElement;
-        visible: boolean;
         unmountOnClose: boolean;
         defaultVisible: boolean;
         placement: "top" | "bottom" | "left" | "right";
@@ -616,7 +626,7 @@ declare const Drawer: {
                 default: boolean;
             };
         }>> & Readonly<{}>, {
-            size: "mini" | "small" | "medium" | "large";
+            size: "small" | "mini" | "medium" | "large";
             disabled: boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         IconClose: {
@@ -851,6 +861,16 @@ declare const Drawer: {
         t: (key: string, ...args: any[]) => string;
         mounted: import("vue").Ref<boolean, boolean>;
         computedVisible: import("vue").ComputedRef<boolean>;
+        mergedMask: import("vue").ComputedRef<boolean | undefined>;
+        mergedPlacement: import("vue").ComputedRef<"top" | "bottom" | "left" | "right" | undefined>;
+        mergedClosable: import("vue").ComputedRef<boolean | undefined>;
+        mergedHeader: import("vue").ComputedRef<boolean | undefined>;
+        mergedFooter: import("vue").ComputedRef<boolean | undefined>;
+        mergedHideCancel: import("vue").ComputedRef<boolean | undefined>;
+        mergedOkText: import("vue").ComputedRef<string | undefined>;
+        mergedCancelText: import("vue").ComputedRef<string | undefined>;
+        mergedOkButtonProps: import("vue").ComputedRef<import("..").ButtonProps | undefined>;
+        mergedCancelButtonProps: import("vue").ComputedRef<import("..").ButtonProps | undefined>;
         mergedOkLoading: import("vue").ComputedRef<boolean>;
         zIndex: Readonly<import("vue").Ref<number, number>>;
         handleOk: (e: Event) => Promise<void>;
@@ -861,11 +881,11 @@ declare const Drawer: {
         isFixed: import("vue").ComputedRef<boolean>;
         teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
     }, {}, {}, {}, {
+        visible: boolean;
         footer: boolean;
         header: boolean;
         mask: boolean;
         popupContainer: string | HTMLElement;
-        visible: boolean;
         unmountOnClose: boolean;
         defaultVisible: boolean;
         placement: "top" | "bottom" | "left" | "right";
@@ -985,6 +1005,16 @@ declare const Drawer: {
     t: (key: string, ...args: any[]) => string;
     mounted: import("vue").Ref<boolean, boolean>;
     computedVisible: import("vue").ComputedRef<boolean>;
+    mergedMask: import("vue").ComputedRef<boolean | undefined>;
+    mergedPlacement: import("vue").ComputedRef<"top" | "bottom" | "left" | "right" | undefined>;
+    mergedClosable: import("vue").ComputedRef<boolean | undefined>;
+    mergedHeader: import("vue").ComputedRef<boolean | undefined>;
+    mergedFooter: import("vue").ComputedRef<boolean | undefined>;
+    mergedHideCancel: import("vue").ComputedRef<boolean | undefined>;
+    mergedOkText: import("vue").ComputedRef<string | undefined>;
+    mergedCancelText: import("vue").ComputedRef<string | undefined>;
+    mergedOkButtonProps: import("vue").ComputedRef<import("..").ButtonProps | undefined>;
+    mergedCancelButtonProps: import("vue").ComputedRef<import("..").ButtonProps | undefined>;
     mergedOkLoading: import("vue").ComputedRef<boolean>;
     zIndex: Readonly<import("vue").Ref<number, number>>;
     handleOk: (e: Event) => Promise<void>;
@@ -1003,11 +1033,11 @@ declare const Drawer: {
     beforeOpen: () => true;
     beforeClose: () => true;
 }, string, {
+    visible: boolean;
     footer: boolean;
     header: boolean;
     mask: boolean;
     popupContainer: string | HTMLElement;
-    visible: boolean;
     unmountOnClose: boolean;
     defaultVisible: boolean;
     placement: "top" | "bottom" | "left" | "right";
@@ -1494,7 +1524,7 @@ declare const Drawer: {
             default: boolean;
         };
     }>> & Readonly<{}>, {
-        size: "mini" | "small" | "medium" | "large";
+        size: "small" | "mini" | "medium" | "large";
         disabled: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     IconClose: {