@affino/datagrid-vue 0.1.0

package/dist/composables/useHorizontalViewport.js

@@ -0,0 +1,167 @@
+import { computed, ref, shallowRef, watch, watchEffect } from "vue";
+import { createEmptyColumnSnapshot, } from "../../core/virtualization/columnSnapshot";
+import { createHorizontalViewportController } from "../../core/viewport/horizontalViewportController";
+import { SCROLL_EPSILON } from "../../core/utils/constants";
+import { resolvePinMode } from "../core/virtualization/viewportConfig";
+export function useHorizontalViewport({ containerRef, columns, zoom, viewportWidth }) {
+    const scrollLeft = ref(0);
+    const pendingScrollLeft = ref(null);
+    const scrollFrame = ref(null);
+    const columnRef = "value" in columns ? columns : ref(columns);
+    const columnSnapshot = shallowRef(createEmptyColumnSnapshot());
+    const controller = createHorizontalViewportController({
+        getViewportWidth: () => viewportWidth.value,
+        getZoom: () => zoom.value,
+        getColumnKey: column => column.key,
+        resolvePinMode: resolvePinMode,
+        onSnapshot: snapshot => {
+            columnSnapshot.value = {
+                pinnedLeft: snapshot.pinnedLeft.map(entry => ({ ...entry })),
+                pinnedRight: snapshot.pinnedRight.map(entry => ({ ...entry })),
+                visibleScrollable: snapshot.visibleScrollable.map(entry => ({ ...entry })),
+                visibleColumns: snapshot.visibleColumns.map(entry => ({ ...entry })),
+                columnWidthMap: new Map(snapshot.columnWidthMap),
+                leftPadding: snapshot.leftPadding,
+                rightPadding: snapshot.rightPadding,
+                totalScrollableWidth: snapshot.totalScrollableWidth,
+                visibleScrollableWidth: snapshot.visibleScrollableWidth,
+                scrollableStart: snapshot.scrollableStart,
+                scrollableEnd: snapshot.scrollableEnd,
+                visibleStart: snapshot.visibleStart,
+                visibleEnd: snapshot.visibleEnd,
+                pinnedLeftWidth: snapshot.pinnedLeftWidth,
+                pinnedRightWidth: snapshot.pinnedRightWidth,
+                metrics: {
+                    widths: [...snapshot.metrics.widths],
+                    offsets: [...snapshot.metrics.offsets],
+                    totalWidth: snapshot.metrics.totalWidth,
+                },
+                containerWidthForColumns: snapshot.containerWidthForColumns,
+                indexColumnWidth: snapshot.indexColumnWidth,
+                scrollDirection: snapshot.scrollDirection,
+            };
+        },
+        onScrollApplied: payload => {
+            const container = containerRef.value;
+            if (container && Math.abs(container.scrollLeft - payload.appliedScrollLeft) > SCROLL_EPSILON) {
+                container.scrollLeft = payload.appliedScrollLeft;
+            }
+            scrollLeft.value = container?.scrollLeft ?? payload.appliedScrollLeft;
+        },
+    });
+    const effectiveViewportWidth = ref(controller.state.effectiveViewportWidth);
+    function syncState() {
+        effectiveViewportWidth.value = controller.state.effectiveViewportWidth;
+    }
+    function updateControllerMetrics() {
+        const container = containerRef.value;
+        if (!container)
+            return false;
+        controller.updateMetrics({
+            metrics: {
+                containerWidth: container.clientWidth,
+                scrollLeft: container.scrollLeft,
+                scrollWidth: container.scrollWidth,
+            },
+            columns: columnRef.value ?? [],
+        });
+        scrollLeft.value = container.scrollLeft;
+        syncState();
+        return true;
+    }
+    function runVirtualizer(scrollOverride) {
+        controller.runVirtualizer(scrollOverride);
+        syncState();
+    }
+    function clampScrollLeftValue(value) {
+        if (!Number.isFinite(value))
+            return 0;
+        if (!updateControllerMetrics()) {
+            return Math.max(0, value);
+        }
+        return controller.clampScrollLeftValue(value);
+    }
+    function handleHorizontalScroll(event) {
+        const target = event.target;
+        if (!target)
+            return;
+        if (!updateControllerMetrics())
+            return;
+        const nextLeft = controller.clampScrollLeftValue(target.scrollLeft);
+        pendingScrollLeft.value = nextLeft;
+        if (scrollFrame.value !== null)
+            return;
+        scrollFrame.value = requestAnimationFrame(() => {
+            scrollFrame.value = null;
+            if (pendingScrollLeft.value != null) {
+                const value = pendingScrollLeft.value;
+                pendingScrollLeft.value = null;
+                controller.runVirtualizer(value);
+                syncState();
+            }
+        });
+    }
+    function cancelScrollFrame() {
+        if (scrollFrame.value !== null) {
+            cancelAnimationFrame(scrollFrame.value);
+            scrollFrame.value = null;
+        }
+    }
+    function scrollToColumn(key) {
+        controller.scrollToColumn(key);
+        syncState();
+    }
+    watchEffect(() => {
+        const container = containerRef.value;
+        if (!container)
+            return;
+        if (!updateControllerMetrics())
+            return;
+        controller.runVirtualizer();
+        syncState();
+    });
+    watch(() => viewportWidth.value, () => {
+        if (!updateControllerMetrics())
+            return;
+        runVirtualizer();
+    });
+    watch(() => columnRef.value, () => {
+        if (!updateControllerMetrics())
+            return;
+        runVirtualizer();
+    });
+    watch(() => zoom.value, () => {
+        if (!updateControllerMetrics())
+            return;
+        runVirtualizer();
+    });
+    if (updateControllerMetrics()) {
+        runVirtualizer();
+    }
+    return {
+        scrollLeft,
+        effectiveViewportWidth: computed(() => effectiveViewportWidth.value),
+        columnVirtualization: computed(() => columnSnapshot.value),
+        clampScrollLeftValue,
+        handleHorizontalScroll,
+        scrollToColumn,
+        cancelScrollFrame,
+        pinnedLeftColumns: computed(() => columnSnapshot.value.pinnedLeft.map((entry) => entry.column)),
+        pinnedLeftEntries: computed(() => columnSnapshot.value.pinnedLeft),
+        pinnedRightColumns: computed(() => columnSnapshot.value.pinnedRight.map((entry) => entry.column)),
+        pinnedRightEntries: computed(() => columnSnapshot.value.pinnedRight),
+        visibleColumns: computed(() => columnSnapshot.value.visibleColumns.map((entry) => entry.column)),
+        visibleColumnEntries: computed(() => columnSnapshot.value.visibleColumns),
+        visibleScrollableColumns: computed(() => columnSnapshot.value.visibleScrollable.map((entry) => entry.column)),
+        visibleScrollableEntries: computed(() => columnSnapshot.value.visibleScrollable),
+        leftPadding: computed(() => columnSnapshot.value.leftPadding),
+        rightPadding: computed(() => columnSnapshot.value.rightPadding),
+        columnWidthMap: computed(() => columnSnapshot.value.columnWidthMap),
+        visibleStartCol: computed(() => columnSnapshot.value.visibleStart),
+        visibleEndCol: computed(() => columnSnapshot.value.visibleEnd),
+        scrollableRange: computed(() => ({
+            start: columnSnapshot.value.scrollableStart,
+            end: columnSnapshot.value.scrollableEnd,
+        })),
+    };
+}

package/dist/composables/useSelectableRows.d.ts

@@ -0,0 +1,24 @@
+import type { ComputedRef } from "vue";
+export type RowKey = string | number;
+export type RowData = Record<string, unknown>;
+interface UseSelectableRowsOptions<T extends RowData> {
+    rows: ComputedRef<T[]>;
+    modelValue: ComputedRef<(T | RowKey)[] | undefined>;
+    controlled: ComputedRef<boolean>;
+    emitUpdate?: (rows: T[]) => void;
+    rowKey: (row: T) => RowKey;
+}
+export interface UseSelectableRowsResult<T extends RowData> {
+    selectedRows: ComputedRef<T[]>;
+    selectedKeySet: ComputedRef<Set<RowKey>>;
+    allSelected: ComputedRef<boolean>;
+    isIndeterminate: ComputedRef<boolean>;
+    setSelection: (rows: T[]) => void;
+    clearSelection: () => void;
+    selectAll: () => void;
+    toggleRow: (row: T) => void;
+    isRowSelected: (row: T) => boolean;
+}
+export declare function useSelectableRows<T extends RowData>(options: UseSelectableRowsOptions<T>): UseSelectableRowsResult<T>;
+export {};
+//# sourceMappingURL=useSelectableRows.d.ts.map

package/dist/composables/useSelectableRows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectableRows.d.ts","sourceRoot":"","sources":["../../src/composables/useSelectableRows.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAEtC,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;AACpC,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAE7C,UAAU,wBAAwB,CAAC,CAAC,SAAS,OAAO;IAClD,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACtB,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,SAAS,CAAC,CAAA;IACnD,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAChC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IAChC,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;CAC3B;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,OAAO;IACxD,YAAY,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IAC9B,cAAc,EAAE,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IACxC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACjC,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IACjC,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;IAC3B,aAAa,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAA;CACnC;AAsBD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,OAAO,EACjD,OAAO,EAAE,wBAAwB,CAAC,CAAC,CAAC,GACnC,uBAAuB,CAAC,CAAC,CAAC,CA4G5B"}

package/dist/composables/useSelectableRows.js

@@ -0,0 +1,108 @@
+import { computed, ref, watch } from "vue";
+function resolveModelKeySet(model, rowKey) {
+    const keys = new Set();
+    if (!Array.isArray(model)) {
+        return keys;
+    }
+    for (const item of model) {
+        if (typeof item === "string" || typeof item === "number") {
+            keys.add(item);
+            continue;
+        }
+        if (item && typeof item === "object") {
+            keys.add(rowKey(item));
+        }
+    }
+    return keys;
+}
+export function useSelectableRows(options) {
+    const internalKeySet = ref(new Set());
+    const selectedKeySet = computed(() => options.controlled.value
+        ? resolveModelKeySet(options.modelValue.value, options.rowKey)
+        : new Set(internalKeySet.value));
+    const selectedRows = computed(() => {
+        const keys = selectedKeySet.value;
+        if (!keys.size) {
+            return [];
+        }
+        return options.rows.value.filter(row => keys.has(options.rowKey(row)));
+    });
+    const allSelected = computed(() => {
+        const rows = options.rows.value;
+        if (!rows.length) {
+            return false;
+        }
+        const keys = selectedKeySet.value;
+        for (const row of rows) {
+            if (!keys.has(options.rowKey(row))) {
+                return false;
+            }
+        }
+        return true;
+    });
+    const isIndeterminate = computed(() => {
+        const total = options.rows.value.length;
+        if (!total) {
+            return false;
+        }
+        const selected = selectedRows.value.length;
+        return selected > 0 && selected < total;
+    });
+    function syncInternalSelection(rows) {
+        internalKeySet.value = new Set(rows.map(row => options.rowKey(row)));
+    }
+    function commitSelection(rows) {
+        if (!options.controlled.value) {
+            syncInternalSelection(rows);
+        }
+        options.emitUpdate?.(rows);
+    }
+    function setSelection(rows) {
+        commitSelection(rows);
+    }
+    function clearSelection() {
+        commitSelection([]);
+    }
+    function selectAll() {
+        commitSelection(options.rows.value);
+    }
+    function isRowSelected(row) {
+        return selectedKeySet.value.has(options.rowKey(row));
+    }
+    function toggleRow(row) {
+        const key = options.rowKey(row);
+        const nextKeys = new Set(selectedKeySet.value);
+        if (nextKeys.has(key)) {
+            nextKeys.delete(key);
+        }
+        else {
+            nextKeys.add(key);
+        }
+        const nextRows = options.rows.value.filter(entry => nextKeys.has(options.rowKey(entry)));
+        commitSelection(nextRows);
+    }
+    watch(() => options.rows.value, rows => {
+        if (options.controlled.value) {
+            return;
+        }
+        const validKeys = new Set(rows.map(row => options.rowKey(row)));
+        const next = new Set();
+        for (const key of internalKeySet.value) {
+            if (validKeys.has(key)) {
+                next.add(key);
+            }
+        }
+        internalKeySet.value = next;
+    }, { deep: false });
+    return {
+        selectedRows,
+        selectedKeySet,
+        allSelected,
+        isIndeterminate,
+        setSelection,
+        clearSelection,
+        selectAll,
+        toggleRow,
+        isRowSelected,
+    };
+}

package/dist/composables/useSelectionOverlayAdapter.d.ts

@@ -0,0 +1,34 @@
+import { type Ref } from "vue";
+import type { UiTableOverlayHandle, UiTableOverlayRect, UiTableOverlayRectGroups, UiTableOverlayTransformInput } from "../types/overlay";
+import { type FillHandleStylePayload } from "/datagrid-core/selection/fillHandleStylePool";
+import type { TableOverlayScrollEmitter } from "./useTableOverlayScrollState";
+interface SelectionOverlayViewportState {
+    width: number;
+    height: number;
+    scrollLeft: number;
+    scrollTop: number;
+}
+export interface UseSelectionOverlayAdapterOptions {
+    overlayComponentRef: Ref<UiTableOverlayHandle | null>;
+    selectionRects: Ref<UiTableOverlayRect[]>;
+    activeSelectionRects: Ref<UiTableOverlayRect[]>;
+    fillPreviewRects: Ref<UiTableOverlayRect[]>;
+    cutPreviewRects: Ref<UiTableOverlayRect[]>;
+    cursorRect: Ref<UiTableOverlayRect | null>;
+    fillHandleStyle: Ref<FillHandleStylePayload | null>;
+    overlayViewport: Ref<SelectionOverlayViewportState>;
+    pinnedLeftOffset: Ref<number>;
+    pinnedRightOffset: Ref<number>;
+    overlayScrollState?: TableOverlayScrollEmitter;
+}
+export interface SelectionOverlayAdapterHandle {
+    setRects(payload: UiTableOverlayRectGroups): void;
+    setTransform(snapshot: UiTableOverlayTransformInput): void;
+    setFillHandleStyle(style: FillHandleStylePayload | null | undefined): void;
+    refresh(): void;
+    getLastRects(): UiTableOverlayRectGroups | null;
+    getLastTransform(): UiTableOverlayTransformInput | null;
+}
+export declare function useSelectionOverlayAdapter(options: UseSelectionOverlayAdapterOptions): SelectionOverlayAdapterHandle;
+export {};
+//# sourceMappingURL=useSelectionOverlayAdapter.d.ts.map

package/dist/composables/useSelectionOverlayAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionOverlayAdapter.d.ts","sourceRoot":"","sources":["../../src/composables/useSelectionOverlayAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACjE,OAAO,KAAK,EACV,oBAAoB,EACpB,kBAAkB,EAClB,wBAAwB,EACxB,4BAA4B,EAC7B,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAA0B,KAAK,sBAAsB,EAAE,MAAM,8CAA8C,CAAA;AAClH,OAAO,KAAK,EAAE,yBAAyB,EAA8B,MAAM,8BAA8B,CAAA;AAEzG,UAAU,6BAA6B;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,iCAAiC;IAChD,mBAAmB,EAAE,GAAG,CAAC,oBAAoB,GAAG,IAAI,CAAC,CAAA;IACrD,cAAc,EAAE,GAAG,CAAC,kBAAkB,EAAE,CAAC,CAAA;IACzC,oBAAoB,EAAE,GAAG,CAAC,kBAAkB,EAAE,CAAC,CAAA;IAC/C,gBAAgB,EAAE,GAAG,CAAC,kBAAkB,EAAE,CAAC,CAAA;IAC3C,eAAe,EAAE,GAAG,CAAC,kBAAkB,EAAE,CAAC,CAAA;IAC1C,UAAU,EAAE,GAAG,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAA;IAC1C,eAAe,EAAE,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAA;IACnD,eAAe,EAAE,GAAG,CAAC,6BAA6B,CAAC,CAAA;IACnD,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC7B,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC9B,kBAAkB,CAAC,EAAE,yBAAyB,CAAA;CAC/C;AAED,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,OAAO,EAAE,wBAAwB,GAAG,IAAI,CAAA;IACjD,YAAY,CAAC,QAAQ,EAAE,4BAA4B,GAAG,IAAI,CAAA;IAC1D,kBAAkB,CAAC,KAAK,EAAE,sBAAsB,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IAC1E,OAAO,IAAI,IAAI,CAAA;IACf,YAAY,IAAI,wBAAwB,GAAG,IAAI,CAAA;IAC/C,gBAAgB,IAAI,4BAA4B,GAAG,IAAI,CAAA;CACxD;AAoCD,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,iCAAiC,GAAG,6BAA6B,CA8KpH"}

package/dist/composables/useSelectionOverlayAdapter.js

@@ -0,0 +1,159 @@
+import { onScopeDispose, shallowRef, watch } from "vue";
+import { releaseFillHandleStyle } from "/datagrid-core/selection/fillHandleStylePool";
+function cloneTransform(input) {
+    return {
+        viewportWidth: input.viewportWidth,
+        viewportHeight: input.viewportHeight,
+        pinnedLeftTranslateX: input.pinnedLeftTranslateX,
+        pinnedRightTranslateX: input.pinnedRightTranslateX,
+    };
+}
+function normalizeViewportSnapshot(snapshot) {
+    if (!snapshot) {
+        return { width: 0, height: 0, scrollLeft: 0, scrollTop: 0 };
+    }
+    const width = Number.isFinite(snapshot.width) ? Math.max(0, snapshot.width) : 0;
+    const height = Number.isFinite(snapshot.height) ? Math.max(0, snapshot.height) : 0;
+    const scrollLeft = Number.isFinite(snapshot.scrollLeft) ? snapshot.scrollLeft : 0;
+    const scrollTop = Number.isFinite(snapshot.scrollTop) ? snapshot.scrollTop : 0;
+    return { width, height, scrollLeft, scrollTop };
+}
+function buildTransform(viewportState, pinnedLeftOffset, pinnedRightOffset) {
+    const { width, height, scrollLeft } = viewportState;
+    return {
+        viewportWidth: width,
+        viewportHeight: height,
+        pinnedLeftTranslateX: scrollLeft + pinnedLeftOffset,
+        pinnedRightTranslateX: scrollLeft - pinnedRightOffset,
+    };
+}
+export function useSelectionOverlayAdapter(options) {
+    const rectSnapshot = {
+        selection: undefined,
+        activeSelection: undefined,
+        fillPreview: undefined,
+        cutPreview: undefined,
+        cursor: null,
+    };
+    const cachedRects = shallowRef(rectSnapshot);
+    const cachedTransform = shallowRef(null);
+    const cachedFillHandle = shallowRef(undefined);
+    function applyRects(handle, payload) {
+        if (!handle || !payload) {
+            return;
+        }
+        handle.updateRects(payload);
+    }
+    function applyTransform(handle, snapshot) {
+        if (!handle || !snapshot) {
+            return;
+        }
+        handle.updateTransforms(snapshot);
+    }
+    function applyFillHandleStyle(handle, style) {
+        if (!handle) {
+            return;
+        }
+        handle.updateFillHandleStyle(style);
+    }
+    function refresh() {
+        const handle = options.overlayComponentRef.value;
+        if (!handle) {
+            return;
+        }
+        if (cachedTransform.value) {
+            handle.updateTransforms(cachedTransform.value);
+        }
+        if (cachedRects.value) {
+            handle.updateRects(cachedRects.value);
+        }
+        if (cachedFillHandle.value !== undefined) {
+            handle.updateFillHandleStyle(cachedFillHandle.value ?? null);
+        }
+    }
+    function updateRectSources(selection, activeSelection, fillPreview, cutPreview, cursor) {
+        rectSnapshot.selection = selection && selection.length ? selection : undefined;
+        rectSnapshot.activeSelection = activeSelection && activeSelection.length ? activeSelection : undefined;
+        rectSnapshot.fillPreview = fillPreview && fillPreview.length ? fillPreview : undefined;
+        rectSnapshot.cutPreview = cutPreview && cutPreview.length ? cutPreview : undefined;
+        rectSnapshot.cursor = cursor ?? null;
+        cachedRects.value = rectSnapshot;
+        applyRects(options.overlayComponentRef.value, rectSnapshot);
+    }
+    function setRects(payload) {
+        updateRectSources(payload.selection, payload.activeSelection, payload.fillPreview, payload.cutPreview, payload.cursor);
+    }
+    function setTransform(snapshot) {
+        cachedTransform.value = cloneTransform(snapshot);
+        applyTransform(options.overlayComponentRef.value, cachedTransform.value);
+    }
+    function setFillHandleStyle(style) {
+        const nextStyle = style ?? null;
+        const previous = cachedFillHandle.value;
+        if (previous && previous !== nextStyle) {
+            releaseFillHandleStyle(previous);
+        }
+        cachedFillHandle.value = nextStyle;
+        applyFillHandleStyle(options.overlayComponentRef.value, cachedFillHandle.value ?? null);
+    }
+    watch(() => options.overlayComponentRef.value, handle => {
+        if (handle) {
+            refresh();
+        }
+    }, { flush: "sync" });
+    watch([
+        () => options.selectionRects.value,
+        () => options.activeSelectionRects.value,
+        () => options.fillPreviewRects.value,
+        () => options.cutPreviewRects.value,
+        () => options.cursorRect.value,
+    ], ([selection, activeSelection, fillPreview, cutPreview, cursor]) => {
+        updateRectSources(selection, activeSelection, fillPreview, cutPreview, cursor);
+    }, { flush: "sync" });
+    watch(() => options.fillHandleStyle.value, style => {
+        setFillHandleStyle(style ?? null);
+    }, { flush: "sync" });
+    if (options.overlayScrollState) {
+        const unsubscribe = options.overlayScrollState.subscribe((snapshot) => {
+            const viewportState = {
+                width: snapshot.viewportWidth,
+                height: snapshot.viewportHeight,
+                scrollLeft: snapshot.scrollLeft,
+                scrollTop: snapshot.scrollTop,
+            };
+            const transform = buildTransform(viewportState, snapshot.pinnedOffsetLeft, snapshot.pinnedOffsetRight);
+            setTransform(transform);
+        });
+        onScopeDispose(() => {
+            unsubscribe();
+        });
+    }
+    else {
+        watch(() => ({
+            viewport: normalizeViewportSnapshot(options.overlayViewport.value),
+            pinnedLeftOffset: Number.isFinite(options.pinnedLeftOffset.value)
+                ? options.pinnedLeftOffset.value
+                : 0,
+            pinnedRightOffset: Number.isFinite(options.pinnedRightOffset.value)
+                ? options.pinnedRightOffset.value
+                : 0,
+        }), ({ viewport, pinnedLeftOffset, pinnedRightOffset }) => {
+            const transform = buildTransform(viewport, pinnedLeftOffset, pinnedRightOffset);
+            setTransform(transform);
+        }, { flush: "sync" });
+    }
+    onScopeDispose(() => {
+        if (cachedFillHandle.value) {
+            releaseFillHandleStyle(cachedFillHandle.value);
+            cachedFillHandle.value = null;
+        }
+    });
+    return {
+        setRects,
+        setTransform,
+        setFillHandleStyle,
+        refresh,
+        getLastRects: () => cachedRects.value,
+        getLastTransform: () => cachedTransform.value,
+    };
+}

package/dist/composables/useServerRowModel.d.ts

@@ -0,0 +1,30 @@
+import { type ComputedRef, type Ref } from "vue";
+import { type ServerRowModelDiagnostics, type ServerRowModelOptions as CoreServerRowModelOptions, type ServerRowModelDebug } from "../../core/serverRowModel/serverRowModel";
+export type { ServerRowModelFetchResult } from "../../core/serverRowModel/serverRowModel";
+export type { ServerRowModelDiagnostics } from "../../core/serverRowModel/serverRowModel";
+export interface UseServerRowModelOptions<T> extends CoreServerRowModelOptions<T> {
+}
+export interface ServerRowModel<T> {
+    rows: ComputedRef<T[]>;
+    loading: ComputedRef<boolean>;
+    error: Ref<Error | null>;
+    blocks: ComputedRef<Map<number, T[]>>;
+    total: Ref<number | null>;
+    loadedRanges: ComputedRef<Array<{
+        start: number;
+        end: number;
+    }>>;
+    progress: ComputedRef<number | null>;
+    blockErrors: ComputedRef<Map<number, Error>>;
+    getRowAt: (index: number) => T | undefined;
+    getRowCount: () => number;
+    refreshBlock: (blockIndex: number) => Promise<void>;
+    fetchBlock: (startIndex: number) => Promise<void>;
+    diagnostics: ComputedRef<ServerRowModelDiagnostics>;
+    __debug?: ServerRowModelDebug<T>;
+    reset: () => void;
+    abortAll: () => void;
+    dispose: () => void;
+}
+export declare function useServerRowModel<T>(options: UseServerRowModelOptions<T>): ServerRowModel<T>;
+//# sourceMappingURL=useServerRowModel.d.ts.map

package/dist/composables/useServerRowModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useServerRowModel.d.ts","sourceRoot":"","sources":["../../src/composables/useServerRowModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,WAAW,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACtE,OAAO,EAEL,KAAK,yBAAyB,EAC9B,KAAK,qBAAqB,IAAI,yBAAyB,EACvD,KAAK,mBAAmB,EACzB,MAAM,0CAA0C,CAAA;AAEjD,YAAY,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAA;AACzF,YAAY,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAA;AAEzF,MAAM,WAAW,wBAAwB,CAAC,CAAC,CAAE,SAAQ,yBAAyB,CAAC,CAAC,CAAC;CAAG;AAEpF,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACtB,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC7B,KAAK,EAAE,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,CAAA;IACxB,MAAM,EAAE,WAAW,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IACrC,KAAK,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IACzB,YAAY,EAAE,WAAW,CAAC,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAA;IAChE,QAAQ,EAAE,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IACpC,WAAW,EAAE,WAAW,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS,CAAA;IAC1C,WAAW,EAAE,MAAM,MAAM,CAAA;IACzB,YAAY,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACnD,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACjD,WAAW,EAAE,WAAW,CAAC,yBAAyB,CAAC,CAAA;IACnD,OAAO,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAA;IAChC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,OAAO,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CA2C5F"}

package/dist/composables/useServerRowModel.js

@@ -0,0 +1,44 @@
+import { computed, shallowRef } from "vue";
+import { createServerRowModel, } from "../../core/serverRowModel/serverRowModel";
+export function useServerRowModel(options) {
+    const createSignal = (initial) => shallowRef(initial);
+    const model = createServerRowModel(options, { createSignal });
+    const rows = computed(() => model.rows.value);
+    const loading = computed(() => model.loading.value);
+    const blocks = computed(() => model.blocks.value);
+    const loadedRanges = computed(() => model.loadedRanges.value);
+    const progress = computed(() => model.progress.value);
+    const blockErrors = computed(() => model.blockErrors.value);
+    const diagnostics = computed(() => model.diagnostics.value);
+    const error = computed({
+        get: () => model.error.value,
+        set: next => {
+            model.error.value = next;
+        },
+    });
+    const total = computed({
+        get: () => model.total.value,
+        set: next => {
+            model.total.value = next;
+        },
+    });
+    return {
+        rows,
+        loading,
+        error,
+        blocks,
+        total,
+        loadedRanges,
+        progress,
+        blockErrors,
+        getRowAt: model.getRowAt,
+        getRowCount: model.getRowCount,
+        refreshBlock: model.refreshBlock,
+        fetchBlock: model.fetchBlock,
+        diagnostics,
+        __debug: model.__debug,
+        reset: model.reset,
+        abortAll: model.abortAll,
+        dispose: model.dispose,
+    };
+}

package/dist/composables/useTableAdvancedFilterModal.d.ts

@@ -0,0 +1,30 @@
+import { type ComputedRef } from "vue";
+import type { UiTableColumn } from "../../core/types";
+import type { FilterCondition } from "./useTableFilters";
+interface UseTableAdvancedFilterModalOptions {
+    visibleColumns: ComputedRef<UiTableColumn[]>;
+    getAdvancedFilter: (columnKey: string) => FilterCondition | null;
+    setAdvancedFilter: (columnKey: string, condition: FilterCondition | null) => void;
+    clearAdvancedFilter: (columnKey: string) => void;
+    refresh: (force?: boolean) => void;
+    scheduleOverlayUpdate: () => void;
+    closeActiveMenu: () => void;
+}
+export interface UseTableAdvancedFilterModalResult {
+    advancedModalState: {
+        open: boolean;
+        columnKey: string | null;
+    };
+    advancedModalColumn: ComputedRef<UiTableColumn | null>;
+    advancedModalType: ComputedRef<FilterCondition["type"]>;
+    advancedModalCondition: ComputedRef<FilterCondition | null>;
+    openAdvancedFilterModal: (columnKey: string) => void;
+    handleAdvancedModalApply: (condition: FilterCondition | null) => void;
+    handleAdvancedModalClear: () => void;
+    handleAdvancedModalCancel: () => void;
+    handleAdvancedFilterApply: (columnKey: string, condition: FilterCondition | null) => void;
+    handleAdvancedFilterClear: (columnKey: string) => void;
+}
+export declare function useTableAdvancedFilterModal(options: UseTableAdvancedFilterModalOptions): UseTableAdvancedFilterModalResult;
+export {};
+//# sourceMappingURL=useTableAdvancedFilterModal.d.ts.map

package/dist/composables/useTableAdvancedFilterModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableAdvancedFilterModal.d.ts","sourceRoot":"","sources":["../../src/composables/useTableAdvancedFilterModal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,WAAW,EAAE,MAAM,KAAK,CAAA;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAExD,UAAU,kCAAkC;IAC1C,cAAc,EAAE,WAAW,CAAC,aAAa,EAAE,CAAC,CAAA;IAC5C,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,eAAe,GAAG,IAAI,CAAA;IAChE,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAA;IACjF,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,qBAAqB,EAAE,MAAM,IAAI,CAAA;IACjC,eAAe,EAAE,MAAM,IAAI,CAAA;CAC5B;AAED,MAAM,WAAW,iCAAiC;IAChD,kBAAkB,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAA;IAC/D,mBAAmB,EAAE,WAAW,CAAC,aAAa,GAAG,IAAI,CAAC,CAAA;IACtD,iBAAiB,EAAE,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAA;IACvD,sBAAsB,EAAE,WAAW,CAAC,eAAe,GAAG,IAAI,CAAC,CAAA;IAC3D,uBAAuB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,wBAAwB,EAAE,CAAC,SAAS,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAA;IACrE,wBAAwB,EAAE,MAAM,IAAI,CAAA;IACpC,yBAAyB,EAAE,MAAM,IAAI,CAAA;IACrC,yBAAyB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAA;IACzF,yBAAyB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CACvD;AAED,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,kCAAkC,GAAG,iCAAiC,CAqF1H"}