vft 0.0.374 → 0.0.375

package/lib/components/virtual-list/components/dynamic-size-grid.cjs

@@ -1,7 +1,289 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");const I=require("@vft/utils"),_=require("../../../utils/error.cjs");require("../../config-provider/hooks/use-global-config.cjs");require("vue");require("lodash-es");const h=require("../builders/build-grid.cjs"),l=require("../defaults.cjs"),{max:d,min:N,floor:z}=Math,T="ElDynamicSizeGrid",D={column:"columnWidth",row:"rowHeight"},S={column:"lastVisitedColumnIndex",row:"lastVisitedRowIndex"},a=(e,s,t,i)=>{const[n,o,r]=[t[i],e[D[i]],t[S[i]]];if(s>r){let u=0;if(r>=0){const f=n[r];u=f.offset+f.size}for(let f=r+1;f<=s;f++){const c=o(f);n[f]={offset:u,size:c},u+=c}t[S[i]]=s}return n[s]},M=(e,s,t,i,n,o)=>{for(;t<=i;){const r=t+z((i-t)/2),u=a(e,r,s,o).offset;if(u===n)return r;u<n?t=r+1:i=r-1}return d(0,t-1)},L=(e,s,t,i,n)=>{const o=n==="column"?e.totalColumn:e.totalRow;let r=1;for(;t<o&&a(e,t,s,n).offset<i;)t+=r,r*=2;return M(e,s,z(t/2),N(t,o-1),i,n)},A=(e,s,t,i)=>{const[n,o]=[s[i],s[S[i]]];return(o>0?n[o].offset:0)>=t?M(e,s,0,o,t,i):L(e,s,d(0,o),t,i)},v=({totalRow:e},{estimatedRowHeight:s,lastVisitedRowIndex:t,row:i})=>{let n=0;if(t>=e&&(t=e-1),t>=0){const u=i[t];n=u.offset+u.size}const r=(e-t-1)*s;return n+r},O=({totalColumn:e},{column:s,estimatedColumnWidth:t,lastVisitedColumnIndex:i})=>{let n=0;if(i>e&&(i=e-1),i>=0){const u=s[i];n=u.offset+u.size}const r=(e-i-1)*t;return n+r},g={column:O,row:v},w=(e,s,t,i,n,o,r)=>{const[u,f]=[o==="row"?e.height:e.width,g[o]],c=a(e,s,n,o),C=f(e,n),E=d(0,N(C-u,c.offset)),m=d(0,c.offset-u+r+c.size);switch(t===l.SMART_ALIGNMENT&&(i>=m-u&&i<=E+u?t=l.AUTO_ALIGNMENT:t=l.CENTERED_ALIGNMENT),t){case l.START_ALIGNMENT:return E;case l.END_ALIGNMENT:return m;case l.CENTERED_ALIGNMENT:return Math.round(m+(E-m)/2);case l.AUTO_ALIGNMENT:default:return i>=m&&i<=E?i:m>E||i<m?m:E}},G=h.default({name:"ElDynamicSizeGrid",getColumnPosition:(e,s,t)=>{const i=a(e,s,t,"column");return[i.size,i.offset]},getRowPosition:(e,s,t)=>{const i=a(e,s,t,"row");return[i.size,i.offset]},getColumnOffset:(e,s,t,i,n,o)=>w(e,s,t,i,n,"column",o),getRowOffset:(e,s,t,i,n,o)=>w(e,s,t,i,n,"row",o),getColumnStartIndexForOffset:(e,s,t)=>A(e,t,s,"column"),getColumnStopIndexForStartIndex:(e,s,t,i)=>{const n=a(e,s,i,"column"),o=t+e.width;let r=n.offset+n.size,u=s;for(;u<e.totalColumn-1&&r<o;)u++,r+=a(e,s,i,"column").size;return u},getEstimatedTotalHeight:v,getEstimatedTotalWidth:O,getRowStartIndexForOffset:(e,s,t)=>A(e,t,s,"row"),getRowStopIndexForStartIndex:(e,s,t,i)=>{const{totalRow:n,height:o}=e,r=a(e,s,i,"row"),u=t+o;let f=r.size+r.offset,c=s;for(;c<n-1&&f<u;)c++,f+=a(e,c,i,"row").size;return c},injectToInstance:(e,s)=>{const t=({columnIndex:o,rowIndex:r},u)=>{u=I.isUndefined(u)?!0:u,I.isNumber(o)&&(s.value.lastVisitedColumnIndex=Math.min(s.value.lastVisitedColumnIndex,o-1)),I.isNumber(r)&&(s.value.lastVisitedRowIndex=Math.min(s.value.lastVisitedRowIndex,r-1)),e.exposed?.getItemStyleCache.value(-1,null,null),u&&e.proxy?.$forceUpdate()},i=(o,r)=>{t({columnIndex:o},r)},n=(o,r)=>{t({rowIndex:o},r)};Object.assign(e.proxy,{resetAfterColumnIndex:i,resetAfterRowIndex:n,resetAfter:t})},initCache:({estimatedColumnWidth:e=l.DEFAULT_DYNAMIC_LIST_ITEM_SIZE,estimatedRowHeight:s=l.DEFAULT_DYNAMIC_LIST_ITEM_SIZE})=>({column:{},estimatedColumnWidth:e,estimatedRowHeight:s,lastVisitedColumnIndex:-1,lastVisitedRowIndex:-1,row:{}}),clearCache:!1,validateProps:({columnWidth:e,rowHeight:s})=>{process.env.NODE_ENV!=="production"&&(I.isFunction(e)||_.throwError(T,`
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@vueuse/core");
+const utils = require("@vft/utils");
+const error = require("../../../utils/error.cjs");
+require("../../config-provider/hooks/use-global-config.cjs");
+require("vue");
+require("lodash-es");
+const buildGrid = require("../builders/build-grid.cjs");
+const defaults = require("../defaults.cjs");
+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]]
+  ];
+  const lastVisitedItemOffset = lastVisitedIndex > 0 ? cache[lastVisitedIndex].offset : 0;
+  if (lastVisitedItemOffset >= offset) {
+    return bs(props, gridCache, 0, lastVisitedIndex, offset, type);
+  }
+  return es(props, gridCache, max(0, lastVisitedIndex), offset, type);
+};
+const getEstimatedTotalHeight = ({ totalRow }, { estimatedRowHeight, lastVisitedRowIndex, row }) => {
+  let sizeOfVisitedRows = 0;
+  if (lastVisitedRowIndex >= totalRow) {
+    lastVisitedRowIndex = totalRow - 1;
+  }
+  if (lastVisitedRowIndex >= 0) {
+    const item = row[lastVisitedRowIndex];
+    sizeOfVisitedRows = item.offset + item.size;
+  }
+  const unvisitedItems = totalRow - lastVisitedRowIndex - 1;
+  const sizeOfUnvisitedItems = unvisitedItems * estimatedRowHeight;
+  return sizeOfVisitedRows + sizeOfUnvisitedItems;
+};
+const getEstimatedTotalWidth = ({ totalColumn }, { column, estimatedColumnWidth, lastVisitedColumnIndex }) => {
+  let sizeOfVisitedColumns = 0;
+  if (lastVisitedColumnIndex > totalColumn) {
+    lastVisitedColumnIndex = totalColumn - 1;
+  }
+  if (lastVisitedColumnIndex >= 0) {
+    const item = column[lastVisitedColumnIndex];
+    sizeOfVisitedColumns = item.offset + item.size;
+  }
+  const unvisitedItems = totalColumn - lastVisitedColumnIndex - 1;
+  const sizeOfUnvisitedItems = unvisitedItems * estimatedColumnWidth;
+  return sizeOfVisitedColumns + sizeOfUnvisitedItems;
+};
+const ACCESS_ESTIMATED_SIZE_KEY_MAP = {
+  column: getEstimatedTotalWidth,
+  row: getEstimatedTotalHeight
+};
+const getOffset = (props, index, alignment, scrollOffset, cache, type, scrollBarWidth) => {
+  const [size, estimatedSizeAssociates] = [
+    type === "row" ? props.height : props.width,
+    ACCESS_ESTIMATED_SIZE_KEY_MAP[type]
+  ];
+  const item = getItemFromCache(props, index, cache, type);
+  const estimatedSize = estimatedSizeAssociates(props, cache);
+  const maxOffset = max(0, min(estimatedSize - size, item.offset));
+  const minOffset = max(0, item.offset - size + scrollBarWidth + item.size);
+  if (alignment === defaults.SMART_ALIGNMENT) {
+    if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+      alignment = defaults.AUTO_ALIGNMENT;
+    } else {
+      alignment = defaults.CENTERED_ALIGNMENT;
+    }
+  }
+  switch (alignment) {
+    case defaults.START_ALIGNMENT: {
+      return maxOffset;
+    }
+    case defaults.END_ALIGNMENT: {
+      return minOffset;
+    }
+    case defaults.CENTERED_ALIGNMENT: {
+      return Math.round(minOffset + (maxOffset - minOffset) / 2);
+    }
+    case defaults.AUTO_ALIGNMENT:
+    default: {
+      if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+        return scrollOffset;
+      } else if (minOffset > maxOffset) {
+        return minOffset;
+      } else if (scrollOffset < minOffset) {
+        return minOffset;
+      } else {
+        return maxOffset;
+      }
+    }
+  }
+};
+const DynamicSizeGrid = buildGrid.default({
+  name: "ElDynamicSizeGrid",
+  getColumnPosition: (props, idx, cache) => {
+    const item = getItemFromCache(props, idx, cache, "column");
+    return [item.size, item.offset];
+  },
+  getRowPosition: (props, idx, cache) => {
+    const item = getItemFromCache(props, idx, cache, "row");
+    return [item.size, item.offset];
+  },
+  getColumnOffset: (props, columnIndex, alignment, scrollLeft, cache, scrollBarWidth) => getOffset(
+    props,
+    columnIndex,
+    alignment,
+    scrollLeft,
+    cache,
+    "column",
+    scrollBarWidth
+  ),
+  getRowOffset: (props, rowIndex, alignment, scrollTop, cache, scrollBarWidth) => getOffset(
+    props,
+    rowIndex,
+    alignment,
+    scrollTop,
+    cache,
+    "row",
+    scrollBarWidth
+  ),
+  getColumnStartIndexForOffset: (props, scrollLeft, cache) => findItem(props, cache, scrollLeft, "column"),
+  getColumnStopIndexForStartIndex: (props, startIndex, scrollLeft, cache) => {
+    const item = getItemFromCache(props, startIndex, cache, "column");
+    const maxOffset = scrollLeft + props.width;
+    let offset = item.offset + item.size;
+    let stopIndex = startIndex;
+    while (stopIndex < props.totalColumn - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemFromCache(props, startIndex, cache, "column").size;
+    }
+    return stopIndex;
+  },
+  getEstimatedTotalHeight,
+  getEstimatedTotalWidth,
+  getRowStartIndexForOffset: (props, scrollTop, cache) => findItem(props, cache, scrollTop, "row"),
+  getRowStopIndexForStartIndex: (props, startIndex, scrollTop, cache) => {
+    const { totalRow, height } = props;
+    const item = getItemFromCache(props, startIndex, cache, "row");
+    const maxOffset = scrollTop + height;
+    let offset = item.size + item.offset;
+    let stopIndex = startIndex;
+    while (stopIndex < totalRow - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemFromCache(props, stopIndex, cache, "row").size;
+    }
+    return stopIndex;
+  },
+  injectToInstance: (instance, cache) => {
+    const resetAfter = ({ columnIndex, rowIndex }, forceUpdate) => {
+      forceUpdate = utils.isUndefined(forceUpdate) ? true : forceUpdate;
+      if (utils.isNumber(columnIndex)) {
+        cache.value.lastVisitedColumnIndex = Math.min(
+          cache.value.lastVisitedColumnIndex,
+          columnIndex - 1
+        );
+      }
+      if (utils.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 = defaults.DEFAULT_DYNAMIC_LIST_ITEM_SIZE,
+    estimatedRowHeight = defaults.DEFAULT_DYNAMIC_LIST_ITEM_SIZE
+  }) => {
+    const cache = {
+      column: {},
+      estimatedColumnWidth,
+      estimatedRowHeight,
+      lastVisitedColumnIndex: -1,
+      lastVisitedRowIndex: -1,
+      row: {}
+    };
+    return cache;
+  },
+  clearCache: false,
+  validateProps: ({ columnWidth, rowHeight }) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (!utils.isFunction(columnWidth)) {
+        error.throwError(
+          SCOPE,
+          `
           "columnWidth" must be passed as function,
-            instead ${typeof e} was given.
-        `),I.isFunction(s)||_.throwError(T,`
+            instead ${typeof columnWidth} was given.
+        `
+        );
+      }
+      if (!utils.isFunction(rowHeight)) {
+        error.throwError(
+          SCOPE,
+          `
           "rowHeight" must be passed as function,
-            instead ${typeof s} was given.
-        `))}});exports.default=G;
+            instead ${typeof rowHeight} was given.
+        `
+        );
+      }
+    }
+  }
+});
+exports.default = DynamicSizeGrid;

package/lib/components/virtual-list/components/dynamic-size-list.cjs

@@ -1,3 +1,171 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");require("@vft/utils");const N=require("../../../utils/error.cjs");require("../../config-provider/hooks/use-global-config.cjs");require("vue");require("lodash-es");const S=require("../builders/build-list.cjs"),E=require("../utils.cjs"),m=require("../defaults.cjs"),T="ElDynamicSizeList",I=(t,s,e)=>{const{itemSize:i}=t,{items:r,lastVisitedIndex:n}=e;if(s>n){let a=0;if(n>=0){const o=r[n];a=o.offset+o.size}for(let o=n+1;o<=s;o++){const u=i(o);r[o]={offset:a,size:u},a+=u}e.lastVisitedIndex=s}return r[s]},h=(t,s,e)=>{const{items:i,lastVisitedIndex:r}=s;return(r>0?i[r].offset:0)>=e?z(t,s,0,r,e):_(t,s,Math.max(0,r),e)},z=(t,s,e,i,r)=>{for(;e<=i;){const n=e+Math.floor((i-e)/2),a=I(t,n,s).offset;if(a===r)return n;a<r?e=n+1:a>r&&(i=n-1)}return Math.max(0,e-1)},_=(t,s,e,i)=>{const{total:r}=t;let n=1;for(;e<r&&I(t,e,s).offset<i;)e+=n,n*=2;return z(t,s,Math.floor(e/2),Math.min(e,r-1),i)},M=({total:t},{items:s,estimatedItemSize:e,lastVisitedIndex:i})=>{let r=0;if(i>=t&&(i=t-1),i>=0){const o=s[i];r=o.offset+o.size}const a=(t-i-1)*e;return r+a},A=S.default({name:"ElDynamicSizeList",getItemOffset:(t,s,e)=>I(t,s,e).offset,getItemSize:(t,s,{items:e})=>e[s].size,getEstimatedTotalSize:M,getOffset:(t,s,e,i,r)=>{const{height:n,layout:a,width:o}=t,u=E.isHorizontal(a)?o:n,d=I(t,s,r),l=M(t,r),c=Math.max(0,Math.min(l-u,d.offset)),f=Math.max(0,d.offset-u+d.size);switch(e===m.SMART_ALIGNMENT&&(i>=f-u&&i<=c+u?e=m.AUTO_ALIGNMENT:e=m.CENTERED_ALIGNMENT),e){case m.START_ALIGNMENT:return c;case m.END_ALIGNMENT:return f;case m.CENTERED_ALIGNMENT:return Math.round(f+(c-f)/2);case m.AUTO_ALIGNMENT:default:return i>=f&&i<=c?i:i<f?f:c}},getStartIndexForOffset:(t,s,e)=>h(t,e,s),getStopIndexForStartIndex:(t,s,e,i)=>{const{height:r,total:n,layout:a,width:o}=t,u=E.isHorizontal(a)?o:r,d=I(t,s,i),l=e+u;let c=d.offset+d.size,f=s;for(;f<n-1&&c<l;)f++,c+=I(t,f,i).size;return f},initCache({estimatedItemSize:t=m.DEFAULT_DYNAMIC_LIST_ITEM_SIZE},s){const e={items:{},estimatedItemSize:t,lastVisitedIndex:-1};return e.clearCacheAfterIndex=(i,r=!0)=>{e.lastVisitedIndex=Math.min(e.lastVisitedIndex,i-1),s.exposed?.getItemStyleCache(-1),r&&s.proxy?.$forceUpdate()},e},clearCache:!1,validateProps:({itemSize:t})=>{process.env.NODE_ENV!=="production"&&typeof t!="function"&&N.throwError(T,`
-          itemSize is required as function, but the given value was ${typeof t}
-        `)}});exports.default=A;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@vueuse/core");
+require("@vft/utils");
+const error = require("../../../utils/error.cjs");
+require("../../config-provider/hooks/use-global-config.cjs");
+require("vue");
+require("lodash-es");
+const buildList = require("../builders/build-list.cjs");
+const utils = require("../utils.cjs");
+const defaults = require("../defaults.cjs");
+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;
+  const lastVisitedOffset = lastVisitedIndex > 0 ? items[lastVisitedIndex].offset : 0;
+  if (lastVisitedOffset >= offset) {
+    return bs(props, listCache, 0, lastVisitedIndex, offset);
+  }
+  return es(props, listCache, Math.max(0, lastVisitedIndex), offset);
+};
+const bs = (props, listCache, low, high, offset) => {
+  while (low <= high) {
+    const mid = low + Math.floor((high - low) / 2);
+    const currentOffset = getItemFromCache(props, mid, listCache).offset;
+    if (currentOffset === offset) {
+      return mid;
+    } else if (currentOffset < offset) {
+      low = mid + 1;
+    } else if (currentOffset > offset) {
+      high = mid - 1;
+    }
+  }
+  return Math.max(0, low - 1);
+};
+const es = (props, listCache, index, offset) => {
+  const { total } = props;
+  let exponent = 1;
+  while (index < total && getItemFromCache(props, index, listCache).offset < offset) {
+    index += exponent;
+    exponent *= 2;
+  }
+  return bs(
+    props,
+    listCache,
+    Math.floor(index / 2),
+    Math.min(index, total - 1),
+    offset
+  );
+};
+const getEstimatedTotalSize = ({ total }, { items, estimatedItemSize, lastVisitedIndex }) => {
+  let totalSizeOfMeasuredItems = 0;
+  if (lastVisitedIndex >= total) {
+    lastVisitedIndex = total - 1;
+  }
+  if (lastVisitedIndex >= 0) {
+    const item = items[lastVisitedIndex];
+    totalSizeOfMeasuredItems = item.offset + item.size;
+  }
+  const numUnmeasuredItems = total - lastVisitedIndex - 1;
+  const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
+  return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
+};
+const DynamicSizeList = buildList.default({
+  name: "ElDynamicSizeList",
+  getItemOffset: (props, index, listCache) => getItemFromCache(props, index, listCache).offset,
+  getItemSize: (_, index, { items }) => items[index].size,
+  getEstimatedTotalSize,
+  getOffset: (props, index, alignment, scrollOffset, listCache) => {
+    const { height, layout, width } = props;
+    const size = utils.isHorizontal(layout) ? width : height;
+    const item = getItemFromCache(props, index, listCache);
+    const estimatedTotalSize = getEstimatedTotalSize(props, listCache);
+    const maxOffset = Math.max(
+      0,
+      Math.min(estimatedTotalSize - size, item.offset)
+    );
+    const minOffset = Math.max(0, item.offset - size + item.size);
+    if (alignment === defaults.SMART_ALIGNMENT) {
+      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+        alignment = defaults.AUTO_ALIGNMENT;
+      } else {
+        alignment = defaults.CENTERED_ALIGNMENT;
+      }
+    }
+    switch (alignment) {
+      case defaults.START_ALIGNMENT: {
+        return maxOffset;
+      }
+      case defaults.END_ALIGNMENT: {
+        return minOffset;
+      }
+      case defaults.CENTERED_ALIGNMENT: {
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+      }
+      case defaults.AUTO_ALIGNMENT:
+      default: {
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+      }
+    }
+  },
+  getStartIndexForOffset: (props, offset, listCache) => findItem(props, listCache, offset),
+  getStopIndexForStartIndex: (props, startIndex, scrollOffset, listCache) => {
+    const { height, total, layout, width } = props;
+    const size = utils.isHorizontal(layout) ? width : height;
+    const item = getItemFromCache(props, startIndex, listCache);
+    const maxOffset = scrollOffset + size;
+    let offset = item.offset + item.size;
+    let stopIndex = startIndex;
+    while (stopIndex < total - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemFromCache(props, stopIndex, listCache).size;
+    }
+    return stopIndex;
+  },
+  initCache({ estimatedItemSize = defaults.DEFAULT_DYNAMIC_LIST_ITEM_SIZE }, instance) {
+    const cache = {
+      items: {},
+      estimatedItemSize,
+      lastVisitedIndex: -1
+    };
+    cache.clearCacheAfterIndex = (index, forceUpdate = true) => {
+      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") {
+        error.throwError(
+          SCOPE,
+          `
+          itemSize is required as function, but the given value was ${typeof itemSize}
+        `
+        );
+      }
+    }
+  }
+});
+exports.default = DynamicSizeList;

package/lib/components/virtual-list/components/fixed-size-grid.cjs

@@ -1,7 +1,187 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("@vft/utils");require("@vueuse/core");const c=require("../../../utils/error.cjs");require("../../config-provider/hooks/use-global-config.cjs");require("vue");require("lodash-es");const d=require("../builders/build-grid.cjs"),i=require("../defaults.cjs"),T="ElFixedSizeGrid",l=d.default({name:"ElFixedSizeGrid",getColumnPosition:({columnWidth:t},e)=>[t,e*t],getRowPosition:({rowHeight:t},e)=>[t,e*t],getEstimatedTotalHeight:({totalRow:t,rowHeight:e})=>e*t,getEstimatedTotalWidth:({totalColumn:t,columnWidth:e})=>e*t,getColumnOffset:({totalColumn:t,columnWidth:e,width:s},f,n,a,N,E)=>{s=Number(s);const o=Math.max(0,t*e-s),u=Math.min(o,f*e),r=Math.max(0,f*e-s+E+e);switch(n==="smart"&&(a>=r-s&&a<=u+s?n=i.AUTO_ALIGNMENT:n=i.CENTERED_ALIGNMENT),n){case i.START_ALIGNMENT:return u;case i.END_ALIGNMENT:return r;case i.CENTERED_ALIGNMENT:{const M=Math.round(r+(u-r)/2);return M<Math.ceil(s/2)?0:M>o+Math.floor(s/2)?o:M}case i.AUTO_ALIGNMENT:default:return a>=r&&a<=u?a:r>u||a<r?r:u}},getRowOffset:({rowHeight:t,height:e,totalRow:s},f,n,a,N,E)=>{e=Number(e);const o=Math.max(0,s*t-e),u=Math.min(o,f*t),r=Math.max(0,f*t-e+E+t);switch(n===i.SMART_ALIGNMENT&&(a>=r-e&&a<=u+e?n=i.AUTO_ALIGNMENT:n=i.CENTERED_ALIGNMENT),n){case i.START_ALIGNMENT:return u;case i.END_ALIGNMENT:return r;case i.CENTERED_ALIGNMENT:{const M=Math.round(r+(u-r)/2);return M<Math.ceil(e/2)?0:M>o+Math.floor(e/2)?o:M}case i.AUTO_ALIGNMENT:default:return a>=r&&a<=u?a:r>u||a<r?r:u}},getColumnStartIndexForOffset:({columnWidth:t,totalColumn:e},s)=>Math.max(0,Math.min(e-1,Math.floor(s/t))),getColumnStopIndexForStartIndex:({columnWidth:t,totalColumn:e,width:s},f,n)=>{const a=f*t,N=Math.ceil((s+n-a)/t);return Math.max(0,Math.min(e-1,f+N-1))},getRowStartIndexForOffset:({rowHeight:t,totalRow:e},s)=>Math.max(0,Math.min(e-1,Math.floor(s/t))),getRowStopIndexForStartIndex:({rowHeight:t,totalRow:e,height:s},f,n)=>{const a=f*t,N=Math.ceil((s+n-a)/t);return Math.max(0,Math.min(e-1,f+N-1))},initCache:()=>{},clearCache:!0,validateProps:({columnWidth:t,rowHeight:e})=>{process.env.NODE_ENV!=="production"&&(m.isNumber(t)||c.throwError(T,`
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const utils = require("@vft/utils");
+require("@vueuse/core");
+const error = require("../../../utils/error.cjs");
+require("../../config-provider/hooks/use-global-config.cjs");
+require("vue");
+require("lodash-es");
+const buildGrid = require("../builders/build-grid.cjs");
+const defaults = require("../defaults.cjs");
+const SCOPE = "ElFixedSizeGrid";
+const FixedSizeGrid = buildGrid.default({
+  name: "ElFixedSizeGrid",
+  getColumnPosition: ({ columnWidth }, index) => [
+    columnWidth,
+    index * columnWidth
+  ],
+  getRowPosition: ({ rowHeight }, index) => [
+    rowHeight,
+    index * rowHeight
+  ],
+  getEstimatedTotalHeight: ({ totalRow, rowHeight }) => rowHeight * totalRow,
+  getEstimatedTotalWidth: ({ totalColumn, columnWidth }) => columnWidth * totalColumn,
+  getColumnOffset: ({ totalColumn, columnWidth, width }, columnIndex, alignment, scrollLeft, _, scrollBarWidth) => {
+    width = Number(width);
+    const lastColumnOffset = Math.max(
+      0,
+      totalColumn * columnWidth - width
+    );
+    const maxOffset = Math.min(
+      lastColumnOffset,
+      columnIndex * columnWidth
+    );
+    const minOffset = Math.max(
+      0,
+      columnIndex * columnWidth - width + scrollBarWidth + columnWidth
+    );
+    if (alignment === "smart") {
+      if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
+        alignment = defaults.AUTO_ALIGNMENT;
+      } else {
+        alignment = defaults.CENTERED_ALIGNMENT;
+      }
+    }
+    switch (alignment) {
+      case defaults.START_ALIGNMENT:
+        return maxOffset;
+      case defaults.END_ALIGNMENT:
+        return minOffset;
+      case defaults.CENTERED_ALIGNMENT: {
+        const middleOffset = Math.round(
+          minOffset + (maxOffset - minOffset) / 2
+        );
+        if (middleOffset < Math.ceil(width / 2)) {
+          return 0;
+        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
+          return lastColumnOffset;
+        } else {
+          return middleOffset;
+        }
+      }
+      case defaults.AUTO_ALIGNMENT:
+      default:
+        if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
+          return scrollLeft;
+        } else if (minOffset > maxOffset) {
+          return minOffset;
+        } else if (scrollLeft < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+  getRowOffset: ({ rowHeight, height, totalRow }, rowIndex, align, scrollTop, _, scrollBarWidth) => {
+    height = Number(height);
+    const lastRowOffset = Math.max(
+      0,
+      totalRow * rowHeight - height
+    );
+    const maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
+    const minOffset = Math.max(
+      0,
+      rowIndex * rowHeight - height + scrollBarWidth + rowHeight
+    );
+    if (align === defaults.SMART_ALIGNMENT) {
+      if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
+        align = defaults.AUTO_ALIGNMENT;
+      } else {
+        align = defaults.CENTERED_ALIGNMENT;
+      }
+    }
+    switch (align) {
+      case defaults.START_ALIGNMENT:
+        return maxOffset;
+      case defaults.END_ALIGNMENT:
+        return minOffset;
+      case defaults.CENTERED_ALIGNMENT: {
+        const middleOffset = Math.round(
+          minOffset + (maxOffset - minOffset) / 2
+        );
+        if (middleOffset < Math.ceil(height / 2)) {
+          return 0;
+        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
+          return lastRowOffset;
+        } else {
+          return middleOffset;
+        }
+      }
+      case defaults.AUTO_ALIGNMENT:
+      default:
+        if (scrollTop >= minOffset && scrollTop <= maxOffset) {
+          return scrollTop;
+        } else if (minOffset > maxOffset) {
+          return minOffset;
+        } else if (scrollTop < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+  getColumnStartIndexForOffset: ({ columnWidth, totalColumn }, scrollLeft) => Math.max(
+    0,
+    Math.min(
+      totalColumn - 1,
+      Math.floor(scrollLeft / columnWidth)
+    )
+  ),
+  getColumnStopIndexForStartIndex: ({ columnWidth, totalColumn, width }, startIndex, scrollLeft) => {
+    const left = startIndex * columnWidth;
+    const visibleColumnsCount = Math.ceil(
+      (width + scrollLeft - left) / columnWidth
+    );
+    return Math.max(
+      0,
+      Math.min(totalColumn - 1, startIndex + visibleColumnsCount - 1)
+    );
+  },
+  getRowStartIndexForOffset: ({ rowHeight, totalRow }, scrollTop) => Math.max(
+    0,
+    Math.min(totalRow - 1, Math.floor(scrollTop / rowHeight))
+  ),
+  getRowStopIndexForStartIndex: ({ rowHeight, totalRow, height }, startIndex, scrollTop) => {
+    const top = startIndex * rowHeight;
+    const numVisibleRows = Math.ceil(
+      (height + scrollTop - top) / rowHeight
+    );
+    return Math.max(
+      0,
+      Math.min(
+        totalRow - 1,
+        startIndex + numVisibleRows - 1
+        // -1 is because stop index is inclusive
+      )
+    );
+  },
+  /**
+   * Fixed size grid does not need this cache
+   * Using any to bypass it, TODO: Using type inference to fix this.
+   */
+  initCache: () => void 0,
+  clearCache: true,
+  validateProps: ({ columnWidth, rowHeight }) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (!utils.isNumber(columnWidth)) {
+        error.throwError(
+          SCOPE,
+          `
           "columnWidth" must be passed as number,
-            instead ${typeof t} was given.
-        `),m.isNumber(e)||c.throwError(T,`
+            instead ${typeof columnWidth} was given.
+        `
+        );
+      }
+      if (!utils.isNumber(rowHeight)) {
+        error.throwError(
+          SCOPE,
+          `
           "columnWidth" must be passed as number,
-            instead ${typeof e} was given.
-        `))}});exports.default=l;
+            instead ${typeof rowHeight} was given.
+        `
+        );
+      }
+    }
+  }
+});
+exports.default = FixedSizeGrid;