raise-common-lib 0.0.215 → 0.0.216

package/fesm2015/raise-common-lib.js

@@ -1076,57 +1076,10 @@ 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;
         }
-        // 对于 fixed="yes" 的情况，计算具体位置
+        const { top: y, left: x, width, height, } = this.rootElement.nativeElement.getBoundingClientRect();
         /** @type {?} */
         let top = "0";
         /** @type {?} */
@@ -1135,7 +1088,7 @@ class FloatBoxComponent {
         let translateX = "0";
         /** @type {?} */
         let translateY = "0";
-        switch (finalPlacement + "_" + this.position) {
+        switch (this.placement + "_" + this.position) {
             case "top_start":
                 top = y + "px";
                 left = x - 8 + "px";
@@ -1199,49 +1152,9 @@ 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 {?}
@@ -1259,15 +1172,13 @@ class FloatBoxComponent {
      * @return {?}
      */
     onMouseEnter() {
-        if (this.trigger !== "hover") {
+        if (this.fixed === "no" || this.trigger !== "hover") {
             return;
         }
         this.opened = "yes";
         this.openChange.emit(true);
         this.setFixedContentPosition();
-        if (this.fixed === "yes") {
-            window.addEventListener("mousemove", this.onMoveOutside);
-        }
+        window.addEventListener("mousemove", this.onMoveOutside);
     }
     /**
      * @return {?}
@@ -1287,7 +1198,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]=\"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",
+                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",
                 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)}"]
             }] }
 ];
@@ -1317,8 +1228,6 @@ if (false) {
     /** @type {?} */
     FloatBoxComponent.prototype._fixed;
     /** @type {?} */
-    FloatBoxComponent.prototype.actualPlacement;
-    /** @type {?} */
     FloatBoxComponent.prototype.openChange;
     /** @type {?} */
     FloatBoxComponent.prototype.rootElement;