vft 0.0.48 → 0.0.51

package/es/components/virtual-list/builders/build-list.d.ts

@@ -0,0 +1,167 @@
+import type { CSSProperties } from 'vue';
+import type { Alignment, ListConstructorProps } from '../types';
+import type { VirtualizedListProps } from '../props';
+declare const createList: ({ name, getOffset, getItemSize, getItemOffset, getEstimatedTotalSize, getStartIndexForOffset, getStopIndexForStartIndex, initCache, clearCache, validateProps }: ListConstructorProps<VirtualizedListProps>) => import("vue").DefineComponent<{
+    readonly className: import("vft/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    readonly containerElement: import("vft/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
+    readonly data: import("vft/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
+    readonly direction: import("vft/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
+    readonly height: {
+        readonly type: import("vue").PropType<import("vft/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly innerElement: import("vft/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
+    readonly style: {
+        readonly type: import("vue").PropType<import("vft/es/utils").EpPropMergeType<(new (...args: any[]) => string | CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly useIsScrolling: import("vft/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly width: {
+        readonly type: import("vue").PropType<import("vft/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly perfMode: import("vft/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly scrollbarAlwaysOn: import("vft/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly cache: import("vft/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
+    readonly estimatedItemSize: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly layout: import("vft/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
+    readonly initScrollOffset: import("vft/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
+    readonly total: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly itemSize: {
+        readonly type: import("vue").PropType<import("vft/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize) | ((new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize))[], never, never>>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}, {
+    ns: {
+        namespace: import("vue").Ref<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: {
+            (name: string, state: boolean | undefined): string;
+            (name: string): string;
+        };
+        cssVar: (object: Record<string, string | undefined>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string | undefined>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+    };
+    clientSize: import("vue").ComputedRef<string | number | undefined>;
+    estimatedTotalSize: import("vue").ComputedRef<number>;
+    windowStyle: import("vue").ComputedRef<(string | CSSProperties | import("vue").StyleValue[] | {
+        [x: string]: string;
+        position: string;
+        WebkitOverflowScrolling: string;
+        willChange: string;
+    } | undefined)[]>;
+    windowRef: import("vue").Ref<HTMLElement | undefined>;
+    innerRef: import("vue").Ref<HTMLElement | undefined>;
+    innerStyle: import("vue").ComputedRef<{
+        height: string;
+        pointerEvents: string | undefined;
+        width: string;
+    }>;
+    itemsToRender: import("vue").ComputedRef<number[]>;
+    scrollbarRef: import("vue").Ref<any>;
+    states: import("vue").Ref<{
+        isScrolling: boolean;
+        scrollDir: string;
+        scrollOffset: number;
+        updateRequested: boolean;
+        isScrollbarDragging: boolean;
+        scrollbarAlwaysOn: import("vft/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    }>;
+    getItemStyle: (idx: number) => CSSProperties;
+    onScroll: (e: Event) => void;
+    onScrollbarScroll: (distanceToGo: number, totalSteps: number) => void;
+    onWheel: (e: WheelEvent) => void;
+    scrollTo: (offset: number) => void;
+    scrollToItem: (idx: number, alignment?: Alignment) => void;
+    resetScrollTop: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly className: import("vft/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    readonly containerElement: import("vft/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
+    readonly data: import("vft/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
+    readonly direction: import("vft/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
+    readonly height: {
+        readonly type: import("vue").PropType<import("vft/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly innerElement: import("vft/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
+    readonly style: {
+        readonly type: import("vue").PropType<import("vft/es/utils").EpPropMergeType<(new (...args: any[]) => string | CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly useIsScrolling: import("vft/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly width: {
+        readonly type: import("vue").PropType<import("vft/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly perfMode: import("vft/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly scrollbarAlwaysOn: import("vft/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly cache: import("vft/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
+    readonly estimatedItemSize: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly layout: import("vft/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
+    readonly initScrollOffset: import("vft/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
+    readonly total: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly itemSize: {
+        readonly type: import("vue").PropType<import("vft/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize) | ((new (...args: any[]) => number | import("../types").ItemSize) | (() => number | import("../types").ItemSize))[], never, never>>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}>> & {
+    onScroll?: ((...args: any[]) => any) | undefined;
+    onItemRendered?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly data: any[];
+    readonly layout: import("vft/es/utils").EpPropMergeType<StringConstructor, "horizontal" | "vertical", never>;
+    readonly scrollbarAlwaysOn: import("vft/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly className: string;
+    readonly direction: import("vft/es/utils").EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
+    readonly containerElement: import("vft/es/utils").EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown>;
+    readonly innerElement: import("vft/es/utils").EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
+    readonly useIsScrolling: import("vft/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly perfMode: import("vft/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly cache: number;
+    readonly initScrollOffset: number;
+}>;
+export default createList;

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

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