vft 0.0.375 → 0.0.376

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

@@ -1,427 +1,348 @@
-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 { 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 "../../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace } from "../../../hooks/use-namespace/index.js";
+import { useNamespace as vt } 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 } 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);
-      };
-      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();
+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%"
       };
-      const onScrollbarScroll = (distanceToGo, totalSteps) => {
-        const offset = (estimatedTotalSize.value - clientSize.value) / totalSteps * distanceToGo;
-        scrollTo(
+    }), 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(
           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)
+            r.value.scrollOffset + t,
+            h.value - g.value
           )
         );
-      };
-      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;
+      }
+    );
+    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;
           }
-        }
-        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 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 {
-            windowElement.scrollTop = scrollOffset;
+          case It: {
+            i = a - o - n;
+            break;
           }
         }
-      });
-      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
+      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
         )
-      ];
-      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,
-        {
-          class: [ns.e("window"), className],
-          style: windowStyle,
-          onScroll,
-          ref: "windowRef",
-          key: 0
-        },
-        !isString(Container) ? { default: () => [InnerNode] } : [InnerNode]
       );
-      return h(
-        "div",
+    }, 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%"
+        };
+      }
+      return c;
+    }, u = () => {
+      r.value.isScrolling = !1, $(() => {
+        R.value(-1, null, null);
+      });
+    }, 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;
+              }
+            }
+          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,
         {
-          key: 0,
-          class: [ns.e("wrapper"), states.scrollbarAlwaysOn ? "always-on" : ""]
+          style: I,
+          ref: "innerRef"
         },
-        [listContainer, scrollbar]
-      );
-    }
-  });
-};
+        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]
+    );
+  }
+});
 export {
-  createList as default
+  Kt as default
 };