bkui-vue 0.0.1-beta.48 → 0.0.1-beta.50

package/dist/index.esm.js

@@ -8483,7 +8483,7 @@ const loadingTypes = {
   indicator: {
     type: Function
   },
-  loading: PropTypes.bool,
+  loading: PropTypes.bool.def(true),
   inline: PropTypes.bool.def(true),
   theme: PropTypes.theme(["white", "primary", "warning", "success", "danger"]),
   title: PropTypes.string.def(""),
@@ -8536,16 +8536,17 @@ var Component$r = defineComponent({
   }
 });
 const BkLoading = withInstallProps(Component$r, { setDefaultIndicator, BkLoadingMode, BkLoadingSize }, true);
+const btnSizes = ["", "small", "large"];
 const buttonProps = {
   theme: PropTypes.theme().def(""),
   hoverTheme: PropTypes.theme(["primary", "warning", "success", "danger"]).def(""),
-  size: PropTypes.size(),
+  size: PropTypes.size(btnSizes).def(""),
   title: PropTypes.string,
   icon: PropTypes.string,
   iconRight: PropTypes.string,
   disabled: PropTypes.bool,
   loading: PropTypes.bool,
-  laodingMode: PropTypes.commonType(Object.values(BkLoadingMode)),
+  loadingMode: PropTypes.commonType(Object.values(BkLoadingMode)),
   outline: PropTypes.bool,
   text: PropTypes.bool,
   nativeType: {
@@ -8565,6 +8566,7 @@ var Component$q = defineComponent({
     const isHover = ref(false);
     const showSlot = (_a = slots.default) != null ? _a : false;
     const btnClsPrefix = "bk-button";
+    const isText = computed(() => props.text && !props.hoverTheme);
     const btnCls = computed(() => {
       const hoverTheme = props.hoverTheme ? `${btnClsPrefix}-hover-${props.hoverTheme}` : "";
       const btnThemeCls = props.theme ? `${btnClsPrefix}-${props.theme}` : "";
@@ -8572,11 +8574,12 @@ var Component$q = defineComponent({
       return classes({
         "is-disabled": props.disabled,
         "is-outline": props.outline,
-        "is-text": props.text && !props.hoverTheme,
-        [`${btnClsPrefix}-${props.size}`]: props.size !== "",
+        "is-text": isText.value,
+        [`${btnClsPrefix}-${props.size}`]: props.size && btnSizes.includes(props.size),
         "no-slot": !showSlot
       }, `${themeCls} ${btnClsPrefix} ${hoverTheme}`);
     });
+    console.log(btnCls.value, props);
     const loadingTheme = computed(() => {
       if (props.text || props.outline || props.hoverTheme) {
         if (isHover.value && !props.text)
@@ -8585,7 +8588,7 @@ var Component$q = defineComponent({
       }
       return ["", "default"].includes(props.theme) ? "" : "white";
     });
-    const loadingSize = computed(() => props.size === BkLoadingSize.Small ? BkLoadingSize.Mini : BkLoadingSize.Small);
+    const loadingSize = computed(() => isText.value || props.size === BkLoadingSize.Small ? BkLoadingSize.Mini : BkLoadingSize.Small);
     const handleClick = () => {
       if (props.loading)
         return;
@@ -8609,13 +8612,13 @@ var Component$q = defineComponent({
         "onClick": handleClick,
         "onMouseover": handleMouseOver,
         "onMouseleave": handleMouseout
-      }), [props.loading ? createVNode(BkLoading, {
+      }), [props.loading && createVNode(BkLoading, {
         "loading": true,
         "class": `${btnClsPrefix}-loading`,
-        "mode": props.laodingMode,
+        "mode": props.loadingMode,
         "theme": loadingTheme.value,
         "size": loadingSize.value
-      }, null) : slots.default && createVNode("span", {
+      }, null), slots.default && createVNode("span", {
         "class": `${btnClsPrefix}-text`
       }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])]);
     };
@@ -8714,6 +8717,8 @@ const useCheckbox = () => {
   if (isGroup) {
     watch(() => checkboxGroup.props.modelValue, (modelValue) => {
       isChecked.value = modelValue.includes(props.label);
+    }, {
+      deep: true
     });
   } else {
     watch(() => props.modelValue, (modelValue) => {
@@ -9335,7 +9340,7 @@ const inputType = {
   clearable: PropTypes.bool,
   disabled: PropTypes.bool,
   readonly: PropTypes.bool,
-  placeholder: PropTypes.string,
+  placeholder: PropTypes.string.def("Enter"),
   prefixIcon: PropTypes.string,
   suffixIcon: PropTypes.string,
   suffix: PropTypes.string,
@@ -11216,9 +11221,10 @@ var Component$a = defineComponent({
     noMatchText: PropTypes.string.def("\u65E0\u5339\u914D\u6570\u636E"),
     loadingText: PropTypes.string.def("\u52A0\u8F7D\u4E2D..."),
     placeholder: PropTypes.string.def("\u8BF7\u9009\u62E9"),
-    selectAllText: PropTypes.string.def("\u5168\u90E8")
+    selectAllText: PropTypes.string.def("\u5168\u90E8"),
+    scrollLoading: PropTypes.bool.def(false)
   },
-  emits: ["update:modelValue", "change", "toggle", "clear"],
+  emits: ["update:modelValue", "change", "toggle", "clear", "scroll-end"],
   setup(props, {
     emit
   }) {
@@ -11379,6 +11385,16 @@ var Component$a = defineComponent({
       selectedCallback();
       emitChange([...states.selectedOptions.values()].map((option) => option.value));
     };
+    const handleScroll = (e) => {
+      const {
+        scrollTop,
+        clientHeight,
+        scrollHeight
+      } = e.target;
+      if (scrollTop + clientHeight === scrollHeight) {
+        emit("scroll-end");
+      }
+    };
     const handleClickOutside = () => {
       hidePopover();
       handleBlur();
@@ -11432,7 +11448,8 @@ var Component$a = defineComponent({
       showPopover,
       handleToggleAll,
       handleOptionSelected,
-      handleClickOutside
+      handleClickOutside,
+      handleScroll
     });
   },
   render() {
@@ -11456,6 +11473,7 @@ var Component$a = defineComponent({
       const suffixIcon = () => {
         if (this.loading) {
           return createVNode(BkLoading, {
+            "loading": true,
             "class": "spinner",
             "mode": "spin",
             "size": "mini"
@@ -11523,6 +11541,7 @@ var Component$a = defineComponent({
         "class": "bk-select-empty"
       }, [this.searchLoading && createVNode(BkLoading, {
         "class": "mr5",
+        "loading": true,
         "mode": "spin",
         "size": "mini"
       }, null), this.curContentText]), createVNode("div", {
@@ -11531,13 +11550,22 @@ var Component$a = defineComponent({
         "class": "bk-select-dropdown",
         "style": {
           maxHeight: `${this.scrollHeight}px`
-        }
+        },
+        "onScroll": this.handleScroll
       }, [withDirectives(createVNode("ul", {
         "class": "bk-select-options"
       }, [this.multiple && this.showSelectAll && !this.searchKey && createVNode("li", {
         "class": "bk-select-option",
         "onClick": this.handleToggleAll
-      }, [this.selectAllText]), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, this.isShowSelectContent]])]), this.$slots.extension && createVNode("div", {
+      }, [this.selectAllText]), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a), this.scrollLoading && createVNode("li", {
+        "class": "bk-select-options-loading"
+      }, [createVNode(BkLoading, {
+        "class": "spinner mr5",
+        "theme": "primary",
+        "loading": true,
+        "mode": "spin",
+        "size": "mini"
+      }, null), this.loadingText])]), [[vShow, this.isShowSelectContent]])]), this.$slots.extension && createVNode("div", {
         "class": "bk-select-extension"
       }, [this.$slots.extension()])])]);
     };
@@ -12124,6 +12152,241 @@ var Component$6 = defineComponent({
 });
 const BkVirtualRender = withInstall(Component$6);
 const BORDER_OPRIONS = ["none", "row", "col", "outer"];
+const resolvePropVal = (prop, key, args) => {
+  if (Object.prototype.hasOwnProperty.call(prop, key)) {
+    if (typeof prop[key] === "function") {
+      return prop[key].call(globalThis, ...args);
+    }
+    return prop[key];
+  }
+  return void 0;
+};
+const resolveNumberToNumArray = (prop) => {
+  if (/^\d+$/.test(`${prop}`)) {
+    return [parseInt(`${prop}`, 10)];
+  }
+  return [];
+};
+const resolveWidth = (propWidth) => resolveNumberOrStringToPix(propWidth, "auto");
+const resolveNumberOrStringToPix = (val, defaultValue = "100%", offset2 = null) => {
+  let target = "";
+  if (/^auto|null|undefined$/ig.test(`${val}`)) {
+    target = defaultValue;
+  } else {
+    target = /^\d+\.?\d+$/.test(`${val}`) ? `${val}px` : val;
+  }
+  if (offset2) {
+    target = `calc(${target} - ${offset2})`;
+  }
+  return target;
+};
+const resolvePropBorderToClassStr = (val) => {
+  const defaultVal = ["row"];
+  if (typeof val === "string") {
+    defaultVal.push(val);
+  }
+  if (Array.isArray(val)) {
+    defaultVal.push(...val.filter((str) => BORDER_OPRIONS.includes(str)));
+  }
+  return [...new Set(defaultVal)].map((item) => `bordered-${item}`).join(" ");
+};
+const resolveColumnWidth = (root, colgroups, autoWidth = 20) => {
+  const {
+    width
+  } = root.getBoundingClientRect() || {};
+  let avgWidth = width - 4;
+  const avgColIndexList = [];
+  const resolveColNumberWidth = (col, numWidth, resetAvgWidth = true) => {
+    Object.assign(col, {
+      calcWidth: numWidth
+    });
+    if (resetAvgWidth) {
+      avgWidth = avgWidth - numWidth;
+      if (avgWidth < 0) {
+        avgWidth = 0;
+      }
+    }
+  };
+  colgroups.forEach((col, index) => {
+    const colWidth = String(col.width);
+    let isAutoWidthCol = true;
+    if (/^\d+\.?\d*(px)?$/.test(colWidth)) {
+      const numWidth = Number(colWidth.replace("px", ""));
+      resolveColNumberWidth(col, numWidth);
+      isAutoWidthCol = false;
+    }
+    if (/^\d+\.?\d*%$/.test(colWidth)) {
+      let perWidth = autoWidth;
+      if (avgWidth > 0) {
+        const percent = Number(colWidth.replace("%", ""));
+        perWidth = avgWidth * percent / 100;
+      }
+      resolveColNumberWidth(col, perWidth);
+      isAutoWidthCol = false;
+    }
+    if (isAutoWidthCol) {
+      avgColIndexList.push(index);
+    }
+  });
+  if (avgColIndexList.length > 0) {
+    let autoAvgWidth = autoWidth;
+    if (avgWidth > 0) {
+      autoAvgWidth = avgWidth / avgColIndexList.length;
+      avgColIndexList.forEach((idx) => resolveColNumberWidth(colgroups[idx], autoAvgWidth, false));
+    }
+  }
+};
+const observerResize = (root, callbackFn, delay = 60, immediate = false) => {
+  const callFn = lodash.exports.throttle(() => {
+    if (typeof callbackFn === "function") {
+      callbackFn();
+    }
+  }, delay);
+  const resizeObserver = new ResizeObserver(() => {
+    callFn();
+  });
+  if (immediate) {
+    if (typeof callbackFn === "function") {
+      callbackFn();
+    }
+  }
+  return {
+    start: () => {
+      resizeObserver.observe(root);
+    },
+    stop: () => {
+      resizeObserver.disconnect();
+      resizeObserver.unobserve(root);
+    }
+  };
+};
+const isPercentPixOrNumber = (val) => /^\d+\.?\d*(px|%)?$/.test(`${val}`);
+const resolveHeadConfig = (props) => {
+  const {
+    showHead,
+    headHeight,
+    thead = {}
+  } = props;
+  return Object.assign({}, {
+    isShow: showHead,
+    height: headHeight
+  }, __spreadValues({}, thead));
+};
+const getRowText = (row, key, column) => {
+  if (column.type === "index") {
+    return row.__$table_row_index;
+  }
+  return row[key];
+};
+const resolveActiveColumns = (props) => {
+  if (props.columnPick !== "disabled") {
+    if (props.columnPick === "multi") {
+      return Array.isArray(props.activeColumn) ? props.activeColumn : resolveNumberToNumArray(props.activeColumn);
+    }
+    return Array.isArray(props.activeColumn) ? resolveNumberToNumArray(props.activeColumn[0]) : resolveNumberToNumArray(props.activeColumn);
+  }
+  return [];
+};
+var useActiveColumns = (props) => {
+  let activeColumns = reactive([]);
+  if (props.columnPick === "disabled") {
+    return {
+      activeColumns
+    };
+  }
+  const activeCols = reactive(resolveActiveColumns(props));
+  const getActiveColumns = () => (props.columns || []).map((_column, index) => ({
+    index,
+    active: activeCols.some((colIndex) => colIndex === index),
+    _column
+  }));
+  watchEffect(() => {
+    activeColumns = getActiveColumns();
+    const cols = resolveActiveColumns(props);
+    activeColumns.forEach((col, index) => {
+      Object.assign(col, {
+        active: cols.some((colIndex) => colIndex === index)
+      });
+    });
+  });
+  return {
+    activeColumns
+  };
+};
+const resolvePaginationOption = (propPagination, defVal) => {
+  if (!!propPagination) {
+    if (typeof propPagination === "object") {
+      let current = Object.prototype.hasOwnProperty.call(propPagination, "current") ? propPagination.current : propPagination.value;
+      if (!/\d+/.test(current)) {
+        current = 1;
+      }
+      return __spreadProps(__spreadValues(__spreadValues({}, defVal), propPagination), {
+        current
+      });
+    }
+    return defVal;
+  }
+  return {};
+};
+var userPagination = (props) => {
+  const startIndex = ref(0);
+  const endIndex = ref(0);
+  const indexData = computed(() => props.data.map((item, index) => __spreadProps(__spreadValues({}, item), {
+    __$table_row_index: index + 1
+  })));
+  let pagination2 = reactive({
+    count: 0,
+    limit: 10,
+    current: 1
+  });
+  pagination2 = resolvePaginationOption(props.pagination, pagination2);
+  const resetStartEndIndex = () => {
+    if (!props.pagination || props.remotePagination) {
+      startIndex.value = 0;
+      endIndex.value = props.data.length;
+      return;
+    }
+    startIndex.value = (pagination2.current - 1) * pagination2.limit;
+    endIndex.value = pagination2.current * pagination2.limit;
+  };
+  resetStartEndIndex();
+  const pageData = reactive([]);
+  const sort = (sortFn) => {
+    if (typeof sortFn === "function") {
+      pageData.sort(sortFn);
+    }
+  };
+  const filter = (filterFn) => {
+    if (typeof filterFn === "function") {
+      const filterVals = pageData.filter((row, index) => filterFn(row, index, props.data));
+      pageData.splice(0, pageData.length, ...filterVals);
+    }
+  };
+  const resolvePageData = (filterFn, sortFn) => {
+    pageData.splice(0, pageData.length, ...indexData.value.slice(startIndex.value, endIndex.value));
+    filter(filterFn);
+    sort(sortFn);
+  };
+  const watchEffectFn = (filterFn, sortFn) => {
+    pagination2 = resolvePaginationOption(props.pagination, pagination2);
+    resetStartEndIndex();
+    resolvePageData(filterFn, sortFn);
+  };
+  const localPagination = computed(() => {
+    if (!props.pagination) {
+      return null;
+    }
+    return props.remotePagination ? pagination2 : __spreadProps(__spreadValues({}, pagination2), {
+      count: props.data.length
+    });
+  });
+  return {
+    pageData,
+    localPagination,
+    resolvePageData,
+    watchEffectFn
+  };
+};
 var SortScope = /* @__PURE__ */ ((SortScope2) => {
   SortScope2["CURRENT"] = "current";
   SortScope2["ALL"] = "all";
@@ -12608,156 +12871,6 @@ var Component$5 = defineComponent({
   }
 });
 const BkPagination = withInstall(Component$5);
-const resolvePropVal = (prop, key, args) => {
-  if (Object.prototype.hasOwnProperty.call(prop, key)) {
-    if (typeof prop[key] === "function") {
-      return prop[key].call(globalThis, ...args);
-    }
-    return prop[key];
-  }
-  return void 0;
-};
-const resolveActiveColumns = (props) => {
-  if (props.columnPick !== "disabled") {
-    if (props.columnPick === "multi") {
-      return Array.isArray(props.activeColumn) ? props.activeColumn : resolveNumberToNumArray(props.activeColumn);
-    }
-    return Array.isArray(props.activeColumn) ? resolveNumberToNumArray(props.activeColumn[0]) : resolveNumberToNumArray(props.activeColumn);
-  }
-  return [];
-};
-const resolveNumberToNumArray = (prop) => {
-  if (/^\d+$/.test(`${prop}`)) {
-    return [parseInt(`${prop}`, 10)];
-  }
-  return [];
-};
-const resolveWidth = (propWidth) => resolveNumberOrStringToPix(propWidth, "auto");
-const resolveNumberOrStringToPix = (val, defaultValue = "100%", offset2 = null) => {
-  let target = "";
-  if (/^auto|null|undefined$/ig.test(`${val}`)) {
-    target = defaultValue;
-  } else {
-    target = /^\d+\.?\d+$/.test(`${val}`) ? `${val}px` : val;
-  }
-  if (offset2) {
-    target = `calc(${target} - ${offset2})`;
-  }
-  return target;
-};
-const resolvePropBorderToClassStr = (val) => {
-  const defaultVal = ["row"];
-  if (typeof val === "string") {
-    defaultVal.push(val);
-  }
-  if (Array.isArray(val)) {
-    defaultVal.push(...val.filter((str) => BORDER_OPRIONS.includes(str)));
-  }
-  return [...new Set(defaultVal)].map((item) => `bordered-${item}`).join(" ");
-};
-const resolveColumnWidth = (root, colgroups, autoWidth = 20) => {
-  const {
-    width
-  } = root.getBoundingClientRect() || {};
-  let avgWidth = width - 4;
-  const avgColIndexList = [];
-  const resolveColNumberWidth = (col, numWidth, resetAvgWidth = true) => {
-    Object.assign(col, {
-      calcWidth: numWidth
-    });
-    if (resetAvgWidth) {
-      avgWidth = avgWidth - numWidth;
-      if (avgWidth < 0) {
-        avgWidth = 0;
-      }
-    }
-  };
-  colgroups.forEach((col, index) => {
-    const colWidth = String(col.width);
-    let isAutoWidthCol = true;
-    if (/^\d+\.?\d*(px)?$/.test(colWidth)) {
-      const numWidth = Number(colWidth.replace("px", ""));
-      resolveColNumberWidth(col, numWidth);
-      isAutoWidthCol = false;
-    }
-    if (/^\d+\.?\d*%$/.test(colWidth)) {
-      let perWidth = autoWidth;
-      if (avgWidth > 0) {
-        const percent = Number(colWidth.replace("%", ""));
-        perWidth = avgWidth * percent / 100;
-      }
-      resolveColNumberWidth(col, perWidth);
-      isAutoWidthCol = false;
-    }
-    if (isAutoWidthCol) {
-      avgColIndexList.push(index);
-    }
-  });
-  if (avgColIndexList.length > 0) {
-    let autoAvgWidth = autoWidth;
-    if (avgWidth > 0) {
-      autoAvgWidth = avgWidth / avgColIndexList.length;
-      avgColIndexList.forEach((idx) => resolveColNumberWidth(colgroups[idx], autoAvgWidth, false));
-    }
-  }
-};
-const observerResize = (root, callbackFn, delay = 60, immediate = false) => {
-  const callFn = lodash.exports.throttle(() => {
-    if (typeof callbackFn === "function") {
-      callbackFn();
-    }
-  }, delay);
-  const resizeObserver = new ResizeObserver(() => {
-    callFn();
-  });
-  if (immediate) {
-    if (typeof callbackFn === "function") {
-      callbackFn();
-    }
-  }
-  return {
-    start: () => {
-      resizeObserver.observe(root);
-    },
-    stop: () => {
-      resizeObserver.disconnect();
-      resizeObserver.unobserve(root);
-    }
-  };
-};
-const isPercentPixOrNumber = (val) => /^\d+\.?\d*(px|%)?$/.test(`${val}`);
-const resolvePaginationOption = (propPagination, defVal) => {
-  if (!!propPagination) {
-    if (typeof propPagination === "object") {
-      let current = Object.prototype.hasOwnProperty.call(propPagination, "current") ? propPagination.current : propPagination.value;
-      if (!/\d+/.test(current)) {
-        current = 1;
-      }
-      return __spreadProps(__spreadValues(__spreadValues({}, defVal), propPagination), {
-        current
-      });
-    }
-    return defVal;
-  }
-  return {};
-};
-const resolveHeadConfig = (props) => {
-  const {
-    showHead,
-    headHeight,
-    thead = {}
-  } = props;
-  return Object.assign({}, {
-    isShow: showHead,
-    height: headHeight
-  }, __spreadValues({}, thead));
-};
-const getRowText = (row, key, column) => {
-  if (column.type === "index") {
-    return row.__$table_row_index;
-  }
-  return row[key];
-};
 function _isSlot(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
@@ -12815,6 +12928,8 @@ var HeadFilter = defineComponent({
     const handleBtnResetClick = () => {
       if (state.checked.length) {
         state.checked.splice(0, state.checked.length);
+        isShow.value = false;
+        nextTick(() => emit("change", state.checked, filterFn));
       }
     };
     return () => createVNode(BkPopover, mergeProps({
@@ -13129,79 +13244,82 @@ class TableRender {
     })]);
   }
 }
+const useClass = (props, root) => {
+  const autoHeight = ref("auto");
+  const tableClass = computed(() => classes({
+    [resolveClassName("table")]: true
+  }, resolvePropBorderToClassStr(props.border)));
+  const headClass = classes({
+    [resolveClassName("table-head")]: true
+  });
+  const contentClass = classes({
+    [resolveClassName("table-body")]: true
+  });
+  const footerClass = classes({
+    [resolveClassName("table-footer")]: true,
+    ["is-hidden"]: !props.pagination
+  });
+  const wrapperStyle = computed(() => ({
+    minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
+  }));
+  const contentStyle = computed(() => {
+    const isAutoHeight = !isPercentPixOrNumber(props.height);
+    const resolveHeight = resolveNumberOrStringToPix(props.height);
+    const resolveHeadHeight = props.showHead ? resolveNumberOrStringToPix(props.headHeight) : "0";
+    const resolveFooterHeight = props.pagination ? 40 : 0;
+    const contentHeight = `calc(${resolveHeight} - ${resolveHeadHeight} - ${resolveFooterHeight}px - 2px)`;
+    return __spreadValues({
+      display: "block"
+    }, isAutoHeight ? { maxHeight: contentHeight } : { height: contentHeight });
+  });
+  onMounted(() => {
+    resetTableHeight(root == null ? void 0 : root.value);
+  });
+  const resetTableHeight = (rootEl) => {
+    if (rootEl) {
+      const { height } = root.value.parentElement.getBoundingClientRect();
+      autoHeight.value = `${height}px`;
+    }
+  };
+  return { tableClass, headClass, contentClass, footerClass, wrapperStyle, contentStyle, resetTableHeight };
+};
 var Component$4 = defineComponent({
   name: "Table",
   props: tableProps,
   emits: ["columnPick", "rowClick", "rowDblClick", "pageLimitChange", "pageValueChange"],
   setup(props, ctx) {
-    const activeCols = reactive(resolveActiveColumns(props));
     const colgroups = reactive(props.columns.map((col) => __spreadProps(__spreadValues({}, col), {
       calcWidth: null
     })));
-    const startIndex = ref(0);
-    const endIndex = ref(0);
     let columnSortFn = null;
     let columnFilterFn = null;
-    let pagination2 = reactive({
-      count: 0,
-      limit: 10,
-      current: 1
-    });
-    pagination2 = resolvePaginationOption(props.pagination, pagination2);
-    const resetStartEndIndex = () => {
-      if (!props.pagination || props.remotePagination) {
-        startIndex.value = 0;
-        endIndex.value = props.data.length;
-        return;
-      }
-      startIndex.value = (pagination2.current - 1) * pagination2.limit;
-      endIndex.value = pagination2.current * pagination2.limit;
-    };
-    resetStartEndIndex();
     let observerIns = null;
     const root = ref();
-    const getActiveColumns = () => (props.columns || []).map((_column, index) => ({
-      index,
-      active: activeCols.some((colIndex) => colIndex === index),
-      _column
-    }));
+    const {
+      activeColumns
+    } = useActiveColumns(props);
+    const {
+      pageData,
+      localPagination,
+      resolvePageData,
+      watchEffectFn
+    } = userPagination(props);
+    const {
+      tableClass,
+      headClass,
+      contentClass,
+      footerClass,
+      wrapperStyle,
+      contentStyle
+    } = useClass(props);
     const reactiveProp = reactive({
-      activeColumns: getActiveColumns(),
-      scrollTranslateY: 0
+      scrollTranslateY: 0,
+      activeColumns
     });
-    watch(() => [props.activeColumn, props.columns], () => {
-      nextTick(() => {
-        reactiveProp.activeColumns = getActiveColumns();
-        const cols = resolveActiveColumns(props);
-        reactiveProp.activeColumns.forEach((col, index) => {
-          Object.assign(col, {
-            active: cols.some((colIndex) => colIndex === index)
-          });
-        });
-      });
-    }, {
-      deep: true
-    });
-    const indexData = computed(() => props.data.map((item, index) => __spreadProps(__spreadValues({}, item), {
-      __$table_row_index: index + 1
-    })));
-    const pageData = reactive([]);
-    const resolvePageData = () => {
-      pageData.splice(0, pageData.length, ...indexData.value.slice(startIndex.value, endIndex.value));
-      if (typeof columnFilterFn === "function") {
-        const filterVals = pageData.filter((row, index) => columnFilterFn(row, index, props.data));
-        pageData.splice(0, pageData.length, ...filterVals);
-      }
-      if (typeof columnSortFn === "function") {
-        pageData.sort(columnSortFn);
-      }
-    };
+    const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
     watchEffect(() => {
-      pagination2 = resolvePaginationOption(props.pagination, pagination2);
-      resetStartEndIndex();
-      resolvePageData();
+      watchEffectFn(columnFilterFn, columnSortFn);
     });
-    const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
     tableRender.on(EVENTS.ON_SORT_BY_CLICK, (args) => {
       const {
         sortFn
@@ -13213,48 +13331,11 @@ var Component$4 = defineComponent({
         filterFn
       } = args;
       columnFilterFn = filterFn;
-      resolvePageData();
-    });
-    const wrapperStyle = computed(() => ({
-      minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
-    }));
-    const localPagination = computed(() => {
-      if (!props.pagination) {
-        return null;
-      }
-      return props.remotePagination ? pagination2 : __spreadProps(__spreadValues({}, pagination2), {
-        count: props.data.length
-      });
-    });
-    const contentStyle = computed(() => {
-      const resolveHeight = resolveNumberOrStringToPix(props.height);
-      const resolveHeadHeight = props.showHead ? resolveNumberOrStringToPix(props.headHeight) : "0";
-      const isAutoHeight = !isPercentPixOrNumber(props.height);
-      const resolveFooterHeight = props.pagination ? 40 : 0;
-      const contentHeight = `calc(${resolveHeight} - ${resolveHeadHeight} - ${resolveFooterHeight}px - 2px)`;
-      return __spreadValues({
-        display: "block"
-      }, isAutoHeight ? {
-        maxHeight: contentHeight
-      } : {
-        height: contentHeight
-      });
-    });
-    const tableClass = computed(() => classes({
-      [resolveClassName("table")]: true
-    }, resolvePropBorderToClassStr(props.border)));
-    const headClass = classes({
-      [resolveClassName("table-head")]: true
-    });
-    const contentClass = classes({
-      [resolveClassName("table-body")]: true
-    });
-    const footerClass = classes({
-      [resolveClassName("table-footer")]: true
+      resolvePageData(columnFilterFn, columnSortFn);
     });
     const handleScrollChanged = (args) => {
-      const pagination3 = args[1];
-      reactiveProp.scrollTranslateY = pagination3.translateY;
+      const pagination2 = args[1];
+      reactiveProp.scrollTranslateY = pagination2.translateY;
     };
     onMounted(() => {
       observerIns = observerResize(root.value, () => {
@@ -20640,7 +20721,7 @@ var Dropdown = defineComponent({
     disabled: PropTypes.bool.def(false),
     extCls: PropTypes.string
   },
-  emits: ["showChange"],
+  emits: ["showChange", "show", "hide"],
   setup(props, {
     emit
   }) {
@@ -20661,12 +20742,20 @@ var Dropdown = defineComponent({
       });
     });
     watch(() => props.disabled, (val) => handleUpdateDisabled(val));
+    const afterShow = () => {
+      emit("show");
+    };
+    const afterHidden = () => {
+      emit("hide");
+    };
     const registerDropdown = () => {
       if (props.disabled)
         return;
       popoverInstance = new BKPopover(reference2.value, refContent.value, {
         placement: props.placement,
-        trigger: props.trigger
+        trigger: props.trigger,
+        afterShow,
+        afterHidden
       });
       props.trigger === "manual" && props.isShow && popoverInstance.show();
     };