@indielayer/ui 1.16.0 → 1.17.0

package/lib/virtual/components/virtualList/VirtualList.vue.d.ts

@@ -0,0 +1,135 @@
+import { type CSSProperties } from 'vue';
+import type { Align } from '../../types';
+import type { DynamicRowHeight } from './types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    class: {
+        type: import("vue").PropType<string>;
+    };
+    style: {
+        type: import("vue").PropType<CSSProperties>;
+    };
+    onResize: {
+        type: import("vue").PropType<(size: {
+            height: number;
+            width: number;
+        }, prevSize: {
+            height: number;
+            width: number;
+        }) => void>;
+    };
+    rowCount: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    onRowsRendered: {
+        type: import("vue").PropType<(visibleRows: {
+            startIndex: number;
+            stopIndex: number;
+        }, allRows: {
+            startIndex: number;
+            stopIndex: number;
+        }) => void>;
+    };
+    overscanCount: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    defaultHeight: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    rowHeight: {
+        type: import("vue").PropType<string | number | DynamicRowHeight | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: true;
+    };
+    rowProps: {
+        type: import("vue").PropType<{
+            [x: string]: unknown;
+        }>;
+    };
+}>, {
+    element: HTMLDivElement | null;
+    scrollToRow({ align, behavior, index, }: {
+        align?: Align | undefined;
+        behavior?: ScrollBehavior | undefined;
+        index: number;
+    }): void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    class: {
+        type: import("vue").PropType<string>;
+    };
+    style: {
+        type: import("vue").PropType<CSSProperties>;
+    };
+    onResize: {
+        type: import("vue").PropType<(size: {
+            height: number;
+            width: number;
+        }, prevSize: {
+            height: number;
+            width: number;
+        }) => void>;
+    };
+    rowCount: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    onRowsRendered: {
+        type: import("vue").PropType<(visibleRows: {
+            startIndex: number;
+            stopIndex: number;
+        }, allRows: {
+            startIndex: number;
+            stopIndex: number;
+        }) => void>;
+    };
+    overscanCount: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    defaultHeight: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    rowHeight: {
+        type: import("vue").PropType<string | number | DynamicRowHeight | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: true;
+    };
+    rowProps: {
+        type: import("vue").PropType<{
+            [x: string]: unknown;
+        }>;
+    };
+}>> & Readonly<{}>, {
+    tag: keyof HTMLElementTagNameMap;
+    overscanCount: number;
+    defaultHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    row?(_: {
+        index: number;
+        style: CSSProperties;
+        ariaAttributes: {
+            'aria-posinset': number;
+            'aria-setsize': number;
+            role: 'listitem';
+        };
+        props: {
+            [x: string]: unknown;
+        } & Record<string, unknown>;
+    }): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/virtual/components/virtualList/VirtualList.vue.js

@@ -0,0 +1,157 @@
+import { defineComponent as _, ref as $, computed as i, watch as h, openBlock as g, createBlock as k, resolveDynamicComponent as E, normalizeClass as B, normalizeStyle as f, withCtx as D, createElementBlock as V, Fragment as O, renderList as P, renderSlot as w, createElementVNode as L, unref as N } from "vue";
+import { useVirtualizer as X } from "../../core/useVirtualizer.js";
+import { isDynamicRowHeight as Y } from "./isDynamicRowHeight.js";
+import { DATA_ATTRIBUTE_LIST_INDEX as F } from "./useDynamicRowHeight.js";
+const G = {
+  name: "XVirtualList"
+}, M = /* @__PURE__ */ _({
+  ...G,
+  props: {
+    class: {},
+    defaultHeight: { default: 0 },
+    onResize: {},
+    onRowsRendered: {},
+    overscanCount: { default: 3 },
+    rowCount: {},
+    rowHeight: {},
+    rowProps: {},
+    style: {},
+    tag: { default: "div" }
+  },
+  setup(v, { expose: y }) {
+    const t = v, n = $(null), p = i(() => t.rowProps || {}), H = i(() => t.rowCount), a = i(() => Y(t.rowHeight)), x = i(() => {
+      if (a.value) {
+        const e = t.rowHeight, o = e.getAverageRowHeight();
+        return (r) => e.getRowHeight(r) ?? o;
+      }
+      return t.rowHeight;
+    }), {
+      getCellBounds: R,
+      getEstimatedSize: C,
+      scrollToIndex: b,
+      startIndexOverscan: u,
+      startIndexVisible: I,
+      stopIndexOverscan: c,
+      stopIndexVisible: z
+    } = X({
+      containerElement: n,
+      containerStyle: t.style,
+      defaultContainerSize: t.defaultHeight,
+      direction: "vertical",
+      itemCount: H,
+      itemProps: p,
+      itemSize: x,
+      onResize: t.onResize,
+      overscanCount: t.overscanCount
+    });
+    y({
+      get element() {
+        return n.value;
+      },
+      scrollToRow({
+        align: e = "auto",
+        behavior: o = "auto",
+        index: r
+      }) {
+        var d, l;
+        const s = b({
+          align: e,
+          containerScrollOffset: ((d = n.value) == null ? void 0 : d.scrollTop) ?? 0,
+          index: r
+        });
+        typeof ((l = n.value) == null ? void 0 : l.scrollTo) == "function" && s !== void 0 && n.value.scrollTo({
+          behavior: o,
+          top: s
+        });
+      }
+    }), h(
+      [n, u, c, a, () => t.rowHeight],
+      ([e, o, r, s]) => !e || !s ? void 0 : (() => {
+        const l = Array.from(e.children).filter((m, T) => {
+          if (m.hasAttribute("aria-hidden"))
+            return !1;
+          const S = `${o + T}`;
+          return m.setAttribute(F, S), !0;
+        });
+        return t.rowHeight.observeRowElements(l);
+      })(),
+      { flush: "post" }
+      // Run after DOM updates
+    ), h(
+      [u, I, c, z],
+      ([e, o, r, s]) => {
+        e >= 0 && r >= 0 && t.onRowsRendered && t.onRowsRendered(
+          {
+            startIndex: o,
+            stopIndex: s
+          },
+          {
+            startIndex: e,
+            stopIndex: r
+          }
+        );
+      }
+    );
+    const A = i(() => {
+      const e = [];
+      if (t.rowCount > 0)
+        for (let o = u.value; o <= c.value; o++) {
+          const r = R(o), s = {
+            position: "absolute",
+            left: 0,
+            transform: `translateY(${r.scrollOffset}px)`,
+            // In case of dynamic row heights, don't specify a height style
+            height: a.value ? void 0 : `${r.size}px`,
+            width: "100%"
+          };
+          e.push({
+            key: o,
+            index: o,
+            style: s,
+            ariaAttributes: {
+              "aria-posinset": o + 1,
+              "aria-setsize": t.rowCount,
+              role: "listitem"
+            }
+          });
+        }
+      return e;
+    });
+    return (e, o) => (g(), k(E(e.tag), {
+      ref_key: "element",
+      ref: n,
+      class: B(e.$props.class),
+      style: f({
+        position: "relative",
+        maxHeight: "100%",
+        flexGrow: 1,
+        overflowY: "auto",
+        ...e.style
+      }),
+      role: "list"
+    }, {
+      default: D(() => [
+        (g(!0), V(O, null, P(A.value, (r) => w(e.$slots, "row", {
+          key: r.key,
+          index: r.index,
+          style: f(r.style),
+          ariaAttributes: r.ariaAttributes,
+          props: p.value
+        })), 128)),
+        w(e.$slots, "default"),
+        L("div", {
+          "aria-hidden": "",
+          style: f({
+            height: `${N(C)}px`,
+            width: "100%",
+            zIndex: -1
+          })
+        }, null, 4)
+      ]),
+      _: 3
+    }, 8, ["class", "style"]));
+  }
+});
+export {
+  M as default
+};

package/lib/virtual/components/virtualList/VirtualList.vue2.js

@@ -0,0 +1,4 @@
+import f from "./VirtualList.vue.js";
+export {
+  f as default
+};

package/lib/virtual/components/virtualList/isDynamicRowHeight.d.ts

@@ -0,0 +1,2 @@
+import type { DynamicRowHeight } from './types';
+export declare function isDynamicRowHeight(value: unknown): value is DynamicRowHeight;

package/lib/virtual/components/virtualList/isDynamicRowHeight.js

@@ -0,0 +1,6 @@
+function i(t) {
+  return typeof t == "object" && t !== null && "getAverageRowHeight" in t && "getRowHeight" in t && "setRowHeight" in t;
+}
+export {
+  i as isDynamicRowHeight
+};

package/lib/virtual/components/virtualList/types.d.ts

@@ -0,0 +1,115 @@
+import type { CSSProperties } from 'vue';
+import type { TagNames } from '../../types';
+export type DynamicRowHeight = {
+    getAverageRowHeight(): number;
+    getRowHeight(index: number): number | undefined;
+    setRowHeight(index: number, size: number): void;
+    observeRowElements: (elements: Element[] | NodeListOf<Element>) => () => void;
+    cleanup: () => void;
+};
+type ForbiddenKeys = 'ariaAttributes' | 'index' | 'style';
+type ExcludeForbiddenKeys<Type> = {
+    [Key in keyof Type]: Key extends ForbiddenKeys ? never : Type[Key];
+};
+export interface VirtualListProps {
+    /**
+     * CSS class name.
+     */
+    class?: string;
+    /**
+     * Default height of list for initial render.
+     * This value is important for server rendering.
+     */
+    defaultHeight?: number;
+    /**
+     * Callback notified when the List's outermost HTMLElement resizes.
+     * This may be used to (re)scroll a row into view.
+     */
+    onResize?: (size: {
+        height: number;
+        width: number;
+    }, prevSize: {
+        height: number;
+        width: number;
+    }) => void;
+    /**
+     * Callback notified when the range of visible rows changes.
+     */
+    onRowsRendered?: (visibleRows: {
+        startIndex: number;
+        stopIndex: number;
+    }, allRows: {
+        startIndex: number;
+        stopIndex: number;
+    }) => void;
+    /**
+     * How many additional rows to render outside of the visible area.
+     * This can reduce visual flickering near the edges of a list when scrolling.
+     */
+    overscanCount?: number;
+    /**
+     * Number of items to be rendered in the list.
+     */
+    rowCount: number;
+    /**
+     * Row height; the following formats are supported:
+     * - number of pixels (number)
+     * - percentage of the grid's current height (string)
+     * - function that returns the row height (in pixels) given an index and `cellProps`
+     * - dynamic row height cache returned by the `useDynamicRowHeight` hook
+     *
+     * ⚠️ Dynamic row heights are not as efficient as predetermined sizes.
+     * It's recommended to provide your own height values if they can be determined ahead of time.
+     */
+    rowHeight: number | string | ((index: number, cellProps: Record<string, unknown>) => number) | DynamicRowHeight;
+    /**
+     * Additional props to be passed to the row-rendering component via slots.
+     */
+    rowProps?: ExcludeForbiddenKeys<Record<string, unknown>>;
+    /**
+     * Optional CSS properties.
+     * The list of rows will fill the height defined by this style.
+     */
+    style?: CSSProperties;
+    /**
+     * Can be used to override the root HTML element rendered by the List component.
+     * The default value is "div", meaning that List renders an HTMLDivElement as its root.
+     *
+     * ⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.
+     */
+    tag?: TagNames;
+}
+export interface RowSlotProps {
+    ariaAttributes: {
+        'aria-posinset': number;
+        'aria-setsize': number;
+        role: 'listitem';
+    };
+    index: number;
+    style: CSSProperties;
+    props?: Record<string, unknown>;
+}
+/**
+ * Imperative List API.
+ */
+export interface VirtualListImperativeAPI {
+    /**
+     * Outermost HTML element for the list if mounted and null (if not mounted.
+     */
+    readonly element: HTMLDivElement | null;
+    /**
+     * Scrolls the list so that the specified row is visible.
+     *
+     * @param align Determines the vertical alignment of the element within the list
+     * @param behavior Determines whether scrolling is instant or animates smoothly
+     * @param index Index of the row to scroll to (0-based)
+     *
+     * @throws RangeError if an invalid row index is provided
+     */
+    scrollToRow(config: {
+        align?: 'auto' | 'center' | 'end' | 'smart' | 'start';
+        behavior?: 'auto' | 'instant' | 'smooth';
+        index: number;
+    }): void;
+}
+export {};

package/lib/virtual/components/virtualList/useDynamicRowHeight.d.ts

@@ -0,0 +1,7 @@
+import { type Ref } from 'vue';
+import type { DynamicRowHeight } from './types';
+export declare const DATA_ATTRIBUTE_LIST_INDEX = "data-virtual-index";
+export declare function useDynamicRowHeight({ defaultRowHeight, key, }: {
+    defaultRowHeight: number;
+    key?: Ref<string | number | undefined> | string | number;
+}): DynamicRowHeight;

package/lib/virtual/components/virtualList/useDynamicRowHeight.js

@@ -0,0 +1,69 @@
+import { ref as p, watch as d, onBeforeUnmount as H } from "vue";
+import { assert as R } from "../../utils/assert.js";
+const b = "data-virtual-index";
+function x({
+  defaultRowHeight: v,
+  key: a
+}) {
+  const r = p(/* @__PURE__ */ new Map()), o = p(0);
+  a !== void 0 && typeof a == "object" && "value" in a && d(a, () => {
+    r.value = /* @__PURE__ */ new Map(), o.value++;
+  });
+  const w = () => {
+    o.value;
+    let e = 0;
+    return r.value.forEach((t) => {
+      e += t;
+    }), e === 0 ? v : e / r.value.size;
+  }, m = (e) => {
+    o.value;
+    const t = r.value.get(e);
+    return t !== void 0 ? t : v;
+  }, A = (e, t) => {
+    if (r.value.get(e) === t)
+      return;
+    const n = new Map(r.value);
+    n.set(e, t), r.value = n, o.value++;
+  }, E = (e) => {
+    if (e.length === 0)
+      return;
+    let t = !1;
+    const n = [];
+    if (e.forEach((s) => {
+      const { borderBoxSize: i, target: c } = s, h = c.getAttribute(b);
+      R(
+        h !== null,
+        `Invalid ${b} attribute value`
+      );
+      const g = parseInt(h), { blockSize: l } = i[0];
+      if (!l)
+        return;
+      r.value.get(g) !== l && (n.push({ index: g, height: l }), t = !0);
+    }), t) {
+      const s = new Map(r.value);
+      n.forEach(({ index: i, height: c }) => {
+        s.set(i, c);
+      }), r.value = s, o.value++;
+    }
+  }, u = new ResizeObserver(E);
+  H(f);
+  function f() {
+    u.disconnect();
+  }
+  return {
+    getAverageRowHeight: w,
+    getRowHeight: m,
+    setRowHeight: A,
+    observeRowElements: (e) => {
+      const t = Array.isArray(e) ? e : Array.from(e);
+      return t.forEach((n) => u.observe(n)), () => {
+        t.forEach((n) => u.unobserve(n));
+      };
+    },
+    cleanup: f
+  };
+}
+export {
+  b as DATA_ATTRIBUTE_LIST_INDEX,
+  x as useDynamicRowHeight
+};

package/lib/virtual/components/virtualList/useDynamicRowHeight.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/virtual/composables/infinite-loader/scanForUnloadedIndices.d.ts

@@ -0,0 +1,8 @@
+import type { Indices } from './types';
+export declare function scanForUnloadedIndices({ isRowLoaded, minimumBatchSize, rowCount, startIndex, stopIndex, }: {
+    isRowLoaded: (index: number) => boolean;
+    minimumBatchSize: number;
+    rowCount: number;
+    startIndex: number;
+    stopIndex: number;
+}): Indices[];

package/lib/virtual/composables/infinite-loader/scanForUnloadedIndices.js

@@ -0,0 +1,41 @@
+function o({
+  isRowLoaded: x,
+  minimumBatchSize: d,
+  rowCount: i,
+  startIndex: I,
+  stopIndex: a
+}) {
+  const r = [];
+  let s = -1, e = -1;
+  for (let t = I; t <= a; t++)
+    x(t) ? e >= 0 && (r.push({
+      startIndex: s,
+      stopIndex: e
+    }), s = e = -1) : (e = t, s < 0 && (s = t));
+  if (e >= 0) {
+    const t = Math.min(
+      Math.max(e, s + d - 1),
+      i - 1
+    );
+    for (let n = e + 1; n <= t && !x(n); n++)
+      e = n;
+    r.push({
+      startIndex: s,
+      stopIndex: e
+    });
+  }
+  if (r.length) {
+    const t = r[0];
+    for (; t.stopIndex - t.startIndex + 1 < d && t.startIndex > 0; ) {
+      const n = t.startIndex - 1;
+      if (!x(n))
+        t.startIndex = n;
+      else
+        break;
+    }
+  }
+  return r;
+}
+export {
+  o as scanForUnloadedIndices
+};

package/lib/virtual/composables/infinite-loader/scanForUnloadedIndices.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/virtual/composables/infinite-loader/types.d.ts

@@ -0,0 +1,30 @@
+export type Indices = {
+    startIndex: number;
+    stopIndex: number;
+};
+export type OnRowsRendered = (indices: Indices) => void;
+export type InfiniteLoaderProps = {
+    /**
+     * Function responsible for tracking the loaded state of each item.
+     */
+    isRowLoaded: (index: number) => boolean;
+    /**
+     * Callback to be invoked when more rows must be loaded.
+     * It should return a Promise that is resolved once all data has finished loading.
+     */
+    loadMoreRows: (startIndex: number, stopIndex: number) => Promise<void>;
+    /**
+     * Minimum number of rows to be loaded at a time; defaults to 10.
+     * This property can be used to batch requests to reduce HTTP requests.
+     */
+    minimumBatchSize?: number;
+    /**
+     * Threshold at which to pre-fetch data; defaults to 15.
+     * A threshold of 15 means that data will start loading when a user scrolls within 15 rows.
+     */
+    threshold?: number;
+    /**
+     * Number of rows in list; can be arbitrary high number if actual number is unknown.
+     */
+    rowCount: number;
+};

package/lib/virtual/composables/infinite-loader/useInfiniteLoader.d.ts

@@ -0,0 +1,6 @@
+import { type MaybeRefOrGetter } from 'vue';
+import type { OnRowsRendered, InfiniteLoaderProps } from './types';
+export declare function useInfiniteLoader(props: MaybeRefOrGetter<InfiniteLoaderProps>): {
+    onRowsRendered: OnRowsRendered;
+    pendingRowsCache: import("vue").Reactive<Set<number>>;
+};

package/lib/virtual/composables/infinite-loader/useInfiniteLoader.js

@@ -0,0 +1,42 @@
+import { reactive as I, computed as a, toValue as s } from "vue";
+import { scanForUnloadedIndices as v } from "./scanForUnloadedIndices.js";
+function z(d) {
+  const e = I(/* @__PURE__ */ new Set()), r = a(
+    () => s(d).isRowLoaded
+  ), m = a(
+    () => s(d).loadMoreRows
+  ), w = a(
+    () => s(d).minimumBatchSize ?? 10
+  ), u = a(
+    () => s(d).rowCount
+  ), c = a(
+    () => s(d).threshold ?? 15
+  ), f = (t) => r.value(t) ? (e.has(t) && e.delete(t), !0) : e.has(t);
+  return {
+    onRowsRendered: ({ startIndex: t, stopIndex: R }) => {
+      if (e.size > 0) {
+        const n = [];
+        e.forEach((o) => {
+          r.value(o) && n.push(o);
+        }), n.forEach((o) => e.delete(o));
+      }
+      const l = v({
+        isRowLoaded: f,
+        minimumBatchSize: w.value,
+        rowCount: u.value,
+        startIndex: Math.max(0, t - c.value),
+        stopIndex: Math.min(u.value - 1, R + c.value)
+      });
+      for (let n = 0; n < l.length; n++) {
+        const { startIndex: o, stopIndex: h } = l[n];
+        for (let i = o; i <= h; i++)
+          e.add(i);
+        m.value(o, h);
+      }
+    },
+    pendingRowsCache: e
+  };
+}
+export {
+  z as useInfiniteLoader
+};

package/lib/virtual/composables/infinite-loader/useInfiniteLoader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/virtual/core/createCachedBounds.d.ts

@@ -0,0 +1,6 @@
+import type { CachedBounds, SizeFunction } from './types';
+export declare function createCachedBounds<Props extends object>({ itemCount, itemProps, itemSize, }: {
+    itemCount: number;
+    itemProps: Props;
+    itemSize: number | SizeFunction<Props>;
+}): CachedBounds;