raise-common-lib 0.0.214 → 0.0.215

package/fesm5/raise-common-lib.js

@@ -1278,10 +1278,57 @@ var FloatBoxComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        var _a = this.rootElement.nativeElement.getBoundingClientRect(), y = _a.top, x = _a.left, width = _a.width, height = _a.height;
+        // 临时显示内容以获取尺寸
+        /** @type {?} */
+        var wasVisible = this.contentElement.nativeElement.style.display !== "none";
+        this.contentElement.nativeElement.style.visibility = "hidden";
+        this.contentElement.nativeElement.style.display = "block";
+        /** @type {?} */
+        var contentRect = this.contentElement.nativeElement.getBoundingClientRect();
+        /** @type {?} */
+        var contentWidth = contentRect.width;
+        /** @type {?} */
+        var contentHeight = contentRect.height;
+        // 获取视口尺寸
+        /** @type {?} */
+        var viewportWidth = window.innerWidth;
+        /** @type {?} */
+        var viewportHeight = window.innerHeight;
+        /** @type {?} */
+        var SAFE_MARGIN = 12;
+        // 边界检测：计算最佳 placement
+        /** @type {?} */
+        var 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;
         }
-        var _a = this.rootElement.nativeElement.getBoundingClientRect(), y = _a.top, x = _a.left, width = _a.width, height = _a.height;
+        // 对于 fixed="yes" 的情况，计算具体位置
         /** @type {?} */
         var top = "0";
         /** @type {?} */
@@ -1290,7 +1337,7 @@ var FloatBoxComponent = /** @class */ (function () {
         var translateX = "0";
         /** @type {?} */
         var translateY = "0";
-        switch (this.placement + "_" + this.position) {
+        switch (finalPlacement + "_" + this.position) {
             case "top_start":
                 top = y + "px";
                 left = x - 8 + "px";
@@ -1354,9 +1401,49 @@ var FloatBoxComponent = /** @class */ (function () {
                 translateX = "-100%";
                 break;
         }
+        // 计算实际渲染位置（考虑 transform）进行边界调整
+        /** @type {?} */
+        var actualLeft = parseFloat(left) || 0;
+        /** @type {?} */
+        var 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 {?}
@@ -1380,13 +1467,15 @@ var FloatBoxComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        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 {?}
@@ -1409,7 +1498,7 @@ var FloatBoxComponent = /** @class */ (function () {
     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)}"]
                 }] }
     ];
@@ -1441,6 +1530,8 @@ if (false) {
     /** @type {?} */
     FloatBoxComponent.prototype._fixed;
     /** @type {?} */
+    FloatBoxComponent.prototype.actualPlacement;
+    /** @type {?} */
     FloatBoxComponent.prototype.openChange;
     /** @type {?} */
     FloatBoxComponent.prototype.rootElement;