UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 10.9 kB
{"version":3,"file":"thumb.vue2.mjs","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 @click.stop\n >\n <div\n ref=\"thumb\"\n :class=\"ns.e('thumb')\"\n :style=\"thumbStyle\"\n @mousedown=\"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)\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\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 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 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 startDrag = (e: MouseEvent) => {\n e.stopImmediatePropagation()\n cursorDown = true\n baseScrollHeight = scrollbar.wrapElement!.scrollHeight\n baseScrollWidth = scrollbar.wrapElement!.scrollWidth\n document.addEventListener('mousemove', mouseMoveDocumentHandler)\n document.addEventListener('mouseup', mouseUpDocumentHandler)\n originalOnSelectStart = document.onselectstart\n document.onselectstart = () => false\n}\n\nconst mouseMoveDocumentHandler = (e: MouseEvent) => {\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 e[bar.value.client]) *\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 mouseUpDocumentHandler = () => {\n cursorDown = false\n thumbState.value[bar.value.axis] = 0\n document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n document.removeEventListener('mouseup', mouseUpDocumentHandler)\n restoreOnselectstart()\n if (cursorLeave) visible.value = false\n}\n\nconst mouseMoveScrollbarHandler = () => {\n cursorLeave = false\n visible.value = !!props.size\n}\n\nconst mouseLeaveScrollbarHandler = () => {\n cursorLeave = true\n visible.value = cursorDown\n}\n\nonBeforeUnmount(() => {\n restoreOnselectstart()\n document.removeEventListener('mouseup', mouseUpDocumentHandler)\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)\n</script>\n"],"names":["_createBlock","_Transition","_unref","_createElementVNode","_normalizeClass","_vShow"],"mappings":"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"}