@gx-design-vue/pro-table 0.2.0-alpha.8 → 0.2.0-alpha.9

package/dist/components/SearchForm/FormItemContainer.js

@@ -0,0 +1,225 @@
+import { formatDateRangeArray, formatStringValue, resolveValueFormat } from "../../utils/dateFormat.js";
+import { useRequestOptions } from "../../hooks/useRequestOptions.js";
+import { createVNode, defineComponent, mergeProps } from "vue";
+import { Cascader, DatePicker, Input, InputNumber, Select, SpaceCompact, TimePicker, TreeSelect } from "antdv-next";
+import dayjs from "dayjs";
+//#region src/components/SearchForm/FormItemContainer.tsx
+const { RangePicker } = DatePicker;
+const FormItemContainer = /* @__PURE__ */ defineComponent({
+	name: "ProTableFormItemContainer",
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		record: {
+			type: Object,
+			required: true
+		},
+		formState: {
+			type: Object,
+			required: true
+		},
+		autoRequest: {
+			type: Boolean,
+			default: true
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		onChange: {
+			type: Function,
+			required: true
+		},
+		onSubmit: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props) {
+		const { optionList, loading: requestLoading } = useRequestOptions({
+			fetch: props.record.request?.fetch,
+			manual: props.record.request?.manual,
+			debounceTime: props.record.request?.debounceTime
+		});
+		const rangeInputStyle = {
+			width: "calc((100% - 30px) / 2)",
+			flex: "0 0 calc((100% - 30px) / 2)",
+			minWidth: 0
+		};
+		function handleChange(value, options) {
+			props.onChange(value, props.record, options);
+		}
+		function renderText() {
+			const fields = props.record.field ?? {};
+			const inputProps = {
+				style: { width: "100%" },
+				value: props.formState[props.record.name],
+				placeholder: props.record.placeholder || "请输入",
+				allowClear: props.record.allowClear ?? true,
+				...fields
+			};
+			if (props.autoRequest) return createVNode(Input.Search, mergeProps(inputProps, {
+				"onSearch": () => props.onSubmit?.(),
+				"onChange": (e) => {
+					props.formState[props.record.name] = e.target?.value ?? e;
+				}
+			}), null);
+			return createVNode(Input, mergeProps(inputProps, { "onChange": (e) => handleChange(e.target?.value ?? e) }), null);
+		}
+		function renderNumber() {
+			return createVNode(InputNumber, mergeProps({
+				"style": { width: "100%" },
+				"value": props.formState[props.record.name],
+				"placeholder": props.record.placeholder || "请输入",
+				"onChange": (val) => handleChange(val ?? void 0)
+			}, props.record.field ?? {}), null);
+		}
+		function renderNumberRange() {
+			const name = props.record.name;
+			const value = props.formState[name];
+			const placeholder = Array.isArray(props.record.placeholder) ? props.record.placeholder : ["请输入", "请输入"];
+			return createVNode(SpaceCompact, {
+				"class": `${props.prefixCls}-search-input-compact`,
+				"style": { width: "100%" }
+			}, { default: () => [
+				createVNode(InputNumber, {
+					"value": value?.[0],
+					"placeholder": placeholder[0] || "请输入",
+					"onChange": (val) => handleChange(val, { key: 0 }),
+					"style": rangeInputStyle
+				}, null),
+				createVNode(Input, {
+					"disabled": true,
+					"value": "~",
+					"class": `${props.prefixCls}-number-range-separator`,
+					"style": {
+						width: 30,
+						flex: "0 0 30px",
+						pointerEvents: "none"
+					}
+				}, null),
+				createVNode(InputNumber, {
+					"value": value?.[1],
+					"placeholder": placeholder[1] || "请输入",
+					"onChange": (val) => handleChange(val, { key: 1 }),
+					"style": rangeInputStyle
+				}, null)
+			] });
+		}
+		function renderSelect() {
+			const isLoading = props.record.loading || requestLoading.value;
+			const options = props.record.request ? optionList.value : props.record.valueEnum || [];
+			const fields = props.record.field ?? {};
+			return createVNode(Select, mergeProps({
+				"style": { width: "100%" },
+				"value": isLoading ? void 0 : props.formState[props.record.name],
+				"optionFilterProp": "label",
+				"placeholder": props.record.placeholder || "请选择",
+				"showSearch": props.record.showSearch,
+				"allowClear": props.record.allowClear ?? true,
+				"loading": isLoading,
+				"options": options,
+				"onChange": (val) => handleChange(val ?? void 0)
+			}, fields), null);
+		}
+		function renderTreeSelect() {
+			const fields = props.record.field ?? {};
+			const isLoading = props.record.loading || requestLoading.value;
+			return createVNode(TreeSelect, mergeProps({
+				"style": { width: "100%" },
+				"value": props.formState[props.record.name],
+				"placeholder": props.record.placeholder || "请选择",
+				"allowClear": props.record.allowClear ?? true,
+				"treeData": isLoading ? [] : props.record.request ? optionList.value : props.record.valueEnum || [],
+				"loading": isLoading,
+				"onChange": (val) => handleChange(val ?? (fields.treeCheckable || fields.multiple ? [] : null))
+			}, fields), null);
+		}
+		function renderCascader() {
+			const fields = props.record.field ?? {};
+			const isLoading = props.record.loading || requestLoading.value;
+			return createVNode(Cascader, mergeProps({
+				"style": { width: "100%" },
+				"value": props.formState[props.record.name],
+				"placeholder": props.record.placeholder || "请选择",
+				"allowClear": props.record.allowClear ?? true,
+				"options": isLoading ? [] : props.record.request ? optionList.value : props.record.valueEnum || [],
+				"loading": isLoading,
+				"onChange": (val) => handleChange(val ?? void 0)
+			}, fields), null);
+		}
+		function renderDate() {
+			const format = resolveValueFormat(props.record.valueFormat, props.record.showTime);
+			return createVNode(DatePicker, mergeProps({
+				"style": { width: "100%" },
+				"value": props.formState[props.record.name] ? dayjs(props.formState[props.record.name]) : void 0,
+				"placeholder": props.record.placeholder || "请选择",
+				"allowClear": props.record.allowClear ?? true,
+				"format": format,
+				"showTime": props.record.showTime,
+				"onChange": (val) => handleChange(val ? formatStringValue(val, format) : null)
+			}, props.record.field ?? {}), null);
+		}
+		function renderDatePicker(picker, format, placeholder) {
+			const value = props.formState[props.record.name];
+			return createVNode(DatePicker, mergeProps({
+				"style": { width: "100%" },
+				"picker": picker,
+				"value": value ? dayjs(value, format) : void 0,
+				"placeholder": placeholder || "请选择",
+				"allowClear": props.record.allowClear ?? true,
+				"onChange": (val) => handleChange(val ? formatStringValue(val, format) : null)
+			}, props.record.field ?? {}), null);
+		}
+		function renderDateRange() {
+			const format = resolveValueFormat(props.record.valueFormat, props.record.showTime);
+			const value = props.formState[props.record.name];
+			const fields = props.record.field ?? {};
+			const placeholderValue = Array.isArray(props.record.placeholder) ? props.record.placeholder : ["开始日期", "结束日期"];
+			return createVNode(RangePicker, mergeProps({
+				"style": { width: "100%" },
+				"value": Array.isArray(value) && value.length === 2 ? formatDateRangeArray(value, format, "dayjs") : void 0,
+				"placeholder": placeholderValue,
+				"format": format,
+				"showTime": props.record.showTime,
+				"onChange": (val) => {
+					handleChange(val && Array.isArray(val) && val.length === 2 ? formatDateRangeArray(val, format, "string") : null);
+				}
+			}, fields), null);
+		}
+		function renderTime() {
+			const format = props.record.valueFormat || "HH:mm:ss";
+			return createVNode(TimePicker, mergeProps({
+				"style": { width: "100%" },
+				"value": props.formState[props.record.name] ? dayjs(props.formState[props.record.name], format) : void 0,
+				"placeholder": props.record.placeholder || "请选择",
+				"allowClear": props.record.allowClear ?? true,
+				"use12Hours": props.record.use12Hours,
+				"format": format,
+				"onChange": (val) => handleChange(val ? formatStringValue(val, format) : null)
+			}, props.record.field ?? {}), null);
+		}
+		return () => {
+			switch (props.record.valueType ?? "text") {
+				case "text": return renderText();
+				case "number": return renderNumber();
+				case "numberRange": return renderNumberRange();
+				case "select": return renderSelect();
+				case "treeSelect": return renderTreeSelect();
+				case "cascader": return renderCascader();
+				case "date": return renderDate();
+				case "dateWeek": return renderDatePicker("week", "YYYY-wo", props.record.placeholder || "请选择");
+				case "dateMonth": return renderDatePicker("month", "YYYY-MM", props.record.placeholder || "请选择");
+				case "dateQuarter": return renderDatePicker("quarter", "YYYY-QQ", props.record.placeholder || "请选择");
+				case "dateYear": return renderDatePicker("year", "YYYY", props.record.placeholder || "请选择");
+				case "dateRange": return renderDateRange();
+				case "time": return renderTime();
+				default: return renderText();
+			}
+		};
+	}
+});
+//#endregion
+export { FormItemContainer };

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

@@ -0,0 +1,82 @@
+import * as _$vue from "vue";
+import { CSSProperties, PropType } from "vue";
+import * as _$vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/components/SearchForm/FormItemWrapper.d.ts
+declare const FormItemWrapper: _$vue.DefineComponent<_$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;
+  };
+}>, () => _$vue_jsx_runtime0.JSX.Element, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$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;
+  labelWidth: string | number;
+  labelAlign: "left" | "center" | "right";
+  colon: boolean;
+  hashId: string;
+  formItemStyle: CSSProperties;
+  globalLabelGap: number;
+}, {}, {}, {}, string, _$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,130 @@
+import { FormConfig, ProSearchMap } from "../../interface.js";
+import * as _$vue from "vue";
+import { PropType } from "vue";
+import * as _$vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/components/SearchForm/SearchForm.d.ts
+declare const ProTableSearchForm: _$vue.DefineComponent<_$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;
+  };
+}>, () => _$vue_jsx_runtime0.JSX.Element, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$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<{}>, {
+  loading: any;
+  formColumns: ProSearchMap<"text", string>[];
+  formConfig: FormConfig;
+  formAutoRequest: boolean;
+  formActions: {
+    reset?: boolean;
+    resetReload?: boolean;
+    searchText?: string;
+    resetText?: string;
+  };
+  cardBordered: boolean;
+  proClasses: Record<string, string>;
+  proStyles: Record<string, any>;
+  onReset: (params: Record<string, any>) => void;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { ProTableSearchForm as default };