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

package/dist/components/SearchForm/FormItemWrapper.d.ts

@@ -0,0 +1,80 @@
+import { CSSProperties, PropType } from "vue";
+
+//#region src/components/SearchForm/FormItemWrapper.d.ts
+declare const FormItemWrapper: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  label: {
+    type: PropType<string | any>;
+    default: any;
+  };
+  labelWidth: {
+    type: PropType<number | string>;
+    default: any;
+  };
+  labelAlign: {
+    type: PropType<"left" | "center" | "right">;
+    default: any;
+  };
+  colon: {
+    type: BooleanConstructor;
+    default: any;
+  };
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  hashId: {
+    type: StringConstructor;
+    default: string;
+  };
+  formItemStyle: {
+    type: PropType<CSSProperties>;
+    default: () => {};
+  };
+  globalLabelGap: {
+    type: NumberConstructor;
+    default: any;
+  };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  label: {
+    type: PropType<string | any>;
+    default: any;
+  };
+  labelWidth: {
+    type: PropType<number | string>;
+    default: any;
+  };
+  labelAlign: {
+    type: PropType<"left" | "center" | "right">;
+    default: any;
+  };
+  colon: {
+    type: BooleanConstructor;
+    default: any;
+  };
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  hashId: {
+    type: StringConstructor;
+    default: string;
+  };
+  formItemStyle: {
+    type: PropType<CSSProperties>;
+    default: () => {};
+  };
+  globalLabelGap: {
+    type: NumberConstructor;
+    default: any;
+  };
+}>> & Readonly<{}>, {
+  label: any;
+  hashId: string;
+  labelWidth: string | number;
+  labelAlign: "left" | "right" | "center";
+  colon: boolean;
+  formItemStyle: CSSProperties;
+  globalLabelGap: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { FormItemWrapper };

package/dist/components/SearchForm/FormItemWrapper.js

@@ -0,0 +1,62 @@
+import { createVNode, defineComponent } from "vue";
+//#region src/components/SearchForm/FormItemWrapper.tsx
+const FormItemWrapper = /* @__PURE__ */ defineComponent({
+	name: "ProTableFormItemWrapper",
+	props: {
+		label: {
+			type: [String, Object],
+			default: void 0
+		},
+		labelWidth: {
+			type: [Number, String],
+			default: void 0
+		},
+		labelAlign: {
+			type: String,
+			default: void 0
+		},
+		colon: {
+			type: Boolean,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		hashId: {
+			type: String,
+			default: ""
+		},
+		formItemStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		globalLabelGap: {
+			type: Number,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			const showLabel = !!props.label;
+			const labelAlignClass = props.labelAlign ? `${props.prefixCls}-search-item-label-${props.labelAlign}` : "";
+			const noColonClass = props.colon === false ? `${props.prefixCls}-search-item-label-no-colon` : "";
+			return createVNode("div", {
+				"class": [`${props.prefixCls}-search-item`, props.hashId],
+				"style": {
+					...props.formItemStyle,
+					...props.globalLabelGap != null ? { gap: `${props.globalLabelGap}px` } : {}
+				}
+			}, [showLabel && createVNode("div", {
+				"class": [
+					`${props.prefixCls}-search-item-label`,
+					labelAlignClass,
+					noColonClass
+				],
+				"style": props.labelWidth ? { width: typeof props.labelWidth === "number" ? `${props.labelWidth}px` : props.labelWidth } : void 0
+			}, [props.label]), createVNode("div", { "class": `${props.prefixCls}-search-item-children` }, [slots.default?.()])]);
+		};
+	}
+});
+//#endregion
+export { FormItemWrapper };

package/dist/components/SearchForm/SearchForm.d.ts

@@ -0,0 +1,128 @@
+import { FormConfig, ProSearchMap } from "../../interface.js";
+import { PropType } from "vue";
+
+//#region src/components/SearchForm/SearchForm.d.ts
+declare const ProTableSearchForm: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  formColumns: {
+    type: PropType<ProSearchMap[]>;
+    default: () => any[];
+  };
+  formState: {
+    type: PropType<Record<string, any>>;
+    required: true;
+  };
+  defaultFormSearch: {
+    type: PropType<Record<string, any>>;
+    required: true;
+  };
+  formConfig: {
+    type: PropType<FormConfig | undefined>;
+    default: any;
+  };
+  formAutoRequest: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  formActions: {
+    type: PropType<FormConfig["actions"] | undefined>;
+    default: any;
+  };
+  loading: {
+    type: PropType<boolean | any>;
+    default: boolean;
+  };
+  cardBordered: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  proClasses: {
+    type: PropType<Record<string, string>>;
+    default: () => {};
+  };
+  proStyles: {
+    type: PropType<Record<string, any>>;
+    default: () => {};
+  };
+  onSearch: {
+    type: PropType<(params: Record<string, any>, action?: "reset" | "submit") => void>;
+    required: true;
+  };
+  onReset: {
+    type: PropType<(params: Record<string, any>) => void>;
+    default: any;
+  };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  formColumns: {
+    type: PropType<ProSearchMap[]>;
+    default: () => any[];
+  };
+  formState: {
+    type: PropType<Record<string, any>>;
+    required: true;
+  };
+  defaultFormSearch: {
+    type: PropType<Record<string, any>>;
+    required: true;
+  };
+  formConfig: {
+    type: PropType<FormConfig | undefined>;
+    default: any;
+  };
+  formAutoRequest: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  formActions: {
+    type: PropType<FormConfig["actions"] | undefined>;
+    default: any;
+  };
+  loading: {
+    type: PropType<boolean | any>;
+    default: boolean;
+  };
+  cardBordered: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  proClasses: {
+    type: PropType<Record<string, string>>;
+    default: () => {};
+  };
+  proStyles: {
+    type: PropType<Record<string, any>>;
+    default: () => {};
+  };
+  onSearch: {
+    type: PropType<(params: Record<string, any>, action?: "reset" | "submit") => void>;
+    required: true;
+  };
+  onReset: {
+    type: PropType<(params: Record<string, any>) => void>;
+    default: any;
+  };
+}>> & Readonly<{}>, {
+  onReset: (params: Record<string, any>) => void;
+  proClasses: Record<string, string>;
+  proStyles: Record<string, any>;
+  formColumns: ProSearchMap<"text", string>[];
+  formConfig: FormConfig;
+  formAutoRequest: boolean;
+  formActions: {
+    reset?: boolean;
+    resetReload?: boolean;
+    searchText?: string;
+    resetText?: string;
+  };
+  loading: any;
+  cardBordered: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { ProTableSearchForm as default };

package/dist/components/SearchForm/SearchForm.js

@@ -0,0 +1,319 @@
+import { useProBreakpoints } from "../../hooks/useBreakpoints.js";
+import { formatDateRangeArray, formatStringValue, resolveValueFormat } from "../../utils/dateFormat.js";
+import { CollapseToggle } from "./CollapseToggle.js";
+import { FormItemContainer } from "./FormItemContainer.js";
+import { FormItemWrapper } from "./FormItemWrapper.js";
+import { computed, createVNode, defineComponent, isVNode, ref, watch } from "vue";
+import { classNames, filterEmpty, isArray, isBoolean, isNumber, isObject } from "@gx-design-vue/pro-utils";
+import { Button } from "antdv-next";
+import { cloneDeep as cloneDeep$1 } from "es-toolkit";
+//#region src/components/SearchForm/SearchForm.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ProTableSearchForm = /* @__PURE__ */ defineComponent({
+	name: "ProTableSearchForm",
+	inheritAttrs: false,
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		formColumns: {
+			type: Array,
+			default: () => []
+		},
+		formState: {
+			type: Object,
+			required: true
+		},
+		defaultFormSearch: {
+			type: Object,
+			required: true
+		},
+		formConfig: {
+			type: Object,
+			default: void 0
+		},
+		formAutoRequest: {
+			type: Boolean,
+			default: true
+		},
+		formActions: {
+			type: Object,
+			default: void 0
+		},
+		loading: {
+			type: [Boolean, Object],
+			default: false
+		},
+		cardBordered: {
+			type: Boolean,
+			default: false
+		},
+		proClasses: {
+			type: Object,
+			default: () => ({})
+		},
+		proStyles: {
+			type: Object,
+			default: () => ({})
+		},
+		onSearch: {
+			type: Function,
+			required: true
+		},
+		onReset: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props, { slots, expose }) {
+		const collapsed = ref(props.formConfig?.collapsed ?? props.formConfig?.defaultCollapsed);
+		watch(() => props.formConfig?.collapsed, (value) => {
+			collapsed.value = value;
+		});
+		const { getRowItemsPerBreakpoint } = useProBreakpoints();
+		const formConfig = computed(() => props.formConfig);
+		const formAutoRequest = computed(() => props.formAutoRequest);
+		const formActions = computed(() => props.formActions);
+		const breakpoint = computed(() => {
+			if (formConfig.value?.breakpoint && isObject(formConfig.value.breakpoint) && Object.keys(formConfig.value.breakpoint).length > 0) return formConfig.value.breakpoint;
+		});
+		const rowLength = computed(() => {
+			return getRowItemsPerBreakpoint(formConfig.value?.span, breakpoint.value);
+		});
+		const gap = computed(() => {
+			const gapValue = formConfig.value?.gap;
+			return typeof gapValue === "number" ? `${gapValue}px` : gapValue ?? "16px";
+		});
+		const formItemLabel = computed(() => formConfig.value?.label);
+		const showResetButton = computed(() => {
+			if (isBoolean(formActions.value?.reset)) return formActions.value.reset;
+			return !formAutoRequest.value;
+		});
+		function handleFormFieldChange(value, record, options) {
+			const name = record.name;
+			const valueType = record.valueType ?? "text";
+			let newValue = value;
+			switch (valueType) {
+				case "text": break;
+				case "number":
+					newValue = value ?? void 0;
+					break;
+				case "numberRange":
+					if ((options?.key === 0 || options?.key === 1) && props.formState[name]) {
+						const updated = [...Array.isArray(props.formState[name]) ? props.formState[name] : []];
+						if (options?.key !== void 0) updated[options.key] = value ?? "";
+						newValue = updated;
+					}
+					break;
+				case "select":
+					newValue = value ?? void 0;
+					break;
+				case "treeSelect":
+					newValue = value ?? (record.field?.treeCheckable || record.field?.multiple ? [] : null);
+					break;
+				case "cascader":
+					newValue = value ?? void 0;
+					break;
+				case "date": {
+					const format = resolveValueFormat(record.valueFormat, record.showTime);
+					newValue = value ? formatStringValue(value, format) : null;
+					break;
+				}
+				case "dateWeek":
+					newValue = value ? formatStringValue(value, "YYYY-wo") : null;
+					break;
+				case "dateMonth":
+					newValue = value ? formatStringValue(value, "YYYY-MM") : null;
+					break;
+				case "dateQuarter":
+					newValue = value ? formatStringValue(value, "YYYY-QQ") : null;
+					break;
+				case "dateYear":
+					newValue = value ? formatStringValue(value, "YYYY") : null;
+					break;
+				case "dateRange": {
+					const format = resolveValueFormat(record.valueFormat, record.showTime);
+					newValue = value && isArray(value) && value.length === 2 ? formatDateRangeArray(value, format, "string") : null;
+					break;
+				}
+				case "time":
+					newValue = value ? formatStringValue(value, record.valueFormat || "HH:mm:ss") : null;
+					break;
+			}
+			props.formState[name] = newValue;
+			handleAutoSubmit();
+		}
+		function handleAutoSubmit() {
+			if (formAutoRequest.value) handleSubmit();
+		}
+		function handleSubmit() {
+			const searchParams = buildFormSearchParams();
+			props.onSearch(searchParams);
+		}
+		function handleManualSubmit() {
+			const searchParams = buildFormSearchParams();
+			props.onSearch(searchParams, "submit");
+		}
+		function buildFormSearchParams() {
+			const searchParams = cloneDeep$1(props.formState);
+			for (const record of props.formColumns) {
+				const valueType = record.valueType ?? "text";
+				const name = record.name;
+				if (valueType === "text") searchParams[name] = props.formState[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 === "numberRange") {
+					const value = searchParams[name];
+					searchParams[name] = Array.isArray(value) && value.some((val) => isNumber(val)) ? value : void 0;
+				}
+			}
+			return searchParams;
+		}
+		function resetForm() {
+			const defaults = cloneDeep$1(props.defaultFormSearch);
+			Object.keys(props.formState).forEach((key) => {
+				props.formState[key] = key in defaults ? defaults[key] : void 0;
+			});
+			for (const record of props.formColumns) if (record.valueType === "dateRange" && (record.rangeStartName || record.rangeEndName)) {
+				const startKey = record.rangeStartName || "start";
+				const endKey = record.rangeEndName || "end";
+				if (defaults[startKey] !== void 0 || defaults[endKey] !== void 0) props.formState[record.name] = [defaults[startKey], defaults[endKey]];
+			}
+			const searchParams = buildFormSearchParams();
+			props.onSearch(searchParams, "reset");
+			props.onReset?.(searchParams);
+		}
+		function handleCollapseToggle(status) {
+			collapsed.value = status;
+		}
+		expose({
+			handleSubmit,
+			resetForm
+		});
+		function getFormItemStyle(index, itemsPerRow, containerGap) {
+			const rowWidth = { width: `calc((100% - (${itemsPerRow - 1} * ${containerGap})) / ${itemsPerRow})` };
+			return (index + 1) % itemsPerRow === 0 ? {
+				...rowWidth,
+				marginRight: 0
+			} : {
+				...rowWidth,
+				marginRight: containerGap
+			};
+		}
+		return () => {
+			const formNode = [...props.formColumns];
+			const normalizedSlots = filterEmpty(slots.default?.() || []);
+			const mergedFormItems = sortFormItemsByOrder([...formNode, ...normalizedSlots.map((item) => ({
+				...item,
+				order: item.props?.order ?? void 0
+			}))]);
+			const itemsPerRow = rowLength.value;
+			const containerGap = gap.value;
+			const totalItems = mergedFormItems.length;
+			const isCollapsed = collapsed.value !== false;
+			const showCollapse = totalItems > itemsPerRow;
+			const renderFormItem = (item, index) => {
+				const formItemStyle = getFormItemStyle(index, itemsPerRow, containerGap);
+				const label = isVNode(item) ? item.props?.label : item.label;
+				const labelWidth = (isVNode(item) ? item.props?.labelWidth : item.labelWidth) ?? formItemLabel.value?.width;
+				const labelAlign = (isVNode(item) ? item.props?.labelAlign : item.labelAlign) ?? formItemLabel.value?.align;
+				if (isVNode(item)) return createVNode(FormItemWrapper, {
+					"label": label,
+					"labelWidth": labelWidth,
+					"labelAlign": labelAlign,
+					"colon": formItemLabel.value?.colon,
+					"globalLabelGap": formItemLabel.value?.gap,
+					"prefixCls": props.prefixCls,
+					"formItemStyle": formItemStyle
+				}, _isSlot(item) ? item : { default: () => [item] });
+				return createVNode(FormItemWrapper, {
+					"key": String(item.name ?? item.key ?? index),
+					"label": item.label,
+					"labelWidth": labelWidth,
+					"labelAlign": labelAlign,
+					"colon": formItemLabel.value?.colon,
+					"globalLabelGap": formItemLabel.value?.gap,
+					"prefixCls": props.prefixCls,
+					"formItemStyle": formItemStyle
+				}, { default: () => [createVNode(FormItemContainer, {
+					"prefixCls": props.prefixCls,
+					"record": item,
+					"formState": props.formState,
+					"autoRequest": formAutoRequest.value,
+					"loading": typeof props.loading === "boolean" ? props.loading : false,
+					"onChange": handleFormFieldChange,
+					"onSubmit": handleAutoSubmit
+				}, null)] });
+			};
+			const renderActionButtons = () => {
+				if (!showResetButton.value && formAutoRequest.value) return null;
+				return createVNode("div", {
+					"class": [`${props.prefixCls}-search-buttons`, props.proClasses.searchButtons],
+					"style": props.proStyles.searchButtons
+				}, [showResetButton.value && createVNode(Button, {
+					"key": "reset",
+					"onClick": resetForm
+				}, { default: () => [formActions.value?.resetText || "重置"] }), !formAutoRequest.value && createVNode(Button, {
+					"key": "submit",
+					"type": "primary",
+					"loading": typeof props.loading === "boolean" ? props.loading : false,
+					"onClick": handleManualSubmit
+				}, { default: () => [formActions.value?.searchText || "查询"] })]);
+			};
+			const renderCollapseToggle = (show, isCollapsedState) => {
+				if (formConfig.value?.collapseRender === false && !renderActionButtons()) return null;
+				const actionBtns = renderActionButtons();
+				if (!show && !actionBtns) return null;
+				return createVNode("div", {
+					"class": [`${props.prefixCls}-search-control`, props.proClasses.searchControl],
+					"style": {
+						flex: 1,
+						justifyContent: "flex-end",
+						...props.proStyles.searchControl
+					}
+				}, [createVNode("div", { "class": [`${props.prefixCls}-search-control-content`, props.proClasses.searchContent] }, [actionBtns, show && createVNode(CollapseToggle, {
+					"collapsed": isCollapsedState,
+					"collapseRender": formConfig.value?.collapseRender,
+					"prefixCls": props.prefixCls,
+					"onToggle": handleCollapseToggle
+				}, null)])]);
+			};
+			const borderedCls = props.cardBordered ? `${props.prefixCls}-search-border` : "";
+			const visibleItemCount = totalItems <= itemsPerRow || !isCollapsed ? totalItems : Math.max(itemsPerRow - 1, 0);
+			return createVNode("div", {
+				"class": classNames(props.proClasses.search, `${props.prefixCls}-search`, borderedCls, formConfig.value?.className),
+				"style": props.proStyles.search
+			}, [mergedFormItems.slice(0, visibleItemCount).map((item, index) => renderFormItem(item, index)), renderCollapseToggle(showCollapse, isCollapsed)]);
+		};
+	}
+});
+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;
+	});
+	sorted.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+	return sorted;
+}
+//#endregion
+export { ProTableSearchForm as default };

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

@@ -0,0 +1,2 @@
+import ProTableSearchForm from "./SearchForm.js";
+export { ProTableSearchForm as SearchForm };

package/dist/components/SearchForm/index.js

@@ -0,0 +1,2 @@
+import ProTableSearchForm from "./SearchForm.js";
+export { ProTableSearchForm as SearchForm };

package/dist/components/Toolbar/FullscreenIcon.d.ts

@@ -0,0 +1,24 @@
+import { PropType } from "vue";
+
+//#region src/components/Toolbar/FullscreenIcon.d.ts
+declare const FullscreenIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  isFullscreen: {
+    type: BooleanConstructor;
+    required: true;
+  };
+  onToggle: {
+    type: PropType<() => void>;
+    required: true;
+  };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  isFullscreen: {
+    type: BooleanConstructor;
+    required: true;
+  };
+  onToggle: {
+    type: PropType<() => void>;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { FullscreenIcon };

package/dist/components/Toolbar/FullscreenIcon.js

@@ -0,0 +1,22 @@
+import { createVNode, defineComponent } from "vue";
+import { Tooltip } from "antdv-next";
+import { GIcon } from "@gx-design-vue/icon";
+//#region src/components/Toolbar/FullscreenIcon.tsx
+const FullscreenIcon = /* @__PURE__ */ defineComponent({
+	name: "ProTableFullscreenIcon",
+	props: {
+		isFullscreen: {
+			type: Boolean,
+			required: true
+		},
+		onToggle: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		return () => createVNode(Tooltip, { "title": props.isFullscreen ? "退出全屏" : "全屏" }, { default: () => [createVNode("span", { "onClick": props.onToggle }, [props.isFullscreen ? createVNode(GIcon, { "type": "FullscreenExitOutlined" }, null) : createVNode(GIcon, { "type": "FullscreenOutlined" }, null)])] });
+	}
+});
+//#endregion
+export { FullscreenIcon };