yc-pro-components 0.0.24 → 0.0.25

package/lib/components/form/src/form-content.vue.d.ts

@@ -10,6 +10,7 @@ import { Ref, ComputedRef, DefineComponent, ComponentOptionsMixin, PublicProps,
 export interface PlusFormContentProps {
     modelValue?: FieldValues;
     hasLabel?: boolean;
+    layout?: 'grid' | 'flex';
     columns?: PlusColumn[];
     rowProps?: PlusRowProps;
     colProps?: PlusColProps;
@@ -35,6 +36,7 @@ export interface PlusFormContentEmits {
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PlusFormContentProps>, {
     modelValue: () => {};
     hasLabel: boolean;
+    layout: string;
     rowProps: () => {};
     colProps: () => {};
     columns: () => never[];
@@ -47,6 +49,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
 }, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PlusFormContentProps>, {
     modelValue: () => {};
     hasLabel: boolean;
+    layout: string;
     rowProps: () => {};
     colProps: () => {};
     columns: () => never[];
@@ -54,13 +57,14 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     collapseTransition: undefined;
     clearable: boolean;
 }>>> & {
-    "onUpdate:modelValue"?: ((values: FieldValues) => any) | undefined;
     onChange?: ((values: FieldValues, column: PlusColumn) => any) | undefined;
+    "onUpdate:modelValue"?: ((values: FieldValues) => any) | undefined;
 }, {
-    modelValue: FieldValues;
     collapseDuration: number;
     collapseTransition: boolean;
     columns: PlusColumn[];
+    layout: "grid" | "flex";
+    modelValue: FieldValues;
     hasLabel: boolean;
     rowProps: Partial< Mutable<RowProps> & {
         style?: CSSProperties | undefined;
@@ -94,10 +98,10 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
         value: string | number;
         row: RecordType;
     }) => OptionsRow<undefined>) | undefined;
-    tooltip?: string | ComputedRef<string> | Partial< Mutable<ElTooltipProps> & {
+    tooltip?: string | Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
-    } & RecordType> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
+    } & RecordType> | ComputedRef<string> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
     } & RecordType>> | undefined;
@@ -198,14 +202,14 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
         label?: string | undefined;
     }) => RenderTypes) | undefined;
 }) => any>> & Partial<Record<string, (_: {
-    column: Readonly<Omit< LooseRequired<PlusFormItemProps>, "index" | "modelValue" | "label" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "valueType" | "renderField" | "renderLabel" | "renderErrorMessage" | "optionsMap" | "autoDict">> & {
+    column: Readonly<Omit< LooseRequired<PlusFormItemProps>, "index" | "label" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "modelValue" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "valueType" | "renderField" | "renderLabel" | "renderErrorMessage" | "optionsMap" | "autoDict">> & {
         readonly label: string | ComputedRef<string>;
-        readonly modelValue: string | number | boolean | string[] | [string, string] | boolean[] | RecordType | Date | number[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
+        readonly modelValue: string | number | boolean | string[] | [string, string] | number[] | Date | RecordType | boolean[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
         readonly hasLabel: boolean | Ref<boolean> | ComputedRef<boolean>;
-        readonly tooltip: string | ComputedRef<string> | Partial< Mutable<ElTooltipProps> & {
+        readonly tooltip: string | Partial< Mutable<ElTooltipProps> & {
             style?: CSSProperties | undefined;
             class?: any;
-        } & RecordType> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
+        } & RecordType> | ComputedRef<string> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
             style?: CSSProperties | undefined;
             class?: any;
         } & RecordType>>;
@@ -272,12 +276,12 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     fieldInstance?: any;
     valueIsReady?: Ref<boolean> | undefined;
     prop: string;
-    modelValue: string | number | boolean | string[] | [string, string] | boolean[] | RecordType | Date | number[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
+    modelValue: string | number | boolean | string[] | [string, string] | number[] | Date | RecordType | boolean[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
     hasLabel: boolean | Ref<boolean> | ComputedRef<boolean>;
-    tooltip: string | ComputedRef<string> | Partial< Mutable<ElTooltipProps> & {
+    tooltip: string | Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
-    } & RecordType> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
+    } & RecordType> | ComputedRef<string> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
     } & RecordType>>;
@@ -306,14 +310,14 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     clearable: boolean;
     index: number;
 }) => any>> & Partial<Record<string, (_: {
-    column: Readonly<Omit< LooseRequired<PlusFormItemProps>, "index" | "modelValue" | "label" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "valueType" | "renderField" | "renderLabel" | "renderErrorMessage" | "optionsMap" | "autoDict">> & {
+    column: Readonly<Omit< LooseRequired<PlusFormItemProps>, "index" | "label" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "modelValue" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "valueType" | "renderField" | "renderLabel" | "renderErrorMessage" | "optionsMap" | "autoDict">> & {
         readonly label: string | ComputedRef<string>;
-        readonly modelValue: string | number | boolean | string[] | [string, string] | boolean[] | RecordType | Date | number[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
+        readonly modelValue: string | number | boolean | string[] | [string, string] | number[] | Date | RecordType | boolean[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
         readonly hasLabel: boolean | Ref<boolean> | ComputedRef<boolean>;
-        readonly tooltip: string | ComputedRef<string> | Partial< Mutable<ElTooltipProps> & {
+        readonly tooltip: string | Partial< Mutable<ElTooltipProps> & {
             style?: CSSProperties | undefined;
             class?: any;
-        } & RecordType> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
+        } & RecordType> | ComputedRef<string> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
             style?: CSSProperties | undefined;
             class?: any;
         } & RecordType>>;
@@ -380,12 +384,12 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     fieldInstance?: any;
     valueIsReady?: Ref<boolean> | undefined;
     prop: string;
-    modelValue: string | number | boolean | string[] | [string, string] | boolean[] | RecordType | Date | number[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
+    modelValue: string | number | boolean | string[] | [string, string] | number[] | Date | RecordType | boolean[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
     hasLabel: boolean | Ref<boolean> | ComputedRef<boolean>;
-    tooltip: string | ComputedRef<string> | Partial< Mutable<ElTooltipProps> & {
+    tooltip: string | Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
-    } & RecordType> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
+    } & RecordType> | ComputedRef<string> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
     } & RecordType>>;
@@ -436,10 +440,10 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
         value: string | number;
         row: RecordType;
     }) => OptionsRow<undefined>) | undefined;
-    tooltip?: string | ComputedRef<string> | Partial< Mutable<ElTooltipProps> & {
+    tooltip?: string | Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
-    } & RecordType> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
+    } & RecordType> | ComputedRef<string> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
     } & RecordType>> | undefined;

package/lib/components/form/src/form-content.vue2.js

@@ -25,6 +25,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: {
     modelValue: { default: () => ({}) },
     hasLabel: { type: Boolean, default: true },
+    layout: { default: "grid" },
     columns: { default: () => [] },
     rowProps: { default: () => ({}) },
     colProps: { default: () => ({}) },
@@ -37,6 +38,19 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emit = __emit;
     const values = vue.ref({});
+    const isNativeLayout = vue.computed(() => props.layout === "flex" || props.layout === "grid");
+    const isFlexLayout = vue.computed(() => props.layout === "flex");
+    const isGridLayout = vue.computed(() => props.layout === "grid");
+    const layoutRowClass = vue.computed(() => ({
+      "plus-form__row--flex": isFlexLayout.value,
+      "plus-form__row--grid": isGridLayout.value
+    }));
+    const layoutItemClass = vue.computed(() => ({
+      "plus-form__item-wrapper--flex": isFlexLayout.value,
+      "plus-form__item-wrapper--grid": isGridLayout.value
+    }));
+    const rowComponent = vue.computed(() => isNativeLayout.value ? "div" : elementPlus.ElRow);
+    const colComponent = vue.computed(() => isNativeLayout.value ? "div" : elementPlus.ElCol);
     const getHasLabel = (hasLabel) => {
       const has = vue.unref(hasLabel);
       if (is.isBoolean(has)) {
@@ -59,104 +73,100 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       emit("update:modelValue", values.value);
       emit("change", values.value, column);
     };
+    const getColBinding = (item) => {
+      if (isNativeLayout.value) return void 0;
+      return vue.unref(item.colProps) || props.colProps;
+    };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(
-        vue.unref(elementPlus.ElRow),
-        vue.mergeProps(_ctx.rowProps, { class: "plus-form__row" }),
-        {
-          default: vue.withCtx(() => [
-            vue.createVNode(collapseTransition.default, {
-              "collapse-duration": _ctx.collapseDuration,
-              "collapse-transition": _ctx.collapseTransition
-            }, {
-              default: vue.withCtx(() => [
-                (vue.openBlock(true), vue.createElementBlock(
-                  vue.Fragment,
-                  null,
-                  vue.renderList(_ctx.columns, (item) => {
-                    return vue.openBlock(), vue.createBlock(
-                      vue.unref(elementPlus.ElCol),
-                      vue.mergeProps({
-                        key: item.prop
-                      }, vue.unref(item.colProps) || _ctx.colProps),
-                      {
-                        default: vue.withCtx(() => [
-                          vue.createCommentVNode(" el-form-item\u4E0A\u4E00\u884C\u7684\u5185\u5BB9 "),
-                          item.renderPrevious || _ctx.$slots[vue.unref(index.getPreviousSlotName)(item.prop)] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-                            vue.unref(is.isFunction)(item.renderPrevious) ? (vue.openBlock(), vue.createBlock(
-                              vue.resolveDynamicComponent(item.renderPrevious),
-                              vue.normalizeProps(vue.mergeProps({ key: 0 }, item)),
-                              null,
-                              16
-                              /* FULL_PROPS */
-                            )) : _ctx.$slots[vue.unref(index.getPreviousSlotName)(item.prop)] ? vue.renderSlot(_ctx.$slots, vue.unref(index.getPreviousSlotName)(item.prop), vue.normalizeProps(vue.mergeProps({ key: 1 }, item))) : vue.createCommentVNode("v-if", true)
-                          ])) : vue.createCommentVNode("v-if", true),
-                          vue.createVNode(vue.unref(index$1.PlusFormItem), vue.mergeProps({
-                            "model-value": getModelValue(item.prop)
-                          }, item, {
-                            clearable: _ctx.clearable,
-                            "has-label": getHasLabel(item.hasLabel),
-                            onChange: (value) => handleChange(value, item)
-                          }), vue.createSlots({
-                            _: 2
-                            /* DYNAMIC */
-                          }, [
-                            _ctx.$slots[vue.unref(index.getLabelSlotName)(item.prop)] ? {
-                              name: vue.unref(index.getLabelSlotName)(item.prop),
-                              fn: vue.withCtx((data) => [
-                                vue.renderSlot(_ctx.$slots, vue.unref(index.getLabelSlotName)(item.prop), vue.normalizeProps(vue.guardReactiveProps(data)))
-                              ]),
-                              key: "0"
-                            } : void 0,
-                            _ctx.$slots[vue.unref(index.getFieldSlotName)(item.prop)] ? {
-                              name: vue.unref(index.getFieldSlotName)(item.prop),
-                              fn: vue.withCtx((data) => [
-                                vue.renderSlot(_ctx.$slots, vue.unref(index.getFieldSlotName)(item.prop), vue.normalizeProps(vue.guardReactiveProps(data)))
-                              ]),
-                              key: "1"
-                            } : void 0,
-                            _ctx.$slots["tooltip-icon"] ? {
-                              name: "tooltip-icon",
-                              fn: vue.withCtx(() => [
-                                vue.renderSlot(_ctx.$slots, "tooltip-icon")
-                              ]),
-                              key: "2"
-                            } : void 0
-                          ]), 1040, ["model-value", "clearable", "has-label", "onChange"]),
-                          vue.createCommentVNode(" el-form-item \u4E0B\u4E00\u884C\u989D\u5916\u7684\u5185\u5BB9 "),
-                          item.renderExtra || _ctx.$slots[vue.unref(index.getExtraSlotName)(item.prop)] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-                            item.renderExtra && vue.unref(is.isFunction)(item.renderExtra) ? (vue.openBlock(), vue.createBlock(
-                              vue.resolveDynamicComponent(item.renderExtra),
-                              vue.normalizeProps(vue.mergeProps({ key: 0 }, item)),
-                              null,
-                              16
-                              /* FULL_PROPS */
-                            )) : _ctx.$slots[vue.unref(index.getExtraSlotName)(item.prop)] ? vue.renderSlot(_ctx.$slots, vue.unref(index.getExtraSlotName)(item.prop), vue.normalizeProps(vue.mergeProps({ key: 1 }, item))) : vue.createCommentVNode("v-if", true)
-                          ])) : vue.createCommentVNode("v-if", true)
-                        ]),
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(rowComponent.value), vue.mergeProps(isNativeLayout.value ? void 0 : _ctx.rowProps, {
+        class: ["plus-form__row", layoutRowClass.value]
+      }), {
+        default: vue.withCtx(() => [
+          vue.createVNode(collapseTransition.default, {
+            "collapse-duration": _ctx.collapseDuration,
+            "collapse-transition": _ctx.collapseTransition
+          }, {
+            default: vue.withCtx(() => [
+              (vue.openBlock(true), vue.createElementBlock(
+                vue.Fragment,
+                null,
+                vue.renderList(_ctx.columns, (item) => {
+                  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(colComponent.value), vue.mergeProps({
+                    key: item.prop
+                  }, getColBinding(item), {
+                    class: ["plus-form__item-wrapper", layoutItemClass.value]
+                  }), {
+                    default: vue.withCtx(() => [
+                      vue.createCommentVNode(" el-form-item\u4E0A\u4E00\u884C\u7684\u5185\u5BB9 "),
+                      item.renderPrevious || _ctx.$slots[vue.unref(index.getPreviousSlotName)(item.prop)] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+                        vue.unref(is.isFunction)(item.renderPrevious) ? (vue.openBlock(), vue.createBlock(
+                          vue.resolveDynamicComponent(item.renderPrevious),
+                          vue.normalizeProps(vue.mergeProps({ key: 0 }, item)),
+                          null,
+                          16
+                          /* FULL_PROPS */
+                        )) : _ctx.$slots[vue.unref(index.getPreviousSlotName)(item.prop)] ? vue.renderSlot(_ctx.$slots, vue.unref(index.getPreviousSlotName)(item.prop), vue.normalizeProps(vue.mergeProps({ key: 1 }, item))) : vue.createCommentVNode("v-if", true)
+                      ])) : vue.createCommentVNode("v-if", true),
+                      vue.createVNode(vue.unref(index$1.PlusFormItem), vue.mergeProps({
+                        "model-value": getModelValue(item.prop)
+                      }, item, {
+                        clearable: _ctx.clearable,
+                        "has-label": getHasLabel(item.hasLabel),
+                        onChange: (value) => handleChange(value, item)
+                      }), vue.createSlots({
                         _: 2
                         /* DYNAMIC */
-                      },
-                      1040
-                      /* FULL_PROPS, DYNAMIC_SLOTS */
-                    );
-                  }),
-                  128
-                  /* KEYED_FRAGMENT */
-                ))
-              ]),
-              _: 3
-              /* FORWARDED */
-            }, 8, ["collapse-duration", "collapse-transition"]),
-            vue.createCommentVNode(" \u641C\u7D22\u7684footer\u63D2\u69FD  "),
-            vue.renderSlot(_ctx.$slots, "search-footer")
-          ]),
-          _: 3
-          /* FORWARDED */
-        },
-        16
-        /* FULL_PROPS */
-      );
+                      }, [
+                        _ctx.$slots[vue.unref(index.getLabelSlotName)(item.prop)] ? {
+                          name: vue.unref(index.getLabelSlotName)(item.prop),
+                          fn: vue.withCtx((data) => [
+                            vue.renderSlot(_ctx.$slots, vue.unref(index.getLabelSlotName)(item.prop), vue.normalizeProps(vue.guardReactiveProps(data)))
+                          ]),
+                          key: "0"
+                        } : void 0,
+                        _ctx.$slots[vue.unref(index.getFieldSlotName)(item.prop)] ? {
+                          name: vue.unref(index.getFieldSlotName)(item.prop),
+                          fn: vue.withCtx((data) => [
+                            vue.renderSlot(_ctx.$slots, vue.unref(index.getFieldSlotName)(item.prop), vue.normalizeProps(vue.guardReactiveProps(data)))
+                          ]),
+                          key: "1"
+                        } : void 0,
+                        _ctx.$slots["tooltip-icon"] ? {
+                          name: "tooltip-icon",
+                          fn: vue.withCtx(() => [
+                            vue.renderSlot(_ctx.$slots, "tooltip-icon")
+                          ]),
+                          key: "2"
+                        } : void 0
+                      ]), 1040, ["model-value", "clearable", "has-label", "onChange"]),
+                      vue.createCommentVNode(" el-form-item \u4E0B\u4E00\u884C\u989D\u5916\u7684\u5185\u5BB9 "),
+                      item.renderExtra || _ctx.$slots[vue.unref(index.getExtraSlotName)(item.prop)] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                        item.renderExtra && vue.unref(is.isFunction)(item.renderExtra) ? (vue.openBlock(), vue.createBlock(
+                          vue.resolveDynamicComponent(item.renderExtra),
+                          vue.normalizeProps(vue.mergeProps({ key: 0 }, item)),
+                          null,
+                          16
+                          /* FULL_PROPS */
+                        )) : _ctx.$slots[vue.unref(index.getExtraSlotName)(item.prop)] ? vue.renderSlot(_ctx.$slots, vue.unref(index.getExtraSlotName)(item.prop), vue.normalizeProps(vue.mergeProps({ key: 1 }, item))) : vue.createCommentVNode("v-if", true)
+                      ])) : vue.createCommentVNode("v-if", true)
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1040, ["class"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["collapse-duration", "collapse-transition"]),
+          vue.createCommentVNode(" \u641C\u7D22\u7684footer\u63D2\u69FD  "),
+          vue.renderSlot(_ctx.$slots, "search-footer")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
     };
   }
 });

package/lib/components/form/src/index.vue.d.ts

@@ -12,6 +12,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     defaultValues: () => {};
     labelWidth: string;
     labelPosition: string;
+    layout: string;
     rowProps: () => {};
     colProps: () => {};
     labelSuffix: string;
@@ -328,6 +329,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     defaultValues: () => {};
     labelWidth: string;
     labelPosition: string;
+    layout: string;
     rowProps: () => {};
     colProps: () => {};
     labelSuffix: string;
@@ -348,18 +350,19 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     collapseTransition: undefined;
     clearable: boolean;
 }>>> & {
-    "onUpdate:modelValue"?: ((values: FieldValues) => any) | undefined;
     onChange?: ((values: FieldValues, column: PlusColumn) => any) | undefined;
     onReset?: ((values: FieldValues) => any) | undefined;
     onSubmit?: ((values: FieldValues) => any) | undefined;
+    "onUpdate:modelValue"?: ((values: FieldValues) => any) | undefined;
     onValidate?: ((...args: any[]) => any) | undefined;
     onSubmitError?: ((errors: unknown) => any) | undefined;
 }, {
-    modelValue: FieldValues;
     collapseDuration: number;
     collapseTransition: boolean;
     columns: PlusColumn[];
     group: false | PlusFormGroupRow[];
+    layout: "grid" | "flex";
+    modelValue: FieldValues;
     rules: Partial<Record<string, Arrayable<FormItemRule>>>;
     labelPosition: "top" | "right" | "left";
     labelWidth: string | number;
@@ -380,7 +383,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     submitText: string;
     resetText: string;
     submitLoading: boolean;
-    footerAlign: "center" | "right" | "left";
+    footerAlign: "right" | "left" | "center";
     cardProps: Partial< Mutable<CardProps> & {
         style?: CSSProperties | undefined;
         class?: any;
@@ -399,14 +402,14 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     hideInGroup?: boolean | ComputedRef<boolean> | undefined;
     columns?: PlusColumn[] | undefined;
 }) => any>> & Partial<Record<NonNullable<string | number>, (_: {
-    column: Readonly<Omit< LooseRequired<PlusFormItemProps>, "index" | "modelValue" | "label" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "valueType" | "renderField" | "renderLabel" | "renderErrorMessage" | "optionsMap" | "autoDict">> & {
+    column: Readonly<Omit< LooseRequired<PlusFormItemProps>, "index" | "label" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "modelValue" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "valueType" | "renderField" | "renderLabel" | "renderErrorMessage" | "optionsMap" | "autoDict">> & {
         readonly label: string | ComputedRef<string>;
-        readonly modelValue: string | number | boolean | string[] | [string, string] | boolean[] | RecordType | Date | number[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
+        readonly modelValue: string | number | boolean | string[] | [string, string] | number[] | Date | RecordType | boolean[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
         readonly hasLabel: boolean | Ref<boolean> | ComputedRef<boolean>;
-        readonly tooltip: string | ComputedRef<string> | Partial< Mutable<ElTooltipProps> & {
+        readonly tooltip: string | Partial< Mutable<ElTooltipProps> & {
             style?: CSSProperties | undefined;
             class?: any;
-        } & RecordType> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
+        } & RecordType> | ComputedRef<string> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
             style?: CSSProperties | undefined;
             class?: any;
         } & RecordType>>;
@@ -473,12 +476,12 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     fieldInstance?: any;
     valueIsReady?: Ref<boolean> | undefined;
     prop: string;
-    modelValue: string | number | boolean | string[] | [string, string] | boolean[] | RecordType | Date | number[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
+    modelValue: string | number | boolean | string[] | [string, string] | number[] | Date | RecordType | boolean[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
     hasLabel: boolean | Ref<boolean> | ComputedRef<boolean>;
-    tooltip: string | ComputedRef<string> | Partial< Mutable<ElTooltipProps> & {
+    tooltip: string | Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
-    } & RecordType> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
+    } & RecordType> | ComputedRef<string> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
     } & RecordType>>;
@@ -507,14 +510,14 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     clearable: boolean;
     index: number;
 }) => any>> & Partial<Record<NonNullable<string | number>, (_: {
-    column: Readonly<Omit< LooseRequired<PlusFormItemProps>, "index" | "modelValue" | "label" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "valueType" | "renderField" | "renderLabel" | "renderErrorMessage" | "optionsMap" | "autoDict">> & {
+    column: Readonly<Omit< LooseRequired<PlusFormItemProps>, "index" | "label" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "modelValue" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "valueType" | "renderField" | "renderLabel" | "renderErrorMessage" | "optionsMap" | "autoDict">> & {
         readonly label: string | ComputedRef<string>;
-        readonly modelValue: string | number | boolean | string[] | [string, string] | boolean[] | RecordType | Date | number[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
+        readonly modelValue: string | number | boolean | string[] | [string, string] | number[] | Date | RecordType | boolean[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
         readonly hasLabel: boolean | Ref<boolean> | ComputedRef<boolean>;
-        readonly tooltip: string | ComputedRef<string> | Partial< Mutable<ElTooltipProps> & {
+        readonly tooltip: string | Partial< Mutable<ElTooltipProps> & {
             style?: CSSProperties | undefined;
             class?: any;
-        } & RecordType> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
+        } & RecordType> | ComputedRef<string> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
             style?: CSSProperties | undefined;
             class?: any;
         } & RecordType>>;
@@ -581,12 +584,12 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     fieldInstance?: any;
     valueIsReady?: Ref<boolean> | undefined;
     prop: string;
-    modelValue: string | number | boolean | string[] | [string, string] | boolean[] | RecordType | Date | number[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
+    modelValue: string | number | boolean | string[] | [string, string] | number[] | Date | RecordType | boolean[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
     hasLabel: boolean | Ref<boolean> | ComputedRef<boolean>;
-    tooltip: string | ComputedRef<string> | Partial< Mutable<ElTooltipProps> & {
+    tooltip: string | Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
-    } & RecordType> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
+    } & RecordType> | ComputedRef<string> | ComputedRef<Partial< Mutable<ElTooltipProps> & {
         style?: CSSProperties | undefined;
         class?: any;
     } & RecordType>>;

package/lib/components/form/src/index.vue2.js

@@ -24,6 +24,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     columns: { default: () => [] },
     labelWidth: { default: "80px" },
     labelPosition: { default: "left" },
+    layout: { default: "grid" },
     rowProps: { default: () => ({}) },
     colProps: { default: () => ({}) },
     labelSuffix: { default: ":" },
@@ -205,6 +206,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => values.value = $event),
                         "row-props": _ctx.rowProps,
                         "col-props": _ctx.colProps,
+                        layout: _ctx.layout,
                         columns: filterHide(groupItem.columns),
                         "has-label": _ctx.hasLabel,
                         "collapse-transition": _ctx.collapseTransition,
@@ -223,7 +225,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                             ])
                           };
                         })
-                      ]), 1032, ["modelValue", "row-props", "col-props", "columns", "has-label", "collapse-transition", "collapse-duration", "clearable"]))
+                      ]), 1032, ["modelValue", "row-props", "col-props", "layout", "columns", "has-label", "collapse-transition", "collapse-duration", "clearable"]))
                     ]),
                     _: 2
                     /* DYNAMIC */
@@ -244,6 +246,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => values.value = $event),
                   "row-props": _ctx.rowProps,
                   "col-props": _ctx.colProps,
+                  layout: _ctx.layout,
                   columns: subColumns.value,
                   "has-label": _ctx.hasLabel,
                   "collapse-transition": _ctx.collapseTransition,
@@ -262,7 +265,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       ])
                     };
                   })
-                ]), 1032, ["modelValue", "row-props", "col-props", "columns", "has-label", "collapse-transition", "collapse-duration", "clearable"])
+                ]), 1032, ["modelValue", "row-props", "col-props", "layout", "columns", "has-label", "collapse-transition", "collapse-duration", "clearable"])
               ],
               64
               /* STABLE_FRAGMENT */

package/lib/components/form/src/type.d.ts

@@ -103,6 +103,10 @@ export type PlusFormSelfProps = {
     columns?: PlusColumn[];
     labelWidth?: ElementPlusFormProps['labelWidth'];
     labelPosition?: ElementPlusFormProps['labelPosition'];
+    /**
+     * @desc 控制表单项排列方式，默认为栅格布局
+     */
+    layout?: 'grid' | 'flex';
     /**
      * @version v0.1.27 类型修改为 PlusRowProps
      */