jky-component-lib 0.0.45 → 0.0.48

package/dist/es/form/Form.vue.d.ts

@@ -110,8 +110,207 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     resetFields: typeof resetFields;
     clearValidate: typeof clearValidate;
     getFormInstance: typeof getFormInstance;
+    formRef: globalThis.Ref<({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly model?: Record<string, any> | undefined;
+            readonly rules?: import('element-plus').FormRules | undefined;
+            readonly labelPosition?: "left" | "right" | "top" | undefined;
+            readonly requireAsteriskPosition?: "left" | "right" | undefined;
+            readonly labelWidth?: string | number | undefined;
+            readonly labelSuffix?: string | undefined;
+            readonly inline?: boolean | undefined;
+            readonly inlineMessage?: boolean | undefined;
+            readonly statusIcon?: boolean | undefined;
+            readonly showMessage?: boolean | undefined;
+            readonly validateOnRuleChange?: boolean | undefined;
+            readonly hideRequiredAsterisk?: boolean | undefined;
+            readonly scrollToError?: boolean | undefined;
+            readonly scrollIntoViewOptions?: (ScrollIntoViewOptions | boolean) | undefined;
+            readonly size?: import('element-plus').ComponentSize | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: import('vue').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: globalThis.Slot | undefined;
+        }>;
+        $root: ComponentPublicInstance | null;
+        $parent: ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: "validate", prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('element-plus').FormProps> & Readonly<{
+            onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
+        }>, {
+            validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
+            validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
+            resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
+            clearValidate: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
+            scrollToField: (prop: import('element-plus').FormItemProp) => void;
+            getField: (prop: import('element-plus').FormItemProp) => import('element-plus').FormItemContext | undefined;
+            fields: import('vue').Reactive<import('element-plus').FormItemContext[]>;
+            setInitialValues: (initModel: Record<string, any>) => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            validate: (prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => void;
+        }, string, {
+            scrollIntoViewOptions: ScrollIntoViewOptions | boolean;
+            labelWidth: string | number;
+            labelPosition: "left" | "right" | "top";
+            requireAsteriskPosition: "left" | "right";
+            labelSuffix: string;
+            showMessage: boolean;
+            validateOnRuleChange: boolean;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        scrollIntoViewOptions: ScrollIntoViewOptions | boolean;
+        labelWidth: string | number;
+        labelPosition: "left" | "right" | "top";
+        requireAsteriskPosition: "left" | "right";
+        labelSuffix: string;
+        showMessage: boolean;
+        validateOnRuleChange: boolean;
+    }> & Omit<Readonly<import('element-plus').FormProps> & Readonly<{
+        onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
+    }>, "labelWidth" | "labelPosition" | "showMessage" | "validate" | "clearValidate" | "requireAsteriskPosition" | "labelSuffix" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validateField" | "resetFields" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
+        validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
+        validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
+        resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
+        clearValidate: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
+        scrollToField: (prop: import('element-plus').FormItemProp) => void;
+        getField: (prop: import('element-plus').FormItemProp) => import('element-plus').FormItemContext | undefined;
+        fields: import('vue').Reactive<import('element-plus').FormItemContext[]>;
+        setInitialValues: (initModel: Record<string, any>) => void;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) | undefined, ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly model?: Record<string, any> | undefined;
+            readonly rules?: import('element-plus').FormRules | undefined;
+            readonly labelPosition?: "left" | "right" | "top" | undefined;
+            readonly requireAsteriskPosition?: "left" | "right" | undefined;
+            readonly labelWidth?: string | number | undefined;
+            readonly labelSuffix?: string | undefined;
+            readonly inline?: boolean | undefined;
+            readonly inlineMessage?: boolean | undefined;
+            readonly statusIcon?: boolean | undefined;
+            readonly showMessage?: boolean | undefined;
+            readonly validateOnRuleChange?: boolean | undefined;
+            readonly hideRequiredAsterisk?: boolean | undefined;
+            readonly scrollToError?: boolean | undefined;
+            readonly scrollIntoViewOptions?: (ScrollIntoViewOptions | boolean) | undefined;
+            readonly size?: import('element-plus').ComponentSize | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: import('vue').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: globalThis.Slot | undefined;
+        }>;
+        $root: ComponentPublicInstance | null;
+        $parent: ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: "validate", prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('element-plus').FormProps> & Readonly<{
+            onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
+        }>, {
+            validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
+            validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
+            resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
+            clearValidate: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
+            scrollToField: (prop: import('element-plus').FormItemProp) => void;
+            getField: (prop: import('element-plus').FormItemProp) => import('element-plus').FormItemContext | undefined;
+            fields: import('vue').Reactive<import('element-plus').FormItemContext[]>;
+            setInitialValues: (initModel: Record<string, any>) => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            validate: (prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => void;
+        }, string, {
+            scrollIntoViewOptions: ScrollIntoViewOptions | boolean;
+            labelWidth: string | number;
+            labelPosition: "left" | "right" | "top";
+            requireAsteriskPosition: "left" | "right";
+            labelSuffix: string;
+            showMessage: boolean;
+            validateOnRuleChange: boolean;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        scrollIntoViewOptions: ScrollIntoViewOptions | boolean;
+        labelWidth: string | number;
+        labelPosition: "left" | "right" | "top";
+        requireAsteriskPosition: "left" | "right";
+        labelSuffix: string;
+        showMessage: boolean;
+        validateOnRuleChange: boolean;
+    }> & Omit<Readonly<import('element-plus').FormProps> & Readonly<{
+        onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
+    }>, "labelWidth" | "labelPosition" | "showMessage" | "validate" | "clearValidate" | "requireAsteriskPosition" | "labelSuffix" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validateField" | "resetFields" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
+        validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
+        validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
+        resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
+        clearValidate: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
+        scrollToField: (prop: import('element-plus').FormItemProp) => void;
+        getField: (prop: import('element-plus').FormItemProp) => import('element-plus').FormItemContext | undefined;
+        fields: import('vue').Reactive<import('element-plus').FormItemContext[]>;
+        setInitialValues: (initModel: Record<string, any>) => void;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) | undefined>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     change: (value: Record<string, any>) => any;
+    reset: () => any;
+    submit: (data: Record<string, any>) => any;
     "update:modelValue": (value: Record<string, any>) => any;
     validate: (result: {
         valid: boolean;
@@ -119,6 +318,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     }) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onChange?: ((value: Record<string, any>) => any) | undefined;
+    onReset?: (() => any) | undefined;
+    onSubmit?: ((data: Record<string, any>) => any) | undefined;
     "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
     onValidate?: ((result: {
         valid: boolean;
@@ -128,11 +329,14 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     size: import('element-plus').ComponentSize;
     labelWidth: string | number;
     labelPosition: "left" | "right" | "top";
+    showFooter: boolean;
     showTitle: boolean;
     gutter: number;
     defaultSpan: number;
     responsive: boolean;
     watchDeep: boolean;
+    submitText: string;
+    cancelText: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     formRef: ({
         $: import('vue').ComponentInternalInstance;

package/dist/es/form/Form.vue.js

@@ -37,14 +37,18 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { defineComponent, useModel, ref, computed, watch, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createVNode, unref, mergeProps, withCtx, createElementVNode, normalizeStyle, Fragment, renderList, createBlock, mergeModels } from "vue";
-import { ElForm } from "element-plus";
+import { defineComponent, useModel, ref, computed, watch, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createVNode, unref, mergeProps, withCtx, Fragment, renderList, createBlock, createTextVNode, mergeModels } from "vue";
+import { ElForm, ElButton } from "element-plus";
 import _sfc_main$1 from "./FormItem.vue.js";
 /* empty css              */
 const _hoisted_1 = {
   key: 0,
   class: "jky-form__title mb-4 text-xl font-semibold"
 };
+const _hoisted_2 = {
+  key: 1,
+  class: "jky-form__footer mt-6 flex justify-end gap-2"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
   name: "JkyForm"
 }), {
@@ -61,7 +65,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     readonly: { type: Boolean },
     disabled: { type: Boolean },
     watchDeep: { type: Boolean, default: true },
+    showFooter: { type: Boolean, default: false },
+    submitText: { default: "提交" },
+    cancelText: { default: "取消" },
+    submitDisabled: { type: Boolean },
+    cancelDisabled: { type: Boolean },
     onValidate: {},
+    onSubmit: {},
+    onReset: {},
     model: {},
     rules: {},
     labelPosition: { default: "right" },
@@ -81,7 +92,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     "modelValue": { required: true, default: () => ({}) },
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["change", "validate"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ mergeModels(["change", "validate", "submit", "reset"], ["update:modelValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -118,8 +129,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       });
     }
     function resetFields() {
-      var _a;
+      var _a, _b;
       (_a = formRef.value) == null ? void 0 : _a.resetFields();
+      emit("reset");
+      (_b = props.onReset) == null ? void 0 : _b.call(props);
     }
     function clearValidate(props2) {
       var _a;
@@ -128,11 +141,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     function getFormInstance() {
       return formRef.value;
     }
+    function handleSubmit() {
+      return __async(this, null, function* () {
+        var _a, _b;
+        try {
+          yield (_a = formRef.value) == null ? void 0 : _a.validate();
+          emit("submit", __spreadValues({}, modelValue.value));
+          (_b = props.onSubmit) == null ? void 0 : _b.call(props, __spreadValues({}, modelValue.value));
+        } catch (error) {
+          emit("validate", { valid: false, fields: error.fields });
+        }
+      });
+    }
+    function handleCancel() {
+      resetFields();
+    }
     __expose({
       validate,
       resetFields,
       clearValidate,
-      getFormInstance
+      getFormInstance,
+      formRef
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -148,27 +177,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
           size: __props.size
         }, _ctx.$attrs), {
           default: withCtx(() => [
-            createElementVNode("div", {
-              class: "grid",
-              style: normalizeStyle({
-                gridTemplateColumns: "repeat(12, minmax(0, 1fr))",
-                gap: `${__props.gutter}px`
-              })
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
-                return openBlock(), createBlock(_sfc_main$1, {
-                  key: item.field,
-                  field: item.field,
-                  config: item,
-                  model: modelValue.value,
-                  readonly: __props.readonly,
-                  disabled: __props.disabled
-                }, null, 8, ["field", "config", "model", "readonly", "disabled"]);
-              }), 128))
-            ], 4)
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+              return openBlock(), createBlock(_sfc_main$1, {
+                key: item.field,
+                field: item.field,
+                config: item,
+                model: modelValue.value,
+                readonly: __props.readonly,
+                disabled: __props.disabled
+              }, null, 8, ["field", "config", "model", "readonly", "disabled"]);
+            }), 128))
           ]),
           _: 1
-        }, 16, ["model", "label-width", "label-position", "size"])
+        }, 16, ["model", "label-width", "label-position", "size"]),
+        props.showFooter ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(unref(ElButton), {
+            disabled: __props.cancelDisabled || __props.disabled,
+            onClick: handleCancel
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.cancelText), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          createVNode(unref(ElButton), {
+            type: "primary",
+            disabled: __props.submitDisabled || __props.disabled,
+            loading: false,
+            onClick: handleSubmit
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.submitText), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ])) : createCommentVNode("", true)
       ], 2);
     };
   }

package/dist/es/form/FormItem.vue.js

@@ -17,21 +17,34 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, computed, withDirectives, openBlock, createElementBlock, normalizeClass, toDisplayString, createBlock, unref, mergeProps, withCtx, createCommentVNode, resolveDynamicComponent, vShow, h } from "vue";
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { defineComponent, computed, openBlock, createElementBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, resolveDynamicComponent, Fragment, createTextVNode, toDisplayString, createCommentVNode, h } from "vue";
 import { ElFormItem, ElInput, ElInputNumber, ElRate, ElColorPicker, ElCascader, ElSlider, ElSwitch, ElCheckboxGroup, ElCheckbox, ElRadioGroup, ElRadio, ElTimeSelect, ElTimePicker, ElDatePicker, ElSelect, ElOption } from "element-plus";
 const _hoisted_1 = {
   key: 0,
-  class: "jky-form-item__title mb-2 text-base font-medium"
+  style: { "display": "none" }
 };
-const _hoisted_2 = {
+const _hoisted_2 = { class: "jky-form-item__title mb-2 text-base font-medium" };
+const _hoisted_3 = {
   key: 0,
   class: "flex items-center"
 };
-const _hoisted_3 = {
+const _hoisted_4 = {
   key: 0,
   class: "mr-2"
 };
-const _hoisted_4 = {
+const _hoisted_5 = {
   key: 1,
   class: "ml-2"
 };
@@ -77,7 +90,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     });
     const modelValue = computed({
       get: () => props.model[props.field],
-      set: (_val) => {
+      set: (val) => {
+        props.model[props.field] = val;
       }
     });
     const isHidden = computed(() => {
@@ -90,20 +104,71 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       }
       return props.config.hidden || false;
     });
-    const spanClass = computed(() => {
-      const span = props.config.span || 12;
-      return `col-span-${span}`;
+    const formItemProps = computed(() => {
+      const config = props.config;
+      const _a = config, {
+        field,
+        type,
+        title,
+        placeholder,
+        componentProps: componentProps2,
+        hidden,
+        className,
+        customStyle,
+        children,
+        render,
+        prepend,
+        append,
+        prefixIcon,
+        suffixIcon,
+        clearable,
+        filterable,
+        multiple,
+        options,
+        formatValue,
+        formatModel,
+        noLabelMargin,
+        titleRender
+      } = _a, rest = __objRest(_a, [
+        "field",
+        "type",
+        "title",
+        "placeholder",
+        "componentProps",
+        "hidden",
+        "className",
+        "customStyle",
+        "children",
+        "render",
+        "prepend",
+        "append",
+        "prefixIcon",
+        "suffixIcon",
+        "clearable",
+        "filterable",
+        "multiple",
+        "options",
+        "formatValue",
+        "formatModel",
+        "noLabelMargin",
+        "titleRender"
+      ]);
+      return rest;
     });
     function renderComponent(type) {
       var _a, _b, _c;
       const commonProps = __spreadValues({
         "modelValue": modelValue.value,
-        "onUpdate:modelValue": (_val) => {
+        "onUpdate:modelValue": (val) => {
+          props.model[props.field] = val;
         },
         "placeholder": props.config.placeholder,
-        "disabled": props.disabled || props.config.disabled || props.readonly,
+        "disabled": props.disabled,
         "clearable": (_a = props.config.clearable) != null ? _a : true
       }, componentProps.value);
+      const inputNumberProps = type === "input-number" ? __spreadProps(__spreadValues({}, commonProps), {
+        modelValue: commonProps.modelValue === "" ? null : commonProps.modelValue
+      }) : commonProps;
       switch (type) {
         case "input":
           return h(ElInput, __spreadProps(__spreadValues({}, commonProps), {
@@ -156,7 +221,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
               default: () => options.map(
                 (option) => h(ElRadio, {
                   key: option.value,
-                  label: option.value,
+                  value: option.value,
                   disabled: option.disabled
                 }, {
                   default: () => option.label
@@ -167,14 +232,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         }
         case "checkbox-group": {
           const options = props.config.options || [];
+          const arrayModelValue = Array.isArray(modelValue.value) ? modelValue.value : [];
           return h(
             ElCheckboxGroup,
-            __spreadValues({}, commonProps),
+            __spreadProps(__spreadValues({}, commonProps), {
+              modelValue: arrayModelValue
+            }),
             {
               default: () => options.map(
                 (option) => h(ElCheckbox, {
                   key: option.value,
-                  label: option.value,
+                  value: option.value,
                   disabled: option.disabled
                 }, {
                   default: () => option.label
@@ -196,7 +264,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         case "rate":
           return h(ElRate, __spreadValues({}, commonProps));
         case "input-number":
-          return h(ElInputNumber, __spreadValues({}, commonProps));
+          return h(ElInputNumber, inputNumberProps);
         case "custom":
           return (_c = (_b = props.config).render) == null ? void 0 : _c.call(_b, commonProps);
         default:
@@ -204,37 +272,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       }
     }
     return (_ctx, _cache) => {
-      var _a, _b, _c, _d, _e;
-      return withDirectives((openBlock(), createElementBlock("div", {
-        class: normalizeClass([[
-          __props.config.className,
-          spanClass.value,
-          ((_a = __props.config.responsiveSpan) == null ? void 0 : _a.xs) ? `xs:col-span-${__props.config.responsiveSpan.xs}` : "",
-          ((_b = __props.config.responsiveSpan) == null ? void 0 : _b.sm) ? `sm:col-span-${__props.config.responsiveSpan.sm}` : "",
-          ((_c = __props.config.responsiveSpan) == null ? void 0 : _c.md) ? `md:col-span-${__props.config.responsiveSpan.md}` : "",
-          ((_d = __props.config.responsiveSpan) == null ? void 0 : _d.lg) ? `lg:col-span-${__props.config.responsiveSpan.lg}` : "",
-          ((_e = __props.config.responsiveSpan) == null ? void 0 : _e.xl) ? `xl:col-span-${__props.config.responsiveSpan.xl}` : ""
-        ], "jky-form-item"])
-      }, [
-        __props.config.title && !__props.config.label ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.config.title), 1)) : (openBlock(), createBlock(unref(ElFormItem), mergeProps({
-          key: 1,
-          label: __props.config.label,
-          prop: __props.field,
-          rules: __props.config.rules,
-          required: __props.config.required
-        }, _ctx.$attrs), {
-          default: withCtx(() => [
-            __props.config.prepend || __props.config.append ? (openBlock(), createElementBlock("div", _hoisted_2, [
-              __props.config.prepend ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.config.prepend), 1)) : createCommentVNode("", true),
-              (openBlock(), createBlock(resolveDynamicComponent(renderComponent(__props.config.type || "input")))),
-              __props.config.append ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.config.append), 1)) : createCommentVNode("", true)
-            ])) : (openBlock(), createBlock(resolveDynamicComponent(renderComponent(__props.config.type || "input")), { key: 1 }))
+      return isHidden.value ? (openBlock(), createElementBlock("div", _hoisted_1)) : __props.config.title && !__props.config.label ? (openBlock(), createBlock(unref(ElFormItem), mergeProps({
+        key: 1,
+        prop: __props.field
+      }, __spreadValues(__spreadValues({}, formItemProps.value), _ctx.$attrs), {
+        class: ["jky-form-item", [__props.config.className]],
+        style: [__props.config.customStyle]
+      }), {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_2, [
+            __props.config.titleRender ? (openBlock(), createBlock(resolveDynamicComponent(__props.config.titleRender({ model: modelValue.value, field: __props.field })), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createTextVNode(toDisplayString(__props.config.title), 1)
+            ], 64))
           ]),
-          _: 1
-        }, 16, ["label", "prop", "rules", "required"]))
-      ], 2)), [
-        [vShow, !isHidden.value]
-      ]);
+          (openBlock(), createBlock(resolveDynamicComponent(renderComponent(__props.config.type || "input"))))
+        ]),
+        _: 1
+      }, 16, ["prop", "class", "style"])) : (openBlock(), createBlock(unref(ElFormItem), mergeProps({
+        key: 2,
+        label: __props.config.label,
+        prop: __props.field
+      }, __spreadValues(__spreadValues({}, formItemProps.value), _ctx.$attrs), {
+        class: ["jky-form-item", [__props.config.className]]
+      }), {
+        default: withCtx(() => [
+          __props.config.prepend || __props.config.append ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            __props.config.prepend ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.config.prepend), 1)) : createCommentVNode("", true),
+            (openBlock(), createBlock(resolveDynamicComponent(renderComponent(__props.config.type || "input")))),
+            __props.config.append ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.config.append), 1)) : createCommentVNode("", true)
+          ])) : (openBlock(), createBlock(resolveDynamicComponent(renderComponent(__props.config.type || "input")), { key: 1 }))
+        ]),
+        _: 1
+      }, 16, ["label", "prop", "class"]));
     };
   }
 }));

package/dist/es/form/style.css

@@ -1,3 +1,9 @@
+:root {
+  /* 表单组件间距 */
+  /* --jky-form-item-gap: 12px; */
+}
+
+
 /* Form 组件样式 */
 .jky-form {
   /* 表单容器样式 */
@@ -5,6 +11,8 @@
 .jky-form__title {
   /* 表单标题样式 */
 }
+
+
 /* FormItem 组件样式 */
 .jky-form-item {
   /* 表单项容器样式 */