element-ps 1.0.0-alpha.6 → 1.0.1

package/lib/packages/components/virtual-list/src/components/dynamic-size-list.js

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

package/lib/packages/components/virtual-list/src/components/dynamic-size-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-size-list.js","sources":["../../../../../../../../packages/components/virtual-list/src/components/dynamic-size-list.ts"],"sourcesContent":["import { throwError } from '@element-ps/utils/error'\n\nimport createList from '../builders/build-list'\n\nimport { isHorizontal } from '../utils'\nimport {\n  AUTO_ALIGNMENT,\n  CENTERED_ALIGNMENT,\n  DEFAULT_DYNAMIC_LIST_ITEM_SIZE,\n  END_ALIGNMENT,\n  SMART_ALIGNMENT,\n  START_ALIGNMENT,\n} from '../defaults'\nimport type { VirtualizedListProps } from '../props'\n\nimport type { ListCache, ListItem, ItemSize } from '../types'\n\ntype Props = VirtualizedListProps\n\nconst SCOPE = 'PsDynamicSizeList'\nconst getItemFromCache = (\n  props: Props,\n  index: number,\n  listCache: ListCache\n): ListItem => {\n  const { itemSize } = props\n  const { items, lastVisitedIndex } = listCache\n\n  if (index > lastVisitedIndex) {\n    let offset = 0\n    if (lastVisitedIndex >= 0) {\n      const item = items[lastVisitedIndex]\n      offset = item.offset + item.size\n    }\n\n    for (let i = lastVisitedIndex + 1; i <= index; i++) {\n      const size = (itemSize as ItemSize)(i)\n\n      items[i] = {\n        offset,\n        size,\n      }\n\n      offset += size\n    }\n\n    listCache.lastVisitedIndex = index\n  }\n\n  return items[index]\n}\n\nconst findItem = (props: Props, listCache: ListCache, offset: number) => {\n  const { items, lastVisitedIndex } = listCache\n\n  const lastVisitedOffset =\n    lastVisitedIndex > 0 ? items[lastVisitedIndex].offset : 0\n\n  if (lastVisitedOffset >= offset) {\n    return bs(props, listCache, 0, lastVisitedIndex, offset)\n  }\n  return es(props, listCache, Math.max(0, lastVisitedIndex), offset)\n}\n\n// bs stands for binary search which has approximately time complexity of O(Log n)\n// space complexity of O(1)\n// in this case we use it for search the offset of each item, since\n// the cached items' offset is monotonically increasing\nconst bs = (\n  props: Props,\n  listCache: ListCache,\n  low: number,\n  high: number,\n  offset: number\n) => {\n  while (low <= high) {\n    const mid = low + Math.floor((high - low) / 2)\n    const currentOffset = getItemFromCache(props, mid, listCache).offset\n\n    if (currentOffset === offset) {\n      return mid\n    } else if (currentOffset < offset) {\n      low = mid + 1\n    } else if (currentOffset > offset) {\n      high = mid - 1\n    }\n  }\n\n  return Math.max(0, low - 1)\n}\n\n// es stands for exponential search which has time complexity of O(Log n) and\n// space complexity of O(1) in the case of finding the boundary element.\n// the exponential indicator in this case is 2.\n// for more detail about exponential search click this link\n// https://www.freecodecamp.org/news/search-algorithms-exponential-search-explained/\n\nconst es = (\n  props: Props,\n  listCache: ListCache,\n  index: number,\n  offset: number\n) => {\n  const { total } = props\n  let exponent = 1\n\n  while (\n    index < total &&\n    getItemFromCache(props, index, listCache).offset < offset\n  ) {\n    index += exponent\n    exponent *= 2\n  }\n\n  return bs(\n    props,\n    listCache,\n    Math.floor(index / 2),\n    Math.min(index, total - 1),\n    offset\n  )\n}\n\nconst getEstimatedTotalSize = (\n  { total }: Props,\n  { items, estimatedItemSize, lastVisitedIndex }: ListCache\n) => {\n  let totalSizeOfMeasuredItems = 0\n\n  if (lastVisitedIndex >= total) {\n    lastVisitedIndex = total - 1\n  }\n\n  if (lastVisitedIndex >= 0) {\n    const item = items[lastVisitedIndex]\n    totalSizeOfMeasuredItems = item.offset + item.size\n  }\n\n  const numUnmeasuredItems = total - lastVisitedIndex - 1\n  const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize\n  return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems\n}\n\nconst DynamicSizeList = createList({\n  name: 'PsDynamicSizeList',\n  getItemOffset: (props, index, listCache) =>\n    getItemFromCache(props, index, listCache).offset,\n\n  getItemSize: (_, index, { items }) => items[index].size,\n\n  getEstimatedTotalSize,\n\n  getOffset: (props, index, alignment, scrollOffset, listCache) => {\n    const { height, layout, width } = props\n\n    const size = (isHorizontal(layout) ? width : height) as number\n    const item = getItemFromCache(props, index, listCache)\n\n    const estimatedTotalSize = getEstimatedTotalSize(props, listCache)\n\n    const maxOffset = Math.max(\n      0,\n      Math.min(estimatedTotalSize - size, item.offset)\n    )\n    const minOffset = Math.max(0, item.offset - size + item.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        return Math.round(minOffset + (maxOffset - minOffset) / 2)\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: (props, offset, listCache) =>\n    findItem(props, listCache, offset),\n\n  getStopIndexForStartIndex: (props, startIndex, scrollOffset, listCache) => {\n    const { height, total, layout, width } = props\n\n    const size = (isHorizontal(layout) ? width : height) as number\n    const item = getItemFromCache(props, startIndex, listCache)\n    const maxOffset = scrollOffset + size\n\n    let offset = item.offset + item.size\n    let stopIndex = startIndex\n\n    while (stopIndex < total - 1 && offset < maxOffset) {\n      stopIndex++\n      offset += getItemFromCache(props, stopIndex, listCache).size\n    }\n\n    return stopIndex\n  },\n\n  initCache({ estimatedItemSize = DEFAULT_DYNAMIC_LIST_ITEM_SIZE }, instance) {\n    const cache = {\n      items: {},\n      estimatedItemSize,\n      lastVisitedIndex: -1,\n    } as ListCache\n\n    cache.clearCacheAfterIndex = (index: number, forceUpdate = true) => {\n      cache.lastVisitedIndex = Math.min(cache.lastVisitedIndex, index - 1)\n      instance.exposed?.getItemStyleCache(-1)\n\n      if (forceUpdate) {\n        instance.proxy?.$forceUpdate()\n      }\n    }\n\n    return cache\n  },\n\n  clearCache: false,\n\n  validateProps: ({ itemSize }) => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (typeof itemSize !== 'function') {\n        throwError(\n          SCOPE,\n          `\n          itemSize is required as function, but the given value was ${typeof itemSize}\n        `\n        )\n      }\n    }\n  },\n})\n\nexport default DynamicSizeList\n"],"names":["createList","isHorizontal","SMART_ALIGNMENT","AUTO_ALIGNMENT","CENTERED_ALIGNMENT","START_ALIGNMENT","END_ALIGNMENT","DEFAULT_DYNAMIC_LIST_ITEM_SIZE"],"mappings":"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"}

package/lib/packages/components/virtual-list/src/components/fixed-size-grid.js

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

package/lib/packages/components/virtual-list/src/components/fixed-size-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-size-grid.js","sources":["../../../../../../../../packages/components/virtual-list/src/components/fixed-size-grid.ts"],"sourcesContent":["import { isNumber } from '@element-ps/utils/util'\nimport { throwError } from '@element-ps/utils/error'\nimport createGrid from '../builders/build-grid'\n\nimport {\n  AUTO_ALIGNMENT,\n  SMART_ALIGNMENT,\n  START_ALIGNMENT,\n  CENTERED_ALIGNMENT,\n  END_ALIGNMENT,\n} from '../defaults'\n\nconst SCOPE = 'PsFixedSizeGrid'\n\nconst FixedSizeGrid = createGrid({\n  name: 'PsFixedSizeGrid',\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":["createGrid","AUTO_ALIGNMENT","CENTERED_ALIGNMENT","START_ALIGNMENT","END_ALIGNMENT","SMART_ALIGNMENT","isNumber"],"mappings":"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"}

package/lib/packages/components/virtual-list/src/components/fixed-size-list.js

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

package/lib/packages/components/virtual-list/src/components/fixed-size-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-size-list.js","sources":["../../../../../../../../packages/components/virtual-list/src/components/fixed-size-list.ts"],"sourcesContent":["import { isString } from '@element-ps/utils/util'\nimport { throwError } from '@element-ps/utils/error'\nimport buildList from '../builders/build-list'\nimport { isHorizontal } from '../utils'\nimport {\n  SMART_ALIGNMENT,\n  AUTO_ALIGNMENT,\n  START_ALIGNMENT,\n  END_ALIGNMENT,\n  CENTERED_ALIGNMENT,\n} from '../defaults'\n\nimport type { VirtualizedListProps } from '../props'\n\ntype Props = VirtualizedListProps\n\nconst FixedSizeList = buildList({\n  name: 'PsFixedSizeList',\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        '[PsVirtualList]',\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","isHorizontal","isString","SMART_ALIGNMENT","AUTO_ALIGNMENT","CENTERED_ALIGNMENT","START_ALIGNMENT","END_ALIGNMENT"],"mappings":";;;;;;;;;;;MAgBM,gBAAgBA,qBAAU;AAAA,EAC9B,MAAM;AAAA,EACN,eAAe,CAAC,EAAE,YAAY,UAAU,QAAS;AAAA,EAEjD,aAAa,CAAC,EAAE,eAAe;AAAA,EAE/B,uBAAuB,CAAC,EAAE,OAAO,eAAgB,WAAsB;AAAA,EAEvE,WAAW,CACT,EAAE,QAAQ,OAAO,UAAU,QAAQ,SACnC,OACA,WACA,iBACG;AACH,UAAM,OAAQC,mBAAa,UAAU,QAAQ;AAC7C,QAAI,QAAQ,IAAI,aAAa,gBAAgBC,gBAAS,OAAO;AAC3D,uBACE,mBACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQJ,UAAM,iBAAiB,KAAK,IAAI,GAAG,QAAS,WAAsB;AAClE,UAAM,YAAY,KAAK,IAAI,gBAAgB,QAAS;AACpD,UAAM,YAAY,KAAK,IAAI,GAAI,SAAQ,KAAM,WAAsB;AAEnE,QAAI,cAAcC,0BAAiB;AACjC,UACE,gBAAgB,YAAY,QAC5B,gBAAgB,YAAY,MAC5B;AACA,oBAAYC;AAAA,aACP;AACL,oBAAYC;AAAA;AAAA;AAIhB,YAAQ;AAAA,WACDC,0BAAiB;AACpB,eAAO;AAAA;AAAA,WAEJC,wBAAe;AAClB,eAAO;AAAA;AAAA,WAEJF,6BAAoB;AAGvB,cAAM,eAAe,KAAK,MAAM,YAAa,aAAY,aAAa;AACtE,YAAI,eAAe,KAAK,KAAK,OAAO,IAAI;AACtC,iBAAO;AAAA,mBACE,eAAe,iBAAiB,KAAK,MAAM,OAAO,IAAI;AAC/D,iBAAO;AAAA,eACF;AACL,iBAAO;AAAA;AAAA;AAAA,WAGND;AAAA,eACI;AACP,YAAI,gBAAgB,aAAa,gBAAgB,WAAW;AAC1D,iBAAO;AAAA,mBACE,eAAe,WAAW;AACnC,iBAAO;AAAA,eACF;AACL,iBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAMf,wBAAwB,CAAC,EAAE,OAAO,YAAY,WAC5C,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,GAAG,KAAK,MAAM,SAAU;AAAA,EAEvD,2BAA2B,CACzB,EAAE,QAAQ,OAAO,UAAU,QAAQ,SACnC,YACA,iBACG;AACH,UAAM,SAAS,aAAc;AAC7B,UAAM,OAAOH,mBAAa,UAAU,QAAQ;AAC5C,UAAM,kBAAkB,KAAK,KACzB,QAAkB,eAAe,UAAW;AAEhD,WAAO,KAAK,IACV,GACA,KAAK,IACH,QAAQ,GAGR,aAAa,kBAAkB;AAAA;AAAA,EASrC,YAAY;AACV,WAAO;AAAA;AAAA,EAGT,YAAY;AAAA,EAEZ,gBAAgB;AAAA;AAAA;;;;"}

package/lib/packages/components/virtual-list/src/components/scrollbar.js

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

package/lib/packages/components/virtual-list/src/components/scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar.js","sources":["../../../../../../../../packages/components/virtual-list/src/components/scrollbar.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  ref,\n  reactive,\n  onMounted,\n  onBeforeUnmount,\n  watch,\n  h,\n  withModifiers,\n  unref,\n} from 'vue'\nimport { BAR_MAP } from '@element-ps/components/scrollbar'\nimport { on, off } from '@element-ps/utils/dom'\nimport { rAF, cAF } from '@element-ps/utils/raf'\nimport isServer from '@element-ps/utils/isServer'\n\nimport { SCROLLBAR_MIN_SIZE, HORIZONTAL, ScrollbarDirKey } from '../defaults'\nimport { virtualizedScrollbarProps } from '../props'\nimport { renderThumbStyle } from '../utils'\n\nimport type { CSSProperties } from 'vue'\n\nconst ScrollBar = defineComponent({\n  name: 'PsVirtualScrollBar',\n  props: virtualizedScrollbarProps,\n  emits: ['scroll', 'start-move', 'stop-move'],\n  setup(props, { emit }) {\n    const GAP = 4 // top 2 + bottom 2 | left 2 + right 2\n\n    // DOM refs\n    const trackRef = ref<HTMLElement>()\n    const thumbRef = ref<HTMLElement>()\n\n    // local variables\n    let frameHandle: null | number = null\n    let onselectstartStore: null | typeof document.onselectstart = null\n\n    // data\n    const state = reactive({\n      isDragging: false,\n      traveled: 0,\n    })\n\n    const bar = computed(() => BAR_MAP[props.layout])\n\n    const trackSize = computed(() => props.clientSize! - GAP)\n\n    const trackStyle = computed<CSSProperties>(() => ({\n      position: 'absolute',\n      width: HORIZONTAL === props.layout ? `${trackSize.value}px` : '6px',\n      height: HORIZONTAL === props.layout ? '6px' : `${trackSize.value}px`,\n      [ScrollbarDirKey[props.layout]]: '2px',\n      right: '2px',\n      bottom: '2px',\n      borderRadius: '4px',\n    }))\n\n    const thumbSize = computed(() => {\n      const ratio = props.ratio!\n      const clientSize = props.clientSize!\n      if (ratio >= 100) {\n        return Number.POSITIVE_INFINITY\n      }\n\n      if (ratio >= 50) {\n        return (ratio * clientSize) / 100\n      }\n\n      const SCROLLBAR_MAX_SIZE = clientSize / 3\n      return Math.floor(\n        Math.min(\n          Math.max(ratio * clientSize, SCROLLBAR_MIN_SIZE),\n          SCROLLBAR_MAX_SIZE\n        )\n      )\n    })\n\n    // const sizeRange = computed(() => props.size - thumbSize.value)\n\n    const thumbStyle = computed<CSSProperties>(() => {\n      if (!Number.isFinite(thumbSize.value)) {\n        return {\n          display: 'none',\n        }\n      }\n\n      const thumb = `${thumbSize.value}px`\n\n      const style: CSSProperties = renderThumbStyle(\n        {\n          bar: bar.value,\n          size: thumb,\n          move: state.traveled,\n        },\n        props.layout\n      )\n\n      return style\n    })\n\n    const totalSteps = computed(() =>\n      Math.floor(props.clientSize! - thumbSize.value - GAP)\n    )\n\n    const attachEvents = () => {\n      on(window, 'mousemove', onMouseMove)\n      on(window, 'mouseup', onMouseUp)\n\n      const thumbEl = unref(thumbRef)\n\n      if (!thumbEl) return\n\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n\n      on(thumbEl, 'touchmove', onMouseMove)\n      on(thumbEl, 'touchend', onMouseUp)\n    }\n\n    const detachEvents = () => {\n      off(window, 'mousemove', onMouseMove)\n      off(window, 'mouseup', onMouseUp)\n\n      document.onselectstart = onselectstartStore\n      onselectstartStore = null\n\n      const thumbEl = unref(thumbRef)\n      if (!thumbEl) return\n\n      off(thumbEl, 'touchmove', onMouseMove)\n      off(thumbEl, 'touchend', onMouseUp)\n    }\n\n    const onThumbMouseDown = (e: Event) => {\n      e.stopImmediatePropagation()\n      if (\n        (e as KeyboardEvent).ctrlKey ||\n        [1, 2].includes((e as MouseEvent).button)\n      ) {\n        return\n      }\n\n      state.isDragging = true\n      state[bar.value.axis] =\n        e.currentTarget![bar.value.offset] -\n        (e[bar.value.client] -\n          (e.currentTarget as HTMLElement).getBoundingClientRect()[\n            bar.value.direction\n          ])\n\n      emit('start-move')\n      attachEvents()\n    }\n\n    const onMouseUp = () => {\n      state.isDragging = false\n      state[bar.value.axis] = 0\n      emit('stop-move')\n      detachEvents()\n    }\n\n    const onMouseMove = (e: Event) => {\n      const { isDragging } = state\n      if (!isDragging) return\n      if (!thumbRef.value || !trackRef.value) return\n\n      const prevPage = state[bar.value.axis]\n      if (!prevPage) return\n\n      cAF(frameHandle!)\n      // using the current track's offset top/left - the current pointer's clientY/clientX\n      // to get the relative position of the pointer to the track.\n      const offset =\n        (trackRef.value.getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]) *\n        -1\n\n      // find where the thumb was clicked on.\n      const thumbClickPosition = thumbRef.value[bar.value.offset] - prevPage\n      /**\n       *  +--------------+                                   +--------------+\n       *  |              -  <--------- thumb.offsetTop       |              |\n       *  |             |+|             <--+                 |              |\n       *  |              -                 |                 |              |\n       *  |   Content    |                 |                 |              |\n       *  |              |                 |                 |              |\n       *  |              |                 |                 |              |\n       *  |              |                 |                 |              -\n       *  |              |                 +-->              |             |+|\n       *  |              |                                   |              -\n       *  +--------------+                                   +--------------+\n       */\n\n      // using the current position - prev position to\n\n      const distance = offset - thumbClickPosition\n      // get how many steps in total.\n      // gap of 2 on top, 2 on bottom, in total 4.\n      // using totalSteps ÷ totalSize getting each step's size * distance to get the new\n      // scroll offset to scrollTo\n      frameHandle = rAF(() => {\n        state.traveled = Math.max(\n          0,\n          Math.min(\n            distance,\n            totalSteps.value // 2 is the top value\n          )\n        )\n        emit('scroll', distance, totalSteps.value)\n      })\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\n      const offset = Math.abs(\n        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]\n      )\n      const thumbHalf = thumbRef.value![bar.value.offset] / 2\n      const distance = offset - thumbHalf\n\n      state.traveled = Math.max(0, Math.min(distance, totalSteps.value))\n      emit('scroll', distance, totalSteps.value)\n    }\n\n    const onScrollbarTouchStart = (e: Event) => e.preventDefault()\n\n    watch(\n      () => props.scrollFrom,\n      (v) => {\n        if (state.isDragging) return\n        /**\n         *  this is simply mapping the current scrollbar offset\n         *\n         *  formula 1:\n         *    v = scrollOffset / (estimatedTotalSize - clientSize)\n         *    traveled = v * (clientSize - thumbSize - GAP) --> v * totalSteps\n         *\n         *  formula 2:\n         *    traveled = (v * clientSize) / (clientSize / totalSteps) --> (v * clientSize) * (totalSteps / clientSize) --> v * totalSteps\n         */\n        state.traveled = Math.ceil(v! * totalSteps.value)\n      }\n    )\n\n    onMounted(() => {\n      if (isServer) return\n\n      on(trackRef.value!, 'touchstart', onScrollbarTouchStart)\n      on(thumbRef.value!, 'touchstart', onThumbMouseDown)\n    })\n\n    onBeforeUnmount(() => {\n      off(trackRef.value!, 'touchstart', onScrollbarTouchStart)\n      detachEvents()\n    })\n\n    return () => {\n      return h(\n        'div',\n        {\n          role: 'presentation',\n          ref: trackRef,\n          class: 'el-virtual-scrollbar',\n          style: trackStyle.value,\n          onMousedown: withModifiers(clickTrackHandler, ['stop', 'prevent']),\n        },\n        h(\n          'div',\n          {\n            ref: thumbRef,\n            class: 'el-scrollbar__thumb',\n            style: thumbStyle.value,\n            onMousedown: onThumbMouseDown,\n          },\n          []\n        )\n      )\n    }\n  },\n})\n\nexport default ScrollBar\n"],"names":["defineComponent","virtualizedScrollbarProps","ref","reactive","computed","BAR_MAP","HORIZONTAL","ScrollbarDirKey","SCROLLBAR_MIN_SIZE","renderThumbStyle","unref","rAF","isServer","h","withModifiers"],"mappings":"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"}