@indielayer/ui 1.8.4 → 1.9.1

package/src/composables/useVirtualList.ts

@@ -0,0 +1,286 @@
+/**
+ * @file useVirtualList composable adapted from https://github.com/vueuse/vueuse/blob/main/packages/core/useVirtualList/index.ts
+ */
+import { computed, ref, shallowRef, unref, watch } from 'vue'
+import type { Ref, ShallowRef, StyleValue } from 'vue'
+import type { MaybeRef } from '@vueuse/shared'
+import { useElementSize } from '@vueuse/core'
+
+type UseVirtualListItemSize = number | ((index: number) => number)
+
+export type UseVirtualListOptions = {
+  /**
+   * item height, accept a pixel value or a function that returns the height
+   *
+   * @default 0
+   */
+  disabled?: boolean;
+  itemHeight: UseVirtualListItemSize;
+  topOffset: number;
+  bottomOffset: number;
+  /**
+   * the extra buffer items outside of the view area
+   *
+   * @default 5
+   */
+  overscan?: number;
+}
+
+export interface UseVirtualListItem<T> {
+  data: T;
+  index: number;
+}
+
+export interface UseVirtualListReturn<T> {
+  list: Ref<UseVirtualListItem<T>[]>;
+  scrollTo: (index: number) => void;
+  reset: () => void;
+
+  containerProps: {
+    ref: Ref<HTMLElement | null>;
+    style: StyleValue;
+    onScroll: () => void;
+  };
+  wrapperProps: MaybeRef<{
+    style?: {
+      width: string;
+      height: string;
+      marginTop: string;
+    } | {
+      width: string;
+      height: string;
+      marginLeft: string;
+      display: string;
+    };
+  }>;
+}
+
+export function useVirtualList<T = any>(list: MaybeRef<T[]>, options: UseVirtualListOptions): UseVirtualListReturn<T> {
+  if (options.disabled) {
+    return {
+      list: computed(() => unref(list).map((data, index) => ({ data, index }))),
+      scrollTo: () => {},
+      reset: () => {},
+      containerProps: {
+        ref: ref(null),
+        style: {},
+        onScroll: () => {},
+      },
+      wrapperProps: {},
+    }
+  }
+
+  const { containerStyle, wrapperProps, scrollTo, calculateRange, currentList, containerRef } = useVerticalVirtualList(options, list)
+
+  return {
+    list: currentList,
+    scrollTo,
+    reset: calculateRange,
+    containerProps: {
+      ref: containerRef,
+      onScroll: () => {
+        calculateRange()
+      },
+      style: containerStyle,
+    },
+    wrapperProps,
+  }
+}
+
+type UseVirtualListContainerRef = Ref<HTMLElement | null>
+
+interface UseVirtualElementSizes {
+  width: Ref<number>;
+  height: Ref<number>;
+}
+
+type UseVirtualListArray<T> = UseVirtualListItem<T>[]
+type UseVirtualListRefArray<T> = Ref<UseVirtualListArray<T>>
+
+type UseVirtualListSource<T> = Ref<T[]> | ShallowRef<T[]>
+
+interface UseVirtualListState { start: number; end: number; }
+
+type RefState = Ref<UseVirtualListState>
+
+interface UseVirtualListResources<T> {
+  state: RefState;
+  source: UseVirtualListSource<T>;
+  currentList: UseVirtualListRefArray<T>;
+  size: UseVirtualElementSizes;
+  containerRef: UseVirtualListContainerRef;
+}
+
+function useVirtualListResources<T>(list: MaybeRef<T[]>): UseVirtualListResources<T> {
+  const containerRef = ref<HTMLElement | null>(null)
+  const size = useElementSize(containerRef)
+
+  const currentList: Ref<UseVirtualListItem<T>[]> = ref([])
+  const source = shallowRef(list)
+
+  const state: Ref<{ start: number; end: number; }> = ref({ start: 0, end: 10 })
+
+  return { state, source, currentList, size, containerRef }
+}
+
+function createGetViewCapacity<T>(state: UseVirtualListResources<T>['state'], source: UseVirtualListResources<T>['source'], itemSize: UseVirtualListItemSize) {
+  return (containerSize: number) => {
+    if (typeof itemSize === 'number')
+      return Math.ceil(containerSize / itemSize)
+
+    const { start = 0 } = state.value
+    let sum = 0
+    let capacity = 0
+
+    for (let i = start; i < source.value.length; i++) {
+      const size = itemSize(i)
+
+      sum += size
+      capacity = i
+      if (sum > containerSize)
+        break
+    }
+
+    return capacity - start
+  }
+}
+
+function createGetOffset<T>(source: UseVirtualListResources<T>['source'], itemSize: UseVirtualListItemSize) {
+  return (scrollDirection: number) => {
+    if (typeof itemSize === 'number')
+      return Math.floor(scrollDirection / itemSize) + 1
+
+    let sum = 0
+    let offset = 0
+
+    for (let i = 0; i < source.value.length; i++) {
+      const size = itemSize(i)
+
+      sum += size
+      if (sum >= scrollDirection) {
+        offset = i
+        break
+      }
+    }
+
+    return offset + 1
+  }
+}
+
+function createCalculateRange<T>(type: 'horizontal' | 'vertical', overscan: number, getOffset: ReturnType<typeof createGetOffset>, getViewCapacity: ReturnType<typeof createGetViewCapacity>, { containerRef, state, currentList, source }: UseVirtualListResources<T>) {
+  return () => {
+    const element = containerRef.value
+
+    if (element) {
+      const offset = getOffset(type === 'vertical' ? element.scrollTop : element.scrollLeft)
+      const viewCapacity = getViewCapacity(type === 'vertical' ? element.clientHeight : element.clientWidth)
+
+      const from = offset - overscan
+      const to = offset + viewCapacity + overscan
+
+      state.value = {
+        start: from < 0 ? 0 : from,
+        end: to > source.value.length
+          ? source.value.length
+          : to,
+      }
+      currentList.value = source.value
+        .slice(state.value.start, state.value.end)
+        .map((ele, index) => ({
+          data: ele,
+          index: index + state.value.start,
+        }))
+    }
+  }
+}
+
+function createGetDistance<T>(itemSize: UseVirtualListItemSize, source: UseVirtualListResources<T>['source']) {
+  return (index: number) => {
+    if (typeof itemSize === 'number') {
+      const size = index * itemSize
+
+      return size
+    }
+
+    const size = source.value
+      .slice(0, index)
+      .reduce((sum, _, i) => sum + itemSize(i), 0)
+
+    return size
+  }
+}
+
+function useWatchForSizes<T>(size: UseVirtualElementSizes, list: MaybeRef<T[]>, containerRef: Ref<HTMLElement | null>, calculateRange: () => void, scrollTo: (index: number) => void) {
+  watch([size.width, size.height, list, containerRef], () => {
+    calculateRange()
+    scrollTo(0)
+  })
+}
+
+function createComputedTotalSize<T>(itemSize: UseVirtualListItemSize, source: UseVirtualListResources<T>['source']) {
+  return computed(() => {
+    if (typeof itemSize === 'number')
+      return source.value.length * itemSize
+
+    return source.value.reduce((sum, _, index) => sum + itemSize(index), 0)
+  })
+}
+
+const scrollToDictionaryForElementScrollKey = {
+  horizontal: 'scrollLeft',
+  vertical: 'scrollTop',
+} as const
+
+function createScrollTo<T>(type: 'horizontal' | 'vertical', calculateRange: () => void, getDistance: ReturnType<typeof createGetDistance>, containerRef: UseVirtualListResources<T>['containerRef']) {
+  return (index: number) => {
+    if (containerRef.value) {
+      containerRef.value[scrollToDictionaryForElementScrollKey[type]] = getDistance(index)
+      calculateRange()
+    }
+  }
+}
+
+function useVerticalVirtualList<T>(options: UseVirtualListOptions, list: MaybeRef<T[]>) {
+  const resources = useVirtualListResources(list)
+
+  const { state, source, currentList, size, containerRef } = resources
+
+  const containerStyle: StyleValue = { overflowY: 'auto' }
+
+  const { itemHeight, topOffset = 0, bottomOffset = 0, overscan = 5 } = options
+
+  const getViewCapacity = createGetViewCapacity(state, source, itemHeight)
+
+  const getOffset = createGetOffset(source, itemHeight)
+
+  const calculateRange = createCalculateRange('vertical', overscan, getOffset, getViewCapacity, resources)
+
+  const getDistanceTop = createGetDistance(itemHeight, source)
+
+  const offsetTop = computed(() => getDistanceTop(state.value.start))
+
+  const totalHeight = createComputedTotalSize(itemHeight, source)
+
+  const scrollTo = createScrollTo('vertical', calculateRange, getDistanceTop, containerRef)
+
+  useWatchForSizes(size, list, containerRef, calculateRange, scrollTo)
+
+  const wrapperProps = computed(() => {
+    return {
+      style: {
+        width: '100%',
+        height: `${totalHeight.value - offsetTop.value + topOffset + bottomOffset}px`,
+        marginTop: `${offsetTop.value}px`,
+      },
+    }
+  })
+
+  return {
+    calculateRange,
+    scrollTo,
+    containerStyle,
+    wrapperProps,
+    currentList,
+    containerRef,
+  }
+}

package/src/version.ts

@@ -1 +1 @@
-export default '1.8.4'
+export default '1.9.1'

package/lib/node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9_typescript@5.2.2_/node_modules/@vueuse/core/index.js

@@ -1,379 +0,0 @@
-import { noop as j, toValue as L, tryOnScopeDispose as k, isIOS as G, useThrottleFn as Q, isClient as N, increaseWithUnit as U, toRef as J, useDebounceFn as K } from "../../../../@vueuse_shared@10.2.0_vue@3.3.9_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
-import { createFilterWrapper as Oe, debounceFilter as ge, throttleFilter as Se } from "../../../../@vueuse_shared@10.2.0_vue@3.3.9_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
-import { watch as F, computed as g, ref as T, reactive as D, watchEffect as Z, getCurrentInstance as ee, onMounted as te } from "vue";
-function _(e) {
-  var o;
-  const r = L(e);
-  return (o = r == null ? void 0 : r.$el) != null ? o : r;
-}
-const P = N ? window : void 0;
-function S(...e) {
-  let o, r, n, s;
-  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([r, n, s] = e, o = P) : [o, r, n, s] = e, !o)
-    return j;
-  Array.isArray(r) || (r = [r]), Array.isArray(n) || (n = [n]);
-  const v = [], u = () => {
-    v.forEach((p) => p()), v.length = 0;
-  }, t = (p, m, l, a) => (p.addEventListener(m, l, a), () => p.removeEventListener(m, l, a)), i = F(
-    () => [_(o), L(s)],
-    ([p, m]) => {
-      u(), p && v.push(
-        ...r.flatMap((l) => n.map((a) => t(p, l, a, m)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), d = () => {
-    i(), u();
-  };
-  return k(d), d;
-}
-let X = !1;
-function de(e, o, r = {}) {
-  const { window: n = P, ignore: s = [], capture: v = !0, detectIframe: u = !1 } = r;
-  if (!n)
-    return;
-  G && !X && (X = !0, Array.from(n.document.body.children).forEach((l) => l.addEventListener("click", j)));
-  let t = !0;
-  const i = (l) => s.some((a) => {
-    if (typeof a == "string")
-      return Array.from(n.document.querySelectorAll(a)).some((h) => h === l.target || l.composedPath().includes(h));
-    {
-      const h = _(a);
-      return h && (l.target === h || l.composedPath().includes(h));
-    }
-  }), p = [
-    S(n, "click", (l) => {
-      const a = _(e);
-      if (!(!a || a === l.target || l.composedPath().includes(a))) {
-        if (l.detail === 0 && (t = !i(l)), !t) {
-          t = !0;
-          return;
-        }
-        o(l);
-      }
-    }, { passive: !0, capture: v }),
-    S(n, "pointerdown", (l) => {
-      const a = _(e);
-      a && (t = !l.composedPath().includes(a) && !i(l));
-    }, { passive: !0 }),
-    u && S(n, "blur", (l) => {
-      setTimeout(() => {
-        var a;
-        const h = _(e);
-        ((a = n.document.activeElement) == null ? void 0 : a.tagName) === "IFRAME" && !(h != null && h.contains(n.document.activeElement)) && o(l);
-      }, 0);
-    })
-  ].filter(Boolean);
-  return () => p.forEach((l) => l());
-}
-function ne() {
-  const e = T(!1);
-  return ee() && te(() => {
-    e.value = !0;
-  }), e;
-}
-function q(e) {
-  const o = ne();
-  return g(() => (o.value, !!e()));
-}
-function W(e, o = {}) {
-  const { window: r = P } = o, n = q(() => r && "matchMedia" in r && typeof r.matchMedia == "function");
-  let s;
-  const v = T(!1), u = () => {
-    s && ("removeEventListener" in s ? s.removeEventListener("change", t) : s.removeListener(t));
-  }, t = () => {
-    n.value && (u(), s = r.matchMedia(J(e).value), v.value = !!(s != null && s.matches), s && ("addEventListener" in s ? s.addEventListener("change", t) : s.addListener(t)));
-  };
-  return Z(t), k(() => u()), v;
-}
-const pe = {
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-  "2xl": 1536
-};
-function ve(e, o = {}) {
-  function r(t, i) {
-    let d = e[t];
-    return i != null && (d = U(d, i)), typeof d == "number" && (d = `${d}px`), d;
-  }
-  const { window: n = P } = o;
-  function s(t) {
-    return n ? n.matchMedia(t).matches : !1;
-  }
-  const v = (t) => W(`(min-width: ${r(t)})`, o), u = Object.keys(e).reduce((t, i) => (Object.defineProperty(t, i, {
-    get: () => v(i),
-    enumerable: !0,
-    configurable: !0
-  }), t), {});
-  return Object.assign(u, {
-    greater(t) {
-      return W(`(min-width: ${r(t, 0.1)})`, o);
-    },
-    greaterOrEqual: v,
-    smaller(t) {
-      return W(`(max-width: ${r(t, -0.1)})`, o);
-    },
-    smallerOrEqual(t) {
-      return W(`(max-width: ${r(t)})`, o);
-    },
-    between(t, i) {
-      return W(`(min-width: ${r(t)}) and (max-width: ${r(i, -0.1)})`, o);
-    },
-    isGreater(t) {
-      return s(`(min-width: ${r(t, 0.1)})`);
-    },
-    isGreaterOrEqual(t) {
-      return s(`(min-width: ${r(t)})`);
-    },
-    isSmaller(t) {
-      return s(`(max-width: ${r(t, -0.1)})`);
-    },
-    isSmallerOrEqual(t) {
-      return s(`(max-width: ${r(t)})`);
-    },
-    isInBetween(t, i) {
-      return s(`(min-width: ${r(t)}) and (max-width: ${r(i, -0.1)})`);
-    },
-    current() {
-      const t = Object.keys(e).map((i) => [i, v(i)]);
-      return g(() => t.filter(([, i]) => i.value).map(([i]) => i));
-    }
-  });
-}
-var Y = Object.getOwnPropertySymbols, re = Object.prototype.hasOwnProperty, oe = Object.prototype.propertyIsEnumerable, se = (e, o) => {
-  var r = {};
-  for (var n in e)
-    re.call(e, n) && o.indexOf(n) < 0 && (r[n] = e[n]);
-  if (e != null && Y)
-    for (var n of Y(e))
-      o.indexOf(n) < 0 && oe.call(e, n) && (r[n] = e[n]);
-  return r;
-};
-function me(e, o, r = {}) {
-  const n = r, { window: s = P } = n, v = se(n, ["window"]);
-  let u;
-  const t = q(() => s && "MutationObserver" in s), i = () => {
-    u && (u.disconnect(), u = void 0);
-  }, d = F(
-    () => _(e),
-    (m) => {
-      i(), t.value && s && m && (u = new MutationObserver(o), u.observe(m, v));
-    },
-    { immediate: !0 }
-  ), p = () => {
-    i(), d();
-  };
-  return k(p), {
-    isSupported: t,
-    stop: p
-  };
-}
-var z = Object.getOwnPropertySymbols, ie = Object.prototype.hasOwnProperty, le = Object.prototype.propertyIsEnumerable, ae = (e, o) => {
-  var r = {};
-  for (var n in e)
-    ie.call(e, n) && o.indexOf(n) < 0 && (r[n] = e[n]);
-  if (e != null && z)
-    for (var n of z(e))
-      o.indexOf(n) < 0 && le.call(e, n) && (r[n] = e[n]);
-  return r;
-};
-function he(e, o, r = {}) {
-  const n = r, { window: s = P } = n, v = ae(n, ["window"]);
-  let u;
-  const t = q(() => s && "ResizeObserver" in s), i = () => {
-    u && (u.disconnect(), u = void 0);
-  }, d = g(
-    () => Array.isArray(e) ? e.map((l) => _(l)) : [_(e)]
-  ), p = F(
-    d,
-    (l) => {
-      if (i(), t.value && s) {
-        u = new ResizeObserver(o);
-        for (const a of l)
-          a && u.observe(a, v);
-      }
-    },
-    { immediate: !0, flush: "post", deep: !0 }
-  ), m = () => {
-    i(), p();
-  };
-  return k(m), {
-    isSupported: t,
-    stop: m
-  };
-}
-const V = 1;
-function be(e, o = {}) {
-  const {
-    throttle: r = 0,
-    idle: n = 200,
-    onStop: s = j,
-    onScroll: v = j,
-    offset: u = {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0
-    },
-    eventListenerOptions: t = {
-      capture: !1,
-      passive: !0
-    },
-    behavior: i = "auto"
-  } = o, d = T(0), p = T(0), m = g({
-    get() {
-      return d.value;
-    },
-    set(f) {
-      a(f, void 0);
-    }
-  }), l = g({
-    get() {
-      return p.value;
-    },
-    set(f) {
-      a(void 0, f);
-    }
-  });
-  function a(f, y) {
-    var x, A, c;
-    const w = L(e);
-    w && ((c = w instanceof Document ? document.body : w) == null || c.scrollTo({
-      top: (x = L(y)) != null ? x : l.value,
-      left: (A = L(f)) != null ? A : m.value,
-      behavior: L(i)
-    }));
-  }
-  const h = T(!1), b = D({
-    left: !0,
-    right: !1,
-    top: !0,
-    bottom: !1
-  }), E = D({
-    left: !1,
-    right: !1,
-    top: !1,
-    bottom: !1
-  }), I = (f) => {
-    h.value && (h.value = !1, E.left = !1, E.right = !1, E.top = !1, E.bottom = !1, s(f));
-  }, C = K(I, r + n), R = (f) => {
-    const y = f === window ? f.document.documentElement : f === document ? f.documentElement : f, { display: x, flexDirection: A } = getComputedStyle(y), c = y.scrollLeft;
-    E.left = c < d.value, E.right = c > d.value;
-    const w = Math.abs(c) <= 0 + (u.left || 0), $ = Math.abs(c) + y.clientWidth >= y.scrollWidth - (u.right || 0) - V;
-    x === "flex" && A === "row-reverse" ? (b.left = $, b.right = w) : (b.left = w, b.right = $), d.value = c;
-    let M = y.scrollTop;
-    f === document && !M && (M = document.body.scrollTop), E.top = M < p.value, E.bottom = M > p.value;
-    const B = Math.abs(M) <= 0 + (u.top || 0), H = Math.abs(M) + y.clientHeight >= y.scrollHeight - (u.bottom || 0) - V;
-    x === "flex" && A === "column-reverse" ? (b.top = H, b.bottom = B) : (b.top = B, b.bottom = H), p.value = M;
-  }, O = (f) => {
-    const y = f.target === document ? f.target.documentElement : f.target;
-    R(y), h.value = !0, C(f), v(f);
-  };
-  return S(
-    e,
-    "scroll",
-    r ? Q(O, r, !0, !1) : O,
-    t
-  ), S(
-    e,
-    "scrollend",
-    I,
-    t
-  ), {
-    x: m,
-    y: l,
-    isScrolling: h,
-    arrivedState: b,
-    directions: E,
-    measure() {
-      const f = L(e);
-      f && R(f);
-    }
-  };
-}
-function we(e, o = {}) {
-  const {
-    threshold: r = 50,
-    onSwipe: n,
-    onSwipeEnd: s,
-    onSwipeStart: v,
-    passive: u = !0,
-    window: t = P
-  } = o, i = D({ x: 0, y: 0 }), d = D({ x: 0, y: 0 }), p = g(() => i.x - d.x), m = g(() => i.y - d.y), { max: l, abs: a } = Math, h = g(() => l(a(p.value), a(m.value)) >= r), b = T(!1), E = g(() => h.value ? a(p.value) > a(m.value) ? p.value > 0 ? "left" : "right" : m.value > 0 ? "up" : "down" : "none"), I = (c) => [c.touches[0].clientX, c.touches[0].clientY], C = (c, w) => {
-    i.x = c, i.y = w;
-  }, R = (c, w) => {
-    d.x = c, d.y = w;
-  };
-  let O;
-  const f = ue(t == null ? void 0 : t.document);
-  u ? O = f ? { passive: !0 } : { capture: !1 } : O = f ? { passive: !1, capture: !0 } : { capture: !0 };
-  const y = (c) => {
-    b.value && (s == null || s(c, E.value)), b.value = !1;
-  }, x = [
-    S(e, "touchstart", (c) => {
-      if (c.touches.length !== 1)
-        return;
-      O.capture && !O.passive && c.preventDefault();
-      const [w, $] = I(c);
-      C(w, $), R(w, $), v == null || v(c);
-    }, O),
-    S(e, "touchmove", (c) => {
-      if (c.touches.length !== 1)
-        return;
-      const [w, $] = I(c);
-      R(w, $), !b.value && h.value && (b.value = !0), b.value && (n == null || n(c));
-    }, O),
-    S(e, "touchend", y, O),
-    S(e, "touchcancel", y, O)
-  ];
-  return {
-    isPassiveEventSupported: f,
-    isSwiping: b,
-    direction: E,
-    coordsStart: i,
-    coordsEnd: d,
-    lengthX: p,
-    lengthY: m,
-    stop: () => x.forEach((c) => c())
-  };
-}
-function ue(e) {
-  if (!e)
-    return !1;
-  let o = !1;
-  const r = {
-    get passive() {
-      return o = !0, !1;
-    }
-  };
-  return e.addEventListener("x", j, r), e.removeEventListener("x", j), o;
-}
-export {
-  pe as breakpointsTailwind,
-  Oe as createFilterWrapper,
-  ge as debounceFilter,
-  P as defaultWindow,
-  U as increaseWithUnit,
-  N as isClient,
-  G as isIOS,
-  j as noop,
-  de as onClickOutside,
-  Se as throttleFilter,
-  J as toRef,
-  L as toValue,
-  k as tryOnScopeDispose,
-  _ as unrefElement,
-  ve as useBreakpoints,
-  K as useDebounceFn,
-  S as useEventListener,
-  W as useMediaQuery,
-  ne as useMounted,
-  me as useMutationObserver,
-  he as useResizeObserver,
-  be as useScroll,
-  q as useSupported,
-  we as useSwipe,
-  Q as useThrottleFn
-};