element-plus
Version:
A Component Library for Vue 3
1 lines • 13.9 kB
Source Map (JSON)
{"version":3,"file":"scrollbar.vue2.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 } 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 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:\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 &&\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}\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 if (wrapRef.value) {\n barRef.value?.handleScroll(wrapRef.value)\n }\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"],"names":["direction","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_openBlock","_createBlock","_resolveDynamicComponent","_renderSlot","Bar"],"mappings":"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"}