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,6 @@
export { default as FixedSizeList } from './src/components/fixed-size-list.mjs';
export { default as DynamicSizeList } from './src/components/dynamic-size-list.mjs';
export { default as FixedSizeGrid } from './src/components/fixed-size-grid.mjs';
export { default as DynamicSizeGrid } from './src/components/dynamic-size-grid.mjs';
export { virtualizedGridProps, virtualizedListProps, virtualizedProps, virtualizedScrollbarProps } from './src/props.mjs';
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","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,447 @@
import { defineComponent, getCurrentInstance, ref, computed, unref, onMounted, nextTick, resolveDynamicComponent, h, Fragment } from 'vue';
import { useEventListener, isClient } from '@vueuse/core';
import ScrollBar from '../components/scrollbar.mjs';
import { useGridWheel } from '../hooks/use-grid-wheel.mjs';
import { useCache } from '../hooks/use-cache.mjs';
import { virtualizedGridProps } from '../props.mjs';
import { getScrollDir, getRTLOffsetType, isRTL } from '../utils.mjs';
import { ITEM_RENDER_EVT, SCROLL_EVT, FORWARD, BACKWARD, AUTO_ALIGNMENT, RTL, RTL_OFFSET_POS_ASC, RTL_OFFSET_NAG, RTL_OFFSET_POS_DESC } from '../defaults.mjs';
import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
import { isNumber } from '../../../../utils/types.mjs';
import { getScrollBarWidth } from '../../../../utils/dom/scroll.mjs';
import { isString, hasOwn } from '@vue/shared';
const createGrid = ({
name,
clearCache,
getColumnPosition,
getColumnStartIndexForOffset,
getColumnStopIndexForStartIndex,
getEstimatedTotalHeight,
getEstimatedTotalWidth,
getColumnOffset,
getRowOffset,
getRowPosition,
getRowStartIndexForOffset,
getRowStopIndexForStartIndex,
initCache,
injectToInstance,
validateProps
}) => {
return defineComponent({
name: name != null ? name : "ElVirtualList",
props: virtualizedGridProps,
emits: [ITEM_RENDER_EVT, SCROLL_EVT],
setup(props, { emit, expose, slots }) {
const ns = useNamespace("vl");
validateProps(props);
const instance = getCurrentInstance();
const cache = ref(initCache(props, instance));
injectToInstance == null ? void 0 : injectToInstance(instance, cache);
const windowRef = ref();
const hScrollbar = ref();
const vScrollbar = ref();
const innerRef = ref(null);
const states = ref({
isScrolling: false,
scrollLeft: isNumber(props.initScrollLeft) ? props.initScrollLeft : 0,
scrollTop: isNumber(props.initScrollTop) ? props.initScrollTop : 0,
updateRequested: false,
xAxisScrollDir: FORWARD,
yAxisScrollDir: FORWARD
});
const getItemStyleCache = useCache();
const parsedHeight = computed(() => Number.parseInt(`${props.height}`, 10));
const parsedWidth = computed(() => Number.parseInt(`${props.width}`, 10));
const columnsToRender = computed(() => {
const { totalColumn, totalRow, columnCache } = props;
const { isScrolling, xAxisScrollDir, scrollLeft } = unref(states);
if (totalColumn === 0 || totalRow === 0) {
return [0, 0, 0, 0];
}
const startIndex = getColumnStartIndexForOffset(props, scrollLeft, unref(cache));
const stopIndex = getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, unref(cache));
const cacheBackward = !isScrolling || xAxisScrollDir === BACKWARD ? Math.max(1, columnCache) : 1;
const cacheForward = !isScrolling || xAxisScrollDir === 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 = computed(() => {
const { totalColumn, totalRow, rowCache } = props;
const { isScrolling, yAxisScrollDir, scrollTop } = unref(states);
if (totalColumn === 0 || totalRow === 0) {
return [0, 0, 0, 0];
}
const startIndex = getRowStartIndexForOffset(props, scrollTop, unref(cache));
const stopIndex = getRowStopIndexForStartIndex(props, startIndex, scrollTop, unref(cache));
const cacheBackward = !isScrolling || yAxisScrollDir === BACKWARD ? Math.max(1, rowCache) : 1;
const cacheForward = !isScrolling || yAxisScrollDir === 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 = computed(() => getEstimatedTotalHeight(props, unref(cache)));
const estimatedTotalWidth = computed(() => getEstimatedTotalWidth(props, unref(cache)));
const windowStyle = computed(() => {
var _a;
return [
{
position: "relative",
overflow: "hidden",
WebkitOverflowScrolling: "touch",
willChange: "transform"
},
{
direction: props.direction,
height: isNumber(props.height) ? `${props.height}px` : props.height,
width: isNumber(props.width) ? `${props.width}px` : props.width
},
(_a = props.style) != null ? _a : {}
];
});
const innerStyle = computed(() => {
const width = `${unref(estimatedTotalWidth)}px`;
const height = `${unref(estimatedTotalHeight)}px`;
return {
height,
pointerEvents: unref(states).isScrolling ? "none" : void 0,
width
};
});
const emitEvents = () => {
const { totalColumn, totalRow } = props;
if (totalColumn > 0 && totalRow > 0) {
const [
columnCacheStart,
columnCacheEnd,
columnVisibleStart,
columnVisibleEnd
] = unref(columnsToRender);
const [rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd] = unref(rowsToRender);
emit(ITEM_RENDER_EVT, {
columnCacheStart,
columnCacheEnd,
rowCacheStart,
rowCacheEnd,
columnVisibleStart,
columnVisibleEnd,
rowVisibleStart,
rowVisibleEnd
});
}
const {
scrollLeft,
scrollTop,
updateRequested,
xAxisScrollDir,
yAxisScrollDir
} = unref(states);
emit(SCROLL_EVT, {
xAxisScrollDir,
scrollLeft,
yAxisScrollDir,
scrollTop,
updateRequested
});
};
const onScroll = (e) => {
const {
clientHeight,
clientWidth,
scrollHeight,
scrollLeft,
scrollTop,
scrollWidth
} = e.currentTarget;
const _states = unref(states);
if (_states.scrollTop === scrollTop && _states.scrollLeft === scrollLeft) {
return;
}
let _scrollLeft = scrollLeft;
if (isRTL(props.direction)) {
switch (getRTLOffsetType()) {
case RTL_OFFSET_NAG:
_scrollLeft = -scrollLeft;
break;
case 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: getScrollDir(_states.scrollLeft, _scrollLeft),
yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop)
};
nextTick(() => resetIsScrolling());
onUpdated();
emitEvents();
};
const onVerticalScroll = (distance, totalSteps) => {
const height = unref(parsedHeight);
const offset = (estimatedTotalHeight.value - height) / totalSteps * distance;
scrollTo({
scrollTop: Math.min(estimatedTotalHeight.value - height, offset)
});
};
const onHorizontalScroll = (distance, totalSteps) => {
const width = unref(parsedWidth);
const offset = (estimatedTotalWidth.value - width) / totalSteps * distance;
scrollTo({
scrollLeft: Math.min(estimatedTotalWidth.value - width, offset)
});
};
const { onWheel } = useGridWheel({
atXStartEdge: computed(() => states.value.scrollLeft <= 0),
atXEndEdge: computed(() => states.value.scrollLeft >= estimatedTotalWidth.value - unref(parsedWidth)),
atYStartEdge: computed(() => states.value.scrollTop <= 0),
atYEndEdge: computed(() => states.value.scrollTop >= estimatedTotalHeight.value - 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 = unref(parsedWidth);
const height = unref(parsedHeight);
scrollTo({
scrollLeft: Math.min(states.value.scrollLeft + x, estimatedTotalWidth.value - width),
scrollTop: Math.min(states.value.scrollTop + y, estimatedTotalHeight.value - height)
});
});
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 = unref(states);
if (scrollTop === _states.scrollTop && scrollLeft === _states.scrollLeft) {
return;
}
states.value = {
..._states,
xAxisScrollDir: getScrollDir(_states.scrollLeft, scrollLeft),
yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop),
scrollLeft,
scrollTop,
updateRequested: true
};
nextTick(() => resetIsScrolling());
onUpdated();
emitEvents();
};
const scrollToItem = (rowIndex = 0, columnIdx = 0, alignment = AUTO_ALIGNMENT) => {
const _states = unref(states);
columnIdx = Math.max(0, Math.min(columnIdx, props.totalColumn - 1));
rowIndex = Math.max(0, Math.min(rowIndex, props.totalRow - 1));
const scrollBarWidth = getScrollBarWidth(ns.namespace.value);
const _cache = 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 (hasOwn(itemStyleCache, key)) {
return itemStyleCache[key];
} else {
const [, left] = getColumnPosition(props, columnIndex, unref(cache));
const _cache = unref(cache);
const rtl = 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;
nextTick(() => {
getItemStyleCache.value(-1, null, null);
});
};
onMounted(() => {
if (!isClient)
return;
const { initScrollLeft, initScrollTop } = props;
const windowElement = unref(windowRef);
if (windowElement) {
if (isNumber(initScrollLeft)) {
windowElement.scrollLeft = initScrollLeft;
}
if (isNumber(initScrollTop)) {
windowElement.scrollTop = initScrollTop;
}
}
emitEvents();
});
const onUpdated = () => {
const { direction } = props;
const { scrollLeft, scrollTop, updateRequested } = unref(states);
const windowElement = unref(windowRef);
if (updateRequested && windowElement) {
if (direction === RTL) {
switch (getRTLOffsetType()) {
case RTL_OFFSET_NAG: {
windowElement.scrollLeft = -scrollLeft;
break;
}
case 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 = unref(parsedWidth);
const height = unref(parsedHeight);
const estimatedWidth = unref(estimatedTotalWidth);
const estimatedHeight = unref(estimatedTotalHeight);
const { scrollLeft, scrollTop } = unref(states);
const horizontalScrollbar = h(ScrollBar, {
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 = h(ScrollBar, {
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] = unref(columnsToRender);
const [rowStart, rowEnd] = 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(h(Fragment, { key }, (_a = slots.default) == null ? void 0 : _a.call(slots, {
columnIndex: column,
data,
isScrolling: useIsScrolling ? unref(states).isScrolling : void 0,
style: getItemStyle(row, column),
rowIndex: row
})));
}
}
}
return children;
};
const renderInner = () => {
const Inner = resolveDynamicComponent(props.innerElement);
const children = renderItems();
return [
h(Inner, {
style: unref(innerStyle),
ref: innerRef
}, !isString(Inner) ? {
default: () => children
} : children)
];
};
const renderWindow = () => {
const Container = resolveDynamicComponent(props.containerElement);
const { horizontalScrollbar, verticalScrollbar } = renderScrollbars();
const Inner = renderInner();
return h("div", {
key: 0,
class: ns.e("wrapper"),
role: props.role
}, [
h(Container, {
class: props.className,
style: unref(windowStyle),
onScroll,
ref: windowRef
}, !isString(Container) ? { default: () => Inner } : Inner),
horizontalScrollbar,
verticalScrollbar
]);
};
return renderWindow;
}
});
};
export { createGrid as default };
//# sourceMappingURL=build-grid.mjs.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,363 @@
import { defineComponent, getCurrentInstance, ref, computed, unref, onMounted, onUpdated, onActivated, resolveDynamicComponent, h, Fragment, nextTick } from 'vue';
import { useEventListener, isClient } from '@vueuse/core';
import { useCache } from '../hooks/use-cache.mjs';
import useWheel from '../hooks/use-wheel.mjs';
import ScrollBar from '../components/scrollbar.mjs';
import { isHorizontal, getRTLOffsetType, getScrollDir } from '../utils.mjs';
import { virtualizedListProps } from '../props.mjs';
import { ITEM_RENDER_EVT, SCROLL_EVT, HORIZONTAL, RTL, RTL_OFFSET_POS_ASC, RTL_OFFSET_NAG, BACKWARD, FORWARD, AUTO_ALIGNMENT, RTL_OFFSET_POS_DESC } from '../defaults.mjs';
import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
import { isNumber } from '../../../../utils/types.mjs';
import { isString, hasOwn } from '@vue/shared';
const createList = ({
name,
getOffset,
getItemSize,
getItemOffset,
getEstimatedTotalSize,
getStartIndexForOffset,
getStopIndexForStartIndex,
initCache,
clearCache,
validateProps
}) => {
return defineComponent({
name: name != null ? name : "ElVirtualList",
props: virtualizedListProps,
emits: [ITEM_RENDER_EVT, SCROLL_EVT],
setup(props, { emit, expose }) {
validateProps(props);
const instance = getCurrentInstance();
const ns = useNamespace("vl");
const dynamicSizeCache = ref(initCache(props, instance));
const getItemStyleCache = useCache();
const windowRef = ref();
const innerRef = ref();
const scrollbarRef = ref();
const states = ref({
isScrolling: false,
scrollDir: "forward",
scrollOffset: isNumber(props.initScrollOffset) ? props.initScrollOffset : 0,
updateRequested: false,
isScrollbarDragging: false,
scrollbarAlwaysOn: props.scrollbarAlwaysOn
});
const itemsToRender = computed(() => {
const { total, cache } = props;
const { isScrolling, scrollDir, scrollOffset } = unref(states);
if (total === 0) {
return [0, 0, 0, 0];
}
const startIndex = getStartIndexForOffset(props, scrollOffset, unref(dynamicSizeCache));
const stopIndex = getStopIndexForStartIndex(props, startIndex, scrollOffset, unref(dynamicSizeCache));
const cacheBackward = !isScrolling || scrollDir === BACKWARD ? Math.max(1, cache) : 1;
const cacheForward = !isScrolling || scrollDir === 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 = computed(() => getEstimatedTotalSize(props, unref(dynamicSizeCache)));
const _isHorizontal = computed(() => isHorizontal(props.layout));
const windowStyle = computed(() => [
{
position: "relative",
[`overflow-${_isHorizontal.value ? "x" : "y"}`]: "scroll",
WebkitOverflowScrolling: "touch",
willChange: "transform"
},
{
direction: props.direction,
height: isNumber(props.height) ? `${props.height}px` : props.height,
width: isNumber(props.width) ? `${props.width}px` : props.width
},
props.style
]);
const innerStyle = computed(() => {
const size = unref(estimatedTotalSize);
const horizontal = unref(_isHorizontal);
return {
height: horizontal ? "100%" : `${size}px`,
pointerEvents: unref(states).isScrolling ? "none" : void 0,
width: horizontal ? `${size}px` : "100%"
};
});
const clientSize = computed(() => _isHorizontal.value ? props.width : props.height);
const { onWheel } = useWheel({
atStartEdge: computed(() => states.value.scrollOffset <= 0),
atEndEdge: computed(() => states.value.scrollOffset >= estimatedTotalSize.value),
layout: 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));
});
useEventListener(windowRef, "wheel", onWheel, {
passive: false
});
const emitEvents = () => {
const { total } = props;
if (total > 0) {
const [cacheStart, cacheEnd, visibleStart, visibleEnd] = unref(itemsToRender);
emit(ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd);
}
const { scrollDir, scrollOffset, updateRequested } = unref(states);
emit(SCROLL_EVT, scrollDir, scrollOffset, updateRequested);
};
const scrollVertically = (e) => {
const { clientHeight, scrollHeight, scrollTop } = e.currentTarget;
const _states = unref(states);
if (_states.scrollOffset === scrollTop) {
return;
}
const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
states.value = {
..._states,
isScrolling: true,
scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),
scrollOffset,
updateRequested: false
};
nextTick(resetIsScrolling);
};
const scrollHorizontally = (e) => {
const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
const _states = unref(states);
if (_states.scrollOffset === scrollLeft) {
return;
}
const { direction } = props;
let scrollOffset = scrollLeft;
if (direction === RTL) {
switch (getRTLOffsetType()) {
case RTL_OFFSET_NAG: {
scrollOffset = -scrollLeft;
break;
}
case RTL_OFFSET_POS_DESC: {
scrollOffset = scrollWidth - clientWidth - scrollLeft;
break;
}
}
}
scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
states.value = {
..._states,
isScrolling: true,
scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),
scrollOffset,
updateRequested: false
};
nextTick(resetIsScrolling);
};
const onScroll = (e) => {
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 === unref(states).scrollOffset) {
return;
}
states.value = {
...unref(states),
scrollOffset: offset,
scrollDir: getScrollDir(unref(states).scrollOffset, offset),
updateRequested: true
};
nextTick(resetIsScrolling);
};
const scrollToItem = (idx, alignment = AUTO_ALIGNMENT) => {
const { scrollOffset } = unref(states);
idx = Math.max(0, Math.min(idx, props.total - 1));
scrollTo(getOffset(props, idx, alignment, scrollOffset, unref(dynamicSizeCache)));
};
const getItemStyle = (idx) => {
const { direction, itemSize, layout } = props;
const itemStyleCache = getItemStyleCache.value(clearCache && itemSize, clearCache && layout, clearCache && direction);
let style;
if (hasOwn(itemStyleCache, String(idx))) {
style = itemStyleCache[idx];
} else {
const offset = getItemOffset(props, idx, unref(dynamicSizeCache));
const size = getItemSize(props, idx, unref(dynamicSizeCache));
const horizontal = unref(_isHorizontal);
const isRtl = direction === 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;
nextTick(() => {
getItemStyleCache.value(-1, null, null);
});
};
const resetScrollTop = () => {
const window = windowRef.value;
if (window) {
window.scrollTop = 0;
}
};
onMounted(() => {
if (!isClient)
return;
const { initScrollOffset } = props;
const windowElement = unref(windowRef);
if (isNumber(initScrollOffset) && windowElement) {
if (unref(_isHorizontal)) {
windowElement.scrollLeft = initScrollOffset;
} else {
windowElement.scrollTop = initScrollOffset;
}
}
emitEvents();
});
onUpdated(() => {
const { direction, layout } = props;
const { scrollOffset, updateRequested } = unref(states);
const windowElement = unref(windowRef);
if (updateRequested && windowElement) {
if (layout === HORIZONTAL) {
if (direction === RTL) {
switch (getRTLOffsetType()) {
case RTL_OFFSET_NAG: {
windowElement.scrollLeft = -scrollOffset;
break;
}
case 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;
}
}
});
onActivated(() => {
unref(windowRef).scrollTop = 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 = resolveDynamicComponent(containerElement);
const Inner = resolveDynamicComponent(innerElement);
const children = [];
if (total > 0) {
for (let i = start; i <= end; i++) {
children.push(h(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 = [
h(Inner, {
style: innerStyle,
ref: "innerRef"
}, !isString(Inner) ? {
default: () => children
} : children)
];
const scrollbar = h(ScrollBar, {
ref: "scrollbarRef",
clientSize,
layout,
onScroll: onScrollbarScroll,
ratio: clientSize * 100 / this.estimatedTotalSize,
scrollFrom: states.scrollOffset / (this.estimatedTotalSize - clientSize),
total,
alwaysOn: states.scrollbarAlwaysOn
});
const listContainer = h(Container, {
class: [ns.e("window"), className],
style: windowStyle,
onScroll,
ref: "windowRef",
key: 0
}, !isString(Container) ? { default: () => [InnerNode] } : [InnerNode]);
return h("div", {
key: 0,
class: [ns.e("wrapper"), states.scrollbarAlwaysOn ? "always-on" : ""]
}, [listContainer, scrollbar]);
}
});
};
export { createList as default };
//# sourceMappingURL=build-list.mjs.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,231 @@
import createGrid from '../builders/build-grid.mjs';
import { DEFAULT_DYNAMIC_LIST_ITEM_SIZE, AUTO_ALIGNMENT, CENTERED_ALIGNMENT, END_ALIGNMENT, START_ALIGNMENT, SMART_ALIGNMENT } from '../defaults.mjs';
import { isNumber, isUndefined } from '../../../../utils/types.mjs';
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 === SMART_ALIGNMENT) {
if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
alignment = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT: {
return maxOffset;
}
case END_ALIGNMENT: {
return minOffset;
}
case CENTERED_ALIGNMENT: {
return Math.round(minOffset + (maxOffset - minOffset) / 2);
}
case 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 = createGrid({
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 = isUndefined(forceUpdate) ? true : forceUpdate;
if (isNumber(columnIndex)) {
cache.value.lastVisitedColumnIndex = Math.min(cache.value.lastVisitedColumnIndex, columnIndex - 1);
}
if (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 = DEFAULT_DYNAMIC_LIST_ITEM_SIZE,
estimatedRowHeight = DEFAULT_DYNAMIC_LIST_ITEM_SIZE
}) => {
const cache = {
column: {},
estimatedColumnWidth,
estimatedRowHeight,
lastVisitedColumnIndex: -1,
lastVisitedRowIndex: -1,
row: {}
};
return cache;
},
clearCache: false,
validateProps: ({ columnWidth, rowHeight }) => {
}
});
export { DynamicSizeGrid as default };
//# sourceMappingURL=dynamic-size-grid.mjs.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,147 @@
import createList from '../builders/build-list.mjs';
import { isHorizontal } from '../utils.mjs';
import { AUTO_ALIGNMENT, CENTERED_ALIGNMENT, END_ALIGNMENT, START_ALIGNMENT, DEFAULT_DYNAMIC_LIST_ITEM_SIZE, SMART_ALIGNMENT } from '../defaults.mjs';
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 = createList({
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 = 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 === SMART_ALIGNMENT) {
if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
alignment = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT: {
return maxOffset;
}
case END_ALIGNMENT: {
return minOffset;
}
case CENTERED_ALIGNMENT: {
return Math.round(minOffset + (maxOffset - minOffset) / 2);
}
case 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 = 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 = 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 }) => {
}
});
export { DynamicSizeList as default };
//# sourceMappingURL=dynamic-size-list.mjs.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,115 @@
import createGrid from '../builders/build-grid.mjs';
import { AUTO_ALIGNMENT, CENTERED_ALIGNMENT, END_ALIGNMENT, START_ALIGNMENT, SMART_ALIGNMENT } from '../defaults.mjs';
const FixedSizeGrid = createGrid({
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 = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT:
return maxOffset;
case END_ALIGNMENT:
return minOffset;
case 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 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 === SMART_ALIGNMENT) {
if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
align = AUTO_ALIGNMENT;
} else {
align = CENTERED_ALIGNMENT;
}
}
switch (align) {
case START_ALIGNMENT:
return maxOffset;
case END_ALIGNMENT:
return minOffset;
case 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 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 }) => {
}
});
export { FixedSizeGrid as default };
//# sourceMappingURL=fixed-size-grid.mjs.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,67 @@
import createList from '../builders/build-list.mjs';
import { isHorizontal } from '../utils.mjs';
import { AUTO_ALIGNMENT, CENTERED_ALIGNMENT, END_ALIGNMENT, START_ALIGNMENT, SMART_ALIGNMENT } from '../defaults.mjs';
const FixedSizeList = createList({
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 = 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 === SMART_ALIGNMENT) {
if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
alignment = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT: {
return maxOffset;
}
case END_ALIGNMENT: {
return minOffset;
}
case 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 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 = 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() {
}
});
export { FixedSizeList as default };
//# sourceMappingURL=fixed-size-list.mjs.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,156 @@
import { defineComponent, computed, ref, reactive, unref, watch, onBeforeUnmount, h, withModifiers } from 'vue';
import { HORIZONTAL, ScrollbarDirKey, SCROLLBAR_MIN_SIZE } from '../defaults.mjs';
import { virtualizedScrollbarProps } from '../props.mjs';
import { renderThumbStyle } from '../utils.mjs';
import { BAR_MAP } from '../../../scrollbar/src/util.mjs';
import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
import { cAF, rAF } from '../../../../utils/raf.mjs';
const ScrollBar = defineComponent({
name: "ElVirtualScrollBar",
props: virtualizedScrollbarProps,
emits: ["scroll", "start-move", "stop-move"],
setup(props, { emit }) {
const GAP = computed(() => props.startGap + props.endGap);
const nsVirtualScrollbar = useNamespace("virtual-scrollbar");
const nsScrollbar = useNamespace("scrollbar");
const trackRef = ref();
const thumbRef = ref();
let frameHandle = null;
let onselectstartStore = null;
const state = reactive({
isDragging: false,
traveled: 0
});
const bar = computed(() => BAR_MAP[props.layout]);
const trackSize = computed(() => props.clientSize - unref(GAP));
const trackStyle = computed(() => ({
position: "absolute",
width: `${HORIZONTAL === props.layout ? trackSize.value : props.scrollbarSize}px`,
height: `${HORIZONTAL === props.layout ? props.scrollbarSize : trackSize.value}px`,
[ScrollbarDirKey[props.layout]]: "2px",
right: "2px",
bottom: "2px",
borderRadius: "4px"
}));
const thumbSize = 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, SCROLLBAR_MIN_SIZE), SCROLLBAR_MAX_SIZE));
});
const thumbStyle = computed(() => {
if (!Number.isFinite(thumbSize.value)) {
return {
display: "none"
};
}
const thumb = `${thumbSize.value}px`;
const style = renderThumbStyle({
bar: bar.value,
size: thumb,
move: state.traveled
}, props.layout);
return style;
});
const totalSteps = computed(() => Math.ceil(props.clientSize - thumbSize.value - unref(GAP)));
const attachEvents = () => {
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
const thumbEl = 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 = 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;
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(() => {
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);
};
watch(() => props.scrollFrom, (v) => {
if (state.isDragging)
return;
state.traveled = Math.ceil(v * totalSteps.value);
});
onBeforeUnmount(() => {
detachEvents();
});
return () => {
return h("div", {
role: "presentation",
ref: trackRef,
class: [
nsVirtualScrollbar.b(),
props.class,
(props.alwaysOn || state.isDragging) && "always-on"
],
style: trackStyle.value,
onMousedown: withModifiers(clickTrackHandler, ["stop", "prevent"]),
onTouchstartPrevent: onThumbMouseDown
}, h("div", {
ref: thumbRef,
class: nsScrollbar.e("thumb"),
style: thumbStyle.value,
onMousedown: onThumbMouseDown
}, []));
};
}
});
export { ScrollBar as default };
//# sourceMappingURL=scrollbar.mjs.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,29 @@
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;
export { AUTO_ALIGNMENT, BACKWARD, CENTERED_ALIGNMENT, DEFAULT_DYNAMIC_LIST_ITEM_SIZE, END_ALIGNMENT, FORWARD, HORIZONTAL, ITEM_RENDER_EVT, LTR, RTL, RTL_OFFSET_NAG, RTL_OFFSET_POS_ASC, RTL_OFFSET_POS_DESC, SCROLLBAR_MIN_SIZE, SCROLL_EVT, SMART_ALIGNMENT, START_ALIGNMENT, ScrollbarDirKey, ScrollbarSizeKey, VERTICAL };
//# sourceMappingURL=defaults.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"defaults.mjs","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,15 @@
import { computed, getCurrentInstance } from 'vue';
import { memoize } from 'lodash-unified';
import memoOne from 'memoize-one';
const useCache = () => {
const vm = getCurrentInstance();
const props = vm.proxy.$props;
return computed(() => {
const _getItemStyleCache = (_, __, ___) => ({});
return props.perfMode ? memoize(_getItemStyleCache) : memoOne(_getItemStyleCache);
});
};
export { useCache };
//# sourceMappingURL=use-cache.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-cache.mjs","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":[],"mappings":";;;;AAGY,MAAC,QAAQ,GAAG,MAAM;AAC9B,EAAE,MAAM,EAAE,GAAG,kBAAkB,EAAE,CAAC;AAClC,EAAE,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC;AAChC,EAAE,OAAO,QAAQ,CAAC,MAAM;AACxB,IAAI,MAAM,kBAAkB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;AACpD,IAAI,OAAO,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,kBAAkB,CAAC,GAAG,OAAO,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,43 @@
import { cAF, rAF } from '../../../../utils/raf.mjs';
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) => {
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(() => {
onWheelDelta(xOffset, yOffset);
xOffset = 0;
yOffset = 0;
});
};
return {
hasReachedEdge,
onWheel
};
};
export { useGridWheel };
//# sourceMappingURL=use-grid-wheel.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-grid-wheel.mjs","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":[],"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,IAAI,GAAG,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,GAAG,GAAG,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,37 @@
import { HORIZONTAL, VERTICAL } from '../defaults.mjs';
import { cAF, rAF } from '../../../../utils/raf.mjs';
import { isFirefox } from '../../../../utils/browser.mjs';
const LayoutKeys = {
[HORIZONTAL]: "deltaX",
[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) => {
cAF(frameHandle);
const newOffset = e[LayoutKeys[layout.value]];
if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset))
return;
offset += newOffset;
if (!isFirefox()) {
e.preventDefault();
}
frameHandle = rAF(() => {
onWheelDelta(offset);
offset = 0;
});
};
return {
hasReachedEdge,
onWheel
};
};
export { useWheel as default };
//# sourceMappingURL=use-wheel.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-wheel.mjs","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":[],"mappings":";;;;AAEA,MAAM,UAAU,GAAG;AACnB,EAAE,CAAC,UAAU,GAAG,QAAQ;AACxB,EAAE,CAAC,QAAQ,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,IAAI,GAAG,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,CAAC,SAAS,EAAE,EAAE;AACtB,MAAM,CAAC,CAAC,cAAc,EAAE,CAAC;AACzB,KAAK;AACL,IAAI,WAAW,GAAG,GAAG,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,134 @@
import { VERTICAL } from './defaults.mjs';
import { buildProp, buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
import { mutable } from '../../../utils/typescript.mjs';
const itemSize = buildProp({
type: definePropType([Number, Function]),
required: true
});
const estimatedItemSize = buildProp({
type: Number
});
const cache = buildProp({
type: Number,
default: 2
});
const direction = buildProp({
type: String,
values: ["ltr", "rtl"],
default: "ltr"
});
const initScrollOffset = buildProp({
type: Number,
default: 0
});
const total = buildProp({
type: Number,
required: true
});
const layout = buildProp({
type: String,
values: ["horizontal", "vertical"],
default: VERTICAL
});
const virtualizedProps = buildProps({
className: {
type: String,
default: ""
},
containerElement: {
type: definePropType([String, Object]),
default: "div"
},
data: {
type: definePropType(Array),
default: () => mutable([])
},
direction,
height: {
type: [String, Number],
required: true
},
innerElement: {
type: [String, Object],
default: "div"
},
style: {
type: definePropType([Object, String, Array])
},
useIsScrolling: Boolean,
width: {
type: [Number, String],
required: false
},
perfMode: {
type: Boolean,
default: true
},
scrollbarAlwaysOn: Boolean
});
const virtualizedListProps = 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 = buildProps({
columnCache: cache,
columnWidth: itemSize,
estimatedColumnWidth: estimatedItemSize,
estimatedRowHeight: estimatedItemSize,
initScrollLeft: initScrollOffset,
initScrollTop: initScrollOffset,
itemKey: {
type: 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 = 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
});
export { virtualizedGridProps, virtualizedListProps, virtualizedProps, virtualizedScrollbarProps };
//# sourceMappingURL=props.mjs.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,2 @@
//# sourceMappingURL=types.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.mjs","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,50 @@
import { LTR, RTL, HORIZONTAL, FORWARD, BACKWARD, RTL_OFFSET_POS_DESC, RTL_OFFSET_NAG, RTL_OFFSET_POS_ASC } from './defaults.mjs';
const getScrollDir = (prev, cur) => prev < cur ? FORWARD : BACKWARD;
const isHorizontal = (dir) => dir === LTR || dir === RTL || dir === HORIZONTAL;
const isRTL = (dir) => dir === 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 = RTL_OFFSET_POS_DESC;
} else {
outerDiv.scrollLeft = 1;
if (outerDiv.scrollLeft === 0) {
cachedRTLResult = RTL_OFFSET_NAG;
} else {
cachedRTLResult = 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;
}
export { getRTLOffsetType, getScrollDir, isHorizontal, isRTL, renderThumbStyle };
//# sourceMappingURL=utils.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"utils.mjs","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":[],"mappings":";;AAUY,MAAC,YAAY,GAAG,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,GAAG,GAAG,GAAG,OAAO,GAAG,SAAS;AAC/D,MAAC,YAAY,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,WAAW;AAC1E,MAAC,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI;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,GAAG,mBAAmB,CAAC;AAC5C,KAAK,MAAM;AACX,MAAM,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAC;AAC9B,MAAM,IAAI,QAAQ,CAAC,UAAU,KAAK,CAAC,EAAE;AACrC,QAAQ,eAAe,GAAG,cAAc,CAAC;AACzC,OAAO,MAAM;AACb,QAAQ,eAAe,GAAG,kBAAkB,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,4 @@
import '../../base/style/css.mjs';
import 'element-plus/theme-chalk/el-virtual-list.css';
import '../../scrollbar/style/css.mjs';
//# sourceMappingURL=css.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.mjs","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,4 @@
import '../../base/style/index.mjs';
import 'element-plus/theme-chalk/src/virtual-list.scss';
import '../../scrollbar/style/index.mjs';
//# sourceMappingURL=index.mjs.map

View File

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