vft 0.0.50 → 0.0.53

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
+};

package/es/components/virtual-list/components/scrollbar.js

@@ -0,0 +1,137 @@
+import { defineComponent as C, computed as a, ref as E, reactive as N, unref as d, watch as k, onBeforeUnmount as O, h as x, withModifiers as _ } from "vue";
+import "../../scrollbar/index.js";
+import "@vft/utils";
+import "lodash";
+import { cAF as F, rAF as G } from "../../../utils/vue/raf.js";
+import "../../../utils/ns-cover.js";
+import "@vueuse/core";
+import { useNamespace as L } from "../../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../../hooks/use-z-index/index.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import { HORIZONTAL as R, ScrollbarDirKey as H, SCROLLBAR_MIN_SIZE as V } from "../defaults.js";
+import { virtualizedScrollbarProps as Z } from "../props.js";
+import { renderThumbStyle as $ } from "../utils.js";
+import { BAR_MAP as K } from "../../scrollbar/util.js";
+const st = C({
+  name: "ElVirtualScrollBar",
+  props: Z,
+  emits: ["scroll", "start-move", "stop-move"],
+  setup(e, { emit: u }) {
+    const b = a(() => e.startGap + e.endGap), z = L("virtual-scrollbar"), I = L("scrollbar"), f = E(), l = E();
+    let S = null, h = null;
+    const n = N({
+      isDragging: !1,
+      traveled: 0
+    }), o = a(() => K[e.layout]), M = a(() => e.clientSize - d(b)), A = a(() => ({
+      position: "absolute",
+      width: `${R === e.layout ? M.value : e.scrollbarSize}px`,
+      height: `${R === e.layout ? e.scrollbarSize : M.value}px`,
+      [H[e.layout]]: "2px",
+      right: "2px",
+      bottom: "2px",
+      borderRadius: "4px"
+    })), g = a(() => {
+      const t = e.ratio, r = e.clientSize;
+      if (t >= 100)
+        return Number.POSITIVE_INFINITY;
+      if (t >= 50)
+        return t * r / 100;
+      const i = r / 3;
+      return Math.floor(
+        Math.min(
+          Math.max(t * r, V),
+          i
+        )
+      );
+    }), B = a(() => {
+      if (!Number.isFinite(g.value))
+        return {
+          display: "none"
+        };
+      const t = `${g.value}px`;
+      return $(
+        {
+          bar: o.value,
+          size: t,
+          move: n.traveled
+        },
+        e.layout
+      );
+    }), s = a(
+      () => Math.floor(e.clientSize - g.value - d(b))
+    ), T = () => {
+      window.addEventListener("mousemove", m), window.addEventListener("mouseup", c);
+      const t = d(l);
+      t && (h = document.onselectstart, document.onselectstart = () => !1, t.addEventListener("touchmove", m), t.addEventListener("touchend", c));
+    }, y = () => {
+      window.removeEventListener("mousemove", m), window.removeEventListener("mouseup", c), document.onselectstart = h, h = null;
+      const t = d(l);
+      t && (t.removeEventListener("touchmove", m), t.removeEventListener("touchend", c));
+    }, p = (t) => {
+      t.stopImmediatePropagation(), !(t.ctrlKey || [1, 2].includes(t.button)) && (n.isDragging = !0, n[o.value.axis] = t.currentTarget[o.value.offset] - (t[o.value.client] - t.currentTarget.getBoundingClientRect()[o.value.direction]), u("start-move"), T());
+    }, c = () => {
+      n.isDragging = !1, n[o.value.axis] = 0, u("stop-move"), y();
+    }, m = (t) => {
+      const { isDragging: r } = n;
+      if (!r || !l.value || !f.value)
+        return;
+      const i = n[o.value.axis];
+      if (!i)
+        return;
+      F(S);
+      const v = (f.value.getBoundingClientRect()[o.value.direction] - t[o.value.client]) * -1, P = l.value[o.value.offset] - i, w = v - P;
+      S = G(() => {
+        n.traveled = Math.max(
+          e.startGap,
+          Math.min(
+            w,
+            s.value
+            // 2 is the top value
+          )
+        ), u("scroll", w, s.value);
+      });
+    }, D = (t) => {
+      const r = Math.abs(
+        t.target.getBoundingClientRect()[o.value.direction] - t[o.value.client]
+      ), i = l.value[o.value.offset] / 2, v = r - i;
+      n.traveled = Math.max(0, Math.min(v, s.value)), u("scroll", v, s.value);
+    };
+    return k(
+      () => e.scrollFrom,
+      (t) => {
+        n.isDragging || (n.traveled = Math.ceil(t * s.value));
+      }
+    ), O(() => {
+      y();
+    }), () => x(
+      "div",
+      {
+        role: "presentation",
+        ref: f,
+        class: [
+          z.b(),
+          e.class,
+          (e.alwaysOn || n.isDragging) && "always-on"
+        ],
+        style: A.value,
+        onMousedown: _(D, ["stop", "prevent"]),
+        onTouchstartPrevent: p
+      },
+      x(
+        "div",
+        {
+          ref: l,
+          class: I.e("thumb"),
+          style: B.value,
+          onMousedown: p
+        },
+        []
+      )
+    );
+  }
+});
+export {
+  st as default
+};

package/es/hooks/index.d.ts

@@ -11,3 +11,6 @@ export * from './use-ordered-children';
 export * from './use-model-toggle';
 export * from './use-prop';
 export * from './use-size';
+export * from './use-draggable';
+export * from './use-lockscreen';
+export * from './use-same-target';

package/es/hooks/index.js

@@ -0,0 +1,48 @@
+import { _bem as r, defaultNamespace as t, namespaceContextKey as s, useGetDerivedNamespace as p, useNamespace as m } from "./use-namespace/index.js";
+import { useCursor as a } from "./use-cursor/index.js";
+import { usePopper as f } from "./use-popper/index.js";
+import { defaultInitialZIndex as l, useZIndex as I, zIndexContextKey as n } from "./use-z-index/index.js";
+import { FORWARD_REF_INJECTION_KEY as g, useForwardRef as C, useForwardRefDirective as c } from "./use-forward-ref/index.js";
+import { ID_INJECTION_KEY as N, useId as T, useIdInjection as _ } from "./use-id/index.js";
+import { usePopperContainer as K, usePopperContainerId as O } from "./use-popper-container/index.js";
+import { useDelayedToggle as b } from "./use-delayed-toggle/index.js";
+import { useTimeout as P } from "./use-timeout/index.js";
+import { useOrderedChildren as J } from "./use-ordered-children/index.js";
+import { createModelToggleComposable as S, useModelToggle as Y, useModelToggleEmits as Z } from "./use-model-toggle/index.js";
+import { useProp as w } from "./use-prop/index.js";
+import { SIZE_INJECTION_KEY as G, useGlobalSize as h } from "./use-size/index.js";
+import { useDraggable as k } from "./use-draggable/index.js";
+import { useLockscreen as L } from "./use-lockscreen/index.js";
+import { useSameTarget as q } from "./use-same-target/index.js";
+export {
+  g as FORWARD_REF_INJECTION_KEY,
+  N as ID_INJECTION_KEY,
+  G as SIZE_INJECTION_KEY,
+  r as _bem,
+  S as createModelToggleComposable,
+  l as defaultInitialZIndex,
+  t as defaultNamespace,
+  s as namespaceContextKey,
+  a as useCursor,
+  b as useDelayedToggle,
+  k as useDraggable,
+  C as useForwardRef,
+  c as useForwardRefDirective,
+  p as useGetDerivedNamespace,
+  h as useGlobalSize,
+  T as useId,
+  _ as useIdInjection,
+  L as useLockscreen,
+  Y as useModelToggle,
+  Z as useModelToggleEmits,
+  m as useNamespace,
+  J as useOrderedChildren,
+  f as usePopper,
+  K as usePopperContainer,
+  O as usePopperContainerId,
+  w as useProp,
+  q as useSameTarget,
+  P as useTimeout,
+  I as useZIndex,
+  n as zIndexContextKey
+};

package/es/hooks/use-draggable/index.d.ts

@@ -0,0 +1,2 @@
+import type { ComputedRef, Ref } from 'vue';
+export declare const useDraggable: (targetRef: Ref<HTMLElement | undefined>, dragRef: Ref<HTMLElement | undefined>, draggable: ComputedRef<boolean>) => void;

package/es/hooks/use-draggable/index.js

@@ -0,0 +1,42 @@
+import { onMounted as W, watchEffect as B, onBeforeUnmount as U } from "vue";
+import { addUnit as g } from "@vft/utils";
+const C = (t, e, p) => {
+  let c = {
+    offsetX: 0,
+    offsetY: 0
+  };
+  const m = (u) => {
+    const L = u.clientX, M = u.clientY, { offsetX: n, offsetY: s } = c, o = t.value.getBoundingClientRect(), a = o.left, l = o.top, w = o.width, X = o.height, Y = document.documentElement.clientWidth, x = document.documentElement.clientHeight, b = -a + n, D = -l + s, H = Y - a - w + n, T = x - l - X + s, d = (f) => {
+      const r = Math.min(
+        Math.max(n + f.clientX - L, b),
+        H
+      ), h = Math.min(
+        Math.max(s + f.clientY - M, D),
+        T
+      );
+      c = {
+        offsetX: r,
+        offsetY: h
+      }, t.value.style.transform = `translate(${g(
+        r
+      )}, ${g(h)})`;
+    }, v = () => {
+      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", v);
+    };
+    document.addEventListener("mousemove", d), document.addEventListener("mouseup", v);
+  }, E = () => {
+    e.value && t.value && e.value.addEventListener("mousedown", m);
+  }, i = () => {
+    e.value && t.value && e.value.removeEventListener("mousedown", m);
+  };
+  W(() => {
+    B(() => {
+      p.value ? E() : i();
+    });
+  }), U(() => {
+    i();
+  });
+};
+export {
+  C as useDraggable
+};

package/es/hooks/use-lockscreen/index.d.ts

@@ -0,0 +1,11 @@
+import type { Ref } from 'vue';
+import type { UseNamespaceReturn } from '../use-namespace';
+export type UseLockScreenOptions = {
+    ns?: UseNamespaceReturn;
+};
+/**
+ * Hook that monitoring the ref value to lock or unlock the screen.
+ * When the trigger became true, it assumes modal is now opened and vice versa.
+ * @param trigger {Ref<boolean>}
+ */
+export declare const useLockscreen: (trigger: Ref<boolean>, options?: UseLockScreenOptions) => void;

package/es/hooks/use-lockscreen/index.js

@@ -0,0 +1,36 @@
+import { isRef as a, watch as p, onScopeDispose as f } from "vue";
+import { computed as y } from "@vue/reactivity";
+import { isClient as h } from "@vueuse/core";
+import { hasClass as c, getStyle as b, addClass as v, removeClass as w } from "@vft/utils";
+import { throwError as C } from "../../utils/error.js";
+import "lodash";
+import "../../utils/ns-cover.js";
+import { getScrollBarWidth as H } from "../../utils/dom/scroll.js";
+import { useNamespace as S } from "../use-namespace/index.js";
+const D = (s, m = {}) => {
+  a(s) || C(
+    "[useLockscreen]",
+    "You need to pass a ref param to this function"
+  );
+  const d = m.ns || S("popup"), o = y(() => d.bm("parent", "hidden"));
+  if (!h || c(document.body, o.value))
+    return;
+  let t = 0, e = !1, r = "0";
+  const n = () => {
+    setTimeout(() => {
+      w(document == null ? void 0 : document.body, o.value), e && document && (document.body.style.width = r);
+    }, 200);
+  };
+  p(s, (i) => {
+    if (!i) {
+      n();
+      return;
+    }
+    e = !c(document.body, o.value), e && (r = document.body.style.width), t = H(d.namespace.value);
+    const l = document.documentElement.clientHeight < document.body.scrollHeight, u = b(document.body, "overflowY");
+    t > 0 && (l || u === "scroll") && e && (document.body.style.width = `calc(100% - ${t}px)`), v(document.body, o.value);
+  }), f(() => n());
+};
+export {
+  D as useLockscreen
+};

package/es/hooks/use-same-target/index.d.ts

@@ -0,0 +1,5 @@
+export declare const useSameTarget: (handleClick?: ((e: MouseEvent) => void) | undefined) => {
+    onClick: (e: MouseEvent) => void;
+    onMousedown: (e: MouseEvent) => void;
+    onMouseup: (e: MouseEvent) => void;
+};

package/es/hooks/use-same-target/index.js

@@ -0,0 +1,16 @@
+import { NOOP as n } from "@vue/shared";
+const g = (r) => {
+  if (!r)
+    return { onClick: n, onMousedown: n, onMouseup: n };
+  let e = !1, t = !1;
+  return { onClick: (o) => {
+    e && t && r(o), e = t = !1;
+  }, onMousedown: (o) => {
+    e = o.target === o.currentTarget;
+  }, onMouseup: (o) => {
+    t = o.target === o.currentTarget;
+  } };
+};
+export {
+  g as useSameTarget
+};