@v-c/table 1.2.0 → 1.2.1

package/dist/Table.js

@@ -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,

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;
@@ -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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/table",
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "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.1.0",
+    "@v-c/virtual-list": "^1.1.1"
   },
   "publishConfig": {
     "access": "public"