@touchvue/ui 1.0.0-beta.6 → 1.0.0-beta.60

package/es/packages/components/float/src/Float.vue2.mjs

@@ -1,5 +1,6 @@
-import { defineComponent, ref, watch, computed, onMounted, onBeforeUnmount, getCurrentInstance, openBlock, createBlock, Teleport, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode, nextTick } from 'vue';
+import { defineComponent, useAttrs, ref, watch, computed, onMounted, onActivated, onBeforeUnmount, onDeactivated, nextTick, openBlock, createBlock, Teleport, createElementBlock, normalizeClass, unref, normalizeStyle, withModifiers, createCommentVNode, createElementVNode, renderSlot } from 'vue';
 import { floatProps, floatEmits } from './float.mjs';
+import { getModeClasses } from '../../../hooks/useSetClass.mjs';
 
 const __default__ = defineComponent({
   name: "ToFloat",
@@ -12,19 +13,24 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const attrs = useAttrs();
     const el = ref(null);
     const origin = ref("top");
     const ifShow = ref(false);
-    const show = ref(false);
     const scrollNode = ref(null);
     const iposition = ref(props.position || (props.slide ? "right" : "auto"));
     const ialign = ref(props.align);
     const link = ref(null);
-    const opened = ref(false);
+    const isOpen = ref(false);
     const isOver = ref(false);
-    const mask = ref(null);
+    const maskRef = ref(null);
+    const wrapper = ref(null);
     const content = ref(null);
     const event = ref("");
+    const size = ref(1);
+    const contentObserver = ref(null);
+    let contentObserverTimer = null;
+    let hasInitShow = false;
     watch(
       () => props.position,
       (val) => {
@@ -41,13 +47,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const setClass = computed(() => {
       const arr = [];
-      if (show.value)
+      if (isOpen.value)
         arr.push("is-show");
       if (props.slide) {
         arr.push("is-slide");
       }
       if (props.mode) {
-        arr.push(`mode-${props.mode}`);
+        arr.push(...getModeClasses(props.mode));
       }
       if (iposition.value !== "auto")
         arr.push(`position-${iposition.value}`);
@@ -57,6 +63,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         arr.push("is-mask");
       return arr;
     });
+    const transitionTransform = computed(() => `transform ${props.speed}ms ease-out`);
     const setStyle = computed(() => {
       var _a;
       const obj = {};
@@ -80,6 +87,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         else
           obj.top = props.top + "em";
       }
+      if (size.value !== 1) {
+        obj.fontSize = size.value + "em";
+      }
       if (props.zIndex) {
         obj.zIndex = props.zIndex;
       } else {
@@ -88,103 +98,107 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return obj;
     });
-    const setContentStyle = computed(() => {
-      const obj = {};
-      if (props.slide) {
-        if ((iposition.value === "right" || iposition.value === "left") && props.width) {
-          if (!isNaN(Number(props.width)))
-            obj.width = props.width + "em";
-          else if (props.width === "full")
-            obj.width = "100%";
-          else
-            obj.width = props.width;
-        }
-        if ((iposition.value === "top" || iposition.value === "bottom") && props.height) {
-          if (!isNaN(Number(props.height)))
-            obj.height = props.height + "em";
-          else if (props.height === "full")
-            obj.height = "100%";
-          else
-            obj.height = props.height;
-        }
+    const wrapperStyle = computed(() => {
+      let obj = {};
+      if ((iposition.value === "right" || iposition.value === "left") && props.width) {
+        if (!isNaN(Number(props.width)))
+          obj.width = props.width + "em";
+        else if (props.width === "full")
+          obj.width = "100%";
+        else
+          obj.width = props.width;
       }
       return obj;
     });
+    onMounted(() => {
+      init();
+    });
+    onActivated(() => {
+      init();
+    });
+    onBeforeUnmount(() => {
+      destroy();
+    });
+    onDeactivated(() => {
+      destroy();
+    });
+    function init() {
+      if (!props.slide) {
+        window.addEventListener("resize", close, false);
+        return;
+      }
+      if (props.show && !hasInitShow) {
+        hasInitShow = true;
+        open();
+      }
+    }
+    function destroy() {
+      stopContentObserver();
+      if (!props.slide) {
+        document.body.removeEventListener("mousedown", blur);
+        document.body.removeEventListener("touchstart", blur);
+        window.removeEventListener("resize", close);
+      }
+      document.body.removeEventListener("scroll", close);
+      document.body.removeEventListener("wheel", close);
+    }
     function maskClickHandle() {
       if (props.closeOnBlur) {
         close();
       }
     }
-    function close() {
-      if (show.value && opened.value) {
-        if (props.beforeClose) {
-          const fn = props.beforeClose();
-          if (fn && typeof fn.then === "function") {
-            fn.then(() => {
-              closeAction();
-            }).catch((error) => {
-              console.log(error);
-            });
-          } else {
-            if (fn)
-              closeAction();
-          }
-        } else {
-          closeAction();
-        }
-      }
+    function captureScrollTops(root) {
+      const tops = [];
+      if (!root)
+        return tops;
+      root.querySelectorAll(".to-scroll-content").forEach((node) => {
+        const el2 = node;
+        tops.push({ el: el2, top: el2.scrollTop });
+      });
+      return tops;
     }
-    function closeAction() {
-      if (!props.height && content.value) {
-        content.value.style.height = "";
-      }
-      isOver.value = false;
-      if (scrollNode.value) {
-        scrollNode.value.removeEventListener("scroll", close);
-      }
-      emit("beforeClose");
-      show.value = false;
-      opened.value = false;
-      if (content.value && content.value.style.height !== "auto" && (iposition.value === "top" || iposition.value === "bottom") && !props.height) {
-        content.value.style.height = "auto";
-      }
-      emit("closed");
-      if (props.afterClose && Object.prototype.toString.call(props.afterClose) === "[object Function]") {
-        props.afterClose();
-      }
-      setTimeout(() => {
-        if (props.lazy) {
-          ifShow.value = false;
-        }
-      }, 300);
+    function restoreScrollTops(tops) {
+      tops.forEach(({ el: el2, top }) => {
+        if (el2.isConnected)
+          el2.scrollTop = top;
+      });
     }
-    function set(link2) {
+    function set(link2, reposition = false) {
       if (props.slide) {
-        let timer = setTimeout(() => {
-          if ((iposition.value === "top" || iposition.value === "bottom") && !props.height && content.value) {
-            content.value.style.height = "";
-            content.value.style.height = content.value.offsetHeight + "px";
+        setTimeout(() => {
+          if ((iposition.value === "top" || iposition.value === "bottom") && !props.height && wrapper.value) {
+            wrapper.value.style.height = "";
+            wrapper.value.style.height = wrapper.value.getBoundingClientRect().height + "px";
           }
-          clearTimeout(timer);
         }, 0);
       } else if (link2) {
-        if (content.value)
-          content.value.style.height = "";
+        const savedScrollTops = reposition ? captureScrollTops(content.value) : [];
+        if (!reposition) {
+          if (wrapper.value)
+            wrapper.value.style.height = "";
+          if (el.value) {
+            el.value.style.transition = "none";
+            el.value.style.transform = "";
+          }
+        } else {
+          if (wrapper.value)
+            wrapper.value.style.height = "";
+        }
         nextTick(() => {
           var _a, _b;
           if (!props.width && el.value) {
             if ("x" in link2 || "touches" in link2) {
               el.value.style.width = "14em";
             } else {
-              el.value.style.width = link2.offsetWidth + "px";
+              el.value.style.width = link2.getBoundingClientRect().width + "px";
             }
           }
           if (props.top === "" || props.left === "") {
             let x, y, linkWidth, linkHeight;
-            const contentWidth = ((_a = content.value) == null ? void 0 : _a.offsetWidth) || 0;
-            const contentHeight = ((_b = content.value) == null ? void 0 : _b.offsetHeight) || 0;
-            const bodyWidth = document.body.offsetWidth;
-            const bodyHeight = document.body.offsetHeight;
+            const wrapperWidth = ((_a = wrapper.value) == null ? void 0 : _a.getBoundingClientRect().width) || 0;
+            const wrapperHeight = ((_b = wrapper.value) == null ? void 0 : _b.getBoundingClientRect().height) || 0;
+            const bodyWidth = document.body.getBoundingClientRect().width;
+            const bodyHeight = document.body.getBoundingClientRect().height;
             let topSpace, bottomSpace, leftSpace, rightSpace;
             let useSpace = 0;
             const dx = Number(props.dx) * 1;
@@ -197,17 +211,17 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             } else {
               x = link2.getBoundingClientRect().left;
               y = link2.getBoundingClientRect().top;
-              linkWidth = link2.offsetWidth;
-              linkHeight = link2.offsetHeight;
+              linkWidth = link2.getBoundingClientRect().width;
+              linkHeight = link2.getBoundingClientRect().height;
             }
             topSpace = y;
             bottomSpace = bodyHeight - y - linkHeight;
             leftSpace = x;
             rightSpace = bodyWidth - x - linkWidth;
-            if (iposition.value === "auto") {
-              if (bottomSpace >= contentHeight) {
+            if (!props.position) {
+              if (bottomSpace >= wrapperHeight) {
                 iposition.value = "bottom";
-              } else if (y >= contentHeight) {
+              } else if (y >= wrapperHeight) {
                 iposition.value = "top";
               } else {
                 if (y + linkHeight / 2 < bodyHeight / 2) {
@@ -219,7 +233,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             }
             if (props.align === "auto") {
               if (iposition.value === "top" || iposition.value === "bottom") {
-                if (rightSpace >= contentWidth) {
+                if (rightSpace >= wrapperWidth) {
                   ialign.value = "left";
                 } else {
                   ialign.value = "right";
@@ -232,66 +246,83 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 }
               }
             }
-            if (el.value === null)
-              return;
-            if (iposition.value === "top") {
-              el.value.style.top = "";
-              el.value.style.bottom = bottomSpace + linkHeight - 1 - dy + "px";
-            }
-            if (iposition.value === "bottom") {
-              el.value.style.top = topSpace + linkHeight - 1 + dy + "px";
-              el.value.style.bottom = "";
-            }
-            if (iposition.value === "top" || iposition.value === "bottom") {
-              if (ialign.value === "left") {
-                el.value.style.left = leftSpace + dx + "px";
-                el.value.style.right = "";
-              } else if (ialign.value === "center") {
-                el.value.style.left = leftSpace - contentWidth / 2 + linkWidth / 2 + "px";
-                el.value.style.right = "";
-              } else {
-                el.value.style.right = rightSpace - dx + "px";
-                el.value.style.left = "";
-              }
-            }
-            if (iposition.value === "left") {
-              el.value.style.right = rightSpace + linkWidth - dx - 1 + "px";
-              el.value.style.left = "";
-            }
-            if (iposition.value === "right") {
-              el.value.style.left = leftSpace + linkWidth + dx - 1 + "px";
-              el.value.style.right = "";
-            }
-            if (iposition.value === "left" || iposition.value === "right") {
-              if (ialign.value === "bottom") {
+            if (el.value) {
+              if (iposition.value === "top") {
                 el.value.style.top = "";
-                el.value.style.bottom = bottomSpace - dy + "px";
-              } else {
-                el.value.style.top = topSpace + dy + "px";
+                el.value.style.bottom = bottomSpace + linkHeight - 1 - dy + "px";
+              }
+              if (iposition.value === "bottom") {
+                el.value.style.top = topSpace + linkHeight - 1 + dy + "px";
                 el.value.style.bottom = "";
               }
-            }
-            if (iposition.value === "bottom") {
-              useSpace = bottomSpace;
-              origin.value = "top";
-            } else if (iposition.value === "top") {
-              useSpace = topSpace;
-              origin.value = "bottom";
-            } else {
-              if (ialign.value === "bottom") {
-                useSpace = topSpace + linkHeight;
-                origin.value = "bottom";
-              } else if (ialign.value === "top") {
-                useSpace = bottomSpace + linkHeight;
+              if (iposition.value === "top" || iposition.value === "bottom") {
+                if (ialign.value === "left") {
+                  el.value.style.left = leftSpace + dx + "px";
+                  el.value.style.right = "";
+                } else if (ialign.value === "center") {
+                  el.value.style.left = leftSpace - wrapperWidth / 2 + linkWidth / 2 + "px";
+                  el.value.style.right = "";
+                } else {
+                  el.value.style.right = rightSpace - dx + "px";
+                  el.value.style.left = "";
+                }
+              }
+              if (iposition.value === "left") {
+                el.value.style.right = rightSpace + linkWidth - dx - 1 + "px";
+                el.value.style.left = "";
+              }
+              if (iposition.value === "right") {
+                el.value.style.left = leftSpace + linkWidth + dx - 1 + "px";
+                el.value.style.right = "";
+              }
+              if (iposition.value === "left" || iposition.value === "right") {
+                if (ialign.value === "bottom") {
+                  el.value.style.top = "";
+                  el.value.style.bottom = bottomSpace - dy + "px";
+                } else {
+                  el.value.style.top = topSpace + dy + "px";
+                  el.value.style.bottom = "";
+                }
+              }
+              if (iposition.value === "bottom") {
+                useSpace = bottomSpace;
                 origin.value = "top";
+              } else if (iposition.value === "top") {
+                useSpace = topSpace;
+                origin.value = "bottom";
               } else {
-                console.error("[ToFloat] \u6D6E\u5C42\u5BF9\u9F50\u65B9\u5F0F\u8BBE\u7F6E\u9519\u8BEF\uFF01position \u5728\u5DE6\u53F3\u4E24\u4FA7\u65F6\uFF0C\u5BF9\u9F50\u65B9\u5F0F\u5E94\u662F\u9876\u90E8\u6216\u5E95\u90E8");
+                if (ialign.value === "bottom") {
+                  useSpace = topSpace + linkHeight;
+                  origin.value = "bottom";
+                } else if (ialign.value === "top") {
+                  useSpace = bottomSpace + linkHeight;
+                  origin.value = "top";
+                } else {
+                  console.error("[ToFloat] \u6D6E\u5C42\u5BF9\u9F50\u65B9\u5F0F\u8BBE\u7F6E\u9519\u8BEF\uFF01position \u5728\u5DE6\u53F3\u4E24\u4FA7\u65F6\uFF0C\u5BF9\u9F50\u65B9\u5F0F\u5E94\u662F\u9876\u90E8\u6216\u5E95\u90E8");
+                }
+              }
+              if (useSpace < wrapperHeight && wrapper.value) {
+                isOver.value = true;
+                wrapper.value.style.height = useSpace + "px";
+              }
+              if (link2) {
+                const ratio = link2.getBoundingClientRect().width / link2.offsetWidth;
+                const ratio2 = Number(getComputedStyle(link2).fontSize.trim().toLowerCase().replace(/px$/, "")) / Number(getComputedStyle(document.body).fontSize.trim().toLowerCase().replace(/px$/, ""));
+                size.value = ratio * ratio2;
               }
             }
-            if (useSpace < contentHeight && content.value) {
-              isOver.value = true;
-              content.value.style.height = useSpace + "px";
-            }
+          }
+          if (el.value && !reposition) {
+            setOpenStyle();
+          }
+          if (link2 && !("x" in link2) && !("touches" in link2) && !reposition) {
+            setScrollStatus();
+          }
+          if (reposition && savedScrollTops.length) {
+            nextTick(() => {
+              restoreScrollTops(savedScrollTops);
+              requestAnimationFrame(() => restoreScrollTops(savedScrollTops));
+            });
           }
         });
       }
@@ -314,57 +345,171 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     function openAction(by) {
-      if (!show.value && (!props.lazy || !ifShow.value)) {
+      if (!isOpen.value) {
         emit("beforeOpen");
-        if (!props.slide) {
+        if (props.slide) {
+          if (props.lazy) {
+            ifShow.value = true;
+          }
+          nextTick(() => {
+            set();
+            setOpenStyle();
+            startContentObserver();
+          });
+          if (props.afterOpen && Object.prototype.toString.call(props.afterOpen) === "[object Function]") {
+            props.afterOpen();
+          }
+          let timer = null;
+          timer = setTimeout(() => {
+            emit("opened");
+            clearTimeout(timer);
+            timer = null;
+          }, Number(props.speed));
+          isOpen.value = true;
+        } else {
           document.body.addEventListener("mousedown", blur);
           document.body.addEventListener("touchstart", blur);
-        }
-        if (!props.slide && by) {
-          if (by.clientX || by.touches && by.touches[0].clientX) {
-            link.value = by;
+          if (by) {
             if (by.clientX || by.touches && by.touches[0].clientX) {
-              event.value = "contextmenu";
-            }
-            if (by.type === "contextmenu") {
-              by.preventDefault();
+              link.value = by;
+              if (by.clientX || by.touches && by.touches[0].clientX) {
+                event.value = "contextmenu";
+              }
+              if (by.type === "contextmenu") {
+                by.preventDefault();
+              }
+            } else {
+              if (by instanceof HTMLElement) {
+                link.value = by;
+              } else {
+                getElementFromRef(by).then((element) => {
+                  link.value = element;
+                });
+              }
             }
-          } else {
-            link.value = by instanceof HTMLElement ? by : by.$refs.el;
           }
+          if (props.lazy) {
+            ifShow.value = true;
+          }
+          setTimeout(() => {
+            set(link.value);
+            startContentObserver();
+          }, 0);
+          if (props.afterOpen && Object.prototype.toString.call(props.afterOpen) === "[object Function]") {
+            props.afterOpen();
+          }
+          emit("opened");
+          isOpen.value = true;
         }
-        if (props.lazy) {
-          ifShow.value = true;
+      }
+    }
+    function setOpenStyle() {
+      var _a;
+      if (props.slide) {
+        if (iposition.value === "top") {
+          wrapper.value.style.transform = "translateY(-100%)";
+        }
+        if (iposition.value === "bottom") {
+          wrapper.value.style.transform = "translateY(100%)";
+        }
+        if (iposition.value === "right") {
+          wrapper.value.style.transform = "translateX(100%)";
+        }
+        if (iposition.value === "left") {
+          wrapper.value.style.transform = "translateX(-100%)";
         }
         setTimeout(() => {
-          show.value = true;
+          wrapper.value.style.transition = transitionTransform.value;
+          wrapper.value.style.transform = "translateY(0)";
+          setTimeout(() => {
+            wrapper.value.style.transform = "";
+          }, Number(props.speed));
         }, 0);
-        nextTick(() => {
-          set(link.value);
-          if (link.value && !("x" in link.value) && !("touches" in link.value)) {
-            setScrollStatus();
-          }
-          if (link.value) {
-            setMaskStyle();
-          }
+      } else {
+        el.value.style.transition = "none";
+        el.value.style.transform = "scale(1, 0)";
+        el.value.style.visibility = "visible";
+        requestAnimationFrame(() => {
+          el.value.style.transition = transitionTransform.value;
+          el.value.style.transform = "scale(1)";
+          setTimeout(() => {
+            el.value.style.transform = "";
+            el.value.style.transition = "";
+          }, Number(props.speed));
         });
-        if (props.afterOpen && Object.prototype.toString.call(props.afterOpen) === "[object Function]") {
-          props.afterOpen();
+      }
+      el.value.style.zIndex = (_a = window.$TouchUI) == null ? void 0 : _a.zIndex;
+    }
+    function close(e) {
+      if (e && el.value && e.target && typeof Node !== "undefined" && e.target instanceof Node && el.value.contains(e.target)) {
+        return;
+      }
+      if (isOpen.value) {
+        if (props.beforeClose) {
+          const fn = props.beforeClose();
+          if (fn && typeof fn.then === "function") {
+            fn.then(() => {
+              closeAction();
+            }).catch((error) => {
+              console.log(error);
+            });
+          } else {
+            if (fn)
+              closeAction();
+          }
+        } else {
+          closeAction();
         }
-        let timer = null;
-        timer = setTimeout(
-          () => {
-            emit("opened");
-            opened.value = true;
-            clearTimeout(timer);
-            timer = null;
-          },
-          props.slide ? 300 : 0
-        );
+      }
+    }
+    function closeAction() {
+      stopContentObserver();
+      if (!props.height && wrapper.value) {
+        wrapper.value.style.height = "";
+      }
+      isOver.value = false;
+      if (props.slide) {
+        setCloseStyle();
+        isOpen.value = false;
+      } else {
+        if (scrollNode.value) {
+          scrollNode.value.removeEventListener("scroll", close);
+        }
+        emit("beforeClose");
+        setCloseStyle();
+        isOpen.value = false;
+      }
+      setTimeout(() => {
+        if (props.lazy) {
+          ifShow.value = false;
+        }
+        emit("closed");
+        if (props.afterClose && Object.prototype.toString.call(props.afterClose) === "[object Function]") {
+          props.afterClose();
+        }
+      }, Number(props.speed));
+    }
+    function setCloseStyle() {
+      if (props.slide) {
+        if (iposition.value === "top") {
+          wrapper.value.style.transform = "translateY(-100%)";
+        }
+        if (iposition.value === "bottom") {
+          wrapper.value.style.transform = "translateY(100%)";
+        }
+        if (iposition.value === "right") {
+          wrapper.value.style.transform = "translateX(100%)";
+        }
+        if (iposition.value === "left") {
+          wrapper.value.style.transform = "translateX(-100%)";
+        }
+      } else {
+        el.value.style.transition = transitionTransform.value;
+        el.value.style.transform = "scale(1, 0)";
       }
     }
     function toggle(by) {
-      if (show.value) {
+      if (isOpen.value) {
         close();
       } else {
         if (by) {
@@ -377,6 +522,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     function blur(e) {
       if (!props.closeOnBlur)
         return;
+      if (el.value && e.target instanceof Node) {
+        const allFloats = Array.from(document.querySelectorAll(".to-float.is-show"));
+        const currentIdx = allFloats.indexOf(el.value);
+        for (let i = currentIdx + 1; i < allFloats.length; i++) {
+          if (allFloats[i].contains(e.target)) {
+            return;
+          }
+        }
+      }
       nextTick(() => {
         let node = e.target;
         if (event.value === "contextmenu") {
@@ -398,113 +552,116 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       });
     }
     function setScrollStatus() {
-      const searchNode = (Node) => {
-        if (Node.nodeName === "BODY") {
-          return Node;
-        } else {
-          if (Node.nodeName === "DIV" && typeof Node.className === "string" && Node.className.indexOf("to-scrollContent") > -1) {
-            return Node;
-          } else {
-            return searchNode(Node.parentNode);
-          }
-        }
-      };
-      if (link.value && "parentNode" in link.value && link.value.parentNode) {
-        scrollNode.value = searchNode(link.value.parentNode);
-        if (scrollNode.value) {
-          scrollNode.value.addEventListener("scroll", close);
-        }
-      }
+      document.body.addEventListener("scroll", close, { passive: true });
+      document.body.addEventListener("wheel", close, { passive: true });
     }
-    function setMaskStyle() {
-      let Node = null;
-      if (link.value && "parentNode" in link.value && link.value.parentNode) {
-        const searchNode = (Node2) => {
-          if (Node2.nodeName === "BODY") {
-            return Node2;
-          } else {
-            if (Node2.nodeName === "DIV" && typeof Node2.className === "string" && Node2.className.indexOf("to-dialog") > -1) {
-              return Node2;
-            } else {
-              return searchNode(Node2.parentNode);
-            }
-          }
-        };
-        Node = searchNode(link.value.parentNode);
-      }
-      if (Node && Node.className.indexOf("to-dialog") > -1) {
-        nextTick(() => {
-          var _a, _b, _c, _d;
-          if (mask.value) {
-            mask.value.style.width = "100vw";
-            mask.value.style.height = "100vh";
-            mask.value.style.position = "fixed";
-            const vc = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy;
-            if ((_b = vc == null ? void 0 : vc.$el) == null ? void 0 : _b.style.left) {
-              mask.value.style.left = parseInt(vc.$el.style.left, 10) * -1 + "px";
-            }
-            const top = parseInt((_c = vc == null ? void 0 : vc.$el) == null ? void 0 : _c.style.top, 10);
-            const bottom = parseInt((_d = vc == null ? void 0 : vc.$el) == null ? void 0 : _d.style.bottom, 10);
-            if (top) {
-              mask.value.style.top = top * -1 + "px";
-            }
-            if (bottom) {
-              mask.value.style.bottom = bottom * -1 + "px";
-            }
+    async function getElementFromRef(refOrNode) {
+      var _a;
+      await nextTick();
+      if (!refOrNode)
+        return null;
+      const val = (_a = refOrNode.value) != null ? _a : refOrNode;
+      if (!val)
+        return null;
+      if (val instanceof Element || val instanceof Text)
+        return val;
+      if (val.$el)
+        return val.$el;
+      if (val._vnode && val._vnode.el)
+        return val._vnode.el;
+      return null;
+    }
+    function startContentObserver() {
+      stopContentObserver();
+      if (content.value) {
+        contentObserver.value = new MutationObserver(() => {
+          if (isOpen.value) {
+            if (contentObserverTimer)
+              clearTimeout(contentObserverTimer);
+            contentObserverTimer = setTimeout(() => {
+              set(link.value, true);
+            }, 0);
           }
         });
+        contentObserver.value.observe(content.value, {
+          childList: true,
+          subtree: true,
+          characterData: true,
+          attributes: true,
+          attributeFilter: ["style", "class"]
+        });
       }
     }
-    onMounted(() => {
-      if (!props.slide) {
-        window.addEventListener("resize", resizeHandle, false);
-      }
-    });
-    onBeforeUnmount(() => {
-      var _a, _b;
-      if (!props.slide) {
-        document.body.removeEventListener("mousedown", blur);
-        document.body.removeEventListener("touchstart", blur);
-        window.removeEventListener("resize", resizeHandle);
+    function stopContentObserver() {
+      if (contentObserver.value) {
+        contentObserver.value.disconnect();
+        contentObserver.value = null;
       }
-      const vc = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy;
-      if ((_b = vc == null ? void 0 : vc.$el) == null ? void 0 : _b.parentNode) {
-        vc.$el.parentNode.removeChild(vc.$el);
+      if (contentObserverTimer) {
+        clearTimeout(contentObserverTimer);
+        contentObserverTimer = null;
       }
-    });
-    function resizeHandle() {
-      close();
     }
-    __expose({ open, close, toggle });
+    __expose({ open, close, toggle, set });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(Teleport, { to: "body" }, [
+      return openBlock(), createBlock(Teleport, {
+        to: "body",
+        disabled: !_ctx.global
+      }, [
         (_ctx.lazy ? ifShow.value : true) ? (openBlock(), createElementBlock("div", {
           key: 0,
           ref_key: "el",
           ref: el,
-          class: normalizeClass(["to-float", [...setClass.value, _ctx.$attrs.class]]),
-          style: normalizeStyle(setStyle.value),
+          class: normalizeClass(["to-float", [setClass.value, unref(attrs).class]]),
+          style: normalizeStyle([setStyle.value, unref(attrs).style]),
           onMousedown: ($event) => _ctx.$emit("click"),
           onTouchstart: ($event) => _ctx.$emit("click"),
           onMouseenter: ($event) => _ctx.$emit("mouseenter"),
-          onMouseleave: ($event) => _ctx.$emit("mouseleave")
+          onMouseleave: ($event) => _ctx.$emit("mouseleave"),
+          onClick: withModifiers(() => {
+          }, ["stop"])
         }, [
-          createElementVNode("div", {
-            ref_key: "mask",
-            ref: mask,
-            class: "to-float-mask",
-            onClick: maskClickHandle
-          }, null, 512),
-          createElementVNode("div", {
-            ref_key: "content",
-            ref: content,
-            class: "to-float-content",
-            style: normalizeStyle(setContentStyle.value)
-          }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 4)
-        ], 46, ["onMousedown", "onTouchstart", "onMouseenter", "onMouseleave"])) : createCommentVNode("", true)
-      ]);
+          props.mask ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              ref_key: "maskRef",
+              ref: maskRef,
+              class: "to-float-mask",
+              onClick: maskClickHandle
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          )) : createCommentVNode("v-if", true),
+          createElementVNode(
+            "div",
+            {
+              ref_key: "wrapper",
+              ref: wrapper,
+              class: "to-float-wrapper",
+              style: normalizeStyle(_ctx.slide ? wrapperStyle.value : null)
+            },
+            [
+              createElementVNode(
+                "div",
+                {
+                  ref_key: "content",
+                  ref: content,
+                  class: "to-float-content"
+                },
+                [
+                  renderSlot(_ctx.$slots, "default")
+                ],
+                512
+                /* NEED_PATCH */
+              )
+            ],
+            4
+            /* STYLE */
+          )
+        ], 46, ["onMousedown", "onTouchstart", "onMouseenter", "onMouseleave", "onClick"])) : createCommentVNode("v-if", true)
+      ], 8, ["disabled"]);
     };
   }
 });