@element-plus/nightly 0.0.20261109 → 0.0.20261111

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20261109 */
+/*! Element Plus v0.0.20261111 */
 
 (function(global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require("vue")) :
@@ -7951,7 +7951,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 
 //#endregion
 //#region ../../packages/element-plus/version.ts
-	const version$1 = "0.0.20261109";
+	const version$1 = "0.0.20261111";
 
 //#endregion
 //#region ../../packages/element-plus/make-installer.ts
@@ -13960,7 +13960,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	};
 
 //#endregion
-//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.2.2/node_modules/@ctrl/tinycolor/dist/module/util.js
+//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.3.0/node_modules/@ctrl/tinycolor/dist/module/util.js
 	function bound01(n, max) {
 		if (isOnePointZero(n)) n = "100%";
 		const isPercent = isPercentage(n);
@@ -13981,7 +13981,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 		return typeof n === "string" && n.indexOf("%") !== -1;
 	}
 	function boundAlpha(a) {
-		a = parseFloat(a);
+		a = typeof a === "string" && a.trim().endsWith("%") ? parseFloat(a) / 100 : parseFloat(a);
 		if (isNaN(a) || a < 0 || a > 1) a = 1;
 		return a;
 	}
@@ -13999,7 +13999,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	}
 
 //#endregion
-//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.2.2/node_modules/@ctrl/tinycolor/dist/module/conversion.js
+//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.3.0/node_modules/@ctrl/tinycolor/dist/module/conversion.js
 	function rgbToRgb(r, g, b) {
 		return {
 			r: bound01(r, 255) * 255,
@@ -14199,6 +14199,115 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			k: Math.round(k)
 		};
 	}
+	function rgbToOklch(r, g, b) {
+		const [l, labA, labB] = linearSrgbToOklab(srgbToLinear(r / 255), srgbToLinear(g / 255), srgbToLinear(b / 255));
+		const c = Math.sqrt(labA * labA + labB * labB);
+		if (c <= 4e-6) return {
+			l: Math.min(1, l),
+			c: 0,
+			h: 0
+		};
+		const h = Math.atan2(labB, labA) * 180 / Math.PI;
+		return {
+			l: Math.min(1, l),
+			c,
+			h: h < 0 ? h + 360 : h
+		};
+	}
+	function oklchToRgb(l, c, h) {
+		if (l >= 1) return {
+			r: 255,
+			g: 255,
+			b: 255
+		};
+		if (l <= 0) return {
+			r: 0,
+			g: 0,
+			b: 0
+		};
+		const hue = h * Math.PI / 180;
+		const cos = Math.cos(hue);
+		const sin = Math.sin(hue);
+		const chroma = Math.max(0, c);
+		let rgb = oklabToLinearSrgb(l, chroma * cos, chroma * sin);
+		if (!isInSrgbGamut(rgb)) rgb = gamutMapToSrgb(l, chroma, cos, sin);
+		return {
+			r: linearToSrgb(rgb[0]) * 255,
+			g: linearToSrgb(rgb[1]) * 255,
+			b: linearToSrgb(rgb[2]) * 255
+		};
+	}
+	function gamutMapToSrgb(l, c, cos, sin) {
+		const jnd = .02;
+		const epsilon = 1e-4;
+		let clipped = clipToSrgb(oklabToLinearSrgb(l, c * cos, c * sin));
+		if (deltaEOK(l, c * cos, c * sin, clipped) < jnd) return clipped;
+		let min = 0;
+		let max = c;
+		let minInGamut = true;
+		while (max - min > epsilon) {
+			const chroma = (min + max) / 2;
+			const current = oklabToLinearSrgb(l, chroma * cos, chroma * sin);
+			if (minInGamut && isInSrgbGamut(current)) {
+				min = chroma;
+				continue;
+			}
+			clipped = clipToSrgb(current);
+			const delta = deltaEOK(l, chroma * cos, chroma * sin, clipped);
+			if (delta < jnd) {
+				if (jnd - delta < epsilon) break;
+				minInGamut = false;
+				min = chroma;
+			} else max = chroma;
+		}
+		return clipped;
+	}
+	function deltaEOK(l, a, b, rgb) {
+		const [l2, a2, b2] = linearSrgbToOklab(rgb[0], rgb[1], rgb[2]);
+		const dl = l - l2;
+		const da = a - a2;
+		const db = b - b2;
+		return Math.sqrt(dl * dl + da * da + db * db);
+	}
+	function isInSrgbGamut(rgb) {
+		return rgb[0] >= 0 && rgb[0] <= 1 && rgb[1] >= 0 && rgb[1] <= 1 && rgb[2] >= 0 && rgb[2] <= 1;
+	}
+	function clipToSrgb(rgb) {
+		return [
+			Math.min(1, Math.max(0, rgb[0])),
+			Math.min(1, Math.max(0, rgb[1])),
+			Math.min(1, Math.max(0, rgb[2]))
+		];
+	}
+	function srgbToLinear(channel) {
+		return channel <= .04045 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+	}
+	function linearToSrgb(channel) {
+		return channel <= .0031308 ? channel * 12.92 : 1.055 * channel ** (1 / 2.4) - .055;
+	}
+	function linearSrgbToOklab(r, g, b) {
+		const long = Math.cbrt(.41222146947076305 * r + .5363325372617348 * g + .05144599326750221 * b);
+		const medium = Math.cbrt(.21190349581782522 * r + .6806995506452344 * g + .10739695353694056 * b);
+		const short = Math.cbrt(.08830245919005643 * r + .2817188391361215 * g + .6299787016738222 * b);
+		return [
+			.210454268309314 * long + .7936177747023054 * medium - .0040720430116193 * short,
+			1.9779985324311684 * long - 2.42859224204858 * medium + .450593709617411 * short,
+			.0259040424655478 * long + .7827717124575296 * medium - .8086757549230774 * short
+		];
+	}
+	function oklabToLinearSrgb(l, a, b) {
+		const cbrtLong = l + .3963377773761749 * a + .2158037573099136 * b;
+		const cbrtMedium = l - .1055613458156586 * a - .0638541728258133 * b;
+		const cbrtShort = l - .0894841775298119 * a - 1.2914855480194092 * b;
+		const long = cbrtLong * cbrtLong * cbrtLong;
+		const medium = cbrtMedium * cbrtMedium * cbrtMedium;
+		const short = cbrtShort * cbrtShort * cbrtShort;
+		return [
+			4.076741636075958 * long - 3.3077115392580616 * medium + .2309699031821043 * short,
+			-1.2684379732850317 * long + 2.6097573492876887 * medium - .34131937600265727 * short,
+			-.004196076138675564 * long - .7034186179359363 * medium + 1.7076146940746117 * short
+		];
+	}
 	function numberInputToObject(color) {
 		return {
 			r: color >> 16,
@@ -14208,7 +14317,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	}
 
 //#endregion
-//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.2.2/node_modules/@ctrl/tinycolor/dist/module/css-color-names.js
+//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.3.0/node_modules/@ctrl/tinycolor/dist/module/css-color-names.js
 	const names = {
 		aliceblue: "#f0f8ff",
 		antiquewhite: "#faebd7",
@@ -14361,7 +14470,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	};
 
 //#endregion
-//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.2.2/node_modules/@ctrl/tinycolor/dist/module/format-input.js
+//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.3.0/node_modules/@ctrl/tinycolor/dist/module/format-input.js
 	function inputToRGB(color) {
 		let rgb = {
 			r: 0,
@@ -14371,6 +14480,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 		let a = 1;
 		let ok = false;
 		let format = false;
+		let oklch;
 		if (typeof color === "string") color = stringInputToObject(color);
 		if (typeof color === "object") {
 			if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
@@ -14390,6 +14500,20 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 				rgb = hslToRgb(color.h, s, l);
 				ok = true;
 				format = "hsl";
+			} else if (isValidCSSUnit(color.l) && isValidCSSUnit(color.c) && isValidCSSUnit(color.h)) {
+				const l = oklchLightness(color.l);
+				const c = oklchChroma(color.c);
+				const h = oklchHue(color.h);
+				if (Number.isFinite(l + c + h)) {
+					oklch = {
+						l,
+						c,
+						h
+					};
+					rgb = oklchToRgb(l, c, h);
+					ok = true;
+					format = "oklch";
+				}
 			} else if (isValidCSSUnit(color.c) && isValidCSSUnit(color.m) && isValidCSSUnit(color.y) && isValidCSSUnit(color.k)) {
 				rgb = cmykToRgb(color.c, color.m, color.y, color.k);
 				ok = true;
@@ -14404,25 +14528,48 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			r: Math.min(255, Math.max(rgb.r, 0)),
 			g: Math.min(255, Math.max(rgb.g, 0)),
 			b: Math.min(255, Math.max(rgb.b, 0)),
-			a
+			a,
+			oklch
 		};
 	}
+	function oklchLightness(value) {
+		return clamp01(typeof value === "number" ? value : cssNumber(value, 1, false));
+	}
+	function oklchChroma(value) {
+		return Math.max(0, typeof value === "number" ? value : cssNumber(value, .4, false));
+	}
+	function oklchHue(value) {
+		const wrapped = (typeof value === "number" ? value : cssNumber(value, NaN, true)) % 360;
+		return wrapped < 0 ? wrapped + 360 : Math.abs(wrapped);
+	}
+	function cssNumber(value, percent, angle) {
+		const match = /^([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)$/.exec(value.trim().toLowerCase());
+		return match ? withUnit(Number(match[1]), match[2], percent, angle) : NaN;
+	}
+	function withUnit(n, unit, percent, angle) {
+		switch (unit) {
+			case "": return n;
+			case "%": return angle ? NaN : n / 100 * percent;
+			case "deg": return angle ? n : NaN;
+			case "grad": return angle ? n * .9 : NaN;
+			case "rad": return angle ? n * 180 / Math.PI : NaN;
+			case "turn": return angle ? n * 360 : NaN;
+			default: return NaN;
+		}
+	}
 	const CSS_UNIT = "(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)";
-	const PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
-	const PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+	const PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")(?:[,|\\s|/]+(" + CSS_UNIT + "))?\\s*\\)?";
 	const matchers = {
 		CSS_UNIT: new RegExp(CSS_UNIT),
-		rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
-		rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
-		hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
-		hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
-		hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
-		hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
-		cmyk: new RegExp("cmyk" + PERMISSIVE_MATCH4)
+		rgb: new RegExp("rgba?" + PERMISSIVE_MATCH3),
+		hsl: new RegExp("hsla?" + PERMISSIVE_MATCH3),
+		hsv: new RegExp("hsva?" + PERMISSIVE_MATCH3),
+		cmyk: /* @__PURE__ */ new RegExp("cmyk[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?")
 	};
 	function stringInputToObject(color) {
 		color = color.trim().toLowerCase();
 		if (color.length === 0) return false;
+		if (color.startsWith("oklch")) return oklchStringToObject(color);
 		let named = false;
 		if (names[color]) {
 			color = names[color];
@@ -14439,39 +14586,33 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			if (hex) return hex;
 		}
 		let match = matchers.rgb.exec(color);
-		if (match) return {
+		if (match) return match[4] === void 0 ? {
 			r: match[1],
 			g: match[2],
 			b: match[3]
-		};
-		match = matchers.rgba.exec(color);
-		if (match) return {
+		} : {
 			r: match[1],
 			g: match[2],
 			b: match[3],
 			a: match[4]
 		};
 		match = matchers.hsl.exec(color);
-		if (match) return {
+		if (match) return match[4] === void 0 ? {
 			h: match[1],
 			s: match[2],
 			l: match[3]
-		};
-		match = matchers.hsla.exec(color);
-		if (match) return {
+		} : {
 			h: match[1],
 			s: match[2],
 			l: match[3],
 			a: match[4]
 		};
 		match = matchers.hsv.exec(color);
-		if (match) return {
+		if (match) return match[4] === void 0 ? {
 			h: match[1],
 			s: match[2],
 			v: match[3]
-		};
-		match = matchers.hsva.exec(color);
-		if (match) return {
+		} : {
 			h: match[1],
 			s: match[2],
 			v: match[3],
@@ -14486,6 +14627,24 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 		};
 		return false;
 	}
+	function oklchStringToObject(color) {
+		const match = /^oklch(?:\s*\(\s*|\s+)(?:none|([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)(%?))[\s,]+(?:none|([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)(%?))[\s,]+(?:none|([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)(deg|grad|rad|turn)?)(?:(?:\s*[,/]\s*|\s+)(none|([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)(%?)))?\s*\)?$/.exec(color);
+		if (!match) return false;
+		const l = match[1] === void 0 ? 0 : withUnit(Number(match[1]), match[2], 1, false);
+		const c = match[3] === void 0 ? 0 : withUnit(Number(match[3]), match[4], .4, false);
+		const h = match[5] === void 0 ? 0 : withUnit(Number(match[5]), match[6] ?? "", NaN, true);
+		if (match[7] === void 0) return {
+			l,
+			c,
+			h
+		};
+		return {
+			l,
+			c,
+			h,
+			a: match[8] === void 0 ? 0 : withUnit(Number(match[8]), match[9], 1, false)
+		};
+	}
 	function hexToObject(color, named) {
 		const start = color.startsWith("#") ? 1 : 0;
 		const length = color.length - start;
@@ -14542,7 +14701,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	}
 
 //#endregion
-//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.2.2/node_modules/@ctrl/tinycolor/dist/module/index.js
+//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.3.0/node_modules/@ctrl/tinycolor/dist/module/index.js
 	var TinyColor = class TinyColor {
 		constructor(color = "", opts = {}) {
 			if (color instanceof TinyColor) return color;
@@ -14562,11 +14721,11 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			if (this.b < 1) this.b = Math.round(this.b);
 			this.isValid = rgb.ok;
 		}
-		isDark() {
-			return this.getBrightness() < 128;
+		isDark(threshold = 128) {
+			return this.getBrightness() < threshold;
 		}
-		isLight() {
-			return !this.isDark();
+		isLight(threshold = 128) {
+			return !this.isDark(threshold);
 		}
 		getBrightness() {
 			const rgb = this.toRgb();
@@ -14632,6 +14791,31 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			const l = Math.round(hsl.l * 100);
 			return this.a === 1 ? `hsl(${h}, ${s}%, ${l}%)` : `hsla(${h}, ${s}%, ${l}%, ${this.roundA})`;
 		}
+		toOklch() {
+			if (mightBeOklch(this.originalInput)) {
+				const input = inputToRGB(this.originalInput);
+				if (input.oklch && constructorChannel(input.r) === this.r && constructorChannel(input.g) === this.g && constructorChannel(input.b) === this.b) {
+					const { l, c, h } = input.oklch;
+					return {
+						l,
+						c,
+						h,
+						a: this.a
+					};
+				}
+			}
+			const { l, c, h } = rgbToOklch(this.r, this.g, this.b);
+			return {
+				l,
+				c,
+				h,
+				a: this.a
+			};
+		}
+		toOklchString() {
+			const { l, c, h } = this.toOklch();
+			return `oklch(${Math.round(l * 1e5) / 1e3}% ${Math.round(c * 1e5) / 1e5} ${Math.round(h * 1e3) / 1e3 % 360}${this.a === 1 ? "" : ` / ${this.roundA}`})`;
+		}
 		toHex(allow3Char = false) {
 			return rgbToHex(this.r, this.g, this.b, allow3Char);
 		}
@@ -14670,6 +14854,14 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 				a: this.a
 			};
 		}
+		toRgbRatio() {
+			return {
+				r: this.r / 255,
+				g: this.g / 255,
+				b: this.b / 255,
+				a: this.a
+			};
+		}
 		toPercentageRgbString() {
 			const rnd = (x) => Math.round(bound01(x, 255) * 100);
 			return this.a === 1 ? `rgb(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%)` : `rgba(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%, ${this.roundA})`;
@@ -14694,7 +14886,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			format = format ?? this.format;
 			let formattedString = false;
 			const hasAlpha = this.a < 1 && this.a >= 0;
-			if (!formatSet && hasAlpha && (format.startsWith("hex") || format === "name")) {
+			if (!formatSet && hasAlpha && typeof format === "string" && (format.startsWith("hex") || format === "name")) {
 				if (format === "name" && this.a === 0) return this.toName();
 				return this.toRgbString();
 			}
@@ -14707,6 +14899,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			if (format === "name") formattedString = this.toName();
 			if (format === "hsl") formattedString = this.toHslString();
 			if (format === "hsv") formattedString = this.toHsvString();
+			if (format === "oklch") formattedString = this.toOklchString();
 			if (format === "cmyk") formattedString = this.toCmykString();
 			return formattedString || this.toHexString();
 		}
@@ -14858,6 +15051,13 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			return this.toRgbString() === comparedColor.toRgbString();
 		}
 	};
+	function constructorChannel(channel) {
+		return channel < 1 ? Math.round(channel) : channel;
+	}
+	function mightBeOklch(input) {
+		if (typeof input === "string") return input.length >= 11 && /^\s*oklch/i.test(input);
+		return typeof input === "object" && "l" in input && "c" in input && "h" in input;
+	}
 
 //#endregion
 //#region ../../packages/components/button/src/button-custom.ts
@@ -45118,6 +45318,10 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 		const headerScrollHeight = (0, vue.ref)(0);
 		const footerScrollHeight = (0, vue.ref)(0);
 		const appendScrollHeight = (0, vue.ref)(0);
+		let isUnmounted = false;
+		let layoutFrame = null;
+		let syncFrame = null;
+		const stopFns = [];
 		(0, vue.watch)(() => props.height, (value) => {
 			layout.setHeight(value ?? null);
 		}, { immediate: true });
@@ -45152,16 +45356,24 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 			return { width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : "" };
 		});
 		const doLayout = () => {
+			if (isUnmounted) return;
 			if (shouldUpdateHeight.value) layout.updateElsHeight();
 			layout.updateColumnsWidth();
 			if (typeof window === "undefined") return;
-			requestAnimationFrame(syncPosition);
+			if (syncFrame === null) syncFrame = requestAnimationFrame(() => {
+				syncFrame = null;
+				if (!isUnmounted) syncPosition();
+			});
 		};
 		(0, vue.onMounted)(async () => {
 			await (0, vue.nextTick)();
+			if (isUnmounted) return;
 			store.updateColumns();
 			bindEvents();
-			requestAnimationFrame(doLayout);
+			layoutFrame = requestAnimationFrame(() => {
+				layoutFrame = null;
+				doLayout();
+			});
 			const el = table.vnode.el;
 			const tableHeader = table.refs.headerWrapper;
 			if (props.flexible && el && el.parentElement) el.parentElement.style.minWidth = "0";
@@ -45211,18 +45423,21 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 			else setScrollClass("is-scrolling-middle");
 		};
 		const bindEvents = () => {
-			if (!table.refs.scrollBarRef) return;
-			if (table.refs.scrollBarRef.wrapRef) useEventListener(table.refs.scrollBarRef.wrapRef, "scroll", syncPosition, { passive: true });
-			if (props.fit) useResizeObserver(table.vnode.el, resizeListener);
-			else useEventListener(window, "resize", resizeListener);
-			useResizeObserver(table.refs.tableInnerWrapper, () => {
+			if (isUnmounted || !table.refs.scrollBarRef) return;
+			if (table.refs.scrollBarRef.wrapRef) stopFns.push(useEventListener(table.refs.scrollBarRef.wrapRef, "scroll", syncPosition, { passive: true }));
+			if (props.fit) {
+				const { stop } = useResizeObserver(table.vnode.el, resizeListener);
+				stopFns.push(stop);
+			} else stopFns.push(useEventListener(window, "resize", resizeListener));
+			const { stop } = useResizeObserver(table.refs.tableInnerWrapper, () => {
 				resizeListener();
 				table.refs?.scrollBarRef?.update();
 			});
+			stopFns.push(stop);
 		};
 		const resizeListener = () => {
 			const el = table.vnode.el;
-			if (!table.$ready || !el) return;
+			if (isUnmounted || !table.$ready || !el) return;
 			let shouldUpdateLayout = false;
 			const { width: oldWidth, height: oldHeight, headerHeight: oldHeaderHeight } = resizeState.value;
 			const width = tableWidth.value = el.offsetWidth;
@@ -45254,6 +45469,28 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 			if (props.maxHeight) return "fixed";
 			return props.tableLayout;
 		});
+		const emptyBlockStyle = (0, vue.computed)(() => {
+			if (props.data && props.data.length) return;
+			let height = "100%";
+			if (props.height && bodyScrollHeight.value) height = `${bodyScrollHeight.value}px`;
+			const width = tableWidth.value;
+			return {
+				width: width ? `${width}px` : "",
+				height
+			};
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			isUnmounted = true;
+			if (layoutFrame !== null) {
+				cancelAnimationFrame(layoutFrame);
+				layoutFrame = null;
+			}
+			if (syncFrame !== null) {
+				cancelAnimationFrame(syncFrame);
+				syncFrame = null;
+			}
+			stopFns.forEach((stop) => stop());
+		});
 		return {
 			isHidden,
 			renderExpanded,
@@ -45262,16 +45499,7 @@ var import_isSameOrBefore = /* @__PURE__ */ __toESM(require_isSameOrBefore());
 			handleMouseLeave,
 			handleHeaderFooterMousewheel,
 			tableSize,
-			emptyBlockStyle: (0, vue.computed)(() => {
-				if (props.data && props.data.length) return;
-				let height = "100%";
-				if (props.height && bodyScrollHeight.value) height = `${bodyScrollHeight.value}px`;
-				const width = tableWidth.value;
-				return {
-					width: width ? `${width}px` : "",
-					height
-				};
-			}),
+			emptyBlockStyle,
 			resizeProxyVisible,
 			bodyWidth,
 			resizeState,