hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 6.2 kB
Source Map (JSON)
{"version":3,"file":"use-scroll.mjs","sources":["../../../../../../../packages/components/simple-table/src/composables/use-scroll.ts"],"sourcesContent":["import { getCurrentInstance, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { isString } from '@hongluan-ui/utils'\n\nimport type { ComputedRef, Ref } from 'vue'\nimport type { ColumnType, ScrollContainer } from '../simple-table'\n\nfunction useScroll(\n scrollContainer: ScrollContainer,\n cols: ComputedRef<{ realCols: ColumnType[]; }>,\n table: Ref<HTMLTableElement>,\n) {\n const scrollClass = ref('is-scrolling-left')\n let resizeObserver: ResizeObserver | null = null\n\n const { proxy } = getCurrentInstance()!\n\n const hasFixedCol = () => cols.value.realCols.some(c => !!c.fixed)\n\n const getParentElement: () => HTMLElement = () => {\n let parent\n if (proxy?.$parent?.$options.name === 'Scrollbar') {\n parent = table.value.parentElement?.parentElement\n } else {\n parent = table.value.parentElement\n }\n return parent!\n }\n\n const getScrollContainer = () => {\n let scrollContainerEle: HTMLElement\n if (scrollContainer) {\n if (isString(scrollContainer)) {\n scrollContainerEle = document.querySelector(scrollContainer) as HTMLElement\n } else {\n scrollContainerEle = scrollContainer\n }\n } else {\n scrollContainerEle = getParentElement()\n }\n return scrollContainerEle\n }\n\n const initScrollClass = (container: HTMLElement) => {\n if (container.getBoundingClientRect().width >= table.value.scrollWidth) {\n scrollClass.value = 'is-scrolling-none'\n } else {\n scrollClass.value = 'is-scrolling-left'\n }\n }\n\n const scrollEventHandler = (event: Event) => {\n const { scrollLeft, offsetWidth, scrollWidth } = event.target as HTMLElement\n const maxScrollLeftPosition = scrollWidth - offsetWidth - 1\n if (scrollLeft >= maxScrollLeftPosition) {\n scrollClass.value = 'is-scrolling-right'\n } else if (scrollLeft === 0) {\n scrollClass.value = 'is-scrolling-left'\n } else {\n scrollClass.value = 'is-scrolling-middle'\n }\n }\n\n const addScrollEvent = () => {\n if (hasFixedCol()) {\n const container = getScrollContainer()\n initScrollClass(container)\n container?.addEventListener('scroll', scrollEventHandler, {\n passive: true,\n })\n\n resizeObserver = new ResizeObserver(debounce(() => {\n initScrollClass(container)\n }, 300))\n resizeObserver.observe(container)\n } else {\n scrollClass.value = 'is-scrolling-none'\n }\n }\n\n const removeScrollEvent = () => {\n const container = getScrollContainer()\n container?.removeEventListener('scroll', scrollEventHandler)\n\n resizeObserver && resizeObserver.disconnect()\n resizeObserver = null\n }\n\n watch(() => cols.value.realCols, () => {\n !resizeObserver && addScrollEvent()\n }, {\n deep: true,\n })\n\n onMounted(() => {\n addScrollEvent()\n })\n\n onBeforeUnmount(() => {\n removeScrollEvent()\n })\n\n return {\n scrollClass,\n }\n}\n\nexport { useScroll }\n"],"names":[],"mappings":"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"}