raise-common-lib 0.0.214 → 0.0.215

package/bundles/raise-common-lib.umd.js

@@ -1643,10 +1643,57 @@
          * @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 {?} */
@@ -1655,7 +1702,7 @@
             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";
@@ -1719,9 +1766,49 @@
                     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 {?}
@@ -1745,13 +1832,15 @@
          * @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 {?}
@@ -1774,7 +1863,7 @@
         FloatBoxComponent.decorators = [
             { type: core.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)}"]
                     }] }
         ];
@@ -1806,6 +1895,8 @@
         /** @type {?} */
         FloatBoxComponent.prototype._fixed;
         /** @type {?} */
+        FloatBoxComponent.prototype.actualPlacement;
+        /** @type {?} */
         FloatBoxComponent.prototype.openChange;
         /** @type {?} */
         FloatBoxComponent.prototype.rootElement;