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

package/dist/components/ScrollBar/{Thumb/index.js → Thumb.js}

@@ -1,15 +1,29 @@
-import { useScrollBarContext } from "../context.js";
-import { BAR_MAP, renderThumbStyle } from "../util.js";
-import { thumbProps } from "./props.js";
+import { useInjectScrollBarContext } from "./context.js";
+import { BAR_MAP, renderThumbStyle } from "./util.js";
 import { computed, createVNode, defineComponent, onBeforeUnmount, ref } from "vue";
 import { unit } from "@gx-design-vue/pro-provider";
-import { isClient, useEventListener } from "@vueuse/core";
-
-//#region src/components/ScrollBar/Thumb/index.tsx
-const Thumb = /* @__PURE__ */ defineComponent({
+import { useEventListener } from "@vueuse/core";
+//#region src/components/ScrollBar/Thumb.tsx
+const thumbProps = {
+	vertical: Boolean,
+	size: String,
+	move: Number,
+	ratio: {
+		type: Number,
+		required: true
+	},
+	always: Boolean,
+	barStyle: {
+		type: Object,
+		default: () => ({})
+	}
+};
+var Thumb_default = /* @__PURE__ */ defineComponent({
+	name: "ScrollBarThumb",
+	inheritAttrs: false,
 	props: thumbProps,
 	setup(props) {
-		const { tableHeaderHeight, hashId, wrapElement, scrollbarElement, className } = useScrollBarContext();
+		const scrollbar = useInjectScrollBarContext();
 		const instance = ref();
 		const thumb = ref();
 		const thumbState = ref({});
@@ -18,57 +32,61 @@ const Thumb = /* @__PURE__ */ defineComponent({
 		let cursorLeave = false;
 		let baseScrollHeight = 0;
 		let baseScrollWidth = 0;
-		let originalOnSelectStart = isClient ? document.onselectstart : null;
 		const bar = computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
 		const thumbStyle = computed(() => renderThumbStyle({
 			size: props.size,
 			move: props.move,
 			bar: bar.value
 		}));
-		const offsetRatio = computed(() => instance.value[bar.value.offset] ** 2 / wrapElement.value[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
-		const clickThumbHandler = (e) => {
-			e.stopPropagation();
-			if (e.ctrlKey || [1, 2].includes(e.button)) return;
-			window.getSelection()?.removeAllRanges();
-			startDrag(e);
-			const el = e.currentTarget;
-			if (!el) return;
-			thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
-		};
-		const clickTrackHandler = (e) => {
-			if (!thumb.value || !instance.value || !wrapElement.value) return;
-			const thumbPositionPercentage = (Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) - thumb.value[bar.value.offset] / 2) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-			wrapElement.value[bar.value.scroll] = thumbPositionPercentage * wrapElement.value[bar.value.scrollSize] / 100;
-		};
-		function startDrag(e) {
-			if (!wrapElement.value) return;
-			e.stopImmediatePropagation();
-			cursorDown = true;
-			baseScrollHeight = wrapElement.value.scrollHeight;
-			baseScrollWidth = wrapElement.value.scrollWidth;
-			document.addEventListener("mousemove", mouseMoveDocumentHandler);
-			document.addEventListener("mouseup", mouseUpDocumentHandler);
-			originalOnSelectStart = document.onselectstart;
-			document.onselectstart = () => false;
+		const offsetRatio = computed(() => {
+			if (!instance.value || !thumb.value || !scrollbar?.wrapElement?.value) return 1;
+			return instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement.value[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset];
+		});
+		function restoreOnSelectStart(originalOnSelectStart) {
+			if (document.onselectstart !== originalOnSelectStart) document.onselectstart = originalOnSelectStart;
 		}
 		function mouseMoveDocumentHandler(e) {
-			if (!wrapElement.value) return;
-			if (!instance.value || !thumb.value) return;
-			if (cursorDown === false) return;
+			if (!scrollbar?.wrapElement?.value || !instance.value || !thumb.value || !cursorDown) return;
 			const prevPage = thumbState.value[bar.value.axis];
 			if (!prevPage) return;
 			const thumbPositionPercentage = ((instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1 - (thumb.value[bar.value.offset] - prevPage)) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-			if (bar.value.scroll === "scrollLeft") wrapElement.value[bar.value.scroll] = thumbPositionPercentage * baseScrollWidth / 100;
-			else wrapElement.value[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
+			if (bar.value.scroll === "scrollLeft") scrollbar.wrapElement.value[bar.value.scroll] = thumbPositionPercentage * baseScrollWidth / 100;
+			else scrollbar.wrapElement.value[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
 		}
+		let originalOnSelectStart = document.onselectstart;
 		function mouseUpDocumentHandler() {
 			cursorDown = false;
 			thumbState.value[bar.value.axis] = 0;
 			document.removeEventListener("mousemove", mouseMoveDocumentHandler);
 			document.removeEventListener("mouseup", mouseUpDocumentHandler);
-			restoreOnselectstart();
+			restoreOnSelectStart(originalOnSelectStart);
 			if (cursorLeave) visible.value = false;
 		}
+		function startDrag(e) {
+			if (!scrollbar?.wrapElement?.value) return;
+			e.stopImmediatePropagation();
+			cursorDown = true;
+			baseScrollHeight = scrollbar.wrapElement.value.scrollHeight;
+			baseScrollWidth = scrollbar.wrapElement.value.scrollWidth;
+			document.addEventListener("mousemove", mouseMoveDocumentHandler);
+			document.addEventListener("mouseup", mouseUpDocumentHandler);
+			originalOnSelectStart = document.onselectstart;
+			document.onselectstart = () => false;
+		}
+		function clickThumbHandler(e) {
+			e.stopPropagation();
+			if (e.ctrlKey || [1, 2].includes(e.button)) return;
+			window.getSelection()?.removeAllRanges();
+			startDrag(e);
+			const el = e.currentTarget;
+			if (!el) return;
+			thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+		}
+		function clickTrackHandler(e) {
+			if (!thumb.value || !instance.value || !scrollbar?.wrapElement?.value) return;
+			const thumbPositionPercentage = (Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) - thumb.value[bar.value.offset] / 2) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+			scrollbar.wrapElement.value[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement.value[bar.value.scrollSize] / 100;
+		}
 		const mouseMoveScrollbarHandler = () => {
 			cursorLeave = false;
 			visible.value = !!props.size;
@@ -77,19 +95,17 @@ const Thumb = /* @__PURE__ */ defineComponent({
 			cursorLeave = true;
 			visible.value = cursorDown;
 		};
+		useEventListener(scrollbar?.scrollbarElement, "mousemove", mouseMoveScrollbarHandler);
+		useEventListener(scrollbar?.scrollbarElement, "mouseleave", mouseLeaveScrollbarHandler);
 		onBeforeUnmount(() => {
-			restoreOnselectstart();
+			restoreOnSelectStart(originalOnSelectStart);
 			document.removeEventListener("mouseup", mouseUpDocumentHandler);
 		});
-		function restoreOnselectstart() {
-			if (document.onselectstart !== originalOnSelectStart) document.onselectstart = originalOnSelectStart;
-		}
-		useEventListener(scrollbarElement, "mousemove", mouseMoveScrollbarHandler);
-		useEventListener(scrollbarElement, "mouseleave", mouseLeaveScrollbarHandler);
 		return () => {
+			if (!scrollbar) return null;
 			const verticalStyle = bar.value.key === "vertical" ? {
-				height: `calc(100% - ${unit(tableHeaderHeight.value + 1)})`,
-				top: unit(tableHeaderHeight.value + 1)
+				height: `calc(100% - ${unit(scrollbar.tableHeaderHeight.value + 1)})`,
+				top: unit(scrollbar.tableHeaderHeight.value + 1)
 			} : {};
 			return createVNode("div", {
 				"ref": instance,
@@ -97,23 +113,16 @@ const Thumb = /* @__PURE__ */ defineComponent({
 					...props.barStyle,
 					...verticalStyle
 				},
-				"class": [
-					`${className}-bar`,
-					`is-${bar.value.key}`,
-					hashId.value
-				],
+				"class": `${scrollbar.className}-bar is-${bar.value.key}`,
 				"onMousedown": clickTrackHandler
 			}, [createVNode("div", {
 				"ref": thumb,
-				"class": `${className}-thumb ${hashId.value}`,
+				"class": `${scrollbar.className}-thumb`,
 				"style": thumbStyle.value,
 				"onMousedown": clickThumbHandler
 			}, null)]);
 		};
 	}
 });
-Thumb.inheritAttrs = false;
-var Thumb_default = Thumb;
-
 //#endregion
-export { Thumb_default as default };
+export { Thumb_default as default, thumbProps };

package/dist/components/ScrollBar/context.d.ts

@@ -1,14 +1,13 @@
 import { Ref } from "vue";
 
 //#region src/components/ScrollBar/context.d.ts
-interface ScrollbarContext {
+interface ScrollBarContext {
   className: string;
-  hashId: Ref<string>;
   tableHeaderHeight: Ref<number>;
   tableScrollYHeight: Ref<number>;
   scrollbarElement: Ref<HTMLElement | undefined>;
   wrapElement: Ref<HTMLElement | undefined>;
 }
-declare const useScrollBarContext: (injectDefaultValue?: ScrollbarContext) => ScrollbarContext, provideScrollBarContext: (value: ScrollbarContext) => void;
+declare const useProvideScrollBarContext: (args_0: ScrollBarContext) => ScrollBarContext, useInjectScrollBarContext: () => ScrollBarContext;
 //#endregion
-export { ScrollbarContext, provideScrollBarContext, useScrollBarContext };
+export { ScrollBarContext, useInjectScrollBarContext, useProvideScrollBarContext };

package/dist/components/ScrollBar/context.js

@@ -1,7 +1,5 @@
-import { useContext } from "@gx-design-vue/context";
-
+import { createInjectionState } from "@vueuse/core";
 //#region src/components/ScrollBar/context.ts
-const { useInjectContext: useScrollBarContext, provideContext: provideScrollBarContext } = useContext("scrollbar");
-
+const [useProvideScrollBarContext, useInjectScrollBarContext] = createInjectionState((context) => context);
 //#endregion
-export { provideScrollBarContext, useScrollBarContext };
+export { useInjectScrollBarContext, useProvideScrollBarContext };

package/dist/components/ScrollBar/util.d.ts

@@ -24,14 +24,15 @@ declare const BAR_MAP: {
     readonly direction: "left";
   };
 };
+type BarDirection = keyof typeof BAR_MAP;
 declare function renderThumbStyle({
   move,
   size,
   bar
-}: Pick<any, 'move' | 'size'> & {
-  bar: typeof BAR_MAP[keyof typeof BAR_MAP];
+}: {
+  move: number;
+  size: string;
+  bar: typeof BAR_MAP[BarDirection];
 }): CSSProperties;
-declare function isStringNumber(val: string): boolean;
-declare function addUnit(value?: string | number, defaultUnit?: string): string;
 //#endregion
-export { BAR_MAP, GAP, addUnit, isStringNumber, renderThumbStyle };
+export { BAR_MAP, BarDirection, GAP, renderThumbStyle };

package/dist/components/ScrollBar/util.js

@@ -1,5 +1,3 @@
-import { isNumber, isString } from "@gx-design-vue/pro-utils";
-
 //#region src/components/ScrollBar/util.ts
 const GAP = 4;
 const BAR_MAP = {
@@ -30,16 +28,5 @@ function renderThumbStyle({ move, size, bar }) {
 		transform: `translate${bar.axis}(${move}%)`
 	};
 }
-function isStringNumber(val) {
-	if (!isString(val)) return false;
-	return !Number.isNaN(Number(val));
-}
-function addUnit(value, defaultUnit = "px") {
-	if (!value) return "";
-	if (isNumber(value) || isStringNumber(value)) return `${value}${defaultUnit}`;
-	else if (isString(value)) return value;
-	console.warn("utils/dom/style", "value 必须为数字");
-}
-
 //#endregion
-export { BAR_MAP, GAP, addUnit, isStringNumber, renderThumbStyle };
+export { BAR_MAP, GAP, renderThumbStyle };

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

@@ -0,0 +1,53 @@
+import { PropType } from "vue";
+import { CustomRender, WithFalse } from "@gx-design-vue/pro-utils";
+
+//#region src/components/SearchForm/CollapseToggle.d.ts
+declare const CollapseToggle: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  collapsed: {
+    type: BooleanConstructor;
+    default: any;
+  };
+  collapseRender: {
+    type: PropType<WithFalse<(collapsed?: boolean) => CustomRender> | undefined>;
+    default: any;
+  };
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  hashId: {
+    type: StringConstructor;
+    default: string;
+  };
+  onToggle: {
+    type: PropType<(collapsed: boolean) => void>;
+    required: true;
+  };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  collapsed: {
+    type: BooleanConstructor;
+    default: any;
+  };
+  collapseRender: {
+    type: PropType<WithFalse<(collapsed?: boolean) => CustomRender> | undefined>;
+    default: any;
+  };
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  hashId: {
+    type: StringConstructor;
+    default: string;
+  };
+  onToggle: {
+    type: PropType<(collapsed: boolean) => void>;
+    required: true;
+  };
+}>> & Readonly<{}>, {
+  hashId: string;
+  collapsed: boolean;
+  collapseRender: WithFalse<(collapsed?: boolean) => CustomRender>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { CollapseToggle };

package/dist/components/SearchForm/CollapseToggle.js

@@ -0,0 +1,47 @@
+import { createVNode, defineComponent } from "vue";
+import { GIcon } from "@gx-design-vue/icon";
+//#region src/components/SearchForm/CollapseToggle.tsx
+const CollapseToggle = /* @__PURE__ */ defineComponent({
+	name: "ProTableCollapseToggle",
+	props: {
+		collapsed: {
+			type: Boolean,
+			default: void 0
+		},
+		collapseRender: {
+			type: [
+				Function,
+				Object,
+				Boolean
+			],
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		hashId: {
+			type: String,
+			default: ""
+		},
+		onToggle: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		return () => {
+			if (props.collapseRender === false) return null;
+			if (typeof props.collapseRender === "function") return createVNode("span", {
+				"class": [`${props.prefixCls}-search-control-text`, props.hashId],
+				"onClick": () => props.onToggle(!props.collapsed)
+			}, [props.collapseRender(props.collapsed)]);
+			return createVNode("span", {
+				"class": `${props.prefixCls}-search-control-text`,
+				"onClick": () => props.onToggle(!props.collapsed)
+			}, [props.collapsed ? "展开" : "收起", props.collapsed ? createVNode(GIcon, { "type": "DownOutlined" }, null) : createVNode(GIcon, { "type": "UpOutlined" }, null)]);
+		};
+	}
+});
+//#endregion
+export { CollapseToggle };

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

@@ -0,0 +1,73 @@
+import { ProSearchMap } from "../../interface.js";
+import { PropType } from "vue";
+
+//#region src/components/SearchForm/FormItemContainer.d.ts
+declare const FormItemContainer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  record: {
+    type: PropType<ProSearchMap>;
+    required: true;
+  };
+  formState: {
+    type: PropType<Record<string, any>>;
+    required: true;
+  };
+  autoRequest: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  loading: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  onChange: {
+    type: PropType<(value: any, record: ProSearchMap, options?: {
+      key?: number;
+    }) => void>;
+    required: true;
+  };
+  onSubmit: {
+    type: PropType<() => 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;
+  };
+  record: {
+    type: PropType<ProSearchMap>;
+    required: true;
+  };
+  formState: {
+    type: PropType<Record<string, any>>;
+    required: true;
+  };
+  autoRequest: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  loading: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  onChange: {
+    type: PropType<(value: any, record: ProSearchMap, options?: {
+      key?: number;
+    }) => void>;
+    required: true;
+  };
+  onSubmit: {
+    type: PropType<() => void>;
+    default: any;
+  };
+}>> & Readonly<{}>, {
+  onSubmit: () => void;
+  loading: boolean;
+  autoRequest: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { FormItemContainer };

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 };