@element-plus/nightly 0.0.20220107 → 0.0.20220108

package/lib/components/config-provider/src/config-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"config-provider.js","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":["buildProps","useLocaleProps","definePropType","defineComponent","provideLocale","provideGlobalConfig","renderSlot"],"mappings":";;;;;;;;;;AAOY,MAAC,mBAAmB,GAAGA,gBAAU,CAAC;AAC9C,EAAE,GAAGC,oBAAc;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,EAAEC,oBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC,EAAE;AACH,qBAAeC,mBAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,mBAAmB;AAC5B,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAIC,mBAAa,EAAE,CAAC;AACpB,IAAI,MAAM,MAAM,GAAGC,2BAAmB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAI,OAAO,MAAMC,cAAU,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;;;;;"}
+{"version":3,"file":"config-provider.js","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":["buildProps","definePropType","defineComponent","watch","provideGlobalConfig","renderSlot"],"mappings":";;;;;;;;;AAGY,MAAC,aAAa,GAAG,GAAG;AACpB,MAAC,mBAAmB,GAAGA,gBAAU,CAAC;AAC9C,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEC,oBAAc,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,EAAEA,oBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEA,oBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC,EAAE;AACH,qBAAeC,mBAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,mBAAmB;AAC5B,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAIC,SAAK,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,GAAGC,yBAAmB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAI,OAAO,MAAMC,cAAU,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/lib/components/date-picker/index.d.ts

@@ -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/lib/components/date-picker/src/date-picker-com/basic-cell-render.js

@@ -19,7 +19,7 @@ var ElDatePickerCell = vue.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/lib/components/date-picker/src/date-picker-com/basic-cell-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic-cell-render.js","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":["defineComponent","buildProps","definePropType","inject","ROOT_PICKER_INJECTION_KEY","h"],"mappings":";;;;;;;;AAGA,uBAAeA,mBAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAEC,gBAAU,CAAC;AACpB,IAAI,IAAI,EAAE;AACV,MAAM,IAAI,EAAEC,oBAAc,CAAC,MAAM,CAAC;AAClC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,MAAM,GAAGC,UAAM,CAACC,yCAAyB,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,OAAOC,KAAC,CAAC,KAAK,EAAE;AACtB,QAAQ,KAAK,EAAE,oBAAoB;AACnC,OAAO,EAAE;AACT,QAAQA,KAAC,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;;;;"}
+{"version":3,"file":"basic-cell-render.js","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":["defineComponent","buildProps","definePropType","inject","ROOT_PICKER_INJECTION_KEY","h"],"mappings":";;;;;;;;AAGA,uBAAeA,mBAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAEC,gBAAU,CAAC;AACpB,IAAI,IAAI,EAAE;AACV,MAAM,IAAI,EAAEC,oBAAc,CAAC,MAAM,CAAC;AAClC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,MAAM,GAAGC,UAAM,CAACC,yCAAyB,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,OAAOC,KAAC,CAAC,KAAK,EAAE;AACtB,QAAQ,KAAK,EAAE,oBAAoB;AACnC,OAAO,EAAE;AACT,QAAQA,KAAC,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/lib/components/date-picker/src/date-picker.d.ts

@@ -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/lib/components/form/index.d.ts

@@ -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/lib/components/form/src/form.vue.d.ts

@@ -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/lib/components/form/src/form.vue_vue_type_script_lang.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 require('../../../tokens/index.js');
 var error = require('../../../utils/error.js');
+require('../../../hooks/index.js');
+var index = require('../../../hooks/use-common-props/index.js');
 var form = require('../../../tokens/form.js');
 
 function useFormLabelWidth() {
@@ -84,6 +86,17 @@ var script = vue.defineComponent({
         validate(() => ({}));
       }
     });
+    const formSize = index.useSize();
+    const prefix = "el-form";
+    const formKls = vue.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);
@@ -180,6 +193,7 @@ var script = vue.defineComponent({
     });
     vue.provide(form.elFormKey, elForm);
     return {
+      formKls,
       validate,
       resetFields,
       clearValidate,

package/lib/components/form/src/form.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.vue_vue_type_script_lang.js","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":["debugWarn","watch","reactive"],"mappings":";;;;;;;;;AAuBA,SAAS,iBAAiB,GAAG;AAC7B,EAAE,MAAM,sBAAsB,UAAM,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,MAAMA,eAAS,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;IAClBC,SAAK,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;;QAEtBD;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;QACTA,eAAS,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;uBACD,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,GAAGE,YAAQ;MACrB,aAAS,MAAM;iBACJ;mBACE;;;;iBAIF;0BACS,EAAE;;;;MAItB;MACA,WAAW;mBACE;MACb;MACA,aAAa;;;;;;;"}
+{"version":3,"file":"form.vue_vue_type_script_lang.js","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":["debugWarn","watch","computed","reactive","elFormKey"],"mappings":"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"}

package/lib/components/form/src/form.vue_vue_type_template_id_602d6cf6_lang.js

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

package/lib/components/form/src/form.vue_vue_type_template_id_602d6cf6_lang.js.map

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

package/lib/components/index.js

@@ -277,6 +277,7 @@ exports.DefaultProps = config.DefaultProps;
 exports.useCascaderConfig = config.useCascaderConfig;
 exports.colProps = col.colProps;
 exports.configProviderProps = configProvider.configProviderProps;
+exports.messageConfig = configProvider.messageConfig;
 exports.useDialog = useDialog.useDialog;
 exports.dialogEmits = dialog.dialogEmits;
 exports.dialogProps = dialog.dialogProps;

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -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/lib/components/input/src/input.vue.d.ts

@@ -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/lib/components/input/src/input.vue_vue_type_script_lang.js

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

package/lib/components/input/src/input.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.vue_vue_type_script_lang.js","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":["defineComponent","ElIcon","inputEmits","getCurrentInstance","useSize","ref","shallowRef","computed","ValidateComponentsMap","isClient","isObject","calcTextareaHeight","UPDATE_MODEL_EVENT","nextTick","watch","onUpdated"],"mappings":"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"}
+{"version":3,"file":"input.vue_vue_type_script_lang.js","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":["defineComponent","ElIcon","inputEmits","getCurrentInstance","useSize","ref","shallowRef","computed","ValidateComponentsMap","isClient","isObject","calcTextareaHeight","UPDATE_MODEL_EVENT","nextTick","watch","onUpdated"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiKA,iBAAiB;;AAEjB,EAAE,MAAM,EAAE,SAAS;;AAEnB,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,UAAU,EAAE,UAAEC;EACd,YAAY,EAAE;EACd,KAAK,kBAAY;AACnB,EAAE,KAAK,EAAEC;;AAET,IAAI,MAAM,QAAQ,GAAGC;IACjB,MAAM,KAAK;;IAEX,MAAM,SAAS,GAAGC,eAAO,EAAE,CAAC;;IAE5B,MAAM,QAAQC,OAAG;;IAEjB,MAAM,OAAO;IACb,MAAM,QAAQ;;IAEd,MAAM,eAAe,GAAGA,OAAG,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,kBAAkB,GAAGC,cAAU;IACrC,MAAM,eAAe;;MAEnB,IAAI,EAAE,CAAC;MACP,OAAO,CAAC,EAAE,OAAO,IAAI;KACtB,CAAC,CAAC;;IAEH,MAAM,YAAY,GAAGC,YAAQ,CAAC,MAAMC;IACpC,MAAM,cAAc,GAAGD,YAAQ,CAAC,MAAM;IACtC,MAAM;MACJ,KAAK,CAAC,UAAU;MAChB,kBAAkB,CAAC,KAAK;MACxB,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE;KACzB,CAAC,CAAC;;IAEH,MAAM,SAAS,GAAGA,YAAQ,CAAC,MAAM,MAAM,SAAS,IAAI,cAAc,CAAC;;IAEnE,MAAM,kBAAkB,GAAGA,YAAQ,CAAC,MAAM,KAAK,CAAC,aAAa;IAC7D,MAAM,UAAU,eAAW,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC;IAC9D,MAAM,WAAW,eAAW,CAAC;UACvB,cAAc,GAAG,MAAM;;MAE3B,IAAI,CAACE,aAAQ,IAAI,IAAI,KAAK,UAAU;QAClC,OAAO;MACT,IAAI,QAAQ,EAAE;QACZ,MAAM,OAAO,GAAGC;QAChB,MAAM,OAAO,GAAGA;;UAEd,GAAGC,qCAAkB,CAAC,SAAS;SAChC,CAAC;;QAEF,kBAAkB,CAAC,KAAK;;UAEtB;OACH;;UAEG,mBAAmB;YACjB,MAAM,GAAG;UACX,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK;QACzB,OAAO;;KAEV,CAAC;UACI;YACE,EAAE,EAAE,EAAE,GAAG;UACX,CAAC,EAAE;QACL,OAAO;YACH,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;;MAE7B,IAAI,CAAC,MAAM;;YAEL,OAAO,GAAG;UACZ,KAAK,CAAC,OAAO,CAAC,EAAE;QAClB,MAAM,CAAC,KAAK,CAAC,aAAa,WAAW,EAAE,KAAK,KAAK;aAC5C;QACL,MAAM,CAAC;;;IAGX,MAAM,gBAAgB,GAAG,MAAM;MAC7B,cAAc,SAAS,CAAC,CAAC;MACzB;;UAEI,WAAW,GAAG,CAAC,KAAK,KAAK;YACvB,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC;;;MAG/B,IAAI,KAAK,KAAK;QACZ,OAAO;;MAET,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;;MAEpB;UACI,YAAY,GAAG,CAAC,KAAK,KAAK;UAC1B,CAAC,QAAQ,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;UAE/B,KAAK,GAAG,MAAM;;QAEhB;QACA,CAAC,EAAE,GAAG,eAAe,CAAC,KAAK;;;;;;KAM9B,CAAC;UACI,WAAW,GAAG,CAAC,KAAK,KAAK;MAC7B,OAAO,CAAC,QAAQ,IAAI,CAAC;MACrB,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;;;MAGrB,IAAI,EAAE,CAAC;MACP,QAAQ,KAAK,GAAG,KAAK,CAAC;MACtB,IAAI,CAAC,MAAM,EAAE;MACb,IAAI,KAAK,CAAC,aAAa,EAAE;QACvB,CAAC,EAAE,GAAG,QAAQ,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG;;MAEpC;;MAEA,IAAI,EAAE,CAAC;;MAEP;;MAEA,IAAI,CAAC;iBACM,CAAC,KAAK,GAAG,KAAK;;UAErB;MACJ,IAAI,GAAG;UACH,CAAC,mBAAmB,EAAE,KAAK,CAAC;MAChC;;;KAGD,CAAC;UACI;MACJ,IAAI,CAAC,gBAAgB,EAAE;;;QAGrB,WAAW,CAAC,KAAK,CAAC,CAAC;OACpB;;UAEG,QAAQ;MACZ,IAAI,CAACC,4BAAkB,EAAE,EAAE,CAAC,CAAC;MAC7B,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;;MAEnB,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;MAClB;UACI,qBAAqB,GAAG,MAAM;;MAElC,KAAK,EAAE,CAAC;MACR;;aAEG,CAAC,MAAM,KAAK,WAAW,QAAQ;MAClC,IAAI,EAAE;MACNC,YAAQ,CAAC,cAAc,CAAC,CAAC;;;OAGxB;MACD,CAAC;IACHC;;MAEED,YAAQ,OAAO;2BACM,EAAE,CAAC;QACtB;QACA,gBAAgB,EAAE,CAAC;OACpB;;;MAGD;MACA,gBAAgB,EAAE,CAAC;;;IAGrBE,aAAS,CAAC,MAAM;MACdF,YAAQ,CAAC;MACT,CAAC;IACH;;MAEE,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC;MACvB;UACI,YAAY;MAChB,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;UAClB,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;MACxB;IACF;;KAEC,CAAC;WACK;;;MAGL,KAAK;MACL,SAAS;MACT,aAAa;;;MAGb,qBAAqB;MACrB,aAAa;MACb,SAAS;MACT,cAAc;MACd,kBAAkB;;;MAGlB,WAAW;MACX,eAAe;MACf,eAAe;mBACF;oBACC;MACd;;;MAGA;MACA,UAAU;MACV;MACA;MACA;;;MAGA,MAAM;MACN,KAAK;MACL,IAAI;;;MAGJ,aAAa;MACb;;;;;;"}

package/lib/components/input/src/input.vue_vue_type_template_id_3290dcb6_lang.js

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

package/lib/components/input/src/input.vue_vue_type_template_id_3290dcb6_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.vue_vue_type_template_id_3290dcb6_lang.js","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;;gEAEVC;;;;YAIP;;;;gCAIHC;;;;;;;;;;;;;;;;;;;;gBAWE;;;;yBAGmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAiBf;;;;;;;;;;;;;;;;;8FAY0B;;;;;;;;;6BAKhC;;;;;;;;;"}
+{"version":3,"file":"input.vue_vue_type_template_id_3290dcb6_lang.js","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;;gEAEVC;;;;YAIP;;;;gCAIHC;;;;;;;;;;;;;;;;;;;;gBAWE;;;;yBAGmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAiBf;;;;;;;;;;;;;;;;;8FAY0B;;;;;;;;;6BAKhC;;;;;;;;;"}

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

@@ -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;
@@ -360,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/lib/components/input-number/src/input-number.vue.d.ts

@@ -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;
@@ -361,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;
 }> & {

package/lib/components/message/src/message-method.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var core = require('@vueuse/core');
-require('../../../utils/util.js');
+var util = require('../../../utils/util.js');
 var popupManager = require('../../../utils/popup-manager.js');
 var error = require('../../../utils/error.js');
+var configProvider = require('../../config-provider/src/config-provider.js');
 require('./message2.js');
 var message$1 = require('./message.js');
 var message_vue_vue_type_script_lang = require('./message.vue_vue_type_script_lang.js');
@@ -16,6 +17,9 @@ let seed = 1;
 const message = function(options = {}) {
   if (!core.isClient)
     return { close: () => void 0 };
+  if (util.isNumber(configProvider.messageConfig.max) && instances.length >= configProvider.messageConfig.max) {
+    return { close: () => void 0 };
+  }
   if (!vue.isVNode(options) && typeof options === "object" && options.grouping && !vue.isVNode(options.message) && instances.length) {
     const tempVm = instances.find((item) => {
       var _a, _b, _c;

package/lib/components/message/src/message-method.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-method.js","sources":["../../../../../../packages/components/message/src/message-method.ts"],"sourcesContent":["import { createVNode, render } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { isVNode } from '@element-plus/utils/util'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { debugWarn } from '@element-plus/utils/error'\nimport MessageConstructor from './message.vue'\nimport { messageTypes } from './message'\n\nimport type { Message, MessageFn, MessageQueue, MessageProps } from './message'\nimport type { ComponentPublicInstance, VNode } from 'vue'\n\nconst instances: MessageQueue = []\nlet seed = 1\n\n// TODO: Since Notify.ts is basically the same like this file. So we could do some encapsulation against them to reduce code duplication.\n\nconst message: MessageFn & Partial<Message> = function (options = {}) {\n  if (!isClient) return { close: () => undefined }\n\n  if (\n    !isVNode(options) &&\n    typeof options === 'object' &&\n    options.grouping &&\n    !isVNode(options.message) &&\n    instances.length\n  ) {\n    const tempVm: any = instances.find(\n      (item) =>\n        `${item.vm.props?.message ?? ''}` ===\n        `${(options as any).message ?? ''}`\n    )\n    if (tempVm) {\n      tempVm.vm.component!.props.repeatNum += 1\n      tempVm.vm.component!.props.type = options?.type\n      return {\n        close: () =>\n          ((\n            vm.component!.proxy as ComponentPublicInstance<{ visible: boolean }>\n          ).visible = false),\n      }\n    }\n  }\n\n  if (typeof options === 'string' || isVNode(options)) {\n    options = { message: options }\n  }\n\n  let verticalOffset = options.offset || 20\n  instances.forEach(({ vm }) => {\n    verticalOffset += (vm.el?.offsetHeight || 0) + 16\n  })\n  verticalOffset += 16\n\n  const id = `message_${seed++}`\n  const userOnClose = options.onClose\n  const props: Partial<MessageProps> = {\n    zIndex: PopupManager.nextZIndex(),\n    offset: verticalOffset,\n    ...options,\n    id,\n    onClose: () => {\n      close(id, userOnClose)\n    },\n  }\n\n  let appendTo: HTMLElement | null = document.body\n  if (options.appendTo instanceof HTMLElement) {\n    appendTo = options.appendTo\n  } else if (typeof options.appendTo === 'string') {\n    appendTo = document.querySelector(options.appendTo)\n  }\n  // should fallback to default value with a warning\n  if (!(appendTo instanceof HTMLElement)) {\n    debugWarn(\n      'ElMessage',\n      'the appendTo option is not an HTMLElement. Falling back to document.body.'\n    )\n    appendTo = document.body\n  }\n\n  const container = document.createElement('div')\n\n  container.className = `container_${id}`\n\n  const message = props.message\n  const vm = createVNode(\n    MessageConstructor,\n    props,\n    isVNode(props.message) ? { default: () => message } : null\n  )\n\n  // clean message element preventing mem leak\n  vm.props!.onDestroy = () => {\n    render(null, container)\n    // since the element is destroy, then the VNode should be collected by GC as well\n    // we do not want cause any mem leak because we have returned vm as a reference to users\n    // so that we manually set it to false.\n  }\n\n  render(vm, container)\n  // instances will remove this item when close function gets called. So we do not need to worry about it.\n  instances.push({ vm })\n  appendTo.appendChild(container.firstElementChild!)\n\n  return {\n    // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle\n    // for out component, so that all closing steps will not be skipped.\n    close: () =>\n      ((\n        vm.component!.proxy as ComponentPublicInstance<{ visible: boolean }>\n      ).visible = false),\n  }\n}\n\nmessageTypes.forEach((type) => {\n  message[type] = (options = {}) => {\n    if (typeof options === 'string' || isVNode(options)) {\n      options = {\n        message: options,\n      }\n    }\n    return message({\n      ...options,\n      type,\n    })\n  }\n})\n\nexport function close(id: string, userOnClose?: (vm: VNode) => void): void {\n  const idx = instances.findIndex(({ vm }) => id === vm.component!.props.id)\n  if (idx === -1) return\n\n  const { vm } = instances[idx]\n  if (!vm) return\n  userOnClose?.(vm)\n\n  const removedHeight = vm.el!.offsetHeight\n  instances.splice(idx, 1)\n\n  // adjust other instances vertical offset\n  const len = instances.length\n  if (len < 1) return\n  for (let i = idx; i < len; i++) {\n    const pos =\n      parseInt(instances[i].vm.el!.style['top'], 10) - removedHeight - 16\n\n    instances[i].vm.component!.props.offset = pos\n  }\n}\n\nexport function closeAll(): void {\n  for (let i = instances.length - 1; i >= 0; i--) {\n    const instance = instances[i].vm.component\n    ;(instance?.proxy as any)?.close()\n  }\n}\n\nmessage.closeAll = closeAll\n\nexport default message as Message\n"],"names":["isClient","isVNode","PopupManager","debugWarn","createVNode","MessageConstructor","render","messageTypes"],"mappings":"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"}
+{"version":3,"file":"message-method.js","sources":["../../../../../../packages/components/message/src/message-method.ts"],"sourcesContent":["import { createVNode, render } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { isVNode, isNumber } from '@element-plus/utils/util'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { messageConfig } from '@element-plus/components/config-provider/src/config-provider'\nimport MessageConstructor from './message.vue'\nimport { messageTypes } from './message'\n\nimport type { Message, MessageFn, MessageQueue, MessageProps } from './message'\nimport type { ComponentPublicInstance, VNode } from 'vue'\n\nconst instances: MessageQueue = []\nlet seed = 1\n\n// TODO: Since Notify.ts is basically the same like this file. So we could do some encapsulation against them to reduce code duplication.\n\nconst message: MessageFn & Partial<Message> = function (options = {}) {\n  if (!isClient) return { close: () => undefined }\n  if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {\n    return { close: () => undefined }\n  }\n\n  if (\n    !isVNode(options) &&\n    typeof options === 'object' &&\n    options.grouping &&\n    !isVNode(options.message) &&\n    instances.length\n  ) {\n    const tempVm: any = instances.find(\n      (item) =>\n        `${item.vm.props?.message ?? ''}` ===\n        `${(options as any).message ?? ''}`\n    )\n    if (tempVm) {\n      tempVm.vm.component!.props.repeatNum += 1\n      tempVm.vm.component!.props.type = options?.type\n      return {\n        close: () =>\n          ((\n            vm.component!.proxy as ComponentPublicInstance<{ visible: boolean }>\n          ).visible = false),\n      }\n    }\n  }\n\n  if (typeof options === 'string' || isVNode(options)) {\n    options = { message: options }\n  }\n\n  let verticalOffset = options.offset || 20\n  instances.forEach(({ vm }) => {\n    verticalOffset += (vm.el?.offsetHeight || 0) + 16\n  })\n  verticalOffset += 16\n\n  const id = `message_${seed++}`\n  const userOnClose = options.onClose\n  const props: Partial<MessageProps> = {\n    zIndex: PopupManager.nextZIndex(),\n    offset: verticalOffset,\n    ...options,\n    id,\n    onClose: () => {\n      close(id, userOnClose)\n    },\n  }\n\n  let appendTo: HTMLElement | null = document.body\n  if (options.appendTo instanceof HTMLElement) {\n    appendTo = options.appendTo\n  } else if (typeof options.appendTo === 'string') {\n    appendTo = document.querySelector(options.appendTo)\n  }\n  // should fallback to default value with a warning\n  if (!(appendTo instanceof HTMLElement)) {\n    debugWarn(\n      'ElMessage',\n      'the appendTo option is not an HTMLElement. Falling back to document.body.'\n    )\n    appendTo = document.body\n  }\n\n  const container = document.createElement('div')\n\n  container.className = `container_${id}`\n\n  const message = props.message\n  const vm = createVNode(\n    MessageConstructor,\n    props,\n    isVNode(props.message) ? { default: () => message } : null\n  )\n\n  // clean message element preventing mem leak\n  vm.props!.onDestroy = () => {\n    render(null, container)\n    // since the element is destroy, then the VNode should be collected by GC as well\n    // we do not want cause any mem leak because we have returned vm as a reference to users\n    // so that we manually set it to false.\n  }\n\n  render(vm, container)\n  // instances will remove this item when close function gets called. So we do not need to worry about it.\n  instances.push({ vm })\n  appendTo.appendChild(container.firstElementChild!)\n\n  return {\n    // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle\n    // for out component, so that all closing steps will not be skipped.\n    close: () =>\n      ((\n        vm.component!.proxy as ComponentPublicInstance<{ visible: boolean }>\n      ).visible = false),\n  }\n}\n\nmessageTypes.forEach((type) => {\n  message[type] = (options = {}) => {\n    if (typeof options === 'string' || isVNode(options)) {\n      options = {\n        message: options,\n      }\n    }\n    return message({\n      ...options,\n      type,\n    })\n  }\n})\n\nexport function close(id: string, userOnClose?: (vm: VNode) => void): void {\n  const idx = instances.findIndex(({ vm }) => id === vm.component!.props.id)\n  if (idx === -1) return\n\n  const { vm } = instances[idx]\n  if (!vm) return\n  userOnClose?.(vm)\n\n  const removedHeight = vm.el!.offsetHeight\n  instances.splice(idx, 1)\n\n  // adjust other instances vertical offset\n  const len = instances.length\n  if (len < 1) return\n  for (let i = idx; i < len; i++) {\n    const pos =\n      parseInt(instances[i].vm.el!.style['top'], 10) - removedHeight - 16\n\n    instances[i].vm.component!.props.offset = pos\n  }\n}\n\nexport function closeAll(): void {\n  for (let i = instances.length - 1; i >= 0; i--) {\n    const instance = instances[i].vm.component\n    ;(instance?.proxy as any)?.close()\n  }\n}\n\nmessage.closeAll = closeAll\n\nexport default message as Message\n"],"names":["isClient","isNumber","messageConfig","isVNode","PopupManager","debugWarn","createVNode","MessageConstructor","render","messageTypes"],"mappings":"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"}

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

@@ -1,5 +1,8 @@
 import type { VNode, ExtractPropTypes, Component } from 'vue';
 export declare const messageTypes: readonly ["success", "info", "warning", "error"];
+export interface MessageConfigContext {
+    max?: number;
+}
 export declare const messageProps: {
     readonly customClass: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly center: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;