| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367 |
- 'use strict';
- Object.defineProperty(exports, '__esModule', { value: true });
- var vue = require('vue');
- var core = require('@vueuse/core');
- var useCache = require('../hooks/use-cache.js');
- var useWheel = require('../hooks/use-wheel.js');
- var scrollbar = require('../components/scrollbar.js');
- var utils = require('../utils.js');
- var props = require('../props.js');
- var defaults = require('../defaults.js');
- var index = require('../../../../hooks/use-namespace/index.js');
- var types = require('../../../../utils/types.js');
- var shared = require('@vue/shared');
- const createList = ({
- name,
- getOffset,
- getItemSize,
- getItemOffset,
- getEstimatedTotalSize,
- getStartIndexForOffset,
- getStopIndexForStartIndex,
- initCache,
- clearCache,
- validateProps
- }) => {
- return vue.defineComponent({
- name: name != null ? name : "ElVirtualList",
- props: props.virtualizedListProps,
- emits: [defaults.ITEM_RENDER_EVT, defaults.SCROLL_EVT],
- setup(props, { emit, expose }) {
- validateProps(props);
- const instance = vue.getCurrentInstance();
- const ns = index.useNamespace("vl");
- const dynamicSizeCache = vue.ref(initCache(props, instance));
- const getItemStyleCache = useCache.useCache();
- const windowRef = vue.ref();
- const innerRef = vue.ref();
- const scrollbarRef = vue.ref();
- const states = vue.ref({
- isScrolling: false,
- scrollDir: "forward",
- scrollOffset: types.isNumber(props.initScrollOffset) ? props.initScrollOffset : 0,
- updateRequested: false,
- isScrollbarDragging: false,
- scrollbarAlwaysOn: props.scrollbarAlwaysOn
- });
- const itemsToRender = vue.computed(() => {
- const { total, cache } = props;
- const { isScrolling, scrollDir, scrollOffset } = vue.unref(states);
- if (total === 0) {
- return [0, 0, 0, 0];
- }
- const startIndex = getStartIndexForOffset(props, scrollOffset, vue.unref(dynamicSizeCache));
- const stopIndex = getStopIndexForStartIndex(props, startIndex, scrollOffset, vue.unref(dynamicSizeCache));
- const cacheBackward = !isScrolling || scrollDir === defaults.BACKWARD ? Math.max(1, cache) : 1;
- const cacheForward = !isScrolling || scrollDir === defaults.FORWARD ? Math.max(1, cache) : 1;
- return [
- Math.max(0, startIndex - cacheBackward),
- Math.max(0, Math.min(total - 1, stopIndex + cacheForward)),
- startIndex,
- stopIndex
- ];
- });
- const estimatedTotalSize = vue.computed(() => getEstimatedTotalSize(props, vue.unref(dynamicSizeCache)));
- const _isHorizontal = vue.computed(() => utils.isHorizontal(props.layout));
- const windowStyle = vue.computed(() => [
- {
- position: "relative",
- [`overflow-${_isHorizontal.value ? "x" : "y"}`]: "scroll",
- WebkitOverflowScrolling: "touch",
- willChange: "transform"
- },
- {
- direction: props.direction,
- height: types.isNumber(props.height) ? `${props.height}px` : props.height,
- width: types.isNumber(props.width) ? `${props.width}px` : props.width
- },
- props.style
- ]);
- const innerStyle = vue.computed(() => {
- const size = vue.unref(estimatedTotalSize);
- const horizontal = vue.unref(_isHorizontal);
- return {
- height: horizontal ? "100%" : `${size}px`,
- pointerEvents: vue.unref(states).isScrolling ? "none" : void 0,
- width: horizontal ? `${size}px` : "100%"
- };
- });
- const clientSize = vue.computed(() => _isHorizontal.value ? props.width : props.height);
- const { onWheel } = useWheel["default"]({
- atStartEdge: vue.computed(() => states.value.scrollOffset <= 0),
- atEndEdge: vue.computed(() => states.value.scrollOffset >= estimatedTotalSize.value),
- layout: vue.computed(() => props.layout)
- }, (offset) => {
- var _a, _b;
- (_b = (_a = scrollbarRef.value).onMouseUp) == null ? void 0 : _b.call(_a);
- scrollTo(Math.min(states.value.scrollOffset + offset, estimatedTotalSize.value - clientSize.value));
- });
- core.useEventListener(windowRef, "wheel", onWheel, {
- passive: false
- });
- const emitEvents = () => {
- const { total } = props;
- if (total > 0) {
- const [cacheStart, cacheEnd, visibleStart, visibleEnd] = vue.unref(itemsToRender);
- emit(defaults.ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd);
- }
- const { scrollDir, scrollOffset, updateRequested } = vue.unref(states);
- emit(defaults.SCROLL_EVT, scrollDir, scrollOffset, updateRequested);
- };
- const scrollVertically = (e) => {
- const { clientHeight, scrollHeight, scrollTop } = e.currentTarget;
- const _states = vue.unref(states);
- if (_states.scrollOffset === scrollTop) {
- return;
- }
- const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
- states.value = {
- ..._states,
- isScrolling: true,
- scrollDir: utils.getScrollDir(_states.scrollOffset, scrollOffset),
- scrollOffset,
- updateRequested: false
- };
- vue.nextTick(resetIsScrolling);
- };
- const scrollHorizontally = (e) => {
- const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
- const _states = vue.unref(states);
- if (_states.scrollOffset === scrollLeft) {
- return;
- }
- const { direction } = props;
- let scrollOffset = scrollLeft;
- if (direction === defaults.RTL) {
- switch (utils.getRTLOffsetType()) {
- case defaults.RTL_OFFSET_NAG: {
- scrollOffset = -scrollLeft;
- break;
- }
- case defaults.RTL_OFFSET_POS_DESC: {
- scrollOffset = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- }
- }
- scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
- states.value = {
- ..._states,
- isScrolling: true,
- scrollDir: utils.getScrollDir(_states.scrollOffset, scrollOffset),
- scrollOffset,
- updateRequested: false
- };
- vue.nextTick(resetIsScrolling);
- };
- const onScroll = (e) => {
- vue.unref(_isHorizontal) ? scrollHorizontally(e) : scrollVertically(e);
- emitEvents();
- };
- const onScrollbarScroll = (distanceToGo, totalSteps) => {
- const offset = (estimatedTotalSize.value - clientSize.value) / totalSteps * distanceToGo;
- scrollTo(Math.min(estimatedTotalSize.value - clientSize.value, offset));
- };
- const scrollTo = (offset) => {
- offset = Math.max(offset, 0);
- if (offset === vue.unref(states).scrollOffset) {
- return;
- }
- states.value = {
- ...vue.unref(states),
- scrollOffset: offset,
- scrollDir: utils.getScrollDir(vue.unref(states).scrollOffset, offset),
- updateRequested: true
- };
- vue.nextTick(resetIsScrolling);
- };
- const scrollToItem = (idx, alignment = defaults.AUTO_ALIGNMENT) => {
- const { scrollOffset } = vue.unref(states);
- idx = Math.max(0, Math.min(idx, props.total - 1));
- scrollTo(getOffset(props, idx, alignment, scrollOffset, vue.unref(dynamicSizeCache)));
- };
- const getItemStyle = (idx) => {
- const { direction, itemSize, layout } = props;
- const itemStyleCache = getItemStyleCache.value(clearCache && itemSize, clearCache && layout, clearCache && direction);
- let style;
- if (shared.hasOwn(itemStyleCache, String(idx))) {
- style = itemStyleCache[idx];
- } else {
- const offset = getItemOffset(props, idx, vue.unref(dynamicSizeCache));
- const size = getItemSize(props, idx, vue.unref(dynamicSizeCache));
- const horizontal = vue.unref(_isHorizontal);
- const isRtl = direction === defaults.RTL;
- const offsetHorizontal = horizontal ? offset : 0;
- itemStyleCache[idx] = style = {
- position: "absolute",
- left: isRtl ? void 0 : `${offsetHorizontal}px`,
- right: isRtl ? `${offsetHorizontal}px` : void 0,
- top: !horizontal ? `${offset}px` : 0,
- height: !horizontal ? `${size}px` : "100%",
- width: horizontal ? `${size}px` : "100%"
- };
- }
- return style;
- };
- const resetIsScrolling = () => {
- states.value.isScrolling = false;
- vue.nextTick(() => {
- getItemStyleCache.value(-1, null, null);
- });
- };
- const resetScrollTop = () => {
- const window = windowRef.value;
- if (window) {
- window.scrollTop = 0;
- }
- };
- vue.onMounted(() => {
- if (!core.isClient)
- return;
- const { initScrollOffset } = props;
- const windowElement = vue.unref(windowRef);
- if (types.isNumber(initScrollOffset) && windowElement) {
- if (vue.unref(_isHorizontal)) {
- windowElement.scrollLeft = initScrollOffset;
- } else {
- windowElement.scrollTop = initScrollOffset;
- }
- }
- emitEvents();
- });
- vue.onUpdated(() => {
- const { direction, layout } = props;
- const { scrollOffset, updateRequested } = vue.unref(states);
- const windowElement = vue.unref(windowRef);
- if (updateRequested && windowElement) {
- if (layout === defaults.HORIZONTAL) {
- if (direction === defaults.RTL) {
- switch (utils.getRTLOffsetType()) {
- case defaults.RTL_OFFSET_NAG: {
- windowElement.scrollLeft = -scrollOffset;
- break;
- }
- case defaults.RTL_OFFSET_POS_ASC: {
- windowElement.scrollLeft = scrollOffset;
- break;
- }
- default: {
- const { clientWidth, scrollWidth } = windowElement;
- windowElement.scrollLeft = scrollWidth - clientWidth - scrollOffset;
- break;
- }
- }
- } else {
- windowElement.scrollLeft = scrollOffset;
- }
- } else {
- windowElement.scrollTop = scrollOffset;
- }
- }
- });
- vue.onActivated(() => {
- vue.unref(windowRef).scrollTop = vue.unref(states).scrollOffset;
- });
- const api = {
- ns,
- clientSize,
- estimatedTotalSize,
- windowStyle,
- windowRef,
- innerRef,
- innerStyle,
- itemsToRender,
- scrollbarRef,
- states,
- getItemStyle,
- onScroll,
- onScrollbarScroll,
- onWheel,
- scrollTo,
- scrollToItem,
- resetScrollTop
- };
- expose({
- windowRef,
- innerRef,
- getItemStyleCache,
- scrollTo,
- scrollToItem,
- resetScrollTop,
- states
- });
- return api;
- },
- render(ctx) {
- var _a;
- const {
- $slots,
- className,
- clientSize,
- containerElement,
- data,
- getItemStyle,
- innerElement,
- itemsToRender,
- innerStyle,
- layout,
- total,
- onScroll,
- onScrollbarScroll,
- states,
- useIsScrolling,
- windowStyle,
- ns
- } = ctx;
- const [start, end] = itemsToRender;
- const Container = vue.resolveDynamicComponent(containerElement);
- const Inner = vue.resolveDynamicComponent(innerElement);
- const children = [];
- if (total > 0) {
- for (let i = start; i <= end; i++) {
- children.push(vue.h(vue.Fragment, { key: i }, (_a = $slots.default) == null ? void 0 : _a.call($slots, {
- data,
- index: i,
- isScrolling: useIsScrolling ? states.isScrolling : void 0,
- style: getItemStyle(i)
- })));
- }
- }
- const InnerNode = [
- vue.h(Inner, {
- style: innerStyle,
- ref: "innerRef"
- }, !shared.isString(Inner) ? {
- default: () => children
- } : children)
- ];
- const scrollbar$1 = vue.h(scrollbar["default"], {
- ref: "scrollbarRef",
- clientSize,
- layout,
- onScroll: onScrollbarScroll,
- ratio: clientSize * 100 / this.estimatedTotalSize,
- scrollFrom: states.scrollOffset / (this.estimatedTotalSize - clientSize),
- total,
- alwaysOn: states.scrollbarAlwaysOn
- });
- const listContainer = vue.h(Container, {
- class: [ns.e("window"), className],
- style: windowStyle,
- onScroll,
- ref: "windowRef",
- key: 0
- }, !shared.isString(Container) ? { default: () => [InnerNode] } : [InnerNode]);
- return vue.h("div", {
- key: 0,
- class: [ns.e("wrapper"), states.scrollbarAlwaysOn ? "always-on" : ""]
- }, [listContainer, scrollbar$1]);
- }
- });
- };
- exports["default"] = createList;
- //# sourceMappingURL=build-list.js.map
|