raise-common-lib 0.0.214 → 0.0.215

package/fesm2015/raise-common-lib.js

@@ -1076,10 +1076,57 @@ class FloatBoxComponent {
      * @return {?}
      */
     setFixedContentPosition() {
+        const { top: y, left: x, width, height, } = this.rootElement.nativeElement.getBoundingClientRect();
+        // 临时显示内容以获取尺寸
+        /** @type {?} */
+        const wasVisible = this.contentElement.nativeElement.style.display !== "none";
+        this.contentElement.nativeElement.style.visibility = "hidden";
+        this.contentElement.nativeElement.style.display = "block";
+        /** @type {?} */
+        const contentRect = this.contentElement.nativeElement.getBoundingClientRect();
+        /** @type {?} */
+        const contentWidth = contentRect.width;
+        /** @type {?} */
+        const contentHeight = contentRect.height;
+        // 获取视口尺寸
+        /** @type {?} */
+        const viewportWidth = window.innerWidth;
+        /** @type {?} */
+        const viewportHeight = window.innerHeight;
+        /** @type {?} */
+        const SAFE_MARGIN = 12;
+        // 边界检测：计算最佳 placement
+        /** @type {?} */
+        let finalPlacement = this.placement;
+        if (this.placement === "top" && y < contentHeight + SAFE_MARGIN) {
+            if (viewportHeight - (y + height) >= contentHeight + SAFE_MARGIN) {
+                finalPlacement = "bottom";
+            }
+        }
+        else if (this.placement === "bottom" && viewportHeight - (y + height) < contentHeight + SAFE_MARGIN) {
+            if (y >= contentHeight + SAFE_MARGIN) {
+                finalPlacement = "top";
+            }
+        }
+        else if (this.placement === "left" && x < contentWidth + SAFE_MARGIN) {
+            if (viewportWidth - (x + width) >= contentWidth + SAFE_MARGIN) {
+                finalPlacement = "right";
+            }
+        }
+        else if (this.placement === "right" && viewportWidth - (x + width) < contentWidth + SAFE_MARGIN) {
+            if (x >= contentWidth + SAFE_MARGIN) {
+                finalPlacement = "left";
+            }
+        }
+        // 保存调整后的 placement
+        this.actualPlacement = finalPlacement;
+        // 对于 fixed="no" 的情况，只更新 data-placement，让 CSS 处理
         if (this.fixed === "no") {
+            this.contentElement.nativeElement.style.visibility = "";
+            this.contentElement.nativeElement.style.display = wasVisible ? "" : "none";
             return;
         }
-        const { top: y, left: x, width, height, } = this.rootElement.nativeElement.getBoundingClientRect();
+        // 对于 fixed="yes" 的情况，计算具体位置
         /** @type {?} */
         let top = "0";
         /** @type {?} */
@@ -1088,7 +1135,7 @@ class FloatBoxComponent {
         let translateX = "0";
         /** @type {?} */
         let translateY = "0";
-        switch (this.placement + "_" + this.position) {
+        switch (finalPlacement + "_" + this.position) {
             case "top_start":
                 top = y + "px";
                 left = x - 8 + "px";
@@ -1152,9 +1199,49 @@ class FloatBoxComponent {
                 translateX = "-100%";
                 break;
         }
+        // 计算实际渲染位置（考虑 transform）进行边界调整
+        /** @type {?} */
+        let actualLeft = parseFloat(left) || 0;
+        /** @type {?} */
+        let actualTop = parseFloat(top) || 0;
+        if (translateX === "-50%") {
+            actualLeft = actualLeft - contentWidth / 2;
+        }
+        else if (translateX === "-100%") {
+            actualLeft = actualLeft - contentWidth;
+        }
+        if (translateY === "-50%") {
+            actualTop = actualTop - contentHeight / 2;
+        }
+        else if (translateY === "-100%") {
+            actualTop = actualTop - contentHeight;
+        }
+        // 水平边界调整
+        if (finalPlacement === "top" || finalPlacement === "bottom") {
+            if (actualLeft < SAFE_MARGIN) {
+                left = (x + SAFE_MARGIN) + "px";
+                translateX = "0";
+            }
+            else if (actualLeft + contentWidth > viewportWidth - SAFE_MARGIN) {
+                left = (viewportWidth - contentWidth - SAFE_MARGIN) + "px";
+                translateX = "0";
+            }
+        }
+        // 垂直边界调整
+        else {
+            if (actualTop < SAFE_MARGIN) {
+                top = (y + SAFE_MARGIN) + "px";
+                translateY = "0";
+            }
+            else if (actualTop + contentHeight > viewportHeight - SAFE_MARGIN) {
+                top = (viewportHeight - contentHeight - SAFE_MARGIN) + "px";
+                translateY = "0";
+            }
+        }
         this.contentElement.nativeElement.style.top = top;
         this.contentElement.nativeElement.style.left = left;
         this.contentElement.nativeElement.style.transform = `translate(${translateX}, ${translateY})`;
+        this.contentElement.nativeElement.style.visibility = "visible";
     }
     /**
      * @return {?}
@@ -1172,13 +1259,15 @@ class FloatBoxComponent {
      * @return {?}
      */
     onMouseEnter() {
-        if (this.fixed === "no" || this.trigger !== "hover") {
+        if (this.trigger !== "hover") {
             return;
         }
         this.opened = "yes";
         this.openChange.emit(true);
         this.setFixedContentPosition();
-        window.addEventListener("mousemove", this.onMoveOutside);
+        if (this.fixed === "yes") {
+            window.addEventListener("mousemove", this.onMoveOutside);
+        }
     }
     /**
      * @return {?}
@@ -1198,7 +1287,7 @@ class FloatBoxComponent {
 FloatBoxComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-float-box",
-                template: "<div\r\n  #element\r\n  class=\"float-box-container\"\r\n  [attr.data-trigger]=\"trigger\"\r\n  (click)=\"onClickContainer()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n>\r\n  <ng-content></ng-content>\r\n  <div\r\n    #content\r\n    class=\"float-box-content\"\r\n    [attr.data-placement]=\"placement\"\r\n    [attr.data-position]=\"position\"\r\n    [attr.data-animation]=\"animation\"\r\n    [attr.data-fixed]=\"fixed\"\r\n    [attr.data-opened]=\"opened\"\r\n  >\r\n    <div class=\"float-box-show-content\">\r\n      <ng-content select=\"[float-content]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n  #element\r\n  class=\"float-box-container\"\r\n  [attr.data-trigger]=\"trigger\"\r\n  (click)=\"onClickContainer()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n>\r\n  <ng-content></ng-content>\r\n  <div\r\n    #content\r\n    class=\"float-box-content\"\r\n    [attr.data-placement]=\"actualPlacement || placement\"\r\n    [attr.data-position]=\"position\"\r\n    [attr.data-animation]=\"animation\"\r\n    [attr.data-fixed]=\"fixed\"\r\n    [attr.data-opened]=\"opened\"\r\n  >\r\n    <div class=\"float-box-show-content\">\r\n      <ng-content select=\"[float-content]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 styles: [".float-box-container{position:relative}.float-box-container[data-trigger=click]>.float-box-content[data-opened=no],.float-box-container[data-trigger=hover]:not(:hover)>.float-box-content{display:none}.float-box-container>.float-box-content[data-fixed=no]{padding:8px;--top:0;--left:0;--translate-x:0;--translate-y:0;position:absolute;top:var(--top);left:var(--left);transform:translate(var(--translate-x),var(--translate-y));z-index:10}.float-box-container>.float-box-content[data-fixed=no][data-animation=yes]{-webkit-animation:.25s ease-in-out;animation:.25s ease-in-out}.float-box-container>.float-box-content[data-fixed=no][data-placement=top]{--translate-y:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-animation=true]{-webkit-animation-name:open-from-top;animation-name:open-from-top}.float-box-container>.float-box-content[data-fixed=no][data-placement=left]{--translate-x:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=right]{--left:100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom]{--top:100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=start],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=start]{--left:-8px}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=center],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=center]{--left:50%;--translate-x:-50%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=end],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=end]{--left:calc(100% + 8px);--translate-x:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=start],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=start]{--top:-8px}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=start][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=start][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=center],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=center]{--top:50%;--translate-y:-50%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=center][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=center][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=end],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=end]{--top:calc(100% + 8px);--translate-y:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=end][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=end][data-animation=yes]{-webkit-animation-name:open-from-top;animation-name:open-from-top}@-webkit-keyframes open-from-top{from{margin-top:-8px;opacity:.4}to{margin:0;opacity:1}}@keyframes open-from-top{from{margin-top:-8px;opacity:.4}to{margin:0;opacity:1}}@-webkit-keyframes open-from-bottom{from{margin-top:8px;opacity:.4}to{margin:0;opacity:1}}@keyframes open-from-bottom{from{margin-top:8px;opacity:.4}to{margin:0;opacity:1}}::ng-deep #kt-float-box-fixed-container{width:0;height:0;z-index:100000}::ng-deep #kt-float-box-fixed-container .float-box-content[data-fixed=yes]{padding:8px;position:fixed;z-index:10}::ng-deep #kt-float-box-fixed-container .float-box-content[data-fixed=yes][data-opened=no]{display:none}.float-box-show-content{padding:8px 8px 12px;border-radius:8px;background:#fff;box-shadow:0 0 8px 0 rgba(0,0,0,.25)}"]
             }] }
 ];
@@ -1228,6 +1317,8 @@ if (false) {
     /** @type {?} */
     FloatBoxComponent.prototype._fixed;
     /** @type {?} */
+    FloatBoxComponent.prototype.actualPlacement;
+    /** @type {?} */
     FloatBoxComponent.prototype.openChange;
     /** @type {?} */
     FloatBoxComponent.prototype.rootElement;