jky-component-lib 0.0.46 → 0.0.49

package/dist/lib/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/lib/form/Form.vue.js

@@ -47,6 +47,10 @@ const _hoisted_1$2 = {
   key: 0,
   class: "jky-form__title mb-4 text-xl font-semibold"
 };
+const _hoisted_2$2 = {
+  key: 1,
+  class: "jky-form__footer mt-6 flex justify-end gap-2"
+};
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
   name: "JkyForm"
 }), {
@@ -63,7 +67,14 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
     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" },
@@ -83,7 +94,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
     "modelValue": { required: true, default: () => ({}) },
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ vue.mergeModels(["change", "validate"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ vue.mergeModels(["change", "validate", "submit", "reset"], ["update:modelValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -120,8 +131,10 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
       });
     }
     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;
@@ -130,11 +143,27 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
     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 vue.openBlock(), vue.createElementBlock("div", {
@@ -150,27 +179,41 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
           size: __props.size
         }, _ctx.$attrs), {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", {
-              class: "grid",
-              style: vue.normalizeStyle({
-                gridTemplateColumns: "repeat(12, minmax(0, 1fr))",
-                gap: `${__props.gutter}px`
-              })
-            }, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
-                return vue.openBlock(), vue.createBlock(FormItem_vue_vue_type_script_setup_true_lang.default, {
-                  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)
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+              return vue.openBlock(), vue.createBlock(FormItem_vue_vue_type_script_setup_true_lang.default, {
+                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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
+          vue.createVNode(vue.unref(ElementPlus.ElButton), {
+            disabled: __props.cancelDisabled || __props.disabled,
+            onClick: handleCancel
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(__props.cancelText), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          vue.createVNode(vue.unref(ElementPlus.ElButton), {
+            type: "primary",
+            disabled: __props.submitDisabled || __props.disabled,
+            loading: false,
+            onClick: handleSubmit
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(__props.submitText), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ])) : vue.createCommentVNode("", true)
       ], 2);
     };
   }

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

@@ -18,22 +18,35 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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;
+};
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const ElementPlus = require("element-plus");
 const _hoisted_1$3 = {
   key: 0,
-  class: "jky-form-item__title mb-2 text-base font-medium"
+  style: { "display": "none" }
 };
-const _hoisted_2$2 = {
+const _hoisted_2$3 = { class: "jky-form-item__title text-base font-medium" };
+const _hoisted_3$2 = {
   key: 0,
   class: "flex items-center"
 };
-const _hoisted_3$2 = {
+const _hoisted_4$2 = {
   key: 0,
   class: "mr-2"
 };
-const _hoisted_4$2 = {
+const _hoisted_5$2 = {
   key: 1,
   class: "ml-2"
 };
@@ -79,7 +92,8 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
     });
     const modelValue = vue.computed({
       get: () => props.model[props.field],
-      set: (_val) => {
+      set: (val) => {
+        props.model[props.field] = val;
       }
     });
     const isHidden = vue.computed(() => {
@@ -92,20 +106,71 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
       }
       return props.config.hidden || false;
     });
-    const spanClass = vue.computed(() => {
-      const span = props.config.span || 12;
-      return `col-span-${span}`;
+    const formItemProps = vue.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 vue.h(ElementPlus.ElInput, __spreadProps(__spreadValues({}, commonProps), {
@@ -158,7 +223,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
               default: () => options.map(
                 (option) => vue.h(ElementPlus.ElRadio, {
                   key: option.value,
-                  label: option.value,
+                  value: option.value,
                   disabled: option.disabled
                 }, {
                   default: () => option.label
@@ -169,14 +234,17 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
         }
         case "checkbox-group": {
           const options = props.config.options || [];
+          const arrayModelValue = Array.isArray(modelValue.value) ? modelValue.value : [];
           return vue.h(
             ElementPlus.ElCheckboxGroup,
-            __spreadValues({}, commonProps),
+            __spreadProps(__spreadValues({}, commonProps), {
+              modelValue: arrayModelValue
+            }),
             {
               default: () => options.map(
                 (option) => vue.h(ElementPlus.ElCheckbox, {
                   key: option.value,
-                  label: option.value,
+                  value: option.value,
                   disabled: option.disabled
                 }, {
                   default: () => option.label
@@ -198,7 +266,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
         case "rate":
           return vue.h(ElementPlus.ElRate, __spreadValues({}, commonProps));
         case "input-number":
-          return vue.h(ElementPlus.ElInputNumber, __spreadValues({}, commonProps));
+          return vue.h(ElementPlus.ElInputNumber, inputNumberProps);
         case "custom":
           return (_c = (_b = props.config).render) == null ? void 0 : _c.call(_b, commonProps);
         default:
@@ -206,37 +274,38 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
       }
     }
     return (_ctx, _cache) => {
-      var _a, _b, _c, _d, _e;
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(__props.config.title), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElFormItem), vue.mergeProps({
-          key: 1,
-          label: __props.config.label,
-          prop: __props.field,
-          rules: __props.config.rules,
-          required: __props.config.required
-        }, _ctx.$attrs), {
-          default: vue.withCtx(() => [
-            __props.config.prepend || __props.config.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
-              __props.config.prepend ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString(__props.config.prepend), 1)) : vue.createCommentVNode("", true),
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent(__props.config.type || "input")))),
-              __props.config.append ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$2, vue.toDisplayString(__props.config.append), 1)) : vue.createCommentVNode("", true)
-            ])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent(__props.config.type || "input")), { key: 1 }))
+      return isHidden.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3)) : __props.config.title && !__props.config.label ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElFormItem), vue.mergeProps({
+        key: 1,
+        prop: __props.field
+      }, __spreadValues(__spreadValues({}, formItemProps.value), _ctx.$attrs), {
+        class: ["jky-form-item jky-form-item--no-label", [__props.config.useDefaultBorderClass ? "border-l-4 border-solid border-l-(--el-color-primary) bg-(--el-color-primary)/50 pl-1.5" : "", __props.config.className]],
+        style: [__props.config.customStyle]
+      }), {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_2$3, [
+            __props.config.titleRender ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.config.titleRender({ model: modelValue.value, field: __props.field })), { key: 0 })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createTextVNode(vue.toDisplayString(__props.config.title), 1)
+            ], 64))
           ]),
-          _: 1
-        }, 16, ["label", "prop", "rules", "required"]))
-      ], 2)), [
-        [vue.vShow, !isHidden.value]
-      ]);
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent(__props.config.type || "input"))))
+        ]),
+        _: 1
+      }, 16, ["prop", "class", "style"])) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElFormItem), vue.mergeProps({
+        key: 2,
+        label: __props.config.label,
+        prop: __props.field
+      }, __spreadValues(__spreadValues({}, formItemProps.value), _ctx.$attrs), {
+        class: ["jky-form-item", [__props.config.className]]
+      }), {
+        default: vue.withCtx(() => [
+          __props.config.prepend || __props.config.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
+            __props.config.prepend ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$2, vue.toDisplayString(__props.config.prepend), 1)) : vue.createCommentVNode("", true),
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent(__props.config.type || "input")))),
+            __props.config.append ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$2, vue.toDisplayString(__props.config.append), 1)) : vue.createCommentVNode("", true)
+          ])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent(__props.config.type || "input")), { key: 1 }))
+        ]),
+        _: 1
+      }, 16, ["label", "prop", "class"]));
     };
   }
 }));

package/dist/lib/form/style.css

@@ -1,3 +1,12 @@
+:root {
+  /* 表单组件间距 */
+  /* --jky-form-item-gap: 12px; */
+  --jky-form-item-border-width: 4px;
+  --jky-form-item-border-color: var(--el-color-primary);
+  --jky-form-item-bg-color: rgba(var(--el-color-primary-rgb), 0.5);
+}
+
+
 /* Form 组件样式 */
 .jky-form {
   /* 表单容器样式 */
@@ -5,10 +14,20 @@
 .jky-form__title {
   /* 表单标题样式 */
 }
+
+
 /* FormItem 组件样式 */
 .jky-form-item {
   /* 表单项容器样式 */
 }
+.jky-form-item--no-label {
+  /* 表单项标题样式（无 label 时） */
+  /* border-left: var(--jky-form-item-border-width) solid var(--jky-form-item-border-color); */
+  /* background-color: var(--jky-form-item-bg-color); */
+  /* padding-left: var(--jky-form-item-border-width); */
+}
 .jky-form-item__title {
   /* 表单项标题样式（无 label 时） */
 }
+.jky-form-item__title--no-label {
+}