bkui-vue 0.0.1-beta.187 → 0.0.1-beta.188

package/dist/index.esm.js

@@ -16018,6 +16018,7 @@ var EVENTS$1 = /* @__PURE__ */ ((EVENTS2) => {
   EVENTS2["ON_FILTER_CLICK"] = "onFilterClick";
   EVENTS2["ON_SETTING_CHANGE"] = "onSettingChange";
   EVENTS2["ON_ROW_EXPAND_CLICK"] = "onRowExpandClick";
+  EVENTS2["ON_ROW_CHECK"] = "onRowCheck";
   return EVENTS2;
 })(EVENTS$1 || {});
 var EMITEVENTS = /* @__PURE__ */ ((EMITEVENTS2) => {
@@ -16032,6 +16033,9 @@ var EMITEVENTS = /* @__PURE__ */ ((EMITEVENTS2) => {
   EMITEVENTS2["PAGE_VALUE_CHANGE"] = "pageValueChange";
   EMITEVENTS2["SETTING_CHANGE"] = "settingChange";
   EMITEVENTS2["SCROLL_BOTTOM"] = "scrollBottom";
+  EMITEVENTS2["ROW_SELECT"] = "select";
+  EMITEVENTS2["ROW_SELECT_ALL"] = "selectAll";
+  EMITEVENTS2["ROW_SELECT_CHANGE"] = "selectionChange";
   return EMITEVENTS2;
 })(EMITEVENTS || {});
 const EMPTY$1 = (..._args) => true;
@@ -16039,19 +16043,24 @@ const EMIT_EVENT_TYPES = {
   ["columnPick"]: EMPTY$1,
   ["columnFilter"]: EMPTY$1,
   ["columnSort"]: EMPTY$1,
+  ["colFilterSave"]: EMPTY$1,
   ["rowClick"]: EMPTY$1,
   ["rowDblclick"]: EMPTY$1,
   ["rowExpand"]: EMPTY$1,
+  ["select"]: EMPTY$1,
+  ["selectAll"]: EMPTY$1,
+  ["selectionChange"]: EMPTY$1,
   ["pageLimitChange"]: EMPTY$1,
   ["pageValueChange"]: EMPTY$1,
   ["settingChange"]: EMPTY$1,
-  ["scrollBottom"]: EMPTY$1,
-  ["colFilterSave"]: EMPTY$1
+  ["scrollBottom"]: EMPTY$1
 };
 const TABLE_ROW_ATTRIBUTE = {
   ROW_INDEX: "__$table_row_index",
   ROW_UID: "__$uuid",
-  ROW_EXPAND: "__row_expand"
+  ROW_EXPAND: "__row_expand",
+  ROW_SELECTION: "__row_selection",
+  ROW_SELECTION_ALL: "__row_selection_all"
 };
 const SCROLLY_WIDTH = 4;
 const LINE_HEIGHT = 42;
@@ -16082,7 +16091,7 @@ const IColumnType = {
     content: PropTypes.string.def(""),
     disabled: PropTypes.bool.def(false),
     watchCellResize: PropTypes.bool.def(true)
-  })]).def(false),
+  })]).def(void 0),
   type: PropTypes.commonType(["selection", "index", "expand", "none"], "columnType").def("none"),
   resizable: PropTypes.bool.def(true),
   fixed: PropTypes.oneOfType([
@@ -16154,10 +16163,18 @@ const tableProps = {
     PropTypes.bool
   ]).def(void 0),
   reserveExpand: PropTypes.bool.def(false),
+  selectionKey: PropTypes.string.def(""),
+  isSelectedFn: PropTypes.func.def(void 0),
   rowKey: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func
-  ]).def(TABLE_ROW_ATTRIBUTE.ROW_INDEX)
+  ]).def(TABLE_ROW_ATTRIBUTE.ROW_INDEX),
+  showOverflowTooltip: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+    content: PropTypes.string.def(""),
+    disabled: PropTypes.bool.def(false),
+    watchCellResize: PropTypes.bool.def(true)
+  })]).def(false),
+  asyncData: PropTypes.bool.def(false)
 };
 var Column = defineComponent({
   name: "TableColumn",
@@ -16202,7 +16219,7 @@ const resolvePaginationOption = (propPagination, defVal) => {
   }
   return {};
 };
-var userPagination = (props2, indexData) => {
+var usePagination = (props2, indexData) => {
   const startIndex = ref(0);
   const endIndex = ref(0);
   let pagination2 = reactive({
@@ -16925,13 +16942,7 @@ const getRowKey = (item, props2, index) => {
     if (props2.rowKey === TABLE_ROW_ATTRIBUTE.ROW_INDEX) {
       return `__ROW_INDEX_${index}`;
     }
-    const keys = props2.rowKey.split(".");
-    return keys.reduce((pre, cur) => {
-      if (Object.prototype.hasOwnProperty.call(pre, cur)) {
-        return pre[cur];
-      }
-      return pre;
-    }, item);
+    return lodash.exports.get(item, props2.rowKey);
   }
   if (typeof props2.rowKey === "function") {
     return Reflect.apply(props2.rowKey, globalThis, [item]);
@@ -16970,16 +16981,29 @@ var TableCell = defineComponent({
   name: "TableCell",
   props: {
     column: PropTypes.any.def({}),
-    row: PropTypes.any.def({})
+    row: PropTypes.any.def({}),
+    parentSetting: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+      content: PropTypes.string.def(""),
+      disabled: PropTypes.bool.def(false),
+      watchCellResize: PropTypes.bool.def(true)
+    })]).def(void 0)
   },
   setup(props2, {
     slots
   }) {
     const refRoot = ref();
     const isTipsEnabled = ref(false);
+    const resolveSetting = () => {
+      if (/boolean|object/.test(props2.column.showOverflowTooltip) && props2.column.showOverflowTooltip !== null) {
+        return props2.column;
+      }
+      return {
+        showOverflowTooltip: props2.parentSetting
+      };
+    };
     const {
       showOverflowTooltip = false
-    } = props2.column || {};
+    } = resolveSetting();
     let observerIns = null;
     let bkEllipsisIns = null;
     const resolveTooltipOption = () => {
@@ -17752,6 +17776,9 @@ class TableRender {
       "--row-height": `${resolvePropVal(config, "height", ["thead"])}px`
     };
     const renderHeadCell = (column, index) => {
+      if (column.type === "selection") {
+        return this.renderCheckboxColumn({}, 0, true);
+      }
       const cells = [];
       if (column.sort) {
         cells.push(this.getSortCell(column, index));
@@ -17840,7 +17867,8 @@ class TableRender {
           }, [createVNode(TableCell, {
             "class": tdCtxClass,
             "column": column,
-            "row": row
+            "row": row,
+            "parentSetting": this.props.showOverflowTooltip
           }, _isSlot$1(_slot2 = this.renderCell(row, column, rowIndex, rows)) ? _slot2 : {
             default: () => [_slot2]
           })]);
@@ -17891,38 +17919,64 @@ class TableRender {
       e
     }]);
   }
-  renderCell(row, column, index, rows) {
-    if (column.type === "expand") {
-      const renderExpandSlot = () => {
-        var _a, _b, _c;
-        if (typeof column.render === "function") {
-          return column.render(null, row, index, rows);
-        }
-        return (_c = (_b = (_a = this.context.slots).expandCell) == null ? void 0 : _b.call(_a, {
-          row,
-          column,
-          index,
-          rows
-        })) != null ? _c : this.getExpandCell(row);
-      };
-      return createVNode("span", {
-        "class": "expand-btn-action",
-        "onClick": (e) => this.handleRowExpandClick(row, column, index, rows, e)
-      }, [renderExpandSlot()]);
-    }
+  renderCellCallbackFn(row, column, index, rows) {
     const cell = getRowText(row, resolvePropVal(column, "field", [column, row]), column);
-    if (typeof column.render === "function") {
-      const data2 = this.props.data[row[TABLE_ROW_ATTRIBUTE.ROW_INDEX]];
-      return column.render({
-        cell,
-        data: data2,
+    const data2 = this.props.data[row[TABLE_ROW_ATTRIBUTE.ROW_INDEX]];
+    return column.render({
+      cell,
+      data: data2,
+      row,
+      column,
+      index,
+      rows
+    });
+  }
+  renderCheckboxColumn(row, index, isAll = false) {
+    const handleChecked = (value) => {
+      this.emitEvent(EVENTS$1.ON_ROW_CHECK, [{
+        row,
+        index,
+        isAll,
+        value
+      }]);
+    };
+    return createVNode(BkCheckbox, {
+      "onChange": handleChecked,
+      "modelValue": row[TABLE_ROW_ATTRIBUTE.ROW_SELECTION]
+    }, null);
+  }
+  renderExpandColumn(row, column, index, rows) {
+    const renderExpandSlot = () => {
+      var _a, _b, _c;
+      if (typeof column.render === "function") {
+        return this.renderCellCallbackFn(row, column, index, rows);
+      }
+      return (_c = (_b = (_a = this.context.slots).expandCell) == null ? void 0 : _b.call(_a, {
         row,
         column,
         index,
         rows
-      });
-    }
-    return cell;
+      })) != null ? _c : this.getExpandCell(row);
+    };
+    return createVNode("span", {
+      "class": "expand-btn-action",
+      "onClick": (e) => this.handleRowExpandClick(row, column, index, rows, e)
+    }, [renderExpandSlot()]);
+  }
+  renderCell(row, column, index, rows) {
+    var _a, _b;
+    const defaultFn = () => {
+      const cell = getRowText(row, resolvePropVal(column, "field", [column, row]), column);
+      if (typeof column.render === "function") {
+        return this.renderCellCallbackFn(row, column, index, rows);
+      }
+      return cell;
+    };
+    const renderFn = {
+      expand: (row2, column2, index2, rows2) => this.renderExpandColumn(row2, column2, index2, rows2),
+      selection: (row2, _column, index2, _rows) => this.renderCheckboxColumn(row2, index2)
+    };
+    return (_b = (_a = renderFn[column.type]) == null ? void 0 : _a.call(renderFn, row, column, index, rows)) != null ? _b : defaultFn();
   }
   isColActive(colIndex) {
     return this.props.columnPick !== "disabled" && this.propActiveCols.some((col) => col.index === colIndex && col.active);
@@ -18307,6 +18361,57 @@ const useInit = (props2, targetColumns) => {
     reactiveSchema.rowActions.set(rowId, Object.assign({}, (_a2 = reactiveSchema.rowActions.get(rowId)) != null ? _a2 : {}, { isExpand }));
     updateIndexData();
   };
+  const isSelectionAll = () => {
+    if (reactiveSchema.rowActions.has(TABLE_ROW_ATTRIBUTE.ROW_SELECTION_ALL)) {
+      return reactiveSchema.rowActions.get(TABLE_ROW_ATTRIBUTE.ROW_SELECTION_ALL);
+    }
+    if (!!props2.selectionKey) {
+      return indexData.every((row) => resolveSelectionRow(row));
+    }
+    return false;
+  };
+  const toggleAllSelection = (checked = void 0) => {
+    const isChecked = typeof checked === "boolean" ? checked : !isSelectionAll();
+    reactiveSchema.rowActions.set(TABLE_ROW_ATTRIBUTE.ROW_SELECTION_ALL, isChecked);
+    updateIndexData();
+    asyncSelection(null, checked, true);
+  };
+  const clearSelection = () => {
+    toggleAllSelection(false);
+  };
+  const toggleRowSelection = (row, selected) => {
+    var _a2;
+    const rowId = row[TABLE_ROW_ATTRIBUTE.ROW_UID];
+    if (rowId) {
+      const isSelected = typeof selected === "boolean" ? selected : !resolveSelection(row, rowId);
+      const target = Object.assign({}, (_a2 = reactiveSchema.rowActions.get(rowId)) != null ? _a2 : {}, { isSelected });
+      reactiveSchema.rowActions.set(rowId, target);
+      updateIndexData();
+      asyncSelection(row, selected, false);
+    }
+  };
+  const resolveSelectionRow = (row, thenFn = () => false) => {
+    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();
+  };
+  const resolveSelection = (row, rowId) => resolveSelectionRow(row, () => {
+    var _a2;
+    if (isSelectionAll()) {
+      return true;
+    }
+    if (reactiveSchema.rowActions.has(rowId)) {
+      return (_a2 = reactiveSchema.rowActions.get(rowId)) == null ? void 0 : _a2.isSelected;
+    }
+    if (Object.prototype.hasOwnProperty.call(row, TABLE_ROW_ATTRIBUTE.ROW_SELECTION) && typeof row[TABLE_ROW_ATTRIBUTE.ROW_SELECTION] === "boolean") {
+      return row[TABLE_ROW_ATTRIBUTE.ROW_SELECTION];
+    }
+    return false;
+  });
   const indexData = reactive([]);
   const initIndexData = (keepLocalAction = false) => {
     indexData.splice(0, indexData.length, ...props2.data.map((item, index) => {
@@ -18314,17 +18419,35 @@ const useInit = (props2, targetColumns) => {
       return __spreadProps(__spreadValues({}, item), {
         [TABLE_ROW_ATTRIBUTE.ROW_INDEX]: index,
         [TABLE_ROW_ATTRIBUTE.ROW_UID]: rowId,
-        [TABLE_ROW_ATTRIBUTE.ROW_EXPAND]: keepLocalAction ? isRowExpand(rowId) : false
+        [TABLE_ROW_ATTRIBUTE.ROW_EXPAND]: keepLocalAction ? isRowExpand(rowId) : false,
+        [TABLE_ROW_ATTRIBUTE.ROW_SELECTION]: resolveSelection(item, rowId)
       });
     }));
   };
   const updateIndexData = () => {
     indexData.forEach((item) => {
       Object.assign(item, {
-        [TABLE_ROW_ATTRIBUTE.ROW_EXPAND]: isRowExpand(item[TABLE_ROW_ATTRIBUTE.ROW_UID])
+        [TABLE_ROW_ATTRIBUTE.ROW_EXPAND]: isRowExpand(item[TABLE_ROW_ATTRIBUTE.ROW_UID]),
+        [TABLE_ROW_ATTRIBUTE.ROW_SELECTION]: resolveSelection(item, item[TABLE_ROW_ATTRIBUTE.ROW_UID])
       });
     });
   };
+  const asyncSelection = (row, value, all = false) => {
+    if (props2.asyncData && props2.rowKey) {
+      if (all) {
+        props2.data.forEach((item) => {
+          if (lodash.exports.has(item, props2.selectionKey)) {
+            lodash.exports.set(item, props2.selectionKey, !!value);
+          }
+        });
+      } else {
+        if (lodash.exports.has(row, props2.selectionKey)) {
+          const target = props2.data.find((item) => lodash.exports.get(item, props2.rowKey) === lodash.exports.get(row, props2.rowKey));
+          lodash.exports.set(target, props2.selectionKey, !!value);
+        }
+      }
+    }
+  };
   const { renderFixedColumns, fixedWrapperClass } = useFixedColumn(props2, colgroups, false);
   return {
     colgroups,
@@ -18337,7 +18460,10 @@ const useInit = (props2, targetColumns) => {
     updateIndexData,
     renderFixedColumns,
     setRowExpand,
-    updateColGroups
+    updateColGroups,
+    clearSelection,
+    toggleAllSelection,
+    toggleRowSelection
   };
 };
 var Component$d = defineComponent({
@@ -18366,14 +18492,17 @@ var Component$d = defineComponent({
       renderFixedColumns,
       setRowExpand,
       initIndexData,
-      fixedWrapperClass
+      fixedWrapperClass,
+      clearSelection,
+      toggleAllSelection,
+      toggleRowSelection
     } = useInit(props2, targetColumns);
     const {
       pageData,
       localPagination,
       resolvePageData,
       watchEffectFn
-    } = userPagination(props2, indexData);
+    } = usePagination(props2, indexData);
     const {
       tableClass,
       headClass,
@@ -18486,6 +18615,34 @@ var Component$d = defineComponent({
         e
       });
       setRowExpand(row, !row[TABLE_ROW_ATTRIBUTE.ROW_EXPAND]);
+    }).on(EVENTS$1.ON_ROW_CHECK, ({
+      row,
+      isAll,
+      index,
+      value
+    }) => {
+      if (isAll) {
+        toggleAllSelection(value);
+        ctx.emit(EMITEVENTS.ROW_SELECT_ALL, {
+          checked: value,
+          data: props2.data
+        });
+      } else {
+        toggleRowSelection(row, value);
+        ctx.emit(EMITEVENTS.ROW_SELECT, {
+          row,
+          index,
+          checked: value,
+          data: props2.data
+        });
+      }
+      ctx.emit(EMITEVENTS.ROW_SELECT_CHANGE, {
+        row,
+        isAll,
+        index,
+        checked: value,
+        data: props2.data
+      });
     });
     const handleScrollChanged = (args) => {
       var _a;
@@ -18529,7 +18686,10 @@ var Component$d = defineComponent({
       tableRender.destroy();
     });
     ctx.expose({
-      setRowExpand
+      setRowExpand,
+      clearSelection,
+      toggleAllSelection,
+      toggleRowSelection
     });
     const tableBodyClass = computed(() => __spreadProps(__spreadValues({}, contentClass), {
       "__is-empty": !pageData.length
@@ -20262,28 +20422,38 @@ const InfoBox = (config) => {
         update
       });
       const getContent = () => {
-        if (!modalFuncProps.value.subTitle) {
-          return "";
+        const children = [];
+        const subTitleBox = [];
+        if (modalFuncProps.value.subTitle) {
+          switch (typeof modalFuncProps.value.subTitle) {
+            case "string":
+              children.push(modalFuncProps.value.subTitle);
+              break;
+            case "function":
+              children.push(modalFuncProps.value.subTitle());
+              break;
+            default:
+              children.push(modalFuncProps.value.subTitle);
+              break;
+          }
         }
-        switch (typeof modalFuncProps.value.subTitle) {
-          case "function":
-            return modalFuncProps.value.subTitle();
-          default:
-          case "string":
-            return modalFuncProps.value.subTitle;
+        if (children.length) {
+          subTitleBox.push(h$1("div", {
+            class: "bk-info-sub-title",
+            style: `text-Align:${modalFuncProps.value.contentAlign || "center"}`
+          }, children));
         }
+        return subTitleBox;
       };
       return () => createVNode(Dialog, __spreadProps(__spreadValues({
+        class: "bk-info-wrapper",
         headerAlign: "center",
         footerAlign: "center"
       }, modalFuncProps.value), {
         isShow: isShow.value,
         onClosed,
         onConfirm
-      }), [h$1("div", {
-        class: "bk-info-sub-title",
-        style: `text-Align:${modalFuncProps.value.contentAlign || "center"}`
-      }, getContent())]);
+      }), getContent());
     }
   });
   const app = createApp(dialog2).mount(container2);