| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451 |
- 'use strict';
- Object.defineProperty(exports, '__esModule', { value: true });
- var vue = require('vue');
- var core = require('@vueuse/core');
- var scrollbar = require('../components/scrollbar.js');
- var useGridWheel = require('../hooks/use-grid-wheel.js');
- var useCache = require('../hooks/use-cache.js');
- var props = require('../props.js');
- var utils = require('../utils.js');
- var defaults = require('../defaults.js');
- var index = require('../../../../hooks/use-namespace/index.js');
- var types = require('../../../../utils/types.js');
- var scroll = require('../../../../utils/dom/scroll.js');
- var shared = require('@vue/shared');
- const createGrid = ({
- name,
- clearCache,
- getColumnPosition,
- getColumnStartIndexForOffset,
- getColumnStopIndexForStartIndex,
- getEstimatedTotalHeight,
- getEstimatedTotalWidth,
- getColumnOffset,
- getRowOffset,
- getRowPosition,
- getRowStartIndexForOffset,
- getRowStopIndexForStartIndex,
- initCache,
- injectToInstance,
- validateProps
- }) => {
- return vue.defineComponent({
- name: name != null ? name : "ElVirtualList",
- props: props.virtualizedGridProps,
- emits: [defaults.ITEM_RENDER_EVT, defaults.SCROLL_EVT],
- setup(props, { emit, expose, slots }) {
- const ns = index.useNamespace("vl");
- validateProps(props);
- const instance = vue.getCurrentInstance();
- const cache = vue.ref(initCache(props, instance));
- injectToInstance == null ? void 0 : injectToInstance(instance, cache);
- const windowRef = vue.ref();
- const hScrollbar = vue.ref();
- const vScrollbar = vue.ref();
- const innerRef = vue.ref(null);
- const states = vue.ref({
- isScrolling: false,
- scrollLeft: types.isNumber(props.initScrollLeft) ? props.initScrollLeft : 0,
- scrollTop: types.isNumber(props.initScrollTop) ? props.initScrollTop : 0,
- updateRequested: false,
- xAxisScrollDir: defaults.FORWARD,
- yAxisScrollDir: defaults.FORWARD
- });
- const getItemStyleCache = useCache.useCache();
- const parsedHeight = vue.computed(() => Number.parseInt(`${props.height}`, 10));
- const parsedWidth = vue.computed(() => Number.parseInt(`${props.width}`, 10));
- const columnsToRender = vue.computed(() => {
- const { totalColumn, totalRow, columnCache } = props;
- const { isScrolling, xAxisScrollDir, scrollLeft } = vue.unref(states);
- if (totalColumn === 0 || totalRow === 0) {
- return [0, 0, 0, 0];
- }
- const startIndex = getColumnStartIndexForOffset(props, scrollLeft, vue.unref(cache));
- const stopIndex = getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, vue.unref(cache));
- const cacheBackward = !isScrolling || xAxisScrollDir === defaults.BACKWARD ? Math.max(1, columnCache) : 1;
- const cacheForward = !isScrolling || xAxisScrollDir === defaults.FORWARD ? Math.max(1, columnCache) : 1;
- return [
- Math.max(0, startIndex - cacheBackward),
- Math.max(0, Math.min(totalColumn - 1, stopIndex + cacheForward)),
- startIndex,
- stopIndex
- ];
- });
- const rowsToRender = vue.computed(() => {
- const { totalColumn, totalRow, rowCache } = props;
- const { isScrolling, yAxisScrollDir, scrollTop } = vue.unref(states);
- if (totalColumn === 0 || totalRow === 0) {
- return [0, 0, 0, 0];
- }
- const startIndex = getRowStartIndexForOffset(props, scrollTop, vue.unref(cache));
- const stopIndex = getRowStopIndexForStartIndex(props, startIndex, scrollTop, vue.unref(cache));
- const cacheBackward = !isScrolling || yAxisScrollDir === defaults.BACKWARD ? Math.max(1, rowCache) : 1;
- const cacheForward = !isScrolling || yAxisScrollDir === defaults.FORWARD ? Math.max(1, rowCache) : 1;
- return [
- Math.max(0, startIndex - cacheBackward),
- Math.max(0, Math.min(totalRow - 1, stopIndex + cacheForward)),
- startIndex,
- stopIndex
- ];
- });
- const estimatedTotalHeight = vue.computed(() => getEstimatedTotalHeight(props, vue.unref(cache)));
- const estimatedTotalWidth = vue.computed(() => getEstimatedTotalWidth(props, vue.unref(cache)));
- const windowStyle = vue.computed(() => {
- var _a;
- return [
- {
- position: "relative",
- overflow: "hidden",
- 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
- },
- (_a = props.style) != null ? _a : {}
- ];
- });
- const innerStyle = vue.computed(() => {
- const width = `${vue.unref(estimatedTotalWidth)}px`;
- const height = `${vue.unref(estimatedTotalHeight)}px`;
- return {
- height,
- pointerEvents: vue.unref(states).isScrolling ? "none" : void 0,
- width
- };
- });
- const emitEvents = () => {
- const { totalColumn, totalRow } = props;
- if (totalColumn > 0 && totalRow > 0) {
- const [
- columnCacheStart,
- columnCacheEnd,
- columnVisibleStart,
- columnVisibleEnd
- ] = vue.unref(columnsToRender);
- const [rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd] = vue.unref(rowsToRender);
- emit(defaults.ITEM_RENDER_EVT, {
- columnCacheStart,
- columnCacheEnd,
- rowCacheStart,
- rowCacheEnd,
- columnVisibleStart,
- columnVisibleEnd,
- rowVisibleStart,
- rowVisibleEnd
- });
- }
- const {
- scrollLeft,
- scrollTop,
- updateRequested,
- xAxisScrollDir,
- yAxisScrollDir
- } = vue.unref(states);
- emit(defaults.SCROLL_EVT, {
- xAxisScrollDir,
- scrollLeft,
- yAxisScrollDir,
- scrollTop,
- updateRequested
- });
- };
- const onScroll = (e) => {
- const {
- clientHeight,
- clientWidth,
- scrollHeight,
- scrollLeft,
- scrollTop,
- scrollWidth
- } = e.currentTarget;
- const _states = vue.unref(states);
- if (_states.scrollTop === scrollTop && _states.scrollLeft === scrollLeft) {
- return;
- }
- let _scrollLeft = scrollLeft;
- if (utils.isRTL(props.direction)) {
- switch (utils.getRTLOffsetType()) {
- case defaults.RTL_OFFSET_NAG:
- _scrollLeft = -scrollLeft;
- break;
- case defaults.RTL_OFFSET_POS_DESC:
- _scrollLeft = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- }
- states.value = {
- ..._states,
- isScrolling: true,
- scrollLeft: _scrollLeft,
- scrollTop: Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight)),
- updateRequested: true,
- xAxisScrollDir: utils.getScrollDir(_states.scrollLeft, _scrollLeft),
- yAxisScrollDir: utils.getScrollDir(_states.scrollTop, scrollTop)
- };
- vue.nextTick(() => resetIsScrolling());
- onUpdated();
- emitEvents();
- };
- const onVerticalScroll = (distance, totalSteps) => {
- const height = vue.unref(parsedHeight);
- const offset = (estimatedTotalHeight.value - height) / totalSteps * distance;
- scrollTo({
- scrollTop: Math.min(estimatedTotalHeight.value - height, offset)
- });
- };
- const onHorizontalScroll = (distance, totalSteps) => {
- const width = vue.unref(parsedWidth);
- const offset = (estimatedTotalWidth.value - width) / totalSteps * distance;
- scrollTo({
- scrollLeft: Math.min(estimatedTotalWidth.value - width, offset)
- });
- };
- const { onWheel } = useGridWheel.useGridWheel({
- atXStartEdge: vue.computed(() => states.value.scrollLeft <= 0),
- atXEndEdge: vue.computed(() => states.value.scrollLeft >= estimatedTotalWidth.value - vue.unref(parsedWidth)),
- atYStartEdge: vue.computed(() => states.value.scrollTop <= 0),
- atYEndEdge: vue.computed(() => states.value.scrollTop >= estimatedTotalHeight.value - vue.unref(parsedHeight))
- }, (x, y) => {
- var _a, _b, _c, _d;
- (_b = (_a = hScrollbar.value) == null ? void 0 : _a.onMouseUp) == null ? void 0 : _b.call(_a);
- (_d = (_c = vScrollbar.value) == null ? void 0 : _c.onMouseUp) == null ? void 0 : _d.call(_c);
- const width = vue.unref(parsedWidth);
- const height = vue.unref(parsedHeight);
- scrollTo({
- scrollLeft: Math.min(states.value.scrollLeft + x, estimatedTotalWidth.value - width),
- scrollTop: Math.min(states.value.scrollTop + y, estimatedTotalHeight.value - height)
- });
- });
- core.useEventListener(windowRef, "wheel", onWheel, {
- passive: false
- });
- const scrollTo = ({
- scrollLeft = states.value.scrollLeft,
- scrollTop = states.value.scrollTop
- }) => {
- scrollLeft = Math.max(scrollLeft, 0);
- scrollTop = Math.max(scrollTop, 0);
- const _states = vue.unref(states);
- if (scrollTop === _states.scrollTop && scrollLeft === _states.scrollLeft) {
- return;
- }
- states.value = {
- ..._states,
- xAxisScrollDir: utils.getScrollDir(_states.scrollLeft, scrollLeft),
- yAxisScrollDir: utils.getScrollDir(_states.scrollTop, scrollTop),
- scrollLeft,
- scrollTop,
- updateRequested: true
- };
- vue.nextTick(() => resetIsScrolling());
- onUpdated();
- emitEvents();
- };
- const scrollToItem = (rowIndex = 0, columnIdx = 0, alignment = defaults.AUTO_ALIGNMENT) => {
- const _states = vue.unref(states);
- columnIdx = Math.max(0, Math.min(columnIdx, props.totalColumn - 1));
- rowIndex = Math.max(0, Math.min(rowIndex, props.totalRow - 1));
- const scrollBarWidth = scroll.getScrollBarWidth(ns.namespace.value);
- const _cache = vue.unref(cache);
- const estimatedHeight = getEstimatedTotalHeight(props, _cache);
- const estimatedWidth = getEstimatedTotalWidth(props, _cache);
- scrollTo({
- scrollLeft: getColumnOffset(props, columnIdx, alignment, _states.scrollLeft, _cache, estimatedWidth > props.width ? scrollBarWidth : 0),
- scrollTop: getRowOffset(props, rowIndex, alignment, _states.scrollTop, _cache, estimatedHeight > props.height ? scrollBarWidth : 0)
- });
- };
- const getItemStyle = (rowIndex, columnIndex) => {
- const { columnWidth, direction, rowHeight } = props;
- const itemStyleCache = getItemStyleCache.value(clearCache && columnWidth, clearCache && rowHeight, clearCache && direction);
- const key = `${rowIndex},${columnIndex}`;
- if (shared.hasOwn(itemStyleCache, key)) {
- return itemStyleCache[key];
- } else {
- const [, left] = getColumnPosition(props, columnIndex, vue.unref(cache));
- const _cache = vue.unref(cache);
- const rtl = utils.isRTL(direction);
- const [height, top] = getRowPosition(props, rowIndex, _cache);
- const [width] = getColumnPosition(props, columnIndex, _cache);
- itemStyleCache[key] = {
- position: "absolute",
- left: rtl ? void 0 : `${left}px`,
- right: rtl ? `${left}px` : void 0,
- top: `${top}px`,
- height: `${height}px`,
- width: `${width}px`
- };
- return itemStyleCache[key];
- }
- };
- const resetIsScrolling = () => {
- states.value.isScrolling = false;
- vue.nextTick(() => {
- getItemStyleCache.value(-1, null, null);
- });
- };
- vue.onMounted(() => {
- if (!core.isClient)
- return;
- const { initScrollLeft, initScrollTop } = props;
- const windowElement = vue.unref(windowRef);
- if (windowElement) {
- if (types.isNumber(initScrollLeft)) {
- windowElement.scrollLeft = initScrollLeft;
- }
- if (types.isNumber(initScrollTop)) {
- windowElement.scrollTop = initScrollTop;
- }
- }
- emitEvents();
- });
- const onUpdated = () => {
- const { direction } = props;
- const { scrollLeft, scrollTop, updateRequested } = vue.unref(states);
- const windowElement = vue.unref(windowRef);
- if (updateRequested && windowElement) {
- if (direction === defaults.RTL) {
- switch (utils.getRTLOffsetType()) {
- case defaults.RTL_OFFSET_NAG: {
- windowElement.scrollLeft = -scrollLeft;
- break;
- }
- case defaults.RTL_OFFSET_POS_ASC: {
- windowElement.scrollLeft = scrollLeft;
- break;
- }
- default: {
- const { clientWidth, scrollWidth } = windowElement;
- windowElement.scrollLeft = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- }
- } else {
- windowElement.scrollLeft = Math.max(0, scrollLeft);
- }
- windowElement.scrollTop = Math.max(0, scrollTop);
- }
- };
- const { resetAfterColumnIndex, resetAfterRowIndex, resetAfter } = instance.proxy;
- expose({
- windowRef,
- innerRef,
- getItemStyleCache,
- scrollTo,
- scrollToItem,
- states,
- resetAfterColumnIndex,
- resetAfterRowIndex,
- resetAfter
- });
- const renderScrollbars = () => {
- const {
- scrollbarAlwaysOn,
- scrollbarStartGap,
- scrollbarEndGap,
- totalColumn,
- totalRow
- } = props;
- const width = vue.unref(parsedWidth);
- const height = vue.unref(parsedHeight);
- const estimatedWidth = vue.unref(estimatedTotalWidth);
- const estimatedHeight = vue.unref(estimatedTotalHeight);
- const { scrollLeft, scrollTop } = vue.unref(states);
- const horizontalScrollbar = vue.h(scrollbar["default"], {
- ref: hScrollbar,
- alwaysOn: scrollbarAlwaysOn,
- startGap: scrollbarStartGap,
- endGap: scrollbarEndGap,
- class: ns.e("horizontal"),
- clientSize: width,
- layout: "horizontal",
- onScroll: onHorizontalScroll,
- ratio: width * 100 / estimatedWidth,
- scrollFrom: scrollLeft / (estimatedWidth - width),
- total: totalRow,
- visible: true
- });
- const verticalScrollbar = vue.h(scrollbar["default"], {
- ref: vScrollbar,
- alwaysOn: scrollbarAlwaysOn,
- startGap: scrollbarStartGap,
- endGap: scrollbarEndGap,
- class: ns.e("vertical"),
- clientSize: height,
- layout: "vertical",
- onScroll: onVerticalScroll,
- ratio: height * 100 / estimatedHeight,
- scrollFrom: scrollTop / (estimatedHeight - height),
- total: totalColumn,
- visible: true
- });
- return {
- horizontalScrollbar,
- verticalScrollbar
- };
- };
- const renderItems = () => {
- var _a;
- const [columnStart, columnEnd] = vue.unref(columnsToRender);
- const [rowStart, rowEnd] = vue.unref(rowsToRender);
- const { data, totalColumn, totalRow, useIsScrolling, itemKey } = props;
- const children = [];
- if (totalRow > 0 && totalColumn > 0) {
- for (let row = rowStart; row <= rowEnd; row++) {
- for (let column = columnStart; column <= columnEnd; column++) {
- const key = itemKey({ columnIndex: column, data, rowIndex: row });
- children.push(vue.h(vue.Fragment, { key }, (_a = slots.default) == null ? void 0 : _a.call(slots, {
- columnIndex: column,
- data,
- isScrolling: useIsScrolling ? vue.unref(states).isScrolling : void 0,
- style: getItemStyle(row, column),
- rowIndex: row
- })));
- }
- }
- }
- return children;
- };
- const renderInner = () => {
- const Inner = vue.resolveDynamicComponent(props.innerElement);
- const children = renderItems();
- return [
- vue.h(Inner, {
- style: vue.unref(innerStyle),
- ref: innerRef
- }, !shared.isString(Inner) ? {
- default: () => children
- } : children)
- ];
- };
- const renderWindow = () => {
- const Container = vue.resolveDynamicComponent(props.containerElement);
- const { horizontalScrollbar, verticalScrollbar } = renderScrollbars();
- const Inner = renderInner();
- return vue.h("div", {
- key: 0,
- class: ns.e("wrapper"),
- role: props.role
- }, [
- vue.h(Container, {
- class: props.className,
- style: vue.unref(windowStyle),
- onScroll,
- ref: windowRef
- }, !shared.isString(Container) ? { default: () => Inner } : Inner),
- horizontalScrollbar,
- verticalScrollbar
- ]);
- };
- return renderWindow;
- }
- });
- };
- exports["default"] = createGrid;
- //# sourceMappingURL=build-grid.js.map
|