bkui-vue 0.0.2-modal-refactor.3 → 0.0.2-modal-refactor.4

package/lib/date-picker/use-calendar.d.ts

@@ -1,7 +1,6 @@
 import { type ComponentPublicInstance } from 'vue';
 import type { DatePickerPanelType, SelectionModeType } from './interface';
 export declare function useCalendar(props: any, slots: any, emit: any): {
-    resolveClassName: (cls: string) => string;
     longWidthCls: import("vue").ComputedRef<string>;
     fontSizeCls: import("vue").ComputedRef<string>;
     hasHeader: import("vue").ComputedRef<boolean>;
@@ -15,6 +14,7 @@ export declare function useCalendar(props: any, slots: any, emit: any): {
     allowCrossDayProp: import("vue").ComputedRef<any>;
     displayValue: import("vue").ComputedRef<any>;
     selectionMode: import("vue").Ref<SelectionModeType>;
+    focusedDate: any;
     inputRef: any;
     setInputRef: (el: Element | ComponentPublicInstance | null) => void;
     pickerDropdownRef: any;

package/lib/dialog/dialog.css

@@ -95,6 +95,7 @@
 }
 .bk-modal-wrapper .bk-modal-body {
   height: 100%;
+  width: 100%;
   background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

package/lib/dialog/dialog.variable.css

@@ -221,6 +221,7 @@
 }
 .bk-modal-wrapper .bk-modal-body {
   height: 100%;
+  width: 100%;
   background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

package/lib/info-box/index.js

@@ -1005,56 +1005,73 @@ var InfoBox = function InfoBox(config) {
     name: 'DialogConfirm',
     setup: function setup(_props, _ref) {
       var expose = _ref.expose;
-      var onClosed = /*#__PURE__*/function () {
-        var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee() {
-          var _modalFuncProps$value;
-          var _modalFuncProps$value2;
+      var beforeHiddenFn = [];
+      var resolveUserCallbackFnBeforeClose = /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee(userCallbackFn) {
           return regenerator_default().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                if (!(typeof ((_modalFuncProps$value = modalFuncProps.value) === null || _modalFuncProps$value === void 0 ? void 0 : _modalFuncProps$value.onClosed) === 'function')) {
-                  _context.next = 3;
+                if (!(typeof userCallbackFn === 'function')) {
+                  _context.next = 7;
                   break;
                 }
-                _context.next = 3;
-                return (_modalFuncProps$value2 = modalFuncProps.value) === null || _modalFuncProps$value2 === void 0 ? void 0 : _modalFuncProps$value2.onClosed();
-              case 3:
-                isShow.value = false;
+                if (!(userCallbackFn instanceof Promise)) {
+                  _context.next = 6;
+                  break;
+                }
+                _context.next = 4;
+                return userCallbackFn();
               case 4:
+                _context.next = 7;
+                break;
+              case 6:
+                beforeHiddenFn.push(userCallbackFn);
+              case 7:
+                isShow.value = false;
+              case 8:
               case "end":
                 return _context.stop();
             }
           }, _callee);
         }));
-        return function onClosed() {
+        return function resolveUserCallbackFnBeforeClose(_x) {
           return _ref2.apply(this, arguments);
         };
       }();
-      var onConfirm = /*#__PURE__*/function () {
+      var onClosed = /*#__PURE__*/function () {
         var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee2() {
-          var _modalFuncProps$value3;
-          var _modalFuncProps$value4;
+          var _modalFuncProps$value;
           return regenerator_default().wrap(function _callee2$(_context2) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                if (!(typeof ((_modalFuncProps$value3 = modalFuncProps.value) === null || _modalFuncProps$value3 === void 0 ? void 0 : _modalFuncProps$value3.onConfirm) === 'function')) {
-                  _context2.next = 3;
-                  break;
-                }
-                _context2.next = 3;
-                return (_modalFuncProps$value4 = modalFuncProps.value) === null || _modalFuncProps$value4 === void 0 ? void 0 : _modalFuncProps$value4.onConfirm();
-              case 3:
-                isShow.value = false;
-              case 4:
+                resolveUserCallbackFnBeforeClose((_modalFuncProps$value = modalFuncProps.value) === null || _modalFuncProps$value === void 0 ? void 0 : _modalFuncProps$value.onClosed);
+              case 1:
               case "end":
                 return _context2.stop();
             }
           }, _callee2);
         }));
-        return function onConfirm() {
+        return function onClosed() {
           return _ref3.apply(this, arguments);
         };
       }();
+      var onConfirm = /*#__PURE__*/function () {
+        var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee3() {
+          var _modalFuncProps$value2;
+          return regenerator_default().wrap(function _callee3$(_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
+              case 0:
+                resolveUserCallbackFnBeforeClose((_modalFuncProps$value2 = modalFuncProps.value) === null || _modalFuncProps$value2 === void 0 ? void 0 : _modalFuncProps$value2.onConfirm);
+              case 1:
+              case "end":
+                return _context3.stop();
+            }
+          }, _callee3);
+        }));
+        return function onConfirm() {
+          return _ref4.apply(this, arguments);
+        };
+      }();
       function update(newValue) {
         modalFuncProps.value = info_box_objectSpread(info_box_objectSpread({}, modalFuncProps.value), newValue);
       }
@@ -1088,6 +1105,10 @@ var InfoBox = function InfoBox(config) {
         return subTitleBox;
       };
       var onHidden = function onHidden() {
+        beforeHiddenFn.forEach(function (fn) {
+          return fn();
+        });
+        beforeHiddenFn.length = 0;
         container.remove();
       };
       return function () {

package/lib/modal/index.js

@@ -283,16 +283,32 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
         height: "".concat(100, "%")
       };
     });
+    var closeModal = function closeModal() {
+      external_shared_namespaceObject.mask.hideMask({
+        el: refRoot.value,
+        mask: refMask.value,
+        showMask: props.showMask,
+        backgroundColor: backgroundColor.value
+      });
+      closeTimer = setTimeout(function () {
+        // 直接设为false会失去离开的动画效果，这里延迟设置
+        ctx.emit('hidden'); // 为false直接触发hidden事件，在上层有200ms的延时
+        if (enableTeleport.value) {
+          var _refRoot$value2;
+          (_refRoot$value2 = refRoot.value) === null || _refRoot$value2 === void 0 ? void 0 : _refRoot$value2.remove();
+        }
+      }, 250);
+    };
     (0,external_vue_namespaceObject.watch)(function () {
       return props.isShow;
     }, function (val) {
-      visible.value = val;
       if (val) {
         closeTimer && clearTimeout(closeTimer);
         closeTimer = null;
         if (!props.zIndex) {
           zIndex.value = external_shared_namespaceObject.bkZIndexManager.getModalNextIndex();
         }
+        visible.value = true;
         (0,external_vue_namespaceObject.nextTick)(function () {
           ctx.emit('shown');
           resolveClosetModal();
@@ -305,31 +321,29 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
         });
         return;
       }
-      external_shared_namespaceObject.mask.hideMask({
-        el: refRoot.value,
-        mask: refMask.value,
-        showMask: props.showMask,
-        backgroundColor: backgroundColor.value
-      });
-      closeTimer = setTimeout(function () {
-        // 直接设为false会失去离开的动画效果，这里延迟设置
-        ctx.emit('hidden'); // 为false直接触发hidden事件，在上层有200ms的延时
-        if (enableTeleport.value) {
-          var _refRoot$value2;
-          (_refRoot$value2 = refRoot.value) === null || _refRoot$value2 === void 0 ? void 0 : _refRoot$value2.remove();
-        }
-      }, 250);
+      visible.value = false;
+      closeModal();
     }, {
       immediate: true
     });
+    var handleBeforeClose = function handleBeforeClose(callbackFn) {
+      if (typeof props.beforeClose === 'function') {
+        if (props.beforeClose() !== true) {
+          return;
+        }
+      }
+      callbackFn === null || callbackFn === void 0 ? void 0 : callbackFn();
+    };
     var handleClickOutSide = function handleClickOutSide(e) {
       e.stopImmediatePropagation();
       e.stopPropagation();
       e.preventDefault();
       if (props.quickClose) {
-        ctx.emit('close');
-        ctx.emit('quick-close');
-        ctx.emit('quickClose');
+        handleBeforeClose(function () {
+          ctx.emit('close');
+          ctx.emit('quick-close');
+          ctx.emit('quickClose');
+        });
       }
     };
     return {

package/lib/modal/modal.css

@@ -95,6 +95,7 @@
 }
 .bk-modal-wrapper .bk-modal-body {
   height: 100%;
+  width: 100%;
   background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

package/lib/modal/modal.less

@@ -73,6 +73,7 @@
 
   .@{bk-prefix}-modal-body {
     height: 100%;
+    width: 100%;
     background: #fff;
     box-shadow: 0 4px 12px rgba(0,0,0,.15);
   }

package/lib/modal/modal.variable.css

@@ -221,6 +221,7 @@
 }
 .bk-modal-wrapper .bk-modal-body {
   height: 100%;
+  width: 100%;
   background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

package/lib/shared/index.js

@@ -1809,6 +1809,9 @@ var showMask = function showMask(options) {
       referenceParent: activeModal
     }));
   }
+  var mask = options.mask,
+    backgroundColor = options.backgroundColor;
+  mask === null || mask === void 0 ? void 0 : mask.style.setProperty('background-color', backgroundColor);
   loopSetMaskStyle(activeModal, options.showMask);
   activeModal = options.el;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "0.0.2-modal-refactor.3",
+  "version": "0.0.2-modal-refactor.4",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",