@qin-ui/antdv-next-pro 1.0.0

package/es/table/index.js

@@ -0,0 +1,679 @@
+import { createElementBlock, openBlock, createElementVNode, defineComponent, ref, computed, watch, watchEffect, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, resolveDynamicComponent, createTextVNode, createCommentVNode, Fragment, toDisplayString, normalizeStyle, useModel, h, mergeModels, inject, useAttrs, useSlots, onMounted, normalizeClass, createSlots, renderList, normalizeProps, guardReactiveProps, nextTick } from "vue";
+import { Space, Button, theme, useConfig, Dropdown, Menu, Checkbox, Table } from "antdv-next";
+import "antdv-next/dist/config-provider/DisabledContext";
+import "antdv-next/dist/config-provider/SizeContext";
+import { _ as _sfc_main$9, t as tableProps, a as _sfc_main$a } from "../form/index-DnjfDQC_.js";
+import { a as INJECT_CONFIG, g as getObject, c as camelizeProperties, h as useTable$1 } from "../component-provider/index-B-Yy-eoc.js";
+import { p as pick } from "../vendor/utils/lodash-es-p6jau26B.js";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$8 = {};
+const _hoisted_1$3 = {
+  focusable: "false",
+  "data-icon": "down",
+  width: "1em",
+  height: "1em",
+  fill: "currentColor",
+  "aria-hidden": "true",
+  viewBox: "64 64 896 896"
+};
+function _sfc_render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" }, null, -1)
+  ])]);
+}
+const DownOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$2]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{ name: "SearchForm" },
+  __name: "SearchForm",
+  props: {
+    form: {},
+    layout: { default: "grid" },
+    expand: { type: [Boolean, Object], default: true },
+    searchButton: { type: [Object, Function], default: void 0 },
+    resetButton: { type: [Object, Function], default: void 0 },
+    expandButton: { type: [Object, Function], default: void 0 },
+    class: {},
+    style: {}
+  },
+  emits: ["search", "reset"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const proFormHeight = ref("unset");
+    const collapseHeight = ref(0);
+    let rowHeight = 32;
+    const rowGap = 16;
+    const columnGap = 24;
+    const computedExpand = computed(() => {
+      if (!__props.expand) return false;
+      if (__props.expand === true) return { minExpandRows: 2, expandStatus: false };
+      return {
+        minExpandRows: Math.max(Math.floor(__props.expand.minExpandRows ?? 2), 1),
+        expandStatus: __props.expand.expandStatus ?? false
+      };
+    });
+    const showExpandToggle = ref(false);
+    const expandStatus = ref(true);
+    const changeExpandStatus = () => {
+      expandStatus.value = !expandStatus.value;
+    };
+    const { formRef, getFormData } = __props.form;
+    const setInitExpandStatus = () => {
+      expandStatus.value = false;
+      if (formRef.value && __props.expand) {
+        const formEl = formRef.value.$el;
+        const formItemsEl = formEl.querySelectorAll(".ant-form-item>[path]");
+        const observer = new IntersectionObserver(
+          (entries) => {
+            expandStatus.value = entries.some((e) => {
+              if (e.intersectionRatio === 0) {
+                const path = e.target.getAttribute("path");
+                const searchFieldValue = path ? getFormData == null ? void 0 : getFormData(path) : void 0;
+                return ![null, void 0].includes(searchFieldValue);
+              }
+              return __props.expand.expandStatus;
+            });
+            observer.disconnect();
+          },
+          { root: formEl }
+        );
+        formItemsEl.forEach((element) => {
+          observer.observe(element);
+        });
+      }
+    };
+    watch(
+      [
+        () => {
+          var _a, _b, _c;
+          return (_c = (_b = (_a = __props.form) == null ? void 0 : _a.fields.value) == null ? void 0 : _b.filter((f) => !f.hidden)) == null ? void 0 : _c.length;
+        },
+        () => formRef.value
+      ],
+      () => {
+        var _a, _b, _c, _d, _e;
+        if (!expandStatus.value || !formRef.value) return;
+        const proFormEl = (_a = formRef.value) == null ? void 0 : _a.$el;
+        const { height = 0 } = ((_b = proFormEl == null ? void 0 : proFormEl.getBoundingClientRect) == null ? void 0 : _b.call(proFormEl)) || {};
+        proFormHeight.value = height;
+        rowHeight = (_e = (_d = (_c = proFormEl == null ? void 0 : proFormEl.querySelector(".ant-form-item")) == null ? void 0 : _c.getBoundingClientRect) == null ? void 0 : _d.call(_c)) == null ? void 0 : _e.height;
+      },
+      { flush: "post", immediate: true }
+    );
+    watchEffect(
+      () => {
+        if (typeof proFormHeight.value !== "number") return;
+        if (__props.layout === "grid" && computedExpand.value) {
+          const { minExpandRows } = computedExpand.value;
+          collapseHeight.value = Math.min(
+            minExpandRows * rowHeight + (minExpandRows - 1) * rowGap,
+            +proFormHeight.value
+          );
+          showExpandToggle.value = +proFormHeight.value - collapseHeight.value > 1;
+          if (showExpandToggle.value) {
+            setInitExpandStatus();
+          }
+        } else {
+          showExpandToggle.value = false;
+        }
+      },
+      { flush: "post" }
+    );
+    const layoutProps = computed(
+      () => __props.layout === "grid" ? {
+        grid: {
+          gutter: [columnGap, rowGap],
+          style: { flex: 1, marginRight: "12px" }
+        },
+        style: {
+          display: "flex",
+          overflow: "hidden",
+          height: `${expandStatus.value ? proFormHeight.value : collapseHeight.value}px`
+        }
+      } : {
+        layout: "inline",
+        style: { gap: `${rowGap}px ${columnGap}px` },
+        grid: false
+      }
+    );
+    const onReset = () => {
+      emit("reset");
+    };
+    const onSearch = () => {
+      emit("search");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$9), mergeProps(layoutProps.value, {
+        form: __props.form,
+        class: "pro-table_search-form transition"
+      }), {
+        default: withCtx(() => [
+          createVNode(unref(Space), {
+            align: "start",
+            class: "pro-table_search-form_button-group"
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "reset-button", { onClick: onReset }, () => [
+                __props.resetButton ? (openBlock(), createBlock(resolveDynamicComponent(__props.resetButton), {
+                  key: 0,
+                  onClick: onReset
+                })) : (openBlock(), createBlock(unref(Button), {
+                  key: 1,
+                  class: "pro-table_search-form_reset-button",
+                  onClick: onReset
+                }, {
+                  default: withCtx(() => [..._cache[0] || (_cache[0] = [
+                    createTextVNode("重置", -1)
+                  ])]),
+                  _: 1
+                }))
+              ], true),
+              renderSlot(_ctx.$slots, "search-button", { onClick: onSearch }, () => [
+                __props.searchButton ? (openBlock(), createBlock(resolveDynamicComponent(__props.searchButton), {
+                  key: 0,
+                  onClick: onSearch
+                })) : (openBlock(), createBlock(unref(Button), {
+                  key: 1,
+                  class: "pro-table_search-form_search-button",
+                  type: "primary",
+                  "html-type": "submit",
+                  onClick: onSearch
+                }, {
+                  default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                    createTextVNode(" 查询 ", -1)
+                  ])]),
+                  _: 1
+                }))
+              ], true),
+              renderSlot(_ctx.$slots, "expand-button", { onClick: changeExpandStatus }, () => [
+                showExpandToggle.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  __props.expandButton ? (openBlock(), createBlock(resolveDynamicComponent(__props.expandButton), {
+                    key: 0,
+                    "expand-status": expandStatus.value,
+                    onClick: changeExpandStatus
+                  }, null, 8, ["expand-status"])) : (openBlock(), createBlock(unref(Button), {
+                    key: 1,
+                    type: "link",
+                    class: "pro-table_search-form_expand-toggle-button",
+                    onClick: changeExpandStatus
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(expandStatus.value ? "收起" : "展开") + " ", 1),
+                      createVNode(DownOutlined, {
+                        class: "transition",
+                        style: normalizeStyle([{ "margin-left": "4px" }, { transform: `rotate(${expandStatus.value ? -180 : 0}deg)` }])
+                      }, null, 8, ["style"])
+                    ]),
+                    _: 1
+                  }))
+                ], 64)) : createCommentVNode("", true)
+              ], true)
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 16, ["form"]);
+    };
+  }
+});
+const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-37368080"]]);
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "DefaultSearchFormContainer",
+  setup(__props) {
+    const { token } = theme.useToken();
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", {
+        class: "pro-table_search-form-container",
+        style: normalizeStyle({ backgroundColor: (_a = unref(token).value) == null ? void 0 : _a.colorBgContainer })
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 4);
+    };
+  }
+});
+const DefaultSearchFormContainer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-8f67830d"]]);
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "DefaultTableContainer",
+  setup(__props) {
+    const { token } = theme.useToken();
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", {
+        class: "pro-table_table-container",
+        style: normalizeStyle({ backgroundColor: (_a = unref(token).value) == null ? void 0 : _a.colorBgContainer })
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 4);
+    };
+  }
+});
+const DefaultTableContainer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-02fe26ae"]]);
+const _sfc_main$4 = {};
+const _hoisted_1$2 = {
+  focusable: "false",
+  "data-icon": "column-height",
+  width: "1em",
+  height: "1em",
+  fill: "currentColor",
+  "aria-hidden": "true",
+  viewBox: "64 64 896 896"
+};
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z" }, null, -1)
+  ])]);
+}
+const ColumnHeightOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$1]]);
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "SizeControl",
+  props: {
+    "size": {},
+    "sizeModifiers": {}
+  },
+  emits: ["update:size"],
+  setup(__props) {
+    var _a;
+    const config = useConfig();
+    const size = useModel(__props, "size");
+    size.value = size.value ?? ((_a = config.componentSize) == null ? void 0 : _a.value) ?? "large";
+    const items = [
+      { label: "默认", key: "large" },
+      { label: "中等", key: "middle" },
+      { label: "紧凑", key: "small" }
+    ];
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Dropdown), {
+        arrow: "",
+        placement: "bottomRight"
+      }, {
+        popupRender: withCtx(() => [
+          createVNode(unref(Menu), {
+            "selected-keys": [size.value],
+            style: { "min-width": "80px" },
+            items,
+            onClick: _cache[0] || (_cache[0] = ({ key }) => size.value = key)
+          }, null, 8, ["selected-keys"])
+        ]),
+        default: withCtx(() => [
+          createVNode(unref(Button), {
+            type: "text",
+            class: "pro-table_size-control_button"
+          }, {
+            default: withCtx(() => [
+              createVNode(ColumnHeightOutlined)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const SizeControl = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-832ddd0e"]]);
+const _sfc_main$2 = {};
+const _hoisted_1$1 = {
+  focusable: "false",
+  "data-icon": "filter",
+  width: "1em",
+  height: "1em",
+  fill: "currentColor",
+  "aria-hidden": "true",
+  viewBox: "64 64 896 896"
+};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z" }, null, -1)
+  ])]);
+}
+const FilterOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ColumnControl",
+  props: {
+    columns: {},
+    table: { default: () => void 0 }
+  },
+  setup(__props) {
+    const open = ref(false);
+    const checkAll = ref(false);
+    const indeterminate = ref(false);
+    const checkedColumnsOptions = computed(
+      () => __props.columns.flatMap(
+        (item) => item.key && item.title ? {
+          label: item.title,
+          value: item.key,
+          checked: !item.hidden
+        } : []
+      )
+    );
+    const checkedColumnKeys = computed({
+      get() {
+        return checkedColumnsOptions.value.flatMap(
+          (item) => item.checked ? item.value : []
+        ) || [];
+      },
+      set(val) {
+        var _a;
+        (_a = checkedColumnsOptions.value) == null ? void 0 : _a.forEach((item) => {
+          var _a2, _b;
+          (_b = (_a2 = __props.table) == null ? void 0 : _a2.setColumn) == null ? void 0 : _b.call(_a2, item.value, {
+            hidden: !val.includes(item.value)
+          });
+        });
+      }
+    });
+    const onCheckAllChange = (e) => {
+      checkedColumnKeys.value = e.target.checked ? checkedColumnsOptions.value.map((item) => item.value) : [];
+      indeterminate.value = false;
+    };
+    const checkColumnsMenuItemClick = (val) => {
+      if (checkedColumnKeys.value.includes(val)) {
+        checkedColumnKeys.value = checkedColumnKeys.value.filter(
+          (item) => item !== val
+        );
+      } else {
+        checkedColumnKeys.value = [...checkedColumnKeys.value, val];
+      }
+    };
+    watch(
+      checkedColumnKeys,
+      (val) => {
+        indeterminate.value = !!val.length && val.length < checkedColumnsOptions.value.length;
+        checkAll.value = val.length > 0 && val.length === checkedColumnsOptions.value.length;
+      },
+      { immediate: true }
+    );
+    const items = computed(() => [
+      {
+        key: "all",
+        label: h(
+          Checkbox,
+          {
+            style: { width: "100%" },
+            checked: checkAll.value,
+            indeterminate: indeterminate.value,
+            onChange: onCheckAllChange
+          },
+          () => "全选"
+        )
+      },
+      { type: "divider" },
+      ...checkedColumnsOptions.value.map((item) => ({
+        key: item.value,
+        label: h(
+          Checkbox,
+          {
+            style: { width: "100%" },
+            checked: item.checked,
+            onChange: () => checkColumnsMenuItemClick(item.value)
+          },
+          () => item.label
+        )
+      }))
+    ]);
+    function handleOpenChange(nextOpen, info) {
+      if (info.source === "trigger" || nextOpen) {
+        open.value = nextOpen;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Dropdown), {
+        open: open.value,
+        arrow: "",
+        placement: "bottomRight",
+        menu: { items: items.value },
+        onOpenChange: handleOpenChange
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Button), {
+            type: "text",
+            class: "pro-table_column-control_button"
+          }, {
+            default: withCtx(() => [
+              createVNode(FilterOutlined)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["open", "menu"]);
+    };
+  }
+});
+const ColumnControl = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-246b0faf"]]);
+const _hoisted_1 = { class: "pro-table_header" };
+const _hoisted_2 = {
+  key: 0,
+  class: "pro-table_header_button-bar"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "pro-table_header_toolbar"
+};
+const _hoisted_4 = {
+  key: 2,
+  class: "pro-table_header_size-control"
+};
+const _hoisted_5 = {
+  key: 3,
+  class: "pro-table_header_column-control"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "ProTable", inheritAttrs: false },
+  __name: "BaseTable",
+  props: /* @__PURE__ */ mergeModels({
+    table: { default: () => void 0 },
+    search: { type: Function, default: void 0 },
+    addIndexColumn: { type: Boolean, default: () => void 0 },
+    immediateSearch: { type: Boolean, default: () => void 0 },
+    control: { type: [Boolean, Object], default: () => void 0 },
+    searchFormConfig: { default: () => void 0 },
+    tableContainer: { type: [Object, Function, Boolean], default: void 0 }
+  }, {
+    "size": {},
+    "sizeModifiers": {},
+    "loading": { type: Boolean },
+    "loadingModifiers": {}
+  }),
+  emits: ["update:size", "update:loading"],
+  setup(__props) {
+    const config = INJECT_CONFIG["pro-table"];
+    const injectProps = inject(config.injectionKey, config.default);
+    const tableProperties = Object.keys(tableProps());
+    const injectAttrs = pick(injectProps, tableProperties);
+    const computedSearchFormConfig = computed(() => {
+      var _a, _b;
+      const container = ((_a = __props.searchFormConfig) == null ? void 0 : _a.container) ?? ((_b = injectProps.searchFormConfig) == null ? void 0 : _b.container) ?? DefaultSearchFormContainer;
+      return {
+        ...injectProps.searchFormConfig,
+        ...getObject(__props.searchFormConfig),
+        container: container ? container : void 0
+      };
+    });
+    const attrs = useAttrs();
+    const tableAttrs = computed(() => {
+      return pick(camelizeProperties(attrs), tableProperties);
+    });
+    const { columns, dataSource, searchForm, pageParam, setPageParam } = __props.table || {};
+    const size = useModel(__props, "size");
+    const loading = useModel(__props, "loading");
+    const _search = async () => {
+      var _a;
+      try {
+        loading.value = true;
+        await ((_a = __props.search) == null ? void 0 : _a.call(__props));
+      } finally {
+        loading.value = false;
+      }
+    };
+    const reset = () => {
+      var _a;
+      (_a = __props.table) == null ? void 0 : _a.resetQueryParams();
+      nextTick(() => {
+        _search();
+      });
+    };
+    const slots = useSlots();
+    const {
+      "search-form": searchFormSlot,
+      "button-bar": buttonBarSlot,
+      toolbar: toolbarSlot,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      table: tableSlot,
+      ...tableSlots
+    } = slots;
+    const searchPage1st = () => {
+      setPageParam == null ? void 0 : setPageParam({ current: 1 });
+      _search();
+    };
+    const computedTableProps = computed(() => {
+      return {
+        ...injectAttrs,
+        ...tableAttrs.value,
+        pagination: void 0,
+        onChange: void 0
+      };
+    });
+    const computedTableContainer = computed(() => {
+      const container = __props.tableContainer ?? injectProps.tableContainer ?? DefaultTableContainer;
+      return container ? container : void 0;
+    });
+    const indexColumn = {
+      title: "序号",
+      dataIndex: "_index",
+      width: 80,
+      render: (_, __, index) => index + 1
+    };
+    const computedColumns = computed(
+      () => [
+        ...__props.addIndexColumn ?? injectProps.addIndexColumn ? [indexColumn] : [],
+        ...(tableAttrs.value.columns ?? (columns == null ? void 0 : columns.value) ?? []).flatMap(
+          (item, index) => {
+            if (item.key) return [{ ...item, key: item.key }];
+            if (item.dataIndex) {
+              const dataIndexKey = Array.isArray(item.dataIndex) ? item.dataIndex.join(".") : item.dataIndex;
+              return [{ ...item, key: dataIndexKey }];
+            }
+            return [{ ...item, key: index }];
+          }
+        )
+      ]
+    );
+    const visibleComputedColumns = computed(() => {
+      return computedColumns.value.filter((item) => !item.hidden);
+    });
+    const computedDataSource = computed(() => {
+      return tableAttrs.value.dataSource ?? (dataSource == null ? void 0 : dataSource.value);
+    });
+    const computedPagination = computed(() => {
+      if (tableAttrs.value.pagination === false) return false;
+      return {
+        ...injectAttrs.pagination,
+        ...pageParam,
+        ...tableAttrs.value.pagination
+      };
+    });
+    const onTableChange = (...args) => {
+      var _a;
+      setPageParam == null ? void 0 : setPageParam(args[0]);
+      (_a = attrs.onChange) == null ? void 0 : _a.call(attrs, ...args);
+      _search();
+    };
+    const showSearch = computed(() => {
+      var _a, _b;
+      return !!(searchFormSlot || ((_a = computedSearchFormConfig.value) == null ? void 0 : _a.hidden) !== true && searchForm && ((_b = searchForm.fields.value.filter((item) => !item.hidden)) == null ? void 0 : _b.length) > 0);
+    });
+    const computedControl = computed(() => {
+      const mergedControl = __props.control ?? injectProps.control;
+      const sizeControl = (mergedControl == null ? void 0 : mergedControl.sizeControl) ?? mergedControl;
+      const columnControl = (mergedControl == null ? void 0 : mergedControl.columnControl) ?? mergedControl;
+      return { sizeControl, columnControl };
+    });
+    onMounted(() => {
+      if (__props.immediateSearch ?? injectProps.immediateSearch) {
+        _search();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["pro-table", _ctx.$attrs.class]),
+        style: normalizeStyle(_ctx.$attrs.style)
+      }, [
+        showSearch.value ? (openBlock(), createBlock(unref(_sfc_main$a), {
+          key: 0,
+          component: computedSearchFormConfig.value.container
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "search-form", {}, () => [
+              unref(searchForm) ? (openBlock(), createBlock(SearchForm, mergeProps({
+                key: 0,
+                form: unref(searchForm)
+              }, computedSearchFormConfig.value, {
+                onSearch: searchPage1st,
+                onReset: reset
+              }), null, 16, ["form"])) : createCommentVNode("", true)
+            ], true)
+          ]),
+          _: 3
+        }, 8, ["component"])) : createCommentVNode("", true),
+        createVNode(unref(_sfc_main$a), { component: computedTableContainer.value }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              unref(buttonBarSlot) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "button-bar", {}, void 0, true)
+              ])) : createCommentVNode("", true),
+              unref(toolbarSlot) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
+              ])) : createCommentVNode("", true),
+              computedControl.value.sizeControl ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                createVNode(unref(SizeControl), {
+                  size: size.value,
+                  "onUpdate:size": _cache[0] || (_cache[0] = ($event) => size.value = $event)
+                }, null, 8, ["size"])
+              ])) : createCommentVNode("", true),
+              computedControl.value.columnControl ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                createVNode(unref(ColumnControl), {
+                  columns: computedColumns.value,
+                  table: __props.table
+                }, null, 8, ["columns", "table"])
+              ])) : createCommentVNode("", true)
+            ]),
+            renderSlot(_ctx.$slots, "table", {}, () => [
+              createVNode(unref(Table), mergeProps({ class: "pro-table_content" }, computedTableProps.value, {
+                size: size.value,
+                loading: loading.value,
+                columns: visibleComputedColumns.value,
+                "data-source": computedDataSource.value,
+                pagination: computedPagination.value,
+                onChange: onTableChange
+              }), createSlots({ _: 2 }, [
+                renderList(tableSlots, (_, name) => {
+                  return {
+                    name,
+                    fn: withCtx((scoped) => [
+                      renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(scoped)), void 0, true)
+                    ])
+                  };
+                })
+              ]), 1040, ["size", "loading", "columns", "data-source", "pagination"])
+            ], true)
+          ]),
+          _: 3
+        }, 8, ["component"])
+      ], 6);
+    };
+  }
+});
+const BaseTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-270ae6c9"]]);
+const useTable = useTable$1;
+export {
+  BaseTable as default,
+  useTable
+};