@element-plus/nightly 0.0.20261009 → 0.0.20261011

package/es/components/scrollbar/src/scrollbar.vue_vue_type_script_setup_true_lang.mjs

@@ -6,8 +6,9 @@ import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
 import { scrollbarEmits, scrollbarProps } from "./scrollbar.mjs";
 import { scrollbarContextKey } from "./constants.mjs";
 import bar_default from "./bar2.mjs";
+import mask_default from "./mask.mjs";
 import { useEventListener, useResizeObserver } from "@vueuse/core";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onActivated, onMounted, onUpdated, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, unref, watch, withCtx } from "vue";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onActivated, onMounted, onUpdated, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, unref, watch, withCtx } from "vue";
 //#region ../../packages/components/scrollbar/src/scrollbar.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = ["tabindex"];
 const COMPONENT_NAME = "ElScrollbar";
@@ -37,6 +38,7 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const wrapRef = ref();
 		const resizeRef = ref();
 		const barRef = ref();
+		const maskRef = ref();
 		const wrapStyle = computed(() => {
 			const style = {};
 			const height = addUnit(props.height);
@@ -75,6 +77,7 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const handleScroll = () => {
 			if (wrapRef.value) {
 				barRef.value?.handleScroll(wrapRef.value);
+				maskRef.value?.handleScroll();
 				const prevTop = wrapScrollTop;
 				const prevLeft = wrapScrollLeft;
 				wrapScrollTop = wrapRef.value.scrollTop;
@@ -118,6 +121,7 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		};
 		const update = () => {
 			barRef.value?.update();
+			maskRef.value?.update();
 			distanceScrollState[direction] = false;
 			if (wrapRef.value) barRef.value?.handleScroll(wrapRef.value);
 		};
@@ -128,6 +132,7 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				if (!wrapRef.value) return;
 				barRef.value?.update();
 				barRef.value?.handleScroll(wrapRef.value);
+				maskRef.value?.update();
 			});
 		};
 		watch(() => props.noresize, (noresize) => {
@@ -142,7 +147,7 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}
 		}, { immediate: true });
 		watch(() => [props.maxHeight, props.height], () => {
-			if (!props.native) nextTick(() => {
+			if (!props.native || props.mask) nextTick(() => {
 				update();
 			});
 		});
@@ -154,10 +159,11 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			if (wrapRef.value) {
 				wrapRef.value.scrollTop = wrapScrollTop;
 				wrapRef.value.scrollLeft = wrapScrollLeft;
+				maskRef.value?.update();
 			}
 		});
 		onMounted(() => {
-			if (!props.native) nextTick(() => {
+			if (!props.native || props.mask) nextTick(() => {
 				update();
 			});
 		});
@@ -181,41 +187,53 @@ var scrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				ref_key: "scrollbarRef",
 				ref: scrollbarRef,
 				class: normalizeClass(unref(ns).b())
-			}, [createElementVNode("div", {
-				ref_key: "wrapRef",
-				ref: wrapRef,
-				class: normalizeClass(wrapKls.value),
-				style: normalizeStyle(wrapStyle.value),
-				tabindex: __props.tabindex,
-				onScroll: handleScroll,
-				onTransitionend: updateBar,
-				onAnimationend: updateBar
-			}, [(openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-				id: __props.id,
-				ref_key: "resizeRef",
-				ref: resizeRef,
-				class: normalizeClass(resizeKls.value),
-				style: normalizeStyle(__props.viewStyle),
-				role: __props.role,
-				"aria-label": __props.ariaLabel,
-				"aria-orientation": __props.ariaOrientation
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, [
-				"id",
-				"class",
-				"style",
-				"role",
-				"aria-label",
-				"aria-orientation"
-			]))], 46, _hoisted_1), !__props.native ? (openBlock(), createBlock(bar_default, {
-				key: 0,
-				ref_key: "barRef",
-				ref: barRef,
-				always: __props.always,
-				"min-size": __props.minSize
-			}, null, 8, ["always", "min-size"])) : createCommentVNode("v-if", true)], 2);
+			}, [
+				createElementVNode("div", {
+					ref_key: "wrapRef",
+					ref: wrapRef,
+					class: normalizeClass(wrapKls.value),
+					style: normalizeStyle(wrapStyle.value),
+					tabindex: __props.tabindex,
+					onScroll: handleScroll,
+					onTransitionend: updateBar,
+					onAnimationend: updateBar
+				}, [(openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+					id: __props.id,
+					ref_key: "resizeRef",
+					ref: resizeRef,
+					class: normalizeClass(resizeKls.value),
+					style: normalizeStyle(__props.viewStyle),
+					role: __props.role,
+					"aria-label": __props.ariaLabel,
+					"aria-orientation": __props.ariaOrientation
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 8, [
+					"id",
+					"class",
+					"style",
+					"role",
+					"aria-label",
+					"aria-orientation"
+				]))], 46, _hoisted_1),
+				createVNode(Transition, { name: unref(ns).b("mask-fade") }, {
+					default: withCtx(() => [__props.mask ? (openBlock(), createBlock(mask_default, {
+						key: 0,
+						ref_key: "maskRef",
+						ref: maskRef,
+						mask: __props.mask
+					}, null, 8, ["mask"])) : createCommentVNode("v-if", true)]),
+					_: 1
+				}, 8, ["name"]),
+				!__props.native ? (openBlock(), createBlock(bar_default, {
+					key: 0,
+					ref_key: "barRef",
+					ref: barRef,
+					always: __props.always,
+					"min-size": __props.minSize
+				}, null, 8, ["always", "min-size"])) : createCommentVNode("v-if", true)
+			], 2);
 		};
 	}
 });

package/es/components/scrollbar/src/scrollbar.vue_vue_type_script_setup_true_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.vue_vue_type_script_setup_true_lang.mjs","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.mjs","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/es/components/scrollbar/src/scrollbar2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar2.mjs","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.mjs","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/es/components/segmented/index.d.ts

@@ -5,13 +5,13 @@ import * as _$vue from "vue";
 
 //#region ../../packages/components/segmented/index.d.ts
 declare const ElSegmented: (<T extends Option = Option>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
-  attrs: any;
   slots: {
     default?: (props: {
       item: T;
     }) => any;
   };
-  emit: ((event: "update:modelValue", val: any) => void) & ((event: "change", val: any) => void);
+  attrs: any;
+  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 & {
@@ -47,7 +47,7 @@ declare const ElSegmented: (<T extends Option = Option>(__VLS_props: NonNullable
     modelValue?: string | number | boolean | (() => string | number | boolean) | undefined;
     props?: (() => Props) | undefined;
     block?: boolean | (() => boolean) | undefined;
-    size?: "" | "small" | "default" | "large" | (() => "" | "small" | "default" | "large") | undefined;
+    size?: "" | "default" | "small" | "large" | (() => "" | "default" | "small" | "large") | undefined;
     disabled?: boolean | (() => boolean) | undefined;
     validateEvent?: boolean | (() => boolean) | undefined;
     id?: string | (() => string) | undefined;

package/es/components/segmented/src/segmented.d.ts

@@ -67,7 +67,7 @@ declare const segmentedProps: {
   props: EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | (((new (...args: any[]) => Props) | (() => Props)) | null)[], unknown, unknown, () => Required<Props>, boolean>;
   block: BooleanConstructor;
   size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/es/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>>;
 };

package/es/components/select/src/select.d.ts

@@ -38,7 +38,7 @@ declare const selectProps: {
   autocomplete: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
   automaticDropdown: BooleanConstructor;
   size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -91,7 +91,7 @@ declare const selectProps: {
   suffixIcon: EpPropFinalized<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown, _$vue.DefineComponent<{}, void, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>, boolean>;
   tagType: {
     default: string;
-    type: _$vue.PropType<EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>>;
+    type: _$vue.PropType<EpPropMergeType<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown>>;
     required: false;
     validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -107,7 +107,7 @@ declare const selectProps: {
   remoteShowSuffix: BooleanConstructor;
   showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
   offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
-  placement: EpPropFinalized<(new (...args: any[]) => "left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
+  placement: EpPropFinalized<(new (...args: any[]) => "left" | "right" | "top" | "auto" | "bottom" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "left" | "right" | "top" | "auto" | "bottom" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
   fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, string[], boolean>;
   tabindex: EpPropFinalized<(StringConstructor | NumberConstructor)[], unknown, unknown, number, boolean>;
   appendTo: {