@raxium/vue-addons-virtual 0.1.1

package/dist/VirtualGrid.js

@@ -0,0 +1,34 @@
+import { createBlock, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { VirtualRoot } from "./index.js";
+import VirtualGridImpl from "./VirtualGridImpl.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    __name: "VirtualGrid",
+    props: {
+        dataSource: {},
+        row: {},
+        column: {},
+        gap: {},
+        rowVirtualizerOptions: {},
+        columnVirtualizerOptions: {},
+        ui: {}
+    },
+    setup (__props) {
+        const props = __props;
+        return (_ctx, _cache)=>(openBlock(), createBlock(unref(VirtualRoot), null, {
+                default: withCtx(()=>[
+                        createVNode(VirtualGridImpl, normalizeProps(guardReactiveProps({
+                            ...props,
+                            ..._ctx.$attrs
+                        })), {
+                            default: withCtx(()=>[
+                                    renderSlot(_ctx.$slots, "default")
+                                ]),
+                            _: 3
+                        }, 16)
+                    ]),
+                _: 3
+            }));
+    }
+});
+const VirtualGrid = _sfc_main;
+export default VirtualGrid;

package/dist/VirtualGrid.vue.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'vue';
+import type { VirtualGridProps } from '.';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<VirtualGridProps<T> & {
+        ui?: {
+            viewport?: {
+                class?: HTMLAttributes["class"];
+            };
+            scroll?: {
+                class?: HTMLAttributes["class"];
+            };
+        };
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default: () => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/VirtualGridImpl.js

@@ -0,0 +1,164 @@
+import { Fragment, cloneVNode, computed, createBlock, createElementBlock, createElementVNode, defineComponent, h, normalizeClass, normalizeStyle, openBlock, renderList, resolveDynamicComponent, unref, useTemplateRef } from "vue";
+import { cn } from "@raxium/themes/utils";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { merge } from "es-toolkit/compat";
+import { injectVirtualContext } from "./index.js";
+import { useDetectSlotNode } from "./useDetectSlotNode.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    __name: "VirtualGridImpl",
+    props: {
+        dataSource: {},
+        row: {},
+        column: {},
+        gap: {
+            default: ()=>[
+                    0,
+                    0
+                ]
+        },
+        rowVirtualizerOptions: {},
+        columnVirtualizerOptions: {},
+        class: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        ui: {}
+    },
+    setup (__props) {
+        const virtualContext = injectVirtualContext();
+        const parentEl = useTemplateRef("parentEl");
+        virtualContext.parentEl = parentEl;
+        const grid = computed(()=>{
+            const isInfiniteEnable = virtualContext.enableInfinite.value;
+            if (__props.row && !__props.column) return [
+                isInfiniteEnable ? __props.row + 1 : __props.row,
+                Math.ceil(__props.dataSource.length / __props.row)
+            ];
+            if (!__props.row && __props.column) return [
+                isInfiniteEnable ? Math.ceil(__props.dataSource.length / __props.column) + 1 : Math.ceil(__props.dataSource.length / __props.column),
+                __props.column
+            ];
+            return [
+                isInfiniteEnable ? (__props.row ?? 1) + 1 : __props.row ?? 1,
+                __props.column ?? __props.dataSource.length
+            ];
+        });
+        const rowVirtualOptions = computed(()=>{
+            const _staticOptions = {
+                enabled: true,
+                count: grid.value[0],
+                gap: __props.gap[0],
+                overscan: __props.rowVirtualizerOptions?.overscan ?? 1,
+                getScrollElement: ()=>parentEl.value,
+                estimateSize: (index)=>__props.rowVirtualizerOptions?.estimateSize?.(index) ?? 30
+            };
+            return merge({}, __props.rowVirtualizerOptions, _staticOptions);
+        });
+        const rowVirtualizer = useVirtualizer(rowVirtualOptions);
+        virtualContext.rowVirtualizer = rowVirtualizer;
+        const virtualRows = computed(()=>rowVirtualizer.value.getVirtualItems());
+        const colVirtualOptions = computed(()=>{
+            const _staticOptions = {
+                enabled: true,
+                count: grid.value[1],
+                gap: __props.gap[1],
+                overscan: __props.columnVirtualizerOptions?.overscan ?? 2,
+                horizontal: true,
+                getScrollElement: ()=>parentEl.value,
+                estimateSize: (index)=>__props.columnVirtualizerOptions?.estimateSize?.(index) ?? 30
+            };
+            return merge({}, __props.columnVirtualizerOptions, _staticOptions);
+        });
+        const colVirtualizer = useVirtualizer(colVirtualOptions);
+        virtualContext.columnVirtualizer = colVirtualizer;
+        const virtualColumns = computed(()=>colVirtualizer.value.getVirtualItems());
+        const totalSizeRows = computed(()=>rowVirtualizer.value.getTotalSize());
+        const totalSizeColumns = computed(()=>colVirtualizer.value.getTotalSize());
+        const { itemVNode, infiniteVNode } = useDetectSlotNode();
+        const virtualizedRows = computed(()=>virtualRows.value.map((virtualRow)=>{
+                const rowIndex = virtualRow.index;
+                const colVNodes = virtualColumns.value.map((virtualColumn)=>{
+                    const colIndex = virtualColumn.index;
+                    const realIndex = rowIndex * grid.value[1] + colIndex;
+                    const data = __props.dataSource[realIndex];
+                    return {
+                        vItem: virtualColumn,
+                        is: cloneVNode(itemVNode ?? h("div"), {
+                            key: `col-${virtualColumn.key}`,
+                            data,
+                            index: realIndex,
+                            rowIndex,
+                            colIndex
+                        })
+                    };
+                });
+                const rowVNode = rowIndex < (virtualContext.enableInfinite.value ? grid.value[0] - 1 : grid.value[0]) ? h("div", {
+                    "data-index": rowIndex,
+                    key: `row-${virtualRow.key}`,
+                    style: {
+                        position: "absolute",
+                        display: "flex",
+                        top: 0,
+                        left: 0,
+                        gap: `${__props.gap[1]}px`,
+                        transform: `
+                 translateX(${colVNodes[0].vItem.start}px)
+                 translateY(${virtualRow.start - rowVirtualizer.value.options.scrollMargin}px)
+                `
+                    }
+                }, colVNodes.map((colVNode)=>colVNode.is)) : cloneVNode(infiniteVNode ?? h("div"), {
+                    "data-index": rowIndex,
+                    style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: `${parentEl.value?.clientWidth ?? 0}px`,
+                        transform: `
+                 translateX(${Math.ceil(parentEl.value?.scrollLeft ?? 0)}px)
+                 translateY(${virtualRow.start - rowVirtualizer.value.options.scrollMargin}px)
+                `
+                    }
+                });
+                return {
+                    vItem: virtualRow,
+                    is: rowVNode
+                };
+            }));
+        function measureElement(el) {
+            if (rowVirtualizer.value && el) {
+                if (el instanceof Element) rowVirtualizer.value.measureElement(el);
+                else if (el.$el) rowVirtualizer.value.measureElement(el.$el);
+            }
+        }
+        return (_ctx, _cache)=>(openBlock(), createElementBlock("div", {
+                ref_key: "parentEl",
+                ref: parentEl,
+                class: normalizeClass(unref(cn)("rui-virtual-grid", __props.ui?.root, __props.class)),
+                "data-scope": "virtual-grid",
+                "data-part": "root"
+            }, [
+                createElementVNode("div", {
+                    class: normalizeClass(unref(cn)("rui-virtual-grid_scroll", __props.ui?.scroll)),
+                    style: normalizeStyle({
+                        width: `${totalSizeColumns.value}px`,
+                        height: `${totalSizeRows.value}px`
+                    }),
+                    "data-scope": "virtual-grid",
+                    "data-part": "scroll"
+                }, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(virtualizedRows.value, ({ vItem, is })=>(openBlock(), createBlock(resolveDynamicComponent(is), {
+                            key: vItem.key,
+                            ref_for: true,
+                            ref: measureElement
+                        }))), 128))
+                ], 6)
+            ], 2));
+    }
+});
+const VirtualGridImpl = _sfc_main;
+export default VirtualGridImpl;

package/dist/VirtualGridImpl.vue.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'vue';
+import type { VirtualGridProps } from '.';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<VirtualGridProps<T> & {
+        class?: HTMLAttributes["class"];
+        ui?: {
+            root?: HTMLAttributes["class"];
+            scroll?: HTMLAttributes["class"];
+        };
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/VirtualGridItem.js

@@ -0,0 +1,49 @@
+import { createElementBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, useTemplateRef, watch } from "vue";
+import { cn } from "@raxium/themes/utils";
+import { injectVirtualContext } from "./index.js";
+const _hoisted_1 = [
+    "data-index"
+];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    name: "VirtualGridItem",
+    __name: "VirtualGridItem",
+    props: {
+        data: {},
+        class: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        index: {},
+        rowIndex: {},
+        colIndex: {}
+    },
+    setup (__props) {
+        const { columnVirtualizer } = injectVirtualContext();
+        const el = useTemplateRef("el");
+        watch(el, (el)=>{
+            if (columnVirtualizer?.value && el) columnVirtualizer.value.measureElement(el);
+        });
+        return (_ctx, _cache)=>(openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
+                ref_key: "el",
+                ref: el,
+                class: unref(cn)("rui-virtual-grid-item", __props.class),
+                "data-index": __props.index,
+                "data-scope": "virtual-grid",
+                "data-part": "item"
+            }), [
+                renderSlot(_ctx.$slots, "default", {
+                    data: __props.data,
+                    index: __props.index,
+                    rowIndex: __props.rowIndex,
+                    colIndex: __props.colIndex
+                })
+            ], 16, _hoisted_1));
+    }
+});
+const VirtualGridItem = _sfc_main;
+export default VirtualGridItem;

package/dist/VirtualGridItem.vue.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from 'vue';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        data?: T;
+        class?: HTMLAttributes["class"];
+        index?: number;
+        rowIndex?: number;
+        colIndex?: number;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default: {
+            data: T;
+            index?: number;
+            rowIndex?: number;
+            colIndex?: number;
+        };
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/VirtualInfiniteLoading.js

@@ -0,0 +1,150 @@
+import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onMounted, onUnmounted, openBlock, renderSlot, shallowRef, unref } from "vue";
+import { cn } from "@raxium/themes/utils";
+import { useForwardExpose } from "@raxium/vue-addons-shared";
+import { LoaderCircle } from "lucide-vue-next";
+import { LOADING_STATE, injectVirtualContext } from "./index.js";
+const _hoisted_1 = [
+    "data-size"
+];
+const _hoisted_2 = [
+    "data-size"
+];
+const _hoisted_3 = [
+    "data-size"
+];
+const _hoisted_4 = [
+    "data-size"
+];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    name: "VirtualInfiniteLoading",
+    __name: "VirtualInfiniteLoading",
+    props: {
+        class: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        enableFirstLoad: {
+            type: Boolean,
+            default: true
+        },
+        enableRetry: {
+            type: Boolean,
+            default: true
+        },
+        size: {
+            default: "base"
+        },
+        ui: {}
+    },
+    emits: [
+        "infinite"
+    ],
+    setup (__props, { emit: __emit }) {
+        const emit = __emit;
+        const context = injectVirtualContext();
+        const { infiniteState: state } = context;
+        const stateHandler = {
+            loading () {
+                state.value = LOADING_STATE.LOADING;
+            },
+            loaded () {
+                state.value = LOADING_STATE.LOADED;
+            },
+            complete () {
+                state.value = LOADING_STATE.COMPLETE;
+            },
+            error () {
+                state.value = LOADING_STATE.ERROR;
+            }
+        };
+        function doInfinite() {
+            stateHandler.loading();
+            emit("infinite", stateHandler);
+        }
+        const { virtualizer } = injectVirtualContext();
+        const { forwardRef, currentRef } = useForwardExpose();
+        const observer = shallowRef(null);
+        onMounted(()=>{
+            if (state.value === LOADING_STATE.IDLE && __props.enableFirstLoad) return void doInfinite();
+            if (state.value === LOADING_STATE.LOADED) stateHandler.loading();
+            observer.value = new IntersectionObserver((entries)=>{
+                const entry = entries[0];
+                if (entry.isIntersecting && state.value === LOADING_STATE.LOADING) doInfinite();
+            }, {
+                root: context.parentEl?.value,
+                rootMargin: "0px 0px 0px 0px"
+            });
+            if (currentRef.value) observer.value?.observe(currentRef.value);
+        });
+        onUnmounted(()=>{
+            observer.value?.disconnect();
+            observer.value = null;
+        });
+        return (_ctx, _cache)=>(openBlock(), createElementBlock("div", {
+                ref: (el)=>{
+                    if (unref(virtualizer) && el) unref(virtualizer).measureElement(el);
+                    unref(forwardRef)(el);
+                },
+                class: normalizeClass(unref(cn)("rui-virtual-infinite", __props.ui?.root, __props.class)),
+                "data-scope": "virtual-infinite",
+                "data-part": "root",
+                "data-size": __props.size
+            }, [
+                "loading" === unref(state) ? renderSlot(_ctx.$slots, "loading", {
+                    key: 0
+                }, ()=>[
+                        createElementVNode("div", {
+                            class: normalizeClass(unref(cn)("rui-virtual-infinite_loading", __props.ui?.loading)),
+                            "data-scope": "virtual-infinite",
+                            "data-part": "loading",
+                            "data-size": __props.size
+                        }, [
+                            renderSlot(_ctx.$slots, "spinner", {}, ()=>[
+                                    createVNode(unref(LoaderCircle), {
+                                        class: normalizeClass(unref(cn)("rui-virtual-infinite_spinner", __props.ui?.spinner)),
+                                        "data-scope": "virtual-infinite",
+                                        "data-part": "spinner",
+                                        "data-size": __props.size
+                                    }, null, 8, [
+                                        "class",
+                                        "data-size"
+                                    ])
+                                ])
+                        ], 10, _hoisted_2)
+                    ]) : "complete" === unref(state) ? renderSlot(_ctx.$slots, "complete", {
+                    key: 1
+                }, ()=>[
+                        createElementVNode("div", {
+                            class: normalizeClass(unref(cn)("rui-virtual-infinite_complete", __props.ui?.complete)),
+                            "data-scope": "virtual-infinite",
+                            "data-part": "complete",
+                            "data-size": __props.size
+                        }, " No more results! ", 10, _hoisted_3)
+                    ]) : "error" === unref(state) ? renderSlot(_ctx.$slots, "error", {
+                    key: 2,
+                    retry: doInfinite
+                }, ()=>[
+                        createElementVNode("div", {
+                            class: normalizeClass(unref(cn)("rui-virtual-infinite_error", __props.ui?.error)),
+                            "data-scope": "virtual-infinite",
+                            "data-part": "error",
+                            "data-size": __props.size
+                        }, [
+                            _cache[0] || (_cache[0] = createElementVNode("span", null, "Oops something went wrong!", -1)),
+                            __props.enableRetry ? (openBlock(), createElementBlock("button", {
+                                key: 0,
+                                class: "retry",
+                                onClick: doInfinite
+                            }, " retry ")) : createCommentVNode("", true)
+                        ], 10, _hoisted_4)
+                    ]) : createCommentVNode("", true)
+            ], 10, _hoisted_1));
+    }
+});
+const VirtualInfiniteLoading = _sfc_main;
+export default VirtualInfiniteLoading;

package/dist/VirtualInfiniteLoading.vue.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes } from 'vue';
+import type { LoadingStateHandler } from '.';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    enableFirstLoad?: boolean;
+    enableRetry?: boolean;
+    size?: 'xs' | 'sm' | 'base' | 'lg';
+    ui?: {
+        root?: HTMLAttributes['class'];
+        loading?: HTMLAttributes['class'];
+        spinner?: HTMLAttributes['class'];
+        complete?: HTMLAttributes['class'];
+        error?: HTMLAttributes['class'];
+    };
+};
+type __VLS_Slots = {
+    loading: (props: {}) => any;
+    spinner: (props: {}) => any;
+    complete: (props: {}) => any;
+    error: (props: {
+        retry: () => void;
+    }) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    infinite: ($state: LoadingStateHandler) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInfinite?: (($state: LoadingStateHandler) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/VirtualList.js

@@ -0,0 +1,102 @@
+import { createBlock, createVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, unref, withCtx } from "vue";
+import { useForwardExpose } from "@raxium/vue-addons-shared";
+import { VirtualRoot } from "./index.js";
+import VirtualListImpl from "./VirtualListImpl.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    __name: "VirtualList",
+    props: {
+        dataSource: {},
+        estimateSize: {
+            type: Function
+        },
+        scrollToFn: {
+            type: Function
+        },
+        observeElementRect: {
+            type: Function
+        },
+        observeElementOffset: {
+            type: Function
+        },
+        debug: {
+            type: Boolean
+        },
+        initialRect: {},
+        onChange: {
+            type: Function
+        },
+        measureElement: {
+            type: Function
+        },
+        overscan: {},
+        horizontal: {
+            type: Boolean
+        },
+        paddingStart: {},
+        paddingEnd: {},
+        scrollPaddingStart: {},
+        scrollPaddingEnd: {},
+        initialOffset: {
+            type: [
+                Number,
+                Function
+            ]
+        },
+        getItemKey: {
+            type: Function
+        },
+        rangeExtractor: {
+            type: Function
+        },
+        scrollMargin: {},
+        gap: {},
+        indexAttribute: {},
+        initialMeasurementsCache: {},
+        lanes: {},
+        isScrollingResetDelay: {},
+        useScrollendEvent: {
+            type: Boolean
+        },
+        isRtl: {
+            type: Boolean
+        },
+        useAnimationFrameWithResizeObserver: {
+            type: Boolean
+        },
+        unstyled: {
+            type: Boolean
+        },
+        ui: {}
+    },
+    setup (__props, { expose: __expose }) {
+        const props = __props;
+        const virtualizer = ref(null);
+        __expose({
+            get virtualizer () {
+                return virtualizer.value;
+            }
+        });
+        const { forwardRef } = useForwardExpose();
+        return (_ctx, _cache)=>(openBlock(), createBlock(unref(VirtualRoot), null, {
+                default: withCtx(()=>[
+                        createVNode(VirtualListImpl, mergeProps({
+                            ...props,
+                            ..._ctx.$attrs
+                        }, {
+                            ref: (innerExpose)=>{
+                                virtualizer.value = innerExpose?.virtualizer ?? null;
+                                unref(forwardRef)(innerExpose);
+                            }
+                        }), {
+                            default: withCtx(()=>[
+                                    renderSlot(_ctx.$slots, "default")
+                                ]),
+                            _: 3
+                        }, 16)
+                    ]),
+                _: 3
+            }));
+    }
+});
+const VirtualList = _sfc_main;
+export default VirtualList;