element-plus 2.14.2 → 2.14.3

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

@@ -86,7 +86,7 @@ declare const formItemProps: {
   };
   readonly error: StringConstructor;
   readonly validateStatus: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "success" | "error" | "validating", unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "error" | "success" | "validating", unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -95,7 +95,7 @@ declare const formItemProps: {
   readonly inlineMessage: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly showMessage: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

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

@@ -19,7 +19,7 @@ declare const __VLS_base: _$vue.DefineComponent<FormItemProps, {
   /**
    * @description Form item size.
    */
-  size: _$vue.ComputedRef<"" | "default" | "large" | "small">;
+  size: _$vue.ComputedRef<"" | "default" | "small" | "large">;
   /**
    * @description Validation message.
    */
@@ -27,7 +27,7 @@ declare const __VLS_base: _$vue.DefineComponent<FormItemProps, {
   /**
    * @description Validation state.
    */
-  validateState: _$vue.Ref<"" | "success" | "error" | "validating", "" | "success" | "error" | "validating">;
+  validateState: _$vue.Ref<"" | "error" | "success" | "validating", "" | "error" | "success" | "validating">;
   /**
    * @description Validate form item.
    */

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

@@ -22,7 +22,7 @@ interface FormMetaProps {
  */
 declare const formMetaProps: {
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -111,7 +111,7 @@ declare const formProps: {
   readonly scrollToError: BooleanConstructor;
   readonly scrollIntoViewOptions: EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | (((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions)) | null)[], unknown, unknown, true, boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/lib/components/form/src/hooks/use-form-common-props.d.ts

@@ -3,9 +3,9 @@ import * as _$vue from "vue";
 import { MaybeRef } from "vue";
 
 //#region ../../packages/components/form/src/hooks/use-form-common-props.d.ts
-declare const useFormSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => _$vue.ComputedRef<"" | "default" | "large" | "small">;
+declare const useFormSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => _$vue.ComputedRef<"" | "default" | "small" | "large">;
 declare const useFormDisabled: (fallback?: MaybeRef<boolean | undefined>) => _$vue.ComputedRef<boolean>;
-declare const useSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => _$vue.ComputedRef<"" | "default" | "large" | "small">;
+declare const useSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => _$vue.ComputedRef<"" | "default" | "small" | "large">;
 declare const useDisabled: (fallback?: MaybeRef<boolean | undefined>) => _$vue.ComputedRef<boolean>;
 //#endregion
 export { useDisabled, useFormDisabled, useFormSize, useSize };

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

@@ -34,28 +34,28 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: _$vue.DefineComponent<ImageProps, {
   /** @description manually open preview */showPreview: typeof clickHandler;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  show: () => void;
   close: () => void;
   error: (evt: Event) => void;
   load: (evt: Event) => void;
+  show: () => void;
   switch: (val: number) => void;
 }, string, _$vue.PublicProps, Readonly<ImageProps> & Readonly<{
-  onShow?: (() => any) | undefined;
   onClose?: (() => any) | undefined;
   onError?: ((evt: Event) => any) | undefined;
   onLoad?: ((evt: Event) => any) | undefined;
+  onShow?: (() => any) | undefined;
   onSwitch?: ((val: number) => any) | undefined;
 }>, {
   infinite: boolean;
-  scale: number;
-  src: string;
-  fit: ImageFitType;
   initialIndex: number;
   closeOnPressEscape: boolean;
-  previewSrcList: string[];
   zoomRate: number;
+  scale: number;
   minScale: number;
   maxScale: number;
+  src: string;
+  fit: ImageFitType;
+  previewSrcList: string[];
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/lib/components/image-viewer/src/image-viewer.vue.d.ts

@@ -36,24 +36,24 @@ declare const __VLS_base: _$vue.DefineComponent<ImageViewerProps, {
    */
   setActiveItem: typeof setActiveItem;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  rotate: (deg: number) => void;
   close: () => void;
   error: (evt: Event) => void;
   switch: (index: number) => void;
+  rotate: (deg: number) => void;
 }, string, _$vue.PublicProps, Readonly<ImageViewerProps> & Readonly<{
-  onRotate?: ((deg: number) => any) | undefined;
   onClose?: (() => any) | undefined;
   onError?: ((evt: Event) => any) | undefined;
   onSwitch?: ((index: number) => any) | undefined;
+  onRotate?: ((deg: number) => any) | undefined;
 }>, {
   infinite: boolean;
-  scale: number;
+  urlList: string[];
   initialIndex: number;
   closeOnPressEscape: boolean;
   zoomRate: number;
+  scale: number;
   minScale: number;
   maxScale: number;
-  urlList: string[];
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -155,12 +155,12 @@ interface InputProps {
  * @deprecated Removed after 3.0.0, Use `InputProps` instead.
  */
 declare const inputProps: {
-  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
+  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
   readonly name: StringConstructor;
   readonly ariaLabel: StringConstructor;
   readonly id: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -182,7 +182,7 @@ declare const inputProps: {
   };
   readonly type: EpPropFinalized<(new (...args: any[]) => string) | (() => InputType) | (((new (...args: any[]) => string) | (() => InputType)) | null)[], unknown, unknown, "text", boolean>;
   readonly resize: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "horizontal" | "vertical" | "none" | "both", unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "none" | "both" | "horizontal" | "vertical", unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

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

@@ -33,39 +33,39 @@ declare const __VLS_base: _$vue.DefineComponent<InputProps, {
   resizeTextarea: () => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   clear: (evt: MouseEvent | undefined) => void;
-  mouseenter: (evt: MouseEvent) => void;
-  mouseleave: (evt: MouseEvent) => void;
-  focus: (evt: FocusEvent) => void;
-  blur: (evt: FocusEvent) => void;
   "update:modelValue": (value: string) => void;
-  change: (value: string, evt?: Event | undefined) => void;
-  keydown: (evt: Event | KeyboardEvent) => void;
   input: (value: string) => void;
+  change: (value: string, evt?: Event | undefined) => void;
+  blur: (evt: FocusEvent) => void;
+  compositionend: (evt: CompositionEvent) => void;
   compositionstart: (evt: CompositionEvent) => void;
   compositionupdate: (evt: CompositionEvent) => void;
-  compositionend: (evt: CompositionEvent) => void;
+  focus: (evt: FocusEvent) => void;
+  keydown: (evt: Event | KeyboardEvent) => void;
+  mouseenter: (evt: MouseEvent) => void;
+  mouseleave: (evt: MouseEvent) => void;
 }, string, _$vue.PublicProps, Readonly<InputProps> & Readonly<{
   onClear?: ((evt: MouseEvent | undefined) => any) | undefined;
-  onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-  onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-  onFocus?: ((evt: FocusEvent) => any) | undefined;
-  onBlur?: ((evt: FocusEvent) => any) | undefined;
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onChange?: ((value: string, evt?: Event | undefined) => any) | undefined;
-  onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
   onInput?: ((value: string) => any) | undefined;
+  onChange?: ((value: string, evt?: Event | undefined) => any) | undefined;
+  onBlur?: ((evt: FocusEvent) => any) | undefined;
+  onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
   onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
   onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-  onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+  onFocus?: ((evt: FocusEvent) => any) | undefined;
+  onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+  onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+  onMouseleave?: ((evt: MouseEvent) => any) | undefined;
 }>, {
   type: InputType;
-  disabled: boolean;
   modelValue: string | number | null;
-  clearIcon: IconPropType;
+  disabled: boolean;
   tabindex: string | number;
   validateEvent: boolean;
   modelModifiers: InputModelModifiers;
   autocomplete: string;
+  clearIcon: IconPropType;
   wordLimitPosition: "inside" | "outside";
   inputStyle: string | false | _$vue.CSSProperties | StyleValue[] | null;
   rows: number;

package/lib/components/input-number/src/input-number.d.ts

@@ -106,8 +106,8 @@ interface InputNumberProps {
  * @deprecated Removed after 3.0.0, Use `InputNumberProps` instead.
  */
 declare const inputNumberProps: {
-  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
-  readonly align: EpPropFinalized<(new (...args: any[]) => "left" | "center" | "right") | (() => "left" | "center" | "right") | (((new (...args: any[]) => "left" | "center" | "right") | (() => "left" | "center" | "right")) | null)[], unknown, unknown, "center", boolean>;
+  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
+  readonly align: EpPropFinalized<(new (...args: any[]) => "center" | "left" | "right") | (() => "center" | "left" | "right") | (((new (...args: any[]) => "center" | "left" | "right") | (() => "center" | "left" | "right")) | null)[], unknown, unknown, "center", boolean>;
   readonly disabledScientific: BooleanConstructor;
   readonly formatter: {
     readonly type: _$vue.PropType<Function>;
@@ -137,7 +137,7 @@ declare const inputNumberProps: {
   readonly readonly: BooleanConstructor;
   readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/lib/components/input-number/src/input-number.vue.d.ts

@@ -16,28 +16,28 @@ declare const __VLS_base: _$vue.DefineComponent<InputNumberProps, {
   /** @description get focus the input component */focus: () => void; /** @description remove focus the input component */
   blur: () => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  focus: (e: FocusEvent) => void;
-  blur: (e: FocusEvent) => void;
   "update:modelValue": (val: number | undefined) => void;
-  change: (cur: number | undefined, prev: number | undefined) => void;
   input: (val: number | null | undefined) => void;
+  change: (cur: number | undefined, prev: number | undefined) => void;
+  blur: (e: FocusEvent) => void;
+  focus: (e: FocusEvent) => void;
 }, string, _$vue.PublicProps, Readonly<InputNumberProps> & Readonly<{
-  onFocus?: ((e: FocusEvent) => any) | undefined;
-  onBlur?: ((e: FocusEvent) => any) | undefined;
   "onUpdate:modelValue"?: ((val: number | undefined) => any) | undefined;
-  onChange?: ((cur: number | undefined, prev: number | undefined) => any) | undefined;
   onInput?: ((val: number | null | undefined) => any) | undefined;
+  onChange?: ((cur: number | undefined, prev: number | undefined) => any) | undefined;
+  onBlur?: ((e: FocusEvent) => any) | undefined;
+  onFocus?: ((e: FocusEvent) => any) | undefined;
 }>, {
-  id: string;
   disabled: boolean;
+  id: string;
   tabindex: string | number;
   validateEvent: boolean;
-  valueOnClear: "min" | "max" | number | null;
-  readonly: boolean;
-  inputmode: "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal";
   min: number;
   max: number;
+  valueOnClear: "min" | "max" | number | null;
   align: "left" | "right" | "center";
+  readonly: boolean;
+  inputmode: "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal";
   step: number;
   stepStrictly: boolean;
   controls: boolean;

package/lib/components/input-otp/src/input-otp.d.ts

@@ -33,7 +33,7 @@ interface InputOtpProps extends Pick<AriaProps, 'ariaLabel'> {
   type?: 'outlined' | 'filled' | 'underlined';
   /**
    * @description The size of the OTP fields
-   * @default 'default'
+   * @default undefined
    */
   size?: ComponentSize;
   /**

package/lib/components/input-otp/src/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":["UPDATE_MODEL_EVENT","CHANGE_EVENT"],"sources":["../../../../../../packages/components/input-otp/src/input-otp.ts"],"sourcesContent":["import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { isString } from '@element-plus/utils'\n\nimport type { InputHTMLAttributes, VNode } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { AriaProps } from '@element-plus/hooks'\n\nexport interface InputOtpProps extends Pick<AriaProps, 'ariaLabel'> {\n  /**\n   * @description The value of the OTP fields.\n   *\n   * Since numbers must not have leading zeros, `modelValue` is allowed to be a number only during initialization.\n   *\n   * @default undefined\n   */\n  modelValue?: string | number\n  /**\n   * @description The OTP fields length\n   * @default 6\n   */\n  length?: number\n  /**\n   * @description Custom validator function\n   * @default () => true\n   */\n  validator?: (char: string, index: number) => boolean\n  /**\n   * @description Native input mode for virtual keyboards\n   */\n  inputmode?: InputHTMLAttributes['inputmode']\n  /**\n   * @description The type of the OTP fields\n   * @default 'outlined'\n   */\n  type?: 'outlined' | 'filled' | 'underlined'\n  /**\n   * @description The size of the OTP fields\n   * @default 'default'\n   */\n  size?: ComponentSize\n  /**\n   * @description Whether to enable password mode\n   */\n  mask?: boolean\n  /**\n   * @description Whether the OTP fields are disabled\n   * @default undefined\n   */\n  disabled?: boolean\n  /**\n   * @description Same as `readonly` in native input\n   */\n  readonly?: boolean\n  /**\n   * @description Same as `id` in native input\n   */\n  id?: string\n  /**\n   * @description Whether to trigger form validation\n   */\n  validateEvent?: boolean\n  /**\n   * @description The separator between OTP fields\n   */\n  separator?: string | VNode | ((index: number) => string | VNode)\n}\n\nexport const inputOtpEmits = {\n  [UPDATE_MODEL_EVENT]: (value: string) => isString(value),\n  [CHANGE_EVENT]: (value: string) => isString(value),\n  finish: (value: string) => isString(value),\n  focus: (eve: FocusEvent) => eve instanceof FocusEvent,\n  blur: (eve: FocusEvent) => eve instanceof FocusEvent,\n}\n\nexport type InputOtpEmits = typeof inputOtpEmits\n"],"mappings":";;;;;AAmEA,MAAa,gBAAgB;EAC1BA,cAAAA,sBAAsB,WAAA,GAAA,YAAA,UAA2B,MAAM;EACvDC,cAAAA,gBAAgB,WAAA,GAAA,YAAA,UAA2B,MAAM;CAClD,SAAS,WAAA,GAAA,YAAA,UAA2B,MAAM;CAC1C,QAAQ,QAAoB,eAAe;CAC3C,OAAO,QAAoB,eAAe;CAC3C"}
+{"version":3,"file":"input-otp.js","names":["UPDATE_MODEL_EVENT","CHANGE_EVENT"],"sources":["../../../../../../packages/components/input-otp/src/input-otp.ts"],"sourcesContent":["import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { isString } from '@element-plus/utils'\n\nimport type { InputHTMLAttributes, VNode } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { AriaProps } from '@element-plus/hooks'\n\nexport interface InputOtpProps extends Pick<AriaProps, 'ariaLabel'> {\n  /**\n   * @description The value of the OTP fields.\n   *\n   * Since numbers must not have leading zeros, `modelValue` is allowed to be a number only during initialization.\n   *\n   * @default undefined\n   */\n  modelValue?: string | number\n  /**\n   * @description The OTP fields length\n   * @default 6\n   */\n  length?: number\n  /**\n   * @description Custom validator function\n   * @default () => true\n   */\n  validator?: (char: string, index: number) => boolean\n  /**\n   * @description Native input mode for virtual keyboards\n   */\n  inputmode?: InputHTMLAttributes['inputmode']\n  /**\n   * @description The type of the OTP fields\n   * @default 'outlined'\n   */\n  type?: 'outlined' | 'filled' | 'underlined'\n  /**\n   * @description The size of the OTP fields\n   * @default undefined\n   */\n  size?: ComponentSize\n  /**\n   * @description Whether to enable password mode\n   */\n  mask?: boolean\n  /**\n   * @description Whether the OTP fields are disabled\n   * @default undefined\n   */\n  disabled?: boolean\n  /**\n   * @description Same as `readonly` in native input\n   */\n  readonly?: boolean\n  /**\n   * @description Same as `id` in native input\n   */\n  id?: string\n  /**\n   * @description Whether to trigger form validation\n   */\n  validateEvent?: boolean\n  /**\n   * @description The separator between OTP fields\n   */\n  separator?: string | VNode | ((index: number) => string | VNode)\n}\n\nexport const inputOtpEmits = {\n  [UPDATE_MODEL_EVENT]: (value: string) => isString(value),\n  [CHANGE_EVENT]: (value: string) => isString(value),\n  finish: (value: string) => isString(value),\n  focus: (eve: FocusEvent) => eve instanceof FocusEvent,\n  blur: (eve: FocusEvent) => eve instanceof FocusEvent,\n}\n\nexport type InputOtpEmits = typeof inputOtpEmits\n"],"mappings":";;;;;AAmEA,MAAa,gBAAgB;EAC1BA,cAAAA,sBAAsB,WAAA,GAAA,YAAA,UAA2B,MAAM;EACvDC,cAAAA,gBAAgB,WAAA,GAAA,YAAA,UAA2B,MAAM;CAClD,SAAS,WAAA,GAAA,YAAA,UAA2B,MAAM;CAC1C,QAAQ,QAAoB,eAAe;CAC3C,OAAO,QAAoB,eAAe;CAC3C"}

package/lib/components/input-otp/src/input-otp.vue.d.ts

@@ -1,4 +1,3 @@
-import { ComponentSize } from "../../../constants/size.js";
 import { InputOtpProps } from "./input-otp.js";
 import * as _$vue from "vue";
 
@@ -23,24 +22,23 @@ declare const __VLS_base: _$vue.DefineComponent<InputOtpProps, {
    */
   blur: () => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  focus: (eve: FocusEvent) => void;
-  blur: (eve: FocusEvent) => void;
   "update:modelValue": (value: string) => void;
-  change: (value: string) => void;
   finish: (value: string) => void;
+  change: (value: string) => void;
+  blur: (eve: FocusEvent) => void;
+  focus: (eve: FocusEvent) => void;
 }, string, _$vue.PublicProps, Readonly<InputOtpProps> & Readonly<{
-  onFocus?: ((eve: FocusEvent) => any) | undefined;
-  onBlur?: ((eve: FocusEvent) => any) | undefined;
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onChange?: ((value: string) => any) | undefined;
   onFinish?: ((value: string) => any) | undefined;
+  onChange?: ((value: string) => any) | undefined;
+  onBlur?: ((eve: FocusEvent) => any) | undefined;
+  onFocus?: ((eve: FocusEvent) => any) | undefined;
 }>, {
   type: "outlined" | "filled" | "underlined";
-  validator: (char: string, index: number) => boolean;
   length: number;
-  size: ComponentSize;
   disabled: boolean;
   validateEvent: boolean;
+  validator: (char: string, index: number) => boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/lib/components/input-otp/src/input-otp.vue_vue_type_script_setup_true_lang.js

@@ -57,8 +57,7 @@ var input_otp_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 		},
 		size: {
 			type: null,
-			required: false,
-			default: "default"
+			required: false
 		},
 		mask: {
 			type: Boolean,
@@ -115,6 +114,7 @@ var input_otp_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 		const { t } = require_index.useLocale();
 		const { formItem } = require_use_form_item.useFormItem();
 		const { inputId, isLabeledByFormItem } = require_use_form_item.useFormItemInputId(props, { formItemContext: formItem });
+		const size = require_use_form_common_props.useFormSize();
 		const disabled = require_use_form_common_props.useFormDisabled();
 		let modelValueOnFocus = props.modelValue;
 		const getFirstIndex = (maxIndex) => {
@@ -244,7 +244,7 @@ var input_otp_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 				id: (0, vue.unref)(inputId),
 				class: (0, vue.normalizeClass)([
 					(0, vue.unref)(ns).b(),
-					(0, vue.unref)(ns).m(__props.size),
+					(0, vue.unref)(ns).m((0, vue.unref)(size)),
 					(0, vue.unref)(ns).m(__props.type),
 					(0, vue.unref)(ns).is("disabled", (0, vue.unref)(disabled))
 				]),

package/lib/components/input-otp/src/input-otp.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../../packages/components/input-otp/src/input-otp.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"inputId\"\n    :class=\"[ns.b(), ns.m(size), ns.m(type), ns.is('disabled', disabled)]\"\n    role=\"group\"\n    :aria-label=\"\n      !isLabeledByFormItem\n        ? ariaLabel || t('el.inputOTP.groupLabel')\n        : undefined\n    \"\n    :aria-labelledby=\"isLabeledByFormItem ? formItem?.labelId : undefined\"\n  >\n    <template v-for=\"(_, index) in length\" :key=\"index\">\n      <label :class=\"ns.e('input-field')\">\n        <input\n          ref=\"inputRefs\"\n          :value=\"innerValue[index]\"\n          :class=\"ns.e('input')\"\n          :type=\"mask ? 'password' : 'text'\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :inputmode=\"inputmode\"\n          autocomplete=\"one-time-code\"\n          :aria-label=\"t('el.inputOTP.defaultLabel', { index: index + 1 })\"\n          @focus=\"handleFocus\"\n          @blur=\"handleBlur\"\n          @click=\"focus(index)\"\n          @keydown=\"handleKeydown($event, index)\"\n          @input=\"handleInput($event, index)\"\n        />\n      </label>\n      <slot\n        v-if=\"($slots.separator || separators[index]) && index < length - 1\"\n        name=\"separator\"\n        :index=\"index\"\n      >\n        <component :is=\"() => separators[index]\" />\n      </slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue'\nimport { clamp } from '@vueuse/core'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { NOOP, getEventCode, isFunction, rAF } from '@element-plus/utils'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n} from '@element-plus/components/form'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { inputOtpEmits } from './input-otp'\n\nimport type { InputOtpProps } from './input-otp'\n\ndefineOptions({\n  name: 'ElInputOtp',\n})\n\nconst props = withDefaults(defineProps<InputOtpProps>(), {\n  length: 6,\n  validator: () => true,\n  type: 'outlined',\n  size: 'default',\n  disabled: undefined,\n  validateEvent: true,\n})\nconst emit = defineEmits(inputOtpEmits)\n\nconst initialValue = computed(() => {\n  const value = String(props.modelValue ?? '')\n  return Array.from({ length: props.length }, (_, i) => value.charAt(i))\n})\n\nconst separators = computed(() => {\n  const { separator } = props\n  const _separator = isFunction(separator) ? separator : () => separator\n  return Array.from({ length: props.length - 1 }, (_, i) => _separator(i))\n})\n\nconst innerValue = ref<string[]>(initialValue.value)\nconst isFocused = ref(false)\nconst inputRefs = ref<(HTMLInputElement | undefined)[]>([])\n\nconst ns = useNamespace('input-otp')\nconst { t } = useLocale()\nconst { formItem } = useFormItem()\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\nconst disabled = useFormDisabled()\nlet modelValueOnFocus = props.modelValue\n\nconst getFirstIndex = (maxIndex: number) => {\n  const index = innerValue.value.findIndex((char, i) => !char && i <= maxIndex)\n  return index === -1 ? maxIndex : index\n}\n\nconst handleFocus = (event: FocusEvent) => {\n  if (inputRefs.value?.includes(event.relatedTarget as any)) {\n    return\n  }\n\n  isFocused.value = true\n  emit('focus', event)\n}\n\nconst handleBlur = (event: FocusEvent) => {\n  if (inputRefs.value?.includes(event.relatedTarget as any)) {\n    return\n  }\n\n  isFocused.value = false\n  emit('blur', event)\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch(NOOP)\n  }\n}\n\nconst updateModelValue = (emitFinish = true) => {\n  const value = innerValue.value.join('').slice(0, props.length)\n  if (value !== props.modelValue) {\n    emit(UPDATE_MODEL_EVENT, value)\n    if (emitFinish && value.length === props.length) {\n      emit('finish', value)\n    }\n  }\n}\n\nconst handleKeydown = (event: KeyboardEvent, index: number) => {\n  const code = getEventCode(event)\n  let preventDefault = true\n\n  switch (code) {\n    case EVENT_CODE.backspace:\n      if (props.readonly) break\n      innerValue.value[index] = ''\n      focus(index - 1)\n      updateModelValue()\n      break\n    case EVENT_CODE.delete:\n      if (props.readonly) break\n      innerValue.value[index] = ''\n      focus(index)\n      updateModelValue()\n      break\n    case EVENT_CODE.up:\n    case EVENT_CODE.left:\n      focus(index - 1)\n      break\n    case EVENT_CODE.down:\n    case EVENT_CODE.right:\n      focus(index + 1)\n      break\n    default:\n      preventDefault = false\n  }\n\n  if (preventDefault) {\n    event.preventDefault()\n  }\n}\n\nconst handleInput = (event: Event, index: number) => {\n  const target = event.target as HTMLInputElement\n  const targetIndex = getFirstIndex(index)\n  let focusIndex = targetIndex + 1\n  let value = target.value\n\n  // Safari and Firefox do not trigger the paste event during autofill,\n  // so the paste logic needs to be handled in the input event\n  if (value.length > 1) {\n    const chars = castValues(value, targetIndex)\n\n    // Avoid innerValue inconsistency with the input box value after pasting when char has no change\n    target.value = innerValue.value[index] ?? ''\n\n    chars.forEach((char, i) => (innerValue.value[targetIndex + i] = char))\n    focus(targetIndex + chars.length)\n    updateModelValue()\n    return\n  }\n\n  if (!props.validator(value, targetIndex)) {\n    target.value = innerValue.value[index] ?? ''\n    value = target.value\n    focusIndex = targetIndex\n  }\n\n  innerValue.value[targetIndex] = value\n  if (targetIndex !== index) {\n    target.value = innerValue.value[index] ?? ''\n  }\n  focus(focusIndex)\n  updateModelValue()\n}\n\nconst castValues = (value: InputOtpProps['modelValue'], startIndex = 0) => {\n  const chars = `${value ?? ''}`.split('')\n  const result: string[] = []\n  for (const char of chars) {\n    if (result.length + startIndex >= props.length) {\n      break\n    }\n    if (props.validator(char, result.length + startIndex)) {\n      result.push(char)\n    }\n  }\n  return result\n}\n\nconst focus = (index: number = 0) => {\n  const focusIndex = clamp(index, 0, props.length - 1)\n  const target = inputRefs.value?.[focusIndex]\n\n  if (document.activeElement !== target) {\n    target?.focus()\n  }\n  rAF(() => {\n    // When it is called, the focus may have already been captured by another element.\n    // e.g. typing quickly and deleting.\n    if (!props.readonly && document.activeElement === target) {\n      ;(target as HTMLInputElement | null)?.select()\n    }\n  })\n}\n\nconst blur = () => {\n  const target = inputRefs.value?.find(\n    (input) => document.activeElement === input\n  )\n  target?.blur()\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    innerValue.value = initialValue.value\n\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch(NOOP)\n    }\n  }\n)\n\nwatch(\n  () => props.length,\n  () => {\n    innerValue.value = initialValue.value\n    updateModelValue(false)\n  }\n)\n\nwatch(isFocused, (value) => {\n  if (value) {\n    modelValueOnFocus = props.modelValue\n    return\n  }\n  if (modelValueOnFocus !== props.modelValue) {\n    emit(CHANGE_EVENT, props.modelValue as string)\n  }\n})\n\ndefineExpose({\n  /**\n   * @description HTML input elements array\n   */\n  inputRefs,\n  /**\n   * @description Focus an OTP input field\n   */\n  focus,\n  /**\n   * @description Blur the focused OTP input field\n   */\n  blur,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"input-otp.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../../packages/components/input-otp/src/input-otp.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"inputId\"\n    :class=\"[ns.b(), ns.m(size), ns.m(type), ns.is('disabled', disabled)]\"\n    role=\"group\"\n    :aria-label=\"\n      !isLabeledByFormItem\n        ? ariaLabel || t('el.inputOTP.groupLabel')\n        : undefined\n    \"\n    :aria-labelledby=\"isLabeledByFormItem ? formItem?.labelId : undefined\"\n  >\n    <template v-for=\"(_, index) in length\" :key=\"index\">\n      <label :class=\"ns.e('input-field')\">\n        <input\n          ref=\"inputRefs\"\n          :value=\"innerValue[index]\"\n          :class=\"ns.e('input')\"\n          :type=\"mask ? 'password' : 'text'\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :inputmode=\"inputmode\"\n          autocomplete=\"one-time-code\"\n          :aria-label=\"t('el.inputOTP.defaultLabel', { index: index + 1 })\"\n          @focus=\"handleFocus\"\n          @blur=\"handleBlur\"\n          @click=\"focus(index)\"\n          @keydown=\"handleKeydown($event, index)\"\n          @input=\"handleInput($event, index)\"\n        />\n      </label>\n      <slot\n        v-if=\"($slots.separator || separators[index]) && index < length - 1\"\n        name=\"separator\"\n        :index=\"index\"\n      >\n        <component :is=\"() => separators[index]\" />\n      </slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue'\nimport { clamp } from '@vueuse/core'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { NOOP, getEventCode, isFunction, rAF } from '@element-plus/utils'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { inputOtpEmits } from './input-otp'\n\nimport type { InputOtpProps } from './input-otp'\n\ndefineOptions({\n  name: 'ElInputOtp',\n})\n\nconst props = withDefaults(defineProps<InputOtpProps>(), {\n  length: 6,\n  validator: () => true,\n  type: 'outlined',\n  disabled: undefined,\n  validateEvent: true,\n})\nconst emit = defineEmits(inputOtpEmits)\n\nconst initialValue = computed(() => {\n  const value = String(props.modelValue ?? '')\n  return Array.from({ length: props.length }, (_, i) => value.charAt(i))\n})\n\nconst separators = computed(() => {\n  const { separator } = props\n  const _separator = isFunction(separator) ? separator : () => separator\n  return Array.from({ length: props.length - 1 }, (_, i) => _separator(i))\n})\n\nconst innerValue = ref<string[]>(initialValue.value)\nconst isFocused = ref(false)\nconst inputRefs = ref<(HTMLInputElement | undefined)[]>([])\n\nconst ns = useNamespace('input-otp')\nconst { t } = useLocale()\nconst { formItem } = useFormItem()\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\nconst size = useFormSize()\nconst disabled = useFormDisabled()\nlet modelValueOnFocus = props.modelValue\n\nconst getFirstIndex = (maxIndex: number) => {\n  const index = innerValue.value.findIndex((char, i) => !char && i <= maxIndex)\n  return index === -1 ? maxIndex : index\n}\n\nconst handleFocus = (event: FocusEvent) => {\n  if (inputRefs.value?.includes(event.relatedTarget as any)) {\n    return\n  }\n\n  isFocused.value = true\n  emit('focus', event)\n}\n\nconst handleBlur = (event: FocusEvent) => {\n  if (inputRefs.value?.includes(event.relatedTarget as any)) {\n    return\n  }\n\n  isFocused.value = false\n  emit('blur', event)\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch(NOOP)\n  }\n}\n\nconst updateModelValue = (emitFinish = true) => {\n  const value = innerValue.value.join('').slice(0, props.length)\n  if (value !== props.modelValue) {\n    emit(UPDATE_MODEL_EVENT, value)\n    if (emitFinish && value.length === props.length) {\n      emit('finish', value)\n    }\n  }\n}\n\nconst handleKeydown = (event: KeyboardEvent, index: number) => {\n  const code = getEventCode(event)\n  let preventDefault = true\n\n  switch (code) {\n    case EVENT_CODE.backspace:\n      if (props.readonly) break\n      innerValue.value[index] = ''\n      focus(index - 1)\n      updateModelValue()\n      break\n    case EVENT_CODE.delete:\n      if (props.readonly) break\n      innerValue.value[index] = ''\n      focus(index)\n      updateModelValue()\n      break\n    case EVENT_CODE.up:\n    case EVENT_CODE.left:\n      focus(index - 1)\n      break\n    case EVENT_CODE.down:\n    case EVENT_CODE.right:\n      focus(index + 1)\n      break\n    default:\n      preventDefault = false\n  }\n\n  if (preventDefault) {\n    event.preventDefault()\n  }\n}\n\nconst handleInput = (event: Event, index: number) => {\n  const target = event.target as HTMLInputElement\n  const targetIndex = getFirstIndex(index)\n  let focusIndex = targetIndex + 1\n  let value = target.value\n\n  // Safari and Firefox do not trigger the paste event during autofill,\n  // so the paste logic needs to be handled in the input event\n  if (value.length > 1) {\n    const chars = castValues(value, targetIndex)\n\n    // Avoid innerValue inconsistency with the input box value after pasting when char has no change\n    target.value = innerValue.value[index] ?? ''\n\n    chars.forEach((char, i) => (innerValue.value[targetIndex + i] = char))\n    focus(targetIndex + chars.length)\n    updateModelValue()\n    return\n  }\n\n  if (!props.validator(value, targetIndex)) {\n    target.value = innerValue.value[index] ?? ''\n    value = target.value\n    focusIndex = targetIndex\n  }\n\n  innerValue.value[targetIndex] = value\n  if (targetIndex !== index) {\n    target.value = innerValue.value[index] ?? ''\n  }\n  focus(focusIndex)\n  updateModelValue()\n}\n\nconst castValues = (value: InputOtpProps['modelValue'], startIndex = 0) => {\n  const chars = `${value ?? ''}`.split('')\n  const result: string[] = []\n  for (const char of chars) {\n    if (result.length + startIndex >= props.length) {\n      break\n    }\n    if (props.validator(char, result.length + startIndex)) {\n      result.push(char)\n    }\n  }\n  return result\n}\n\nconst focus = (index: number = 0) => {\n  const focusIndex = clamp(index, 0, props.length - 1)\n  const target = inputRefs.value?.[focusIndex]\n\n  if (document.activeElement !== target) {\n    target?.focus()\n  }\n  rAF(() => {\n    // When it is called, the focus may have already been captured by another element.\n    // e.g. typing quickly and deleting.\n    if (!props.readonly && document.activeElement === target) {\n      ;(target as HTMLInputElement | null)?.select()\n    }\n  })\n}\n\nconst blur = () => {\n  const target = inputRefs.value?.find(\n    (input) => document.activeElement === input\n  )\n  target?.blur()\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    innerValue.value = initialValue.value\n\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch(NOOP)\n    }\n  }\n)\n\nwatch(\n  () => props.length,\n  () => {\n    innerValue.value = initialValue.value\n    updateModelValue(false)\n  }\n)\n\nwatch(isFocused, (value) => {\n  if (value) {\n    modelValueOnFocus = props.modelValue\n    return\n  }\n  if (modelValueOnFocus !== props.modelValue) {\n    emit(CHANGE_EVENT, props.modelValue as string)\n  }\n})\n\ndefineExpose({\n  /**\n   * @description HTML input elements array\n   */\n  inputRefs,\n  /**\n   * @description Focus an OTP input field\n   */\n  focus,\n  /**\n   * @description Blur the focused OTP input field\n   */\n  blur,\n})\n</script>\n"],"mappings":"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"}

package/lib/components/input-otp/src/input-otp2.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp2.js","names":[],"sources":["../../../../../../packages/components/input-otp/src/input-otp.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"inputId\"\n    :class=\"[ns.b(), ns.m(size), ns.m(type), ns.is('disabled', disabled)]\"\n    role=\"group\"\n    :aria-label=\"\n      !isLabeledByFormItem\n        ? ariaLabel || t('el.inputOTP.groupLabel')\n        : undefined\n    \"\n    :aria-labelledby=\"isLabeledByFormItem ? formItem?.labelId : undefined\"\n  >\n    <template v-for=\"(_, index) in length\" :key=\"index\">\n      <label :class=\"ns.e('input-field')\">\n        <input\n          ref=\"inputRefs\"\n          :value=\"innerValue[index]\"\n          :class=\"ns.e('input')\"\n          :type=\"mask ? 'password' : 'text'\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :inputmode=\"inputmode\"\n          autocomplete=\"one-time-code\"\n          :aria-label=\"t('el.inputOTP.defaultLabel', { index: index + 1 })\"\n          @focus=\"handleFocus\"\n          @blur=\"handleBlur\"\n          @click=\"focus(index)\"\n          @keydown=\"handleKeydown($event, index)\"\n          @input=\"handleInput($event, index)\"\n        />\n      </label>\n      <slot\n        v-if=\"($slots.separator || separators[index]) && index < length - 1\"\n        name=\"separator\"\n        :index=\"index\"\n      >\n        <component :is=\"() => separators[index]\" />\n      </slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue'\nimport { clamp } from '@vueuse/core'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { NOOP, getEventCode, isFunction, rAF } from '@element-plus/utils'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n} from '@element-plus/components/form'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { inputOtpEmits } from './input-otp'\n\nimport type { InputOtpProps } from './input-otp'\n\ndefineOptions({\n  name: 'ElInputOtp',\n})\n\nconst props = withDefaults(defineProps<InputOtpProps>(), {\n  length: 6,\n  validator: () => true,\n  type: 'outlined',\n  size: 'default',\n  disabled: undefined,\n  validateEvent: true,\n})\nconst emit = defineEmits(inputOtpEmits)\n\nconst initialValue = computed(() => {\n  const value = String(props.modelValue ?? '')\n  return Array.from({ length: props.length }, (_, i) => value.charAt(i))\n})\n\nconst separators = computed(() => {\n  const { separator } = props\n  const _separator = isFunction(separator) ? separator : () => separator\n  return Array.from({ length: props.length - 1 }, (_, i) => _separator(i))\n})\n\nconst innerValue = ref<string[]>(initialValue.value)\nconst isFocused = ref(false)\nconst inputRefs = ref<(HTMLInputElement | undefined)[]>([])\n\nconst ns = useNamespace('input-otp')\nconst { t } = useLocale()\nconst { formItem } = useFormItem()\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\nconst disabled = useFormDisabled()\nlet modelValueOnFocus = props.modelValue\n\nconst getFirstIndex = (maxIndex: number) => {\n  const index = innerValue.value.findIndex((char, i) => !char && i <= maxIndex)\n  return index === -1 ? maxIndex : index\n}\n\nconst handleFocus = (event: FocusEvent) => {\n  if (inputRefs.value?.includes(event.relatedTarget as any)) {\n    return\n  }\n\n  isFocused.value = true\n  emit('focus', event)\n}\n\nconst handleBlur = (event: FocusEvent) => {\n  if (inputRefs.value?.includes(event.relatedTarget as any)) {\n    return\n  }\n\n  isFocused.value = false\n  emit('blur', event)\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch(NOOP)\n  }\n}\n\nconst updateModelValue = (emitFinish = true) => {\n  const value = innerValue.value.join('').slice(0, props.length)\n  if (value !== props.modelValue) {\n    emit(UPDATE_MODEL_EVENT, value)\n    if (emitFinish && value.length === props.length) {\n      emit('finish', value)\n    }\n  }\n}\n\nconst handleKeydown = (event: KeyboardEvent, index: number) => {\n  const code = getEventCode(event)\n  let preventDefault = true\n\n  switch (code) {\n    case EVENT_CODE.backspace:\n      if (props.readonly) break\n      innerValue.value[index] = ''\n      focus(index - 1)\n      updateModelValue()\n      break\n    case EVENT_CODE.delete:\n      if (props.readonly) break\n      innerValue.value[index] = ''\n      focus(index)\n      updateModelValue()\n      break\n    case EVENT_CODE.up:\n    case EVENT_CODE.left:\n      focus(index - 1)\n      break\n    case EVENT_CODE.down:\n    case EVENT_CODE.right:\n      focus(index + 1)\n      break\n    default:\n      preventDefault = false\n  }\n\n  if (preventDefault) {\n    event.preventDefault()\n  }\n}\n\nconst handleInput = (event: Event, index: number) => {\n  const target = event.target as HTMLInputElement\n  const targetIndex = getFirstIndex(index)\n  let focusIndex = targetIndex + 1\n  let value = target.value\n\n  // Safari and Firefox do not trigger the paste event during autofill,\n  // so the paste logic needs to be handled in the input event\n  if (value.length > 1) {\n    const chars = castValues(value, targetIndex)\n\n    // Avoid innerValue inconsistency with the input box value after pasting when char has no change\n    target.value = innerValue.value[index] ?? ''\n\n    chars.forEach((char, i) => (innerValue.value[targetIndex + i] = char))\n    focus(targetIndex + chars.length)\n    updateModelValue()\n    return\n  }\n\n  if (!props.validator(value, targetIndex)) {\n    target.value = innerValue.value[index] ?? ''\n    value = target.value\n    focusIndex = targetIndex\n  }\n\n  innerValue.value[targetIndex] = value\n  if (targetIndex !== index) {\n    target.value = innerValue.value[index] ?? ''\n  }\n  focus(focusIndex)\n  updateModelValue()\n}\n\nconst castValues = (value: InputOtpProps['modelValue'], startIndex = 0) => {\n  const chars = `${value ?? ''}`.split('')\n  const result: string[] = []\n  for (const char of chars) {\n    if (result.length + startIndex >= props.length) {\n      break\n    }\n    if (props.validator(char, result.length + startIndex)) {\n      result.push(char)\n    }\n  }\n  return result\n}\n\nconst focus = (index: number = 0) => {\n  const focusIndex = clamp(index, 0, props.length - 1)\n  const target = inputRefs.value?.[focusIndex]\n\n  if (document.activeElement !== target) {\n    target?.focus()\n  }\n  rAF(() => {\n    // When it is called, the focus may have already been captured by another element.\n    // e.g. typing quickly and deleting.\n    if (!props.readonly && document.activeElement === target) {\n      ;(target as HTMLInputElement | null)?.select()\n    }\n  })\n}\n\nconst blur = () => {\n  const target = inputRefs.value?.find(\n    (input) => document.activeElement === input\n  )\n  target?.blur()\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    innerValue.value = initialValue.value\n\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch(NOOP)\n    }\n  }\n)\n\nwatch(\n  () => props.length,\n  () => {\n    innerValue.value = initialValue.value\n    updateModelValue(false)\n  }\n)\n\nwatch(isFocused, (value) => {\n  if (value) {\n    modelValueOnFocus = props.modelValue\n    return\n  }\n  if (modelValueOnFocus !== props.modelValue) {\n    emit(CHANGE_EVENT, props.modelValue as string)\n  }\n})\n\ndefineExpose({\n  /**\n   * @description HTML input elements array\n   */\n  inputRefs,\n  /**\n   * @description Focus an OTP input field\n   */\n  focus,\n  /**\n   * @description Blur the focused OTP input field\n   */\n  blur,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"input-otp2.js","names":[],"sources":["../../../../../../packages/components/input-otp/src/input-otp.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"inputId\"\n    :class=\"[ns.b(), ns.m(size), ns.m(type), ns.is('disabled', disabled)]\"\n    role=\"group\"\n    :aria-label=\"\n      !isLabeledByFormItem\n        ? ariaLabel || t('el.inputOTP.groupLabel')\n        : undefined\n    \"\n    :aria-labelledby=\"isLabeledByFormItem ? formItem?.labelId : undefined\"\n  >\n    <template v-for=\"(_, index) in length\" :key=\"index\">\n      <label :class=\"ns.e('input-field')\">\n        <input\n          ref=\"inputRefs\"\n          :value=\"innerValue[index]\"\n          :class=\"ns.e('input')\"\n          :type=\"mask ? 'password' : 'text'\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :inputmode=\"inputmode\"\n          autocomplete=\"one-time-code\"\n          :aria-label=\"t('el.inputOTP.defaultLabel', { index: index + 1 })\"\n          @focus=\"handleFocus\"\n          @blur=\"handleBlur\"\n          @click=\"focus(index)\"\n          @keydown=\"handleKeydown($event, index)\"\n          @input=\"handleInput($event, index)\"\n        />\n      </label>\n      <slot\n        v-if=\"($slots.separator || separators[index]) && index < length - 1\"\n        name=\"separator\"\n        :index=\"index\"\n      >\n        <component :is=\"() => separators[index]\" />\n      </slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue'\nimport { clamp } from '@vueuse/core'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { NOOP, getEventCode, isFunction, rAF } from '@element-plus/utils'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { inputOtpEmits } from './input-otp'\n\nimport type { InputOtpProps } from './input-otp'\n\ndefineOptions({\n  name: 'ElInputOtp',\n})\n\nconst props = withDefaults(defineProps<InputOtpProps>(), {\n  length: 6,\n  validator: () => true,\n  type: 'outlined',\n  disabled: undefined,\n  validateEvent: true,\n})\nconst emit = defineEmits(inputOtpEmits)\n\nconst initialValue = computed(() => {\n  const value = String(props.modelValue ?? '')\n  return Array.from({ length: props.length }, (_, i) => value.charAt(i))\n})\n\nconst separators = computed(() => {\n  const { separator } = props\n  const _separator = isFunction(separator) ? separator : () => separator\n  return Array.from({ length: props.length - 1 }, (_, i) => _separator(i))\n})\n\nconst innerValue = ref<string[]>(initialValue.value)\nconst isFocused = ref(false)\nconst inputRefs = ref<(HTMLInputElement | undefined)[]>([])\n\nconst ns = useNamespace('input-otp')\nconst { t } = useLocale()\nconst { formItem } = useFormItem()\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\nconst size = useFormSize()\nconst disabled = useFormDisabled()\nlet modelValueOnFocus = props.modelValue\n\nconst getFirstIndex = (maxIndex: number) => {\n  const index = innerValue.value.findIndex((char, i) => !char && i <= maxIndex)\n  return index === -1 ? maxIndex : index\n}\n\nconst handleFocus = (event: FocusEvent) => {\n  if (inputRefs.value?.includes(event.relatedTarget as any)) {\n    return\n  }\n\n  isFocused.value = true\n  emit('focus', event)\n}\n\nconst handleBlur = (event: FocusEvent) => {\n  if (inputRefs.value?.includes(event.relatedTarget as any)) {\n    return\n  }\n\n  isFocused.value = false\n  emit('blur', event)\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch(NOOP)\n  }\n}\n\nconst updateModelValue = (emitFinish = true) => {\n  const value = innerValue.value.join('').slice(0, props.length)\n  if (value !== props.modelValue) {\n    emit(UPDATE_MODEL_EVENT, value)\n    if (emitFinish && value.length === props.length) {\n      emit('finish', value)\n    }\n  }\n}\n\nconst handleKeydown = (event: KeyboardEvent, index: number) => {\n  const code = getEventCode(event)\n  let preventDefault = true\n\n  switch (code) {\n    case EVENT_CODE.backspace:\n      if (props.readonly) break\n      innerValue.value[index] = ''\n      focus(index - 1)\n      updateModelValue()\n      break\n    case EVENT_CODE.delete:\n      if (props.readonly) break\n      innerValue.value[index] = ''\n      focus(index)\n      updateModelValue()\n      break\n    case EVENT_CODE.up:\n    case EVENT_CODE.left:\n      focus(index - 1)\n      break\n    case EVENT_CODE.down:\n    case EVENT_CODE.right:\n      focus(index + 1)\n      break\n    default:\n      preventDefault = false\n  }\n\n  if (preventDefault) {\n    event.preventDefault()\n  }\n}\n\nconst handleInput = (event: Event, index: number) => {\n  const target = event.target as HTMLInputElement\n  const targetIndex = getFirstIndex(index)\n  let focusIndex = targetIndex + 1\n  let value = target.value\n\n  // Safari and Firefox do not trigger the paste event during autofill,\n  // so the paste logic needs to be handled in the input event\n  if (value.length > 1) {\n    const chars = castValues(value, targetIndex)\n\n    // Avoid innerValue inconsistency with the input box value after pasting when char has no change\n    target.value = innerValue.value[index] ?? ''\n\n    chars.forEach((char, i) => (innerValue.value[targetIndex + i] = char))\n    focus(targetIndex + chars.length)\n    updateModelValue()\n    return\n  }\n\n  if (!props.validator(value, targetIndex)) {\n    target.value = innerValue.value[index] ?? ''\n    value = target.value\n    focusIndex = targetIndex\n  }\n\n  innerValue.value[targetIndex] = value\n  if (targetIndex !== index) {\n    target.value = innerValue.value[index] ?? ''\n  }\n  focus(focusIndex)\n  updateModelValue()\n}\n\nconst castValues = (value: InputOtpProps['modelValue'], startIndex = 0) => {\n  const chars = `${value ?? ''}`.split('')\n  const result: string[] = []\n  for (const char of chars) {\n    if (result.length + startIndex >= props.length) {\n      break\n    }\n    if (props.validator(char, result.length + startIndex)) {\n      result.push(char)\n    }\n  }\n  return result\n}\n\nconst focus = (index: number = 0) => {\n  const focusIndex = clamp(index, 0, props.length - 1)\n  const target = inputRefs.value?.[focusIndex]\n\n  if (document.activeElement !== target) {\n    target?.focus()\n  }\n  rAF(() => {\n    // When it is called, the focus may have already been captured by another element.\n    // e.g. typing quickly and deleting.\n    if (!props.readonly && document.activeElement === target) {\n      ;(target as HTMLInputElement | null)?.select()\n    }\n  })\n}\n\nconst blur = () => {\n  const target = inputRefs.value?.find(\n    (input) => document.activeElement === input\n  )\n  target?.blur()\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    innerValue.value = initialValue.value\n\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch(NOOP)\n    }\n  }\n)\n\nwatch(\n  () => props.length,\n  () => {\n    innerValue.value = initialValue.value\n    updateModelValue(false)\n  }\n)\n\nwatch(isFocused, (value) => {\n  if (value) {\n    modelValueOnFocus = props.modelValue\n    return\n  }\n  if (modelValueOnFocus !== props.modelValue) {\n    emit(CHANGE_EVENT, props.modelValue as string)\n  }\n})\n\ndefineExpose({\n  /**\n   * @description HTML input elements array\n   */\n  inputRefs,\n  /**\n   * @description Focus an OTP input field\n   */\n  focus,\n  /**\n   * @description Blur the focused OTP input field\n   */\n  blur,\n})\n</script>\n"],"mappings":""}

package/lib/components/input-tag/src/composables/use-input-tag.d.ts

@@ -21,7 +21,7 @@ declare function useInputTag({
   isFocused: _$vue.Ref<boolean, boolean>;
   isComposing: _$vue.Ref<boolean, boolean>;
   inputValue: _$vue.Ref<string | undefined, string | undefined>;
-  size: _$vue.ComputedRef<"" | "default" | "large" | "small">;
+  size: _$vue.ComputedRef<"" | "default" | "small" | "large">;
   tagSize: _$vue.ComputedRef<"default" | "small">;
   placeholder: _$vue.ComputedRef<string | undefined>;
   closable: _$vue.ComputedRef<boolean>;

package/lib/components/input-tag/src/input-tag.d.ts

@@ -127,7 +127,7 @@ declare const inputTagProps: {
   readonly max: NumberConstructor;
   readonly tagType: {
     readonly default: "info";
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "primary" | "success" | "info" | "warning" | "danger", unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     readonly __epPropKey: true;
@@ -138,7 +138,7 @@ declare const inputTagProps: {
   readonly draggable: BooleanConstructor;
   readonly delimiter: EpPropFinalized<readonly [StringConstructor, RegExpConstructor], unknown, unknown, "", boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/lib/components/input-tag/src/input-tag.vue.d.ts

@@ -25,37 +25,37 @@ declare const __VLS_base: _$vue.DefineComponent<InputTagProps, {
   blur: () => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   clear: () => void;
-  focus: (evt: FocusEvent) => void;
-  blur: (evt: FocusEvent) => void;
   "update:modelValue": (value?: string[] | undefined) => void;
-  change: (value?: string[] | undefined) => void;
   input: (value: string) => void;
+  change: (value?: string[] | undefined) => void;
+  blur: (evt: FocusEvent) => void;
+  focus: (evt: FocusEvent) => void;
   "add-tag": (value: string | string[]) => void;
   "remove-tag": (value: string, index: number) => void;
   "drag-tag": (oldIndex: number, newIndex: number, value: string) => void;
 }, string, _$vue.PublicProps, Readonly<InputTagProps> & Readonly<{
   onClear?: (() => any) | undefined;
-  onFocus?: ((evt: FocusEvent) => any) | undefined;
-  onBlur?: ((evt: FocusEvent) => any) | undefined;
   "onUpdate:modelValue"?: ((value?: string[] | undefined) => any) | undefined;
-  onChange?: ((value?: string[] | undefined) => any) | undefined;
   onInput?: ((value: string) => any) | undefined;
+  onChange?: ((value?: string[] | undefined) => any) | undefined;
+  onBlur?: ((evt: FocusEvent) => any) | undefined;
+  onFocus?: ((evt: FocusEvent) => any) | undefined;
   "onAdd-tag"?: ((value: string | string[]) => any) | undefined;
   "onRemove-tag"?: ((value: string, index: number) => any) | undefined;
   "onDrag-tag"?: ((oldIndex: number, newIndex: number, value: string) => any) | undefined;
 }>, {
-  id: string;
   disabled: boolean;
-  effect: PopperEffect;
-  clearIcon: IconPropType;
-  saveOnBlur: boolean;
+  id: string;
   tabindex: string | number;
   validateEvent: boolean;
-  autocomplete: string;
+  effect: PopperEffect;
   trigger: "Enter" | "Space";
+  autocomplete: string;
+  clearIcon: IconPropType;
   maxCollapseTags: number;
-  tagType: "info" | "primary" | "success" | "warning" | "danger";
+  tagType: "primary" | "success" | "info" | "warning" | "danger";
   tagEffect: "dark" | "light" | "plain";
+  saveOnBlur: boolean;
   delimiter: string | RegExp;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -35,7 +35,7 @@ interface LinkProps {
  * @deprecated Removed after 3.0.0, Use `LinkProps` instead.
  */
 declare const linkProps: {
-  readonly type: EpPropFinalized<StringConstructor, "default" | "info" | "primary" | "success" | "warning" | "danger", unknown, undefined, boolean>;
+  readonly type: EpPropFinalized<StringConstructor, "default" | "primary" | "success" | "info" | "warning" | "danger", unknown, undefined, boolean>;
   readonly underline: EpPropFinalized<readonly [BooleanConstructor, StringConstructor], boolean | "always" | "never" | "hover", unknown, undefined, boolean>;
   readonly disabled: BooleanConstructor;
   readonly href: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;

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

@@ -81,7 +81,7 @@ declare const mentionProps: {
   prefix: EpPropFinalized<(new (...args: any[]) => string | string[]) | (() => string | string[]) | (((new (...args: any[]) => string | string[]) | (() => string | string[])) | null)[], unknown, unknown, string, boolean>;
   split: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
   filterOption: EpPropFinalized<(new (...args: any[]) => false | (<T extends MentionOption = MentionOption>(pattern: string, option: T & MentionOption) => boolean)) | (() => false | (<T extends MentionOption = MentionOption>(pattern: string, option: T & MentionOption) => boolean)) | (((new (...args: any[]) => false | (<T extends MentionOption = MentionOption>(pattern: string, option: T & MentionOption) => boolean)) | (() => false | (<T extends MentionOption = MentionOption>(pattern: string, option: T & MentionOption) => boolean))) | null)[], unknown, unknown, () => <T extends MentionOption = MentionOption>(pattern: string, option: T & MentionOption) => boolean, boolean>;
-  placement: EpPropFinalized<(new (...args: any[]) => "top" | "bottom") | (() => "top" | "bottom") | (((new (...args: any[]) => "top" | "bottom") | (() => "top" | "bottom")) | null)[], unknown, unknown, string, boolean>;
+  placement: EpPropFinalized<(new (...args: any[]) => "bottom" | "top") | (() => "bottom" | "top") | (((new (...args: any[]) => "bottom" | "top") | (() => "bottom" | "top")) | null)[], unknown, unknown, string, boolean>;
   showArrow: BooleanConstructor;
   offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
   whole: BooleanConstructor;
@@ -198,12 +198,12 @@ declare const mentionProps: {
   popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | _$vue.CSSProperties | _$vue.StyleValue[]) | (() => _$vue.StyleValue) | (((new (...args: any[]) => string | false | _$vue.CSSProperties | _$vue.StyleValue[]) | (() => _$vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
   props: EpPropFinalized<(new (...args: any[]) => MentionOptionProps) | (() => MentionOptionProps) | (((new (...args: any[]) => MentionOptionProps) | (() => MentionOptionProps)) | null)[], unknown, unknown, () => Required<MentionOptionProps>, boolean>;
-  inputmode: EpPropFinalized<(new (...args: any[]) => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "email" | "search" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
+  inputmode: EpPropFinalized<(new (...args: any[]) => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
   name: StringConstructor;
   ariaLabel: StringConstructor;
   id: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
   size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -224,7 +224,7 @@ declare const mentionProps: {
   };
   type: EpPropFinalized<(new (...args: any[]) => string) | (() => InputType) | (((new (...args: any[]) => string) | (() => InputType)) | null)[], unknown, unknown, "text", boolean>;
   resize: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "horizontal" | "vertical" | "none" | "both", unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "none" | "both" | "horizontal" | "vertical", unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;