@sdata/web-vue 1.13.0 → 1.14.0

package/es/modal/modal.vue_vue_type_script_lang.js

@@ -15,6 +15,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 { useDraggable } from "./hooks/use-draggable.js";
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
@@ -339,11 +340,123 @@ var modal_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 	* @slot footer
 	*/
 	setup(props, { emit }) {
-		const { fullscreen, popupContainer, alignCenter } = toRefs(props);
+		const { fullscreen, popupContainer, alignCenter, mask, maskClosable, maskStyle, closable, titleAlign, top, footer, hideCancel, escToClose, draggable, okText, cancelText, okButtonProps, cancelButtonProps, width } = toRefs(props);
 		const prefixCls = getPrefixCls("modal");
 		const { t } = useI18n();
 		const wrapperRef = ref();
 		const modalRef = ref();
+		const { mergedValue: mergedMask } = useConfigProviderProp(mask, {
+			propNames: ["mask"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo = configProviderCtx.modal) === null || _configProviderCtx$mo === void 0 ? void 0 : _configProviderCtx$mo.mask;
+			}
+		});
+		const { mergedValue: mergedMaskClosable } = useConfigProviderProp(maskClosable, {
+			propNames: ["maskClosable", "mask-closable"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo2;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo2 = configProviderCtx.modal) === null || _configProviderCtx$mo2 === void 0 ? void 0 : _configProviderCtx$mo2.maskClosable;
+			}
+		});
+		const { mergedValue: mergedMaskStyle } = useConfigProviderProp(maskStyle, {
+			propNames: ["maskStyle", "mask-style"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo3;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo3 = configProviderCtx.modal) === null || _configProviderCtx$mo3 === void 0 ? void 0 : _configProviderCtx$mo3.maskStyle;
+			}
+		});
+		const { mergedValue: mergedAlignCenter } = useConfigProviderProp(alignCenter, {
+			propNames: ["alignCenter", "align-center"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo4;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo4 = configProviderCtx.modal) === null || _configProviderCtx$mo4 === void 0 ? void 0 : _configProviderCtx$mo4.alignCenter;
+			}
+		});
+		const { mergedValue: mergedEscToClose } = useConfigProviderProp(escToClose, {
+			propNames: ["escToClose", "esc-to-close"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo5;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo5 = configProviderCtx.modal) === null || _configProviderCtx$mo5 === void 0 ? void 0 : _configProviderCtx$mo5.escToClose;
+			}
+		});
+		const { mergedValue: mergedDraggableBase } = useConfigProviderProp(draggable, {
+			propNames: ["draggable"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo6;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo6 = configProviderCtx.modal) === null || _configProviderCtx$mo6 === void 0 ? void 0 : _configProviderCtx$mo6.draggable;
+			}
+		});
+		const { mergedValue: mergedClosable } = useConfigProviderProp(closable, {
+			propNames: ["closable"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo7;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo7 = configProviderCtx.modal) === null || _configProviderCtx$mo7 === void 0 ? void 0 : _configProviderCtx$mo7.closable;
+			}
+		});
+		const { mergedValue: mergedTitleAlign } = useConfigProviderProp(titleAlign, {
+			propNames: ["titleAlign", "title-align"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo8;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo8 = configProviderCtx.modal) === null || _configProviderCtx$mo8 === void 0 ? void 0 : _configProviderCtx$mo8.titleAlign;
+			}
+		});
+		const { mergedValue: mergedTop } = useConfigProviderProp(top, {
+			propNames: ["top"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo9;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo9 = configProviderCtx.modal) === null || _configProviderCtx$mo9 === void 0 ? void 0 : _configProviderCtx$mo9.top;
+			}
+		});
+		const { mergedValue: mergedFooter } = useConfigProviderProp(footer, {
+			propNames: ["footer"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo10;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo10 = configProviderCtx.modal) === null || _configProviderCtx$mo10 === void 0 ? void 0 : _configProviderCtx$mo10.footer;
+			}
+		});
+		const { mergedValue: mergedHideCancel } = useConfigProviderProp(hideCancel, {
+			propNames: ["hideCancel", "hide-cancel"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo11;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo11 = configProviderCtx.modal) === null || _configProviderCtx$mo11 === void 0 ? void 0 : _configProviderCtx$mo11.hideCancel;
+			}
+		});
+		const { mergedValue: mergedOkText } = useConfigProviderProp(okText, {
+			propNames: ["okText", "ok-text"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo12;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo12 = configProviderCtx.modal) === null || _configProviderCtx$mo12 === void 0 ? void 0 : _configProviderCtx$mo12.okText;
+			}
+		});
+		const { mergedValue: mergedCancelText } = useConfigProviderProp(cancelText, {
+			propNames: ["cancelText", "cancel-text"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo13;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo13 = configProviderCtx.modal) === null || _configProviderCtx$mo13 === void 0 ? void 0 : _configProviderCtx$mo13.cancelText;
+			}
+		});
+		const { mergedValue: mergedOkButtonProps } = useConfigProviderProp(okButtonProps, {
+			propNames: ["okButtonProps", "ok-button-props"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo14;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo14 = configProviderCtx.modal) === null || _configProviderCtx$mo14 === void 0 ? void 0 : _configProviderCtx$mo14.okButtonProps;
+			}
+		});
+		const { mergedValue: mergedCancelButtonProps } = useConfigProviderProp(cancelButtonProps, {
+			propNames: ["cancelButtonProps", "cancel-button-props"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo15;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo15 = configProviderCtx.modal) === null || _configProviderCtx$mo15 === void 0 ? void 0 : _configProviderCtx$mo15.cancelButtonProps;
+			}
+		});
+		const { mergedValue: mergedWidth } = useConfigProviderProp(width, {
+			propNames: ["width"],
+			getGlobalValue: (configProviderCtx) => {
+				var _configProviderCtx$mo16;
+				return configProviderCtx === null || configProviderCtx === void 0 || (_configProviderCtx$mo16 = configProviderCtx.modal) === null || _configProviderCtx$mo16 === void 0 ? void 0 : _configProviderCtx$mo16.width;
+			}
+		});
 		const _visible = ref(props.defaultVisible);
 		const computedVisible = computed(() => {
 			var _props$visible;
@@ -351,21 +464,22 @@ var modal_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 		});
 		const _okLoading = ref(false);
 		const mergedOkLoading = computed(() => props.okLoading || _okLoading.value);
-		const mergedDraggable = computed(() => props.draggable && !props.fullscreen);
+		const mergedDraggable = computed(() => Boolean(mergedDraggableBase.value) && !props.fullscreen);
+		const mergedAlignCenterBoolean = computed(() => Boolean(mergedAlignCenter.value));
 		const { teleportContainer, containerRef } = useTeleportContainer({
 			popupContainer,
 			visible: computedVisible
 		});
 		const mounted = ref(computedVisible.value);
-		const okDisplayText = computed(() => props.okText || t("modal.okText"));
-		const cancelDisplayText = computed(() => props.cancelText || t("modal.cancelText"));
+		const okDisplayText = computed(() => mergedOkText.value || t("modal.okText"));
+		const cancelDisplayText = computed(() => mergedCancelText.value || t("modal.cancelText"));
 		const { zIndex, isLastDialog } = usePopupManager("dialog", { visible: computedVisible });
 		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);
 			}
@@ -379,7 +493,7 @@ var modal_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 			wrapperRef,
 			modalRef,
 			draggable: mergedDraggable,
-			alignCenter
+			alignCenter: mergedAlignCenterBoolean
 		});
 		const close = () => {
 			promiseNumber++;
@@ -436,7 +550,7 @@ var modal_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 			if (ev.target === wrapperRef.value) currentIsMask.value = true;
 		};
 		const handleMaskClick = (e) => {
-			if (props.mask && props.maskClosable && currentIsMask.value) handleCancel(e);
+			if (mergedMask.value && mergedMaskClosable.value && currentIsMask.value) handleCancel(e);
 		};
 		const handleOpen = () => {
 			if (computedVisible.value) {
@@ -457,7 +571,7 @@ var modal_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 			containerRef.value = getElement(props.popupContainer);
 			if (computedVisible.value) {
 				setOverflowHidden();
-				if (props.escToClose) addGlobalKeyDownListener();
+				if (mergedEscToClose.value) addGlobalKeyDownListener();
 			}
 		});
 		onBeforeUnmount(() => {
@@ -481,7 +595,7 @@ var modal_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 			if (position.value) position.value = void 0;
 		});
 		const wrapperCls = computed(() => [`${prefixCls}-wrapper`, {
-			[`${prefixCls}-wrapper-align-center`]: props.alignCenter && !props.fullscreen,
+			[`${prefixCls}-wrapper-align-center`]: mergedAlignCenterBoolean.value && !props.fullscreen,
 			[`${prefixCls}-wrapper-moved`]: Boolean(position.value)
 		}]);
 		const modalCls = computed(() => [
@@ -501,13 +615,21 @@ var modal_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 			wrapperRef,
 			mergedModalStyle: computed(() => {
 				const style = _objectSpread2({}, props.modalStyle);
-				if (props.width && !props.fullscreen) style.width = isNumber(props.width) ? `${props.width}px` : props.width;
-				if (!props.alignCenter && props.top) style.top = isNumber(props.top) ? `${props.top}px` : props.top;
+				if (mergedWidth.value && !props.fullscreen) style.width = isNumber(mergedWidth.value) ? `${mergedWidth.value}px` : mergedWidth.value;
+				if (!mergedAlignCenterBoolean.value && mergedTop.value) style.top = isNumber(mergedTop.value) ? `${mergedTop.value}px` : mergedTop.value;
 				if (position.value) style.transform = `translate(${position.value[0]}px, ${position.value[1]}px)`;
 				return style;
 			}),
 			okDisplayText,
 			cancelDisplayText,
+			mergedMask,
+			mergedMaskStyle,
+			mergedClosable,
+			mergedTitleAlign,
+			mergedFooter,
+			mergedHideCancel,
+			mergedOkButtonProps,
+			mergedCancelButtonProps,
 			zIndex,
 			handleOk,
 			handleCancel,

package/json/vetur-attributes.json

@@ -646,6 +646,15 @@
     "description": "View starts from the right and ends on the left",
     "type": "boolean"
   },
+  "sd-config-provider/date-picker": {
+    "description": "Default config for DatePicker"
+  },
+  "sd-config-provider/modal": {
+    "description": "Default config for Modal"
+  },
+  "sd-config-provider/drawer": {
+    "description": "Default config for Drawer"
+  },
   "sd-config-provider/theme": {
     "description": "Runtime theme configuration object"
   },

package/json/vetur-tags.json

@@ -290,6 +290,9 @@
       "scroll-to-close",
       "exchange-time",
       "rtl",
+      "date-picker",
+      "modal",
+      "drawer",
       "theme",
       "theme-mode"
     ]

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -1734,6 +1734,30 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "date-picker",
+              "description": "Default config for DatePicker",
+              "value": {
+                "type": "ConfigProviderDatePicker",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "modal",
+              "description": "Default config for Modal",
+              "value": {
+                "type": "ConfigProviderModal",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "drawer",
+              "description": "Default config for Drawer",
+              "value": {
+                "type": "ConfigProviderDrawer",
+                "kind": "expression"
+              }
+            },
             {
               "name": "theme",
               "description": "Runtime theme configuration object",
@@ -1917,7 +1941,7 @@
               "name": "model-value",
               "description": "Value",
               "value": {
-                "type": "(Date | string | number)[]",
+                "type": "CalendarValue[]",
                 "kind": "expression"
               }
             },
@@ -1925,7 +1949,7 @@
               "name": "default-value",
               "description": "Default value",
               "value": {
-                "type": "(Date | string | number)[]",
+                "type": "CalendarValue[]",
                 "kind": "expression"
               }
             },
@@ -1933,7 +1957,7 @@
               "name": "picker-value",
               "description": "The date displayed in the default panel",
               "value": {
-                "type": "(Date | string | number)[]",
+                "type": "CalendarValue[]",
                 "kind": "expression"
               }
             },
@@ -1941,7 +1965,7 @@
               "name": "default-picker-value",
               "description": "Date displayed on the panel",
               "value": {
-                "type": "(Date | string | number)[]",
+                "type": "CalendarValue[]",
                 "kind": "expression"
               }
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",