@element-plus/nightly 0.0.20260323 → 0.0.20260324

package/es/version.mjs

@@ -1,5 +1,5 @@
 //#region ../../packages/element-plus/version.ts
-const version = "0.0.20260323";
+const version = "0.0.20260324";
 
 //#endregion
 export { version };

package/es/version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.mjs","names":[],"sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20260323'\n"],"mappings":";AAAA,MAAa,UAAU"}
+{"version":3,"file":"version.mjs","names":[],"sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20260324'\n"],"mappings":";AAAA,MAAa,UAAU"}

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

@@ -292,6 +292,12 @@ declare const autocompleteProps: {
   readonly tabindex: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
   readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly inputStyle: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, () => Mutable<{}>, boolean>;
+  readonly countGraphemes: {
+    readonly type: vue.PropType<(value: string) => number>;
+    readonly required: false;
+    readonly validator: ((val: unknown) => boolean) | undefined;
+    __epPropKey: true;
+  };
   readonly autofocus: BooleanConstructor;
   readonly rows: EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
 };

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

@@ -2,19 +2,19 @@ import { DialogProps, DialogTransition } from "./dialog.js";
 import * as vue from "vue";
 
 //#region ../../packages/components/dialog/src/dialog.vue.d.ts
-declare var __VLS_42: {
+declare var __VLS_43: {
     close: () => void;
     titleId: string;
     titleClass: string;
-  }, __VLS_44: {}, __VLS_46: {}, __VLS_49: {};
+  }, __VLS_45: {}, __VLS_47: {}, __VLS_50: {};
 type __VLS_Slots = {} & {
-  header?: (props: typeof __VLS_42) => any;
+  header?: (props: typeof __VLS_43) => any;
 } & {
-  title?: (props: typeof __VLS_44) => any;
+  title?: (props: typeof __VLS_45) => any;
 } & {
-  default?: (props: typeof __VLS_46) => any;
+  default?: (props: typeof __VLS_47) => any;
 } & {
-  footer?: (props: typeof __VLS_49) => any;
+  footer?: (props: typeof __VLS_50) => any;
 };
 declare const __VLS_base: vue.DefineComponent<DialogProps, {
   /** @description whether the dialog is visible */visible: vue.Ref<boolean, boolean>;

package/lib/components/dialog/src/dialog.vue_vue_type_script_setup_true_lang.js

@@ -37,7 +37,7 @@ var dialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue
 		const dialogRef = (0, vue.ref)();
 		const headerRef = (0, vue.ref)();
 		const dialogContentRef = (0, vue.ref)();
-		const { visible, titleId, bodyId, style, overlayDialogStyle, rendered, transitionConfig, zIndex, _draggable, _alignCenter, _overflow, handleClose, onModalClick, onOpenAutoFocus, onCloseAutoFocus, onCloseRequested, onFocusoutPrevented, closing } = require_use_dialog.useDialog(props, dialogRef);
+		const { visible, titleId, bodyId, style, overlayDialogStyle, rendered, transitionConfig, zIndex, _draggable, _alignCenter, _overflow, penetrable, handleClose, onModalClick, onOpenAutoFocus, onCloseAutoFocus, onCloseRequested, onFocusoutPrevented, bringToFront, closing } = require_use_dialog.useDialog(props, dialogRef);
 		(0, vue.provide)(require_constants.dialogInjectionKey, {
 			dialogRef,
 			headerRef,
@@ -47,7 +47,6 @@ var dialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue
 			style
 		});
 		const overlayEvent = require_index$3.useSameTarget(onModalClick);
-		const penetrable = (0, vue.computed)(() => props.modalPenetrable && !props.modal && !props.fullscreen);
 		const resetPosition = () => {
 			dialogContentRef.value?.resetPosition();
 		};
@@ -69,7 +68,7 @@ var dialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue
 						"overlay-class": [
 							__props.modalClass ?? "",
 							`${(0, vue.unref)(ns).namespace.value}-modal-dialog`,
-							(0, vue.unref)(ns).is("penetrable", penetrable.value)
+							(0, vue.unref)(ns).is("penetrable", (0, vue.unref)(penetrable))
 						],
 						"z-index": (0, vue.unref)(zIndex)
 					}, {
@@ -110,7 +109,8 @@ var dialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue
 								"show-close": __props.showClose,
 								title: __props.title,
 								"aria-level": __props.headerAriaLevel,
-								onClose: (0, vue.unref)(handleClose)
+								onClose: (0, vue.unref)(handleClose),
+								onMousedown: (0, vue.unref)(bringToFront)
 							}), (0, vue.createSlots)({
 								header: (0, vue.withCtx)(() => [!_ctx.$slots.title ? (0, vue.renderSlot)(_ctx.$slots, "header", {
 									key: 0,
@@ -137,7 +137,8 @@ var dialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue
 								"show-close",
 								"title",
 								"aria-level",
-								"onClose"
+								"onClose",
+								"onMousedown"
 							])) : (0, vue.createCommentVNode)("v-if", true)]),
 							_: 3
 						}, 8, [

package/lib/components/dialog/src/dialog.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\n    <transition v-bind=\"transitionConfig\">\n      <el-overlay\n        v-show=\"visible\"\n        custom-mask-event\n        :mask=\"modal\"\n        :overlay-class=\"[\n          modalClass ?? '',\n          `${ns.namespace.value}-modal-dialog`,\n          ns.is('penetrable', penetrable),\n        ]\"\n        :z-index=\"zIndex\"\n      >\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"title || undefined\"\n          :aria-labelledby=\"!title ? titleId : undefined\"\n          :aria-describedby=\"bodyId\"\n          :class=\"[\n            `${ns.namespace.value}-overlay-dialog`,\n            ns.is('closing', closing),\n          ]\"\n          :style=\"overlayDialogStyle\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <el-focus-trap\n            loop\n            :trapped=\"visible\"\n            focus-start-el=\"container\"\n            @focus-after-trapped=\"onOpenAutoFocus\"\n            @focus-after-released=\"onCloseAutoFocus\"\n            @focusout-prevented=\"onFocusoutPrevented\"\n            @release-requested=\"onCloseRequested\"\n          >\n            <el-dialog-content\n              v-if=\"rendered\"\n              ref=\"dialogContentRef\"\n              v-bind=\"$attrs\"\n              :center=\"center\"\n              :align-center=\"_alignCenter\"\n              :close-icon=\"closeIcon\"\n              :draggable=\"_draggable\"\n              :overflow=\"_overflow\"\n              :fullscreen=\"fullscreen\"\n              :header-class=\"headerClass\"\n              :body-class=\"bodyClass\"\n              :footer-class=\"footerClass\"\n              :show-close=\"showClose\"\n              :title=\"title\"\n              :aria-level=\"headerAriaLevel\"\n              @close=\"handleClose\"\n            >\n              <template #header>\n                <slot\n                  v-if=\"!$slots.title\"\n                  name=\"header\"\n                  :close=\"handleClose\"\n                  :title-id=\"titleId\"\n                  :title-class=\"ns.e('title')\"\n                />\n                <slot v-else name=\"title\" />\n              </template>\n              <slot />\n              <template v-if=\"$slots.footer\" #footer>\n                <slot name=\"footer\" />\n              </template>\n            </el-dialog-content>\n          </el-focus-trap>\n        </div>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, useSlots } from 'vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useDeprecated, useNamespace, useSameTarget } from '@element-plus/hooks'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElDialogContent from './dialog-content.vue'\nimport { dialogInjectionKey } from './constants'\nimport { dialogEmits, dialogPropsDefaults } from './dialog'\nimport { useDialog } from './use-dialog'\n\nimport type { DialogProps } from './dialog'\n\ndefineOptions({\n  name: 'ElDialog',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<DialogProps>(), dialogPropsDefaults)\ndefineEmits(dialogEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-dialog',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/dialog.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst ns = useNamespace('dialog')\nconst dialogRef = ref<HTMLElement>()\nconst headerRef = ref<HTMLElement>()\nconst dialogContentRef = ref()\n\nconst {\n  visible,\n  titleId,\n  bodyId,\n  style,\n  overlayDialogStyle,\n  rendered,\n  transitionConfig,\n  zIndex,\n  _draggable,\n  _alignCenter,\n  _overflow,\n  handleClose,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onCloseRequested,\n  onFocusoutPrevented,\n  closing,\n} = useDialog(props, dialogRef)\n\nprovide(dialogInjectionKey, {\n  dialogRef,\n  headerRef,\n  bodyId,\n  ns,\n  rendered,\n  style,\n})\n\nconst overlayEvent = useSameTarget(onModalClick)\n\nconst penetrable = computed(\n  () => props.modalPenetrable && !props.modal && !props.fullscreen\n)\n\nconst resetPosition = () => {\n  dialogContentRef.value?.resetPosition()\n}\n\ndefineExpose({\n  /** @description whether the dialog is visible */\n  visible,\n  dialogContentRef,\n  resetPosition,\n  handleClose,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"dialog.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\n    <transition v-bind=\"transitionConfig\">\n      <el-overlay\n        v-show=\"visible\"\n        custom-mask-event\n        :mask=\"modal\"\n        :overlay-class=\"[\n          modalClass ?? '',\n          `${ns.namespace.value}-modal-dialog`,\n          ns.is('penetrable', penetrable),\n        ]\"\n        :z-index=\"zIndex\"\n      >\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"title || undefined\"\n          :aria-labelledby=\"!title ? titleId : undefined\"\n          :aria-describedby=\"bodyId\"\n          :class=\"[\n            `${ns.namespace.value}-overlay-dialog`,\n            ns.is('closing', closing),\n          ]\"\n          :style=\"overlayDialogStyle\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <el-focus-trap\n            loop\n            :trapped=\"visible\"\n            focus-start-el=\"container\"\n            @focus-after-trapped=\"onOpenAutoFocus\"\n            @focus-after-released=\"onCloseAutoFocus\"\n            @focusout-prevented=\"onFocusoutPrevented\"\n            @release-requested=\"onCloseRequested\"\n          >\n            <el-dialog-content\n              v-if=\"rendered\"\n              ref=\"dialogContentRef\"\n              v-bind=\"$attrs\"\n              :center=\"center\"\n              :align-center=\"_alignCenter\"\n              :close-icon=\"closeIcon\"\n              :draggable=\"_draggable\"\n              :overflow=\"_overflow\"\n              :fullscreen=\"fullscreen\"\n              :header-class=\"headerClass\"\n              :body-class=\"bodyClass\"\n              :footer-class=\"footerClass\"\n              :show-close=\"showClose\"\n              :title=\"title\"\n              :aria-level=\"headerAriaLevel\"\n              @close=\"handleClose\"\n              @mousedown=\"bringToFront\"\n            >\n              <template #header>\n                <slot\n                  v-if=\"!$slots.title\"\n                  name=\"header\"\n                  :close=\"handleClose\"\n                  :title-id=\"titleId\"\n                  :title-class=\"ns.e('title')\"\n                />\n                <slot v-else name=\"title\" />\n              </template>\n              <slot />\n              <template v-if=\"$slots.footer\" #footer>\n                <slot name=\"footer\" />\n              </template>\n            </el-dialog-content>\n          </el-focus-trap>\n        </div>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, useSlots } from 'vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useDeprecated, useNamespace, useSameTarget } from '@element-plus/hooks'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElDialogContent from './dialog-content.vue'\nimport { dialogInjectionKey } from './constants'\nimport { dialogEmits, dialogPropsDefaults } from './dialog'\nimport { useDialog } from './use-dialog'\n\nimport type { DialogProps } from './dialog'\n\ndefineOptions({\n  name: 'ElDialog',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<DialogProps>(), dialogPropsDefaults)\ndefineEmits(dialogEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-dialog',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/dialog.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst ns = useNamespace('dialog')\nconst dialogRef = ref<HTMLElement>()\nconst headerRef = ref<HTMLElement>()\nconst dialogContentRef = ref()\n\nconst {\n  visible,\n  titleId,\n  bodyId,\n  style,\n  overlayDialogStyle,\n  rendered,\n  transitionConfig,\n  zIndex,\n  _draggable,\n  _alignCenter,\n  _overflow,\n  penetrable,\n  handleClose,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onCloseRequested,\n  onFocusoutPrevented,\n  bringToFront,\n  closing,\n} = useDialog(props, dialogRef)\n\nprovide(dialogInjectionKey, {\n  dialogRef,\n  headerRef,\n  bodyId,\n  ns,\n  rendered,\n  style,\n})\n\nconst overlayEvent = useSameTarget(onModalClick)\n\nconst resetPosition = () => {\n  dialogContentRef.value?.resetPosition()\n}\n\ndefineExpose({\n  /** @description whether the dialog is visible */\n  visible,\n  dialogContentRef,\n  resetPosition,\n  handleClose,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAoGA,MAAM,QAAQ;EAEd,MAAM,2BAAiB;AAEvB,gCACE;GACE,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS;GACT,KAAK;GACN,0BACc,CAAC,CAAC,MAAM,MAAK,CAC9B;EAEA,MAAM,KAAK,6BAAa,SAAQ;EAChC,MAAM,0BAA6B;EACnC,MAAM,0BAA6B;EACnC,MAAM,iCAAuB;EAE7B,MAAM,EACJ,SACA,SACA,QACA,OACA,oBACA,UACA,kBACA,QACA,YACA,cACA,WACA,YACA,aACA,cACA,iBACA,kBACA,kBACA,qBACA,cACA,YACE,6BAAU,OAAO,UAAS;AAE9B,mBAAQ,sCAAoB;GAC1B;GACA;GACA;GACA;GACA;GACA;GACD,CAAA;EAED,MAAM,eAAe,8BAAc,aAAY;EAE/C,MAAM,sBAAsB;AAC1B,oBAAiB,OAAO,eAAc;;AAGxC,WAAa;GAEX;GACA;GACA;GACA;GACD,CAAA;;oEArFe,yBAAA,EAAA;IA7EX,IAAI,QAAA;IACJ,UAAU,QAAA,aAAQ,SAAA,QAAA,CAAuB,QAAA;;oCA2E7B,sBAAA,mDAAA,iBAzEuB,EAAA,EAApC,WAAA,IAyEa,CAAA,EAAA;qCADE,6DAAA,0BAAA,EAAA;MArEX,qBAAA;MACC,MAAM,QAAA;MACN,iBAAa;OAAc,QAAA,cAAU;yBAAqB,GAAE,CAAC,UAAU,MAAK;sBAA2B,GAAE,CAAC,GAAE,6BAAe,WAAU,CAAA;;MAKrI,0BAAS,OAAA;;sCA6DJ,6BAAA,OAAA;OA1DJ,MAAK;OACL,cAAW;OACV,cAAY,QAAA,SAAS;OACrB,mBAAe,CAAG,QAAA,uBAAQ,QAAO,GAAG;OACpC,mCAAkB,OAAM;OACxB,+BAAK,mBAAmB,GAAE,CAAC,UAAU,MAAK,iCAA+B,GAAE,CAAC,GAAE,0BAAY,QAAO,CAAA;OAIjG,8CAAO,mBAAkB,CAAA;OACzB,SAAK,OAAA,OAAA,OAAA,iCAAE,aAAY,CAAC,0BAAb,aAAY,CAAC,QAAO,GAAA,KAAA;OAC3B,aAAS,OAAA,OAAA,OAAA,iCAAE,aAAY,CAAC,8BAAb,aAAY,CAAC,YAAW,GAAA,KAAA;OACnC,WAAO,OAAA,OAAA,OAAA,iCAAE,aAAY,CAAC,4BAAb,aAAY,CAAC,UAAS,GAAA,KAAA;8CA6ChB,wBAAA,EAAA;OA1Cd,MAAA;OACC,wBAAS,QAAO;OACjB,kBAAe;OACd,oCAAqB,gBAAe;OACpC,qCAAsB,iBAAgB;OACtC,oCAAoB,oBAAmB;OACvC,mCAAmB,iBAAA;;uCAmCA,gBAhCZ,SAAQ,+CAgCI,oDAAA;;iBA/Bd;QAAJ,KAAI;UACIA,KAAAA,QAAM;QACb,QAAQ,QAAA;QACR,+BAAc,aAAY;QAC1B,cAAY,QAAA;QACZ,0BAAW,WAAU;QACrB,yBAAU,UAAS;QACnB,YAAY,QAAA;QACZ,gBAAc,QAAA;QACd,cAAY,QAAA;QACZ,gBAAc,QAAA;QACd,cAAY,QAAA;QACZ,OAAO,QAAA;QACP,cAAY,QAAA;QACZ,wBAAO,YAAW;QAClB,4BAAW,aAAA;;QAED,+BAOP,EALOC,KAAAA,OAAO,4BAKd,KAAA,QAAA,UAAA;;SAHC,sBAAO,YAAW;SAClB,wBAAU,QAAO;SACjB,2BAAa,GAAE,CAAC,EAAC,QAAA;iCAEQ,KAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA;wCAEtB,qBAAA,KAAA,QAAA,UAAA;;WACQA,KAAAA,OAAO;cAAS;mCACR,qBAAA,KAAA,QAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAjEtB,QAAO,CAAA"}

package/lib/components/dialog/src/dialog2.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog2.js","names":[],"sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\n    <transition v-bind=\"transitionConfig\">\n      <el-overlay\n        v-show=\"visible\"\n        custom-mask-event\n        :mask=\"modal\"\n        :overlay-class=\"[\n          modalClass ?? '',\n          `${ns.namespace.value}-modal-dialog`,\n          ns.is('penetrable', penetrable),\n        ]\"\n        :z-index=\"zIndex\"\n      >\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"title || undefined\"\n          :aria-labelledby=\"!title ? titleId : undefined\"\n          :aria-describedby=\"bodyId\"\n          :class=\"[\n            `${ns.namespace.value}-overlay-dialog`,\n            ns.is('closing', closing),\n          ]\"\n          :style=\"overlayDialogStyle\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <el-focus-trap\n            loop\n            :trapped=\"visible\"\n            focus-start-el=\"container\"\n            @focus-after-trapped=\"onOpenAutoFocus\"\n            @focus-after-released=\"onCloseAutoFocus\"\n            @focusout-prevented=\"onFocusoutPrevented\"\n            @release-requested=\"onCloseRequested\"\n          >\n            <el-dialog-content\n              v-if=\"rendered\"\n              ref=\"dialogContentRef\"\n              v-bind=\"$attrs\"\n              :center=\"center\"\n              :align-center=\"_alignCenter\"\n              :close-icon=\"closeIcon\"\n              :draggable=\"_draggable\"\n              :overflow=\"_overflow\"\n              :fullscreen=\"fullscreen\"\n              :header-class=\"headerClass\"\n              :body-class=\"bodyClass\"\n              :footer-class=\"footerClass\"\n              :show-close=\"showClose\"\n              :title=\"title\"\n              :aria-level=\"headerAriaLevel\"\n              @close=\"handleClose\"\n            >\n              <template #header>\n                <slot\n                  v-if=\"!$slots.title\"\n                  name=\"header\"\n                  :close=\"handleClose\"\n                  :title-id=\"titleId\"\n                  :title-class=\"ns.e('title')\"\n                />\n                <slot v-else name=\"title\" />\n              </template>\n              <slot />\n              <template v-if=\"$slots.footer\" #footer>\n                <slot name=\"footer\" />\n              </template>\n            </el-dialog-content>\n          </el-focus-trap>\n        </div>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, useSlots } from 'vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useDeprecated, useNamespace, useSameTarget } from '@element-plus/hooks'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElDialogContent from './dialog-content.vue'\nimport { dialogInjectionKey } from './constants'\nimport { dialogEmits, dialogPropsDefaults } from './dialog'\nimport { useDialog } from './use-dialog'\n\nimport type { DialogProps } from './dialog'\n\ndefineOptions({\n  name: 'ElDialog',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<DialogProps>(), dialogPropsDefaults)\ndefineEmits(dialogEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-dialog',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/dialog.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst ns = useNamespace('dialog')\nconst dialogRef = ref<HTMLElement>()\nconst headerRef = ref<HTMLElement>()\nconst dialogContentRef = ref()\n\nconst {\n  visible,\n  titleId,\n  bodyId,\n  style,\n  overlayDialogStyle,\n  rendered,\n  transitionConfig,\n  zIndex,\n  _draggable,\n  _alignCenter,\n  _overflow,\n  handleClose,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onCloseRequested,\n  onFocusoutPrevented,\n  closing,\n} = useDialog(props, dialogRef)\n\nprovide(dialogInjectionKey, {\n  dialogRef,\n  headerRef,\n  bodyId,\n  ns,\n  rendered,\n  style,\n})\n\nconst overlayEvent = useSameTarget(onModalClick)\n\nconst penetrable = computed(\n  () => props.modalPenetrable && !props.modal && !props.fullscreen\n)\n\nconst resetPosition = () => {\n  dialogContentRef.value?.resetPosition()\n}\n\ndefineExpose({\n  /** @description whether the dialog is visible */\n  visible,\n  dialogContentRef,\n  resetPosition,\n  handleClose,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"dialog2.js","names":[],"sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\n    <transition v-bind=\"transitionConfig\">\n      <el-overlay\n        v-show=\"visible\"\n        custom-mask-event\n        :mask=\"modal\"\n        :overlay-class=\"[\n          modalClass ?? '',\n          `${ns.namespace.value}-modal-dialog`,\n          ns.is('penetrable', penetrable),\n        ]\"\n        :z-index=\"zIndex\"\n      >\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"title || undefined\"\n          :aria-labelledby=\"!title ? titleId : undefined\"\n          :aria-describedby=\"bodyId\"\n          :class=\"[\n            `${ns.namespace.value}-overlay-dialog`,\n            ns.is('closing', closing),\n          ]\"\n          :style=\"overlayDialogStyle\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <el-focus-trap\n            loop\n            :trapped=\"visible\"\n            focus-start-el=\"container\"\n            @focus-after-trapped=\"onOpenAutoFocus\"\n            @focus-after-released=\"onCloseAutoFocus\"\n            @focusout-prevented=\"onFocusoutPrevented\"\n            @release-requested=\"onCloseRequested\"\n          >\n            <el-dialog-content\n              v-if=\"rendered\"\n              ref=\"dialogContentRef\"\n              v-bind=\"$attrs\"\n              :center=\"center\"\n              :align-center=\"_alignCenter\"\n              :close-icon=\"closeIcon\"\n              :draggable=\"_draggable\"\n              :overflow=\"_overflow\"\n              :fullscreen=\"fullscreen\"\n              :header-class=\"headerClass\"\n              :body-class=\"bodyClass\"\n              :footer-class=\"footerClass\"\n              :show-close=\"showClose\"\n              :title=\"title\"\n              :aria-level=\"headerAriaLevel\"\n              @close=\"handleClose\"\n              @mousedown=\"bringToFront\"\n            >\n              <template #header>\n                <slot\n                  v-if=\"!$slots.title\"\n                  name=\"header\"\n                  :close=\"handleClose\"\n                  :title-id=\"titleId\"\n                  :title-class=\"ns.e('title')\"\n                />\n                <slot v-else name=\"title\" />\n              </template>\n              <slot />\n              <template v-if=\"$slots.footer\" #footer>\n                <slot name=\"footer\" />\n              </template>\n            </el-dialog-content>\n          </el-focus-trap>\n        </div>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, useSlots } from 'vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useDeprecated, useNamespace, useSameTarget } from '@element-plus/hooks'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElDialogContent from './dialog-content.vue'\nimport { dialogInjectionKey } from './constants'\nimport { dialogEmits, dialogPropsDefaults } from './dialog'\nimport { useDialog } from './use-dialog'\n\nimport type { DialogProps } from './dialog'\n\ndefineOptions({\n  name: 'ElDialog',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<DialogProps>(), dialogPropsDefaults)\ndefineEmits(dialogEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-dialog',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/dialog.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst ns = useNamespace('dialog')\nconst dialogRef = ref<HTMLElement>()\nconst headerRef = ref<HTMLElement>()\nconst dialogContentRef = ref()\n\nconst {\n  visible,\n  titleId,\n  bodyId,\n  style,\n  overlayDialogStyle,\n  rendered,\n  transitionConfig,\n  zIndex,\n  _draggable,\n  _alignCenter,\n  _overflow,\n  penetrable,\n  handleClose,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onCloseRequested,\n  onFocusoutPrevented,\n  bringToFront,\n  closing,\n} = useDialog(props, dialogRef)\n\nprovide(dialogInjectionKey, {\n  dialogRef,\n  headerRef,\n  bodyId,\n  ns,\n  rendered,\n  style,\n})\n\nconst overlayEvent = useSameTarget(onModalClick)\n\nconst resetPosition = () => {\n  dialogContentRef.value?.resetPosition()\n}\n\ndefineExpose({\n  /** @description whether the dialog is visible */\n  visible,\n  dialogContentRef,\n  resetPosition,\n  handleClose,\n})\n</script>\n"],"mappings":""}

package/lib/components/dialog/src/use-dialog.d.ts

@@ -15,6 +15,7 @@ declare const useDialog: (props: DialogProps, targetRef: Ref<HTMLElement | undef
   onCloseAutoFocus: () => void;
   onCloseRequested: () => void;
   onFocusoutPrevented: (event: CustomEvent) => void;
+  bringToFront: () => void;
   titleId: Ref<string, string>;
   bodyId: Ref<string, string>;
   closed: Ref<boolean, boolean>;
@@ -33,6 +34,7 @@ declare const useDialog: (props: DialogProps, targetRef: Ref<HTMLElement | undef
   _alignCenter: vue.ComputedRef<boolean>;
   _overflow: vue.ComputedRef<boolean>;
   closing: Ref<boolean, boolean>;
+  penetrable: vue.ComputedRef<boolean | undefined>;
 };
 //#endregion
 export { useDialog };

package/lib/components/dialog/src/use-dialog.js

@@ -44,6 +44,7 @@ const useDialog = (props, targetRef) => {
 	const _draggable = (0, vue.computed)(() => (props.draggable ?? globalConfig.value?.draggable ?? false) && !props.fullscreen);
 	const _alignCenter = (0, vue.computed)(() => props.alignCenter ?? globalConfig.value?.alignCenter ?? false);
 	const _overflow = (0, vue.computed)(() => props.overflow ?? globalConfig.value?.overflow ?? false);
+	const penetrable = (0, vue.computed)(() => props.modalPenetrable && !props.modal && !props.fullscreen);
 	const overlayDialogStyle = (0, vue.computed)(() => {
 		if (_alignCenter.value) return { display: "flex" };
 		return {};
@@ -135,6 +136,10 @@ const useDialog = (props, targetRef) => {
 	function onCloseRequested() {
 		if (props.closeOnPressEscape) handleClose();
 	}
+	function bringToFront() {
+		if (!visible.value || !penetrable.value || props.zIndex !== void 0) return;
+		zIndex.value = nextZIndex();
+	}
 	(0, vue.watch)(() => props.zIndex, () => {
 		zIndex.value = props.zIndex ?? nextZIndex();
 	});
@@ -181,6 +186,7 @@ const useDialog = (props, targetRef) => {
 		onCloseAutoFocus,
 		onCloseRequested,
 		onFocusoutPrevented,
+		bringToFront,
 		titleId,
 		bodyId,
 		closed,
@@ -193,7 +199,8 @@ const useDialog = (props, targetRef) => {
 		_draggable,
 		_alignCenter,
 		_overflow,
-		closing
+		closing,
+		penetrable
 	};
 };
 

package/lib/components/dialog/src/use-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-dialog.js","names":["useZIndex","useId","useGlobalConfig","defaultNamespace","addUnit","DEFAULT_DIALOG_TRANSITION","UPDATE_MODEL_EVENT","isClient"],"sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport {\n  defaultNamespace,\n  useId,\n  useLockscreen,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport {\n  addUnit,\n  debugWarn,\n  isArray,\n  isClient,\n  isFunction,\n  isObject,\n} from '@element-plus/utils'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\nimport { DEFAULT_DIALOG_TRANSITION } from './constants'\n\nimport type { CSSProperties, Ref, SetupContext, TransitionProps } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nconst COMPONENT_NAME = 'ElDialog'\n\nexport const useDialog = (\n  props: DialogProps,\n  targetRef: Ref<HTMLElement | undefined>\n) => {\n  const instance = getCurrentInstance()!\n  const emit = instance.emit as SetupContext<DialogEmits>['emit']\n  const { nextZIndex } = useZIndex()\n\n  let lastPosition = ''\n  const titleId = useId()\n  const bodyId = useId()\n  const visible = ref(false)\n  const closed = ref(false)\n  const rendered = ref(false) // when destroyOnClose is true, we initialize it as false vise versa\n  const zIndex = ref(props.zIndex ?? nextZIndex())\n  const closing = ref(false)\n\n  let openTimer: (() => void) | undefined = undefined\n  let closeTimer: (() => void) | undefined = undefined\n\n  const config = useGlobalConfig()\n\n  const namespace = computed(() => config.value?.namespace ?? defaultNamespace)\n  const globalConfig = computed(() => config.value?.dialog)\n\n  const style = computed<CSSProperties>(() => {\n    const style: CSSProperties = {}\n    const varPrefix = `--${namespace.value}-dialog` as const\n    if (!props.fullscreen) {\n      if (props.top) {\n        style[`${varPrefix}-margin-top`] = props.top\n      }\n      const width = addUnit(props.width)\n      if (width) {\n        style[`${varPrefix}-width`] = width\n      }\n    }\n    return style\n  })\n\n  const _draggable = computed(\n    () =>\n      (props.draggable ?? globalConfig.value?.draggable ?? false) &&\n      !props.fullscreen\n  )\n\n  const _alignCenter = computed(\n    () => props.alignCenter ?? globalConfig.value?.alignCenter ?? false\n  )\n\n  const _overflow = computed(\n    () => props.overflow ?? globalConfig.value?.overflow ?? false\n  )\n\n  const overlayDialogStyle = computed<CSSProperties>(() => {\n    if (_alignCenter.value) {\n      return { display: 'flex' }\n    }\n    return {}\n  })\n\n  const transitionConfig = computed(() => {\n    const transition =\n      props.transition ??\n      globalConfig.value?.transition ??\n      DEFAULT_DIALOG_TRANSITION\n    const baseConfig = {\n      name: transition,\n      onAfterEnter: afterEnter,\n      onBeforeLeave: beforeLeave,\n      onAfterLeave: afterLeave,\n    }\n    if (isObject(transition)) {\n      const config = { ...transition } as TransitionProps\n      const _mergeHook = (\n        userHook: Arrayable<(el: Element) => void> | undefined,\n        defaultHook: () => void\n      ) => {\n        return (el: Element) => {\n          if (isArray(userHook)) {\n            userHook.forEach((fn) => {\n              if (isFunction(fn)) fn(el)\n            })\n          } else if (isFunction(userHook)) {\n            userHook(el)\n          }\n          defaultHook()\n        }\n      }\n      config.onAfterEnter = _mergeHook(config.onAfterEnter, afterEnter)\n      config.onBeforeLeave = _mergeHook(config.onBeforeLeave, beforeLeave)\n      config.onAfterLeave = _mergeHook(config.onAfterLeave, afterLeave)\n      if (!config.name) {\n        config.name = DEFAULT_DIALOG_TRANSITION\n        debugWarn(\n          COMPONENT_NAME,\n          `transition.name is missing when using object syntax, fallback to '${DEFAULT_DIALOG_TRANSITION}'`\n        )\n      }\n      return config\n    }\n\n    return baseConfig\n  })\n\n  function afterEnter() {\n    emit('opened')\n  }\n\n  function afterLeave() {\n    emit('closed')\n    emit(UPDATE_MODEL_EVENT, false)\n    if (props.destroyOnClose) {\n      rendered.value = false\n    }\n    closing.value = false\n  }\n\n  function beforeLeave() {\n    closing.value = true\n    emit('close')\n  }\n\n  function open() {\n    closeTimer?.()\n    openTimer?.()\n\n    if (props.openDelay && props.openDelay > 0) {\n      ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n    } else {\n      doOpen()\n    }\n  }\n\n  function close() {\n    openTimer?.()\n    closeTimer?.()\n\n    if (props.closeDelay && props.closeDelay > 0) {\n      ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n    } else {\n      doClose()\n    }\n  }\n\n  function handleClose() {\n    function hide(shouldCancel?: boolean) {\n      if (shouldCancel) return\n      closed.value = true\n      visible.value = false\n    }\n\n    if (props.beforeClose) {\n      props.beforeClose(hide)\n    } else {\n      close()\n    }\n  }\n\n  function onModalClick() {\n    if (props.closeOnClickModal) {\n      handleClose()\n    }\n  }\n\n  function doOpen() {\n    if (!isClient) return\n    visible.value = true\n  }\n\n  function doClose() {\n    visible.value = false\n  }\n\n  function onOpenAutoFocus() {\n    emit('openAutoFocus')\n  }\n\n  function onCloseAutoFocus() {\n    emit('closeAutoFocus')\n  }\n\n  function onFocusoutPrevented(event: CustomEvent) {\n    if (event.detail?.focusReason === 'pointer') {\n      event.preventDefault()\n    }\n  }\n\n  if (props.lockScroll) {\n    useLockscreen(visible)\n  }\n\n  function onCloseRequested() {\n    if (props.closeOnPressEscape) {\n      handleClose()\n    }\n  }\n\n  watch(\n    () => props.zIndex,\n    () => {\n      zIndex.value = props.zIndex ?? nextZIndex()\n    }\n  )\n\n  watch(\n    () => props.modelValue,\n    (val) => {\n      if (val) {\n        closed.value = false\n        closing.value = false\n        open()\n        rendered.value = true // enables lazy rendering\n        zIndex.value = props.zIndex ?? nextZIndex()\n        // this.$el.addEventListener('scroll', this.updatePopper)\n        nextTick(() => {\n          emit('open')\n          if (targetRef.value) {\n            targetRef.value.parentElement!.scrollTop = 0\n            targetRef.value.parentElement!.scrollLeft = 0\n            targetRef.value.scrollTop = 0\n          }\n        })\n      } else {\n        // this.$el.removeEventListener('scroll', this.updatePopper\n        if (visible.value) {\n          close()\n        }\n      }\n    }\n  )\n\n  watch(\n    () => props.fullscreen,\n    (val) => {\n      if (!targetRef.value) return\n      if (val) {\n        lastPosition = targetRef.value.style.transform\n        targetRef.value.style.transform = ''\n      } else {\n        targetRef.value.style.transform = lastPosition\n      }\n    }\n  )\n\n  onMounted(() => {\n    if (props.modelValue) {\n      visible.value = true\n      rendered.value = true // enables lazy rendering\n      open()\n    }\n  })\n\n  return {\n    afterEnter,\n    afterLeave,\n    beforeLeave,\n    handleClose,\n    onModalClick,\n    close,\n    doClose,\n    onOpenAutoFocus,\n    onCloseAutoFocus,\n    onCloseRequested,\n    onFocusoutPrevented,\n    titleId,\n    bodyId,\n    closed,\n    style,\n    overlayDialogStyle,\n    rendered,\n    visible,\n    zIndex,\n    transitionConfig,\n    _draggable,\n    _alignCenter,\n    _overflow,\n    closing,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-dialog.js","names":["useZIndex","useId","useGlobalConfig","defaultNamespace","addUnit","DEFAULT_DIALOG_TRANSITION","UPDATE_MODEL_EVENT","isClient"],"sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport {\n  defaultNamespace,\n  useId,\n  useLockscreen,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport {\n  addUnit,\n  debugWarn,\n  isArray,\n  isClient,\n  isFunction,\n  isObject,\n} from '@element-plus/utils'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\nimport { DEFAULT_DIALOG_TRANSITION } from './constants'\n\nimport type { CSSProperties, Ref, SetupContext, TransitionProps } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nconst COMPONENT_NAME = 'ElDialog'\n\nexport const useDialog = (\n  props: DialogProps,\n  targetRef: Ref<HTMLElement | undefined>\n) => {\n  const instance = getCurrentInstance()!\n  const emit = instance.emit as SetupContext<DialogEmits>['emit']\n  const { nextZIndex } = useZIndex()\n\n  let lastPosition = ''\n  const titleId = useId()\n  const bodyId = useId()\n  const visible = ref(false)\n  const closed = ref(false)\n  const rendered = ref(false) // when destroyOnClose is true, we initialize it as false vise versa\n  const zIndex = ref(props.zIndex ?? nextZIndex())\n  const closing = ref(false)\n\n  let openTimer: (() => void) | undefined = undefined\n  let closeTimer: (() => void) | undefined = undefined\n\n  const config = useGlobalConfig()\n\n  const namespace = computed(() => config.value?.namespace ?? defaultNamespace)\n  const globalConfig = computed(() => config.value?.dialog)\n\n  const style = computed<CSSProperties>(() => {\n    const style: CSSProperties = {}\n    const varPrefix = `--${namespace.value}-dialog` as const\n    if (!props.fullscreen) {\n      if (props.top) {\n        style[`${varPrefix}-margin-top`] = props.top\n      }\n      const width = addUnit(props.width)\n      if (width) {\n        style[`${varPrefix}-width`] = width\n      }\n    }\n    return style\n  })\n\n  const _draggable = computed(\n    () =>\n      (props.draggable ?? globalConfig.value?.draggable ?? false) &&\n      !props.fullscreen\n  )\n\n  const _alignCenter = computed(\n    () => props.alignCenter ?? globalConfig.value?.alignCenter ?? false\n  )\n\n  const _overflow = computed(\n    () => props.overflow ?? globalConfig.value?.overflow ?? false\n  )\n\n  const penetrable = computed(\n    () => props.modalPenetrable && !props.modal && !props.fullscreen\n  )\n\n  const overlayDialogStyle = computed<CSSProperties>(() => {\n    if (_alignCenter.value) {\n      return { display: 'flex' }\n    }\n    return {}\n  })\n\n  const transitionConfig = computed(() => {\n    const transition =\n      props.transition ??\n      globalConfig.value?.transition ??\n      DEFAULT_DIALOG_TRANSITION\n    const baseConfig = {\n      name: transition,\n      onAfterEnter: afterEnter,\n      onBeforeLeave: beforeLeave,\n      onAfterLeave: afterLeave,\n    }\n    if (isObject(transition)) {\n      const config = { ...transition } as TransitionProps\n      const _mergeHook = (\n        userHook: Arrayable<(el: Element) => void> | undefined,\n        defaultHook: () => void\n      ) => {\n        return (el: Element) => {\n          if (isArray(userHook)) {\n            userHook.forEach((fn) => {\n              if (isFunction(fn)) fn(el)\n            })\n          } else if (isFunction(userHook)) {\n            userHook(el)\n          }\n          defaultHook()\n        }\n      }\n      config.onAfterEnter = _mergeHook(config.onAfterEnter, afterEnter)\n      config.onBeforeLeave = _mergeHook(config.onBeforeLeave, beforeLeave)\n      config.onAfterLeave = _mergeHook(config.onAfterLeave, afterLeave)\n      if (!config.name) {\n        config.name = DEFAULT_DIALOG_TRANSITION\n        debugWarn(\n          COMPONENT_NAME,\n          `transition.name is missing when using object syntax, fallback to '${DEFAULT_DIALOG_TRANSITION}'`\n        )\n      }\n      return config\n    }\n\n    return baseConfig\n  })\n\n  function afterEnter() {\n    emit('opened')\n  }\n\n  function afterLeave() {\n    emit('closed')\n    emit(UPDATE_MODEL_EVENT, false)\n    if (props.destroyOnClose) {\n      rendered.value = false\n    }\n    closing.value = false\n  }\n\n  function beforeLeave() {\n    closing.value = true\n    emit('close')\n  }\n\n  function open() {\n    closeTimer?.()\n    openTimer?.()\n\n    if (props.openDelay && props.openDelay > 0) {\n      ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n    } else {\n      doOpen()\n    }\n  }\n\n  function close() {\n    openTimer?.()\n    closeTimer?.()\n\n    if (props.closeDelay && props.closeDelay > 0) {\n      ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n    } else {\n      doClose()\n    }\n  }\n\n  function handleClose() {\n    function hide(shouldCancel?: boolean) {\n      if (shouldCancel) return\n      closed.value = true\n      visible.value = false\n    }\n\n    if (props.beforeClose) {\n      props.beforeClose(hide)\n    } else {\n      close()\n    }\n  }\n\n  function onModalClick() {\n    if (props.closeOnClickModal) {\n      handleClose()\n    }\n  }\n\n  function doOpen() {\n    if (!isClient) return\n    visible.value = true\n  }\n\n  function doClose() {\n    visible.value = false\n  }\n\n  function onOpenAutoFocus() {\n    emit('openAutoFocus')\n  }\n\n  function onCloseAutoFocus() {\n    emit('closeAutoFocus')\n  }\n\n  function onFocusoutPrevented(event: CustomEvent) {\n    if (event.detail?.focusReason === 'pointer') {\n      event.preventDefault()\n    }\n  }\n\n  if (props.lockScroll) {\n    useLockscreen(visible)\n  }\n\n  function onCloseRequested() {\n    if (props.closeOnPressEscape) {\n      handleClose()\n    }\n  }\n\n  function bringToFront() {\n    if (!visible.value || !penetrable.value || props.zIndex !== undefined) {\n      return\n    }\n\n    zIndex.value = nextZIndex()\n  }\n\n  watch(\n    () => props.zIndex,\n    () => {\n      zIndex.value = props.zIndex ?? nextZIndex()\n    }\n  )\n\n  watch(\n    () => props.modelValue,\n    (val) => {\n      if (val) {\n        closed.value = false\n        closing.value = false\n        open()\n        rendered.value = true // enables lazy rendering\n        zIndex.value = props.zIndex ?? nextZIndex()\n        // this.$el.addEventListener('scroll', this.updatePopper)\n        nextTick(() => {\n          emit('open')\n          if (targetRef.value) {\n            targetRef.value.parentElement!.scrollTop = 0\n            targetRef.value.parentElement!.scrollLeft = 0\n            targetRef.value.scrollTop = 0\n          }\n        })\n      } else {\n        // this.$el.removeEventListener('scroll', this.updatePopper\n        if (visible.value) {\n          close()\n        }\n      }\n    }\n  )\n\n  watch(\n    () => props.fullscreen,\n    (val) => {\n      if (!targetRef.value) return\n      if (val) {\n        lastPosition = targetRef.value.style.transform\n        targetRef.value.style.transform = ''\n      } else {\n        targetRef.value.style.transform = lastPosition\n      }\n    }\n  )\n\n  onMounted(() => {\n    if (props.modelValue) {\n      visible.value = true\n      rendered.value = true // enables lazy rendering\n      open()\n    }\n  })\n\n  return {\n    afterEnter,\n    afterLeave,\n    beforeLeave,\n    handleClose,\n    onModalClick,\n    close,\n    doClose,\n    onOpenAutoFocus,\n    onCloseAutoFocus,\n    onCloseRequested,\n    onFocusoutPrevented,\n    bringToFront,\n    titleId,\n    bodyId,\n    closed,\n    style,\n    overlayDialogStyle,\n    rendered,\n    visible,\n    zIndex,\n    transitionConfig,\n    _draggable,\n    _alignCenter,\n    _overflow,\n    closing,\n    penetrable,\n  }\n}\n"],"mappings":"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"}

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

@@ -147,6 +147,10 @@ interface InputProps {
    * @description same as `name` in native input
    */
   name?: string;
+  /**
+   * @description Count graphemes of input value. If it's set, native maxlength and minlength won't be used.
+   */
+  countGraphemes?: (value: string) => number;
 }
 /**
  * @deprecated Removed after 3.0.0, Use `InputProps` instead.
@@ -238,6 +242,12 @@ declare const inputProps: {
   readonly tabindex: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
   readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly inputStyle: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, () => Mutable<{}>, boolean>;
+  readonly countGraphemes: {
+    readonly type: vue.PropType<(value: string) => number>;
+    readonly required: false;
+    readonly validator: ((val: unknown) => boolean) | undefined;
+    __epPropKey: true;
+  };
   readonly autofocus: BooleanConstructor;
   readonly rows: EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
 };

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

@@ -98,6 +98,7 @@ const inputProps = require_runtime$1.buildProps({
 		]),
 		default: () => require_typescript.mutable({})
 	},
+	countGraphemes: { type: require_runtime$1.definePropType(Function) },
 	autofocus: Boolean,
 	rows: {
 		type: Number,

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["buildProps","useSizeProp","definePropType","iconPropType","CircleClose","mutable","useAriaProps","UPDATE_MODEL_EVENT"],"sources":["../../../../../../packages/components/input/src/input.ts"],"sourcesContent":["import { markRaw } from 'vue'\nimport {\n  buildProps,\n  definePropType,\n  iconPropType,\n  isString,\n  mutable,\n} from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useAriaProps, useSizeProp } from '@element-plus/hooks'\nimport { CircleClose } from '@element-plus/icons-vue'\n\nimport type { ExtractPublicPropTypes, HTMLAttributes, StyleValue } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { IconPropType } from '@element-plus/utils'\n\nexport type InputModelModifiers = {\n  lazy?: true\n  number?: true\n  trim?: true\n}\nexport type InputAutoSize = { minRows?: number; maxRows?: number } | boolean\n// Some commonly used values for input type\nexport type InputType =\n  | 'text'\n  | 'textarea'\n  | 'number'\n  | 'password'\n  | 'email'\n  | 'search'\n  | 'tel'\n  | 'url'\n  | (string & NonNullable<unknown>)\n\nexport interface InputProps {\n  /**\n   * @description native input id\n   */\n  id?: string\n  /**\n   * @description input box size\n   */\n  size?: ComponentSize\n  /**\n   * @description whether to disable\n   */\n  disabled?: boolean\n  /**\n   * @description binding value\n   */\n  modelValue?: string | number | null | undefined\n  /**\n   * @description v-model modifiers, reference [Vue modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers)\n   */\n  modelModifiers?: InputModelModifiers\n  /**\n   * @description same as `maxlength` in native input\n   */\n  maxlength?: string | number\n  /**\n   * @description same as `minlength` in native input\n   */\n  minlength?: string | number\n  /**\n   * @description type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)\n   */\n  type?: InputType\n  /**\n   * @description control the resizability\n   */\n  resize?: 'none' | 'both' | 'horizontal' | 'vertical'\n  /**\n   * @description whether textarea has an adaptive height\n   */\n  autosize?: InputAutoSize\n  /**\n   * @description native input autocomplete\n   * - When the number of literal types in a union exceeds 315, the TS2590 error occurs. see: https://github.com/vuejs/core/issues/10514\n   */\n  autocomplete?: string // HTMLInputElement['autocomplete']\n  /**\n   * @description format content\n   */\n  formatter?: (value: string) => string\n  /**\n   * @description parse content\n   */\n  parser?: (value: string) => string\n  /**\n   * @description placeholder\n   */\n  placeholder?: string\n  /**\n   * @description native input form\n   */\n  form?: string\n  /**\n   * @description native input readonly\n   */\n  readonly?: boolean\n  /**\n   * @description whether to show clear button\n   */\n  clearable?: boolean\n  /**\n   * @description custom clear icon component\n   */\n  clearIcon?: IconPropType\n  /**\n   * @description toggleable password input\n   */\n  showPassword?: boolean\n  /**\n   * @description word count\n   */\n  showWordLimit?: boolean\n  /**\n   * @description word count position, valid when `show-word-limit` is true\n   */\n  wordLimitPosition?: 'inside' | 'outside'\n  /**\n   * @description suffix icon\n   */\n  suffixIcon?: IconPropType\n  /**\n   * @description prefix icon\n   */\n  prefixIcon?: IconPropType\n  /**\n   * @description container role, internal properties provided for use by the picker component\n   */\n  containerRole?: string\n  /**\n   * @description input tabindex\n   */\n  tabindex?: string | number\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\n  /**\n   * @description input or textarea element style\n   */\n  inputStyle?: StyleValue\n  /**\n   * @description native input autofocus\n   */\n  autofocus?: boolean\n  /**\n   * @description number of rows of textarea, only works when `type` is 'textarea'\n   */\n  rows?: number\n  /**\n   * @description native `aria-label` attribute\n   */\n  ariaLabel?: string\n  /**\n   * @description native input mode for virtual keyboards\n   */\n  inputmode?: HTMLAttributes['inputmode']\n  /**\n   * @description same as `name` in native input\n   */\n  name?: string\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `InputProps` instead.\n */\nexport const inputProps = buildProps({\n  /**\n   * @description native input id\n   */\n  id: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description input box size\n   */\n  size: useSizeProp,\n  /**\n   * @description whether to disable\n   */\n  disabled: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<string | number | null | undefined>([\n      String,\n      Number,\n      Object,\n    ]),\n    default: '',\n  },\n  /**\n   * @description v-model modifiers, reference [Vue modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers)\n   */\n  modelModifiers: {\n    type: definePropType<InputModelModifiers>(Object),\n    default: () => ({}),\n  },\n  /**\n   * @description same as `maxlength` in native input\n   */\n  maxlength: {\n    type: [String, Number],\n  },\n  /**\n   * @description same as `minlength` in native input\n   */\n  minlength: {\n    type: [String, Number],\n  },\n  /**\n   * @description type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)\n   */\n  type: {\n    type: definePropType<InputType>(String),\n    default: 'text',\n  },\n  /**\n   * @description control the resizability\n   */\n  resize: {\n    type: String,\n    values: ['none', 'both', 'horizontal', 'vertical'],\n  },\n  /**\n   * @description whether textarea has an adaptive height\n   */\n  autosize: {\n    type: definePropType<InputAutoSize>([Boolean, Object]),\n    default: false,\n  },\n  /**\n   * @description native input autocomplete\n   */\n  autocomplete: {\n    type: definePropType<HTMLInputElement['autocomplete']>(String),\n    default: 'off',\n  },\n  /**\n   * @description format content\n   */\n  formatter: {\n    type: Function,\n  },\n  /**\n   * @description parse content\n   */\n  parser: {\n    type: Function,\n  },\n  /**\n   * @description placeholder\n   */\n  placeholder: {\n    type: String,\n  },\n  /**\n   * @description native input form\n   */\n  form: {\n    type: String,\n  },\n  /**\n   * @description native input readonly\n   */\n  readonly: Boolean,\n  /**\n   * @description whether to show clear button\n   */\n  clearable: Boolean,\n  /**\n   * @description custom clear icon component\n   */\n  clearIcon: {\n    type: iconPropType,\n    default: CircleClose,\n  },\n  /**\n   * @description toggleable password input\n   */\n  showPassword: Boolean,\n  /**\n   * @description word count\n   */\n  showWordLimit: Boolean,\n  /**\n   * @description word count position, valid when `show-word-limit` is true\n   */\n  wordLimitPosition: {\n    type: String,\n    values: ['inside', 'outside'],\n    default: 'inside',\n  },\n  /**\n   * @description suffix icon\n   */\n  suffixIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description prefix icon\n   */\n  prefixIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description container role, internal properties provided for use by the picker component\n   */\n  containerRole: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description input tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: 0,\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description input or textarea element style\n   */\n  inputStyle: {\n    type: definePropType<StyleValue>([Object, Array, String]),\n    default: () => mutable({} as const),\n  },\n  /**\n   * @description native input autofocus\n   */\n  autofocus: Boolean,\n  rows: {\n    type: Number,\n    default: 2,\n  },\n  ...useAriaProps(['ariaLabel']),\n  /**\n   * @description native input mode for virtual keyboards\n   */\n  inputmode: {\n    type: definePropType<HTMLAttributes['inputmode']>(String),\n    default: undefined,\n  },\n  /**\n   * @description same as `name` in native input\n   */\n  name: String,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `InputProps` instead.\n */\nexport type InputPropsPublic = ExtractPublicPropTypes<typeof inputProps>\n\nexport const inputEmits = {\n  [UPDATE_MODEL_EVENT]: (value: string) => isString(value),\n  input: (value: string) => isString(value),\n  change: (value: string, evt?: Event) =>\n    isString(value) && (evt instanceof Event || evt === undefined),\n  focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n  blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n  clear: (evt: MouseEvent | undefined) =>\n    evt === undefined || evt instanceof MouseEvent,\n  mouseleave: (evt: MouseEvent) => evt instanceof MouseEvent,\n  mouseenter: (evt: MouseEvent) => evt instanceof MouseEvent,\n  // NOTE: when autofill by browser, the keydown event is instanceof Event, not KeyboardEvent\n  // relative bug report https://github.com/element-plus/element-plus/issues/6665\n  keydown: (evt: KeyboardEvent | Event) => evt instanceof Event,\n  compositionstart: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n  compositionupdate: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n  compositionend: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n}\nexport type InputEmits = typeof inputEmits\n\n/**\n * @description default values for InputProps, used in components that extend InputProps like Autocomplete\n */\nexport const inputPropsDefaults = {\n  disabled: undefined,\n  modelValue: '',\n  modelModifiers: () => ({}),\n  type: 'text' as InputType,\n  autocomplete: 'off',\n  clearIcon: markRaw(CircleClose),\n  wordLimitPosition: 'inside',\n  tabindex: 0,\n  validateEvent: true,\n  inputStyle: () => ({}),\n  rows: 2,\n} as const\n"],"mappings":";;;;;;;;;;;;;;;;AAyKA,MAAa,aAAaA,6BAAW;CAInC,IAAI;EACF,MAAM;EACN,SAAS;EACV;CAID,MAAMC;CAIN,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,YAAY;EACV,MAAMC,iCAAmD;GACvD;GACA;GACA;GACD,CAAC;EACF,SAAS;EACV;CAID,gBAAgB;EACd,MAAMA,iCAAoC,OAAO;EACjD,gBAAgB,EAAE;EACnB;CAID,WAAW,EACT,MAAM,CAAC,QAAQ,OAAO,EACvB;CAID,WAAW,EACT,MAAM,CAAC,QAAQ,OAAO,EACvB;CAID,MAAM;EACJ,MAAMA,iCAA0B,OAAO;EACvC,SAAS;EACV;CAID,QAAQ;EACN,MAAM;EACN,QAAQ;GAAC;GAAQ;GAAQ;GAAc;GAAW;EACnD;CAID,UAAU;EACR,MAAMA,iCAA8B,CAAC,SAAS,OAAO,CAAC;EACtD,SAAS;EACV;CAID,cAAc;EACZ,MAAMA,iCAAiD,OAAO;EAC9D,SAAS;EACV;CAID,WAAW,EACT,MAAM,UACP;CAID,QAAQ,EACN,MAAM,UACP;CAID,aAAa,EACX,MAAM,QACP;CAID,MAAM,EACJ,MAAM,QACP;CAID,UAAU;CAIV,WAAW;CAIX,WAAW;EACT,MAAMC;EACN,SAASC;EACV;CAID,cAAc;CAId,eAAe;CAIf,mBAAmB;EACjB,MAAM;EACN,QAAQ,CAAC,UAAU,UAAU;EAC7B,SAAS;EACV;CAID,YAAY,EACV,MAAMD,2BACP;CAID,YAAY,EACV,MAAMA,2BACP;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,UAAU;EACR,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,YAAY;EACV,MAAMD,iCAA2B;GAAC;GAAQ;GAAO;GAAO,CAAC;EACzD,eAAeG,2BAAQ,EAAE,CAAU;EACpC;CAID,WAAW;CACX,MAAM;EACJ,MAAM;EACN,SAAS;EACV;CACD,GAAGC,6BAAa,CAAC,YAAY,CAAC;CAI9B,WAAW;EACT,MAAMJ,iCAA4C,OAAO;EACzD,SAAS;EACV;CAID,MAAM;CACP,CAAU;AAOX,MAAa,aAAa;EACvBK,oCAAsB,oCAA2B,MAAM;CACxD,QAAQ,oCAA2B,MAAM;CACzC,SAAS,OAAe,kCACb,MAAM,KAAK,eAAe,SAAS,QAAQ;CACtD,QAAQ,QAAoB,eAAe;CAC3C,OAAO,QAAoB,eAAe;CAC1C,QAAQ,QACN,QAAQ,UAAa,eAAe;CACtC,aAAa,QAAoB,eAAe;CAChD,aAAa,QAAoB,eAAe;CAGhD,UAAU,QAA+B,eAAe;CACxD,mBAAmB,QAA0B,eAAe;CAC5D,oBAAoB,QAA0B,eAAe;CAC7D,iBAAiB,QAA0B,eAAe;CAC3D;;;;AAMD,MAAa,qBAAqB;CAChC,UAAU;CACV,YAAY;CACZ,uBAAuB,EAAE;CACzB,MAAM;CACN,cAAc;CACd,4BAAmBH,oCAAY;CAC/B,mBAAmB;CACnB,UAAU;CACV,eAAe;CACf,mBAAmB,EAAE;CACrB,MAAM;CACP"}
+{"version":3,"file":"input.js","names":["buildProps","useSizeProp","definePropType","iconPropType","CircleClose","mutable","useAriaProps","UPDATE_MODEL_EVENT"],"sources":["../../../../../../packages/components/input/src/input.ts"],"sourcesContent":["import { markRaw } from 'vue'\nimport {\n  buildProps,\n  definePropType,\n  iconPropType,\n  isString,\n  mutable,\n} from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useAriaProps, useSizeProp } from '@element-plus/hooks'\nimport { CircleClose } from '@element-plus/icons-vue'\n\nimport type { ExtractPublicPropTypes, HTMLAttributes, StyleValue } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { IconPropType } from '@element-plus/utils'\n\nexport type InputModelModifiers = {\n  lazy?: true\n  number?: true\n  trim?: true\n}\nexport type InputAutoSize = { minRows?: number; maxRows?: number } | boolean\n// Some commonly used values for input type\nexport type InputType =\n  | 'text'\n  | 'textarea'\n  | 'number'\n  | 'password'\n  | 'email'\n  | 'search'\n  | 'tel'\n  | 'url'\n  | (string & NonNullable<unknown>)\n\nexport interface InputProps {\n  /**\n   * @description native input id\n   */\n  id?: string\n  /**\n   * @description input box size\n   */\n  size?: ComponentSize\n  /**\n   * @description whether to disable\n   */\n  disabled?: boolean\n  /**\n   * @description binding value\n   */\n  modelValue?: string | number | null | undefined\n  /**\n   * @description v-model modifiers, reference [Vue modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers)\n   */\n  modelModifiers?: InputModelModifiers\n  /**\n   * @description same as `maxlength` in native input\n   */\n  maxlength?: string | number\n  /**\n   * @description same as `minlength` in native input\n   */\n  minlength?: string | number\n  /**\n   * @description type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)\n   */\n  type?: InputType\n  /**\n   * @description control the resizability\n   */\n  resize?: 'none' | 'both' | 'horizontal' | 'vertical'\n  /**\n   * @description whether textarea has an adaptive height\n   */\n  autosize?: InputAutoSize\n  /**\n   * @description native input autocomplete\n   * - When the number of literal types in a union exceeds 315, the TS2590 error occurs. see: https://github.com/vuejs/core/issues/10514\n   */\n  autocomplete?: string // HTMLInputElement['autocomplete']\n  /**\n   * @description format content\n   */\n  formatter?: (value: string) => string\n  /**\n   * @description parse content\n   */\n  parser?: (value: string) => string\n  /**\n   * @description placeholder\n   */\n  placeholder?: string\n  /**\n   * @description native input form\n   */\n  form?: string\n  /**\n   * @description native input readonly\n   */\n  readonly?: boolean\n  /**\n   * @description whether to show clear button\n   */\n  clearable?: boolean\n  /**\n   * @description custom clear icon component\n   */\n  clearIcon?: IconPropType\n  /**\n   * @description toggleable password input\n   */\n  showPassword?: boolean\n  /**\n   * @description word count\n   */\n  showWordLimit?: boolean\n  /**\n   * @description word count position, valid when `show-word-limit` is true\n   */\n  wordLimitPosition?: 'inside' | 'outside'\n  /**\n   * @description suffix icon\n   */\n  suffixIcon?: IconPropType\n  /**\n   * @description prefix icon\n   */\n  prefixIcon?: IconPropType\n  /**\n   * @description container role, internal properties provided for use by the picker component\n   */\n  containerRole?: string\n  /**\n   * @description input tabindex\n   */\n  tabindex?: string | number\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\n  /**\n   * @description input or textarea element style\n   */\n  inputStyle?: StyleValue\n  /**\n   * @description native input autofocus\n   */\n  autofocus?: boolean\n  /**\n   * @description number of rows of textarea, only works when `type` is 'textarea'\n   */\n  rows?: number\n  /**\n   * @description native `aria-label` attribute\n   */\n  ariaLabel?: string\n  /**\n   * @description native input mode for virtual keyboards\n   */\n  inputmode?: HTMLAttributes['inputmode']\n  /**\n   * @description same as `name` in native input\n   */\n  name?: string\n  /**\n   * @description Count graphemes of input value. If it's set, native maxlength and minlength won't be used.\n   */\n  countGraphemes?: (value: string) => number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `InputProps` instead.\n */\nexport const inputProps = buildProps({\n  /**\n   * @description native input id\n   */\n  id: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description input box size\n   */\n  size: useSizeProp,\n  /**\n   * @description whether to disable\n   */\n  disabled: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<string | number | null | undefined>([\n      String,\n      Number,\n      Object,\n    ]),\n    default: '',\n  },\n  /**\n   * @description v-model modifiers, reference [Vue modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers)\n   */\n  modelModifiers: {\n    type: definePropType<InputModelModifiers>(Object),\n    default: () => ({}),\n  },\n  /**\n   * @description same as `maxlength` in native input\n   */\n  maxlength: {\n    type: [String, Number],\n  },\n  /**\n   * @description same as `minlength` in native input\n   */\n  minlength: {\n    type: [String, Number],\n  },\n  /**\n   * @description type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)\n   */\n  type: {\n    type: definePropType<InputType>(String),\n    default: 'text',\n  },\n  /**\n   * @description control the resizability\n   */\n  resize: {\n    type: String,\n    values: ['none', 'both', 'horizontal', 'vertical'],\n  },\n  /**\n   * @description whether textarea has an adaptive height\n   */\n  autosize: {\n    type: definePropType<InputAutoSize>([Boolean, Object]),\n    default: false,\n  },\n  /**\n   * @description native input autocomplete\n   */\n  autocomplete: {\n    type: definePropType<HTMLInputElement['autocomplete']>(String),\n    default: 'off',\n  },\n  /**\n   * @description format content\n   */\n  formatter: {\n    type: Function,\n  },\n  /**\n   * @description parse content\n   */\n  parser: {\n    type: Function,\n  },\n  /**\n   * @description placeholder\n   */\n  placeholder: {\n    type: String,\n  },\n  /**\n   * @description native input form\n   */\n  form: {\n    type: String,\n  },\n  /**\n   * @description native input readonly\n   */\n  readonly: Boolean,\n  /**\n   * @description whether to show clear button\n   */\n  clearable: Boolean,\n  /**\n   * @description custom clear icon component\n   */\n  clearIcon: {\n    type: iconPropType,\n    default: CircleClose,\n  },\n  /**\n   * @description toggleable password input\n   */\n  showPassword: Boolean,\n  /**\n   * @description word count\n   */\n  showWordLimit: Boolean,\n  /**\n   * @description word count position, valid when `show-word-limit` is true\n   */\n  wordLimitPosition: {\n    type: String,\n    values: ['inside', 'outside'],\n    default: 'inside',\n  },\n  /**\n   * @description suffix icon\n   */\n  suffixIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description prefix icon\n   */\n  prefixIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description container role, internal properties provided for use by the picker component\n   */\n  containerRole: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description input tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: 0,\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description input or textarea element style\n   */\n  inputStyle: {\n    type: definePropType<StyleValue>([Object, Array, String]),\n    default: () => mutable({} as const),\n  },\n  /**\n   * @description Count graphemes of input value. If it's set, native maxlength and minlength won't be used.\n   */\n  countGraphemes: {\n    type: definePropType<(value: string) => number>(Function),\n  },\n  /**\n   * @description native input autofocus\n   */\n  autofocus: Boolean,\n  rows: {\n    type: Number,\n    default: 2,\n  },\n  ...useAriaProps(['ariaLabel']),\n  /**\n   * @description native input mode for virtual keyboards\n   */\n  inputmode: {\n    type: definePropType<HTMLAttributes['inputmode']>(String),\n    default: undefined,\n  },\n  /**\n   * @description same as `name` in native input\n   */\n  name: String,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `InputProps` instead.\n */\nexport type InputPropsPublic = ExtractPublicPropTypes<typeof inputProps>\n\nexport const inputEmits = {\n  [UPDATE_MODEL_EVENT]: (value: string) => isString(value),\n  input: (value: string) => isString(value),\n  change: (value: string, evt?: Event) =>\n    isString(value) && (evt instanceof Event || evt === undefined),\n  focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n  blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n  clear: (evt: MouseEvent | undefined) =>\n    evt === undefined || evt instanceof MouseEvent,\n  mouseleave: (evt: MouseEvent) => evt instanceof MouseEvent,\n  mouseenter: (evt: MouseEvent) => evt instanceof MouseEvent,\n  // NOTE: when autofill by browser, the keydown event is instanceof Event, not KeyboardEvent\n  // relative bug report https://github.com/element-plus/element-plus/issues/6665\n  keydown: (evt: KeyboardEvent | Event) => evt instanceof Event,\n  compositionstart: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n  compositionupdate: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n  compositionend: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n}\nexport type InputEmits = typeof inputEmits\n\n/**\n * @description default values for InputProps, used in components that extend InputProps like Autocomplete\n */\nexport const inputPropsDefaults = {\n  disabled: undefined,\n  modelValue: '',\n  modelModifiers: () => ({}),\n  type: 'text' as InputType,\n  autocomplete: 'off',\n  clearIcon: markRaw(CircleClose),\n  wordLimitPosition: 'inside',\n  tabindex: 0,\n  validateEvent: true,\n  inputStyle: () => ({}),\n  rows: 2,\n} as const\n"],"mappings":";;;;;;;;;;;;;;;;AA6KA,MAAa,aAAaA,6BAAW;CAInC,IAAI;EACF,MAAM;EACN,SAAS;EACV;CAID,MAAMC;CAIN,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,YAAY;EACV,MAAMC,iCAAmD;GACvD;GACA;GACA;GACD,CAAC;EACF,SAAS;EACV;CAID,gBAAgB;EACd,MAAMA,iCAAoC,OAAO;EACjD,gBAAgB,EAAE;EACnB;CAID,WAAW,EACT,MAAM,CAAC,QAAQ,OAAO,EACvB;CAID,WAAW,EACT,MAAM,CAAC,QAAQ,OAAO,EACvB;CAID,MAAM;EACJ,MAAMA,iCAA0B,OAAO;EACvC,SAAS;EACV;CAID,QAAQ;EACN,MAAM;EACN,QAAQ;GAAC;GAAQ;GAAQ;GAAc;GAAW;EACnD;CAID,UAAU;EACR,MAAMA,iCAA8B,CAAC,SAAS,OAAO,CAAC;EACtD,SAAS;EACV;CAID,cAAc;EACZ,MAAMA,iCAAiD,OAAO;EAC9D,SAAS;EACV;CAID,WAAW,EACT,MAAM,UACP;CAID,QAAQ,EACN,MAAM,UACP;CAID,aAAa,EACX,MAAM,QACP;CAID,MAAM,EACJ,MAAM,QACP;CAID,UAAU;CAIV,WAAW;CAIX,WAAW;EACT,MAAMC;EACN,SAASC;EACV;CAID,cAAc;CAId,eAAe;CAIf,mBAAmB;EACjB,MAAM;EACN,QAAQ,CAAC,UAAU,UAAU;EAC7B,SAAS;EACV;CAID,YAAY,EACV,MAAMD,2BACP;CAID,YAAY,EACV,MAAMA,2BACP;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,UAAU;EACR,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,YAAY;EACV,MAAMD,iCAA2B;GAAC;GAAQ;GAAO;GAAO,CAAC;EACzD,eAAeG,2BAAQ,EAAE,CAAU;EACpC;CAID,gBAAgB,EACd,MAAMH,iCAA0C,SAAS,EAC1D;CAID,WAAW;CACX,MAAM;EACJ,MAAM;EACN,SAAS;EACV;CACD,GAAGI,6BAAa,CAAC,YAAY,CAAC;CAI9B,WAAW;EACT,MAAMJ,iCAA4C,OAAO;EACzD,SAAS;EACV;CAID,MAAM;CACP,CAAU;AAOX,MAAa,aAAa;EACvBK,oCAAsB,oCAA2B,MAAM;CACxD,QAAQ,oCAA2B,MAAM;CACzC,SAAS,OAAe,kCACb,MAAM,KAAK,eAAe,SAAS,QAAQ;CACtD,QAAQ,QAAoB,eAAe;CAC3C,OAAO,QAAoB,eAAe;CAC1C,QAAQ,QACN,QAAQ,UAAa,eAAe;CACtC,aAAa,QAAoB,eAAe;CAChD,aAAa,QAAoB,eAAe;CAGhD,UAAU,QAA+B,eAAe;CACxD,mBAAmB,QAA0B,eAAe;CAC5D,oBAAoB,QAA0B,eAAe;CAC7D,iBAAiB,QAA0B,eAAe;CAC3D;;;;AAMD,MAAa,qBAAqB;CAChC,UAAU;CACV,YAAY;CACZ,uBAAuB,EAAE;CACzB,MAAM;CACN,cAAc;CACd,4BAAmBH,oCAAY;CAC/B,mBAAmB;CACnB,UAAU;CACV,eAAe;CACf,mBAAmB,EAAE;CACrB,MAAM;CACP"}

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

@@ -64,7 +64,6 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 		const props = __props;
 		const emit = __emit;
 		const rawAttrs = (0, vue.useAttrs)();
-		const attrs = require_index.useAttrs();
 		const slots = (0, vue.useSlots)();
 		const containerKls = (0, vue.computed)(() => [
 			props.type === "textarea" ? nsTextarea.b() : nsInput.b(),
@@ -81,6 +80,8 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 			rawAttrs.class
 		]);
 		const wrapperKls = (0, vue.computed)(() => [nsInput.e("wrapper"), nsInput.is("focus", isFocused.value)]);
+		const attrs = require_index.useAttrs();
+		const maxlength = (0, vue.computed)(() => props.maxlength?.toString());
 		const { form: elForm, formItem: elFormItem } = require_use_form_item.useFormItem();
 		const { inputId } = require_use_form_item.useFormItemInputId(props, { formItemContext: elFormItem });
 		const inputSize = require_use_form_common_props.useFormSize();
@@ -93,6 +94,7 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 		const passwordVisible = (0, vue.ref)(false);
 		const countStyle = (0, vue.ref)();
 		const textareaCalcStyle = (0, vue.shallowRef)(props.inputStyle);
+		const saveValue = (0, vue.ref)("");
 		const _ref = (0, vue.computed)(() => input.value || textarea.value);
 		const { wrapperRef, isFocused, handleFocus, handleBlur } = require_index$3.useFocusController(_ref, {
 			disabled: inputDisabled,
@@ -113,9 +115,12 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 		const nativeInputValue = (0, vue.computed)(() => (0, lodash_unified.isNil)(props.modelValue) ? "" : String(props.modelValue));
 		const showClear = (0, vue.computed)(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (isFocused.value || hovering.value));
 		const showPwdVisible = (0, vue.computed)(() => props.showPassword && !inputDisabled.value && !!nativeInputValue.value);
-		const isWordLimitVisible = (0, vue.computed)(() => props.showWordLimit && !!props.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
-		const textLength = (0, vue.computed)(() => nativeInputValue.value.length);
-		const inputExceed = (0, vue.computed)(() => !!isWordLimitVisible.value && textLength.value > Number(props.maxlength));
+		const isWordLimitVisible = (0, vue.computed)(() => props.showWordLimit && !!maxlength.value && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
+		const textLength = (0, vue.computed)(() => {
+			if (props.countGraphemes && props.showWordLimit) return props.countGraphemes(nativeInputValue.value);
+			return nativeInputValue.value.length;
+		});
+		const inputExceed = (0, vue.computed)(() => !!isWordLimitVisible.value && textLength.value > Number(maxlength.value));
 		const suffixVisible = (0, vue.computed)(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
 		const hasModelModifiers = (0, vue.computed)(() => !!Object.keys(props.modelModifiers).length);
 		const [recordCursor, setCursor] = require_index$2.useCursor(input);
@@ -170,15 +175,71 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 			if (isComposing.value) return;
 			const { lazy } = props.modelModifiers;
 			let { value } = event.target;
+			let shouldForceNativeUpdate = false;
 			if (lazy) {
 				emit(require_event.INPUT_EVENT, value);
 				return;
 			}
 			value = formatValue(value);
+			if (props.countGraphemes && maxlength.value != null) {
+				const limit = Number(maxlength.value);
+				const graphemes = props.countGraphemes(value);
+				const saveGraphemes = props.countGraphemes(saveValue.value);
+				if (graphemes > limit && graphemes > saveGraphemes) if (saveGraphemes > limit) {
+					value = saveValue.value;
+					shouldForceNativeUpdate = true;
+				} else {
+					const prevValue = saveValue.value;
+					const nextValue = value;
+					let prefixLen = 0;
+					while (prefixLen < prevValue.length && prefixLen < nextValue.length && prevValue[prefixLen] === nextValue[prefixLen]) prefixLen++;
+					let prevSuffixIndex = prevValue.length;
+					let nextSuffixIndex = nextValue.length;
+					while (prevSuffixIndex > prefixLen && nextSuffixIndex > prefixLen && prevValue[prevSuffixIndex - 1] === nextValue[nextSuffixIndex - 1]) {
+						prevSuffixIndex--;
+						nextSuffixIndex--;
+					}
+					const before = nextValue.slice(0, prefixLen);
+					const removed = prevValue.slice(prefixLen, prevSuffixIndex);
+					const inserted = nextValue.slice(prefixLen, nextSuffixIndex);
+					const after = nextValue.slice(nextSuffixIndex);
+					const baseCount = saveGraphemes - props.countGraphemes(removed);
+					const availableInserted = Math.max(0, limit - baseCount);
+					let acceptedInserted = "";
+					if (availableInserted > 0) if (typeof Intl !== "undefined" && "Segmenter" in Intl) {
+						const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+						for (const { segment } of segmenter.segment(inserted)) {
+							const candidate = acceptedInserted + segment;
+							if (props.countGraphemes(candidate) > availableInserted) break;
+							acceptedInserted = candidate;
+						}
+					} else for (const char of Array.from(inserted)) {
+						const candidate = acceptedInserted + char;
+						if (props.countGraphemes(candidate) > availableInserted) break;
+						acceptedInserted = candidate;
+					}
+					value = before + acceptedInserted + after;
+					shouldForceNativeUpdate = true;
+				}
+			}
 			if (String(value) === nativeInputValue.value) {
-				if (props.formatter) setNativeInputValue();
+				if (props.formatter || shouldForceNativeUpdate) {
+					const target = event.target;
+					const blockedValue = target.value;
+					const selectionStart = target.selectionStart;
+					const selectionEnd = target.selectionEnd;
+					setNativeInputValue();
+					if (shouldForceNativeUpdate && _ref.value && selectionStart != null && selectionEnd != null) {
+						const restoredValue = _ref.value.value;
+						const afterTxt = blockedValue.slice(Math.max(0, selectionEnd));
+						let caretPos = Math.min(selectionStart, restoredValue.length);
+						if (afterTxt && restoredValue.endsWith(afterTxt)) caretPos = restoredValue.length - afterTxt.length;
+						_ref.value.setSelectionRange(caretPos, caretPos);
+					}
+				}
 				return;
 			}
+			saveValue.value = value;
 			recordCursor();
 			emit(require_event.UPDATE_MODEL_EVENT, value);
 			emit(require_event.INPUT_EVENT, value);
@@ -227,6 +288,9 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 			(0, vue.nextTick)(() => resizeTextarea());
 			if (props.validateEvent) elFormItem?.validate?.("change").catch((err) => require_error.debugWarn(err));
 		});
+		(0, vue.watch)(() => nativeInputValue.value, (val) => {
+			saveValue.value = val;
+		}, { immediate: true });
 		(0, vue.watch)(nativeInputValue, (newValue) => {
 			if (!_ref.value) return;
 			const { trim, number } = props.modelModifiers;
@@ -299,8 +363,8 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 						class: (0, vue.unref)(nsInput).e("inner")
 					}, (0, vue.unref)(attrs), {
 						name: __props.name,
-						minlength: __props.minlength,
-						maxlength: __props.maxlength,
+						minlength: __props.countGraphemes ? void 0 : __props.minlength,
+						maxlength: __props.countGraphemes ? void 0 : maxlength.value,
 						type: __props.showPassword ? passwordVisible.value ? "text" : "password" : __props.type,
 						disabled: (0, vue.unref)(inputDisabled),
 						readonly: __props.readonly,
@@ -358,7 +422,7 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 						isWordLimitVisible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 							key: 3,
 							class: (0, vue.normalizeClass)([(0, vue.unref)(nsInput).e("count"), (0, vue.unref)(nsInput).is("outside", __props.wordLimitPosition === "outside")])
-						}, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(nsInput).e("count-inner")) }, (0, vue.toDisplayString)(textLength.value) + " / " + (0, vue.toDisplayString)(__props.maxlength), 3)], 2)) : (0, vue.createCommentVNode)("v-if", true),
+						}, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(nsInput).e("count-inner")) }, (0, vue.toDisplayString)(textLength.value) + " / " + (0, vue.toDisplayString)(maxlength.value), 3)], 2)) : (0, vue.createCommentVNode)("v-if", true),
 						validateState.value && validateIcon.value && needStatusIcon.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$5.ElIcon), {
 							key: 4,
 							class: (0, vue.normalizeClass)([
@@ -390,8 +454,8 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 					]
 				}, (0, vue.unref)(attrs), {
 					name: __props.name,
-					minlength: __props.minlength,
-					maxlength: __props.maxlength,
+					minlength: __props.countGraphemes ? void 0 : __props.minlength,
+					maxlength: __props.countGraphemes ? void 0 : maxlength.value,
 					tabindex: __props.tabindex,
 					disabled: (0, vue.unref)(inputDisabled),
 					readonly: __props.readonly,
@@ -426,7 +490,7 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 					key: 1,
 					style: (0, vue.normalizeStyle)(countStyle.value),
 					class: (0, vue.normalizeClass)([(0, vue.unref)(nsInput).e("count"), (0, vue.unref)(nsInput).is("outside", __props.wordLimitPosition === "outside")])
-				}, (0, vue.toDisplayString)(textLength.value) + " / " + (0, vue.toDisplayString)(__props.maxlength), 7)) : (0, vue.createCommentVNode)("v-if", true)
+				}, (0, vue.toDisplayString)(textLength.value) + " / " + (0, vue.toDisplayString)(maxlength.value), 7)) : (0, vue.createCommentVNode)("v-if", true)
 			], 64))], 38);
 		};
 	}