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

package/dist/index.esm.js

@@ -10936,6 +10936,7 @@ const PopoverProps = __spreadValues({
   zIndex: PropTypes.number.def(void 0),
   disableTeleport: PropTypes.bool.def(false),
   autoPlacement: PropTypes.bool.def(false),
+  autoVisibility: PropTypes.bool.def(true),
   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",
@@ -15534,6 +15641,13 @@ var Component$c = defineComponent({
   }
 });
 const BkPagination = withInstall(Component$c);
+var TableRow = defineComponent({
+  name: "TableRow",
+  render() {
+    var _a, _b;
+    return createVNode(Fragment, null, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]);
+  }
+});
 var BodyEmpty = defineComponent({
   name: "BodyEmpty",
   props: {
@@ -16182,7 +16296,7 @@ class TableRender {
     this.reactiveProp = reactiveProp;
     this.colgroups = colgroups;
     this.plugins = new TablePlugins(props, ctx);
-    this.uuid = random(8);
+    this.uuid = uuid_1.v4();
     this.events = /* @__PURE__ */ new Map();
   }
   get propActiveCols() {
@@ -16232,7 +16346,8 @@ class TableRender {
     }
     return createVNode("table", {
       "cellpadding": 0,
-      "cellspacing": 0
+      "cellspacing": 0,
+      "data-table-uuid": this.uuid
     }, [this.renderColGroup(), this.renderTBody(rows)]);
   }
   renderTableFooter(options) {
@@ -16364,15 +16479,17 @@ class TableRender {
     } = getFixedColumnStyleResolve();
     return createVNode("thead", {
       "style": rowStyle
-    }, [createVNode("tr", null, [this.filterColgroups.map((column, index) => createVNode("th", mergeProps({
-      "colspan": 1,
-      "rowspan": 1,
-      "class": this.getHeadColumnClass(column, index),
-      "style": resolveFixedColumnStyle(column, fixedoffset),
-      "onClick": () => this.handleColumnHeadClick(index)
-    }, resolveEventListener(column)), [createVNode("div", {
-      "class": "cell"
-    }, [renderHeadCell(column, index)])]))])]);
+    }, [createVNode(TableRow, null, {
+      default: () => [createVNode("tr", null, [this.filterColgroups.map((column, index) => createVNode("th", mergeProps({
+        "colspan": 1,
+        "rowspan": 1,
+        "class": this.getHeadColumnClass(column, index),
+        "style": resolveFixedColumnStyle(column, fixedoffset),
+        "onClick": () => this.handleColumnHeadClick(index)
+      }, resolveEventListener(column)), [createVNode("div", {
+        "class": "cell"
+      }, [renderHeadCell(column, index)])]))])]
+    })]);
   }
   renderTBody(rows) {
     const {
@@ -16387,49 +16504,60 @@ class TableRender {
         resolveFixedColumnStyle,
         fixedoffset
       } = getFixedColumnStyleResolve();
-      return [createVNode("tr", {
-        "style": rowStyle,
-        "class": rowClass,
-        "key": row[TABLE_ROW_ATTRIBUTE.ROW_UID],
-        "onClick": (e) => this.handleRowClick(e, row, rowIndex, rows),
-        "onDblclick": (e) => this.handleRowDblClick(e, row, rowIndex, rows)
-      }, [this.filterColgroups.map((column, index) => {
-        const cellStyle = [resolveFixedColumnStyle(column, fixedoffset), ...formatPropAsArray(this.props.cellStyle, [column, index, row, rowIndex, this])];
-        const cellClass = [this.getColumnClass(column, index), ...formatPropAsArray(this.props.cellClass, [column, index, row, rowIndex, this]), {
-          "expand-row": row[TABLE_ROW_ATTRIBUTE.ROW_EXPAND]
-        }];
-        const tdCtxClass = {
-          cell: true,
-          "expand-cell": column.type === "expand"
-        };
-        const cellKey = `__CELL_${rowIndex}_${index}`;
-        return createVNode("td", {
-          "key": cellKey,
-          "class": cellClass,
-          "style": cellStyle,
-          "colspan": 1,
-          "rowspan": 1
-        }, [createVNode("div", {
-          "class": tdCtxClass
-        }, [this.renderCell(row, column, rowIndex, rows)])]);
-      })]), this.renderExpandRow(row, rowClass)];
+      const rowKey = `${this.uuid}-${row[TABLE_ROW_ATTRIBUTE.ROW_UID]}`;
+      return [createVNode(TableRow, {
+        "key": rowKey
+      }, {
+        default: () => [createVNode("tr", {
+          "style": rowStyle,
+          "class": rowClass,
+          "onClick": (e) => this.handleRowClick(e, row, rowIndex, rows),
+          "onDblclick": (e) => this.handleRowDblClick(e, row, rowIndex, rows)
+        }, [this.filterColgroups.map((column, index) => {
+          const cellStyle = [resolveFixedColumnStyle(column, fixedoffset), ...formatPropAsArray(this.props.cellStyle, [column, index, row, rowIndex, this])];
+          const cellClass = [this.getColumnClass(column, index), ...formatPropAsArray(this.props.cellClass, [column, index, row, rowIndex, this]), {
+            "expand-row": row[TABLE_ROW_ATTRIBUTE.ROW_EXPAND]
+          }];
+          const tdCtxClass = {
+            cell: true,
+            "expand-cell": column.type === "expand"
+          };
+          const cellKey = `__CELL_${rowIndex}_${index}`;
+          return createVNode("td", {
+            "class": cellClass,
+            "style": cellStyle,
+            "key": cellKey,
+            "colspan": 1,
+            "rowspan": 1
+          }, [createVNode("div", {
+            "class": tdCtxClass
+          }, [this.renderCell(row, column, rowIndex, rows)])]);
+        })])]
+      }), this.renderExpandRow(row, rowClass)];
     })]);
   }
   renderExpandRow(row, rowClass) {
-    var _a, _b, _c;
     const isExpand = !!row[TABLE_ROW_ATTRIBUTE.ROW_EXPAND];
     if (isExpand) {
       const resovledClass = [...rowClass, {
         row_expend: true
       }];
-      return createVNode("tr", {
-        "class": resovledClass
-      }, [createVNode("td", {
-        "colspan": this.filterColgroups.length,
-        "rowspan": 1
-      }, [(_c = (_b = (_a = this.context.slots).expandRow) == null ? void 0 : _b.call(_a, row)) != null ? _c : createVNode("div", {
-        "class": "expand-cell-ctx"
-      }, [createTextVNode("Expand Row")])])]);
+      const rowKey = `${this.uuid}-${row[TABLE_ROW_ATTRIBUTE.ROW_UID]}_expand`;
+      return createVNode(TableRow, {
+        "key": rowKey
+      }, {
+        default: () => {
+          var _a, _b, _c;
+          return [createVNode("tr", {
+            "class": resovledClass
+          }, [createVNode("td", {
+            "colspan": this.filterColgroups.length,
+            "rowspan": 1
+          }, [(_c = (_b = (_a = this.context.slots).expandRow) == null ? void 0 : _b.call(_a, row)) != null ? _c : createVNode("div", {
+            "class": "expand-cell-ctx"
+          }, [createTextVNode("Expand Row")])])])];
+        }
+      });
     }
   }
   handleRowClick(e, row, index, rows) {
@@ -18546,7 +18674,13 @@ const Message$1 = (constructor, options) => {
   };
   render(vm, container2);
   instances[position].push(vm);
-  document.body.appendChild(container2.firstElementChild);
+  let target;
+  if (vm.props.getContainer && isElement$2(vm.props.getContainer)) {
+    target = vm.props.getContainer;
+  } else {
+    target = document.body;
+  }
+  target.appendChild(container2.firstElementChild);
 };
 function close(id, position, spacing, userOnClose) {
   userOnClose == null ? void 0 : userOnClose();
@@ -18575,7 +18709,8 @@ const messageProps = {
   offsetY: PropTypes.number.def(30),
   spacing: PropTypes.number.def(10),
   extCls: PropTypes.string.def(""),
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  getContainer: PropTypes.instanceOf(HTMLElement)
 };
 var MessageConstructor = defineComponent({
   name: "Message",
@@ -18586,9 +18721,11 @@ var MessageConstructor = defineComponent({
   }) {
     const classNames = computed(() => ["bk-message", `bk-message-${props.theme}`, `${props.extCls}`]);
     const zIndex = bkZIndexManager.getMessageNextIndex();
+    const isGetContainer = computed(() => props.getContainer && isElement$2(props.getContainer));
     const styles = computed(() => ({
       top: `${props.offsetY}px`,
-      zIndex
+      zIndex,
+      position: isGetContainer.value ? "absolute" : "fixed"
     }));
     const visible = ref(false);
     let timer = null;