npm - @element-plus/nightly - Versions diffs - 0.0.20220104 → 0.0.20220108 - Mend

@element-plus/nightly 0.0.20220104 → 0.0.20220108

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (367) hide show

package/es/components/config-provider/src/config-provider.mjs CHANGED Viewed

@@ -1,11 +1,13 @@
-import { defineComponent, renderSlot } from 'vue';
+import { defineComponent, watch, renderSlot } from 'vue';
 import { buildProps, definePropType } from '../../../utils/props.mjs';
 import '../../../hooks/index.mjs';
-import { useLocaleProps, provideLocale } from '../../../hooks/use-locale/index.mjs';
 import { provideGlobalConfig } from '../../../hooks/use-global-config/index.mjs';
+const messageConfig = {};
 const configProviderProps = buildProps({
-  ...useLocaleProps,
+  locale: {
+    type: definePropType(Object)
+  },
   size: {
     type: String,
     values: ["large", "default", "small"]
@@ -13,6 +15,9 @@ const configProviderProps = buildProps({
   button: {
     type: definePropType(Object)
   },
+  message: {
+    type: definePropType(Object)
+  },
   zIndex: {
     type: Number
   }
@@ -21,11 +26,13 @@ var ConfigProvider = defineComponent({
   name: "ElConfigProvider",
   props: configProviderProps,
   setup(props, { slots }) {
-    provideLocale();
+    watch(() => props.message, (val) => {
+      Object.assign(messageConfig, val != null ? val : {});
+    }, { immediate: true, deep: true });
     const config = provideGlobalConfig(props);
     return () => renderSlot(slots, "default", { config: config == null ? void 0 : config.value });
   }
 });
-export { configProviderProps, ConfigProvider as default };
+export { configProviderProps, ConfigProvider as default, messageConfig };
 //# sourceMappingURL=config-provider.mjs.map

package/es/components/config-provider/src/config-provider.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"config-provider.mjs","sources":["../../../../../../packages/components/config-provider/src/config-provider.ts"],"sourcesContent":["import { defineComponent, renderSlot } from 'vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport {~~\n useLocaleProps,\n provideLocale,\n~~ provideGlobalConfig~~,\n~~} from '@element-plus/hooks'\nimport type { ButtonConfigContext } from '@element-plus/components/button'\n\nexport const configProviderProps = buildProps({\n ~~...useLocaleProps~~,\n\n size: {\n type: String,\n values: ['large', 'default', 'small'],\n },\n\n button: {\n type: definePropType<ButtonConfigContext>(Object),\n },\n\n zIndex: {\n type: Number,\n },\n} as const)\n\nexport default defineComponent({\n name: 'ElConfigProvider',\n props: configProviderProps,\n\n setup(props, { slots }) {\n ~~provideLocale~~()\n const config = provideGlobalConfig(props)\n return () => renderSlot(slots, 'default', { config: config?.value })\n },\n})\n"],"names":[],"mappings":"~~;;;;;;AAOY~~,MAAC,mBAAmB,GAAG,UAAU,CAAC;AAC9C,EAAE,~~GAAG~~,cAAc;~~AACnB~~,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;AACzC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC,EAAE;AACH,qBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,mBAAmB;AAC5B,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAI,aAAa,EAAE,CAAC;~~AACpB~~,IAAI,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAI,OAAO,MAAM,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAClG,GAAG;AACH,CAAC,CAAC;;;;"}
1	+ {"version":3,"file":"config-provider.mjs","sources":["../../../../../../packages/components/config-provider/src/config-provider.ts"],"sourcesContent":["import { defineComponent, renderSlot, watch } from 'vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { provideGlobalConfig } from '@element-plus/hooks'\nimport type { Language } from '@element-plus/locale'\nimport type { ButtonConfigContext } from '@element-plus/components/button'\nimport type { MessageConfigContext } from '@element-plus/components/message'\n\nexport const messageConfig: MessageConfigContext = {}\n\nexport const configProviderProps = buildProps({\n locale: {\n type: definePropType<Language>(Object),\n },\n\n size: {\n type: String,\n values: ['large', 'default', 'small'],\n },\n\n button: {\n type: definePropType<ButtonConfigContext>(Object),\n },\n\n message: {\n type: definePropType<MessageConfigContext>(Object),\n },\n\n zIndex: {\n type: Number,\n },\n} as const)\n\nexport default defineComponent({\n name: 'ElConfigProvider',\n props: configProviderProps,\n\n setup(props, { slots }) {\n watch(\n () => props.message,\n (val) => {\n Object.assign(messageConfig, val ?? {})\n },\n { immediate: true, deep: true }\n )\n const config = provideGlobalConfig(props)\n return () => renderSlot(slots, 'default', { config: config?.value })\n },\n})\n"],"names":[],"mappings":";;;;;AAGY,MAAC,aAAa,GAAG,GAAG;AACpB,MAAC,mBAAmB,GAAG,UAAU,CAAC;AAC9C,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;AACzC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC,EAAE;AACH,qBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,mBAAmB;AAC5B,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,KAAK;AACxC,MAAM,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE,GAAG,IAAI,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC;AAC3D,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;AACxC,IAAI,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAI,OAAO,MAAM,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAClG,GAAG;AACH,CAAC,CAAC;;;;"}

package/es/components/date-picker/index.d.ts CHANGED Viewed

@@ -142,8 +142,8 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
 } & {
     type: import("./src/date-picker.type").IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;
@@ -177,8 +177,8 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
 }, {
     type: import("./src/date-picker.type").IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;
@@ -338,8 +338,8 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
 } & {
     type: import("./src/date-picker.type").IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;
@@ -373,8 +373,8 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
 }, {
     type: import("./src/date-picker.type").IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;

package/es/components/date-picker/src/date-picker-com/basic-cell-render.mjs CHANGED Viewed

@@ -15,7 +15,7 @@ var ElDatePickerCell = defineComponent({
       const cell = props.cell;
       if (picker == null ? void 0 : picker.ctx.slots.default) {
         const list = picker.ctx.slots.default(cell).filter((item) => {
-          return item.type.toString() !== "Symbol(Comment)";
+          return item.patchFlag !== -2 && item.type.toString() !== "Symbol(Comment)";
         });
         if (list.length) {
           return list;

package/es/components/date-picker/src/date-picker-com/basic-cell-render.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"basic-cell-render.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-cell-render.ts"],"sourcesContent":["import { h, defineComponent, inject } from 'vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { ROOT_PICKER_INJECTION_KEY } from '../date-picker.type'\nimport type { DateCell } from '../date-picker.type'\n\nexport default defineComponent({\n name: 'ElDatePickerCell',\n props: buildProps({\n cell: {\n type: definePropType<DateCell>(Object),\n },\n }),\n setup(props) {\n const picker = inject(ROOT_PICKER_INJECTION_KEY)\n return () => {\n const cell = props.cell\n if (picker?.ctx.slots.default) {\n const list = picker.ctx.slots.default(cell).filter((item) => {\n return item.type.toString() !== 'Symbol(Comment)'\n })\n if (list.length) {\n return list\n }\n }\n return h(\n 'div',\n {\n class: 'el-date-table-cell',\n },\n [\n h(\n 'span',\n {\n class: 'el-date-table-cell__text',\n },\n [cell?.text]\n ),\n ]\n )\n }\n },\n})\n"],"names":[],"mappings":";;;;AAGA,uBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,UAAU,CAAC;AACpB,IAAI,IAAI,EAAE;AACV,MAAM,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAClC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,MAAM,GAAG,MAAM,CAAC,yBAAyB,CAAC,CAAC;AACrD,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;AAC9B,MAAM,IAAI,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE;AAC9D,QAAQ,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK;AACrE,UAAU,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,iBAAiB,CAAC;~~AAC5D~~,SAAS,CAAC,CAAC;AACX,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE;AACzB,UAAU,OAAO,IAAI,CAAC;AACtB,SAAS;AACT,OAAO;AACP,MAAM,OAAO,CAAC,CAAC,KAAK,EAAE;AACtB,QAAQ,KAAK,EAAE,oBAAoB;AACnC,OAAO,EAAE;AACT,QAAQ,CAAC,CAAC,MAAM,EAAE;AAClB,UAAU,KAAK,EAAE,0BAA0B;AAC3C,SAAS,EAAE,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;AAC/C,OAAO,CAAC,CAAC;AACT,KAAK,CAAC;AACN,GAAG;AACH,CAAC,CAAC;;;;"}
1	+ {"version":3,"file":"basic-cell-render.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-cell-render.ts"],"sourcesContent":["import { h, defineComponent, inject } from 'vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { ROOT_PICKER_INJECTION_KEY } from '../date-picker.type'\nimport type { DateCell } from '../date-picker.type'\n\nexport default defineComponent({\n name: 'ElDatePickerCell',\n props: buildProps({\n cell: {\n type: definePropType<DateCell>(Object),\n },\n }),\n setup(props) {\n const picker = inject(ROOT_PICKER_INJECTION_KEY)\n return () => {\n const cell = props.cell\n if (picker?.ctx.slots.default) {\n const list = picker.ctx.slots.default(cell).filter((item) => {\n return (\n item.patchFlag !== -2 && item.type.toString() !== 'Symbol(Comment)'\n )\n })\n if (list.length) {\n return list\n }\n }\n return h(\n 'div',\n {\n class: 'el-date-table-cell',\n },\n [\n h(\n 'span',\n {\n class: 'el-date-table-cell__text',\n },\n [cell?.text]\n ),\n ]\n )\n }\n },\n})\n"],"names":[],"mappings":";;;;AAGA,uBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,UAAU,CAAC;AACpB,IAAI,IAAI,EAAE;AACV,MAAM,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAClC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,MAAM,GAAG,MAAM,CAAC,yBAAyB,CAAC,CAAC;AACrD,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;AAC9B,MAAM,IAAI,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE;AAC9D,QAAQ,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK;AACrE,UAAU,OAAO,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,iBAAiB,CAAC;AACrF,SAAS,CAAC,CAAC;AACX,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE;AACzB,UAAU,OAAO,IAAI,CAAC;AACtB,SAAS;AACT,OAAO;AACP,MAAM,OAAO,CAAC,CAAC,KAAK,EAAE;AACtB,QAAQ,KAAK,EAAE,oBAAoB;AACnC,OAAO,EAAE;AACT,QAAQ,CAAC,CAAC,MAAM,EAAE;AAClB,UAAU,KAAK,EAAE,0BAA0B;AAC3C,SAAS,EAAE,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;AAC/C,OAAO,CAAC,CAAC;AACT,KAAK,CAAC;AACN,GAAG;AACH,CAAC,CAAC;;;;"}

package/es/components/date-picker/src/date-picker.d.ts CHANGED Viewed

@@ -143,8 +143,8 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     type: IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;
@@ -178,8 +178,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;

package/es/components/form/index.d.ts CHANGED Viewed

@@ -29,6 +29,7 @@ export declare const ElForm: import("../../utils/types").SFCWithInstall<import("
     };
     scrollToError: BooleanConstructor;
 }, {
+    formKls: import("vue").ComputedRef<string[]>;
     validate: (callback?: import("./src/form.vue").Callback | undefined) => Promise<boolean> | undefined;
     resetFields: () => void;
     clearValidate: (props?: string | string[]) => void;

package/es/components/form/src/form.vue.d.ts CHANGED Viewed

@@ -36,6 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     scrollToError: BooleanConstructor;
 }, {
+    formKls: import("vue").ComputedRef<string[]>;
     validate: (callback?: Callback | undefined) => Promise<boolean> | undefined;
     resetFields: () => void;
     clearValidate: (props?: string | string[]) => void;

package/es/components/form/src/form.vue_vue_type_script_lang.mjs CHANGED Viewed

@@ -1,6 +1,8 @@
 import { ref, computed, defineComponent, watch, reactive, toRefs, provide } from 'vue';
 import '../../../tokens/index.mjs';
 import { debugWarn } from '../../../utils/error.mjs';
+import '../../../hooks/index.mjs';
+import { useSize } from '../../../hooks/use-common-props/index.mjs';
 import { elFormKey } from '../../../tokens/form.mjs';
 function useFormLabelWidth() {
@@ -80,6 +82,17 @@ var script = defineComponent({
         validate(() => ({}));
       }
     });
+    const formSize = useSize();
+    const prefix = "el-form";
+    const formKls = computed(() => {
+      const { labelPosition, inline } = props;
+      return [
+        prefix,
+        `${prefix}--${formSize.value}`,
+        labelPosition ? `${prefix}--label-${labelPosition}` : "",
+        inline ? `${prefix}--inline` : ""
+      ];
+    });
     const addField = (field) => {
       if (field) {
         fields.push(field);
@@ -176,6 +189,7 @@ var script = defineComponent({
     });
     provide(elFormKey, elForm);
     return {
+      formKls,
       validate,
       resetFields,
       clearValidate,

package/es/components/form/src/form.vue_vue_type_script_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n <form~~\n class=\"el-form\"\n~~ :class=\"[\~~n labelPosition ? 'el-form--label-' + labelPosition : '',\n { 'el-form--inline': inline },\n ]\~~"\n >\n <slot></slot>\n </form>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n} from 'vue'\nimport { elFormKey } from '@element-plus/tokens'\nimport { debugWarn } from '@element-plus/utils/error'\nimport type { ValidateFieldsError } from 'async-validator'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { FormRulesMap } from './form.type'\nimport type {\n ElFormItemContext as FormItemCtx,\n ValidateFieldCallback,\n} from '@element-plus/tokens'\n\nfunction useFormLabelWidth() {\n const potentialLabelWidthArr = ref([])\n const autoLabelWidth = computed(() => {\n if (!potentialLabelWidthArr.value.length) return '0'\n const max = Math.max(...potentialLabelWidthArr.value)\n return max ? `${max}px` : ''\n })\n\n function getLabelWidthIndex(width: number) {\n const index = potentialLabelWidthArr.value.indexOf(width)\n if (index === -1) {\n debugWarn('Form', `unexpected width ${width}`)\n }\n return index\n }\n\n function registerLabelWidth(val: number, oldVal: number) {\n if (val && oldVal) {\n const index = getLabelWidthIndex(oldVal)\n potentialLabelWidthArr.value.splice(index, 1, val)\n } else if (val) {\n potentialLabelWidthArr.value.push(val)\n }\n }\n\n function deregisterLabelWidth(val: number) {\n const index = getLabelWidthIndex(val)\n index > -1 && potentialLabelWidthArr.value.splice(index, 1)\n }\n\n return {\n autoLabelWidth,\n registerLabelWidth,\n deregisterLabelWidth,\n }\n}\n\nexport interface Callback {\n (isValid?: boolean, invalidFields?: ValidateFieldsError): void\n}\n\nexport default defineComponent({\n name: 'ElForm',\n props: {\n model: Object,\n rules: Object as PropType<FormRulesMap>,\n labelPosition: String,\n labelWidth: {\n type: [String, Number],\n default: '',\n },\n labelSuffix: {\n type: String,\n default: '',\n },\n inline: Boolean,\n inlineMessage: Boolean,\n statusIcon: Boolean,\n showMessage: {\n type: Boolean,\n default: true,\n },\n size: String as PropType<ComponentSize>,\n disabled: Boolean,\n validateOnRuleChange: {\n type: Boolean,\n default: true,\n },\n hideRequiredAsterisk: {\n type: Boolean,\n default: false,\n },\n scrollToError: Boolean,\n },\n emits: ['validate'],\n setup(props, { emit }) {\n const fields: FormItemCtx[] = []\n\n watch(\n () => props.rules,\n () => {\n fields.forEach((field) => {\n field.evaluateValidationEnabled()\n })\n\n if (props.validateOnRuleChange) {\n validate(() => ({}))\n }\n }\n )\n\n const addField = (field: FormItemCtx) => {\n if (field) {\n fields.push(field)\n }\n }\n\n const removeField = (field: FormItemCtx) => {\n if (field.prop) {\n fields.splice(fields.indexOf(field), 1)\n }\n }\n\n const resetFields = () => {\n if (!props.model) {\n debugWarn('Form', 'model is required for resetFields to work.')\n return\n }\n fields.forEach((field) => {\n field.resetField()\n })\n }\n\n const clearValidate = (props: string \| string[] = []) => {\n const fds = props.length\n ? typeof props === 'string'\n ? fields.filter((field) => props === field.prop)\n : fields.filter((field) => props.indexOf(field.prop) > -1)\n : fields\n fds.forEach((field) => {\n field.clearValidate()\n })\n }\n\n const validate = (callback?: Callback) => {\n if (!props.model) {\n debugWarn('Form', 'model is required for validate to work!')\n return\n }\n\n let promise: Promise<boolean> \| undefined\n // if no callback, return promise\n if (typeof callback !== 'function') {\n promise = new Promise((resolve, reject) => {\n callback = function (valid, invalidFields) {\n if (valid) {\n resolve(true)\n } else {\n reject(invalidFields)\n }\n }\n })\n }\n\n if (fields.length === 0) {\n callback(true)\n }\n let valid = true\n let count = 0\n let invalidFields = {}\n let firstInvalidFields\n for (const field of fields) {\n field.validate('', (message, field) => {\n if (message) {\n valid = false\n firstInvalidFields \|\| (firstInvalidFields = field)\n }\n invalidFields = { ...invalidFields, ...field }\n if (++count === fields.length) {\n callback(valid, invalidFields)\n }\n })\n }\n if (!valid && props.scrollToError) {\n scrollToField(Object.keys(firstInvalidFields)[0])\n }\n return promise\n }\n\n const validateField = (\n props: string \| string[],\n cb: ValidateFieldCallback\n ) => {\n props = [].concat(props)\n const fds = fields.filter((field) => props.indexOf(field.prop) !== -1)\n if (!fields.length) {\n debugWarn('Form', 'please pass correct props!')\n return\n }\n\n fds.forEach((field) => {\n field.validate('', cb)\n })\n }\n\n const scrollToField = (prop: string) => {\n fields.forEach((item) => {\n if (item.prop === prop) {\n item.$el.scrollIntoView()\n }\n })\n }\n\n const elForm = reactive({\n ...toRefs(props),\n resetFields,\n clearValidate,\n validateField,\n emit,\n addField,\n removeField,\n ...useFormLabelWidth(),\n })\n\n provide(elFormKey, elForm)\n\n return {\n validate, // export\n resetFields,\n clearValidate,\n validateField,\n scrollToField,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"~~;;;;;AAuBA~~,SAAS,iBAAiB,GAAG;AAC7B,EAAE,MAAM,sBAAsB,MAAM,CAAC,EAAE,EAAE;;AAEzC,IAAI,IAAI,CAAC,sBAAsB,CAAC;AAChC,gBAAgB,CAAC;AACjB,IAAI,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC;AACzB,IAAI;GACD,CAAC,CAAC;EACH,SAAS;AACX,IAAI,MAAM,KAAK,GAAG;;AAElB,MAAM,SAAS,CAAC,MAAM,EAAE,CAAC;KACpB;IACD,OAAO,KAAK,CAAC;;WAEN,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE;IACvC,IAAI,GAAG,IAAI,MAAM,EAAE;;;KAGlB,MAAM,IAAI,GAAG,EAAE;MACd,sBAAsB,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACxC;;;IAGD,WAAW;;;EAGb,OAAO;IACL,cAAc;sBACI;wBACE;IACpB;;;EAGF;;IAEE,KAAK,EAAE,MAAM;IACb,OAAO;IACP,eAAe,MAAM;;;MAGnB;KACD;IACD,WAAW,EAAE;MACX,IAAI,EAAE,MAAM;;AAElB;;AAEA,IAAI,aAAa,EAAE,OAAO;IACtB,UAAU,EAAE,OAAO;AACvB;;AAEA,aAAa,EAAE,IAAI;KACd;IACD;IACA,QAAQ,EAAE;IACV,oBAAoB,EAAE;MACpB,IAAI,EAAE,OAAO;MACb,OAAO;;;;MAIP,OAAO,EAAE;;iBAEE;;OAEV,EAAE,CAAC;OACH,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE;IACrB,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,KAAK,CAAC;MACJ,MAAM,CAAC;QACL,KAAK;;MAEP,IAAI,KAAK,qBAAqB,EAAE;QAC9B,QAAQ,CAAC;OACV;MACD,CAAC;UACG,QAAQ~~;;QAEV~~,MAAM,~~CAAC~~,~~IAAI~~,CAAC,MAAM~~;OACnB;MACD;IACF;MACE~~,~~IAAI~~,~~KAAK~~,CAAC,~~IAAI~~,~~EAAE~~;;~~OAEf~~;~~KACF~~,CAAC;~~IACF~~,~~MAAM,~~WAAW,GAAG,~~MAAM;;QAEtB~~;~~eACO;OACR;YACK~~,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK~~;aACnB~~,CAAC,UAAU,EAAE,CAAC;~~QACnB~~,CAAC~~;;uBAEc~~,GAAG,CAAC,MAAM,GAAG~~,EAAE~~;~~YAC1B~~,~~GAAG~~,~~GAAG,~~OAAO~~;;;;;IAKrB~~,~~MAAM~~,~~WAAW,~~CAAC,~~QAAQ~~,KAAK;~~MAC7B~~,IAAI,CAAC,~~MAAM~~;QACT,~~SAAS~~,~~CAAC~~,~~MAAM;;;;MAIlB~~,IAAI,OAAO,QAAQ,~~KAAK,UAAU,~~EAAE~~;eAC3B~~,~~GAAG,IAAI~~;~~UACZ~~,QAAQ,~~GAAG~~,~~SAAS,~~MAAM,EAAE;;;;~~cAIxB,MAAM~~;~~aACP;~~WACF,CAAC;SACH,CAAC,CAAC;;MAEL~~,IAAI,MAAM,CAAC,MAAM,MAAM~~;~~QACrB~~,QAAQ,CAAC,IAAI,CAAC,CAAC~~;OAChB~~;;;~~MAGD~~,IAAI,~~gBAAgB~~,~~EAAE,~~CAAC;MACvB,IAAI~~,kBAAkB,CAAC~~;~~WAClB~~,~~MAAM~~,~~eAAe,EAAE;aACrB,~~CAAC,~~QAAQ~~,~~CAAC,~~EAAE,EAAE,CAAC,OAAO,EAAE,~~MAAM,~~KAAK~~;UACtC~~,~~IAAI~~,~~OAAO~~,~~EAAE~~;~~YACX~~;~~YACA;~~WACD~~;;;;WAIA~~;~~SACF~~,~~CAAC~~,CAAC~~;;UAED~~,CAAC~~;;;MAGL~~,~~OAAO~~,~~OAAO~~,~~CAAC~~;~~MACf~~;UACI,aAAa,GAAG,CAAC,MAAM,EAAE,EAAE~~,KAAK~~;~~YAC9B~~,MAAM,~~MAAM~~,CAAC,MAAM,CAAC,CAAC;YACrB,~~GAAG~~,~~SAAS~~,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,MAAM~~,CAAC~~;~~iBACjC~~,CAAC~~;iBACD~~,~~CAAC,~~MAAM,EAAE;~~eACX;;;;QAIP~~,CAAC;~~MACH~~;;~~MAEA~~,~~MAAM~~,CAAC,~~OAAO~~,~~CAAC~~,CAAC,IAAI,KAAK;~~QACvB~~,IAAI,~~IAAI,~~CAAC,~~IAAI;;;OAGd~~,CAAC;MACF;UACI,MAAM,GAAG,QAAQ;MACrB,SAAS,~~MAAM~~;~~iBACJ~~;mBACE~~;;;;iBAIF~~;~~0BACS~~,EAAE~~;;;;MAItB~~;MACA,WAAW;mBACE;MACb;MACA,aAAa;;;;;;;"}
1	+ {"version":3,"file":"form.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n <form :class=\"formKls\">\n <slot></slot>\n </form>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n} from 'vue'\nimport { elFormKey } from '@element-plus/tokens'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { useSize } from '@element-plus/hooks'\nimport type { ValidateFieldsError } from 'async-validator'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { FormRulesMap } from './form.type'\nimport type {\n ElFormItemContext as FormItemCtx,\n ValidateFieldCallback,\n} from '@element-plus/tokens'\n\nfunction useFormLabelWidth() {\n const potentialLabelWidthArr = ref([])\n const autoLabelWidth = computed(() => {\n if (!potentialLabelWidthArr.value.length) return '0'\n const max = Math.max(...potentialLabelWidthArr.value)\n return max ? `${max}px` : ''\n })\n\n function getLabelWidthIndex(width: number) {\n const index = potentialLabelWidthArr.value.indexOf(width)\n if (index === -1) {\n debugWarn('Form', `unexpected width ${width}`)\n }\n return index\n }\n\n function registerLabelWidth(val: number, oldVal: number) {\n if (val && oldVal) {\n const index = getLabelWidthIndex(oldVal)\n potentialLabelWidthArr.value.splice(index, 1, val)\n } else if (val) {\n potentialLabelWidthArr.value.push(val)\n }\n }\n\n function deregisterLabelWidth(val: number) {\n const index = getLabelWidthIndex(val)\n index > -1 && potentialLabelWidthArr.value.splice(index, 1)\n }\n\n return {\n autoLabelWidth,\n registerLabelWidth,\n deregisterLabelWidth,\n }\n}\n\nexport interface Callback {\n (isValid?: boolean, invalidFields?: ValidateFieldsError): void\n}\n\nexport default defineComponent({\n name: 'ElForm',\n props: {\n model: Object,\n rules: Object as PropType<FormRulesMap>,\n labelPosition: String,\n labelWidth: {\n type: [String, Number],\n default: '',\n },\n labelSuffix: {\n type: String,\n default: '',\n },\n inline: Boolean,\n inlineMessage: Boolean,\n statusIcon: Boolean,\n showMessage: {\n type: Boolean,\n default: true,\n },\n size: String as PropType<ComponentSize>,\n disabled: Boolean,\n validateOnRuleChange: {\n type: Boolean,\n default: true,\n },\n hideRequiredAsterisk: {\n type: Boolean,\n default: false,\n },\n scrollToError: Boolean,\n },\n emits: ['validate'],\n setup(props, { emit }) {\n const fields: FormItemCtx[] = []\n\n watch(\n () => props.rules,\n () => {\n fields.forEach((field) => {\n field.evaluateValidationEnabled()\n })\n\n if (props.validateOnRuleChange) {\n validate(() => ({}))\n }\n }\n )\n\n const formSize = useSize()\n const prefix = 'el-form'\n const formKls = computed(() => {\n const { labelPosition, inline } = props\n return [\n prefix,\n `${prefix}--${formSize.value}`,\n labelPosition ? `${prefix}--label-${labelPosition}` : '',\n inline ? `${prefix}--inline` : '',\n ]\n })\n\n const addField = (field: FormItemCtx) => {\n if (field) {\n fields.push(field)\n }\n }\n\n const removeField = (field: FormItemCtx) => {\n if (field.prop) {\n fields.splice(fields.indexOf(field), 1)\n }\n }\n\n const resetFields = () => {\n if (!props.model) {\n debugWarn('Form', 'model is required for resetFields to work.')\n return\n }\n fields.forEach((field) => {\n field.resetField()\n })\n }\n\n const clearValidate = (props: string \| string[] = []) => {\n const fds = props.length\n ? typeof props === 'string'\n ? fields.filter((field) => props === field.prop)\n : fields.filter((field) => props.indexOf(field.prop) > -1)\n : fields\n fds.forEach((field) => {\n field.clearValidate()\n })\n }\n\n const validate = (callback?: Callback) => {\n if (!props.model) {\n debugWarn('Form', 'model is required for validate to work!')\n return\n }\n\n let promise: Promise<boolean> \| undefined\n // if no callback, return promise\n if (typeof callback !== 'function') {\n promise = new Promise((resolve, reject) => {\n callback = function (valid, invalidFields) {\n if (valid) {\n resolve(true)\n } else {\n reject(invalidFields)\n }\n }\n })\n }\n\n if (fields.length === 0) {\n callback(true)\n }\n let valid = true\n let count = 0\n let invalidFields = {}\n let firstInvalidFields\n for (const field of fields) {\n field.validate('', (message, field) => {\n if (message) {\n valid = false\n firstInvalidFields \|\| (firstInvalidFields = field)\n }\n invalidFields = { ...invalidFields, ...field }\n if (++count === fields.length) {\n callback(valid, invalidFields)\n }\n })\n }\n if (!valid && props.scrollToError) {\n scrollToField(Object.keys(firstInvalidFields)[0])\n }\n return promise\n }\n\n const validateField = (\n props: string \| string[],\n cb: ValidateFieldCallback\n ) => {\n props = [].concat(props)\n const fds = fields.filter((field) => props.indexOf(field.prop) !== -1)\n if (!fields.length) {\n debugWarn('Form', 'please pass correct props!')\n return\n }\n\n fds.forEach((field) => {\n field.validate('', cb)\n })\n }\n\n const scrollToField = (prop: string) => {\n fields.forEach((item) => {\n if (item.prop === prop) {\n item.$el.scrollIntoView()\n }\n })\n }\n\n const elForm = reactive({\n ...toRefs(props),\n resetFields,\n clearValidate,\n validateField,\n emit,\n addField,\n removeField,\n ...useFormLabelWidth(),\n })\n\n provide(elFormKey, elForm)\n\n return {\n formKls,\n validate, // export\n resetFields,\n clearValidate,\n validateField,\n scrollToField,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/form/src/form.vue_vue_type_template_id_602d6cf6_lang.mjs CHANGED Viewed

@@ -2,10 +2,7 @@ import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("form", {
-    class: normalizeClass(["el-form", [
-      _ctx.labelPosition ? "el-form--label-" + _ctx.labelPosition : "",
-      { "el-form--inline": _ctx.inline }
-    ]])
+    class: normalizeClass(_ctx.formKls)
   }, [
     renderSlot(_ctx.$slots, "default")
   ], 2);

package/es/components/form/src/form.vue_vue_type_template_id_602d6cf6_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form.vue_vue_type_template_id_602d6cf6_lang.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"form.vue_vue_type_template_id_602d6cf6_lang.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/es/components/index.mjs CHANGED Viewed

@@ -83,7 +83,7 @@ export { cardProps } from './card/src/card.mjs';
 export { CASCADER_PANEL_INJECTION_KEY, ExpandTrigger } from './cascader-panel/src/types.mjs';
 export { CommonProps, DefaultProps, useCascaderConfig } from './cascader-panel/src/config.mjs';
 export { colProps } from './col/src/col.mjs';
-export { configProviderProps } from './config-provider/src/config-provider.mjs';
+export { configProviderProps, messageConfig } from './config-provider/src/config-provider.mjs';
 export { useDialog } from './dialog/src/use-dialog.mjs';
 export { dialogEmits, dialogProps } from './dialog/src/dialog.mjs';
 export { dividerProps } from './divider/src/divider.mjs';
@@ -111,7 +111,7 @@ export { POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY } from './popper/src
 export { progressProps } from './progress/src/progress.mjs';
 export { radioEmits, radioProps, radioPropsBase, useRadio } from './radio/src/radio.mjs';
 export { radioGroupEmits, radioGroupProps } from './radio/src/radio-group.mjs';
-export { radioButtonProps } from './radio/src/radio-button2.mjs';
+export { radioButtonProps } from './radio/src/radio-button.mjs';
 export { rateEmits, rateProps } from './rate/src/rate.mjs';
 export { IconComponentMap, IconMap, resultProps } from './result/src/result.mjs';
 export { rowProps } from './row/src/row.mjs';

package/es/components/input/index.d.ts CHANGED Viewed

@@ -40,6 +40,7 @@ export declare const ElInput: import("../../utils/types").SFCWithInstall<import(
     passwordVisible: import("vue").Ref<boolean>;
     inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
     suffixVisible: import("vue").ComputedRef<boolean>;
+    needStatusIcon: import("vue").ComputedRef<boolean>;
     resizeTextarea: () => void;
     handleInput: (event: Event) => void;
     handleChange: (event: Event) => void;

package/es/components/input/src/input.vue.d.ts CHANGED Viewed

@@ -41,6 +41,7 @@ declare const _default: import("vue").DefineComponent<{
     passwordVisible: import("vue").Ref<boolean>;
     inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
     suffixVisible: import("vue").ComputedRef<boolean>;
+    needStatusIcon: import("vue").ComputedRef<boolean>;
     resizeTextarea: () => void;
     handleInput: (event: Event) => void;
     handleChange: (event: Event) => void;

package/es/components/input/src/input.vue_vue_type_script_lang.mjs CHANGED Viewed

@@ -218,6 +218,7 @@ var script = defineComponent({
       passwordVisible,
       inputOrTextarea,
       suffixVisible,
+      needStatusIcon,
       resizeTextarea,
       handleInput,
       handleChange,

package/es/components/input/src/input.vue_vue_type_script_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/input/src/input.vue"],"sourcesContent":["<template>\n <div\n v-show=\"type !== 'hidden'\"\n :class=\"[\n type === 'textarea' ? 'el-textarea' : 'el-input',\n inputSize ? 'el-input--' + inputSize : '',\n {\n 'is-disabled': inputDisabled,\n 'is-exceed': inputExceed,\n 'el-input-group': $slots.prepend \|\| $slots.append,\n 'el-input-group--append': $slots.append,\n 'el-input-group--prepend': $slots.prepend,\n 'el-input--prefix': $slots.prefix \|\| prefixIcon,\n 'el-input--suffix':\n $slots.suffix \|\| suffixIcon \|\| clearable \|\| showPassword,\n 'el-input--suffix--password-clear': clearable && showPassword,\n },\n $attrs.class,\n ]\"\n :style=\"containerStyle\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n >\n <!-- input -->\n <template v-if=\"type !== 'textarea'\">\n <!-- prepend slot -->\n <div v-if=\"$slots.prepend\" class=\"el-input-group__prepend\">\n <slot name=\"prepend\" />\n </div>\n\n <input\n ref=\"input\"\n class=\"el-input__inner\"\n v-bind=\"attrs\"\n :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :tabindex=\"tabindex\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n :style=\"inputStyle\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n\n <!-- prefix slot -->\n <span v-if=\"$slots.prefix \|\| prefixIcon\" class=\"el-input__prefix\">\n <span class=\"el-input__prefix-inner\">\n <slot name=\"prefix\"></slot>\n <el-icon v-if=\"prefixIcon\" class=\"el-input__icon\">\n <component :is=\"prefixIcon\" />\n </el-icon>\n </span>\n </span>\n\n <!-- suffix slot -->\n <span v-if=\"suffixVisible\" class=\"el-input__suffix\">\n <span class=\"el-input__suffix-inner\">\n <template v-if=\"!showClear \|\| !showPwdVisible \|\| !isWordLimitVisible\">\n <slot name=\"suffix\"></slot>\n <el-icon v-if=\"suffixIcon\" class=\"el-input__icon\">\n <component :is=\"suffixIcon\" />\n </el-icon>\n </template>\n <el-icon\n v-if=\"showClear\"\n class=\"el-input__icon el-input__clear\"\n @mousedown.prevent\n @click=\"clear\"\n >\n <circle-close />\n </el-icon>\n <el-icon\n v-if=\"showPwdVisible\"\n class=\"el-input__icon el-input__clear\"\n @click=\"handlePasswordVisible\"\n >\n <icon-view />\n </el-icon>\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n <span class=\"el-input__count-inner\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </span>\n </span>\n <el-icon\n v-if=\"validateState && validateIcon\"\n class=\"el-input__icon el-input__validateIcon\"\n >\n <component :is=\"validateIcon\" />\n </el-icon>\n </span>\n\n <!-- append slot -->\n <div v-if=\"$slots.append\" class=\"el-input-group__append\">\n <slot name=\"append\" />\n </div>\n </template>\n\n <!-- textarea -->\n <template v-else>\n <textarea\n ref=\"textarea\"\n class=\"el-textarea__inner\"\n v-bind=\"attrs\"\n :tabindex=\"tabindex\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :style=\"computedTextareaStyle\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n watch,\n nextTick,\n getCurrentInstance,\n ref,\n shallowRef,\n onMounted,\n onUpdated,\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons-vue'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport {\n useAttrs,\n useDisabled,\n useFormItem,\n useSize,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from '@element-plus/utils/types'\n\ntype TargetElement = HTMLInputElement \| HTMLTextAreaElement\n\nconst PENDANT_MAP = {\n suffix: 'append',\n prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n name: 'ElInput',\n\n components: { ElIcon, CircleClose, IconView },\n\n inheritAttrs: false,\n\n props: inputProps,\n emits: inputEmits,\n\n setup(props, { slots, emit, attrs: rawAttrs }) {\n const instance = getCurrentInstance()!\n const attrs = useAttrs()\n\n const { form, formItem } = useFormItem()\n const inputSize = useSize()\n const inputDisabled = useDisabled()\n\n const input = ref<HTMLInputElement>()\n const textarea = ref<HTMLTextAreaElement>()\n const focused = ref(false)\n const hovering = ref(false)\n const isComposing = ref(false)\n const passwordVisible = ref(false)\n const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n const inputOrTextarea = computed(() => input.value \|\| textarea.value)\n\n const needStatusIcon = computed(() => form?.statusIcon ?? false)\n const validateState = computed(() => formItem?.validateState \|\| '')\n const validateIcon = computed(\n () => ValidateComponentsMap[validateState.value]\n )\n const containerStyle = computed(() => rawAttrs.style as StyleValue)\n const computedTextareaStyle = computed<StyleValue>(() => [\n props.inputStyle,\n _textareaCalcStyle.value,\n { resize: props.resize },\n ])\n const nativeInputValue = computed(() =>\n props.modelValue === null \|\| props.modelValue === undefined\n ? ''\n : String(props.modelValue)\n )\n const showClear = computed(\n () =>\n props.clearable &&\n !inputDisabled.value &&\n !props.readonly &&\n !!nativeInputValue.value &&\n (focused.value \|\| hovering.value)\n )\n const showPwdVisible = computed(\n () =>\n props.showPassword &&\n !inputDisabled.value &&\n !props.readonly &&\n (!!nativeInputValue.value \|\| focused.value)\n )\n const isWordLimitVisible = computed(\n () =>\n props.showWordLimit &&\n !!attrs.value.maxlength &&\n (props.type === 'text' \|\| props.type === 'textarea') &&\n !inputDisabled.value &&\n !props.readonly &&\n !props.showPassword\n )\n const textLength = computed(() => Array.from(nativeInputValue.value).length)\n const inputExceed = computed(\n () =>\n // show exceed style if length of initial value greater then maxlength\n !!isWordLimitVisible.value &&\n textLength.value > Number(attrs.value.maxlength)\n )\n\n const resizeTextarea = () => {\n const { type, autosize } = props\n\n if (!isClient \|\| type !== 'textarea') return\n\n if (autosize) {\n const minRows = isObject(autosize) ? autosize.minRows : undefined\n const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n _textareaCalcStyle.value = {\n ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n }\n } else {\n _textareaCalcStyle.value = {\n minHeight: calcTextareaHeight(textarea.value!).minHeight,\n }\n }\n }\n\n const setNativeInputValue = () => {\n const input = inputOrTextarea.value\n if (!input \|\| input.value === nativeInputValue.value) return\n input.value = nativeInputValue.value\n }\n\n const calcIconOffset = (place: 'prefix' \| 'suffix') => {\n const { el } = instance.vnode\n if (!el) return\n const elList: HTMLSpanElement[] = Array.from(\n el.querySelectorAll(`.el-input__${place}`)\n )\n const target = elList.find((item) => item.parentNode === el)\n\n if (!target) return\n\n const pendant = PENDANT_MAP[place]\n\n if (slots[pendant]) {\n target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n el.querySelector(`.el-input-group__${pendant}`).offsetWidth\n }px)`\n } else {\n target.removeAttribute('style')\n }\n }\n\n const updateIconOffset = () => {\n calcIconOffset('prefix')\n calcIconOffset('suffix')\n }\n\n const handleInput = (event: Event) => {\n const { value } = event.target as TargetElement\n\n // should not emit input during composition\n // see: https://github.com/ElemeFE/element/issues/10516\n if (isComposing.value) return\n\n // hack for https://github.com/ElemeFE/element/issues/8548\n // should remove the following line when we don't support IE\n if (value === nativeInputValue.value) return\n\n emit(UPDATE_MODEL_EVENT, value)\n emit('input', value)\n\n // ensure native input value is controlled\n // see: https://github.com/ElemeFE/element/issues/12850\n nextTick(setNativeInputValue)\n }\n\n const handleChange = (event: Event) => {\n emit('change', (event.target as TargetElement).value)\n }\n\n const focus = () => {\n // see: https://github.com/ElemeFE/element/issues/18573\n nextTick(() => {\n inputOrTextarea.value?.focus()\n })\n }\n\n const blur = () => {\n inputOrTextarea.value?.blur()\n }\n\n const handleFocus = (event: FocusEvent) => {\n focused.value = true\n emit('focus', event)\n }\n\n const handleBlur = (event: FocusEvent) => {\n focused.value = false\n emit('blur', event)\n if (props.validateEvent) {\n formItem?.validate?.('blur')\n }\n }\n\n const select = () => {\n inputOrTextarea.value?.select()\n }\n\n const handleCompositionStart = (event: CompositionEvent) => {\n emit('compositionstart', event)\n isComposing.value = true\n }\n\n const handleCompositionUpdate = (event: CompositionEvent) => {\n emit('compositionupdate', event)\n const text = (event.target as HTMLInputElement)?.value\n const lastCharacter = text[text.length - 1] \|\| ''\n isComposing.value = !isKorean(lastCharacter)\n }\n\n const handleCompositionEnd = (event: CompositionEvent) => {\n emit('compositionend', event)\n if (isComposing.value) {\n isComposing.value = false\n handleInput(event)\n }\n }\n\n const clear = () => {\n emit(UPDATE_MODEL_EVENT, '')\n emit('change', '')\n emit('clear')\n emit('input', '')\n }\n\n const handlePasswordVisible = () => {\n passwordVisible.value = !passwordVisible.value\n focus()\n }\n\n const suffixVisible = computed(\n () =>\n !!slots.suffix \|\|\n !!props.suffixIcon \|\|\n showClear.value \|\|\n props.showPassword \|\|\n isWordLimitVisible.value \|\|\n (!!validateState.value && needStatusIcon.value)\n )\n\n watch(\n () => props.modelValue,\n () => {\n nextTick(resizeTextarea)\n if (props.validateEvent) {\n formItem?.validate?.('change')\n }\n }\n )\n\n // native input value is set explicitly\n // do not use v-model / :value in template\n // see: https://github.com/ElemeFE/element/issues/14521\n watch(nativeInputValue, () => setNativeInputValue())\n\n // when change between <input> and <textarea>,\n // update DOM dependent value and styles\n // https://github.com/ElemeFE/element/issues/14857\n watch(\n () => props.type,\n () => {\n nextTick(() => {\n setNativeInputValue()\n resizeTextarea()\n updateIconOffset()\n })\n }\n )\n\n onMounted(() => {\n setNativeInputValue()\n updateIconOffset()\n nextTick(resizeTextarea)\n })\n\n onUpdated(() => {\n nextTick(updateIconOffset)\n })\n\n const onMouseLeave = (evt: MouseEvent) => {\n hovering.value = false\n emit('mouseleave', evt)\n }\n\n const onMouseEnter = (evt: MouseEvent) => {\n hovering.value = true\n emit('mouseenter', evt)\n }\n\n const handleKeydown = (evt: KeyboardEvent) => {\n emit('keydown', evt)\n }\n\n return {\n input,\n textarea,\n attrs,\n inputSize,\n validateState,\n validateIcon,\n containerStyle,\n computedTextareaStyle,\n inputDisabled,\n showClear,\n showPwdVisible,\n isWordLimitVisible,\n textLength,\n hovering,\n inputExceed,\n passwordVisible,\n inputOrTextarea,\n suffixVisible,\n\n resizeTextarea,\n handleInput,\n handleChange,\n handleFocus,\n handleBlur,\n handleCompositionStart,\n handleCompositionUpdate,\n handleCompositionEnd,\n handlePasswordVisible,\n clear,\n select,\n focus,\n blur,\n onMouseLeave,\n onMouseEnter,\n handleKeydown,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"input.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/input/src/input.vue"],"sourcesContent":["<template>\n <div\n v-show=\"type !== 'hidden'\"\n :class=\"[\n type === 'textarea' ? 'el-textarea' : 'el-input',\n inputSize ? 'el-input--' + inputSize : '',\n {\n 'is-disabled': inputDisabled,\n 'is-exceed': inputExceed,\n 'el-input-group': $slots.prepend \|\| $slots.append,\n 'el-input-group--append': $slots.append,\n 'el-input-group--prepend': $slots.prepend,\n 'el-input--prefix': $slots.prefix \|\| prefixIcon,\n 'el-input--suffix':\n $slots.suffix \|\| suffixIcon \|\| clearable \|\| showPassword,\n 'el-input--suffix--password-clear': clearable && showPassword,\n },\n $attrs.class,\n ]\"\n :style=\"containerStyle\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n >\n <!-- input -->\n <template v-if=\"type !== 'textarea'\">\n <!-- prepend slot -->\n <div v-if=\"$slots.prepend\" class=\"el-input-group__prepend\">\n <slot name=\"prepend\" />\n </div>\n\n <input\n ref=\"input\"\n class=\"el-input__inner\"\n v-bind=\"attrs\"\n :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :tabindex=\"tabindex\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n :style=\"inputStyle\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n\n <!-- prefix slot -->\n <span v-if=\"$slots.prefix \|\| prefixIcon\" class=\"el-input__prefix\">\n <span class=\"el-input__prefix-inner\">\n <slot name=\"prefix\"></slot>\n <el-icon v-if=\"prefixIcon\" class=\"el-input__icon\">\n <component :is=\"prefixIcon\" />\n </el-icon>\n </span>\n </span>\n\n <!-- suffix slot -->\n <span v-if=\"suffixVisible\" class=\"el-input__suffix\">\n <span class=\"el-input__suffix-inner\">\n <template v-if=\"!showClear \|\| !showPwdVisible \|\| !isWordLimitVisible\">\n <slot name=\"suffix\"></slot>\n <el-icon v-if=\"suffixIcon\" class=\"el-input__icon\">\n <component :is=\"suffixIcon\" />\n </el-icon>\n </template>\n <el-icon\n v-if=\"showClear\"\n class=\"el-input__icon el-input__clear\"\n @mousedown.prevent\n @click=\"clear\"\n >\n <circle-close />\n </el-icon>\n <el-icon\n v-if=\"showPwdVisible\"\n class=\"el-input__icon el-input__clear\"\n @click=\"handlePasswordVisible\"\n >\n <icon-view />\n </el-icon>\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n <span class=\"el-input__count-inner\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </span>\n </span>\n <el-icon\n v-if=\"validateState && validateIcon && needStatusIcon\"\n class=\"el-input__icon el-input__validateIcon\"\n >\n <component :is=\"validateIcon\" />\n </el-icon>\n </span>\n\n <!-- append slot -->\n <div v-if=\"$slots.append\" class=\"el-input-group__append\">\n <slot name=\"append\" />\n </div>\n </template>\n\n <!-- textarea -->\n <template v-else>\n <textarea\n ref=\"textarea\"\n class=\"el-textarea__inner\"\n v-bind=\"attrs\"\n :tabindex=\"tabindex\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :style=\"computedTextareaStyle\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n watch,\n nextTick,\n getCurrentInstance,\n ref,\n shallowRef,\n onMounted,\n onUpdated,\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons-vue'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport {\n useAttrs,\n useDisabled,\n useFormItem,\n useSize,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from '@element-plus/utils/types'\n\ntype TargetElement = HTMLInputElement \| HTMLTextAreaElement\n\nconst PENDANT_MAP = {\n suffix: 'append',\n prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n name: 'ElInput',\n\n components: { ElIcon, CircleClose, IconView },\n\n inheritAttrs: false,\n\n props: inputProps,\n emits: inputEmits,\n\n setup(props, { slots, emit, attrs: rawAttrs }) {\n const instance = getCurrentInstance()!\n const attrs = useAttrs()\n\n const { form, formItem } = useFormItem()\n const inputSize = useSize()\n const inputDisabled = useDisabled()\n\n const input = ref<HTMLInputElement>()\n const textarea = ref<HTMLTextAreaElement>()\n const focused = ref(false)\n const hovering = ref(false)\n const isComposing = ref(false)\n const passwordVisible = ref(false)\n const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n const inputOrTextarea = computed(() => input.value \|\| textarea.value)\n\n const needStatusIcon = computed(() => form?.statusIcon ?? false)\n const validateState = computed(() => formItem?.validateState \|\| '')\n const validateIcon = computed(\n () => ValidateComponentsMap[validateState.value]\n )\n const containerStyle = computed(() => rawAttrs.style as StyleValue)\n const computedTextareaStyle = computed<StyleValue>(() => [\n props.inputStyle,\n _textareaCalcStyle.value,\n { resize: props.resize },\n ])\n const nativeInputValue = computed(() =>\n props.modelValue === null \|\| props.modelValue === undefined\n ? ''\n : String(props.modelValue)\n )\n const showClear = computed(\n () =>\n props.clearable &&\n !inputDisabled.value &&\n !props.readonly &&\n !!nativeInputValue.value &&\n (focused.value \|\| hovering.value)\n )\n const showPwdVisible = computed(\n () =>\n props.showPassword &&\n !inputDisabled.value &&\n !props.readonly &&\n (!!nativeInputValue.value \|\| focused.value)\n )\n const isWordLimitVisible = computed(\n () =>\n props.showWordLimit &&\n !!attrs.value.maxlength &&\n (props.type === 'text' \|\| props.type === 'textarea') &&\n !inputDisabled.value &&\n !props.readonly &&\n !props.showPassword\n )\n const textLength = computed(() => Array.from(nativeInputValue.value).length)\n const inputExceed = computed(\n () =>\n // show exceed style if length of initial value greater then maxlength\n !!isWordLimitVisible.value &&\n textLength.value > Number(attrs.value.maxlength)\n )\n\n const resizeTextarea = () => {\n const { type, autosize } = props\n\n if (!isClient \|\| type !== 'textarea') return\n\n if (autosize) {\n const minRows = isObject(autosize) ? autosize.minRows : undefined\n const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n _textareaCalcStyle.value = {\n ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n }\n } else {\n _textareaCalcStyle.value = {\n minHeight: calcTextareaHeight(textarea.value!).minHeight,\n }\n }\n }\n\n const setNativeInputValue = () => {\n const input = inputOrTextarea.value\n if (!input \|\| input.value === nativeInputValue.value) return\n input.value = nativeInputValue.value\n }\n\n const calcIconOffset = (place: 'prefix' \| 'suffix') => {\n const { el } = instance.vnode\n if (!el) return\n const elList: HTMLSpanElement[] = Array.from(\n el.querySelectorAll(`.el-input__${place}`)\n )\n const target = elList.find((item) => item.parentNode === el)\n\n if (!target) return\n\n const pendant = PENDANT_MAP[place]\n\n if (slots[pendant]) {\n target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n el.querySelector(`.el-input-group__${pendant}`).offsetWidth\n }px)`\n } else {\n target.removeAttribute('style')\n }\n }\n\n const updateIconOffset = () => {\n calcIconOffset('prefix')\n calcIconOffset('suffix')\n }\n\n const handleInput = (event: Event) => {\n const { value } = event.target as TargetElement\n\n // should not emit input during composition\n // see: https://github.com/ElemeFE/element/issues/10516\n if (isComposing.value) return\n\n // hack for https://github.com/ElemeFE/element/issues/8548\n // should remove the following line when we don't support IE\n if (value === nativeInputValue.value) return\n\n emit(UPDATE_MODEL_EVENT, value)\n emit('input', value)\n\n // ensure native input value is controlled\n // see: https://github.com/ElemeFE/element/issues/12850\n nextTick(setNativeInputValue)\n }\n\n const handleChange = (event: Event) => {\n emit('change', (event.target as TargetElement).value)\n }\n\n const focus = () => {\n // see: https://github.com/ElemeFE/element/issues/18573\n nextTick(() => {\n inputOrTextarea.value?.focus()\n })\n }\n\n const blur = () => {\n inputOrTextarea.value?.blur()\n }\n\n const handleFocus = (event: FocusEvent) => {\n focused.value = true\n emit('focus', event)\n }\n\n const handleBlur = (event: FocusEvent) => {\n focused.value = false\n emit('blur', event)\n if (props.validateEvent) {\n formItem?.validate?.('blur')\n }\n }\n\n const select = () => {\n inputOrTextarea.value?.select()\n }\n\n const handleCompositionStart = (event: CompositionEvent) => {\n emit('compositionstart', event)\n isComposing.value = true\n }\n\n const handleCompositionUpdate = (event: CompositionEvent) => {\n emit('compositionupdate', event)\n const text = (event.target as HTMLInputElement)?.value\n const lastCharacter = text[text.length - 1] \|\| ''\n isComposing.value = !isKorean(lastCharacter)\n }\n\n const handleCompositionEnd = (event: CompositionEvent) => {\n emit('compositionend', event)\n if (isComposing.value) {\n isComposing.value = false\n handleInput(event)\n }\n }\n\n const clear = () => {\n emit(UPDATE_MODEL_EVENT, '')\n emit('change', '')\n emit('clear')\n emit('input', '')\n }\n\n const handlePasswordVisible = () => {\n passwordVisible.value = !passwordVisible.value\n focus()\n }\n\n const suffixVisible = computed(\n () =>\n !!slots.suffix \|\|\n !!props.suffixIcon \|\|\n showClear.value \|\|\n props.showPassword \|\|\n isWordLimitVisible.value \|\|\n (!!validateState.value && needStatusIcon.value)\n )\n\n watch(\n () => props.modelValue,\n () => {\n nextTick(resizeTextarea)\n if (props.validateEvent) {\n formItem?.validate?.('change')\n }\n }\n )\n\n // native input value is set explicitly\n // do not use v-model / :value in template\n // see: https://github.com/ElemeFE/element/issues/14521\n watch(nativeInputValue, () => setNativeInputValue())\n\n // when change between <input> and <textarea>,\n // update DOM dependent value and styles\n // https://github.com/ElemeFE/element/issues/14857\n watch(\n () => props.type,\n () => {\n nextTick(() => {\n setNativeInputValue()\n resizeTextarea()\n updateIconOffset()\n })\n }\n )\n\n onMounted(() => {\n setNativeInputValue()\n updateIconOffset()\n nextTick(resizeTextarea)\n })\n\n onUpdated(() => {\n nextTick(updateIconOffset)\n })\n\n const onMouseLeave = (evt: MouseEvent) => {\n hovering.value = false\n emit('mouseleave', evt)\n }\n\n const onMouseEnter = (evt: MouseEvent) => {\n hovering.value = true\n emit('mouseenter', evt)\n }\n\n const handleKeydown = (evt: KeyboardEvent) => {\n emit('keydown', evt)\n }\n\n return {\n input,\n textarea,\n attrs,\n inputSize,\n validateState,\n validateIcon,\n containerStyle,\n computedTextareaStyle,\n inputDisabled,\n showClear,\n showPwdVisible,\n isWordLimitVisible,\n textLength,\n hovering,\n inputExceed,\n passwordVisible,\n inputOrTextarea,\n suffixVisible,\n needStatusIcon,\n\n resizeTextarea,\n handleInput,\n handleChange,\n handleFocus,\n handleBlur,\n handleCompositionStart,\n handleCompositionUpdate,\n handleCompositionEnd,\n handlePasswordVisible,\n clear,\n select,\n focus,\n blur,\n onMouseLeave,\n onMouseEnter,\n handleKeydown,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/input/src/input.vue_vue_type_template_id_3290dcb6_lang.mjs CHANGED Viewed

@@ -136,7 +136,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("span", _hoisted_8, toDisplayString(_ctx.textLength) + " / " + toDisplayString(_ctx.attrs.maxlength), 1)
           ])) : createCommentVNode("v-if", true)
         ]),
-        _ctx.validateState && _ctx.validateIcon ? (openBlock(), createBlock(_component_el_icon, {
+        _ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? (openBlock(), createBlock(_component_el_icon, {
           key: 0,
           class: "el-input__icon el-input__validateIcon"
         }, {

package/es/components/input/src/input.vue_vue_type_template_id_3290dcb6_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.vue_vue_type_template_id_3290dcb6_lang.mjs","sources":["../../../../../../packages/components/input/src/input.vue?vue&type=template&id=3290dcb6&lang.js"],"sourcesContent":["<template>\n <div\n v-show=\"type !== 'hidden'\"\n :class=\"[\n type === 'textarea' ? 'el-textarea' : 'el-input',\n inputSize ? 'el-input--' + inputSize : '',\n {\n 'is-disabled': inputDisabled,\n 'is-exceed': inputExceed,\n 'el-input-group': $slots.prepend \|\| $slots.append,\n 'el-input-group--append': $slots.append,\n 'el-input-group--prepend': $slots.prepend,\n 'el-input--prefix': $slots.prefix \|\| prefixIcon,\n 'el-input--suffix':\n $slots.suffix \|\| suffixIcon \|\| clearable \|\| showPassword,\n 'el-input--suffix--password-clear': clearable && showPassword,\n },\n $attrs.class,\n ]\"\n :style=\"containerStyle\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n >\n <!-- input -->\n <template v-if=\"type !== 'textarea'\">\n <!-- prepend slot -->\n <div v-if=\"$slots.prepend\" class=\"el-input-group__prepend\">\n <slot name=\"prepend\" />\n </div>\n\n <input\n ref=\"input\"\n class=\"el-input__inner\"\n v-bind=\"attrs\"\n :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :tabindex=\"tabindex\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n :style=\"inputStyle\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n\n <!-- prefix slot -->\n <span v-if=\"$slots.prefix \|\| prefixIcon\" class=\"el-input__prefix\">\n <span class=\"el-input__prefix-inner\">\n <slot name=\"prefix\"></slot>\n <el-icon v-if=\"prefixIcon\" class=\"el-input__icon\">\n <component :is=\"prefixIcon\" />\n </el-icon>\n </span>\n </span>\n\n <!-- suffix slot -->\n <span v-if=\"suffixVisible\" class=\"el-input__suffix\">\n <span class=\"el-input__suffix-inner\">\n <template v-if=\"!showClear \|\| !showPwdVisible \|\| !isWordLimitVisible\">\n <slot name=\"suffix\"></slot>\n <el-icon v-if=\"suffixIcon\" class=\"el-input__icon\">\n <component :is=\"suffixIcon\" />\n </el-icon>\n </template>\n <el-icon\n v-if=\"showClear\"\n class=\"el-input__icon el-input__clear\"\n @mousedown.prevent\n @click=\"clear\"\n >\n <circle-close />\n </el-icon>\n <el-icon\n v-if=\"showPwdVisible\"\n class=\"el-input__icon el-input__clear\"\n @click=\"handlePasswordVisible\"\n >\n <icon-view />\n </el-icon>\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n <span class=\"el-input__count-inner\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </span>\n </span>\n <el-icon\n v-if=\"validateState && validateIcon\"\n class=\"el-input__icon el-input__validateIcon\"\n >\n <component :is=\"validateIcon\" />\n </el-icon>\n </span>\n\n <!-- append slot -->\n <div v-if=\"$slots.append\" class=\"el-input-group__append\">\n <slot name=\"append\" />\n </div>\n </template>\n\n <!-- textarea -->\n <template v-else>\n <textarea\n ref=\"textarea\"\n class=\"el-textarea__inner\"\n v-bind=\"attrs\"\n :tabindex=\"tabindex\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :style=\"computedTextareaStyle\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n watch,\n nextTick,\n getCurrentInstance,\n ref,\n shallowRef,\n onMounted,\n onUpdated,\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons-vue'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport {\n useAttrs,\n useDisabled,\n useFormItem,\n useSize,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from '@element-plus/utils/types'\n\ntype TargetElement = HTMLInputElement \| HTMLTextAreaElement\n\nconst PENDANT_MAP = {\n suffix: 'append',\n prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n name: 'ElInput',\n\n components: { ElIcon, CircleClose, IconView },\n\n inheritAttrs: false,\n\n props: inputProps,\n emits: inputEmits,\n\n setup(props, { slots, emit, attrs: rawAttrs }) {\n const instance = getCurrentInstance()!\n const attrs = useAttrs()\n\n const { form, formItem } = useFormItem()\n const inputSize = useSize()\n const inputDisabled = useDisabled()\n\n const input = ref<HTMLInputElement>()\n const textarea = ref<HTMLTextAreaElement>()\n const focused = ref(false)\n const hovering = ref(false)\n const isComposing = ref(false)\n const passwordVisible = ref(false)\n const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n const inputOrTextarea = computed(() => input.value \|\| textarea.value)\n\n const needStatusIcon = computed(() => form?.statusIcon ?? false)\n const validateState = computed(() => formItem?.validateState \|\| '')\n const validateIcon = computed(\n () => ValidateComponentsMap[validateState.value]\n )\n const containerStyle = computed(() => rawAttrs.style as StyleValue)\n const computedTextareaStyle = computed<StyleValue>(() => [\n props.inputStyle,\n _textareaCalcStyle.value,\n { resize: props.resize },\n ])\n const nativeInputValue = computed(() =>\n props.modelValue === null \|\| props.modelValue === undefined\n ? ''\n : String(props.modelValue)\n )\n const showClear = computed(\n () =>\n props.clearable &&\n !inputDisabled.value &&\n !props.readonly &&\n !!nativeInputValue.value &&\n (focused.value \|\| hovering.value)\n )\n const showPwdVisible = computed(\n () =>\n props.showPassword &&\n !inputDisabled.value &&\n !props.readonly &&\n (!!nativeInputValue.value \|\| focused.value)\n )\n const isWordLimitVisible = computed(\n () =>\n props.showWordLimit &&\n !!attrs.value.maxlength &&\n (props.type === 'text' \|\| props.type === 'textarea') &&\n !inputDisabled.value &&\n !props.readonly &&\n !props.showPassword\n )\n const textLength = computed(() => Array.from(nativeInputValue.value).length)\n const inputExceed = computed(\n () =>\n // show exceed style if length of initial value greater then maxlength\n !!isWordLimitVisible.value &&\n textLength.value > Number(attrs.value.maxlength)\n )\n\n const resizeTextarea = () => {\n const { type, autosize } = props\n\n if (!isClient \|\| type !== 'textarea') return\n\n if (autosize) {\n const minRows = isObject(autosize) ? autosize.minRows : undefined\n const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n _textareaCalcStyle.value = {\n ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n }\n } else {\n _textareaCalcStyle.value = {\n minHeight: calcTextareaHeight(textarea.value!).minHeight,\n }\n }\n }\n\n const setNativeInputValue = () => {\n const input = inputOrTextarea.value\n if (!input \|\| input.value === nativeInputValue.value) return\n input.value = nativeInputValue.value\n }\n\n const calcIconOffset = (place: 'prefix' \| 'suffix') => {\n const { el } = instance.vnode\n if (!el) return\n const elList: HTMLSpanElement[] = Array.from(\n el.querySelectorAll(`.el-input__${place}`)\n )\n const target = elList.find((item) => item.parentNode === el)\n\n if (!target) return\n\n const pendant = PENDANT_MAP[place]\n\n if (slots[pendant]) {\n target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n el.querySelector(`.el-input-group__${pendant}`).offsetWidth\n }px)`\n } else {\n target.removeAttribute('style')\n }\n }\n\n const updateIconOffset = () => {\n calcIconOffset('prefix')\n calcIconOffset('suffix')\n }\n\n const handleInput = (event: Event) => {\n const { value } = event.target as TargetElement\n\n // should not emit input during composition\n // see: https://github.com/ElemeFE/element/issues/10516\n if (isComposing.value) return\n\n // hack for https://github.com/ElemeFE/element/issues/8548\n // should remove the following line when we don't support IE\n if (value === nativeInputValue.value) return\n\n emit(UPDATE_MODEL_EVENT, value)\n emit('input', value)\n\n // ensure native input value is controlled\n // see: https://github.com/ElemeFE/element/issues/12850\n nextTick(setNativeInputValue)\n }\n\n const handleChange = (event: Event) => {\n emit('change', (event.target as TargetElement).value)\n }\n\n const focus = () => {\n // see: https://github.com/ElemeFE/element/issues/18573\n nextTick(() => {\n inputOrTextarea.value?.focus()\n })\n }\n\n const blur = () => {\n inputOrTextarea.value?.blur()\n }\n\n const handleFocus = (event: FocusEvent) => {\n focused.value = true\n emit('focus', event)\n }\n\n const handleBlur = (event: FocusEvent) => {\n focused.value = false\n emit('blur', event)\n if (props.validateEvent) {\n formItem?.validate?.('blur')\n }\n }\n\n const select = () => {\n inputOrTextarea.value?.select()\n }\n\n const handleCompositionStart = (event: CompositionEvent) => {\n emit('compositionstart', event)\n isComposing.value = true\n }\n\n const handleCompositionUpdate = (event: CompositionEvent) => {\n emit('compositionupdate', event)\n const text = (event.target as HTMLInputElement)?.value\n const lastCharacter = text[text.length - 1] \|\| ''\n isComposing.value = !isKorean(lastCharacter)\n }\n\n const handleCompositionEnd = (event: CompositionEvent) => {\n emit('compositionend', event)\n if (isComposing.value) {\n isComposing.value = false\n handleInput(event)\n }\n }\n\n const clear = () => {\n emit(UPDATE_MODEL_EVENT, '')\n emit('change', '')\n emit('clear')\n emit('input', '')\n }\n\n const handlePasswordVisible = () => {\n passwordVisible.value = !passwordVisible.value\n focus()\n }\n\n const suffixVisible = computed(\n () =>\n !!slots.suffix \|\|\n !!props.suffixIcon \|\|\n showClear.value \|\|\n props.showPassword \|\|\n isWordLimitVisible.value \|\|\n (!!validateState.value && needStatusIcon.value)\n )\n\n watch(\n () => props.modelValue,\n () => {\n nextTick(resizeTextarea)\n if (props.validateEvent) {\n formItem?.validate?.('change')\n }\n }\n )\n\n // native input value is set explicitly\n // do not use v-model / :value in template\n // see: https://github.com/ElemeFE/element/issues/14521\n watch(nativeInputValue, () => setNativeInputValue())\n\n // when change between <input> and <textarea>,\n // update DOM dependent value and styles\n // https://github.com/ElemeFE/element/issues/14857\n watch(\n () => props.type,\n () => {\n nextTick(() => {\n setNativeInputValue()\n resizeTextarea()\n updateIconOffset()\n })\n }\n )\n\n onMounted(() => {\n setNativeInputValue()\n updateIconOffset()\n nextTick(resizeTextarea)\n })\n\n onUpdated(() => {\n nextTick(updateIconOffset)\n })\n\n const onMouseLeave = (evt: MouseEvent) => {\n hovering.value = false\n emit('mouseleave', evt)\n }\n\n const onMouseEnter = (evt: MouseEvent) => {\n hovering.value = true\n emit('mouseenter', evt)\n }\n\n const handleKeydown = (evt: KeyboardEvent) => {\n emit('keydown', evt)\n }\n\n return {\n input,\n textarea,\n attrs,\n inputSize,\n validateState,\n validateIcon,\n containerStyle,\n computedTextareaStyle,\n inputDisabled,\n showClear,\n showPwdVisible,\n isWordLimitVisible,\n textLength,\n hovering,\n inputExceed,\n passwordVisible,\n inputOrTextarea,\n suffixVisible,\n\n resizeTextarea,\n handleInput,\n handleChange,\n handleFocus,\n handleBlur,\n handleCompositionStart,\n handleCompositionUpdate,\n handleCompositionEnd,\n handlePasswordVisible,\n clear,\n select,\n focus,\n blur,\n onMouseLeave,\n onMouseEnter,\n handleKeydown,\n }\n },\n})\n</script>\n"],"names":["_createCommentVNode","_createElementBlock","_createBlock"],"mappings":";;;;;EA0BiC;;;;;EA2Bc;;;;;EAUd;;;;;EAuBS;;;;;EAeV;;;;;EA2BM;;;;;;;;;;;;;;;;;;;;;;;;;IA7GjCA;IACA;;;;;;;;;;;;uCAUC;;;;;;mCAMqB;wBACN,EAAE;;wBAEJ,EAAE;uBACD,EAAE;;;+BAGI;;4DAEVC;;;;YAIP;;;;4BAIHC;;;;;;;;;;;;;;;;;;;;gBAWE;;;;yBAGmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAiBf;;;;;;;;;;;;;;;;;8FAY0B;;;;;;;;;6BAKhC;;;;;;;;;"}
1	+ {"version":3,"file":"input.vue_vue_type_template_id_3290dcb6_lang.mjs","sources":["../../../../../../packages/components/input/src/input.vue?vue&type=template&id=3290dcb6&lang.js"],"sourcesContent":["<template>\n <div\n v-show=\"type !== 'hidden'\"\n :class=\"[\n type === 'textarea' ? 'el-textarea' : 'el-input',\n inputSize ? 'el-input--' + inputSize : '',\n {\n 'is-disabled': inputDisabled,\n 'is-exceed': inputExceed,\n 'el-input-group': $slots.prepend \|\| $slots.append,\n 'el-input-group--append': $slots.append,\n 'el-input-group--prepend': $slots.prepend,\n 'el-input--prefix': $slots.prefix \|\| prefixIcon,\n 'el-input--suffix':\n $slots.suffix \|\| suffixIcon \|\| clearable \|\| showPassword,\n 'el-input--suffix--password-clear': clearable && showPassword,\n },\n $attrs.class,\n ]\"\n :style=\"containerStyle\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n >\n <!-- input -->\n <template v-if=\"type !== 'textarea'\">\n <!-- prepend slot -->\n <div v-if=\"$slots.prepend\" class=\"el-input-group__prepend\">\n <slot name=\"prepend\" />\n </div>\n\n <input\n ref=\"input\"\n class=\"el-input__inner\"\n v-bind=\"attrs\"\n :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :tabindex=\"tabindex\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n :style=\"inputStyle\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n\n <!-- prefix slot -->\n <span v-if=\"$slots.prefix \|\| prefixIcon\" class=\"el-input__prefix\">\n <span class=\"el-input__prefix-inner\">\n <slot name=\"prefix\"></slot>\n <el-icon v-if=\"prefixIcon\" class=\"el-input__icon\">\n <component :is=\"prefixIcon\" />\n </el-icon>\n </span>\n </span>\n\n <!-- suffix slot -->\n <span v-if=\"suffixVisible\" class=\"el-input__suffix\">\n <span class=\"el-input__suffix-inner\">\n <template v-if=\"!showClear \|\| !showPwdVisible \|\| !isWordLimitVisible\">\n <slot name=\"suffix\"></slot>\n <el-icon v-if=\"suffixIcon\" class=\"el-input__icon\">\n <component :is=\"suffixIcon\" />\n </el-icon>\n </template>\n <el-icon\n v-if=\"showClear\"\n class=\"el-input__icon el-input__clear\"\n @mousedown.prevent\n @click=\"clear\"\n >\n <circle-close />\n </el-icon>\n <el-icon\n v-if=\"showPwdVisible\"\n class=\"el-input__icon el-input__clear\"\n @click=\"handlePasswordVisible\"\n >\n <icon-view />\n </el-icon>\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n <span class=\"el-input__count-inner\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </span>\n </span>\n <el-icon\n v-if=\"validateState && validateIcon && needStatusIcon\"\n class=\"el-input__icon el-input__validateIcon\"\n >\n <component :is=\"validateIcon\" />\n </el-icon>\n </span>\n\n <!-- append slot -->\n <div v-if=\"$slots.append\" class=\"el-input-group__append\">\n <slot name=\"append\" />\n </div>\n </template>\n\n <!-- textarea -->\n <template v-else>\n <textarea\n ref=\"textarea\"\n class=\"el-textarea__inner\"\n v-bind=\"attrs\"\n :tabindex=\"tabindex\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :style=\"computedTextareaStyle\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n watch,\n nextTick,\n getCurrentInstance,\n ref,\n shallowRef,\n onMounted,\n onUpdated,\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons-vue'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport {\n useAttrs,\n useDisabled,\n useFormItem,\n useSize,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from '@element-plus/utils/types'\n\ntype TargetElement = HTMLInputElement \| HTMLTextAreaElement\n\nconst PENDANT_MAP = {\n suffix: 'append',\n prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n name: 'ElInput',\n\n components: { ElIcon, CircleClose, IconView },\n\n inheritAttrs: false,\n\n props: inputProps,\n emits: inputEmits,\n\n setup(props, { slots, emit, attrs: rawAttrs }) {\n const instance = getCurrentInstance()!\n const attrs = useAttrs()\n\n const { form, formItem } = useFormItem()\n const inputSize = useSize()\n const inputDisabled = useDisabled()\n\n const input = ref<HTMLInputElement>()\n const textarea = ref<HTMLTextAreaElement>()\n const focused = ref(false)\n const hovering = ref(false)\n const isComposing = ref(false)\n const passwordVisible = ref(false)\n const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n const inputOrTextarea = computed(() => input.value \|\| textarea.value)\n\n const needStatusIcon = computed(() => form?.statusIcon ?? false)\n const validateState = computed(() => formItem?.validateState \|\| '')\n const validateIcon = computed(\n () => ValidateComponentsMap[validateState.value]\n )\n const containerStyle = computed(() => rawAttrs.style as StyleValue)\n const computedTextareaStyle = computed<StyleValue>(() => [\n props.inputStyle,\n _textareaCalcStyle.value,\n { resize: props.resize },\n ])\n const nativeInputValue = computed(() =>\n props.modelValue === null \|\| props.modelValue === undefined\n ? ''\n : String(props.modelValue)\n )\n const showClear = computed(\n () =>\n props.clearable &&\n !inputDisabled.value &&\n !props.readonly &&\n !!nativeInputValue.value &&\n (focused.value \|\| hovering.value)\n )\n const showPwdVisible = computed(\n () =>\n props.showPassword &&\n !inputDisabled.value &&\n !props.readonly &&\n (!!nativeInputValue.value \|\| focused.value)\n )\n const isWordLimitVisible = computed(\n () =>\n props.showWordLimit &&\n !!attrs.value.maxlength &&\n (props.type === 'text' \|\| props.type === 'textarea') &&\n !inputDisabled.value &&\n !props.readonly &&\n !props.showPassword\n )\n const textLength = computed(() => Array.from(nativeInputValue.value).length)\n const inputExceed = computed(\n () =>\n // show exceed style if length of initial value greater then maxlength\n !!isWordLimitVisible.value &&\n textLength.value > Number(attrs.value.maxlength)\n )\n\n const resizeTextarea = () => {\n const { type, autosize } = props\n\n if (!isClient \|\| type !== 'textarea') return\n\n if (autosize) {\n const minRows = isObject(autosize) ? autosize.minRows : undefined\n const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n _textareaCalcStyle.value = {\n ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n }\n } else {\n _textareaCalcStyle.value = {\n minHeight: calcTextareaHeight(textarea.value!).minHeight,\n }\n }\n }\n\n const setNativeInputValue = () => {\n const input = inputOrTextarea.value\n if (!input \|\| input.value === nativeInputValue.value) return\n input.value = nativeInputValue.value\n }\n\n const calcIconOffset = (place: 'prefix' \| 'suffix') => {\n const { el } = instance.vnode\n if (!el) return\n const elList: HTMLSpanElement[] = Array.from(\n el.querySelectorAll(`.el-input__${place}`)\n )\n const target = elList.find((item) => item.parentNode === el)\n\n if (!target) return\n\n const pendant = PENDANT_MAP[place]\n\n if (slots[pendant]) {\n target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n el.querySelector(`.el-input-group__${pendant}`).offsetWidth\n }px)`\n } else {\n target.removeAttribute('style')\n }\n }\n\n const updateIconOffset = () => {\n calcIconOffset('prefix')\n calcIconOffset('suffix')\n }\n\n const handleInput = (event: Event) => {\n const { value } = event.target as TargetElement\n\n // should not emit input during composition\n // see: https://github.com/ElemeFE/element/issues/10516\n if (isComposing.value) return\n\n // hack for https://github.com/ElemeFE/element/issues/8548\n // should remove the following line when we don't support IE\n if (value === nativeInputValue.value) return\n\n emit(UPDATE_MODEL_EVENT, value)\n emit('input', value)\n\n // ensure native input value is controlled\n // see: https://github.com/ElemeFE/element/issues/12850\n nextTick(setNativeInputValue)\n }\n\n const handleChange = (event: Event) => {\n emit('change', (event.target as TargetElement).value)\n }\n\n const focus = () => {\n // see: https://github.com/ElemeFE/element/issues/18573\n nextTick(() => {\n inputOrTextarea.value?.focus()\n })\n }\n\n const blur = () => {\n inputOrTextarea.value?.blur()\n }\n\n const handleFocus = (event: FocusEvent) => {\n focused.value = true\n emit('focus', event)\n }\n\n const handleBlur = (event: FocusEvent) => {\n focused.value = false\n emit('blur', event)\n if (props.validateEvent) {\n formItem?.validate?.('blur')\n }\n }\n\n const select = () => {\n inputOrTextarea.value?.select()\n }\n\n const handleCompositionStart = (event: CompositionEvent) => {\n emit('compositionstart', event)\n isComposing.value = true\n }\n\n const handleCompositionUpdate = (event: CompositionEvent) => {\n emit('compositionupdate', event)\n const text = (event.target as HTMLInputElement)?.value\n const lastCharacter = text[text.length - 1] \|\| ''\n isComposing.value = !isKorean(lastCharacter)\n }\n\n const handleCompositionEnd = (event: CompositionEvent) => {\n emit('compositionend', event)\n if (isComposing.value) {\n isComposing.value = false\n handleInput(event)\n }\n }\n\n const clear = () => {\n emit(UPDATE_MODEL_EVENT, '')\n emit('change', '')\n emit('clear')\n emit('input', '')\n }\n\n const handlePasswordVisible = () => {\n passwordVisible.value = !passwordVisible.value\n focus()\n }\n\n const suffixVisible = computed(\n () =>\n !!slots.suffix \|\|\n !!props.suffixIcon \|\|\n showClear.value \|\|\n props.showPassword \|\|\n isWordLimitVisible.value \|\|\n (!!validateState.value && needStatusIcon.value)\n )\n\n watch(\n () => props.modelValue,\n () => {\n nextTick(resizeTextarea)\n if (props.validateEvent) {\n formItem?.validate?.('change')\n }\n }\n )\n\n // native input value is set explicitly\n // do not use v-model / :value in template\n // see: https://github.com/ElemeFE/element/issues/14521\n watch(nativeInputValue, () => setNativeInputValue())\n\n // when change between <input> and <textarea>,\n // update DOM dependent value and styles\n // https://github.com/ElemeFE/element/issues/14857\n watch(\n () => props.type,\n () => {\n nextTick(() => {\n setNativeInputValue()\n resizeTextarea()\n updateIconOffset()\n })\n }\n )\n\n onMounted(() => {\n setNativeInputValue()\n updateIconOffset()\n nextTick(resizeTextarea)\n })\n\n onUpdated(() => {\n nextTick(updateIconOffset)\n })\n\n const onMouseLeave = (evt: MouseEvent) => {\n hovering.value = false\n emit('mouseleave', evt)\n }\n\n const onMouseEnter = (evt: MouseEvent) => {\n hovering.value = true\n emit('mouseenter', evt)\n }\n\n const handleKeydown = (evt: KeyboardEvent) => {\n emit('keydown', evt)\n }\n\n return {\n input,\n textarea,\n attrs,\n inputSize,\n validateState,\n validateIcon,\n containerStyle,\n computedTextareaStyle,\n inputDisabled,\n showClear,\n showPwdVisible,\n isWordLimitVisible,\n textLength,\n hovering,\n inputExceed,\n passwordVisible,\n inputOrTextarea,\n suffixVisible,\n needStatusIcon,\n\n resizeTextarea,\n handleInput,\n handleChange,\n handleFocus,\n handleBlur,\n handleCompositionStart,\n handleCompositionUpdate,\n handleCompositionEnd,\n handlePasswordVisible,\n clear,\n select,\n focus,\n blur,\n onMouseLeave,\n onMouseEnter,\n handleKeydown,\n }\n },\n})\n</script>\n"],"names":["_createCommentVNode","_createElementBlock","_createBlock"],"mappings":";;;;;EA0BiC;;;;;EA2Bc;;;;;EAUd;;;;;EAuBS;;;;;EAeV;;;;;EA2BM;;;;;;;;;;;;;;;;;;;;;;;;;IA7GjCA;IACA;;;;;;;;;;;;uCAUC;;;;;;mCAMqB;wBACN,EAAE;;wBAEJ,EAAE;uBACD,EAAE;;;+BAGI;;4DAEVC;;;;YAIP;;;;4BAIHC;;;;;;;;;;;;;;;;;;;;gBAWE;;;;yBAGmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAiBf;;;;;;;;;;;;;;;;;8FAY0B;;;;;;;;;6BAKhC;;;;;;;;;"}

package/es/components/input-number/index.d.ts CHANGED Viewed

@@ -55,6 +55,7 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         passwordVisible: import("vue").Ref<boolean>;
         inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
         suffixVisible: import("vue").ComputedRef<boolean>;
+        needStatusIcon: import("vue").ComputedRef<boolean>;
         resizeTextarea: () => void;
         handleInput: (event: Event) => void;
         handleChange: (event: Event) => void;
@@ -206,6 +207,7 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         passwordVisible: import("vue").Ref<boolean>;
         inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
         suffixVisible: import("vue").ComputedRef<boolean>;
+        needStatusIcon: import("vue").ComputedRef<boolean>;
         resizeTextarea: () => void;
         handleInput: (event: Event) => void;
         handleChange: (event: Event) => void;
@@ -328,6 +330,8 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
     minDisabled: import("vue").ComputedRef<boolean>;
     focus: () => void;
     blur: () => void;
+    handleFocus: (event: MouseEvent) => void;
+    handleBlur: (event: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (prev: number, cur: number) => boolean;
     blur: (e: FocusEvent) => boolean;
@@ -358,9 +362,9 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
     controlsPosition: import("../../utils/props").BuildPropType<StringConstructor, "" | "right", unknown>;
 } & {
     size?: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown> | undefined;
-    name?: string | undefined;
     modelValue?: number | undefined;
     label?: string | undefined;
+    name?: string | undefined;
     placeholder?: string | undefined;
     precision?: number | undefined;
 }> & {

package/es/components/input-number/src/input-number.vue.d.ts CHANGED Viewed

@@ -56,6 +56,7 @@ declare const _default: import("vue").DefineComponent<{
         passwordVisible: import("vue").Ref<boolean>;
         inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
         suffixVisible: import("vue").ComputedRef<boolean>;
+        needStatusIcon: import("vue").ComputedRef<boolean>;
         resizeTextarea: () => void;
         handleInput: (event: Event) => void;
         handleChange: (event: Event) => void;
@@ -207,6 +208,7 @@ declare const _default: import("vue").DefineComponent<{
         passwordVisible: import("vue").Ref<boolean>;
         inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
         suffixVisible: import("vue").ComputedRef<boolean>;
+        needStatusIcon: import("vue").ComputedRef<boolean>;
         resizeTextarea: () => void;
         handleInput: (event: Event) => void;
         handleChange: (event: Event) => void;
@@ -329,6 +331,8 @@ declare const _default: import("vue").DefineComponent<{
     minDisabled: import("vue").ComputedRef<boolean>;
     focus: () => void;
     blur: () => void;
+    handleFocus: (event: MouseEvent) => void;
+    handleBlur: (event: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (prev: number, cur: number) => boolean;
     blur: (e: FocusEvent) => boolean;
@@ -359,9 +363,9 @@ declare const _default: import("vue").DefineComponent<{
     controlsPosition: import("../../../utils/props").BuildPropType<StringConstructor, "" | "right", unknown>;
 } & {
     size?: import("../../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown> | undefined;
-    name?: string | undefined;
     modelValue?: number | undefined;
     label?: string | undefined;
+    name?: string | undefined;
     placeholder?: string | undefined;
     precision?: number | undefined;
 }> & {