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

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

@@ -0,0 +1,17 @@
+import * as _$vue from "vue";
+import { VueNode } from "@v-c/util";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+
+//#region src/components/ColumnSetting/CheckboxListItem.d.ts
+interface CheckboxListItemProps {
+  columnKey: string | number;
+  title?: VueNode;
+  fixed?: boolean | 'start' | 'end';
+  showListItemOption?: boolean;
+  isLeaf?: boolean;
+}
+declare const CheckboxListItem: _$vue.DefineSetupFnComponent<CheckboxListItemProps, {}, CustomSlotsType<{
+  default?: () => VueNode;
+}>, CheckboxListItemProps & {}, _$vue.PublicProps>;
+//#endregion
+export { CheckboxListItemProps, CheckboxListItem as default };

package/dist/components/ColumnSetting/CheckboxListItem.js

@@ -0,0 +1,84 @@
+import ToolTipIcon from "./ToolTipIcon.js";
+import { createVNode, defineComponent } from "vue";
+import { useIntl, useProConfig } from "@antdv-vue/pro-provider";
+import { classNames } from "@v-c/util";
+import { VerticalAlignBottomOutlined, VerticalAlignMiddleOutlined, VerticalAlignTopOutlined } from "@antdv-next/icons";
+//#region src/components/ColumnSetting/CheckboxListItem.tsx
+const CheckboxListItem = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const intl = useIntl();
+	const proProvide = useProConfig();
+	return () => {
+		const { isLeaf, columnKey, fixed, title, showListItemOption } = props;
+		return createVNode("span", {
+			"class": classNames(`${attrs.class}-list-item`, proProvide.value.hashId),
+			"key": columnKey
+		}, [createVNode("span", { "class": classNames(`${attrs.class}-list-item-title`, proProvide.value.hashId) }, [title]), showListItemOption && !isLeaf ? createVNode("span", { "class": classNames(`${attrs.class}-list-item-option`, proProvide.value.hashId) }, [
+			createVNode(ToolTipIcon, {
+				"columnKey": columnKey,
+				"fixed": "start",
+				"title": intl.value.getMessage({
+					id: "tableToolBar.startPin",
+					defaultMessage: "固定在列首"
+				}),
+				"show": props.fixed !== "start"
+			}, { default: () => [createVNode(VerticalAlignTopOutlined, null, null)] }),
+			createVNode(ToolTipIcon, {
+				"columnKey": columnKey,
+				"fixed": void 0,
+				"title": intl.value.getMessage({
+					id: "tableToolBar.noPin",
+					defaultMessage: "不固定"
+				}),
+				"show": !!fixed
+			}, { default: () => [createVNode(VerticalAlignMiddleOutlined, null, null)] }),
+			createVNode(ToolTipIcon, {
+				"columnKey": columnKey,
+				"fixed": "end",
+				"title": intl.value.getMessage({
+					id: "tableToolBar.endPin",
+					defaultMessage: "固定在列尾"
+				}),
+				"show": fixed !== "end"
+			}, { default: () => [createVNode(VerticalAlignBottomOutlined, null, null)] })
+		]) : null]);
+	};
+}, {
+	props: {
+		columnKey: {
+			type: [String, Number],
+			required: true
+		},
+		title: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		fixed: {
+			type: [Boolean, String],
+			required: false,
+			default: void 0
+		},
+		showListItemOption: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		isLeaf: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "CheckboxListItem",
+	inheritAttrs: false
+});
+//#endregion
+export { CheckboxListItem as default };

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

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

package/dist/components/ColumnSetting/GroupCheckboxList.js

@@ -0,0 +1,82 @@
+import CheckboxList from "./CheckboxList.js";
+import { createVNode, defineComponent } from "vue";
+import { useIntl, useProConfig } from "@antdv-vue/pro-provider";
+import { classNames } from "@v-c/util";
+//#region src/components/ColumnSetting/GroupCheckboxList.tsx
+const GroupCheckboxList = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const proProvide = useProConfig();
+	const intl = useIntl();
+	return () => {
+		const { columns, draggable, checkable, showListItemOption, listsHeight } = props;
+		const endList = [];
+		const startList = [];
+		const list = [];
+		columns?.forEach((item) => {
+			const { fixed, hideInSetting } = item;
+			/** 不在 setting 中展示的 */
+			if (hideInSetting) return;
+			if (fixed === "start") {
+				startList.push(item);
+				return;
+			}
+			if (fixed === "end") {
+				endList.push(item);
+				return;
+			}
+			list.push(item);
+		});
+		const showRight = endList && endList.length > 0;
+		const showLeft = startList && startList.length > 0;
+		return createVNode("div", { "class": classNames(`${attrs.class}-list`, proProvide.value.hashId, { [`${attrs.class}-list-group`]: showRight || showLeft }) }, [
+			createVNode(CheckboxList, {
+				"title": intl.value.getMessage({
+					id: "tableToolBar.startFixedTitle",
+					defaultMessage: "固定在左侧"
+				}),
+				"list": startList,
+				"class": attrs.class,
+				"draggable": draggable,
+				"checkable": checkable,
+				"showListItemOption": showListItemOption,
+				"listsHeight": listsHeight
+			}, null),
+			createVNode(CheckboxList, {
+				"list": list,
+				"draggable": draggable,
+				"checkable": checkable,
+				"showListItemOption": showListItemOption,
+				"title": intl.value.getMessage({
+					id: "tableToolBar.noFixedTitle",
+					defaultMessage: "不固定"
+				}),
+				"showTitle": showLeft || showRight,
+				"class": attrs.class,
+				"listsHeight": listsHeight
+			}, null),
+			createVNode(CheckboxList, {
+				"title": intl.value.getMessage({
+					id: "tableToolBar.endFixedTitle",
+					defaultMessage: "固定在右侧"
+				}),
+				"list": endList,
+				"draggable": draggable,
+				"checkable": checkable,
+				"showListItemOption": showListItemOption,
+				"class": attrs.class,
+				"listsHeight": listsHeight
+			}, null)
+		]);
+	};
+}, {
+	name: "GroupCheckboxList",
+	inheritAttrs: false,
+	props: [
+		"checkable",
+		"columns",
+		"draggable",
+		"listsHeight",
+		"showListItemOption"
+	]
+});
+//#endregion
+export { GroupCheckboxList as default };

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

@@ -0,0 +1,12 @@
+import * as _$vue from "vue";
+
+//#region src/components/ColumnSetting/ToolTipIcon.d.ts
+interface ToolTipIconProps {
+  title?: string;
+  columnKey?: string | number;
+  show?: boolean;
+  fixed?: 'start' | 'end';
+}
+declare const ToolTipIcon: _$vue.DefineSetupFnComponent<ToolTipIconProps, {}, {}, ToolTipIconProps & {}, _$vue.PublicProps>;
+//#endregion
+export { ToolTipIconProps, ToolTipIcon as default };

package/dist/components/ColumnSetting/ToolTipIcon.js

@@ -0,0 +1,47 @@
+import { useTableContextInject } from "../../Store/Provide.js";
+import { createVNode, defineComponent, reactive } from "vue";
+import { Tooltip } from "antdv-next";
+//#region src/components/ColumnSetting/ToolTipIcon.tsx
+const ToolTipIcon = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const { columnsMap, setColumnsMap } = useTableContextInject();
+	return () => {
+		if (!props.show) return null;
+		return createVNode(Tooltip, { "title": props.title }, { default: () => [createVNode("span", { "onClick": (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			const config = columnsMap?.value?.[props.columnKey] || {};
+			const columnKeyMap = {
+				...columnsMap?.value,
+				[props.columnKey]: reactive({
+					...config,
+					fixed: props.fixed
+				})
+			};
+			setColumnsMap?.(columnKeyMap);
+		} }, [slots.default?.()])] });
+	};
+}, {
+	props: {
+		title: {
+			type: String,
+			required: false
+		},
+		columnKey: {
+			type: [String, Number],
+			required: false
+		},
+		show: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		fixed: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ToolTipIcon",
+	inheritAttrs: false
+});
+//#endregion
+export { ToolTipIcon as default };

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

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

package/dist/components/ColumnSetting/index.js

@@ -0,0 +1,117 @@
+import { genColumnKey } from "../../utils/genProColumnsToColumns.js";
+import { useTableContextInject } from "../../Store/Provide.js";
+import GroupCheckboxList from "./GroupCheckboxList.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, isVNode, shallowRef } from "vue";
+import { useIntl } from "@antdv-vue/pro-provider";
+import { useEffect } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+import { useConfig } from "antdv-next/config-provider/context";
+import { Checkbox, Popover, Space, Tooltip } from "antdv-next";
+import { SettingOutlined } from "@antdv-next/icons";
+//#region src/components/ColumnSetting/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ColumnSetting = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const intl = useIntl();
+	const config = useConfig();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-table-column-setting`);
+	const [hashId, cssVarCls] = style_default(baseClassName);
+	const counter = useTableContextInject();
+	const columnRef = shallowRef(null);
+	/**
+	* 设置全部选中，或全部未选中
+	*
+	* @param show
+	*/
+	const setAllSelectAction = (show = true) => {
+		const columnKeyMap = {};
+		const loopColumns = (columns) => {
+			columns?.forEach(({ key, fixed, index, children, disable }) => {
+				const columnKey = genColumnKey(key, index);
+				if (columnKey) columnKeyMap[columnKey] = {
+					show: disable ? counter.columnsMap?.value?.[columnKey]?.show : show,
+					fixed,
+					disable,
+					order: counter.columnsMap?.value?.[columnKey]?.order
+				};
+				if (children) loopColumns(children);
+			});
+		};
+		loopColumns(props.columns);
+		counter.setColumnsMap?.(columnKeyMap);
+	};
+	useEffect(() => {
+		if (counter.propsRef?.value?.columnsState?.value) columnRef.value = JSON.parse(JSON.stringify(counter.propsRef.value?.columnsState?.value || {}));
+	}, [() => counter.propsRef?.value?.columnsState?.value]);
+	/** 重置项目 */
+	const clearClick = () => {
+		counter.clearPersistenceStorage?.();
+		counter.setColumnsMap?.(counter.propsRef?.value?.columnsState?.defaultValue || columnRef.value || counter.defaultColumnKeyMap?.value);
+	};
+	return () => {
+		let _slot;
+		const { settingIcon, checkable, draggable, checkedReset = true, extra, listsHeight, showListItemOption, columns = [] } = props;
+		const unCheckedKeys = Object.values(counter.columnsMap?.value || {}).filter((value) => !value || value.show === false);
+		const indeterminate = unCheckedKeys.length > 0 && unCheckedKeys.length !== columns.length;
+		return createVNode(Popover, {
+			"arrow": false,
+			"trigger": "click",
+			"placement": "bottomRight",
+			"title": createVNode("div", { "class": classNames(`${baseClassName.value}-title`, hashId.value, cssVarCls.value) }, [
+				checkable === false ? null : createVNode(Checkbox, {
+					"indeterminate": indeterminate,
+					"checked": unCheckedKeys.length === 0 && unCheckedKeys.length !== columns.length,
+					"onChange": (e) => {
+						if (e.target.checked) setAllSelectAction();
+						else setAllSelectAction(false);
+					}
+				}, _isSlot(_slot = intl.value.getMessage({
+					id: "tableToolBar.columnDisplay",
+					defaultMessage: "列展示"
+				})) ? _slot : { default: () => [_slot] }),
+				checkedReset ? createVNode("a", {
+					"class": classNames(`${baseClassName.value}-action-rest-button`, hashId.value, cssVarCls.value),
+					"onClick": clearClick
+				}, [intl.value.getMessage({
+					id: "tableToolBar.reset",
+					defaultMessage: "重置"
+				})]) : null,
+				!extra ? null : createVNode(Space, {
+					"size": 12,
+					"align": "center"
+				}, _isSlot(extra) ? extra : { default: () => [extra] })
+			]),
+			"classes": { root: classNames(`${baseClassName.value}-overlay`, hashId.value, cssVarCls.value) },
+			"content": createVNode(GroupCheckboxList, {
+				"class": baseClassName.value,
+				"checkable": checkable ?? true,
+				"draggable": draggable ?? true,
+				"showListItemOption": showListItemOption ?? true,
+				"columns": columns,
+				"listsHeight": listsHeight
+			}, null)
+		}, { default: () => [slots.default?.() || createVNode(Tooltip, { "title": intl.value.getMessage({
+			id: "tableToolBar.columnSetting",
+			defaultMessage: "列设置"
+		}) }, { default: () => [settingIcon ?? createVNode(SettingOutlined, null, null)] })] });
+	};
+}, {
+	name: "ColumnSetting",
+	inheritAttrs: false,
+	props: [
+		"checkable",
+		"checkedReset",
+		"columns",
+		"draggable",
+		"extra",
+		"listsHeight",
+		"prefixCls",
+		"settingIcon",
+		"showListItemOption"
+	]
+});
+//#endregion
+export { ColumnSetting as default };

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

@@ -0,0 +1,8 @@
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/ColumnSetting/style/index.d.ts
+interface ProTableColumnSettingToken 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 { ProTableColumnSettingToken, _default as default };

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

@@ -0,0 +1,73 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/ColumnSetting/style/index.ts
+const genProTableColumnSettingStyle = (token) => {
+	return {
+		[token.componentCls]: {
+			width: "auto",
+			"&-title": {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				height: 32
+			},
+			"&-overlay": {
+				[`${token.antCls}-popover-inner-content`]: {
+					width: 200,
+					paddingBlock: 0,
+					paddingInline: 0,
+					paddingBlockEnd: 8,
+					[`${token.antCls}-tree-node-content-wrapper`]: { "&-normal": { "&:hover": { backgroundColor: "transparent" } } }
+				},
+				[`${token.antCls}-tree-draggable-icon`]: { cursor: "grab" },
+				[`${token.antCls}-tree-treenode`]: {
+					alignItems: "center",
+					"&:hover": { [`${token.componentCls}-list-item-option`]: { display: "block" } },
+					[`${token.antCls}-tree-checkbox`]: { marginInlineEnd: 4 },
+					[`${token.antCls}-tree-title`]: { width: "100%" }
+				}
+			}
+		},
+		[`${token.componentCls}-action-rest-button`]: { color: token.colorPrimary },
+		[`${token.componentCls}-list`]: {
+			display: "flex",
+			flexDirection: "column",
+			width: "100%",
+			paddingBlockStart: 8,
+			[`&${token.componentCls}-list-group`]: { paddingBlockStart: 0 },
+			"&-title": {
+				marginBlockStart: 6,
+				marginBlockEnd: 6,
+				paddingInlineStart: 24,
+				color: token.colorTextSecondary,
+				fontSize: 12
+			},
+			"&-item": {
+				display: "flex",
+				alignItems: "center",
+				maxHeight: 24,
+				justifyContent: "space-between",
+				"&-title": {
+					flex: 1,
+					maxWidth: 80,
+					textOverflow: "ellipsis",
+					overflow: "hidden",
+					wordBreak: "break-all",
+					whiteSpace: "nowrap"
+				},
+				"&-option": {
+					display: "none",
+					float: "right",
+					cursor: "pointer",
+					"> span": { "> span.anticon": { color: token.colorPrimary } },
+					"> span + span": { marginInlineStart: 4 }
+				}
+			}
+		}
+	};
+};
+var style_default = useStyle("ProTableColumnSetting", (token) => {
+	return [genProTableColumnSettingStyle(mergeToken(token, {}))];
+});
+//#endregion
+export { style_default as default };