element-plus
Version:
A Component Library for Vue 3
1 lines • 11.7 kB
Source Map (JSON)
{"version":3,"file":"scrollbar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n <div ref=\"scrollbar$\" :class=\"ns.b()\">\n <div\n ref=\"wrap$\"\n :class=\"[\n wrapClass,\n ns.e('wrap'),\n { [ns.em('wrap', 'hidden-default')]: !native },\n ]\"\n :style=\"style\"\n @scroll=\"handleScroll\"\n >\n <component\n :is=\"tag\"\n ref=\"resize$\"\n :class=\"[ns.e('view'), viewClass]\"\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\">\nimport {\n computed,\n defineComponent,\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 { scrollbarContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\nimport Bar from './bar.vue'\n\nimport { scrollbarEmits, scrollbarProps } from './scrollbar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nexport default defineComponent({\n name: 'ElScrollbar',\n components: {\n Bar,\n },\n props: scrollbarProps,\n emits: scrollbarEmits,\n\n setup(props, { emit }) {\n const ns = useNamespace('scrollbar')\n\n let stopResizeObserver: (() => void) | undefined = undefined\n let stopResizeListener: (() => void) | undefined = undefined\n\n const scrollbar$ = ref<HTMLDivElement>()\n const wrap$ = ref<HTMLDivElement>()\n const resize$ = ref<HTMLElement>()\n\n const sizeWidth = ref('0')\n const sizeHeight = ref('0')\n const barRef = ref()\n const moveX = ref(0)\n const moveY = ref(0)\n const ratioY = ref(1)\n const ratioX = ref(1)\n const SCOPE = 'ElScrollbar'\n const GAP = 4 // top 2 + bottom 2 of bar instance\n\n const 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\n const handleScroll = () => {\n if (wrap$.value) {\n barRef.value?.handleScroll(wrap$.value)\n\n emit('scroll', {\n scrollTop: wrap$.value.scrollTop,\n scrollLeft: wrap$.value.scrollLeft,\n })\n }\n }\n\n function scrollTo(xCord: number, yCord?: number): void\n function scrollTo(options: ScrollToOptions): void\n function scrollTo(arg1: unknown, arg2?: number) {\n if (isObject(arg1)) {\n wrap$.value!.scrollTo(arg1)\n } else if (isNumber(arg1) && isNumber(arg2)) {\n wrap$.value!.scrollTo(arg1, arg2)\n }\n }\n\n const setScrollTop = (value: number) => {\n if (!isNumber(value)) {\n debugWarn(SCOPE, 'value must be a number')\n return\n }\n wrap$.value!.scrollTop = value\n }\n\n const setScrollLeft = (value: number) => {\n if (!isNumber(value)) {\n debugWarn(SCOPE, 'value must be a number')\n return\n }\n wrap$.value!.scrollLeft = value\n }\n\n const update = () => {\n if (!wrap$.value) return\n const offsetHeight = wrap$.value.offsetHeight - GAP\n const offsetWidth = wrap$.value.offsetWidth - GAP\n\n const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n const originalWidth = offsetWidth ** 2 / wrap$.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 - width))\n\n sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n }\n\n watch(\n () => props.noresize,\n (noresize) => {\n if (noresize) {\n stopResizeObserver?.()\n stopResizeListener?.()\n } else {\n ;({ stop: stopResizeObserver } = useResizeObserver(resize$, update))\n stopResizeListener = useEventListener('resize', update)\n }\n },\n { immediate: true }\n )\n\n watch(\n () => [props.maxHeight, props.height],\n () => {\n if (!props.native)\n nextTick(() => {\n update()\n if (wrap$.value) {\n barRef.value?.handleScroll(wrap$.value)\n }\n })\n }\n )\n\n provide(\n scrollbarContextKey,\n reactive({\n scrollbarElement: scrollbar$,\n wrapElement: wrap$,\n })\n )\n\n onMounted(() => {\n if (!props.native) nextTick(() => update())\n })\n onUpdated(() => update())\n\n return {\n ns,\n scrollbar$,\n wrap$,\n resize$,\n barRef,\n moveX,\n moveY,\n ratioX,\n ratioY,\n sizeWidth,\n sizeHeight,\n style,\n update,\n handleScroll,\n scrollTo,\n setScrollTop,\n setScrollLeft,\n }\n },\n})\n</script>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_createBlock","_resolveDynamicComponent","_withCtx"],"mappings":"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"}