@indielayer/ui 1.16.0 → 1.18.0

package/lib/install.js

@@ -1,10 +1,18 @@
-import * as t from "./components/index.js";
-import o from "./create.js";
-const m = o({
-  components: Object.keys(t).map(
-    (e) => t[e]
-  )
+import * as m from "./components/index.js";
+import r from "./create.js";
+import t from "./virtual/components/virtualList/VirtualList.vue.js";
+import i from "./virtual/components/virtualGrid/VirtualGrid.vue.js";
+import a from "./virtual/components/infiniteLoader/InfiniteLoader.vue.js";
+const p = r({
+  components: [
+    ...Object.keys(m).map(
+      (o) => m[o]
+    ),
+    t,
+    i,
+    a
+  ]
 });
 export {
-  m as default
+  p as default
 };

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.16.0";
+declare const _default: "1.18.0";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "1.16.0";
+const e = "1.18.0";
 export {
   e as default
 };

package/lib/virtual/components/infiniteLoader/InfiniteLoader.test.d.ts

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

package/lib/virtual/components/infiniteLoader/InfiniteLoader.vue.d.ts

@@ -0,0 +1,49 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    isRowLoaded: {
+        type: import("vue").PropType<(index: number) => boolean>;
+        required: true;
+    };
+    loadMoreRows: {
+        type: import("vue").PropType<(startIndex: number, stopIndex: number) => Promise<void>>;
+        required: true;
+    };
+    minimumBatchSize: {
+        type: import("vue").PropType<number>;
+    };
+    threshold: {
+        type: import("vue").PropType<number>;
+    };
+    rowCount: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    isRowLoaded: {
+        type: import("vue").PropType<(index: number) => boolean>;
+        required: true;
+    };
+    loadMoreRows: {
+        type: import("vue").PropType<(startIndex: number, stopIndex: number) => Promise<void>>;
+        required: true;
+    };
+    minimumBatchSize: {
+        type: import("vue").PropType<number>;
+    };
+    threshold: {
+        type: import("vue").PropType<number>;
+    };
+    rowCount: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?(_: {
+        onRowsRendered: import("../../composables/infinite-loader/types").OnRowsRendered;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/virtual/components/infiniteLoader/InfiniteLoader.vue.js

@@ -0,0 +1,21 @@
+import { defineComponent as r, renderSlot as s, unref as d } from "vue";
+import { useInfiniteLoader as i } from "../../composables/infinite-loader/useInfiniteLoader.js";
+const a = {
+  name: "XInfiniteLoader"
+}, f = /* @__PURE__ */ r({
+  ...a,
+  props: {
+    isRowLoaded: { type: Function },
+    loadMoreRows: { type: Function },
+    minimumBatchSize: {},
+    threshold: {},
+    rowCount: {}
+  },
+  setup(e) {
+    const o = e, { onRowsRendered: n } = i(o);
+    return (t, u) => s(t.$slots, "default", { onRowsRendered: d(n) });
+  }
+});
+export {
+  f as default
+};

package/lib/virtual/components/infiniteLoader/InfiniteLoader.vue2.js

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

package/lib/virtual/components/virtualGrid/VirtualGrid.vue.d.ts

@@ -0,0 +1,185 @@
+import { type CSSProperties } from 'vue';
+import type { Align } from '../../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    dir: {
+        type: import("vue").PropType<"rtl" | "ltr" | "auto">;
+    };
+    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>;
+    };
+    columnCount: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    columnWidth: {
+        type: import("vue").PropType<string | number | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: true;
+    };
+    rowCount: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    overscanCount: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    cellProps: {
+        type: import("vue").PropType<{
+            [x: string]: unknown;
+        }>;
+    };
+    defaultHeight: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    defaultWidth: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    onCellsRendered: {
+        type: import("vue").PropType<(visibleCells: {
+            columnStartIndex: number;
+            columnStopIndex: number;
+            rowStartIndex: number;
+            rowStopIndex: number;
+        }, allCells: {
+            columnStartIndex: number;
+            columnStopIndex: number;
+            rowStartIndex: number;
+            rowStopIndex: number;
+        }) => void>;
+    };
+    rowHeight: {
+        type: import("vue").PropType<string | number | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: true;
+    };
+}>, {
+    element: HTMLDivElement | null;
+    scrollToCell({ behavior, columnAlign, columnIndex, rowAlign, rowIndex, }: {
+        behavior?: ScrollBehavior | undefined;
+        columnAlign?: Align | undefined;
+        columnIndex: number;
+        rowAlign?: Align | undefined;
+        rowIndex: number;
+    }): void;
+    scrollToColumn({ align, behavior, index, }: {
+        align?: Align | undefined;
+        behavior?: ScrollBehavior | undefined;
+        index: number;
+    }): void;
+    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;
+    };
+    dir: {
+        type: import("vue").PropType<"rtl" | "ltr" | "auto">;
+    };
+    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>;
+    };
+    columnCount: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    columnWidth: {
+        type: import("vue").PropType<string | number | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: true;
+    };
+    rowCount: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    overscanCount: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    cellProps: {
+        type: import("vue").PropType<{
+            [x: string]: unknown;
+        }>;
+    };
+    defaultHeight: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    defaultWidth: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    onCellsRendered: {
+        type: import("vue").PropType<(visibleCells: {
+            columnStartIndex: number;
+            columnStopIndex: number;
+            rowStartIndex: number;
+            rowStopIndex: number;
+        }, allCells: {
+            columnStartIndex: number;
+            columnStopIndex: number;
+            rowStartIndex: number;
+            rowStopIndex: number;
+        }) => void>;
+    };
+    rowHeight: {
+        type: import("vue").PropType<string | number | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    tag: keyof HTMLElementTagNameMap;
+    overscanCount: number;
+    defaultHeight: number;
+    defaultWidth: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    cell?(_: {
+        columnIndex: number;
+        rowIndex: number;
+        style: CSSProperties;
+        ariaAttributes: {
+            'aria-colindex': number;
+            role: 'gridcell';
+        };
+        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/virtualGrid/VirtualGrid.vue.js

@@ -0,0 +1,241 @@
+import { defineComponent as G, ref as D, computed as y, watch as F, openBlock as c, createBlock as N, resolveDynamicComponent as X, normalizeClass as j, normalizeStyle as m, withCtx as q, createElementBlock as p, Fragment as z, renderList as R, renderSlot as T, createElementVNode as J, unref as b } from "vue";
+import { useIsRtl as K } from "../../core/useIsRtl.js";
+import { useVirtualizer as O } from "../../core/useVirtualizer.js";
+const M = ["aria-rowindex"], Q = {
+  name: "XVirtualGrid"
+}, ee = /* @__PURE__ */ G({
+  ...Q,
+  props: {
+    cellProps: {},
+    class: {},
+    columnCount: {},
+    columnWidth: {},
+    defaultHeight: { default: 0 },
+    defaultWidth: { default: 0 },
+    dir: {},
+    onCellsRendered: {},
+    onResize: {},
+    overscanCount: { default: 3 },
+    rowCount: {},
+    rowHeight: {},
+    style: {},
+    tag: { default: "div" }
+  },
+  setup(V, { expose: k }) {
+    const o = V, r = D(null), f = y(() => o.cellProps || {}), u = K(r, o.dir), {
+      getCellBounds: B,
+      getEstimatedSize: $,
+      startIndexOverscan: x,
+      startIndexVisible: E,
+      scrollToIndex: v,
+      stopIndexOverscan: I,
+      stopIndexVisible: H
+    } = O({
+      containerElement: r,
+      containerStyle: o.style,
+      defaultContainerSize: o.defaultWidth,
+      direction: "horizontal",
+      isRtl: u.value,
+      itemCount: o.columnCount,
+      itemProps: f.value,
+      itemSize: o.columnWidth,
+      onResize: o.onResize,
+      overscanCount: o.overscanCount
+    }), {
+      getCellBounds: W,
+      getEstimatedSize: P,
+      startIndexOverscan: w,
+      startIndexVisible: _,
+      scrollToIndex: C,
+      stopIndexOverscan: h,
+      stopIndexVisible: A
+    } = O({
+      containerElement: r,
+      containerStyle: o.style,
+      defaultContainerSize: o.defaultHeight,
+      direction: "vertical",
+      itemCount: o.rowCount,
+      itemProps: f.value,
+      itemSize: o.rowHeight,
+      onResize: o.onResize,
+      overscanCount: o.overscanCount
+    });
+    k({
+      get element() {
+        return r.value;
+      },
+      scrollToCell({
+        behavior: e = "auto",
+        columnAlign: n = "auto",
+        columnIndex: s,
+        rowAlign: t = "auto",
+        rowIndex: l
+      }) {
+        var d, S, g;
+        const i = v({
+          align: n,
+          containerScrollOffset: ((d = r.value) == null ? void 0 : d.scrollLeft) ?? 0,
+          index: s
+        }), a = C({
+          align: t,
+          containerScrollOffset: ((S = r.value) == null ? void 0 : S.scrollTop) ?? 0,
+          index: l
+        });
+        typeof ((g = r.value) == null ? void 0 : g.scrollTo) == "function" && i !== void 0 && a !== void 0 && r.value.scrollTo({
+          behavior: e,
+          left: i,
+          top: a
+        });
+      },
+      scrollToColumn({
+        align: e = "auto",
+        behavior: n = "auto",
+        index: s
+      }) {
+        var l, i;
+        const t = v({
+          align: e,
+          containerScrollOffset: ((l = r.value) == null ? void 0 : l.scrollLeft) ?? 0,
+          index: s
+        });
+        typeof ((i = r.value) == null ? void 0 : i.scrollTo) == "function" && t !== void 0 && r.value.scrollTo({
+          behavior: n,
+          left: t
+        });
+      },
+      scrollToRow({
+        align: e = "auto",
+        behavior: n = "auto",
+        index: s
+      }) {
+        var l, i;
+        const t = C({
+          align: e,
+          containerScrollOffset: ((l = r.value) == null ? void 0 : l.scrollTop) ?? 0,
+          index: s
+        });
+        typeof ((i = r.value) == null ? void 0 : i.scrollTo) == "function" && t !== void 0 && r.value.scrollTo({
+          behavior: n,
+          top: t
+        });
+      }
+    }), F(
+      [
+        x,
+        E,
+        I,
+        H,
+        w,
+        _,
+        h,
+        A
+      ],
+      ([
+        e,
+        n,
+        s,
+        t,
+        l,
+        i,
+        a,
+        d
+      ]) => {
+        e >= 0 && s >= 0 && l >= 0 && a >= 0 && o.onCellsRendered && o.onCellsRendered(
+          {
+            columnStartIndex: n,
+            columnStopIndex: t,
+            rowStartIndex: i,
+            rowStopIndex: d
+          },
+          {
+            columnStartIndex: e,
+            columnStopIndex: s,
+            rowStartIndex: l,
+            rowStopIndex: a
+          }
+        );
+      }
+    );
+    const L = y(() => {
+      const e = [];
+      if (o.columnCount > 0 && o.rowCount > 0)
+        for (let n = w.value; n <= h.value; n++) {
+          const s = W(n), t = [];
+          for (let l = x.value; l <= I.value; l++) {
+            const i = B(l), a = {
+              position: "absolute",
+              left: u.value ? void 0 : 0,
+              right: u.value ? 0 : void 0,
+              transform: `translate(${u.value ? -i.scrollOffset : i.scrollOffset}px, ${s.scrollOffset}px)`,
+              height: `${s.size}px`,
+              width: `${i.size}px`
+            };
+            t.push({
+              key: l,
+              columnIndex: l,
+              rowIndex: n,
+              style: a,
+              ariaAttributes: {
+                "aria-colindex": l + 1,
+                role: "gridcell"
+              }
+            });
+          }
+          e.push({
+            key: n,
+            rowIndex: n,
+            columns: t,
+            ariaRowIndex: n + 1
+          });
+        }
+      return e;
+    });
+    return (e, n) => (c(), N(X(e.tag), {
+      ref_key: "element",
+      ref: r,
+      class: j(e.$props.class),
+      style: m({
+        position: "relative",
+        maxHeight: "100%",
+        maxWidth: "100%",
+        flexGrow: 1,
+        overflow: "auto",
+        ...e.style
+      }),
+      dir: e.dir,
+      role: "grid",
+      "aria-colcount": e.columnCount,
+      "aria-rowcount": e.rowCount
+    }, {
+      default: q(() => [
+        (c(!0), p(z, null, R(L.value, (s) => (c(), p("div", {
+          key: s.key,
+          role: "row",
+          "aria-rowindex": s.ariaRowIndex
+        }, [
+          (c(!0), p(z, null, R(s.columns, (t) => T(e.$slots, "cell", {
+            key: t.key,
+            columnIndex: t.columnIndex,
+            rowIndex: t.rowIndex,
+            style: m(t.style),
+            ariaAttributes: t.ariaAttributes,
+            props: f.value
+          })), 128))
+        ], 8, M))), 128)),
+        T(e.$slots, "default"),
+        J("div", {
+          "aria-hidden": "",
+          style: m({
+            height: `${b(P)}px`,
+            width: `${b($)}px`,
+            zIndex: -1
+          })
+        }, null, 4)
+      ]),
+      _: 3
+    }, 8, ["class", "style", "dir", "aria-colcount", "aria-rowcount"]));
+  }
+});
+export {
+  ee as default
+};

package/lib/virtual/components/virtualGrid/VirtualGrid.vue2.js

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

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

@@ -0,0 +1,138 @@
+import type { CSSProperties } from 'vue';
+import type { TagNames } from '../../types';
+type ForbiddenKeys = 'ariaAttributes' | 'columnIndex' | 'rowIndex' | 'style';
+type ExcludeForbiddenKeys<Type> = {
+    [Key in keyof Type]: Key extends ForbiddenKeys ? never : Type[Key];
+};
+export interface VirtualGridProps {
+    /**
+     * Additional props to be passed to the cell-rendering component via slots.
+     */
+    cellProps?: ExcludeForbiddenKeys<Record<string, unknown>>;
+    /**
+     * CSS class name.
+     */
+    class?: string;
+    /**
+     * Number of columns to be rendered in the grid.
+     */
+    columnCount: number;
+    /**
+     * Column width; the following formats are supported:
+     * - number of pixels (number)
+     * - percentage of the grid's current width (string)
+     * - function that returns the column width (in pixels) given an index and `cellProps`
+     */
+    columnWidth: number | string | ((index: number, cellProps: Record<string, unknown>) => number);
+    /**
+     * Default height of grid for initial render.
+     * This value is important for server rendering.
+     */
+    defaultHeight?: number;
+    /**
+     * Default width of grid for initial render.
+     * This value is important for server rendering.
+     */
+    defaultWidth?: number;
+    /**
+     * Indicates the directionality of grid cells.
+     */
+    dir?: 'ltr' | 'rtl' | 'auto';
+    /**
+     * Callback notified when the range of rendered cells changes.
+     */
+    onCellsRendered?: (visibleCells: {
+        columnStartIndex: number;
+        columnStopIndex: number;
+        rowStartIndex: number;
+        rowStopIndex: number;
+    }, allCells: {
+        columnStartIndex: number;
+        columnStopIndex: number;
+        rowStartIndex: number;
+        rowStopIndex: number;
+    }) => void;
+    /**
+     * Callback notified when the Grid's outermost HTMLElement resizes.
+     * This may be used to (re)scroll a cell into view.
+     */
+    onResize?: (size: {
+        height: number;
+        width: number;
+    }, prevSize: {
+        height: number;
+        width: number;
+    }) => void;
+    /**
+     * How many additional rows/columns to render outside of the visible area.
+     * This can reduce visual flickering near the edges of a grid when scrolling.
+     */
+    overscanCount?: number;
+    /**
+     * Number of rows to be rendered in the grid.
+     */
+    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`
+     */
+    rowHeight: number | string | ((index: number, cellProps: Record<string, unknown>) => number);
+    /**
+     * Optional CSS properties.
+     * The grid of cells will fill the height and width defined by this style.
+     */
+    style?: CSSProperties;
+    /**
+     * Can be used to override the root HTML element rendered by the Grid component.
+     * The default value is "div", meaning that Grid renders an HTMLDivElement as its root.
+     */
+    tag?: TagNames;
+}
+export interface CellSlotProps {
+    ariaAttributes: {
+        'aria-colindex': number;
+        role: 'gridcell';
+    };
+    columnIndex: number;
+    rowIndex: number;
+    style: CSSProperties;
+    props?: Record<string, unknown>;
+}
+/**
+ * Imperative Grid API.
+ */
+export interface VirtualGridImperativeAPI {
+    /**
+     * Outermost HTML element for the grid if mounted and null (if not mounted.
+     */
+    readonly element: HTMLDivElement | null;
+    /**
+     * Scrolls the grid so that the specified cell is visible.
+     */
+    scrollToCell(config: {
+        behavior?: ScrollBehavior;
+        columnAlign?: 'auto' | 'center' | 'end' | 'smart' | 'start';
+        columnIndex: number;
+        rowAlign?: 'auto' | 'center' | 'end' | 'smart' | 'start';
+        rowIndex: number;
+    }): void;
+    /**
+     * Scrolls the grid so that the specified column is visible.
+     */
+    scrollToColumn(config: {
+        align?: 'auto' | 'center' | 'end' | 'smart' | 'start';
+        behavior?: ScrollBehavior;
+        index: number;
+    }): void;
+    /**
+     * Scrolls the grid so that the specified row is visible.
+     */
+    scrollToRow(config: {
+        align?: 'auto' | 'center' | 'end' | 'smart' | 'start';
+        behavior?: ScrollBehavior;
+        index: number;
+    }): void;
+}
+export {};

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

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