@whitesev/pops 1.6.6 → 1.7.0

package/dist/index.umd.js

@@ -2911,24 +2911,41 @@
         }
         /**
          * 用于显示元素并获取它的高度宽度等其它属性
-         * @param element
+         * @param $ele
          * @param parent 父元素
          */
-        showElement(element, parent = PopsCore.document.documentElement) {
+        showElement($ele, ownParent) {
             /** 克隆元素 */
-            let cloneNode = element.cloneNode(true);
-            cloneNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
-            parent.appendChild(cloneNode);
+            let $cloneNode = $ele.cloneNode(true);
+            $cloneNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
+            let $parent = PopsCore.document.documentElement;
+            // 这里需要的是先获取元素的父节点，把元素同样添加到父节点中
+            let $root = $ele.getRootNode();
+            if (ownParent == null) {
+                if ($root == $ele) {
+                    // 未添加到任意节点中，那么直接添加到页面中去
+                    $parent = PopsCore.document.documentElement;
+                }
+                else {
+                    // 添加到父节点中
+                    $parent = $root;
+                }
+            }
+            else {
+                // 自定义的父节点
+                $parent = ownParent;
+            }
+            $parent.appendChild($cloneNode);
             return {
                 /**
                  * 强制显示的克隆的元素
                  */
-                cloneNode: cloneNode,
+                cloneNode: $cloneNode,
                 /**
                  * 恢复修改的style
                  */
                 recovery() {
-                    cloneNode.remove();
+                    $cloneNode.remove();
                 },
             };
         }
@@ -10063,8 +10080,8 @@
                  * @param y
                  */
                 getOffset(menuElement, x, y) {
-                    let menuElementWidth = popsDOMUtils.width(menuElement, void 0, $shadowRoot);
-                    let menuElementHeight = popsDOMUtils.height(menuElement, void 0, $shadowRoot);
+                    let menuElementWidth = popsDOMUtils.width(menuElement);
+                    let menuElementHeight = popsDOMUtils.height(menuElement);
                     /* left最大偏移 */
                     let maxLeftOffset = popsDOMUtils.width(globalThis) - menuElementWidth - 1;
                     /* top最大偏移 */
@@ -10542,6 +10559,7 @@
                 setInputChangeEvent(option = {
                     capture: true,
                 }) {
+                    /* 必须是input或者textarea才有input事件 */
                     if (!(config.inputTarget instanceof HTMLInputElement ||
                         config.inputTarget instanceof HTMLTextAreaElement)) {
                         return;
@@ -10746,7 +10764,22 @@
                     }
                     // 文档最大宽度
                     let documentWidth = popsDOMUtils.width(document);
-                    if (config.position === "top") {
+                    let position = config.position;
+                    if (config.position === "auto") {
+                        // 需目标高度+搜索建议框高度大于文档高度，则显示在上面
+                        let targetBottom = targetRect.bottom;
+                        let searchSuggestionContainerHeight = popsDOMUtils.height(SearchSuggestion.$el.$hintULContainer);
+                        if (targetBottom + searchSuggestionContainerHeight > documentHeight) {
+                            // 在上面
+                            position = "top";
+                        }
+                        else {
+                            // 在下面
+                            position = "bottom";
+                            SearchSuggestion.$el.$hintULContainer.removeAttribute("data-top");
+                        }
+                    }
+                    if (position === "top") {
                         if (config.positionTopToReverse) {
                             SearchSuggestion.$el.$hintULContainer.setAttribute("data-top-reverse", "true");
                         }
@@ -10755,36 +10788,13 @@
                         SearchSuggestion.$el.$hintULContainer.style.bottom =
                             documentHeight - targetRect.top + config.topDistance + "px";
                     }
-                    else if (config.position === "bottom") {
+                    else if (position === "bottom") {
                         // 在下面
                         SearchSuggestion.$el.$hintULContainer.removeAttribute("data-top-reverse");
                         SearchSuggestion.$el.$hintULContainer.style.bottom = "";
                         SearchSuggestion.$el.$hintULContainer.style.top =
                             targetRect.height + targetRect.top + config.topDistance + "px";
                     }
-                    else if (config.position === "auto") {
-                        // 自动判断
-                        if (targetRect.bottom +
-                            popsDOMUtils.height(SearchSuggestion.$el.$hintULContainer) >
-                            documentHeight) {
-                            if (config.positionTopToReverse) {
-                                SearchSuggestion.$el.$hintULContainer.setAttribute("data-top-reverse", "true");
-                            }
-                            // 超出浏览器高度了，自动转换为上面去
-                            SearchSuggestion.$el.$hintULContainer.style.top = "";
-                            SearchSuggestion.$el.$hintULContainer.style.bottom =
-                                documentHeight - targetRect.top + config.topDistance + "px";
-                        }
-                        else {
-                            SearchSuggestion.$el.$hintULContainer.removeAttribute("data-top");
-                            SearchSuggestion.$el.$hintULContainer.style.bottom = "";
-                            SearchSuggestion.$el.$hintULContainer.style.top =
-                                targetRect.height + targetRect.top + config.topDistance + "px";
-                        }
-                    }
-                    else {
-                        throw new TypeError("未知设置的位置" + config.position);
-                    }
                     let hintUIWidth = popsDOMUtils.width(SearchSuggestion.$el.$hintULContainer);
                     SearchSuggestion.$el.$hintULContainer.style.left =
                         (targetRect.left + hintUIWidth > documentWidth