@affino/datagrid-vue 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableTheme.d.ts","sourceRoot":"","sources":["../../src/composables/useTableTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAK1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AAIzE,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAA;AAEzE,UAAU,oBAAoB;IAC5B,eAAe,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAA;CACnD;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACrC,cAAc,EAAE,WAAW,CAAC,aAAa,CAAC,CAAA;IAC1C,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACtC,uBAAuB,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IAChD,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACnC,mBAAmB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACxC,wBAAwB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC7C,oBAAoB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACzC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACjC,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACtC,sBAAsB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC3C,kBAAkB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACvC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAClC,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACnC,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACpC,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACpC,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACrC,qBAAqB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1C,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CACtC;AAsFD,wBAAgB,aAAa,CAAC,EAAE,eAAe,EAAE,EAAE,oBAAoB,GAAG,mBAAmB,CAsL5F"}

package/dist/composables/useTableTheme.js

@@ -0,0 +1,207 @@
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { applyTableTheme, defaultStyleConfig, THEME_TOKEN_VARIABLE_MAP } from "/datagrid-core/theme";
+const TABLE_BASE_CLASS = "ui-table-theme__table";
+const HEADER_ROW_BASE_CLASS = "ui-table-theme__header-row";
+const HEADER_CELL_BASE_CLASS = "ui-table-theme__header-cell";
+const HEADER_SELECTION_CELL_BASE_CLASS = "ui-table-theme__header-selection-cell";
+const HEADER_INDEX_CELL_BASE_CLASS = "ui-table-theme__header-index-cell";
+const BODY_ROW_BASE_CLASS = "ui-table-theme__body-row";
+const BODY_CELL_BASE_CLASS = "ui-table-theme__body-cell";
+const BODY_SELECTION_CELL_BASE_CLASS = "ui-table-theme__body-selection-cell";
+const BODY_INDEX_CELL_BASE_CLASS = "ui-table-theme__body-index-cell";
+const GROUP_ROW_BASE_CLASS = "ui-table-theme__group-row";
+const GROUP_CELL_BASE_CLASS = "ui-table-theme__group-cell";
+const GROUP_CARET_BASE_CLASS = "ui-table-theme__group-caret";
+const SUMMARY_ROW_BASE_CLASS = "ui-table-theme__summary-row";
+const SUMMARY_CELL_BASE_CLASS = "ui-table-theme__summary-cell";
+const SUMMARY_LABEL_CELL_BASE_CLASS = "ui-table-theme__summary-label-cell";
+const SELECTED_ROW_BASE_CLASS = "ui-table-theme__body-row--selected";
+function mergeClassValues(...values) {
+    const parts = [];
+    for (const value of values) {
+        if (!value)
+            continue;
+        if (typeof value === "string") {
+            const trimmed = value.trim();
+            if (trimmed)
+                parts.push(trimmed);
+            continue;
+        }
+        if (Array.isArray(value)) {
+            const merged = mergeClassValues(...value);
+            if (merged)
+                parts.push(merged);
+            continue;
+        }
+        for (const [key, active] of Object.entries(value)) {
+            if (active)
+                parts.push(key);
+        }
+    }
+    return parts.join(" ").trim();
+}
+function mergeStyleConfig(base, override) {
+    const tokens = { ...base.tokens };
+    const applyTokenPatch = (patch) => {
+        if (!patch)
+            return;
+        for (const [key, value] of Object.entries(patch)) {
+            if (value == null)
+                continue;
+            tokens[key] = value;
+        }
+    };
+    if (!override) {
+        return {
+            table: { ...base.table },
+            header: { ...base.header },
+            body: { ...base.body },
+            group: { ...base.group },
+            summary: { ...base.summary },
+            state: { ...base.state },
+            tokens,
+        };
+    }
+    applyTokenPatch(override.tokenVariants?.default);
+    const activeVariant = override.activeTokenVariant;
+    if (activeVariant) {
+        applyTokenPatch(override.tokenVariants?.[activeVariant]);
+    }
+    applyTokenPatch(override.tokens);
+    return {
+        table: { ...base.table, ...(override.table ?? {}) },
+        header: { ...base.header, ...(override.header ?? {}) },
+        body: { ...base.body, ...(override.body ?? {}) },
+        group: { ...base.group, ...(override.group ?? {}) },
+        summary: { ...base.summary, ...(override.summary ?? {}) },
+        state: { ...base.state, ...(override.state ?? {}) },
+        tokens,
+    };
+}
+export function useTableTheme({ normalizedProps }) {
+    const documentThemeVariant = ref(undefined);
+    let documentClassObserver = null;
+    const tableRootRef = ref(null);
+    function evaluateDocumentThemeVariant(config) {
+        if (!config?.inheritThemeFromDocument) {
+            return undefined;
+        }
+        if (typeof document === "undefined") {
+            return config?.defaultTokenVariant;
+        }
+        const darkClass = config.documentDarkClass ?? "dark";
+        const isDark = document.documentElement.classList.contains(darkClass);
+        return isDark ? "dark" : config.defaultTokenVariant ?? "light";
+    }
+    watch(() => normalizedProps.value.styleConfig, (config, _oldConfig, onCleanup) => {
+        if (!config?.inheritThemeFromDocument || typeof document === "undefined" || typeof MutationObserver === "undefined") {
+            documentThemeVariant.value = evaluateDocumentThemeVariant(config);
+            if (documentClassObserver) {
+                documentClassObserver.disconnect();
+                documentClassObserver = null;
+            }
+            return;
+        }
+        const updateFromDocument = () => {
+            documentThemeVariant.value = evaluateDocumentThemeVariant(config);
+        };
+        updateFromDocument();
+        if (documentClassObserver) {
+            documentClassObserver.disconnect();
+        }
+        documentClassObserver = new MutationObserver(updateFromDocument);
+        documentClassObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        onCleanup(() => {
+            if (documentClassObserver) {
+                documentClassObserver.disconnect();
+                documentClassObserver = null;
+            }
+        });
+    }, { immediate: true });
+    const resolvedStyleOverride = computed(() => {
+        const config = normalizedProps.value.styleConfig;
+        if (!config) {
+            return null;
+        }
+        const activeVariant = config.activeTokenVariant ?? (config.inheritThemeFromDocument ? documentThemeVariant.value : undefined) ?? config.defaultTokenVariant;
+        if (!activeVariant) {
+            return config;
+        }
+        return {
+            ...config,
+            activeTokenVariant: activeVariant,
+        };
+    });
+    const styleClasses = computed(() => mergeStyleConfig(defaultStyleConfig, resolvedStyleOverride.value));
+    const themeTokens = computed(() => styleClasses.value.tokens);
+    const tableThemeVars = computed(() => {
+        const tokens = themeTokens.value;
+        const vars = {};
+        for (const [tokenKey, cssVar] of Object.entries(THEME_TOKEN_VARIABLE_MAP)) {
+            const value = tokens[tokenKey];
+            if (value != null) {
+                vars[cssVar] = value;
+            }
+        }
+        return vars;
+    });
+    function applyThemeToRoot(tokens) {
+        const root = tableRootRef.value?.closest?.(".ui-table-theme-root") ?? tableRootRef.value;
+        if (root instanceof HTMLElement) {
+            applyTableTheme(root, tokens);
+        }
+    }
+    watch(themeTokens, tokens => {
+        applyThemeToRoot(tokens);
+    }, { immediate: true });
+    onMounted(() => {
+        applyThemeToRoot(themeTokens.value);
+    });
+    onBeforeUnmount(() => {
+        if (documentClassObserver) {
+            documentClassObserver.disconnect();
+            documentClassObserver = null;
+        }
+    });
+    const tableWrapperClass = computed(() => mergeClassValues(TABLE_BASE_CLASS, styleClasses.value.table.wrapper));
+    const tableContainerBaseClass = computed(() => styleClasses.value.table.container ?? "");
+    const headerRowClass = computed(() => mergeClassValues(HEADER_ROW_BASE_CLASS, styleClasses.value.header.row));
+    const headerCellBaseClass = computed(() => mergeClassValues(HEADER_CELL_BASE_CLASS, styleClasses.value.header.cell));
+    const headerSelectionCellClass = computed(() => mergeClassValues(HEADER_SELECTION_CELL_BASE_CLASS, styleClasses.value.header.selectionCell ?? styleClasses.value.header.cell));
+    const headerIndexCellClass = computed(() => mergeClassValues(HEADER_INDEX_CELL_BASE_CLASS, styleClasses.value.header.indexCell ?? styleClasses.value.header.cell));
+    const bodyRowClass = computed(() => mergeClassValues(BODY_ROW_BASE_CLASS, styleClasses.value.body.row));
+    const bodyCellBaseClass = computed(() => mergeClassValues(BODY_CELL_BASE_CLASS, styleClasses.value.body.cell));
+    const bodySelectionCellClass = computed(() => mergeClassValues(BODY_SELECTION_CELL_BASE_CLASS, styleClasses.value.body.selectionCell ?? styleClasses.value.body.cell));
+    const bodyIndexCellClass = computed(() => mergeClassValues(BODY_INDEX_CELL_BASE_CLASS, styleClasses.value.body.indexCell ?? styleClasses.value.body.cell));
+    const groupRowClass = computed(() => mergeClassValues(GROUP_ROW_BASE_CLASS, styleClasses.value.group.row));
+    const groupCellClass = computed(() => mergeClassValues(GROUP_CELL_BASE_CLASS, styleClasses.value.group.cell));
+    const groupCaretClass = computed(() => mergeClassValues(GROUP_CARET_BASE_CLASS, styleClasses.value.group.caret));
+    const summaryRowClass = computed(() => mergeClassValues(SUMMARY_ROW_BASE_CLASS, styleClasses.value.summary.row));
+    const summaryCellClass = computed(() => mergeClassValues(SUMMARY_CELL_BASE_CLASS, styleClasses.value.summary.cell ?? styleClasses.value.body.cell));
+    const summaryLabelCellClass = computed(() => mergeClassValues(SUMMARY_LABEL_CELL_BASE_CLASS, styleClasses.value.summary.labelCell ?? styleClasses.value.summary.cell ?? styleClasses.value.body.cell));
+    const selectedRowClass = computed(() => mergeClassValues(SELECTED_ROW_BASE_CLASS, styleClasses.value.state.selectedRow));
+    return {
+        tableRootRef,
+        tableThemeVars,
+        tableWrapperClass,
+        tableContainerBaseClass,
+        headerRowClass,
+        headerCellBaseClass,
+        headerSelectionCellClass,
+        headerIndexCellClass,
+        bodyRowClass,
+        bodyCellBaseClass,
+        bodySelectionCellClass,
+        bodyIndexCellClass,
+        groupRowClass,
+        groupCellClass,
+        groupCaretClass,
+        summaryRowClass,
+        summaryCellClass,
+        summaryLabelCellClass,
+        selectedRowClass,
+    };
+}

package/dist/composables/useTableViewport.d.ts

@@ -0,0 +1,103 @@
+import type { ComputedRef, Ref } from "vue";
+import type { UiTableColumn, VisibleRow } from "../../core/types";
+import { type RowPoolItem, type TableViewportImperativeCallbacks, type TableViewportState, type ViewportMetricsSnapshot, type TableViewportRuntimeOverrides, type ViewportSyncTargets } from "../../core/viewport/tableViewportController";
+import type { ColumnMetric } from "../core/virtualization/types";
+import type { ServerRowModel } from "./useServerRowModel";
+export type { ColumnMetric, ColumnPinMode, ColumnVirtualizationSnapshot } from "../core/virtualization/types";
+export type { ImperativeColumnUpdatePayload, ImperativeRowUpdatePayload, ImperativeScrollSyncPayload, RowPoolItem, TableViewportImperativeCallbacks, TableViewportState, ViewportMetricsSnapshot, } from "../../core/viewport/tableViewportController";
+export interface UseTableViewportOptions {
+    containerRef: Ref<HTMLDivElement | null>;
+    headerRef: Ref<HTMLElement | null>;
+    processedRows: ComputedRef<VisibleRow[]>;
+    columns: Ref<UiTableColumn[]> | ComputedRef<UiTableColumn[]>;
+    zoom: Ref<number>;
+    onAfterScroll?: () => void;
+    onNearBottom?: () => void;
+    isLoading?: Ref<boolean>;
+    rowHeightMode?: Ref<"fixed" | "auto"> | "fixed" | "auto";
+    baseRowHeight?: Ref<number> | number;
+    viewportMetrics?: Ref<ViewportMetricsSnapshot | null> | null;
+    imperativeCallbacks?: TableViewportImperativeCallbacks;
+    serverIntegration?: {
+        enabled?: Ref<boolean> | ComputedRef<boolean> | boolean;
+        rowModel: ServerRowModel<unknown> | null;
+    };
+    normalizeAndClampScroll?: boolean;
+    runtime?: TableViewportRuntimeOverrides;
+    syncTargets?: Ref<ViewportSyncTargets | null> | ComputedRef<ViewportSyncTargets | null>;
+}
+export interface UseTableViewportResult {
+    scrollTop: Ref<number>;
+    scrollLeft: Ref<number>;
+    viewportHeight: Ref<number>;
+    viewportWidth: Ref<number>;
+    totalRowCount: Ref<number>;
+    effectiveRowHeight: Ref<number>;
+    visibleCount: Ref<number>;
+    poolSize: Ref<number>;
+    totalContentHeight: Ref<number>;
+    startIndex: Ref<number>;
+    endIndex: Ref<number>;
+    visibleRows: Ref<VisibleRow[]>;
+    visibleRowsPool: Ref<RowPoolItem[]>;
+    rowPoolVersion: Ref<number>;
+    virtualizationEnabled: Ref<boolean>;
+    visibleColumns: Ref<UiTableColumn[]>;
+    visibleColumnEntries: Ref<ColumnMetric[]>;
+    visibleScrollableColumns: Ref<UiTableColumn[]>;
+    visibleScrollableEntries: Ref<ColumnMetric[]>;
+    pinnedLeftColumns: Ref<UiTableColumn[]>;
+    pinnedLeftEntries: Ref<ColumnMetric[]>;
+    pinnedRightColumns: Ref<UiTableColumn[]>;
+    pinnedRightEntries: Ref<ColumnMetric[]>;
+    leftPadding: Ref<number>;
+    rightPadding: Ref<number>;
+    columnWidthMap: Ref<Map<string, number>>;
+    visibleStartCol: Ref<number>;
+    visibleEndCol: Ref<number>;
+    scrollableRange: Ref<{
+        start: number;
+        end: number;
+    }>;
+    columnVirtualState: Ref<{
+        start: number;
+        end: number;
+        visibleStart: number;
+        visibleEnd: number;
+        overscanLeading: number;
+        overscanTrailing: number;
+        poolSize: number;
+        visibleCount: number;
+        totalCount: number;
+        indexColumnWidth: number;
+        pinnedRightWidth: number;
+    }>;
+    clampScrollTopValue: (value: number) => number;
+    handleScroll: (event: Event) => void;
+    updateViewportHeight: () => void;
+    measureRowHeight: () => void;
+    cancelScrollRaf: () => void;
+    scrollToRow: (index: number) => void;
+    scrollToColumn: (key: string) => void;
+    isRowVisible: (index: number) => boolean;
+    debugMode: Ref<boolean>;
+    fps: Ref<number>;
+    frameTime: Ref<number>;
+    droppedFrames: Ref<number>;
+    layoutReads: Ref<number>;
+    layoutWrites: Ref<number>;
+    syncScrollRate: Ref<number>;
+    heavyUpdateRate: Ref<number>;
+    virtualizerUpdates: Ref<number>;
+    virtualizerSkips: Ref<number>;
+    state: Ref<TableViewportState>;
+    visibleRange: Ref<{
+        start: number;
+        end: number;
+    }>;
+    attach: () => void;
+    detach: () => void;
+    refresh: (force?: boolean) => void;
+}
+export declare function useTableViewport(options: UseTableViewportOptions): UseTableViewportResult;
+//# sourceMappingURL=useTableViewport.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableViewport.d.ts","sourceRoot":"","sources":["../../src/composables/useTableViewport.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,KAAK,CAAA;AAEvD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAGjE,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,gCAAgC,EAErC,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAC5B,KAAK,6BAA6B,EAClC,KAAK,mBAAmB,EACzB,MAAM,6CAA6C,CAAA;AAEpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAGzD,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAA;AAC7G,YAAY,EACV,6BAA6B,EAC7B,0BAA0B,EAC1B,2BAA2B,EAC3B,WAAW,EACX,gCAAgC,EAChC,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,6CAA6C,CAAA;AAqDpD,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACxC,SAAS,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAClC,aAAa,EAAE,WAAW,CAAC,UAAU,EAAE,CAAC,CAAA;IACxC,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,CAAC,CAAA;IAC5D,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACxB,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,GAAG,OAAO,GAAG,MAAM,CAAA;IACxD,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IACpC,eAAe,CAAC,EAAE,GAAG,CAAC,uBAAuB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IAC5D,mBAAmB,CAAC,EAAE,gCAAgC,CAAA;IACtD,iBAAiB,CAAC,EAAE;QAClB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG,OAAO,CAAA;QACvD,QAAQ,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA;KACzC,CAAA;IACD,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,OAAO,CAAC,EAAE,6BAA6B,CAAA;IACvC,WAAW,CAAC,EAAE,GAAG,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,WAAW,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;CACxF;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACtB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACvB,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC3B,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC1B,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC1B,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC/B,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACrB,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC/B,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACvB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACrB,WAAW,EAAE,GAAG,CAAC,UAAU,EAAE,CAAC,CAAA;IAC9B,eAAe,EAAE,GAAG,CAAC,WAAW,EAAE,CAAC,CAAA;IACnC,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC3B,qBAAqB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACnC,cAAc,EAAE,GAAG,CAAC,aAAa,EAAE,CAAC,CAAA;IACpC,oBAAoB,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC,CAAA;IACzC,wBAAwB,EAAE,GAAG,CAAC,aAAa,EAAE,CAAC,CAAA;IAC9C,wBAAwB,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC,CAAA;IAC7C,iBAAiB,EAAE,GAAG,CAAC,aAAa,EAAE,CAAC,CAAA;IACvC,iBAAiB,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC,CAAA;IACtC,kBAAkB,EAAE,GAAG,CAAC,aAAa,EAAE,CAAC,CAAA;IACxC,kBAAkB,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC,CAAA;IACvC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACxB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,cAAc,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IACxC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC5B,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC1B,eAAe,EAAE,GAAG,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpD,kBAAkB,EAAE,GAAG,CAAC;QACtB,KAAK,EAAE,MAAM,CAAA;QACb,GAAG,EAAE,MAAM,CAAA;QACX,YAAY,EAAE,MAAM,CAAA;QACpB,UAAU,EAAE,MAAM,CAAA;QAClB,eAAe,EAAE,MAAM,CAAA;QACvB,gBAAgB,EAAE,MAAM,CAAA;QACxB,QAAQ,EAAE,MAAM,CAAA;QAChB,YAAY,EAAE,MAAM,CAAA;QACpB,UAAU,EAAE,MAAM,CAAA;QAClB,gBAAgB,EAAE,MAAM,CAAA;QACxB,gBAAgB,EAAE,MAAM,CAAA;KACzB,CAAC,CAAA;IACF,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC9C,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACpC,oBAAoB,EAAE,MAAM,IAAI,CAAA;IAChC,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IACxC,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACvB,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAChB,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACtB,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC1B,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACxB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC3B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC5B,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC/B,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC7B,KAAK,EAAE,GAAG,CAAC,kBAAkB,CAAC,CAAA;IAC9B,YAAY,EAAE,GAAG,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACjD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACnC;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,sBAAsB,CA2UzF"}

package/dist/composables/useTableViewport.js

@@ -0,0 +1,298 @@
+import { computed, onBeforeUnmount, onMounted, shallowRef, unref, watch } from "vue";
+import { BASE_ROW_HEIGHT } from "../../core/utils/constants";
+import { createTableViewportController, } from "../../core/viewport/tableViewportController";
+import { resolvePinMode, resolveRowHeightModeValue } from "../core/virtualization/viewportConfig";
+import { createViewportHostEnvironment } from "../adapters/viewportHostEnvironment";
+function createVueWritableSignal(registry, initial) {
+    const target = shallowRef(initial);
+    const signal = {};
+    Object.defineProperty(signal, "value", {
+        get: () => target.value,
+        set: (next) => {
+            target.value = next;
+        },
+        enumerable: true,
+        configurable: true,
+    });
+    registry.set(signal, target);
+    return signal;
+}
+function getSignalRef(registry, signal) {
+    const ref = registry.get(signal);
+    if (!ref) {
+        throw new Error("Missing signal binding for table viewport controller");
+    }
+    return ref;
+}
+function resolveBaseRowHeight(source) {
+    const value = typeof source === "number" ? source : unref(source ?? BASE_ROW_HEIGHT);
+    if (Number.isFinite(value) && value > 0) {
+        return value;
+    }
+    return BASE_ROW_HEIGHT;
+}
+function resolveServerIntegration(integration) {
+    if (!integration) {
+        return null;
+    }
+    const enabledSource = integration.enabled ?? true;
+    const enabled = typeof enabledSource === "boolean" ? enabledSource : Boolean(unref(enabledSource));
+    return {
+        rowModel: integration.rowModel ?? null,
+        enabled,
+    };
+}
+export function useTableViewport(options) {
+    const signalRegistry = new WeakMap();
+    const visibleRowsRef = shallowRef([]);
+    const visibleRowsPoolRef = shallowRef([]);
+    const rowPoolVersionRef = shallowRef(0);
+    const initialServerIntegration = resolveServerIntegration(options.serverIntegration);
+    const composeImperativeCallbacks = (callbacks) => {
+        const base = callbacks ?? {};
+        const onRowsHandler = base.onRows;
+        return {
+            ...base,
+            onRows: payload => {
+                const sourceVisibleRows = Array.isArray(payload.visibleRows)
+                    ? payload.visibleRows
+                    : payload.pool.reduce((acc, item) => {
+                        if (item.entry)
+                            acc.push(item.entry);
+                        return acc;
+                    }, []);
+                visibleRowsRef.value = sourceVisibleRows.slice();
+                visibleRowsPoolRef.value = payload.pool.slice();
+                if (typeof payload.version === "number") {
+                    rowPoolVersionRef.value = payload.version;
+                }
+                if (typeof onRowsHandler === "function") {
+                    onRowsHandler(payload);
+                }
+            },
+        };
+    };
+    const controller = createTableViewportController({
+        resolvePinMode,
+        getColumnKey: column => column.key,
+        createSignal: initial => createVueWritableSignal(signalRegistry, initial),
+        onAfterScroll: options.onAfterScroll,
+        onNearBottom: options.onNearBottom,
+        imperativeCallbacks: composeImperativeCallbacks(options.imperativeCallbacks),
+        serverIntegration: initialServerIntegration ?? undefined,
+        hostEnvironment: createViewportHostEnvironment(),
+        normalizeAndClampScroll: options.normalizeAndClampScroll,
+        runtime: options.runtime,
+    });
+    controller.setVirtualizationEnabled(true);
+    const { input, core, derived } = controller;
+    const rowSignals = derived.rows;
+    const columnSignals = derived.columns;
+    const metricSignals = derived.metrics;
+    watch(options.processedRows, rows => {
+        controller.setProcessedRows(Array.isArray(rows) ? rows : []);
+    }, { immediate: true });
+    watch(options.columns, value => {
+        controller.setColumns(Array.isArray(value) ? value : []);
+    }, { immediate: true });
+    watch(options.zoom, value => {
+        const normalized = Number.isFinite(value) && value > 0 ? value : 1;
+        controller.setZoom(normalized);
+    }, { immediate: true });
+    if (options.syncTargets) {
+        watch(options.syncTargets, value => {
+            controller.setViewportSyncTargets(value ?? null);
+        }, { immediate: true });
+    }
+    else {
+        controller.setViewportSyncTargets(null);
+    }
+    const rowHeightModeResolved = computed(() => resolveRowHeightModeValue(options.rowHeightMode ?? "fixed"));
+    watch(rowHeightModeResolved, mode => {
+        controller.setRowHeightMode(mode);
+    }, { immediate: true });
+    const baseRowHeightResolved = computed(() => resolveBaseRowHeight(options.baseRowHeight ?? BASE_ROW_HEIGHT));
+    watch(baseRowHeightResolved, height => {
+        controller.setBaseRowHeight(height);
+    }, { immediate: true });
+    const viewportMetricsRef = options.viewportMetrics;
+    if (viewportMetricsRef) {
+        watch(viewportMetricsRef, metrics => {
+            controller.setViewportMetrics(metrics ?? null);
+        }, { immediate: true });
+    }
+    else {
+        controller.setViewportMetrics(null);
+    }
+    if (options.isLoading) {
+        watch(options.isLoading, value => {
+            controller.setIsLoading(Boolean(value));
+        }, { immediate: true });
+    }
+    else {
+        controller.setIsLoading(false);
+    }
+    controller.setImperativeCallbacks(composeImperativeCallbacks(options.imperativeCallbacks));
+    controller.setOnAfterScroll(options.onAfterScroll);
+    controller.setOnNearBottom(options.onNearBottom);
+    if (options.serverIntegration) {
+        watch(() => resolveServerIntegration(options.serverIntegration), value => {
+            controller.setServerIntegration(value);
+        }, { immediate: true });
+    }
+    else {
+        controller.setServerIntegration(null);
+    }
+    watch([() => options.containerRef.value, () => options.headerRef.value], ([container, header]) => {
+        controller.attach(container, header);
+    }, { immediate: true });
+    onMounted(() => {
+        controller.refresh(true);
+    });
+    onBeforeUnmount(() => {
+        controller.detach();
+        controller.dispose();
+    });
+    const useSignal = (signal) => getSignalRef(signalRegistry, signal);
+    const scrollTop = useSignal(input.scrollTop);
+    const scrollLeft = useSignal(input.scrollLeft);
+    const viewportHeight = useSignal(input.viewportHeight);
+    const viewportWidth = useSignal(input.viewportWidth);
+    const virtualizationEnabled = useSignal(input.virtualizationEnabled);
+    const totalRowCount = useSignal(core.totalRowCount);
+    const effectiveRowHeight = useSignal(core.effectiveRowHeight);
+    const visibleCount = useSignal(core.visibleCount);
+    const poolSize = useSignal(core.poolSize);
+    const totalContentHeight = useSignal(core.totalContentHeight);
+    const startIndex = useSignal(core.startIndex);
+    const endIndex = useSignal(core.endIndex);
+    const overscanLeading = useSignal(core.overscanLeading);
+    const overscanTrailing = useSignal(core.overscanTrailing);
+    const visibleRows = visibleRowsRef;
+    const visibleRowsPool = visibleRowsPoolRef;
+    const rowPoolVersion = rowPoolVersionRef;
+    const visibleRange = useSignal(rowSignals.visibleRange);
+    const visibleColumns = useSignal(columnSignals.visibleColumns);
+    const visibleColumnEntries = useSignal(columnSignals.visibleColumnEntries);
+    const visibleScrollableColumns = useSignal(columnSignals.visibleScrollableColumns);
+    const visibleScrollableEntries = useSignal(columnSignals.visibleScrollableEntries);
+    const pinnedLeftColumns = useSignal(columnSignals.pinnedLeftColumns);
+    const pinnedLeftEntries = useSignal(columnSignals.pinnedLeftEntries);
+    const pinnedRightColumns = useSignal(columnSignals.pinnedRightColumns);
+    const pinnedRightEntries = useSignal(columnSignals.pinnedRightEntries);
+    const leftPadding = useSignal(columnSignals.leftPadding);
+    const rightPadding = useSignal(columnSignals.rightPadding);
+    const columnWidthMap = useSignal(columnSignals.columnWidthMap);
+    const visibleStartCol = useSignal(columnSignals.visibleStartCol);
+    const visibleEndCol = useSignal(columnSignals.visibleEndCol);
+    const scrollableRange = useSignal(columnSignals.scrollableRange);
+    const columnVirtualState = useSignal(columnSignals.columnVirtualState);
+    const fps = useSignal(metricSignals.fps);
+    const frameTime = useSignal(metricSignals.frameTime);
+    const droppedFrames = useSignal(metricSignals.droppedFrames);
+    const layoutReads = useSignal(metricSignals.layoutReads);
+    const layoutWrites = useSignal(metricSignals.layoutWrites);
+    const syncScrollRate = useSignal(metricSignals.syncScrollRate);
+    const heavyUpdateRate = useSignal(metricSignals.heavyUpdateRate);
+    const virtualizerUpdates = useSignal(metricSignals.virtualizerUpdates);
+    const virtualizerSkips = useSignal(metricSignals.virtualizerSkips);
+    const debugModeSignal = useSignal(metricSignals.debugMode);
+    const state = computed(() => ({
+        startIndex: startIndex.value,
+        endIndex: endIndex.value,
+        visibleCount: visibleCount.value,
+        poolSize: poolSize.value,
+        totalRowCount: totalRowCount.value,
+        overscanLeading: overscanLeading.value,
+        overscanTrailing: overscanTrailing.value,
+    }));
+    const debugMode = computed({
+        get: () => debugModeSignal.value,
+        set: value => {
+            controller.setDebugMode(Boolean(value));
+        },
+    });
+    const handleScroll = (event) => {
+        controller.handleScroll(event);
+    };
+    const updateViewportHeight = () => {
+        controller.updateViewportHeight();
+    };
+    const measureRowHeight = () => {
+        controller.measureRowHeight();
+    };
+    const cancelScrollRaf = () => {
+        controller.cancelScrollRaf();
+    };
+    const scrollToRow = (index) => {
+        controller.scrollToRow(index);
+    };
+    const scrollToColumn = (key) => {
+        controller.scrollToColumn(key);
+    };
+    const isRowVisible = (index) => controller.isRowVisible(index);
+    const attach = () => {
+        controller.attach(options.containerRef.value, options.headerRef.value);
+    };
+    const detach = () => {
+        controller.detach();
+    };
+    const refresh = (force) => {
+        controller.refresh(force);
+    };
+    return {
+        scrollTop,
+        scrollLeft,
+        viewportHeight,
+        viewportWidth,
+        totalRowCount,
+        effectiveRowHeight,
+        visibleCount,
+        poolSize,
+        totalContentHeight,
+        startIndex,
+        endIndex,
+        visibleRows,
+        visibleRowsPool,
+        rowPoolVersion,
+        virtualizationEnabled,
+        visibleColumns,
+        visibleColumnEntries,
+        visibleScrollableColumns,
+        visibleScrollableEntries,
+        pinnedLeftColumns,
+        pinnedLeftEntries,
+        pinnedRightColumns,
+        pinnedRightEntries,
+        leftPadding,
+        rightPadding,
+        columnWidthMap,
+        visibleStartCol,
+        visibleEndCol,
+        scrollableRange,
+        columnVirtualState,
+        clampScrollTopValue: value => controller.clampScrollTopValue(value),
+        handleScroll,
+        updateViewportHeight,
+        measureRowHeight,
+        cancelScrollRaf,
+        scrollToRow,
+        scrollToColumn,
+        isRowVisible,
+        debugMode,
+        fps,
+        frameTime,
+        droppedFrames,
+        layoutReads,
+        layoutWrites,
+        syncScrollRate,
+        heavyUpdateRate,
+        virtualizerUpdates,
+        virtualizerSkips,
+        state,
+        visibleRange,
+        attach,
+        detach,
+        refresh,
+    };
+}

package/dist/composables/useTableViewportMetrics.d.ts

@@ -0,0 +1,12 @@
+import { type Ref, type ShallowRef } from "vue";
+interface UseTableViewportMetricsOptions {
+    containerRef: Ref<HTMLDivElement | null>;
+    headerRef: Ref<HTMLElement | null>;
+    fallbackHeaderHeight?: Ref<number> | number;
+}
+export declare function useTableViewportMetrics(options: UseTableViewportMetricsOptions): {
+    headerHeight: Ref<number, number>;
+    viewportMetrics: ShallowRef<ViewportMetricsSnapshot>;
+};
+export {};
+//# sourceMappingURL=useTableViewportMetrics.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableViewportMetrics.d.ts","sourceRoot":"","sources":["../../src/composables/useTableViewportMetrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4D,KAAK,GAAG,EAAE,KAAK,UAAU,EAAE,MAAM,KAAK,CAAA;AAMzG,UAAU,8BAA8B;IACtC,YAAY,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACxC,SAAS,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAClC,oBAAoB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;CAC5C;AAMD,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,8BAA8B;;;EAoM9E"}