@element-plus/nightly 0.0.20261010 → 0.0.20261011

package/lib/components/scrollbar/src/mask-utils.d.ts

@@ -0,0 +1,5 @@
+//#region ../../packages/components/scrollbar/src/mask-utils.d.ts
+type RTLOffsetType = 'negative' | 'positive-descending' | 'positive-ascending';
+declare function getRTLOffsetType(recalculate?: boolean): RTLOffsetType;
+//#endregion
+export { getRTLOffsetType };

package/lib/components/scrollbar/src/mask-utils.js

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _vueuse_core = require("@vueuse/core");
+//#region ../../packages/components/scrollbar/src/mask-utils.ts
+let cachedRTLResult = null;
+function getRTLOffsetType(recalculate = false) {
+	if (!_vueuse_core.isClient) return "negative";
+	if (cachedRTLResult === 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 = "positive-descending";
+		else {
+			outerDiv.scrollLeft = 1;
+			cachedRTLResult = outerDiv.scrollLeft === 0 ? "negative" : "positive-ascending";
+		}
+		document.body.removeChild(outerDiv);
+	}
+	return cachedRTLResult;
+}
+//#endregion
+exports.getRTLOffsetType = getRTLOffsetType;
+
+//# sourceMappingURL=mask-utils.js.map

package/lib/components/scrollbar/src/mask-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mask-utils.js","names":["isClient"],"sources":["../../../../../../packages/components/scrollbar/src/mask-utils.ts"],"sourcesContent":["import { isClient } from '@element-plus/utils'\n\ntype RTLOffsetType = 'negative' | 'positive-descending' | 'positive-ascending'\n\nlet cachedRTLResult: RTLOffsetType | null = null\n\nexport function getRTLOffsetType(recalculate = false): RTLOffsetType {\n  if (!isClient) return 'negative'\n  if (cachedRTLResult === null || recalculate) {\n    const outerDiv = document.createElement('div')\n    const outerStyle = outerDiv.style\n    outerStyle.width = '50px'\n    outerStyle.height = '50px'\n    outerStyle.overflow = 'scroll'\n    outerStyle.direction = 'rtl'\n    outerStyle.position = 'absolute'\n    outerStyle.visibility = 'hidden'\n    outerStyle.top = '-9999px'\n\n    const innerDiv = document.createElement('div')\n    const innerStyle = innerDiv.style\n    innerStyle.width = '100px'\n    innerStyle.height = '100px'\n\n    outerDiv.appendChild(innerDiv)\n    document.body.appendChild(outerDiv)\n\n    if (outerDiv.scrollLeft > 0) {\n      cachedRTLResult = 'positive-descending'\n    } else {\n      outerDiv.scrollLeft = 1\n      cachedRTLResult =\n        outerDiv.scrollLeft === 0 ? 'negative' : 'positive-ascending'\n    }\n\n    document.body.removeChild(outerDiv)\n  }\n\n  return cachedRTLResult\n}\n"],"mappings":";;;AAIA,IAAI,kBAAwC;AAE5C,SAAgB,iBAAiB,cAAc,OAAsB;CACnE,IAAI,CAACA,aAAAA,UAAU,OAAO;CACtB,IAAI,oBAAoB,QAAQ,aAAa;EAC3C,MAAM,WAAW,SAAS,cAAc,KAAK;EAC7C,MAAM,aAAa,SAAS;EAC5B,WAAW,QAAQ;EACnB,WAAW,SAAS;EACpB,WAAW,WAAW;EACtB,WAAW,YAAY;EACvB,WAAW,WAAW;EACtB,WAAW,aAAa;EACxB,WAAW,MAAM;EAEjB,MAAM,WAAW,SAAS,cAAc,KAAK;EAC7C,MAAM,aAAa,SAAS;EAC5B,WAAW,QAAQ;EACnB,WAAW,SAAS;EAEpB,SAAS,YAAY,QAAQ;EAC7B,SAAS,KAAK,YAAY,QAAQ;EAElC,IAAI,SAAS,aAAa,GACxB,kBAAkB;OACb;GACL,SAAS,aAAa;GACtB,kBACE,SAAS,eAAe,IAAI,aAAa;EAC7C;EAEA,SAAS,KAAK,YAAY,QAAQ;CACpC;CAEA,OAAO;AACT"}

package/lib/components/scrollbar/src/mask.js

@@ -0,0 +1,10 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+//#region ../../packages/components/scrollbar/src/mask.vue
+var mask_default = require("./mask.vue_vue_type_script_setup_true_lang.js").default;
+//#endregion
+exports.default = mask_default;
+
+//# sourceMappingURL=mask.js.map

package/lib/components/scrollbar/src/mask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mask.js","names":[],"sources":["../../../../../../packages/components/scrollbar/src/mask.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.e('mask')\" aria-hidden=\"true\">\n    <transition v-for=\"edge in edges\" :key=\"edge\" :name=\"ns.b('mask-fade')\">\n      <div\n        v-if=\"mask === true || mask === edge\"\n        v-show=\"visible[edge]\"\n        :class=\"ns.e(`${edge}-mask`)\"\n        :style=\"styles[edge]\"\n        aria-hidden=\"true\"\n      />\n    </transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, shallowReactive, shallowRef } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { getStyle } from '@element-plus/utils'\nimport { scrollbarContextKey } from './constants'\nimport { getRTLOffsetType } from './mask-utils'\n\nimport type { CSSProperties } from 'vue'\nimport type { ScrollbarDirection, ScrollbarProps } from './scrollbar'\n\ndefineProps<{\n  mask: ScrollbarProps['mask']\n}>()\n\nconst ns = useNamespace('scrollbar')\nconst scrollbar = inject(scrollbarContextKey)!\nconst edges = ['top', 'bottom', 'left', 'right'] as const\nconst visible = shallowReactive({\n  top: false,\n  bottom: false,\n  left: false,\n  right: false,\n})\nconst styles = shallowRef<Partial<Record<ScrollbarDirection, CSSProperties>>>(\n  {}\n)\n\nconst handleScroll = () => {\n  const wrap = scrollbar.wrapElement\n  if (!wrap) return\n\n  const {\n    clientHeight,\n    scrollHeight,\n    scrollTop,\n    clientWidth,\n    scrollWidth,\n    scrollLeft,\n  } = wrap\n  // Scroll offsets may be fractional, whereas scroll and client sizes are rounded.\n  const maxTop = scrollHeight - clientHeight\n  const maxLeft = scrollWidth - clientWidth\n  const hasVerticalOverflow = clientHeight > 0 && maxTop > 1\n  const hasHorizontalOverflow = clientWidth > 0 && maxLeft > 1\n  let left = scrollLeft\n  if (hasHorizontalOverflow && getStyle(wrap, 'direction') === 'rtl') {\n    // Normalize the browser's RTL offset to the distance from the physical left.\n    switch (getRTLOffsetType()) {\n      case 'negative':\n        left = maxLeft + scrollLeft\n        break\n      case 'positive-ascending':\n        left = maxLeft - scrollLeft\n        break\n    }\n  }\n\n  visible.top = hasVerticalOverflow && scrollTop > 1\n  visible.bottom = hasVerticalOverflow && maxTop - scrollTop > 1\n  visible.left = hasHorizontalOverflow && left > 1\n  visible.right = hasHorizontalOverflow && maxLeft - left > 1\n}\n\nconst update = () => {\n  const { wrapElement: wrap, scrollbarElement } = scrollbar\n  if (!wrap || !scrollbarElement) return\n\n  // Align with the viewport, excluding native scrollbars and any wrap border.\n  const {\n    offsetLeft,\n    offsetTop,\n    clientLeft,\n    clientTop,\n    clientWidth,\n    clientHeight,\n  } = wrap\n  const left = offsetLeft + clientLeft\n  const top = offsetTop + clientTop\n  const verticalStyle = {\n    left: `${left}px`,\n    width: `${clientWidth}px`,\n    maxHeight: `${clientHeight}px`,\n  }\n  const horizontalStyle = {\n    top: `${top}px`,\n    height: `${clientHeight}px`,\n    maxWidth: `${clientWidth}px`,\n  }\n  styles.value = {\n    top: { ...verticalStyle, top: `${top}px` },\n    bottom: {\n      ...verticalStyle,\n      bottom: `${scrollbarElement.clientHeight - top - clientHeight}px`,\n    },\n    left: { ...horizontalStyle, left: `${left}px` },\n    right: {\n      ...horizontalStyle,\n      right: `${scrollbarElement.clientWidth - left - clientWidth}px`,\n    },\n  }\n  handleScroll()\n}\n\ndefineExpose({ update, handleScroll })\n</script>\n"],"mappings":""}

package/lib/components/scrollbar/src/mask.vue.d.ts

@@ -0,0 +1,14 @@
+import { ScrollbarProps } from "./scrollbar.js";
+import * as _$vue from "vue";
+
+//#region ../../packages/components/scrollbar/src/mask.vue.d.ts
+type __VLS_Props = {
+  mask: ScrollbarProps['mask'];
+};
+declare const __VLS_export: _$vue.DefineComponent<__VLS_Props, {
+  update: () => void;
+  handleScroll: () => void;
+}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as default };

package/lib/components/scrollbar/src/mask.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,113 @@
+const require_style = require("../../../utils/dom/style.js");
+const require_index = require("../../../hooks/use-namespace/index.js");
+const require_constants = require("./constants.js");
+const require_mask_utils = require("./mask-utils.js");
+let vue = require("vue");
+//#region ../../packages/components/scrollbar/src/mask.vue?vue&type=script&setup=true&lang.ts
+var mask_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "mask",
+	props: { mask: {
+		type: [Boolean, String],
+		required: true
+	} },
+	setup(__props, { expose: __expose }) {
+		const ns = require_index.useNamespace("scrollbar");
+		const scrollbar = (0, vue.inject)(require_constants.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 && require_style.getStyle(wrap, "direction") === "rtl") switch (require_mask_utils.getRTLOffsetType()) {
+				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
+exports.default = mask_vue_vue_type_script_setup_true_lang_default;
+
+//# sourceMappingURL=mask.vue_vue_type_script_setup_true_lang.js.map

package/lib/components/scrollbar/src/mask.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mask.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/scrollbar/src/mask.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.e('mask')\" aria-hidden=\"true\">\n    <transition v-for=\"edge in edges\" :key=\"edge\" :name=\"ns.b('mask-fade')\">\n      <div\n        v-if=\"mask === true || mask === edge\"\n        v-show=\"visible[edge]\"\n        :class=\"ns.e(`${edge}-mask`)\"\n        :style=\"styles[edge]\"\n        aria-hidden=\"true\"\n      />\n    </transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, shallowReactive, shallowRef } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { getStyle } from '@element-plus/utils'\nimport { scrollbarContextKey } from './constants'\nimport { getRTLOffsetType } from './mask-utils'\n\nimport type { CSSProperties } from 'vue'\nimport type { ScrollbarDirection, ScrollbarProps } from './scrollbar'\n\ndefineProps<{\n  mask: ScrollbarProps['mask']\n}>()\n\nconst ns = useNamespace('scrollbar')\nconst scrollbar = inject(scrollbarContextKey)!\nconst edges = ['top', 'bottom', 'left', 'right'] as const\nconst visible = shallowReactive({\n  top: false,\n  bottom: false,\n  left: false,\n  right: false,\n})\nconst styles = shallowRef<Partial<Record<ScrollbarDirection, CSSProperties>>>(\n  {}\n)\n\nconst handleScroll = () => {\n  const wrap = scrollbar.wrapElement\n  if (!wrap) return\n\n  const {\n    clientHeight,\n    scrollHeight,\n    scrollTop,\n    clientWidth,\n    scrollWidth,\n    scrollLeft,\n  } = wrap\n  // Scroll offsets may be fractional, whereas scroll and client sizes are rounded.\n  const maxTop = scrollHeight - clientHeight\n  const maxLeft = scrollWidth - clientWidth\n  const hasVerticalOverflow = clientHeight > 0 && maxTop > 1\n  const hasHorizontalOverflow = clientWidth > 0 && maxLeft > 1\n  let left = scrollLeft\n  if (hasHorizontalOverflow && getStyle(wrap, 'direction') === 'rtl') {\n    // Normalize the browser's RTL offset to the distance from the physical left.\n    switch (getRTLOffsetType()) {\n      case 'negative':\n        left = maxLeft + scrollLeft\n        break\n      case 'positive-ascending':\n        left = maxLeft - scrollLeft\n        break\n    }\n  }\n\n  visible.top = hasVerticalOverflow && scrollTop > 1\n  visible.bottom = hasVerticalOverflow && maxTop - scrollTop > 1\n  visible.left = hasHorizontalOverflow && left > 1\n  visible.right = hasHorizontalOverflow && maxLeft - left > 1\n}\n\nconst update = () => {\n  const { wrapElement: wrap, scrollbarElement } = scrollbar\n  if (!wrap || !scrollbarElement) return\n\n  // Align with the viewport, excluding native scrollbars and any wrap border.\n  const {\n    offsetLeft,\n    offsetTop,\n    clientLeft,\n    clientTop,\n    clientWidth,\n    clientHeight,\n  } = wrap\n  const left = offsetLeft + clientLeft\n  const top = offsetTop + clientTop\n  const verticalStyle = {\n    left: `${left}px`,\n    width: `${clientWidth}px`,\n    maxHeight: `${clientHeight}px`,\n  }\n  const horizontalStyle = {\n    top: `${top}px`,\n    height: `${clientHeight}px`,\n    maxWidth: `${clientWidth}px`,\n  }\n  styles.value = {\n    top: { ...verticalStyle, top: `${top}px` },\n    bottom: {\n      ...verticalStyle,\n      bottom: `${scrollbarElement.clientHeight - top - clientHeight}px`,\n    },\n    left: { ...horizontalStyle, left: `${left}px` },\n    right: {\n      ...horizontalStyle,\n      right: `${scrollbarElement.clientWidth - left - clientWidth}px`,\n    },\n  }\n  handleScroll()\n}\n\ndefineExpose({ update, handleScroll })\n</script>\n"],"mappings":"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"}

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

@@ -58,6 +58,11 @@ interface ScrollbarProps {
    * @description always show
    */
   always?: boolean;
+  /**
+   * @description show gradient masks at all edges or at the specified edge while more content can be scrolled to
+   * @default false
+   */
+  mask?: boolean | ScrollbarDirection;
   /**
    * @description minimum size of scrollbar
    * @default 20
@@ -107,6 +112,7 @@ declare const scrollbarProps: {
   readonly noresize: BooleanConstructor;
   readonly tag: EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;
   readonly always: BooleanConstructor;
+  readonly mask: EpPropFinalized<readonly [BooleanConstructor, StringConstructor], boolean | "left" | "right" | "top" | "bottom", unknown, false, boolean>;
   readonly minSize: EpPropFinalized<NumberConstructor, unknown, unknown, 20, boolean>;
   readonly tabindex: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, undefined, boolean>;
   readonly id: StringConstructor;

package/lib/components/scrollbar/src/scrollbar.js

@@ -96,6 +96,21 @@ const scrollbarProps = require_runtime.buildProps({
 	*/
 	always: Boolean,
 	/**
+	* @description show gradient masks at all edges or at the specified edge while more content can be scrolled to
+	*/
+	mask: {
+		type: [Boolean, String],
+		values: [
+			true,
+			false,
+			"top",
+			"bottom",
+			"left",
+			"right"
+		],
+		default: false
+	},
+	/**
 	* @description minimum size of scrollbar
 	*/
 	minSize: {

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

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.js","names":["buildProps","definePropType","useAriaProps","isNumber"],"sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { useAriaProps } from '@element-plus/hooks'\n\nimport type { ClassValue } from '@element-plus/utils'\nimport type { ExtractPublicPropTypes, StyleValue } from 'vue'\nimport type Scrollbar from './scrollbar.vue'\n\nexport interface ScrollbarProps {\n  /**\n   * @description trigger distance(px)\n   * @default 0\n   */\n  distance?: number\n  /**\n   * @description height of scrollbar\n   * @default ''\n   */\n  height?: number | string\n  /**\n   * @description max height of scrollbar\n   * @default ''\n   */\n  maxHeight?: number | string\n  /**\n   * @description whether to use the native scrollbar\n   */\n  native?: boolean\n  /**\n   * @description style of wrap\n   * @default ''\n   */\n  wrapStyle?: StyleValue\n  /**\n   * @description class of wrap\n   * @default ''\n   */\n  wrapClass?: ClassValue\n  /**\n   * @description class of view\n   * @default ''\n   */\n  viewClass?: ClassValue\n  /**\n   * @description style of view\n   * @default ''\n   */\n  viewStyle?: StyleValue\n  /**\n   * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance\n   */\n  noresize?: boolean\n  /**\n   * @description element tag of the view\n   * @default 'div'\n   */\n  tag?: keyof HTMLElementTagNameMap | (string & {})\n  /**\n   * @description always show\n   */\n  always?: boolean\n  /**\n   * @description minimum size of scrollbar\n   * @default 20\n   */\n  minSize?: number\n  /**\n   * @description Wrap tabindex\n   * @default undefined\n   */\n  tabindex?: number | string\n  /**\n   * @description id of view\n   */\n  id?: string\n  /**\n   * @description role of view\n   */\n  role?: string\n  /**\n   * @description native `aria-label` attribute\n   */\n  ariaLabel?: string\n  /**\n   * @description native `aria-orientation` attribute\n   */\n  ariaOrientation?: 'horizontal' | 'vertical' | 'undefined'\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.\n */\nexport const scrollbarProps = buildProps({\n  /**\n   * @description trigger distance(px)\n   */\n  distance: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description height of scrollbar\n   */\n  height: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description max height of scrollbar\n   */\n  maxHeight: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description whether to use the native scrollbar\n   */\n  native: Boolean,\n  /**\n   * @description style of wrap\n   */\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array, Boolean]),\n    default: '',\n  },\n  /**\n   * @description class of wrap\n   */\n  wrapClass: {\n    type: definePropType<ClassValue>([String, Array, Object, Boolean]),\n    default: '',\n  },\n  /**\n   * @description class of view\n   */\n  viewClass: {\n    type: definePropType<ClassValue>([String, Array, Object, Boolean]),\n    default: '',\n  },\n  /**\n   * @description style of view\n   */\n  viewStyle: {\n    type: definePropType<StyleValue>([String, Object, Array, Boolean]),\n    default: '',\n  },\n  /**\n   * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance\n   */\n  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n  /**\n   * @description element tag of the view\n   */\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  /**\n   * @description always show\n   */\n  always: Boolean,\n  /**\n   * @description minimum size of scrollbar\n   */\n  minSize: {\n    type: Number,\n    default: 20,\n  },\n  /**\n   * @description Wrap tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: undefined,\n  },\n  /**\n   * @description id of view\n   */\n  id: String,\n  /**\n   * @description role of view\n   */\n  role: String,\n  ...useAriaProps(['ariaLabel', 'ariaOrientation']),\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.\n */\nexport type ScrollbarPropsPublic = ExtractPublicPropTypes<typeof scrollbarProps>\n\nexport const scrollbarEmits = {\n  'end-reached': (direction: ScrollbarDirection) =>\n    ['left', 'right', 'top', 'bottom'].includes(direction),\n  scroll: ({\n    scrollTop,\n    scrollLeft,\n  }: {\n    scrollTop: number\n    scrollLeft: number\n  }) => [scrollTop, scrollLeft].every(isNumber),\n}\nexport type ScrollbarEmits = typeof scrollbarEmits\nexport type ScrollbarDirection = 'top' | 'bottom' | 'left' | 'right'\n\nexport type ScrollbarInstance = InstanceType<typeof Scrollbar> & unknown\n"],"mappings":";;;;;;;;AA2FA,MAAa,iBAAiBA,gBAAAA,WAAW;;;;CAIvC,UAAU;EACR,MAAM;EACN,SAAS;CACX;;;;CAIA,QAAQ;EACN,MAAM,CAAC,QAAQ,MAAM;EACrB,SAAS;CACX;;;;CAIA,WAAW;EACT,MAAM,CAAC,QAAQ,MAAM;EACrB,SAAS;CACX;;;;CAIA,QAAQ;;;;CAIR,WAAW;EACT,MAAMC,gBAAAA,eAA2B;GAAC;GAAQ;GAAQ;GAAO;EAAO,CAAC;EACjE,SAAS;CACX;;;;CAIA,WAAW;EACT,MAAMA,gBAAAA,eAA2B;GAAC;GAAQ;GAAO;GAAQ;EAAO,CAAC;EACjE,SAAS;CACX;;;;CAIA,WAAW;EACT,MAAMA,gBAAAA,eAA2B;GAAC;GAAQ;GAAO;GAAQ;EAAO,CAAC;EACjE,SAAS;CACX;;;;CAIA,WAAW;EACT,MAAMA,gBAAAA,eAA2B;GAAC;GAAQ;GAAQ;GAAO;EAAO,CAAC;EACjE,SAAS;CACX;;;;CAIA,UAAU;;;;CAIV,KAAK;EACH,MAAM;EACN,SAAS;CACX;;;;CAIA,QAAQ;;;;CAIR,SAAS;EACP,MAAM;EACN,SAAS;CACX;;;;CAIA,UAAU;EACR,MAAM,CAAC,QAAQ,MAAM;EACrB,SAAS,KAAA;CACX;;;;CAIA,IAAI;;;;CAIJ,MAAM;CACN,GAAGC,cAAAA,aAAa,CAAC,aAAa,iBAAiB,CAAC;AAClD,CAAU;AAOV,MAAa,iBAAiB;CAC5B,gBAAgB,cACd;EAAC;EAAQ;EAAS;EAAO;CAAQ,CAAC,CAAC,SAAS,SAAS;CACvD,SAAS,EACP,WACA,iBAII,CAAC,WAAW,UAAU,CAAC,CAAC,MAAMC,cAAAA,QAAQ;AAC9C"}
+{"version":3,"file":"scrollbar.js","names":["buildProps","definePropType","useAriaProps","isNumber"],"sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { useAriaProps } from '@element-plus/hooks'\n\nimport type { ClassValue } from '@element-plus/utils'\nimport type { ExtractPublicPropTypes, StyleValue } from 'vue'\nimport type Scrollbar from './scrollbar.vue'\n\nexport interface ScrollbarProps {\n  /**\n   * @description trigger distance(px)\n   * @default 0\n   */\n  distance?: number\n  /**\n   * @description height of scrollbar\n   * @default ''\n   */\n  height?: number | string\n  /**\n   * @description max height of scrollbar\n   * @default ''\n   */\n  maxHeight?: number | string\n  /**\n   * @description whether to use the native scrollbar\n   */\n  native?: boolean\n  /**\n   * @description style of wrap\n   * @default ''\n   */\n  wrapStyle?: StyleValue\n  /**\n   * @description class of wrap\n   * @default ''\n   */\n  wrapClass?: ClassValue\n  /**\n   * @description class of view\n   * @default ''\n   */\n  viewClass?: ClassValue\n  /**\n   * @description style of view\n   * @default ''\n   */\n  viewStyle?: StyleValue\n  /**\n   * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance\n   */\n  noresize?: boolean\n  /**\n   * @description element tag of the view\n   * @default 'div'\n   */\n  tag?: keyof HTMLElementTagNameMap | (string & {})\n  /**\n   * @description always show\n   */\n  always?: boolean\n  /**\n   * @description show gradient masks at all edges or at the specified edge while more content can be scrolled to\n   * @default false\n   */\n  mask?: boolean | ScrollbarDirection\n  /**\n   * @description minimum size of scrollbar\n   * @default 20\n   */\n  minSize?: number\n  /**\n   * @description Wrap tabindex\n   * @default undefined\n   */\n  tabindex?: number | string\n  /**\n   * @description id of view\n   */\n  id?: string\n  /**\n   * @description role of view\n   */\n  role?: string\n  /**\n   * @description native `aria-label` attribute\n   */\n  ariaLabel?: string\n  /**\n   * @description native `aria-orientation` attribute\n   */\n  ariaOrientation?: 'horizontal' | 'vertical' | 'undefined'\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.\n */\nexport const scrollbarProps = buildProps({\n  /**\n   * @description trigger distance(px)\n   */\n  distance: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description height of scrollbar\n   */\n  height: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description max height of scrollbar\n   */\n  maxHeight: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description whether to use the native scrollbar\n   */\n  native: Boolean,\n  /**\n   * @description style of wrap\n   */\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array, Boolean]),\n    default: '',\n  },\n  /**\n   * @description class of wrap\n   */\n  wrapClass: {\n    type: definePropType<ClassValue>([String, Array, Object, Boolean]),\n    default: '',\n  },\n  /**\n   * @description class of view\n   */\n  viewClass: {\n    type: definePropType<ClassValue>([String, Array, Object, Boolean]),\n    default: '',\n  },\n  /**\n   * @description style of view\n   */\n  viewStyle: {\n    type: definePropType<StyleValue>([String, Object, Array, Boolean]),\n    default: '',\n  },\n  /**\n   * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance\n   */\n  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n  /**\n   * @description element tag of the view\n   */\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  /**\n   * @description always show\n   */\n  always: Boolean,\n  /**\n   * @description show gradient masks at all edges or at the specified edge while more content can be scrolled to\n   */\n  mask: {\n    type: [Boolean, String],\n    values: [true, false, 'top', 'bottom', 'left', 'right'],\n    default: false,\n  },\n  /**\n   * @description minimum size of scrollbar\n   */\n  minSize: {\n    type: Number,\n    default: 20,\n  },\n  /**\n   * @description Wrap tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: undefined,\n  },\n  /**\n   * @description id of view\n   */\n  id: String,\n  /**\n   * @description role of view\n   */\n  role: String,\n  ...useAriaProps(['ariaLabel', 'ariaOrientation']),\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.\n */\nexport type ScrollbarPropsPublic = ExtractPublicPropTypes<typeof scrollbarProps>\n\nexport const scrollbarEmits = {\n  'end-reached': (direction: ScrollbarDirection) =>\n    ['left', 'right', 'top', 'bottom'].includes(direction),\n  scroll: ({\n    scrollTop,\n    scrollLeft,\n  }: {\n    scrollTop: number\n    scrollLeft: number\n  }) => [scrollTop, scrollLeft].every(isNumber),\n}\nexport type ScrollbarEmits = typeof scrollbarEmits\nexport type ScrollbarDirection = 'top' | 'bottom' | 'left' | 'right'\n\nexport type ScrollbarInstance = InstanceType<typeof Scrollbar> & unknown\n"],"mappings":";;;;;;;;AAgGA,MAAa,iBAAiBA,gBAAAA,WAAW;;;;CAIvC,UAAU;EACR,MAAM;EACN,SAAS;CACX;;;;CAIA,QAAQ;EACN,MAAM,CAAC,QAAQ,MAAM;EACrB,SAAS;CACX;;;;CAIA,WAAW;EACT,MAAM,CAAC,QAAQ,MAAM;EACrB,SAAS;CACX;;;;CAIA,QAAQ;;;;CAIR,WAAW;EACT,MAAMC,gBAAAA,eAA2B;GAAC;GAAQ;GAAQ;GAAO;EAAO,CAAC;EACjE,SAAS;CACX;;;;CAIA,WAAW;EACT,MAAMA,gBAAAA,eAA2B;GAAC;GAAQ;GAAO;GAAQ;EAAO,CAAC;EACjE,SAAS;CACX;;;;CAIA,WAAW;EACT,MAAMA,gBAAAA,eAA2B;GAAC;GAAQ;GAAO;GAAQ;EAAO,CAAC;EACjE,SAAS;CACX;;;;CAIA,WAAW;EACT,MAAMA,gBAAAA,eAA2B;GAAC;GAAQ;GAAQ;GAAO;EAAO,CAAC;EACjE,SAAS;CACX;;;;CAIA,UAAU;;;;CAIV,KAAK;EACH,MAAM;EACN,SAAS;CACX;;;;CAIA,QAAQ;;;;CAIR,MAAM;EACJ,MAAM,CAAC,SAAS,MAAM;EACtB,QAAQ;GAAC;GAAM;GAAO;GAAO;GAAU;GAAQ;EAAO;EACtD,SAAS;CACX;;;;CAIA,SAAS;EACP,MAAM;EACN,SAAS;CACX;;;;CAIA,UAAU;EACR,MAAM,CAAC,QAAQ,MAAM;EACrB,SAAS,KAAA;CACX;;;;CAIA,IAAI;;;;CAIJ,MAAM;CACN,GAAGC,cAAAA,aAAa,CAAC,aAAa,iBAAiB,CAAC;AAClD,CAAU;AAOV,MAAa,iBAAiB;CAC5B,gBAAgB,cACd;EAAC;EAAQ;EAAS;EAAO;CAAQ,CAAC,CAAC,SAAS,SAAS;CACvD,SAAS,EACP,WACA,iBAII,CAAC,WAAW,UAAU,CAAC,CAAC,MAAMC,cAAAA,QAAQ;AAC9C"}

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

@@ -32,6 +32,7 @@ declare const __VLS_base: _$vue.DefineComponent<ScrollbarProps, {
 }>, {
   tabindex: string | number;
   height: string | number;
+  mask: boolean | ScrollbarDirection;
   maxHeight: string | number;
   tag: (string & {}) | keyof HTMLElementTagNameMap;
   distance: number;

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

@@ -6,6 +6,7 @@ const require_index = require("../../../hooks/use-namespace/index.js");
 const require_scrollbar = require("./scrollbar.js");
 const require_constants = require("./constants.js");
 const require_bar = require("./bar2.js");
+const require_mask = require("./mask.js");
 let _vueuse_core = require("@vueuse/core");
 let vue = require("vue");
 let _vue_shared = require("@vue/shared");
@@ -38,6 +39,7 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vu
 		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 = require_style.addUnit(props.height);
@@ -76,6 +78,7 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vu
 		const handleScroll = () => {
 			if (wrapRef.value) {
 				barRef.value?.handleScroll(wrapRef.value);
+				maskRef.value?.handleScroll();
 				const prevTop = wrapScrollTop;
 				const prevLeft = wrapScrollLeft;
 				wrapScrollTop = wrapRef.value.scrollTop;
@@ -119,6 +122,7 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vu
 		};
 		const update = () => {
 			barRef.value?.update();
+			maskRef.value?.update();
 			distanceScrollState[direction] = false;
 			if (wrapRef.value) barRef.value?.handleScroll(wrapRef.value);
 		};
@@ -129,6 +133,7 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vu
 				if (!wrapRef.value) return;
 				barRef.value?.update();
 				barRef.value?.handleScroll(wrapRef.value);
+				maskRef.value?.update();
 			});
 		};
 		(0, vue.watch)(() => props.noresize, (noresize) => {
@@ -143,7 +148,7 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vu
 			}
 		}, { immediate: true });
 		(0, vue.watch)(() => [props.maxHeight, props.height], () => {
-			if (!props.native) (0, vue.nextTick)(() => {
+			if (!props.native || props.mask) (0, vue.nextTick)(() => {
 				update();
 			});
 		});
@@ -155,10 +160,11 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vu
 			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();
 			});
 		});
@@ -182,41 +188,53 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vu
 				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), !__props.native ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_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),
+				(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)(require_mask.default, {
+						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)(require_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);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbarRef\" :class=\"ns.b()\">\n    <div\n      ref=\"wrapRef\"\n      :class=\"wrapKls\"\n      :style=\"wrapStyle\"\n      :tabindex=\"tabindex\"\n      @scroll=\"handleScroll\"\n      @transitionend=\"updateBar\"\n      @animationend=\"updateBar\"\n    >\n      <component\n        :is=\"tag\"\n        :id=\"id\"\n        ref=\"resizeRef\"\n        :class=\"resizeKls\"\n        :style=\"viewStyle\"\n        :role=\"role\"\n        :aria-label=\"ariaLabel\"\n        :aria-orientation=\"ariaOrientation\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar ref=\"barRef\" :always=\"always\" :min-size=\"minSize\" />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onActivated,\n  onMounted,\n  onUpdated,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport {\n  addUnit,\n  debugWarn,\n  isGreaterThan,\n  isNumber,\n  isObject,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport Bar from './bar.vue'\nimport { scrollbarContextKey } from './constants'\nimport { scrollbarEmits } from './scrollbar'\n\nimport type { ScrollbarDirection, ScrollbarProps } from './scrollbar'\nimport type { BarInstance } from './bar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst COMPONENT_NAME = 'ElScrollbar'\n\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<ScrollbarProps>(), {\n  distance: 0,\n  height: '',\n  maxHeight: '',\n  wrapStyle: '',\n  wrapClass: '',\n  viewStyle: '',\n  viewClass: '',\n  tag: 'div',\n  minSize: 20,\n  tabindex: undefined,\n})\nconst emit = defineEmits(scrollbarEmits)\n\nconst ns = useNamespace('scrollbar')\n\nlet stopResizeObserver: (() => void) | undefined = undefined\nlet stopWrapResizeObserver: (() => void) | undefined = undefined\nlet stopResizeListener: (() => void) | undefined = undefined\nlet rafId = 0\nlet wrapScrollTop = 0\nlet wrapScrollLeft = 0\nlet direction = '' as ScrollbarDirection\nconst distanceScrollState = {\n  bottom: false,\n  top: false,\n  right: false,\n  left: false,\n}\n\nconst scrollbarRef = ref<HTMLDivElement>()\nconst wrapRef = ref<HTMLDivElement>()\nconst resizeRef = ref<HTMLElement>()\nconst barRef = ref<BarInstance>()\n\nconst wrapStyle = computed<StyleValue>(() => {\n  const style: CSSProperties = {}\n  const height = addUnit(props.height)\n  const maxHeight = addUnit(props.maxHeight)\n  if (height) style.height = height\n  if (maxHeight) style.maxHeight = maxHeight\n  return [props.wrapStyle, style]\n})\n\nconst wrapKls = computed(() => {\n  return [\n    props.wrapClass,\n    ns.e('wrap'),\n    { [ns.em('wrap', 'hidden-default')]: !props.native },\n  ]\n})\n\nconst resizeKls = computed(() => {\n  return [ns.e('view'), props.viewClass]\n})\n\nconst shouldSkipDirection = (direction: ScrollbarDirection) => {\n  return distanceScrollState[direction] ?? false\n}\n\nconst DIRECTION_PAIRS: Record<ScrollbarDirection, ScrollbarDirection> = {\n  top: 'bottom',\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n}\nconst updateTriggerStatus = (arrivedStates: Record<string, boolean>) => {\n  const oppositeDirection = DIRECTION_PAIRS[direction]\n  if (!oppositeDirection) return\n\n  const arrived = arrivedStates[direction]\n  const oppositeArrived = arrivedStates[oppositeDirection]\n\n  if (arrived && !distanceScrollState[direction]) {\n    distanceScrollState[direction] = true\n  }\n\n  if (!oppositeArrived && distanceScrollState[oppositeDirection]) {\n    distanceScrollState[oppositeDirection] = false\n  }\n}\n\nconst handleScroll = () => {\n  if (wrapRef.value) {\n    barRef.value?.handleScroll(wrapRef.value)\n    const prevTop = wrapScrollTop\n    const prevLeft = wrapScrollLeft\n    wrapScrollTop = wrapRef.value.scrollTop\n    wrapScrollLeft = wrapRef.value.scrollLeft\n\n    const arrivedStates = {\n      bottom: !isGreaterThan(\n        wrapRef.value.scrollHeight - props.distance,\n        wrapRef.value.clientHeight + wrapScrollTop\n      ),\n      top: wrapScrollTop <= props.distance && prevTop !== 0,\n      right:\n        !isGreaterThan(\n          wrapRef.value.scrollWidth - props.distance,\n          wrapRef.value.clientWidth + wrapScrollLeft\n        ) && prevLeft !== wrapScrollLeft,\n      left: wrapScrollLeft <= props.distance && prevLeft !== 0,\n    }\n\n    emit('scroll', {\n      scrollTop: wrapScrollTop,\n      scrollLeft: wrapScrollLeft,\n    })\n\n    if (prevTop !== wrapScrollTop) {\n      direction = wrapScrollTop > prevTop ? 'bottom' : 'top'\n    }\n    if (prevLeft !== wrapScrollLeft) {\n      direction = wrapScrollLeft > prevLeft ? 'right' : 'left'\n    }\n    if (props.distance > 0) {\n      if (shouldSkipDirection(direction)) {\n        return\n      }\n      updateTriggerStatus(arrivedStates)\n    }\n    if (arrivedStates[direction]) emit('end-reached', direction)\n  }\n}\n\nfunction scrollTo(xCord: number, yCord?: number): void\nfunction scrollTo(options: ScrollToOptions): void\nfunction scrollTo(arg1: unknown, arg2?: number) {\n  if (isObject(arg1)) {\n    wrapRef.value!.scrollTo(arg1)\n  } else if (isNumber(arg1) && isNumber(arg2)) {\n    wrapRef.value!.scrollTo(arg1, arg2)\n  }\n}\n\nconst setScrollTop = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollTop = value\n}\n\nconst setScrollLeft = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollLeft = value\n}\n\nconst update = () => {\n  barRef.value?.update()\n  distanceScrollState[direction] = false\n  if (wrapRef.value) barRef.value?.handleScroll(wrapRef.value)\n}\n\n// Transform-driven overflow (e.g. slide transitions) is not observable via\n// resize observers, so refresh the bar when transitions/animations end —\n// this applies even when `noresize` is set.\nconst updateBar = () => {\n  if (rafId) return\n  rafId = requestAnimationFrame(() => {\n    rafId = 0\n    if (!wrapRef.value) return\n\n    // Bar state may be stale even when the final scroll dimensions match a\n    // previously seen value (e.g. `onUpdated` measured the transient\n    // overflow mid-transition), so always refresh the bar here.\n    barRef.value?.update()\n    barRef.value?.handleScroll(wrapRef.value)\n  })\n}\n\nwatch(\n  () => props.noresize,\n  (noresize) => {\n    if (noresize) {\n      stopResizeObserver?.()\n      stopWrapResizeObserver?.()\n      stopResizeListener?.()\n    } else {\n      ;({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))\n      ;({ stop: stopWrapResizeObserver } = useResizeObserver(wrapRef, update))\n      stopResizeListener = useEventListener('resize', update)\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => [props.maxHeight, props.height],\n  () => {\n    if (!props.native)\n      nextTick(() => {\n        update()\n      })\n  }\n)\n\nprovide(\n  scrollbarContextKey,\n  reactive({\n    scrollbarElement: scrollbarRef,\n    wrapElement: wrapRef,\n  })\n)\n\nonActivated(() => {\n  if (wrapRef.value) {\n    wrapRef.value.scrollTop = wrapScrollTop\n    wrapRef.value.scrollLeft = wrapScrollLeft\n  }\n})\n\nonMounted(() => {\n  if (!props.native)\n    nextTick(() => {\n      update()\n    })\n})\nonUpdated(() => update())\n\ndefineExpose({\n  /** @description scrollbar wrap ref */\n  wrapRef,\n  /** @description update scrollbar state manually */\n  update,\n  /** @description scrolls to a particular set of coordinates */\n  scrollTo,\n  /** @description set distance to scroll top */\n  setScrollTop,\n  /** @description set distance to scroll left */\n  setScrollLeft,\n  /** @description handle scroll event */\n  handleScroll,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"scrollbar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbarRef\" :class=\"ns.b()\">\n    <div\n      ref=\"wrapRef\"\n      :class=\"wrapKls\"\n      :style=\"wrapStyle\"\n      :tabindex=\"tabindex\"\n      @scroll=\"handleScroll\"\n      @transitionend=\"updateBar\"\n      @animationend=\"updateBar\"\n    >\n      <component\n        :is=\"tag\"\n        :id=\"id\"\n        ref=\"resizeRef\"\n        :class=\"resizeKls\"\n        :style=\"viewStyle\"\n        :role=\"role\"\n        :aria-label=\"ariaLabel\"\n        :aria-orientation=\"ariaOrientation\"\n      >\n        <slot />\n      </component>\n    </div>\n    <transition :name=\"ns.b('mask-fade')\">\n      <scrollbar-mask v-if=\"mask\" ref=\"maskRef\" :mask=\"mask\" />\n    </transition>\n    <template v-if=\"!native\">\n      <bar ref=\"barRef\" :always=\"always\" :min-size=\"minSize\" />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onActivated,\n  onMounted,\n  onUpdated,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport {\n  addUnit,\n  debugWarn,\n  isGreaterThan,\n  isNumber,\n  isObject,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport Bar from './bar.vue'\nimport ScrollbarMask from './mask.vue'\nimport { scrollbarContextKey } from './constants'\nimport { scrollbarEmits } from './scrollbar'\n\nimport type { ScrollbarDirection, ScrollbarProps } from './scrollbar'\nimport type { BarInstance } from './bar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst COMPONENT_NAME = 'ElScrollbar'\n\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<ScrollbarProps>(), {\n  distance: 0,\n  height: '',\n  maxHeight: '',\n  wrapStyle: '',\n  wrapClass: '',\n  viewStyle: '',\n  viewClass: '',\n  tag: 'div',\n  mask: false,\n  minSize: 20,\n  tabindex: undefined,\n})\nconst emit = defineEmits(scrollbarEmits)\n\nconst ns = useNamespace('scrollbar')\n\nlet stopResizeObserver: (() => void) | undefined = undefined\nlet stopWrapResizeObserver: (() => void) | undefined = undefined\nlet stopResizeListener: (() => void) | undefined = undefined\nlet rafId = 0\nlet wrapScrollTop = 0\nlet wrapScrollLeft = 0\nlet direction = '' as ScrollbarDirection\nconst distanceScrollState = {\n  bottom: false,\n  top: false,\n  right: false,\n  left: false,\n}\n\nconst scrollbarRef = ref<HTMLDivElement>()\nconst wrapRef = ref<HTMLDivElement>()\nconst resizeRef = ref<HTMLElement>()\nconst barRef = ref<BarInstance>()\nconst maskRef = ref<InstanceType<typeof ScrollbarMask>>()\n\nconst wrapStyle = computed<StyleValue>(() => {\n  const style: CSSProperties = {}\n  const height = addUnit(props.height)\n  const maxHeight = addUnit(props.maxHeight)\n  if (height) style.height = height\n  if (maxHeight) style.maxHeight = maxHeight\n  return [props.wrapStyle, style]\n})\n\nconst wrapKls = computed(() => {\n  return [\n    props.wrapClass,\n    ns.e('wrap'),\n    { [ns.em('wrap', 'hidden-default')]: !props.native },\n  ]\n})\n\nconst resizeKls = computed(() => {\n  return [ns.e('view'), props.viewClass]\n})\n\nconst shouldSkipDirection = (direction: ScrollbarDirection) => {\n  return distanceScrollState[direction] ?? false\n}\n\nconst DIRECTION_PAIRS: Record<ScrollbarDirection, ScrollbarDirection> = {\n  top: 'bottom',\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n}\nconst updateTriggerStatus = (arrivedStates: Record<string, boolean>) => {\n  const oppositeDirection = DIRECTION_PAIRS[direction]\n  if (!oppositeDirection) return\n\n  const arrived = arrivedStates[direction]\n  const oppositeArrived = arrivedStates[oppositeDirection]\n\n  if (arrived && !distanceScrollState[direction]) {\n    distanceScrollState[direction] = true\n  }\n\n  if (!oppositeArrived && distanceScrollState[oppositeDirection]) {\n    distanceScrollState[oppositeDirection] = false\n  }\n}\n\nconst handleScroll = () => {\n  if (wrapRef.value) {\n    barRef.value?.handleScroll(wrapRef.value)\n    maskRef.value?.handleScroll()\n    const prevTop = wrapScrollTop\n    const prevLeft = wrapScrollLeft\n    wrapScrollTop = wrapRef.value.scrollTop\n    wrapScrollLeft = wrapRef.value.scrollLeft\n\n    const arrivedStates = {\n      bottom: !isGreaterThan(\n        wrapRef.value.scrollHeight - props.distance,\n        wrapRef.value.clientHeight + wrapScrollTop\n      ),\n      top: wrapScrollTop <= props.distance && prevTop !== 0,\n      right:\n        !isGreaterThan(\n          wrapRef.value.scrollWidth - props.distance,\n          wrapRef.value.clientWidth + wrapScrollLeft\n        ) && prevLeft !== wrapScrollLeft,\n      left: wrapScrollLeft <= props.distance && prevLeft !== 0,\n    }\n\n    emit('scroll', {\n      scrollTop: wrapScrollTop,\n      scrollLeft: wrapScrollLeft,\n    })\n\n    if (prevTop !== wrapScrollTop) {\n      direction = wrapScrollTop > prevTop ? 'bottom' : 'top'\n    }\n    if (prevLeft !== wrapScrollLeft) {\n      direction = wrapScrollLeft > prevLeft ? 'right' : 'left'\n    }\n    if (props.distance > 0) {\n      if (shouldSkipDirection(direction)) {\n        return\n      }\n      updateTriggerStatus(arrivedStates)\n    }\n    if (arrivedStates[direction]) emit('end-reached', direction)\n  }\n}\n\nfunction scrollTo(xCord: number, yCord?: number): void\nfunction scrollTo(options: ScrollToOptions): void\nfunction scrollTo(arg1: unknown, arg2?: number) {\n  if (isObject(arg1)) {\n    wrapRef.value!.scrollTo(arg1)\n  } else if (isNumber(arg1) && isNumber(arg2)) {\n    wrapRef.value!.scrollTo(arg1, arg2)\n  }\n}\n\nconst setScrollTop = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollTop = value\n}\n\nconst setScrollLeft = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollLeft = value\n}\n\nconst update = () => {\n  barRef.value?.update()\n  maskRef.value?.update()\n  distanceScrollState[direction] = false\n  if (wrapRef.value) barRef.value?.handleScroll(wrapRef.value)\n}\n\n// Transform-driven overflow (e.g. slide transitions) is not observable via\n// resize observers, so refresh the bar when transitions/animations end —\n// this applies even when `noresize` is set.\nconst updateBar = () => {\n  if (rafId) return\n  rafId = requestAnimationFrame(() => {\n    rafId = 0\n    if (!wrapRef.value) return\n\n    // Bar state may be stale even when the final scroll dimensions match a\n    // previously seen value (e.g. `onUpdated` measured the transient\n    // overflow mid-transition), so always refresh the bar here.\n    barRef.value?.update()\n    barRef.value?.handleScroll(wrapRef.value)\n    maskRef.value?.update()\n  })\n}\n\nwatch(\n  () => props.noresize,\n  (noresize) => {\n    if (noresize) {\n      stopResizeObserver?.()\n      stopWrapResizeObserver?.()\n      stopResizeListener?.()\n    } else {\n      ;({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))\n      ;({ stop: stopWrapResizeObserver } = useResizeObserver(wrapRef, update))\n      stopResizeListener = useEventListener('resize', update)\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => [props.maxHeight, props.height],\n  () => {\n    if (!props.native || props.mask)\n      nextTick(() => {\n        update()\n      })\n  }\n)\n\nprovide(\n  scrollbarContextKey,\n  reactive({\n    scrollbarElement: scrollbarRef,\n    wrapElement: wrapRef,\n  })\n)\n\nonActivated(() => {\n  if (wrapRef.value) {\n    wrapRef.value.scrollTop = wrapScrollTop\n    wrapRef.value.scrollLeft = wrapScrollLeft\n    maskRef.value?.update()\n  }\n})\n\nonMounted(() => {\n  if (!props.native || props.mask)\n    nextTick(() => {\n      update()\n    })\n})\nonUpdated(() => update())\n\ndefineExpose({\n  /** @description scrollbar wrap ref */\n  wrapRef,\n  /** @description update scrollbar state manually */\n  update,\n  /** @description scrolls to a particular set of coordinates */\n  scrollTo,\n  /** @description set distance to scroll top */\n  setScrollTop,\n  /** @description set distance to scroll left */\n  setScrollLeft,\n  /** @description handle scroll event */\n  handleScroll,\n})\n</script>\n"],"mappings":"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"}

package/lib/components/scrollbar/src/scrollbar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar2.js","names":[],"sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbarRef\" :class=\"ns.b()\">\n    <div\n      ref=\"wrapRef\"\n      :class=\"wrapKls\"\n      :style=\"wrapStyle\"\n      :tabindex=\"tabindex\"\n      @scroll=\"handleScroll\"\n      @transitionend=\"updateBar\"\n      @animationend=\"updateBar\"\n    >\n      <component\n        :is=\"tag\"\n        :id=\"id\"\n        ref=\"resizeRef\"\n        :class=\"resizeKls\"\n        :style=\"viewStyle\"\n        :role=\"role\"\n        :aria-label=\"ariaLabel\"\n        :aria-orientation=\"ariaOrientation\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar ref=\"barRef\" :always=\"always\" :min-size=\"minSize\" />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onActivated,\n  onMounted,\n  onUpdated,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport {\n  addUnit,\n  debugWarn,\n  isGreaterThan,\n  isNumber,\n  isObject,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport Bar from './bar.vue'\nimport { scrollbarContextKey } from './constants'\nimport { scrollbarEmits } from './scrollbar'\n\nimport type { ScrollbarDirection, ScrollbarProps } from './scrollbar'\nimport type { BarInstance } from './bar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst COMPONENT_NAME = 'ElScrollbar'\n\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<ScrollbarProps>(), {\n  distance: 0,\n  height: '',\n  maxHeight: '',\n  wrapStyle: '',\n  wrapClass: '',\n  viewStyle: '',\n  viewClass: '',\n  tag: 'div',\n  minSize: 20,\n  tabindex: undefined,\n})\nconst emit = defineEmits(scrollbarEmits)\n\nconst ns = useNamespace('scrollbar')\n\nlet stopResizeObserver: (() => void) | undefined = undefined\nlet stopWrapResizeObserver: (() => void) | undefined = undefined\nlet stopResizeListener: (() => void) | undefined = undefined\nlet rafId = 0\nlet wrapScrollTop = 0\nlet wrapScrollLeft = 0\nlet direction = '' as ScrollbarDirection\nconst distanceScrollState = {\n  bottom: false,\n  top: false,\n  right: false,\n  left: false,\n}\n\nconst scrollbarRef = ref<HTMLDivElement>()\nconst wrapRef = ref<HTMLDivElement>()\nconst resizeRef = ref<HTMLElement>()\nconst barRef = ref<BarInstance>()\n\nconst wrapStyle = computed<StyleValue>(() => {\n  const style: CSSProperties = {}\n  const height = addUnit(props.height)\n  const maxHeight = addUnit(props.maxHeight)\n  if (height) style.height = height\n  if (maxHeight) style.maxHeight = maxHeight\n  return [props.wrapStyle, style]\n})\n\nconst wrapKls = computed(() => {\n  return [\n    props.wrapClass,\n    ns.e('wrap'),\n    { [ns.em('wrap', 'hidden-default')]: !props.native },\n  ]\n})\n\nconst resizeKls = computed(() => {\n  return [ns.e('view'), props.viewClass]\n})\n\nconst shouldSkipDirection = (direction: ScrollbarDirection) => {\n  return distanceScrollState[direction] ?? false\n}\n\nconst DIRECTION_PAIRS: Record<ScrollbarDirection, ScrollbarDirection> = {\n  top: 'bottom',\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n}\nconst updateTriggerStatus = (arrivedStates: Record<string, boolean>) => {\n  const oppositeDirection = DIRECTION_PAIRS[direction]\n  if (!oppositeDirection) return\n\n  const arrived = arrivedStates[direction]\n  const oppositeArrived = arrivedStates[oppositeDirection]\n\n  if (arrived && !distanceScrollState[direction]) {\n    distanceScrollState[direction] = true\n  }\n\n  if (!oppositeArrived && distanceScrollState[oppositeDirection]) {\n    distanceScrollState[oppositeDirection] = false\n  }\n}\n\nconst handleScroll = () => {\n  if (wrapRef.value) {\n    barRef.value?.handleScroll(wrapRef.value)\n    const prevTop = wrapScrollTop\n    const prevLeft = wrapScrollLeft\n    wrapScrollTop = wrapRef.value.scrollTop\n    wrapScrollLeft = wrapRef.value.scrollLeft\n\n    const arrivedStates = {\n      bottom: !isGreaterThan(\n        wrapRef.value.scrollHeight - props.distance,\n        wrapRef.value.clientHeight + wrapScrollTop\n      ),\n      top: wrapScrollTop <= props.distance && prevTop !== 0,\n      right:\n        !isGreaterThan(\n          wrapRef.value.scrollWidth - props.distance,\n          wrapRef.value.clientWidth + wrapScrollLeft\n        ) && prevLeft !== wrapScrollLeft,\n      left: wrapScrollLeft <= props.distance && prevLeft !== 0,\n    }\n\n    emit('scroll', {\n      scrollTop: wrapScrollTop,\n      scrollLeft: wrapScrollLeft,\n    })\n\n    if (prevTop !== wrapScrollTop) {\n      direction = wrapScrollTop > prevTop ? 'bottom' : 'top'\n    }\n    if (prevLeft !== wrapScrollLeft) {\n      direction = wrapScrollLeft > prevLeft ? 'right' : 'left'\n    }\n    if (props.distance > 0) {\n      if (shouldSkipDirection(direction)) {\n        return\n      }\n      updateTriggerStatus(arrivedStates)\n    }\n    if (arrivedStates[direction]) emit('end-reached', direction)\n  }\n}\n\nfunction scrollTo(xCord: number, yCord?: number): void\nfunction scrollTo(options: ScrollToOptions): void\nfunction scrollTo(arg1: unknown, arg2?: number) {\n  if (isObject(arg1)) {\n    wrapRef.value!.scrollTo(arg1)\n  } else if (isNumber(arg1) && isNumber(arg2)) {\n    wrapRef.value!.scrollTo(arg1, arg2)\n  }\n}\n\nconst setScrollTop = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollTop = value\n}\n\nconst setScrollLeft = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollLeft = value\n}\n\nconst update = () => {\n  barRef.value?.update()\n  distanceScrollState[direction] = false\n  if (wrapRef.value) barRef.value?.handleScroll(wrapRef.value)\n}\n\n// Transform-driven overflow (e.g. slide transitions) is not observable via\n// resize observers, so refresh the bar when transitions/animations end —\n// this applies even when `noresize` is set.\nconst updateBar = () => {\n  if (rafId) return\n  rafId = requestAnimationFrame(() => {\n    rafId = 0\n    if (!wrapRef.value) return\n\n    // Bar state may be stale even when the final scroll dimensions match a\n    // previously seen value (e.g. `onUpdated` measured the transient\n    // overflow mid-transition), so always refresh the bar here.\n    barRef.value?.update()\n    barRef.value?.handleScroll(wrapRef.value)\n  })\n}\n\nwatch(\n  () => props.noresize,\n  (noresize) => {\n    if (noresize) {\n      stopResizeObserver?.()\n      stopWrapResizeObserver?.()\n      stopResizeListener?.()\n    } else {\n      ;({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))\n      ;({ stop: stopWrapResizeObserver } = useResizeObserver(wrapRef, update))\n      stopResizeListener = useEventListener('resize', update)\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => [props.maxHeight, props.height],\n  () => {\n    if (!props.native)\n      nextTick(() => {\n        update()\n      })\n  }\n)\n\nprovide(\n  scrollbarContextKey,\n  reactive({\n    scrollbarElement: scrollbarRef,\n    wrapElement: wrapRef,\n  })\n)\n\nonActivated(() => {\n  if (wrapRef.value) {\n    wrapRef.value.scrollTop = wrapScrollTop\n    wrapRef.value.scrollLeft = wrapScrollLeft\n  }\n})\n\nonMounted(() => {\n  if (!props.native)\n    nextTick(() => {\n      update()\n    })\n})\nonUpdated(() => update())\n\ndefineExpose({\n  /** @description scrollbar wrap ref */\n  wrapRef,\n  /** @description update scrollbar state manually */\n  update,\n  /** @description scrolls to a particular set of coordinates */\n  scrollTo,\n  /** @description set distance to scroll top */\n  setScrollTop,\n  /** @description set distance to scroll left */\n  setScrollLeft,\n  /** @description handle scroll event */\n  handleScroll,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"scrollbar2.js","names":[],"sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbarRef\" :class=\"ns.b()\">\n    <div\n      ref=\"wrapRef\"\n      :class=\"wrapKls\"\n      :style=\"wrapStyle\"\n      :tabindex=\"tabindex\"\n      @scroll=\"handleScroll\"\n      @transitionend=\"updateBar\"\n      @animationend=\"updateBar\"\n    >\n      <component\n        :is=\"tag\"\n        :id=\"id\"\n        ref=\"resizeRef\"\n        :class=\"resizeKls\"\n        :style=\"viewStyle\"\n        :role=\"role\"\n        :aria-label=\"ariaLabel\"\n        :aria-orientation=\"ariaOrientation\"\n      >\n        <slot />\n      </component>\n    </div>\n    <transition :name=\"ns.b('mask-fade')\">\n      <scrollbar-mask v-if=\"mask\" ref=\"maskRef\" :mask=\"mask\" />\n    </transition>\n    <template v-if=\"!native\">\n      <bar ref=\"barRef\" :always=\"always\" :min-size=\"minSize\" />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onActivated,\n  onMounted,\n  onUpdated,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport {\n  addUnit,\n  debugWarn,\n  isGreaterThan,\n  isNumber,\n  isObject,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport Bar from './bar.vue'\nimport ScrollbarMask from './mask.vue'\nimport { scrollbarContextKey } from './constants'\nimport { scrollbarEmits } from './scrollbar'\n\nimport type { ScrollbarDirection, ScrollbarProps } from './scrollbar'\nimport type { BarInstance } from './bar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst COMPONENT_NAME = 'ElScrollbar'\n\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<ScrollbarProps>(), {\n  distance: 0,\n  height: '',\n  maxHeight: '',\n  wrapStyle: '',\n  wrapClass: '',\n  viewStyle: '',\n  viewClass: '',\n  tag: 'div',\n  mask: false,\n  minSize: 20,\n  tabindex: undefined,\n})\nconst emit = defineEmits(scrollbarEmits)\n\nconst ns = useNamespace('scrollbar')\n\nlet stopResizeObserver: (() => void) | undefined = undefined\nlet stopWrapResizeObserver: (() => void) | undefined = undefined\nlet stopResizeListener: (() => void) | undefined = undefined\nlet rafId = 0\nlet wrapScrollTop = 0\nlet wrapScrollLeft = 0\nlet direction = '' as ScrollbarDirection\nconst distanceScrollState = {\n  bottom: false,\n  top: false,\n  right: false,\n  left: false,\n}\n\nconst scrollbarRef = ref<HTMLDivElement>()\nconst wrapRef = ref<HTMLDivElement>()\nconst resizeRef = ref<HTMLElement>()\nconst barRef = ref<BarInstance>()\nconst maskRef = ref<InstanceType<typeof ScrollbarMask>>()\n\nconst wrapStyle = computed<StyleValue>(() => {\n  const style: CSSProperties = {}\n  const height = addUnit(props.height)\n  const maxHeight = addUnit(props.maxHeight)\n  if (height) style.height = height\n  if (maxHeight) style.maxHeight = maxHeight\n  return [props.wrapStyle, style]\n})\n\nconst wrapKls = computed(() => {\n  return [\n    props.wrapClass,\n    ns.e('wrap'),\n    { [ns.em('wrap', 'hidden-default')]: !props.native },\n  ]\n})\n\nconst resizeKls = computed(() => {\n  return [ns.e('view'), props.viewClass]\n})\n\nconst shouldSkipDirection = (direction: ScrollbarDirection) => {\n  return distanceScrollState[direction] ?? false\n}\n\nconst DIRECTION_PAIRS: Record<ScrollbarDirection, ScrollbarDirection> = {\n  top: 'bottom',\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n}\nconst updateTriggerStatus = (arrivedStates: Record<string, boolean>) => {\n  const oppositeDirection = DIRECTION_PAIRS[direction]\n  if (!oppositeDirection) return\n\n  const arrived = arrivedStates[direction]\n  const oppositeArrived = arrivedStates[oppositeDirection]\n\n  if (arrived && !distanceScrollState[direction]) {\n    distanceScrollState[direction] = true\n  }\n\n  if (!oppositeArrived && distanceScrollState[oppositeDirection]) {\n    distanceScrollState[oppositeDirection] = false\n  }\n}\n\nconst handleScroll = () => {\n  if (wrapRef.value) {\n    barRef.value?.handleScroll(wrapRef.value)\n    maskRef.value?.handleScroll()\n    const prevTop = wrapScrollTop\n    const prevLeft = wrapScrollLeft\n    wrapScrollTop = wrapRef.value.scrollTop\n    wrapScrollLeft = wrapRef.value.scrollLeft\n\n    const arrivedStates = {\n      bottom: !isGreaterThan(\n        wrapRef.value.scrollHeight - props.distance,\n        wrapRef.value.clientHeight + wrapScrollTop\n      ),\n      top: wrapScrollTop <= props.distance && prevTop !== 0,\n      right:\n        !isGreaterThan(\n          wrapRef.value.scrollWidth - props.distance,\n          wrapRef.value.clientWidth + wrapScrollLeft\n        ) && prevLeft !== wrapScrollLeft,\n      left: wrapScrollLeft <= props.distance && prevLeft !== 0,\n    }\n\n    emit('scroll', {\n      scrollTop: wrapScrollTop,\n      scrollLeft: wrapScrollLeft,\n    })\n\n    if (prevTop !== wrapScrollTop) {\n      direction = wrapScrollTop > prevTop ? 'bottom' : 'top'\n    }\n    if (prevLeft !== wrapScrollLeft) {\n      direction = wrapScrollLeft > prevLeft ? 'right' : 'left'\n    }\n    if (props.distance > 0) {\n      if (shouldSkipDirection(direction)) {\n        return\n      }\n      updateTriggerStatus(arrivedStates)\n    }\n    if (arrivedStates[direction]) emit('end-reached', direction)\n  }\n}\n\nfunction scrollTo(xCord: number, yCord?: number): void\nfunction scrollTo(options: ScrollToOptions): void\nfunction scrollTo(arg1: unknown, arg2?: number) {\n  if (isObject(arg1)) {\n    wrapRef.value!.scrollTo(arg1)\n  } else if (isNumber(arg1) && isNumber(arg2)) {\n    wrapRef.value!.scrollTo(arg1, arg2)\n  }\n}\n\nconst setScrollTop = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollTop = value\n}\n\nconst setScrollLeft = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollLeft = value\n}\n\nconst update = () => {\n  barRef.value?.update()\n  maskRef.value?.update()\n  distanceScrollState[direction] = false\n  if (wrapRef.value) barRef.value?.handleScroll(wrapRef.value)\n}\n\n// Transform-driven overflow (e.g. slide transitions) is not observable via\n// resize observers, so refresh the bar when transitions/animations end —\n// this applies even when `noresize` is set.\nconst updateBar = () => {\n  if (rafId) return\n  rafId = requestAnimationFrame(() => {\n    rafId = 0\n    if (!wrapRef.value) return\n\n    // Bar state may be stale even when the final scroll dimensions match a\n    // previously seen value (e.g. `onUpdated` measured the transient\n    // overflow mid-transition), so always refresh the bar here.\n    barRef.value?.update()\n    barRef.value?.handleScroll(wrapRef.value)\n    maskRef.value?.update()\n  })\n}\n\nwatch(\n  () => props.noresize,\n  (noresize) => {\n    if (noresize) {\n      stopResizeObserver?.()\n      stopWrapResizeObserver?.()\n      stopResizeListener?.()\n    } else {\n      ;({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))\n      ;({ stop: stopWrapResizeObserver } = useResizeObserver(wrapRef, update))\n      stopResizeListener = useEventListener('resize', update)\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => [props.maxHeight, props.height],\n  () => {\n    if (!props.native || props.mask)\n      nextTick(() => {\n        update()\n      })\n  }\n)\n\nprovide(\n  scrollbarContextKey,\n  reactive({\n    scrollbarElement: scrollbarRef,\n    wrapElement: wrapRef,\n  })\n)\n\nonActivated(() => {\n  if (wrapRef.value) {\n    wrapRef.value.scrollTop = wrapScrollTop\n    wrapRef.value.scrollLeft = wrapScrollLeft\n    maskRef.value?.update()\n  }\n})\n\nonMounted(() => {\n  if (!props.native || props.mask)\n    nextTick(() => {\n      update()\n    })\n})\nonUpdated(() => update())\n\ndefineExpose({\n  /** @description scrollbar wrap ref */\n  wrapRef,\n  /** @description update scrollbar state manually */\n  update,\n  /** @description scrolls to a particular set of coordinates */\n  scrollTo,\n  /** @description set distance to scroll top */\n  setScrollTop,\n  /** @description set distance to scroll left */\n  setScrollLeft,\n  /** @description handle scroll event */\n  handleScroll,\n})\n</script>\n"],"mappings":""}

package/lib/components/segmented/index.d.ts

@@ -11,7 +11,7 @@ declare const ElSegmented: (<T extends Option = Option>(__VLS_props: NonNullable
     }) => any;
   };
   attrs: any;
-  emit: ((event: "update:modelValue", val: any) => void) & ((event: "change", val: any) => void);
+  emit: ((event: "change", val: any) => void) & ((event: "update:modelValue", val: any) => void);
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: _$vue.PublicProps & {
     direction?: "vertical" | "horizontal" | undefined;
@@ -25,8 +25,8 @@ declare const ElSegmented: (<T extends Option = Option>(__VLS_props: NonNullable
     id?: string | undefined;
     name?: string | undefined;
     ariaLabel?: string | undefined;
-    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
     onChange?: ((val: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
   } & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
   } ? P : {});
@@ -37,7 +37,7 @@ declare const ElSegmented: (<T extends Option = Option>(__VLS_props: NonNullable
       item: T;
     }) => any;
   };
-  emit: ((event: "update:modelValue", val: any) => void) & ((event: "change", val: any) => void);
+  emit: ((event: "change", val: any) => void) & ((event: "update:modelValue", val: any) => void);
 }>) => _$vue.VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 }) & _$vue.ObjectPlugin & {

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

@@ -5,8 +5,8 @@ import * as _$vue from "vue";
 //#region ../../packages/components/segmented/src/segmented.vue.d.ts
 declare const __VLS_export: <T extends Option = Option>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: _$vue.PublicProps & __VLS_PrettifyLocal<SegmentedProps<T> & {
-    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
     onChange?: ((val: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
   } ? P : {});
@@ -17,7 +17,7 @@ declare const __VLS_export: <T extends Option = Option>(__VLS_props: NonNullable
       item: T;
     }) => any;
   };
-  emit: ((event: "update:modelValue", val: any) => void) & ((event: "change", val: any) => void);
+  emit: ((event: "change", val: any) => void) & ((event: "update:modelValue", val: any) => void);
 }>) => _$vue.VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };