bkui-vue 1.0.3-beta.67.dialog.3 → 1.0.3-beta.67.dialog.5

package/lib/dialog/dialog.css

@@ -86,12 +86,16 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .bk-modal-content {
+  position: relative;
   max-height: 100vh;
   font-size: 0;
 }
 .bk-modal-content div {
   font-size: 12px;
 }
+.bk-modal-footer {
+  position: relative;
+}
 .bk-modal-close {
   position: absolute;
   top: 6px;

package/lib/dialog/dialog.variable.css

@@ -215,12 +215,16 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .bk-modal-content {
+  position: relative;
   max-height: 100vh;
   font-size: 0;
 }
 .bk-modal-content div {
   font-size: 12px;
 }
+.bk-modal-footer {
+  position: relative;
+}
 .bk-modal-close {
   position: absolute;
   top: 6px;

package/lib/dialog/index.js

@@ -942,6 +942,7 @@ function _isSlot(s) {
         "quickClose": props.quickClose,
         "showMask": props.showMask,
         "transfer": props.transfer,
+        "renderDirective": props.renderDirective,
         "left": props.fullscreen ? '0px' : positionData.moveStyle.left,
         "top": props.fullscreen ? '0px' : positionData.moveStyle.top,
         "zIndex": props.zIndex,

package/lib/info-box/index.js

@@ -432,7 +432,7 @@ const shared_namespaceObject = x({ ["withInstall"]: () => __WEBPACK_EXTERNAL_MOD
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["createApp"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createApp, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref });
+const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["createApp"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createApp, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -589,6 +589,7 @@ var genDefaultState = function genDefaultState() {
     title: undefined,
     subTitle: undefined,
     content: undefined,
+    footer: undefined,
     headerAlign: 'center',
     contentAlign: 'center',
     footerAlign: 'center',
@@ -597,7 +598,7 @@ var genDefaultState = function genDefaultState() {
     escClose: false,
     closeIcon: true,
     confirmText: '确定',
-    theme: 'primary',
+    theme: undefined,
     confirmButtonTheme: 'primary',
     cancelText: '',
     beforeClose: function beforeClose() {
@@ -749,6 +750,29 @@ var genDefaultState = function genDefaultState() {
         }
         return state.content;
       };
+      var renderFooter = function renderFooter() {
+        if ((0,isFunction_namespaceObject["default"])(state.footer)) {
+          return state.footer();
+        }
+        if (state.footer) {
+          return state.footer;
+        }
+        return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [state.confirmText && (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
+          "loading": isLoading.value,
+          "theme": state.confirmButtonTheme,
+          "onClick": handleConfirm
+        }, {
+          "default": function _default() {
+            return [state.confirmText];
+          }
+        }), state.cancelText && (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
+          "onClick": handleCancel
+        }, {
+          "default": function _default() {
+            return [state.cancelText];
+          }
+        })]);
+      };
       return (0,external_vue_namespaceObject.createVNode)(modal_namespaceObject["default"], {
         "class": [resolveClassName('infobox'), state["class"]],
         "isShow": isShow.value,
@@ -779,21 +803,7 @@ var genDefaultState = function genDefaultState() {
         footer: function footer() {
           return (0,external_vue_namespaceObject.createVNode)("div", {
             "class": _defineProperty(_defineProperty({}, resolveClassName('infobox-footer'), true), "is-position-".concat(state.footerAlign), state.footerAlign)
-          }, [state.confirmText && (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
-            "loading": isLoading.value,
-            "theme": state.confirmButtonTheme,
-            "onClick": handleConfirm
-          }, {
-            "default": function _default() {
-              return [state.confirmText];
-            }
-          }), state.cancelText && (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
-            "onClick": handleCancel
-          }, {
-            "default": function _default() {
-              return [state.cancelText];
-            }
-          })]);
+          }, [renderFooter()]);
         },
         close: function close() {
           return (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Error, {

package/lib/info-box/info-box.d.ts

@@ -9,6 +9,7 @@ export interface Props {
     title?: string | (() => VNode | string) | VNode;
     subTitle?: string | (() => VNode) | VNode;
     content?: string | (() => VNode) | VNode;
+    footer?: string | (() => VNode) | VNode;
     headerAlign?: 'left' | 'center' | 'right';
     footerAlign?: 'left' | 'center' | 'right';
     contentAlign?: 'left' | 'center' | 'right';

package/lib/modal/index.js

@@ -87,7 +87,7 @@ function _defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["Teleport"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Teleport, ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["useAttrs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useAttrs, ["useSlots"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useSlots, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
+const external_vue_namespaceObject = external_vue_x({ ["Teleport"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Teleport, ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["useAttrs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useAttrs, ["useSlots"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useSlots, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
 ;// CONCATENATED MODULE: external "../config-provider"
 var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var config_provider_y = x => () => x
@@ -130,41 +130,42 @@ var useContentResize = function useContentResize(root, resizeTarget, props) {
     resolveClassName = _usePrefix.resolveClassName;
   var isContentScroll = (0,external_vue_namespaceObject.ref)(false);
   var contentStyles = (0,external_vue_namespaceObject.ref)({});
-  var observer;
-  var handleContentBoxChange = function handleContentBoxChange() {
-    var calcContentScroll = (0,throttle_namespaceObject["default"])(function () {
-      var _root$value$querySele = root.value.querySelector(".".concat(resolveClassName('modal-header'))).getBoundingClientRect(),
-        headerHeight = _root$value$querySele.height;
-      var _root$value$querySele2 = root.value.querySelector(".".concat(resolveClassName('modal-content'), " div")).getBoundingClientRect(),
-        contentHeight = _root$value$querySele2.height;
-      var _root$value$querySele3 = root.value.querySelector(".".concat(resolveClassName('modal-footer'))).getBoundingClientRect(),
-        footerHeight = _root$value$querySele3.height;
-      var windowInnerHeight = window.innerHeight;
-      isContentScroll.value = windowInnerHeight < headerHeight + contentHeight + footerHeight + 20;
-      if (isContentScroll.value || props.fullscreen) {
-        contentStyles.value = {
-          height: "".concat(windowInnerHeight - headerHeight - footerHeight, "px"),
-          overflow: 'auto',
-          'scrollbar-gutter': 'stable'
-        };
-        // fullscreen 时默认为 true
-        isContentScroll.value = true;
-      } else {
-        contentStyles.value = {};
-      }
-    }, 30);
-    observer = new ResizeObserver(function () {
-      calcContentScroll();
-    });
-    observer.observe(resizeTarget.value);
-    calcContentScroll();
-  };
+  var calcContentScroll = (0,throttle_namespaceObject["default"])(function () {
+    if (!props.isShow) {
+      // onMouted 时监听了 window resize事件这个时候 DOM 可能不存在
+      return;
+    }
+    var _root$value$querySele = root.value.querySelector(".".concat(resolveClassName('modal-header'))).getBoundingClientRect(),
+      headerHeight = _root$value$querySele.height;
+    var _root$value$querySele2 = root.value.querySelector(".".concat(resolveClassName('modal-content'), " div")).getBoundingClientRect(),
+      contentHeight = _root$value$querySele2.height;
+    var _root$value$querySele3 = root.value.querySelector(".".concat(resolveClassName('modal-footer'))).getBoundingClientRect(),
+      footerHeight = _root$value$querySele3.height;
+    var windowInnerHeight = window.innerHeight;
+    isContentScroll.value = windowInnerHeight < headerHeight + contentHeight + footerHeight + 20;
+    if (isContentScroll.value || props.fullscreen) {
+      contentStyles.value = {
+        height: "".concat(windowInnerHeight - headerHeight - footerHeight, "px"),
+        overflow: 'auto',
+        'scrollbar-gutter': 'stable'
+      };
+      // fullscreen 时默认为 true
+      isContentScroll.value = true;
+    } else {
+      contentStyles.value = {};
+    }
+  }, 30);
   (0,external_vue_namespaceObject.watch)(function () {
     return props.isShow;
   }, function () {
+    var observer;
     if (props.isShow) {
-      setTimeout(function () {
-        handleContentBoxChange();
+      (0,external_vue_namespaceObject.nextTick)(function () {
+        observer = new ResizeObserver(function () {
+          calcContentScroll();
+        });
+        observer.observe(resizeTarget.value);
+        calcContentScroll();
       });
     } else {
       if (observer) {
@@ -175,6 +176,12 @@ var useContentResize = function useContentResize(root, resizeTarget, props) {
   }, {
     immediate: true
   });
+  (0,external_vue_namespaceObject.onMounted)(function () {
+    window.addEventListener('resize', calcContentScroll);
+  });
+  (0,external_vue_namespaceObject.onBeforeUnmount)(function () {
+    window.removeEventListener('resize', calcContentScroll);
+  });
   return {
     contentStyles: contentStyles,
     isContentScroll: isContentScroll

package/lib/modal/modal.css

@@ -86,12 +86,16 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .bk-modal-content {
+  position: relative;
   max-height: 100vh;
   font-size: 0;
 }
 .bk-modal-content div {
   font-size: 12px;
 }
+.bk-modal-footer {
+  position: relative;
+}
 .bk-modal-close {
   position: absolute;
   top: 6px;

package/lib/modal/modal.less

@@ -23,6 +23,7 @@
 }
 
 .@{bk-prefix}-modal-content {
+  position: relative;
   max-height: 100vh;
   font-size: 0;
 
@@ -30,6 +31,9 @@
     font-size: 12px;
   }
 }
+.@{bk-prefix}-modal-footer {
+  position: relative;
+}
 
 .@{bk-prefix}-modal-close {
   position: absolute;

package/lib/modal/modal.variable.css

@@ -215,12 +215,16 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .bk-modal-content {
+  position: relative;
   max-height: 100vh;
   font-size: 0;
 }
 .bk-modal-content div {
   font-size: 12px;
 }
+.bk-modal-footer {
+  position: relative;
+}
 .bk-modal-close {
   position: absolute;
   top: 6px;

package/lib/sideslider/index.js

@@ -681,6 +681,7 @@ sliderProps.width["default"] = '400';
         "quickClose": props.quickClose,
         "showMask": props.showMask,
         "transfer": props.transfer,
+        "renderDirective": props.renderDirective,
         "zIndex": props.zIndex,
         "onHidden": handleHidden,
         "onShown": handleShown,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "1.0.3-beta.67.dialog.3",
+  "version": "1.0.3-beta.67.dialog.5",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",