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

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

@@ -1,15 +1,25 @@
 import { type ComponentPublicInstance } from 'vue';
-import type { DatePickerPanelType } from './interface';
+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>;
+    hasFooter: import("vue").ComputedRef<boolean>;
+    hasShortcuts: import("vue").ComputedRef<boolean>;
+    hasConfirm: import("vue").ComputedRef<boolean>;
     forceInputRerender: import("vue").Ref<number>;
     internalValue: any;
     localReadonly: import("vue").ComputedRef<any>;
+    ownPickerProps: import("vue").ComputedRef<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;
+    reset: () => void;
+    handleClose: (e?: Event) => boolean;
     handleFocus: (e: any) => void;
     handleBlur: (e: any) => void;
     showClose: import("vue").Ref<boolean>;
@@ -20,5 +30,6 @@ export declare function useCalendar(props: any, slots: any, emit: any): {
     handleClear: () => void;
     panel: import("vue").ComputedRef<DatePickerPanelType>;
     opened: import("vue").ComputedRef<any>;
+    handleInputMouseenter: () => void;
+    handleInputMouseleave: (_e: any) => void;
 };
-export declare function defaultTrigger(props: any, slots: any, emit: any): JSX.Element;

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 () {
@@ -1095,10 +1116,10 @@ var InfoBox = function InfoBox(config) {
           "class": resolveClassName('info-wrapper'),
           headerAlign: 'center',
           footerAlign: 'center',
-          transfer: true,
           fullscreen: false
         }, modalFuncProps.value), {}, {
           isShow: isShow.value,
+          transfer: false,
           onClosed: onClosed,
           onConfirm: onConfirm,
           onHidden: onHidden

package/lib/modal/index.js

@@ -36,7 +36,7 @@ __webpack_require__.d(__webpack_exports__, {
 ;// CONCATENATED MODULE: external "../shared"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const external_shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.bkZIndexManager, ["dialogTypeUnion"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.dialogTypeUnion, ["mask"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.mask, ["renderDirectiveType"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.renderDirectiveType, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstallProps });
+const external_shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.bkZIndexManager, ["dialogTypeUnion"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.dialogTypeUnion, ["isElement"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.isElement, ["mask"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.mask, ["renderDirectiveType"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.renderDirectiveType, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstallProps });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -257,13 +257,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
       resolveClassName = _usePrefix.resolveClassName;
     var resolveClosetModal = function resolveClosetModal() {
       var _refRoot$value;
+      if (enableTeleport.value) {
+        if (typeof teleportTo.value === 'string') {
+          var target = document.querySelector(teleportTo.value);
+          target === null || target === void 0 ? void 0 : target.appendChild(refRoot.value);
+          return;
+        }
+        if ((0,external_shared_namespaceObject.isElement)(teleportTo.value)) {
+          teleportTo.value.appendChild(refRoot.value);
+          return;
+        }
+      }
       var className = ".".concat(resolveClassName('modal-ctx'));
       var parentNode = (_refRoot$value = refRoot.value) === null || _refRoot$value === void 0 || (_refRoot$value = _refRoot$value.parentElement) === null || _refRoot$value === void 0 ? void 0 : _refRoot$value.closest(className);
       if (parentNode) {
         enableTeleport.value = true;
         teleportTo.value = 'body';
-        var target = document.querySelector(teleportTo.value);
-        target === null || target === void 0 ? void 0 : target.appendChild(refRoot.value);
+        var _target = document.querySelector(teleportTo.value);
+        _target === null || _target === void 0 ? void 0 : _target.appendChild(refRoot.value);
       }
     };
     var fullscreenStyle = (0,external_vue_namespaceObject.computed)(function () {
@@ -272,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();
@@ -294,27 +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的延时
-      }, 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.2",
+  "version": "0.0.2-modal-refactor.4",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",