You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
9.7 KiB
1 line
9.7 KiB
2 years ago
|
{"version":3,"file":"scrollbar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n <div ref=\"scrollbarRef\" :class=\"ns.b()\">\n <div ref=\"wrapRef\" :class=\"wrapKls\" :style=\"style\" @scroll=\"handleScroll\">\n <component\n :is=\"tag\"\n ref=\"resizeRef\"\n :class=\"resizeKls\"\n :style=\"viewStyle\"\n >\n <slot />\n </component>\n </div>\n <template v-if=\"!native\">\n <bar\n ref=\"barRef\"\n :height=\"sizeHeight\"\n :width=\"sizeWidth\"\n :always=\"always\"\n :ratio-x=\"ratioX\"\n :ratio-y=\"ratioY\"\n />\n </template>\n </div>\n</template>\n<script lang=\"ts\" setup>\nimport {\n computed,\n nextTick,\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 { GAP } from './util'\nimport Bar from './bar.vue'\nimport { scrollbarContextKey } from './constants'\nimport { scrollbarEmits, 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 = defineProps(scrollbarProps)\nconst emit = defineEmits(scrollbarEmits)\n\nconst ns = useNamespace('scrollbar')\n\nlet stopResizeObserver: (() => void) | undefined = undefined\nlet stopResizeListener: (() => void) | undefined = undefined\n\nconst scrollbarRef = ref<HTMLDivElement>()\nconst wrapRef = ref<HTMLDivElement>()\nconst resizeRef = ref<HTMLElement>()\n\nconst sizeWidth = ref('0')\nconst sizeHeight = ref('0')\nconst barRef = ref<BarInstance>()\nconst ratioY = ref(1)\nconst ratioX = ref(1)\n\nconst style = 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 handleScroll = () => {\n if (wrapRef.value) {\n barRef.value?.handleScroll(wrapRef.value)\n\n emit('scroll', {\n scrollTop: wrapRef.value.scrollTop,\n scrollLeft: wrapRef.value.scrollLeft,\n })\n }\n}\n\n// TODO: refactor method overrides, due to script setup dts\n// @ts-nocheck\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 if (!wrapRef.value) return\n const offsetHeight = wrapRef.value.offsetHeight - GAP\n const offsetWidth = wrapRef.value.offsetWidth - GAP\n\n const originalHeight = offsetHeight ** 2 / wrapRef.value.scrollHeight\n const originalWidth = offsetWidth ** 2 / wrapRef.value.scrollWidth\n const height = Math.max(originalHeight, props.minSize)\n const width = Math.max(originalWidth, props.minSize)\n\n ratioY.value =\n originalHeight /\n (offsetHeight - originalHeight) /\n (height / (offsetHeight - height))\n ratioX.value =\n originalWidth /\n (offsetWidth - originalWidth) /\n (width / (offsetWidth - wid
|