bkui-vue 0.0.1-beta.208 → 0.0.1-beta.209

package/dist/index.esm.js

@@ -7564,7 +7564,7 @@ class BKPopIndexManager {
     }
   }
 }
-const bkPopIndexManager = new BKPopIndexManager();
+new BKPopIndexManager();
 /*!
  * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
  *
@@ -10199,7 +10199,8 @@ var Component$v = defineComponent({
   emits: ["quick-close", "quickClose", "hidden", "shown", "close"],
   data() {
     return {
-      visible: false
+      visible: false,
+      bkPopIndexManager: null
     };
   },
   computed: {
@@ -10236,31 +10237,34 @@ var Component$v = defineComponent({
           }, 250);
         }
       },
+      immediate: true,
       deep: true
     },
     visible(val) {
+      var _a, _b;
       if (val) {
+        this.bkPopIndexManager = new BKPopIndexManager();
+        this.bkPopIndexManager.onMaskClick((_e) => {
+          this.handleClickOutSide();
+        });
         this.$nextTick(() => {
           const hideMaskStyle = {
             "background-color": "rgba(0,0,0,0)"
           };
           const appendStyle = this.showMask ? {} : hideMaskStyle;
-          bkPopIndexManager.show(this.$el, this.showMask, appendStyle, this.transfer, this.zIndex);
+          this.bkPopIndexManager.show(this.$el, this.showMask, appendStyle, this.transfer, this.zIndex);
           this.$emit("shown");
         });
       } else {
-        bkPopIndexManager.hide(this.$el, this.transfer);
+        (_a = this.bkPopIndexManager) == null ? void 0 : _a.hide(this.$el, this.transfer);
+        (_b = this.bkPopIndexManager) == null ? void 0 : _b.destroy();
       }
     }
   },
-  created() {
-    bkPopIndexManager.onMaskClick((_e) => {
-      this.handleClickOutSide();
-    });
-  },
   beforeUnmount() {
-    bkPopIndexManager.hide(this.$el);
-    bkPopIndexManager.destroy();
+    var _a, _b;
+    (_a = this.bkPopIndexManager) == null ? void 0 : _a.hide(this.$el);
+    (_b = this.bkPopIndexManager) == null ? void 0 : _b.destroy();
   },
   methods: {
     handleClickOutSide() {
@@ -11195,7 +11199,7 @@ const nodeList = /* @__PURE__ */ new Map();
 const tooltips = {
   beforeMount(el, binding) {
     const opts = getOpts(binding);
-    const { trigger } = opts.value;
+    const { trigger } = opts;
     const popper2 = renderContent(opts);
     if (trigger === "hover") {
       let hideTimeout = null;
@@ -11229,11 +11233,14 @@ const tooltips = {
       });
     }
     nodeList.set(el, {
-      binding,
+      opts,
       popper: popper2,
       popperInstance: null
     });
   },
+  updated(el, binding) {
+    nodeList.get(el).opts = getOpts(binding);
+  },
   unmounted(el) {
     hide$1(el);
     nodeList.delete(el);
@@ -11258,16 +11265,16 @@ function initOptions() {
   return defaultOpts;
 }
 function getOpts(binding) {
-  const opts = ref(initOptions());
+  const opts = initOptions();
   if (typeof binding.value === "object") {
-    Object.assign(opts.value, binding.value);
+    Object.assign(opts, binding.value);
   } else {
-    opts.value.content = binding.value;
+    opts.content = binding.value;
   }
   return opts;
 }
 function renderContent(opts) {
-  const { content: value, arrow: hasArrow, theme, extCls } = opts.value;
+  const { content: value, arrow: hasArrow, theme, extCls } = opts;
   const isLight = theme === "light";
   const zIndex = bkZIndexManager.getPopperIndex();
   const content = document.createElement("div");
@@ -11287,8 +11294,8 @@ function renderArrow() {
   return arrow2;
 }
 function createPopperInstance(el, popper2) {
-  const { binding } = nodeList.get(el);
-  const { placement, distance: distance2, showOnInit } = getOpts(binding).value;
+  const { opts } = nodeList.get(el);
+  const { placement, distance: distance2, showOnInit } = opts;
   const popperInstance = createPopper(el, popper2, {
     placement,
     modifiers: [
@@ -11305,8 +11312,8 @@ function createPopperInstance(el, popper2) {
   return popperInstance;
 }
 function show(el) {
-  const { popper: popper2, binding } = nodeList.get(el);
-  const { disabled, content, arrow: hasArrow, onShow } = getOpts(binding).value;
+  const { popper: popper2, opts } = nodeList.get(el);
+  const { disabled, content, arrow: hasArrow, onShow } = opts;
   if (disabled)
     return;
   popper2.innerText = content;
@@ -11330,8 +11337,8 @@ function show(el) {
 function hide$1(el) {
   if (!nodeList.get(el))
     return;
-  const { popper: popper2, popperInstance, binding } = nodeList.get(el);
-  const { onHide } = getOpts(binding).value;
+  const { popper: popper2, popperInstance, opts } = nodeList.get(el);
+  const { onHide } = opts;
   if (popper2 && document.body.contains(popper2)) {
     popper2.removeAttribute("data-show");
     popperInstance == null ? void 0 : popperInstance.destroy();
@@ -16165,7 +16172,10 @@ const TABLE_ROW_ATTRIBUTE = {
   ROW_SELECTION_INDETERMINATE: "__row_selection_indeterminate",
   ROW_SOURCE_DATA: "__row_source_data"
 };
-const SCROLLY_WIDTH = 4;
+const COLUMN_ATTRIBUTE = {
+  COL_UID: "__col_$uuid"
+};
+const SCROLLY_WIDTH = 6;
 const LINE_HEIGHT = 42;
 const SETTING_SIZE = {
   large: 78,
@@ -17092,6 +17102,10 @@ const getElementTextWidth = (element, text) => {
   }
   return getTextWidth(text || (element == null ? void 0 : element.innerHTML), getCanvasFont(element));
 };
+const isColumnHidden = (settingFields, column, checked) => {
+  const isSettingField = (col) => settingFields.some((field) => field.field === resolvePropVal(col, ["field", "type"], [col]));
+  return isSettingField(column) && checked.length && !checked.includes(resolvePropVal(column, ["field", "type"], [column]));
+};
 var TableCell = defineComponent({
   name: "TableCell",
   props: {
@@ -17515,10 +17529,9 @@ var Settings = defineComponent({
       checkAll.value = !checkAll.value;
       const fields = localSettings.value.fields || props2.columns || [];
       if (checkAll.value) {
-        checkedFields.value = fields.map((item, index) => resolvedColVal(item, index));
+        checkedFields.value = fields.filter((f2) => !f2.disabled).map((item, index) => resolvedColVal(item, index));
       } else {
-        const readonlyFields = fields.filter((item) => item.disabled).map((item, index) => resolvedColVal(item, index));
-        checkedFields.value.splice(0, checkedFields.value.length, ...readonlyFields);
+        checkedFields.value.splice(0, checkedFields.value.length);
       }
     };
     const isLimit = computed(() => {
@@ -17662,54 +17675,75 @@ var useFixedColumn = (props2, colgroups, hasScrollY) => {
       return outOffset;
     }, hasScrollY ? SCROLLY_WIDTH : 0)
   };
-  const resolveFixRightOffset = resolveFixOffset.right;
-  const getFixedColumnStyleResolve = () => {
-    const resolveFixedColumnStyle = (column, fixedOffset2) => {
-      if (!column.fixed) {
-        return {};
+  const getPreColumnOffset = (fixedPos, column) => {
+    const sourceId = column[COLUMN_ATTRIBUTE.COL_UID];
+    const opt = fixedPos === "right" ? -1 : 1;
+    const {
+      length
+    } = colgroups;
+    let start2 = fixedPos === "right" ? length * opt : 1;
+    let preOffset = 0;
+    for (start2; ; ) {
+      start2 += -1 * opt;
+      const index = Math.abs(start2);
+      const current = colgroups[index];
+      const curFixedPos = resolveFixColPos(current);
+      const id = current[COLUMN_ATTRIBUTE.COL_UID];
+      if (curFixedPos === fixedPos && sourceId !== id) {
+        const width = getColumnReactWidth(current);
+        preOffset += width;
+      }
+      if (start2 === 0 || sourceId === id) {
+        break;
       }
-      const fixedPos = resolveFixColPos(column);
-      const opt = fixedPos === "right" ? -1 : 1;
-      const offsetX = `${fixedOffset2[fixedPos]}px`;
-      fixedOffset2[fixedPos] = fixedOffset2[fixedPos] + getColumnReactWidth(column) * opt;
-      return {
-        [fixedPos]: offsetX
-      };
-    };
-    const rightOffsetWidth = resolveFixRightOffset(true);
+    }
+    return preOffset;
+  };
+  const resolveFixedColumnStyle = (column) => {
+    if (!column.fixed) {
+      return {};
+    }
     const fixedOffset = {
       left: 0,
-      right: rightOffsetWidth
+      right: 0
     };
+    const fixedPos = resolveFixColPos(column);
+    fixedOffset[fixedPos] = getPreColumnOffset(fixedPos, column);
     return {
-      fixedOffset,
-      resolveFixedColumnStyle
+      [fixedPos]: `${fixedOffset[fixedPos]}px`
     };
   };
-  const renderFixedColumns = (scrollX, offsetRight) => {
-    const resolveColumnStyle = (colPos) => ({
-      width: `${resolveFixOffset[colPos](false)}px`,
-      bottom: `${footHeight.value}px`
-    });
-    const colPosExist = {
-      left: false,
-      right: false
+  const resolveColumnStyle = (colPos) => ({
+    width: `${resolveFixOffset[colPos](false)}px`,
+    bottom: `${footHeight.value}px`
+  });
+  const colPosExist = {
+    left: false,
+    right: false
+  };
+  const fixedColumns = computed(() => colgroups.filter((col) => !col.isHidden && col.fixed).map((col) => {
+    const colPos = resolveFixColPos(col);
+    const isExist = colPosExist[colPos];
+    colPosExist[colPos] = true;
+    return {
+      isExist,
+      colPos,
+      column: col
     };
-    return colgroups.filter((col) => !col.isHidden && col.fixed).map((col) => {
-      const colPos = resolveFixColPos(col);
-      const isExist = colPosExist[colPos];
-      colPosExist[colPos] = true;
-      return isExist ? "" : createVNode("div", {
-        "class": resolveColumnClass(col, scrollX, offsetRight),
-        "style": resolveColumnStyle(colPos)
-      }, null);
-    });
-  };
+  }));
+  const renderFixedColumns = (scrollX, offsetRight) => fixedColumns.value.map(({
+    isExist,
+    colPos,
+    column
+  }) => isExist ? "" : createVNode("div", {
+    "class": resolveColumnClass(column, scrollX, offsetRight),
+    "style": resolveColumnStyle(colPos)
+  }, null));
   const fixedWrapperClass = resolveClassName("table-fixed");
   return {
     renderFixedColumns,
     fixedWrapperClass,
-    getFixedColumnStyleResolve
+    resolveFixedColumnStyle
   };
 };
 function _isSlot$1(s2) {
@@ -17755,6 +17789,7 @@ class TableRender {
       return null;
     }
     const handleSettingsChanged = (arg) => {
+      var _a;
       const {
         checked = [],
         size,
@@ -17762,9 +17797,10 @@ class TableRender {
       } = arg;
       this.reactiveProp.setting.size = size;
       this.reactiveProp.setting.height = height;
+      const settingFields = ((_a = this.props.settings) == null ? void 0 : _a.fields) || [];
       if (checked.length) {
         this.colgroups.forEach((col) => {
-          col.isHidden = !(checked != null ? checked : []).includes(resolvePropVal(col, ["field", "type"], [col]));
+          col.isHidden = isColumnHidden(settingFields, col, checked);
         });
       }
       this.emitEvent(EVENTS$1.ON_SETTING_CHANGE, [arg]);
@@ -17937,12 +17973,8 @@ class TableRender {
       });
     }, {});
     const {
-      getFixedColumnStyleResolve
+      resolveFixedColumnStyle
     } = useFixedColumn(this.props, this.colgroups);
-    const {
-      resolveFixedColumnStyle,
-      fixedOffset
-    } = getFixedColumnStyleResolve();
     return createVNode("thead", {
       "style": rowStyle
     }, [createVNode(TableRow, null, {
@@ -17952,7 +17984,7 @@ class TableRender {
           "colspan": 1,
           "rowspan": 1,
           "class": this.getHeadColumnClass(column, index),
-          "style": resolveFixedColumnStyle(column, fixedOffset),
+          "style": resolveFixedColumnStyle(column),
           "onClick": () => this.handleColumnHeadClick(index)
         }, resolveEventListener(column)), [createVNode(TableCell, null, _isSlot$1(_slot = renderHeadCell(column, index)) ? _slot : {
           default: () => [_slot]
@@ -17962,17 +17994,13 @@ class TableRender {
   }
   renderTBody(rows) {
     const {
-      getFixedColumnStyleResolve
+      resolveFixedColumnStyle
     } = useFixedColumn(this.props, this.colgroups);
     return createVNode("tbody", null, [rows.map((row, rowIndex) => {
       const rowStyle = [...formatPropAsArray(this.props.rowStyle, [row, rowIndex, this]), {
         "--row-height": `${this.getRowHeight(row, rowIndex)}px`
       }];
       const rowClass = [...formatPropAsArray(this.props.rowClass, [row, rowIndex, this]), `hover-${this.props.rowHover}`];
-      const {
-        resolveFixedColumnStyle,
-        fixedOffset
-      } = getFixedColumnStyleResolve();
       const rowKey = row[TABLE_ROW_ATTRIBUTE.ROW_UID];
       return [createVNode(TableRow, {
         "key": rowKey
@@ -17984,7 +18012,7 @@ class TableRender {
           "onDblclick": (e) => this.handleRowDblClick(e, row, rowIndex, rows)
         }, [this.filterColgroups.map((column, index) => {
           let _slot2;
-          const cellStyle = [resolveFixedColumnStyle(column, fixedOffset), ...formatPropAsArray(this.props.cellStyle, [column, index, row, rowIndex, this])];
+          const cellStyle = [resolveFixedColumnStyle(column), ...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]
           }];
@@ -18460,12 +18488,12 @@ const useInit = (props2, targetColumns) => {
     var _a2, _b2;
     const checked = ((_a2 = props2.settings) == null ? void 0 : _a2.checked) || [];
     const settingFields = ((_b2 = props2.settings) == null ? void 0 : _b2.fields) || [];
-    const isSettingField = (col) => settingFields.some((field) => field.field === resolvePropVal(col, "field", [col]));
     colgroups.splice(0, colgroups.length, ...getColumns().map((col) => __spreadProps(__spreadValues({}, col), {
       calcWidth: null,
       resizeWidth: null,
       listeners: /* @__PURE__ */ new Map(),
-      isHidden: isSettingField(col) && checked.length && !checked.includes(resolvePropVal(col, ["field", "type"], [col]))
+      isHidden: isColumnHidden(settingFields, col, checked),
+      [COLUMN_ATTRIBUTE.COL_UID]: uuid_1.v4()
     })));
   };
   const { dragOffsetXStyle, dragOffsetX, resetResizeEvents, registerResizeEvent } = useColumnResize(colgroups, true);
@@ -18575,14 +18603,14 @@ const useInit = (props2, targetColumns) => {
       asyncSelection(row, selected, false);
     }
   };
-  const resolveSelectionRow = (row, thenFn = () => false) => {
+  const resolveSelectionRow = (row, thenFn = (row2) => validateSelectionFn(row2)) => {
     if (typeof props2.isSelectedFn === "function") {
       return Reflect.apply(props2.isSelectedFn, globalThis, [{ row, data: props2.data }]);
     }
     if (typeof props2.selectionKey === "string" && props2.selectionKey.length) {
       return lodash.exports.get(row, props2.selectionKey);
     }
-    return thenFn();
+    return thenFn(row);
   };
   const resolveSelection = (row, _rowId) => resolveSelectionRow(row, () => {
     var _a2;