yc-pro-components 0.0.24 → 0.0.26

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

@@ -3,13 +3,14 @@ import { LooseRequired } from '@vue/shared';
 import { TimeSelectProps } from 'element-plus/es/components/time-select/src/time-select';
 import { EpPropMergeType } from 'element-plus/es/utils';
 import { PlusFormProps, PlusRadioProps, PlusDatePickerProps, PlusInputTagProps } from 'packages/yc-components';
-import { RowProps, ColProps, ElTooltipProps, TableColumnCtx, FormItemProps, ProgressFn, CascaderNode, InputAutoSize, AutocompleteProps, CheckboxGroupProps, ColorPickerProps, DatePickerProps, InputProps, InputNumberProps, RadioGroupProps, RateProps, ISelectProps, SliderProps, SwitchProps, TimePickerDefaultProps, TextProps, ImageProps, LinkProps, TagProps, ProgressProps } from 'element-plus';
+import { ColProps, RowProps, ElTooltipProps, TableColumnCtx, FormItemProps, ProgressFn, CascaderNode, InputAutoSize, AutocompleteProps, CheckboxGroupProps, ColorPickerProps, DatePickerProps, InputProps, InputNumberProps, RadioGroupProps, RateProps, ISelectProps, SliderProps, SwitchProps, TimePickerDefaultProps, TextProps, ImageProps, LinkProps, TagProps, ProgressProps } from 'element-plus';
 import { PlusColumn, FieldValues, FieldValueType, PlusRowProps, PlusColProps, Mutable, RecordType, TableValueType, FormItemValueType, OptionsType, OptionsRow, RenderTypes, PropsItemType, OmitTypes, CascaderProps } from 'yc-pro-components/es/types';
 import { Ref, ComputedRef, DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, CSSProperties, PropType } from 'vue';
 
 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[];
@@ -57,20 +60,21 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     "onUpdate:modelValue"?: ((values: FieldValues) => any) | undefined;
     onChange?: ((values: FieldValues, column: PlusColumn) => any) | undefined;
 }, {
-    modelValue: FieldValues;
-    collapseDuration: number;
-    collapseTransition: boolean;
     columns: PlusColumn[];
+    layout: "grid" | "flex";
+    modelValue: FieldValues;
     hasLabel: boolean;
-    rowProps: Partial< Mutable<RowProps> & {
+    clearable: boolean;
+    colProps: Partial< Mutable<ColProps> & {
         style?: CSSProperties | undefined;
         class?: any;
     } & RecordType>;
-    colProps: Partial< Mutable<ColProps> & {
+    collapseDuration: number;
+    collapseTransition: boolean;
+    rowProps: Partial< Mutable<RowProps> & {
         style?: CSSProperties | undefined;
         class?: any;
     } & RecordType>;
-    clearable: boolean;
 }, {}>, Partial<Record<string, (_: {
     [x: string]: any;
     label?: string | ComputedRef<string> | 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;
@@ -166,7 +170,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
         };
         rows: number;
         autocomplete: string;
-        type: "" | "number" | "default" | "search" | "button" | "textarea" | "time" | "circle" | "image" | "line" | "text" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "color" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
+        type: "" | "number" | "default" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "textarea" | "text" | "circle" | "color" | "button" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "search" | "time" | "image" | "line" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
         loading: EpPropMergeType<BooleanConstructor, unknown, unknown> | EpPropMergeType<StringConstructor, "lazy" | "eager", unknown> | undefined;
         step: string | number;
         format: string | ProgressFn | 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>, "label" | "index" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "modelValue" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "renderField" | "valueType" | "optionsMap" | "autoDict" | "renderLabel" | "renderErrorMessage">> & {
         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 | RecordType | Date | string[] | boolean[] | number[] | Date[] | [Date, Date] | [number, number] | [string, string] | 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>>;
@@ -227,7 +231,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
             };
             rows: number;
             autocomplete: string;
-            type: "" | "number" | "default" | "search" | "button" | "textarea" | "time" | "circle" | "image" | "line" | "text" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "color" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
+            type: "" | "number" | "default" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "textarea" | "text" | "circle" | "color" | "button" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "search" | "time" | "image" | "line" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
             loading: EpPropMergeType<BooleanConstructor, unknown, unknown> | EpPropMergeType<StringConstructor, "lazy" | "eager", unknown> | undefined;
             step: string | number;
             format: string | ProgressFn | undefined;
@@ -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 | RecordType | Date | string[] | boolean[] | number[] | Date[] | [Date, Date] | [number, number] | [string, string] | 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>, "label" | "index" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "modelValue" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "renderField" | "valueType" | "optionsMap" | "autoDict" | "renderLabel" | "renderErrorMessage">> & {
         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 | RecordType | Date | string[] | boolean[] | number[] | Date[] | [Date, Date] | [number, number] | [string, string] | 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>>;
@@ -335,7 +339,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
             };
             rows: number;
             autocomplete: string;
-            type: "" | "number" | "default" | "search" | "button" | "textarea" | "time" | "circle" | "image" | "line" | "text" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "color" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
+            type: "" | "number" | "default" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "textarea" | "text" | "circle" | "color" | "button" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "search" | "time" | "image" | "line" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
             loading: EpPropMergeType<BooleanConstructor, unknown, unknown> | EpPropMergeType<StringConstructor, "lazy" | "eager", unknown> | undefined;
             step: string | number;
             format: string | ProgressFn | undefined;
@@ -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 | RecordType | Date | string[] | boolean[] | number[] | Date[] | [Date, Date] | [number, number] | [string, string] | 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;
@@ -508,7 +512,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
         };
         rows: number;
         autocomplete: string;
-        type: "" | "number" | "default" | "search" | "button" | "textarea" | "time" | "circle" | "image" | "line" | "text" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "color" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
+        type: "" | "number" | "default" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "textarea" | "text" | "circle" | "color" | "button" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "search" | "time" | "image" | "line" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
         loading: EpPropMergeType<BooleanConstructor, unknown, unknown> | EpPropMergeType<StringConstructor, "lazy" | "eager", unknown> | undefined;
         step: string | number;
         format: string | ProgressFn | undefined;

package/es/components/form/src/form-content.vue2.mjs

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

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

@@ -1,7 +1,7 @@
 import { TimeSelectProps } from 'element-plus/es/components/time-select/src/time-select';
 import { PlusFormItemProps, PlusRadioProps, PlusDatePickerProps, PlusInputTagProps } from 'packages/yc-components';
 import { LooseRequired } from '@vue/shared';
-import { FormItemRule, FormItemProp, FormItemContext, FormValidateCallback, FormValidationResult, RowProps, ColProps, CardProps, ElTooltipProps, FormItemProps, ProgressFn, CascaderNode, InputAutoSize, AutocompleteProps, CheckboxGroupProps, ColorPickerProps, DatePickerProps, InputProps, InputNumberProps, RadioGroupProps, RateProps, ISelectProps, SliderProps, SwitchProps, TimePickerDefaultProps, TextProps, ImageProps, LinkProps, TagProps, ProgressProps } from 'element-plus';
+import { FormItemRule, FormItemProp, FormItemContext, FormValidateCallback, FormValidationResult, ColProps, RowProps, CardProps, ElTooltipProps, FormItemProps, ProgressFn, CascaderNode, InputAutoSize, AutocompleteProps, CheckboxGroupProps, ColorPickerProps, DatePickerProps, InputProps, InputNumberProps, RadioGroupProps, RateProps, ISelectProps, SliderProps, SwitchProps, TimePickerDefaultProps, TextProps, ImageProps, LinkProps, TagProps, ProgressProps } from 'element-plus';
 import { Arrayable, EpPropFinalized, EpPropMergeType } from 'element-plus/es/utils';
 import { DefineComponent, Ref, CreateComponentPublicInstance, ExtractPropTypes, PropType, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, CSSProperties, Component } from 'vue';
 import { PlusFormSelfProps, PlusFormGroupRow } from './type';
@@ -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;
@@ -355,38 +357,39 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     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;
     labelSuffix: string;
     hasLabel: boolean;
-    defaultValues: FieldValues;
-    rowProps: Partial< Mutable<RowProps> & {
+    clearable: boolean;
+    colProps: Partial< Mutable<ColProps> & {
         style?: CSSProperties | undefined;
         class?: any;
     } & RecordType>;
-    colProps: Partial< Mutable<ColProps> & {
+    collapseDuration: number;
+    collapseTransition: boolean;
+    rowProps: Partial< Mutable<RowProps> & {
         style?: CSSProperties | undefined;
         class?: any;
     } & RecordType>;
+    defaultValues: FieldValues;
     hasErrorTip: boolean;
     hasFooter: boolean;
     hasReset: boolean;
     submitText: string;
     resetText: string;
     submitLoading: boolean;
-    footerAlign: "center" | "right" | "left";
+    footerAlign: "right" | "left" | "center";
     cardProps: Partial< Mutable<CardProps> & {
         style?: CSSProperties | undefined;
         class?: any;
     } & RecordType>;
     prevent: boolean;
-    clearable: boolean;
 }, {}>, Partial<Record<string, (_: {
     index: number;
     title: string | ComputedRef<string>;
@@ -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>, "label" | "index" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "modelValue" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "renderField" | "valueType" | "optionsMap" | "autoDict" | "renderLabel" | "renderErrorMessage">> & {
         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 | RecordType | Date | string[] | boolean[] | number[] | Date[] | [Date, Date] | [number, number] | [string, string] | 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>>;
@@ -428,7 +431,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
             };
             rows: number;
             autocomplete: string;
-            type: "" | "number" | "default" | "search" | "button" | "textarea" | "time" | "circle" | "image" | "line" | "text" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "color" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
+            type: "" | "number" | "default" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "textarea" | "text" | "circle" | "color" | "button" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "search" | "time" | "image" | "line" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
             loading: EpPropMergeType<BooleanConstructor, unknown, unknown> | EpPropMergeType<StringConstructor, "lazy" | "eager", unknown> | undefined;
             step: string | number;
             format: string | ProgressFn | undefined;
@@ -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 | RecordType | Date | string[] | boolean[] | number[] | Date[] | [Date, Date] | [number, number] | [string, string] | 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>, "label" | "index" | "tooltip" | "formItemProps" | "fieldProps" | "options" | "modelValue" | "fieldSlots" | "fieldChildrenSlot" | "hasLabel" | "clearable" | "renderField" | "valueType" | "optionsMap" | "autoDict" | "renderLabel" | "renderErrorMessage">> & {
         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 | RecordType | Date | string[] | boolean[] | number[] | Date[] | [Date, Date] | [number, number] | [string, string] | 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>>;
@@ -536,7 +539,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
             };
             rows: number;
             autocomplete: string;
-            type: "" | "number" | "default" | "search" | "button" | "textarea" | "time" | "circle" | "image" | "line" | "text" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "color" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
+            type: "" | "number" | "default" | "datetimerange" | "daterange" | "monthrange" | "checkbox" | "radio" | "textarea" | "text" | "circle" | "color" | "button" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "search" | "time" | "image" | "line" | "hidden" | "range" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "dashboard" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
             loading: EpPropMergeType<BooleanConstructor, unknown, unknown> | EpPropMergeType<StringConstructor, "lazy" | "eager", unknown> | undefined;
             step: string | number;
             format: string | ProgressFn | undefined;
@@ -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 | RecordType | Date | string[] | boolean[] | number[] | Date[] | [Date, Date] | [number, number] | [string, string] | 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>>;