element-ps 1.0.0-alpha.6 → 1.0.1

package/es/packages/components/virtual-list/src/builders/build-list.mjs

@@ -0,0 +1,359 @@
+import { defineComponent, getCurrentInstance, ref, computed, unref, nextTick, onMounted, onUpdated, resolveDynamicComponent, h } from 'vue';
+import { hasOwn, isString } from '@vue/shared';
+import { isNumber } from '../../../../utils/util.mjs';
+import isServer from '../../../../utils/isServer.mjs';
+import { useCache } from '../hooks/use-cache.mjs';
+import useWheel from '../hooks/use-wheel.mjs';
+import ScrollBar from '../components/scrollbar.mjs';
+import { isHorizontal, getScrollDir, getRTLOffsetType } from '../utils.mjs';
+import { virtualizedListProps } from '../props.mjs';
+import { ITEM_RENDER_EVT, SCROLL_EVT, BACKWARD, FORWARD, RTL, RTL_OFFSET_POS_DESC, RTL_OFFSET_NAG, AUTO_ALIGNMENT, HORIZONTAL } from '../defaults.mjs';
+
+const createList = ({
+  name,
+  getOffset,
+  getItemSize,
+  getItemOffset,
+  getEstimatedTotalSize,
+  getStartIndexForOffset,
+  getStopIndexForStartIndex,
+  initCache,
+  clearCache,
+  validateProps
+}) => {
+  return defineComponent({
+    name: name != null ? name : "PsVirtualList",
+    props: virtualizedListProps,
+    emits: [ITEM_RENDER_EVT, SCROLL_EVT],
+    setup(props, { emit, expose }) {
+      validateProps(props);
+      const instance = getCurrentInstance();
+      const dynamicSizeCache = ref(initCache(props, instance));
+      const getItemStyleCache = useCache();
+      const windowRef = ref();
+      const innerRef = ref();
+      const scrollbarRef = ref();
+      const states = ref({
+        isScrolling: false,
+        scrollDir: "forward",
+        scrollOffset: isNumber(props.initScrollOffset) ? props.initScrollOffset : 0,
+        updateRequested: false,
+        isScrollbarDragging: false,
+        scrollbarAlwaysOn: props.scrollbarAlwaysOn
+      });
+      const itemsToRender = computed(() => {
+        const { total, cache } = props;
+        const { isScrolling, scrollDir, scrollOffset } = unref(states);
+        if (total === 0) {
+          return [0, 0, 0, 0];
+        }
+        const startIndex = getStartIndexForOffset(props, scrollOffset, unref(dynamicSizeCache));
+        const stopIndex = getStopIndexForStartIndex(props, startIndex, scrollOffset, unref(dynamicSizeCache));
+        const cacheBackward = !isScrolling || scrollDir === BACKWARD ? Math.max(1, cache) : 1;
+        const cacheForward = !isScrolling || scrollDir === FORWARD ? Math.max(1, cache) : 1;
+        return [
+          Math.max(0, startIndex - cacheBackward),
+          Math.max(0, Math.min(total - 1, stopIndex + cacheForward)),
+          startIndex,
+          stopIndex
+        ];
+      });
+      const estimatedTotalSize = computed(() => getEstimatedTotalSize(props, unref(dynamicSizeCache)));
+      const _isHorizontal = computed(() => isHorizontal(props.layout));
+      const windowStyle = computed(() => [
+        {
+          position: "relative",
+          overflow: "hidden",
+          WebkitOverflowScrolling: "touch",
+          willChange: "transform"
+        },
+        {
+          direction: props.direction,
+          height: isNumber(props.height) ? `${props.height}px` : props.height,
+          width: isNumber(props.width) ? `${props.width}px` : props.width
+        },
+        props.style
+      ]);
+      const innerStyle = computed(() => {
+        const size = unref(estimatedTotalSize);
+        const horizontal = unref(_isHorizontal);
+        return {
+          height: horizontal ? "100%" : `${size}px`,
+          pointerEvents: unref(states).isScrolling ? "none" : void 0,
+          width: horizontal ? `${size}px` : "100%"
+        };
+      });
+      const clientSize = computed(() => _isHorizontal.value ? props.width : props.height);
+      const { onWheel } = useWheel({
+        atStartEdge: computed(() => states.value.scrollOffset <= 0),
+        atEndEdge: computed(() => states.value.scrollOffset >= estimatedTotalSize.value),
+        layout: computed(() => props.layout)
+      }, (offset) => {
+        var _a, _b;
+        ;
+        (_b = (_a = scrollbarRef.value).onMouseUp) == null ? void 0 : _b.call(_a);
+        scrollTo(Math.min(states.value.scrollOffset + offset, estimatedTotalSize.value - clientSize.value));
+      });
+      const emitEvents = () => {
+        const { total } = props;
+        if (total > 0) {
+          const [cacheStart, cacheEnd, visibleStart, visibleEnd] = unref(itemsToRender);
+          emit(ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd);
+        }
+        const { scrollDir, scrollOffset, updateRequested } = unref(states);
+        emit(SCROLL_EVT, scrollDir, scrollOffset, updateRequested);
+      };
+      const scrollVertically = (e) => {
+        const { clientHeight, scrollHeight, scrollTop } = e.currentTarget;
+        const _states = unref(states);
+        if (_states.scrollOffset === scrollTop) {
+          return;
+        }
+        const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+        states.value = {
+          ..._states,
+          isScrolling: true,
+          scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),
+          scrollOffset,
+          updateRequested: false
+        };
+        nextTick(resetIsScrolling);
+      };
+      const scrollHorizontally = (e) => {
+        const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
+        const _states = unref(states);
+        if (_states.scrollOffset === scrollLeft) {
+          return;
+        }
+        const { direction } = props;
+        let scrollOffset = scrollLeft;
+        if (direction === RTL) {
+          switch (getRTLOffsetType()) {
+            case RTL_OFFSET_NAG: {
+              scrollOffset = -scrollLeft;
+              break;
+            }
+            case RTL_OFFSET_POS_DESC: {
+              scrollOffset = scrollWidth - clientWidth - scrollLeft;
+              break;
+            }
+          }
+        }
+        scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
+        states.value = {
+          ..._states,
+          isScrolling: true,
+          scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),
+          scrollOffset,
+          updateRequested: false
+        };
+        nextTick(resetIsScrolling);
+      };
+      const onScroll = (e) => {
+        unref(_isHorizontal) ? scrollHorizontally(e) : scrollVertically(e);
+        emitEvents();
+      };
+      const onScrollbarScroll = (distanceToGo, totalSteps) => {
+        const offset = (estimatedTotalSize.value - clientSize.value) / totalSteps * distanceToGo;
+        scrollTo(Math.min(estimatedTotalSize.value - clientSize.value, offset));
+      };
+      const scrollTo = (offset) => {
+        offset = Math.max(offset, 0);
+        if (offset === unref(states).scrollOffset) {
+          return;
+        }
+        states.value = {
+          ...unref(states),
+          scrollOffset: offset,
+          scrollDir: getScrollDir(unref(states).scrollOffset, offset),
+          updateRequested: true
+        };
+        nextTick(resetIsScrolling);
+      };
+      const scrollToItem = (idx, alignment = AUTO_ALIGNMENT) => {
+        const { scrollOffset } = unref(states);
+        idx = Math.max(0, Math.min(idx, props.total - 1));
+        scrollTo(getOffset(props, idx, alignment, scrollOffset, unref(dynamicSizeCache)));
+      };
+      const getItemStyle = (idx) => {
+        const { direction, itemSize, layout } = props;
+        const itemStyleCache = getItemStyleCache.value(clearCache && itemSize, clearCache && layout, clearCache && direction);
+        let style;
+        if (hasOwn(itemStyleCache, String(idx))) {
+          style = itemStyleCache[idx];
+        } else {
+          const offset = getItemOffset(props, idx, unref(dynamicSizeCache));
+          const size = getItemSize(props, idx, unref(dynamicSizeCache));
+          const horizontal = unref(_isHorizontal);
+          const isRtl = direction === RTL;
+          const offsetHorizontal = horizontal ? offset : 0;
+          itemStyleCache[idx] = style = {
+            position: "absolute",
+            left: isRtl ? void 0 : `${offsetHorizontal}px`,
+            right: isRtl ? `${offsetHorizontal}px` : void 0,
+            top: !horizontal ? `${offset}px` : 0,
+            height: !horizontal ? `${size}px` : "100%",
+            width: horizontal ? `${size}px` : "100%"
+          };
+        }
+        return style;
+      };
+      const resetIsScrolling = () => {
+        states.value.isScrolling = false;
+        nextTick(() => {
+          getItemStyleCache.value(-1, null, null);
+        });
+      };
+      const resetScrollTop = () => {
+        const window = windowRef.value;
+        if (window) {
+          window.scrollTop = 0;
+        }
+      };
+      onMounted(() => {
+        if (isServer)
+          return;
+        const { initScrollOffset } = props;
+        const windowElement = unref(windowRef);
+        if (isNumber(initScrollOffset) && windowElement) {
+          if (unref(_isHorizontal)) {
+            windowElement.scrollLeft = initScrollOffset;
+          } else {
+            windowElement.scrollTop = initScrollOffset;
+          }
+        }
+        emitEvents();
+      });
+      onUpdated(() => {
+        const { direction, layout } = props;
+        const { scrollOffset, updateRequested } = unref(states);
+        const windowElement = unref(windowRef);
+        if (updateRequested && windowElement) {
+          if (layout === HORIZONTAL) {
+            if (direction === RTL) {
+              switch (getRTLOffsetType()) {
+                case "negative": {
+                  windowElement.scrollLeft = -scrollOffset;
+                  break;
+                }
+                case "positive-ascending": {
+                  windowElement.scrollLeft = scrollOffset;
+                  break;
+                }
+                default: {
+                  const { clientWidth, scrollWidth } = windowElement;
+                  windowElement.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                  break;
+                }
+              }
+            } else {
+              windowElement.scrollLeft = scrollOffset;
+            }
+          } else {
+            windowElement.scrollTop = scrollOffset;
+          }
+        }
+      });
+      const api = {
+        clientSize,
+        estimatedTotalSize,
+        windowStyle,
+        windowRef,
+        innerRef,
+        innerStyle,
+        itemsToRender,
+        scrollbarRef,
+        states,
+        getItemStyle,
+        onScroll,
+        onScrollbarScroll,
+        onWheel,
+        scrollTo,
+        scrollToItem,
+        resetScrollTop
+      };
+      expose({
+        windowRef,
+        innerRef,
+        getItemStyleCache,
+        scrollTo,
+        scrollToItem,
+        resetScrollTop,
+        states
+      });
+      return api;
+    },
+    render(ctx) {
+      var _a;
+      const {
+        $slots,
+        className,
+        clientSize,
+        containerElement,
+        data,
+        getItemStyle,
+        innerElement,
+        itemsToRender,
+        innerStyle,
+        layout,
+        total,
+        onScroll,
+        onScrollbarScroll,
+        onWheel,
+        states,
+        useIsScrolling,
+        windowStyle
+      } = ctx;
+      const [start, end] = itemsToRender;
+      const Container = resolveDynamicComponent(containerElement);
+      const Inner = resolveDynamicComponent(innerElement);
+      const children = [];
+      if (total > 0) {
+        for (let i = start; i <= end; i++) {
+          children.push((_a = $slots.default) == null ? void 0 : _a.call($slots, {
+            data,
+            key: i,
+            index: i,
+            isScrolling: useIsScrolling ? states.isScrolling : void 0,
+            style: getItemStyle(i)
+          }));
+        }
+      }
+      const InnerNode = [
+        h(Inner, {
+          style: innerStyle,
+          ref: "innerRef"
+        }, !isString(Inner) ? {
+          default: () => children
+        } : children)
+      ];
+      const scrollbar = h(ScrollBar, {
+        ref: "scrollbarRef",
+        clientSize,
+        layout,
+        onScroll: onScrollbarScroll,
+        ratio: clientSize * 100 / this.estimatedTotalSize,
+        scrollFrom: states.scrollOffset / (this.estimatedTotalSize - clientSize),
+        total
+      });
+      const listContainer = h(Container, {
+        class: className,
+        style: windowStyle,
+        onScroll,
+        onWheel,
+        ref: "windowRef",
+        key: 0
+      }, !isString(Container) ? { default: () => [InnerNode] } : [InnerNode]);
+      return h("div", {
+        key: 0,
+        class: [
+          "el-vl__wrapper",
+          states.scrollbarAlwaysOn ? "always-on" : ""
+        ]
+      }, [listContainer, scrollbar]);
+    }
+  });
+};
+
+export { createList as default };
+//# sourceMappingURL=build-list.mjs.map

package/es/packages/components/virtual-list/src/builders/build-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-list.mjs","sources":["../../../../../../../../packages/components/virtual-list/src/builders/build-list.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  ref,\n  nextTick,\n  onMounted,\n  onUpdated,\n  resolveDynamicComponent,\n  h,\n  unref,\n} from 'vue'\nimport { hasOwn } from '@vue/shared'\n\nimport { isNumber, isString } from '@element-ps/utils/util'\nimport isServer from '@element-ps/utils/isServer'\n\nimport { useCache } from '../hooks/use-cache'\nimport useWheel from '../hooks/use-wheel'\nimport Scrollbar from '../components/scrollbar'\nimport { getScrollDir, isHorizontal, getRTLOffsetType } from '../utils'\nimport { virtualizedListProps } from '../props'\nimport {\n  AUTO_ALIGNMENT,\n  BACKWARD,\n  FORWARD,\n  RTL,\n  HORIZONTAL,\n  ITEM_RENDER_EVT,\n  SCROLL_EVT,\n  RTL_OFFSET_NAG,\n  RTL_OFFSET_POS_DESC,\n} from '../defaults'\n\nimport type { VNode, CSSProperties, Slot, VNodeChild } from 'vue'\nimport type { ListConstructorProps, Alignment } from '../types'\nimport type { VirtualizedListProps } from '../props'\n\nconst createList = ({\n  name,\n  getOffset,\n  getItemSize,\n  getItemOffset,\n  getEstimatedTotalSize,\n  getStartIndexForOffset,\n  getStopIndexForStartIndex,\n  initCache,\n  clearCache,\n  validateProps,\n}: ListConstructorProps<VirtualizedListProps>) => {\n  return defineComponent({\n    name: name ?? 'PsVirtualList',\n    props: virtualizedListProps,\n    emits: [ITEM_RENDER_EVT, SCROLL_EVT],\n    setup(props, { emit, expose }) {\n      validateProps(props)\n      const instance = getCurrentInstance()!\n      const dynamicSizeCache = ref(initCache(props, instance))\n\n      const getItemStyleCache = useCache()\n      // refs\n      // here windowRef and innerRef can be type of HTMLElement\n      // or user defined component type, depends on the type passed\n      // by user\n      const windowRef = ref<HTMLElement>()\n      const innerRef = ref<HTMLElement>()\n      const scrollbarRef = ref()\n      const states = ref({\n        isScrolling: false,\n        scrollDir: 'forward',\n        scrollOffset: isNumber(props.initScrollOffset)\n          ? props.initScrollOffset\n          : 0,\n        updateRequested: false,\n        isScrollbarDragging: false,\n        scrollbarAlwaysOn: props.scrollbarAlwaysOn,\n      })\n\n      // computed\n      const itemsToRender = computed(() => {\n        const { total, cache } = props\n        const { isScrolling, scrollDir, scrollOffset } = unref(states)\n\n        if (total === 0) {\n          return [0, 0, 0, 0]\n        }\n\n        const startIndex = getStartIndexForOffset(\n          props,\n          scrollOffset,\n          unref(dynamicSizeCache)\n        )\n        const stopIndex = getStopIndexForStartIndex(\n          props,\n          startIndex,\n          scrollOffset,\n          unref(dynamicSizeCache)\n        )\n\n        const cacheBackward =\n          !isScrolling || scrollDir === BACKWARD ? Math.max(1, cache) : 1\n        const cacheForward =\n          !isScrolling || scrollDir === FORWARD ? Math.max(1, cache) : 1\n\n        return [\n          Math.max(0, startIndex - cacheBackward),\n          Math.max(0, Math.min(total! - 1, stopIndex + cacheForward)),\n          startIndex,\n          stopIndex,\n        ]\n      })\n\n      const estimatedTotalSize = computed(() =>\n        getEstimatedTotalSize(props, unref(dynamicSizeCache))\n      )\n\n      const _isHorizontal = computed(() => isHorizontal(props.layout))\n\n      const windowStyle = computed(() => [\n        {\n          position: 'relative',\n          overflow: 'hidden',\n          WebkitOverflowScrolling: 'touch',\n          willChange: 'transform',\n        },\n        {\n          direction: props.direction,\n          height: isNumber(props.height) ? `${props.height}px` : props.height,\n          width: isNumber(props.width) ? `${props.width}px` : props.width,\n        },\n        props.style,\n      ])\n\n      const innerStyle = computed(() => {\n        const size = unref(estimatedTotalSize)\n        const horizontal = unref(_isHorizontal)\n        return {\n          height: horizontal ? '100%' : `${size}px`,\n          pointerEvents: unref(states).isScrolling ? 'none' : undefined,\n          width: horizontal ? `${size}px` : '100%',\n        }\n      })\n\n      const clientSize = computed(() =>\n        _isHorizontal.value ? props.width : props.height\n      )\n\n      // methods\n      const { onWheel } = useWheel(\n        {\n          atStartEdge: computed(() => states.value.scrollOffset <= 0),\n          atEndEdge: computed(\n            () => states.value.scrollOffset >= estimatedTotalSize.value\n          ),\n          layout: computed(() => props.layout),\n        },\n        (offset) => {\n          ;(\n            scrollbarRef.value as any as {\n              onMouseUp: () => void\n            }\n          ).onMouseUp?.()\n          scrollTo(\n            Math.min(\n              states.value.scrollOffset + offset,\n              estimatedTotalSize.value - (clientSize.value as number)\n            )\n          )\n        }\n      )\n\n      const emitEvents = () => {\n        const { total } = props\n\n        if (total! > 0) {\n          const [cacheStart, cacheEnd, visibleStart, visibleEnd] =\n            unref(itemsToRender)\n          emit(ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd)\n        }\n\n        const { scrollDir, scrollOffset, updateRequested } = unref(states)\n        emit(SCROLL_EVT, scrollDir, scrollOffset, updateRequested)\n      }\n\n      const scrollVertically = (e: Event) => {\n        const { clientHeight, scrollHeight, scrollTop } =\n          e.currentTarget as HTMLElement\n        const _states = unref(states)\n        if (_states.scrollOffset === scrollTop) {\n          return\n        }\n\n        const scrollOffset = Math.max(\n          0,\n          Math.min(scrollTop, scrollHeight - clientHeight)\n        )\n\n        states.value = {\n          ..._states,\n          isScrolling: true,\n          scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),\n          scrollOffset,\n          updateRequested: false,\n        }\n\n        nextTick(resetIsScrolling)\n      }\n\n      const scrollHorizontally = (e: Event) => {\n        const { clientWidth, scrollLeft, scrollWidth } =\n          e.currentTarget as HTMLElement\n        const _states = unref(states)\n\n        if (_states.scrollOffset === scrollLeft) {\n          return\n        }\n\n        const { direction } = props\n\n        let scrollOffset = scrollLeft\n\n        if (direction === RTL) {\n          // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.\n          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.\n          switch (getRTLOffsetType()) {\n            case RTL_OFFSET_NAG: {\n              scrollOffset = -scrollLeft\n              break\n            }\n            case RTL_OFFSET_POS_DESC: {\n              scrollOffset = scrollWidth - clientWidth - scrollLeft\n              break\n            }\n          }\n        }\n\n        scrollOffset = Math.max(\n          0,\n          Math.min(scrollOffset, scrollWidth - clientWidth)\n        )\n\n        states.value = {\n          ..._states,\n          isScrolling: true,\n          scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),\n          scrollOffset,\n          updateRequested: false,\n        }\n\n        nextTick(resetIsScrolling)\n      }\n\n      const onScroll = (e: Event) => {\n        unref(_isHorizontal) ? scrollHorizontally(e) : scrollVertically(e)\n        emitEvents()\n      }\n\n      const onScrollbarScroll = (distanceToGo: number, totalSteps: number) => {\n        const offset =\n          ((estimatedTotalSize.value - (clientSize.value as number)) /\n            totalSteps) *\n          distanceToGo\n        scrollTo(\n          Math.min(\n            estimatedTotalSize.value - (clientSize.value as number),\n            offset\n          )\n        )\n      }\n\n      const scrollTo = (offset: number) => {\n        offset = Math.max(offset, 0)\n\n        if (offset === unref(states).scrollOffset) {\n          return\n        }\n\n        states.value = {\n          ...unref(states),\n          scrollOffset: offset,\n          scrollDir: getScrollDir(unref(states).scrollOffset, offset),\n          updateRequested: true,\n        }\n\n        nextTick(resetIsScrolling)\n      }\n\n      const scrollToItem = (\n        idx: number,\n        alignment: Alignment = AUTO_ALIGNMENT\n      ) => {\n        const { scrollOffset } = unref(states)\n\n        idx = Math.max(0, Math.min(idx, props.total! - 1))\n        scrollTo(\n          getOffset(\n            props,\n            idx,\n            alignment,\n            scrollOffset,\n            unref(dynamicSizeCache)\n          )\n        )\n      }\n\n      const getItemStyle = (idx: number) => {\n        const { direction, itemSize, layout } = props\n\n        const itemStyleCache = getItemStyleCache.value(\n          clearCache && itemSize,\n          clearCache && layout,\n          clearCache && direction\n        )\n\n        let style: CSSProperties\n        if (hasOwn(itemStyleCache, String(idx))) {\n          style = itemStyleCache[idx]\n        } else {\n          const offset = getItemOffset(props, idx, unref(dynamicSizeCache))\n          const size = getItemSize(props, idx, unref(dynamicSizeCache))\n          const horizontal = unref(_isHorizontal)\n\n          const isRtl = direction === RTL\n          const offsetHorizontal = horizontal ? offset : 0\n          itemStyleCache[idx] = style = {\n            position: 'absolute',\n            left: isRtl ? undefined : `${offsetHorizontal}px`,\n            right: isRtl ? `${offsetHorizontal}px` : undefined,\n            top: !horizontal ? `${offset}px` : 0,\n            height: !horizontal ? `${size}px` : '100%',\n            width: horizontal ? `${size}px` : '100%',\n          }\n        }\n\n        return style\n      }\n\n      // TODO:\n      // perf optimization here, reset isScrolling with debounce.\n\n      const resetIsScrolling = () => {\n        // timer = null\n\n        states.value.isScrolling = false\n        nextTick(() => {\n          getItemStyleCache.value(-1, null, null)\n        })\n      }\n\n      const resetScrollTop = () => {\n        const window = windowRef.value\n        if (window) {\n          window.scrollTop = 0\n        }\n      }\n\n      // life cycles\n      onMounted(() => {\n        if (isServer) return\n        const { initScrollOffset } = props\n        const windowElement = unref(windowRef)\n        if (isNumber(initScrollOffset) && windowElement) {\n          if (unref(_isHorizontal)) {\n            windowElement.scrollLeft = initScrollOffset\n          } else {\n            windowElement.scrollTop = initScrollOffset\n          }\n        }\n\n        emitEvents()\n      })\n\n      onUpdated(() => {\n        const { direction, layout } = props\n        const { scrollOffset, updateRequested } = unref(states)\n        const windowElement = unref(windowRef)\n\n        if (updateRequested && windowElement) {\n          if (layout === HORIZONTAL) {\n            if (direction === RTL) {\n              // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n              // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n              // So we need to determine which browser behavior we're dealing with, and mimic it.\n              switch (getRTLOffsetType()) {\n                case 'negative': {\n                  windowElement.scrollLeft = -scrollOffset\n                  break\n                }\n                case 'positive-ascending': {\n                  windowElement.scrollLeft = scrollOffset\n                  break\n                }\n                default: {\n                  const { clientWidth, scrollWidth } = windowElement\n                  windowElement.scrollLeft =\n                    scrollWidth - clientWidth - scrollOffset\n                  break\n                }\n              }\n            } else {\n              windowElement.scrollLeft = scrollOffset\n            }\n          } else {\n            windowElement.scrollTop = scrollOffset\n          }\n        }\n      })\n\n      const api = {\n        clientSize,\n        estimatedTotalSize,\n        windowStyle,\n        windowRef,\n        innerRef,\n        innerStyle,\n        itemsToRender,\n        scrollbarRef,\n        states,\n        getItemStyle,\n        onScroll,\n        onScrollbarScroll,\n        onWheel,\n        scrollTo,\n        scrollToItem,\n        resetScrollTop,\n      }\n\n      expose({\n        windowRef,\n        innerRef,\n        getItemStyleCache,\n        scrollTo,\n        scrollToItem,\n        resetScrollTop,\n        states,\n      })\n\n      return api\n    },\n\n    render(ctx: any) {\n      const {\n        $slots,\n        className,\n        clientSize,\n        containerElement,\n        data,\n        getItemStyle,\n        innerElement,\n        itemsToRender,\n        innerStyle,\n        layout,\n        total,\n        onScroll,\n        onScrollbarScroll,\n        onWheel,\n        states,\n        useIsScrolling,\n        windowStyle,\n      } = ctx\n\n      const [start, end] = itemsToRender\n\n      const Container = resolveDynamicComponent(containerElement)\n      const Inner = resolveDynamicComponent(innerElement)\n\n      const children = [] as VNodeChild[]\n\n      if (total > 0) {\n        for (let i = start; i <= end; i++) {\n          children.push(\n            ($slots.default as Slot)?.({\n              data,\n              key: i,\n              index: i,\n              isScrolling: useIsScrolling ? states.isScrolling : undefined,\n              style: getItemStyle(i),\n            })\n          )\n        }\n      }\n\n      const InnerNode = [\n        h(\n          Inner as VNode,\n          {\n            style: innerStyle,\n            ref: 'innerRef',\n          },\n          !isString(Inner)\n            ? {\n                default: () => children,\n              }\n            : children\n        ),\n      ]\n\n      const scrollbar = h(Scrollbar, {\n        ref: 'scrollbarRef',\n        clientSize,\n        layout,\n        onScroll: onScrollbarScroll,\n        ratio: (clientSize * 100) / this.estimatedTotalSize,\n        scrollFrom:\n          states.scrollOffset / (this.estimatedTotalSize - clientSize),\n        total,\n      })\n\n      const listContainer = h(\n        Container as VNode,\n        {\n          class: className,\n          style: windowStyle,\n          onScroll,\n          onWheel,\n          ref: 'windowRef',\n          key: 0,\n        },\n        !isString(Container) ? { default: () => [InnerNode] } : [InnerNode]\n      )\n\n      return h(\n        'div',\n        {\n          key: 0,\n          class: [\n            'el-vl__wrapper',\n            states.scrollbarAlwaysOn ? 'always-on' : '',\n          ],\n        },\n        [listContainer, scrollbar]\n      )\n    },\n  })\n}\n\nexport default createList\n"],"names":["Scrollbar"],"mappings":"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"}

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

@@ -0,0 +1,217 @@
+import { isFunction } from '@vue/shared';
+import { throwError } from '../../../../utils/error.mjs';
+import createGrid from '../builders/build-grid.mjs';
+import { SMART_ALIGNMENT, AUTO_ALIGNMENT, CENTERED_ALIGNMENT, END_ALIGNMENT, START_ALIGNMENT, DEFAULT_DYNAMIC_LIST_ITEM_SIZE } from '../defaults.mjs';
+
+const { max, min, floor } = Math;
+const SCOPE = "PsDynamicSizeGrid";
+const ACCESS_SIZER_KEY_MAP = {
+  column: "columnWidth",
+  row: "rowHeight"
+};
+const ACCESS_LAST_VISITED_KEY_MAP = {
+  column: "lastVisitedColumnIndex",
+  row: "lastVisitedRowIndex"
+};
+const getItemFromCache = (props, index, gridCache, type) => {
+  const [cachedItems, sizer, lastVisited] = [
+    gridCache[type],
+    props[ACCESS_SIZER_KEY_MAP[type]],
+    gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]]
+  ];
+  if (index > lastVisited) {
+    let offset = 0;
+    if (lastVisited >= 0) {
+      const item = cachedItems[lastVisited];
+      offset = item.offset + item.size;
+    }
+    for (let i = lastVisited + 1; i <= index; i++) {
+      const size = sizer(i);
+      cachedItems[i] = {
+        offset,
+        size
+      };
+      offset += size;
+    }
+    gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]] = index;
+  }
+  return cachedItems[index];
+};
+const bs = (props, gridCache, low, high, offset, type) => {
+  while (low <= high) {
+    const mid = low + floor((high - low) / 2);
+    const currentOffset = getItemFromCache(props, mid, gridCache, type).offset;
+    if (currentOffset === offset) {
+      return mid;
+    } else if (currentOffset < offset) {
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  return max(0, low - 1);
+};
+const es = (props, gridCache, idx, offset, type) => {
+  const total = type === "column" ? props.totalColumn : props.totalRow;
+  let exponent = 1;
+  while (idx < total && getItemFromCache(props, idx, gridCache, type).offset < offset) {
+    idx += exponent;
+    exponent *= 2;
+  }
+  return bs(props, gridCache, floor(idx / 2), min(idx, total - 1), offset, type);
+};
+const findItem = (props, gridCache, offset, type) => {
+  const [cache, lastVisitedIndex] = [
+    gridCache[type],
+    gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]]
+  ];
+  const lastVisitedItemOffset = lastVisitedIndex > 0 ? cache[lastVisitedIndex].offset : 0;
+  if (lastVisitedItemOffset >= offset) {
+    return bs(props, gridCache, 0, lastVisitedIndex, offset, type);
+  }
+  return es(props, gridCache, max(0, lastVisitedIndex), offset, type);
+};
+const getEstimatedTotalHeight = ({ totalRow }, { estimatedRowHeight, lastVisitedRowIndex, row }) => {
+  let sizeOfVisitedRows = 0;
+  if (lastVisitedRowIndex >= totalRow) {
+    lastVisitedRowIndex = totalRow - 1;
+  }
+  if (lastVisitedRowIndex >= 0) {
+    const item = row[lastVisitedRowIndex];
+    sizeOfVisitedRows = item.offset + item.size;
+  }
+  const unvisitedItems = totalRow - lastVisitedRowIndex - 1;
+  const sizeOfUnvisitedItems = unvisitedItems * estimatedRowHeight;
+  return sizeOfVisitedRows + sizeOfUnvisitedItems;
+};
+const getEstimatedTotalWidth = ({ totalColumn }, { column, estimatedColumnWidth, lastVisitedColumnIndex }) => {
+  let sizeOfVisitedColumns = 0;
+  if (lastVisitedColumnIndex > totalColumn) {
+    lastVisitedColumnIndex = totalColumn - 1;
+  }
+  if (lastVisitedColumnIndex >= 0) {
+    const item = column[lastVisitedColumnIndex];
+    sizeOfVisitedColumns = item.offset + item.size;
+  }
+  const unvisitedItems = totalColumn - lastVisitedColumnIndex - 1;
+  const sizeOfUnvisitedItems = unvisitedItems * estimatedColumnWidth;
+  return sizeOfVisitedColumns + sizeOfUnvisitedItems;
+};
+const ACCESS_ESTIMATED_SIZE_KEY_MAP = {
+  column: getEstimatedTotalWidth,
+  row: getEstimatedTotalHeight
+};
+const getOffset = (props, index, alignment, scrollOffset, cache, type, scrollBarWidth) => {
+  const [size, estimatedSizeAssociates] = [
+    type === "row" ? props.height : props.width,
+    ACCESS_ESTIMATED_SIZE_KEY_MAP[type]
+  ];
+  const item = getItemFromCache(props, index, cache, type);
+  const estimatedSize = estimatedSizeAssociates(props, cache);
+  const maxOffset = max(0, min(estimatedSize - size, item.offset));
+  const minOffset = max(0, item.offset - size + scrollBarWidth + item.size);
+  if (alignment === SMART_ALIGNMENT) {
+    if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+      alignment = AUTO_ALIGNMENT;
+    } else {
+      alignment = CENTERED_ALIGNMENT;
+    }
+  }
+  switch (alignment) {
+    case START_ALIGNMENT: {
+      return maxOffset;
+    }
+    case END_ALIGNMENT: {
+      return minOffset;
+    }
+    case CENTERED_ALIGNMENT: {
+      return Math.round(minOffset + (maxOffset - minOffset) / 2);
+    }
+    case AUTO_ALIGNMENT:
+    default: {
+      if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+        return scrollOffset;
+      } else if (minOffset > maxOffset) {
+        return minOffset;
+      } else if (scrollOffset < minOffset) {
+        return minOffset;
+      } else {
+        return maxOffset;
+      }
+    }
+  }
+};
+const FixedSizeGrid = createGrid({
+  name: "PsDynamicSizeGrid",
+  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;
+  },
+  initCache: ({
+    estimatedColumnWidth = DEFAULT_DYNAMIC_LIST_ITEM_SIZE,
+    estimatedRowHeight = DEFAULT_DYNAMIC_LIST_ITEM_SIZE
+  }) => {
+    const cache = {
+      column: {},
+      estimatedColumnWidth,
+      estimatedRowHeight,
+      lastVisitedColumnIndex: -1,
+      lastVisitedRowIndex: -1,
+      row: {}
+    };
+    return cache;
+  },
+  clearCache: true,
+  validateProps: ({ columnWidth, rowHeight }) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (!isFunction(columnWidth)) {
+        throwError(SCOPE, `
+          "columnWidth" must be passed as function,
+            instead ${typeof columnWidth} was given.
+        `);
+      }
+      if (!isFunction(rowHeight)) {
+        throwError(SCOPE, `
+          "columnWidth" must be passed as function,
+            instead ${typeof rowHeight} was given.
+        `);
+      }
+    }
+  }
+});
+
+export { FixedSizeGrid as default };
+//# sourceMappingURL=dynamic-size-grid.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-size-grid.mjs","sources":["../../../../../../../../packages/components/virtual-list/src/components/dynamic-size-grid.ts"],"sourcesContent":["import { isFunction } from '@vue/shared'\nimport { throwError } from '@element-ps/utils/error'\nimport createGrid from '../builders/build-grid'\n\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 { VirtualizedGridProps } from '../props'\n\nimport type { Alignment, GridCache, ListItem, ItemSize } from '../types'\n\nconst { max, min, floor } = Math\nconst SCOPE = 'PsDynamicSizeGrid'\n\ntype Props = VirtualizedGridProps\ntype CacheItemType = 'column' | 'row'\n\n// generates props access key via type\nconst ACCESS_SIZER_KEY_MAP = {\n  column: 'columnWidth',\n  row: 'rowHeight',\n}\n\n// generates cache access key via type\nconst ACCESS_LAST_VISITED_KEY_MAP = {\n  column: 'lastVisitedColumnIndex',\n  row: 'lastVisitedRowIndex',\n}\n\nconst getItemFromCache = (\n  props: Props,\n  index: number,\n  gridCache: GridCache,\n  type: CacheItemType\n) => {\n  const [cachedItems, sizer, lastVisited] = [\n    gridCache[type],\n    props[ACCESS_SIZER_KEY_MAP[type]],\n    gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]],\n  ] as [Record<string, ListItem>, ItemSize, number]\n\n  if (index > lastVisited) {\n    let offset = 0\n    if (lastVisited >= 0) {\n      const item = cachedItems[lastVisited]\n      offset = item.offset + item.size\n    }\n\n    for (let i = lastVisited + 1; i <= index; i++) {\n      const size = sizer(i)\n\n      cachedItems[i] = {\n        offset,\n        size,\n      }\n\n      offset += size\n    }\n\n    gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]] = index\n  }\n\n  return cachedItems[index]\n}\n\nconst bs = (\n  props: Props,\n  gridCache: GridCache,\n  low: number,\n  high: number,\n  offset: number,\n  type: CacheItemType\n) => {\n  while (low <= high) {\n    const mid = low + floor((high - low) / 2)\n    const currentOffset = getItemFromCache(props, mid, gridCache, type).offset\n\n    if (currentOffset === offset) {\n      return mid\n    } else if (currentOffset < offset) {\n      low = mid + 1\n    } else {\n      high = mid - 1\n    }\n  }\n\n  return max(0, low - 1)\n}\n\nconst es = (\n  props: Props,\n  gridCache: GridCache,\n  idx: number,\n  offset: number,\n  type: CacheItemType\n) => {\n  const total = type === 'column' ? props.totalColumn : props.totalRow\n  let exponent = 1\n\n  while (\n    idx < total &&\n    getItemFromCache(props, idx, gridCache, type).offset < offset\n  ) {\n    idx += exponent\n    exponent *= 2\n  }\n\n  return bs(props, gridCache, floor(idx / 2), min(idx, total - 1), offset, type)\n}\n\nconst findItem = (\n  props: Props,\n  gridCache: GridCache,\n  offset: number,\n  type: CacheItemType\n) => {\n  const [cache, lastVisitedIndex] = [\n    gridCache[type],\n    gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]],\n  ] as [Record<string, ListItem>, number]\n\n  const lastVisitedItemOffset =\n    lastVisitedIndex > 0 ? cache[lastVisitedIndex].offset : 0\n\n  if (lastVisitedItemOffset >= offset) {\n    return bs(props, gridCache, 0, lastVisitedIndex, offset, type)\n  }\n\n  return es(props, gridCache, max(0, lastVisitedIndex), offset, type)\n}\n\nconst getEstimatedTotalHeight = (\n  { totalRow }: Props,\n  { estimatedRowHeight, lastVisitedRowIndex, row }: GridCache\n) => {\n  let sizeOfVisitedRows = 0\n\n  if (lastVisitedRowIndex >= totalRow) {\n    lastVisitedRowIndex = totalRow - 1\n  }\n\n  if (lastVisitedRowIndex >= 0) {\n    const item = row[lastVisitedRowIndex]\n    sizeOfVisitedRows = item.offset + item.size\n  }\n\n  const unvisitedItems = totalRow - lastVisitedRowIndex - 1\n  const sizeOfUnvisitedItems = unvisitedItems * estimatedRowHeight\n\n  return sizeOfVisitedRows + sizeOfUnvisitedItems\n}\nconst getEstimatedTotalWidth = (\n  { totalColumn }: Props,\n  { column, estimatedColumnWidth, lastVisitedColumnIndex }: GridCache\n) => {\n  let sizeOfVisitedColumns = 0\n\n  if (lastVisitedColumnIndex > totalColumn) {\n    lastVisitedColumnIndex = totalColumn - 1\n  }\n\n  if (lastVisitedColumnIndex >= 0) {\n    const item = column[lastVisitedColumnIndex]\n    sizeOfVisitedColumns = item.offset + item.size\n  }\n\n  const unvisitedItems = totalColumn - lastVisitedColumnIndex - 1\n  const sizeOfUnvisitedItems = unvisitedItems * estimatedColumnWidth\n\n  return sizeOfVisitedColumns + sizeOfUnvisitedItems\n}\n\nconst ACCESS_ESTIMATED_SIZE_KEY_MAP = {\n  column: getEstimatedTotalWidth,\n  row: getEstimatedTotalHeight,\n}\n\nconst getOffset = (\n  props: Props,\n  index: number,\n  alignment: Alignment,\n  scrollOffset: number,\n  cache: GridCache,\n  type: CacheItemType,\n  scrollBarWidth: number\n) => {\n  const [size, estimatedSizeAssociates] = [\n    type === 'row' ? props.height : props.width,\n    ACCESS_ESTIMATED_SIZE_KEY_MAP[type],\n  ] as [number, (props: Props, cache: GridCache) => number]\n  const item = getItemFromCache(props, index, cache, type)\n\n  const estimatedSize = estimatedSizeAssociates(props, cache)\n\n  const maxOffset = max(0, min(estimatedSize - size, item.offset))\n  const minOffset = max(0, item.offset - size + scrollBarWidth + item.size)\n\n  if (alignment === SMART_ALIGNMENT) {\n    if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {\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 (minOffset > maxOffset) {\n        return minOffset\n      } else if (scrollOffset < minOffset) {\n        return minOffset\n      } else {\n        return maxOffset\n      }\n    }\n  }\n}\n\nconst FixedSizeGrid = createGrid({\n  name: 'PsDynamicSizeGrid',\n  getColumnPosition: (props, idx, cache) => {\n    const item = getItemFromCache(props, idx, cache, 'column')\n    return [item.size, item.offset]\n  },\n\n  getRowPosition: (props, idx, cache) => {\n    const item = getItemFromCache(props, idx, cache, 'row')\n    return [item.size, item.offset]\n  },\n\n  getColumnOffset: (\n    props,\n    columnIndex,\n    alignment,\n    scrollLeft,\n    cache,\n    scrollBarWidth\n  ) =>\n    getOffset(\n      props,\n      columnIndex,\n      alignment,\n      scrollLeft,\n      cache,\n      'column',\n      scrollBarWidth\n    ),\n\n  getRowOffset: (\n    props,\n    rowIndex,\n    alignment,\n    scrollTop,\n    cache,\n    scrollBarWidth: number\n  ) =>\n    getOffset(\n      props,\n      rowIndex,\n      alignment,\n      scrollTop,\n      cache,\n      'row',\n      scrollBarWidth\n    ),\n\n  getColumnStartIndexForOffset: (props, scrollLeft, cache) =>\n    findItem(props, cache, scrollLeft, 'column'),\n\n  getColumnStopIndexForStartIndex: (props, startIndex, scrollLeft, cache) => {\n    const item = getItemFromCache(props, startIndex, cache, 'column')\n\n    const maxOffset = scrollLeft + (props.width as number)\n\n    let offset = item.offset + item.size\n    let stopIndex = startIndex\n    while (stopIndex < props.totalColumn - 1 && offset < maxOffset) {\n      stopIndex++\n      offset += getItemFromCache(props, startIndex, cache, 'column').size\n    }\n    return stopIndex\n  },\n\n  getEstimatedTotalHeight,\n  getEstimatedTotalWidth,\n\n  getRowStartIndexForOffset: (props, scrollTop, cache) =>\n    findItem(props, cache, scrollTop, 'row'),\n\n  getRowStopIndexForStartIndex: (props, startIndex, scrollTop, cache) => {\n    const { totalRow, height } = props\n    const item = getItemFromCache(props, startIndex, cache, 'row')\n    const maxOffset = scrollTop + (height as number)\n\n    let offset = item.size + item.offset\n    let stopIndex = startIndex\n\n    while (stopIndex < totalRow - 1 && offset < maxOffset) {\n      stopIndex++\n      offset += getItemFromCache(props, stopIndex, cache, 'row').size\n    }\n\n    return stopIndex\n  },\n\n  initCache: ({\n    estimatedColumnWidth = DEFAULT_DYNAMIC_LIST_ITEM_SIZE,\n    estimatedRowHeight = DEFAULT_DYNAMIC_LIST_ITEM_SIZE,\n  }) => {\n    const cache = {\n      column: {},\n      estimatedColumnWidth,\n      estimatedRowHeight,\n      lastVisitedColumnIndex: -1,\n      lastVisitedRowIndex: -1,\n      row: {},\n    } as GridCache\n\n    // TODO: expose methods.\n    return cache\n  },\n\n  clearCache: true,\n\n  validateProps: ({ columnWidth, rowHeight }) => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (!isFunction(columnWidth)) {\n        throwError(\n          SCOPE,\n          `\n          \"columnWidth\" must be passed as function,\n            instead ${typeof columnWidth} was given.\n        `\n        )\n      }\n\n      if (!isFunction(rowHeight)) {\n        throwError(\n          SCOPE,\n          `\n          \"columnWidth\" must be passed as function,\n            instead ${typeof rowHeight} was given.\n        `\n        )\n      }\n    }\n  },\n})\n\nexport default FixedSizeGrid\n"],"names":[],"mappings":"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"}