@element-plus/nightly 0.0.20261010 → 0.0.20261012

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20261010 */
+/*! Element Plus v0.0.20261012 */
 
 (function(global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('vue')) :
@@ -7984,7 +7984,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 
 //#endregion
 //#region ../../packages/element-plus/version.ts
-	const version$1 = "0.0.20261010";
+	const version$1 = "0.0.20261012";
 
 //#endregion
 //#region ../../packages/element-plus/make-installer.ts
@@ -12308,6 +12308,18 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			default: "div"
 		},
 		always: Boolean,
+		mask: {
+			type: [Boolean, String],
+			values: [
+				true,
+				false,
+				"top",
+				"bottom",
+				"left",
+				"right"
+			],
+			default: false
+		},
 		minSize: {
 			type: Number,
 			default: 20
@@ -12574,6 +12586,147 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 //#region ../../packages/components/scrollbar/src/bar.vue
 	var bar_default = bar_vue_vue_type_script_setup_true_lang_default;
 
+//#endregion
+//#region ../../packages/components/scrollbar/src/mask-utils.ts
+	let cachedRTLResult$1 = null;
+	function getRTLOffsetType$1(recalculate = false) {
+		if (!isClient) return "negative";
+		if (cachedRTLResult$1 === null || recalculate) {
+			const outerDiv = document.createElement("div");
+			const outerStyle = outerDiv.style;
+			outerStyle.width = "50px";
+			outerStyle.height = "50px";
+			outerStyle.overflow = "scroll";
+			outerStyle.direction = "rtl";
+			outerStyle.position = "absolute";
+			outerStyle.visibility = "hidden";
+			outerStyle.top = "-9999px";
+			const innerDiv = document.createElement("div");
+			const innerStyle = innerDiv.style;
+			innerStyle.width = "100px";
+			innerStyle.height = "100px";
+			outerDiv.appendChild(innerDiv);
+			document.body.appendChild(outerDiv);
+			if (outerDiv.scrollLeft > 0) cachedRTLResult$1 = "positive-descending";
+			else {
+				outerDiv.scrollLeft = 1;
+				cachedRTLResult$1 = outerDiv.scrollLeft === 0 ? "negative" : "positive-ascending";
+			}
+			document.body.removeChild(outerDiv);
+		}
+		return cachedRTLResult$1;
+	}
+
+//#endregion
+//#region ../../packages/components/scrollbar/src/mask.vue?vue&type=script&setup=true&lang.ts
+	var mask_vue_vue_type_script_setup_true_lang_default$1 = /*@__PURE__*/ (0, vue.defineComponent)({
+		__name: "mask",
+		props: { mask: {
+			type: [Boolean, String],
+			required: true
+		} },
+		setup(__props, { expose: __expose }) {
+			const ns = useNamespace("scrollbar");
+			const scrollbar = (0, vue.inject)(scrollbarContextKey);
+			const edges = [
+				"top",
+				"bottom",
+				"left",
+				"right"
+			];
+			const visible = (0, vue.shallowReactive)({
+				top: false,
+				bottom: false,
+				left: false,
+				right: false
+			});
+			const styles = (0, vue.shallowRef)({});
+			const handleScroll = () => {
+				const wrap = scrollbar.wrapElement;
+				if (!wrap) return;
+				const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } = wrap;
+				const maxTop = scrollHeight - clientHeight;
+				const maxLeft = scrollWidth - clientWidth;
+				const hasVerticalOverflow = clientHeight > 0 && maxTop > 1;
+				const hasHorizontalOverflow = clientWidth > 0 && maxLeft > 1;
+				let left = scrollLeft;
+				if (hasHorizontalOverflow && getStyle(wrap, "direction") === "rtl") switch (getRTLOffsetType$1()) {
+					case "negative":
+						left = maxLeft + scrollLeft;
+						break;
+					case "positive-ascending": left = maxLeft - scrollLeft;
+				}
+				visible.top = hasVerticalOverflow && scrollTop > 1;
+				visible.bottom = hasVerticalOverflow && maxTop - scrollTop > 1;
+				visible.left = hasHorizontalOverflow && left > 1;
+				visible.right = hasHorizontalOverflow && maxLeft - left > 1;
+			};
+			const update = () => {
+				const { wrapElement: wrap, scrollbarElement } = scrollbar;
+				if (!wrap || !scrollbarElement) return;
+				const { offsetLeft, offsetTop, clientLeft, clientTop, clientWidth, clientHeight } = wrap;
+				const left = offsetLeft + clientLeft;
+				const top = offsetTop + clientTop;
+				const verticalStyle = {
+					left: `${left}px`,
+					width: `${clientWidth}px`,
+					maxHeight: `${clientHeight}px`
+				};
+				const horizontalStyle = {
+					top: `${top}px`,
+					height: `${clientHeight}px`,
+					maxWidth: `${clientWidth}px`
+				};
+				styles.value = {
+					top: {
+						...verticalStyle,
+						top: `${top}px`
+					},
+					bottom: {
+						...verticalStyle,
+						bottom: `${scrollbarElement.clientHeight - top - clientHeight}px`
+					},
+					left: {
+						...horizontalStyle,
+						left: `${left}px`
+					},
+					right: {
+						...horizontalStyle,
+						right: `${scrollbarElement.clientWidth - left - clientWidth}px`
+					}
+				};
+				handleScroll();
+			};
+			__expose({
+				update,
+				handleScroll
+			});
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("mask")),
+					"aria-hidden": "true"
+				}, [((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(edges, (edge) => {
+					return (0, vue.createVNode)(vue.Transition, {
+						key: edge,
+						name: (0, vue.unref)(ns).b("mask-fade")
+					}, {
+						default: (0, vue.withCtx)(() => [__props.mask === true || __props.mask === edge ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+							key: 0,
+							class: (0, vue.normalizeClass)((0, vue.unref)(ns).e(`${edge}-mask`)),
+							style: (0, vue.normalizeStyle)(styles.value[edge]),
+							"aria-hidden": "true"
+						}, null, 6)), [[vue.vShow, (0, vue.unref)(visible)[edge]]]) : (0, vue.createCommentVNode)("v-if", true)]),
+						_: 2
+					}, 1032, ["name"]);
+				}), 64))], 2);
+			};
+		}
+	});
+
+//#endregion
+//#region ../../packages/components/scrollbar/src/mask.vue
+	var mask_default$1 = mask_vue_vue_type_script_setup_true_lang_default$1;
+
 //#endregion
 //#region ../../packages/components/scrollbar/src/scrollbar.vue?vue&type=script&setup=true&lang.ts
 	const _hoisted_1$78 = ["tabindex"];
@@ -12604,6 +12757,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			const wrapRef = (0, vue.ref)();
 			const resizeRef = (0, vue.ref)();
 			const barRef = (0, vue.ref)();
+			const maskRef = (0, vue.ref)();
 			const wrapStyle = (0, vue.computed)(() => {
 				const style = {};
 				const height = addUnit(props.height);
@@ -12642,6 +12796,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			const handleScroll = () => {
 				if (wrapRef.value) {
 					barRef.value?.handleScroll(wrapRef.value);
+					maskRef.value?.handleScroll();
 					const prevTop = wrapScrollTop;
 					const prevLeft = wrapScrollLeft;
 					wrapScrollTop = wrapRef.value.scrollTop;
@@ -12685,6 +12840,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			};
 			const update = () => {
 				barRef.value?.update();
+				maskRef.value?.update();
 				distanceScrollState[direction] = false;
 				if (wrapRef.value) barRef.value?.handleScroll(wrapRef.value);
 			};
@@ -12695,6 +12851,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 					if (!wrapRef.value) return;
 					barRef.value?.update();
 					barRef.value?.handleScroll(wrapRef.value);
+					maskRef.value?.update();
 				});
 			};
 			(0, vue.watch)(() => props.noresize, (noresize) => {
@@ -12709,7 +12866,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 				}
 			}, { immediate: true });
 			(0, vue.watch)(() => [props.maxHeight, props.height], () => {
-				if (!props.native) (0, vue.nextTick)(() => {
+				if (!props.native || props.mask) (0, vue.nextTick)(() => {
 					update();
 				});
 			});
@@ -12721,10 +12878,11 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 				if (wrapRef.value) {
 					wrapRef.value.scrollTop = wrapScrollTop;
 					wrapRef.value.scrollLeft = wrapScrollLeft;
+					maskRef.value?.update();
 				}
 			});
 			(0, vue.onMounted)(() => {
-				if (!props.native) (0, vue.nextTick)(() => {
+				if (!props.native || props.mask) (0, vue.nextTick)(() => {
 					update();
 				});
 			});
@@ -12742,41 +12900,53 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 					ref_key: "scrollbarRef",
 					ref: scrollbarRef,
 					class: (0, vue.normalizeClass)((0, vue.unref)(ns).b())
-				}, [(0, vue.createElementVNode)("div", {
-					ref_key: "wrapRef",
-					ref: wrapRef,
-					class: (0, vue.normalizeClass)(wrapKls.value),
-					style: (0, vue.normalizeStyle)(wrapStyle.value),
-					tabindex: __props.tabindex,
-					onScroll: handleScroll,
-					onTransitionend: updateBar,
-					onAnimationend: updateBar
-				}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.tag), {
-					id: __props.id,
-					ref_key: "resizeRef",
-					ref: resizeRef,
-					class: (0, vue.normalizeClass)(resizeKls.value),
-					style: (0, vue.normalizeStyle)(__props.viewStyle),
-					role: __props.role,
-					"aria-label": __props.ariaLabel,
-					"aria-orientation": __props.ariaOrientation
-				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-					_: 3
-				}, 8, [
-					"id",
-					"class",
-					"style",
-					"role",
-					"aria-label",
-					"aria-orientation"
-				]))], 46, _hoisted_1$78), !__props.native ? ((0, vue.openBlock)(), (0, vue.createBlock)(bar_default, {
-					key: 0,
-					ref_key: "barRef",
-					ref: barRef,
-					always: __props.always,
-					"min-size": __props.minSize
-				}, null, 8, ["always", "min-size"])) : (0, vue.createCommentVNode)("v-if", true)], 2);
+				}, [
+					(0, vue.createElementVNode)("div", {
+						ref_key: "wrapRef",
+						ref: wrapRef,
+						class: (0, vue.normalizeClass)(wrapKls.value),
+						style: (0, vue.normalizeStyle)(wrapStyle.value),
+						tabindex: __props.tabindex,
+						onScroll: handleScroll,
+						onTransitionend: updateBar,
+						onAnimationend: updateBar
+					}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.tag), {
+						id: __props.id,
+						ref_key: "resizeRef",
+						ref: resizeRef,
+						class: (0, vue.normalizeClass)(resizeKls.value),
+						style: (0, vue.normalizeStyle)(__props.viewStyle),
+						role: __props.role,
+						"aria-label": __props.ariaLabel,
+						"aria-orientation": __props.ariaOrientation
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+						_: 3
+					}, 8, [
+						"id",
+						"class",
+						"style",
+						"role",
+						"aria-label",
+						"aria-orientation"
+					]))], 46, _hoisted_1$78),
+					(0, vue.createVNode)(vue.Transition, { name: (0, vue.unref)(ns).b("mask-fade") }, {
+						default: (0, vue.withCtx)(() => [__props.mask ? ((0, vue.openBlock)(), (0, vue.createBlock)(mask_default$1, {
+							key: 0,
+							ref_key: "maskRef",
+							ref: maskRef,
+							mask: __props.mask
+						}, null, 8, ["mask"])) : (0, vue.createCommentVNode)("v-if", true)]),
+						_: 1
+					}, 8, ["name"]),
+					!__props.native ? ((0, vue.openBlock)(), (0, vue.createBlock)(bar_default, {
+						key: 0,
+						ref_key: "barRef",
+						ref: barRef,
+						always: __props.always,
+						"min-size": __props.minSize
+					}, null, 8, ["always", "min-size"])) : (0, vue.createCommentVNode)("v-if", true)
+				], 2);
 			};
 		}
 	});