@antdv-vue/pro-table 0.0.0-stage → 2.0.3

package/dist/TableRender.d.ts

@@ -0,0 +1,54 @@
+import { FilterValue, ProColumns, ProTableProps, UseFetchDataAction } from "./typing.js";
+import * as _$vue from "vue";
+import { ParamsType } from "@antdv-vue/pro-provider";
+import { ProFieldValueObjectType, ProFieldValueType, UseEditableUtilType } from "@antdv-vue/pro-utils";
+import { GetRowKey, SortOrder } from "antdv-next/dist/table/interface";
+import { VueNode as VueNode$1 } from "@v-c/util/dist/type";
+
+//#region src/TableRender.d.ts
+declare const TableRender: new <RecordType extends Record<string, any> = Record<string, any>, Params extends ParamsType = ParamsType, ValueType extends (ProFieldValueType | ProFieldValueObjectType) = "text">(props: Omit<ProTableProps<RecordType, Params, ValueType>, "dataSource" | "errorBoundaryRender" | "request"> & {
+  tableColums?: ProColumns<RecordType, ValueType>[];
+  action?: UseFetchDataAction<RecordType>;
+  editableUtils?: UseEditableUtilType<RecordType>;
+  toolbarDom?: VueNode$1;
+  alertDom?: VueNode$1;
+  getRowKey?: GetRowKey<RecordType>;
+  isLightFilter?: boolean;
+  searchNode?: VueNode$1;
+  hideToolbar?: boolean;
+  onSortChange?: (sort: Record<string, SortOrder>) => void;
+  onFilterChange?: (filter: Record<string, FilterValue | null>) => void;
+} & {} & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps) => _$vue.CreateComponentPublicInstanceWithMixins<Omit<ProTableProps<RecordType, Params, ValueType>, "dataSource" | "errorBoundaryRender" | "request"> & {
+  tableColums?: ProColumns<RecordType, ValueType>[];
+  action?: UseFetchDataAction<RecordType>;
+  editableUtils?: UseEditableUtilType<RecordType>;
+  toolbarDom?: VueNode$1;
+  alertDom?: VueNode$1;
+  getRowKey?: GetRowKey<RecordType>;
+  isLightFilter?: boolean;
+  searchNode?: VueNode$1;
+  hideToolbar?: boolean;
+  onSortChange?: (sort: Record<string, SortOrder>) => void;
+  onFilterChange?: (filter: Record<string, FilterValue | null>) => void;
+} & {}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+  P: {};
+  B: {};
+  D: {};
+  C: {};
+  M: {};
+  Defaults: {};
+}, Omit<ProTableProps<RecordType, Params, ValueType>, "dataSource" | "errorBoundaryRender" | "request"> & {
+  tableColums?: ProColumns<RecordType, ValueType>[];
+  action?: UseFetchDataAction<RecordType>;
+  editableUtils?: UseEditableUtilType<RecordType>;
+  toolbarDom?: VueNode$1;
+  alertDom?: VueNode$1;
+  getRowKey?: GetRowKey<RecordType>;
+  isLightFilter?: boolean;
+  searchNode?: VueNode$1;
+  hideToolbar?: boolean;
+  onSortChange?: (sort: Record<string, SortOrder>) => void;
+  onFilterChange?: (filter: Record<string, FilterValue | null>) => void;
+} & {}, {}, {}, {}, {}, {}>;
+//#endregion
+export { TableRender as default };

package/dist/TableRender.js

@@ -0,0 +1,295 @@
+import { flattenColumns, genColumnKey, getServerFilterResult, getServerSorterResult, isBordered } from "./utils/index.js";
+import { useTableContextInject } from "./Store/Provide.js";
+import ResizableTableTitle from "./ResizableTableTitle.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import ProForm$1 from "@antdv-vue/pro-form";
+import { editableRowByKey, omitUndefined, recordKeyToString } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+import { ConfigProvider, Table } from "antdv-next";
+import ProCard from "@antdv-vue/pro-card";
+//#region src/TableRender.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function getEditableDataSource({ dataSource, editableUtils, pagination, getRowKey, childrenColumnName }) {
+	const baseData = Array.isArray(dataSource) ? [...dataSource] : [];
+	const newLineConfig = editableUtils?.newLineRecord;
+	const defaultValue = newLineConfig?.value?.defaultValue;
+	if (!newLineConfig?.value || !defaultValue) return baseData;
+	const { options: newLineOptions } = newLineConfig.value;
+	const childrenName = childrenColumnName || "children";
+	if (newLineOptions?.parentKey) {
+		const newRow = {
+			...defaultValue,
+			map_row_parentKey: recordKeyToString(typeof newLineOptions.parentKey === "function" ? newLineOptions.parentKey() : newLineOptions.parentKey)?.toString()
+		};
+		return editableRowByKey({
+			data: baseData,
+			getRowKey,
+			row: newRow,
+			key: newLineOptions?.recordKey ?? getRowKey?.(newRow, -1),
+			childrenColumnName: childrenName
+		}, newLineOptions?.position === "top" ? "top" : "update");
+	}
+	if (newLineOptions?.position === "top") return [defaultValue, ...baseData];
+	const pageConfig = pagination && typeof pagination === "object" ? pagination : void 0;
+	if (pageConfig?.current && pageConfig?.pageSize) {
+		if (pageConfig.pageSize > baseData.length) {
+			baseData.push(defaultValue);
+			return baseData;
+		}
+		const insertIndex = pageConfig.current * pageConfig.pageSize - 1;
+		baseData.splice(insertIndex, 0, defaultValue);
+		return baseData;
+	}
+	baseData.push(defaultValue);
+	return baseData;
+}
+function getTableCardBodyStyle({ propsCardProps, notNeedCardDom, name, hideToolbar, toolbarDom }) {
+	if (propsCardProps === false || notNeedCardDom || !!name) return {};
+	if (hideToolbar) return { padding: 0 };
+	if (toolbarDom) return { paddingBlockStart: 0 };
+	return { padding: 0 };
+}
+function mergeResizableTableComponents(components) {
+	if (components?.header?.cell) return components;
+	return {
+		...components,
+		header: {
+			...components?.header,
+			cell: ResizableTableTitle
+		}
+	};
+}
+const TableRender = /* @__PURE__ */ defineComponent((props, { slots, expose, attrs }) => {
+	const counter = useTableContextInject();
+	/** 需要遍历一下，不然不支持嵌套表格 */
+	const columns = computed(() => {
+		const loopFilter = (column) => {
+			if (!Array.isArray(column)) return [];
+			return column?.map((item) => {
+				const columnKey = genColumnKey(item.key, item.index);
+				const config = counter.columnsMap?.value?.[columnKey];
+				if (config && config.show === false) return false;
+				if (item.children) return {
+					...item,
+					children: loopFilter(item.children)
+				};
+				return item;
+			}).filter(Boolean);
+		};
+		return loopFilter(props.tableColums) ?? [];
+	});
+	const mergedDataSource = computed(() => getEditableDataSource({
+		dataSource: props.action?.dataSource.value,
+		editableUtils: props.editableUtils,
+		pagination: props.pagination,
+		getRowKey: props.getRowKey,
+		childrenColumnName: props.expandable?.childrenColumnName || "children"
+	}));
+	const useFilterColumns = computed(() => {
+		return flattenColumns(columns.value).filter((column) => !!column.filters);
+	});
+	expose({});
+	return () => {
+		const { tableViewRender, cardProps, isLightFilter, options, type = "table", search, headerTitle, tableRender, toolBarRender, rowKey, size, columnsState, dateFormatter, debounceTime, defaultData, onSizeChange, form, prefixCls, ghost, hideToolbar, editableUtils, searchNode, action, pagination, tableColums, rowSelection, name: isEditorTable, manualRequest, onDataSourceChange, tableExtraRender, alertDom, beforeSearchSubmit, cardBordered, onLoad, onSubmit, optionsRender, params, polling, postData, toolbar, tooltip, tableClass, tableStyle, toolbarDom, revalidateOnFocus, searchFormRender, onLoadingChange, onRequestError, onReset, getRowKey, tableAlertOptionRender, tableAlertRender, columnEmptyText, onFilterChange, onSortChange, editable, columns: propsColumns, ...rest } = props;
+		const EditableMessageContextHolder = editableUtils?.messageContextHolder;
+		const tableProps = {
+			...rest,
+			size: counter.tableSize?.value,
+			rowSelection: rowSelection === false ? void 0 : rowSelection,
+			class: tableClass,
+			style: tableStyle,
+			columns: columns.value,
+			components: mergeResizableTableComponents(rest.components),
+			loading: action?.loading.value,
+			dataSource: mergedDataSource.value,
+			pagination,
+			onChange: (changePagination, filters, sorter, extra) => {
+				rest.onChange?.(changePagination, filters, sorter, extra);
+				const serverFilter = getServerFilterResult(filters, useFilterColumns.value);
+				onFilterChange?.(omitUndefined(serverFilter));
+				const serverSorter = getServerSorterResult(sorter);
+				onSortChange?.(omitUndefined(serverSorter));
+			}
+		};
+		/** 默认的 table dom，如果是编辑模式，外面还要包个 form */
+		const baseTableDom = createVNode(Table, mergeProps(tableProps, { "rowKey": typeof rowKey === "function" ? (record, index) => rowKey(record, index) : rowKey?.toString() }), slots);
+		/** 自定义的 render */
+		const tableDom = tableViewRender ? tableViewRender({
+			...tableProps,
+			rowSelection: rowSelection !== false ? rowSelection : void 0
+		}, baseTableDom) : baseTableDom;
+		const tableContentDom = editable && !isEditorTable ? createVNode(Fragment, null, [
+			toolbarDom,
+			alertDom,
+			createVNode(ProForm$1, mergeProps({ "ref": editable?.formProps?.formRef }, editable?.formProps, {
+				"key": "table",
+				"submitter": false,
+				"omitNil": false,
+				"onValuesChange": (changedValues, values) => editableUtils?.onValuesChange?.(changedValues, values),
+				"dateFormatter": dateFormatter
+			}), _isSlot(tableDom) ? tableDom : { default: () => [tableDom] })
+		]) : createVNode(Fragment, null, [
+			toolbarDom,
+			alertDom,
+			tableDom
+		]);
+		/**
+		* 是否需要 card 来包裹
+		*/
+		const notNeedCardDom = search === false && !headerTitle && toolBarRender === false;
+		const cardBodyStyle = getTableCardBodyStyle({
+			propsCardProps: cardProps,
+			notNeedCardDom,
+			name: props.name,
+			hideToolbar,
+			toolbarDom
+		});
+		/** ProTable：有搜索/工具栏/标题时使用卡片包裹；可编辑表格（name）不包裹 */
+		/** ProListy：始终使用卡片包裹（除非 cardProps 为 false） */
+		const useCard = cardProps !== false && !isEditorTable && !notNeedCardDom || cardProps !== false && type === "listy";
+		const resolvedCardProps = cardProps === false ? {} : cardProps ?? {};
+		/** Table 区域的 dom，为了方便 render */
+		const tableAreaDom = !useCard ? tableContentDom : createVNode(ProCard, mergeProps(resolvedCardProps, {
+			"ghost": ghost,
+			"variant": isBordered("table", typeof cardBordered === "string" ? true : cardBordered) ? "outlined" : "borderless",
+			"styles": {
+				...resolvedCardProps.styles,
+				body: {
+					...cardBodyStyle,
+					...resolvedCardProps.styles?.body ?? {}
+				}
+			}
+		}), _isSlot(tableContentDom) ? tableContentDom : { default: () => [tableContentDom] });
+		const renderTable = () => {
+			if (tableRender) return tableRender(props, tableAreaDom, {
+				toolbar: toolbarDom || void 0,
+				alert: alertDom || void 0,
+				table: tableDom || void 0
+			});
+			return tableAreaDom;
+		};
+		const proTableDom = createVNode("div", {
+			"class": classNames(attrs.class, { [`${prefixCls}-polling`]: action?.pollingLoading.value }),
+			"style": attrs.style,
+			"ref": counter.rootDomRef
+		}, [
+			isLightFilter ? null : searchNode,
+			type !== "form" && props.tableExtraRender && createVNode("div", { "class": classNames(attrs.class, `${prefixCls}-extra`) }, [props.tableExtraRender(props, action?.dataSource.value || [])]),
+			type !== "form" && renderTable(),
+			EditableMessageContextHolder ? createVNode(EditableMessageContextHolder, null, null) : null
+		]);
+		if (!options || !options?.fullScreen) return proTableDom;
+		return createVNode(ConfigProvider, { "getPopupContainer": () => counter.rootDomRef?.value || document.body }, _isSlot(proTableDom) ? proTableDom : { default: () => [proTableDom] });
+	};
+}, {
+	name: "TableRender",
+	inheritAttrs: false,
+	props: [
+		"searchNode",
+		"isLightFilter",
+		"editableUtils",
+		"hideToolbar",
+		"action",
+		"alertDom",
+		"getRowKey",
+		"toolbarDom",
+		"beforeSearchSubmit",
+		"tableColums",
+		"columnEmptyText",
+		"editable",
+		"options",
+		"tooltip",
+		"search",
+		"headerTitle",
+		"tableStyle",
+		"toolBarRender",
+		"optionsRender",
+		"columnsState",
+		"onSizeChange",
+		"toolbar",
+		"bodyCell",
+		"bordered",
+		"caption",
+		"cardBordered",
+		"cardProps",
+		"childrenColumnName",
+		"classes",
+		"columns",
+		"components",
+		"dateFormatter",
+		"debounceTime",
+		"defaultData",
+		"defaultExpandAllRows",
+		"defaultExpandedRowKeys",
+		"direction",
+		"dropdownPrefixCls",
+		"expandIcon",
+		"expandIconColumnIndex",
+		"expandRowByClick",
+		"expandable",
+		"expandedRowClassName",
+		"expandedRowKeys",
+		"expandedRowRender",
+		"footer",
+		"form",
+		"getContainerWidth",
+		"getPopupContainer",
+		"ghost",
+		"headerCell",
+		"id",
+		"indentSize",
+		"loading",
+		"locale",
+		"manualRequest",
+		"measureRowRender",
+		"name",
+		"onDataSourceChange",
+		"onExpand",
+		"onExpandedRowsChange",
+		"onHeaderRow",
+		"onLoad",
+		"onLoadingChange",
+		"onRequestError",
+		"onReset",
+		"onRow",
+		"onSubmit",
+		"pagination",
+		"params",
+		"polling",
+		"postData",
+		"prefixCls",
+		"revalidateOnFocus",
+		"rootClass",
+		"rowClassName",
+		"rowHoverable",
+		"rowKey",
+		"rowSelection",
+		"scroll",
+		"searchFormRender",
+		"showHeader",
+		"showSorterTooltip",
+		"size",
+		"sortDirections",
+		"sticky",
+		"styles",
+		"summary",
+		"tableClass",
+		"tableExtraRender",
+		"tableLayout",
+		"tableRender",
+		"tableViewRender",
+		"tailor",
+		"title",
+		"type",
+		"virtual",
+		"tableAlertRender",
+		"tableAlertOptionRender",
+		"onSortChange",
+		"onFilterChange",
+		"defaultSize"
+	]
+});
+//#endregion
+export { TableRender as default };

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,45 @@
+import { TableAlertRender } from "../../RenderTypings.js";
+import * as _$vue from "vue";
+import { Key } from "@antdv-vue/pro-utils";
+import { AlertProps } from "antdv-next";
+
+//#region src/components/Alert/index.d.ts
+type TableAlertProps<T> = AlertProps & {
+  selectedRowKeys?: Key[];
+  selectedRows?: any[];
+  alwaysShowAlert?: boolean;
+  alertInfoRender?: TableAlertRender<T>;
+  onCleanSelected?: () => void;
+  alertOptionRender?: TableAlertRender<T>;
+};
+declare const TableAlert: new <T = Key>(props: AlertProps & {
+  selectedRowKeys?: Key[];
+  selectedRows?: any[];
+  alwaysShowAlert?: boolean;
+  alertInfoRender?: TableAlertRender<T> | undefined;
+  onCleanSelected?: () => void;
+  alertOptionRender?: TableAlertRender<T> | undefined;
+} & {} & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps) => _$vue.CreateComponentPublicInstanceWithMixins<AlertProps & {
+  selectedRowKeys?: Key[];
+  selectedRows?: any[];
+  alwaysShowAlert?: boolean;
+  alertInfoRender?: TableAlertRender<T> | undefined;
+  onCleanSelected?: () => void;
+  alertOptionRender?: TableAlertRender<T> | undefined;
+} & {}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+  P: {};
+  B: {};
+  D: {};
+  C: {};
+  M: {};
+  Defaults: {};
+}, AlertProps & {
+  selectedRowKeys?: Key[];
+  selectedRows?: any[];
+  alwaysShowAlert?: boolean;
+  alertInfoRender?: TableAlertRender<T> | undefined;
+  onCleanSelected?: () => void;
+  alertOptionRender?: TableAlertRender<T> | undefined;
+} & {}, {}, {}, {}, {}, {}>;
+//#endregion
+export { TableAlertProps, TableAlert as default };

package/dist/components/Alert/index.js

@@ -0,0 +1,94 @@
+import style_default from "./style/index.js";
+import { computed, createTextVNode, createVNode, defineComponent } from "vue";
+import { useIntl } from "@antdv-vue/pro-provider";
+import { classNames } from "@v-c/util";
+import { useConfig } from "antdv-next/config-provider/context";
+import { Alert, Space } from "antdv-next";
+//#region src/components/Alert/index.tsx
+function defaultAlertOptionRender(props) {
+	const { intl, onCleanSelected } = props;
+	return createVNode("a", {
+		"onClick": onCleanSelected,
+		"key": "0"
+	}, [intl.getMessage({
+		id: "alert.clear",
+		defaultMessage: "清空"
+	})]);
+}
+const TableAlert = /* @__PURE__ */ defineComponent((props) => {
+	const config = useConfig();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-table-alert`);
+	const [hashId, cssVarCls] = style_default(baseClassName);
+	const intl = useIntl();
+	return () => {
+		const { selectedRowKeys = [], onCleanSelected, alwaysShowAlert, selectedRows, alertInfoRender = ({ intl }) => createVNode(Space, null, { default: () => [
+			intl.getMessage({
+				id: "alert.selected",
+				defaultMessage: "已选择"
+			}),
+			selectedRowKeys.length,
+			intl.getMessage({
+				id: "alert.item",
+				defaultMessage: "项"
+			}),
+			createTextVNode("\xA0\xA0")
+		] }), alertOptionRender = defaultAlertOptionRender } = props;
+		const option = alertOptionRender && alertOptionRender({
+			onCleanSelected,
+			selectedRowKeys,
+			selectedRows,
+			intl: intl.value
+		});
+		if (alertInfoRender === false) return null;
+		const dom = alertInfoRender({
+			intl: intl.value,
+			selectedRowKeys,
+			selectedRows,
+			onCleanSelected
+		});
+		if (dom === false || selectedRowKeys.length < 1 && !alwaysShowAlert) return null;
+		return createVNode(Alert, { "class": classNames(baseClassName.value, hashId.value, cssVarCls.value) }, {
+			message: () => dom,
+			action: () => option
+		});
+	};
+}, {
+	name: "TableAlert",
+	inheritAttrs: false,
+	props: [
+		"action",
+		"afterClose",
+		"alertInfoRender",
+		"alertOptionRender",
+		"alwaysShowAlert",
+		"banner",
+		"classes",
+		"closable",
+		"closeIcon",
+		"description",
+		"icon",
+		"id",
+		"message",
+		"onCleanSelected",
+		"icon",
+		"id",
+		"message",
+		"onCleanSelected",
+		"onClick",
+		"onClose",
+		"onMouseenter",
+		"onMouseleave",
+		"prefixCls",
+		"role",
+		"rootClass",
+		"selectedRowKeys",
+		"selectedRows",
+		"showIcon",
+		"styles",
+		"title",
+		"type"
+	]
+});
+//#endregion
+export { TableAlert as default };

package/dist/components/Alert/style/index.d.ts

@@ -0,0 +1,8 @@
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/Alert/style/index.d.ts
+interface ProTableAlertToken extends ProAliasCssVarToken {}
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { ProTableAlertToken, _default as default };

package/dist/components/Alert/style/index.js

@@ -0,0 +1,11 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/Alert/style/index.ts
+const genProTableAlertStyle = (token) => {
+	return { [`${token.componentCls}${token.antCls}-alert`]: { marginBlockEnd: token.margin } };
+};
+var style_default = useStyle("ProTableAlert", (token) => {
+	return [genProTableAlertStyle(mergeToken(token, {}))];
+});
+//#endregion
+export { style_default as default };

package/dist/components/ColumnSetting/CheckboxList.d.ts

@@ -0,0 +1,24 @@
+import { ProColumns } from "../../typing.js";
+import * as _$vue from "vue";
+import { ProFieldValueObjectType, ProFieldValueType } from "@antdv-vue/pro-utils";
+
+//#region src/components/ColumnSetting/CheckboxList.d.ts
+interface CheckboxListProps<T, ValueType> {
+  title?: string;
+  list?: ProColumns<T, ValueType>[];
+  draggable?: boolean;
+  checkable?: boolean;
+  showListItemOption?: boolean;
+  showTitle?: boolean;
+  listsHeight?: number;
+}
+declare const CheckboxList: new <T extends Record<string, any>, ValueType extends (ProFieldValueType | ProFieldValueObjectType)>(props: CheckboxListProps<T, ValueType> & {} & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps) => _$vue.CreateComponentPublicInstanceWithMixins<CheckboxListProps<T, ValueType> & {}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+  P: {};
+  B: {};
+  D: {};
+  C: {};
+  M: {};
+  Defaults: {};
+}, CheckboxListProps<T, ValueType> & {}, {}, {}, {}, {}, {}>;
+//#endregion
+export { CheckboxListProps, CheckboxList as default };

package/dist/components/ColumnSetting/CheckboxList.js

@@ -0,0 +1,138 @@
+import { genColumnKey } from "../../utils/genProColumnsToColumns.js";
+import { useTableContextInject } from "../../Store/Provide.js";
+import CheckboxListItem from "./CheckboxListItem.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { useProConfig } from "@antdv-vue/pro-provider";
+import { runFunction } from "@antdv-vue/pro-utils";
+import { classNames, omit } from "@v-c/util";
+import { Tree, TypographyText } from "antdv-next";
+import { unit } from "@antdv-next/cssinjs";
+//#region src/components/ColumnSetting/CheckboxList.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CheckboxList = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const proProvide = useProConfig();
+	const { columnsMap, sortKeyColumns, setColumnsMap, setSortKeyColumns } = useTableContextInject();
+	const show = computed(() => props.list && props.list.length > 0);
+	const treeDataConfig = computed(() => {
+		if (!show.value) return {};
+		const checkedKeys = [];
+		const treeMap = /* @__PURE__ */ new Map();
+		const loopData = (data, parentConfig) => data.map(({ key, dataIndex, children, title, ...rest }) => {
+			const columnKey = genColumnKey(key, [parentConfig?.columnKey, rest.index].filter(Boolean).join("-"));
+			const config = columnsMap?.value?.[columnKey || "null"] || { show: true };
+			if (config.show !== false && !children) checkedKeys.push(columnKey);
+			const item = {
+				key: columnKey,
+				...omit(rest, ["className"]),
+				title,
+				selectable: false,
+				disabled: config.disable === true,
+				disableCheckbox: typeof config.disable === "boolean" ? config.disable : config.disable?.checkbox,
+				isLeaf: parentConfig ? true : void 0
+			};
+			if (children) {
+				item.children = loopData(children, {
+					...config,
+					columnKey
+				});
+				if (item.children?.every((childrenItem) => checkedKeys?.includes(childrenItem.key))) checkedKeys.push(columnKey);
+			}
+			treeMap.set(key, {
+				...item,
+				parentKey: parentConfig?.columnKey
+			});
+			return item;
+		});
+		return {
+			list: loopData(props.list),
+			keys: checkedKeys,
+			map: treeMap
+		};
+	});
+	/** 移动到指定的位置 */
+	const move = (id, targetId, dropPosition) => {
+		const newMap = { ...columnsMap?.value };
+		const newColumns = [...sortKeyColumns?.value || []];
+		const findIndex = newColumns.findIndex((columnKey) => columnKey === id);
+		const targetIndex = newColumns.findIndex((columnKey) => columnKey === targetId);
+		const isDownWard = dropPosition >= findIndex;
+		if (findIndex < 0) return;
+		const targetItem = newColumns[findIndex];
+		newColumns.splice(findIndex, 1);
+		if (dropPosition === 0) newColumns.unshift(targetItem);
+		else newColumns.splice(isDownWard ? targetIndex : targetIndex + 1, 0, targetItem);
+		newColumns.forEach((key, order) => {
+			newMap[key] = {
+				...newMap[key] || {},
+				order
+			};
+		});
+		setColumnsMap?.(newMap);
+		setSortKeyColumns?.(newColumns);
+	};
+	return () => {
+		const { showTitle = true, title, draggable, listsHeight = 280, showListItemOption, checkable } = props;
+		if (!show.value) return null;
+		const listDom = createVNode(Tree, {
+			"itemHeight": 24,
+			"draggable": draggable && !!treeDataConfig.value.list?.length && treeDataConfig.value.list?.length > 1,
+			"checkable": checkable,
+			"onDrop": (info) => {
+				const dropKey = info.node.key;
+				const dragKey = info.dragNode?.key;
+				const { dropPosition, dropToGap } = info;
+				move(dragKey, dropKey, dropPosition === -1 || !dropToGap ? dropPosition + 1 : dropPosition);
+			},
+			"blockNode": true,
+			"height": listsHeight,
+			"onCheck": (_, e) => {
+				const newColumnMap = { ...columnsMap?.value };
+				const loopSetShow = (key) => {
+					const newSetting = { ...newColumnMap[key] };
+					newSetting.show = e.checked;
+					if (treeDataConfig.value.map?.get(key)?.children) treeDataConfig.value.map.get(key)?.children?.forEach((item) => loopSetShow(item.key));
+					newColumnMap[key] = newSetting;
+				};
+				loopSetShow(e.node.key);
+				setColumnsMap?.({ ...newColumnMap });
+			},
+			"checkedKeys": treeDataConfig.value.keys,
+			"showLine": false,
+			"titleRender": (_node) => {
+				const node = {
+					..._node,
+					children: void 0
+				};
+				if (!node.title) return null;
+				const normalizedTitle = runFunction(node.title, node);
+				const wrappedTitle = createVNode(TypographyText, {
+					"style": { width: unit(80) },
+					"ellipsis": { tooltip: normalizedTitle }
+				}, _isSlot(normalizedTitle) ? normalizedTitle : { default: () => [normalizedTitle] });
+				return createVNode(CheckboxListItem, mergeProps({ "class": attrs.class }, omit(node, ["key"]), {
+					"showListItemOption": showListItemOption,
+					"title": wrappedTitle,
+					"columnKey": node.key
+				}), null);
+			},
+			"treeData": treeDataConfig.value.list?.map(({ disabled, ...config }) => config)
+		}, null);
+		return createVNode(Fragment, null, [showTitle && createVNode("span", { "class": classNames(`${attrs.class}-list-title`, proProvide.value.hashId) }, [title]), listDom]);
+	};
+}, {
+	name: "CheckboxList",
+	inheritAttrs: false,
+	props: [
+		"checkable",
+		"draggable",
+		"list",
+		"listsHeight",
+		"showListItemOption",
+		"showTitle",
+		"title"
+	]
+});
+//#endregion
+export { CheckboxList as default };