1 line
13 KiB
Plaintext
1 line
13 KiB
Plaintext
|
{"version":3,"file":"scrollbar2.mjs","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 >\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 { addUnit, debugWarn, isNumber, isObject } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport Bar from './bar.vue'\nimport { scrollbarContextKey } from './constants'\nimport { scrollbarEmits, scrollbarProps } from './scrollbar'\n\nimport type { ScrollbarDirection } 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 = defineProps(scrollbarProps)\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 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 if (props.height) style.height = addUnit(props.height)\n if (props.maxHeight) style.maxHeight = addUnit(props.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:\n wrapScrollTop + wrapRef.value.clientHeight >=\n wrapRef.value.scrollHeight - props.distance,\n top: wrapScrollTop <= props.distance && prevTop !== 0,\n right:\n wrapScrollLeft + wrapRef.value.clientWidth >=\n wrapRef.value.scrollWidth - props.distance
|