@v-c/table 1.2.0 → 1.3.0

package/dist/Cell/index.js

@@ -1,9 +1,8 @@
 import { useInjectTableContext } from "../context/TableContext.js";
 import { useInjectPerfContext } from "../context/PerfContext.js";
-import { validateValue } from "../utils/valueUtil.js";
 import useHoverState from "./useHoverState.js";
 import { computed, createVNode, defineComponent, isVNode, mergeProps, shallowRef, toRaw, watch } from "vue";
-import { clsx, warning } from "@v-c/util";
+import { clsx, isNonNullable, warning } from "@v-c/util";
 import { filterEmpty, getStylePxValue } from "@v-c/util/dist/props-util";
 import getValue from "@v-c/util/dist/utils/get";
 //#region src/Cell/index.tsx
@@ -24,7 +23,7 @@ function isRenderCell(data) {
 	return data && typeof data === "object" && !Array.isArray(data) && !isVNode(data);
 }
 function resolveCellRender({ record, dataIndex, renderIndex, children, render, perfRecord }) {
-	if (validateValue(children)) return [children];
+	if (isNonNullable(children)) return [children];
 	const value = getValue(record, dataIndex === null || dataIndex === void 0 || dataIndex === "" ? [] : Array.isArray(dataIndex) ? dataIndex : [dataIndex]);
 	let returnChildNode = value;
 	let returnCellProps;

package/dist/Table.js

@@ -1,6 +1,6 @@
 import { useProvideTableContext } from "./context/TableContext.js";
 import ColGroup from "./ColGroup.js";
-import { getColumnsKey, validNumberValue, validateValue } from "./utils/valueUtil.js";
+import { getColumnsKey, validNumberValue } from "./utils/valueUtil.js";
 import Body from "./Body/index.js";
 import { EXPAND_COLUMN, INTERNAL_HOOKS } from "./constant.js";
 import FixedHolder from "./FixedHolder/index.js";
@@ -19,7 +19,7 @@ import Column from "./sugar/Column.js";
 import ColumnGroup from "./sugar/ColumnGroup.js";
 import { Fragment, computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, nextTick, onMounted, reactive, ref, shallowRef, watch, watchEffect } from "vue";
 import ResizeObserver from "@v-c/resize-observer";
-import { clsx, get, warning } from "@v-c/util";
+import { clsx, get, isNonNullable, isVueRenderable, warning } from "@v-c/util";
 import canUseDom from "@v-c/util/dist/Dom/canUseDom";
 import { getDOM } from "@v-c/util/dist/Dom/findDOMNode";
 import { getTargetScrollBarSize } from "@v-c/util/dist/getScrollBarSize";
@@ -86,7 +86,7 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
 	});
 	const customizeScrollBody = computed(() => getComponent(["body"]));
 	const [startRow, endRow, onHover] = useHover();
-	const [expandableConfig, expandableType, mergedExpandedKeys, mergedExpandIcon, mergedChildrenColumnName, onTriggerExpand] = useExpand(props, mergedData, getRowKey);
+	const [expandableConfig, expandableType, mergedExpandedKeys, mergedExpandIcon, mergedChildrenColumnName, onTriggerExpand, expandAllInfo] = useExpand(props, mergedData, getRowKey);
 	const componentWidth = ref(0);
 	const slotChildren = shallowRef(null);
 	const [columns, flattenColumns, flattenScrollX] = useColumns({
@@ -99,6 +99,8 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
 		getRowKey,
 		onTriggerExpand,
 		expandIcon: mergedExpandIcon,
+		ExpandIcon: computed(() => props.components?.ExpandIcon),
+		expandAllInfo,
 		rowExpandable: computed(() => expandableConfig.value.rowExpandable),
 		expandIconColumnIndex: computed(() => expandableConfig.value.expandIconColumnIndex),
 		expandedRowOffset: expandableConfig.value.expandedRowOffset,
@@ -148,8 +150,8 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
 		...stickyOffsets.value,
 		isSticky: stickyConfig.value.isSticky
 	}));
-	const fixHeader = computed(() => !!(props.scroll && validateValue(props.scroll.y)));
-	const horizonScroll = computed(() => !!(props.scroll && validateValue(mergedScrollX.value)) || !!expandableConfig.value.fixed);
+	const fixHeader = computed(() => !!(props.scroll && isNonNullable(props.scroll.y)));
+	const horizonScroll = computed(() => !!(props.scroll && isNonNullable(mergedScrollX.value)) || !!expandableConfig.value.fixed);
 	const fixColumn = computed(() => horizonScroll.value && flattenColumns.value.some(({ fixed }) => fixed));
 	const summaryNode = computed(() => props.summary?.(mergedData.value));
 	const fixFooter = computed(() => {
@@ -380,7 +382,7 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
 			"colWidths": flattenColumns.value.map(({ width }) => width),
 			"columns": flattenColumns.value
 		}, null);
-		const captionElement = props.caption !== null && props.caption !== void 0 ? createVNode("caption", { "class": `${mergedPrefixCls.value}-caption` }, [props.caption]) : void 0;
+		const captionElement = isNonNullable(props.caption) ? createVNode("caption", { "class": `${mergedPrefixCls.value}-caption` }, [props.caption]) : void 0;
 		let groupTableNode;
 		if (fixHeader.value || stickyConfig.value.isSticky) {
 			let bodyContent;
@@ -406,7 +408,7 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
 					captionElement,
 					bodyColGroupNode,
 					bodyTableNode,
-					!fixFooter.value && summaryNode.value && createVNode(Footer, {
+					!fixFooter.value && isVueRenderable(summaryNode.value) && createVNode(Footer, {
 						"stickyOffsets": mergedStickyOffsets.value,
 						"flattenColumns": flattenColumns.value
 					}, { default: () => [summaryNode.value] })
@@ -469,7 +471,7 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
 					"flattenColumns": flattenColumns.value
 				}), null),
 				bodyTableNode,
-				!fixFooter.value && summaryNode.value && createVNode(Footer, {
+				!fixFooter.value && isVueRenderable(summaryNode.value) && createVNode(Footer, {
 					"stickyOffsets": mergedStickyOffsets.value,
 					"flattenColumns": flattenColumns.value
 				}, { default: () => [summaryNode.value] })

package/dist/hooks/useColumns/index.d.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'vue';
-import { ColumnsType, ColumnType, Direction, FixedType, GetRowKey, Key, RenderExpandIcon, TriggerEventHandler } from '../../interface';
+import { ColumnsType, ColumnType, Direction, ExpandColumnTitle, ExpandIconComponent, ExpandIconProps, FixedType, GetRowKey, Key, RenderExpandIcon, TriggerEventHandler } from '../../interface';
 export declare function convertChildrenToColumns<RecordType>(children: any): ColumnsType<RecordType>;
 export default function useColumns<RecordType>(options: {
     prefixCls?: Ref<string> | string;
@@ -7,10 +7,12 @@ export default function useColumns<RecordType>(options: {
     children?: any;
     expandable: Ref<boolean> | boolean;
     expandedKeys: Ref<Set<Key>> | Set<Key>;
-    columnTitle?: Ref<any> | any;
+    columnTitle?: Ref<ExpandColumnTitle | undefined> | ExpandColumnTitle;
     getRowKey: Ref<GetRowKey<RecordType>> | GetRowKey<RecordType>;
     onTriggerExpand: TriggerEventHandler<RecordType>;
     expandIcon?: Ref<RenderExpandIcon<RecordType> | undefined> | RenderExpandIcon<RecordType>;
+    ExpandIcon?: Ref<ExpandIconComponent<RecordType> | undefined> | ExpandIconComponent<RecordType>;
+    expandAllInfo?: Ref<Pick<ExpandIconProps<RecordType>, 'expanded' | 'expandable' | 'onClick'> | undefined>;
     rowExpandable?: Ref<((record: RecordType) => boolean) | undefined> | ((record: RecordType) => boolean) | undefined;
     expandIconColumnIndex?: Ref<number | undefined> | number;
     expandedRowOffset?: number;

package/dist/hooks/useColumns/index.js

@@ -1,7 +1,8 @@
 import { INTERNAL_COL_DEFINE } from "../../utils/legacyUtil.js";
+import { DefaultExpandIcon } from "../../utils/expandUtil.js";
 import { EXPAND_COLUMN } from "../../constant.js";
 import useWidthColumns from "./useWidthColumns.js";
-import { computed, createVNode, isVNode, toRaw, unref } from "vue";
+import { computed, createVNode, h, isVNode, toRaw, unref } from "vue";
 import { warning } from "@v-c/util";
 import { flattenChildren } from "@v-c/util/dist/props-util";
 //#region src/hooks/useColumns/index.tsx
@@ -75,12 +76,21 @@ function useColumns(options, transformColumns) {
 			if (fixed) fixedColumn = fixed;
 			else fixedColumn = prevColumn?.fixed;
 			const prefixCls = unref(options.prefixCls) || "";
+			const MergedExpandIcon = unref(options.ExpandIcon) || DefaultExpandIcon;
+			const expandAllInfo = unref(options.expandAllInfo);
+			const expandAllNode = expandAllInfo ? h(MergedExpandIcon, {
+				type: "all",
+				prefixCls,
+				...expandAllInfo
+			}) : void 0;
+			const columnTitle = unref(options.columnTitle);
+			const mergedColumnTitle = typeof columnTitle === "function" ? columnTitle({ expandIcon: expandAllNode }) : columnTitle ?? expandAllNode;
 			const expandColumn = {
 				[INTERNAL_COL_DEFINE]: {
 					className: `${prefixCls}-expand-icon-col`,
 					columnType: "EXPAND_COLUMN"
 				},
-				title: unref(options.columnTitle),
+				title: mergedColumnTitle,
 				fixed: fixedColumn,
 				className: `${prefixCls}-row-expand-icon-cell`,
 				width: unref(options.columnWidth),

package/dist/hooks/useExpand.d.ts

@@ -1,11 +1,14 @@
 import { Ref } from 'vue';
-import { ExpandableConfig, ExpandableType, GetRowKey, Key, RenderExpandIcon, TriggerEventHandler } from '../interface';
+import { ExpandableConfig, ExpandableType, ExpandIconProps, GetRowKey, Key, RenderExpandIcon, TriggerEventHandler } from '../interface';
 import { TableProps } from '../Table';
+type ExpandAllInfo<RecordType> = Pick<ExpandIconProps<RecordType>, 'expanded' | 'expandable' | 'onClick'>;
 export default function useExpand<RecordType>(props: TableProps<RecordType>, mergedData: Ref<readonly RecordType[]> | readonly RecordType[], getRowKey: Ref<GetRowKey<RecordType>> | GetRowKey<RecordType>): [
     expandableConfig: Ref<ExpandableConfig<RecordType>>,
     expandableType: Ref<ExpandableType>,
     expandedKeys: Ref<Set<Key>>,
     expandIcon: Ref<RenderExpandIcon<RecordType>>,
     childrenColumnName: Ref<string>,
-    onTriggerExpand: TriggerEventHandler<RecordType>
+    onTriggerExpand: TriggerEventHandler<RecordType>,
+    expandAllInfo: Ref<ExpandAllInfo<RecordType> | undefined>
 ];
+export {};

package/dist/hooks/useExpand.js

@@ -1,12 +1,16 @@
 import { getExpandableProps } from "../utils/legacyUtil.js";
-import { findAllChildrenKeys, renderExpandIcon } from "../utils/expandUtil.js";
+import { findAllChildrenKeys, renderExpandIcon, renderRowExpandIcon } from "../utils/expandUtil.js";
 import "../constant.js";
 import { computed, ref, unref } from "vue";
 import { warning } from "@v-c/util";
 //#region src/hooks/useExpand.ts
 function useExpand(props, mergedData, getRowKey) {
 	const expandableConfig = computed(() => getExpandableProps(props));
-	const mergedExpandIcon = computed(() => expandableConfig.value.expandIcon || renderExpandIcon);
+	const mergedExpandIcon = computed(() => {
+		const customizeExpandIcon = props.components?.ExpandIcon;
+		if (customizeExpandIcon) return (iconProps) => renderRowExpandIcon(customizeExpandIcon, iconProps);
+		return expandableConfig.value.expandIcon || renderExpandIcon;
+	});
 	const mergedChildrenColumnName = computed(() => expandableConfig.value.childrenColumnName || "children");
 	const expandableType = computed(() => {
 		if (expandableConfig.value.expandedRowRender) return "row";
@@ -37,6 +41,38 @@ function useExpand(props, mergedData, getRowKey) {
 		props["onUpdate:expandedRowKeys"]?.(Array.from(newExpandedKeys));
 		event?.stopPropagation?.();
 	};
+	const expandableRows = computed(() => {
+		if (!expandableConfig.value.showExpandAll || expandableType.value !== "row") return [];
+		const rowExpandable = expandableConfig.value.rowExpandable;
+		return (unref(mergedData) || []).reduce((rows, record, index) => {
+			if (!rowExpandable || rowExpandable(record)) rows.push({
+				key: unref(getRowKey)(record, index),
+				record
+			});
+			return rows;
+		}, []);
+	});
+	const allExpanded = computed(() => expandableRows.value.length > 0 && expandableRows.value.every(({ key }) => mergedExpandedKeys.value.has(key)));
+	const onTriggerExpandAll = (event) => {
+		event.stopPropagation();
+		if (!expandableRows.value.length) return;
+		const nextExpanded = !allExpanded.value;
+		const nextExpandedKeys = new Set(mergedExpandedKeys.value);
+		expandableRows.value.forEach(({ key }) => {
+			if (nextExpanded) nextExpandedKeys.add(key);
+			else nextExpandedKeys.delete(key);
+		});
+		const keys = [...nextExpandedKeys];
+		innerExpandedKeys.value = keys;
+		expandableConfig.value.onExpandAll?.(nextExpanded);
+		expandableConfig.value.onExpandedRowsChange?.(keys);
+		props["onUpdate:expandedRowKeys"]?.(keys);
+	};
+	const expandAllInfo = computed(() => expandableConfig.value.showExpandAll && expandableType.value === "row" ? {
+		expanded: allExpanded.value,
+		expandable: expandableRows.value.length > 0,
+		onClick: onTriggerExpandAll
+	} : void 0);
 	if (process.env.NODE_ENV !== "production" && expandableConfig.value.expandedRowRender && (unref(mergedData) || []).some((record) => {
 		return Array.isArray(record?.[mergedChildrenColumnName.value]);
 	})) warning(false, "`expandedRowRender` should not use with nested Table");
@@ -46,7 +82,8 @@ function useExpand(props, mergedData, getRowKey) {
 		mergedExpandedKeys,
 		mergedExpandIcon,
 		mergedChildrenColumnName,
-		onTriggerExpand
+		onTriggerExpand,
+		expandAllInfo
 	];
 }
 //#endregion

package/dist/hooks/useFixedInfo.d.ts

@@ -1,3 +1,3 @@
 import { Ref } from 'vue';
 import { ColumnType, StickyOffsets } from '../interface';
-export default function useFixedInfo<RecordType>(flattenColumns: Ref<readonly ColumnType<RecordType>[]> | readonly ColumnType<RecordType>[], stickyOffsets: Ref<StickyOffsets> | StickyOffsets): any;
+export default function useFixedInfo<RecordType>(flattenColumns: Ref<readonly ColumnType<RecordType>[]> | readonly ColumnType<RecordType>[], stickyOffsets: Ref<StickyOffsets> | StickyOffsets): Ref<import('../utils/fixUtil').FixedInfo[], import('../utils/fixUtil').FixedInfo[]>;

package/dist/hooks/useRowInfo.d.ts

@@ -8,7 +8,7 @@ export default function useRowInfo<RecordType>(record: Ref<RecordType> | RecordT
     rowSupportExpand: import('vue').ComputedRef<boolean>;
     expandable: import('vue').ComputedRef<boolean>;
     rowProps: import('vue').ComputedRef<{
-        className: any;
+        className: string;
         onClick: (event: MouseEvent) => void;
         innerHTML?: string | undefined | undefined;
         class?: import('vue').ClassValue;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ColumnsType, ColumnType, DataIndex, ExpandableConfig, FixedType, GetComponentProps, GetRowKey, Reference, RenderedCell } from './interface';
+import { ColumnsType, ColumnType, DataIndex, ExpandableConfig, ExpandIconComponent, ExpandIconProps, FixedType, GetComponentProps, GetRowKey, Reference, RenderedCell } from './interface';
 import { TableProps, default as Table } from './Table';
 import { VirtualTableProps, default as VirtualTable } from './VirtualTable';
 import { EXPAND_COLUMN, INTERNAL_HOOKS } from './constant';
@@ -6,6 +6,6 @@ import { FooterComponents as Summary, SummaryCell, SummaryRow } from './Footer';
 import { default as Column } from './sugar/Column';
 import { default as ColumnGroup } from './sugar/ColumnGroup';
 import { INTERNAL_COL_DEFINE } from './utils/legacyUtil';
-export type { DataIndex, ExpandableConfig, FixedType, GetComponentProps, GetRowKey, RenderedCell, };
+export type { DataIndex, ExpandableConfig, ExpandIconComponent, ExpandIconProps, FixedType, GetComponentProps, GetRowKey, RenderedCell, };
 export { Column, ColumnGroup, type ColumnsType, type ColumnType, EXPAND_COLUMN, INTERNAL_COL_DEFINE, INTERNAL_HOOKS, type Reference, Summary, SummaryCell, SummaryRow, type TableProps, VirtualTable, type VirtualTableProps, };
 export default Table;

package/dist/interface.d.ts

@@ -1,5 +1,5 @@
 import { VueNode } from '@v-c/util';
-import { CSSProperties, HTMLAttributes, Ref, TdHTMLAttributes } from 'vue';
+import { CSSProperties, HTMLAttributes, Ref, TdHTMLAttributes, Component as VueComponent } from 'vue';
 import { DeepNamePath } from './namePathType';
 export type Key = string | number;
 /**
@@ -118,6 +118,7 @@ export type CustomizeScrollBody<RecordType = Record<string, any>> = (data: reado
     onScroll: OnCustomizeScroll;
 }) => any;
 export interface TableComponents<RecordType> {
+    ExpandIcon?: ExpandIconComponent<RecordType>;
     table?: CustomizeComponent;
     header?: {
         table?: CustomizeComponent;
@@ -142,7 +143,7 @@ export interface LegacyExpandableProps<RecordType> {
     expandedRowRender?: ExpandedRowRender<RecordType>;
     /** @deprecated Use `expandable.expandRowByClick` instead */
     expandRowByClick?: boolean;
-    /** @deprecated Use `expandable.expandIcon` instead */
+    /** @deprecated Use `components.ExpandIcon` instead */
     expandIcon?: RenderExpandIcon<RecordType>;
     /** @deprecated Use `expandable.onExpand` instead */
     onExpand?: (expanded: boolean, record: RecordType) => void;
@@ -169,21 +170,41 @@ export interface RenderExpandIconProps<RecordType> {
     onExpand: TriggerEventHandler<RecordType>;
 }
 export type RenderExpandIcon<RecordType> = (props: RenderExpandIconProps<RecordType>) => any;
+export type ExpandIconProps<RecordType> = {
+    prefixCls: string;
+    expanded: boolean;
+    expandable: boolean;
+    onClick: (event: MouseEvent) => void;
+} & ({
+    type: 'row';
+    record: RecordType;
+} | {
+    type: 'all';
+    record?: never;
+});
+export type ExpandIconComponent<RecordType> = VueComponent<ExpandIconProps<RecordType>>;
+export interface ExpandColumnTitleProps {
+    expandIcon: VueNode;
+}
+export type ExpandColumnTitle = VueNode | ((props: ExpandColumnTitleProps) => VueNode);
 export interface ExpandableConfig<RecordType> {
     expandedRowKeys?: readonly Key[];
     defaultExpandedRowKeys?: readonly Key[];
     expandedRowRender?: ExpandedRowRender<RecordType>;
     forceRender?: boolean;
-    columnTitle?: VueNode;
+    columnTitle?: ExpandColumnTitle;
     expandRowByClick?: boolean;
+    /** @deprecated Please use `components.ExpandIcon` instead. This only customizes row icons. */
     expandIcon?: RenderExpandIcon<RecordType>;
     onExpand?: (expanded: boolean, record: RecordType) => void;
+    onExpandAll?: (expanded: boolean) => void;
     onExpandedRowsChange?: (expandedKeys: readonly Key[]) => void;
     defaultExpandAllRows?: boolean;
     indentSize?: number;
     /** @deprecated Please use `EXPAND_COLUMN` in `columns` directly */
     expandIconColumnIndex?: number;
     showExpandColumn?: boolean;
+    showExpandAll?: boolean;
     expandedRowClassName?: string | RowClassName<RecordType>;
     childrenColumnName?: string;
     rowExpandable?: (record: RecordType) => boolean;

package/dist/sugar/Column.js

@@ -52,6 +52,15 @@ var Column = /* @__PURE__ */ defineComponent(() => {
 		default: void 0
 	},
 	title: {
+		type: [
+			Object,
+			Function,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		],
 		required: false,
 		default: void 0
 	},

package/dist/sugar/ColumnGroup.js

@@ -52,6 +52,15 @@ var ColumnGroup = /* @__PURE__ */ defineComponent(() => {
 		default: void 0
 	},
 	title: {
+		type: [
+			Object,
+			Function,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		],
 		required: false,
 		default: void 0
 	},

package/dist/utils/expandUtil.d.ts

@@ -1,4 +1,8 @@
-import { ExpandableConfig, GetRowKey, Key, RenderExpandIconProps } from '../interface';
+import { ExpandableConfig, ExpandIconComponent, ExpandIconProps, GetRowKey, Key, RenderExpandIconProps } from '../interface';
+export declare function DefaultExpandIcon<RecordType>({ prefixCls, type, onClick, expanded, expandable, }: ExpandIconProps<RecordType>): import("vue/jsx-runtime").JSX.Element;
 export declare function renderExpandIcon<RecordType>({ prefixCls, record, onExpand, expanded, expandable, }: RenderExpandIconProps<RecordType>): import("vue/jsx-runtime").JSX.Element;
+export declare function renderRowExpandIcon<RecordType>(ExpandIcon: ExpandIconComponent<RecordType>, props: RenderExpandIconProps<RecordType>): import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
 export declare function computedExpandedClassName<RecordType>(cls: ExpandableConfig<RecordType>['expandedRowClassName'], record: RecordType, index: number, indent: number): string;

package/dist/utils/expandUtil.js

@@ -1,21 +1,54 @@
-import { createVNode } from "vue";
+import { createVNode, h } from "vue";
 import { clsx } from "@v-c/util";
 //#region src/utils/expandUtil.tsx
-function renderExpandIcon({ prefixCls, record, onExpand, expanded, expandable }) {
+function DefaultExpandIcon({ prefixCls, type, onClick, expanded, expandable }) {
 	const expandClassName = `${prefixCls}-row-expand-icon`;
 	if (!expandable) return createVNode("span", { "class": clsx(expandClassName, `${prefixCls}-row-spaced`) }, null);
+	const className = clsx(expandClassName, {
+		[`${prefixCls}-row-expanded`]: expanded,
+		[`${prefixCls}-row-collapsed`]: !expanded
+	});
+	if (type === "all") return createVNode("button", {
+		"type": "button",
+		"aria-expanded": expanded,
+		"aria-label": expanded ? "Collapse all rows" : "Expand all rows",
+		"class": className,
+		"onClick": onClick
+	}, null);
+	return createVNode("span", {
+		"class": className,
+		"onClick": onClick
+	}, null);
+}
+function renderExpandIcon({ prefixCls, record, onExpand, expanded, expandable }) {
 	const onClick = (event) => {
 		onExpand(record, event);
 		event.stopPropagation();
 	};
-	return createVNode("span", {
-		"class": clsx(expandClassName, {
-			[`${prefixCls}-row-expanded`]: expanded,
-			[`${prefixCls}-row-collapsed`]: !expanded
-		}),
+	return createVNode(DefaultExpandIcon, {
+		"type": "row",
+		"prefixCls": prefixCls,
+		"record": record,
+		"expanded": expanded,
+		"expandable": !!expandable,
 		"onClick": onClick
 	}, null);
 }
+function renderRowExpandIcon(ExpandIcon, props) {
+	const { prefixCls, record, onExpand, expanded, expandable } = props;
+	const onClick = (event) => {
+		onExpand(record, event);
+		event.stopPropagation();
+	};
+	return h(ExpandIcon, {
+		type: "row",
+		prefixCls,
+		record,
+		expanded,
+		expandable: !!expandable,
+		onClick
+	});
+}
 function findAllChildrenKeys(data, getRowKey, childrenColumnName) {
 	const keys = [];
 	function dig(list) {
@@ -33,4 +66,4 @@ function computedExpandedClassName(cls, record, index, indent) {
 	return "";
 }
 //#endregion
-export { computedExpandedClassName, findAllChildrenKeys, renderExpandIcon };
+export { DefaultExpandIcon, computedExpandedClassName, findAllChildrenKeys, renderExpandIcon, renderRowExpandIcon };

package/dist/utils/valueUtil.d.ts

@@ -4,5 +4,4 @@ export interface GetColumnKeyColumn<T = any> {
     dataIndex?: DataIndex<T>;
 }
 export declare function getColumnsKey<T = any>(columns: readonly GetColumnKeyColumn<T>[]): Key[];
-export declare function validateValue<T>(val: T): boolean;
 export declare function validNumberValue(value: any): boolean;

package/dist/utils/valueUtil.js

@@ -16,12 +16,8 @@ function getColumnsKey(columns) {
 	});
 	return columnKeys;
 }
-function validateValue(val) {
-	if (Array.isArray(val) && val.length === 0) return false;
-	return val !== null && val !== void 0;
-}
 function validNumberValue(value) {
 	return typeof value === "number" && !Number.isNaN(value);
 }
 //#endregion
-export { getColumnsKey, validNumberValue, validateValue };
+export { getColumnsKey, validNumberValue };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/table",
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "MIT",
   "homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/table",
   "repository": {
@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@v-c/resize-observer": "^1.1.3",
-    "@v-c/virtual-list": "^1.1.1",
-    "@v-c/util": "^1.1.0"
+    "@v-c/util": "^1.2.0",
+    "@v-c/virtual-list": "^1.1.1"
   },
   "publishConfig": {
     "access": "public"