bkui-vue 1.0.3-beta.51 → 1.0.3-beta.53

package/lib/dialog/dialog.css

@@ -58,6 +58,7 @@
 }
 .bk-modal-content {
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 .bk-modal-close {
   position: absolute;

package/lib/dialog/dialog.variable.css

@@ -187,6 +187,7 @@
 }
 .bk-modal-content {
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 .bk-modal-close {
   position: absolute;

package/lib/modal/hooks.d.ts

@@ -1,6 +1,6 @@
 import { type Ref } from 'vue';
 import type { ModalProps } from './modal';
-export declare const useContentResize: (root: Ref<HTMLElement>, props: ModalProps) => {
+export declare const useContentResize: (root: Ref<HTMLElement>, resizeTarget: Ref<HTMLElement>, props: ModalProps) => {
     contentStyles: Ref<{}>;
     isContentScroll: Ref<boolean>;
 };

package/lib/modal/index.d.ts

@@ -121,6 +121,7 @@ declare const BkModal: {
         refMask: import("vue").Ref<HTMLElement>;
         resolveClassName: (cls: string) => string;
         close: () => void;
+        resizeTargetRef: import("vue").Ref<HTMLElement>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quickClose" | "quick-close")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         isShow: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
@@ -380,6 +381,7 @@ declare const BkModal: {
         refMask: import("vue").Ref<HTMLElement>;
         resolveClassName: (cls: string) => string;
         close: () => void;
+        resizeTargetRef: import("vue").Ref<HTMLElement>;
     }, {}, {}, {}, {
         title: string;
         width: string | number;
@@ -528,6 +530,7 @@ declare const BkModal: {
     refMask: import("vue").Ref<HTMLElement>;
     resolveClassName: (cls: string) => string;
     close: () => void;
+    resizeTargetRef: import("vue").Ref<HTMLElement>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quickClose" | "quick-close")[], "close" | "hidden" | "shown" | "quickClose" | "quick-close", {
     title: string;
     width: string | number;

package/lib/modal/index.js

@@ -547,7 +547,7 @@ const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTER
 
 
 
-var useContentResize = function useContentResize(root, props) {
+var useContentResize = function useContentResize(root, resizeTarget, props) {
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
   var isContentScroll = (0,external_vue_namespaceObject.ref)(false);
@@ -555,7 +555,6 @@ var useContentResize = function useContentResize(root, props) {
   var observer;
   var handleContentBoxChange = function handleContentBoxChange() {
     var calcContentScroll = (0,throttle_namespaceObject["default"])(function () {
-      console.log('from model content size change');
       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'))).getBoundingClientRect(),
@@ -566,21 +565,16 @@ var useContentResize = function useContentResize(root, props) {
       isContentScroll.value = windowInnerHeight < headerHeight + contentHeight + footerHeight;
       if (isContentScroll.value || props.fullscreen) {
         contentStyles.value = {
-          height: "".concat(windowInnerHeight - headerHeight - footerHeight, "px"),
-          overflow: 'scroll'
+          height: "".concat(windowInnerHeight - headerHeight - footerHeight, "px")
         };
       } else {
         contentStyles.value = {};
       }
     }, 100);
-    observer = new MutationObserver(function () {
+    observer = new ResizeObserver(function () {
       calcContentScroll();
     });
-    observer.observe(root.value.querySelector(".".concat(resolveClassName('modal-content'), " div")), {
-      subtree: true,
-      attributes: true,
-      childList: true
-    });
+    observer.observe(resizeTarget.value);
     calcContentScroll();
   };
   (0,external_vue_namespaceObject.watch)(function () {
@@ -592,7 +586,6 @@ var useContentResize = function useContentResize(root, props) {
       }, 100);
     } else {
       if (observer) {
-        observer.takeRecords();
         observer.disconnect();
         observer = null;
       }
@@ -740,13 +733,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
   setup: function setup(props, ctx) {
     var refRoot = (0,external_vue_namespaceObject.ref)();
     var refMask = (0,external_vue_namespaceObject.ref)();
+    var resizeTargetRef = (0,external_vue_namespaceObject.ref)();
     var teleportTo = (0,external_vue_namespaceObject.ref)('body');
     var visible = (0,external_vue_namespaceObject.ref)(false);
     var zIndex = (0,external_vue_namespaceObject.ref)(props.zIndex);
     var enableTeleport = (0,external_vue_namespaceObject.ref)(!!props.transfer);
     var backgroundColor = (0,external_vue_namespaceObject.ref)('rgba(0,0,0,0.6)');
     var closeTimer;
-    var _useContentResize = useContentResize(refRoot, props),
+    var _useContentResize = useContentResize(refRoot, resizeTargetRef, props),
       contentStyles = _useContentResize.contentStyles,
       isContentScroll = _useContentResize.isContentScroll;
     var modalWrapperStyles = (0,external_vue_namespaceObject.computed)(function () {
@@ -922,7 +916,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       refRoot: refRoot,
       refMask: refMask,
       resolveClassName: resolveClassName,
-      close: close
+      close: close,
+      resizeTargetRef: resizeTargetRef
     };
   },
   render: function render() {
@@ -959,7 +954,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
         }, [(_this$$slots$header = (_this$$slots = _this.$slots).header) === null || _this$$slots$header === void 0 ? void 0 : _this$$slots$header.call(_this$$slots)]), (0,external_vue_namespaceObject.createVNode)("div", {
           "class": _this.resolveClassName('modal-content'),
           "style": _this.contentStyles
-        }, [(0,external_vue_namespaceObject.createVNode)("div", null, [(_this$$slots$default = (_this$$slots2 = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots2)])]), (0,external_vue_namespaceObject.createVNode)("div", {
+        }, [(0,external_vue_namespaceObject.createVNode)("div", {
+          "style": "position: relative; display: table-cell;"
+        }, [(_this$$slots$default = (_this$$slots2 = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots2), (0,external_vue_namespaceObject.createVNode)("div", {
+          "ref": "resizeTargetRef",
+          "style": "position: absolute; top: 0; bottom: 0;"
+        }, null)])]), (0,external_vue_namespaceObject.createVNode)("div", {
           "class": _defineProperty(_defineProperty({}, _this.resolveClassName('modal-footer'), true), 'is-fixed', _this.isContentScroll)
         }, [(_this$$slots$footer = (_this$$slots3 = _this.$slots).footer) === null || _this$$slots$footer === void 0 ? void 0 : _this$$slots$footer.call(_this$$slots3)]), _this.closeIcon && (0,external_vue_namespaceObject.createVNode)("div", {
           "class": _this.resolveClassName('modal-close')

package/lib/modal/modal.css

@@ -58,6 +58,7 @@
 }
 .bk-modal-content {
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 .bk-modal-close {
   position: absolute;

package/lib/modal/modal.d.ts

@@ -116,6 +116,7 @@ declare const _default: import("vue").DefineComponent<{
     refMask: import("vue").Ref<HTMLElement>;
     resolveClassName: (cls: string) => string;
     close: () => void;
+    resizeTargetRef: import("vue").Ref<HTMLElement>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quickClose" | "quick-close")[], "close" | "hidden" | "shown" | "quickClose" | "quick-close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     isShow: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;

package/lib/modal/modal.less

@@ -55,6 +55,7 @@
 
 .@{bk-prefix}-modal-content {
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 
 .@{bk-prefix}-modal-close {

package/lib/modal/modal.variable.css

@@ -187,6 +187,7 @@
 }
 .bk-modal-content {
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 .bk-modal-close {
   position: absolute;

package/package.json

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