@element-plus/nightly 0.0.20260323 → 0.0.20260324

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20260323 */
+/*! Element Plus v0.0.20260324 */
 
 (function(global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('vue')) :
@@ -10478,7 +10478,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 
 //#endregion
 //#region ../../packages/element-plus/version.ts
-	const version$1 = "0.0.20260323";
+	const version$1 = "0.0.20260324";
 
 //#endregion
 //#region ../../packages/element-plus/make-installer.ts
@@ -14084,6 +14084,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			]),
 			default: () => mutable({})
 		},
+		countGraphemes: { type: definePropType(Function) },
 		autofocus: Boolean,
 		rows: {
 			type: Number,
@@ -14254,7 +14255,6 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			const props = __props;
 			const emit = __emit;
 			const rawAttrs = (0, vue.useAttrs)();
-			const attrs = useAttrs();
 			const slots = (0, vue.useSlots)();
 			const containerKls = (0, vue.computed)(() => [
 				props.type === "textarea" ? nsTextarea.b() : nsInput.b(),
@@ -14271,6 +14271,8 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 				rawAttrs.class
 			]);
 			const wrapperKls = (0, vue.computed)(() => [nsInput.e("wrapper"), nsInput.is("focus", isFocused.value)]);
+			const attrs = useAttrs();
+			const maxlength = (0, vue.computed)(() => props.maxlength?.toString());
 			const { form: elForm, formItem: elFormItem } = useFormItem();
 			const { inputId } = useFormItemInputId(props, { formItemContext: elFormItem });
 			const inputSize = useFormSize();
@@ -14283,6 +14285,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			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 } = useFocusController(_ref, {
 				disabled: inputDisabled,
@@ -14303,9 +14306,12 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			const nativeInputValue = (0, vue.computed)(() => 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] = useCursor(input);
@@ -14360,15 +14366,71 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 				if (isComposing.value) return;
 				const { lazy } = props.modelModifiers;
 				let { value } = event.target;
+				let shouldForceNativeUpdate = false;
 				if (lazy) {
 					emit(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(UPDATE_MODEL_EVENT, value);
 				emit(INPUT_EVENT, value);
@@ -14417,6 +14479,9 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 				(0, vue.nextTick)(() => resizeTextarea());
 				if (props.validateEvent) elFormItem?.validate?.("change").catch((err) => /* @__PURE__ */ 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;
@@ -14489,8 +14554,8 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 							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,
@@ -14548,7 +14613,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 							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)(ElIcon), {
 								key: 4,
 								class: (0, vue.normalizeClass)([
@@ -14580,8 +14645,8 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 						]
 					}, (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,
@@ -14616,7 +14681,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 						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);
 			};
 		}
@@ -31617,6 +31682,7 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 		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 {};
@@ -31708,6 +31774,10 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 		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();
 		});
@@ -31754,6 +31824,7 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 			onCloseAutoFocus,
 			onCloseRequested,
 			onFocusoutPrevented,
+			bringToFront,
 			titleId,
 			bodyId,
 			closed,
@@ -31766,7 +31837,8 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 			_draggable,
 			_alignCenter,
 			_overflow,
-			closing
+			closing,
+			penetrable
 		};
 	};
 
@@ -31797,7 +31869,7 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 			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 } = useDialog(props, dialogRef);
+			const { visible, titleId, bodyId, style, overlayDialogStyle, rendered, transitionConfig, zIndex, _draggable, _alignCenter, _overflow, penetrable, handleClose, onModalClick, onOpenAutoFocus, onCloseAutoFocus, onCloseRequested, onFocusoutPrevented, bringToFront, closing } = useDialog(props, dialogRef);
 			(0, vue.provide)(dialogInjectionKey, {
 				dialogRef,
 				headerRef,
@@ -31807,7 +31879,6 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 				style
 			});
 			const overlayEvent = useSameTarget(onModalClick);
-			const penetrable = (0, vue.computed)(() => props.modalPenetrable && !props.modal && !props.fullscreen);
 			const resetPosition = () => {
 				dialogContentRef.value?.resetPosition();
 			};
@@ -31829,7 +31900,7 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 							"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)
 						}, {
@@ -31870,7 +31941,8 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 									"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,
@@ -31897,7 +31969,8 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 									"show-close",
 									"title",
 									"aria-level",
-									"onClose"
+									"onClose",
+									"onMousedown"
 								])) : (0, vue.createCommentVNode)("v-if", true)]),
 								_: 3
 							}, 8, [