element-plus-mobile 0.1.1 → 0.1.2

package/es/components/menu/src/menu.mjs

@@ -4,9 +4,9 @@ import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs
 import { iconPropType } from "../../../utils/vue/icon.mjs";
 import { flattedChildren } from "../../../utils/vue/vnode.mjs";
 import { mutable } from "../../../utils/typescript.mjs";
-import ClickOutside from "../../../directives/click-outside/index.mjs";
 import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
 import { ElIcon } from "../../icon/index.mjs";
+import ClickOutside from "../../../directives/click-outside/index.mjs";
 import Menu from "./utils/menu-bar.mjs";
 import menu_collapse_transition_default from "./menu-collapse-transition.mjs";
 import { useMenuCssVar } from "./use-menu-css-var.mjs";

package/es/components/message-box/src/index.vue_vue_type_script_lang.mjs

@@ -2,7 +2,6 @@ import { isFunction, isString } from "../../../utils/types.mjs";
 import { Loading } from "../../../utils/vue/builtin-icons.mjs";
 import { TypeComponents, TypeComponentsMap } from "../../../utils/vue/icon.mjs";
 import { isValidComponentSize } from "../../../utils/vue/validator.mjs";
-import TrapFocus from "../../../directives/trap-focus/index.mjs";
 import { useDraggable } from "../../../hooks/use-draggable/index.mjs";
 import { useLockscreen } from "../../../hooks/use-lockscreen/index.mjs";
 import { useSameTarget } from "../../../hooks/use-same-target/index.mjs";
@@ -13,6 +12,7 @@ import focus_trap_default from "../../focus-trap/index.mjs";
 import { ElInput } from "../../input/index.mjs";
 import { useGlobalComponentSettings } from "../../config-provider/src/hooks/use-global-config.mjs";
 import { ElButton } from "../../button/index.mjs";
+import TrapFocus from "../../../directives/trap-focus/index.mjs";
 import { ElOverlay } from "../../overlay/index.mjs";
 import { computed, defineComponent, markRaw, nextTick, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from "vue";
 

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

@@ -22,8 +22,8 @@ var thumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const thumb = ref();
 		const thumbState = ref({});
 		const visible = ref(false);
-		let cursorDown = false;
-		let cursorLeave = false;
+		let activePointerId = null;
+		let dragging = false;
 		let baseScrollHeight = 0;
 		let baseScrollWidth = 0;
 		let originalOnSelectStart = isClient$1 ? document.onselectstart : null;
@@ -34,14 +34,6 @@ var thumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			move: props.move,
 			bar: bar.value
 		}));
-		const getClientOffset = (event) => {
-			if ("touches" in event) {
-				const touch = event.touches[0] ?? event.changedTouches[0];
-				if (!touch) return void 0;
-				return touch[bar.value.client];
-			}
-			return event[bar.value.client];
-		};
 		const clearHideTimer = () => {
 			if (!hideTimer) return;
 			clearTimeout(hideTimer);
@@ -49,12 +41,11 @@ var thumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		};
 		const showScrollbar = () => {
 			clearHideTimer();
-			cursorLeave = false;
 			visible.value = !!props.size;
 		};
 		const queueHideScrollbar = () => {
 			clearHideTimer();
-			if (props.always || cursorDown) return;
+			if (props.always || dragging) return;
 			hideTimer = setTimeout(() => {
 				visible.value = false;
 			}, HIDE_DELAY);
@@ -62,95 +53,61 @@ var thumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const offsetRatio = computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
 		const clickThumbHandler = (e) => {
 			e.stopPropagation();
-			if (e.ctrlKey || [1, 2].includes(e.button)) return;
+			if (e.pointerType === "mouse" && (e.ctrlKey || [1, 2].includes(e.button))) return;
 			window.getSelection()?.removeAllRanges();
 			startDrag(e);
 			const el = e.currentTarget;
 			if (!el) return;
 			thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
 		};
-		const clickThumbTouchHandler = (e) => {
-			const clientOffset = getClientOffset(e);
-			const el = e.currentTarget;
-			if (!el || clientOffset === void 0) return;
-			startDrag(e);
-			thumbState.value[bar.value.axis] = el[bar.value.offset] - (clientOffset - el.getBoundingClientRect()[bar.value.direction]);
-		};
 		const clickTrackHandler = (e) => {
 			if (!thumb.value || !instance.value || !scrollbar.wrapElement) return;
 			const thumbPositionPercentage = (Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) - thumb.value[bar.value.offset] / 2) * 100 * offsetRatio.value / instance.value[bar.value.offset];
 			scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
-		};
-		const clickTrackTouchHandler = (e) => {
-			if (!thumb.value || !instance.value || !scrollbar.wrapElement) return;
-			const clientOffset = getClientOffset(e);
-			if (clientOffset === void 0) return;
-			const thumbPositionPercentage = (Math.abs(e.currentTarget.getBoundingClientRect()[bar.value.direction] - clientOffset) - thumb.value[bar.value.offset] / 2) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-			scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
 			showScrollbar();
 			queueHideScrollbar();
 		};
 		const startDrag = (e) => {
 			e.stopImmediatePropagation();
-			if ("touches" in e) e.preventDefault();
-			cursorDown = true;
+			e.preventDefault();
+			activePointerId = e.pointerId;
+			dragging = true;
 			showScrollbar();
 			baseScrollHeight = scrollbar.wrapElement.scrollHeight;
 			baseScrollWidth = scrollbar.wrapElement.scrollWidth;
-			document.addEventListener("mousemove", mouseMoveDocumentHandler);
-			document.addEventListener("mouseup", mouseUpDocumentHandler);
-			document.addEventListener("touchmove", touchMoveDocumentHandler, { passive: false });
-			document.addEventListener("touchend", touchEndDocumentHandler);
-			document.addEventListener("touchcancel", touchEndDocumentHandler);
+			document.addEventListener("pointermove", pointerMoveDocumentHandler);
+			document.addEventListener("pointerup", pointerUpDocumentHandler);
+			document.addEventListener("pointercancel", pointerUpDocumentHandler);
 			originalOnSelectStart = document.onselectstart;
 			document.onselectstart = () => false;
 		};
 		const updateScrollPosition = (clientOffset) => {
 			if (!instance.value || !thumb.value) return;
-			if (cursorDown === false) return;
+			if (dragging === false) return;
 			const prevPage = thumbState.value[bar.value.axis];
 			if (!prevPage) return;
 			const thumbPositionPercentage = ((instance.value.getBoundingClientRect()[bar.value.direction] - clientOffset) * -1 - (thumb.value[bar.value.offset] - prevPage)) * 100 * offsetRatio.value / instance.value[bar.value.offset];
 			if (bar.value.scroll === "scrollLeft") scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollWidth / 100;
 			else scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
 		};
-		const mouseMoveDocumentHandler = (e) => {
+		const pointerMoveDocumentHandler = (e) => {
+			if (activePointerId !== null && e.pointerId !== activePointerId) return;
 			updateScrollPosition(e[bar.value.client]);
 		};
-		const touchMoveDocumentHandler = (e) => {
-			const clientOffset = getClientOffset(e);
-			if (clientOffset === void 0) return;
-			e.preventDefault();
-			updateScrollPosition(clientOffset);
-		};
 		const endDrag = () => {
-			cursorDown = false;
+			dragging = false;
+			activePointerId = null;
 			thumbState.value[bar.value.axis] = 0;
-			document.removeEventListener("mousemove", mouseMoveDocumentHandler);
-			document.removeEventListener("mouseup", mouseUpDocumentHandler);
-			document.removeEventListener("touchmove", touchMoveDocumentHandler);
-			document.removeEventListener("touchend", touchEndDocumentHandler);
-			document.removeEventListener("touchcancel", touchEndDocumentHandler);
+			document.removeEventListener("pointermove", pointerMoveDocumentHandler);
+			document.removeEventListener("pointerup", pointerUpDocumentHandler);
+			document.removeEventListener("pointercancel", pointerUpDocumentHandler);
 			restoreOnselectstart();
-			if (cursorLeave) queueHideScrollbar();
-		};
-		const mouseUpDocumentHandler = () => {
-			endDrag();
+			queueHideScrollbar();
 		};
-		const touchEndDocumentHandler = () => {
+		const pointerUpDocumentHandler = (e) => {
+			if (activePointerId !== null && e.pointerId !== activePointerId) return;
 			endDrag();
 		};
-		const mouseMoveScrollbarHandler = () => {
-			showScrollbar();
-		};
-		const mouseLeaveScrollbarHandler = () => {
-			cursorLeave = true;
-			if (cursorDown) {
-				visible.value = true;
-				return;
-			}
-			queueHideScrollbar();
-		};
 		const scrollHandler = () => {
 			showScrollbar();
 			queueHideScrollbar();
@@ -158,20 +115,14 @@ var thumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		onBeforeUnmount(() => {
 			clearHideTimer();
 			restoreOnselectstart();
-			document.removeEventListener("mouseup", mouseUpDocumentHandler);
-			document.removeEventListener("mousemove", mouseMoveDocumentHandler);
-			document.removeEventListener("touchmove", touchMoveDocumentHandler);
-			document.removeEventListener("touchend", touchEndDocumentHandler);
-			document.removeEventListener("touchcancel", touchEndDocumentHandler);
+			document.removeEventListener("pointermove", pointerMoveDocumentHandler);
+			document.removeEventListener("pointerup", pointerUpDocumentHandler);
+			document.removeEventListener("pointercancel", pointerUpDocumentHandler);
 		});
 		const restoreOnselectstart = () => {
 			if (document.onselectstart !== originalOnSelectStart) document.onselectstart = originalOnSelectStart;
 		};
-		useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
-		useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
 		useEventListener(toRef(scrollbar, "wrapElement"), "scroll", scrollHandler);
-		useEventListener(toRef(scrollbar, "scrollbarElement"), "touchstart", showScrollbar);
-		useEventListener(toRef(scrollbar, "scrollbarElement"), "touchend", queueHideScrollbar);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(Transition, {
 				name: unref(ns).b("fade"),
@@ -181,16 +132,14 @@ var thumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					ref_key: "instance",
 					ref: instance,
 					class: normalizeClass([unref(ns).e("bar"), unref(ns).is(bar.value.key)]),
-					onMousedown: clickTrackHandler,
-					onTouchstart: withModifiers(clickTrackTouchHandler, ["prevent"]),
+					onPointerdown: clickTrackHandler,
 					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
 				}, [createElementVNode("div", {
 					ref_key: "thumb",
 					ref: thumb,
 					class: normalizeClass(unref(ns).e("thumb")),
 					style: normalizeStyle(thumbStyle.value),
-					onMousedown: clickThumbHandler,
-					onTouchstart: withModifiers(clickThumbTouchHandler, ["stop", "prevent"])
+					onPointerdown: withModifiers(clickThumbHandler, ["stop"])
 				}, null, 38)], 34), [[vShow, __props.always || visible.value]])]),
 				_: 1
 			}, 8, ["name"]);

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

@@ -1 +1 @@
-{"version":3,"file":"thumb.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n      @mousedown=\"clickTrackHandler\"\n      @touchstart.prevent=\"clickTrackTouchHandler\"\n      @click.stop\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n        @touchstart.stop.prevent=\"clickThumbTouchHandler\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isClient, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { scrollbarContextKey } from './constants'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport type { ThumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nconst props = defineProps<ThumbProps>()\n\nconst scrollbar = inject(scrollbarContextKey)\nconst ns = useNamespace('scrollbar')\n\nif (!scrollbar) throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\nconst instance = ref<HTMLDivElement>()\nconst thumb = ref<HTMLDivElement>()\n\nconst thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})\nconst visible = ref(false)\nconst HIDE_DELAY = 600\n\nlet cursorDown = false\nlet cursorLeave = false\nlet baseScrollHeight = 0\nlet baseScrollWidth = 0\nlet originalOnSelectStart:\n  | ((this: GlobalEventHandlers, ev: Event) => any)\n  | null = isClient ? document.onselectstart : null\nlet hideTimer: ReturnType<typeof setTimeout> | undefined\n\nconst bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])\n\nconst thumbStyle = computed(() =>\n  renderThumbStyle({\n    size: props.size,\n    move: props.move,\n    bar: bar.value,\n  })\n)\n\nconst getClientOffset = (event: MouseEvent | TouchEvent) => {\n  if ('touches' in event) {\n    const touch = event.touches[0] ?? event.changedTouches[0]\n    if (!touch) return undefined\n    return touch[bar.value.client]\n  }\n\n  return event[bar.value.client]\n}\n\nconst clearHideTimer = () => {\n  if (!hideTimer) return\n  clearTimeout(hideTimer)\n  hideTimer = undefined\n}\n\nconst showScrollbar = () => {\n  clearHideTimer()\n  cursorLeave = false\n  visible.value = !!props.size\n}\n\nconst queueHideScrollbar = () => {\n  clearHideTimer()\n  if (props.always || cursorDown) return\n\n  hideTimer = setTimeout(() => {\n    visible.value = false\n  }, HIDE_DELAY)\n}\n\nconst offsetRatio = computed(\n  () =>\n    // offsetRatioX = original width of thumb / current width of thumb / ratioX\n    // offsetRatioY = original height of thumb / current height of thumb / ratioY\n    // instance height = wrap height - GAP\n    instance.value![bar.value.offset] ** 2 /\n    scrollbar.wrapElement![bar.value.scrollSize] /\n    props.ratio /\n    thumb.value![bar.value.offset]\n)\n\nconst clickThumbHandler = (e: MouseEvent) => {\n  // prevent click event of middle and right button\n  e.stopPropagation()\n  if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n  window.getSelection()?.removeAllRanges()\n  startDrag(e)\n\n  const el = e.currentTarget as HTMLDivElement\n  if (!el) return\n  thumbState.value[bar.value.axis] =\n    el[bar.value.offset] -\n    (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst clickThumbTouchHandler = (e: TouchEvent) => {\n  const clientOffset = getClientOffset(e)\n  const el = e.currentTarget as HTMLDivElement\n  if (!el || clientOffset === undefined) return\n\n  startDrag(e)\n  thumbState.value[bar.value.axis] =\n    el[bar.value.offset] -\n    (clientOffset - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst clickTrackHandler = (e: MouseEvent) => {\n  if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n  const offset = Math.abs(\n    (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n      e[bar.value.client]\n  )\n  const thumbHalf = thumb.value[bar.value.offset] / 2\n  const thumbPositionPercentage =\n    ((offset - thumbHalf) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n}\n\nconst clickTrackTouchHandler = (e: TouchEvent) => {\n  if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n  const clientOffset = getClientOffset(e)\n  if (clientOffset === undefined) return\n\n  const offset = Math.abs(\n    (e.currentTarget as HTMLElement).getBoundingClientRect()[\n      bar.value.direction\n    ] - clientOffset\n  )\n  const thumbHalf = thumb.value[bar.value.offset] / 2\n  const thumbPositionPercentage =\n    ((offset - thumbHalf) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n  showScrollbar()\n  queueHideScrollbar()\n}\n\nconst startDrag = (e: MouseEvent | TouchEvent) => {\n  e.stopImmediatePropagation()\n  if ('touches' in e) e.preventDefault()\n  cursorDown = true\n  showScrollbar()\n  baseScrollHeight = scrollbar.wrapElement!.scrollHeight\n  baseScrollWidth = scrollbar.wrapElement!.scrollWidth\n  document.addEventListener('mousemove', mouseMoveDocumentHandler)\n  document.addEventListener('mouseup', mouseUpDocumentHandler)\n  document.addEventListener('touchmove', touchMoveDocumentHandler, {\n    passive: false,\n  })\n  document.addEventListener('touchend', touchEndDocumentHandler)\n  document.addEventListener('touchcancel', touchEndDocumentHandler)\n  originalOnSelectStart = document.onselectstart\n  document.onselectstart = () => false\n}\n\nconst updateScrollPosition = (clientOffset: number) => {\n  if (!instance.value || !thumb.value) return\n  if (cursorDown === false) return\n\n  const prevPage = thumbState.value[bar.value.axis]\n  if (!prevPage) return\n\n  const offset =\n    (instance.value.getBoundingClientRect()[bar.value.direction] -\n      clientOffset) *\n    -1\n  const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n  const thumbPositionPercentage =\n    ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  if (bar.value.scroll === 'scrollLeft') {\n    scrollbar.wrapElement![bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollWidth) / 100\n  } else {\n    scrollbar.wrapElement![bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollHeight) / 100\n  }\n}\n\nconst mouseMoveDocumentHandler = (e: MouseEvent) => {\n  updateScrollPosition(e[bar.value.client])\n}\n\nconst touchMoveDocumentHandler = (e: TouchEvent) => {\n  const clientOffset = getClientOffset(e)\n  if (clientOffset === undefined) return\n  e.preventDefault()\n  updateScrollPosition(clientOffset)\n}\n\nconst endDrag = () => {\n  cursorDown = false\n  thumbState.value[bar.value.axis] = 0\n  document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n  document.removeEventListener('touchmove', touchMoveDocumentHandler)\n  document.removeEventListener('touchend', touchEndDocumentHandler)\n  document.removeEventListener('touchcancel', touchEndDocumentHandler)\n  restoreOnselectstart()\n\n  if (cursorLeave) {\n    queueHideScrollbar()\n  }\n}\n\nconst mouseUpDocumentHandler = () => {\n  endDrag()\n}\n\nconst touchEndDocumentHandler = () => {\n  endDrag()\n}\n\nconst mouseMoveScrollbarHandler = () => {\n  showScrollbar()\n}\n\nconst mouseLeaveScrollbarHandler = () => {\n  cursorLeave = true\n  if (cursorDown) {\n    visible.value = true\n    return\n  }\n  queueHideScrollbar()\n}\n\nconst scrollHandler = () => {\n  showScrollbar()\n  queueHideScrollbar()\n}\n\nonBeforeUnmount(() => {\n  clearHideTimer()\n  restoreOnselectstart()\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n  document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n  document.removeEventListener('touchmove', touchMoveDocumentHandler)\n  document.removeEventListener('touchend', touchEndDocumentHandler)\n  document.removeEventListener('touchcancel', touchEndDocumentHandler)\n})\n\nconst restoreOnselectstart = () => {\n  if (document.onselectstart !== originalOnSelectStart)\n    document.onselectstart = originalOnSelectStart\n}\n\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mousemove',\n  mouseMoveScrollbarHandler\n)\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mouseleave',\n  mouseLeaveScrollbarHandler\n)\nuseEventListener(toRef(scrollbar, 'wrapElement'), 'scroll', scrollHandler)\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'touchstart',\n  showScrollbar\n)\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'touchend',\n  queueHideScrollbar\n)\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"thumb.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n      @pointerdown=\"clickTrackHandler\"\n      @click.stop\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n        @pointerdown.stop=\"clickThumbHandler\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isClient, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { scrollbarContextKey } from './constants'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport type { ThumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nconst props = defineProps<ThumbProps>()\n\nconst scrollbar = inject(scrollbarContextKey)\nconst ns = useNamespace('scrollbar')\n\nif (!scrollbar) throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\nconst instance = ref<HTMLDivElement>()\nconst thumb = ref<HTMLDivElement>()\n\nconst thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})\nconst visible = ref(false)\nconst HIDE_DELAY = 600\n\nlet activePointerId: number | null = null\nlet dragging = false\nlet baseScrollHeight = 0\nlet baseScrollWidth = 0\nlet originalOnSelectStart:\n  | ((this: GlobalEventHandlers, ev: Event) => any)\n  | null = isClient ? document.onselectstart : null\nlet hideTimer: ReturnType<typeof setTimeout> | undefined\n\nconst bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])\n\nconst thumbStyle = computed(() =>\n  renderThumbStyle({\n    size: props.size,\n    move: props.move,\n    bar: bar.value,\n  })\n)\n\nconst clearHideTimer = () => {\n  if (!hideTimer) return\n  clearTimeout(hideTimer)\n  hideTimer = undefined\n}\n\nconst showScrollbar = () => {\n  clearHideTimer()\n  visible.value = !!props.size\n}\n\nconst queueHideScrollbar = () => {\n  clearHideTimer()\n  if (props.always || dragging) return\n\n  hideTimer = setTimeout(() => {\n    visible.value = false\n  }, HIDE_DELAY)\n}\n\nconst offsetRatio = computed(\n  () =>\n    // offsetRatioX = original width of thumb / current width of thumb / ratioX\n    // offsetRatioY = original height of thumb / current height of thumb / ratioY\n    // instance height = wrap height - GAP\n    instance.value![bar.value.offset] ** 2 /\n    scrollbar.wrapElement![bar.value.scrollSize] /\n    props.ratio /\n    thumb.value![bar.value.offset]\n)\n\nconst clickThumbHandler = (e: PointerEvent) => {\n  // prevent click event of middle and right button\n  e.stopPropagation()\n  if (e.pointerType === 'mouse' && (e.ctrlKey || [1, 2].includes(e.button)))\n    return\n\n  window.getSelection()?.removeAllRanges()\n  startDrag(e)\n\n  const el = e.currentTarget as HTMLDivElement\n  if (!el) return\n  thumbState.value[bar.value.axis] =\n    el[bar.value.offset] -\n    (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst clickTrackHandler = (e: PointerEvent) => {\n  if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n  const offset = Math.abs(\n    (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n      e[bar.value.client]\n  )\n  const thumbHalf = thumb.value[bar.value.offset] / 2\n  const thumbPositionPercentage =\n    ((offset - thumbHalf) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n  showScrollbar()\n  queueHideScrollbar()\n}\n\nconst startDrag = (e: PointerEvent) => {\n  e.stopImmediatePropagation()\n  e.preventDefault()\n  activePointerId = e.pointerId\n  dragging = true\n  showScrollbar()\n  baseScrollHeight = scrollbar.wrapElement!.scrollHeight\n  baseScrollWidth = scrollbar.wrapElement!.scrollWidth\n  document.addEventListener('pointermove', pointerMoveDocumentHandler)\n  document.addEventListener('pointerup', pointerUpDocumentHandler)\n  document.addEventListener('pointercancel', pointerUpDocumentHandler)\n  originalOnSelectStart = document.onselectstart\n  document.onselectstart = () => false\n}\n\nconst updateScrollPosition = (clientOffset: number) => {\n  if (!instance.value || !thumb.value) return\n  if (dragging === false) return\n\n  const prevPage = thumbState.value[bar.value.axis]\n  if (!prevPage) return\n\n  const offset =\n    (instance.value.getBoundingClientRect()[bar.value.direction] -\n      clientOffset) *\n    -1\n  const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n  const thumbPositionPercentage =\n    ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  if (bar.value.scroll === 'scrollLeft') {\n    scrollbar.wrapElement![bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollWidth) / 100\n  } else {\n    scrollbar.wrapElement![bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollHeight) / 100\n  }\n}\n\nconst pointerMoveDocumentHandler = (e: PointerEvent) => {\n  if (activePointerId !== null && e.pointerId !== activePointerId) return\n  updateScrollPosition(e[bar.value.client])\n}\n\nconst endDrag = () => {\n  dragging = false\n  activePointerId = null\n  thumbState.value[bar.value.axis] = 0\n  document.removeEventListener('pointermove', pointerMoveDocumentHandler)\n  document.removeEventListener('pointerup', pointerUpDocumentHandler)\n  document.removeEventListener('pointercancel', pointerUpDocumentHandler)\n  restoreOnselectstart()\n  queueHideScrollbar()\n}\n\nconst pointerUpDocumentHandler = (e: PointerEvent) => {\n  if (activePointerId !== null && e.pointerId !== activePointerId) return\n  endDrag()\n}\n\nconst scrollHandler = () => {\n  showScrollbar()\n  queueHideScrollbar()\n}\n\nonBeforeUnmount(() => {\n  clearHideTimer()\n  restoreOnselectstart()\n  document.removeEventListener('pointermove', pointerMoveDocumentHandler)\n  document.removeEventListener('pointerup', pointerUpDocumentHandler)\n  document.removeEventListener('pointercancel', pointerUpDocumentHandler)\n})\n\nconst restoreOnselectstart = () => {\n  if (document.onselectstart !== originalOnSelectStart)\n    document.onselectstart = originalOnSelectStart\n}\n\nuseEventListener(toRef(scrollbar, 'wrapElement'), 'scroll', scrollHandler)\n</script>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"thumb2.mjs","names":[],"sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n      @mousedown=\"clickTrackHandler\"\n      @touchstart.prevent=\"clickTrackTouchHandler\"\n      @click.stop\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n        @touchstart.stop.prevent=\"clickThumbTouchHandler\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isClient, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { scrollbarContextKey } from './constants'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport type { ThumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nconst props = defineProps<ThumbProps>()\n\nconst scrollbar = inject(scrollbarContextKey)\nconst ns = useNamespace('scrollbar')\n\nif (!scrollbar) throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\nconst instance = ref<HTMLDivElement>()\nconst thumb = ref<HTMLDivElement>()\n\nconst thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})\nconst visible = ref(false)\nconst HIDE_DELAY = 600\n\nlet cursorDown = false\nlet cursorLeave = false\nlet baseScrollHeight = 0\nlet baseScrollWidth = 0\nlet originalOnSelectStart:\n  | ((this: GlobalEventHandlers, ev: Event) => any)\n  | null = isClient ? document.onselectstart : null\nlet hideTimer: ReturnType<typeof setTimeout> | undefined\n\nconst bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])\n\nconst thumbStyle = computed(() =>\n  renderThumbStyle({\n    size: props.size,\n    move: props.move,\n    bar: bar.value,\n  })\n)\n\nconst getClientOffset = (event: MouseEvent | TouchEvent) => {\n  if ('touches' in event) {\n    const touch = event.touches[0] ?? event.changedTouches[0]\n    if (!touch) return undefined\n    return touch[bar.value.client]\n  }\n\n  return event[bar.value.client]\n}\n\nconst clearHideTimer = () => {\n  if (!hideTimer) return\n  clearTimeout(hideTimer)\n  hideTimer = undefined\n}\n\nconst showScrollbar = () => {\n  clearHideTimer()\n  cursorLeave = false\n  visible.value = !!props.size\n}\n\nconst queueHideScrollbar = () => {\n  clearHideTimer()\n  if (props.always || cursorDown) return\n\n  hideTimer = setTimeout(() => {\n    visible.value = false\n  }, HIDE_DELAY)\n}\n\nconst offsetRatio = computed(\n  () =>\n    // offsetRatioX = original width of thumb / current width of thumb / ratioX\n    // offsetRatioY = original height of thumb / current height of thumb / ratioY\n    // instance height = wrap height - GAP\n    instance.value![bar.value.offset] ** 2 /\n    scrollbar.wrapElement![bar.value.scrollSize] /\n    props.ratio /\n    thumb.value![bar.value.offset]\n)\n\nconst clickThumbHandler = (e: MouseEvent) => {\n  // prevent click event of middle and right button\n  e.stopPropagation()\n  if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n  window.getSelection()?.removeAllRanges()\n  startDrag(e)\n\n  const el = e.currentTarget as HTMLDivElement\n  if (!el) return\n  thumbState.value[bar.value.axis] =\n    el[bar.value.offset] -\n    (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst clickThumbTouchHandler = (e: TouchEvent) => {\n  const clientOffset = getClientOffset(e)\n  const el = e.currentTarget as HTMLDivElement\n  if (!el || clientOffset === undefined) return\n\n  startDrag(e)\n  thumbState.value[bar.value.axis] =\n    el[bar.value.offset] -\n    (clientOffset - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst clickTrackHandler = (e: MouseEvent) => {\n  if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n  const offset = Math.abs(\n    (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n      e[bar.value.client]\n  )\n  const thumbHalf = thumb.value[bar.value.offset] / 2\n  const thumbPositionPercentage =\n    ((offset - thumbHalf) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n}\n\nconst clickTrackTouchHandler = (e: TouchEvent) => {\n  if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n  const clientOffset = getClientOffset(e)\n  if (clientOffset === undefined) return\n\n  const offset = Math.abs(\n    (e.currentTarget as HTMLElement).getBoundingClientRect()[\n      bar.value.direction\n    ] - clientOffset\n  )\n  const thumbHalf = thumb.value[bar.value.offset] / 2\n  const thumbPositionPercentage =\n    ((offset - thumbHalf) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n  showScrollbar()\n  queueHideScrollbar()\n}\n\nconst startDrag = (e: MouseEvent | TouchEvent) => {\n  e.stopImmediatePropagation()\n  if ('touches' in e) e.preventDefault()\n  cursorDown = true\n  showScrollbar()\n  baseScrollHeight = scrollbar.wrapElement!.scrollHeight\n  baseScrollWidth = scrollbar.wrapElement!.scrollWidth\n  document.addEventListener('mousemove', mouseMoveDocumentHandler)\n  document.addEventListener('mouseup', mouseUpDocumentHandler)\n  document.addEventListener('touchmove', touchMoveDocumentHandler, {\n    passive: false,\n  })\n  document.addEventListener('touchend', touchEndDocumentHandler)\n  document.addEventListener('touchcancel', touchEndDocumentHandler)\n  originalOnSelectStart = document.onselectstart\n  document.onselectstart = () => false\n}\n\nconst updateScrollPosition = (clientOffset: number) => {\n  if (!instance.value || !thumb.value) return\n  if (cursorDown === false) return\n\n  const prevPage = thumbState.value[bar.value.axis]\n  if (!prevPage) return\n\n  const offset =\n    (instance.value.getBoundingClientRect()[bar.value.direction] -\n      clientOffset) *\n    -1\n  const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n  const thumbPositionPercentage =\n    ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  if (bar.value.scroll === 'scrollLeft') {\n    scrollbar.wrapElement![bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollWidth) / 100\n  } else {\n    scrollbar.wrapElement![bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollHeight) / 100\n  }\n}\n\nconst mouseMoveDocumentHandler = (e: MouseEvent) => {\n  updateScrollPosition(e[bar.value.client])\n}\n\nconst touchMoveDocumentHandler = (e: TouchEvent) => {\n  const clientOffset = getClientOffset(e)\n  if (clientOffset === undefined) return\n  e.preventDefault()\n  updateScrollPosition(clientOffset)\n}\n\nconst endDrag = () => {\n  cursorDown = false\n  thumbState.value[bar.value.axis] = 0\n  document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n  document.removeEventListener('touchmove', touchMoveDocumentHandler)\n  document.removeEventListener('touchend', touchEndDocumentHandler)\n  document.removeEventListener('touchcancel', touchEndDocumentHandler)\n  restoreOnselectstart()\n\n  if (cursorLeave) {\n    queueHideScrollbar()\n  }\n}\n\nconst mouseUpDocumentHandler = () => {\n  endDrag()\n}\n\nconst touchEndDocumentHandler = () => {\n  endDrag()\n}\n\nconst mouseMoveScrollbarHandler = () => {\n  showScrollbar()\n}\n\nconst mouseLeaveScrollbarHandler = () => {\n  cursorLeave = true\n  if (cursorDown) {\n    visible.value = true\n    return\n  }\n  queueHideScrollbar()\n}\n\nconst scrollHandler = () => {\n  showScrollbar()\n  queueHideScrollbar()\n}\n\nonBeforeUnmount(() => {\n  clearHideTimer()\n  restoreOnselectstart()\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n  document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n  document.removeEventListener('touchmove', touchMoveDocumentHandler)\n  document.removeEventListener('touchend', touchEndDocumentHandler)\n  document.removeEventListener('touchcancel', touchEndDocumentHandler)\n})\n\nconst restoreOnselectstart = () => {\n  if (document.onselectstart !== originalOnSelectStart)\n    document.onselectstart = originalOnSelectStart\n}\n\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mousemove',\n  mouseMoveScrollbarHandler\n)\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mouseleave',\n  mouseLeaveScrollbarHandler\n)\nuseEventListener(toRef(scrollbar, 'wrapElement'), 'scroll', scrollHandler)\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'touchstart',\n  showScrollbar\n)\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'touchend',\n  queueHideScrollbar\n)\n</script>\n"],"mappings":""}
+{"version":3,"file":"thumb2.mjs","names":[],"sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n      @pointerdown=\"clickTrackHandler\"\n      @click.stop\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n        @pointerdown.stop=\"clickThumbHandler\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isClient, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { scrollbarContextKey } from './constants'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport type { ThumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nconst props = defineProps<ThumbProps>()\n\nconst scrollbar = inject(scrollbarContextKey)\nconst ns = useNamespace('scrollbar')\n\nif (!scrollbar) throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\nconst instance = ref<HTMLDivElement>()\nconst thumb = ref<HTMLDivElement>()\n\nconst thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})\nconst visible = ref(false)\nconst HIDE_DELAY = 600\n\nlet activePointerId: number | null = null\nlet dragging = false\nlet baseScrollHeight = 0\nlet baseScrollWidth = 0\nlet originalOnSelectStart:\n  | ((this: GlobalEventHandlers, ev: Event) => any)\n  | null = isClient ? document.onselectstart : null\nlet hideTimer: ReturnType<typeof setTimeout> | undefined\n\nconst bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])\n\nconst thumbStyle = computed(() =>\n  renderThumbStyle({\n    size: props.size,\n    move: props.move,\n    bar: bar.value,\n  })\n)\n\nconst clearHideTimer = () => {\n  if (!hideTimer) return\n  clearTimeout(hideTimer)\n  hideTimer = undefined\n}\n\nconst showScrollbar = () => {\n  clearHideTimer()\n  visible.value = !!props.size\n}\n\nconst queueHideScrollbar = () => {\n  clearHideTimer()\n  if (props.always || dragging) return\n\n  hideTimer = setTimeout(() => {\n    visible.value = false\n  }, HIDE_DELAY)\n}\n\nconst offsetRatio = computed(\n  () =>\n    // offsetRatioX = original width of thumb / current width of thumb / ratioX\n    // offsetRatioY = original height of thumb / current height of thumb / ratioY\n    // instance height = wrap height - GAP\n    instance.value![bar.value.offset] ** 2 /\n    scrollbar.wrapElement![bar.value.scrollSize] /\n    props.ratio /\n    thumb.value![bar.value.offset]\n)\n\nconst clickThumbHandler = (e: PointerEvent) => {\n  // prevent click event of middle and right button\n  e.stopPropagation()\n  if (e.pointerType === 'mouse' && (e.ctrlKey || [1, 2].includes(e.button)))\n    return\n\n  window.getSelection()?.removeAllRanges()\n  startDrag(e)\n\n  const el = e.currentTarget as HTMLDivElement\n  if (!el) return\n  thumbState.value[bar.value.axis] =\n    el[bar.value.offset] -\n    (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst clickTrackHandler = (e: PointerEvent) => {\n  if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n  const offset = Math.abs(\n    (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n      e[bar.value.client]\n  )\n  const thumbHalf = thumb.value[bar.value.offset] / 2\n  const thumbPositionPercentage =\n    ((offset - thumbHalf) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n  showScrollbar()\n  queueHideScrollbar()\n}\n\nconst startDrag = (e: PointerEvent) => {\n  e.stopImmediatePropagation()\n  e.preventDefault()\n  activePointerId = e.pointerId\n  dragging = true\n  showScrollbar()\n  baseScrollHeight = scrollbar.wrapElement!.scrollHeight\n  baseScrollWidth = scrollbar.wrapElement!.scrollWidth\n  document.addEventListener('pointermove', pointerMoveDocumentHandler)\n  document.addEventListener('pointerup', pointerUpDocumentHandler)\n  document.addEventListener('pointercancel', pointerUpDocumentHandler)\n  originalOnSelectStart = document.onselectstart\n  document.onselectstart = () => false\n}\n\nconst updateScrollPosition = (clientOffset: number) => {\n  if (!instance.value || !thumb.value) return\n  if (dragging === false) return\n\n  const prevPage = thumbState.value[bar.value.axis]\n  if (!prevPage) return\n\n  const offset =\n    (instance.value.getBoundingClientRect()[bar.value.direction] -\n      clientOffset) *\n    -1\n  const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n  const thumbPositionPercentage =\n    ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  if (bar.value.scroll === 'scrollLeft') {\n    scrollbar.wrapElement![bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollWidth) / 100\n  } else {\n    scrollbar.wrapElement![bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollHeight) / 100\n  }\n}\n\nconst pointerMoveDocumentHandler = (e: PointerEvent) => {\n  if (activePointerId !== null && e.pointerId !== activePointerId) return\n  updateScrollPosition(e[bar.value.client])\n}\n\nconst endDrag = () => {\n  dragging = false\n  activePointerId = null\n  thumbState.value[bar.value.axis] = 0\n  document.removeEventListener('pointermove', pointerMoveDocumentHandler)\n  document.removeEventListener('pointerup', pointerUpDocumentHandler)\n  document.removeEventListener('pointercancel', pointerUpDocumentHandler)\n  restoreOnselectstart()\n  queueHideScrollbar()\n}\n\nconst pointerUpDocumentHandler = (e: PointerEvent) => {\n  if (activePointerId !== null && e.pointerId !== activePointerId) return\n  endDrag()\n}\n\nconst scrollHandler = () => {\n  showScrollbar()\n  queueHideScrollbar()\n}\n\nonBeforeUnmount(() => {\n  clearHideTimer()\n  restoreOnselectstart()\n  document.removeEventListener('pointermove', pointerMoveDocumentHandler)\n  document.removeEventListener('pointerup', pointerUpDocumentHandler)\n  document.removeEventListener('pointercancel', pointerUpDocumentHandler)\n})\n\nconst restoreOnselectstart = () => {\n  if (document.onselectstart !== originalOnSelectStart)\n    document.onselectstart = originalOnSelectStart\n}\n\nuseEventListener(toRef(scrollbar, 'wrapElement'), 'scroll', scrollHandler)\n</script>\n"],"mappings":""}

package/es/components/select/src/select-dropdown.mjs

@@ -1,17 +1,14 @@
 import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
 import select_dropdown_vue_vue_type_script_lang_default from "./select-dropdown.vue_vue_type_script_lang.mjs";
-import { createCommentVNode, createElementBlock, normalizeClass, normalizeStyle, openBlock, renderSlot } from "vue";
+import { createCommentVNode, createElementBlock, normalizeClass, openBlock, renderSlot } from "vue";
 
 //#region ../../packages/components/select/src/select-dropdown.vue
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createElementBlock("div", {
-		class: normalizeClass([
-			_ctx.ns.b("dropdown"),
-			_ctx.ns.is("multiple", _ctx.isMultiple),
-			_ctx.popperClass
-		]),
-		style: normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
-	}, [
+	return openBlock(), createElementBlock("div", { class: normalizeClass([
+		_ctx.ns.b("dropdown"),
+		_ctx.ns.is("multiple", _ctx.isMultiple),
+		_ctx.popperClass
+	]) }, [
 		_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
 			key: 0,
 			class: normalizeClass(_ctx.ns.be("dropdown", "header"))
@@ -21,7 +18,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 			key: 1,
 			class: normalizeClass(_ctx.ns.be("dropdown", "footer"))
 		}, [renderSlot(_ctx.$slots, "footer")], 2)) : createCommentVNode("v-if", true)
-	], 6);
+	], 2);
 }
 var select_dropdown_default = /* @__PURE__ */ _plugin_vue_export_helper_default(select_dropdown_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 

package/es/components/select/src/select-dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-dropdown.mjs","names":[],"sources":["../../../../../../packages/components/select/src/select-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b('dropdown'), ns.is('multiple', isMultiple), popperClass]\"\n    :style=\"{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }\"\n  >\n    <div v-if=\"$slots.header\" :class=\"ns.be('dropdown', 'header')\">\n      <slot name=\"header\" />\n    </div>\n    <slot />\n    <div v-if=\"$slots.footer\" :class=\"ns.be('dropdown', 'footer')\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, onMounted, ref } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectKey } from './token'\nimport { BORDER_HORIZONTAL_WIDTH } from '@element-plus/constants'\n\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n\n  componentName: 'ElSelectDropdown',\n\n  setup() {\n    const select = inject(selectKey)!\n    const ns = useNamespace('select')\n\n    // computed\n    const popperClass = computed(() => select.props.popperClass)\n    const isMultiple = computed(() => select.props.multiple)\n    const isFitInputWidth = computed(() => select.props.fitInputWidth)\n    const minWidth = ref('')\n\n    function updateMinWidth() {\n      const offsetWidth = select.selectRef?.offsetWidth\n      if (offsetWidth) {\n        minWidth.value = `${offsetWidth - BORDER_HORIZONTAL_WIDTH}px`\n      } else {\n        minWidth.value = ''\n      }\n    }\n\n    onMounted(() => {\n      // TODO: updatePopper\n      // popper.value.update()\n      updateMinWidth()\n      useResizeObserver(select.selectRef, updateMinWidth)\n    })\n\n    return {\n      ns,\n      minWidth,\n      popperClass,\n      isMultiple,\n      isFitInputWidth,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;qBACE,mBAWM,OAAA;EAVH,OAAK,eAAA;GAAG,KAAA,GAAG,EAAC,WAAA;GAAc,KAAA,GAAG,GAAE,YAAa,KAAA,WAAU;GAAG,KAAA;GAAW,CAAA;EACpE,OAAK,eAAA,GAAK,KAAA,kBAAe,UAAA,aAA0B,KAAA,UAAQ,CAAA;EAAA;EAEjD,KAAA,OAAO,UAAA,WAAA,EAAlB,mBAEM,OAAA;GAAA,KAAA;GAFqB,OAAK,eAAE,KAAA,GAAG,GAAE,YAAA,SAAA,CAAA;GAAA,GACrC,WAAsB,KAAA,QAAA,SAAA,CAAA;EAExB,WAAQ,KAAA,QAAA,UAAA;EACG,KAAA,OAAO,UAAA,WAAA,EAAlB,mBAEM,OAAA;GAAA,KAAA;GAFqB,OAAK,eAAE,KAAA,GAAG,GAAE,YAAA,SAAA,CAAA;GAAA,GACrC,WAAsB,KAAA,QAAA,SAAA,CAAA"}
+{"version":3,"file":"select-dropdown.mjs","names":[],"sources":["../../../../../../packages/components/select/src/select-dropdown.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b('dropdown'), ns.is('multiple', isMultiple), popperClass]\">\n    <div v-if=\"$slots.header\" :class=\"ns.be('dropdown', 'header')\">\n      <slot name=\"header\" />\n    </div>\n    <slot />\n    <div v-if=\"$slots.footer\" :class=\"ns.be('dropdown', 'footer')\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectKey } from './token'\n\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n\n  componentName: 'ElSelectDropdown',\n\n  setup() {\n    const select = inject(selectKey)!\n    const ns = useNamespace('select')\n\n    // computed\n    const popperClass = computed(() => select.props.popperClass)\n    const isMultiple = computed(() => select.props.multiple)\n\n    return {\n      ns,\n      popperClass,\n      isMultiple,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;qBACE,mBAQM,OAAA,EARA,OAAK,eAAA;EAAG,KAAA,GAAG,EAAC,WAAA;EAAc,KAAA,GAAG,GAAE,YAAa,KAAA,WAAU;EAAG,KAAA;EAAW,CAAA,EAAA;EAC7D,KAAA,OAAO,UAAA,WAAA,EAAlB,mBAEM,OAAA;GAAA,KAAA;GAFqB,OAAK,eAAE,KAAA,GAAG,GAAE,YAAA,SAAA,CAAA;GAAA,GACrC,WAAsB,KAAA,QAAA,SAAA,CAAA;EAExB,WAAQ,KAAA,QAAA,UAAA;EACG,KAAA,OAAO,UAAA,WAAA,EAAlB,mBAEM,OAAA;GAAA,KAAA;GAFqB,OAAK,eAAE,KAAA,GAAG,GAAE,YAAA,SAAA,CAAA;GAAA,GACrC,WAAsB,KAAA,QAAA,SAAA,CAAA"}

package/es/components/select/src/select-dropdown.vue_vue_type_script_lang.mjs

@@ -1,8 +1,6 @@
-import { BORDER_HORIZONTAL_WIDTH } from "../../../constants/form.mjs";
 import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
 import { selectKey } from "./token.mjs";
-import { useResizeObserver } from "@vueuse/core";
-import { computed, defineComponent, inject, onMounted, ref } from "vue";
+import { computed, defineComponent, inject } from "vue";
 
 //#region ../../packages/components/select/src/select-dropdown.vue?vue&type=script&lang.ts
 var select_dropdown_vue_vue_type_script_lang_default = defineComponent({
@@ -10,26 +8,10 @@ var select_dropdown_vue_vue_type_script_lang_default = defineComponent({
 	componentName: "ElSelectDropdown",
 	setup() {
 		const select = inject(selectKey);
-		const ns = useNamespace("select");
-		const popperClass = computed(() => select.props.popperClass);
-		const isMultiple = computed(() => select.props.multiple);
-		const isFitInputWidth = computed(() => select.props.fitInputWidth);
-		const minWidth = ref("");
-		function updateMinWidth() {
-			const offsetWidth = select.selectRef?.offsetWidth;
-			if (offsetWidth) minWidth.value = `${offsetWidth - BORDER_HORIZONTAL_WIDTH}px`;
-			else minWidth.value = "";
-		}
-		onMounted(() => {
-			updateMinWidth();
-			useResizeObserver(select.selectRef, updateMinWidth);
-		});
 		return {
-			ns,
-			minWidth,
-			popperClass,
-			isMultiple,
-			isFitInputWidth
+			ns: useNamespace("select"),
+			popperClass: computed(() => select.props.popperClass),
+			isMultiple: computed(() => select.props.multiple)
 		};
 	}
 });

package/es/components/select/src/select-dropdown.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-dropdown.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../../../../packages/components/select/src/select-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b('dropdown'), ns.is('multiple', isMultiple), popperClass]\"\n    :style=\"{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }\"\n  >\n    <div v-if=\"$slots.header\" :class=\"ns.be('dropdown', 'header')\">\n      <slot name=\"header\" />\n    </div>\n    <slot />\n    <div v-if=\"$slots.footer\" :class=\"ns.be('dropdown', 'footer')\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, onMounted, ref } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectKey } from './token'\nimport { BORDER_HORIZONTAL_WIDTH } from '@element-plus/constants'\n\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n\n  componentName: 'ElSelectDropdown',\n\n  setup() {\n    const select = inject(selectKey)!\n    const ns = useNamespace('select')\n\n    // computed\n    const popperClass = computed(() => select.props.popperClass)\n    const isMultiple = computed(() => select.props.multiple)\n    const isFitInputWidth = computed(() => select.props.fitInputWidth)\n    const minWidth = ref('')\n\n    function updateMinWidth() {\n      const offsetWidth = select.selectRef?.offsetWidth\n      if (offsetWidth) {\n        minWidth.value = `${offsetWidth - BORDER_HORIZONTAL_WIDTH}px`\n      } else {\n        minWidth.value = ''\n      }\n    }\n\n    onMounted(() => {\n      // TODO: updatePopper\n      // popper.value.update()\n      updateMinWidth()\n      useResizeObserver(select.selectRef, updateMinWidth)\n    })\n\n    return {\n      ns,\n      minWidth,\n      popperClass,\n      isMultiple,\n      isFitInputWidth,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;;AAsBA,uDAAe,gBAAgB;CAC7B,MAAM;CAEN,eAAe;CAEf,QAAQ;EACN,MAAM,SAAS,OAAO,UAAU;EAChC,MAAM,KAAK,aAAa,SAAQ;EAGhC,MAAM,cAAc,eAAe,OAAO,MAAM,YAAW;EAC3D,MAAM,aAAa,eAAe,OAAO,MAAM,SAAQ;EACvD,MAAM,kBAAkB,eAAe,OAAO,MAAM,cAAa;EACjE,MAAM,WAAW,IAAI,GAAE;EAEvB,SAAS,iBAAiB;GACxB,MAAM,cAAc,OAAO,WAAW;AACtC,OAAI,YACF,UAAS,QAAQ,GAAG,cAAc,wBAAwB;OAE1D,UAAS,QAAQ;;AAIrB,kBAAgB;AAGd,mBAAe;AACf,qBAAkB,OAAO,WAAW,eAAc;IACnD;AAED,SAAO;GACL;GACA;GACA;GACA;GACA;GACF;;CAEH,CAAA"}
+{"version":3,"file":"select-dropdown.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../../../../packages/components/select/src/select-dropdown.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b('dropdown'), ns.is('multiple', isMultiple), popperClass]\">\n    <div v-if=\"$slots.header\" :class=\"ns.be('dropdown', 'header')\">\n      <slot name=\"header\" />\n    </div>\n    <slot />\n    <div v-if=\"$slots.footer\" :class=\"ns.be('dropdown', 'footer')\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectKey } from './token'\n\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n\n  componentName: 'ElSelectDropdown',\n\n  setup() {\n    const select = inject(selectKey)!\n    const ns = useNamespace('select')\n\n    // computed\n    const popperClass = computed(() => select.props.popperClass)\n    const isMultiple = computed(() => select.props.multiple)\n\n    return {\n      ns,\n      popperClass,\n      isMultiple,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;AAiBA,uDAAe,gBAAgB;CAC7B,MAAM;CAEN,eAAe;CAEf,QAAQ;EACN,MAAM,SAAS,OAAO,UAAU;AAOhC,SAAO;GACL,IAPS,aAAa,SAAQ;GAQ9B,aALkB,eAAe,OAAO,MAAM,YAAW;GAMzD,YALiB,eAAe,OAAO,MAAM,SAAQ;GAMvD;;CAEH,CAAA"}

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

@@ -5,7 +5,7 @@ import "../../../utils/index.js";
 import { PopperEffect } from "../../popper/src/popper.js";
 import { Props } from "../../select-v2/src/useProps.js";
 import { _default } from "./select.vue.js";
-import { Options, Placement } from "../../popper/index.js";
+import "../../popper/index.js";
 import * as vue from "vue";
 import { CSSProperties, ExtractPropTypes, ExtractPublicPropTypes } from "vue";
 
@@ -14,19 +14,13 @@ import { CSSProperties, ExtractPropTypes, ExtractPublicPropTypes } from "vue";
  * @description Tag tooltip configuration interface
  */
 interface TagTooltipProps {
-  appendTo?: string | HTMLElement;
-  placement?: Placement;
-  fallbackPlacements?: Placement[];
   effect?: PopperEffect;
   popperClass?: string;
   popperStyle?: string | CSSProperties;
   transition?: string;
-  teleported?: boolean;
-  popperOptions?: Partial<Options>;
   showAfter?: number;
   hideAfter?: number;
   autoClose?: number;
-  offset?: number;
 }
 declare const selectProps: {
   ariaLabel: StringConstructor;
@@ -56,7 +50,6 @@ declare const selectProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
   remote: BooleanConstructor;
   debounce: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
   loadingText: StringConstructor;
@@ -89,13 +82,10 @@ declare const selectProps: {
   collapseTagsTooltip: BooleanConstructor;
   tagTooltip: EpPropFinalized<(new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps) | (((new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps)) | null)[], unknown, unknown, () => {}, boolean>;
   maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
-  teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-  mobile: BooleanConstructor;
   persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
   clearIcon: EpPropFinalized<(new (...args: any[]) => IconPropType & {}) | (() => IconPropType) | (((new (...args: any[]) => IconPropType & {}) | (() => IconPropType)) | null)[], unknown, unknown, vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
   }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
-  fitInputWidth: BooleanConstructor;
   suffixIcon: EpPropFinalized<(new (...args: any[]) => IconPropType & {}) | (() => IconPropType) | (((new (...args: any[]) => IconPropType & {}) | (() => IconPropType)) | null)[], unknown, unknown, vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
   }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
@@ -115,17 +105,7 @@ declare const selectProps: {
   };
   validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
   remoteShowSuffix: BooleanConstructor;
-  showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
-  offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
-  placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "bottom-start" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "bottom-start" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "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<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
-  appendTo: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
   options: {
     readonly type: vue.PropType<Record<string, any>[]>;
     readonly required: false;

package/es/components/select/src/select.mjs

@@ -5,11 +5,9 @@ import { iconPropType } from "../../../utils/vue/icon.mjs";
 import { useSizeProp } from "../../../hooks/use-size/index.mjs";
 import { useEmptyValuesProps } from "../../../hooks/use-empty-values/index.mjs";
 import { useAriaProps } from "../../../hooks/use-aria/index.mjs";
-import { useTooltipContentProps } from "../../tooltip/src/content.mjs";
 import { scrollbarEmits } from "../../scrollbar/src/scrollbar.mjs";
 import { tagProps } from "../../tag/src/tag.mjs";
 import { defaultProps } from "../../select-v2/src/useProps.mjs";
-import { placements } from "@popperjs/core";
 
 //#region ../../packages/components/select/src/select.ts
 const selectProps = buildProps({
@@ -48,10 +46,6 @@ const selectProps = buildProps({
 		default: ""
 	},
 	popperStyle: { type: definePropType([String, Object]) },
-	popperOptions: {
-		type: definePropType(Object),
-		default: () => ({})
-	},
 	remote: Boolean,
 	debounce: {
 		type: Number,
@@ -87,8 +81,6 @@ const selectProps = buildProps({
 		type: Number,
 		default: 1
 	},
-	teleported: useTooltipContentProps.teleported,
-	mobile: Boolean,
 	persistent: {
 		type: Boolean,
 		default: true
@@ -97,7 +89,6 @@ const selectProps = buildProps({
 		type: iconPropType,
 		default: CircleClose
 	},
-	fitInputWidth: Boolean,
 	suffixIcon: {
 		type: iconPropType,
 		default: ArrowDown
@@ -115,33 +106,10 @@ const selectProps = buildProps({
 		default: true
 	},
 	remoteShowSuffix: Boolean,
-	showArrow: {
-		type: Boolean,
-		default: true
-	},
-	offset: {
-		type: Number,
-		default: 12
-	},
-	placement: {
-		type: definePropType(String),
-		values: placements,
-		default: "bottom-start"
-	},
-	fallbackPlacements: {
-		type: definePropType(Array),
-		default: [
-			"bottom-start",
-			"top-start",
-			"right",
-			"left"
-		]
-	},
 	tabindex: {
 		type: [String, Number],
 		default: 0
 	},
-	appendTo: useTooltipContentProps.appendTo,
 	options: { type: definePropType(Array) },
 	props: {
 		type: definePropType(Object),