feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
@@ -0,0 +1,8 @@
import { FixedSizeList, FixedSizeListInstance } from "./src/components/fixed-size-list.js";
import { Alignment, Direction, ExposesStates, GetEstimatedTotalSize, GetGridOffset, GetOffset, GetPosition, GetStartIndexForOffset, GetStopIndexForStartIndex, GridCache, GridConstructorProps, GridDefaultSlotParams, GridExposes, GridItemKeyGetter, GridItemRenderedEvtParams, GridScrollOptions, GridStates, InitCacheFunc, InitGridCacheFunc, InitListCacheFunc, Instance, ItemProps, ItemSize, LayoutDirection, ListCache, ListConstructorProps, ListExposes, ListItem, ListItemSizer, PropValidator, RTLOffsetType, ScrollDir, ScrollbarExpose, SharedExposes } from "./src/types.js";
import { DynamicSizeList, DynamicSizeListInstance } from "./src/components/dynamic-size-list.js";
import { FixedSizeGrid } from "./src/components/fixed-size-grid.js";
import { VirtualizedGridProps, VirtualizedGridPropsPublic, VirtualizedListProps, VirtualizedListPropsPublic, VirtualizedProps, VirtualizedPropsPublic, VirtualizedScrollbarProps, VirtualizedScrollbarPropsPublic, virtualizedGridProps, virtualizedListProps, virtualizedProps, virtualizedScrollbarProps } from "./src/props.js";
import { GridInstance } from "./src/builders/build-grid.js";
import { DynamicSizeGrid, DynamicSizeGridInstance, ResetAfterIndex, ResetAfterIndices } from "./src/components/dynamic-size-grid.js";
export { Alignment, Direction, DynamicSizeGrid, type DynamicSizeGridInstance, DynamicSizeList, type DynamicSizeListInstance, ExposesStates, FixedSizeGrid, FixedSizeList, type FixedSizeListInstance, GetEstimatedTotalSize, GetGridOffset, GetOffset, GetPosition, GetStartIndexForOffset, GetStopIndexForStartIndex, GridCache, GridConstructorProps, GridDefaultSlotParams, GridExposes, type GridInstance, GridItemKeyGetter, GridItemRenderedEvtParams, GridScrollOptions, GridStates, InitCacheFunc, InitGridCacheFunc, InitListCacheFunc, Instance, ItemProps, ItemSize, LayoutDirection, ListCache, ListConstructorProps, ListExposes, ListItem, ListItemSizer, PropValidator, RTLOffsetType, type ResetAfterIndex, type ResetAfterIndices, ScrollDir, ScrollbarExpose, SharedExposes, VirtualizedGridProps, VirtualizedGridPropsPublic, VirtualizedListProps, VirtualizedListPropsPublic, VirtualizedProps, VirtualizedPropsPublic, VirtualizedScrollbarProps, VirtualizedScrollbarPropsPublic, virtualizedGridProps, virtualizedListProps, virtualizedProps, virtualizedScrollbarProps };
@@ -0,0 +1,15 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_props = require('./src/props.js');
const require_fixed_size_list = require('./src/components/fixed-size-list.js');
const require_dynamic_size_list = require('./src/components/dynamic-size-list.js');
const require_fixed_size_grid = require('./src/components/fixed-size-grid.js');
const require_dynamic_size_grid = require('./src/components/dynamic-size-grid.js');
exports.DynamicSizeGrid = require_dynamic_size_grid.default;
exports.DynamicSizeList = require_dynamic_size_list.default;
exports.FixedSizeGrid = require_fixed_size_grid.default;
exports.FixedSizeList = require_fixed_size_list.default;
exports.virtualizedGridProps = require_props.virtualizedGridProps;
exports.virtualizedListProps = require_props.virtualizedListProps;
exports.virtualizedProps = require_props.virtualizedProps;
exports.virtualizedScrollbarProps = require_props.virtualizedScrollbarProps;
@@ -0,0 +1,236 @@
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
import "../../../../utils/index.js";
import { Alignment, GridConstructorProps, GridItemKeyGetter, GridScrollOptions, GridStates, ItemSize } from "../types.js";
import { useCache } from "../hooks/use-cache.js";
import { VirtualizedGridProps } from "../props.js";
import * as vue from "vue";
import { CSSProperties, Ref, StyleValue, UnwrapRef, VNode } from "vue";
//#region ../../packages/components/virtual-list/src/builders/build-grid.d.ts
declare const createGrid: ({
name,
clearCache,
getColumnPosition,
getColumnStartIndexForOffset,
getColumnStopIndexForStartIndex,
getEstimatedTotalHeight,
getEstimatedTotalWidth,
getColumnOffset,
getRowOffset,
getRowPosition,
getRowStartIndexForOffset,
getRowStopIndexForStartIndex,
initCache,
injectToInstance,
validateProps
}: GridConstructorProps<VirtualizedGridProps>) => vue.DefineComponent<vue.ExtractPropTypes<{
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: EpPropFinalized<(new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, ({
columnIndex,
rowIndex
}: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: EpPropFinalized<(new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, ({
columnIndex,
rowIndex
}: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}>> & Readonly<{
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}>, {
readonly className: string;
readonly direction: EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly data: any[];
readonly scrollbarAlwaysOn: boolean;
readonly itemKey: GridItemKeyGetter;
readonly containerElement: EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown>;
readonly innerElement: EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly innerProps: Record<string, unknown>;
readonly perfMode: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly columnCache: number;
readonly initScrollLeft: number;
readonly initScrollTop: number;
readonly rowCache: number;
readonly hScrollbarSize: number;
readonly vScrollbarSize: number;
readonly scrollbarStartGap: number;
readonly scrollbarEndGap: number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
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<GridStates>;
}>;
//#endregion
export { GridInstance };
@@ -0,0 +1,387 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../../utils/types.js');
const require_scroll = require('../../../../utils/dom/scroll.js');
const require_index = require('../../../../hooks/use-namespace/index.js');
const require_use_cache = require('../hooks/use-cache.js');
const require_defaults = require('../defaults.js');
const require_props = require('../props.js');
const require_utils = require('../utils.js');
const require_scrollbar = require('../components/scrollbar.js');
const require_use_grid_wheel = require('../hooks/use-grid-wheel.js');
const require_use_grid_touch = require('../hooks/use-grid-touch.js');
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/virtual-list/src/builders/build-grid.ts
const createGrid = ({ name, clearCache, getColumnPosition, getColumnStartIndexForOffset, getColumnStopIndexForStartIndex, getEstimatedTotalHeight, getEstimatedTotalWidth, getColumnOffset, getRowOffset, getRowPosition, getRowStartIndexForOffset, getRowStopIndexForStartIndex, initCache, injectToInstance, validateProps }) => {
return (0, vue.defineComponent)({
name: name ?? "ElVirtualList",
props: require_props.virtualizedGridProps,
emits: [require_defaults.ITEM_RENDER_EVT, require_defaults.SCROLL_EVT],
setup(props, { emit, expose, slots }) {
const ns = require_index.useNamespace("vl");
validateProps(props);
const instance = (0, vue.getCurrentInstance)();
const cache = (0, vue.ref)(initCache(props, instance));
injectToInstance?.(instance, cache);
const windowRef = (0, vue.ref)();
const hScrollbar = (0, vue.ref)();
const vScrollbar = (0, vue.ref)();
const innerRef = (0, vue.ref)();
const states = (0, vue.ref)({
isScrolling: false,
scrollLeft: require_types.isNumber(props.initScrollLeft) ? props.initScrollLeft : 0,
scrollTop: require_types.isNumber(props.initScrollTop) ? props.initScrollTop : 0,
updateRequested: false,
xAxisScrollDir: require_defaults.FORWARD,
yAxisScrollDir: require_defaults.FORWARD
});
const getItemStyleCache = require_use_cache.useCache();
const parsedHeight = (0, vue.computed)(() => Number.parseInt(`${props.height}`, 10));
const parsedWidth = (0, vue.computed)(() => Number.parseInt(`${props.width}`, 10));
const columnsToRender = (0, vue.computed)(() => {
const { totalColumn, totalRow, columnCache } = props;
const { isScrolling, xAxisScrollDir, scrollLeft } = (0, vue.unref)(states);
if (totalColumn === 0 || totalRow === 0) return [
0,
0,
0,
0
];
const startIndex = getColumnStartIndexForOffset(props, scrollLeft, (0, vue.unref)(cache));
const stopIndex = getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, (0, vue.unref)(cache));
const cacheBackward = !isScrolling || xAxisScrollDir === require_defaults.BACKWARD ? Math.max(1, columnCache) : 1;
const cacheForward = !isScrolling || xAxisScrollDir === require_defaults.FORWARD ? Math.max(1, columnCache) : 1;
return [
Math.max(0, startIndex - cacheBackward),
Math.max(0, Math.min(totalColumn - 1, stopIndex + cacheForward)),
startIndex,
stopIndex
];
});
const rowsToRender = (0, vue.computed)(() => {
const { totalColumn, totalRow, rowCache } = props;
const { isScrolling, yAxisScrollDir, scrollTop } = (0, vue.unref)(states);
if (totalColumn === 0 || totalRow === 0) return [
0,
0,
0,
0
];
const startIndex = getRowStartIndexForOffset(props, scrollTop, (0, vue.unref)(cache));
const stopIndex = getRowStopIndexForStartIndex(props, startIndex, scrollTop, (0, vue.unref)(cache));
const cacheBackward = !isScrolling || yAxisScrollDir === require_defaults.BACKWARD ? Math.max(1, rowCache) : 1;
const cacheForward = !isScrolling || yAxisScrollDir === require_defaults.FORWARD ? Math.max(1, rowCache) : 1;
return [
Math.max(0, startIndex - cacheBackward),
Math.max(0, Math.min(totalRow - 1, stopIndex + cacheForward)),
startIndex,
stopIndex
];
});
const estimatedTotalHeight = (0, vue.computed)(() => getEstimatedTotalHeight(props, (0, vue.unref)(cache)));
const estimatedTotalWidth = (0, vue.computed)(() => getEstimatedTotalWidth(props, (0, vue.unref)(cache)));
const windowStyle = (0, vue.computed)(() => [
{
position: "relative",
overflow: "hidden",
WebkitOverflowScrolling: "touch",
willChange: "transform"
},
{
direction: props.direction,
height: require_types.isNumber(props.height) ? `${props.height}px` : props.height,
width: require_types.isNumber(props.width) ? `${props.width}px` : props.width
},
props.style ?? {}
]);
const innerStyle = (0, vue.computed)(() => {
const width = `${(0, vue.unref)(estimatedTotalWidth)}px`;
return {
height: `${(0, vue.unref)(estimatedTotalHeight)}px`,
pointerEvents: (0, vue.unref)(states).isScrolling ? "none" : void 0,
width,
margin: 0,
boxSizing: "border-box"
};
});
const emitEvents = () => {
const { totalColumn, totalRow } = props;
if (totalColumn > 0 && totalRow > 0) {
const [columnCacheStart, columnCacheEnd, columnVisibleStart, columnVisibleEnd] = (0, vue.unref)(columnsToRender);
const [rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd] = (0, vue.unref)(rowsToRender);
emit(require_defaults.ITEM_RENDER_EVT, {
columnCacheStart,
columnCacheEnd,
rowCacheStart,
rowCacheEnd,
columnVisibleStart,
columnVisibleEnd,
rowVisibleStart,
rowVisibleEnd
});
}
const { scrollLeft, scrollTop, updateRequested, xAxisScrollDir, yAxisScrollDir } = (0, vue.unref)(states);
emit(require_defaults.SCROLL_EVT, {
xAxisScrollDir,
scrollLeft,
yAxisScrollDir,
scrollTop,
updateRequested
});
};
const onScroll = (e) => {
const { clientHeight, clientWidth, scrollHeight, scrollLeft, scrollTop, scrollWidth } = e.currentTarget;
const _states = (0, vue.unref)(states);
if (_states.scrollTop === scrollTop && _states.scrollLeft === scrollLeft) return;
let _scrollLeft = scrollLeft;
if (require_utils.isRTL(props.direction)) switch (require_utils.getRTLOffsetType()) {
case require_defaults.RTL_OFFSET_NAG:
_scrollLeft = -scrollLeft;
break;
case require_defaults.RTL_OFFSET_POS_DESC:
_scrollLeft = scrollWidth - clientWidth - scrollLeft;
break;
}
states.value = {
..._states,
isScrolling: true,
scrollLeft: _scrollLeft,
scrollTop: Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight)),
updateRequested: true,
xAxisScrollDir: require_utils.getScrollDir(_states.scrollLeft, _scrollLeft),
yAxisScrollDir: require_utils.getScrollDir(_states.scrollTop, scrollTop)
};
(0, vue.nextTick)(() => resetIsScrolling());
onUpdated();
emitEvents();
};
const onVerticalScroll = (distance, totalSteps) => {
const height = (0, vue.unref)(parsedHeight);
const offset = (estimatedTotalHeight.value - height) / totalSteps * distance;
scrollTo({ scrollTop: Math.min(estimatedTotalHeight.value - height, offset) });
};
const onHorizontalScroll = (distance, totalSteps) => {
const width = (0, vue.unref)(parsedWidth);
const offset = (estimatedTotalWidth.value - width) / totalSteps * distance;
scrollTo({ scrollLeft: Math.min(estimatedTotalWidth.value - width, offset) });
};
const { onWheel } = require_use_grid_wheel.useGridWheel({
atXStartEdge: (0, vue.computed)(() => states.value.scrollLeft <= 0),
atXEndEdge: (0, vue.computed)(() => states.value.scrollLeft >= estimatedTotalWidth.value - (0, vue.unref)(parsedWidth)),
atYStartEdge: (0, vue.computed)(() => states.value.scrollTop <= 0),
atYEndEdge: (0, vue.computed)(() => states.value.scrollTop >= estimatedTotalHeight.value - (0, vue.unref)(parsedHeight))
}, (x, y) => {
hScrollbar.value?.onMouseUp?.();
vScrollbar.value?.onMouseUp?.();
const width = (0, vue.unref)(parsedWidth);
const height = (0, vue.unref)(parsedHeight);
scrollTo({
scrollLeft: Math.min(states.value.scrollLeft + x, estimatedTotalWidth.value - width),
scrollTop: Math.min(states.value.scrollTop + y, estimatedTotalHeight.value - height)
});
});
(0, _vueuse_core.useEventListener)(windowRef, "wheel", onWheel, { passive: false });
const scrollTo = ({ scrollLeft = states.value.scrollLeft, scrollTop = states.value.scrollTop }) => {
scrollLeft = Math.max(scrollLeft, 0);
scrollTop = Math.max(scrollTop, 0);
const _states = (0, vue.unref)(states);
if (scrollTop === _states.scrollTop && scrollLeft === _states.scrollLeft) return;
states.value = {
..._states,
xAxisScrollDir: require_utils.getScrollDir(_states.scrollLeft, scrollLeft),
yAxisScrollDir: require_utils.getScrollDir(_states.scrollTop, scrollTop),
scrollLeft,
scrollTop,
updateRequested: true
};
(0, vue.nextTick)(() => resetIsScrolling());
onUpdated();
emitEvents();
};
const { touchStartX, touchStartY, handleTouchStart, handleTouchMove } = require_use_grid_touch.useGridTouch(windowRef, states, scrollTo, estimatedTotalWidth, estimatedTotalHeight, parsedWidth, parsedHeight);
const scrollToItem = (rowIndex = 0, columnIdx = 0, alignment = require_defaults.AUTO_ALIGNMENT) => {
const _states = (0, vue.unref)(states);
columnIdx = Math.max(0, Math.min(columnIdx, props.totalColumn - 1));
rowIndex = Math.max(0, Math.min(rowIndex, props.totalRow - 1));
const scrollBarWidth = require_scroll.getScrollBarWidth(ns.namespace.value);
const _cache = (0, vue.unref)(cache);
const estimatedHeight = getEstimatedTotalHeight(props, _cache);
const estimatedWidth = getEstimatedTotalWidth(props, _cache);
scrollTo({
scrollLeft: getColumnOffset(props, columnIdx, alignment, _states.scrollLeft, _cache, estimatedWidth > props.width ? scrollBarWidth : 0),
scrollTop: getRowOffset(props, rowIndex, alignment, _states.scrollTop, _cache, estimatedHeight > props.height ? scrollBarWidth : 0)
});
};
const getItemStyle = (rowIndex, columnIndex) => {
const { columnWidth, direction, rowHeight } = props;
const itemStyleCache = getItemStyleCache.value(clearCache && columnWidth, clearCache && rowHeight, clearCache && direction);
const key = `${rowIndex},${columnIndex}`;
if ((0, _vue_shared.hasOwn)(itemStyleCache, key)) return itemStyleCache[key];
else {
const [, left] = getColumnPosition(props, columnIndex, (0, vue.unref)(cache));
const _cache = (0, vue.unref)(cache);
const rtl = require_utils.isRTL(direction);
const [height, top] = getRowPosition(props, rowIndex, _cache);
const [width] = getColumnPosition(props, columnIndex, _cache);
itemStyleCache[key] = {
position: "absolute",
left: rtl ? void 0 : `${left}px`,
right: rtl ? `${left}px` : void 0,
top: `${top}px`,
height: `${height}px`,
width: `${width}px`
};
return itemStyleCache[key];
}
};
const resetIsScrolling = () => {
states.value.isScrolling = false;
(0, vue.nextTick)(() => {
getItemStyleCache.value(-1, null, null);
});
};
(0, vue.onMounted)(() => {
if (!_vueuse_core.isClient) return;
const { initScrollLeft, initScrollTop } = props;
const windowElement = (0, vue.unref)(windowRef);
if (windowElement) {
if (require_types.isNumber(initScrollLeft)) windowElement.scrollLeft = initScrollLeft;
if (require_types.isNumber(initScrollTop)) windowElement.scrollTop = initScrollTop;
}
emitEvents();
});
const onUpdated = () => {
const { direction } = props;
const { scrollLeft, scrollTop, updateRequested } = (0, vue.unref)(states);
const windowElement = (0, vue.unref)(windowRef);
if (updateRequested && windowElement) {
if (direction === require_defaults.RTL) switch (require_utils.getRTLOffsetType()) {
case require_defaults.RTL_OFFSET_NAG:
windowElement.scrollLeft = -scrollLeft;
break;
case require_defaults.RTL_OFFSET_POS_ASC:
windowElement.scrollLeft = scrollLeft;
break;
default: {
const { clientWidth, scrollWidth } = windowElement;
windowElement.scrollLeft = scrollWidth - clientWidth - scrollLeft;
break;
}
}
else windowElement.scrollLeft = Math.max(0, scrollLeft);
windowElement.scrollTop = Math.max(0, scrollTop);
}
};
const { resetAfterColumnIndex, resetAfterRowIndex, resetAfter } = instance.proxy;
expose({
windowRef,
innerRef,
getItemStyleCache,
touchStartX,
touchStartY,
handleTouchStart,
handleTouchMove,
scrollTo,
scrollToItem,
states,
resetAfterColumnIndex,
resetAfterRowIndex,
resetAfter
});
const renderScrollbars = () => {
const { scrollbarAlwaysOn, scrollbarStartGap, scrollbarEndGap, totalColumn, totalRow } = props;
const width = (0, vue.unref)(parsedWidth);
const height = (0, vue.unref)(parsedHeight);
const estimatedWidth = (0, vue.unref)(estimatedTotalWidth);
const estimatedHeight = (0, vue.unref)(estimatedTotalHeight);
const { scrollLeft, scrollTop } = (0, vue.unref)(states);
return {
horizontalScrollbar: (0, vue.h)(require_scrollbar.default, {
ref: hScrollbar,
alwaysOn: scrollbarAlwaysOn,
startGap: scrollbarStartGap,
endGap: scrollbarEndGap,
class: ns.e("horizontal"),
clientSize: width,
layout: "horizontal",
onScroll: onHorizontalScroll,
ratio: width * 100 / estimatedWidth,
scrollFrom: scrollLeft / (estimatedWidth - width),
total: totalRow,
visible: true
}),
verticalScrollbar: (0, vue.h)(require_scrollbar.default, {
ref: vScrollbar,
alwaysOn: scrollbarAlwaysOn,
startGap: scrollbarStartGap,
endGap: scrollbarEndGap,
class: ns.e("vertical"),
clientSize: height,
layout: "vertical",
onScroll: onVerticalScroll,
ratio: height * 100 / estimatedHeight,
scrollFrom: scrollTop / (estimatedHeight - height),
total: totalColumn,
visible: true
})
};
};
const renderItems = () => {
const [columnStart, columnEnd] = (0, vue.unref)(columnsToRender);
const [rowStart, rowEnd] = (0, vue.unref)(rowsToRender);
const { data, totalColumn, totalRow, useIsScrolling, itemKey } = props;
const children = [];
if (totalRow > 0 && totalColumn > 0) for (let row = rowStart; row <= rowEnd; row++) for (let column = columnStart; column <= columnEnd; column++) {
const key = itemKey({
columnIndex: column,
data,
rowIndex: row
});
children.push((0, vue.h)(vue.Fragment, { key }, slots.default?.({
columnIndex: column,
data,
isScrolling: useIsScrolling ? (0, vue.unref)(states).isScrolling : void 0,
style: getItemStyle(row, column),
rowIndex: row
})));
}
return children;
};
const renderInner = () => {
const Inner = (0, vue.resolveDynamicComponent)(props.innerElement);
const children = renderItems();
return [(0, vue.h)(Inner, (0, vue.mergeProps)(props.innerProps, {
style: (0, vue.unref)(innerStyle),
ref: innerRef
}), !(0, _vue_shared.isString)(Inner) ? { default: () => children } : children)];
};
const renderWindow = () => {
const Container = (0, vue.resolveDynamicComponent)(props.containerElement);
const { horizontalScrollbar, verticalScrollbar } = renderScrollbars();
const Inner = renderInner();
return (0, vue.h)("div", {
key: 0,
class: ns.e("wrapper"),
role: props.role
}, [
(0, vue.h)(Container, {
class: props.className,
style: (0, vue.unref)(windowStyle),
onScroll,
ref: windowRef
}, !(0, _vue_shared.isString)(Container) ? { default: () => Inner } : Inner),
horizontalScrollbar,
verticalScrollbar
]);
};
return renderWindow;
}
});
};
//#endregion
exports.default = createGrid;
//# sourceMappingURL=build-grid.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,302 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../../utils/types.js');
const require_index = require('../../../../hooks/use-namespace/index.js');
const require_use_cache = require('../hooks/use-cache.js');
const require_defaults = require('../defaults.js');
const require_use_wheel = require('../hooks/use-wheel.js');
const require_props = require('../props.js');
const require_utils = require('../utils.js');
const require_scrollbar = require('../components/scrollbar.js');
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/virtual-list/src/builders/build-list.ts
const createList = ({ name, getOffset, getItemSize, getItemOffset, getEstimatedTotalSize, getStartIndexForOffset, getStopIndexForStartIndex, initCache, clearCache, validateProps }) => {
return (0, vue.defineComponent)({
name: name ?? "ElVirtualList",
props: require_props.virtualizedListProps,
emits: [require_defaults.ITEM_RENDER_EVT, require_defaults.SCROLL_EVT],
setup(props, { emit, expose }) {
validateProps(props);
const instance = (0, vue.getCurrentInstance)();
const ns = require_index.useNamespace("vl");
const dynamicSizeCache = (0, vue.ref)(initCache(props, instance));
const getItemStyleCache = require_use_cache.useCache();
const windowRef = (0, vue.ref)();
const innerRef = (0, vue.ref)();
const scrollbarRef = (0, vue.ref)();
const states = (0, vue.ref)({
isScrolling: false,
scrollDir: "forward",
scrollOffset: require_types.isNumber(props.initScrollOffset) ? props.initScrollOffset : 0,
updateRequested: false,
isScrollbarDragging: false,
scrollbarAlwaysOn: props.scrollbarAlwaysOn
});
const itemsToRender = (0, vue.computed)(() => {
const { total, cache } = props;
const { isScrolling, scrollDir, scrollOffset } = (0, vue.unref)(states);
if (total === 0) return [
0,
0,
0,
0
];
const startIndex = getStartIndexForOffset(props, scrollOffset, (0, vue.unref)(dynamicSizeCache));
const stopIndex = getStopIndexForStartIndex(props, startIndex, scrollOffset, (0, vue.unref)(dynamicSizeCache));
const cacheBackward = !isScrolling || scrollDir === require_defaults.BACKWARD ? Math.max(1, cache) : 1;
const cacheForward = !isScrolling || scrollDir === require_defaults.FORWARD ? Math.max(1, cache) : 1;
return [
Math.max(0, startIndex - cacheBackward),
Math.max(0, Math.min(total - 1, stopIndex + cacheForward)),
startIndex,
stopIndex
];
});
const estimatedTotalSize = (0, vue.computed)(() => getEstimatedTotalSize(props, (0, vue.unref)(dynamicSizeCache)));
const _isHorizontal = (0, vue.computed)(() => require_utils.isHorizontal(props.layout));
const windowStyle = (0, vue.computed)(() => [
{
position: "relative",
[`overflow-${_isHorizontal.value ? "x" : "y"}`]: "scroll",
WebkitOverflowScrolling: "touch",
willChange: "transform"
},
{
direction: props.direction,
height: require_types.isNumber(props.height) ? `${props.height}px` : props.height,
width: require_types.isNumber(props.width) ? `${props.width}px` : props.width
},
props.style
]);
const innerStyle = (0, vue.computed)(() => {
const size = (0, vue.unref)(estimatedTotalSize);
const horizontal = (0, vue.unref)(_isHorizontal);
return {
height: horizontal ? "100%" : `${size}px`,
pointerEvents: (0, vue.unref)(states).isScrolling ? "none" : void 0,
width: horizontal ? `${size}px` : "100%",
margin: 0,
boxSizing: "border-box"
};
});
const clientSize = (0, vue.computed)(() => _isHorizontal.value ? props.width : props.height);
const { onWheel } = require_use_wheel.default({
atStartEdge: (0, vue.computed)(() => states.value.scrollOffset <= 0),
atEndEdge: (0, vue.computed)(() => states.value.scrollOffset >= estimatedTotalSize.value),
layout: (0, vue.computed)(() => props.layout)
}, (offset) => {
scrollbarRef.value.onMouseUp?.();
scrollTo(Math.min(states.value.scrollOffset + offset, estimatedTotalSize.value - clientSize.value));
});
(0, _vueuse_core.useEventListener)(windowRef, "wheel", onWheel, { passive: false });
const emitEvents = () => {
const { total } = props;
if (total > 0) {
const [cacheStart, cacheEnd, visibleStart, visibleEnd] = (0, vue.unref)(itemsToRender);
emit(require_defaults.ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd);
}
const { scrollDir, scrollOffset, updateRequested } = (0, vue.unref)(states);
emit(require_defaults.SCROLL_EVT, scrollDir, scrollOffset, updateRequested);
};
const scrollVertically = (e) => {
const { clientHeight, scrollHeight, scrollTop } = e.currentTarget;
const _states = (0, vue.unref)(states);
if (_states.scrollOffset === scrollTop) return;
const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
states.value = {
..._states,
isScrolling: true,
scrollDir: require_utils.getScrollDir(_states.scrollOffset, scrollOffset),
scrollOffset,
updateRequested: false
};
(0, vue.nextTick)(resetIsScrolling);
};
const scrollHorizontally = (e) => {
const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
const _states = (0, vue.unref)(states);
if (_states.scrollOffset === scrollLeft) return;
const { direction } = props;
let scrollOffset = scrollLeft;
if (direction === require_defaults.RTL) switch (require_utils.getRTLOffsetType()) {
case require_defaults.RTL_OFFSET_NAG:
scrollOffset = -scrollLeft;
break;
case require_defaults.RTL_OFFSET_POS_DESC:
scrollOffset = scrollWidth - clientWidth - scrollLeft;
break;
}
scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
states.value = {
..._states,
isScrolling: true,
scrollDir: require_utils.getScrollDir(_states.scrollOffset, scrollOffset),
scrollOffset,
updateRequested: false
};
(0, vue.nextTick)(resetIsScrolling);
};
const onScroll = (e) => {
(0, vue.unref)(_isHorizontal) ? scrollHorizontally(e) : scrollVertically(e);
emitEvents();
};
const onScrollbarScroll = (distanceToGo, totalSteps) => {
const offset = (estimatedTotalSize.value - clientSize.value) / totalSteps * distanceToGo;
scrollTo(Math.min(estimatedTotalSize.value - clientSize.value, offset));
};
const scrollTo = (offset) => {
offset = Math.max(offset, 0);
if (offset === (0, vue.unref)(states).scrollOffset) return;
states.value = {
...(0, vue.unref)(states),
scrollOffset: offset,
scrollDir: require_utils.getScrollDir((0, vue.unref)(states).scrollOffset, offset),
updateRequested: true
};
(0, vue.nextTick)(resetIsScrolling);
};
const scrollToItem = (idx, alignment = require_defaults.AUTO_ALIGNMENT) => {
const { scrollOffset } = (0, vue.unref)(states);
idx = Math.max(0, Math.min(idx, props.total - 1));
scrollTo(getOffset(props, idx, alignment, scrollOffset, (0, vue.unref)(dynamicSizeCache)));
};
const getItemStyle = (idx) => {
const { direction, itemSize, layout } = props;
const itemStyleCache = getItemStyleCache.value(clearCache && itemSize, clearCache && layout, clearCache && direction);
let style;
if ((0, _vue_shared.hasOwn)(itemStyleCache, String(idx))) style = itemStyleCache[idx];
else {
const offset = getItemOffset(props, idx, (0, vue.unref)(dynamicSizeCache));
const size = getItemSize(props, idx, (0, vue.unref)(dynamicSizeCache));
const horizontal = (0, vue.unref)(_isHorizontal);
const isRtl = direction === require_defaults.RTL;
const offsetHorizontal = horizontal ? offset : 0;
itemStyleCache[idx] = style = {
position: "absolute",
left: isRtl ? void 0 : `${offsetHorizontal}px`,
right: isRtl ? `${offsetHorizontal}px` : void 0,
top: !horizontal ? `${offset}px` : 0,
height: !horizontal ? `${size}px` : "100%",
width: horizontal ? `${size}px` : "100%"
};
}
return style;
};
const resetIsScrolling = () => {
states.value.isScrolling = false;
(0, vue.nextTick)(() => {
getItemStyleCache.value(-1, null, null);
});
};
const resetScrollTop = () => {
const window = windowRef.value;
if (window) window.scrollTop = 0;
};
(0, vue.onMounted)(() => {
if (!_vueuse_core.isClient) return;
const { initScrollOffset } = props;
const windowElement = (0, vue.unref)(windowRef);
if (require_types.isNumber(initScrollOffset) && windowElement) if ((0, vue.unref)(_isHorizontal)) windowElement.scrollLeft = initScrollOffset;
else windowElement.scrollTop = initScrollOffset;
emitEvents();
});
(0, vue.onUpdated)(() => {
const { direction, layout } = props;
const { scrollOffset, updateRequested } = (0, vue.unref)(states);
const windowElement = (0, vue.unref)(windowRef);
if (updateRequested && windowElement) if (layout === require_defaults.HORIZONTAL) if (direction === require_defaults.RTL) switch (require_utils.getRTLOffsetType()) {
case require_defaults.RTL_OFFSET_NAG:
windowElement.scrollLeft = -scrollOffset;
break;
case require_defaults.RTL_OFFSET_POS_ASC:
windowElement.scrollLeft = scrollOffset;
break;
default: {
const { clientWidth, scrollWidth } = windowElement;
windowElement.scrollLeft = scrollWidth - clientWidth - scrollOffset;
break;
}
}
else windowElement.scrollLeft = scrollOffset;
else windowElement.scrollTop = scrollOffset;
});
(0, vue.onActivated)(() => {
(0, vue.unref)(windowRef).scrollTop = (0, vue.unref)(states).scrollOffset;
});
const api = {
ns,
clientSize,
estimatedTotalSize,
windowStyle,
windowRef,
innerRef,
innerStyle,
itemsToRender,
scrollbarRef,
states,
getItemStyle,
onScroll,
onScrollbarScroll,
onWheel,
scrollTo,
scrollToItem,
resetScrollTop
};
expose({
windowRef,
innerRef,
getItemStyleCache,
scrollTo,
scrollToItem,
resetScrollTop,
states
});
return api;
},
render(ctx) {
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 = (0, vue.resolveDynamicComponent)(containerElement);
const Inner = (0, vue.resolveDynamicComponent)(innerElement);
const children = [];
if (total > 0) for (let i = start; i <= end; i++) children.push((0, vue.h)(vue.Fragment, { key: i }, $slots.default?.({
data,
index: i,
isScrolling: useIsScrolling ? states.isScrolling : void 0,
style: getItemStyle(i)
})));
const InnerNode = [(0, vue.h)(Inner, (0, vue.mergeProps)(ctx.innerProps, {
style: innerStyle,
ref: "innerRef"
}), !(0, _vue_shared.isString)(Inner) ? { default: () => children } : children)];
const scrollbar = (0, vue.h)(require_scrollbar.default, {
ref: "scrollbarRef",
clientSize,
layout,
onScroll: onScrollbarScroll,
ratio: clientSize * 100 / this.estimatedTotalSize,
scrollFrom: states.scrollOffset / (this.estimatedTotalSize - clientSize),
total,
alwaysOn: states.scrollbarAlwaysOn
});
const listContainer = (0, vue.h)(Container, {
class: [ns.e("window"), className],
style: windowStyle,
onScroll,
ref: "windowRef",
key: 0
}, !(0, _vue_shared.isString)(Container) ? { default: () => [InnerNode] } : [InnerNode]);
return (0, vue.h)("div", {
key: 0,
class: [ns.e("wrapper"), states.scrollbarAlwaysOn ? "always-on" : ""]
}, [listContainer, scrollbar]);
}
});
};
//#endregion
exports.default = createList;
//# sourceMappingURL=build-list.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,221 @@
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
import "../../../../utils/index.js";
import { GridItemKeyGetter, ItemSize } from "../types.js";
import { GridInstance } from "../builders/build-grid.js";
import * as vue from "vue";
//#region ../../packages/components/virtual-list/src/components/dynamic-size-grid.d.ts
type Indices = {
columnIndex?: number;
rowIndex?: number;
};
declare const DynamicSizeGrid: vue.DefineComponent<vue.ExtractPropTypes<{
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: EpPropFinalized<(new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, ({
columnIndex,
rowIndex
}: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: EpPropFinalized<(new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, ({
columnIndex,
rowIndex
}: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}>> & Readonly<{
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}>, {
readonly className: string;
readonly direction: EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly data: any[];
readonly scrollbarAlwaysOn: boolean;
readonly itemKey: GridItemKeyGetter;
readonly containerElement: EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown>;
readonly innerElement: EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly innerProps: Record<string, unknown>;
readonly perfMode: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly columnCache: number;
readonly initScrollLeft: number;
readonly initScrollTop: number;
readonly rowCache: number;
readonly hScrollbarSize: number;
readonly vScrollbarSize: number;
readonly scrollbarStartGap: number;
readonly scrollbarEndGap: number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
type ResetAfterIndex = (idx: number, forceUpdate: boolean) => void;
type ResetAfterIndices = (indices: Indices, forceUpdate: boolean) => void;
type DynamicSizeGridInstance = GridInstance & {
resetAfterColumnIndex: ResetAfterIndex;
resetAfterRowIndex: ResetAfterIndex;
resetAfter: ResetAfterIndices;
};
//#endregion
export { DynamicSizeGrid, DynamicSizeGridInstance, ResetAfterIndex, ResetAfterIndices };
@@ -0,0 +1,196 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../../utils/types.js');
const require_error = require('../../../../utils/error.js');
const require_defaults = require('../defaults.js');
const require_build_grid = require('../builders/build-grid.js');
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/virtual-list/src/components/dynamic-size-grid.ts
const { max, min, floor } = Math;
const SCOPE = "ElDynamicSizeGrid";
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]]];
if ((lastVisitedIndex > 0 ? cache[lastVisitedIndex].offset : 0) >= 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 sizeOfUnvisitedItems = (totalRow - lastVisitedRowIndex - 1) * 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 sizeOfUnvisitedItems = (totalColumn - lastVisitedColumnIndex - 1) * 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 maxOffset = max(0, min(estimatedSizeAssociates(props, cache) - size, item.offset));
const minOffset = max(0, item.offset - size + scrollBarWidth + item.size);
if (alignment === require_defaults.SMART_ALIGNMENT) if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) alignment = require_defaults.AUTO_ALIGNMENT;
else alignment = require_defaults.CENTERED_ALIGNMENT;
switch (alignment) {
case require_defaults.START_ALIGNMENT: return maxOffset;
case require_defaults.END_ALIGNMENT: return minOffset;
case require_defaults.CENTERED_ALIGNMENT: return Math.round(minOffset + (maxOffset - minOffset) / 2);
case require_defaults.AUTO_ALIGNMENT:
default: if (scrollOffset >= minOffset && scrollOffset <= maxOffset) return scrollOffset;
else if (minOffset > maxOffset) return minOffset;
else if (scrollOffset < minOffset) return minOffset;
else return maxOffset;
}
};
const DynamicSizeGrid = require_build_grid.default({
name: "ElDynamicSizeGrid",
getColumnPosition: (props, idx, cache) => {
const item = getItemFromCache(props, idx, cache, "column");
return [item.size, item.offset];
},
getRowPosition: (props, idx, cache) => {
const item = getItemFromCache(props, idx, cache, "row");
return [item.size, item.offset];
},
getColumnOffset: (props, columnIndex, alignment, scrollLeft, cache, scrollBarWidth) => getOffset(props, columnIndex, alignment, scrollLeft, cache, "column", scrollBarWidth),
getRowOffset: (props, rowIndex, alignment, scrollTop, cache, scrollBarWidth) => getOffset(props, rowIndex, alignment, scrollTop, cache, "row", scrollBarWidth),
getColumnStartIndexForOffset: (props, scrollLeft, cache) => findItem(props, cache, scrollLeft, "column"),
getColumnStopIndexForStartIndex: (props, startIndex, scrollLeft, cache) => {
const item = getItemFromCache(props, startIndex, cache, "column");
const maxOffset = scrollLeft + props.width;
let offset = item.offset + item.size;
let stopIndex = startIndex;
while (stopIndex < props.totalColumn - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache(props, startIndex, cache, "column").size;
}
return stopIndex;
},
getEstimatedTotalHeight,
getEstimatedTotalWidth,
getRowStartIndexForOffset: (props, scrollTop, cache) => findItem(props, cache, scrollTop, "row"),
getRowStopIndexForStartIndex: (props, startIndex, scrollTop, cache) => {
const { totalRow, height } = props;
const item = getItemFromCache(props, startIndex, cache, "row");
const maxOffset = scrollTop + height;
let offset = item.size + item.offset;
let stopIndex = startIndex;
while (stopIndex < totalRow - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache(props, stopIndex, cache, "row").size;
}
return stopIndex;
},
injectToInstance: (instance, cache) => {
const resetAfter = ({ columnIndex, rowIndex }, forceUpdate) => {
forceUpdate = require_types.isUndefined(forceUpdate) ? true : forceUpdate;
if (require_types.isNumber(columnIndex)) cache.value.lastVisitedColumnIndex = Math.min(cache.value.lastVisitedColumnIndex, columnIndex - 1);
if (require_types.isNumber(rowIndex)) cache.value.lastVisitedRowIndex = Math.min(cache.value.lastVisitedRowIndex, rowIndex - 1);
instance.exposed?.getItemStyleCache.value(-1, null, null);
if (forceUpdate) instance.proxy?.$forceUpdate();
};
const resetAfterColumnIndex = (columnIndex, forceUpdate) => {
resetAfter({ columnIndex }, forceUpdate);
};
const resetAfterRowIndex = (rowIndex, forceUpdate) => {
resetAfter({ rowIndex }, forceUpdate);
};
Object.assign(instance.proxy, {
resetAfterColumnIndex,
resetAfterRowIndex,
resetAfter
});
},
initCache: ({ estimatedColumnWidth = require_defaults.DEFAULT_DYNAMIC_LIST_ITEM_SIZE, estimatedRowHeight = require_defaults.DEFAULT_DYNAMIC_LIST_ITEM_SIZE }) => {
return {
column: {},
estimatedColumnWidth,
estimatedRowHeight,
lastVisitedColumnIndex: -1,
lastVisitedRowIndex: -1,
row: {}
};
},
clearCache: false,
validateProps: ({ columnWidth, rowHeight }) => {
if (process.env.NODE_ENV !== "production") {
if (!(0, _vue_shared.isFunction)(columnWidth)) require_error.throwError(SCOPE, `
"columnWidth" must be passed as function,
instead ${typeof columnWidth} was given.
`);
if (!(0, _vue_shared.isFunction)(rowHeight)) require_error.throwError(SCOPE, `
"rowHeight" must be passed as function,
instead ${typeof rowHeight} was given.
`);
}
}
});
//#endregion
exports.default = DynamicSizeGrid;
//# sourceMappingURL=dynamic-size-grid.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,191 @@
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
import "../../../../utils/index.js";
import { Alignment, ItemSize } from "../types.js";
import * as vue from "vue";
//#region ../../packages/components/virtual-list/src/components/dynamic-size-list.d.ts
declare const DynamicSizeList: vue.DefineComponent<vue.ExtractPropTypes<{
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>, {
ns: {
namespace: 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: vue.ComputedRef<string | number | undefined>;
estimatedTotalSize: vue.ComputedRef<number>;
windowStyle: vue.ComputedRef<(string | false | vue.CSSProperties | vue.StyleValue[] | {
[x: string]: string;
position: string;
WebkitOverflowScrolling: string;
willChange: string;
} | null | undefined)[]>;
windowRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
innerRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
innerStyle: vue.ComputedRef<{
height: string;
pointerEvents: string | undefined;
width: string;
margin: number;
boxSizing: string;
}>;
itemsToRender: vue.ComputedRef<number[]>;
scrollbarRef: vue.Ref<any, any>;
states: vue.Ref<{
isScrolling: boolean;
scrollDir: string;
scrollOffset: number;
updateRequested: boolean;
isScrollbarDragging: boolean;
scrollbarAlwaysOn: boolean;
}, {
isScrolling: boolean;
scrollDir: string;
scrollOffset: number;
updateRequested: boolean;
isScrollbarDragging: boolean;
scrollbarAlwaysOn: boolean;
} | {
isScrolling: boolean;
scrollDir: string;
scrollOffset: number;
updateRequested: boolean;
isScrollbarDragging: boolean;
scrollbarAlwaysOn: boolean;
}>;
getItemStyle: (idx: number) => vue.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;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & Readonly<{
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}>, {
readonly layout: EpPropMergeType<StringConstructor, "horizontal" | "vertical", never>;
readonly className: string;
readonly direction: EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly data: any[];
readonly scrollbarAlwaysOn: boolean;
readonly containerElement: EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown>;
readonly innerElement: EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly innerProps: Record<string, unknown>;
readonly perfMode: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly cache: number;
readonly initScrollOffset: number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
type DynamicSizeListInstance = InstanceType<typeof DynamicSizeList> & unknown;
//#endregion
export { DynamicSizeList, DynamicSizeListInstance };
@@ -0,0 +1,127 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_error = require('../../../../utils/error.js');
const require_defaults = require('../defaults.js');
const require_utils = require('../utils.js');
const require_build_list = require('../builders/build-list.js');
//#region ../../packages/components/virtual-list/src/components/dynamic-size-list.ts
const SCOPE = "ElDynamicSizeList";
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;
if ((lastVisitedIndex > 0 ? items[lastVisitedIndex].offset : 0) >= 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 totalSizeOfUnmeasuredItems = (total - lastVisitedIndex - 1) * estimatedItemSize;
return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
};
const DynamicSizeList = require_build_list.default({
name: "ElDynamicSizeList",
getItemOffset: (props, index, listCache) => getItemFromCache(props, index, listCache).offset,
getItemSize: (_, index, { items }) => items[index].size,
getEstimatedTotalSize,
getOffset: (props, index, alignment, scrollOffset, listCache) => {
const { height, layout, width } = props;
const size = require_utils.isHorizontal(layout) ? width : height;
const item = getItemFromCache(props, index, listCache);
const estimatedTotalSize = getEstimatedTotalSize(props, listCache);
const maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, item.offset));
const minOffset = Math.max(0, item.offset - size + item.size);
if (alignment === require_defaults.SMART_ALIGNMENT) if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) alignment = require_defaults.AUTO_ALIGNMENT;
else alignment = require_defaults.CENTERED_ALIGNMENT;
switch (alignment) {
case require_defaults.START_ALIGNMENT: return maxOffset;
case require_defaults.END_ALIGNMENT: return minOffset;
case require_defaults.CENTERED_ALIGNMENT: return Math.round(minOffset + (maxOffset - minOffset) / 2);
case require_defaults.AUTO_ALIGNMENT:
default: if (scrollOffset >= minOffset && scrollOffset <= maxOffset) return scrollOffset;
else if (scrollOffset < minOffset) return minOffset;
else return maxOffset;
}
},
getStartIndexForOffset: (props, offset, listCache) => findItem(props, listCache, offset),
getStopIndexForStartIndex: (props, startIndex, scrollOffset, listCache) => {
const { height, total, layout, width } = props;
const size = require_utils.isHorizontal(layout) ? width : height;
const item = getItemFromCache(props, startIndex, listCache);
const maxOffset = scrollOffset + size;
let offset = item.offset + item.size;
let stopIndex = startIndex;
while (stopIndex < total - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache(props, stopIndex, listCache).size;
}
return stopIndex;
},
initCache({ estimatedItemSize = require_defaults.DEFAULT_DYNAMIC_LIST_ITEM_SIZE }, instance) {
const cache = {
items: {},
estimatedItemSize,
lastVisitedIndex: -1
};
cache.clearCacheAfterIndex = (index, forceUpdate = true) => {
cache.lastVisitedIndex = Math.min(cache.lastVisitedIndex, index - 1);
instance.exposed?.getItemStyleCache(-1);
if (forceUpdate) instance.proxy?.$forceUpdate();
};
return cache;
},
clearCache: false,
validateProps: ({ itemSize }) => {
if (process.env.NODE_ENV !== "production") {
if (typeof itemSize !== "function") require_error.throwError(SCOPE, `
itemSize is required as function, but the given value was ${typeof itemSize}
`);
}
}
});
//#endregion
exports.default = DynamicSizeList;
//# sourceMappingURL=dynamic-size-list.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,210 @@
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
import "../../../../utils/index.js";
import { GridItemKeyGetter, ItemSize } from "../types.js";
import "../../../../index.js";
import * as vue from "vue";
//#region ../../packages/components/virtual-list/src/components/fixed-size-grid.d.ts
declare const FixedSizeGrid: vue.DefineComponent<vue.ExtractPropTypes<{
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: EpPropFinalized<(new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, ({
columnIndex,
rowIndex
}: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: EpPropFinalized<(new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, ({
columnIndex,
rowIndex
}: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
}>> & Readonly<{
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}>, {
readonly className: string;
readonly direction: EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly data: any[];
readonly scrollbarAlwaysOn: boolean;
readonly itemKey: GridItemKeyGetter;
readonly containerElement: EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown>;
readonly innerElement: EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly innerProps: Record<string, unknown>;
readonly perfMode: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly columnCache: number;
readonly initScrollLeft: number;
readonly initScrollTop: number;
readonly rowCache: number;
readonly hScrollbarSize: number;
readonly vScrollbarSize: number;
readonly scrollbarStartGap: number;
readonly scrollbarEndGap: number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { FixedSizeGrid };
@@ -0,0 +1,91 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_types = require('../../../../utils/types.js');
const require_error = require('../../../../utils/error.js');
const require_defaults = require('../defaults.js');
const require_build_grid = require('../builders/build-grid.js');
//#region ../../packages/components/virtual-list/src/components/fixed-size-grid.ts
const SCOPE = "ElFixedSizeGrid";
const FixedSizeGrid = require_build_grid.default({
name: "ElFixedSizeGrid",
getColumnPosition: ({ columnWidth }, index) => [columnWidth, index * columnWidth],
getRowPosition: ({ rowHeight }, index) => [rowHeight, index * rowHeight],
getEstimatedTotalHeight: ({ totalRow, rowHeight }) => rowHeight * totalRow,
getEstimatedTotalWidth: ({ totalColumn, columnWidth }) => columnWidth * totalColumn,
getColumnOffset: ({ totalColumn, columnWidth, width }, columnIndex, alignment, scrollLeft, _, scrollBarWidth) => {
width = Number(width);
const lastColumnOffset = Math.max(0, totalColumn * columnWidth - width);
const maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
const minOffset = Math.max(0, columnIndex * columnWidth - width + scrollBarWidth + columnWidth);
if (alignment === "smart") if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) alignment = require_defaults.AUTO_ALIGNMENT;
else alignment = require_defaults.CENTERED_ALIGNMENT;
switch (alignment) {
case require_defaults.START_ALIGNMENT: return maxOffset;
case require_defaults.END_ALIGNMENT: return minOffset;
case require_defaults.CENTERED_ALIGNMENT: {
const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
if (middleOffset < Math.ceil(width / 2)) return 0;
else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) return lastColumnOffset;
else return middleOffset;
}
case require_defaults.AUTO_ALIGNMENT:
default: if (scrollLeft >= minOffset && scrollLeft <= maxOffset) return scrollLeft;
else if (minOffset > maxOffset) return minOffset;
else if (scrollLeft < minOffset) return minOffset;
else return maxOffset;
}
},
getRowOffset: ({ rowHeight, height, totalRow }, rowIndex, align, scrollTop, _, scrollBarWidth) => {
height = Number(height);
const lastRowOffset = Math.max(0, totalRow * rowHeight - height);
const maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
const minOffset = Math.max(0, rowIndex * rowHeight - height + scrollBarWidth + rowHeight);
if (align === require_defaults.SMART_ALIGNMENT) if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) align = require_defaults.AUTO_ALIGNMENT;
else align = require_defaults.CENTERED_ALIGNMENT;
switch (align) {
case require_defaults.START_ALIGNMENT: return maxOffset;
case require_defaults.END_ALIGNMENT: return minOffset;
case require_defaults.CENTERED_ALIGNMENT: {
const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
if (middleOffset < Math.ceil(height / 2)) return 0;
else if (middleOffset > lastRowOffset + Math.floor(height / 2)) return lastRowOffset;
else return middleOffset;
}
case require_defaults.AUTO_ALIGNMENT:
default: if (scrollTop >= minOffset && scrollTop <= maxOffset) return scrollTop;
else if (minOffset > maxOffset) return minOffset;
else if (scrollTop < minOffset) return minOffset;
else return maxOffset;
}
},
getColumnStartIndexForOffset: ({ columnWidth, totalColumn }, scrollLeft) => Math.max(0, Math.min(totalColumn - 1, Math.floor(scrollLeft / columnWidth))),
getColumnStopIndexForStartIndex: ({ columnWidth, totalColumn, width }, startIndex, scrollLeft) => {
const left = startIndex * columnWidth;
const visibleColumnsCount = Math.ceil((width + scrollLeft - left) / columnWidth);
return Math.max(0, Math.min(totalColumn - 1, startIndex + visibleColumnsCount - 1));
},
getRowStartIndexForOffset: ({ rowHeight, totalRow }, scrollTop) => Math.max(0, Math.min(totalRow - 1, Math.floor(scrollTop / rowHeight))),
getRowStopIndexForStartIndex: ({ rowHeight, totalRow, height }, startIndex, scrollTop) => {
const top = startIndex * rowHeight;
const numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
return Math.max(0, Math.min(totalRow - 1, startIndex + numVisibleRows - 1));
},
initCache: () => void 0,
clearCache: true,
validateProps: ({ columnWidth, rowHeight }) => {
if (process.env.NODE_ENV !== "production") {
if (!require_types.isNumber(columnWidth)) require_error.throwError(SCOPE, `
"columnWidth" must be passed as number,
instead ${typeof columnWidth} was given.
`);
if (!require_types.isNumber(rowHeight)) require_error.throwError(SCOPE, `
"columnWidth" must be passed as number,
instead ${typeof rowHeight} was given.
`);
}
}
});
//#endregion
exports.default = FixedSizeGrid;
//# sourceMappingURL=fixed-size-grid.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,192 @@
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
import "../../../../utils/index.js";
import { Alignment, ItemSize } from "../types.js";
import "../../../../index.js";
import * as vue from "vue";
//#region ../../packages/components/virtual-list/src/components/fixed-size-list.d.ts
declare const FixedSizeList: vue.DefineComponent<vue.ExtractPropTypes<{
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>, {
ns: {
namespace: 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: vue.ComputedRef<string | number | undefined>;
estimatedTotalSize: vue.ComputedRef<number>;
windowStyle: vue.ComputedRef<(string | false | vue.CSSProperties | vue.StyleValue[] | {
[x: string]: string;
position: string;
WebkitOverflowScrolling: string;
willChange: string;
} | null | undefined)[]>;
windowRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
innerRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
innerStyle: vue.ComputedRef<{
height: string;
pointerEvents: string | undefined;
width: string;
margin: number;
boxSizing: string;
}>;
itemsToRender: vue.ComputedRef<number[]>;
scrollbarRef: vue.Ref<any, any>;
states: vue.Ref<{
isScrolling: boolean;
scrollDir: string;
scrollOffset: number;
updateRequested: boolean;
isScrollbarDragging: boolean;
scrollbarAlwaysOn: boolean;
}, {
isScrolling: boolean;
scrollDir: string;
scrollOffset: number;
updateRequested: boolean;
isScrollbarDragging: boolean;
scrollbarAlwaysOn: boolean;
} | {
isScrolling: boolean;
scrollDir: string;
scrollOffset: number;
updateRequested: boolean;
isScrollbarDragging: boolean;
scrollbarAlwaysOn: boolean;
}>;
getItemStyle: (idx: number) => vue.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;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & Readonly<{
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}>, {
readonly layout: EpPropMergeType<StringConstructor, "horizontal" | "vertical", never>;
readonly className: string;
readonly direction: EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly data: any[];
readonly scrollbarAlwaysOn: boolean;
readonly containerElement: EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown>;
readonly innerElement: EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly innerProps: Record<string, unknown>;
readonly perfMode: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly cache: number;
readonly initScrollOffset: number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
type FixedSizeListInstance = InstanceType<typeof FixedSizeList> & unknown;
//#endregion
export { FixedSizeList, FixedSizeListInstance };
@@ -0,0 +1,57 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_error = require('../../../../utils/error.js');
const require_defaults = require('../defaults.js');
const require_utils = require('../utils.js');
const require_build_list = require('../builders/build-list.js');
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/virtual-list/src/components/fixed-size-list.ts
const FixedSizeList = require_build_list.default({
name: "ElFixedSizeList",
getItemOffset: ({ itemSize }, index) => index * itemSize,
getItemSize: ({ itemSize }) => itemSize,
getEstimatedTotalSize: ({ total, itemSize }) => itemSize * total,
getOffset: ({ height, total, itemSize, layout, width }, index, alignment, scrollOffset) => {
const size = require_utils.isHorizontal(layout) ? width : height;
if (process.env.NODE_ENV !== "production" && (0, _vue_shared.isString)(size)) require_error.throwError("[ElVirtualList]", `
You should set
width/height
to number when your layout is
horizontal/vertical
`);
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 === require_defaults.SMART_ALIGNMENT) if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) alignment = require_defaults.AUTO_ALIGNMENT;
else alignment = require_defaults.CENTERED_ALIGNMENT;
switch (alignment) {
case require_defaults.START_ALIGNMENT: return maxOffset;
case require_defaults.END_ALIGNMENT: return minOffset;
case require_defaults.CENTERED_ALIGNMENT: {
const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
if (middleOffset < Math.ceil(size / 2)) return 0;
else if (middleOffset > lastItemOffset + Math.floor(size / 2)) return lastItemOffset;
else return middleOffset;
}
case require_defaults.AUTO_ALIGNMENT:
default: if (scrollOffset >= minOffset && scrollOffset <= maxOffset) return scrollOffset;
else if (scrollOffset < minOffset) return minOffset;
else return maxOffset;
}
},
getStartIndexForOffset: ({ total, itemSize }, offset) => Math.max(0, Math.min(total - 1, Math.floor(offset / itemSize))),
getStopIndexForStartIndex: ({ height, total, itemSize, layout, width }, startIndex, scrollOffset) => {
const offset = startIndex * itemSize;
const size = require_utils.isHorizontal(layout) ? width : height;
const numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
return Math.max(0, Math.min(total - 1, startIndex + numVisibleItems - 1));
},
initCache() {},
clearCache: true,
validateProps() {}
});
//#endregion
exports.default = FixedSizeList;
//# sourceMappingURL=fixed-size-list.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,166 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_raf = require('../../../../utils/raf.js');
const require_index = require('../../../../hooks/use-namespace/index.js');
const require_util = require('../../../scrollbar/src/util.js');
const require_defaults = require('../defaults.js');
const require_props = require('../props.js');
const require_utils = require('../utils.js');
let vue = require("vue");
//#region ../../packages/components/virtual-list/src/components/scrollbar.ts
const ScrollBar = (0, vue.defineComponent)({
name: "ElVirtualScrollBar",
props: require_props.virtualizedScrollbarProps,
emits: [
"scroll",
"start-move",
"stop-move"
],
setup(props, { emit }) {
const GAP = (0, vue.computed)(() => props.startGap + props.endGap);
const nsVirtualScrollbar = require_index.useNamespace("virtual-scrollbar");
const nsScrollbar = require_index.useNamespace("scrollbar");
const trackRef = (0, vue.ref)();
const thumbRef = (0, vue.ref)();
let frameHandle = null;
let onselectstartStore = null;
const state = (0, vue.reactive)({
isDragging: false,
traveled: 0
});
const bar = (0, vue.computed)(() => require_util.BAR_MAP[props.layout]);
const trackSize = (0, vue.computed)(() => props.clientSize - (0, vue.unref)(GAP));
const trackStyle = (0, vue.computed)(() => ({
position: "absolute",
width: `${require_defaults.HORIZONTAL === props.layout ? trackSize.value : props.scrollbarSize}px`,
height: `${require_defaults.HORIZONTAL === props.layout ? props.scrollbarSize : trackSize.value}px`,
[require_defaults.ScrollbarDirKey[props.layout]]: "2px",
right: "2px",
bottom: "2px",
borderRadius: "4px"
}));
const thumbSize = (0, vue.computed)(() => {
const ratio = props.ratio;
if (ratio >= 100) return Number.POSITIVE_INFINITY;
if (ratio >= 50) return ratio * trackSize.value / 100;
const SCROLLBAR_MAX_SIZE = trackSize.value / 3;
return Math.floor(Math.min(Math.max(ratio * trackSize.value / 100, require_defaults.SCROLLBAR_MIN_SIZE), SCROLLBAR_MAX_SIZE));
});
const thumbStyle = (0, vue.computed)(() => {
if (!Number.isFinite(thumbSize.value)) return { display: "none" };
const thumb = `${thumbSize.value}px`;
return require_utils.renderThumbStyle({
bar: bar.value,
size: thumb,
move: state.traveled
}, props.layout);
});
const totalSteps = (0, vue.computed)(() => Math.ceil(props.clientSize - thumbSize.value - (0, vue.unref)(GAP)));
const attachEvents = () => {
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
const thumbEl = (0, vue.unref)(thumbRef);
if (!thumbEl) return;
onselectstartStore = document.onselectstart;
document.onselectstart = () => false;
thumbEl.addEventListener("touchmove", onMouseMove, { passive: true });
thumbEl.addEventListener("touchend", onMouseUp);
};
const detachEvents = () => {
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
document.onselectstart = onselectstartStore;
onselectstartStore = null;
const thumbEl = (0, vue.unref)(thumbRef);
if (!thumbEl) return;
thumbEl.removeEventListener("touchmove", onMouseMove);
thumbEl.removeEventListener("touchend", onMouseUp);
};
const onThumbMouseDown = (e) => {
e.stopImmediatePropagation();
if (e.ctrlKey || [1, 2].includes(e.button)) return;
state.isDragging = true;
state[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
emit("start-move");
attachEvents();
};
const onMouseUp = () => {
state.isDragging = false;
state[bar.value.axis] = 0;
emit("stop-move");
detachEvents();
};
const onMouseMove = (e) => {
const { isDragging } = state;
if (!isDragging) return;
if (!thumbRef.value || !trackRef.value) return;
const prevPage = state[bar.value.axis];
if (!prevPage) return;
require_raf.cAF(frameHandle);
/**
* +--------------+ +--------------+
* | - <--------- thumb.offsetTop | |
* | |+| <--+ | |
* | - | | |
* | Content | | | |
* | | | | |
* | | | | |
* | | | | -
* | | +--> | |+|
* | | | -
* +--------------+ +--------------+
*/
const distance = (trackRef.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1 - (thumbRef.value[bar.value.offset] - prevPage);
frameHandle = require_raf.rAF(() => {
state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
emit("scroll", distance, totalSteps.value);
});
};
const clickTrackHandler = (e) => {
const distance = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) - thumbRef.value[bar.value.offset] / 2;
state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
emit("scroll", distance, totalSteps.value);
};
(0, vue.watch)(() => props.scrollFrom, (v) => {
if (state.isDragging) return;
/**
* this is simply mapping the current scrollbar offset
*
* formula 1:
* v = scrollOffset / (estimatedTotalSize - clientSize)
* traveled = v * (clientSize - thumbSize - GAP) --> v * totalSteps
*
* formula 2:
* traveled = (v * clientSize) / (clientSize / totalSteps) --> (v * clientSize) * (totalSteps / clientSize) --> v * totalSteps
*/
state.traveled = Math.ceil(v * totalSteps.value);
});
(0, vue.onBeforeUnmount)(() => {
detachEvents();
});
return () => {
return (0, vue.h)("div", {
role: "presentation",
ref: trackRef,
class: [
nsVirtualScrollbar.b(),
props.class,
(props.alwaysOn || state.isDragging) && "always-on"
],
style: trackStyle.value,
onMousedown: (0, vue.withModifiers)(clickTrackHandler, ["stop", "prevent"]),
onTouchstartPrevent: onThumbMouseDown
}, (0, vue.h)("div", {
ref: thumbRef,
class: nsScrollbar.e("thumb"),
style: thumbStyle.value,
onMousedown: onThumbMouseDown
}, []));
};
}
});
//#endregion
exports.default = ScrollBar;
//# sourceMappingURL=scrollbar.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,5 @@
//#region ../../packages/components/virtual-list/src/defaults.d.ts
declare const FORWARD = "forward";
declare const BACKWARD = "backward";
//#endregion
export { BACKWARD, FORWARD };
@@ -0,0 +1,52 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
//#region ../../packages/components/virtual-list/src/defaults.ts
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;
//#endregion
exports.AUTO_ALIGNMENT = AUTO_ALIGNMENT;
exports.BACKWARD = BACKWARD;
exports.CENTERED_ALIGNMENT = CENTERED_ALIGNMENT;
exports.DEFAULT_DYNAMIC_LIST_ITEM_SIZE = DEFAULT_DYNAMIC_LIST_ITEM_SIZE;
exports.END_ALIGNMENT = END_ALIGNMENT;
exports.FORWARD = FORWARD;
exports.HORIZONTAL = HORIZONTAL;
exports.ITEM_RENDER_EVT = ITEM_RENDER_EVT;
exports.LTR = LTR;
exports.RTL = RTL;
exports.RTL_OFFSET_NAG = RTL_OFFSET_NAG;
exports.RTL_OFFSET_POS_ASC = RTL_OFFSET_POS_ASC;
exports.RTL_OFFSET_POS_DESC = RTL_OFFSET_POS_DESC;
exports.SCROLLBAR_MIN_SIZE = SCROLLBAR_MIN_SIZE;
exports.SCROLL_EVT = SCROLL_EVT;
exports.SMART_ALIGNMENT = SMART_ALIGNMENT;
exports.START_ALIGNMENT = START_ALIGNMENT;
exports.ScrollbarDirKey = ScrollbarDirKey;
exports.ScrollbarSizeKey = ScrollbarSizeKey;
exports.VERTICAL = VERTICAL;
//# sourceMappingURL=defaults.js.map
@@ -0,0 +1 @@
{"version":3,"file":"defaults.js","names":[],"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"],"mappings":";;;AAAA,MAAa,iCAAiC;AAE9C,MAAa,kBAAkB;AAC/B,MAAa,aAAa;AAE1B,MAAa,UAAU;AACvB,MAAa,WAAW;AAExB,MAAa,iBAAiB;AAC9B,MAAa,kBAAkB;AAC/B,MAAa,kBAAkB;AAC/B,MAAa,qBAAqB;AAClC,MAAa,gBAAgB;AAE7B,MAAa,aAAa;AAC1B,MAAa,WAAW;AAExB,MAAa,MAAM;AACnB,MAAa,MAAM;AAEnB,MAAa,iBAAiB;AAC9B,MAAa,qBAAqB;AAClC,MAAa,sBAAsB;AAEnC,MAAa,mBAAmB;EAC7B,aAAa;EACb,WAAW;CACb;AAED,MAAa,kBAAkB;EAC5B,aAAa;EACb,WAAW;CACb;AAED,MAAa,qBAAqB"}
@@ -0,0 +1,6 @@
import * as vue from "vue";
//#region ../../packages/components/virtual-list/src/hooks/use-cache.d.ts
declare const useCache: <T>() => vue.ComputedRef<(_: any, __: any, ___: any) => Record<string, T>>;
//#endregion
export { useCache };
@@ -0,0 +1,19 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
let lodash_unified = require("lodash-unified");
let vue = require("vue");
let memoize_one = require("memoize-one");
memoize_one = require_runtime.__toESM(memoize_one);
//#region ../../packages/components/virtual-list/src/hooks/use-cache.ts
const useCache = () => {
const props = (0, vue.getCurrentInstance)().proxy.$props;
return (0, vue.computed)(() => {
const _getItemStyleCache = (_, __, ___) => ({});
return props.perfMode ? (0, lodash_unified.memoize)(_getItemStyleCache) : (0, memoize_one.default)(_getItemStyleCache);
});
};
//#endregion
exports.useCache = useCache;
//# sourceMappingURL=use-cache.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-cache.js","names":[],"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<(_: any, __: any, ___: any) => Record<string, T>>(() => {\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"],"mappings":";;;;;;;;AAMA,MAAa,iBAAoB;CAG/B,MAAM,qCAFyB,CAEd,MAAO;AAExB,gCAAwE;EAEtE,MAAM,sBAAsB,GAAQ,IAAS,SAC1C,EAAE;AACL,SAAO,MAAM,uCACD,mBAAmB,4BACnB,mBAAmB;GAC/B"}
@@ -0,0 +1,51 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_raf = require('../../../../utils/raf.js');
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
//#region ../../packages/components/virtual-list/src/hooks/use-grid-touch.ts
const useGridTouch = (windowRef, states, scrollTo, estimatedTotalWidth, estimatedTotalHeight, parsedWidth, parsedHeight) => {
const touchStartX = (0, vue.ref)(0);
const touchStartY = (0, vue.ref)(0);
let frameHandle;
let deltaX = 0;
let deltaY = 0;
const handleTouchStart = (event) => {
require_raf.cAF(frameHandle);
touchStartX.value = event.touches[0].clientX;
touchStartY.value = event.touches[0].clientY;
deltaX = 0;
deltaY = 0;
};
const handleTouchMove = (event) => {
event.preventDefault();
require_raf.cAF(frameHandle);
deltaX += touchStartX.value - event.touches[0].clientX;
deltaY += touchStartY.value - event.touches[0].clientY;
touchStartX.value = event.touches[0].clientX;
touchStartY.value = event.touches[0].clientY;
frameHandle = require_raf.rAF(() => {
const maxScrollLeft = estimatedTotalWidth.value - (0, vue.unref)(parsedWidth);
const maxScrollTop = estimatedTotalHeight.value - (0, vue.unref)(parsedHeight);
scrollTo({
scrollLeft: Math.min(states.value.scrollLeft + deltaX, maxScrollLeft),
scrollTop: Math.min(states.value.scrollTop + deltaY, maxScrollTop)
});
deltaX = 0;
deltaY = 0;
});
};
(0, _vueuse_core.useEventListener)(windowRef, "touchstart", handleTouchStart, { passive: true });
(0, _vueuse_core.useEventListener)(windowRef, "touchmove", handleTouchMove, { passive: false });
return {
touchStartX,
touchStartY,
handleTouchStart,
handleTouchMove
};
};
//#endregion
exports.useGridTouch = useGridTouch;
//# sourceMappingURL=use-grid-touch.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-grid-touch.js","names":["rAF"],"sources":["../../../../../../../packages/components/virtual-list/src/hooks/use-grid-touch.ts"],"sourcesContent":["import { ref, unref } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { cAF, rAF } from '@element-plus/utils'\n\nimport type { ComputedRef, Ref } from 'vue'\nimport type { GridScrollOptions, GridStates } from '../types'\n\nexport const useGridTouch = (\n windowRef: Ref<HTMLElement | undefined>,\n states: Ref<GridStates>,\n scrollTo: (scrollOptions: GridScrollOptions) => void,\n estimatedTotalWidth: ComputedRef<number>,\n estimatedTotalHeight: ComputedRef<number>,\n parsedWidth: ComputedRef<number>,\n parsedHeight: ComputedRef<number>\n) => {\n const touchStartX = ref(0)\n const touchStartY = ref(0)\n let frameHandle: number | undefined\n let deltaX = 0\n let deltaY = 0\n\n const handleTouchStart = (event: TouchEvent) => {\n cAF(frameHandle!)\n touchStartX.value = event.touches[0].clientX\n touchStartY.value = event.touches[0].clientY\n deltaX = 0\n deltaY = 0\n }\n\n const handleTouchMove = (event: TouchEvent) => {\n event.preventDefault()\n cAF(frameHandle!)\n\n deltaX += touchStartX.value - event.touches[0].clientX\n deltaY += touchStartY.value - event.touches[0].clientY\n touchStartX.value = event.touches[0].clientX\n touchStartY.value = event.touches[0].clientY\n\n frameHandle = rAF(() => {\n const maxScrollLeft = estimatedTotalWidth.value - unref(parsedWidth)\n const maxScrollTop = estimatedTotalHeight.value - unref(parsedHeight)\n\n const safeScrollLeft = Math.min(\n states.value.scrollLeft + deltaX,\n maxScrollLeft\n )\n const safeScrollTop = Math.min(\n states.value.scrollTop + deltaY,\n maxScrollTop\n )\n\n scrollTo({\n scrollLeft: safeScrollLeft,\n scrollTop: safeScrollTop,\n })\n\n deltaX = 0\n deltaY = 0\n })\n }\n\n useEventListener(windowRef, 'touchstart', handleTouchStart, {\n passive: true,\n })\n useEventListener(windowRef, 'touchmove', handleTouchMove, {\n passive: false,\n })\n\n return {\n touchStartX,\n touchStartY,\n handleTouchStart,\n handleTouchMove,\n }\n}\n"],"mappings":";;;;;;;AAOA,MAAa,gBACX,WACA,QACA,UACA,qBACA,sBACA,aACA,iBACG;CACH,MAAM,2BAAkB,EAAE;CAC1B,MAAM,2BAAkB,EAAE;CAC1B,IAAI;CACJ,IAAI,SAAS;CACb,IAAI,SAAS;CAEb,MAAM,oBAAoB,UAAsB;AAC9C,kBAAI,YAAa;AACjB,cAAY,QAAQ,MAAM,QAAQ,GAAG;AACrC,cAAY,QAAQ,MAAM,QAAQ,GAAG;AACrC,WAAS;AACT,WAAS;;CAGX,MAAM,mBAAmB,UAAsB;AAC7C,QAAM,gBAAgB;AACtB,kBAAI,YAAa;AAEjB,YAAU,YAAY,QAAQ,MAAM,QAAQ,GAAG;AAC/C,YAAU,YAAY,QAAQ,MAAM,QAAQ,GAAG;AAC/C,cAAY,QAAQ,MAAM,QAAQ,GAAG;AACrC,cAAY,QAAQ,MAAM,QAAQ,GAAG;AAErC,gBAAcA,sBAAU;GACtB,MAAM,gBAAgB,oBAAoB,uBAAc,YAAY;GACpE,MAAM,eAAe,qBAAqB,uBAAc,aAAa;AAWrE,YAAS;IACP,YAVqB,KAAK,IAC1B,OAAO,MAAM,aAAa,QAC1B,cACD;IAQC,WAPoB,KAAK,IACzB,OAAO,MAAM,YAAY,QACzB,aACD;IAKA,CAAC;AAEF,YAAS;AACT,YAAS;IACT;;AAGJ,oCAAiB,WAAW,cAAc,kBAAkB,EAC1D,SAAS,MACV,CAAC;AACF,oCAAiB,WAAW,aAAa,iBAAiB,EACxD,SAAS,OACV,CAAC;AAEF,QAAO;EACL;EACA;EACA;EACA;EACD"}
@@ -0,0 +1,45 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_raf = require('../../../../utils/raf.js');
//#region ../../packages/components/virtual-list/src/hooks/use-grid-wheel.ts
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) => {
require_raf.cAF(frameHandle);
let x = e.deltaX;
let y = e.deltaY;
if (Math.abs(x) > Math.abs(y)) y = 0;
else x = 0;
if (e.shiftKey && y !== 0) {
x = y;
y = 0;
}
if (hasReachedEdge(x, y)) {
if (e.deltaX !== 0 && x === 0) e.preventDefault();
return;
}
xOffset += x;
yOffset += y;
e.preventDefault();
frameHandle = require_raf.rAF(() => {
onWheelDelta(xOffset, yOffset);
xOffset = 0;
yOffset = 0;
});
};
return {
hasReachedEdge,
onWheel
};
};
//#endregion
exports.useGridWheel = useGridWheel;
//# sourceMappingURL=use-grid-wheel.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-grid-wheel.js","names":["rAF"],"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 (hasReachedEdge(x, y)) {\n // #23524\n // Prevent browser back navigation when the table can still scroll\n // horizontally but the Y-axis normalization dropped the X delta and the Y edge was hit instead.\n if (e.deltaX !== 0 && x === 0) {\n e.preventDefault()\n }\n return\n }\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"],"mappings":";;;;AAaA,MAAa,gBACX,EAAE,YAAY,cAAc,YAAY,gBACxC,iBACG;CACH,IAAI,cAA6B;CACjC,IAAI,UAAU;CACd,IAAI,UAAU;CAEd,MAAM,kBAAkB,GAAW,MAAc;EAC/C,MAAM,eACH,IAAI,KAAK,aAAa,SAAW,IAAI,KAAK,WAAW;EACxD,MAAM,eACH,IAAI,KAAK,aAAa,SAAW,IAAI,KAAK,WAAW;AACxD,SAAO,gBAAgB;;CAGzB,MAAM,WAAW,MAAkB;AACjC,kBAAI,YAAa;EAEjB,IAAI,IAAI,EAAE;EACV,IAAI,IAAI,EAAE;AAEV,MAAI,KAAK,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAC3B,KAAI;MAEJ,KAAI;AAIN,MAAI,EAAE,YAAY,MAAM,GAAG;AACzB,OAAI;AACJ,OAAI;;AAGN,MAAI,eAAe,GAAG,EAAE,EAAE;AAIxB,OAAI,EAAE,WAAW,KAAK,MAAM,EAC1B,GAAE,gBAAgB;AAEpB;;AAGF,aAAW;AACX,aAAW;AAEX,IAAE,gBAAgB;AAElB,gBAAcA,sBAAU;AACtB,gBAAa,SAAS,QAAQ;AAC9B,aAAU;AACV,aAAU;IACV;;AAGJ,QAAO;EACL;EACA;EACD"}
@@ -0,0 +1,37 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_browser = require('../../../../utils/browser.js');
const require_raf = require('../../../../utils/raf.js');
const require_defaults = require('../defaults.js');
//#region ../../packages/components/virtual-list/src/hooks/use-wheel.ts
const useWheel = ({ atEndEdge, atStartEdge, layout }, onWheelDelta) => {
let frameHandle;
let offset = 0;
const hasReachedEdge = (offset) => {
return offset < 0 && atStartEdge.value || offset > 0 && atEndEdge.value;
};
const onWheel = (e) => {
require_raf.cAF(frameHandle);
let { deltaX, deltaY } = e;
if (e.shiftKey && deltaY !== 0) {
deltaX = deltaY;
deltaY = 0;
}
const newOffset = layout.value === require_defaults.HORIZONTAL ? deltaX : deltaY;
if (hasReachedEdge(newOffset)) return;
offset += newOffset;
if (!require_browser.isFirefox() && newOffset !== 0) e.preventDefault();
frameHandle = require_raf.rAF(() => {
onWheelDelta(offset);
offset = 0;
});
};
return {
hasReachedEdge,
onWheel
};
};
//#endregion
exports.default = useWheel;
//# sourceMappingURL=use-wheel.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-wheel.js","names":["HORIZONTAL","isFirefox","rAF"],"sources":["../../../../../../../packages/components/virtual-list/src/hooks/use-wheel.ts"],"sourcesContent":["import { cAF, isFirefox, rAF } from '@element-plus/utils'\nimport { HORIZONTAL } from '../defaults'\n\nimport type { ComputedRef } from 'vue'\nimport type { LayoutDirection } from '../types'\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 let { deltaX, deltaY } = e\n // Special case for windows machine with shift key + wheel scrolling\n if (e.shiftKey && deltaY !== 0) {\n deltaX = deltaY\n deltaY = 0\n }\n\n const newOffset = layout.value === HORIZONTAL ? deltaX : deltaY\n\n if (hasReachedEdge(newOffset)) return\n\n offset += newOffset\n\n if (!isFirefox() && newOffset !== 0) {\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"],"mappings":";;;;;;AAcA,MAAM,YACJ,EAAE,WAAW,aAAa,UAC1B,iBACG;CACH,IAAI;CACJ,IAAI,SAAS;CAEb,MAAM,kBAAkB,WAAmB;AAIzC,SAFG,SAAS,KAAK,YAAY,SAAW,SAAS,KAAK,UAAU;;CAKlE,MAAM,WAAW,MAAkB;AACjC,kBAAI,YAAY;EAEhB,IAAI,EAAE,QAAQ,WAAW;AAEzB,MAAI,EAAE,YAAY,WAAW,GAAG;AAC9B,YAAS;AACT,YAAS;;EAGX,MAAM,YAAY,OAAO,UAAUA,8BAAa,SAAS;AAEzD,MAAI,eAAe,UAAU,CAAE;AAE/B,YAAU;AAEV,MAAI,CAACC,2BAAW,IAAI,cAAc,EAChC,GAAE,gBAAgB;AAGpB,gBAAcC,sBAAU;AACtB,gBAAa,OAAO;AACpB,YAAS;IACT;;AAGJ,QAAO;EACL;EACA;EACD"}
@@ -0,0 +1,218 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { GridItemKeyGetter, ItemSize } from "./types.js";
import * as vue from "vue";
import { ExtractPropTypes, ExtractPublicPropTypes, StyleValue } from "vue";
//#region ../../packages/components/virtual-list/src/props.d.ts
declare const virtualizedProps: {
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
};
declare const virtualizedListProps: {
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
declare const virtualizedGridProps: {
readonly className: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | (((new (...args: any[]) => string | Element) | (() => string | Element)) | null)[], unknown, unknown, "div", boolean>;
readonly data: EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | (((new (...args: any[]) => any[]) | (() => any[])) | null)[], unknown, unknown, () => [], boolean>;
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly columnCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly columnWidth: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedColumnWidth: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly estimatedRowHeight: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly initScrollLeft: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly initScrollTop: EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly itemKey: EpPropFinalized<(new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => GridItemKeyGetter) | (() => GridItemKeyGetter) | {
(): GridItemKeyGetter;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, ({
columnIndex,
rowIndex
}: {
columnIndex: number;
rowIndex: number;
}) => string, boolean>;
readonly rowCache: EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly rowHeight: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => number | ItemSize) | (() => number | ItemSize) | (((new (...args: any[]) => number | ItemSize) | (() => number | ItemSize)) | null)[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalColumn: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly totalRow: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly hScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly vScrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly scrollbarStartGap: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly scrollbarEndGap: EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly role: StringConstructor;
};
declare const virtualizedScrollbarProps: {
readonly alwaysOn: BooleanConstructor;
readonly class: StringConstructor;
readonly layout: EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly total: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly ratio: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly clientSize: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly scrollFrom: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly scrollbarSize: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly startGap: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly endGap: EpPropFinalized<NumberConstructor, unknown, unknown, 2, boolean>;
readonly visible: BooleanConstructor;
};
type VirtualizedProps = ExtractPropTypes<typeof virtualizedProps>;
type VirtualizedPropsPublic = ExtractPublicPropTypes<typeof virtualizedProps>;
type VirtualizedListProps = ExtractPropTypes<typeof virtualizedListProps>;
type VirtualizedListPropsPublic = ExtractPublicPropTypes<typeof virtualizedListProps>;
type VirtualizedGridProps = ExtractPropTypes<typeof virtualizedGridProps>;
type VirtualizedGridPropsPublic = ExtractPublicPropTypes<typeof virtualizedGridProps>;
type VirtualizedScrollbarProps = ExtractPropTypes<typeof virtualizedScrollbarProps>;
type VirtualizedScrollbarPropsPublic = ExtractPublicPropTypes<typeof virtualizedScrollbarProps>;
//#endregion
export { VirtualizedGridProps, VirtualizedGridPropsPublic, VirtualizedListProps, VirtualizedListPropsPublic, VirtualizedProps, VirtualizedPropsPublic, VirtualizedScrollbarProps, VirtualizedScrollbarPropsPublic, virtualizedGridProps, virtualizedListProps, virtualizedProps, virtualizedScrollbarProps };
@@ -0,0 +1,147 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
const require_typescript = require('../../../utils/typescript.js');
const require_defaults = require('./defaults.js');
//#region ../../packages/components/virtual-list/src/props.ts
const itemSize = require_runtime.buildProp({
type: require_runtime.definePropType([Number, Function]),
required: true
});
const estimatedItemSize = require_runtime.buildProp({ type: Number });
const cache = require_runtime.buildProp({
type: Number,
default: 2
});
const direction = require_runtime.buildProp({
type: String,
values: ["ltr", "rtl"],
default: "ltr"
});
const initScrollOffset = require_runtime.buildProp({
type: Number,
default: 0
});
const total = require_runtime.buildProp({
type: Number,
required: true
});
const layout = require_runtime.buildProp({
type: String,
values: ["horizontal", "vertical"],
default: require_defaults.VERTICAL
});
const virtualizedProps = require_runtime.buildProps({
className: {
type: String,
default: ""
},
containerElement: {
type: require_runtime.definePropType([String, Object]),
default: "div"
},
data: {
type: require_runtime.definePropType(Array),
default: () => require_typescript.mutable([])
},
direction,
height: {
type: [String, Number],
required: true
},
innerElement: {
type: [String, Object],
default: "div"
},
innerProps: {
type: require_runtime.definePropType(Object),
default: () => ({})
},
style: { type: require_runtime.definePropType([
Object,
String,
Array
]) },
useIsScrolling: Boolean,
width: {
type: [Number, String],
required: false
},
perfMode: {
type: Boolean,
default: true
},
scrollbarAlwaysOn: Boolean
});
const virtualizedListProps = require_runtime.buildProps({
cache,
estimatedItemSize,
layout,
initScrollOffset,
total,
itemSize,
...virtualizedProps
});
const scrollbarSize = {
type: Number,
default: 6
};
const startGap = {
type: Number,
default: 0
};
const endGap = {
type: Number,
default: 2
};
const virtualizedGridProps = require_runtime.buildProps({
columnCache: cache,
columnWidth: itemSize,
estimatedColumnWidth: estimatedItemSize,
estimatedRowHeight: estimatedItemSize,
initScrollLeft: initScrollOffset,
initScrollTop: initScrollOffset,
itemKey: {
type: require_runtime.definePropType(Function),
default: ({ columnIndex, rowIndex }) => `${rowIndex}:${columnIndex}`
},
rowCache: cache,
rowHeight: itemSize,
totalColumn: total,
totalRow: total,
hScrollbarSize: scrollbarSize,
vScrollbarSize: scrollbarSize,
scrollbarStartGap: startGap,
scrollbarEndGap: endGap,
role: String,
...virtualizedProps
});
const virtualizedScrollbarProps = require_runtime.buildProps({
alwaysOn: Boolean,
class: String,
layout,
total,
ratio: {
type: Number,
required: true
},
clientSize: {
type: Number,
required: true
},
scrollFrom: {
type: Number,
required: true
},
scrollbarSize,
startGap,
endGap,
visible: Boolean
});
//#endregion
exports.virtualizedGridProps = virtualizedGridProps;
exports.virtualizedListProps = virtualizedListProps;
exports.virtualizedProps = virtualizedProps;
exports.virtualizedScrollbarProps = virtualizedScrollbarProps;
//# sourceMappingURL=props.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,155 @@
import { BACKWARD, FORWARD } from "./defaults.js";
import { CSSProperties, ComponentInternalInstance, Ref } from "vue";
//#region ../../packages/components/virtual-list/src/types.d.ts
type Instance = ComponentInternalInstance;
type Alignment = 'auto' | 'smart' | 'center' | 'start' | 'end';
type ItemSize = (idx: number) => number;
type Direction = 'ltr' | 'rtl';
type LayoutDirection = 'horizontal' | 'vertical';
type RTLOffsetType = 'negative' | 'positive-descending' | 'positive-ascending';
type ItemProps<T> = {
data: T;
style: CSSProperties;
scrolling?: boolean;
index: number;
};
type ListItem = {
offset: number;
size: number;
};
type ListCache = {
items: Record<string, ListItem>;
estimatedItemSize: number;
lastVisitedIndex: number;
clearCacheAfterIndex: (idx: number, forceUpdate?: boolean) => void;
};
type GridCache = {
column: Record<string, ListItem>;
row: Record<string, ListItem>;
estimatedColumnWidth: number;
estimatedRowHeight: number;
lastVisitedColumnIndex: number;
lastVisitedRowIndex: number;
};
type ScrollDir = 'forwards' | 'backwards';
type ListItemSizer<T, P extends InitListCacheFunc<T>> = (props: T, index: number, cache: ReturnType<P>) => number;
type GetEstimatedTotalSize<T, P extends InitCacheFunc<T, GridCache | ListCache>> = (props: T, cache: ReturnType<P>) => number;
type GetOffset<T, P extends InitListCacheFunc<T>> = (props: T, idx: number, alignment: Alignment, offset: number, cache: ReturnType<P>) => number;
type GetStartIndexForOffset<T, P extends InitCacheFunc<T, GridCache | ListCache>> = (props: T, offset: number, cache: ReturnType<P>) => number;
type GetStopIndexForStartIndex<T, P extends InitCacheFunc<T, GridCache | ListCache>> = (props: T, startIndex: number, scrollOffset: number, cache: ReturnType<P>) => number;
type PropValidator<T> = (props: T) => void;
type InitCacheFunc<T, P> = (props: T, cache: Instance) => P;
type InitListCacheFunc<T> = InitCacheFunc<T, ListCache>;
type InitGridCacheFunc<T> = InitCacheFunc<T, GridCache>;
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>;
};
type ExposesStates = {
isScrolling: boolean;
updateRequested: boolean;
};
type SharedExposes = {
windowRef: Ref<HTMLElement>;
innerRef: Ref<HTMLElement>;
getItemStyleCache: (_: any, __: any, ___: any) => CSSProperties;
};
type ListExposes = {
scrollTo: (offset: number) => void;
scrollToItem: (idx: number, alignment?: Alignment) => void;
states: {
scrollDir: Direction;
scrollOffset: number;
} & ExposesStates;
} & SharedExposes;
type GridExposes = {
states: {
scrollLeft: number;
scrollTop: number;
xAxisScrollDir: Direction;
yAxisScrollDir: Direction;
} & ExposesStates;
touchStartX: Ref<number>;
touchStartY: Ref<number>;
handleTouchStart: (e: TouchEvent) => void;
handleTouchMove: (e: TouchEvent) => void;
scrollTo: (props: {
scrollLeft: number;
scrollTop: number;
}) => void;
scrollToItem: (columnIndex?: number, rowIndex?: number, alignment?: Alignment) => void;
} & SharedExposes;
type ScrollbarExpose = {
onMouseUp: () => void;
};
type GetGridOffset<T, P extends InitGridCacheFunc<T>> = (props: T, index: number, alignment: Alignment, offset: number, cache: ReturnType<P>, scrollbarWidth: number) => number;
type GetPosition<T, P extends InitGridCacheFunc<T>> = (props: T, index: number, cache: ReturnType<P>) => [number, number];
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
*/
type GridDefaultSlotParams = {
columnIndex: number;
rowIndex: number;
data: any;
key: number | string;
isScrolling?: boolean;
style: CSSProperties;
};
type GridItemRenderedEvtParams = {
columnCacheStart: number;
columnCacheEnd: number;
rowCacheStart: number;
rowCacheEnd: number;
columnVisibleStart: number;
columnVisibleEnd: number;
rowVisibleStart: number;
rowVisibleEnd: number;
};
type GridScrollOptions = {
scrollLeft?: number;
scrollTop?: number;
};
type GridItemKeyGetter = <T extends {
[key: string | number]: any;
}>(args: {
columnIndex: number;
data: T;
rowIndex: number;
}) => string | number;
type Dir = typeof FORWARD | typeof BACKWARD;
interface GridStates {
isScrolling: boolean;
scrollLeft: number;
scrollTop: number;
updateRequested: boolean;
xAxisScrollDir: Dir;
yAxisScrollDir: Dir;
}
//#endregion
export { Alignment, Direction, ExposesStates, GetEstimatedTotalSize, GetGridOffset, GetOffset, GetPosition, GetStartIndexForOffset, GetStopIndexForStartIndex, GridCache, GridConstructorProps, GridDefaultSlotParams, GridExposes, GridItemKeyGetter, GridItemRenderedEvtParams, GridScrollOptions, GridStates, InitCacheFunc, InitGridCacheFunc, InitListCacheFunc, Instance, ItemProps, ItemSize, LayoutDirection, ListCache, ListConstructorProps, ListExposes, ListItem, ListItemSizer, PropValidator, RTLOffsetType, ScrollDir, ScrollbarExpose, SharedExposes };
@@ -0,0 +1 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -0,0 +1,50 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_defaults = require('./defaults.js');
//#region ../../packages/components/virtual-list/src/utils.ts
const getScrollDir = (prev, cur) => prev < cur ? require_defaults.FORWARD : require_defaults.BACKWARD;
const isHorizontal = (dir) => dir === require_defaults.LTR || dir === require_defaults.RTL || dir === require_defaults.HORIZONTAL;
const isRTL = (dir) => dir === require_defaults.RTL;
let cachedRTLResult = null;
function getRTLOffsetType(recalculate = false) {
if (cachedRTLResult === null || recalculate) {
const outerDiv = document.createElement("div");
const outerStyle = outerDiv.style;
outerStyle.width = "50px";
outerStyle.height = "50px";
outerStyle.overflow = "scroll";
outerStyle.direction = "rtl";
const innerDiv = document.createElement("div");
const innerStyle = innerDiv.style;
innerStyle.width = "100px";
innerStyle.height = "100px";
outerDiv.appendChild(innerDiv);
document.body.appendChild(outerDiv);
if (outerDiv.scrollLeft > 0) cachedRTLResult = require_defaults.RTL_OFFSET_POS_DESC;
else {
outerDiv.scrollLeft = 1;
if (outerDiv.scrollLeft === 0) cachedRTLResult = require_defaults.RTL_OFFSET_NAG;
else cachedRTLResult = require_defaults.RTL_OFFSET_POS_ASC;
}
document.body.removeChild(outerDiv);
return cachedRTLResult;
}
return cachedRTLResult;
}
function renderThumbStyle({ move, size, bar }, layout) {
const style = {};
const translate = `translate${bar.axis}(${move}px)`;
style[bar.size] = size;
style.transform = translate;
if (layout === "horizontal") style.height = "100%";
else style.width = "100%";
return style;
}
//#endregion
exports.getRTLOffsetType = getRTLOffsetType;
exports.getScrollDir = getScrollDir;
exports.isHorizontal = isHorizontal;
exports.isRTL = isRTL;
exports.renderThumbStyle = renderThumbStyle;
//# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
{"version":3,"file":"utils.js","names":["FORWARD","BACKWARD","LTR","RTL","HORIZONTAL","RTL_OFFSET_POS_DESC","RTL_OFFSET_NAG","RTL_OFFSET_POS_ASC"],"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"],"mappings":";;;;AAcA,MAAa,gBAAgB,MAAc,QACzC,OAAO,MAAMA,2BAAUC;AAEzB,MAAa,gBAAgB,QAC3B,QAAQC,wBAAO,QAAQC,wBAAO,QAAQC;AAExC,MAAa,SAAS,QAAmB,QAAQD;AAEjD,IAAI,kBAAwC;AAE5C,SAAgB,iBAAiB,cAAc,OAAsB;AACnE,KAAI,oBAAoB,QAAQ,aAAa;EAC3C,MAAM,WAAW,SAAS,cAAc,MAAM;EAC9C,MAAM,aAAa,SAAS;AAC5B,aAAW,QAAQ;AACnB,aAAW,SAAS;AACpB,aAAW,WAAW;AACtB,aAAW,YAAY;EAEvB,MAAM,WAAW,SAAS,cAAc,MAAM;EAC9C,MAAM,aAAa,SAAS;AAC5B,aAAW,QAAQ;AACnB,aAAW,SAAS;AAEpB,WAAS,YAAY,SAAS;AAE9B,WAAS,KAAK,YAAY,SAAS;AAEnC,MAAI,SAAS,aAAa,EACxB,mBAAkBE;OACb;AACL,YAAS,aAAa;AACtB,OAAI,SAAS,eAAe,EAC1B,mBAAkBC;OAElB,mBAAkBC;;AAItB,WAAS,KAAK,YAAY,SAAS;AAEnC,SAAO;;AAGT,QAAO;;AAYT,SAAgB,iBACd,EAAE,MAAM,MAAM,OACd,QACA;CACA,MAAM,QAAuB,EAAE;CAC/B,MAAM,YAAY,YAAY,IAAI,KAAK,GAAG,KAAK;AAE/C,OAAM,IAAI,QAAQ;AAClB,OAAM,YAAY;AAElB,KAAI,WAAW,aACb,OAAM,SAAS;KAEf,OAAM,QAAQ;AAGhB,QAAO"}
@@ -0,0 +1,4 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/css.js');
require('../../scrollbar/style/css.js');
require("element-plus/theme-chalk/el-virtual-list.css");
@@ -0,0 +1,4 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/index.js');
require('../../scrollbar/style/index.js');
require("element-plus/theme-chalk/src/virtual-list.scss");