@indielayer/ui 1.18.1 → 2.1.0

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

@@ -1,59 +1,40 @@
-import { type CSSProperties } from 'vue';
+import { type CSSProperties, type PropType } 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">;
+    cellProps: {
+        type: PropType<Record<string, unknown>>;
+        description: 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>;
+        type: StringConstructor;
+        description: string;
     };
     columnCount: {
-        type: import("vue").PropType<number>;
-        required: true;
+        type: NumberConstructor;
+        required: boolean;
+        description: string;
     };
     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;
-        }>;
+        type: PropType<string | number | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: boolean;
+        description: string;
     };
     defaultHeight: {
-        type: import("vue").PropType<number>;
+        type: NumberConstructor;
         default: number;
+        description: string;
     };
     defaultWidth: {
-        type: import("vue").PropType<number>;
+        type: NumberConstructor;
         default: number;
+        description: string;
+    };
+    dir: {
+        type: PropType<"rtl" | "ltr" | "auto">;
+        description: string;
     };
     onCellsRendered: {
-        type: import("vue").PropType<(visibleCells: {
+        type: PropType<(visibleCells: {
             columnStartIndex: number;
             columnStopIndex: number;
             rowStartIndex: number;
@@ -64,10 +45,41 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             rowStartIndex: number;
             rowStopIndex: number;
         }) => void>;
+        description: string;
+    };
+    onResize: {
+        type: PropType<(size: {
+            height: number;
+            width: number;
+        }, prevSize: {
+            height: number;
+            width: number;
+        }) => void>;
+        description: string;
+    };
+    overscanCount: {
+        type: NumberConstructor;
+        default: number;
+        description: string;
+    };
+    rowCount: {
+        type: NumberConstructor;
+        required: boolean;
+        description: string;
     };
     rowHeight: {
-        type: import("vue").PropType<string | number | ((index: number, cellProps: Record<string, unknown>) => number)>;
-        required: true;
+        type: PropType<string | number | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: boolean;
+        description: string;
+    };
+    style: {
+        type: PropType<CSSProperties>;
+        description: string;
+    };
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+        description: string;
     };
 }>, {
     element: HTMLDivElement | null;
@@ -89,59 +101,40 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         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">;
+    cellProps: {
+        type: PropType<Record<string, unknown>>;
+        description: 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>;
+        type: StringConstructor;
+        description: string;
     };
     columnCount: {
-        type: import("vue").PropType<number>;
-        required: true;
+        type: NumberConstructor;
+        required: boolean;
+        description: string;
     };
     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;
-        }>;
+        type: PropType<string | number | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: boolean;
+        description: string;
     };
     defaultHeight: {
-        type: import("vue").PropType<number>;
+        type: NumberConstructor;
         default: number;
+        description: string;
     };
     defaultWidth: {
-        type: import("vue").PropType<number>;
+        type: NumberConstructor;
         default: number;
+        description: string;
+    };
+    dir: {
+        type: PropType<"rtl" | "ltr" | "auto">;
+        description: string;
     };
     onCellsRendered: {
-        type: import("vue").PropType<(visibleCells: {
+        type: PropType<(visibleCells: {
             columnStartIndex: number;
             columnStopIndex: number;
             rowStartIndex: number;
@@ -152,10 +145,41 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             rowStartIndex: number;
             rowStopIndex: number;
         }) => void>;
+        description: string;
+    };
+    onResize: {
+        type: PropType<(size: {
+            height: number;
+            width: number;
+        }, prevSize: {
+            height: number;
+            width: number;
+        }) => void>;
+        description: string;
+    };
+    overscanCount: {
+        type: NumberConstructor;
+        default: number;
+        description: string;
+    };
+    rowCount: {
+        type: NumberConstructor;
+        required: boolean;
+        description: string;
     };
     rowHeight: {
-        type: import("vue").PropType<string | number | ((index: number, cellProps: Record<string, unknown>) => number)>;
-        required: true;
+        type: PropType<string | number | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: boolean;
+        description: string;
+    };
+    style: {
+        type: PropType<CSSProperties>;
+        description: string;
+    };
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+        description: string;
     };
 }>> & Readonly<{}>, {
     tag: keyof HTMLElementTagNameMap;
@@ -171,9 +195,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             'aria-colindex': number;
             role: 'gridcell';
         };
-        props: {
-            [x: string]: unknown;
-        } & Record<string, unknown>;
+        props: Record<string, unknown>;
     }): any;
     default?(_: {}): any;
 }>;

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

@@ -0,0 +1,264 @@
+import { useIsRtl as e } from "../../core/useIsRtl.js";
+import { useVirtualizer as t } from "../../core/useVirtualizer.js";
+import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, ref as d, renderList as f, renderSlot as p, resolveDynamicComponent as m, unref as h, watch as g, withCtx as _ } from "vue";
+//#region src/virtual/components/virtualGrid/VirtualGrid.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-rowindex"], y = /* @__PURE__ */ s({
+	name: "XVirtualGrid",
+	docs: {
+		slots: {
+			cell: "Render a single cell. Receives columnIndex, rowIndex, style, ariaAttributes, and props.",
+			default: "Optional content rendered after the virtualized cells."
+		},
+		methods: {
+			scrollToCell: "Scroll so the given cell (row and column) is visible.",
+			scrollToColumn: "Scroll so the given column index is visible.",
+			scrollToRow: "Scroll so the given row index is visible.",
+			element: "Root HTML element when mounted, otherwise null."
+		}
+	},
+	props: {
+		cellProps: {
+			type: Object,
+			description: "Extra props passed to the cell slot as `props`."
+		},
+		class: {
+			type: String,
+			description: "CSS class name on the root element."
+		},
+		columnCount: {
+			type: Number,
+			required: !0,
+			description: "Total number of columns in the grid."
+		},
+		columnWidth: {
+			type: [
+				Number,
+				String,
+				Function
+			],
+			required: !0,
+			description: "Column width as px, percent string, or a function of index."
+		},
+		defaultHeight: {
+			type: Number,
+			default: 0,
+			description: "Initial grid height before measure; important for SSR."
+		},
+		defaultWidth: {
+			type: Number,
+			default: 0,
+			description: "Initial grid width before measure; important for SSR."
+		},
+		dir: {
+			type: String,
+			description: "Text directionality for cell layout (ltr, rtl, or auto)."
+		},
+		onCellsRendered: {
+			type: Function,
+			description: "Called when the visible or overscan cell range changes."
+		},
+		onResize: {
+			type: Function,
+			description: "Called when the grid root resizes."
+		},
+		overscanCount: {
+			type: Number,
+			default: 3,
+			description: "Extra rows/columns rendered outside the visible area."
+		},
+		rowCount: {
+			type: Number,
+			required: !0,
+			description: "Total number of rows in the grid."
+		},
+		rowHeight: {
+			type: [
+				Number,
+				String,
+				Function
+			],
+			required: !0,
+			description: "Row height as px, percent string, or a function of index."
+		},
+		style: {
+			type: Object,
+			description: "Inline styles; the grid fills the size defined here."
+		},
+		tag: {
+			type: String,
+			default: "div",
+			description: "Root element tag."
+		}
+	},
+	setup(s, { expose: y }) {
+		let b = s, x = d(null), S = r(() => b.cellProps || {}), C = e(x, b.dir), { getCellBounds: w, getEstimatedSize: T, startIndexOverscan: E, startIndexVisible: D, scrollToIndex: O, stopIndexOverscan: k, stopIndexVisible: A } = t({
+			containerElement: x,
+			containerStyle: b.style,
+			defaultContainerSize: b.defaultWidth,
+			direction: "horizontal",
+			isRtl: C.value,
+			itemCount: b.columnCount,
+			itemProps: S.value,
+			itemSize: b.columnWidth,
+			onResize: b.onResize,
+			overscanCount: b.overscanCount ?? 3
+		}), { getCellBounds: j, getEstimatedSize: M, startIndexOverscan: N, startIndexVisible: P, scrollToIndex: F, stopIndexOverscan: I, stopIndexVisible: L } = t({
+			containerElement: x,
+			containerStyle: b.style,
+			defaultContainerSize: b.defaultHeight,
+			direction: "vertical",
+			itemCount: b.rowCount,
+			itemProps: S.value,
+			itemSize: b.rowHeight,
+			onResize: b.onResize,
+			overscanCount: b.overscanCount ?? 3
+		});
+		y({
+			get element() {
+				return x.value;
+			},
+			scrollToCell({ behavior: e = "auto", columnAlign: t = "auto", columnIndex: n, rowAlign: r = "auto", rowIndex: i }) {
+				let a = O({
+					align: t,
+					containerScrollOffset: x.value?.scrollLeft ?? 0,
+					index: n
+				}), o = F({
+					align: r,
+					containerScrollOffset: x.value?.scrollTop ?? 0,
+					index: i
+				});
+				typeof x.value?.scrollTo == "function" && a !== void 0 && o !== void 0 && x.value.scrollTo({
+					behavior: e,
+					left: a,
+					top: o
+				});
+			},
+			scrollToColumn({ align: e = "auto", behavior: t = "auto", index: n }) {
+				let r = O({
+					align: e,
+					containerScrollOffset: x.value?.scrollLeft ?? 0,
+					index: n
+				});
+				typeof x.value?.scrollTo == "function" && r !== void 0 && x.value.scrollTo({
+					behavior: t,
+					left: r
+				});
+			},
+			scrollToRow({ align: e = "auto", behavior: t = "auto", index: n }) {
+				let r = F({
+					align: e,
+					containerScrollOffset: x.value?.scrollTop ?? 0,
+					index: n
+				});
+				typeof x.value?.scrollTo == "function" && r !== void 0 && x.value.scrollTo({
+					behavior: t,
+					top: r
+				});
+			}
+		}), g([
+			E,
+			D,
+			k,
+			A,
+			N,
+			P,
+			I,
+			L
+		], ([e, t, n, r, i, a, o, s]) => {
+			e >= 0 && n >= 0 && i >= 0 && o >= 0 && b.onCellsRendered && b.onCellsRendered({
+				columnStartIndex: t,
+				columnStopIndex: r,
+				rowStartIndex: a,
+				rowStopIndex: s
+			}, {
+				columnStartIndex: e,
+				columnStopIndex: n,
+				rowStartIndex: i,
+				rowStopIndex: o
+			});
+		});
+		let R = r(() => {
+			let e = [];
+			if (b.columnCount > 0 && b.rowCount > 0) for (let t = N.value; t <= I.value; t++) {
+				let n = j(t), r = [];
+				for (let e = E.value; e <= k.value; e++) {
+					let i = w(e), a = {
+						position: "absolute",
+						left: C.value ? void 0 : 0,
+						right: C.value ? 0 : void 0,
+						transform: `translate(${C.value ? -i.scrollOffset : i.scrollOffset}px, ${n.scrollOffset}px)`,
+						height: `${n.size}px`,
+						width: `${i.size}px`
+					};
+					r.push({
+						key: e,
+						columnIndex: e,
+						rowIndex: t,
+						style: a,
+						ariaAttributes: {
+							"aria-colindex": e + 1,
+							role: "gridcell"
+						}
+					});
+				}
+				e.push({
+					key: t,
+					rowIndex: t,
+					columns: r,
+					ariaRowIndex: t + 1
+				});
+			}
+			return e;
+		});
+		return (e, t) => (u(), i(m(e.tag), {
+			ref_key: "element",
+			ref: x,
+			class: c(e.$props.class),
+			style: l({
+				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: _(() => [
+				(u(!0), a(n, null, f(R.value, (t) => (u(), a("div", {
+					key: t.key,
+					role: "row",
+					"aria-rowindex": t.ariaRowIndex
+				}, [(u(!0), a(n, null, f(t.columns, (t) => p(e.$slots, "cell", {
+					key: t.key,
+					columnIndex: t.columnIndex,
+					rowIndex: t.rowIndex,
+					style: l(t.style),
+					ariaAttributes: t.ariaAttributes,
+					props: S.value
+				})), 128))], 8, v))), 128)),
+				p(e.$slots, "default"),
+				o("div", {
+					"aria-hidden": "",
+					style: l({
+						height: `${h(M)}px`,
+						width: `${h(T)}px`,
+						zIndex: -1
+					})
+				}, null, 4)
+			]),
+			_: 3
+		}, 8, [
+			"class",
+			"style",
+			"dir",
+			"aria-colcount",
+			"aria-rowcount"
+		]));
+	}
+});
+//#endregion
+export { y as default };

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

@@ -0,0 +1,5 @@
+import e from "./VirtualList.vue_vue_type_script_setup_true_lang.js";
+//#region src/virtual/components/virtualList/VirtualList.vue
+var t = e;
+//#endregion
+export { t as default };