@vunk/form 0.0.1-alpha.8 → 1.0.1

package/components/form/index.js

@@ -1,10 +1,11 @@
 import { formProps, formEmits, ElForm } from 'element-plus';
 import { bindPropsFactory, onEmitsFactory } from '@vunk/core/shared/utils-vue';
-import { defineComponent, resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withCtx, createVNode, renderSlot } from 'vue';
+import { NOOP } from '@vunk/core/shared/utils-function';
+import { defineComponent, shallowRef, getCurrentInstance, provide, resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withCtx, createVNode, renderSlot } from 'vue';
 import { VkfFormItemRenderer } from '@vunk/form/components/form-item-renderer';
 import { createFormBindProps, createFormOnEmits } from '@vunk/form/shared/element-plus';
 import { getValue } from '@vunk/core/shared/helper';
-import { VkfFormItemRendererTemplateDefault } from '@vunk/form/components/form-item-renderer-template-default';
+import { VkfTemplatesDefault } from '@vunk/form/components/templates-default';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -34,10 +35,12 @@ const props = __spreadProps(__spreadValues({}, formProps), {
     type: Array,
     default: () => []
   },
+  readonly: {
+    type: Boolean
+  },
   elRef: {
     type: Function,
-    default: () => () => {
-    }
+    default: () => NOOP
   }
 });
 const createBindProps = bindPropsFactory(props);
@@ -55,38 +58,58 @@ var ctx = /*#__PURE__*/Object.freeze({
   createOnEmits: createOnEmits
 });
 
-var script = defineComponent({
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _sfc_main = defineComponent({
   name: "VkfForm",
   props,
   emits,
   components: {
     ElForm,
     VkfFormItemRenderer,
-    VkfFormItemRendererTemplateDefault
+    VkfTemplatesDefault
   },
   setup(props2, { emit }) {
     const formProps = createFormBindProps(props2, ["model"]);
     const formEmits = createFormOnEmits(emit);
+    const formRef = shallowRef();
+    const vm = getCurrentInstance();
+    provide("vkfFormVm", vm);
+    provide("elFormRef", formRef);
+    const getRef = (e) => {
+      formRef.value = e;
+      props2.elRef(e);
+    };
     return {
       formProps,
       formEmits,
-      getValue
+      getValue,
+      getRef
     };
   }
 });
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_VkfFormItemRendererTemplateDefault = resolveComponent("VkfFormItemRendererTemplateDefault");
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_VkfTemplatesDefault = resolveComponent("VkfTemplatesDefault");
   const _component_VkfFormItemRenderer = resolveComponent("VkfFormItemRenderer");
   const _component_ElForm = resolveComponent("ElForm");
-  return openBlock(), createBlock(_component_ElForm, mergeProps(_ctx.formProps, toHandlers(_ctx.formEmits), {
+  return openBlock(), createBlock(_component_ElForm, mergeProps({
+    class: {
+      "is-readonly": _ctx.readonly
+    }
+  }, _ctx.formProps, toHandlers(_ctx.formEmits), {
     model: _ctx.model || _ctx.data,
-    ref: _ctx.elRef
+    ref: _ctx.getRef
   }), {
     default: withCtx(() => [
       createVNode(_component_VkfFormItemRenderer, { source: _ctx.formItems }, {
         default: withCtx(() => [
-          createVNode(_component_VkfFormItemRendererTemplateDefault, {
+          createVNode(_component_VkfTemplatesDefault, {
             data: _ctx.data,
             onSetData: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("setData", $event))
           }, null, 8, ["data"]),
@@ -97,14 +120,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
-  }, 16, ["model"]);
+  }, 16, ["class", "model"]);
 }
+var VkfForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "index.vue"]]);
 
-script.render = render;
-script.__file = "form/src/index.vue";
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
 
-script.install = (app) => {
-  app.component(script.name, script);
+VkfForm.install = (app) => {
+  app.component(VkfForm.name, VkfForm);
 };
 
-export { script as VkfForm, ctx as _VkfFormCtx, script as default };
+export { VkfForm, ctx as _VkfFormCtx, types as __VkfForm, VkfForm as default };

package/components/form/src/ctx.d.ts

@@ -7,7 +7,10 @@ export declare const props: {
     };
     formItems: {
         type: PropType<any[]>;
-        default: () => any[];
+        default: () => never[];
+    };
+    readonly: {
+        type: BooleanConstructor;
     };
     elRef: {
         type: PropType<(arg: {
@@ -15,7 +18,8 @@ export declare const props: {
             $data: {};
             $props: Partial<{
                 readonly disabled: boolean;
-                readonly labelPosition: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "left" | "right" | "top", unknown>;
+                readonly labelPosition: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "top" | "left" | "right", unknown>;
+                readonly requireAsteriskPosition: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "left" | "right", unknown>;
                 readonly labelWidth: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
                 readonly labelSuffix: string;
                 readonly showMessage: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
@@ -30,29 +34,36 @@ export declare const props: {
                 readonly rules: {
                     readonly type: PropType<Partial<Record<string, import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>>>>;
                     readonly required: false;
-                    readonly validator: (val: unknown) => boolean;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
                 };
-                readonly labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right" | "top", unknown, "right", boolean>;
+                readonly labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "top" | "left" | "right", unknown, "right", boolean>;
+                readonly requireAsteriskPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right", unknown, "left", boolean>;
                 readonly labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
                 readonly labelSuffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
                 readonly inline: BooleanConstructor;
                 readonly inlineMessage: BooleanConstructor;
                 readonly statusIcon: BooleanConstructor;
                 readonly showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                readonly validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                readonly hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+                readonly scrollToError: BooleanConstructor;
+                readonly scrollIntoViewOptions: {
+                    readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<readonly [ObjectConstructor, BooleanConstructor], unknown, unknown>>;
+                    readonly required: false;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
+                    __epPropKey: true;
+                };
                 readonly size: {
                     readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown>>;
                     readonly required: false;
-                    readonly validator: (val: unknown) => boolean;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
                 };
                 readonly disabled: BooleanConstructor;
-                readonly validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-                readonly hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-                readonly scrollToError: BooleanConstructor;
             }>> & {
-                onValidate?: (prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => any;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "labelWidth" | "inlineMessage" | "showMessage" | "disabled" | "labelPosition" | "labelSuffix" | "inline" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError">;
+                onValidate?: ((prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => any) | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "labelWidth" | "inlineMessage" | "showMessage" | "inline" | "disabled" | "labelPosition" | "requireAsteriskPosition" | "labelSuffix" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -60,10 +71,10 @@ export declare const props: {
                 [x: string]: unknown;
             };
             $slots: Readonly<{
-                [name: string]: import("vue").Slot;
+                [name: string]: import("vue").Slot | undefined;
             }>;
-            $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
-            $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+            $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+            $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
             $emit: (event: "validate", prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => void;
             $el: any;
             $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
@@ -71,28 +82,35 @@ export declare const props: {
                 readonly rules: {
                     readonly type: PropType<Partial<Record<string, import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>>>>;
                     readonly required: false;
-                    readonly validator: (val: unknown) => boolean;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
                 };
-                readonly labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right" | "top", unknown, "right", boolean>;
+                readonly labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "top" | "left" | "right", unknown, "right", boolean>;
+                readonly requireAsteriskPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right", unknown, "left", boolean>;
                 readonly labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
                 readonly labelSuffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
                 readonly inline: BooleanConstructor;
                 readonly inlineMessage: BooleanConstructor;
                 readonly statusIcon: BooleanConstructor;
                 readonly showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                readonly validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                readonly hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+                readonly scrollToError: BooleanConstructor;
+                readonly scrollIntoViewOptions: {
+                    readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<readonly [ObjectConstructor, BooleanConstructor], unknown, unknown>>;
+                    readonly required: false;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
+                    __epPropKey: true;
+                };
                 readonly size: {
                     readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown>>;
                     readonly required: false;
-                    readonly validator: (val: unknown) => boolean;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
                 };
                 readonly disabled: BooleanConstructor;
-                readonly validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-                readonly hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-                readonly scrollToError: BooleanConstructor;
             }>> & {
-                onValidate?: (prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => any;
+                onValidate?: ((prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => any) | undefined;
             }, {
                 COMPONENT_NAME: string;
                 props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
@@ -100,43 +118,50 @@ export declare const props: {
                     readonly rules: {
                         readonly type: PropType<Partial<Record<string, import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>>>>;
                         readonly required: false;
-                        readonly validator: (val: unknown) => boolean;
+                        readonly validator: ((val: unknown) => boolean) | undefined;
                         __epPropKey: true;
                     };
-                    readonly labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right" | "top", unknown, "right", boolean>;
+                    readonly labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "top" | "left" | "right", unknown, "right", boolean>;
+                    readonly requireAsteriskPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right", unknown, "left", boolean>;
                     readonly labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
                     readonly labelSuffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
                     readonly inline: BooleanConstructor;
                     readonly inlineMessage: BooleanConstructor;
                     readonly statusIcon: BooleanConstructor;
                     readonly showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                    readonly validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                    readonly hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+                    readonly scrollToError: BooleanConstructor;
+                    readonly scrollIntoViewOptions: {
+                        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<readonly [ObjectConstructor, BooleanConstructor], unknown, unknown>>;
+                        readonly required: false;
+                        readonly validator: ((val: unknown) => boolean) | undefined;
+                        __epPropKey: true;
+                    };
                     readonly size: {
                         readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown>>;
                         readonly required: false;
-                        readonly validator: (val: unknown) => boolean;
+                        readonly validator: ((val: unknown) => boolean) | undefined;
                         __epPropKey: true;
                     };
                     readonly disabled: BooleanConstructor;
-                    readonly validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-                    readonly hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-                    readonly scrollToError: BooleanConstructor;
                 }>> & {
-                    onValidate?: (prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => any;
+                    onValidate?: ((prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => any) | undefined;
                 }>>;
                 emit: (event: "validate", prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => void;
                 fields: import("element-plus").FormItemContext[];
                 formSize: import("vue").ComputedRef<"" | "default" | "small" | "large">;
                 ns: {
                     namespace: import("vue").ComputedRef<string>;
-                    b: (blockSuffix?: string) => string;
-                    e: (element?: string) => string;
-                    m: (modifier?: string) => string;
-                    be: (blockSuffix?: string, element?: string) => string;
-                    em: (element?: string, modifier?: string) => string;
-                    bm: (blockSuffix?: string, modifier?: string) => string;
-                    bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+                    b: (blockSuffix?: string | undefined) => string;
+                    e: (element?: string | undefined) => string;
+                    m: (modifier?: string | undefined) => string;
+                    be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+                    em: (element?: string | undefined, modifier?: string | undefined) => string;
+                    bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+                    bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
                     is: {
-                        (name: string, state: boolean): string;
+                        (name: string, state: boolean | undefined): string;
                         (name: string): string;
                     };
                     cssVar: (object: Record<string, string>) => Record<string, string>;
@@ -145,23 +170,24 @@ export declare const props: {
                     cssVarBlockName: (name: string) => string;
                 };
                 formClasses: import("vue").ComputedRef<(string | {
-                    [x: string]: boolean | import("element-plus/es/utils").EpPropMergeType<StringConstructor, "left" | "right" | "top", unknown>;
+                    [x: string]: boolean | import("element-plus/es/utils").EpPropMergeType<StringConstructor, "top" | "left" | "right", unknown>;
                 })[]>;
                 addField: (field: import("element-plus").FormItemContext) => void;
                 removeField: (field: import("element-plus").FormItemContext) => void;
-                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;
+                resetFields: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp> | undefined) => void;
+                clearValidate: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp> | undefined) => void;
                 isValidatable: import("vue").ComputedRef<boolean>;
                 obtainValidateFields: (props: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp>) => import("element-plus").FormItemContext[];
-                validate: (callback?: import("element-plus").FormValidateCallback) => import("element-plus").FormValidationResult;
-                doValidateField: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp>) => Promise<boolean>;
-                validateField: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp>, callback?: import("element-plus").FormValidateCallback) => import("element-plus").FormValidationResult;
+                validate: (callback?: import("element-plus").FormValidateCallback | undefined) => import("element-plus").FormValidationResult;
+                doValidateField: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp> | undefined) => Promise<boolean>;
+                validateField: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp> | undefined, callback?: import("element-plus").FormValidateCallback | undefined) => import("element-plus").FormValidationResult;
                 scrollToField: (prop: import("element-plus").FormItemProp) => void;
             }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                 validate: (prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => boolean;
             }, string, {
                 readonly disabled: boolean;
-                readonly labelPosition: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "left" | "right" | "top", unknown>;
+                readonly labelPosition: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "top" | "left" | "right", unknown>;
+                readonly requireAsteriskPosition: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "left" | "right", unknown>;
                 readonly labelWidth: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
                 readonly labelSuffix: string;
                 readonly showMessage: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
@@ -171,53 +197,60 @@ export declare const props: {
                 readonly inlineMessage: boolean;
                 readonly statusIcon: boolean;
                 readonly scrollToError: boolean;
-            }> & {
-                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: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+            }, {}, string> & {
+                beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+                created?: ((() => void) | (() => void)[]) | undefined;
+                beforeMount?: ((() => void) | (() => void)[]) | undefined;
+                mounted?: ((() => void) | (() => void)[]) | undefined;
+                beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+                updated?: ((() => void) | (() => void)[]) | undefined;
+                activated?: ((() => void) | (() => void)[]) | undefined;
+                deactivated?: ((() => void) | (() => void)[]) | undefined;
+                beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+                beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+                destroyed?: ((() => void) | (() => void)[]) | undefined;
+                unmounted?: ((() => void) | (() => void)[]) | undefined;
+                renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+                renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+                errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
             };
             $forceUpdate: () => void;
             $nextTick: typeof import("vue").nextTick;
-            $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
         } & Readonly<import("vue").ExtractPropTypes<{
             readonly model: ObjectConstructor;
             readonly rules: {
                 readonly type: PropType<Partial<Record<string, import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>>>>;
                 readonly required: false;
-                readonly validator: (val: unknown) => boolean;
+                readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
             };
-            readonly labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right" | "top", unknown, "right", boolean>;
+            readonly labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "top" | "left" | "right", unknown, "right", boolean>;
+            readonly requireAsteriskPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right", unknown, "left", boolean>;
             readonly labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
             readonly labelSuffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
             readonly inline: BooleanConstructor;
             readonly inlineMessage: BooleanConstructor;
             readonly statusIcon: BooleanConstructor;
             readonly showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+            readonly validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+            readonly hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+            readonly scrollToError: BooleanConstructor;
+            readonly scrollIntoViewOptions: {
+                readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<readonly [ObjectConstructor, BooleanConstructor], unknown, unknown>>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
             readonly size: {
                 readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown>>;
                 readonly required: false;
-                readonly validator: (val: unknown) => boolean;
+                readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
             };
             readonly disabled: BooleanConstructor;
-            readonly validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-            readonly hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-            readonly scrollToError: BooleanConstructor;
         }>> & {
-            onValidate?: (prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => any;
+            onValidate?: ((prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => any) | undefined;
         } & import("vue").ShallowUnwrapRef<{
             COMPONENT_NAME: string;
             props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
@@ -225,43 +258,50 @@ export declare const props: {
                 readonly rules: {
                     readonly type: PropType<Partial<Record<string, import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>>>>;
                     readonly required: false;
-                    readonly validator: (val: unknown) => boolean;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
                 };
-                readonly labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right" | "top", unknown, "right", boolean>;
+                readonly labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "top" | "left" | "right", unknown, "right", boolean>;
+                readonly requireAsteriskPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right", unknown, "left", boolean>;
                 readonly labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
                 readonly labelSuffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
                 readonly inline: BooleanConstructor;
                 readonly inlineMessage: BooleanConstructor;
                 readonly statusIcon: BooleanConstructor;
                 readonly showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                readonly validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+                readonly hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+                readonly scrollToError: BooleanConstructor;
+                readonly scrollIntoViewOptions: {
+                    readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<readonly [ObjectConstructor, BooleanConstructor], unknown, unknown>>;
+                    readonly required: false;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
+                    __epPropKey: true;
+                };
                 readonly size: {
                     readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown>>;
                     readonly required: false;
-                    readonly validator: (val: unknown) => boolean;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
                 };
                 readonly disabled: BooleanConstructor;
-                readonly validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-                readonly hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-                readonly scrollToError: BooleanConstructor;
             }>> & {
-                onValidate?: (prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => any;
+                onValidate?: ((prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => any) | undefined;
             }>>;
             emit: (event: "validate", prop: import("element-plus").FormItemProp, isValid: boolean, message: string) => void;
             fields: import("element-plus").FormItemContext[];
             formSize: import("vue").ComputedRef<"" | "default" | "small" | "large">;
             ns: {
                 namespace: import("vue").ComputedRef<string>;
-                b: (blockSuffix?: string) => string;
-                e: (element?: string) => string;
-                m: (modifier?: string) => string;
-                be: (blockSuffix?: string, element?: string) => string;
-                em: (element?: string, modifier?: string) => string;
-                bm: (blockSuffix?: string, modifier?: string) => string;
-                bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+                b: (blockSuffix?: string | undefined) => string;
+                e: (element?: string | undefined) => string;
+                m: (modifier?: string | undefined) => string;
+                be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+                em: (element?: string | undefined, modifier?: string | undefined) => string;
+                bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+                bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
                 is: {
-                    (name: string, state: boolean): string;
+                    (name: string, state: boolean | undefined): string;
                     (name: string): string;
                 };
                 cssVar: (object: Record<string, string>) => Record<string, string>;
@@ -270,49 +310,59 @@ export declare const props: {
                 cssVarBlockName: (name: string) => string;
             };
             formClasses: import("vue").ComputedRef<(string | {
-                [x: string]: boolean | import("element-plus/es/utils").EpPropMergeType<StringConstructor, "left" | "right" | "top", unknown>;
+                [x: string]: boolean | import("element-plus/es/utils").EpPropMergeType<StringConstructor, "top" | "left" | "right", unknown>;
             })[]>;
             addField: (field: import("element-plus").FormItemContext) => void;
             removeField: (field: import("element-plus").FormItemContext) => void;
-            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;
+            resetFields: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp> | undefined) => void;
+            clearValidate: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp> | undefined) => void;
             isValidatable: import("vue").ComputedRef<boolean>;
             obtainValidateFields: (props: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp>) => import("element-plus").FormItemContext[];
-            validate: (callback?: import("element-plus").FormValidateCallback) => import("element-plus").FormValidationResult;
-            doValidateField: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp>) => Promise<boolean>;
-            validateField: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp>, callback?: import("element-plus").FormValidateCallback) => import("element-plus").FormValidationResult;
+            validate: (callback?: import("element-plus").FormValidateCallback | undefined) => import("element-plus").FormValidationResult;
+            doValidateField: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp> | undefined) => Promise<boolean>;
+            validateField: (props?: import("element-plus/es/utils").Arrayable<import("element-plus").FormItemProp> | undefined, callback?: import("element-plus").FormValidateCallback | undefined) => import("element-plus").FormValidationResult;
             scrollToField: (prop: import("element-plus").FormItemProp) => void;
-        }> & {} & import("vue").ComponentCustomProperties) => any>;
+        }> & {} & import("vue").ComponentCustomProperties & {}) => any>;
         default: () => () => void;
     };
     model: ObjectConstructor;
     rules: {
         readonly type: PropType<Partial<Record<string, import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>>>>;
         readonly required: false;
-        readonly validator: (val: unknown) => boolean;
+        readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right" | "top", unknown, "right", boolean>;
+    labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "top" | "left" | "right", unknown, "right", boolean>;
+    requireAsteriskPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "left" | "right", unknown, "left", boolean>;
     labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
     labelSuffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     inline: BooleanConstructor;
     inlineMessage: BooleanConstructor;
     statusIcon: BooleanConstructor;
     showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    scrollToError: BooleanConstructor;
+    scrollIntoViewOptions: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<readonly [ObjectConstructor, BooleanConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
     size: {
         readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown>>;
         readonly required: false;
-        readonly validator: (val: unknown) => boolean;
+        readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
     disabled: BooleanConstructor;
-    validateOnRuleChange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    hideRequiredAsterisk: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-    scrollToError: BooleanConstructor;
 };
-export declare const createBindProps: <T2 extends Record<string, any>, EX extends ("labelWidth" | "rules" | "inlineMessage" | "showMessage" | "size" | "elRef" | "data" | "disabled" | "model" | "labelPosition" | "labelSuffix" | "inline" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "formItems")[], K extends Extract<EX extends (infer V)[] ? Exclude<keyof T2, V> : keyof T2, "labelWidth" | "rules" | "inlineMessage" | "showMessage" | "size" | "elRef" | "data" | "disabled" | "model" | "labelPosition" | "labelSuffix" | "inline" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "formItems">>(propsArg: T2, excludes?: EX) => import("vue").ComputedRef<{ [k in K]: T2[k]; }>;
+export declare const createBindProps: <T2 extends import("@vunk/core").NormalObject, EX extends (Extract<"labelWidth", keyof T2> | Extract<"rules", keyof T2> | Extract<"inlineMessage", keyof T2> | Extract<"showMessage", keyof T2> | Extract<"size", keyof T2> | Extract<"elRef", keyof T2> | Extract<"inline", keyof T2> | Extract<"readonly", keyof T2> | Extract<"data", keyof T2> | Extract<"disabled", keyof T2> | Extract<"model", keyof T2> | Extract<"labelPosition", keyof T2> | Extract<"requireAsteriskPosition", keyof T2> | Extract<"labelSuffix", keyof T2> | Extract<"statusIcon", keyof T2> | Extract<"validateOnRuleChange", keyof T2> | Extract<"hideRequiredAsterisk", keyof T2> | Extract<"scrollToError", keyof T2> | Extract<"scrollIntoViewOptions", keyof T2> | Extract<"formItems", keyof T2>)[] | undefined>(propsArg: T2, excludes?: EX | undefined) => import("vue").ComputedRef<{ [P in EX extends (infer KE)[] ? Exclude<Extract<"labelWidth", keyof T2>, KE> | Exclude<Extract<"rules", keyof T2>, KE> | Exclude<Extract<"inlineMessage", keyof T2>, KE> | Exclude<Extract<"showMessage", keyof T2>, KE> | Exclude<Extract<"size", keyof T2>, KE> | Exclude<Extract<"elRef", keyof T2>, KE> | Exclude<Extract<"inline", keyof T2>, KE> | Exclude<Extract<"readonly", keyof T2>, KE> | Exclude<Extract<"data", keyof T2>, KE> | Exclude<Extract<"disabled", keyof T2>, KE> | Exclude<Extract<"model", keyof T2>, KE> | Exclude<Extract<"labelPosition", keyof T2>, KE> | Exclude<Extract<"requireAsteriskPosition", keyof T2>, KE> | Exclude<Extract<"labelSuffix", keyof T2>, KE> | Exclude<Extract<"statusIcon", keyof T2>, KE> | Exclude<Extract<"validateOnRuleChange", keyof T2>, KE> | Exclude<Extract<"hideRequiredAsterisk", keyof T2>, KE> | Exclude<Extract<"scrollToError", keyof T2>, KE> | Exclude<Extract<"scrollIntoViewOptions", keyof T2>, KE> | Exclude<Extract<"formItems", keyof T2>, KE> : Extract<"labelWidth", keyof T2> | Extract<"rules", keyof T2> | Extract<"inlineMessage", keyof T2> | Extract<"showMessage", keyof T2> | Extract<"size", keyof T2> | Extract<"elRef", keyof T2> | Extract<"inline", keyof T2> | Extract<"readonly", keyof T2> | Extract<"data", keyof T2> | Extract<"disabled", keyof T2> | Extract<"model", keyof T2> | Extract<"labelPosition", keyof T2> | Extract<"requireAsteriskPosition", keyof T2> | Extract<"labelSuffix", keyof T2> | Extract<"statusIcon", keyof T2> | Extract<"validateOnRuleChange", keyof T2> | Extract<"hideRequiredAsterisk", keyof T2> | Extract<"scrollToError", keyof T2> | Extract<"scrollIntoViewOptions", keyof T2> | Extract<"formItems", keyof T2>]: { [k in Extract<"labelWidth", keyof T2> | Extract<"rules", keyof T2> | Extract<"inlineMessage", keyof T2> | Extract<"showMessage", keyof T2> | Extract<"size", keyof T2> | Extract<"elRef", keyof T2> | Extract<"inline", keyof T2> | Extract<"readonly", keyof T2> | Extract<"data", keyof T2> | Extract<"disabled", keyof T2> | Extract<"model", keyof T2> | Extract<"labelPosition", keyof T2> | Extract<"requireAsteriskPosition", keyof T2> | Extract<"labelSuffix", keyof T2> | Extract<"statusIcon", keyof T2> | Extract<"validateOnRuleChange", keyof T2> | Extract<"hideRequiredAsterisk", keyof T2> | Extract<"scrollToError", keyof T2> | Extract<"scrollIntoViewOptions", keyof T2> | Extract<"formItems", keyof T2>]: T2[k]; }[P]; }>;
 export declare const emits: {
     setData: (e: SetDataEvent) => SetDataEvent<any>;
-    validate: any;
+    validate: null;
 };
-export declare const createOnEmits: <T2 extends (...args: any) => any, EX extends ("validate" | "setData")[], K extends "validate" | "setData">(emit: T2, excludes?: EX) => { [k in K]: T2; };
+export declare const createOnEmits: <T2 extends import("@vunk/core").AnyFunc, EX extends ("validate" | "setData")[] | undefined>(emit: T2, excludes?: EX | undefined) => { [P in EX extends (infer KE)[] ? Exclude<"validate", KE> | Exclude<"setData", KE> : "validate" | "setData"]: {
+    setData: (...e: import("@vunk/core").RestParameters<T2>) => void;
+    validate: (...e: import("@vunk/core").RestParameters<T2>) => void;
+}[P]; };

package/components/form/src/ctx.js

@@ -1,5 +1,6 @@
 import { formProps, formEmits } from 'element-plus';
 import { bindPropsFactory, onEmitsFactory } from '@vunk/core/shared/utils-vue';
+import { NOOP } from '@vunk/core/shared/utils-function';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -29,10 +30,12 @@ const props = __spreadProps(__spreadValues({}, formProps), {
     type: Array,
     default: () => []
   },
+  readonly: {
+    type: Boolean
+  },
   elRef: {
     type: Function,
-    default: () => () => {
-    }
+    default: () => NOOP
   }
 });
 const createBindProps = bindPropsFactory(props);