vft 0.0.376 → 0.0.378

package/es/components/virtual-list/builders/build-list.js

@@ -1,348 +1,427 @@
-import { defineComponent as ft, resolveDynamicComponent as j, h as M, Fragment as ut, getCurrentInstance as dt, ref as x, computed as d, unref as l, onMounted as mt, onUpdated as ht, onActivated as St, nextTick as $ } from "vue";
-import { useEventListener as wt } from "@vueuse/core";
-import { isString as p, isNumber as F, isClient as Ot, hasOwn as gt } from "@vft/utils";
+import { defineComponent, resolveDynamicComponent, h, Fragment, getCurrentInstance, ref, computed, unref, onMounted, onUpdated, onActivated, nextTick } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { isString, isNumber, isClient, hasOwn } from "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as vt } from "../../../hooks/use-namespace/index.js";
+import { useNamespace } from "../../../hooks/use-namespace/index.js";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../../hooks/use-z-index/index.js";
-import { useCache as yt } from "../hooks/use-cache.js";
-import Tt from "../hooks/use-wheel.js";
-import Rt from "../components/scrollbar.js";
-import { isHorizontal as Et, getRTLOffsetType as J, getScrollDir as P } from "../utils.js";
-import { virtualizedListProps as bt } from "../props.js";
-import { ITEM_RENDER_EVT as Q, SCROLL_EVT as X, HORIZONTAL as Lt, RTL as U, RTL_OFFSET_POS_ASC as Mt, RTL_OFFSET_NAG as Y, AUTO_ALIGNMENT as xt, BACKWARD as zt, FORWARD as _t, RTL_OFFSET_POS_DESC as It } from "../defaults.js";
-const Kt = ({
-  name: tt,
-  getOffset: et,
-  getItemSize: lt,
-  getItemOffset: ot,
-  getEstimatedTotalSize: st,
-  getStartIndexForOffset: nt,
-  getStopIndexForStartIndex: rt,
-  initCache: ct,
-  clearCache: N,
-  validateProps: it
-}) => ft({
-  name: tt ?? "ElVirtualList",
-  props: bt,
-  emits: [Q, X],
-  setup(e, { emit: z, expose: W }) {
-    it(e);
-    const T = dt(), H = vt("vl"), m = x(ct(e, T)), R = yt(), f = x(), _ = x(), I = x(), r = x({
-      isScrolling: !1,
-      scrollDir: "forward",
-      scrollOffset: F(e.initScrollOffset) ? e.initScrollOffset : 0,
-      updateRequested: !1,
-      isScrollbarDragging: !1,
-      scrollbarAlwaysOn: e.scrollbarAlwaysOn
-    }), E = d(() => {
-      const { total: t, cache: o } = e, { isScrolling: n, scrollDir: a, scrollOffset: s } = l(r);
-      if (t === 0)
-        return [0, 0, 0, 0];
-      const c = nt(
-        e,
-        s,
-        l(m)
-      ), i = rt(
-        e,
-        c,
-        s,
-        l(m)
-      ), v = !n || a === zt ? Math.max(1, o) : 1, y = !n || a === _t ? Math.max(1, o) : 1;
-      return [
-        Math.max(0, c - v),
-        Math.max(0, Math.min(t - 1, i + y)),
-        c,
-        i
-      ];
-    }), h = d(
-      () => st(e, l(m))
-    ), S = d(() => Et(e.layout)), O = d(() => [
-      {
-        position: "relative",
-        [`overflow-${S.value ? "x" : "y"}`]: "scroll",
-        WebkitOverflowScrolling: "touch",
-        willChange: "transform"
-      },
-      {
-        direction: e.direction,
-        height: F(e.height) ? `${e.height}px` : e.height,
-        width: F(e.width) ? `${e.width}px` : e.width
-      },
-      e.style
-    ]), q = d(() => {
-      const t = l(h), o = l(S);
-      return {
-        height: o ? "100%" : `${t}px`,
-        pointerEvents: l(r).isScrolling ? "none" : void 0,
-        width: o ? `${t}px` : "100%"
+import { useCache } from "../hooks/use-cache.js";
+import useWheel from "../hooks/use-wheel.js";
+import ScrollBar from "../components/scrollbar.js";
+import { isHorizontal, getRTLOffsetType, getScrollDir } from "../utils.js";
+import { virtualizedListProps } from "../props.js";
+import { ITEM_RENDER_EVT, SCROLL_EVT, HORIZONTAL, RTL, RTL_OFFSET_POS_ASC, RTL_OFFSET_NAG, AUTO_ALIGNMENT, BACKWARD, FORWARD, RTL_OFFSET_POS_DESC } from "../defaults.js";
+const createList = ({
+  name,
+  getOffset,
+  getItemSize,
+  getItemOffset,
+  getEstimatedTotalSize,
+  getStartIndexForOffset,
+  getStopIndexForStartIndex,
+  initCache,
+  clearCache,
+  validateProps
+}) => {
+  return defineComponent({
+    name: name ?? "ElVirtualList",
+    props: virtualizedListProps,
+    emits: [ITEM_RENDER_EVT, SCROLL_EVT],
+    setup(props, { emit, expose }) {
+      validateProps(props);
+      const instance = getCurrentInstance();
+      const ns = useNamespace("vl");
+      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-${_isHorizontal.value ? "x" : "y"}`]: "scroll",
+          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) => {
+          scrollbarRef.value.onMouseUp?.();
+          scrollTo(
+            Math.min(
+              states.value.scrollOffset + offset,
+              estimatedTotalSize.value - clientSize.value
+            )
+          );
+        }
+      );
+      useEventListener(windowRef, "wheel", onWheel, {
+        passive: false
+      });
+      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);
       };
-    }), g = d(
-      () => S.value ? e.width : e.height
-    ), { onWheel: b } = Tt(
-      {
-        atStartEdge: d(() => r.value.scrollOffset <= 0),
-        atEndEdge: d(
-          () => r.value.scrollOffset >= h.value
-        ),
-        layout: d(() => e.layout)
-      },
-      (t) => {
-        I.value.onMouseUp?.(), w(
+      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(
-            r.value.scrollOffset + t,
-            h.value - g.value
+            estimatedTotalSize.value - clientSize.value,
+            offset
           )
         );
-      }
-    );
-    wt(f, "wheel", b, {
-      passive: !1
-    });
-    const A = () => {
-      const { total: t } = e;
-      if (t > 0) {
-        const [s, c, i, v] = l(E);
-        z(Q, s, c, i, v);
-      }
-      const { scrollDir: o, scrollOffset: n, updateRequested: a } = l(r);
-      z(X, o, n, a);
-    }, V = (t) => {
-      const { clientHeight: o, scrollHeight: n, scrollTop: a } = t.currentTarget, s = l(r);
-      if (s.scrollOffset === a)
-        return;
-      const c = Math.max(
-        0,
-        Math.min(a, n - o)
-      );
-      r.value = {
-        ...s,
-        isScrolling: !0,
-        scrollDir: P(s.scrollOffset, c),
-        scrollOffset: c,
-        updateRequested: !1
-      }, $(u);
-    }, C = (t) => {
-      const { clientWidth: o, scrollLeft: n, scrollWidth: a } = t.currentTarget, s = l(r);
-      if (s.scrollOffset === n)
-        return;
-      const { direction: c } = e;
-      let i = n;
-      if (c === U)
-        switch (J()) {
-          case Y: {
-            i = -n;
-            break;
-          }
-          case It: {
-            i = a - o - n;
-            break;
-          }
+      };
+      const scrollTo = (offset) => {
+        offset = Math.max(offset, 0);
+        if (offset === unref(states).scrollOffset) {
+          return;
         }
-      i = Math.max(
-        0,
-        Math.min(i, a - o)
-      ), r.value = {
-        ...s,
-        isScrolling: !0,
-        scrollDir: P(s.scrollOffset, i),
-        scrollOffset: i,
-        updateRequested: !1
-      }, $(u);
-    }, D = (t) => {
-      l(S) ? C(t) : V(t), A();
-    }, L = (t, o) => {
-      const n = (h.value - g.value) / o * t;
-      w(
-        Math.min(
-          h.value - g.value,
-          n
-        )
-      );
-    }, w = (t) => {
-      t = Math.max(t, 0), t !== l(r).scrollOffset && (r.value = {
-        ...l(r),
-        scrollOffset: t,
-        scrollDir: P(l(r).scrollOffset, t),
-        updateRequested: !0
-      }, $(u));
-    }, k = (t, o = xt) => {
-      const { scrollOffset: n } = l(r);
-      t = Math.max(0, Math.min(t, e.total - 1)), w(
-        et(
-          e,
-          t,
-          o,
-          n,
-          l(m)
-        )
-      );
-    }, B = (t) => {
-      const { direction: o, itemSize: n, layout: a } = e, s = R.value(
-        N && n,
-        N && a,
-        N && o
-      );
-      let c;
-      if (gt(s, String(t)))
-        c = s[t];
-      else {
-        const i = ot(e, t, l(m)), v = lt(e, t, l(m)), y = l(S), K = o === U, Z = y ? i : 0;
-        s[t] = c = {
-          position: "absolute",
-          left: K ? void 0 : `${Z}px`,
-          right: K ? `${Z}px` : void 0,
-          top: y ? 0 : `${i}px`,
-          height: y ? "100%" : `${v}px`,
-          width: y ? `${v}px` : "100%"
+        states.value = {
+          ...unref(states),
+          scrollOffset: offset,
+          scrollDir: getScrollDir(unref(states).scrollOffset, offset),
+          updateRequested: true
         };
-      }
-      return c;
-    }, u = () => {
-      r.value.isScrolling = !1, $(() => {
-        R.value(-1, null, null);
+        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 (!isClient) return;
+        const { initScrollOffset } = props;
+        const windowElement = unref(windowRef);
+        if (isNumber(initScrollOffset) && windowElement) {
+          if (unref(_isHorizontal)) {
+            windowElement.scrollLeft = initScrollOffset;
+          } else {
+            windowElement.scrollTop = initScrollOffset;
+          }
+        }
+        emitEvents();
       });
-    }, G = () => {
-      const t = f.value;
-      t && (t.scrollTop = 0);
-    };
-    mt(() => {
-      if (!Ot) return;
-      const { initScrollOffset: t } = e, o = l(f);
-      F(t) && o && (l(S) ? o.scrollLeft = t : o.scrollTop = t), A();
-    }), ht(() => {
-      const { direction: t, layout: o } = e, { scrollOffset: n, updateRequested: a } = l(r), s = l(f);
-      if (a && s)
-        if (o === Lt)
-          if (t === U)
-            switch (J()) {
-              case Y: {
-                s.scrollLeft = -n;
-                break;
-              }
-              case Mt: {
-                s.scrollLeft = n;
-                break;
-              }
-              default: {
-                const { clientWidth: c, scrollWidth: i } = s;
-                s.scrollLeft = i - c - n;
-                break;
+      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 RTL_OFFSET_NAG: {
+                  windowElement.scrollLeft = -scrollOffset;
+                  break;
+                }
+                case RTL_OFFSET_POS_ASC: {
+                  windowElement.scrollLeft = scrollOffset;
+                  break;
+                }
+                default: {
+                  const { clientWidth, scrollWidth } = windowElement;
+                  windowElement.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                  break;
+                }
               }
+            } else {
+              windowElement.scrollLeft = scrollOffset;
             }
-          else
-            s.scrollLeft = n;
-        else
-          s.scrollTop = n;
-    }), St(() => {
-      l(f).scrollTop = l(r).scrollOffset;
-    });
-    const at = {
-      ns: H,
-      clientSize: g,
-      estimatedTotalSize: h,
-      windowStyle: O,
-      windowRef: f,
-      innerRef: _,
-      innerStyle: q,
-      itemsToRender: E,
-      scrollbarRef: I,
-      states: r,
-      getItemStyle: B,
-      onScroll: D,
-      onScrollbarScroll: L,
-      onWheel: b,
-      scrollTo: w,
-      scrollToItem: k,
-      resetScrollTop: G
-    };
-    return W({
-      windowRef: f,
-      innerRef: _,
-      getItemStyleCache: R,
-      scrollTo: w,
-      scrollToItem: k,
-      resetScrollTop: G,
-      states: r
-    }), at;
-  },
-  render(e) {
-    const {
-      $slots: z,
-      className: W,
-      clientSize: T,
-      containerElement: H,
-      data: m,
-      getItemStyle: R,
-      innerElement: f,
-      itemsToRender: _,
-      innerStyle: I,
-      layout: r,
-      total: E,
-      onScroll: h,
-      onScrollbarScroll: S,
-      states: O,
-      useIsScrolling: q,
-      windowStyle: g,
-      ns: b
-    } = e, [A, V] = _, C = j(H), D = j(f), L = [];
-    if (E > 0)
-      for (let u = A; u <= V; u++)
-        L.push(
-          M(
-            ut,
-            { key: u },
-            z.default?.({
-              data: m,
-              index: u,
-              isScrolling: q ? O.isScrolling : void 0,
-              style: R(u)
-            })
-          )
-        );
-    const w = [
-      M(
-        D,
+          } else {
+            windowElement.scrollTop = scrollOffset;
+          }
+        }
+      });
+      onActivated(() => {
+        unref(windowRef).scrollTop = unref(states).scrollOffset;
+      });
+      const api = {
+        ns,
+        clientSize,
+        estimatedTotalSize,
+        windowStyle,
+        windowRef,
+        innerRef,
+        innerStyle,
+        itemsToRender,
+        scrollbarRef,
+        states,
+        getItemStyle,
+        onScroll,
+        onScrollbarScroll,
+        onWheel,
+        scrollTo,
+        scrollToItem,
+        resetScrollTop
+      };
+      expose({
+        windowRef,
+        innerRef,
+        getItemStyleCache,
+        scrollTo,
+        scrollToItem,
+        resetScrollTop,
+        states
+      });
+      return api;
+    },
+    render(ctx) {
+      const {
+        $slots,
+        className,
+        clientSize,
+        containerElement,
+        data,
+        getItemStyle,
+        innerElement,
+        itemsToRender,
+        innerStyle,
+        layout,
+        total,
+        onScroll,
+        onScrollbarScroll,
+        states,
+        useIsScrolling,
+        windowStyle,
+        ns
+      } = ctx;
+      const [start, end] = itemsToRender;
+      const Container = resolveDynamicComponent(containerElement);
+      const Inner = resolveDynamicComponent(innerElement);
+      const children = [];
+      if (total > 0) {
+        for (let i = start; i <= end; i++) {
+          children.push(
+            h(
+              Fragment,
+              { key: i },
+              $slots.default?.({
+                data,
+                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,
+        alwaysOn: states.scrollbarAlwaysOn
+      });
+      const listContainer = h(
+        Container,
         {
-          style: I,
-          ref: "innerRef"
+          class: [ns.e("window"), className],
+          style: windowStyle,
+          onScroll,
+          ref: "windowRef",
+          key: 0
         },
-        p(D) ? L : {
-          default: () => L
-        }
-      )
-    ], k = M(Rt, {
-      ref: "scrollbarRef",
-      clientSize: T,
-      layout: r,
-      onScroll: S,
-      ratio: T * 100 / this.estimatedTotalSize,
-      scrollFrom: O.scrollOffset / (this.estimatedTotalSize - T),
-      total: E,
-      alwaysOn: O.scrollbarAlwaysOn
-    }), B = M(
-      C,
-      {
-        class: [b.e("window"), W],
-        style: g,
-        onScroll: h,
-        ref: "windowRef",
-        key: 0
-      },
-      p(C) ? [w] : { default: () => [w] }
-    );
-    return M(
-      "div",
-      {
-        key: 0,
-        class: [b.e("wrapper"), O.scrollbarAlwaysOn ? "always-on" : ""]
-      },
-      [B, k]
-    );
-  }
-});
+        !isString(Container) ? { default: () => [InnerNode] } : [InnerNode]
+      );
+      return h(
+        "div",
+        {
+          key: 0,
+          class: [ns.e("wrapper"), states.scrollbarAlwaysOn ? "always-on" : ""]
+        },
+        [listContainer, scrollbar]
+      );
+    }
+  });
+};
 export {
-  Kt as default
+  createList as default
 };