@element-plus/nightly 0.0.20260329 → 0.0.20260330

package/lib/components/dropdown/src/dropdown.d.ts

@@ -46,12 +46,12 @@ declare const dropdownProps: {
     readonly __epPropKey: true;
   };
   readonly type: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (((new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger")) | null)[], unknown, unknown>>;
+    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text") | (() => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text") | (((new (...args: any[]) => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text") | (() => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text")) | null)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "bottom-start" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement$1) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "bottom-start" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement$1)) | null)[], unknown, unknown, "bottom", boolean>;
+  readonly placement: EpPropFinalized<(new (...args: any[]) => "right" | "left" | "auto" | "bottom" | "top" | "right-end" | "right-start" | "left-end" | "left-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start" | "auto-start" | "auto-end") | (() => Placement$1) | (((new (...args: any[]) => "right" | "left" | "auto" | "bottom" | "top" | "right-end" | "right-start" | "left-end" | "left-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start" | "auto-start" | "auto-end") | (() => Placement$1)) | null)[], unknown, unknown, "bottom", boolean>;
   readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
   readonly id: StringConstructor;
   readonly size: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
@@ -172,7 +172,7 @@ declare const dropdownProps: {
     __epPropKey: true;
   };
   readonly disabled: BooleanConstructor;
-  readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "menu", boolean>;
+  readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree" | "group" | "navigation", unknown, "menu", boolean>;
   readonly buttonProps: {
     readonly type: vue.PropType<Partial<ButtonProps>>;
     readonly required: false;

package/lib/components/dropdown/src/dropdown.vue.d.ts

@@ -51,12 +51,12 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly __epPropKey: true;
   };
   readonly type: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (((new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger")) | null)[], unknown, unknown>>;
+    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text") | (() => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text") | (((new (...args: any[]) => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text") | (() => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text")) | null)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "bottom-start" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "bottom-start" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], unknown, unknown, "bottom", boolean>;
+  readonly placement: EpPropFinalized<(new (...args: any[]) => "right" | "left" | "auto" | "bottom" | "top" | "right-end" | "right-start" | "left-end" | "left-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start" | "auto-start" | "auto-end") | (() => Placement) | (((new (...args: any[]) => "right" | "left" | "auto" | "bottom" | "top" | "right-end" | "right-start" | "left-end" | "left-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start" | "auto-start" | "auto-end") | (() => Placement)) | null)[], unknown, unknown, "bottom", boolean>;
   readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
   readonly id: StringConstructor;
   readonly size: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
@@ -177,7 +177,7 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     __epPropKey: true;
   };
   readonly disabled: BooleanConstructor;
-  readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "menu", boolean>;
+  readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree" | "group" | "navigation", unknown, "menu", boolean>;
   readonly buttonProps: {
     readonly type: vue.PropType<Partial<ButtonProps>>;
     readonly required: false;
@@ -253,12 +253,12 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly __epPropKey: true;
   };
   readonly type: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (((new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger")) | null)[], unknown, unknown>>;
+    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text") | (() => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text") | (((new (...args: any[]) => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text") | (() => "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text")) | null)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "bottom-start" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "bottom-start" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], unknown, unknown, "bottom", boolean>;
+  readonly placement: EpPropFinalized<(new (...args: any[]) => "right" | "left" | "auto" | "bottom" | "top" | "right-end" | "right-start" | "left-end" | "left-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start" | "auto-start" | "auto-end") | (() => Placement) | (((new (...args: any[]) => "right" | "left" | "auto" | "bottom" | "top" | "right-end" | "right-start" | "left-end" | "left-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start" | "auto-start" | "auto-end") | (() => Placement)) | null)[], unknown, unknown, "bottom", boolean>;
   readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
   readonly id: StringConstructor;
   readonly size: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
@@ -379,7 +379,7 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     __epPropKey: true;
   };
   readonly disabled: BooleanConstructor;
-  readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "menu", boolean>;
+  readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree" | "group" | "navigation", unknown, "menu", boolean>;
   readonly buttonProps: {
     readonly type: vue.PropType<Partial<ButtonProps>>;
     readonly required: false;
@@ -399,21 +399,21 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   "onVisible-change"?: ((...args: any[]) => any) | undefined;
   onCommand?: ((...args: any[]) => any) | undefined;
 }>, {
-  readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
-  readonly effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
-  readonly placement: EpPropMergeType<(new (...args: any[]) => "top" | "auto" | "bottom" | "bottom-start" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "bottom-start" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], unknown, unknown>;
-  readonly size: string;
   readonly disabled: boolean;
+  readonly size: string;
   readonly tabindex: EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown>;
+  readonly effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
+  readonly showArrow: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly placement: EpPropMergeType<(new (...args: any[]) => "right" | "left" | "auto" | "bottom" | "top" | "right-end" | "right-start" | "left-end" | "left-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start" | "auto-start" | "auto-end") | (() => Placement) | (((new (...args: any[]) => "right" | "left" | "auto" | "bottom" | "top" | "right-end" | "right-start" | "left-end" | "left-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start" | "auto-start" | "auto-end") | (() => Placement)) | null)[], unknown, unknown>;
+  readonly popperOptions: Partial<Options>;
   readonly virtualTriggering: boolean;
   readonly loop: EpPropMergeType<BooleanConstructor, unknown, unknown>;
-  readonly popperOptions: Partial<Options>;
-  readonly showArrow: EpPropMergeType<BooleanConstructor, unknown, unknown>;
-  readonly role: EpPropMergeType<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown>;
+  readonly maxHeight: EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown>;
+  readonly role: EpPropMergeType<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree" | "group" | "navigation", unknown>;
   readonly persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly trigger: Arrayable<"click" | "contextmenu" | "hover">;
   readonly triggerKeys: string[];
-  readonly maxHeight: EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown>;
   readonly hideOnClick: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly showTimeout: number;
   readonly hideTimeout: number;
@@ -425,22 +425,22 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     }>, {
       ref: vue.Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
       size: vue.ComputedRef<"" | "default" | "small" | "large">;
-      type: vue.ComputedRef<"default" | "" | "info" | "primary" | "success" | "warning" | "text" | "danger">;
+      type: vue.ComputedRef<"default" | "primary" | "" | "success" | "info" | "warning" | "danger" | "text">;
       disabled: vue.ComputedRef<boolean>;
       shouldAddSpace: vue.ComputedRef<boolean>;
     }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
       click: (evt: MouseEvent) => void;
     }, vue.PublicProps, {
+      disabled: boolean;
       type: ButtonType;
       text: boolean;
-      disabled: boolean;
       round: boolean;
       dashed: boolean;
+      tag: string | vue.Component;
+      plain: boolean;
       nativeType: ButtonNativeType;
       loadingIcon: IconPropType;
-      plain: boolean;
       autoInsertSpace: boolean;
-      tag: string | vue.Component;
     }, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
       P: {};
       B: {};
@@ -453,20 +453,20 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     }>, {
       ref: vue.Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
       size: vue.ComputedRef<"" | "default" | "small" | "large">;
-      type: vue.ComputedRef<"default" | "" | "info" | "primary" | "success" | "warning" | "text" | "danger">;
+      type: vue.ComputedRef<"default" | "primary" | "" | "success" | "info" | "warning" | "danger" | "text">;
       disabled: vue.ComputedRef<boolean>;
       shouldAddSpace: vue.ComputedRef<boolean>;
     }, {}, {}, {}, {
+      disabled: boolean;
       type: ButtonType;
       text: boolean;
-      disabled: boolean;
       round: boolean;
       dashed: boolean;
+      tag: string | vue.Component;
+      plain: boolean;
       nativeType: ButtonNativeType;
       loadingIcon: IconPropType;
-      plain: boolean;
       autoInsertSpace: boolean;
-      tag: string | vue.Component;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -476,22 +476,22 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   }>, {
     ref: vue.Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
     size: vue.ComputedRef<"" | "default" | "small" | "large">;
-    type: vue.ComputedRef<"default" | "" | "info" | "primary" | "success" | "warning" | "text" | "danger">;
+    type: vue.ComputedRef<"default" | "primary" | "" | "success" | "info" | "warning" | "danger" | "text">;
     disabled: vue.ComputedRef<boolean>;
     shouldAddSpace: vue.ComputedRef<boolean>;
   }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     click: (evt: MouseEvent) => void;
   }, string, {
+    disabled: boolean;
     type: ButtonType;
     text: boolean;
-    disabled: boolean;
     round: boolean;
     dashed: boolean;
+    tag: string | vue.Component;
+    plain: boolean;
     nativeType: ButtonNativeType;
     loadingIcon: IconPropType;
-    plain: boolean;
     autoInsertSpace: boolean;
-    tag: string | vue.Component;
   }, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
     $slots: {
       loading?: (props: {}) => any;
@@ -528,7 +528,7 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   };
   ElButtonGroup: {
     new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ButtonGroupProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {
-      type: "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger";
+      type: "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text";
       direction: "horizontal" | "vertical";
     }, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
       P: {};
@@ -538,14 +538,14 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
       M: {};
       Defaults: {};
     }, Readonly<ButtonGroupProps> & Readonly<{}>, {}, {}, {}, {}, {
-      type: "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger";
+      type: "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text";
       direction: "horizontal" | "vertical";
     }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
   } & vue.ComponentOptionsBase<Readonly<ButtonGroupProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {
-    type: "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger";
+    type: "" | "default" | "primary" | "success" | "info" | "warning" | "danger" | "text";
     direction: "horizontal" | "vertical";
   }, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
     $slots: {
@@ -577,9 +577,9 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
       "end-reached": (direction: ScrollbarDirection) => void;
     }, vue.PublicProps, {
       tabindex: number | string;
+      tag: keyof HTMLElementTagNameMap | (string & {});
       height: number | string;
       maxHeight: number | string;
-      tag: keyof HTMLElementTagNameMap | (string & {});
       distance: number;
       wrapStyle: string | false | CSSProperties | vue.StyleValue[] | null;
       wrapClass: string | string[];
@@ -611,9 +611,9 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
       handleScroll: () => void;
     }, {}, {}, {}, {
       tabindex: number | string;
+      tag: keyof HTMLElementTagNameMap | (string & {});
       height: number | string;
       maxHeight: number | string;
-      tag: keyof HTMLElementTagNameMap | (string & {});
       distance: number;
       wrapStyle: string | false | CSSProperties | vue.StyleValue[] | null;
       wrapClass: string | string[];
@@ -648,9 +648,9 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     "end-reached": (direction: ScrollbarDirection) => void;
   }, string, {
     tabindex: number | string;
+    tag: keyof HTMLElementTagNameMap | (string & {});
     height: number | string;
     maxHeight: number | string;
-    tag: keyof HTMLElementTagNameMap | (string & {});
     distance: number;
     wrapStyle: string | false | CSSProperties | vue.StyleValue[] | null;
     wrapClass: string | string[];
@@ -688,15 +688,19 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
       "before-show": (...args: any[]) => void;
       "before-hide": (...args: any[]) => void;
     }, vue.PublicProps, {
-      offset: number;
-      teleported: boolean;
-      effect: PopperEffect;
-      placement: Placement;
-      popperStyle: string | false | CSSProperties | vue.StyleValue[] | null;
       visible: boolean | null;
       content: string;
       style: string | false | CSSProperties | vue.StyleValue[] | null;
+      effect: PopperEffect;
+      popperStyle: string | false | CSSProperties | vue.StyleValue[] | null;
+      showArrow: boolean;
+      placement: Placement;
+      showAfter: number;
+      hideAfter: number;
+      autoClose: number;
       enterable: boolean;
+      offset: number;
+      popperOptions: Partial<Options>;
       pure: boolean;
       focusOnShow: boolean;
       trapping: boolean;
@@ -705,14 +709,10 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
       loop: boolean;
       boundariesPadding: number;
       gpuAcceleration: boolean;
-      popperOptions: Partial<Options>;
       strategy: "fixed" | "absolute";
       arrowOffset: number;
-      showArrow: boolean;
       role: typeof roleTypes[number];
-      showAfter: number;
-      hideAfter: number;
-      autoClose: number;
+      teleported: boolean;
       trigger: Arrayable<TooltipTriggerType>;
       triggerKeys: string[];
     }, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
@@ -739,15 +739,19 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
       onClose: (event?: Event, delay?: number) => void;
       hide: (event?: Event) => void;
     }, {}, {}, {}, {
-      offset: number;
-      teleported: boolean;
-      effect: PopperEffect;
-      placement: Placement;
-      popperStyle: string | false | CSSProperties | vue.StyleValue[] | null;
       visible: boolean | null;
       content: string;
       style: string | false | CSSProperties | vue.StyleValue[] | null;
+      effect: PopperEffect;
+      popperStyle: string | false | CSSProperties | vue.StyleValue[] | null;
+      showArrow: boolean;
+      placement: Placement;
+      showAfter: number;
+      hideAfter: number;
+      autoClose: number;
       enterable: boolean;
+      offset: number;
+      popperOptions: Partial<Options>;
       pure: boolean;
       focusOnShow: boolean;
       trapping: boolean;
@@ -756,14 +760,10 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
       loop: boolean;
       boundariesPadding: number;
       gpuAcceleration: boolean;
-      popperOptions: Partial<Options>;
       strategy: "fixed" | "absolute";
       arrowOffset: number;
-      showArrow: boolean;
       role: typeof roleTypes[number];
-      showAfter: number;
-      hideAfter: number;
-      autoClose: number;
+      teleported: boolean;
       trigger: Arrayable<TooltipTriggerType>;
       triggerKeys: string[];
     }>;
@@ -795,15 +795,19 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     "before-show": (...args: any[]) => void;
     "before-hide": (...args: any[]) => void;
   }, string, {
-    offset: number;
-    teleported: boolean;
-    effect: PopperEffect;
-    placement: Placement;
-    popperStyle: string | false | CSSProperties | vue.StyleValue[] | null;
     visible: boolean | null;
     content: string;
     style: string | false | CSSProperties | vue.StyleValue[] | null;
+    effect: PopperEffect;
+    popperStyle: string | false | CSSProperties | vue.StyleValue[] | null;
+    showArrow: boolean;
+    placement: Placement;
+    showAfter: number;
+    hideAfter: number;
+    autoClose: number;
     enterable: boolean;
+    offset: number;
+    popperOptions: Partial<Options>;
     pure: boolean;
     focusOnShow: boolean;
     trapping: boolean;
@@ -812,14 +816,10 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     loop: boolean;
     boundariesPadding: number;
     gpuAcceleration: boolean;
-    popperOptions: Partial<Options>;
     strategy: "fixed" | "absolute";
     arrowOffset: number;
-    showArrow: boolean;
     role: typeof roleTypes[number];
-    showAfter: number;
-    hideAfter: number;
-    autoClose: number;
+    teleported: boolean;
     trigger: Arrayable<TooltipTriggerType>;
     triggerKeys: string[];
   }, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
@@ -908,24 +908,18 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
   }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
   ElIcon: SFCWithInstall<{
-    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {
-      size: number | string;
-    }, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
       P: {};
       B: {};
       D: {};
       C: {};
       M: {};
       Defaults: {};
-    }, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, {
-      size: number | string;
-    }>;
+    }, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-  } & vue.ComponentOptionsBase<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {
-    size: number | string;
-  }, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+  } & vue.ComponentOptionsBase<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
     $slots: {
       default?: (props: {}) => any;
     };

package/lib/components/form/src/form-item.d.ts

@@ -71,7 +71,7 @@ declare const formItemProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly labelPosition: EpPropFinalized<StringConstructor, "" | "top" | "left" | "right", unknown, "", boolean>;
+  readonly labelPosition: EpPropFinalized<StringConstructor, "" | "right" | "left" | "top", unknown, "", boolean>;
   readonly prop: {
     readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | string[]) | (() => FormItemProp) | (((new (...args: any[]) => string | string[]) | (() => FormItemProp)) | null)[], unknown, unknown>>;
     readonly required: false;

package/lib/components/form/src/form-item.vue_vue_type_script_setup_true_lang.js

@@ -186,6 +186,7 @@ var form_item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 		const setInitialValue = (value) => {
 			initialValue = (0, lodash_unified.cloneDeep)(value);
 		};
+		const getInitialValue = () => initialValue;
 		(0, vue.watch)(() => props.error, (val) => {
 			validateMessage.value = val || "";
 			setValidationState(val ? "error" : "");
@@ -208,9 +209,18 @@ var form_item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 			clearValidate,
 			validate,
 			propString,
-			setInitialValue
+			setInitialValue,
+			getInitialValue
 		});
 		(0, vue.provide)(require_constants.formItemContextKey, context);
+		(0, vue.watch)(propString, (newPropString, oldPropString) => {
+			if (!formContext || !oldPropString) return;
+			formContext.removeField(context, oldPropString);
+			if (newPropString) {
+				setInitialValue(fieldValue.value);
+				formContext.addField(context);
+			}
+		});
 		(0, vue.onMounted)(() => {
 			if (props.prop) {
 				setInitialValue(fieldValue.value);

package/lib/components/form/src/form-item.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-item.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../../packages/components/form/src/form-item.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"formItemRef\"\n    :class=\"formItemClasses\"\n    :role=\"isGroup ? 'group' : undefined\"\n    :aria-labelledby=\"isGroup ? labelId : undefined\"\n  >\n    <form-label-wrap\n      :is-auto-width=\"labelStyle.width === 'auto'\"\n      :update-all=\"formContext?.labelWidth === 'auto'\"\n    >\n      <component\n        :is=\"labelFor ? 'label' : 'div'\"\n        v-if=\"!!(label || $slots.label)\"\n        :id=\"labelId\"\n        :for=\"labelFor\"\n        :class=\"ns.e('label')\"\n        :style=\"labelStyle\"\n      >\n        <slot name=\"label\" :label=\"currentLabel\">\n          {{ currentLabel }}\n        </slot>\n      </component>\n    </form-label-wrap>\n\n    <div :class=\"ns.e('content')\" :style=\"contentStyle\">\n      <slot />\n      <transition-group :name=\"`${ns.namespace.value}-zoom-in-top`\">\n        <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n          <div :class=\"validateClasses\">\n            {{ validateMessage }}\n          </div>\n        </slot>\n      </transition-group>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  useSlots,\n  watch,\n} from 'vue'\nimport AsyncValidator from 'async-validator'\nimport { refDebounced } from '@vueuse/core'\nimport {\n  addUnit,\n  ensureArray,\n  getProp,\n  isArray,\n  isBoolean,\n  isFunction,\n} from '@element-plus/utils'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { useFormSize } from './hooks'\nimport FormLabelWrap from './form-label-wrap'\nimport { formContextKey, formItemContextKey } from './constants'\nimport { cloneDeep } from 'lodash-unified'\n\nimport type { CSSProperties } from 'vue'\nimport type { RuleItem } from 'async-validator'\nimport type { Arrayable } from '@element-plus/utils'\nimport type {\n  FormItemContext,\n  FormItemRule,\n  FormValidateFailure,\n} from './types'\nimport type { FormItemProps, FormItemValidateState } from './form-item'\n\ndefineOptions({\n  name: 'ElFormItem',\n})\nconst props = withDefaults(defineProps<FormItemProps>(), {\n  labelPosition: '',\n  showMessage: true,\n  required: undefined,\n  inlineMessage: undefined,\n})\nconst slots = useSlots()\n\nconst formContext = inject(formContextKey, undefined)\nconst parentFormItemContext = inject(formItemContextKey, undefined)\n\nconst _size = useFormSize(undefined, { formItem: false })\nconst ns = useNamespace('form-item')\n\nconst labelId = useId().value\nconst inputIds = ref<string[]>([])\n\nconst validateState = ref<FormItemValidateState>('')\nconst validateStateDebounced = refDebounced(validateState, 100)\nconst validateMessage = ref('')\nconst formItemRef = ref<HTMLDivElement>()\n// special inline value.\nlet initialValue: any = undefined\nlet isResettingField = false\n\nconst labelPosition = computed(\n  () => props.labelPosition || formContext?.labelPosition\n)\n\nconst labelStyle = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top') {\n    return {}\n  }\n\n  const labelWidth = addUnit(props.labelWidth ?? formContext?.labelWidth)\n  return { width: labelWidth }\n})\n\nconst contentStyle = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top' || formContext?.inline) {\n    return {}\n  }\n  if (!props.label && !props.labelWidth && isNested) {\n    return {}\n  }\n  const labelWidth = addUnit(props.labelWidth ?? formContext?.labelWidth)\n  if (!props.label && !slots.label) {\n    return { marginLeft: labelWidth }\n  }\n  return {}\n})\n\nconst formItemClasses = computed(() => [\n  ns.b(),\n  ns.m(_size.value),\n  ns.is('error', validateState.value === 'error'),\n  ns.is('validating', validateState.value === 'validating'),\n  ns.is('success', validateState.value === 'success'),\n  ns.is('required', isRequired.value || props.required),\n  ns.is('no-asterisk', formContext?.hideRequiredAsterisk),\n  formContext?.requireAsteriskPosition === 'right'\n    ? 'asterisk-right'\n    : 'asterisk-left',\n  {\n    [ns.m('feedback')]: formContext?.statusIcon,\n    [ns.m(`label-${labelPosition.value}`)]: labelPosition.value,\n  },\n])\n\nconst _inlineMessage = computed(() =>\n  isBoolean(props.inlineMessage)\n    ? props.inlineMessage\n    : formContext?.inlineMessage || false\n)\n\nconst validateClasses = computed(() => [\n  ns.e('error'),\n  { [ns.em('error', 'inline')]: _inlineMessage.value },\n])\n\nconst propString = computed(() => {\n  if (!props.prop) return ''\n  return isArray(props.prop) ? props.prop.join('.') : props.prop\n})\n\nconst hasLabel = computed<boolean>(() => {\n  return !!(props.label || slots.label)\n})\n\nconst labelFor = computed<string | undefined>(() => {\n  return (\n    props.for ?? (inputIds.value.length === 1 ? inputIds.value[0] : undefined)\n  )\n})\n\nconst isGroup = computed<boolean>(() => {\n  return !labelFor.value && hasLabel.value\n})\n\nconst isNested = !!parentFormItemContext\n\nconst fieldValue = computed(() => {\n  const model = formContext?.model\n  if (!model || !props.prop) {\n    return\n  }\n  return getProp(model, props.prop).value\n})\n\nconst normalizedRules = computed(() => {\n  const { required } = props\n\n  const rules: FormItemRule[] = []\n\n  if (props.rules) {\n    rules.push(...ensureArray(props.rules))\n  }\n\n  const formRules = formContext?.rules\n  if (formRules && props.prop) {\n    const _rules = getProp<Arrayable<FormItemRule> | undefined>(\n      formRules,\n      props.prop\n    ).value\n    if (_rules) {\n      rules.push(...ensureArray(_rules))\n    }\n  }\n\n  if (required !== undefined) {\n    const requiredRules = rules\n      .map((rule, i) => [rule, i] as const)\n      .filter(([rule]) => 'required' in rule)\n\n    if (requiredRules.length > 0) {\n      for (const [rule, i] of requiredRules) {\n        if (rule.required === required) continue\n        rules[i] = { ...rule, required }\n      }\n    } else {\n      rules.push({ required })\n    }\n  }\n\n  return rules\n})\n\nconst validateEnabled = computed(() => normalizedRules.value.length > 0)\n\nconst getFilteredRule = (trigger: string) => {\n  const rules = normalizedRules.value\n  return (\n    rules\n      .filter((rule) => {\n        if (!rule.trigger || !trigger) return true\n        if (isArray(rule.trigger)) {\n          return rule.trigger.includes(trigger)\n        } else {\n          return rule.trigger === trigger\n        }\n      })\n      // exclude trigger\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      .map(({ trigger, ...rule }): RuleItem => rule)\n  )\n}\n\nconst isRequired = computed(() =>\n  normalizedRules.value.some((rule) => rule.required)\n)\n\nconst shouldShowError = computed(\n  () =>\n    validateStateDebounced.value === 'error' &&\n    props.showMessage &&\n    (formContext?.showMessage ?? true)\n)\n\nconst currentLabel = computed(\n  () => `${props.label || ''}${formContext?.labelSuffix || ''}`\n)\n\nconst setValidationState = (state: FormItemValidateState) => {\n  validateState.value = state\n}\n\nconst onValidationFailed = (error: FormValidateFailure) => {\n  const { errors, fields } = error\n  if (!errors || !fields) {\n    console.error(error)\n  }\n\n  setValidationState('error')\n  validateMessage.value = errors\n    ? (errors?.[0]?.message ?? `${props.prop} is required`)\n    : ''\n\n  formContext?.emit('validate', props.prop!, false, validateMessage.value)\n}\n\nconst onValidationSucceeded = () => {\n  setValidationState('success')\n  formContext?.emit('validate', props.prop!, true, '')\n}\n\nconst doValidate = async (rules: RuleItem[]): Promise<true> => {\n  const modelName = propString.value\n  const validator = new AsyncValidator({\n    [modelName]: rules,\n  })\n  return validator\n    .validate({ [modelName]: fieldValue.value }, { firstFields: true })\n    .then(() => {\n      onValidationSucceeded()\n      return true as const\n    })\n    .catch((err: FormValidateFailure) => {\n      onValidationFailed(err)\n      return Promise.reject(err)\n    })\n}\n\nconst validate: FormItemContext['validate'] = async (trigger, callback) => {\n  // skip validation if its resetting\n  if (isResettingField || !props.prop) {\n    return false\n  }\n\n  const hasCallback = isFunction(callback)\n  if (!validateEnabled.value) {\n    callback?.(false)\n    return false\n  }\n\n  const rules = getFilteredRule(trigger)\n  if (rules.length === 0) {\n    callback?.(true)\n    return true\n  }\n\n  setValidationState('validating')\n\n  return doValidate(rules)\n    .then(() => {\n      callback?.(true)\n      return true as const\n    })\n    .catch((err: FormValidateFailure) => {\n      const { fields } = err\n      callback?.(false, fields)\n      return hasCallback ? false : Promise.reject(fields)\n    })\n}\n\nconst clearValidate: FormItemContext['clearValidate'] = () => {\n  setValidationState('')\n  validateMessage.value = ''\n  isResettingField = false\n}\n\nconst resetField: FormItemContext['resetField'] = async () => {\n  const model = formContext?.model\n  if (!model || !props.prop) return\n\n  const computedValue = getProp(model, props.prop)\n\n  // prevent validation from being triggered\n  isResettingField = true\n\n  computedValue.value = cloneDeep(initialValue)\n\n  await nextTick()\n  clearValidate()\n\n  isResettingField = false\n}\n\nconst addInputId: FormItemContext['addInputId'] = (id: string) => {\n  if (!inputIds.value.includes(id)) {\n    inputIds.value.push(id)\n  }\n}\n\nconst removeInputId: FormItemContext['removeInputId'] = (id: string) => {\n  inputIds.value = inputIds.value.filter((listId) => listId !== id)\n}\n\nconst setInitialValue: FormItemContext['setInitialValue'] = (value: any) => {\n  initialValue = cloneDeep(value)\n}\n\nwatch(\n  () => props.error,\n  (val) => {\n    validateMessage.value = val || ''\n    setValidationState(val ? 'error' : '')\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => props.validateStatus,\n  (val) => setValidationState(val || '')\n)\n\nconst context: FormItemContext = reactive({\n  ...toRefs(props),\n  $el: formItemRef,\n  size: _size,\n  validateMessage,\n  validateState,\n  labelId,\n  inputIds,\n  isGroup,\n  hasLabel,\n  fieldValue,\n  addInputId,\n  removeInputId,\n  resetField,\n  clearValidate,\n  validate,\n  propString,\n  setInitialValue,\n})\n\nprovide(formItemContextKey, context)\n\nonMounted(() => {\n  if (props.prop) {\n    setInitialValue(fieldValue.value)\n    formContext?.addField(context)\n  }\n})\n\nonBeforeUnmount(() => {\n  formContext?.removeField(context)\n})\n\ndefineExpose({\n  /**\n   * @description Form item size.\n   */\n  size: _size,\n  /**\n   * @description Validation message.\n   */\n  validateMessage,\n  /**\n   * @description Validation state.\n   */\n  validateState,\n  /**\n   * @description Validate form item.\n   */\n  validate,\n  /**\n   * @description Remove validation status of the field.\n   */\n  clearValidate,\n  /**\n   * @description Reset current field and remove validation result.\n   */\n  resetField,\n  /**\n   * @description Set initial value for this field. When `resetField` is called, the field will reset to this value.\n   */\n  setInitialValue,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"form-item.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../../packages/components/form/src/form-item.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"formItemRef\"\n    :class=\"formItemClasses\"\n    :role=\"isGroup ? 'group' : undefined\"\n    :aria-labelledby=\"isGroup ? labelId : undefined\"\n  >\n    <form-label-wrap\n      :is-auto-width=\"labelStyle.width === 'auto'\"\n      :update-all=\"formContext?.labelWidth === 'auto'\"\n    >\n      <component\n        :is=\"labelFor ? 'label' : 'div'\"\n        v-if=\"!!(label || $slots.label)\"\n        :id=\"labelId\"\n        :for=\"labelFor\"\n        :class=\"ns.e('label')\"\n        :style=\"labelStyle\"\n      >\n        <slot name=\"label\" :label=\"currentLabel\">\n          {{ currentLabel }}\n        </slot>\n      </component>\n    </form-label-wrap>\n\n    <div :class=\"ns.e('content')\" :style=\"contentStyle\">\n      <slot />\n      <transition-group :name=\"`${ns.namespace.value}-zoom-in-top`\">\n        <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n          <div :class=\"validateClasses\">\n            {{ validateMessage }}\n          </div>\n        </slot>\n      </transition-group>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  useSlots,\n  watch,\n} from 'vue'\nimport AsyncValidator from 'async-validator'\nimport { refDebounced } from '@vueuse/core'\nimport {\n  addUnit,\n  ensureArray,\n  getProp,\n  isArray,\n  isBoolean,\n  isFunction,\n} from '@element-plus/utils'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { useFormSize } from './hooks'\nimport FormLabelWrap from './form-label-wrap'\nimport { formContextKey, formItemContextKey } from './constants'\nimport { cloneDeep } from 'lodash-unified'\n\nimport type { CSSProperties } from 'vue'\nimport type { RuleItem } from 'async-validator'\nimport type { Arrayable } from '@element-plus/utils'\nimport type {\n  FormItemContext,\n  FormItemRule,\n  FormValidateFailure,\n} from './types'\nimport type { FormItemProps, FormItemValidateState } from './form-item'\n\ndefineOptions({\n  name: 'ElFormItem',\n})\nconst props = withDefaults(defineProps<FormItemProps>(), {\n  labelPosition: '',\n  showMessage: true,\n  required: undefined,\n  inlineMessage: undefined,\n})\nconst slots = useSlots()\n\nconst formContext = inject(formContextKey, undefined)\nconst parentFormItemContext = inject(formItemContextKey, undefined)\n\nconst _size = useFormSize(undefined, { formItem: false })\nconst ns = useNamespace('form-item')\n\nconst labelId = useId().value\nconst inputIds = ref<string[]>([])\n\nconst validateState = ref<FormItemValidateState>('')\nconst validateStateDebounced = refDebounced(validateState, 100)\nconst validateMessage = ref('')\nconst formItemRef = ref<HTMLDivElement>()\n// special inline value.\nlet initialValue: any = undefined\nlet isResettingField = false\n\nconst labelPosition = computed(\n  () => props.labelPosition || formContext?.labelPosition\n)\n\nconst labelStyle = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top') {\n    return {}\n  }\n\n  const labelWidth = addUnit(props.labelWidth ?? formContext?.labelWidth)\n  return { width: labelWidth }\n})\n\nconst contentStyle = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top' || formContext?.inline) {\n    return {}\n  }\n  if (!props.label && !props.labelWidth && isNested) {\n    return {}\n  }\n  const labelWidth = addUnit(props.labelWidth ?? formContext?.labelWidth)\n  if (!props.label && !slots.label) {\n    return { marginLeft: labelWidth }\n  }\n  return {}\n})\n\nconst formItemClasses = computed(() => [\n  ns.b(),\n  ns.m(_size.value),\n  ns.is('error', validateState.value === 'error'),\n  ns.is('validating', validateState.value === 'validating'),\n  ns.is('success', validateState.value === 'success'),\n  ns.is('required', isRequired.value || props.required),\n  ns.is('no-asterisk', formContext?.hideRequiredAsterisk),\n  formContext?.requireAsteriskPosition === 'right'\n    ? 'asterisk-right'\n    : 'asterisk-left',\n  {\n    [ns.m('feedback')]: formContext?.statusIcon,\n    [ns.m(`label-${labelPosition.value}`)]: labelPosition.value,\n  },\n])\n\nconst _inlineMessage = computed(() =>\n  isBoolean(props.inlineMessage)\n    ? props.inlineMessage\n    : formContext?.inlineMessage || false\n)\n\nconst validateClasses = computed(() => [\n  ns.e('error'),\n  { [ns.em('error', 'inline')]: _inlineMessage.value },\n])\n\nconst propString = computed(() => {\n  if (!props.prop) return ''\n  return isArray(props.prop) ? props.prop.join('.') : props.prop\n})\n\nconst hasLabel = computed<boolean>(() => {\n  return !!(props.label || slots.label)\n})\n\nconst labelFor = computed<string | undefined>(() => {\n  return (\n    props.for ?? (inputIds.value.length === 1 ? inputIds.value[0] : undefined)\n  )\n})\n\nconst isGroup = computed<boolean>(() => {\n  return !labelFor.value && hasLabel.value\n})\n\nconst isNested = !!parentFormItemContext\n\nconst fieldValue = computed(() => {\n  const model = formContext?.model\n  if (!model || !props.prop) {\n    return\n  }\n  return getProp(model, props.prop).value\n})\n\nconst normalizedRules = computed(() => {\n  const { required } = props\n\n  const rules: FormItemRule[] = []\n\n  if (props.rules) {\n    rules.push(...ensureArray(props.rules))\n  }\n\n  const formRules = formContext?.rules\n  if (formRules && props.prop) {\n    const _rules = getProp<Arrayable<FormItemRule> | undefined>(\n      formRules,\n      props.prop\n    ).value\n    if (_rules) {\n      rules.push(...ensureArray(_rules))\n    }\n  }\n\n  if (required !== undefined) {\n    const requiredRules = rules\n      .map((rule, i) => [rule, i] as const)\n      .filter(([rule]) => 'required' in rule)\n\n    if (requiredRules.length > 0) {\n      for (const [rule, i] of requiredRules) {\n        if (rule.required === required) continue\n        rules[i] = { ...rule, required }\n      }\n    } else {\n      rules.push({ required })\n    }\n  }\n\n  return rules\n})\n\nconst validateEnabled = computed(() => normalizedRules.value.length > 0)\n\nconst getFilteredRule = (trigger: string) => {\n  const rules = normalizedRules.value\n  return (\n    rules\n      .filter((rule) => {\n        if (!rule.trigger || !trigger) return true\n        if (isArray(rule.trigger)) {\n          return rule.trigger.includes(trigger)\n        } else {\n          return rule.trigger === trigger\n        }\n      })\n      // exclude trigger\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      .map(({ trigger, ...rule }): RuleItem => rule)\n  )\n}\n\nconst isRequired = computed(() =>\n  normalizedRules.value.some((rule) => rule.required)\n)\n\nconst shouldShowError = computed(\n  () =>\n    validateStateDebounced.value === 'error' &&\n    props.showMessage &&\n    (formContext?.showMessage ?? true)\n)\n\nconst currentLabel = computed(\n  () => `${props.label || ''}${formContext?.labelSuffix || ''}`\n)\n\nconst setValidationState = (state: FormItemValidateState) => {\n  validateState.value = state\n}\n\nconst onValidationFailed = (error: FormValidateFailure) => {\n  const { errors, fields } = error\n  if (!errors || !fields) {\n    console.error(error)\n  }\n\n  setValidationState('error')\n  validateMessage.value = errors\n    ? (errors?.[0]?.message ?? `${props.prop} is required`)\n    : ''\n\n  formContext?.emit('validate', props.prop!, false, validateMessage.value)\n}\n\nconst onValidationSucceeded = () => {\n  setValidationState('success')\n  formContext?.emit('validate', props.prop!, true, '')\n}\n\nconst doValidate = async (rules: RuleItem[]): Promise<true> => {\n  const modelName = propString.value\n  const validator = new AsyncValidator({\n    [modelName]: rules,\n  })\n  return validator\n    .validate({ [modelName]: fieldValue.value }, { firstFields: true })\n    .then(() => {\n      onValidationSucceeded()\n      return true as const\n    })\n    .catch((err: FormValidateFailure) => {\n      onValidationFailed(err)\n      return Promise.reject(err)\n    })\n}\n\nconst validate: FormItemContext['validate'] = async (trigger, callback) => {\n  // skip validation if its resetting\n  if (isResettingField || !props.prop) {\n    return false\n  }\n\n  const hasCallback = isFunction(callback)\n  if (!validateEnabled.value) {\n    callback?.(false)\n    return false\n  }\n\n  const rules = getFilteredRule(trigger)\n  if (rules.length === 0) {\n    callback?.(true)\n    return true\n  }\n\n  setValidationState('validating')\n\n  return doValidate(rules)\n    .then(() => {\n      callback?.(true)\n      return true as const\n    })\n    .catch((err: FormValidateFailure) => {\n      const { fields } = err\n      callback?.(false, fields)\n      return hasCallback ? false : Promise.reject(fields)\n    })\n}\n\nconst clearValidate: FormItemContext['clearValidate'] = () => {\n  setValidationState('')\n  validateMessage.value = ''\n  isResettingField = false\n}\n\nconst resetField: FormItemContext['resetField'] = async () => {\n  const model = formContext?.model\n  if (!model || !props.prop) return\n\n  const computedValue = getProp(model, props.prop)\n\n  // prevent validation from being triggered\n  isResettingField = true\n\n  computedValue.value = cloneDeep(initialValue)\n\n  await nextTick()\n  clearValidate()\n\n  isResettingField = false\n}\n\nconst addInputId: FormItemContext['addInputId'] = (id: string) => {\n  if (!inputIds.value.includes(id)) {\n    inputIds.value.push(id)\n  }\n}\n\nconst removeInputId: FormItemContext['removeInputId'] = (id: string) => {\n  inputIds.value = inputIds.value.filter((listId) => listId !== id)\n}\n\nconst setInitialValue: FormItemContext['setInitialValue'] = (value: any) => {\n  initialValue = cloneDeep(value)\n}\n\nconst getInitialValue: FormItemContext['getInitialValue'] = () => initialValue\n\nwatch(\n  () => props.error,\n  (val) => {\n    validateMessage.value = val || ''\n    setValidationState(val ? 'error' : '')\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => props.validateStatus,\n  (val) => setValidationState(val || '')\n)\n\nconst context: FormItemContext = reactive({\n  ...toRefs(props),\n  $el: formItemRef,\n  size: _size,\n  validateMessage,\n  validateState,\n  labelId,\n  inputIds,\n  isGroup,\n  hasLabel,\n  fieldValue,\n  addInputId,\n  removeInputId,\n  resetField,\n  clearValidate,\n  validate,\n  propString,\n  setInitialValue,\n  getInitialValue,\n})\n\nprovide(formItemContextKey, context)\n\nwatch(propString, (newPropString, oldPropString) => {\n  if (!formContext || !oldPropString) return\n  formContext.removeField(context, oldPropString)\n  if (newPropString) {\n    setInitialValue(fieldValue.value)\n    formContext.addField(context)\n  }\n})\n\nonMounted(() => {\n  if (props.prop) {\n    setInitialValue(fieldValue.value)\n    formContext?.addField(context)\n  }\n})\n\nonBeforeUnmount(() => {\n  formContext?.removeField(context)\n})\n\ndefineExpose({\n  /**\n   * @description Form item size.\n   */\n  size: _size,\n  /**\n   * @description Validation message.\n   */\n  validateMessage,\n  /**\n   * @description Validation state.\n   */\n  validateState,\n  /**\n   * @description Validate form item.\n   */\n  validate,\n  /**\n   * @description Remove validation status of the field.\n   */\n  clearValidate,\n  /**\n   * @description Reset current field and remove validation result.\n   */\n  resetField,\n  /**\n   * @description Set initial value for this field. When `resetField` is called, the field will reset to this value.\n   */\n  setInitialValue,\n})\n</script>\n"],"mappings":"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"}

package/lib/components/form/src/form-item2.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-item2.js","names":[],"sources":["../../../../../../packages/components/form/src/form-item.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"formItemRef\"\n    :class=\"formItemClasses\"\n    :role=\"isGroup ? 'group' : undefined\"\n    :aria-labelledby=\"isGroup ? labelId : undefined\"\n  >\n    <form-label-wrap\n      :is-auto-width=\"labelStyle.width === 'auto'\"\n      :update-all=\"formContext?.labelWidth === 'auto'\"\n    >\n      <component\n        :is=\"labelFor ? 'label' : 'div'\"\n        v-if=\"!!(label || $slots.label)\"\n        :id=\"labelId\"\n        :for=\"labelFor\"\n        :class=\"ns.e('label')\"\n        :style=\"labelStyle\"\n      >\n        <slot name=\"label\" :label=\"currentLabel\">\n          {{ currentLabel }}\n        </slot>\n      </component>\n    </form-label-wrap>\n\n    <div :class=\"ns.e('content')\" :style=\"contentStyle\">\n      <slot />\n      <transition-group :name=\"`${ns.namespace.value}-zoom-in-top`\">\n        <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n          <div :class=\"validateClasses\">\n            {{ validateMessage }}\n          </div>\n        </slot>\n      </transition-group>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  useSlots,\n  watch,\n} from 'vue'\nimport AsyncValidator from 'async-validator'\nimport { refDebounced } from '@vueuse/core'\nimport {\n  addUnit,\n  ensureArray,\n  getProp,\n  isArray,\n  isBoolean,\n  isFunction,\n} from '@element-plus/utils'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { useFormSize } from './hooks'\nimport FormLabelWrap from './form-label-wrap'\nimport { formContextKey, formItemContextKey } from './constants'\nimport { cloneDeep } from 'lodash-unified'\n\nimport type { CSSProperties } from 'vue'\nimport type { RuleItem } from 'async-validator'\nimport type { Arrayable } from '@element-plus/utils'\nimport type {\n  FormItemContext,\n  FormItemRule,\n  FormValidateFailure,\n} from './types'\nimport type { FormItemProps, FormItemValidateState } from './form-item'\n\ndefineOptions({\n  name: 'ElFormItem',\n})\nconst props = withDefaults(defineProps<FormItemProps>(), {\n  labelPosition: '',\n  showMessage: true,\n  required: undefined,\n  inlineMessage: undefined,\n})\nconst slots = useSlots()\n\nconst formContext = inject(formContextKey, undefined)\nconst parentFormItemContext = inject(formItemContextKey, undefined)\n\nconst _size = useFormSize(undefined, { formItem: false })\nconst ns = useNamespace('form-item')\n\nconst labelId = useId().value\nconst inputIds = ref<string[]>([])\n\nconst validateState = ref<FormItemValidateState>('')\nconst validateStateDebounced = refDebounced(validateState, 100)\nconst validateMessage = ref('')\nconst formItemRef = ref<HTMLDivElement>()\n// special inline value.\nlet initialValue: any = undefined\nlet isResettingField = false\n\nconst labelPosition = computed(\n  () => props.labelPosition || formContext?.labelPosition\n)\n\nconst labelStyle = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top') {\n    return {}\n  }\n\n  const labelWidth = addUnit(props.labelWidth ?? formContext?.labelWidth)\n  return { width: labelWidth }\n})\n\nconst contentStyle = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top' || formContext?.inline) {\n    return {}\n  }\n  if (!props.label && !props.labelWidth && isNested) {\n    return {}\n  }\n  const labelWidth = addUnit(props.labelWidth ?? formContext?.labelWidth)\n  if (!props.label && !slots.label) {\n    return { marginLeft: labelWidth }\n  }\n  return {}\n})\n\nconst formItemClasses = computed(() => [\n  ns.b(),\n  ns.m(_size.value),\n  ns.is('error', validateState.value === 'error'),\n  ns.is('validating', validateState.value === 'validating'),\n  ns.is('success', validateState.value === 'success'),\n  ns.is('required', isRequired.value || props.required),\n  ns.is('no-asterisk', formContext?.hideRequiredAsterisk),\n  formContext?.requireAsteriskPosition === 'right'\n    ? 'asterisk-right'\n    : 'asterisk-left',\n  {\n    [ns.m('feedback')]: formContext?.statusIcon,\n    [ns.m(`label-${labelPosition.value}`)]: labelPosition.value,\n  },\n])\n\nconst _inlineMessage = computed(() =>\n  isBoolean(props.inlineMessage)\n    ? props.inlineMessage\n    : formContext?.inlineMessage || false\n)\n\nconst validateClasses = computed(() => [\n  ns.e('error'),\n  { [ns.em('error', 'inline')]: _inlineMessage.value },\n])\n\nconst propString = computed(() => {\n  if (!props.prop) return ''\n  return isArray(props.prop) ? props.prop.join('.') : props.prop\n})\n\nconst hasLabel = computed<boolean>(() => {\n  return !!(props.label || slots.label)\n})\n\nconst labelFor = computed<string | undefined>(() => {\n  return (\n    props.for ?? (inputIds.value.length === 1 ? inputIds.value[0] : undefined)\n  )\n})\n\nconst isGroup = computed<boolean>(() => {\n  return !labelFor.value && hasLabel.value\n})\n\nconst isNested = !!parentFormItemContext\n\nconst fieldValue = computed(() => {\n  const model = formContext?.model\n  if (!model || !props.prop) {\n    return\n  }\n  return getProp(model, props.prop).value\n})\n\nconst normalizedRules = computed(() => {\n  const { required } = props\n\n  const rules: FormItemRule[] = []\n\n  if (props.rules) {\n    rules.push(...ensureArray(props.rules))\n  }\n\n  const formRules = formContext?.rules\n  if (formRules && props.prop) {\n    const _rules = getProp<Arrayable<FormItemRule> | undefined>(\n      formRules,\n      props.prop\n    ).value\n    if (_rules) {\n      rules.push(...ensureArray(_rules))\n    }\n  }\n\n  if (required !== undefined) {\n    const requiredRules = rules\n      .map((rule, i) => [rule, i] as const)\n      .filter(([rule]) => 'required' in rule)\n\n    if (requiredRules.length > 0) {\n      for (const [rule, i] of requiredRules) {\n        if (rule.required === required) continue\n        rules[i] = { ...rule, required }\n      }\n    } else {\n      rules.push({ required })\n    }\n  }\n\n  return rules\n})\n\nconst validateEnabled = computed(() => normalizedRules.value.length > 0)\n\nconst getFilteredRule = (trigger: string) => {\n  const rules = normalizedRules.value\n  return (\n    rules\n      .filter((rule) => {\n        if (!rule.trigger || !trigger) return true\n        if (isArray(rule.trigger)) {\n          return rule.trigger.includes(trigger)\n        } else {\n          return rule.trigger === trigger\n        }\n      })\n      // exclude trigger\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      .map(({ trigger, ...rule }): RuleItem => rule)\n  )\n}\n\nconst isRequired = computed(() =>\n  normalizedRules.value.some((rule) => rule.required)\n)\n\nconst shouldShowError = computed(\n  () =>\n    validateStateDebounced.value === 'error' &&\n    props.showMessage &&\n    (formContext?.showMessage ?? true)\n)\n\nconst currentLabel = computed(\n  () => `${props.label || ''}${formContext?.labelSuffix || ''}`\n)\n\nconst setValidationState = (state: FormItemValidateState) => {\n  validateState.value = state\n}\n\nconst onValidationFailed = (error: FormValidateFailure) => {\n  const { errors, fields } = error\n  if (!errors || !fields) {\n    console.error(error)\n  }\n\n  setValidationState('error')\n  validateMessage.value = errors\n    ? (errors?.[0]?.message ?? `${props.prop} is required`)\n    : ''\n\n  formContext?.emit('validate', props.prop!, false, validateMessage.value)\n}\n\nconst onValidationSucceeded = () => {\n  setValidationState('success')\n  formContext?.emit('validate', props.prop!, true, '')\n}\n\nconst doValidate = async (rules: RuleItem[]): Promise<true> => {\n  const modelName = propString.value\n  const validator = new AsyncValidator({\n    [modelName]: rules,\n  })\n  return validator\n    .validate({ [modelName]: fieldValue.value }, { firstFields: true })\n    .then(() => {\n      onValidationSucceeded()\n      return true as const\n    })\n    .catch((err: FormValidateFailure) => {\n      onValidationFailed(err)\n      return Promise.reject(err)\n    })\n}\n\nconst validate: FormItemContext['validate'] = async (trigger, callback) => {\n  // skip validation if its resetting\n  if (isResettingField || !props.prop) {\n    return false\n  }\n\n  const hasCallback = isFunction(callback)\n  if (!validateEnabled.value) {\n    callback?.(false)\n    return false\n  }\n\n  const rules = getFilteredRule(trigger)\n  if (rules.length === 0) {\n    callback?.(true)\n    return true\n  }\n\n  setValidationState('validating')\n\n  return doValidate(rules)\n    .then(() => {\n      callback?.(true)\n      return true as const\n    })\n    .catch((err: FormValidateFailure) => {\n      const { fields } = err\n      callback?.(false, fields)\n      return hasCallback ? false : Promise.reject(fields)\n    })\n}\n\nconst clearValidate: FormItemContext['clearValidate'] = () => {\n  setValidationState('')\n  validateMessage.value = ''\n  isResettingField = false\n}\n\nconst resetField: FormItemContext['resetField'] = async () => {\n  const model = formContext?.model\n  if (!model || !props.prop) return\n\n  const computedValue = getProp(model, props.prop)\n\n  // prevent validation from being triggered\n  isResettingField = true\n\n  computedValue.value = cloneDeep(initialValue)\n\n  await nextTick()\n  clearValidate()\n\n  isResettingField = false\n}\n\nconst addInputId: FormItemContext['addInputId'] = (id: string) => {\n  if (!inputIds.value.includes(id)) {\n    inputIds.value.push(id)\n  }\n}\n\nconst removeInputId: FormItemContext['removeInputId'] = (id: string) => {\n  inputIds.value = inputIds.value.filter((listId) => listId !== id)\n}\n\nconst setInitialValue: FormItemContext['setInitialValue'] = (value: any) => {\n  initialValue = cloneDeep(value)\n}\n\nwatch(\n  () => props.error,\n  (val) => {\n    validateMessage.value = val || ''\n    setValidationState(val ? 'error' : '')\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => props.validateStatus,\n  (val) => setValidationState(val || '')\n)\n\nconst context: FormItemContext = reactive({\n  ...toRefs(props),\n  $el: formItemRef,\n  size: _size,\n  validateMessage,\n  validateState,\n  labelId,\n  inputIds,\n  isGroup,\n  hasLabel,\n  fieldValue,\n  addInputId,\n  removeInputId,\n  resetField,\n  clearValidate,\n  validate,\n  propString,\n  setInitialValue,\n})\n\nprovide(formItemContextKey, context)\n\nonMounted(() => {\n  if (props.prop) {\n    setInitialValue(fieldValue.value)\n    formContext?.addField(context)\n  }\n})\n\nonBeforeUnmount(() => {\n  formContext?.removeField(context)\n})\n\ndefineExpose({\n  /**\n   * @description Form item size.\n   */\n  size: _size,\n  /**\n   * @description Validation message.\n   */\n  validateMessage,\n  /**\n   * @description Validation state.\n   */\n  validateState,\n  /**\n   * @description Validate form item.\n   */\n  validate,\n  /**\n   * @description Remove validation status of the field.\n   */\n  clearValidate,\n  /**\n   * @description Reset current field and remove validation result.\n   */\n  resetField,\n  /**\n   * @description Set initial value for this field. When `resetField` is called, the field will reset to this value.\n   */\n  setInitialValue,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"form-item2.js","names":[],"sources":["../../../../../../packages/components/form/src/form-item.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"formItemRef\"\n    :class=\"formItemClasses\"\n    :role=\"isGroup ? 'group' : undefined\"\n    :aria-labelledby=\"isGroup ? labelId : undefined\"\n  >\n    <form-label-wrap\n      :is-auto-width=\"labelStyle.width === 'auto'\"\n      :update-all=\"formContext?.labelWidth === 'auto'\"\n    >\n      <component\n        :is=\"labelFor ? 'label' : 'div'\"\n        v-if=\"!!(label || $slots.label)\"\n        :id=\"labelId\"\n        :for=\"labelFor\"\n        :class=\"ns.e('label')\"\n        :style=\"labelStyle\"\n      >\n        <slot name=\"label\" :label=\"currentLabel\">\n          {{ currentLabel }}\n        </slot>\n      </component>\n    </form-label-wrap>\n\n    <div :class=\"ns.e('content')\" :style=\"contentStyle\">\n      <slot />\n      <transition-group :name=\"`${ns.namespace.value}-zoom-in-top`\">\n        <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n          <div :class=\"validateClasses\">\n            {{ validateMessage }}\n          </div>\n        </slot>\n      </transition-group>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  useSlots,\n  watch,\n} from 'vue'\nimport AsyncValidator from 'async-validator'\nimport { refDebounced } from '@vueuse/core'\nimport {\n  addUnit,\n  ensureArray,\n  getProp,\n  isArray,\n  isBoolean,\n  isFunction,\n} from '@element-plus/utils'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { useFormSize } from './hooks'\nimport FormLabelWrap from './form-label-wrap'\nimport { formContextKey, formItemContextKey } from './constants'\nimport { cloneDeep } from 'lodash-unified'\n\nimport type { CSSProperties } from 'vue'\nimport type { RuleItem } from 'async-validator'\nimport type { Arrayable } from '@element-plus/utils'\nimport type {\n  FormItemContext,\n  FormItemRule,\n  FormValidateFailure,\n} from './types'\nimport type { FormItemProps, FormItemValidateState } from './form-item'\n\ndefineOptions({\n  name: 'ElFormItem',\n})\nconst props = withDefaults(defineProps<FormItemProps>(), {\n  labelPosition: '',\n  showMessage: true,\n  required: undefined,\n  inlineMessage: undefined,\n})\nconst slots = useSlots()\n\nconst formContext = inject(formContextKey, undefined)\nconst parentFormItemContext = inject(formItemContextKey, undefined)\n\nconst _size = useFormSize(undefined, { formItem: false })\nconst ns = useNamespace('form-item')\n\nconst labelId = useId().value\nconst inputIds = ref<string[]>([])\n\nconst validateState = ref<FormItemValidateState>('')\nconst validateStateDebounced = refDebounced(validateState, 100)\nconst validateMessage = ref('')\nconst formItemRef = ref<HTMLDivElement>()\n// special inline value.\nlet initialValue: any = undefined\nlet isResettingField = false\n\nconst labelPosition = computed(\n  () => props.labelPosition || formContext?.labelPosition\n)\n\nconst labelStyle = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top') {\n    return {}\n  }\n\n  const labelWidth = addUnit(props.labelWidth ?? formContext?.labelWidth)\n  return { width: labelWidth }\n})\n\nconst contentStyle = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top' || formContext?.inline) {\n    return {}\n  }\n  if (!props.label && !props.labelWidth && isNested) {\n    return {}\n  }\n  const labelWidth = addUnit(props.labelWidth ?? formContext?.labelWidth)\n  if (!props.label && !slots.label) {\n    return { marginLeft: labelWidth }\n  }\n  return {}\n})\n\nconst formItemClasses = computed(() => [\n  ns.b(),\n  ns.m(_size.value),\n  ns.is('error', validateState.value === 'error'),\n  ns.is('validating', validateState.value === 'validating'),\n  ns.is('success', validateState.value === 'success'),\n  ns.is('required', isRequired.value || props.required),\n  ns.is('no-asterisk', formContext?.hideRequiredAsterisk),\n  formContext?.requireAsteriskPosition === 'right'\n    ? 'asterisk-right'\n    : 'asterisk-left',\n  {\n    [ns.m('feedback')]: formContext?.statusIcon,\n    [ns.m(`label-${labelPosition.value}`)]: labelPosition.value,\n  },\n])\n\nconst _inlineMessage = computed(() =>\n  isBoolean(props.inlineMessage)\n    ? props.inlineMessage\n    : formContext?.inlineMessage || false\n)\n\nconst validateClasses = computed(() => [\n  ns.e('error'),\n  { [ns.em('error', 'inline')]: _inlineMessage.value },\n])\n\nconst propString = computed(() => {\n  if (!props.prop) return ''\n  return isArray(props.prop) ? props.prop.join('.') : props.prop\n})\n\nconst hasLabel = computed<boolean>(() => {\n  return !!(props.label || slots.label)\n})\n\nconst labelFor = computed<string | undefined>(() => {\n  return (\n    props.for ?? (inputIds.value.length === 1 ? inputIds.value[0] : undefined)\n  )\n})\n\nconst isGroup = computed<boolean>(() => {\n  return !labelFor.value && hasLabel.value\n})\n\nconst isNested = !!parentFormItemContext\n\nconst fieldValue = computed(() => {\n  const model = formContext?.model\n  if (!model || !props.prop) {\n    return\n  }\n  return getProp(model, props.prop).value\n})\n\nconst normalizedRules = computed(() => {\n  const { required } = props\n\n  const rules: FormItemRule[] = []\n\n  if (props.rules) {\n    rules.push(...ensureArray(props.rules))\n  }\n\n  const formRules = formContext?.rules\n  if (formRules && props.prop) {\n    const _rules = getProp<Arrayable<FormItemRule> | undefined>(\n      formRules,\n      props.prop\n    ).value\n    if (_rules) {\n      rules.push(...ensureArray(_rules))\n    }\n  }\n\n  if (required !== undefined) {\n    const requiredRules = rules\n      .map((rule, i) => [rule, i] as const)\n      .filter(([rule]) => 'required' in rule)\n\n    if (requiredRules.length > 0) {\n      for (const [rule, i] of requiredRules) {\n        if (rule.required === required) continue\n        rules[i] = { ...rule, required }\n      }\n    } else {\n      rules.push({ required })\n    }\n  }\n\n  return rules\n})\n\nconst validateEnabled = computed(() => normalizedRules.value.length > 0)\n\nconst getFilteredRule = (trigger: string) => {\n  const rules = normalizedRules.value\n  return (\n    rules\n      .filter((rule) => {\n        if (!rule.trigger || !trigger) return true\n        if (isArray(rule.trigger)) {\n          return rule.trigger.includes(trigger)\n        } else {\n          return rule.trigger === trigger\n        }\n      })\n      // exclude trigger\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      .map(({ trigger, ...rule }): RuleItem => rule)\n  )\n}\n\nconst isRequired = computed(() =>\n  normalizedRules.value.some((rule) => rule.required)\n)\n\nconst shouldShowError = computed(\n  () =>\n    validateStateDebounced.value === 'error' &&\n    props.showMessage &&\n    (formContext?.showMessage ?? true)\n)\n\nconst currentLabel = computed(\n  () => `${props.label || ''}${formContext?.labelSuffix || ''}`\n)\n\nconst setValidationState = (state: FormItemValidateState) => {\n  validateState.value = state\n}\n\nconst onValidationFailed = (error: FormValidateFailure) => {\n  const { errors, fields } = error\n  if (!errors || !fields) {\n    console.error(error)\n  }\n\n  setValidationState('error')\n  validateMessage.value = errors\n    ? (errors?.[0]?.message ?? `${props.prop} is required`)\n    : ''\n\n  formContext?.emit('validate', props.prop!, false, validateMessage.value)\n}\n\nconst onValidationSucceeded = () => {\n  setValidationState('success')\n  formContext?.emit('validate', props.prop!, true, '')\n}\n\nconst doValidate = async (rules: RuleItem[]): Promise<true> => {\n  const modelName = propString.value\n  const validator = new AsyncValidator({\n    [modelName]: rules,\n  })\n  return validator\n    .validate({ [modelName]: fieldValue.value }, { firstFields: true })\n    .then(() => {\n      onValidationSucceeded()\n      return true as const\n    })\n    .catch((err: FormValidateFailure) => {\n      onValidationFailed(err)\n      return Promise.reject(err)\n    })\n}\n\nconst validate: FormItemContext['validate'] = async (trigger, callback) => {\n  // skip validation if its resetting\n  if (isResettingField || !props.prop) {\n    return false\n  }\n\n  const hasCallback = isFunction(callback)\n  if (!validateEnabled.value) {\n    callback?.(false)\n    return false\n  }\n\n  const rules = getFilteredRule(trigger)\n  if (rules.length === 0) {\n    callback?.(true)\n    return true\n  }\n\n  setValidationState('validating')\n\n  return doValidate(rules)\n    .then(() => {\n      callback?.(true)\n      return true as const\n    })\n    .catch((err: FormValidateFailure) => {\n      const { fields } = err\n      callback?.(false, fields)\n      return hasCallback ? false : Promise.reject(fields)\n    })\n}\n\nconst clearValidate: FormItemContext['clearValidate'] = () => {\n  setValidationState('')\n  validateMessage.value = ''\n  isResettingField = false\n}\n\nconst resetField: FormItemContext['resetField'] = async () => {\n  const model = formContext?.model\n  if (!model || !props.prop) return\n\n  const computedValue = getProp(model, props.prop)\n\n  // prevent validation from being triggered\n  isResettingField = true\n\n  computedValue.value = cloneDeep(initialValue)\n\n  await nextTick()\n  clearValidate()\n\n  isResettingField = false\n}\n\nconst addInputId: FormItemContext['addInputId'] = (id: string) => {\n  if (!inputIds.value.includes(id)) {\n    inputIds.value.push(id)\n  }\n}\n\nconst removeInputId: FormItemContext['removeInputId'] = (id: string) => {\n  inputIds.value = inputIds.value.filter((listId) => listId !== id)\n}\n\nconst setInitialValue: FormItemContext['setInitialValue'] = (value: any) => {\n  initialValue = cloneDeep(value)\n}\n\nconst getInitialValue: FormItemContext['getInitialValue'] = () => initialValue\n\nwatch(\n  () => props.error,\n  (val) => {\n    validateMessage.value = val || ''\n    setValidationState(val ? 'error' : '')\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => props.validateStatus,\n  (val) => setValidationState(val || '')\n)\n\nconst context: FormItemContext = reactive({\n  ...toRefs(props),\n  $el: formItemRef,\n  size: _size,\n  validateMessage,\n  validateState,\n  labelId,\n  inputIds,\n  isGroup,\n  hasLabel,\n  fieldValue,\n  addInputId,\n  removeInputId,\n  resetField,\n  clearValidate,\n  validate,\n  propString,\n  setInitialValue,\n  getInitialValue,\n})\n\nprovide(formItemContextKey, context)\n\nwatch(propString, (newPropString, oldPropString) => {\n  if (!formContext || !oldPropString) return\n  formContext.removeField(context, oldPropString)\n  if (newPropString) {\n    setInitialValue(fieldValue.value)\n    formContext.addField(context)\n  }\n})\n\nonMounted(() => {\n  if (props.prop) {\n    setInitialValue(fieldValue.value)\n    formContext?.addField(context)\n  }\n})\n\nonBeforeUnmount(() => {\n  formContext?.removeField(context)\n})\n\ndefineExpose({\n  /**\n   * @description Form item size.\n   */\n  size: _size,\n  /**\n   * @description Validation message.\n   */\n  validateMessage,\n  /**\n   * @description Validation state.\n   */\n  validateState,\n  /**\n   * @description Validate form item.\n   */\n  validate,\n  /**\n   * @description Remove validation status of the field.\n   */\n  clearValidate,\n  /**\n   * @description Reset current field and remove validation result.\n   */\n  resetField,\n  /**\n   * @description Set initial value for this field. When `resetField` is called, the field will reset to this value.\n   */\n  setInitialValue,\n})\n</script>\n"],"mappings":""}

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

@@ -99,8 +99,8 @@ declare const formProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly labelPosition: EpPropFinalized<StringConstructor, "top" | "left" | "right", unknown, "right", boolean>;
-  readonly requireAsteriskPosition: EpPropFinalized<StringConstructor, "left" | "right", unknown, "left", boolean>;
+  readonly labelPosition: EpPropFinalized<StringConstructor, "right" | "left" | "top", unknown, "right", boolean>;
+  readonly requireAsteriskPosition: EpPropFinalized<StringConstructor, "right" | "left", unknown, "left", boolean>;
   readonly labelWidth: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
   readonly labelSuffix: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
   readonly inline: BooleanConstructor;