@affino/datagrid-vue-app 0.1.1

package/dist/stage/useDataGridTableStageVisualSelection.d.ts

@@ -0,0 +1,24 @@
+import { type ComputedRef, type Ref } from "vue";
+import type { DataGridCopyRange } from "@affino/datagrid-vue/advanced";
+import type { DataGridPendingEdge, DataGridTableMode, DataGridTableStageAnchorCell } from "./dataGridTableStage.types";
+export interface UseDataGridTableStageVisualSelectionOptions {
+    mode: Ref<DataGridTableMode>;
+    viewportRowStart: Ref<number>;
+    selectionAnchorCell: ComputedRef<DataGridTableStageAnchorCell | null>;
+    fillPreviewRange: Ref<DataGridCopyRange | null>;
+    isFillDragging: Ref<boolean>;
+    interactionSelectionRange: Ref<DataGridCopyRange | null>;
+    resolveCommittedSelectionRange: () => DataGridCopyRange | null;
+    isCommittedSelectionAnchorCell: (rowOffset: number, columnIndex: number) => boolean;
+    isCommittedCellSelected: (rowOffset: number, columnIndex: number) => boolean;
+    shouldHighlightCommittedSelectedCell: (rowOffset: number, columnIndex: number) => boolean;
+    isCommittedCellOnSelectionEdge: (rowOffset: number, columnIndex: number, edge: DataGridPendingEdge) => boolean;
+}
+export interface UseDataGridTableStageVisualSelectionResult {
+    selectionRange: ComputedRef<DataGridCopyRange | null>;
+    isSelectionAnchorCell: (rowOffset: number, columnIndex: number) => boolean;
+    isCellSelected: (rowOffset: number, columnIndex: number) => boolean;
+    shouldHighlightSelectedCell: (rowOffset: number, columnIndex: number) => boolean;
+    isCellOnSelectionEdge: (rowOffset: number, columnIndex: number, edge: DataGridPendingEdge) => boolean;
+}
+export declare function useDataGridTableStageVisualSelection(options: UseDataGridTableStageVisualSelectionOptions): UseDataGridTableStageVisualSelectionResult;

package/dist/stage/useDataGridTableStageVisualSelection.js

@@ -0,0 +1,83 @@
+import { computed } from "vue";
+export function useDataGridTableStageVisualSelection(options) {
+    const selectionRange = computed(() => (options.interactionSelectionRange.value ?? options.resolveCommittedSelectionRange()));
+    const resolveVisualAnchorCell = () => {
+        const range = selectionRange.value;
+        if (range
+            && range.startRow === range.endRow
+            && range.startColumn === range.endColumn) {
+            return {
+                rowIndex: range.startRow,
+                columnIndex: range.startColumn,
+            };
+        }
+        return options.selectionAnchorCell.value;
+    };
+    const resolveVisualSelectionRange = () => selectionRange.value;
+    const isVisualFillSelectionActive = () => {
+        return options.mode.value === "base" && options.isFillDragging.value && Boolean(options.fillPreviewRange.value);
+    };
+    const isCellWithinRange = (range, rowOffset, columnIndex) => {
+        const rowIndex = options.viewportRowStart.value + rowOffset;
+        return (rowIndex >= range.startRow
+            && rowIndex <= range.endRow
+            && columnIndex >= range.startColumn
+            && columnIndex <= range.endColumn);
+    };
+    const isSelectionAnchorCell = (rowOffset, columnIndex) => {
+        const anchorCell = resolveVisualAnchorCell();
+        if (anchorCell) {
+            return anchorCell.rowIndex === options.viewportRowStart.value + rowOffset
+                && anchorCell.columnIndex === columnIndex;
+        }
+        return options.isCommittedSelectionAnchorCell(rowOffset, columnIndex);
+    };
+    const isCellSelected = (rowOffset, columnIndex) => {
+        if (!isVisualFillSelectionActive()) {
+            return options.isCommittedCellSelected(rowOffset, columnIndex);
+        }
+        const range = resolveVisualSelectionRange();
+        return range ? isCellWithinRange(range, rowOffset, columnIndex) : false;
+    };
+    const shouldHighlightSelectedCell = (rowOffset, columnIndex) => {
+        if (!isVisualFillSelectionActive()) {
+            return options.shouldHighlightCommittedSelectedCell(rowOffset, columnIndex);
+        }
+        const range = resolveVisualSelectionRange();
+        if (!range || !isCellWithinRange(range, rowOffset, columnIndex)) {
+            return false;
+        }
+        const isSingleCell = range.startRow === range.endRow && range.startColumn === range.endColumn;
+        if (isSingleCell) {
+            return false;
+        }
+        return !isSelectionAnchorCell(rowOffset, columnIndex);
+    };
+    const isCellOnSelectionEdge = (rowOffset, columnIndex, edge) => {
+        if (!isVisualFillSelectionActive()) {
+            return options.isCommittedCellOnSelectionEdge(rowOffset, columnIndex, edge);
+        }
+        const range = resolveVisualSelectionRange();
+        if (!range || !isCellWithinRange(range, rowOffset, columnIndex)) {
+            return false;
+        }
+        const rowIndex = options.viewportRowStart.value + rowOffset;
+        switch (edge) {
+            case "top":
+                return rowIndex === range.startRow;
+            case "right":
+                return columnIndex === range.endColumn;
+            case "bottom":
+                return rowIndex === range.endRow;
+            case "left":
+                return columnIndex === range.startColumn;
+        }
+    };
+    return {
+        selectionRange,
+        isSelectionAnchorCell,
+        isCellSelected,
+        shouldHighlightSelectedCell,
+        isCellOnSelectionEdge,
+    };
+}

package/dist/theme/dataGridTheme.d.ts

@@ -0,0 +1,6 @@
+import { type DataGridStyleConfig, type DataGridThemeTokens } from "@affino/datagrid-theme";
+export type DataGridThemePreset = "default" | "industrial-neutral" | "industrialNeutral" | "sugar";
+export type DataGridThemeProp = DataGridThemePreset | DataGridStyleConfig | Partial<DataGridThemeTokens> | null | undefined;
+export declare function resolveDataGridThemeTokens(theme: DataGridThemeProp): DataGridThemeTokens;
+export declare function applyDataGridTheme(rootElement: HTMLElement, theme: DataGridThemeProp): DataGridThemeTokens;
+export declare function clearDataGridTheme(rootElement: HTMLElement): void;

package/dist/theme/dataGridTheme.js

@@ -0,0 +1,84 @@
+import { applyGridTheme, defaultStyleConfig, industrialNeutralTheme, resolveGridThemeTokens, sugarTheme, } from "@affino/datagrid-theme";
+const DATA_GRID_THEME_PRESETS = {
+    default: defaultStyleConfig,
+    "industrial-neutral": industrialNeutralTheme,
+    industrialNeutral: industrialNeutralTheme,
+    sugar: sugarTheme,
+};
+function mergeTokenVariants(base, override) {
+    if (!base && !override) {
+        return undefined;
+    }
+    const merged = {
+        ...(base ?? {}),
+    };
+    for (const [variantKey, tokens] of Object.entries(override ?? {})) {
+        merged[variantKey] = {
+            ...(merged[variantKey] ?? {}),
+            ...tokens,
+        };
+    }
+    return merged;
+}
+function mergeStyleConfigs(base, override) {
+    return {
+        ...base,
+        ...override,
+        grid: { ...(base.grid ?? {}), ...(override.grid ?? {}) },
+        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: { ...(base.tokens ?? {}), ...(override.tokens ?? {}) },
+        tokenVariants: mergeTokenVariants(base.tokenVariants, override.tokenVariants),
+    };
+}
+function isStyleConfig(input) {
+    if (!input || typeof input !== "object") {
+        return false;
+    }
+    return ("tokens" in input
+        || "tokenVariants" in input
+        || "activeTokenVariant" in input
+        || "defaultTokenVariant" in input
+        || "inheritThemeFromDocument" in input
+        || "documentDarkClass" in input
+        || "grid" in input
+        || "header" in input
+        || "body" in input
+        || "group" in input
+        || "summary" in input
+        || "state" in input);
+}
+function resolveThemeStyleConfig(theme) {
+    if (theme == null) {
+        return defaultStyleConfig;
+    }
+    if (typeof theme === "string") {
+        if (theme === "sugar") {
+            return mergeStyleConfigs(defaultStyleConfig, sugarTheme);
+        }
+        return DATA_GRID_THEME_PRESETS[theme] ?? defaultStyleConfig;
+    }
+    if (isStyleConfig(theme)) {
+        return mergeStyleConfigs(defaultStyleConfig, theme);
+    }
+    return mergeStyleConfigs(defaultStyleConfig, {
+        tokens: theme,
+    });
+}
+export function resolveDataGridThemeTokens(theme) {
+    const styleConfig = resolveThemeStyleConfig(theme);
+    return resolveGridThemeTokens(styleConfig ?? defaultStyleConfig, {
+        document: typeof document === "undefined" ? undefined : document,
+    });
+}
+export function applyDataGridTheme(rootElement, theme) {
+    const tokens = resolveDataGridThemeTokens(theme);
+    applyGridTheme(rootElement, tokens);
+    return tokens;
+}
+export function clearDataGridTheme(rootElement) {
+    applyDataGridTheme(rootElement, "default");
+}

package/dist/theme/ensureDataGridAppStyles.d.ts

@@ -0,0 +1 @@
+export declare function ensureDataGridAppStyles(): void;