element-plus-secondary 0.0.0-dev.1

package/es/components/virtual-list/src/components/fixed-size-grid.mjs

@@ -0,0 +1,133 @@
+import '../../../../utils/index.mjs';
+import createGrid from '../builders/build-grid.mjs';
+import { AUTO_ALIGNMENT, CENTERED_ALIGNMENT, END_ALIGNMENT, START_ALIGNMENT, SMART_ALIGNMENT } from '../defaults.mjs';
+import { isNumber } from '@vueuse/core';
+import { throwError } from '../../../../utils/error.mjs';
+
+const SCOPE = "ElFixedSizeGrid";
+const FixedSizeGrid = createGrid({
+  name: "ElFixedSizeGrid",
+  getColumnPosition: ({ columnWidth }, index) => [
+    columnWidth,
+    index * columnWidth
+  ],
+  getRowPosition: ({ rowHeight }, index) => [
+    rowHeight,
+    index * rowHeight
+  ],
+  getEstimatedTotalHeight: ({ totalRow, rowHeight }) => rowHeight * totalRow,
+  getEstimatedTotalWidth: ({ totalColumn, columnWidth }) => columnWidth * totalColumn,
+  getColumnOffset: ({ totalColumn, columnWidth, width }, columnIndex, alignment, scrollLeft, _, scrollBarWidth) => {
+    width = Number(width);
+    const lastColumnOffset = Math.max(0, totalColumn * columnWidth - width);
+    const maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
+    const minOffset = Math.max(0, columnIndex * columnWidth - width + scrollBarWidth + columnWidth);
+    if (alignment === "smart") {
+      if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
+        alignment = AUTO_ALIGNMENT;
+      } else {
+        alignment = CENTERED_ALIGNMENT;
+      }
+    }
+    switch (alignment) {
+      case START_ALIGNMENT:
+        return maxOffset;
+      case END_ALIGNMENT:
+        return minOffset;
+      case CENTERED_ALIGNMENT: {
+        const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+        if (middleOffset < Math.ceil(width / 2)) {
+          return 0;
+        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
+          return lastColumnOffset;
+        } else {
+          return middleOffset;
+        }
+      }
+      case AUTO_ALIGNMENT:
+      default:
+        if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
+          return scrollLeft;
+        } else if (minOffset > maxOffset) {
+          return minOffset;
+        } else if (scrollLeft < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+  getRowOffset: ({ rowHeight, height, totalRow }, rowIndex, align, scrollTop, _, scrollBarWidth) => {
+    height = Number(height);
+    const lastRowOffset = Math.max(0, totalRow * rowHeight - height);
+    const maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
+    const minOffset = Math.max(0, rowIndex * rowHeight - height + scrollBarWidth + rowHeight);
+    if (align === SMART_ALIGNMENT) {
+      if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
+        align = AUTO_ALIGNMENT;
+      } else {
+        align = CENTERED_ALIGNMENT;
+      }
+    }
+    switch (align) {
+      case START_ALIGNMENT:
+        return maxOffset;
+      case END_ALIGNMENT:
+        return minOffset;
+      case CENTERED_ALIGNMENT: {
+        const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+        if (middleOffset < Math.ceil(height / 2)) {
+          return 0;
+        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
+          return lastRowOffset;
+        } else {
+          return middleOffset;
+        }
+      }
+      case AUTO_ALIGNMENT:
+      default:
+        if (scrollTop >= minOffset && scrollTop <= maxOffset) {
+          return scrollTop;
+        } else if (minOffset > maxOffset) {
+          return minOffset;
+        } else if (scrollTop < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+  getColumnStartIndexForOffset: ({ columnWidth, totalColumn }, scrollLeft) => Math.max(0, Math.min(totalColumn - 1, Math.floor(scrollLeft / columnWidth))),
+  getColumnStopIndexForStartIndex: ({ columnWidth, totalColumn, width }, startIndex, scrollLeft) => {
+    const left = startIndex * columnWidth;
+    const visibleColumnsCount = Math.ceil((width + scrollLeft - left) / columnWidth);
+    return Math.max(0, Math.min(totalColumn - 1, startIndex + visibleColumnsCount - 1));
+  },
+  getRowStartIndexForOffset: ({ rowHeight, totalRow }, scrollTop) => Math.max(0, Math.min(totalRow - 1, Math.floor(scrollTop / rowHeight))),
+  getRowStopIndexForStartIndex: ({ rowHeight, totalRow, height }, startIndex, scrollTop) => {
+    const top = startIndex * rowHeight;
+    const numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
+    return Math.max(0, Math.min(totalRow - 1, startIndex + numVisibleRows - 1));
+  },
+  initCache: () => void 0,
+  clearCache: true,
+  validateProps: ({ columnWidth, rowHeight }) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (!isNumber(columnWidth)) {
+        throwError(SCOPE, `
+          "columnWidth" must be passed as number,
+            instead ${typeof columnWidth} was given.
+        `);
+      }
+      if (!isNumber(rowHeight)) {
+        throwError(SCOPE, `
+          "columnWidth" must be passed as number,
+            instead ${typeof rowHeight} was given.
+        `);
+      }
+    }
+  }
+});
+
+export { FixedSizeGrid as default };
+//# sourceMappingURL=fixed-size-grid.mjs.map

package/es/components/virtual-list/src/components/fixed-size-grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-size-grid.mjs","sources":["../../../../../../../packages/components/virtual-list/src/components/fixed-size-grid.ts"],"sourcesContent":["import { isNumber, throwError } from '@element-plus/utils'\nimport createGrid from '../builders/build-grid'\n\nimport {\n  AUTO_ALIGNMENT,\n  CENTERED_ALIGNMENT,\n  END_ALIGNMENT,\n  SMART_ALIGNMENT,\n  START_ALIGNMENT,\n} from '../defaults'\n\nconst SCOPE = 'ElFixedSizeGrid'\n\nconst FixedSizeGrid = createGrid({\n  name: 'ElFixedSizeGrid',\n  getColumnPosition: ({ columnWidth }, index) => [\n    columnWidth as number,\n    index * (columnWidth as number),\n  ],\n\n  getRowPosition: ({ rowHeight }, index) => [\n    rowHeight as number,\n    index * (rowHeight as number),\n  ],\n\n  getEstimatedTotalHeight: ({ totalRow, rowHeight }) =>\n    (rowHeight as number) * totalRow,\n\n  getEstimatedTotalWidth: ({ totalColumn, columnWidth }) =>\n    (columnWidth as number) * totalColumn,\n\n  getColumnOffset: (\n    { totalColumn, columnWidth, width },\n    columnIndex,\n    alignment,\n    scrollLeft,\n    _,\n    scrollBarWidth\n  ) => {\n    width = Number(width)\n    const lastColumnOffset = Math.max(\n      0,\n      totalColumn * (columnWidth as number) - width\n    )\n    const maxOffset = Math.min(\n      lastColumnOffset,\n      columnIndex * (columnWidth as number)\n    )\n    const minOffset = Math.max(\n      0,\n      columnIndex * (columnWidth as number) -\n        width +\n        scrollBarWidth +\n        (columnWidth as number)\n    )\n\n    if (alignment === 'smart') {\n      if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {\n        alignment = AUTO_ALIGNMENT\n      } else {\n        alignment = CENTERED_ALIGNMENT\n      }\n    }\n\n    switch (alignment) {\n      case START_ALIGNMENT:\n        return maxOffset\n      case END_ALIGNMENT:\n        return minOffset\n      case CENTERED_ALIGNMENT: {\n        const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2)\n        if (middleOffset < Math.ceil(width / 2)) {\n          return 0\n        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {\n          return lastColumnOffset\n        } else {\n          return middleOffset\n        }\n      }\n      case AUTO_ALIGNMENT:\n      default:\n        if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {\n          return scrollLeft\n        } else if (minOffset > maxOffset) {\n          return minOffset\n        } else if (scrollLeft < minOffset) {\n          return minOffset\n        } else {\n          return maxOffset\n        }\n    }\n  },\n\n  getRowOffset: (\n    { rowHeight, height, totalRow },\n    rowIndex,\n    align,\n    scrollTop,\n    _,\n    scrollBarWidth\n  ): number => {\n    height = Number(height)\n    const lastRowOffset = Math.max(0, totalRow * (rowHeight as number) - height)\n    const maxOffset = Math.min(lastRowOffset, rowIndex * (rowHeight as number))\n    const minOffset = Math.max(\n      0,\n      rowIndex * (rowHeight as number) -\n        height +\n        scrollBarWidth +\n        (rowHeight as number)\n    )\n\n    if (align === SMART_ALIGNMENT) {\n      if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {\n        align = AUTO_ALIGNMENT\n      } else {\n        align = CENTERED_ALIGNMENT\n      }\n    }\n\n    switch (align) {\n      case START_ALIGNMENT:\n        return maxOffset\n      case END_ALIGNMENT:\n        return minOffset\n      case CENTERED_ALIGNMENT: {\n        const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2)\n        if (middleOffset < Math.ceil(height / 2)) {\n          return 0\n        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {\n          return lastRowOffset\n        } else {\n          return middleOffset\n        }\n      }\n      case AUTO_ALIGNMENT:\n      default:\n        if (scrollTop >= minOffset && scrollTop <= maxOffset) {\n          return scrollTop\n        } else if (minOffset > maxOffset) {\n          return minOffset\n        } else if (scrollTop < minOffset) {\n          return minOffset\n        } else {\n          return maxOffset\n        }\n    }\n  },\n\n  getColumnStartIndexForOffset: ({ columnWidth, totalColumn }, scrollLeft) =>\n    Math.max(\n      0,\n      Math.min(\n        totalColumn - 1,\n        Math.floor(scrollLeft / (columnWidth as number))\n      )\n    ),\n\n  getColumnStopIndexForStartIndex: (\n    { columnWidth, totalColumn, width },\n    startIndex: number,\n    scrollLeft: number\n  ): number => {\n    const left = startIndex * (columnWidth as number)\n    const visibleColumnsCount = Math.ceil(\n      ((width as number) + scrollLeft - left) / (columnWidth as number)\n    )\n    return Math.max(\n      0,\n      Math.min(totalColumn - 1, startIndex + visibleColumnsCount - 1)\n    )\n  },\n\n  getRowStartIndexForOffset: (\n    { rowHeight, totalRow },\n    scrollTop: number\n  ): number =>\n    Math.max(\n      0,\n      Math.min(totalRow - 1, Math.floor(scrollTop / (rowHeight as number)))\n    ),\n\n  getRowStopIndexForStartIndex: (\n    { rowHeight, totalRow, height },\n    startIndex: number,\n    scrollTop: number\n  ): number => {\n    const top = startIndex * (rowHeight as number)\n    const numVisibleRows = Math.ceil(\n      ((height as number) + scrollTop - top) / (rowHeight as number)\n    )\n    return Math.max(\n      0,\n      Math.min(\n        totalRow - 1,\n        startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive\n      )\n    )\n  },\n  /**\n   * Fixed size grid does not need this cache\n   * Using any to bypass it, TODO: Using type inference to fix this.\n   */\n  initCache: () => undefined as any,\n\n  clearCache: true,\n\n  validateProps: ({ columnWidth, rowHeight }) => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (!isNumber(columnWidth)) {\n        throwError(\n          SCOPE,\n          `\n          \"columnWidth\" must be passed as number,\n            instead ${typeof columnWidth} was given.\n        `\n        )\n      }\n\n      if (!isNumber(rowHeight)) {\n        throwError(\n          SCOPE,\n          `\n          \"columnWidth\" must be passed as number,\n            instead ${typeof rowHeight} was given.\n        `\n        )\n      }\n    }\n  },\n})\n\nexport default FixedSizeGrid\n"],"names":[],"mappings":"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"}

package/es/components/virtual-list/src/components/fixed-size-list.d.ts

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

package/es/components/virtual-list/src/components/fixed-size-list.mjs

@@ -0,0 +1,78 @@
+import '../../../../utils/index.mjs';
+import createList from '../builders/build-list.mjs';
+import { isHorizontal } from '../utils.mjs';
+import { SMART_ALIGNMENT, AUTO_ALIGNMENT, CENTERED_ALIGNMENT, END_ALIGNMENT, START_ALIGNMENT } from '../defaults.mjs';
+import { isString } from '@vue/shared';
+import { throwError } from '../../../../utils/error.mjs';
+
+const FixedSizeList = createList({
+  name: "ElFixedSizeList",
+  getItemOffset: ({ itemSize }, index) => index * itemSize,
+  getItemSize: ({ itemSize }) => itemSize,
+  getEstimatedTotalSize: ({ total, itemSize }) => itemSize * total,
+  getOffset: ({ height, total, itemSize, layout, width }, index, alignment, scrollOffset) => {
+    const size = isHorizontal(layout) ? width : height;
+    if (process.env.NODE_ENV !== "production" && isString(size)) {
+      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 === SMART_ALIGNMENT) {
+      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+        alignment = AUTO_ALIGNMENT;
+      } else {
+        alignment = CENTERED_ALIGNMENT;
+      }
+    }
+    switch (alignment) {
+      case START_ALIGNMENT: {
+        return maxOffset;
+      }
+      case END_ALIGNMENT: {
+        return minOffset;
+      }
+      case CENTERED_ALIGNMENT: {
+        const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+        if (middleOffset < Math.ceil(size / 2)) {
+          return 0;
+        } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
+          return lastItemOffset;
+        } else {
+          return middleOffset;
+        }
+      }
+      case AUTO_ALIGNMENT:
+      default: {
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+      }
+    }
+  },
+  getStartIndexForOffset: ({ total, itemSize }, offset) => Math.max(0, Math.min(total - 1, Math.floor(offset / itemSize))),
+  getStopIndexForStartIndex: ({ height, total, itemSize, layout, width }, startIndex, scrollOffset) => {
+    const offset = startIndex * itemSize;
+    const size = isHorizontal(layout) ? width : height;
+    const numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
+    return Math.max(0, Math.min(total - 1, startIndex + numVisibleItems - 1));
+  },
+  initCache() {
+    return void 0;
+  },
+  clearCache: true,
+  validateProps() {
+  }
+});
+
+export { FixedSizeList as default };
+//# sourceMappingURL=fixed-size-list.mjs.map

package/es/components/virtual-list/src/components/fixed-size-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-size-list.mjs","sources":["../../../../../../../packages/components/virtual-list/src/components/fixed-size-list.ts"],"sourcesContent":["import { isString, throwError } from '@element-plus/utils'\nimport buildList from '../builders/build-list'\nimport { isHorizontal } from '../utils'\nimport {\n  AUTO_ALIGNMENT,\n  CENTERED_ALIGNMENT,\n  END_ALIGNMENT,\n  SMART_ALIGNMENT,\n  START_ALIGNMENT,\n} from '../defaults'\n\nimport type { VirtualizedListProps } from '../props'\n\ntype Props = VirtualizedListProps\n\nconst FixedSizeList = buildList({\n  name: 'ElFixedSizeList',\n  getItemOffset: ({ itemSize }, index) => index * (itemSize as number),\n\n  getItemSize: ({ itemSize }) => itemSize as number,\n\n  getEstimatedTotalSize: ({ total, itemSize }) => (itemSize as number) * total,\n\n  getOffset: (\n    { height, total, itemSize, layout, width },\n    index,\n    alignment,\n    scrollOffset\n  ) => {\n    const size = (isHorizontal(layout) ? width : height) as number\n    if (process.env.NODE_ENV !== 'production' && isString(size)) {\n      throwError(\n        '[ElVirtualList]',\n        `\n        You should set\n          width/height\n        to number when your layout is\n          horizontal/vertical\n      `\n      )\n    }\n    const lastItemOffset = Math.max(0, total * (itemSize as number) - size)\n    const maxOffset = Math.min(lastItemOffset, index * (itemSize as number))\n    const minOffset = Math.max(0, (index + 1) * (itemSize as number) - size)\n\n    if (alignment === SMART_ALIGNMENT) {\n      if (\n        scrollOffset >= minOffset - size &&\n        scrollOffset <= maxOffset + size\n      ) {\n        alignment = AUTO_ALIGNMENT\n      } else {\n        alignment = CENTERED_ALIGNMENT\n      }\n    }\n\n    switch (alignment) {\n      case START_ALIGNMENT: {\n        return maxOffset\n      }\n      case END_ALIGNMENT: {\n        return minOffset\n      }\n      case CENTERED_ALIGNMENT: {\n        // \"Centered\" offset is usually the average of the min and max.\n        // But near the edges of the list, this doesn't hold true.\n        const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2)\n        if (middleOffset < Math.ceil(size / 2)) {\n          return 0 // near the beginning\n        } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {\n          return lastItemOffset // near the end\n        } else {\n          return middleOffset\n        }\n      }\n      case AUTO_ALIGNMENT:\n      default: {\n        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {\n          return scrollOffset\n        } else if (scrollOffset < minOffset) {\n          return minOffset\n        } else {\n          return maxOffset\n        }\n      }\n    }\n  },\n\n  getStartIndexForOffset: ({ total, itemSize }, offset) =>\n    Math.max(0, Math.min(total - 1, Math.floor(offset / (itemSize as number)))),\n\n  getStopIndexForStartIndex: (\n    { height, total, itemSize, layout, width }: Props,\n    startIndex: number,\n    scrollOffset: number\n  ) => {\n    const offset = startIndex * (itemSize as number)\n    const size = isHorizontal(layout) ? width : height\n    const numVisibleItems = Math.ceil(\n      ((size as number) + scrollOffset - offset) / (itemSize as number)\n    )\n    return Math.max(\n      0,\n      Math.min(\n        total - 1,\n        // because startIndex is inclusive, so in order to prevent array outbound indexing\n        // we need to - 1 to prevent outbound behavior\n        startIndex + numVisibleItems - 1\n      )\n    )\n  },\n\n  /**\n   * Fixed size list does not need this cache\n   * Using any to bypass it, TODO: Using type inference to fix this.\n   */\n  initCache() {\n    return undefined as any\n  },\n\n  clearCache: true,\n\n  validateProps() {\n    //\n  },\n})\n\nexport default FixedSizeList\n"],"names":["buildList"],"mappings":"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"}

package/es/components/virtual-list/src/components/scrollbar.d.ts

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

package/es/components/virtual-list/src/components/scrollbar.mjs

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