@gct-paas/v-ben 0.1.6-dev.3 → 0.1.6-dev.30

package/es/components/v-ben-table/src/BasicTable.vue_vue_type_script_lang.mjs

@@ -1,40 +1,133 @@
 import HeaderCell_default from "./components/HeaderCell.vue.mjs";
-import { basicProps } from "./props.mjs";
-import { computed, defineComponent, ref } from "vue";
+import { basicProps, basicTableInternalPropKeys } from "./props.mjs";
+import { useColumns } from "./hooks/useColumns.mjs";
+import { usePagination } from "./hooks/usePagination.mjs";
+import { useTableScroll } from "./hooks/useTableScroll.mjs";
+import { useTableExpand } from "./hooks/useTableExpand.mjs";
+import { useTableRowDrag } from "./hooks/useTableRowDrag.mjs";
+import { useDesign } from "../../../hooks/useDesign.mjs";
+import { HolderOutlined } from "@ant-design/icons-vue";
+import { computed, defineComponent, nextTick, onMounted, onUnmounted, ref, toRaw, unref } from "vue";
 import { omit } from "lodash-es";
 //#region src/components/v-ben-table/src/BasicTable.vue?vue&type=script&lang.ts
+var RESERVED_SLOT_NAMES = ["headerCell", "bodyCell"];
 var BasicTable_vue_vue_type_script_lang_default = defineComponent({
 	name: "BasicTable",
-	components: { HeaderCell: HeaderCell_default },
+	components: {
+		HeaderCell: HeaderCell_default,
+		HolderOutlined
+	},
 	props: basicProps,
-	emits: ["change"],
-	setup(props, { attrs, emit }) {
+	emits: [
+		"change",
+		"register",
+		"expanded-rows-change",
+		"resizeColumn",
+		"row-drag-end"
+	],
+	setup(props, { attrs, emit, slots, expose }) {
 		const tableElRef = ref(null);
-		const expandKeysList = ref([]);
+		const wrapRef = ref(null);
 		const formRef = ref(null);
+		const { prefixCls } = useDesign("basic-table");
+		const getProps = computed(() => {
+			return {
+				...props,
+				...attrs
+			};
+		});
+		const { getPaginationInfo, setPagination, getPagination, getShowPagination, setShowPagination } = usePagination(getProps);
+		const getPaginationRef = computed(() => unref(getPaginationInfo));
+		const getRowSelectionRef = computed(() => {
+			return unref(getProps).rowSelection ?? null;
+		});
+		const getDataSourceRef = computed(() => {
+			return unref(getProps).dataSource ?? [];
+		});
+		const { getViewColumns, getColumnsRef, handleResizeColumn } = useColumns(getProps, getPaginationRef);
+		const { getScrollRef, redoHeight } = useTableScroll(getProps, tableElRef, getColumnsRef, getRowSelectionRef, getPaginationRef, getDataSourceRef, wrapRef, formRef);
+		const slotNames = computed(() => Object.keys(slots).filter((name) => !RESERVED_SLOT_NAMES.includes(name)));
+		const { getExpandOption, expandedRowKeys, expandAll } = useTableExpand(getProps, getDataSourceRef, computed(() => !!slots.expandedRowRender || !!slots.expandIcon), emit);
 		const getBindValues = computed(() => {
-			let propsData = { ...attrs };
-			propsData = omit(propsData, ["class", "onChange"]);
+			let propsData = {
+				...attrs,
+				...unref(getProps),
+				scroll: unref(getScrollRef),
+				tableLayout: "fixed",
+				columns: toRaw(unref(getViewColumns)),
+				pagination: toRaw(unref(getPaginationInfo)),
+				rowSelection: unref(getRowSelectionRef),
+				dataSource: unref(getDataSourceRef),
+				...unref(getExpandOption)
+			};
+			propsData = omit(propsData, [
+				...basicTableInternalPropKeys,
+				"class",
+				"onChange"
+			]);
 			return propsData;
 		});
+		const { showDragIcon, initRowDrag, destroyRowDrag } = useTableRowDrag(wrapRef, getProps, getBindValues, getViewColumns, expandedRowKeys, slots, emit);
+		const getWrapperClass = computed(() => {
+			const values = unref(getBindValues);
+			return [
+				prefixCls,
+				attrs.class,
+				{
+					[`${prefixCls}-form-container`]: values.useSearchForm,
+					[`${prefixCls}--inset`]: values.inset
+				}
+			];
+		});
+		function onResizeColumn(width, column) {
+			handleResizeColumn(width, column);
+			emit("resizeColumn", width, column);
+		}
 		function handleTableChange(...args) {
 			emit("change", ...args);
+			const { onChange } = unref(getProps);
+			if (onChange && typeof onChange === "function") onChange(...args);
 		}
+		const getEmptyDataIsShowTable = computed(() => {
+			const { emptyDataIsShowTable, useSearchForm, dataSource } = props;
+			if (emptyDataIsShowTable || !useSearchForm) return true;
+			return !!dataSource?.length;
+		});
+		expose({
+			expandAll,
+			redoHeight,
+			setPagination,
+			getPagination,
+			getShowPagination,
+			setShowPagination
+		});
+		emit("register", { expandAll });
+		onMounted(() => {
+			redoHeight();
+			nextTick(() => {
+				initRowDrag();
+			});
+		});
+		onUnmounted(() => {
+			destroyRowDrag();
+		});
 		return {
 			formRef,
 			tableElRef,
+			wrapRef,
 			getBindValues,
+			getWrapperClass,
 			handleTableChange,
-			expandKeysList,
-			getEmptyDataIsShowTable: computed(() => {
-				const { emptyDataIsShowTable, useSearchForm, dataSource } = props;
-				if (emptyDataIsShowTable || !useSearchForm) return true;
-				return !!dataSource.length;
-			})
+			handleResizeColumn: onResizeColumn,
+			getEmptyDataIsShowTable,
+			slotNames,
+			emptyFull: props.emptyFull,
+			redoHeight,
+			expandedRowKeys,
+			isTreeTable: props.isTreeTable,
+			rowDraggable: props.rowDraggable,
+			showDragIcon
 		};
-	},
-	mounted() {
-		this.expandKeysList = this.getBindValues.expandedRowKeys;
 	}
 });
 //#endregion

package/es/components/v-ben-table/src/BasicTable.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,81 @@
+.vben-basic-table {
+  max-width: 100%;
+  height: 100%;
+}
+.vben-basic-table .ant-table-thead > tr > th {
+  padding: 10px;
+}
+.vben-basic-table .ant-table-tbody > tr > td,
+.vben-basic-table .ant-table-thead > tr > td,
+.vben-basic-table .ant-table-tbody > tr > th,
+.vben-basic-table .ant-table-thead > tr > th {
+  border-right: 1px solid transparent !important;
+}
+.vben-basic-table .ant-table-tbody > tr > td,
+.vben-basic-table .ant-table-thead > tr > td {
+  padding: 10px;
+}
+.vben-basic-table-form-container {
+  padding: 16px;
+}
+.vben-basic-table-form-container .ant-form {
+  width: 100%;
+  margin-bottom: 16px;
+  padding: 12px 10px 6px;
+  border-radius: 2px;
+}
+.vben-basic-table .ant-table-cell .ant-tag {
+  margin-right: 0;
+}
+.vben-basic-table .ant-table-wrapper {
+  padding: 6px;
+  border-radius: 2px;
+}
+.vben-basic-table .ant-table-wrapper .ant-table-title {
+  padding: 0 0 8px !important;
+}
+.vben-basic-table .ant-table-wrapper .ant-table.ant-table-bordered .ant-table-title {
+  border: none !important;
+}
+.vben-basic-table .empty-basic-table-wrapper.ant-table-wrapper:has(
+      div.ant-spin-nested-loading > div.ant-spin-container > div.ant-table-empty
+    ) .ant-spin-nested-loading > div.ant-spin-container > div.ant-table-empty > div.ant-table-container > div.ant-table-body {
+  max-height: none !important;
+}
+.vben-basic-table .ant-table {
+  width: 100%;
+  overflow-x: hidden;
+}
+.vben-basic-table .ant-pagination {
+  margin: 10px 0 0 !important;
+}
+.vben-basic-table--inset .ant-table-wrapper {
+  padding: 0;
+}
+.ant-table-thead th {
+  background-color: #f5f5f5;
+}
+.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td:has(.gct-handle) {
+  padding-left: 24px;
+}
+.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td:has(.gct-handle) .gct-handle {
+  position: absolute;
+  left: 6px;
+}
+.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td:has(.gct-handle) .gct-handle .handle-icon {
+  visibility: visible;
+}
+.ant-table .ant-table-tbody > tr > td:has(.gct-handle) {
+  padding-left: 24px !important;
+}
+.ant-table .ant-table-tbody > tr > td:has(.gct-handle) .gct-handle {
+  position: absolute;
+  left: 6px;
+  cursor: pointer;
+}
+.ant-table .ant-table-tbody > tr > td:has(.gct-handle) .gct-handle .handle-icon {
+  visibility: hidden;
+}
+.ant-table .ant-table-tbody > tr > td:has(.gct-handle) .gct-handle:hover .handle-icon {
+  color: var(--ant-primary-color);
+}

package/es/components/v-ben-table/src/components/TableAction.vue_vue_type_script_setup_true_lang.mjs

@@ -2,19 +2,13 @@ import { isBoolean, isFunction, isString } from "../../../../utils/is.mjs";
 import { PopConfirmButton } from "../../../v-ben-button/index.mjs";
 import { Dropdown as Dropdown$1 } from "../../../v-ben-dropdown/index.mjs";
 import "../../../index.mjs";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, toRaw, unref, withCtx } from "vue";
 import { MoreOutlined } from "@ant-design/icons-vue";
-import { Divider, Tooltip } from "ant-design-vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, toRaw, unref, withCtx } from "vue";
 import { permission, useNamespace } from "@gct-paas/core";
+import { Divider, Tooltip } from "ant-design-vue";
 //#region src/components/v-ben-table/src/components/TableAction.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	key: 0,
-	class: "text-14px"
-};
-var _hoisted_2 = {
-	key: 0,
-	class: "text-14px"
-};
+var _hoisted_1 = { key: 0 };
+var _hoisted_2 = { key: 0 };
 var TableAction_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "TableAction",
 	props: {

package/es/components/v-ben-table/src/components/TableAction.vue_vue_type_style_index_0_lang.css

@@ -1,37 +1,38 @@
-.vben-basic-table-action {
+.gct-basic-table-action {
   display: flex;
   align-items: center;
 }
-.vben-basic-table-action .action-divider {
+.gct-basic-table-action .action-divider {
   display: table;
 }
-.vben-basic-table-action.left {
+.gct-basic-table-action.left {
   justify-content: flex-start;
 }
-.vben-basic-table-action.center {
+.gct-basic-table-action.center {
   justify-content: center;
 }
-.vben-basic-table-action.right {
+.gct-basic-table-action.right {
   justify-content: flex-end;
 }
-.vben-basic-table-action button {
+.gct-basic-table-action button {
   display: flex;
   align-items: center;
 }
-.vben-basic-table-action button span {
+.gct-basic-table-action button span {
   margin-left: 0 !important;
+  font-size: 14px;
 }
-.vben-basic-table-action button.ant-btn-circle span {
+.gct-basic-table-action button.ant-btn-circle span {
   margin: auto !important;
 }
-.vben-basic-table-action .ant-divider,
-.vben-basic-table-action .ant-divider-vertical {
+.gct-basic-table-action .ant-divider,
+.gct-basic-table-action .ant-divider-vertical {
   margin: 0 2px;
 }
-.vben-basic-table-action .icon-more {
+.gct-basic-table-action .icon-more {
   transform: rotate(90deg);
 }
-.vben-basic-table-action .icon-more svg {
+.gct-basic-table-action .icon-more svg {
   font-size: 1.1em;
   font-weight: 700;
 }

package/es/components/v-ben-table/src/components/TableActionAuto.vue_vue_type_script_setup_true_lang.mjs

@@ -2,10 +2,10 @@ import { isFunction, isString } from "../../../../utils/is.mjs";
 import { PopConfirmButton } from "../../../v-ben-button/index.mjs";
 import { Dropdown as Dropdown$1 } from "../../../v-ben-dropdown/index.mjs";
 import "../../../index.mjs";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, toRaw, unref, withCtx, withModifiers } from "vue";
 import { MoreOutlined } from "@ant-design/icons-vue";
-import { Divider, Tooltip } from "ant-design-vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, toRaw, unref, withCtx, withModifiers } from "vue";
 import { permission, useNamespace } from "@gct-paas/core";
+import { Divider, Tooltip } from "ant-design-vue";
 //#region src/components/v-ben-table/src/components/TableActionAuto.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -38,7 +38,7 @@ var TableActionAuto_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 	},
 	setup(__props) {
 		const props = __props;
-		const ns = useNamespace("basic-table-action");
+		const ns = useNamespace("basic-table-action-auto");
 		const hasPermission = permission.has;
 		function isIfShow(action) {
 			const ifShow = action.ifShow ?? true;

package/es/components/v-ben-table/src/components/TableActionAuto.vue_vue_type_style_index_0_lang.css

@@ -1,37 +1,38 @@
-.vben-basic-table-action {
+.gct-basic-table-action-auto {
   display: flex;
   align-items: center;
 }
-.vben-basic-table-action .action-divider {
+.gct-basic-table-action-auto .action-divider {
   display: table;
 }
-.vben-basic-table-action.left {
+.gct-basic-table-action-auto.left {
   justify-content: flex-start;
 }
-.vben-basic-table-action.center {
+.gct-basic-table-action-auto.center {
   justify-content: center;
 }
-.vben-basic-table-action.right {
+.gct-basic-table-action-auto.right {
   justify-content: flex-end;
 }
-.vben-basic-table-action button {
+.gct-basic-table-action-auto button {
   display: flex;
   align-items: center;
 }
-.vben-basic-table-action button span {
+.gct-basic-table-action-auto button span {
   margin-left: 0 !important;
+  font-size: 14px;
 }
-.vben-basic-table-action button.ant-btn-circle span {
+.gct-basic-table-action-auto button.ant-btn-circle span {
   margin: auto !important;
 }
-.vben-basic-table-action .ant-divider,
-.vben-basic-table-action .ant-divider-vertical {
+.gct-basic-table-action-auto .ant-divider,
+.gct-basic-table-action-auto .ant-divider-vertical {
   margin: 0 10px;
 }
-.vben-basic-table-action .icon-more {
+.gct-basic-table-action-auto .icon-more {
   transform: rotate(90deg);
 }
-.vben-basic-table-action .icon-more svg {
+.gct-basic-table-action-auto .icon-more svg {
   font-size: 1.1em;
   font-weight: 700;
 }

package/es/components/v-ben-table/src/const.d.ts

@@ -0,0 +1,12 @@
+/** 默认列对齐 */
+export declare const DEFAULT_ALIGN: "left";
+/** autoCreateKey 时使用的默认行 key 字段 */
+export declare const ROW_KEY = "key";
+export declare const INDEX_COLUMN_FLAG = "INDEX";
+export declare const ACTION_COLUMN_FLAG = "ACTION";
+/** 可选每页条数 */
+export declare const PAGE_SIZE_OPTIONS: string[];
+/** 默认每页条数 */
+export declare const PAGE_SIZE = 20;
+/** 开启列宽拖拽时，未指定 width 的列默认宽度 */
+export declare const DEFAULT_RESIZABLE_COLUMN_WIDTH = 150;

package/es/components/v-ben-table/src/const.mjs

@@ -0,0 +1,14 @@
+//#region src/components/v-ben-table/src/const.ts
+/** 默认列对齐 */
+var DEFAULT_ALIGN = "left";
+var INDEX_COLUMN_FLAG = "INDEX";
+var ACTION_COLUMN_FLAG = "ACTION";
+/** 可选每页条数 */
+var PAGE_SIZE_OPTIONS = [
+	"20",
+	"50",
+	"80",
+	"100"
+];
+//#endregion
+export { ACTION_COLUMN_FLAG, DEFAULT_ALIGN, INDEX_COLUMN_FLAG, PAGE_SIZE_OPTIONS };

package/es/components/v-ben-table/src/hooks/useColumns.d.ts

@@ -0,0 +1,8 @@
+import { BasicColumn, BasicTableProps } from '../types/table';
+import { PaginationProps } from '../types/pagination';
+import { ComputedRef } from 'vue';
+export declare function useColumns(propsRef: ComputedRef<BasicTableProps>, getPaginationRef: ComputedRef<boolean | PaginationProps>): {
+    getColumnsRef: ComputedRef<BasicColumn[]>;
+    getViewColumns: ComputedRef<BasicColumn[]>;
+    handleResizeColumn: (width: number, column: BasicColumn) => void;
+};

package/es/components/v-ben-table/src/hooks/useColumns.mjs

@@ -0,0 +1,180 @@
+import { isBoolean, isFunction } from "../../../../utils/is.mjs";
+import { ACTION_COLUMN_FLAG, INDEX_COLUMN_FLAG } from "../const.mjs";
+import { computed, ref, unref, watch } from "vue";
+import { cloneDeep } from "lodash-es";
+import { permission, t } from "@gct-paas/core";
+//#region src/components/v-ben-table/src/hooks/useColumns.ts
+function normalizeColumnWidth(width) {
+	if (width === void 0 || width === null || width === "") return;
+	if (typeof width === "number" && !Number.isNaN(width)) return width;
+	if (typeof width === "string") {
+		const numericWidth = Number.parseInt(width, 10);
+		if (!Number.isNaN(numericWidth)) return numericWidth;
+	}
+}
+function applyResizable(item, tableResizable) {
+	if (!tableResizable || item.resizable === false) return;
+	if (typeof item.width === "string" && item.width.includes("%")) return;
+	item.resizable = true;
+	const width = normalizeColumnWidth(item.width);
+	if (width !== void 0) {
+		item.width = width;
+		return;
+	}
+	item.width = 150;
+}
+function handleItem(item, ellipsis, tableResizable) {
+	const { key, dataIndex, children } = item;
+	item.align = item.align || "left";
+	if (ellipsis) {
+		if (!key && dataIndex !== void 0) item.key = Array.isArray(dataIndex) ? dataIndex.join(".") : String(dataIndex);
+		if (!isBoolean(item.ellipsis)) Object.assign(item, { ellipsis: { showTitle: false } });
+	}
+	if (children && children.length) handleChildren(children, !!ellipsis, tableResizable);
+	applyResizable(item, tableResizable);
+	const originalCustomCell = item.customCell;
+	/** 只有内容超出的时候才出 title */
+	item.customCell = (record, rowIndex) => {
+		return {
+			...originalCustomCell && originalCustomCell(record, rowIndex),
+			onMouseenter(event) {
+				if (!item.ellipsis) return;
+				const el = event.target;
+				if (el.scrollWidth > el.clientWidth) el.setAttribute("title", el.textContent ?? "");
+			}
+		};
+	};
+}
+function handleChildren(children, ellipsis, tableResizable) {
+	if (!children) return;
+	children.forEach((item) => {
+		const { children: childCols } = item;
+		handleItem(item, ellipsis, tableResizable);
+		handleChildren(childCols, ellipsis, tableResizable);
+	});
+}
+function handleIndexColumn(propsRef, getPaginationRef, columns) {
+	const { showIndexColumn, indexColumnProps, isTreeTable } = unref(propsRef);
+	let pushIndexColumns = false;
+	if (unref(isTreeTable)) return;
+	columns.forEach(() => {
+		const indIndex = columns.findIndex((column) => column.flag === INDEX_COLUMN_FLAG);
+		if (showIndexColumn) pushIndexColumns = indIndex === -1;
+		else if (!showIndexColumn && indIndex !== -1) columns.splice(indIndex, 1);
+	});
+	if (!pushIndexColumns) return;
+	const isFixedLeft = columns.some((item) => item.fixed === "left");
+	columns.unshift({
+		flag: INDEX_COLUMN_FLAG,
+		width: 70,
+		title: t("sys.component.table.index"),
+		align: "center",
+		customRender: ({ index }) => {
+			const getPagination = unref(getPaginationRef);
+			if (isBoolean(getPagination)) return `${index + 1}`;
+			const { current = 1, pageSize = 20 } = getPagination;
+			return ((current < 1 ? 1 : current) - 1) * pageSize + index + 1;
+		},
+		...isFixedLeft ? { fixed: "left" } : {},
+		...indexColumnProps
+	});
+}
+function handleActionColumn(propsRef, columns) {
+	const { actionColumn } = unref(propsRef);
+	if (!actionColumn) return;
+	const hasIndex = columns.findIndex((column) => column.flag === ACTION_COLUMN_FLAG);
+	if (hasIndex === -1) columns.push({
+		...columns[hasIndex],
+		fixed: "right",
+		...actionColumn,
+		flag: ACTION_COLUMN_FLAG
+	});
+}
+function sortFixedColumn(columns) {
+	const fixedLeftColumns = [];
+	const fixedRightColumns = [];
+	const defColumns = [];
+	for (const column of columns) {
+		if (column.fixed === "left") {
+			fixedLeftColumns.push(column);
+			continue;
+		}
+		if (column.fixed === "right") {
+			fixedRightColumns.push(column);
+			continue;
+		}
+		defColumns.push(column);
+	}
+	return [
+		...fixedLeftColumns,
+		...defColumns,
+		...fixedRightColumns
+	].filter((item) => !item.defaultHidden);
+}
+function hasColumnAuth(auth) {
+	if (!auth) return true;
+	if (Array.isArray(auth)) return auth.some((key) => permission.has(String(key)));
+	return permission.has(String(auth));
+}
+function isIfShow(column) {
+	const ifShow = column.ifShow;
+	if (isBoolean(ifShow)) return ifShow;
+	if (isFunction(ifShow)) return ifShow(column);
+	return true;
+}
+function updateColumnWidth(columns, column, width) {
+	const { dataIndex, key } = column;
+	for (const col of columns) {
+		if (dataIndex !== void 0 && col.dataIndex === dataIndex || key !== void 0 && col.key === key) {
+			col.width = width;
+			return true;
+		}
+		if (col.children?.length && updateColumnWidth(col.children, column, width)) return true;
+	}
+	return false;
+}
+function useColumns(propsRef, getPaginationRef) {
+	const columnsRef = ref(unref(propsRef).columns);
+	const getColumnsRef = computed(() => {
+		const columns = cloneDeep(unref(columnsRef));
+		handleIndexColumn(propsRef, getPaginationRef, columns);
+		handleActionColumn(propsRef, columns);
+		if (!columns) return [];
+		const { ellipsis, resizable = true } = unref(propsRef);
+		columns.forEach((item) => {
+			const { customRender, slots } = item;
+			handleItem(item, Reflect.has(item, "ellipsis") ? !!item.ellipsis : !!ellipsis && !customRender && !slots, resizable);
+		});
+		return columns;
+	});
+	const getViewColumns = computed(() => {
+		const viewColumns = sortFixedColumn(unref(getColumnsRef));
+		const mapFn = (column) => {
+			const { slots } = column;
+			if (!slots || !slots?.title) {
+				column.customTitle = column.title;
+				Reflect.deleteProperty(column, "title");
+			}
+			return column;
+		};
+		return cloneDeep(viewColumns).filter((column) => hasColumnAuth(column.auth) && isIfShow(column)).map((column) => {
+			if (column.children?.length) column.children = column.children.map(mapFn);
+			return mapFn(column);
+		});
+	});
+	watch(() => unref(propsRef).columns, (columns) => {
+		columnsRef.value = columns;
+	});
+	function handleResizeColumn(width, column) {
+		column.width = width;
+		const columns = unref(columnsRef);
+		if (updateColumnWidth(columns, column, width)) columnsRef.value = [...columns];
+	}
+	return {
+		getColumnsRef,
+		getViewColumns,
+		handleResizeColumn
+	};
+}
+//#endregion
+export { useColumns };

package/es/components/v-ben-table/src/hooks/usePagination.d.ts

@@ -0,0 +1,10 @@
+import { PaginationProps } from '../types/pagination';
+import { BasicTableProps } from '../types/table';
+import { ComputedRef } from 'vue';
+export declare function usePagination(refProps: ComputedRef<BasicTableProps>): {
+    getPagination: () => boolean | PaginationProps;
+    getPaginationInfo: ComputedRef<boolean | PaginationProps>;
+    setShowPagination: (flag: boolean) => Promise<void>;
+    getShowPagination: () => boolean;
+    setPagination: (info: Partial<PaginationProps>) => void;
+};

package/es/components/v-ben-table/src/hooks/usePagination.mjs

@@ -0,0 +1,63 @@
+import { isBoolean } from "../../../../utils/is.mjs";
+import { PAGE_SIZE_OPTIONS } from "../const.mjs";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
+import { computed, h, ref, unref, watch } from "vue";
+import { t } from "@gct-paas/core";
+//#region src/components/v-ben-table/src/hooks/usePagination.ts
+function itemRender({ page, type, originalElement }) {
+	if (type === "prev") return page === 0 ? null : h(LeftOutlined);
+	if (type === "next") return page === 1 ? null : h(RightOutlined);
+	return originalElement;
+}
+function usePagination(refProps) {
+	const configRef = ref({});
+	const show = ref(true);
+	watch(() => unref(refProps).pagination, (pagination) => {
+		if (!isBoolean(pagination) && pagination) configRef.value = {
+			...unref(configRef),
+			...pagination
+		};
+	}, { deep: true });
+	const getPaginationInfo = computed(() => {
+		const { pagination } = unref(refProps);
+		if (!unref(show) || isBoolean(pagination) && !pagination) return false;
+		return {
+			current: 1,
+			pageSize: 20,
+			size: "small",
+			defaultPageSize: 20,
+			showTotal: (total) => t("sys.component.table.total", { total }),
+			showSizeChanger: true,
+			pageSizeOptions: PAGE_SIZE_OPTIONS,
+			itemRender,
+			showQuickJumper: true,
+			...isBoolean(pagination) ? {} : pagination ?? {},
+			...unref(configRef)
+		};
+	});
+	function setPagination(info) {
+		const paginationInfo = unref(getPaginationInfo);
+		configRef.value = {
+			...!isBoolean(paginationInfo) ? paginationInfo : {},
+			...info
+		};
+	}
+	function getPagination() {
+		return unref(getPaginationInfo);
+	}
+	function getShowPagination() {
+		return unref(show);
+	}
+	async function setShowPagination(flag) {
+		show.value = flag;
+	}
+	return {
+		getPagination,
+		getPaginationInfo,
+		setShowPagination,
+		getShowPagination,
+		setPagination
+	};
+}
+//#endregion
+export { usePagination };