@element-plus/nightly 0.0.20260902 → 0.0.20260903

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20260902 */
+/*! Element Plus v0.0.20260903 */
 
 (function(global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('vue')) :
@@ -7825,7 +7825,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 
 //#endregion
 //#region ../../packages/element-plus/version.ts
-	const version$1 = "0.0.20260902";
+	const version$1 = "0.0.20260903";
 
 //#endregion
 //#region ../../packages/element-plus/make-installer.ts
@@ -10094,7 +10094,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			};
 			const updateLabelWidth = (action = "update") => {
 				(0, vue.nextTick)(() => {
-					if (slots.default && props.isAutoWidth) {
+					if (formItemContext.hasLabel && props.isAutoWidth) {
 						if (action === "update") computedWidth.value = getLabelWidth();
 						else if (action === "remove") formContext?.deregisterLabelWidth(computedWidth.value);
 					}
@@ -18024,7 +18024,9 @@ var import_customParseFormat = /* @__PURE__ */ __toESM(require_customParseFormat
 			}
 			(0, vue.onMounted)(() => {
 				updateMinWidth();
-				useResizeObserver(select.selectRef, updateMinWidth);
+				useResizeObserver(select.selectRef, () => {
+					rAF(updateMinWidth);
+				});
 			});
 			return {
 				ns,
@@ -18074,7 +18076,6 @@ var import_customParseFormat = /* @__PURE__ */ __toESM(require_customParseFormat
 			cachedOptions: /* @__PURE__ */ new Map(),
 			optionValues: [],
 			selected: [],
-			selectionWidth: 0,
 			collapseItemWidth: 0,
 			selectedLabel: "",
 			hoveringIndex: -1,
@@ -18283,9 +18284,6 @@ var import_customParseFormat = /* @__PURE__ */ __toESM(require_customParseFormat
 				states.hoveringIndex = optionsArray.value.findIndex((item) => getValueKey(lastOption) === getValueKey(item));
 			} else states.hoveringIndex = -1;
 		};
-		const resetSelectionWidth = () => {
-			states.selectionWidth = Number.parseFloat(window.getComputedStyle(selectionRef.value).width);
-		};
 		const resetCollapseItemWidth = () => {
 			states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
 		};
@@ -18556,11 +18554,7 @@ var import_customParseFormat = /* @__PURE__ */ __toESM(require_customParseFormat
 		};
 		const tagStyle = (0, vue.computed)(() => {
 			const gapWidth = getGapWidth();
-			const inputSlotWidth = props.filterable ? gapWidth + 11 : 0;
-			return { maxWidth: `${collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth - inputSlotWidth : states.selectionWidth - inputSlotWidth}px` };
-		});
-		const collapseTagStyle = (0, vue.computed)(() => {
-			return { maxWidth: `${states.selectionWidth}px` };
+			return { maxWidth: `calc(100% - ${(props.filterable && !selectDisabled.value ? gapWidth + 11 : 0) + (collapseItemRef.value && props.maxCollapseTags === 1 ? states.collapseItemWidth + gapWidth : 0)}px)` };
 		});
 		const popupScroll = (data) => {
 			emit("popup-scroll", data);
@@ -18568,7 +18562,6 @@ var import_customParseFormat = /* @__PURE__ */ __toESM(require_customParseFormat
 		const endReached = (direction) => {
 			emit("end-reached", direction);
 		};
-		useResizeObserver(selectionRef, resetSelectionWidth);
 		useResizeObserver(wrapperRef, updateTooltip);
 		useResizeObserver(tagMenuRef, updateTagTooltip);
 		useResizeObserver(collapseItemRef, resetCollapseItemWidth);
@@ -18644,7 +18637,6 @@ var import_customParseFormat = /* @__PURE__ */ __toESM(require_customParseFormat
 			getOption,
 			endReached,
 			tagStyle,
-			collapseTagStyle,
 			popperRef,
 			inputRef,
 			tooltipRef,
@@ -19125,14 +19117,14 @@ var import_customParseFormat = /* @__PURE__ */ __toESM(require_customParseFormat
 					}, () => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.showTagList, (item) => {
 						return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 							key: _ctx.getValueKey(item),
-							class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item"))
+							class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item")),
+							style: (0, vue.normalizeStyle)(_ctx.tagStyle)
 						}, [(0, vue.createVNode)(_component_el_tag, {
 							closable: !_ctx.selectDisabled && !item.isDisabled,
 							size: _ctx.collapseTagSize,
 							type: _ctx.tagType,
 							effect: _ctx.tagEffect,
 							"disable-transitions": "",
-							style: (0, vue.normalizeStyle)(_ctx.tagStyle),
 							onClose: ($event) => _ctx.deleteTag($event, item)
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(_ctx.nsSelect.e("tags-text")) }, [(0, vue.renderSlot)(_ctx.$slots, "label", {
@@ -19146,9 +19138,8 @@ var import_customParseFormat = /* @__PURE__ */ __toESM(require_customParseFormat
 							"size",
 							"type",
 							"effect",
-							"style",
 							"onClose"
-						])], 2);
+						])], 6);
 					}), 128)), _ctx.collapseTags && _ctx.states.selected.length > _ctx.maxCollapseTags ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_tooltip, {
 						key: 0,
 						ref: "tagTooltipRef",
@@ -19174,22 +19165,20 @@ var import_customParseFormat = /* @__PURE__ */ __toESM(require_customParseFormat
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
 							ref: "collapseItemRef",
-							class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item"))
+							class: (0, vue.normalizeClass)([_ctx.nsSelect.e("selected-item"), _ctx.nsSelect.e("collapse-item")])
 						}, [(0, vue.createVNode)(_component_el_tag, {
 							closable: false,
 							size: _ctx.collapseTagSize,
 							type: _ctx.tagType,
 							effect: _ctx.tagEffect,
-							"disable-transitions": "",
-							style: (0, vue.normalizeStyle)(_ctx.collapseTagStyle)
+							"disable-transitions": ""
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(_ctx.nsSelect.e("tags-text")) }, " + " + (0, vue.toDisplayString)(_ctx.states.selected.length - _ctx.maxCollapseTags), 3)]),
 							_: 1
 						}, 8, [
 							"size",
 							"type",
-							"effect",
-							"style"
+							"effect"
 						])], 2)]),
 						content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
 							ref: "tagMenuRef",
@@ -38521,7 +38510,6 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 			createdOptions: [],
 			hoveringIndex: -1,
 			inputHovering: false,
-			selectionWidth: 0,
 			collapseItemWidth: 0,
 			previousQuery: null,
 			previousValue: void 0,
@@ -38673,11 +38661,7 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 		};
 		const tagStyle = (0, vue.computed)(() => {
 			const gapWidth = getGapWidth();
-			const inputSlotWidth = props.filterable ? gapWidth + 11 : 0;
-			return { maxWidth: `${collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth - inputSlotWidth : states.selectionWidth - inputSlotWidth}px` };
-		});
-		const collapseTagStyle = (0, vue.computed)(() => {
-			return { maxWidth: `${states.selectionWidth}px` };
+			return { maxWidth: `calc(100% - ${(props.filterable && !selectDisabled.value ? gapWidth + 11 : 0) + (collapseItemRef.value && props.maxCollapseTags === 1 ? states.collapseItemWidth + gapWidth : 0)}px)` };
 		});
 		const shouldShowPlaceholder = (0, vue.computed)(() => {
 			if (isArray$1(props.modelValue)) return props.modelValue.length === 0 && !states.inputValue;
@@ -38785,9 +38769,6 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 		const onEndReached = (direction) => {
 			emit("end-reached", direction);
 		};
-		const resetSelectionWidth = () => {
-			states.selectionWidth = Number.parseFloat(window.getComputedStyle(selectionRef.value).width);
-		};
 		const resetCollapseItemWidth = () => {
 			states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
 		};
@@ -39032,8 +39013,7 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 		(0, vue.onMounted)(() => {
 			initStates();
 		});
-		useResizeObserver(selectRef, handleResize);
-		useResizeObserver(selectionRef, resetSelectionWidth);
+		useResizeObserver(selectRef, () => rAF(handleResize));
 		useResizeObserver(wrapperRef, updateTooltip);
 		useResizeObserver(tagMenuRef, updateTagTooltip);
 		useResizeObserver(collapseItemRef, resetCollapseItemWidth);
@@ -39060,7 +39040,6 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 			iconComponent,
 			iconReverse,
 			tagStyle,
-			collapseTagStyle,
 			popperSize,
 			dropdownMenuVisible,
 			hasModelValue,
@@ -39104,7 +39083,6 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 			blur,
 			handleMenuEnter,
 			handleResize,
-			resetSelectionWidth,
 			updateTooltip,
 			updateTagTooltip,
 			updateOptions,
@@ -39256,14 +39234,14 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 					}, () => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.showTagList, (item) => {
 						return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 							key: _ctx.getValueKey(_ctx.getValue(item)),
-							class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item"))
+							class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item")),
+							style: (0, vue.normalizeStyle)(_ctx.tagStyle)
 						}, [(0, vue.createVNode)(_component_el_tag, {
 							closable: !_ctx.selectDisabled && !_ctx.getDisabled(item),
 							size: _ctx.collapseTagSize,
 							type: _ctx.tagType,
 							effect: _ctx.tagEffect,
 							"disable-transitions": "",
-							style: (0, vue.normalizeStyle)(_ctx.tagStyle),
 							onClose: ($event) => _ctx.deleteTag($event, item)
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(_ctx.nsSelect.e("tags-text")) }, [(0, vue.renderSlot)(_ctx.$slots, "label", {
@@ -39277,9 +39255,8 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 							"size",
 							"type",
 							"effect",
-							"style",
 							"onClose"
-						])], 2);
+						])], 6);
 					}), 128)), _ctx.collapseTags && _ctx.states.cachedOptions.length > _ctx.maxCollapseTags ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_tooltip, {
 						key: 0,
 						ref: "tagTooltipRef",
@@ -39305,13 +39282,12 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
 							ref: "collapseItemRef",
-							class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item"))
+							class: (0, vue.normalizeClass)([_ctx.nsSelect.e("selected-item"), _ctx.nsSelect.e("collapse-item")])
 						}, [(0, vue.createVNode)(_component_el_tag, {
 							closable: false,
 							size: _ctx.collapseTagSize,
 							type: _ctx.tagType,
 							effect: _ctx.tagEffect,
-							style: (0, vue.normalizeStyle)(_ctx.collapseTagStyle),
 							"disable-transitions": ""
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(_ctx.nsSelect.e("tags-text")) }, " + " + (0, vue.toDisplayString)(_ctx.states.cachedOptions.length - _ctx.maxCollapseTags), 3)]),
@@ -39319,8 +39295,7 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 						}, 8, [
 							"size",
 							"type",
-							"effect",
-							"style"
+							"effect"
 						])], 2)]),
 						content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
 							ref: "tagMenuRef",
@@ -48255,9 +48230,8 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 		name: "ElText",
 		__name: "text",
 		props: textProps,
-		setup(__props) {
+		setup(__props, { expose: __expose }) {
 			const props = __props;
-			const attrs = (0, vue.useAttrs)();
 			const textRef = (0, vue.ref)();
 			const textSize = useFormSize();
 			const ns = useNamespace("text");
@@ -48268,35 +48242,58 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 				ns.is("truncated", props.truncated),
 				ns.is("line-clamp", !isUndefined(props.lineClamp))
 			]);
-			const bindTitle = async () => {
-				await (0, vue.nextTick)();
-				if (attrs.title) return;
-				let shouldAddTitle = false;
-				const text = textRef.value?.textContent || "";
-				if (props.truncated) {
-					const width = textRef.value?.offsetWidth;
-					const scrollWidth = textRef.value?.scrollWidth;
-					if (width && scrollWidth && scrollWidth > width) shouldAddTitle = true;
-				} else if (!isUndefined(props.lineClamp)) {
-					const height = textRef.value?.offsetHeight;
-					const scrollHeight = textRef.value?.scrollHeight;
-					if (height && scrollHeight && scrollHeight > height) shouldAddTitle = true;
-				}
-				if (shouldAddTitle) textRef.value?.setAttribute("title", text);
-				else textRef.value?.removeAttribute("title");
+			const { width, height } = useElementSize(textRef);
+			const isTruncated = (0, vue.ref)(false);
+			let rafId;
+			const bindTitle = () => {
+				if (rafId) cAF(rafId);
+				rafId = rAF(() => {
+					rafId = void 0;
+					isTruncated.value = false;
+					if (props.truncated) {
+						const width = textRef.value?.offsetWidth;
+						const scrollWidth = textRef.value?.scrollWidth;
+						if (width && scrollWidth && scrollWidth > width) isTruncated.value = true;
+					} else if (!isUndefined(props.lineClamp)) {
+						const height = textRef.value?.offsetHeight;
+						const scrollHeight = textRef.value?.scrollHeight;
+						if (height && scrollHeight && scrollHeight > height) isTruncated.value = true;
+					}
+				});
 			};
+			(0, vue.watch)(() => [
+				width.value,
+				height.value,
+				props.truncated,
+				props.lineClamp
+			], bindTitle, { flush: "post" });
+			useMutationObserver(textRef, bindTitle, {
+				attributes: true,
+				attributeFilter: ["class", "style"],
+				subtree: true,
+				childList: true,
+				characterData: true
+			});
 			(0, vue.onMounted)(bindTitle);
-			(0, vue.onUpdated)(bindTitle);
+			(0, vue.onBeforeUnmount)(() => {
+				if (rafId) cAF(rafId);
+			});
+			__expose({ isTruncated });
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.tag), {
 					ref_key: "textRef",
 					ref: textRef,
 					class: (0, vue.normalizeClass)(textKls.value),
+					title: _ctx.$attrs.title ?? (isTruncated.value ? textRef.value?.textContent : void 0),
 					style: (0, vue.normalizeStyle)({ "-webkit-line-clamp": __props.lineClamp })
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
-				}, 8, ["class", "style"]);
+				}, 8, [
+					"class",
+					"title",
+					"style"
+				]);
 			};
 		}
 	});