1 line
8.9 KiB
Plaintext
1 line
8.9 KiB
Plaintext
|
{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/infinite-scroll/src/index.ts"],"sourcesContent":["import { nextTick } from 'vue'\nimport { isFunction } from '@vue/shared'\nimport throttle from 'lodash/throttle'\nimport {\n getScrollContainer,\n getOffsetTopDistance,\n} from '@element-plus/utils/dom'\nimport { throwError } from '@element-plus/utils/error'\n\nimport type { ObjectDirective, ComponentPublicInstance } from 'vue'\n\nexport const SCOPE = 'ElInfiniteScroll'\nexport const CHECK_INTERVAL = 50\nexport const DEFAULT_DELAY = 200\nexport const DEFAULT_DISTANCE = 0\n\nconst attributes = {\n delay: {\n type: Number,\n default: DEFAULT_DELAY,\n },\n distance: {\n type: Number,\n default: DEFAULT_DISTANCE,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n immediate: {\n type: Boolean,\n default: true,\n },\n}\n\ntype Attrs = typeof attributes\ntype ScrollOptions = { [K in keyof Attrs]: Attrs[K]['default'] }\ntype InfiniteScrollCallback = () => void\ntype InfiniteScrollEl = HTMLElement & {\n [SCOPE]: {\n container: HTMLElement | Window\n containerEl: HTMLElement\n instance: ComponentPublicInstance\n delay: number // export for test\n lastScrollTop: number\n cb: InfiniteScrollCallback\n onScroll: () => void\n observer?: MutationObserver\n }\n}\n\nconst getScrollOptions = (\n el: HTMLElement,\n instance: ComponentPublicInstance\n): ScrollOptions => {\n return Object.entries(attributes).reduce((acm, [name, option]) => {\n const { type, default: defaultValue } = option\n const attrVal = el.getAttribute(`infinite-scroll-${name}`)\n let value = instance[attrVal] ?? attrVal ?? defaultValue\n value = value === 'false' ? false : value\n value = type(value)\n acm[name] = Number.isNaN(value) ? defaultValue : value\n return acm\n }, {} as ScrollOptions)\n}\n\nconst destroyObserver = (el: InfiniteScrollEl) => {\n const { observer } = el[SCOPE]\n\n if (observer) {\n observer.disconnect()\n delete el[SCOPE].observer\n }\n}\n\nconst handleScroll = (el: InfiniteScrollEl, cb: InfiniteScrollCallback) => {\n const { container, containerEl, instance, observer, lastScrollTop } =\n el[SCOPE]\n const { disabled, distance } = getScrollOptions(el, instance)\n const { clientHeight, scrollHeight, scrollTop } = containerEl\n const delta = scrollTop - lastScrollTop\n\n el[SCOPE].lastScrollTop = scrollTop\n\n // trigger only if full check has done and not disabled and scroll down\n if (observer || disabled || delta < 0) return\n\n let shouldTrigger = false\n\n if (container === el) {\n shouldTrigger = scrollHeight - (clientHeight + scrollTop) <= distance\n } else {\n // get the scrollHeight since el might be visible overflow\n const { clientTop, scrollHeight: height } = el\n const offsetTop = getOffsetTopDistance(el, containerEl)\n shouldTrigger =\n scrollTop + clientHeight >= offsetTop + clientTop + height - distance\n }\n\n if (shouldTrigger) {\n cb.call(instance)\n }\n}\n\nfunction checkFull(el: InfiniteScrollEl, cb: InfiniteScrollCallback) {\n const { containerEl, instance } = el[SCOPE]\n const { disabled } = getScrollOptions(el, instance)\n\n if (disabled) return\n\n if (containerEl.scrollHeight <= containerEl.clientHeight) {\n cb.call(instance)\n } else {\n destroyObserver(el)\n }\n}\n\nconst InfiniteScroll: ObjectDirective<\n InfiniteScrollEl,\n InfiniteScrollCallback\n> = {\n async mounted(el, binding) {\n const { instance, value: cb } = binding\n\n if (!isFunction(cb)) {\n throwError(SCOPE, \"'v-infinite-scroll' binding value must be a function\")\n }\n\n // ensure parentNode mounted\n await nextTick()\n\n const { delay, immediate } = getScrollOptions(el, instance)\n const container = getScrollContainer(el, true)\n const containerEl =\n container === window\n ? document.documentElement\n : (container as HTMLElement)\n const onScroll = throttle(handleScroll.bind(null, el, cb), delay)\n\n if (!container
|