@gx-design-vue/pro-table 0.2.0-alpha.2 → 0.2.0-alpha.21

package/dist/hooks/useTable.js

@@ -1,73 +1,100 @@
-import { computed, isRef, reactive, ref, watch } from "vue";
-import { cloneDeep, deepMerge, isObject, useDeepMerge } from "@gx-design-vue/pro-utils";
-
+import { computed, reactive, ref, toValue, watch } from "vue";
+import { merge } from "@gx-design-vue/pro-utils";
 //#region src/hooks/useTable.ts
+const EMPTY_ARRAY = [];
 function useTable(tableRef, options) {
-	function getTableState() {
-		const defaultState = {
-			params: {},
-			searchMap: []
-		};
-		if (options?.state) {
-			if (isRef(options.state) && isObject(options.state.value)) return deepMerge(defaultState, cloneDeep(options.state.value));
-			else if (isObject(options.state) && !isRef(options.state)) return deepMerge(defaultState, cloneDeep(options.state));
+	const tableState = reactive({
+		params: {},
+		searchMap: []
+	});
+	const syncedStateKeys = /* @__PURE__ */ new Set();
+	function syncTableState(state = {}) {
+		for (const key of syncedStateKeys) if (!(key in state)) {
+			delete tableState[key];
+			syncedStateKeys.delete(key);
+		}
+		for (const key of Object.keys(state)) {
+			const nextValue = state[key];
+			if (nextValue !== tableState[key]) tableState[key] = nextValue;
+			syncedStateKeys.add(key);
 		}
-		return defaultState;
+		if (options?.request) tableState.request = options.request;
 	}
-	const tableState = reactive(deepMerge(getTableState(), { request: options?.request }));
-	if (options?.state) watch(() => options.state && isRef(options.state) ? options.state.value : options.state, () => {
-		updateTableState();
-	}, { deep: true });
+	watch(() => toValue(options?.state), (newState) => {
+		syncTableState(newState ?? {});
+	}, {
+		deep: true,
+		immediate: true
+	});
 	const actionRef = computed(() => {
-		if (tableRef.value) return tableRef.value.actionRef();
-		return {};
+		return tableRef.value?.actionRef?.() ?? {};
 	});
 	const formRef = computed(() => {
-		if (tableRef.value?.formRef) return tableRef.value.formRef();
-		return {};
+		return tableRef.value?.formRef?.() ?? {};
 	});
-	const requestSearch = computed(() => {
-		return {
-			...actionRef.value?.pageInfo || {},
-			...formRef.value?.getFormSearch?.() || {}
-		};
-	});
-	const loading = ref(!!actionRef.value?.loading?.value);
+	const requestSearch = computed(() => ({
+		...actionRef.value?.pageInfo || {},
+		...formRef.value?.getFormSearch?.() || {}
+	}));
+	const loading = ref(false);
 	watch(() => actionRef.value?.loading?.value, (val) => {
 		loading.value = !!val;
 	});
 	watch(loading, (val) => {
 		actionRef.value?.setLoading?.(!!val);
 	});
-	function updateTableState() {
-		useDeepMerge(tableState, getTableState());
+	function reload(info) {
+		actionRef.value?.reload?.(info);
+	}
+	function setTableDataList(data) {
+		actionRef.value?.setTableDataList?.(data);
+	}
+	function operateTableDataRow(props) {
+		actionRef.value?.operateTableDataRow?.(props);
+	}
+	function setPageInfo(pagination, filters, sorter, extra) {
+		actionRef.value?.setPageInfo?.(pagination, filters, sorter, extra);
+	}
+	function setPagination(pagination) {
+		actionRef.value?.setPagination?.(pagination);
+	}
+	function reloadAndReset(options) {
+		actionRef.value?.reloadAndReset?.(options);
 	}
+	function setLoading(value) {
+		loading.value = value;
+	}
+	const selectedKeys = computed(() => actionRef.value?.selectedKeys?.value ?? []);
+	const selectedItems = computed(() => actionRef.value?.selectedItems?.value ?? []);
+	const rowsSelection = {
+		clear: () => actionRef.value?.rowsSelection?.clear?.(),
+		select: (record, selected) => actionRef.value?.rowsSelection?.select?.(record, selected),
+		selectAll: (records, selected) => actionRef.value?.rowsSelection?.selectAll?.(records, selected),
+		remove: (keys) => actionRef.value?.rowsSelection?.remove?.(keys),
+		sync: () => actionRef.value?.rowsSelection?.sync?.()
+	};
 	function updateSearchMap(key, value) {
-		if (tableState.searchMap) tableState.searchMap = cloneDeep(tableState.searchMap).map((item) => {
-			if (item.name === key) return deepMerge(item, value);
-			return item;
-		});
+		if (tableState.searchMap) tableState.searchMap = tableState.searchMap.map((item) => item.name === key ? merge({}, item, value) : item);
 	}
 	return {
-		formRef,
+		loading,
+		dataSource: computed(() => actionRef.value?.dataSource?.value ?? EMPTY_ARRAY),
+		requestSearch,
+		selectedKeys,
+		selectedItems,
+		rowsSelection,
 		actionRef,
+		formRef,
+		reload,
+		setTableDataList,
+		operateTableDataRow,
+		setPageInfo,
+		setPagination,
+		reloadAndReset,
+		setLoading,
 		tableState,
-		requestSearch,
-		loading,
-		dataSource: computed(() => actionRef?.value?.dataSource?.value || []),
-		selectedKeys: computed(() => actionRef?.value?.selectedKeys?.value || []),
-		selectedItems: computed(() => actionRef?.value?.selectedItems?.value || []),
-		rowsSelection: actionRef?.value?.rowsSelection,
-		setTableDataList: (data) => actionRef.value?.setTableDataList?.(data),
-		reloadAndReset: (options) => actionRef.value?.reloadAndReset?.(options),
-		setPageInfo: (pagination, filters, sorter, extra) => actionRef.value?.setPageInfo?.(pagination, filters, sorter, extra),
-		setPagination: (pageInfo) => actionRef.value?.setPagination?.(pageInfo),
-		setLoading: (value) => loading.value = value,
-		operateTableDataRow: (params) => actionRef.value?.operateTableDataRow?.(params),
-		reload: (info) => actionRef.value?.reload?.(info),
 		updateSearchMap
 	};
 }
-
 //#endregion
-export { useTable };
+export { useTable };

package/dist/hooks/useTableForm.d.ts

@@ -1,86 +1,21 @@
-import { ProFieldValueFormat, ProFieldValueType, ProSchemaValueEnumType, ProSearchMap } from "../types/ColumnTypings.js";
-import { ProTableProps } from "../types/TableTypings.js";
+import { ProColumnType, ProSearchMap } from "../interface.js";
 import { ComputedRef, Ref } from "vue";
-import * as _gx_design_vue_pro_utils0 from "@gx-design-vue/pro-utils";
-import { RecordType } from "@gx-design-vue/pro-utils";
 
 //#region src/hooks/useTableForm.d.ts
-declare function handleFormDefaultValue(data: ProSearchMap[]): RecordType;
-declare function useTableForm({
-  searchMap,
-  columns
-}: {
-  searchMap: Ref<ProTableProps['searchMap']>;
-  columns: ComputedRef<ProTableProps['columns']>;
-}): {
-  formCols: Ref<{
-    name: string;
-    order?: number;
-    valueType?: ProFieldValueType;
-    valueFormat?: ProFieldValueFormat;
-    placeholder?: string | string[];
-    allowClear?: boolean;
-    showSearch?: boolean;
-    showToday?: boolean;
-    rangeStartName?: string;
-    rangeEndName?: string;
-    use12Hours?: boolean;
-    loading?: boolean;
-    showTime?: RecordType | boolean;
-    initialValue?: any;
-    valueKey?: string;
-    request?: {
-      fetch?: () => Promise<ProSchemaValueEnumType[]>;
-      manual?: boolean;
-      debounceTime?: number;
-    };
-    label?: string;
-    labelWidth?: string | number;
-    labelAlign?: "center" | "left" | "right";
-    field?: {
-      [x: string]: any;
-      rules?: RegExp;
-    };
-    valueEnum?: {
-      label: _gx_design_vue_pro_utils0.VueNode | JSX.Element;
-      value: any;
-      disabled?: boolean;
-    }[];
-  }[], ProSearchMap<"text", string>[] | {
-    name: string;
-    order?: number;
-    valueType?: ProFieldValueType;
-    valueFormat?: ProFieldValueFormat;
-    placeholder?: string | string[];
-    allowClear?: boolean;
-    showSearch?: boolean;
-    showToday?: boolean;
-    rangeStartName?: string;
-    rangeEndName?: string;
-    use12Hours?: boolean;
-    loading?: boolean;
-    showTime?: RecordType | boolean;
-    initialValue?: any;
-    valueKey?: string;
-    request?: {
-      fetch?: () => Promise<ProSchemaValueEnumType[]>;
-      manual?: boolean;
-      debounceTime?: number;
-    };
-    label?: string;
-    labelWidth?: string | number;
-    labelAlign?: "center" | "left" | "right";
-    field?: {
-      [x: string]: any;
-      rules?: RegExp;
-    };
-    valueEnum?: {
-      label: _gx_design_vue_pro_utils0.VueNode | JSX.Element;
-      value: any;
-      disabled?: boolean;
-    }[];
-  }[]>;
-  defaultFormSearch: Ref<RecordType, RecordType>;
-};
+interface UseTableFormOptions {
+  searchMap: ComputedRef<ProSearchMap[]>;
+  columns: ComputedRef<ProColumnType[]>;
+  params: ComputedRef<Record<string, any> | undefined>;
+}
+interface UseTableFormReturn {
+  formColumns: ComputedRef<ProSearchMap[]>;
+  formParamKeys: ComputedRef<string[]>;
+  defaultFormSearch: Ref<Record<string, any>>;
+  formState: Ref<Record<string, any>>;
+  getFormSearch: () => Record<string, any>;
+  resetFormState: () => void;
+  changeFormState: (key: string, value: any) => void;
+}
+declare function useTableForm(options: UseTableFormOptions): UseTableFormReturn;
 //#endregion
-export { handleFormDefaultValue, useTableForm };
+export { UseTableFormOptions, UseTableFormReturn, useTableForm };

package/dist/hooks/useTableForm.js

@@ -1,69 +1,154 @@
-import { ref, watch } from "vue";
-import { isArray } from "@gx-design-vue/pro-utils";
-
+import { computed, ref, toRaw, watch } from "vue";
+import { cloneDeep } from "@gx-design-vue/pro-utils";
 //#region src/hooks/useTableForm.ts
-function handleFormDefaultValue(data) {
-	const defaulState = {};
-	data.forEach((item) => {
-		let initialValue = item.initialValue;
-		const valueEmptyArray = ["treeSelect", "numberRange"];
-		if (item.valueType) {
-			if (!initialValue && valueEmptyArray.includes(item.valueType)) initialValue = [];
-		}
-		if (item.name) defaulState[item.name] = initialValue;
-		if (item.valueType === "dateRange") {
-			if (item.rangeStartName || item.rangeEndName) {
-				defaulState[item.rangeStartName || "start"] = isArray(initialValue) ? initialValue[0] : void 0;
-				defaulState[item.rangeEndName || "end"] = isArray(initialValue) ? initialValue[1] : void 0;
-				delete defaulState[item.name];
-			}
+function hasOwnValue(target, key) {
+	return !!target && Object.hasOwn(target, key);
+}
+function sortFormItemsByOrder(items) {
+	let maxOrder = items.reduce((max, item) => {
+		return item.order !== void 0 ? Math.max(max, item.order) : max;
+	}, 0);
+	const sorted = items.map((item) => {
+		if (item.order === void 0) {
+			maxOrder += 1;
+			return {
+				...item,
+				order: maxOrder
+			};
 		}
+		return item;
 	});
-	return defaulState;
+	sorted.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+	return sorted;
+}
+function computeDefaultFormValues(columns, params) {
+	const defaults = {};
+	for (const col of columns) {
+		const valueType = col.valueType ?? "text";
+		const name = col.name;
+		if (valueType === "dateRange" && (col.rangeStartName || col.rangeEndName)) {
+			const startKey = col.rangeStartName || "start";
+			const endKey = col.rangeEndName || "end";
+			defaults[startKey] = hasOwnValue(params, startKey) ? params[startKey] : void 0;
+			defaults[endKey] = hasOwnValue(params, endKey) ? params[endKey] : void 0;
+		} else if (hasOwnValue(params, name)) defaults[name] = params[name];
+		else if (col.initialValue !== void 0) defaults[col.name] = col.initialValue;
+		else if (valueType === "numberRange") defaults[col.name] = [];
+		else if (valueType === "treeSelect" && (col.field?.treeCheckable || col.field?.multiple)) defaults[col.name] = [];
+		else if (valueType === "cascader" && col.field?.multiple) defaults[col.name] = [];
+		else if (valueType === "dateRange") defaults[col.name] = void 0;
+	}
+	return defaults;
 }
-function useTableForm({ searchMap, columns }) {
-	const formCols = ref([]);
-	const defaultFormSearch = ref({});
-	function updateFormData(data) {
-		data.forEach((item) => {
-			if (formCols.value.some((el) => el.name === item.name)) formCols.value = formCols.value.map((el) => {
-				if (el.name === item.name) return {
-					...el,
-					...item
-				};
-				return el;
-			});
-			else formCols.value.push(item);
-		});
-		const defaultParams = handleFormDefaultValue(data);
-		defaultFormSearch.value = {
-			...defaultFormSearch.value,
-			...defaultParams
-		};
+function buildFormStateFromDefaults(defaults, columns) {
+	const state = cloneDeep(toRaw(defaults));
+	for (const record of columns) if (record.valueType === "dateRange" && (record.rangeStartName || record.rangeEndName)) {
+		const startKey = record.rangeStartName || "start";
+		const endKey = record.rangeEndName || "end";
+		const startValue = defaults[startKey];
+		const endValue = defaults[endKey];
+		if (startValue !== void 0 || endValue !== void 0) state[record.name] = [startValue, endValue];
 	}
-	watch(() => searchMap.value, () => {
-		const searchData = [];
-		searchMap.value?.forEach((item) => searchData.push(item));
-		if (searchData.length) updateFormData(searchData);
+	return state;
+}
+function useTableForm(options) {
+	const { searchMap, columns, params } = options;
+	const formColumns = computed(() => {
+		const colsFromSearchMap = searchMap.value ?? [];
+		const searchMapNames = new Set(colsFromSearchMap.map((item) => item.name));
+		const colsFromColumns = columns.value.filter((col) => col.searchConfig).map((col) => ({
+			...col.searchConfig,
+			order: col.searchConfig.order ?? col.order ?? 0
+		})).filter((col) => !searchMapNames.has(col.name));
+		return sortFormItemsByOrder([...colsFromSearchMap, ...colsFromColumns]);
+	});
+	const formParamKeys = computed(() => {
+		const keys = /* @__PURE__ */ new Set();
+		for (const record of formColumns.value) {
+			if (record.name !== void 0) keys.add(record.name);
+			if (record.valueType === "dateRange" && (record.rangeStartName || record.rangeEndName)) {
+				keys.add(record.rangeStartName || "start");
+				keys.add(record.rangeEndName || "end");
+			}
+		}
+		return [...keys];
+	});
+	const defaultFormSearch = computed(() => {
+		return computeDefaultFormValues(formColumns.value, params.value);
+	});
+	const formState = ref({});
+	watch(() => defaultFormSearch.value, (newDefaults) => {
+		const nextState = { ...formState.value };
+		const defaultState = buildFormStateFromDefaults(newDefaults, formColumns.value);
+		for (const key of Object.keys(defaultState)) if (!hasOwnValue(nextState, key)) nextState[key] = defaultState[key];
+		formState.value = nextState;
 	}, {
 		deep: true,
 		immediate: true
 	});
-	watch(() => columns.value, () => {
-		const searchData = [];
-		if (columns.value && columns.value?.length) columns.value.forEach((item) => {
-			if (item.searchConfig) searchData.push(item.searchConfig);
-		});
-		if (searchData.length) updateFormData(searchData);
+	watch(() => params.value, (newParams) => {
+		if (!newParams) return;
+		const nextState = { ...formState.value };
+		for (const record of formColumns.value) {
+			const name = record.name;
+			if (record.valueType === "dateRange" && (record.rangeStartName || record.rangeEndName)) {
+				const startKey = record.rangeStartName || "start";
+				const endKey = record.rangeEndName || "end";
+				if (hasOwnValue(newParams, startKey) || hasOwnValue(newParams, endKey)) {
+					const startValue = newParams[startKey];
+					const endValue = newParams[endKey];
+					nextState[name] = startValue !== void 0 || endValue !== void 0 ? [startValue, endValue] : void 0;
+				}
+			} else if (hasOwnValue(newParams, name)) nextState[name] = newParams[name];
+		}
+		formState.value = nextState;
 	}, {
 		deep: true,
 		immediate: true
 	});
+	function getFormSearch() {
+		const searchParams = {};
+		for (const record of formColumns.value) {
+			const valueType = record.valueType ?? "text";
+			const name = record.name;
+			searchParams[name] = cloneDeep(toRaw(formState.value[name]));
+			if (valueType === "text") searchParams[name] = formState.value[name] ?? record.initialValue;
+			if (valueType === "dateRange" && (record.rangeStartName || record.rangeEndName)) {
+				const rangeValue = searchParams[name];
+				searchParams[record.rangeStartName || "start"] = Array.isArray(rangeValue) ? rangeValue[0] : void 0;
+				searchParams[record.rangeEndName || "end"] = Array.isArray(rangeValue) ? rangeValue[1] : void 0;
+				delete searchParams[name];
+			}
+			if (valueType === "cascader" && record.valueKey === "single") {
+				const value = searchParams[name];
+				searchParams[name] = Array.isArray(value) ? value[value.length - 1] : void 0;
+			}
+			if (valueType === "treeSelect" && Array.isArray(formState.value[name])) {
+				const keyField = record.valueKey === "text" ? "label" : "value";
+				searchParams[name] = formState.value[name].length > 0 ? formState.value[name].map((item) => item[keyField]).join(",") : void 0;
+			}
+			if (valueType === "numberRange") {
+				const value = searchParams[name];
+				searchParams[name] = Array.isArray(value) && value.some((val) => val !== void 0 && val !== null && val !== "") ? value : void 0;
+			}
+		}
+		return searchParams;
+	}
+	function resetFormState() {
+		formState.value = buildFormStateFromDefaults(cloneDeep(toRaw(defaultFormSearch.value)), formColumns.value);
+	}
+	function changeFormState(key, value) {
+		if (key) formState.value[key] = value;
+	}
 	return {
-		formCols,
-		defaultFormSearch
+		formColumns,
+		formParamKeys,
+		defaultFormSearch,
+		formState,
+		getFormSearch,
+		resetFormState,
+		changeFormState
 	};
 }
-
 //#endregion
-export { handleFormDefaultValue, useTableForm };
+export { useTableForm };

package/dist/hooks/useTableScroll.d.ts

@@ -1,35 +1,37 @@
-import { ProColumnsType } from "../types/ColumnTypings.js";
-import { ProTableProps, TableScroll } from "../types/TableTypings.js";
-import { ComputedRef, Ref } from "vue";
-import { Breakpoint } from "@gx-design-vue/pro-utils";
+import { ProColumnType, ProTableScrollPolicy } from "../interface.js";
+import { ComputedRef } from "vue";
+import { Breakpoint, RecordType } from "@gx-design-vue/pro-utils";
+import { TableProps } from "antdv-next";
 
 //#region src/hooks/useTableScroll.d.ts
-interface ConfigScroll {
-  scroll: Ref<ProTableProps['scroll']>;
-  autoScroll: Ref<ProTableProps['autoScroll']>;
-  modalScroll: Ref<ProTableProps['modalScroll']>;
-  neverScroll: Ref<ProTableProps['neverScroll']>;
-  rowSelection: Ref<ProTableProps['rowSelection']>;
-  scrollBreakpoint: Ref<ProTableProps['scrollBreakpoint']>;
+interface NormalizedTableScrollPolicy {
+  mode: 'auto' | 'manual' | 'disabled';
+  breakpoint: Breakpoint | number;
+  modal: boolean;
+  modalY: {
+    desktop: number;
+    mobile: number;
+  };
+  actionFixed: boolean | 'auto';
 }
-type useTableScrollType = {
-  columns: ComputedRef<ProColumnsType>;
-  innerWidth: Ref<number>;
-  screens: Ref<Partial<Record<Breakpoint, boolean>>>;
-} & ConfigScroll;
-declare function useTableScroll({
-  scroll,
-  columns,
-  autoScroll,
-  modalScroll,
-  neverScroll,
-  rowSelection,
-  screens,
-  innerWidth,
-  scrollBreakpoint
-}: useTableScrollType): {
-  proScroll: ComputedRef<TableScroll>;
-  breakpoint: ComputedRef<boolean>;
-};
+interface UseTableScrollOptions<T = RecordType> {
+  scroll: ComputedRef<TableProps<T>['scroll'] | undefined>;
+  columns: ComputedRef<ProColumnType<T>[]>;
+  rowSelection: ComputedRef<TableProps<T>['rowSelection'] | undefined>;
+  screens: ComputedRef<Record<string, boolean>>;
+  screenWidth: ComputedRef<number>;
+  scrollPolicy: ComputedRef<false | ProTableScrollPolicy | undefined>;
+}
+interface UseTableScrollReturn<T = RecordType> {
+  tableScroll: ComputedRef<TableProps<T>['scroll']>;
+  hasHorizontalScroll: ComputedRef<boolean>;
+  shouldFixActionColumn: ComputedRef<boolean>;
+  normalizedScrollPolicy: ComputedRef<NormalizedTableScrollPolicy>;
+}
+declare function normalizeScrollPolicy(scrollPolicy: false | ProTableScrollPolicy | undefined): NormalizedTableScrollPolicy;
+declare function isLargeScreenByBreakpoint(breakpoint: Breakpoint | number, screens: Record<string, boolean>, screenWidth: number): boolean;
+declare function getColumnWidthValue(column: ProColumnType<any>): number;
+declare function getTableScrollX(columns: ProColumnType<any>[], hasRowSelection: boolean): number;
+declare function useTableScroll<T = RecordType>(options: UseTableScrollOptions<T>): UseTableScrollReturn<T>;
 //#endregion
-export { useTableScroll };
+export { NormalizedTableScrollPolicy, UseTableScrollOptions, UseTableScrollReturn, getColumnWidthValue, getTableScrollX, isLargeScreenByBreakpoint, normalizeScrollPolicy, useTableScroll };

package/dist/hooks/useTableScroll.js

@@ -1,36 +1,79 @@
-import { computed, unref } from "vue";
-import { cloneDeep, isBoolean, isNumber, isString, keysOf } from "@gx-design-vue/pro-utils";
-
+import { computed } from "vue";
 //#region src/hooks/useTableScroll.ts
-function useTableScroll({ scroll, columns, autoScroll, modalScroll, neverScroll, rowSelection, screens, innerWidth, scrollBreakpoint }) {
-	const breakpoint = computed(() => {
-		if (scrollBreakpoint.value) return isNumber(scrollBreakpoint.value) ? innerWidth.value > scrollBreakpoint.value : isString(scrollBreakpoint.value) ? screens.value?.[scrollBreakpoint.value] : screens.value?.xl;
-		return screens.value?.xl;
+const DEFAULT_COLUMN_WIDTH = 150;
+const ROW_SELECTION_WIDTH = 60;
+const DEFAULT_MODAL_SCROLL_Y = {
+	desktop: 400,
+	mobile: 235
+};
+function normalizeScrollPolicy(scrollPolicy) {
+	if (scrollPolicy === false) return {
+		mode: "disabled",
+		breakpoint: "xl",
+		modal: false,
+		modalY: DEFAULT_MODAL_SCROLL_Y,
+		actionFixed: false
+	};
+	const modalY = typeof scrollPolicy?.modalY === "number" ? {
+		desktop: scrollPolicy.modalY,
+		mobile: scrollPolicy.modalY
+	} : {
+		desktop: scrollPolicy?.modalY?.desktop ?? DEFAULT_MODAL_SCROLL_Y.desktop,
+		mobile: scrollPolicy?.modalY?.mobile ?? DEFAULT_MODAL_SCROLL_Y.mobile
+	};
+	const mode = scrollPolicy?.mode ?? "auto";
+	return {
+		mode,
+		breakpoint: scrollPolicy?.breakpoint ?? "xl",
+		modal: mode === "auto" ? !!scrollPolicy?.modal : false,
+		modalY,
+		actionFixed: mode === "disabled" ? false : scrollPolicy?.actionFixed ?? "auto"
+	};
+}
+function isLargeScreenByBreakpoint(breakpoint, screens, screenWidth) {
+	return typeof breakpoint === "number" ? screenWidth >= breakpoint : !!screens[breakpoint];
+}
+function getColumnWidthValue(column) {
+	const width = Number.parseInt(String(column.width ?? ""), 10);
+	return Number.isFinite(width) && width > 0 ? width : DEFAULT_COLUMN_WIDTH;
+}
+function getTableScrollX(columns, hasRowSelection) {
+	return columns.reduce((total, column) => {
+		return total + getColumnWidthValue(column);
+	}, 0) + (hasRowSelection ? ROW_SELECTION_WIDTH : 0);
+}
+function useTableScroll(options) {
+	const normalizedScrollPolicy = computed(() => normalizeScrollPolicy(options.scrollPolicy.value));
+	const isLargeScreen = computed(() => {
+		const policy = normalizedScrollPolicy.value;
+		return isLargeScreenByBreakpoint(policy.breakpoint, options.screens.value, options.screenWidth.value);
+	});
+	const autoScrollX = computed(() => {
+		return getTableScrollX(options.columns.value, !!options.rowSelection.value);
+	});
+	const tableScroll = computed(() => {
+		const policy = normalizedScrollPolicy.value;
+		const explicitScroll = options.scroll.value;
+		if (policy.mode === "disabled") return {};
+		if (policy.mode === "manual") return explicitScroll ?? {};
+		const nextScroll = { ...explicitScroll ?? {} };
+		if (!nextScroll.x && !isLargeScreen.value) nextScroll.x = autoScrollX.value;
+		if (policy.modal && !nextScroll.y) nextScroll.y = isLargeScreen.value ? policy.modalY.desktop : policy.modalY.mobile;
+		return nextScroll;
 	});
-	const scrollX = computed(() => {
-		let width = 0;
-		const rowSelectWidth = unref(rowSelection) ? 60 : 0;
-		const NORMAL_WIDTH = 150;
-		const viewColumns = cloneDeep(unref(columns));
-		viewColumns.forEach((item) => {
-			width += Number.parseInt(String(item.width)) || 0;
-		});
-		const len = viewColumns.filter((item) => !Reflect.has(item, "width")).length;
-		if (len !== 0) width += len * NORMAL_WIDTH;
-		if (rowSelectWidth) width += rowSelectWidth;
-		return width;
+	const hasHorizontalScroll = computed(() => {
+		return !!tableScroll.value?.x;
 	});
 	return {
-		proScroll: computed(() => {
-			if (neverScroll.value) return {};
-			if (scroll.value && keysOf(scroll.value).length) return unref(scroll);
-			if (modalScroll.value) return { y: scroll.value?.y || (screens.value?.xl ? 400 : 235) };
-			if (!autoScroll.value) return {};
-			return breakpoint.value ? {} : isBoolean(breakpoint.value) ? { x: scrollX.value } : {};
+		tableScroll,
+		hasHorizontalScroll,
+		shouldFixActionColumn: computed(() => {
+			const policy = normalizedScrollPolicy.value;
+			if (policy.mode === "disabled" || policy.actionFixed === false) return false;
+			return hasHorizontalScroll.value;
 		}),
-		breakpoint
+		normalizedScrollPolicy
 	};
 }
-
 //#endregion
-export { useTableScroll };
+export { getColumnWidthValue, getTableScrollX, isLargeScreenByBreakpoint, normalizeScrollPolicy, useTableScroll };