This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,10 @@
export { default as FixedSizeList } from './src/components/fixed-size-list';
export { default as DynamicSizeList } from './src/components/dynamic-size-list';
export { default as FixedSizeGrid } from './src/components/fixed-size-grid';
export { default as DynamicSizeGrid } from './src/components/dynamic-size-grid';
export * from './src/props';
export type { FixedSizeListInstance } from './src/components/fixed-size-list';
export type { DynamicSizeListInstance } from './src/components/dynamic-size-list';
export type { GridInstance } from './src/builders/build-grid';
export type { DynamicSizeGridInstance, ResetAfterIndex, ResetAfterIndices, } from './src/components/dynamic-size-grid';
export * from './src/types';

View File

@@ -0,0 +1,21 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var fixedSizeList = require('./src/components/fixed-size-list.js');
var dynamicSizeList = require('./src/components/dynamic-size-list.js');
var fixedSizeGrid = require('./src/components/fixed-size-grid.js');
var dynamicSizeGrid = require('./src/components/dynamic-size-grid.js');
var props = require('./src/props.js');
exports.FixedSizeList = fixedSizeList["default"];
exports.DynamicSizeList = dynamicSizeList["default"];
exports.FixedSizeGrid = fixedSizeGrid["default"];
exports.DynamicSizeGrid = dynamicSizeGrid["default"];
exports.virtualizedGridProps = props.virtualizedGridProps;
exports.virtualizedListProps = props.virtualizedListProps;
exports.virtualizedProps = props.virtualizedProps;
exports.virtualizedScrollbarProps = props.virtualizedScrollbarProps;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,214 @@
import { useCache } from '../hooks/use-cache';
import { BACKWARD, FORWARD } from '../defaults';
import type { CSSProperties, Ref, StyleValue, UnwrapRef, VNode } from 'vue';
import type { Alignment, GridConstructorProps, GridScrollOptions } from '../types';
import type { VirtualizedGridProps } from '../props';
declare const createGrid: ({ name, clearCache, getColumnPosition, getColumnStartIndexForOffset, getColumnStopIndexForStartIndex, getEstimatedTotalHeight, getEstimatedTotalWidth, getColumnOffset, getRowOffset, getRowPosition, getRowStartIndexForOffset, getRowStopIndexForStartIndex, initCache, injectToInstance, validateProps, }: GridConstructorProps<VirtualizedGridProps>) => import("vue").DefineComponent<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize) | ((new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("../types").GridItemKeyGetter) | (() => import("../types").GridItemKeyGetter) | {
(): import("../types").GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | ((new (...args: any[]) => import("../types").GridItemKeyGetter) | (() => import("../types").GridItemKeyGetter) | {
(): import("../types").GridItemKeyGetter;
new (): any;
readonly prototype: any;
})[], unknown, unknown, ({ columnIndex, rowIndex, }: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize) | ((new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize) | ((new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("../types").GridItemKeyGetter) | (() => import("../types").GridItemKeyGetter) | {
(): import("../types").GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | ((new (...args: any[]) => import("../types").GridItemKeyGetter) | (() => import("../types").GridItemKeyGetter) | {
(): import("../types").GridItemKeyGetter;
new (): any;
readonly prototype: any;
})[], unknown, unknown, ({ columnIndex, rowIndex, }: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize) | ((new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}>> & {
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}, {
readonly data: any[];
readonly direction: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly className: string;
readonly containerElement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown>;
readonly innerElement: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly perfMode: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly scrollbarAlwaysOn: boolean;
readonly itemKey: import("../types").GridItemKeyGetter;
readonly columnCache: number;
readonly initScrollLeft: number;
readonly initScrollTop: number;
readonly rowCache: number;
readonly hScrollbarSize: number;
readonly vScrollbarSize: number;
readonly scrollbarStartGap: number;
readonly scrollbarEndGap: number;
}>;
export default createGrid;
type Dir = typeof FORWARD | typeof BACKWARD;
export type GridInstance = InstanceType<ReturnType<typeof createGrid>> & UnwrapRef<{
windowRef: Ref<HTMLElement>;
innerRef: Ref<HTMLElement>;
getItemStyleCache: ReturnType<typeof useCache>;
scrollTo: (scrollOptions: GridScrollOptions) => void;
scrollToItem: (rowIndex: number, columnIndex: number, alignment: Alignment) => void;
states: Ref<{
isScrolling: boolean;
scrollLeft: number;
scrollTop: number;
updateRequested: boolean;
xAxisScrollDir: Dir;
yAxisScrollDir: Dir;
}>;
}>;

View File

@@ -0,0 +1,451 @@
'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

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,167 @@
import type { CSSProperties } from 'vue';
import type { Alignment, ListConstructorProps } from '../types';
import type { VirtualizedListProps } from '../props';
declare const createList: ({ name, getOffset, getItemSize, getItemOffset, getEstimatedTotalSize, getStartIndexForOffset, getStopIndexForStartIndex, initCache, clearCache, validateProps, }: ListConstructorProps<VirtualizedListProps>) => import("vue").DefineComponent<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize) | ((new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}, {
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
clientSize: import("vue").ComputedRef<string | number | undefined>;
estimatedTotalSize: import("vue").ComputedRef<number>;
windowStyle: import("vue").ComputedRef<(string | CSSProperties | import("vue").StyleValue[] | {
[x: string]: string;
position: string;
WebkitOverflowScrolling: string;
willChange: string;
} | undefined)[]>;
windowRef: import("vue").Ref<HTMLElement | undefined>;
innerRef: import("vue").Ref<HTMLElement | undefined>;
innerStyle: import("vue").ComputedRef<{
height: string;
pointerEvents: string | undefined;
width: string;
}>;
itemsToRender: import("vue").ComputedRef<number[]>;
scrollbarRef: import("vue").Ref<any>;
states: import("vue").Ref<{
isScrolling: boolean;
scrollDir: string;
scrollOffset: number;
updateRequested: boolean;
isScrollbarDragging: boolean;
scrollbarAlwaysOn: boolean;
}>;
getItemStyle: (idx: number) => CSSProperties;
onScroll: (e: Event) => void;
onScrollbarScroll: (distanceToGo: number, totalSteps: number) => void;
onWheel: (e: WheelEvent) => void;
scrollTo: (offset: number) => void;
scrollToItem: (idx: number, alignment?: Alignment) => void;
resetScrollTop: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize) | ((new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & {
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}, {
readonly data: any[];
readonly direction: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly layout: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "horizontal" | "vertical", never>;
readonly className: string;
readonly containerElement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown>;
readonly innerElement: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly perfMode: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly scrollbarAlwaysOn: boolean;
readonly cache: number;
readonly initScrollOffset: number;
}>;
export default createList;

View File

@@ -0,0 +1,367 @@
'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

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,206 @@
import type { GridInstance } from '../builders/build-grid';
import type { ItemSize } from '../types';
type Indices = {
columnIndex?: number;
rowIndex?: number;
};
declare const DynamicSizeGrid: import("vue").DefineComponent<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | ((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("../types").GridItemKeyGetter) | (() => import("../types").GridItemKeyGetter) | {
(): import("../types").GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | ((new (...args: any[]) => import("../types").GridItemKeyGetter) | (() => import("../types").GridItemKeyGetter) | {
(): import("../types").GridItemKeyGetter;
new (): any;
readonly prototype: any;
})[], unknown, unknown, ({ columnIndex, rowIndex, }: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | ((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | ((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("../types").GridItemKeyGetter) | (() => import("../types").GridItemKeyGetter) | {
(): import("../types").GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | ((new (...args: any[]) => import("../types").GridItemKeyGetter) | (() => import("../types").GridItemKeyGetter) | {
(): import("../types").GridItemKeyGetter;
new (): any;
readonly prototype: any;
})[], unknown, unknown, ({ columnIndex, rowIndex, }: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | ((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}>> & {
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}, {
readonly data: any[];
readonly direction: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly className: string;
readonly containerElement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown>;
readonly innerElement: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly perfMode: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly scrollbarAlwaysOn: boolean;
readonly itemKey: import("../types").GridItemKeyGetter;
readonly columnCache: number;
readonly initScrollLeft: number;
readonly initScrollTop: number;
readonly rowCache: number;
readonly hScrollbarSize: number;
readonly vScrollbarSize: number;
readonly scrollbarStartGap: number;
readonly scrollbarEndGap: number;
}>;
export default DynamicSizeGrid;
export type ResetAfterIndex = (idx: number, forceUpdate: boolean) => void;
export type ResetAfterIndices = (indices: Indices, forceUpdate: boolean) => void;
export type DynamicSizeGridInstance = GridInstance & {
resetAfterColumnIndex: ResetAfterIndex;
resetAfterRowIndex: ResetAfterIndex;
resetAfter: ResetAfterIndices;
};

View File

@@ -0,0 +1,235 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var buildGrid = require('../builders/build-grid.js');
var defaults = require('../defaults.js');
var types = require('../../../../utils/types.js');
const { max, min, floor } = Math;
const ACCESS_SIZER_KEY_MAP = {
column: "columnWidth",
row: "rowHeight"
};
const ACCESS_LAST_VISITED_KEY_MAP = {
column: "lastVisitedColumnIndex",
row: "lastVisitedRowIndex"
};
const getItemFromCache = (props, index, gridCache, type) => {
const [cachedItems, sizer, lastVisited] = [
gridCache[type],
props[ACCESS_SIZER_KEY_MAP[type]],
gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]]
];
if (index > lastVisited) {
let offset = 0;
if (lastVisited >= 0) {
const item = cachedItems[lastVisited];
offset = item.offset + item.size;
}
for (let i = lastVisited + 1; i <= index; i++) {
const size = sizer(i);
cachedItems[i] = {
offset,
size
};
offset += size;
}
gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]] = index;
}
return cachedItems[index];
};
const bs = (props, gridCache, low, high, offset, type) => {
while (low <= high) {
const mid = low + floor((high - low) / 2);
const currentOffset = getItemFromCache(props, mid, gridCache, type).offset;
if (currentOffset === offset) {
return mid;
} else if (currentOffset < offset) {
low = mid + 1;
} else {
high = mid - 1;
}
}
return max(0, low - 1);
};
const es = (props, gridCache, idx, offset, type) => {
const total = type === "column" ? props.totalColumn : props.totalRow;
let exponent = 1;
while (idx < total && getItemFromCache(props, idx, gridCache, type).offset < offset) {
idx += exponent;
exponent *= 2;
}
return bs(props, gridCache, floor(idx / 2), min(idx, total - 1), offset, type);
};
const findItem = (props, gridCache, offset, type) => {
const [cache, lastVisitedIndex] = [
gridCache[type],
gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]]
];
const lastVisitedItemOffset = lastVisitedIndex > 0 ? cache[lastVisitedIndex].offset : 0;
if (lastVisitedItemOffset >= offset) {
return bs(props, gridCache, 0, lastVisitedIndex, offset, type);
}
return es(props, gridCache, max(0, lastVisitedIndex), offset, type);
};
const getEstimatedTotalHeight = ({ totalRow }, { estimatedRowHeight, lastVisitedRowIndex, row }) => {
let sizeOfVisitedRows = 0;
if (lastVisitedRowIndex >= totalRow) {
lastVisitedRowIndex = totalRow - 1;
}
if (lastVisitedRowIndex >= 0) {
const item = row[lastVisitedRowIndex];
sizeOfVisitedRows = item.offset + item.size;
}
const unvisitedItems = totalRow - lastVisitedRowIndex - 1;
const sizeOfUnvisitedItems = unvisitedItems * estimatedRowHeight;
return sizeOfVisitedRows + sizeOfUnvisitedItems;
};
const getEstimatedTotalWidth = ({ totalColumn }, { column, estimatedColumnWidth, lastVisitedColumnIndex }) => {
let sizeOfVisitedColumns = 0;
if (lastVisitedColumnIndex > totalColumn) {
lastVisitedColumnIndex = totalColumn - 1;
}
if (lastVisitedColumnIndex >= 0) {
const item = column[lastVisitedColumnIndex];
sizeOfVisitedColumns = item.offset + item.size;
}
const unvisitedItems = totalColumn - lastVisitedColumnIndex - 1;
const sizeOfUnvisitedItems = unvisitedItems * estimatedColumnWidth;
return sizeOfVisitedColumns + sizeOfUnvisitedItems;
};
const ACCESS_ESTIMATED_SIZE_KEY_MAP = {
column: getEstimatedTotalWidth,
row: getEstimatedTotalHeight
};
const getOffset = (props, index, alignment, scrollOffset, cache, type, scrollBarWidth) => {
const [size, estimatedSizeAssociates] = [
type === "row" ? props.height : props.width,
ACCESS_ESTIMATED_SIZE_KEY_MAP[type]
];
const item = getItemFromCache(props, index, cache, type);
const estimatedSize = estimatedSizeAssociates(props, cache);
const maxOffset = max(0, min(estimatedSize - size, item.offset));
const minOffset = max(0, item.offset - size + scrollBarWidth + item.size);
if (alignment === defaults.SMART_ALIGNMENT) {
if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
alignment = defaults.AUTO_ALIGNMENT;
} else {
alignment = defaults.CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case defaults.START_ALIGNMENT: {
return maxOffset;
}
case defaults.END_ALIGNMENT: {
return minOffset;
}
case defaults.CENTERED_ALIGNMENT: {
return Math.round(minOffset + (maxOffset - minOffset) / 2);
}
case defaults.AUTO_ALIGNMENT:
default: {
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
return scrollOffset;
} else if (minOffset > maxOffset) {
return minOffset;
} else if (scrollOffset < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
}
};
const DynamicSizeGrid = buildGrid["default"]({
name: "ElDynamicSizeGrid",
getColumnPosition: (props, idx, cache) => {
const item = getItemFromCache(props, idx, cache, "column");
return [item.size, item.offset];
},
getRowPosition: (props, idx, cache) => {
const item = getItemFromCache(props, idx, cache, "row");
return [item.size, item.offset];
},
getColumnOffset: (props, columnIndex, alignment, scrollLeft, cache, scrollBarWidth) => getOffset(props, columnIndex, alignment, scrollLeft, cache, "column", scrollBarWidth),
getRowOffset: (props, rowIndex, alignment, scrollTop, cache, scrollBarWidth) => getOffset(props, rowIndex, alignment, scrollTop, cache, "row", scrollBarWidth),
getColumnStartIndexForOffset: (props, scrollLeft, cache) => findItem(props, cache, scrollLeft, "column"),
getColumnStopIndexForStartIndex: (props, startIndex, scrollLeft, cache) => {
const item = getItemFromCache(props, startIndex, cache, "column");
const maxOffset = scrollLeft + props.width;
let offset = item.offset + item.size;
let stopIndex = startIndex;
while (stopIndex < props.totalColumn - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache(props, startIndex, cache, "column").size;
}
return stopIndex;
},
getEstimatedTotalHeight,
getEstimatedTotalWidth,
getRowStartIndexForOffset: (props, scrollTop, cache) => findItem(props, cache, scrollTop, "row"),
getRowStopIndexForStartIndex: (props, startIndex, scrollTop, cache) => {
const { totalRow, height } = props;
const item = getItemFromCache(props, startIndex, cache, "row");
const maxOffset = scrollTop + height;
let offset = item.size + item.offset;
let stopIndex = startIndex;
while (stopIndex < totalRow - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache(props, stopIndex, cache, "row").size;
}
return stopIndex;
},
injectToInstance: (instance, cache) => {
const resetAfter = ({ columnIndex, rowIndex }, forceUpdate) => {
var _a, _b;
forceUpdate = types.isUndefined(forceUpdate) ? true : forceUpdate;
if (types.isNumber(columnIndex)) {
cache.value.lastVisitedColumnIndex = Math.min(cache.value.lastVisitedColumnIndex, columnIndex - 1);
}
if (types.isNumber(rowIndex)) {
cache.value.lastVisitedRowIndex = Math.min(cache.value.lastVisitedRowIndex, rowIndex - 1);
}
(_a = instance.exposed) == null ? void 0 : _a.getItemStyleCache.value(-1, null, null);
if (forceUpdate)
(_b = instance.proxy) == null ? void 0 : _b.$forceUpdate();
};
const resetAfterColumnIndex = (columnIndex, forceUpdate) => {
resetAfter({
columnIndex
}, forceUpdate);
};
const resetAfterRowIndex = (rowIndex, forceUpdate) => {
resetAfter({
rowIndex
}, forceUpdate);
};
Object.assign(instance.proxy, {
resetAfterColumnIndex,
resetAfterRowIndex,
resetAfter
});
},
initCache: ({
estimatedColumnWidth = defaults.DEFAULT_DYNAMIC_LIST_ITEM_SIZE,
estimatedRowHeight = defaults.DEFAULT_DYNAMIC_LIST_ITEM_SIZE
}) => {
const cache = {
column: {},
estimatedColumnWidth,
estimatedRowHeight,
lastVisitedColumnIndex: -1,
lastVisitedRowIndex: -1,
row: {}
};
return cache;
},
clearCache: false,
validateProps: ({ columnWidth, rowHeight }) => {
}
});
exports["default"] = DynamicSizeGrid;
//# sourceMappingURL=dynamic-size-grid.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,166 @@
import type { ItemSize } from '../types';
declare const DynamicSizeList: import("vue").DefineComponent<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | ((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}, {
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
clientSize: import("vue").ComputedRef<string | number | undefined>;
estimatedTotalSize: import("vue").ComputedRef<number>;
windowStyle: import("vue").ComputedRef<(string | import("vue").CSSProperties | import("vue").StyleValue[] | {
[x: string]: string;
position: string;
WebkitOverflowScrolling: string;
willChange: string;
} | undefined)[]>;
windowRef: import("vue").Ref<HTMLElement | undefined>;
innerRef: import("vue").Ref<HTMLElement | undefined>;
innerStyle: import("vue").ComputedRef<{
height: string;
pointerEvents: string | undefined;
width: string;
}>;
itemsToRender: import("vue").ComputedRef<number[]>;
scrollbarRef: import("vue").Ref<any>;
states: import("vue").Ref<{
isScrolling: boolean;
scrollDir: string;
scrollOffset: number;
updateRequested: boolean;
isScrollbarDragging: boolean;
scrollbarAlwaysOn: boolean;
}>;
getItemStyle: (idx: number) => import("vue").CSSProperties;
onScroll: (e: Event) => void;
onScrollbarScroll: (distanceToGo: number, totalSteps: number) => void;
onWheel: (e: WheelEvent) => void;
scrollTo: (offset: number) => void;
scrollToItem: (idx: number, alignment?: import("../types").Alignment) => void;
resetScrollTop: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | ((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & {
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}, {
readonly data: any[];
readonly direction: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly layout: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "horizontal" | "vertical", never>;
readonly className: string;
readonly containerElement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown>;
readonly innerElement: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly perfMode: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly scrollbarAlwaysOn: boolean;
readonly cache: number;
readonly initScrollOffset: number;
}>;
export type DynamicSizeListInstance = InstanceType<typeof DynamicSizeList> & unknown;
export default DynamicSizeList;

View File

@@ -0,0 +1,151 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var buildList = require('../builders/build-list.js');
var utils = require('../utils.js');
var defaults = require('../defaults.js');
const getItemFromCache = (props, index, listCache) => {
const { itemSize } = props;
const { items, lastVisitedIndex } = listCache;
if (index > lastVisitedIndex) {
let offset = 0;
if (lastVisitedIndex >= 0) {
const item = items[lastVisitedIndex];
offset = item.offset + item.size;
}
for (let i = lastVisitedIndex + 1; i <= index; i++) {
const size = itemSize(i);
items[i] = {
offset,
size
};
offset += size;
}
listCache.lastVisitedIndex = index;
}
return items[index];
};
const findItem = (props, listCache, offset) => {
const { items, lastVisitedIndex } = listCache;
const lastVisitedOffset = lastVisitedIndex > 0 ? items[lastVisitedIndex].offset : 0;
if (lastVisitedOffset >= offset) {
return bs(props, listCache, 0, lastVisitedIndex, offset);
}
return es(props, listCache, Math.max(0, lastVisitedIndex), offset);
};
const bs = (props, listCache, low, high, offset) => {
while (low <= high) {
const mid = low + Math.floor((high - low) / 2);
const currentOffset = getItemFromCache(props, mid, listCache).offset;
if (currentOffset === offset) {
return mid;
} else if (currentOffset < offset) {
low = mid + 1;
} else if (currentOffset > offset) {
high = mid - 1;
}
}
return Math.max(0, low - 1);
};
const es = (props, listCache, index, offset) => {
const { total } = props;
let exponent = 1;
while (index < total && getItemFromCache(props, index, listCache).offset < offset) {
index += exponent;
exponent *= 2;
}
return bs(props, listCache, Math.floor(index / 2), Math.min(index, total - 1), offset);
};
const getEstimatedTotalSize = ({ total }, { items, estimatedItemSize, lastVisitedIndex }) => {
let totalSizeOfMeasuredItems = 0;
if (lastVisitedIndex >= total) {
lastVisitedIndex = total - 1;
}
if (lastVisitedIndex >= 0) {
const item = items[lastVisitedIndex];
totalSizeOfMeasuredItems = item.offset + item.size;
}
const numUnmeasuredItems = total - lastVisitedIndex - 1;
const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
};
const DynamicSizeList = buildList["default"]({
name: "ElDynamicSizeList",
getItemOffset: (props, index, listCache) => getItemFromCache(props, index, listCache).offset,
getItemSize: (_, index, { items }) => items[index].size,
getEstimatedTotalSize,
getOffset: (props, index, alignment, scrollOffset, listCache) => {
const { height, layout, width } = props;
const size = utils.isHorizontal(layout) ? width : height;
const item = getItemFromCache(props, index, listCache);
const estimatedTotalSize = getEstimatedTotalSize(props, listCache);
const maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, item.offset));
const minOffset = Math.max(0, item.offset - size + item.size);
if (alignment === defaults.SMART_ALIGNMENT) {
if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
alignment = defaults.AUTO_ALIGNMENT;
} else {
alignment = defaults.CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case defaults.START_ALIGNMENT: {
return maxOffset;
}
case defaults.END_ALIGNMENT: {
return minOffset;
}
case defaults.CENTERED_ALIGNMENT: {
return Math.round(minOffset + (maxOffset - minOffset) / 2);
}
case defaults.AUTO_ALIGNMENT:
default: {
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
return scrollOffset;
} else if (scrollOffset < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
}
},
getStartIndexForOffset: (props, offset, listCache) => findItem(props, listCache, offset),
getStopIndexForStartIndex: (props, startIndex, scrollOffset, listCache) => {
const { height, total, layout, width } = props;
const size = utils.isHorizontal(layout) ? width : height;
const item = getItemFromCache(props, startIndex, listCache);
const maxOffset = scrollOffset + size;
let offset = item.offset + item.size;
let stopIndex = startIndex;
while (stopIndex < total - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache(props, stopIndex, listCache).size;
}
return stopIndex;
},
initCache({ estimatedItemSize = defaults.DEFAULT_DYNAMIC_LIST_ITEM_SIZE }, instance) {
const cache = {
items: {},
estimatedItemSize,
lastVisitedIndex: -1
};
cache.clearCacheAfterIndex = (index, forceUpdate = true) => {
var _a, _b;
cache.lastVisitedIndex = Math.min(cache.lastVisitedIndex, index - 1);
(_a = instance.exposed) == null ? void 0 : _a.getItemStyleCache(-1);
if (forceUpdate) {
(_b = instance.proxy) == null ? void 0 : _b.$forceUpdate();
}
};
return cache;
},
clearCache: false,
validateProps: ({ itemSize }) => {
}
});
exports["default"] = DynamicSizeList;
//# sourceMappingURL=dynamic-size-list.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,193 @@
declare const FixedSizeGrid: import("vue").DefineComponent<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize) | ((new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("element-plus").GridItemKeyGetter) | (() => import("element-plus").GridItemKeyGetter) | {
(): import("element-plus").GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | ((new (...args: any[]) => import("element-plus").GridItemKeyGetter) | (() => import("element-plus").GridItemKeyGetter) | {
(): import("element-plus").GridItemKeyGetter;
new (): any;
readonly prototype: any;
})[], unknown, unknown, ({ columnIndex, rowIndex, }: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize) | ((new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize) | ((new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("element-plus").GridItemKeyGetter) | (() => import("element-plus").GridItemKeyGetter) | {
(): import("element-plus").GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | ((new (...args: any[]) => import("element-plus").GridItemKeyGetter) | (() => import("element-plus").GridItemKeyGetter) | {
(): import("element-plus").GridItemKeyGetter;
new (): any;
readonly prototype: any;
})[], unknown, unknown, ({ columnIndex, rowIndex, }: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize) | ((new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}>> & {
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}, {
readonly data: any[];
readonly direction: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly className: string;
readonly containerElement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown>;
readonly innerElement: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly perfMode: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly scrollbarAlwaysOn: boolean;
readonly itemKey: import("element-plus").GridItemKeyGetter;
readonly columnCache: number;
readonly initScrollLeft: number;
readonly initScrollTop: number;
readonly rowCache: number;
readonly hScrollbarSize: number;
readonly vScrollbarSize: number;
readonly scrollbarStartGap: number;
readonly scrollbarEndGap: number;
}>;
export default FixedSizeGrid;

View File

@@ -0,0 +1,119 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var buildGrid = require('../builders/build-grid.js');
var defaults = require('../defaults.js');
const FixedSizeGrid = buildGrid["default"]({
name: "ElFixedSizeGrid",
getColumnPosition: ({ columnWidth }, index) => [
columnWidth,
index * columnWidth
],
getRowPosition: ({ rowHeight }, index) => [
rowHeight,
index * rowHeight
],
getEstimatedTotalHeight: ({ totalRow, rowHeight }) => rowHeight * totalRow,
getEstimatedTotalWidth: ({ totalColumn, columnWidth }) => columnWidth * totalColumn,
getColumnOffset: ({ totalColumn, columnWidth, width }, columnIndex, alignment, scrollLeft, _, scrollBarWidth) => {
width = Number(width);
const lastColumnOffset = Math.max(0, totalColumn * columnWidth - width);
const maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
const minOffset = Math.max(0, columnIndex * columnWidth - width + scrollBarWidth + columnWidth);
if (alignment === "smart") {
if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
alignment = defaults.AUTO_ALIGNMENT;
} else {
alignment = defaults.CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case defaults.START_ALIGNMENT:
return maxOffset;
case defaults.END_ALIGNMENT:
return minOffset;
case defaults.CENTERED_ALIGNMENT: {
const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
if (middleOffset < Math.ceil(width / 2)) {
return 0;
} else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
return lastColumnOffset;
} else {
return middleOffset;
}
}
case defaults.AUTO_ALIGNMENT:
default:
if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
return scrollLeft;
} else if (minOffset > maxOffset) {
return minOffset;
} else if (scrollLeft < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
},
getRowOffset: ({ rowHeight, height, totalRow }, rowIndex, align, scrollTop, _, scrollBarWidth) => {
height = Number(height);
const lastRowOffset = Math.max(0, totalRow * rowHeight - height);
const maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
const minOffset = Math.max(0, rowIndex * rowHeight - height + scrollBarWidth + rowHeight);
if (align === defaults.SMART_ALIGNMENT) {
if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
align = defaults.AUTO_ALIGNMENT;
} else {
align = defaults.CENTERED_ALIGNMENT;
}
}
switch (align) {
case defaults.START_ALIGNMENT:
return maxOffset;
case defaults.END_ALIGNMENT:
return minOffset;
case defaults.CENTERED_ALIGNMENT: {
const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
if (middleOffset < Math.ceil(height / 2)) {
return 0;
} else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
return lastRowOffset;
} else {
return middleOffset;
}
}
case defaults.AUTO_ALIGNMENT:
default:
if (scrollTop >= minOffset && scrollTop <= maxOffset) {
return scrollTop;
} else if (minOffset > maxOffset) {
return minOffset;
} else if (scrollTop < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
},
getColumnStartIndexForOffset: ({ columnWidth, totalColumn }, scrollLeft) => Math.max(0, Math.min(totalColumn - 1, Math.floor(scrollLeft / columnWidth))),
getColumnStopIndexForStartIndex: ({ columnWidth, totalColumn, width }, startIndex, scrollLeft) => {
const left = startIndex * columnWidth;
const visibleColumnsCount = Math.ceil((width + scrollLeft - left) / columnWidth);
return Math.max(0, Math.min(totalColumn - 1, startIndex + visibleColumnsCount - 1));
},
getRowStartIndexForOffset: ({ rowHeight, totalRow }, scrollTop) => Math.max(0, Math.min(totalRow - 1, Math.floor(scrollTop / rowHeight))),
getRowStopIndexForStartIndex: ({ rowHeight, totalRow, height }, startIndex, scrollTop) => {
const top = startIndex * rowHeight;
const numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
return Math.max(0, Math.min(totalRow - 1, startIndex + numVisibleRows - 1));
},
initCache: () => void 0,
clearCache: true,
validateProps: ({ columnWidth, rowHeight }) => {
}
});
exports["default"] = FixedSizeGrid;
//# sourceMappingURL=fixed-size-grid.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,165 @@
declare const FixedSizeList: import("vue").DefineComponent<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize) | ((new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}, {
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
clientSize: import("vue").ComputedRef<string | number | undefined>;
estimatedTotalSize: import("vue").ComputedRef<number>;
windowStyle: import("vue").ComputedRef<(string | import("vue").CSSProperties | import("vue").StyleValue[] | {
[x: string]: string;
position: string;
WebkitOverflowScrolling: string;
willChange: string;
} | undefined)[]>;
windowRef: import("vue").Ref<HTMLElement | undefined>;
innerRef: import("vue").Ref<HTMLElement | undefined>;
innerStyle: import("vue").ComputedRef<{
height: string;
pointerEvents: string | undefined;
width: string;
}>;
itemsToRender: import("vue").ComputedRef<number[]>;
scrollbarRef: import("vue").Ref<any>;
states: import("vue").Ref<{
isScrolling: boolean;
scrollDir: string;
scrollOffset: number;
updateRequested: boolean;
isScrollbarDragging: boolean;
scrollbarAlwaysOn: boolean;
}>;
getItemStyle: (idx: number) => import("vue").CSSProperties;
onScroll: (e: Event) => void;
onScrollbarScroll: (distanceToGo: number, totalSteps: number) => void;
onWheel: (e: WheelEvent) => void;
scrollTo: (offset: number) => void;
scrollToItem: (idx: number, alignment?: import("element-plus").Alignment) => void;
resetScrollTop: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize) | ((new (...args: any[]) => number | import("element-plus").ItemSize) | (() => number | import("element-plus").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & {
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}, {
readonly data: any[];
readonly direction: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly layout: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "horizontal" | "vertical", never>;
readonly className: string;
readonly containerElement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown>;
readonly innerElement: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly perfMode: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly scrollbarAlwaysOn: boolean;
readonly cache: number;
readonly initScrollOffset: number;
}>;
export type FixedSizeListInstance = InstanceType<typeof FixedSizeList> & unknown;
export default FixedSizeList;

View File

@@ -0,0 +1,71 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var buildList = require('../builders/build-list.js');
var utils = require('../utils.js');
var defaults = require('../defaults.js');
const FixedSizeList = buildList["default"]({
name: "ElFixedSizeList",
getItemOffset: ({ itemSize }, index) => index * itemSize,
getItemSize: ({ itemSize }) => itemSize,
getEstimatedTotalSize: ({ total, itemSize }) => itemSize * total,
getOffset: ({ height, total, itemSize, layout, width }, index, alignment, scrollOffset) => {
const size = utils.isHorizontal(layout) ? width : height;
const lastItemOffset = Math.max(0, total * itemSize - size);
const maxOffset = Math.min(lastItemOffset, index * itemSize);
const minOffset = Math.max(0, (index + 1) * itemSize - size);
if (alignment === defaults.SMART_ALIGNMENT) {
if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
alignment = defaults.AUTO_ALIGNMENT;
} else {
alignment = defaults.CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case defaults.START_ALIGNMENT: {
return maxOffset;
}
case defaults.END_ALIGNMENT: {
return minOffset;
}
case defaults.CENTERED_ALIGNMENT: {
const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
if (middleOffset < Math.ceil(size / 2)) {
return 0;
} else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
return lastItemOffset;
} else {
return middleOffset;
}
}
case defaults.AUTO_ALIGNMENT:
default: {
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
return scrollOffset;
} else if (scrollOffset < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
}
},
getStartIndexForOffset: ({ total, itemSize }, offset) => Math.max(0, Math.min(total - 1, Math.floor(offset / itemSize))),
getStopIndexForStartIndex: ({ height, total, itemSize, layout, width }, startIndex, scrollOffset) => {
const offset = startIndex * itemSize;
const size = utils.isHorizontal(layout) ? width : height;
const numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
return Math.max(0, Math.min(total - 1, startIndex + numVisibleItems - 1));
},
initCache() {
return void 0;
},
clearCache: true,
validateProps() {
}
});
exports["default"] = FixedSizeList;
//# sourceMappingURL=fixed-size-list.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,79 @@
declare const ScrollBar: import("vue").DefineComponent<{
readonly alwaysOn: BooleanConstructor;
readonly class: StringConstructor;
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly ratio: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly clientSize: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly scrollFrom: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly scrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly startGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly endGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly visible: BooleanConstructor;
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "start-move" | "stop-move")[], "scroll" | "start-move" | "stop-move", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly alwaysOn: BooleanConstructor;
readonly class: StringConstructor;
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly ratio: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly clientSize: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly scrollFrom: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly scrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly startGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly endGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly visible: BooleanConstructor;
}>> & {
onScroll?: ((...args: any[]) => any) | undefined;
"onStart-move"?: ((...args: any[]) => any) | undefined;
"onStop-move"?: ((...args: any[]) => any) | undefined;
}, {
readonly visible: boolean;
readonly layout: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "horizontal" | "vertical", never>;
readonly alwaysOn: boolean;
readonly scrollbarSize: number;
readonly startGap: number;
readonly endGap: number;
}>;
export default ScrollBar;

View File

@@ -0,0 +1,160 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var defaults = require('../defaults.js');
var props = require('../props.js');
var utils = require('../utils.js');
var util = require('../../../scrollbar/src/util.js');
var index = require('../../../../hooks/use-namespace/index.js');
var raf = require('../../../../utils/raf.js');
const ScrollBar = vue.defineComponent({
name: "ElVirtualScrollBar",
props: props.virtualizedScrollbarProps,
emits: ["scroll", "start-move", "stop-move"],
setup(props, { emit }) {
const GAP = vue.computed(() => props.startGap + props.endGap);
const nsVirtualScrollbar = index.useNamespace("virtual-scrollbar");
const nsScrollbar = index.useNamespace("scrollbar");
const trackRef = vue.ref();
const thumbRef = vue.ref();
let frameHandle = null;
let onselectstartStore = null;
const state = vue.reactive({
isDragging: false,
traveled: 0
});
const bar = vue.computed(() => util.BAR_MAP[props.layout]);
const trackSize = vue.computed(() => props.clientSize - vue.unref(GAP));
const trackStyle = vue.computed(() => ({
position: "absolute",
width: `${defaults.HORIZONTAL === props.layout ? trackSize.value : props.scrollbarSize}px`,
height: `${defaults.HORIZONTAL === props.layout ? props.scrollbarSize : trackSize.value}px`,
[defaults.ScrollbarDirKey[props.layout]]: "2px",
right: "2px",
bottom: "2px",
borderRadius: "4px"
}));
const thumbSize = vue.computed(() => {
const ratio = props.ratio;
if (ratio >= 100) {
return Number.POSITIVE_INFINITY;
}
if (ratio >= 50) {
return ratio * trackSize.value / 100;
}
const SCROLLBAR_MAX_SIZE = trackSize.value / 3;
return Math.floor(Math.min(Math.max(ratio * trackSize.value / 100, defaults.SCROLLBAR_MIN_SIZE), SCROLLBAR_MAX_SIZE));
});
const thumbStyle = vue.computed(() => {
if (!Number.isFinite(thumbSize.value)) {
return {
display: "none"
};
}
const thumb = `${thumbSize.value}px`;
const style = utils.renderThumbStyle({
bar: bar.value,
size: thumb,
move: state.traveled
}, props.layout);
return style;
});
const totalSteps = vue.computed(() => Math.ceil(props.clientSize - thumbSize.value - vue.unref(GAP)));
const attachEvents = () => {
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
const thumbEl = vue.unref(thumbRef);
if (!thumbEl)
return;
onselectstartStore = document.onselectstart;
document.onselectstart = () => false;
thumbEl.addEventListener("touchmove", onMouseMove, { passive: true });
thumbEl.addEventListener("touchend", onMouseUp);
};
const detachEvents = () => {
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
document.onselectstart = onselectstartStore;
onselectstartStore = null;
const thumbEl = vue.unref(thumbRef);
if (!thumbEl)
return;
thumbEl.removeEventListener("touchmove", onMouseMove);
thumbEl.removeEventListener("touchend", onMouseUp);
};
const onThumbMouseDown = (e) => {
e.stopImmediatePropagation();
if (e.ctrlKey || [1, 2].includes(e.button)) {
return;
}
state.isDragging = true;
state[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
emit("start-move");
attachEvents();
};
const onMouseUp = () => {
state.isDragging = false;
state[bar.value.axis] = 0;
emit("stop-move");
detachEvents();
};
const onMouseMove = (e) => {
const { isDragging } = state;
if (!isDragging)
return;
if (!thumbRef.value || !trackRef.value)
return;
const prevPage = state[bar.value.axis];
if (!prevPage)
return;
raf.cAF(frameHandle);
const offset = (trackRef.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
const thumbClickPosition = thumbRef.value[bar.value.offset] - prevPage;
const distance = offset - thumbClickPosition;
frameHandle = raf.rAF(() => {
state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
emit("scroll", distance, totalSteps.value);
});
};
const clickTrackHandler = (e) => {
const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
const thumbHalf = thumbRef.value[bar.value.offset] / 2;
const distance = offset - thumbHalf;
state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
emit("scroll", distance, totalSteps.value);
};
vue.watch(() => props.scrollFrom, (v) => {
if (state.isDragging)
return;
state.traveled = Math.ceil(v * totalSteps.value);
});
vue.onBeforeUnmount(() => {
detachEvents();
});
return () => {
return vue.h("div", {
role: "presentation",
ref: trackRef,
class: [
nsVirtualScrollbar.b(),
props.class,
(props.alwaysOn || state.isDragging) && "always-on"
],
style: trackStyle.value,
onMousedown: vue.withModifiers(clickTrackHandler, ["stop", "prevent"]),
onTouchstartPrevent: onThumbMouseDown
}, vue.h("div", {
ref: thumbRef,
class: nsScrollbar.e("thumb"),
style: thumbStyle.value,
onMousedown: onThumbMouseDown
}, []));
};
}
});
exports["default"] = ScrollBar;
//# sourceMappingURL=scrollbar.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,26 @@
export declare const DEFAULT_DYNAMIC_LIST_ITEM_SIZE = 50;
export declare const ITEM_RENDER_EVT = "itemRendered";
export declare const SCROLL_EVT = "scroll";
export declare const FORWARD = "forward";
export declare const BACKWARD = "backward";
export declare const AUTO_ALIGNMENT = "auto";
export declare const SMART_ALIGNMENT = "smart";
export declare const START_ALIGNMENT = "start";
export declare const CENTERED_ALIGNMENT = "center";
export declare const END_ALIGNMENT = "end";
export declare const HORIZONTAL = "horizontal";
export declare const VERTICAL = "vertical";
export declare const LTR = "ltr";
export declare const RTL = "rtl";
export declare const RTL_OFFSET_NAG = "negative";
export declare const RTL_OFFSET_POS_ASC = "positive-ascending";
export declare const RTL_OFFSET_POS_DESC = "positive-descending";
export declare const ScrollbarSizeKey: {
horizontal: string;
vertical: string;
};
export declare const ScrollbarDirKey: {
horizontal: string;
vertical: string;
};
export declare const SCROLLBAR_MIN_SIZE = 20;

View File

@@ -0,0 +1,52 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const DEFAULT_DYNAMIC_LIST_ITEM_SIZE = 50;
const ITEM_RENDER_EVT = "itemRendered";
const SCROLL_EVT = "scroll";
const FORWARD = "forward";
const BACKWARD = "backward";
const AUTO_ALIGNMENT = "auto";
const SMART_ALIGNMENT = "smart";
const START_ALIGNMENT = "start";
const CENTERED_ALIGNMENT = "center";
const END_ALIGNMENT = "end";
const HORIZONTAL = "horizontal";
const VERTICAL = "vertical";
const LTR = "ltr";
const RTL = "rtl";
const RTL_OFFSET_NAG = "negative";
const RTL_OFFSET_POS_ASC = "positive-ascending";
const RTL_OFFSET_POS_DESC = "positive-descending";
const ScrollbarSizeKey = {
[HORIZONTAL]: "height",
[VERTICAL]: "width"
};
const ScrollbarDirKey = {
[HORIZONTAL]: "left",
[VERTICAL]: "top"
};
const SCROLLBAR_MIN_SIZE = 20;
exports.AUTO_ALIGNMENT = AUTO_ALIGNMENT;
exports.BACKWARD = BACKWARD;
exports.CENTERED_ALIGNMENT = CENTERED_ALIGNMENT;
exports.DEFAULT_DYNAMIC_LIST_ITEM_SIZE = DEFAULT_DYNAMIC_LIST_ITEM_SIZE;
exports.END_ALIGNMENT = END_ALIGNMENT;
exports.FORWARD = FORWARD;
exports.HORIZONTAL = HORIZONTAL;
exports.ITEM_RENDER_EVT = ITEM_RENDER_EVT;
exports.LTR = LTR;
exports.RTL = RTL;
exports.RTL_OFFSET_NAG = RTL_OFFSET_NAG;
exports.RTL_OFFSET_POS_ASC = RTL_OFFSET_POS_ASC;
exports.RTL_OFFSET_POS_DESC = RTL_OFFSET_POS_DESC;
exports.SCROLLBAR_MIN_SIZE = SCROLLBAR_MIN_SIZE;
exports.SCROLL_EVT = SCROLL_EVT;
exports.SMART_ALIGNMENT = SMART_ALIGNMENT;
exports.START_ALIGNMENT = START_ALIGNMENT;
exports.ScrollbarDirKey = ScrollbarDirKey;
exports.ScrollbarSizeKey = ScrollbarSizeKey;
exports.VERTICAL = VERTICAL;
//# sourceMappingURL=defaults.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"defaults.js","sources":["../../../../../../packages/components/virtual-list/src/defaults.ts"],"sourcesContent":["export const DEFAULT_DYNAMIC_LIST_ITEM_SIZE = 50\n\nexport const ITEM_RENDER_EVT = 'itemRendered'\nexport const SCROLL_EVT = 'scroll'\n\nexport const FORWARD = 'forward'\nexport const BACKWARD = 'backward'\n\nexport const AUTO_ALIGNMENT = 'auto'\nexport const SMART_ALIGNMENT = 'smart'\nexport const START_ALIGNMENT = 'start'\nexport const CENTERED_ALIGNMENT = 'center'\nexport const END_ALIGNMENT = 'end'\n\nexport const HORIZONTAL = 'horizontal'\nexport const VERTICAL = 'vertical'\n\nexport const LTR = 'ltr'\nexport const RTL = 'rtl'\n\nexport const RTL_OFFSET_NAG = 'negative'\nexport const RTL_OFFSET_POS_ASC = 'positive-ascending'\nexport const RTL_OFFSET_POS_DESC = 'positive-descending'\n\nexport const ScrollbarSizeKey = {\n [HORIZONTAL]: 'height',\n [VERTICAL]: 'width',\n}\n\nexport const ScrollbarDirKey = {\n [HORIZONTAL]: 'left',\n [VERTICAL]: 'top',\n}\n\nexport const SCROLLBAR_MIN_SIZE = 20\n"],"names":[],"mappings":";;;;AAAY,MAAC,8BAA8B,GAAG,GAAG;AACrC,MAAC,eAAe,GAAG,eAAe;AAClC,MAAC,UAAU,GAAG,SAAS;AACvB,MAAC,OAAO,GAAG,UAAU;AACrB,MAAC,QAAQ,GAAG,WAAW;AACvB,MAAC,cAAc,GAAG,OAAO;AACzB,MAAC,eAAe,GAAG,QAAQ;AAC3B,MAAC,eAAe,GAAG,QAAQ;AAC3B,MAAC,kBAAkB,GAAG,SAAS;AAC/B,MAAC,aAAa,GAAG,MAAM;AACvB,MAAC,UAAU,GAAG,aAAa;AAC3B,MAAC,QAAQ,GAAG,WAAW;AACvB,MAAC,GAAG,GAAG,MAAM;AACb,MAAC,GAAG,GAAG,MAAM;AACb,MAAC,cAAc,GAAG,WAAW;AAC7B,MAAC,kBAAkB,GAAG,qBAAqB;AAC3C,MAAC,mBAAmB,GAAG,sBAAsB;AAC7C,MAAC,gBAAgB,GAAG;AAChC,EAAE,CAAC,UAAU,GAAG,QAAQ;AACxB,EAAE,CAAC,QAAQ,GAAG,OAAO;AACrB,EAAE;AACU,MAAC,eAAe,GAAG;AAC/B,EAAE,CAAC,UAAU,GAAG,MAAM;AACtB,EAAE,CAAC,QAAQ,GAAG,KAAK;AACnB,EAAE;AACU,MAAC,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1 @@
export declare const useCache: <T>() => import("vue").ComputedRef<(((_: any, __: any, ___: any) => Record<string, T>) & import("lodash").MemoizedFunction) | import("memoize-one").MemoizedFn<(_: any, __: any, ___: any) => Record<string, T>>>;

View File

@@ -0,0 +1,23 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var memoOne = require('memoize-one');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var memoOne__default = /*#__PURE__*/_interopDefaultLegacy(memoOne);
const useCache = () => {
const vm = vue.getCurrentInstance();
const props = vm.proxy.$props;
return vue.computed(() => {
const _getItemStyleCache = (_, __, ___) => ({});
return props.perfMode ? lodashUnified.memoize(_getItemStyleCache) : memoOne__default["default"](_getItemStyleCache);
});
};
exports.useCache = useCache;
//# sourceMappingURL=use-cache.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-cache.js","sources":["../../../../../../../packages/components/virtual-list/src/hooks/use-cache.ts"],"sourcesContent":["import { computed, getCurrentInstance } from 'vue'\nimport { memoize } from 'lodash-unified'\nimport memoOne from 'memoize-one'\n\nimport type { VirtualizedProps } from '../props'\n\nexport const useCache = <T>() => {\n const vm = getCurrentInstance()!\n\n const props = vm.proxy!.$props as VirtualizedProps\n\n return computed(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const _getItemStyleCache = (_: any, __: any, ___: any) =>\n ({} as Record<string, T>)\n return props.perfMode\n ? memoize(_getItemStyleCache)\n : memoOne(_getItemStyleCache)\n })\n}\n"],"names":["getCurrentInstance","computed","memoize","memoOne"],"mappings":";;;;;;;;;;;;AAGY,MAAC,QAAQ,GAAG,MAAM;AAC9B,EAAE,MAAM,EAAE,GAAGA,sBAAkB,EAAE,CAAC;AAClC,EAAE,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC;AAChC,EAAE,OAAOC,YAAQ,CAAC,MAAM;AACxB,IAAI,MAAM,kBAAkB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;AACpD,IAAI,OAAO,KAAK,CAAC,QAAQ,GAAGC,qBAAO,CAAC,kBAAkB,CAAC,GAAGC,2BAAO,CAAC,kBAAkB,CAAC,CAAC;AACtF,GAAG,CAAC,CAAC;AACL;;;;"}

View File

@@ -0,0 +1,13 @@
import type { ComputedRef } from 'vue';
interface GridWheelState {
atXStartEdge: ComputedRef<boolean>;
atXEndEdge: ComputedRef<boolean>;
atYStartEdge: ComputedRef<boolean>;
atYEndEdge: ComputedRef<boolean>;
}
type GridWheelHandler = (x: number, y: number) => void;
export declare const useGridWheel: ({ atXEndEdge, atXStartEdge, atYEndEdge, atYStartEdge }: GridWheelState, onWheelDelta: GridWheelHandler) => {
hasReachedEdge: (x: number, y: number) => boolean;
onWheel: (e: WheelEvent) => void;
};
export {};

View File

@@ -0,0 +1,47 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var raf = require('../../../../utils/raf.js');
const useGridWheel = ({ atXEndEdge, atXStartEdge, atYEndEdge, atYStartEdge }, onWheelDelta) => {
let frameHandle = null;
let xOffset = 0;
let yOffset = 0;
const hasReachedEdge = (x, y) => {
const xEdgeReached = x <= 0 && atXStartEdge.value || x >= 0 && atXEndEdge.value;
const yEdgeReached = y <= 0 && atYStartEdge.value || y >= 0 && atYEndEdge.value;
return xEdgeReached && yEdgeReached;
};
const onWheel = (e) => {
raf.cAF(frameHandle);
let x = e.deltaX;
let y = e.deltaY;
if (Math.abs(x) > Math.abs(y)) {
y = 0;
} else {
x = 0;
}
if (e.shiftKey && y !== 0) {
x = y;
y = 0;
}
if (hasReachedEdge(xOffset, yOffset) && hasReachedEdge(xOffset + x, yOffset + y))
return;
xOffset += x;
yOffset += y;
e.preventDefault();
frameHandle = raf.rAF(() => {
onWheelDelta(xOffset, yOffset);
xOffset = 0;
yOffset = 0;
});
};
return {
hasReachedEdge,
onWheel
};
};
exports.useGridWheel = useGridWheel;
//# sourceMappingURL=use-grid-wheel.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-grid-wheel.js","sources":["../../../../../../../packages/components/virtual-list/src/hooks/use-grid-wheel.ts"],"sourcesContent":["import { cAF, rAF } from '@element-plus/utils'\n\nimport type { ComputedRef } from 'vue'\n\ninterface GridWheelState {\n atXStartEdge: ComputedRef<boolean>\n atXEndEdge: ComputedRef<boolean>\n atYStartEdge: ComputedRef<boolean>\n atYEndEdge: ComputedRef<boolean>\n}\n\ntype GridWheelHandler = (x: number, y: number) => void\n\nexport const useGridWheel = (\n { atXEndEdge, atXStartEdge, atYEndEdge, atYStartEdge }: GridWheelState,\n onWheelDelta: GridWheelHandler\n) => {\n let frameHandle: number | null = null\n let xOffset = 0\n let yOffset = 0\n\n const hasReachedEdge = (x: number, y: number) => {\n const xEdgeReached =\n (x <= 0 && atXStartEdge.value) || (x >= 0 && atXEndEdge.value)\n const yEdgeReached =\n (y <= 0 && atYStartEdge.value) || (y >= 0 && atYEndEdge.value)\n return xEdgeReached && yEdgeReached\n }\n\n const onWheel = (e: WheelEvent) => {\n cAF(frameHandle!)\n\n let x = e.deltaX\n let y = e.deltaY\n // Simulate native behavior when using touch pad/track pad for wheeling.\n if (Math.abs(x) > Math.abs(y)) {\n y = 0\n } else {\n x = 0\n }\n\n // Special case for windows machine with shift key + wheel scrolling\n if (e.shiftKey && y !== 0) {\n x = y\n y = 0\n }\n\n if (\n hasReachedEdge(xOffset, yOffset) &&\n hasReachedEdge(xOffset + x, yOffset + y)\n )\n return\n\n xOffset += x\n yOffset += y\n\n e.preventDefault()\n\n frameHandle = rAF(() => {\n onWheelDelta(xOffset, yOffset)\n xOffset = 0\n yOffset = 0\n })\n }\n\n return {\n hasReachedEdge,\n onWheel,\n }\n}\n"],"names":["cAF","rAF"],"mappings":";;;;;;AACY,MAAC,YAAY,GAAG,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,YAAY,KAAK;AACtG,EAAE,IAAI,WAAW,GAAG,IAAI,CAAC;AACzB,EAAE,IAAI,OAAO,GAAG,CAAC,CAAC;AAClB,EAAE,IAAI,OAAO,GAAG,CAAC,CAAC;AAClB,EAAE,MAAM,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AACnC,IAAI,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC;AACpF,IAAI,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC;AACpF,IAAI,OAAO,YAAY,IAAI,YAAY,CAAC;AACxC,GAAG,CAAC;AACJ,EAAE,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK;AACzB,IAAIA,OAAG,CAAC,WAAW,CAAC,CAAC;AACrB,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;AACrB,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;AACrB,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;AACnC,MAAM,CAAC,GAAG,CAAC,CAAC;AACZ,KAAK,MAAM;AACX,MAAM,CAAC,GAAG,CAAC,CAAC;AACZ,KAAK;AACL,IAAI,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,EAAE;AAC/B,MAAM,CAAC,GAAG,CAAC,CAAC;AACZ,MAAM,CAAC,GAAG,CAAC,CAAC;AACZ,KAAK;AACL,IAAI,IAAI,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC;AACpF,MAAM,OAAO;AACb,IAAI,OAAO,IAAI,CAAC,CAAC;AACjB,IAAI,OAAO,IAAI,CAAC,CAAC;AACjB,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;AACvB,IAAI,WAAW,GAAGC,OAAG,CAAC,MAAM;AAC5B,MAAM,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AACrC,MAAM,OAAO,GAAG,CAAC,CAAC;AAClB,MAAM,OAAO,GAAG,CAAC,CAAC;AAClB,KAAK,CAAC,CAAC;AACP,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,cAAc;AAClB,IAAI,OAAO;AACX,GAAG,CAAC;AACJ;;;;"}

View File

@@ -0,0 +1,13 @@
import type { ComputedRef } from 'vue';
import type { LayoutDirection } from '../types';
interface ListWheelState {
atStartEdge: ComputedRef<boolean>;
atEndEdge: ComputedRef<boolean>;
layout: ComputedRef<LayoutDirection>;
}
type ListWheelHandler = (offset: number) => void;
declare const useWheel: ({ atEndEdge, atStartEdge, layout }: ListWheelState, onWheelDelta: ListWheelHandler) => {
hasReachedEdge: (offset: number) => boolean;
onWheel: (e: WheelEvent) => void;
};
export default useWheel;

View File

@@ -0,0 +1,41 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var defaults = require('../defaults.js');
var raf = require('../../../../utils/raf.js');
var browser = require('../../../../utils/browser.js');
const LayoutKeys = {
[defaults.HORIZONTAL]: "deltaX",
[defaults.VERTICAL]: "deltaY"
};
const useWheel = ({ atEndEdge, atStartEdge, layout }, onWheelDelta) => {
let frameHandle;
let offset = 0;
const hasReachedEdge = (offset2) => {
const edgeReached = offset2 < 0 && atStartEdge.value || offset2 > 0 && atEndEdge.value;
return edgeReached;
};
const onWheel = (e) => {
raf.cAF(frameHandle);
const newOffset = e[LayoutKeys[layout.value]];
if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset))
return;
offset += newOffset;
if (!browser.isFirefox()) {
e.preventDefault();
}
frameHandle = raf.rAF(() => {
onWheelDelta(offset);
offset = 0;
});
};
return {
hasReachedEdge,
onWheel
};
};
exports["default"] = useWheel;
//# sourceMappingURL=use-wheel.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-wheel.js","sources":["../../../../../../../packages/components/virtual-list/src/hooks/use-wheel.ts"],"sourcesContent":["import { cAF, isFirefox, rAF } from '@element-plus/utils'\nimport { HORIZONTAL, VERTICAL } from '../defaults'\n\nimport type { ComputedRef } from 'vue'\nimport type { LayoutDirection } from '../types'\n\nconst LayoutKeys = {\n [HORIZONTAL]: 'deltaX',\n [VERTICAL]: 'deltaY',\n} as const\n\ninterface ListWheelState {\n atStartEdge: ComputedRef<boolean> // exclusive to reachEnd\n atEndEdge: ComputedRef<boolean>\n layout: ComputedRef<LayoutDirection>\n}\n\ntype ListWheelHandler = (offset: number) => void\n\nconst useWheel = (\n { atEndEdge, atStartEdge, layout }: ListWheelState,\n onWheelDelta: ListWheelHandler\n) => {\n let frameHandle: number\n let offset = 0\n\n const hasReachedEdge = (offset: number) => {\n const edgeReached =\n (offset < 0 && atStartEdge.value) || (offset > 0 && atEndEdge.value)\n\n return edgeReached\n }\n\n const onWheel = (e: WheelEvent) => {\n cAF(frameHandle)\n\n const newOffset = e[LayoutKeys[layout.value]]\n\n if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset)) return\n\n offset += newOffset\n\n if (!isFirefox()) {\n e.preventDefault()\n }\n\n frameHandle = rAF(() => {\n onWheelDelta(offset)\n offset = 0\n })\n }\n\n return {\n hasReachedEdge,\n onWheel,\n }\n}\n\nexport default useWheel\n"],"names":["HORIZONTAL","VERTICAL","cAF","isFirefox","rAF"],"mappings":";;;;;;;;AAEA,MAAM,UAAU,GAAG;AACnB,EAAE,CAACA,mBAAU,GAAG,QAAQ;AACxB,EAAE,CAACC,iBAAQ,GAAG,QAAQ;AACtB,CAAC,CAAC;AACG,MAAC,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,YAAY,KAAK;AACvE,EAAE,IAAI,WAAW,CAAC;AAClB,EAAE,IAAI,MAAM,GAAG,CAAC,CAAC;AACjB,EAAE,MAAM,cAAc,GAAG,CAAC,OAAO,KAAK;AACtC,IAAI,MAAM,WAAW,GAAG,OAAO,GAAG,CAAC,IAAI,WAAW,CAAC,KAAK,IAAI,OAAO,GAAG,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC;AAC3F,IAAI,OAAO,WAAW,CAAC;AACvB,GAAG,CAAC;AACJ,EAAE,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK;AACzB,IAAIC,OAAG,CAAC,WAAW,CAAC,CAAC;AACrB,IAAI,MAAM,SAAS,GAAG,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAClD,IAAI,IAAI,cAAc,CAAC,MAAM,CAAC,IAAI,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;AACpE,MAAM,OAAO;AACb,IAAI,MAAM,IAAI,SAAS,CAAC;AACxB,IAAI,IAAI,CAACC,iBAAS,EAAE,EAAE;AACtB,MAAM,CAAC,CAAC,cAAc,EAAE,CAAC;AACzB,KAAK;AACL,IAAI,WAAW,GAAGC,OAAG,CAAC,MAAM;AAC5B,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;AAC3B,MAAM,MAAM,GAAG,CAAC,CAAC;AACjB,KAAK,CAAC,CAAC;AACP,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,cAAc;AAClB,IAAI,OAAO;AACX,GAAG,CAAC;AACJ;;;;"}

View File

@@ -0,0 +1,205 @@
import type { ExtractPropTypes, StyleValue, __ExtractPublicPropTypes } from 'vue';
import type { GridItemKeyGetter, ItemSize } from './types';
export declare const virtualizedProps: {
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
};
export declare const virtualizedListProps: {
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | ((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
export declare const virtualizedGridProps: {
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | ((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | ((new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
})[], unknown, unknown, ({ columnIndex, rowIndex, }: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | ((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
};
export declare const virtualizedScrollbarProps: {
readonly alwaysOn: BooleanConstructor;
readonly class: StringConstructor;
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly ratio: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly clientSize: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly scrollFrom: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly scrollbarSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly startGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly endGap: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly visible: BooleanConstructor;
};
export type VirtualizedProps = ExtractPropTypes<typeof virtualizedProps>;
export type VirtualizedPropsPublic = __ExtractPublicPropTypes<typeof virtualizedProps>;
export type VirtualizedListProps = ExtractPropTypes<typeof virtualizedListProps>;
export type VirtualizedListPropsPublic = __ExtractPublicPropTypes<typeof virtualizedListProps>;
export type VirtualizedGridProps = ExtractPropTypes<typeof virtualizedGridProps>;
export type VirtualizedGridPropsPublic = __ExtractPublicPropTypes<typeof virtualizedGridProps>;
export type VirtualizedScrollbarProps = ExtractPropTypes<typeof virtualizedScrollbarProps>;
export type VirtualizedScrollbarPropsPublic = __ExtractPublicPropTypes<typeof virtualizedScrollbarProps>;

View File

@@ -0,0 +1,141 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var defaults = require('./defaults.js');
var runtime = require('../../../utils/vue/props/runtime.js');
var typescript = require('../../../utils/typescript.js');
const itemSize = runtime.buildProp({
type: runtime.definePropType([Number, Function]),
required: true
});
const estimatedItemSize = runtime.buildProp({
type: Number
});
const cache = runtime.buildProp({
type: Number,
default: 2
});
const direction = runtime.buildProp({
type: String,
values: ["ltr", "rtl"],
default: "ltr"
});
const initScrollOffset = runtime.buildProp({
type: Number,
default: 0
});
const total = runtime.buildProp({
type: Number,
required: true
});
const layout = runtime.buildProp({
type: String,
values: ["horizontal", "vertical"],
default: defaults.VERTICAL
});
const virtualizedProps = runtime.buildProps({
className: {
type: String,
default: ""
},
containerElement: {
type: runtime.definePropType([String, Object]),
default: "div"
},
data: {
type: runtime.definePropType(Array),
default: () => typescript.mutable([])
},
direction,
height: {
type: [String, Number],
required: true
},
innerElement: {
type: [String, Object],
default: "div"
},
style: {
type: runtime.definePropType([Object, String, Array])
},
useIsScrolling: Boolean,
width: {
type: [Number, String],
required: false
},
perfMode: {
type: Boolean,
default: true
},
scrollbarAlwaysOn: Boolean
});
const virtualizedListProps = runtime.buildProps({
cache,
estimatedItemSize,
layout,
initScrollOffset,
total,
itemSize,
...virtualizedProps
});
const scrollbarSize = {
type: Number,
default: 6
};
const startGap = { type: Number, default: 0 };
const endGap = { type: Number, default: 2 };
const virtualizedGridProps = runtime.buildProps({
columnCache: cache,
columnWidth: itemSize,
estimatedColumnWidth: estimatedItemSize,
estimatedRowHeight: estimatedItemSize,
initScrollLeft: initScrollOffset,
initScrollTop: initScrollOffset,
itemKey: {
type: runtime.definePropType(Function),
default: ({
columnIndex,
rowIndex
}) => `${rowIndex}:${columnIndex}`
},
rowCache: cache,
rowHeight: itemSize,
totalColumn: total,
totalRow: total,
hScrollbarSize: scrollbarSize,
vScrollbarSize: scrollbarSize,
scrollbarStartGap: startGap,
scrollbarEndGap: endGap,
role: String,
...virtualizedProps
});
const virtualizedScrollbarProps = runtime.buildProps({
alwaysOn: Boolean,
class: String,
layout,
total,
ratio: {
type: Number,
required: true
},
clientSize: {
type: Number,
required: true
},
scrollFrom: {
type: Number,
required: true
},
scrollbarSize,
startGap,
endGap,
visible: Boolean
});
exports.virtualizedGridProps = virtualizedGridProps;
exports.virtualizedListProps = virtualizedListProps;
exports.virtualizedProps = virtualizedProps;
exports.virtualizedScrollbarProps = virtualizedScrollbarProps;
//# sourceMappingURL=props.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,137 @@
import type { CSSProperties, ComponentInternalInstance, Ref } from 'vue';
export type Instance = ComponentInternalInstance;
export type Alignment = 'auto' | 'smart' | 'center' | 'start' | 'end';
export type ItemSize = (idx: number) => number;
export type Direction = 'ltr' | 'rtl';
export type LayoutDirection = 'horizontal' | 'vertical';
export type RTLOffsetType = 'negative' | 'positive-descending' | 'positive-ascending';
export type ItemProps<T> = {
data: T;
style: CSSProperties;
scrolling?: boolean;
index: number;
};
export type ListItem = {
offset: number;
size: number;
};
export type ListCache = {
items: Record<string, ListItem>;
estimatedItemSize: number;
lastVisitedIndex: number;
clearCacheAfterIndex: (idx: number, forceUpdate?: boolean) => void;
};
export type GridCache = {
column: Record<string, ListItem>;
row: Record<string, ListItem>;
estimatedColumnWidth: number;
estimatedRowHeight: number;
lastVisitedColumnIndex: number;
lastVisitedRowIndex: number;
};
export type ScrollDir = 'forwards' | 'backwards';
export type ListItemSizer<T, P extends InitListCacheFunc<T>> = (props: T, index: number, cache: ReturnType<P>) => number;
export type GetEstimatedTotalSize<T, P extends InitCacheFunc<T, GridCache | ListCache>> = (props: T, cache: ReturnType<P>) => number;
export type GetOffset<T, P extends InitListCacheFunc<T>> = (props: T, idx: number, alignment: Alignment, offset: number, cache: ReturnType<P>) => number;
export type GetStartIndexForOffset<T, P extends InitCacheFunc<T, GridCache | ListCache>> = (props: T, offset: number, cache: ReturnType<P>) => number;
export type GetStopIndexForStartIndex<T, P extends InitCacheFunc<T, GridCache | ListCache>> = (props: T, startIndex: number, scrollOffset: number, cache: ReturnType<P>) => number;
export type PropValidator<T> = (props: T) => void;
export type InitCacheFunc<T, P> = (props: T, cache: Instance) => P;
export type InitListCacheFunc<T> = InitCacheFunc<T, ListCache>;
export type InitGridCacheFunc<T> = InitCacheFunc<T, GridCache>;
export type ListConstructorProps<T, P extends InitListCacheFunc<T> = InitListCacheFunc<T>> = {
name?: string;
getItemOffset: ListItemSizer<T, P>;
getEstimatedTotalSize: GetEstimatedTotalSize<T, P>;
getItemSize: ListItemSizer<T, P>;
getOffset: GetOffset<T, P>;
getStartIndexForOffset: GetStartIndexForOffset<T, P>;
getStopIndexForStartIndex: GetStopIndexForStartIndex<T, P>;
initCache: P;
clearCache: boolean;
validateProps: PropValidator<T>;
};
export type ExposesStates = {
isScrolling: boolean;
updateRequested: boolean;
};
export type SharedExposes = {
windowRef: Ref<HTMLElement>;
innerRef: Ref<HTMLElement>;
getItemStyleCache: (_: any, __: any, ___: any) => CSSProperties;
};
export type ListExposes = {
scrollTo: (offset: number) => void;
scrollToItem: (idx: number, alignment?: Alignment) => void;
states: {
scrollDir: Direction;
scrollOffset: number;
} & ExposesStates;
} & SharedExposes;
export type GridExposes = {
states: {
scrollLeft: number;
scrollTop: number;
xAxisScrollDir: Direction;
yAxisScrollDir: Direction;
} & ExposesStates;
scrollTo: (props: {
scrollLeft: number;
scrollTop: number;
}) => void;
scrollToItem: (columnIndex?: number, rowIndex?: number, alignment?: Alignment) => void;
} & SharedExposes;
export type ScrollbarExpose = {
onMouseUp: () => void;
};
export type GetGridOffset<T, P extends InitGridCacheFunc<T>> = (props: T, index: number, alignment: Alignment, offset: number, cache: ReturnType<P>, scrollbarWidth: number) => number;
export type GetPosition<T, P extends InitGridCacheFunc<T>> = (props: T, index: number, cache: ReturnType<P>) => [number, number];
export type GridConstructorProps<T, P extends InitGridCacheFunc<T> = InitGridCacheFunc<T>> = {
name?: string;
getColumnOffset: GetGridOffset<T, P>;
getColumnPosition: GetPosition<T, P>;
getColumnStartIndexForOffset: GetStartIndexForOffset<T, P>;
getColumnStopIndexForStartIndex: GetStopIndexForStartIndex<T, P>;
getEstimatedTotalHeight: GetEstimatedTotalSize<T, P>;
getEstimatedTotalWidth: GetEstimatedTotalSize<T, P>;
getRowOffset: GetGridOffset<T, P>;
getRowPosition: GetPosition<T, P>;
getRowStartIndexForOffset: GetStartIndexForOffset<T, P>;
getRowStopIndexForStartIndex: GetStopIndexForStartIndex<T, P>;
initCache: P;
injectToInstance?: (instance: Instance, cache: Ref<ReturnType<P>>) => void;
clearCache: boolean;
validateProps: PropValidator<T>;
};
/**
* Instance methods and emits
*/
export type GridDefaultSlotParams = {
columnIndex: number;
rowIndex: number;
data: any;
key: number | string;
isScrolling?: boolean;
style: CSSProperties;
};
export type GridItemRenderedEvtParams = {
columnCacheStart: number;
columnCacheEnd: number;
rowCacheStart: number;
rowCacheEnd: number;
columnVisibleStart: number;
columnVisibleEnd: number;
rowVisibleStart: number;
rowVisibleEnd: number;
};
export type GridScrollOptions = {
scrollLeft?: number;
scrollTop?: number;
};
export type GridItemKeyGetter = <T extends {
[key: string | number]: any;
}>(args: {
columnIndex: number;
data: T;
rowIndex: number;
}) => string | number;

View File

@@ -0,0 +1,3 @@
'use strict';
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

View File

@@ -0,0 +1,16 @@
import type { CSSProperties } from 'vue';
import type { Direction, RTLOffsetType } from './types';
export declare const getScrollDir: (prev: number, cur: number) => "forward" | "backward";
export declare const isHorizontal: (dir: string) => dir is "ltr" | "rtl" | "horizontal";
export declare const isRTL: (dir: Direction) => dir is "rtl";
export declare function getRTLOffsetType(recalculate?: boolean): RTLOffsetType;
type RenderThumbStyleParams = {
bar: {
size: 'height' | 'width';
axis: 'X' | 'Y';
};
size: string;
move: number;
};
export declare function renderThumbStyle({ move, size, bar }: RenderThumbStyleParams, layout: string): CSSProperties;
export {};

View File

@@ -0,0 +1,58 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var defaults = require('./defaults.js');
const getScrollDir = (prev, cur) => prev < cur ? defaults.FORWARD : defaults.BACKWARD;
const isHorizontal = (dir) => dir === defaults.LTR || dir === defaults.RTL || dir === defaults.HORIZONTAL;
const isRTL = (dir) => dir === defaults.RTL;
let cachedRTLResult = null;
function getRTLOffsetType(recalculate = false) {
if (cachedRTLResult === null || recalculate) {
const outerDiv = document.createElement("div");
const outerStyle = outerDiv.style;
outerStyle.width = "50px";
outerStyle.height = "50px";
outerStyle.overflow = "scroll";
outerStyle.direction = "rtl";
const innerDiv = document.createElement("div");
const innerStyle = innerDiv.style;
innerStyle.width = "100px";
innerStyle.height = "100px";
outerDiv.appendChild(innerDiv);
document.body.appendChild(outerDiv);
if (outerDiv.scrollLeft > 0) {
cachedRTLResult = defaults.RTL_OFFSET_POS_DESC;
} else {
outerDiv.scrollLeft = 1;
if (outerDiv.scrollLeft === 0) {
cachedRTLResult = defaults.RTL_OFFSET_NAG;
} else {
cachedRTLResult = defaults.RTL_OFFSET_POS_ASC;
}
}
document.body.removeChild(outerDiv);
return cachedRTLResult;
}
return cachedRTLResult;
}
function renderThumbStyle({ move, size, bar }, layout) {
const style = {};
const translate = `translate${bar.axis}(${move}px)`;
style[bar.size] = size;
style.transform = translate;
if (layout === "horizontal") {
style.height = "100%";
} else {
style.width = "100%";
}
return style;
}
exports.getRTLOffsetType = getRTLOffsetType;
exports.getScrollDir = getScrollDir;
exports.isHorizontal = isHorizontal;
exports.isRTL = isRTL;
exports.renderThumbStyle = renderThumbStyle;
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"utils.js","sources":["../../../../../../packages/components/virtual-list/src/utils.ts"],"sourcesContent":["import {\n BACKWARD,\n FORWARD,\n HORIZONTAL,\n LTR,\n RTL,\n RTL_OFFSET_NAG,\n RTL_OFFSET_POS_ASC,\n RTL_OFFSET_POS_DESC,\n} from './defaults'\n\nimport type { CSSProperties } from 'vue'\nimport type { Direction, RTLOffsetType } from './types'\n\nexport const getScrollDir = (prev: number, cur: number) =>\n prev < cur ? FORWARD : BACKWARD\n\nexport const isHorizontal = (dir: string) =>\n dir === LTR || dir === RTL || dir === HORIZONTAL\n\nexport const isRTL = (dir: Direction) => dir === RTL\n\nlet cachedRTLResult: RTLOffsetType | null = null\n\nexport function getRTLOffsetType(recalculate = false): RTLOffsetType {\n if (cachedRTLResult === null || recalculate) {\n const outerDiv = document.createElement('div')\n const outerStyle = outerDiv.style\n outerStyle.width = '50px'\n outerStyle.height = '50px'\n outerStyle.overflow = 'scroll'\n outerStyle.direction = 'rtl'\n\n const innerDiv = document.createElement('div')\n const innerStyle = innerDiv.style\n innerStyle.width = '100px'\n innerStyle.height = '100px'\n\n outerDiv.appendChild(innerDiv)\n\n document.body.appendChild(outerDiv)\n\n if (outerDiv.scrollLeft > 0) {\n cachedRTLResult = RTL_OFFSET_POS_DESC\n } else {\n outerDiv.scrollLeft = 1\n if (outerDiv.scrollLeft === 0) {\n cachedRTLResult = RTL_OFFSET_NAG\n } else {\n cachedRTLResult = RTL_OFFSET_POS_ASC\n }\n }\n\n document.body.removeChild(outerDiv)\n\n return cachedRTLResult\n }\n\n return cachedRTLResult\n}\n\ntype RenderThumbStyleParams = {\n bar: {\n size: 'height' | 'width'\n axis: 'X' | 'Y'\n }\n size: string\n move: number\n}\n\nexport function renderThumbStyle(\n { move, size, bar }: RenderThumbStyleParams,\n layout: string\n) {\n const style: CSSProperties = {}\n const translate = `translate${bar.axis}(${move}px)`\n\n style[bar.size] = size\n style.transform = translate\n\n if (layout === 'horizontal') {\n style.height = '100%'\n } else {\n style.width = '100%'\n }\n\n return style\n}\n"],"names":["FORWARD","BACKWARD","LTR","RTL","HORIZONTAL","RTL_OFFSET_POS_DESC","RTL_OFFSET_NAG","RTL_OFFSET_POS_ASC"],"mappings":";;;;;;AAUY,MAAC,YAAY,GAAG,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,GAAG,GAAG,GAAGA,gBAAO,GAAGC,kBAAS;AAC/D,MAAC,YAAY,GAAG,CAAC,GAAG,KAAK,GAAG,KAAKC,YAAG,IAAI,GAAG,KAAKC,YAAG,IAAI,GAAG,KAAKC,oBAAW;AAC1E,MAAC,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,KAAKD,aAAI;AAC1C,IAAI,eAAe,GAAG,IAAI,CAAC;AACpB,SAAS,gBAAgB,CAAC,WAAW,GAAG,KAAK,EAAE;AACtD,EAAE,IAAI,eAAe,KAAK,IAAI,IAAI,WAAW,EAAE;AAC/C,IAAI,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACnD,IAAI,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC;AACtC,IAAI,UAAU,CAAC,KAAK,GAAG,MAAM,CAAC;AAC9B,IAAI,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC;AAC/B,IAAI,UAAU,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACnC,IAAI,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC;AACjC,IAAI,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACnD,IAAI,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC;AACtC,IAAI,UAAU,CAAC,KAAK,GAAG,OAAO,CAAC;AAC/B,IAAI,UAAU,CAAC,MAAM,GAAG,OAAO,CAAC;AAChC,IAAI,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AACnC,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AACxC,IAAI,IAAI,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;AACjC,MAAM,eAAe,GAAGE,4BAAmB,CAAC;AAC5C,KAAK,MAAM;AACX,MAAM,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAC;AAC9B,MAAM,IAAI,QAAQ,CAAC,UAAU,KAAK,CAAC,EAAE;AACrC,QAAQ,eAAe,GAAGC,uBAAc,CAAC;AACzC,OAAO,MAAM;AACb,QAAQ,eAAe,GAAGC,2BAAkB,CAAC;AAC7C,OAAO;AACP,KAAK;AACL,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AACxC,IAAI,OAAO,eAAe,CAAC;AAC3B,GAAG;AACH,EAAE,OAAO,eAAe,CAAC;AACzB,CAAC;AACM,SAAS,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE;AAC9D,EAAE,MAAM,KAAK,GAAG,EAAE,CAAC;AACnB,EAAE,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;AACtD,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AACzB,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;AAC9B,EAAE,IAAI,MAAM,KAAK,YAAY,EAAE;AAC/B,IAAI,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AAC1B,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;AACzB,GAAG;AACH,EAAE,OAAO,KAAK,CAAC;AACf;;;;;;;;"}

View File

@@ -0,0 +1,3 @@
import 'element-plus/es/components/base/style/css';
import 'element-plus/theme-chalk/el-virtual-list.css';
import 'element-plus/es/components/scrollbar/style/css';

View File

@@ -0,0 +1,7 @@
'use strict';
require('../../base/style/css.js');
require('element-plus/theme-chalk/el-virtual-list.css');
require('../../scrollbar/style/css.js');
//# sourceMappingURL=css.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

View File

@@ -0,0 +1,3 @@
import 'element-plus/es/components/base/style';
import 'element-plus/theme-chalk/src/virtual-list.scss';
import 'element-plus/es/components/scrollbar/style';

View File

@@ -0,0 +1,7 @@
'use strict';
require('../../base/style/index.js');
require('element-plus/theme-chalk/src/virtual-list.scss');
require('../../scrollbar/style/index.js');
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}