bkui-vue 0.0.1-beta.101 → 0.0.1-beta.102

package/dist/index.esm.js

@@ -10934,8 +10934,9 @@ const PopoverProps = __spreadValues({
   offset: PropTypes.number.def(6),
   boundary: PropTypes.string.def(void 0),
   zIndex: PropTypes.number.def(void 0),
-  disableTeleport: PropTypes.bool.def(false),
+  disableTeleport: PropTypes.bool.def(true),
   autoPlacement: PropTypes.bool.def(false),
+  autoVisibility: PropTypes.bool.def(false),
   disableOutsideClick: PropTypes.bool.def(false)
 }, EventProps$1);
 var Reference = defineComponent({
@@ -12197,14 +12198,27 @@ var useFloating = (props, ctx, refReference, refContent, refArrow) => {
       elArrow
     };
   };
-  const resolvePopOptions = (elArrow) => ({
-    placement: props.placement,
-    middleware: [inline(), offset(props.offset), props.autoPlacement ? autoPlacement() : flip(), shift({
+  const resolvePopOptions = (elArrow) => {
+    const middleware = [offset(props.offset), shift({
       padding: props.padding
     }), arrow({
       element: elArrow
-    }), hide()]
-  });
+    })];
+    const options = {
+      placement: props.placement,
+      middleware
+    };
+    if (props.autoPlacement) {
+      middleware.push(autoPlacement());
+    } else {
+      middleware.unshift(inline());
+      middleware.push(flip());
+    }
+    if (props.autoVisibility) {
+      options.middleware.push(hide());
+    }
+    return options;
+  };
   const resolveTargetElement = (target) => {
     if (target instanceof HTMLElement) {
       return target;
@@ -12220,6 +12234,119 @@ var useFloating = (props, ctx, refReference, refContent, refArrow) => {
   }, out), {});
   const contentClass = `${customThemeCls}`;
   let cleanup = null;
+  const getRoundPixelVal = (val) => {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(val * dpr) / dpr || 0;
+  };
+  const isElementFullScreen = () => document.fullscreenElement !== null;
+  const updatePopContentStyle = (elContent, x2, y2, resolvedPlacement, middlewareData, elReference) => {
+    const {
+      left: left2,
+      top: top2
+    } = elReference.getBoundingClientRect();
+    const resolveFullscreenOffsetX = (xValue) => {
+      if (["left", "right"].includes(resolvedPlacement)) {
+        return getRoundPixelVal(xValue);
+      }
+      return left2;
+    };
+    const resolveFullscreenOffsetY = (yValue) => {
+      if (["top", "bottom"].includes(resolvedPlacement)) {
+        return getRoundPixelVal(yValue);
+      }
+      return top2;
+    };
+    const getOffsetX = () => {
+      if (isElementFullScreen()) {
+        return resolveFullscreenOffsetX(x2);
+      }
+      return getRoundPixelVal(x2);
+    };
+    const getOffsetY = () => {
+      if (isElementFullScreen()) {
+        return resolveFullscreenOffsetY(y2);
+      }
+      return getRoundPixelVal(y2);
+    };
+    Object.assign(elContent.style, {
+      left: "0",
+      top: "0",
+      transform: `translate3d(${getOffsetX()}px,${getOffsetY()}px,0)`
+    });
+    if (props.autoVisibility) {
+      const {
+        referenceHidden
+      } = middlewareData.hide;
+      Object.assign(elContent.style, {
+        visibility: referenceHidden ? "hidden" : "visible"
+      });
+    }
+  };
+  const updateArrowStyle = (elArrow, resolvedPlacement, middlewareData, elReference) => {
+    const {
+      left: left2,
+      top: top2,
+      bottom: bottom2,
+      right: right2
+    } = elReference.getBoundingClientRect();
+    if (props.arrow) {
+      const {
+        x: arrowX,
+        y: arrowY
+      } = middlewareData.arrow;
+      const staticPrefix = {
+        top: 1,
+        right: -1,
+        bottom: -1,
+        left: 1
+      }[resolvedPlacement];
+      const getStaticSidePos = (val, pos, defaultVal) => {
+        var _a, _b;
+        const staticSide = (_b = (_a = {
+          x: {
+            left: "right",
+            right: "left"
+          },
+          y: {
+            top: "bottom",
+            bottom: "top"
+          }
+        }[pos]) == null ? void 0 : _a[resolvedPlacement]) != null ? _b : defaultVal;
+        return [val, staticSide];
+      };
+      const getFullScreenOffset = (arrowValue) => {
+        if (isElementFullScreen()) {
+          if (["left", "right"].includes(resolvedPlacement)) {
+            return getRoundPixelVal((bottom2 - top2) / 2) - 2;
+          }
+          if (["top", "bottom"].includes(resolvedPlacement)) {
+            return getRoundPixelVal((right2 - left2) / 2) - 2;
+          }
+        }
+        return isNumber(arrowValue) ? getRoundPixelVal(arrowValue) : 0;
+      };
+      const getOffsetX = () => {
+        if (["left", "right"].includes(resolvedPlacement)) {
+          return staticPrefix * 4;
+        }
+        return getFullScreenOffset(arrowX);
+      };
+      const getOffsetY = () => {
+        if (["top", "bottom"].includes(resolvedPlacement)) {
+          return staticPrefix * 4;
+        }
+        return getFullScreenOffset(arrowY);
+      };
+      elArrow.setAttribute("data-arrow", resolvedPlacement);
+      const [offsetX, xPos] = getStaticSidePos(getOffsetX(), "x", "left");
+      const [offsetY, yPos] = getStaticSidePos(getOffsetY(), "y", "top");
+      Object.assign(elArrow.style, {
+        [xPos]: "0",
+        [yPos]: "0",
+        transform: `translate(${offsetX}px,${offsetY}px) rotate(45deg)`
+      });
+    }
+  };
   const updatePopover = () => {
     const {
       elReference,
@@ -12239,35 +12366,13 @@ var useFloating = (props, ctx, refReference, refContent, refArrow) => {
         Object.keys(customTheme).forEach((key) => {
           elContent.setAttribute(key, customTheme[key]);
         });
-        const {
-          referenceHidden
-        } = middlewareData.hide;
-        Object.assign(elContent.style, {
-          left: `${x2}px`,
-          top: `${y2}px`,
-          visibility: referenceHidden ? "hidden" : "visible"
-        });
-        if (props.arrow) {
-          const {
-            x: arrowX,
-            y: arrowY
-          } = middlewareData.arrow;
-          const placementStr = placement.split("-")[0];
-          const staticSide = {
-            top: "bottom",
-            right: "left",
-            bottom: "top",
-            left: "right"
-          }[placementStr];
-          elArrow.setAttribute("data-arrow", placementStr);
-          Object.assign(elArrow.style, {
-            left: isNumber(arrowX) ? `${arrowX}px` : "",
-            top: isNumber(arrowY) ? `${arrowY}px` : "",
-            right: "",
-            bottom: "",
-            [staticSide]: "-4px"
-          });
+        const placementStr = placement.split("-")[0];
+        let resolvedPlacement = placementStr;
+        if (!["left", "right", "top", "bottom"].includes(placementStr)) {
+          resolvedPlacement = "top";
         }
+        updatePopContentStyle(elContent, x2, y2, resolvedPlacement, middlewareData, elReference);
+        updateArrowStyle(elArrow, resolvedPlacement, middlewareData, elReference);
       });
     });
   };
@@ -12332,6 +12437,7 @@ var useFloating = (props, ctx, refReference, refContent, refArrow) => {
     updatePopover,
     triggerPopover,
     resolvePopElements,
+    isElementFullScreen,
     localIsShow,
     cleanup
   };
@@ -12370,9 +12476,9 @@ var Component$n = defineComponent({
     const {
       content,
       theme,
-      disableTeleport,
       width,
-      height
+      height,
+      disableTeleport
     } = props;
     const refReference = ref();
     const refContent = ref();
@@ -12385,6 +12491,7 @@ var Component$n = defineComponent({
       resolveTriggerEvents,
       updatePopover,
       resolvePopElements,
+      isElementFullScreen,
       cleanup
     } = useFloating(props, ctx, refReference, refContent, refArrow);
     const show = () => {
@@ -12461,7 +12568,6 @@ var Component$n = defineComponent({
     } = usePopperId();
     const boundary = typeof props.boundary === "string" ? props.boundary : prefixId;
     const handleClickOutside = (_e) => {
-      console.log("handleClickOutside", localIsShow.value);
       ctx.emit(EMITEVENTS$1.CLICK_OUTSIDE, {
         isShow: localIsShow.value
       });
@@ -12472,6 +12578,7 @@ var Component$n = defineComponent({
         hide2();
       }
     };
+    const transBoundary = computed(() => !isElementFullScreen() && !disableTeleport);
     return {
       boundary,
       arrow: props.arrow,
@@ -12480,7 +12587,7 @@ var Component$n = defineComponent({
       refArrow,
       content,
       theme,
-      disableTeleport,
+      transBoundary,
       width,
       height,
       handleClickOutside
@@ -12496,7 +12603,7 @@ var Component$n = defineComponent({
       }
     }), createVNode(Teleport, {
       "to": this.boundary,
-      "disabled": this.disableTeleport
+      "disabled": !this.transBoundary
     }, {
       default: () => [withDirectives(createVNode(Content, {
         "ref": "refContent",