yc-pro-components 0.0.24 → 0.0.25

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

@@ -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/es/components/form/src/index.vue2.mjs

@@ -20,6 +20,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     columns: { default: () => [] },
     labelWidth: { default: "80px" },
     labelPosition: { default: "left" },
+    layout: { default: "grid" },
     rowProps: { default: () => ({}) },
     colProps: { default: () => ({}) },
     labelSuffix: { default: ":" },
@@ -201,6 +202,7 @@ var _sfc_main = /* @__PURE__ */ 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,
@@ -219,7 +221,7 @@ var _sfc_main = /* @__PURE__ */ 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 */
@@ -240,6 +242,7 @@ var _sfc_main = /* @__PURE__ */ 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,
@@ -258,7 +261,7 @@ var _sfc_main = /* @__PURE__ */ 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/es/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
      */