gp-grid-vue 0.5.3 → 0.7.0

package/README.md

@@ -1,7 +1,7 @@
 # gp-grid-vue 🏁 🏎️
 
 <div align="center">
-    <a href="https://gp-grid-docs.vercel.app">
+    <a href="https://www.gp-grid.io">
         <picture>
         <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/GioPat/gp-grid-docs/refs/heads/master/public/logo-light.svg"/>
         <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/GioPat/gp-grid-docs/refs/heads/master/public/logo-dark.svg"/>
@@ -10,10 +10,11 @@
     </a>
     <div align="center">
      Logo by <a href="https://github.com/camillo18tre">camillo18tre ❤️</a>
-      <h4><a href="https://gp-grid-docs.vercel.app/">🎮 Demo</a> • <a href="https://gp-grid-docs.vercel.app/docs/vue">📖 Documentation</a>
+      <h4><a href="https://www.gp-grid.io/">🎮 Demo</a> • <a href="https://www.gp-grid.io/docs/vue">📖 Documentation</a>
     </div>
 </div>
 
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/GioPat/gp-grid)
 
 A high-performance, feature lean Vue 3 data grid component built to manage grids with huge amount (millions) of rows. It's based on its core dependency: `gp-grid-core`, featuring virtual scrolling, cell selection, sorting, filtering, editing, and Excel-like fill handle.
 
@@ -299,8 +300,7 @@ const cellRenderers: Record<string, VueCellRenderer> = {
   },
 
   // Bold text
-  bold: (params: CellRendererParams) =>
-    h("strong", String(params.value ?? "")),
+  bold: (params: CellRendererParams) => h("strong", String(params.value ?? "")),
 };
 
 const columns: ColumnDefinition[] = [
@@ -375,30 +375,34 @@ interface Task {
 // Custom select editor for priority field
 const editRenderers: Record<string, VueEditRenderer> = {
   prioritySelect: (params: EditRendererParams) => {
-    return h("select", {
-      autofocus: true,
-      value: params.initialValue as string,
-      onChange: (e: Event) => {
-        const target = e.target as HTMLSelectElement;
-        params.onValueChange(target.value);
-      },
-      onBlur: () => params.onCommit(),
-      onKeydown: (e: KeyboardEvent) => {
-        if (e.key === "Enter") params.onCommit();
-        if (e.key === "Escape") params.onCancel();
-      },
-      style: {
-        width: "100%",
-        height: "100%",
-        border: "none",
-        outline: "none",
-        padding: "0 8px",
+    return h(
+      "select",
+      {
+        autofocus: true,
+        value: params.initialValue as string,
+        onChange: (e: Event) => {
+          const target = e.target as HTMLSelectElement;
+          params.onValueChange(target.value);
+        },
+        onBlur: () => params.onCommit(),
+        onKeydown: (e: KeyboardEvent) => {
+          if (e.key === "Enter") params.onCommit();
+          if (e.key === "Escape") params.onCancel();
+        },
+        style: {
+          width: "100%",
+          height: "100%",
+          border: "none",
+          outline: "none",
+          padding: "0 8px",
+        },
       },
-    }, [
-      h("option", { value: "low" }, "Low"),
-      h("option", { value: "medium" }, "Medium"),
-      h("option", { value: "high" }, "High"),
-    ]);
+      [
+        h("option", { value: "low" }, "Low"),
+        h("option", { value: "medium" }, "Medium"),
+        h("option", { value: "high" }, "High"),
+      ],
+    );
   },
 
   checkbox: (params: EditRendererParams) =>
@@ -467,7 +471,12 @@ const dataSource = createClientDataSource(tasks);
 
 ```vue
 <template>
-  <GpGrid :columns="columns" :row-data="data" :row-height="36" :dark-mode="true" />
+  <GpGrid
+    :columns="columns"
+    :row-data="data"
+    :row-height="36"
+    :dark-mode="true"
+  />
 </template>
 ```
 
@@ -548,7 +557,9 @@ interface HeaderRendererParams {
 }
 
 // Vue header renderer
-type VueHeaderRenderer = (params: HeaderRendererParams) => VNode | string | null;
+type VueHeaderRenderer = (
+  params: HeaderRendererParams,
+) => VNode | string | null;
 ```
 
 ## Keyboard Shortcuts

package/dist/index.d.ts

@@ -61,6 +61,81 @@ interface FillHandleState {
   targetCol: number;
 }
 //#endregion
+//#region ../core/src/types/highlighting.d.ts
+/**
+ * Minimal column info for highlighting context.
+ * Uses structural typing to avoid circular dependency with columns.ts.
+ */
+interface HighlightColumnInfo {
+  field: string;
+  colId?: string;
+}
+/**
+ * Unified context for row, column, and cell highlighting.
+ *
+ * - Row context: `rowIndex` is set, `colIndex` is null
+ * - Column context: `colIndex` is set, `rowIndex` is null
+ * - Cell context: both `rowIndex` and `colIndex` are set
+ */
+interface HighlightContext<TData = Record<string, unknown>> {
+  /** Row index. Null for column-only context. */
+  rowIndex: number | null;
+  /** Column index. Null for row-only context. */
+  colIndex: number | null;
+  /** Column definition. Present for column and cell contexts. */
+  column?: HighlightColumnInfo;
+  /** Row data. Present for row and cell contexts. */
+  rowData?: TData;
+  /** Currently hovered cell position, null if not hovering */
+  hoverPosition: CellPosition | null;
+  /** Currently active (focused) cell position */
+  activeCell: CellPosition | null;
+  /** Current selection range */
+  selectionRange: CellRange | null;
+  /** Whether this row/column/cell is hovered (respects hoverScope) */
+  isHovered: boolean;
+  /** Whether this row/column contains or is the active cell */
+  isActive: boolean;
+  /** Whether this row/column/cell overlaps or is in the selection range */
+  isSelected: boolean;
+}
+/**
+ * Grid-level highlighting options.
+ * Hover tracking is automatically enabled when any highlighting callback is defined.
+ * Each callback type has its own natural interpretation of `isHovered`:
+ * - computeRowClasses: isHovered = mouse is on any cell in this row
+ * - computeColumnClasses: isHovered = mouse is on any cell in this column
+ * - computeCellClasses: isHovered = mouse is on this exact cell
+ *
+ * For a crosshair effect, implement both computeRowClasses and computeColumnClasses.
+ */
+interface HighlightingOptions<TData = Record<string, unknown>> {
+  /**
+   * Row-level class callback.
+   * Classes returned are applied to the row container element.
+   * Context has `rowIndex` set, `colIndex` is null.
+   * `isHovered` is true when the mouse is on any cell in this row.
+   * @returns Array of CSS class names
+   */
+  computeRowClasses?: (context: HighlightContext<TData>) => string[];
+  /**
+   * Column-level class callback.
+   * Classes returned are applied to all cells in that column (not header).
+   * Context has `colIndex` set, `rowIndex` is null.
+   * `isHovered` is true when the mouse is on any cell in this column.
+   * @returns Array of CSS class names
+   */
+  computeColumnClasses?: (context: HighlightContext<TData>) => string[];
+  /**
+   * Cell-level class callback.
+   * Classes returned are applied to individual cells for fine-grained control.
+   * Context has both `rowIndex` and `colIndex` set.
+   * `isHovered` is true only when the mouse is on this exact cell.
+   * @returns Array of CSS class names
+   */
+  computeCellClasses?: (context: HighlightContext<TData>) => string[];
+}
+//#endregion
 //#region ../core/src/types/columns.d.ts
 /** Column definition */
 interface ColumnDefinition {
@@ -74,10 +149,26 @@ interface ColumnDefinition {
   sortable?: boolean;
   /** Whether column is filterable. Default: true */
   filterable?: boolean;
+  /** Whether column is hidden. Hidden columns are not rendered but still exist in the definition. Default: false */
+  hidden?: boolean;
   /** Renderer key for adapter lookup, or inline renderer function */
   cellRenderer?: string;
   editRenderer?: string;
   headerRenderer?: string;
+  /**
+   * Per-column override for column-level highlighting.
+   * If defined, overrides grid-level computeColumnClasses for this column.
+   * Context has `colIndex` set, `rowIndex` is null.
+   * @returns Array of CSS class names to apply to all cells in this column
+   */
+  computeColumnClasses?: (context: HighlightContext) => string[];
+  /**
+   * Per-column override for cell-level highlighting.
+   * If defined, overrides grid-level computeCellClasses for cells in this column.
+   * Context has both `rowIndex` and `colIndex` set.
+   * @returns Array of CSS class names to apply to individual cells
+   */
+  computeCellClasses?: (context: HighlightContext) => string[];
 }
 //#endregion
 //#region ../core/src/types/filters.d.ts
@@ -189,6 +280,11 @@ interface SetActiveCellInstruction {
   type: "SET_ACTIVE_CELL";
   position: CellPosition | null;
 }
+/** Set hover position instruction (for highlighting) */
+interface SetHoverPositionInstruction {
+  type: "SET_HOVER_POSITION";
+  position: CellPosition | null;
+}
 /** Set selection range instruction */
 interface SetSelectionRangeInstruction {
   type: "SET_SELECTION_RANGE";
@@ -298,19 +394,20 @@ interface DataErrorInstruction {
 /** Rows added instruction */
 interface RowsAddedInstruction {
   type: "ROWS_ADDED";
+  indices: number[];
   count: number;
   totalRows: number;
 }
 /** Rows removed instruction */
 interface RowsRemovedInstruction {
   type: "ROWS_REMOVED";
-  count: number;
+  indices: number[];
   totalRows: number;
 }
 /** Rows updated instruction */
 interface RowsUpdatedInstruction {
   type: "ROWS_UPDATED";
-  count: number;
+  indices: number[];
 }
 /** Transaction processed instruction */
 interface TransactionProcessedInstruction {
@@ -323,6 +420,7 @@ interface TransactionProcessedInstruction {
 type GridInstruction = /** Slot lifecycle */
 CreateSlotInstruction | DestroySlotInstruction | AssignSlotInstruction | MoveSlotInstruction
 /** Selection */ | SetActiveCellInstruction | SetSelectionRangeInstruction | UpdateVisibleRangeInstruction
+/** Highlighting */ | SetHoverPositionInstruction
 /** Editing */ | StartEditInstruction | StopEditInstruction | CommitEditInstruction
 /** Layout */ | SetContentSizeInstruction | UpdateHeaderInstruction
 /** Filter popup */ | OpenFilterPopupInstruction | CloseFilterPopupInstruction
@@ -331,8 +429,6 @@ CreateSlotInstruction | DestroySlotInstruction | AssignSlotInstruction | MoveSlo
 /** Transactions */ | RowsAddedInstruction | RowsRemovedInstruction | RowsUpdatedInstruction | TransactionProcessedInstruction;
 /** Instruction listener: Single instruction Listener that receives a single instruction, used by frameworks to update their state */
 type InstructionListener = (instruction: GridInstruction) => void;
-/** Batch instruction listener: Batch instruction Listener that receives an array of instructions, used by frameworks to update their state */
-type BatchInstructionListener = (instructions: GridInstruction[]) => void;
 //#endregion
 //#region ../core/src/types/renderers.d.ts
 /** Cell renderer params */
@@ -406,6 +502,8 @@ interface GridCoreOptions<TData = Row> {
   transactionDebounceMs?: number;
   /** Function to extract unique ID from row. Required for mutations. */
   getRowId?: (row: TData) => RowId;
+  /** Row/column/cell highlighting configuration */
+  highlighting?: HighlightingOptions<TData>;
 }
 //#endregion
 //#region ../core/src/types/input.d.ts
@@ -486,10 +584,16 @@ interface InputHandlerDeps {
   getHeaderHeight: () => number;
   /** Get row height */
   getRowHeight: () => number;
-  /** Get column positions array */
+  /** Get column positions array (indexed by visible column) */
   getColumnPositions: () => number[];
-  /** Get column count */
+  /** Get visible column count */
   getColumnCount: () => number;
+  /**
+   * Convert visible column index to original column index.
+   * Used when columns can be hidden. Returns the original index for selection tracking.
+   * If not provided, visible index is used directly (no hidden columns).
+   */
+  getOriginalColumnIndex?: (visibleIndex: number) => number;
 }
 /** Current drag state for UI rendering */
 interface DragState {
@@ -506,6 +610,63 @@ interface DragState {
   } | null;
 }
 //#endregion
+//#region ../core/src/utils/positioning.d.ts
+/**
+ * Calculate cumulative column positions (prefix sums)
+ * Returns an array where positions[i] is the left position of column i
+ * positions[columns.length] is the total width
+ */
+declare const calculateColumnPositions: (columns: ColumnDefinition[]) => number[];
+/**
+ * Get total width from column positions
+ */
+declare const getTotalWidth: (columnPositions: number[]) => number;
+/**
+ * Find column index at a given X coordinate
+ */
+declare const findColumnAtX: (x: number, columnPositions: number[]) => number;
+//#endregion
+//#region ../core/src/utils/classNames.d.ts
+/**
+ * Check if a cell is within the selection range
+ */
+declare const isCellSelected: (row: number, col: number, selectionRange: CellRange | null) => boolean;
+/**
+ * Check if a cell is the active cell
+ */
+declare const isCellActive: (row: number, col: number, activeCell: CellPosition | null) => boolean;
+/**
+ * Check if a row is within the visible range (not in overscan)
+ */
+declare const isRowVisible: (row: number, visibleRowRange: {
+  start: number;
+  end: number;
+} | null) => boolean;
+/**
+ * Check if a cell is being edited
+ */
+declare const isCellEditing: (row: number, col: number, editingCell: {
+  row: number;
+  col: number;
+} | null) => boolean;
+/**
+ * Check if a cell is in the fill preview range (vertical-only fill)
+ */
+declare const isCellInFillPreview: (row: number, col: number, isDraggingFill: boolean, fillSourceRange: CellRange | null, fillTarget: {
+  row: number;
+  col: number;
+} | null) => boolean;
+/**
+ * Build cell CSS classes based on state
+ */
+declare const buildCellClasses: (isActive: boolean, isSelected: boolean, isEditing: boolean, inFillPreview: boolean) => string;
+//#endregion
+//#region ../core/src/utils/event-emitter.d.ts
+/**
+ * Batch instruction listener for efficient state updates
+ */
+type BatchInstructionListener = (instructions: GridInstruction[]) => void;
+//#endregion
 //#region ../core/src/selection.d.ts
 type Direction = "up" | "down" | "left" | "right";
 interface SelectionManagerOptions {
@@ -521,10 +682,10 @@ interface SelectionManagerOptions {
 declare class SelectionManager {
   private state;
   private options;
-  private listeners;
-  constructor(options: SelectionManagerOptions);
-  onInstruction(listener: InstructionListener): () => void;
+  private emitter;
+  onInstruction: (listener: InstructionListener) => () => void;
   private emit;
+  constructor(options: SelectionManagerOptions);
   getState(): SelectionState;
   getActiveCell(): CellPosition | null;
   getSelectionRange(): CellRange | null;
@@ -589,10 +750,10 @@ interface FillManagerOptions {
 declare class FillManager {
   private state;
   private options;
-  private listeners;
-  constructor(options: FillManagerOptions);
-  onInstruction(listener: InstructionListener): () => void;
+  private emitter;
+  onInstruction: (listener: InstructionListener) => () => void;
   private emit;
+  constructor(options: FillManagerOptions);
   getState(): FillHandleState | null;
   isActive(): boolean;
   /**
@@ -649,6 +810,14 @@ declare class InputHandler<TData extends Row = Row> {
    * Handle cell double click event (start editing)
    */
   handleCellDoubleClick(rowIndex: number, colIndex: number): void;
+  /**
+   * Handle cell mouse enter event (for hover highlighting)
+   */
+  handleCellMouseEnter(rowIndex: number, colIndex: number): void;
+  /**
+   * Handle cell mouse leave event (for hover highlighting)
+   */
+  handleCellMouseLeave(): void;
   /**
    * Handle fill handle mouse down event
    */
@@ -684,16 +853,222 @@ declare class InputHandler<TData extends Row = Row> {
     row: number;
     col: number;
   } | null, filterPopupOpen: boolean): KeyboardResult;
-  /**
-   * Find column index at a given X coordinate
-   */
-  private findColumnAtX;
   /**
    * Calculate auto-scroll deltas based on mouse position
    */
   private calculateAutoScroll;
 }
 //#endregion
+//#region ../core/src/highlight-manager.d.ts
+interface HighlightManagerOptions {
+  getActiveCell: () => CellPosition | null;
+  getSelectionRange: () => CellRange | null;
+  getColumn: (colIndex: number) => ColumnDefinition | undefined;
+}
+/**
+ * Manages row/column/cell highlighting state and class computation.
+ * Emits SET_HOVER_POSITION instructions when hover position changes.
+ */
+declare class HighlightManager<TData = Record<string, unknown>> {
+  private options;
+  private highlightingOptions;
+  private hoverPosition;
+  private emitter;
+  onInstruction: (listener: InstructionListener) => () => void;
+  private emit;
+  private rowClassCache;
+  private columnClassCache;
+  private cellClassCache;
+  constructor(options: HighlightManagerOptions, highlightingOptions?: HighlightingOptions<TData>);
+  /**
+   * Check if highlighting is enabled (any callback defined).
+   * Hover tracking is automatically enabled when highlighting is enabled.
+   */
+  isEnabled(): boolean;
+  /**
+   * Set the current hover position. Clears caches and emits instruction.
+   * Hover tracking is automatically enabled when any highlighting callback is defined.
+   */
+  setHoverPosition(position: CellPosition | null): void;
+  /**
+   * Get the current hover position
+   */
+  getHoverPosition(): CellPosition | null;
+  /**
+   * Called when selection changes. Clears all caches.
+   */
+  onSelectionChange(): void;
+  /**
+   * Build context for row highlighting callback.
+   * Returns context with `rowIndex` set, `colIndex` is null.
+   * `isHovered` is true when the mouse is on any cell in this row.
+   */
+  buildRowContext(rowIndex: number, rowData?: TData): HighlightContext<TData>;
+  /**
+   * Build context for column highlighting callback.
+   * Returns context with `colIndex` set, `rowIndex` is null.
+   * `isHovered` is true when the mouse is on any cell in this column.
+   */
+  buildColumnContext(colIndex: number, column: ColumnDefinition): HighlightContext<TData>;
+  /**
+   * Build context for cell highlighting callback.
+   * Returns context with both `rowIndex` and `colIndex` set.
+   * `isHovered` is true only when the mouse is on this exact cell.
+   */
+  buildCellContext(rowIndex: number, colIndex: number, column: ColumnDefinition, rowData?: TData): HighlightContext<TData>;
+  /**
+   * Compute row classes using cache and user callback
+   */
+  computeRowClasses(rowIndex: number, rowData?: TData): string[];
+  /**
+   * Compute column classes using cache and user callback (or per-column override)
+   */
+  computeColumnClasses(colIndex: number, column: ColumnDefinition): string[];
+  /**
+   * Compute cell classes using cache and user callback (or per-column override)
+   */
+  computeCellClasses(rowIndex: number, colIndex: number, column: ColumnDefinition, rowData?: TData): string[];
+  /**
+   * Compute combined cell classes (column + cell classes flattened)
+   */
+  computeCombinedCellClasses(rowIndex: number, colIndex: number, column: ColumnDefinition, rowData?: TData): string[];
+  /**
+   * Clear all caches
+   */
+  clearAllCaches(): void;
+  /**
+   * Destroy the manager and release resources
+   */
+  destroy(): void;
+}
+//#endregion
+//#region ../core/src/sort-filter-manager.d.ts
+interface SortFilterManagerOptions<TData> {
+  /** Get all columns */
+  getColumns: () => ColumnDefinition[];
+  /** Check if sorting is enabled globally */
+  isSortingEnabled: () => boolean;
+  /** Get cached rows for distinct value computation */
+  getCachedRows: () => Map<number, TData>;
+  /** Called when sort/filter changes to trigger data refresh */
+  onSortFilterChange: () => Promise<void>;
+  /** Called after data refresh to update UI */
+  onDataRefreshed: () => void;
+}
+/**
+ * Manages sorting and filtering state and operations.
+ */
+declare class SortFilterManager<TData = Record<string, unknown>> {
+  private options;
+  private emitter;
+  private sortModel;
+  private filterModel;
+  private openFilterColIndex;
+  onInstruction: (listener: InstructionListener) => () => void;
+  private emit;
+  constructor(options: SortFilterManagerOptions<TData>);
+  setSort(colId: string, direction: SortDirection | null, addToExisting?: boolean): Promise<void>;
+  getSortModel(): SortModel[];
+  setFilter(colId: string, filter: ColumnFilterModel | string | null): Promise<void>;
+  getFilterModel(): FilterModel;
+  /**
+   * Check if a column has an active filter
+   */
+  hasActiveFilter(colId: string): boolean;
+  /**
+   * Check if a column is sortable
+   */
+  isColumnSortable(colIndex: number): boolean;
+  /**
+   * Check if a column is filterable
+   */
+  isColumnFilterable(colIndex: number): boolean;
+  /**
+   * Get distinct values for a column (for filter dropdowns)
+   * For array-type columns (like tags), each unique array combination is returned.
+   * Arrays are sorted internally for consistent comparison.
+   * Limited to maxValues to avoid performance issues with large datasets.
+   */
+  getDistinctValuesForColumn(colId: string, maxValues?: number): CellValue[];
+  /**
+   * Open filter popup for a column (toggles if already open for same column)
+   */
+  openFilterPopup(colIndex: number, anchorRect: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  }): void;
+  /**
+   * Close filter popup
+   */
+  closeFilterPopup(): void;
+  /**
+   * Get sort info map for header rendering
+   */
+  getSortInfoMap(): Map<string, {
+    direction: SortDirection;
+    index: number;
+  }>;
+  destroy(): void;
+}
+//#endregion
+//#region ../core/src/row-mutation-manager.d.ts
+interface RowMutationManagerOptions<TData> {
+  /** Get the cached rows map */
+  getCachedRows: () => Map<number, TData>;
+  /** Set the cached rows map (for bulk operations) */
+  setCachedRows: (rows: Map<number, TData>) => void;
+  /** Get total row count */
+  getTotalRows: () => number;
+  /** Set total row count */
+  setTotalRows: (count: number) => void;
+  /** Update a single slot after row change */
+  updateSlot: (rowIndex: number) => void;
+  /** Refresh all slots after bulk changes */
+  refreshAllSlots: () => void;
+  /** Emit content size change */
+  emitContentSize: () => void;
+  /** Clear selection if it references invalid rows */
+  clearSelectionIfInvalid: (maxValidRow: number) => void;
+}
+/**
+ * Manages row CRUD operations and cache management.
+ */
+declare class RowMutationManager<TData extends Row = Row> {
+  private options;
+  private emitter;
+  onInstruction: (listener: InstructionListener) => () => void;
+  private emit;
+  constructor(options: RowMutationManagerOptions<TData>);
+  /**
+   * Get a row by index.
+   */
+  getRow(index: number): TData | undefined;
+  /**
+   * Add rows to the grid at the specified index.
+   * If no index is provided, rows are added at the end.
+   */
+  addRows(rows: TData[], index?: number): void;
+  /**
+   * Update existing rows with partial data.
+   */
+  updateRows(updates: Array<{
+    index: number;
+    data: Partial<TData>;
+  }>): void;
+  /**
+   * Delete rows at the specified indices.
+   */
+  deleteRows(indices: number[]): void;
+  /**
+   * Set a complete row at the specified index.
+   * Use this for complete row replacement. For partial updates, use updateRows.
+   */
+  setRow(index: number, data: TData): void;
+  destroy(): void;
+}
+//#endregion
 //#region ../core/src/grid-core.d.ts
 declare class GridCore<TData extends Row = Row> {
   private columns;
@@ -710,29 +1085,25 @@ declare class GridCore<TData extends Row = Row> {
   private totalRows;
   private currentPageIndex;
   private pageSize;
-  private sortModel;
-  private filterModel;
-  private openFilterColIndex;
   readonly selection: SelectionManager;
   readonly fill: FillManager;
   readonly input: InputHandler<TData>;
+  readonly highlight: HighlightManager<TData> | null;
+  readonly sortFilter: SortFilterManager<TData>;
+  readonly rowMutation: RowMutationManager<TData>;
   private readonly slotPool;
   private readonly editManager;
   private columnPositions;
-  private listeners;
-  private batchListeners;
+  private emitter;
+  onInstruction: (listener: InstructionListener) => () => void;
+  onBatchInstruction: (listener: BatchInstructionListener) => () => void;
+  private emit;
+  private emitBatch;
   private naturalContentHeight;
   private virtualContentHeight;
   private scrollRatio;
+  private isDestroyed;
   constructor(options: GridCoreOptions<TData>);
-  onInstruction(listener: InstructionListener): () => void;
-  /**
-   * Subscribe to batched instructions for efficient React state updates.
-   * Batch listeners receive arrays of instructions instead of individual ones.
-   */
-  onBatchInstruction(listener: BatchInstructionListener): () => void;
-  private emit;
-  private emitBatch;
   /**
    * Initialize the grid and load initial data.
    */
@@ -746,37 +1117,16 @@ declare class GridCore<TData extends Row = Row> {
   private fetchAllData;
   setSort(colId: string, direction: SortDirection | null, addToExisting?: boolean): Promise<void>;
   setFilter(colId: string, filter: ColumnFilterModel | string | null): Promise<void>;
-  /**
-   * Check if a column has an active filter
-   */
   hasActiveFilter(colId: string): boolean;
-  /**
-   * Check if a column is sortable
-   */
   isColumnSortable(colIndex: number): boolean;
-  /**
-   * Check if a column is filterable
-   */
   isColumnFilterable(colIndex: number): boolean;
-  /**
-   * Get distinct values for a column (for filter dropdowns)
-   * For array-type columns (like tags), each unique array combination is returned.
-   * Arrays are sorted internally for consistent comparison.
-   * Limited to MAX_DISTINCT_VALUES to avoid performance issues with large datasets.
-   */
   getDistinctValuesForColumn(colId: string, maxValues?: number): CellValue[];
-  /**
-   * Open filter popup for a column (toggles if already open for same column)
-   */
   openFilterPopup(colIndex: number, anchorRect: {
     top: number;
     left: number;
     width: number;
     height: number;
   }): void;
-  /**
-   * Close filter popup
-   */
   closeFilterPopup(): void;
   getSortModel(): SortModel[];
   getFilterModel(): FilterModel;
@@ -787,8 +1137,6 @@ declare class GridCore<TData extends Row = Row> {
   getEditState(): EditState | null;
   getCellValue(row: number, col: number): CellValue;
   setCellValue(row: number, col: number, value: CellValue): void;
-  private getFieldValue;
-  private setFieldValue;
   private computeColumnPositions;
   private emitContentSize;
   private emitHeaders;
@@ -845,6 +1193,31 @@ declare class GridCore<TData extends Row = Row> {
    * Useful after in-place data modifications like fill operations.
    */
   refreshSlotData(): void;
+  /**
+   * Add rows to the grid at the specified index.
+   * If no index is provided, rows are added at the end.
+   */
+  addRows(rows: TData[], index?: number): void;
+  /**
+   * Update existing rows with partial data.
+   */
+  updateRows(updates: Array<{
+    index: number;
+    data: Partial<TData>;
+  }>): void;
+  /**
+   * Delete rows at the specified indices.
+   */
+  deleteRows(indices: number[]): void;
+  /**
+   * Get a row by index.
+   */
+  getRow(index: number): TData | undefined;
+  /**
+   * Set a complete row at the specified index.
+   * Use this for complete row replacement. For partial updates, use updateRows.
+   */
+  setRow(index: number, data: TData): void;
   /**
    * Update the data source and refresh.
    */
@@ -853,6 +1226,22 @@ declare class GridCore<TData extends Row = Row> {
    * Update columns and recompute layout.
    */
   setColumns(columns: ColumnDefinition[]): void;
+  /**
+   * Destroy the grid core and release all references.
+   * Call this before discarding the GridCore to ensure proper cleanup.
+   * This method is idempotent - safe to call multiple times.
+   */
+  destroy(): void;
+}
+//#endregion
+//#region ../core/src/sorting/parallel-sort-manager.d.ts
+interface ParallelSortOptions {
+  /** Maximum number of workers (default: navigator.hardwareConcurrency || 4) */
+  maxWorkers?: number;
+  /** Threshold for parallel sorting (default: 400000) */
+  parallelThreshold?: number;
+  /** Minimum chunk size (default: 50000) */
+  minChunkSize?: number;
 }
 //#endregion
 //#region ../core/src/data-source/client-data-source.d.ts
@@ -861,6 +1250,8 @@ interface ClientDataSourceOptions<TData> {
   getFieldValue?: (row: TData, field: string) => CellValue;
   /** Use Web Worker for sorting large datasets (default: true) */
   useWorker?: boolean;
+  /** Options for parallel sorting (only used when useWorker is true) */
+  parallelSort?: ParallelSortOptions | false;
 }
 /**
  * Creates a client-side data source that holds all data in memory.
@@ -948,67 +1339,11 @@ declare const gridStyles: string;
  */
 declare function injectStyles(): void;
 //#endregion
-//#region ../core/src/utils/positioning.d.ts
-/**
- * Calculate cumulative column positions (prefix sums)
- * Returns an array where positions[i] is the left position of column i
- * positions[columns.length] is the total width
- */
-declare function calculateColumnPositions(columns: ColumnDefinition[]): number[];
-/**
- * Get total width from column positions
- */
-declare function getTotalWidth(columnPositions: number[]): number;
-/**
- * Find column index at a given X coordinate
- */
-declare function findColumnAtX(x: number, columnPositions: number[]): number;
-//#endregion
-//#region ../core/src/utils/classNames.d.ts
-/**
- * Check if a cell is within the selection range
- */
-declare function isCellSelected(row: number, col: number, selectionRange: CellRange | null): boolean;
-/**
- * Check if a cell is the active cell
- */
-declare function isCellActive(row: number, col: number, activeCell: CellPosition | null): boolean;
-/**
- * Check if a row is within the visible range (not in overscan)
- */
-declare function isRowVisible(row: number, visibleRowRange: {
-  start: number;
-  end: number;
-} | null): boolean;
-/**
- * Check if a cell is being edited
- */
-declare function isCellEditing(row: number, col: number, editingCell: {
-  row: number;
-  col: number;
-} | null): boolean;
-/**
- * Check if a cell is in the fill preview range (vertical-only fill)
- */
-declare function isCellInFillPreview(row: number, col: number, isDraggingFill: boolean, fillSourceRange: {
-  startRow: number;
-  startCol: number;
-  endRow: number;
-  endCol: number;
-} | null, fillTarget: {
-  row: number;
-  col: number;
-} | null): boolean;
-/**
- * Build cell CSS classes based on state
- */
-declare function buildCellClasses(isActive: boolean, isSelected: boolean, isEditing: boolean, inFillPreview: boolean): string;
-//#endregion
 //#region ../core/src/types/ui-state.d.ts
-interface SlotData {
+interface SlotData<TData = Row> {
   slotId: string;
   rowIndex: number;
-  rowData: Row;
+  rowData: TData;
   translateY: number;
 }
 interface HeaderData {
@@ -1032,8 +1367,8 @@ interface FilterPopupState {
   distinctValues: CellValue[];
   currentFilter?: ColumnFilterModel;
 }
-interface GridState {
-  slots: Map<string, SlotData>;
+interface GridState<TData = Row> {
+  slots: Map<string, SlotData<TData>>;
   activeCell: CellPosition | null;
   selectionRange: CellRange | null;
   editingCell: {
@@ -1055,6 +1390,8 @@ interface GridState {
     start: number;
     end: number;
   } | null;
+  /** Currently hovered cell position (for highlighting) */
+  hoverPosition: CellPosition | null;
 }
 //#endregion
 //#region src/types.d.ts
@@ -1109,8 +1446,12 @@ type __VLS_Props = {
   initialWidth?: number;
   /** Initial viewport height for SSR (pixels). ResizeObserver takes over on client. */
   initialHeight?: number;
+  /** Row/column/cell highlighting configuration */
+  highlighting?: HighlightingOptions<Row>;
 };
-declare const __VLS_export: vue0.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: vue0.DefineComponent<__VLS_Props, {
+  core: vue0.ShallowRef<GridCore<unknown> | null, GridCore<unknown> | null>;
+}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
   overscan: number;
   sortingEnabled: boolean;
   darkMode: boolean;
@@ -1132,6 +1473,7 @@ interface UseGpGridOptions<TData extends Row = Row> {
   sortingEnabled?: boolean;
   darkMode?: boolean;
   wheelDampening?: number;
+  highlighting?: HighlightingOptions<TData>;
   cellRenderers?: Record<string, VueCellRenderer<TData>>;
   editRenderers?: Record<string, VueEditRenderer<TData>>;
   headerRenderers?: Record<string, VueHeaderRenderer>;
@@ -1161,6 +1503,8 @@ interface UseGpGridResult<TData extends Row = Row> {
   handleWheel: (e: WheelEvent, wheelDampening: number) => void;
   handleFilterApply: (colId: string, filter: ColumnFilterModel | null) => void;
   handleFilterPopupClose: () => void;
+  handleCellMouseEnter: (rowIndex: number, colIndex: number) => void;
+  handleCellMouseLeave: () => void;
   dragState: Ref<{
     isDragging: boolean;
     dragType: "selection" | "fill" | null;
@@ -1188,6 +1532,10 @@ interface UseGpGridResult<TData extends Row = Row> {
 declare function useGpGrid<TData extends Row = Row>(options: UseGpGridOptions<TData>): UseGpGridResult<TData>;
 //#endregion
 //#region src/composables/useInputHandler.d.ts
+interface VisibleColumnInfo$1 {
+  column: ColumnDefinition;
+  originalIndex: number;
+}
 interface UseInputHandlerOptions {
   activeCell: ComputedRef<CellPosition | null>;
   selectionRange: ComputedRef<CellRange | null>;
@@ -1199,6 +1547,8 @@ interface UseInputHandlerOptions {
   rowHeight: number;
   headerHeight: number;
   columnPositions: ComputedRef<number[]>;
+  /** Visible columns with their original indices (for hidden column support) */
+  visibleColumnsWithIndices: ComputedRef<VisibleColumnInfo$1[]>;
   slots: ComputedRef<Map<string, SlotData>>;
 }
 interface UseInputHandlerResult {
@@ -1225,11 +1575,16 @@ declare function useAutoScroll(containerRef: Ref<HTMLDivElement | null>): {
 };
 //#endregion
 //#region src/composables/useFillHandle.d.ts
+interface VisibleColumnInfo {
+  column: ColumnDefinition;
+  originalIndex: number;
+}
 interface UseFillHandleOptions {
   activeCell: ComputedRef<CellPosition | null>;
   selectionRange: ComputedRef<CellRange | null>;
   slots: ComputedRef<Map<string, SlotData>>;
   columns: ComputedRef<ColumnDefinition[]>;
+  visibleColumnsWithIndices: ComputedRef<VisibleColumnInfo[]>;
   columnPositions: ComputedRef<number[]>;
   columnWidths: ComputedRef<number[]>;
   rowHeight: number;
@@ -1292,9 +1647,9 @@ declare function useGridState(args?: InitialStateArgs): {
     slots: Map<string, {
       slotId: string;
       rowIndex: number;
-      rowData: Row;
+      rowData: unknown;
       translateY: number;
-    }> & Omit<Map<string, SlotData>, keyof Map<any, any>>;
+    }> & Omit<Map<string, SlotData<unknown>>, keyof Map<any, any>>;
     activeCell: {
       row: number;
       col: number;
@@ -1323,9 +1678,12 @@ declare function useGridState(args?: InitialStateArgs): {
         editable?: boolean | undefined;
         sortable?: boolean | undefined;
         filterable?: boolean | undefined;
+        hidden?: boolean | undefined;
         cellRenderer?: string | undefined;
         editRenderer?: string | undefined;
         headerRenderer?: string | undefined;
+        computeColumnClasses?: ((context: HighlightContext) => string[]) | undefined;
+        computeCellClasses?: ((context: HighlightContext) => string[]) | undefined;
       };
       sortDirection?: SortDirection | undefined;
       sortIndex?: number | undefined;
@@ -1345,9 +1703,12 @@ declare function useGridState(args?: InitialStateArgs): {
         editable?: boolean | undefined;
         sortable?: boolean | undefined;
         filterable?: boolean | undefined;
+        hidden?: boolean | undefined;
         cellRenderer?: string | undefined;
         editRenderer?: string | undefined;
         headerRenderer?: string | undefined;
+        computeColumnClasses?: ((context: HighlightContext) => string[]) | undefined;
+        computeCellClasses?: ((context: HighlightContext) => string[]) | undefined;
       } | null;
       anchorRect: {
         top: number;
@@ -1387,6 +1748,10 @@ declare function useGridState(args?: InitialStateArgs): {
       start: number;
       end: number;
     } | null;
+    hoverPosition: {
+      row: number;
+      col: number;
+    } | null;
   };
   applyInstructions: (instructions: GridInstruction[]) => void;
   reset: () => void;

package/dist/index.js

@@ -1 +1 @@
-import{Fragment as e,computed as t,createBlock as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createTextVNode as o,createVNode as s,defineComponent as c,h as l,normalizeClass as u,normalizeStyle as d,onMounted as f,onUnmounted as p,openBlock as m,reactive as h,ref as g,renderList as _,resolveDynamicComponent as v,shallowRef as y,toDisplayString as b,unref as x,vModelText as S,watch as C,withDirectives as w}from"vue";import{GridCore as T,GridCore as E,buildCellClasses as D,buildCellClasses as ee,calculateColumnPositions as O,calculateScaledColumnPositions as k,createClientDataSource as A,createClientDataSource as j,createDataSourceFromArray as M,createDataSourceFromArray as N,createMutableClientDataSource as P,createServerDataSource as F,findColumnAtX as I,getTotalWidth as L,getTotalWidth as R,gridStyles as te,injectStyles as z,injectStyles as B,isCellActive as ne,isCellActive as V,isCellEditing as H,isCellEditing as U,isCellInFillPreview as W,isCellInFillPreview as re,isCellSelected as ie,isCellSelected as G,isRowVisible as ae}from"gp-grid-core";function K(e){return{slots:new Map,activeCell:null,selectionRange:null,editingCell:null,contentWidth:0,contentHeight:e?.initialHeight??0,viewportWidth:e?.initialWidth??0,headers:new Map,filterPopup:null,isLoading:!1,error:null,totalRows:0,visibleRowRange:null}}function q(e,t){switch(e.type){case`CREATE_SLOT`:t.slots.set(e.slotId,{slotId:e.slotId,rowIndex:-1,rowData:{},translateY:0});break;case`DESTROY_SLOT`:t.slots.delete(e.slotId);break;case`ASSIGN_SLOT`:{let n=t.slots.get(e.slotId);n&&t.slots.set(e.slotId,{...n,rowIndex:e.rowIndex,rowData:e.rowData});break}case`MOVE_SLOT`:{let n=t.slots.get(e.slotId);n&&t.slots.set(e.slotId,{...n,translateY:e.translateY});break}case`SET_ACTIVE_CELL`:t.activeCell=e.position;break;case`SET_SELECTION_RANGE`:t.selectionRange=e.range;break;case`UPDATE_VISIBLE_RANGE`:t.visibleRowRange={start:e.start,end:e.end};break;case`START_EDIT`:t.editingCell={row:e.row,col:e.col,initialValue:e.initialValue};break;case`STOP_EDIT`:t.editingCell=null;break;case`SET_CONTENT_SIZE`:t.contentWidth=e.width,t.contentHeight=e.height,t.viewportWidth=e.viewportWidth;break;case`UPDATE_HEADER`:t.headers.set(e.colIndex,{column:e.column,sortDirection:e.sortDirection,sortIndex:e.sortIndex,sortable:e.sortable,filterable:e.filterable,hasFilter:e.hasFilter});break;case`OPEN_FILTER_POPUP`:t.filterPopup={isOpen:!0,colIndex:e.colIndex,column:e.column,anchorRect:e.anchorRect,distinctValues:e.distinctValues,currentFilter:e.currentFilter};break;case`CLOSE_FILTER_POPUP`:t.filterPopup=null;break;case`DATA_LOADING`:t.isLoading=!0,t.error=null;break;case`DATA_LOADED`:t.isLoading=!1,t.totalRows=e.totalRows;break;case`DATA_ERROR`:t.isLoading=!1,t.error=e.error;break;case`ROWS_ADDED`:case`ROWS_REMOVED`:t.totalRows=e.totalRows;break;case`ROWS_UPDATED`:case`TRANSACTION_PROCESSED`:break}}function J(e){let t=h(K(e));function n(e){for(let n of e)q(n,t)}function r(){let e=K();t.slots=e.slots,t.activeCell=e.activeCell,t.selectionRange=e.selectionRange,t.editingCell=e.editingCell,t.contentWidth=e.contentWidth,t.contentHeight=e.contentHeight,t.viewportWidth=e.viewportWidth,t.headers=e.headers,t.filterPopup=e.filterPopup,t.isLoading=e.isLoading,t.error=e.error,t.totalRows=e.totalRows,t.visibleRowRange=e.visibleRowRange}return{state:t,applyInstructions:n,reset:r}}function oe(e){let t=g(null);function n(n,r){t.value&&clearInterval(t.value),t.value=setInterval(()=>{let t=e.value;t&&(t.scrollTop+=r,t.scrollLeft+=n)},16)}function r(){t.value&&=(clearInterval(t.value),null)}return p(()=>{r()}),{startAutoScroll:n,stopAutoScroll:r}}function se(e,t){for(let n of e.values())if(n.rowIndex===t)return n;return null}function ce(e,t,n,r,i,a){let o=se(a,n),s=(o?o.translateY:i+n*r)-t.scrollTop,c=s+r,l=i,u=t.clientHeight;if(s<l)t.scrollTop=e.getScrollTopForRow(n);else if(c>u){let a=t.clientHeight-i,o=Math.floor(a/r),s=Math.max(0,n-o+1);t.scrollTop=e.getScrollTopForRow(s)}}function Y(e,t,n,r){let{activeCell:i,selectionRange:a,editingCell:o,filterPopupOpen:s,rowHeight:c,headerHeight:l,columnPositions:u,slots:d}=r,{startAutoScroll:f,stopAutoScroll:m}=oe(t),h=g({isDragging:!1,dragType:null,fillSourceRange:null,fillTarget:null});C([()=>l,()=>c,u,()=>n.value.length],()=>{let t=e.value;t?.input&&t.input.updateDeps({getHeaderHeight:()=>l,getRowHeight:()=>c,getColumnPositions:()=>u.value,getColumnCount:()=>n.value.length})},{immediate:!0});function _(){let e=t.value;if(!e)return null;let n=e.getBoundingClientRect();return{top:n.top,left:n.left,width:n.width,height:n.height,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft}}function v(e){return{clientX:e.clientX,clientY:e.clientY,button:e.button,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey}}function y(){let t=t=>{let n=e.value,r=_();if(!n?.input||!r)return;let i=n.input.handleDragMove(v(t),r);i&&(i.autoScroll?f(i.autoScroll.dx,i.autoScroll.dy):m(),h.value=n.input.getDragState())},n=()=>{let r=e.value;r?.input&&(r.input.handleDragEnd(),h.value=r.input.getDragState()),m(),document.removeEventListener(`mousemove`,t),document.removeEventListener(`mouseup`,n)};document.addEventListener(`mousemove`,t),document.addEventListener(`mouseup`,n)}function b(n,r,i){let a=e.value;if(!a?.input)return;let o=a.input.handleCellMouseDown(n,r,v(i));o.focusContainer&&t.value?.focus(),o.startDrag===`selection`&&(a.input.startSelectionDrag(),h.value=a.input.getDragState(),y())}function x(t,n){let r=e.value;r?.input&&r.input.handleCellDoubleClick(t,n)}function S(t){let n=e.value;if(!n?.input)return;let r=n.input.handleFillHandleMouseDown(i.value,a.value,v(t));r.preventDefault&&t.preventDefault(),r.stopPropagation&&t.stopPropagation(),r.startDrag===`fill`&&(h.value=n.input.getDragState(),y())}function w(t,r){let i=e.value;if(!i?.input)return;let a=n.value[t];if(!a)return;let o=a.colId??a.field;i.input.handleHeaderClick(o,r.shiftKey)}function T(n){let r=e.value,a=t.value;if(!r?.input)return;let u=r.input.handleKeyDown({key:n.key,shiftKey:n.shiftKey,ctrlKey:n.ctrlKey,metaKey:n.metaKey},i.value,o.value,s.value);u.preventDefault&&n.preventDefault(),u.scrollToCell&&a&&ce(r,a,u.scrollToCell.row,c,l,d.value)}function E(n,r){let i=e.value,a=t.value;if(!i?.input||!a)return;let o=i.input.handleWheel(n.deltaY,n.deltaX,r);o&&(n.preventDefault(),a.scrollTop+=o.dy,a.scrollLeft+=o.dx)}return p(()=>{m()}),{handleCellMouseDown:b,handleCellDoubleClick:x,handleFillHandleMouseDown:S,handleHeaderClick:w,handleKeyDown:T,handleWheel:E,dragState:h}}function X(e){let{activeCell:n,selectionRange:r,slots:i,columns:a,columnPositions:o,columnWidths:s,rowHeight:c}=e;return{fillHandlePosition:t(()=>{let e=n.value,t=r.value,l=i.value;if(!e&&!t)return null;let u,d,f,p;if(t)u=Math.max(t.startRow,t.endRow),d=Math.max(t.startCol,t.endCol),f=Math.min(t.startCol,t.endCol),p=Math.max(t.startCol,t.endCol);else if(e)u=e.row,d=e.col,f=d,p=d;else return null;let m=a.value;for(let e=f;e<=p;e++){let t=m[e];if(!t||t.editable!==!0)return null}let h=null;for(let e of l.values())if(e.rowIndex===u){h=e.translateY;break}if(h===null)return null;let g=o.value[d]??0,_=s.value[d]??0;return{top:h+c-5,left:g+_-20}})}}function Z(e){return e==null||e===``?o(``):typeof e==`string`?o(e):e}function Q(e,t){let n=t.split(`.`),r=e;for(let e of n){if(typeof r!=`object`||!r)return null;r=r[e]}return r??null}function le(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,isActive:a,isSelected:s,isEditing:c,cellRenderers:l,globalCellRenderer:u}=e,d=Q(n,t.field),f={value:d,rowData:n,column:t,rowIndex:r,colIndex:i,isActive:a,isSelected:s,isEditing:c};if(t.cellRenderer&&typeof t.cellRenderer==`string`){let e=l[t.cellRenderer];if(e)return Z(e(f))}return u?Z(u(f)):o(d==null?``:String(d))}function ue(e){return e==null||e===``?o(``):typeof e==`string`?o(e):e}function de(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,initialValue:a,core:s,editRenderers:c,globalEditRenderer:u}=e;if(!s)return o(``);let d={value:Q(n,t.field),rowData:n,column:t,rowIndex:r,colIndex:i,isActive:!0,isSelected:!0,isEditing:!0,initialValue:a,onValueChange:e=>s.updateEditValue(e),onCommit:()=>s.commitEdit(),onCancel:()=>s.cancelEdit()};if(t.editRenderer&&typeof t.editRenderer==`string`){let e=c[t.editRenderer];if(e)return ue(e(d))}return u?ue(u(d)):l(`input`,{class:`gp-grid-edit-input`,type:`text`,value:a==null?``:String(a),autofocus:!0,onFocus:e=>e.target.select(),onInput:e=>s.updateEditValue(e.target.value),onKeydown:e=>{e.stopPropagation(),e.key===`Enter`?s.commitEdit():e.key===`Escape`?s.cancelEdit():e.key===`Tab`&&(e.preventDefault(),s.commitEdit(),s.selection.moveFocus(e.shiftKey?`left`:`right`,!1))},onBlur:()=>s.commitEdit()})}function fe(e){return e==null||e===``?o(``):typeof e==`string`?o(e):e}function pe(t){let{column:n,colIndex:r,sortDirection:i,sortIndex:a,sortable:o,filterable:s,hasFilter:c,core:u,container:d,headerRenderers:f,globalHeaderRenderer:p}=t,m={column:n,colIndex:r,sortDirection:i,sortIndex:a,sortable:o,filterable:s,hasFilter:c,onSort:(e,t)=>{u&&o&&u.setSort(n.colId??n.field,e,t)},onFilterClick:()=>{if(u&&s){let e=d?.querySelector(`[data-col-index="${r}"]`);if(e){let t=e.getBoundingClientRect();u.openFilterPopup(r,{top:t.top,left:t.left,width:t.width,height:t.height})}}}};if(n.headerRenderer&&typeof n.headerRenderer==`string`){let e=f[n.headerRenderer];if(e)return fe(e(m))}if(p)return fe(p(m));let h=[l(`span`,{class:`gp-grid-header-text`},n.headerName??n.field)],g=[];if(o){let e=[l(`span`,{class:`gp-grid-sort-arrows-stack`},[l(`svg`,{class:`gp-grid-sort-arrow-up${i===`asc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`},[l(`path`,{d:`M4 0L8 6H0L4 0Z`,fill:`currentColor`})]),l(`svg`,{class:`gp-grid-sort-arrow-down${i===`desc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`},[l(`path`,{d:`M4 6L0 0H8L4 6Z`,fill:`currentColor`})])])];a!==void 0&&a>0&&e.push(l(`span`,{class:`gp-grid-sort-index`},String(a))),g.push(l(`span`,{class:`gp-grid-sort-arrows`},e))}return s&&g.push(l(`span`,{class:`gp-grid-filter-icon${c?` active`:``}`,onMousedown:e=>{e.stopPropagation(),e.preventDefault(),m.onFilterClick()},onClick:e=>{e.stopPropagation()}},[l(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`currentColor`},[l(`path`,{d:`M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z`})])])),g.length>0&&h.push(l(`span`,{class:`gp-grid-header-icons`},g)),l(e,h)}function me(e,t){let{onClose:n,ignoreSelector:r=`.gp-grid-filter-icon`}=t,i=null,a=null;f(()=>{i=t=>{let i=t.target;r&&i.closest(r)||e.value&&!e.value.contains(i)&&n()},a=e=>{e.key===`Escape`&&n()},requestAnimationFrame(()=>{i&&document.addEventListener(`mousedown`,i),a&&document.addEventListener(`keydown`,a)})}),p(()=>{i&&document.removeEventListener(`mousedown`,i),a&&document.removeEventListener(`keydown`,a)})}function $(e,t=`and`){let n=g([...e]);return{conditions:n,combination:g(t),updateCondition:(e,t)=>{let r=[...n.value];r[e]={...r[e],...t},n.value=r},addCondition:e=>{n.value=[...n.value,{operator:e,value:``,valueTo:``,nextOperator:`and`}]},removeCondition:e=>{n.value=n.value.filter((t,n)=>n!==e)}}}const he={class:`gp-grid-filter-content gp-grid-filter-text`},ge={key:0,class:`gp-grid-filter-mode-toggle`},_e={key:1,class:`gp-grid-filter-info`},ve={class:`gp-grid-filter-actions`},ye=[`disabled`],be={class:`gp-grid-filter-list`},xe={key:0,class:`gp-grid-filter-option`},Se=[`checked`],Ce=[`checked`,`onChange`],we={key:0,class:`gp-grid-filter-combination`},Te=[`onClick`],Ee=[`onClick`],De={class:`gp-grid-filter-row`},Oe=[`value`,`autofocus`,`onChange`],ke=[`value`],Ae=[`value`,`onInput`],je=[`onClick`];var Me=c({__name:`TextFilterContent`,props:{distinctValues:{},currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`contains`,label:`Contains`},{value:`notContains`,label:`Does not contain`},{value:`equals`,label:`Equals`},{value:`notEquals`,label:`Does not equal`},{value:`startsWith`,label:`Starts with`},{value:`endsWith`,label:`Ends with`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Is not blank`}],c=n,l=o;function d(e){return Array.isArray(e)?e.join(`, `):String(e??``)}let f=t(()=>{let e=c.distinctValues.filter(e=>e!=null&&e!==``&&!(Array.isArray(e)&&e.length===0)).map(e=>d(e));return Array.from(new Set(e)).sort((e,t)=>{let n=parseFloat(e),r=parseFloat(t);return!isNaN(n)&&!isNaN(r)?n-r:e.localeCompare(t,void 0,{numeric:!0,sensitivity:`base`})})}),p=t(()=>f.value.length>100),h=g(t(()=>{if(!c.currentFilter?.conditions[0])return p.value?`condition`:`values`;let e=c.currentFilter.conditions[0];return e.selectedValues&&e.selectedValues.size>0?`values`:`condition`}).value),v=t(()=>c.currentFilter?.conditions[0]?c.currentFilter.conditions[0].selectedValues??new Set:new Set),y=t(()=>c.currentFilter?.conditions[0]?c.currentFilter.conditions[0].includeBlank??!0:!0),C=g(``),T=g(new Set(v.value)),E=g(y.value),{conditions:D,combination:ee,updateCondition:O,addCondition:k,removeCondition:A}=$(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`contains`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.conditions[0];if(e.selectedValues&&e.selectedValues.size>0)return[{operator:`contains`,value:``,valueTo:``,nextOperator:`and`}];let t=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(e=>{let n=e;return{operator:n.operator,value:n.value??``,valueTo:``,nextOperator:n.nextOperator??t}})}).value,c.currentFilter?.combination??`and`),j=t(()=>{if(!C.value)return f.value;let e=C.value.toLowerCase();return f.value.filter(t=>t.toLowerCase().includes(e))}),M=t(()=>c.distinctValues.some(e=>e==null||e===``)),N=t(()=>j.value.every(e=>T.value.has(e))&&(!M.value||E.value));function P(){T.value=new Set(j.value),M.value&&(E.value=!0)}function F(){T.value=new Set,E.value=!1}function I(e){let t=new Set(T.value);t.has(e)?t.delete(e):t.add(e),T.value=t}function L(){if(h.value===`values`){if(f.value.every(e=>T.value.has(e))&&(!M.value||E.value)){l(`apply`,null);return}l(`apply`,{conditions:[{type:`text`,operator:`equals`,selectedValues:T.value,includeBlank:E.value}],combination:`and`})}else{let e=D.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.value.trim()!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`text`,operator:e.operator,value:e.value,nextOperator:e.nextOperator})),combination:`and`})}}function R(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,he,[r(` Mode toggle - only show if not too many values `),p.value?r(`v-if`,!0):(m(),i(`div`,ge,[a(`button`,{type:`button`,class:u({active:h.value===`values`}),onClick:n[0]||=e=>h.value=`values`},` Values `,2),a(`button`,{type:`button`,class:u({active:h.value===`condition`}),onClick:n[1]||=e=>h.value=`condition`},` Condition `,2)])),r(` Too many values message `),p.value&&h.value===`condition`?(m(),i(`div`,_e,` Too many unique values (`+b(f.value.length)+`). Use conditions to filter. `,1)):r(`v-if`,!0),r(` VALUES MODE `),h.value===`values`?(m(),i(e,{key:2},[r(` Search input `),w(a(`input`,{"onUpdate:modelValue":n[2]||=e=>C.value=e,class:`gp-grid-filter-search`,type:`text`,placeholder:`Search...`,autofocus:``},null,512),[[S,C.value]]),r(` Select all / Deselect all `),a(`div`,ve,[a(`button`,{type:`button`,disabled:N.value,onClick:P},` Select All `,8,ye),a(`button`,{type:`button`,onClick:F},` Deselect All `)]),r(` Checkbox list `),a(`div`,be,[r(` Blanks option `),M.value?(m(),i(`label`,xe,[a(`input`,{type:`checkbox`,checked:E.value,onChange:n[3]||=e=>E.value=!E.value},null,40,Se),n[5]||=a(`span`,{class:`gp-grid-filter-blank`},`(Blanks)`,-1)])):r(`v-if`,!0),r(` Values `),(m(!0),i(e,null,_(j.value,e=>(m(),i(`label`,{key:e,class:`gp-grid-filter-option`},[a(`input`,{type:`checkbox`,checked:T.value.has(e),onChange:t=>I(e)},null,40,Ce),a(`span`,null,b(e),1)]))),128))])],64)):r(`v-if`,!0),r(` CONDITION MODE `),h.value===`condition`?(m(),i(e,{key:3},[(m(!0),i(e,null,_(x(D),(t,n)=>(m(),i(`div`,{key:n,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),n>0?(m(),i(`div`,we,[a(`button`,{type:`button`,class:u({active:x(D)[n-1]?.nextOperator===`and`}),onClick:e=>x(O)(n-1,{nextOperator:`and`})},` AND `,10,Te),a(`button`,{type:`button`,class:u({active:x(D)[n-1]?.nextOperator===`or`}),onClick:e=>x(O)(n-1,{nextOperator:`or`})},` OR `,10,Ee)])):r(`v-if`,!0),a(`div`,De,[r(` Operator select `),a(`select`,{value:t.operator,autofocus:n===0,onChange:e=>x(O)(n,{operator:e.target.value})},[(m(),i(e,null,_(s,e=>a(`option`,{key:e.value,value:e.value},b(e.label),9,ke)),64))],40,Oe),r(` Text input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`text`,value:t.value,placeholder:`Value`,class:`gp-grid-filter-text-input`,onInput:e=>x(O)(n,{value:e.target.value})},null,40,Ae)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),x(D).length>1?(m(),i(`button`,{key:1,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>x(A)(n)},` × `,8,je)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[4]||=e=>x(k)(`contains`)},` + Add condition `)],64)):r(`v-if`,!0),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:R},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:L},` Apply `)])]))}});const Ne={class:`gp-grid-filter-content gp-grid-filter-number`},Pe={key:0,class:`gp-grid-filter-combination`},Fe=[`onClick`],Ie=[`onClick`],Le={class:`gp-grid-filter-row`},Re=[`value`,`onChange`],ze=[`value`],Be=[`value`,`onInput`],Ve=[`value`,`onInput`],He=[`onClick`];var Ue=c({__name:`NumberFilterContent`,props:{currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`>=`,label:`≥`},{value:`<=`,label:`≤`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}],c=n,l=o,{conditions:d,combination:f,updateCondition:p,addCondition:h,removeCondition:g}=$(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(t=>{let n=t;return{operator:n.operator,value:n.value==null?``:String(n.value),valueTo:n.valueTo==null?``:String(n.valueTo),nextOperator:n.nextOperator??e}})}).value,c.currentFilter?.combination??`and`);function v(){let e=d.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`number`,operator:e.operator,value:e.value?parseFloat(e.value):void 0,valueTo:e.valueTo?parseFloat(e.valueTo):void 0,nextOperator:e.nextOperator})),combination:`and`})}function y(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,Ne,[(m(!0),i(e,null,_(x(d),(t,o)=>(m(),i(`div`,{key:o,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),o>0?(m(),i(`div`,Pe,[a(`button`,{type:`button`,class:u({active:x(d)[o-1]?.nextOperator===`and`}),onClick:e=>x(p)(o-1,{nextOperator:`and`})},` AND `,10,Fe),a(`button`,{type:`button`,class:u({active:x(d)[o-1]?.nextOperator===`or`}),onClick:e=>x(p)(o-1,{nextOperator:`or`})},` OR `,10,Ie)])):r(`v-if`,!0),a(`div`,Le,[r(` Operator select `),a(`select`,{value:t.operator,onChange:e=>x(p)(o,{operator:e.target.value})},[(m(),i(e,null,_(s,e=>a(`option`,{key:e.value,value:e.value},b(e.label),9,ze)),64))],40,Re),r(` Number input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`number`,value:t.value,placeholder:`Value`,onInput:e=>x(p)(o,{value:e.target.value})},null,40,Be)):r(`v-if`,!0),r(` Second number input for "between" `),t.operator===`between`?(m(),i(e,{key:1},[n[1]||=a(`span`,{class:`gp-grid-filter-to`},`to`,-1),a(`input`,{type:`number`,value:t.valueTo,placeholder:`Value`,onInput:e=>x(p)(o,{valueTo:e.target.value})},null,40,Ve)],64)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),x(d).length>1?(m(),i(`button`,{key:2,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>x(g)(o)},` × `,8,He)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[0]||=e=>x(h)(`=`)},` + Add condition `),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:y},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:v},` Apply `)])]))}});const We={class:`gp-grid-filter-content gp-grid-filter-date`},Ge={key:0,class:`gp-grid-filter-combination`},Ke=[`onClick`],qe=[`onClick`],Je={class:`gp-grid-filter-row`},Ye=[`value`,`onChange`],Xe=[`value`],Ze=[`value`,`onInput`],Qe=[`value`,`onInput`],$e=[`onClick`];var et=c({__name:`DateFilterContent`,props:{currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}],c=n,l=o;function d(e){if(!e)return``;let t=typeof e==`string`?new Date(e):e;return isNaN(t.getTime())?``:t.toISOString().split(`T`)[0]}let{conditions:f,combination:p,updateCondition:h,addCondition:g,removeCondition:v}=$(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(t=>{let n=t;return{operator:n.operator,value:d(n.value),valueTo:d(n.valueTo),nextOperator:n.nextOperator??e}})}).value,c.currentFilter?.combination??`and`);function y(){let e=f.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`date`,operator:e.operator,value:e.value||void 0,valueTo:e.valueTo||void 0,nextOperator:e.nextOperator})),combination:`and`})}function S(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,We,[(m(!0),i(e,null,_(x(f),(t,o)=>(m(),i(`div`,{key:o,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),o>0?(m(),i(`div`,Ge,[a(`button`,{type:`button`,class:u({active:x(f)[o-1]?.nextOperator===`and`}),onClick:e=>x(h)(o-1,{nextOperator:`and`})},` AND `,10,Ke),a(`button`,{type:`button`,class:u({active:x(f)[o-1]?.nextOperator===`or`}),onClick:e=>x(h)(o-1,{nextOperator:`or`})},` OR `,10,qe)])):r(`v-if`,!0),a(`div`,Je,[r(` Operator select `),a(`select`,{value:t.operator,onChange:e=>x(h)(o,{operator:e.target.value})},[(m(),i(e,null,_(s,e=>a(`option`,{key:e.value,value:e.value},b(e.label),9,Xe)),64))],40,Ye),r(` Date input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`date`,value:t.value,onInput:e=>x(h)(o,{value:e.target.value})},null,40,Ze)):r(`v-if`,!0),r(` Second date input for "between" `),t.operator===`between`?(m(),i(e,{key:1},[n[1]||=a(`span`,{class:`gp-grid-filter-to`},`to`,-1),a(`input`,{type:`date`,value:t.valueTo,onInput:e=>x(h)(o,{valueTo:e.target.value})},null,40,Qe)],64)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),x(f).length>1?(m(),i(`button`,{key:2,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>x(v)(o)},` × `,8,$e)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[0]||=e=>x(g)(`=`)},` + Add condition `),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:S},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:y},` Apply `)])]))}});const tt={class:`gp-grid-filter-header`};var nt=c({__name:`FilterPopup`,props:{column:{},colIndex:{},anchorRect:{},distinctValues:{},currentFilter:{}},emits:[`apply`,`close`],setup(o,{emit:c}){let l=o,u=c,f=g(null);me(f,{onClose:()=>u(`close`),ignoreSelector:`.gp-grid-filter-icon`});let p=t(()=>l.column.colId??l.column.field);function h(e){u(`apply`,p.value,e),u(`close`)}function _(){u(`close`)}let v=t(()=>l.column.cellDataType);t(()=>v.value===`text`||v.value===`object`);let y=t(()=>v.value===`number`),x=t(()=>v.value===`date`||v.value===`dateString`||v.value===`dateTime`||v.value===`dateTimeString`),S=t(()=>({position:`fixed`,top:`${l.anchorRect.top+l.anchorRect.height+4}px`,left:`${l.anchorRect.left}px`,minWidth:`${Math.max(200,l.anchorRect.width)}px`,zIndex:1e4}));return(t,c)=>(m(),i(`div`,{ref_key:`popupRef`,ref:f,class:`gp-grid-filter-popup`,style:d(S.value)},[a(`div`,tt,` Filter: `+b(o.column.headerName??o.column.field),1),r(` Number filter `),y.value?(m(),n(Ue,{key:0,"current-filter":o.currentFilter,onApply:h,onClose:_},null,8,[`current-filter`])):x.value?(m(),i(e,{key:1},[r(` Date filter `),s(et,{"current-filter":o.currentFilter,onApply:h,onClose:_},null,8,[`current-filter`])],2112)):(m(),i(e,{key:2},[r(` Text filter (default) `),s(Me,{"distinct-values":o.distinctValues,"current-filter":o.currentFilter,onApply:h,onClose:_},null,8,[`distinct-values`,`current-filter`])],2112))],4))}});const rt=[`data-col-index`,`onClick`],it=[`onMousedown`,`onDblclick`],at={key:1,class:`gp-grid-loading`},ot={key:2,class:`gp-grid-error`},st={key:3,class:`gp-grid-empty`};var ct=c({__name:`GpGrid`,props:{columns:{},dataSource:{},rowData:{},rowHeight:{},headerHeight:{},overscan:{default:3},sortingEnabled:{type:Boolean,default:!0},darkMode:{type:Boolean,default:!1},wheelDampening:{default:.1},cellRenderers:{default:()=>({})},editRenderers:{default:()=>({})},headerRenderers:{default:()=>({})},cellRenderer:{},editRenderer:{},headerRenderer:{},initialWidth:{},initialHeight:{}},setup(s){B();let c=s,l=g(null),h=y(null),{state:S,applyInstructions:w}=J({initialWidth:c.initialWidth,initialHeight:c.initialHeight}),T=t(()=>c.headerHeight??c.rowHeight),D=t(()=>k(c.columns,S.viewportWidth)),O=t(()=>D.value.positions),A=t(()=>D.value.widths),M=t(()=>R(O.value)),P=t(()=>Array.from(S.slots.values())),{handleCellMouseDown:F,handleCellDoubleClick:I,handleFillHandleMouseDown:L,handleHeaderClick:te,handleKeyDown:z,handleWheel:ne,dragState:H}=Y(h,l,t(()=>c.columns),{activeCell:t(()=>S.activeCell),selectionRange:t(()=>S.selectionRange),editingCell:t(()=>S.editingCell),filterPopupOpen:t(()=>S.filterPopup?.isOpen??!1),rowHeight:c.rowHeight,headerHeight:T.value,columnPositions:O,slots:t(()=>S.slots)}),{fillHandlePosition:W}=X({activeCell:t(()=>S.activeCell),selectionRange:t(()=>S.selectionRange),slots:t(()=>S.slots),columns:t(()=>c.columns),columnPositions:O,columnWidths:A,rowHeight:c.rowHeight});function ie(){let e=l.value,t=h.value;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)}function ae(e,t){let n=h.value;n&&n.setFilter(e,t)}function K(){let e=h.value;e&&e.closeFilterPopup()}function q(e,t){let n=U(e,t,S.editingCell);return ee(V(e,t,S.activeCell),G(e,t,S.selectionRange),n,re(e,t,H.value.dragType===`fill`,H.value.fillSourceRange,H.value.fillTarget))}return f(()=>{let e=c.dataSource??(c.rowData?N(c.rowData):j([])),t=new E({columns:c.columns,dataSource:e,rowHeight:c.rowHeight,headerHeight:T.value,overscan:c.overscan,sortingEnabled:c.sortingEnabled});h.value=t;let n=t.onBatchInstruction(e=>{w(e)});t.initialize();let r=l.value;if(r){if(t.setViewport(r.scrollTop,r.scrollLeft,r.clientWidth,r.clientHeight),typeof ResizeObserver<`u`){let e=new ResizeObserver(()=>{t.setViewport(r.scrollTop,r.scrollLeft,r.clientWidth,r.clientHeight)});e.observe(r),p(()=>{e.disconnect()})}p(()=>{n(),h.value=null})}}),C(()=>c.dataSource,e=>{if(e){let t=e;if(t.subscribe){let e=t.subscribe(()=>{h.value?.refresh()});p(()=>e())}}},{immediate:!0}),(t,c)=>(m(),i(`div`,{ref_key:`containerRef`,ref:l,class:u([`gp-grid-container`,{"gp-grid-container--dark":s.darkMode}]),style:{width:`100%`,height:`100%`,overflow:`auto`,position:`relative`},tabindex:`0`,onScroll:ie,onWheel:c[1]||=e=>x(ne)(e,s.wheelDampening),onKeydown:c[2]||=(...e)=>x(z)&&x(z)(...e)},[r(` Content sizer `),a(`div`,{style:d({width:`${Math.max(x(S).contentWidth,M.value)}px`,height:`${Math.max(x(S).contentHeight,T.value)}px`,position:`relative`,minWidth:`100%`})},[r(` Headers `),a(`div`,{class:`gp-grid-header`,style:d({position:`sticky`,top:0,left:0,height:`${T.value}px`,width:`${Math.max(x(S).contentWidth,M.value)}px`,minWidth:`100%`})},[(m(!0),i(e,null,_(s.columns,(e,t)=>(m(),i(`div`,{key:e.colId??e.field,class:`gp-grid-header-cell`,"data-col-index":t,style:d({position:`absolute`,left:`${O.value[t]}px`,top:0,width:`${A.value[t]}px`,height:`${T.value}px`,background:`transparent`}),onClick:e=>x(te)(t,e)},[(m(),n(v(x(pe)({column:e,colIndex:t,sortDirection:x(S).headers.get(t)?.sortDirection,sortIndex:x(S).headers.get(t)?.sortIndex,sortable:x(S).headers.get(t)?.sortable??!0,filterable:x(S).headers.get(t)?.filterable??!0,hasFilter:x(S).headers.get(t)?.hasFilter??!1,core:h.value,container:l.value,headerRenderers:s.headerRenderers??{},globalHeaderRenderer:s.headerRenderer}))))],12,rt))),128))],4),r(` Row slots `),(m(!0),i(e,null,_(P.value.filter(e=>e.rowIndex>=0),t=>(m(),i(`div`,{key:t.slotId,class:u([`gp-grid-row`,{"gp-grid-row--even":t.rowIndex%2==0}]),style:d({position:`absolute`,top:0,left:0,transform:`translateY(${t.translateY}px)`,width:`${Math.max(x(S).contentWidth,M.value)}px`,height:`${s.rowHeight}px`})},[(m(!0),i(e,null,_(s.columns,(a,o)=>(m(),i(`div`,{key:`${t.slotId}-${o}`,class:u(q(t.rowIndex,o)),style:d({position:`absolute`,left:`${O.value[o]}px`,top:0,width:`${A.value[o]}px`,height:`${s.rowHeight}px`}),onMousedown:e=>x(F)(t.rowIndex,o,e),onDblclick:()=>x(I)(t.rowIndex,o)},[r(` Edit mode `),x(U)(t.rowIndex,o,x(S).editingCell)&&x(S).editingCell?(m(),n(v(x(de)({column:a,rowData:t.rowData,rowIndex:t.rowIndex,colIndex:o,initialValue:x(S).editingCell.initialValue,core:h.value,editRenderers:s.editRenderers??{},globalEditRenderer:s.editRenderer})),{key:0})):(m(),i(e,{key:1},[r(` View mode `),(m(),n(v(x(le)({column:a,rowData:t.rowData,rowIndex:t.rowIndex,colIndex:o,isActive:x(V)(t.rowIndex,o,x(S).activeCell),isSelected:x(G)(t.rowIndex,o,x(S).selectionRange),isEditing:!1,cellRenderers:s.cellRenderers??{},globalCellRenderer:s.cellRenderer}))))],64))],46,it))),128))],6))),128)),r(` Fill handle `),x(W)&&!x(S).editingCell?(m(),i(`div`,{key:0,class:`gp-grid-fill-handle`,style:d({position:`absolute`,top:`${x(W).top}px`,left:`${x(W).left}px`,zIndex:200}),onMousedown:c[0]||=(...e)=>x(L)&&x(L)(...e)},null,36)):r(`v-if`,!0),r(` Loading indicator `),x(S).isLoading?(m(),i(`div`,at,[...c[3]||=[a(`div`,{class:`gp-grid-loading-spinner`},null,-1),o(` Loading... `,-1)]])):r(`v-if`,!0),r(` Error message `),x(S).error?(m(),i(`div`,ot,` Error: `+b(x(S).error),1)):r(`v-if`,!0),r(` Empty state `),!x(S).isLoading&&!x(S).error&&x(S).totalRows===0?(m(),i(`div`,st,` No data to display `)):r(`v-if`,!0)],4),r(` Filter Popup `),x(S).filterPopup?.isOpen&&x(S).filterPopup.column&&x(S).filterPopup.anchorRect?(m(),n(nt,{key:0,column:x(S).filterPopup.column,"col-index":x(S).filterPopup.colIndex,"anchor-rect":x(S).filterPopup.anchorRect,"distinct-values":x(S).filterPopup.distinctValues,"current-filter":x(S).filterPopup.currentFilter,onApply:ae,onClose:K},null,8,[`column`,`col-index`,`anchor-rect`,`distinct-values`,`current-filter`])):r(`v-if`,!0)],34))}});function lt(e){B();let n=g(null),r=g(null),{state:i,applyInstructions:a}=J(),o=t(()=>e.headerHeight??e.rowHeight),s=t(()=>k(e.columns,i.viewportWidth)),c=t(()=>s.value.positions),l=t(()=>s.value.widths),u=t(()=>R(c.value)),d=t(()=>Array.from(i.slots.values())),{handleCellMouseDown:m,handleCellDoubleClick:h,handleFillHandleMouseDown:_,handleHeaderClick:v,handleKeyDown:y,handleWheel:b,dragState:x}=Y(r,n,t(()=>e.columns),{activeCell:t(()=>i.activeCell),selectionRange:t(()=>i.selectionRange),editingCell:t(()=>i.editingCell),filterPopupOpen:t(()=>i.filterPopup?.isOpen??!1),rowHeight:e.rowHeight,headerHeight:o.value,columnPositions:c,slots:t(()=>i.slots)}),S=()=>{let e=n.value,t=r.value;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)},w=(e,t)=>{let n=r.value;n&&n.setFilter(e,t)},T=()=>{let e=r.value;e&&e.closeFilterPopup()};f(()=>{let t=e.dataSource??(e.rowData?N(e.rowData):j([])),i=new E({columns:e.columns,dataSource:t,rowHeight:e.rowHeight,headerHeight:o.value,overscan:e.overscan??3,sortingEnabled:e.sortingEnabled??!0});r.value=i;let s=i.onBatchInstruction(e=>{a(e)});i.initialize();let c=n.value;if(c){i.setViewport(c.scrollTop,c.scrollLeft,c.clientWidth,c.clientHeight);let e=new ResizeObserver(()=>{i.setViewport(c.scrollTop,c.scrollLeft,c.clientWidth,c.clientHeight)});e.observe(c),p(()=>{e.disconnect(),s(),r.value=null})}}),C(()=>e.dataSource,e=>{if(e){let t=e;if(t.subscribe){let e=t.subscribe(()=>{r.value?.refresh()});p(()=>e())}}},{immediate:!0});let{fillHandlePosition:D}=X({activeCell:t(()=>i.activeCell),selectionRange:t(()=>i.selectionRange),slots:t(()=>i.slots),columns:t(()=>e.columns),columnPositions:c,columnWidths:l,rowHeight:e.rowHeight});return{containerRef:n,coreRef:r,state:i,slotsArray:d,totalHeaderHeight:o,columnPositions:c,columnWidths:l,totalWidth:u,fillHandlePosition:D,handleScroll:S,handleCellMouseDown:m,handleCellDoubleClick:h,handleFillHandleMouseDown:_,handleHeaderClick:v,handleKeyDown:y,handleWheel:b,handleFilterApply:w,handleFilterPopupClose:T,dragState:x,isCellSelected:G,isCellActive:V,isCellEditing:U,isCellInFillPreview:re,buildCellClasses:ee}}export{ct as GpGrid,ct as default,T as GridCore,D as buildCellClasses,O as calculateColumnPositions,A as createClientDataSource,M as createDataSourceFromArray,K as createInitialState,P as createMutableClientDataSource,F as createServerDataSource,I as findColumnAtX,Q as getCellValue,L as getTotalWidth,te as gridStyles,z as injectStyles,ne as isCellActive,H as isCellEditing,W as isCellInFillPreview,ie as isCellSelected,ae as isRowVisible,le as renderCell,de as renderEditCell,pe as renderHeader,oe as useAutoScroll,X as useFillHandle,$ as useFilterConditions,me as useFilterPopup,lt as useGpGrid,J as useGridState,Y as useInputHandler};
+import{Fragment as e,computed as t,createBlock as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createTextVNode as o,createVNode as s,defineComponent as c,h as l,normalizeClass as u,normalizeStyle as d,onMounted as f,onUnmounted as p,openBlock as m,reactive as h,ref as g,renderList as _,resolveDynamicComponent as v,shallowRef as y,toDisplayString as b,unref as x,vModelText as S,watch as C,withDirectives as w}from"vue";import{GridCore as T,GridCore as E,buildCellClasses as D,buildCellClasses as ee,calculateColumnPositions as O,calculateScaledColumnPositions as k,createClientDataSource as A,createClientDataSource as j,createDataSourceFromArray as M,createDataSourceFromArray as N,createMutableClientDataSource as P,createServerDataSource as F,findColumnAtX as I,getTotalWidth as L,getTotalWidth as R,gridStyles as z,injectStyles as te,injectStyles as ne,isCellActive as re,isCellActive as B,isCellEditing as ie,isCellEditing as V,isCellInFillPreview as H,isCellInFillPreview as ae,isCellSelected as oe,isCellSelected as U,isRowVisible as W}from"gp-grid-core";function G(e){return{slots:new Map,activeCell:null,selectionRange:null,editingCell:null,contentWidth:0,contentHeight:e?.initialHeight??0,viewportWidth:e?.initialWidth??0,headers:new Map,filterPopup:null,isLoading:!1,error:null,totalRows:0,visibleRowRange:null,hoverPosition:null}}function K(e,t){switch(e.type){case`CREATE_SLOT`:t.slots.set(e.slotId,{slotId:e.slotId,rowIndex:-1,rowData:{},translateY:0});break;case`DESTROY_SLOT`:t.slots.delete(e.slotId);break;case`ASSIGN_SLOT`:{let n=t.slots.get(e.slotId);n&&t.slots.set(e.slotId,{...n,rowIndex:e.rowIndex,rowData:e.rowData});break}case`MOVE_SLOT`:{let n=t.slots.get(e.slotId);n&&t.slots.set(e.slotId,{...n,translateY:e.translateY});break}case`SET_ACTIVE_CELL`:t.activeCell=e.position;break;case`SET_SELECTION_RANGE`:t.selectionRange=e.range;break;case`UPDATE_VISIBLE_RANGE`:t.visibleRowRange={start:e.start,end:e.end};break;case`SET_HOVER_POSITION`:t.hoverPosition=e.position;break;case`START_EDIT`:t.editingCell={row:e.row,col:e.col,initialValue:e.initialValue};break;case`STOP_EDIT`:t.editingCell=null;break;case`SET_CONTENT_SIZE`:t.contentWidth=e.width,t.contentHeight=e.height,t.viewportWidth=e.viewportWidth;break;case`UPDATE_HEADER`:t.headers.set(e.colIndex,{column:e.column,sortDirection:e.sortDirection,sortIndex:e.sortIndex,sortable:e.sortable,filterable:e.filterable,hasFilter:e.hasFilter});break;case`OPEN_FILTER_POPUP`:t.filterPopup={isOpen:!0,colIndex:e.colIndex,column:e.column,anchorRect:e.anchorRect,distinctValues:e.distinctValues,currentFilter:e.currentFilter};break;case`CLOSE_FILTER_POPUP`:t.filterPopup=null;break;case`DATA_LOADING`:t.isLoading=!0,t.error=null;break;case`DATA_LOADED`:t.isLoading=!1,t.totalRows=e.totalRows;break;case`DATA_ERROR`:t.isLoading=!1,t.error=e.error;break;case`ROWS_ADDED`:case`ROWS_REMOVED`:t.totalRows=e.totalRows;break;case`ROWS_UPDATED`:case`TRANSACTION_PROCESSED`:break}}function q(e){let t=h(G(e));function n(e){for(let n of e)K(n,t)}function r(){let e=G();t.slots=e.slots,t.activeCell=e.activeCell,t.selectionRange=e.selectionRange,t.editingCell=e.editingCell,t.contentWidth=e.contentWidth,t.contentHeight=e.contentHeight,t.viewportWidth=e.viewportWidth,t.headers=e.headers,t.filterPopup=e.filterPopup,t.isLoading=e.isLoading,t.error=e.error,t.totalRows=e.totalRows,t.visibleRowRange=e.visibleRowRange,t.hoverPosition=e.hoverPosition}return{state:t,applyInstructions:n,reset:r}}function J(e){let t=g(null);function n(n,r){t.value&&clearInterval(t.value),t.value=setInterval(()=>{let t=e.value;t&&(t.scrollTop+=r,t.scrollLeft+=n)},16)}function r(){t.value&&=(clearInterval(t.value),null)}return p(()=>{r()}),{startAutoScroll:n,stopAutoScroll:r}}function se(e,t){for(let n of e.values())if(n.rowIndex===t)return n;return null}function ce(e,t,n,r,i,a){let o=se(a,n),s=(o?o.translateY:i+n*r)-t.scrollTop,c=s+r,l=i,u=t.clientHeight;if(s<l)t.scrollTop=e.getScrollTopForRow(n);else if(c>u){let a=t.clientHeight-i,o=Math.floor(a/r),s=Math.max(0,n-o+1);t.scrollTop=e.getScrollTopForRow(s)}}function Y(e,t,n,r){let{activeCell:i,selectionRange:a,editingCell:o,filterPopupOpen:s,rowHeight:c,headerHeight:l,columnPositions:u,visibleColumnsWithIndices:d,slots:f}=r,{startAutoScroll:m,stopAutoScroll:h}=J(t),_=g({isDragging:!1,dragType:null,fillSourceRange:null,fillTarget:null});C([()=>l,()=>c,u,d],()=>{let t=e.value;if(t?.input){let e=d.value;t.input.updateDeps({getHeaderHeight:()=>l,getRowHeight:()=>c,getColumnPositions:()=>u.value,getColumnCount:()=>e.length,getOriginalColumnIndex:t=>{let n=e[t];return n?n.originalIndex:t}})}},{immediate:!0});function v(){let e=t.value;if(!e)return null;let n=e.getBoundingClientRect();return{top:n.top,left:n.left,width:n.width,height:n.height,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft}}function y(e){return{clientX:e.clientX,clientY:e.clientY,button:e.button,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey}}function b(){let t=t=>{let n=e.value,r=v();if(!n?.input||!r)return;let i=n.input.handleDragMove(y(t),r);i&&(i.autoScroll?m(i.autoScroll.dx,i.autoScroll.dy):h(),_.value=n.input.getDragState())},n=()=>{let r=e.value;r?.input&&(r.input.handleDragEnd(),_.value=r.input.getDragState()),h(),document.removeEventListener(`mousemove`,t),document.removeEventListener(`mouseup`,n)};document.addEventListener(`mousemove`,t),document.addEventListener(`mouseup`,n)}function x(n,r,i){let a=e.value;if(!a?.input)return;let o=a.input.handleCellMouseDown(n,r,y(i));o.focusContainer&&t.value?.focus(),o.startDrag===`selection`&&(a.input.startSelectionDrag(),_.value=a.input.getDragState(),b())}function S(t,n){let r=e.value;r?.input&&r.input.handleCellDoubleClick(t,n)}function w(t){let n=e.value;if(!n?.input)return;let r=n.input.handleFillHandleMouseDown(i.value,a.value,y(t));r.preventDefault&&t.preventDefault(),r.stopPropagation&&t.stopPropagation(),r.startDrag===`fill`&&(_.value=n.input.getDragState(),b())}function T(t,r){let i=e.value;if(!i?.input)return;let a=n.value[t];if(!a)return;let o=a.colId??a.field;i.input.handleHeaderClick(o,r.shiftKey)}function E(n){let r=e.value,a=t.value;if(!r?.input)return;let u=r.input.handleKeyDown({key:n.key,shiftKey:n.shiftKey,ctrlKey:n.ctrlKey,metaKey:n.metaKey},i.value,o.value,s.value);u.preventDefault&&n.preventDefault(),u.scrollToCell&&a&&ce(r,a,u.scrollToCell.row,c,l,f.value)}function D(n,r){let i=e.value,a=t.value;if(!i?.input||!a)return;let o=i.input.handleWheel(n.deltaY,n.deltaX,r);o&&(n.preventDefault(),a.scrollTop+=o.dy,a.scrollLeft+=o.dx)}return p(()=>{h()}),{handleCellMouseDown:x,handleCellDoubleClick:S,handleFillHandleMouseDown:w,handleHeaderClick:T,handleKeyDown:E,handleWheel:D,dragState:_}}function X(e){let{activeCell:n,selectionRange:r,slots:i,columns:a,visibleColumnsWithIndices:o,columnPositions:s,columnWidths:c,rowHeight:l}=e;return{fillHandlePosition:t(()=>{let e=n.value,t=r.value,u=i.value;if(!e&&!t)return null;let d,f,p,m;if(t)d=Math.max(t.startRow,t.endRow),f=Math.max(t.startCol,t.endCol),p=Math.min(t.startCol,t.endCol),m=Math.max(t.startCol,t.endCol);else if(e)d=e.row,f=e.col,p=f,m=f;else return null;let h=a.value;for(let e=p;e<=m;e++){let t=h[e];if(!(!t||t.hidden)&&t.editable!==!0)return null}let g=o.value.findIndex(e=>e.originalIndex===f);if(g===-1)return null;let _=null;for(let e of u.values())if(e.rowIndex===d){_=e.translateY;break}if(_===null)return null;let v=s.value[g]??0,y=c.value[g]??0;return{top:_+l-5,left:v+y-20}})}}function Z(e){return e==null||e===``?o(``):typeof e==`string`?o(e):e}function Q(e,t){let n=t.split(`.`),r=e;for(let e of n){if(typeof r!=`object`||!r)return null;r=r[e]}return r??null}function le(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,isActive:a,isSelected:s,isEditing:c,cellRenderers:l,globalCellRenderer:u}=e,d=Q(n,t.field),f={value:d,rowData:n,column:t,rowIndex:r,colIndex:i,isActive:a,isSelected:s,isEditing:c};if(t.cellRenderer&&typeof t.cellRenderer==`string`){let e=l[t.cellRenderer];if(e)return Z(e(f))}return u?Z(u(f)):o(d==null?``:String(d))}function ue(e){return e==null||e===``?o(``):typeof e==`string`?o(e):e}function de(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,initialValue:a,core:s,editRenderers:c,globalEditRenderer:u}=e;if(!s)return o(``);let d={value:Q(n,t.field),rowData:n,column:t,rowIndex:r,colIndex:i,isActive:!0,isSelected:!0,isEditing:!0,initialValue:a,onValueChange:e=>s.updateEditValue(e),onCommit:()=>s.commitEdit(),onCancel:()=>s.cancelEdit()};if(t.editRenderer&&typeof t.editRenderer==`string`){let e=c[t.editRenderer];if(e)return ue(e(d))}return u?ue(u(d)):l(`input`,{class:`gp-grid-edit-input`,type:`text`,value:a==null?``:String(a),autofocus:!0,onFocus:e=>e.target.select(),onInput:e=>s.updateEditValue(e.target.value),onKeydown:e=>{e.stopPropagation(),e.key===`Enter`?s.commitEdit():e.key===`Escape`?s.cancelEdit():e.key===`Tab`&&(e.preventDefault(),s.commitEdit(),s.selection.moveFocus(e.shiftKey?`left`:`right`,!1))},onBlur:()=>s.commitEdit()})}function fe(e){return e==null||e===``?o(``):typeof e==`string`?o(e):e}function pe(t){let{column:n,colIndex:r,sortDirection:i,sortIndex:a,sortable:o,filterable:s,hasFilter:c,core:u,container:d,headerRenderers:f,globalHeaderRenderer:p}=t,m={column:n,colIndex:r,sortDirection:i,sortIndex:a,sortable:o,filterable:s,hasFilter:c,onSort:(e,t)=>{u&&o&&u.setSort(n.colId??n.field,e,t)},onFilterClick:()=>{if(u&&s){let e=d?.querySelector(`[data-col-index="${r}"]`);if(e){let t=e.getBoundingClientRect();u.openFilterPopup(r,{top:t.top,left:t.left,width:t.width,height:t.height})}}}};if(n.headerRenderer&&typeof n.headerRenderer==`string`){let e=f[n.headerRenderer];if(e)return fe(e(m))}if(p)return fe(p(m));let h=[l(`span`,{class:`gp-grid-header-text`},n.headerName??n.field)],g=[];if(o){let e=[l(`span`,{class:`gp-grid-sort-arrows-stack`},[l(`svg`,{class:`gp-grid-sort-arrow-up${i===`asc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`},[l(`path`,{d:`M4 0L8 6H0L4 0Z`,fill:`currentColor`})]),l(`svg`,{class:`gp-grid-sort-arrow-down${i===`desc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`},[l(`path`,{d:`M4 6L0 0H8L4 6Z`,fill:`currentColor`})])])];a!==void 0&&a>0&&e.push(l(`span`,{class:`gp-grid-sort-index`},String(a))),g.push(l(`span`,{class:`gp-grid-sort-arrows`},e))}return s&&g.push(l(`span`,{class:`gp-grid-filter-icon${c?` active`:``}`,onMousedown:e=>{e.stopPropagation(),e.preventDefault(),m.onFilterClick()},onClick:e=>{e.stopPropagation()}},[l(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`currentColor`},[l(`path`,{d:`M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z`})])])),g.length>0&&h.push(l(`span`,{class:`gp-grid-header-icons`},g)),l(e,h)}function me(e,t){let{onClose:n,ignoreSelector:r=`.gp-grid-filter-icon`}=t,i=null,a=null;f(()=>{i=t=>{let i=t.target;r&&i.closest(r)||e.value&&!e.value.contains(i)&&n()},a=e=>{e.key===`Escape`&&n()},requestAnimationFrame(()=>{i&&document.addEventListener(`mousedown`,i),a&&document.addEventListener(`keydown`,a)})}),p(()=>{i&&document.removeEventListener(`mousedown`,i),a&&document.removeEventListener(`keydown`,a)})}function $(e,t=`and`){let n=g([...e]);return{conditions:n,combination:g(t),updateCondition:(e,t)=>{let r=[...n.value];r[e]={...r[e],...t},n.value=r},addCondition:e=>{n.value=[...n.value,{operator:e,value:``,valueTo:``,nextOperator:`and`}]},removeCondition:e=>{n.value=n.value.filter((t,n)=>n!==e)}}}const he={class:`gp-grid-filter-content gp-grid-filter-text`},ge={key:0,class:`gp-grid-filter-mode-toggle`},_e={key:1,class:`gp-grid-filter-info`},ve={class:`gp-grid-filter-actions`},ye=[`disabled`],be={class:`gp-grid-filter-list`},xe={key:0,class:`gp-grid-filter-option`},Se=[`checked`],Ce=[`checked`,`onChange`],we={key:0,class:`gp-grid-filter-combination`},Te=[`onClick`],Ee=[`onClick`],De={class:`gp-grid-filter-row`},Oe=[`value`,`autofocus`,`onChange`],ke=[`value`],Ae=[`value`,`onInput`],je=[`onClick`];var Me=c({__name:`TextFilterContent`,props:{distinctValues:{},currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`contains`,label:`Contains`},{value:`notContains`,label:`Does not contain`},{value:`equals`,label:`Equals`},{value:`notEquals`,label:`Does not equal`},{value:`startsWith`,label:`Starts with`},{value:`endsWith`,label:`Ends with`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Is not blank`}],c=n,l=o;function d(e){return Array.isArray(e)?e.join(`, `):String(e??``)}let f=t(()=>{let e=c.distinctValues.filter(e=>e!=null&&e!==``&&!(Array.isArray(e)&&e.length===0)).map(e=>d(e));return Array.from(new Set(e)).sort((e,t)=>{let n=parseFloat(e),r=parseFloat(t);return!isNaN(n)&&!isNaN(r)?n-r:e.localeCompare(t,void 0,{numeric:!0,sensitivity:`base`})})}),p=t(()=>f.value.length>100),h=g(t(()=>{if(!c.currentFilter?.conditions[0])return p.value?`condition`:`values`;let e=c.currentFilter.conditions[0];return e.selectedValues&&e.selectedValues.size>0?`values`:`condition`}).value),v=t(()=>c.currentFilter?.conditions[0]?c.currentFilter.conditions[0].selectedValues??new Set:new Set),y=t(()=>c.currentFilter?.conditions[0]?c.currentFilter.conditions[0].includeBlank??!0:!0),C=g(``),T=g(new Set(v.value)),E=g(y.value),{conditions:D,combination:ee,updateCondition:O,addCondition:k,removeCondition:A}=$(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`contains`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.conditions[0];if(e.selectedValues&&e.selectedValues.size>0)return[{operator:`contains`,value:``,valueTo:``,nextOperator:`and`}];let t=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(e=>{let n=e;return{operator:n.operator,value:n.value??``,valueTo:``,nextOperator:n.nextOperator??t}})}).value,c.currentFilter?.combination??`and`),j=t(()=>{if(!C.value)return f.value;let e=C.value.toLowerCase();return f.value.filter(t=>t.toLowerCase().includes(e))}),M=t(()=>c.distinctValues.some(e=>e==null||e===``)),N=t(()=>j.value.every(e=>T.value.has(e))&&(!M.value||E.value));function P(){T.value=new Set(j.value),M.value&&(E.value=!0)}function F(){T.value=new Set,E.value=!1}function I(e){let t=new Set(T.value);t.has(e)?t.delete(e):t.add(e),T.value=t}function L(){if(h.value===`values`){if(f.value.every(e=>T.value.has(e))&&(!M.value||E.value)){l(`apply`,null);return}l(`apply`,{conditions:[{type:`text`,operator:`equals`,selectedValues:T.value,includeBlank:E.value}],combination:`and`})}else{let e=D.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.value.trim()!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`text`,operator:e.operator,value:e.value,nextOperator:e.nextOperator})),combination:`and`})}}function R(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,he,[r(` Mode toggle - only show if not too many values `),p.value?r(`v-if`,!0):(m(),i(`div`,ge,[a(`button`,{type:`button`,class:u({active:h.value===`values`}),onClick:n[0]||=e=>h.value=`values`},` Values `,2),a(`button`,{type:`button`,class:u({active:h.value===`condition`}),onClick:n[1]||=e=>h.value=`condition`},` Condition `,2)])),r(` Too many values message `),p.value&&h.value===`condition`?(m(),i(`div`,_e,` Too many unique values (`+b(f.value.length)+`). Use conditions to filter. `,1)):r(`v-if`,!0),r(` VALUES MODE `),h.value===`values`?(m(),i(e,{key:2},[r(` Search input `),w(a(`input`,{"onUpdate:modelValue":n[2]||=e=>C.value=e,class:`gp-grid-filter-search`,type:`text`,placeholder:`Search...`,autofocus:``},null,512),[[S,C.value]]),r(` Select all / Deselect all `),a(`div`,ve,[a(`button`,{type:`button`,disabled:N.value,onClick:P},` Select All `,8,ye),a(`button`,{type:`button`,onClick:F},` Deselect All `)]),r(` Checkbox list `),a(`div`,be,[r(` Blanks option `),M.value?(m(),i(`label`,xe,[a(`input`,{type:`checkbox`,checked:E.value,onChange:n[3]||=e=>E.value=!E.value},null,40,Se),n[5]||=a(`span`,{class:`gp-grid-filter-blank`},`(Blanks)`,-1)])):r(`v-if`,!0),r(` Values `),(m(!0),i(e,null,_(j.value,e=>(m(),i(`label`,{key:e,class:`gp-grid-filter-option`},[a(`input`,{type:`checkbox`,checked:T.value.has(e),onChange:t=>I(e)},null,40,Ce),a(`span`,null,b(e),1)]))),128))])],64)):r(`v-if`,!0),r(` CONDITION MODE `),h.value===`condition`?(m(),i(e,{key:3},[(m(!0),i(e,null,_(x(D),(t,n)=>(m(),i(`div`,{key:n,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),n>0?(m(),i(`div`,we,[a(`button`,{type:`button`,class:u({active:x(D)[n-1]?.nextOperator===`and`}),onClick:e=>x(O)(n-1,{nextOperator:`and`})},` AND `,10,Te),a(`button`,{type:`button`,class:u({active:x(D)[n-1]?.nextOperator===`or`}),onClick:e=>x(O)(n-1,{nextOperator:`or`})},` OR `,10,Ee)])):r(`v-if`,!0),a(`div`,De,[r(` Operator select `),a(`select`,{value:t.operator,autofocus:n===0,onChange:e=>x(O)(n,{operator:e.target.value})},[(m(),i(e,null,_(s,e=>a(`option`,{key:e.value,value:e.value},b(e.label),9,ke)),64))],40,Oe),r(` Text input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`text`,value:t.value,placeholder:`Value`,class:`gp-grid-filter-text-input`,onInput:e=>x(O)(n,{value:e.target.value})},null,40,Ae)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),x(D).length>1?(m(),i(`button`,{key:1,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>x(A)(n)},` × `,8,je)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[4]||=e=>x(k)(`contains`)},` + Add condition `)],64)):r(`v-if`,!0),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:R},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:L},` Apply `)])]))}});const Ne={class:`gp-grid-filter-content gp-grid-filter-number`},Pe={key:0,class:`gp-grid-filter-combination`},Fe=[`onClick`],Ie=[`onClick`],Le={class:`gp-grid-filter-row`},Re=[`value`,`onChange`],ze=[`value`],Be=[`value`,`onInput`],Ve=[`value`,`onInput`],He=[`onClick`];var Ue=c({__name:`NumberFilterContent`,props:{currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`>=`,label:`≥`},{value:`<=`,label:`≤`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}],c=n,l=o,{conditions:d,combination:f,updateCondition:p,addCondition:h,removeCondition:g}=$(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(t=>{let n=t;return{operator:n.operator,value:n.value==null?``:String(n.value),valueTo:n.valueTo==null?``:String(n.valueTo),nextOperator:n.nextOperator??e}})}).value,c.currentFilter?.combination??`and`);function v(){let e=d.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`number`,operator:e.operator,value:e.value?parseFloat(e.value):void 0,valueTo:e.valueTo?parseFloat(e.valueTo):void 0,nextOperator:e.nextOperator})),combination:`and`})}function y(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,Ne,[(m(!0),i(e,null,_(x(d),(t,o)=>(m(),i(`div`,{key:o,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),o>0?(m(),i(`div`,Pe,[a(`button`,{type:`button`,class:u({active:x(d)[o-1]?.nextOperator===`and`}),onClick:e=>x(p)(o-1,{nextOperator:`and`})},` AND `,10,Fe),a(`button`,{type:`button`,class:u({active:x(d)[o-1]?.nextOperator===`or`}),onClick:e=>x(p)(o-1,{nextOperator:`or`})},` OR `,10,Ie)])):r(`v-if`,!0),a(`div`,Le,[r(` Operator select `),a(`select`,{value:t.operator,onChange:e=>x(p)(o,{operator:e.target.value})},[(m(),i(e,null,_(s,e=>a(`option`,{key:e.value,value:e.value},b(e.label),9,ze)),64))],40,Re),r(` Number input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`number`,value:t.value,placeholder:`Value`,onInput:e=>x(p)(o,{value:e.target.value})},null,40,Be)):r(`v-if`,!0),r(` Second number input for "between" `),t.operator===`between`?(m(),i(e,{key:1},[n[1]||=a(`span`,{class:`gp-grid-filter-to`},`to`,-1),a(`input`,{type:`number`,value:t.valueTo,placeholder:`Value`,onInput:e=>x(p)(o,{valueTo:e.target.value})},null,40,Ve)],64)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),x(d).length>1?(m(),i(`button`,{key:2,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>x(g)(o)},` × `,8,He)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[0]||=e=>x(h)(`=`)},` + Add condition `),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:y},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:v},` Apply `)])]))}});const We={class:`gp-grid-filter-content gp-grid-filter-date`},Ge={key:0,class:`gp-grid-filter-combination`},Ke=[`onClick`],qe=[`onClick`],Je={class:`gp-grid-filter-row`},Ye=[`value`,`onChange`],Xe=[`value`],Ze=[`value`,`onInput`],Qe=[`value`,`onInput`],$e=[`onClick`];var et=c({__name:`DateFilterContent`,props:{currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}],c=n,l=o;function d(e){if(!e)return``;let t=typeof e==`string`?new Date(e):e;return isNaN(t.getTime())?``:t.toISOString().split(`T`)[0]}let{conditions:f,combination:p,updateCondition:h,addCondition:g,removeCondition:v}=$(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(t=>{let n=t;return{operator:n.operator,value:d(n.value),valueTo:d(n.valueTo),nextOperator:n.nextOperator??e}})}).value,c.currentFilter?.combination??`and`);function y(){let e=f.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`date`,operator:e.operator,value:e.value||void 0,valueTo:e.valueTo||void 0,nextOperator:e.nextOperator})),combination:`and`})}function S(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,We,[(m(!0),i(e,null,_(x(f),(t,o)=>(m(),i(`div`,{key:o,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),o>0?(m(),i(`div`,Ge,[a(`button`,{type:`button`,class:u({active:x(f)[o-1]?.nextOperator===`and`}),onClick:e=>x(h)(o-1,{nextOperator:`and`})},` AND `,10,Ke),a(`button`,{type:`button`,class:u({active:x(f)[o-1]?.nextOperator===`or`}),onClick:e=>x(h)(o-1,{nextOperator:`or`})},` OR `,10,qe)])):r(`v-if`,!0),a(`div`,Je,[r(` Operator select `),a(`select`,{value:t.operator,onChange:e=>x(h)(o,{operator:e.target.value})},[(m(),i(e,null,_(s,e=>a(`option`,{key:e.value,value:e.value},b(e.label),9,Xe)),64))],40,Ye),r(` Date input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`date`,value:t.value,onInput:e=>x(h)(o,{value:e.target.value})},null,40,Ze)):r(`v-if`,!0),r(` Second date input for "between" `),t.operator===`between`?(m(),i(e,{key:1},[n[1]||=a(`span`,{class:`gp-grid-filter-to`},`to`,-1),a(`input`,{type:`date`,value:t.valueTo,onInput:e=>x(h)(o,{valueTo:e.target.value})},null,40,Qe)],64)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),x(f).length>1?(m(),i(`button`,{key:2,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>x(v)(o)},` × `,8,$e)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[0]||=e=>x(g)(`=`)},` + Add condition `),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:S},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:y},` Apply `)])]))}});const tt={class:`gp-grid-filter-header`};var nt=c({__name:`FilterPopup`,props:{column:{},colIndex:{},anchorRect:{},distinctValues:{},currentFilter:{}},emits:[`apply`,`close`],setup(o,{emit:c}){let l=o,u=c,f=g(null);me(f,{onClose:()=>u(`close`),ignoreSelector:`.gp-grid-filter-icon`});let p=t(()=>l.column.colId??l.column.field);function h(e){u(`apply`,p.value,e),u(`close`)}function _(){u(`close`)}let v=t(()=>l.column.cellDataType);t(()=>v.value===`text`||v.value===`object`);let y=t(()=>v.value===`number`),x=t(()=>v.value===`date`||v.value===`dateString`||v.value===`dateTime`||v.value===`dateTimeString`),S=t(()=>({position:`fixed`,top:`${l.anchorRect.top+l.anchorRect.height+4}px`,left:`${l.anchorRect.left}px`,minWidth:`${Math.max(200,l.anchorRect.width)}px`,zIndex:1e4}));return(t,c)=>(m(),i(`div`,{ref_key:`popupRef`,ref:f,class:`gp-grid-filter-popup`,style:d(S.value)},[a(`div`,tt,` Filter: `+b(o.column.headerName??o.column.field),1),r(` Number filter `),y.value?(m(),n(Ue,{key:0,"current-filter":o.currentFilter,onApply:h,onClose:_},null,8,[`current-filter`])):x.value?(m(),i(e,{key:1},[r(` Date filter `),s(et,{"current-filter":o.currentFilter,onApply:h,onClose:_},null,8,[`current-filter`])],2112)):(m(),i(e,{key:2},[r(` Text filter (default) `),s(Me,{"distinct-values":o.distinctValues,"current-filter":o.currentFilter,onApply:h,onClose:_},null,8,[`distinct-values`,`current-filter`])],2112))],4))}});const rt=[`data-col-index`,`onClick`],it=[`onMousedown`,`onDblclick`,`onMouseenter`],at={key:1,class:`gp-grid-loading`},ot={key:2,class:`gp-grid-error`},st={key:3,class:`gp-grid-empty`};var ct=c({__name:`GpGrid`,props:{columns:{},dataSource:{},rowData:{},rowHeight:{},headerHeight:{},overscan:{default:3},sortingEnabled:{type:Boolean,default:!0},darkMode:{type:Boolean,default:!1},wheelDampening:{default:.1},cellRenderers:{default:()=>({})},editRenderers:{default:()=>({})},headerRenderers:{default:()=>({})},cellRenderer:{},editRenderer:{},headerRenderer:{},initialWidth:{},initialHeight:{},highlighting:{}},setup(s,{expose:c}){ne();let l=s,h=g(null),S=y(null),w=y(null),T=y(null),{state:D,applyInstructions:O,reset:A}=q({initialWidth:l.initialWidth,initialHeight:l.initialHeight}),M=t(()=>l.headerHeight??l.rowHeight),P=t(()=>l.columns.map((e,t)=>({column:e,originalIndex:t})).filter(({column:e})=>!e.hidden)),F=t(()=>k(P.value.map(e=>e.column),D.viewportWidth)),I=t(()=>F.value.positions),L=t(()=>F.value.widths),z=t(()=>R(I.value)),te=t(()=>Array.from(D.slots.values())),{handleCellMouseDown:re,handleCellDoubleClick:ie,handleFillHandleMouseDown:H,handleHeaderClick:oe,handleKeyDown:W,handleWheel:G,dragState:K}=Y(S,h,t(()=>l.columns),{activeCell:t(()=>D.activeCell),selectionRange:t(()=>D.selectionRange),editingCell:t(()=>D.editingCell),filterPopupOpen:t(()=>D.filterPopup?.isOpen??!1),rowHeight:l.rowHeight,headerHeight:M.value,columnPositions:I,visibleColumnsWithIndices:P,slots:t(()=>D.slots)}),{fillHandlePosition:J}=X({activeCell:t(()=>D.activeCell),selectionRange:t(()=>D.selectionRange),slots:t(()=>D.slots),columns:t(()=>l.columns),visibleColumnsWithIndices:P,columnPositions:I,columnWidths:L,rowHeight:l.rowHeight});function se(){let e=h.value,t=S.value;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)}function ce(e,t){let n=S.value;n&&n.setFilter(e,t)}function Z(){let e=S.value;e&&e.closeFilterPopup()}function Q(e,t){S.value?.input.handleCellMouseEnter(e,t)}function ue(){S.value?.input.handleCellMouseLeave()}function fe(e){return[`gp-grid-row`,...S.value?.highlight?.computeRowClasses(e.rowIndex,e.rowData)??[]].filter(Boolean).join(` `)}function me(e,t,n,r,i){let a=V(e,t,D.editingCell);return[ee(B(e,t,D.activeCell),U(e,t,D.selectionRange),a,ae(e,t,K.value.dragType===`fill`,K.value.fillSourceRange,K.value.fillTarget)),...S.value?.highlight?.computeCombinedCellClasses(e,t,n,r)??[]].filter(Boolean).join(` `)}function $(){return l.dataSource??(l.rowData?N(l.rowData):j([]))}function he(e){T.value&&=(T.value(),null),S.value&&S.value.destroy();let t=new E({columns:l.columns,dataSource:e,rowHeight:l.rowHeight,headerHeight:M.value,overscan:l.overscan,sortingEnabled:l.sortingEnabled,highlighting:l.highlighting});S.value=t,T.value=t.onBatchInstruction(e=>{O(e)}),t.initialize();let n=h.value;n&&t.setViewport(n.scrollTop,n.scrollLeft,n.clientWidth,n.clientHeight)}return f(()=>{let e=$();w.value=e,he(e);let t=h.value;if(t&&typeof ResizeObserver<`u`){let e=new ResizeObserver(()=>{S.value?.setViewport(t.scrollTop,t.scrollLeft,t.clientWidth,t.clientHeight)});e.observe(t),p(()=>{e.disconnect()})}p(()=>{T.value&&=(T.value(),null),S.value&&=(S.value.destroy(),null),w.value&&=(w.value.destroy?.(),null)})}),C([()=>l.dataSource,()=>l.rowData],()=>{let e=$(),t=w.value;t&&t!==e?(t.destroy?.(),A(),w.value=e,he(e)):t||(w.value=e)}),C(()=>l.dataSource,e=>{if(e){let t=e;if(t.subscribe){let e=t.subscribe(()=>{S.value?.refresh()});p(()=>e())}}},{immediate:!0}),c({core:S}),(t,c)=>(m(),i(`div`,{ref_key:`containerRef`,ref:h,class:u([`gp-grid-container`,{"gp-grid-container--dark":s.darkMode}]),style:{width:`100%`,height:`100%`,overflow:`auto`,position:`relative`},tabindex:`0`,onScroll:se,onWheel:c[1]||=e=>x(G)(e,s.wheelDampening),onKeydown:c[2]||=(...e)=>x(W)&&x(W)(...e)},[r(` Content sizer `),a(`div`,{style:d({width:`${Math.max(x(D).contentWidth,z.value)}px`,height:`${Math.max(x(D).contentHeight,M.value)}px`,position:`relative`,minWidth:`100%`})},[r(` Headers `),a(`div`,{class:`gp-grid-header`,style:d({position:`sticky`,top:0,left:0,height:`${M.value}px`,width:`${Math.max(x(D).contentWidth,z.value)}px`,minWidth:`100%`})},[(m(!0),i(e,null,_(P.value,({column:e,originalIndex:t},r)=>(m(),i(`div`,{key:e.colId??e.field,class:`gp-grid-header-cell`,"data-col-index":t,style:d({position:`absolute`,left:`${I.value[r]}px`,top:0,width:`${L.value[r]}px`,height:`${M.value}px`,background:`transparent`}),onClick:e=>x(oe)(t,e)},[(m(),n(v(x(pe)({column:e,colIndex:t,sortDirection:x(D).headers.get(t)?.sortDirection,sortIndex:x(D).headers.get(t)?.sortIndex,sortable:x(D).headers.get(t)?.sortable??!0,filterable:x(D).headers.get(t)?.filterable??!0,hasFilter:x(D).headers.get(t)?.hasFilter??!1,core:S.value,container:h.value,headerRenderers:s.headerRenderers??{},globalHeaderRenderer:s.headerRenderer}))))],12,rt))),128))],4),r(` Row slots `),(m(!0),i(e,null,_(te.value.filter(e=>e.rowIndex>=0),t=>(m(),i(`div`,{key:t.slotId,class:u(fe(t)),style:d({position:`absolute`,top:0,left:0,transform:`translateY(${t.translateY}px)`,width:`${Math.max(x(D).contentWidth,z.value)}px`,height:`${s.rowHeight}px`})},[(m(!0),i(e,null,_(P.value,({column:a,originalIndex:o},c)=>(m(),i(`div`,{key:`${t.slotId}-${o}`,class:u(me(t.rowIndex,o,a,t.rowData,x(D).hoverPosition)),style:d({position:`absolute`,left:`${I.value[c]}px`,top:0,width:`${L.value[c]}px`,height:`${s.rowHeight}px`}),onMousedown:e=>x(re)(t.rowIndex,o,e),onDblclick:()=>x(ie)(t.rowIndex,o),onMouseenter:()=>Q(t.rowIndex,o),onMouseleave:ue},[r(` Edit mode `),x(V)(t.rowIndex,o,x(D).editingCell)&&x(D).editingCell?(m(),n(v(x(de)({column:a,rowData:t.rowData,rowIndex:t.rowIndex,colIndex:o,initialValue:x(D).editingCell.initialValue,core:S.value,editRenderers:s.editRenderers??{},globalEditRenderer:s.editRenderer})),{key:0})):(m(),i(e,{key:1},[r(` View mode `),(m(),n(v(x(le)({column:a,rowData:t.rowData,rowIndex:t.rowIndex,colIndex:o,isActive:x(B)(t.rowIndex,o,x(D).activeCell),isSelected:x(U)(t.rowIndex,o,x(D).selectionRange),isEditing:!1,cellRenderers:s.cellRenderers??{},globalCellRenderer:s.cellRenderer}))))],64))],46,it))),128))],6))),128)),r(` Fill handle `),x(J)&&!x(D).editingCell?(m(),i(`div`,{key:0,class:`gp-grid-fill-handle`,style:d({position:`absolute`,top:`${x(J).top}px`,left:`${x(J).left}px`,zIndex:200}),onMousedown:c[0]||=(...e)=>x(H)&&x(H)(...e)},null,36)):r(`v-if`,!0),r(` Loading indicator `),x(D).isLoading?(m(),i(`div`,at,[...c[3]||=[a(`div`,{class:`gp-grid-loading-spinner`},null,-1),o(` Loading... `,-1)]])):r(`v-if`,!0),r(` Error message `),x(D).error?(m(),i(`div`,ot,` Error: `+b(x(D).error),1)):r(`v-if`,!0),r(` Empty state `),!x(D).isLoading&&!x(D).error&&x(D).totalRows===0?(m(),i(`div`,st,` No data to display `)):r(`v-if`,!0)],4),r(` Filter Popup `),x(D).filterPopup?.isOpen&&x(D).filterPopup.column&&x(D).filterPopup.anchorRect?(m(),n(nt,{key:0,column:x(D).filterPopup.column,"col-index":x(D).filterPopup.colIndex,"anchor-rect":x(D).filterPopup.anchorRect,"distinct-values":x(D).filterPopup.distinctValues,"current-filter":x(D).filterPopup.currentFilter,onApply:ce,onClose:Z},null,8,[`column`,`col-index`,`anchor-rect`,`distinct-values`,`current-filter`])):r(`v-if`,!0)],34))}});function lt(e){ne();let n=g(null),r=g(null),{state:i,applyInstructions:a}=q(),o=t(()=>e.headerHeight??e.rowHeight),s=t(()=>e.columns.map((e,t)=>({column:e,originalIndex:t})).filter(({column:e})=>!e.hidden)),c=t(()=>k(s.value.map(e=>e.column),i.viewportWidth)),l=t(()=>c.value.positions),u=t(()=>c.value.widths),d=t(()=>R(l.value)),m=t(()=>Array.from(i.slots.values())),{handleCellMouseDown:h,handleCellDoubleClick:_,handleFillHandleMouseDown:v,handleHeaderClick:y,handleKeyDown:b,handleWheel:x,dragState:S}=Y(r,n,t(()=>e.columns),{activeCell:t(()=>i.activeCell),selectionRange:t(()=>i.selectionRange),editingCell:t(()=>i.editingCell),filterPopupOpen:t(()=>i.filterPopup?.isOpen??!1),rowHeight:e.rowHeight,headerHeight:o.value,columnPositions:l,visibleColumnsWithIndices:s,slots:t(()=>i.slots)}),w=()=>{let e=n.value,t=r.value;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)},T=(e,t)=>{let n=r.value;n&&n.setFilter(e,t)},D=()=>{let e=r.value;e&&e.closeFilterPopup()},O=(e,t)=>{r.value?.input.handleCellMouseEnter(e,t)},A=()=>{r.value?.input.handleCellMouseLeave()};f(()=>{let t=e.dataSource??(e.rowData?N(e.rowData):j([])),i=new E({columns:e.columns,dataSource:t,rowHeight:e.rowHeight,headerHeight:o.value,overscan:e.overscan??3,sortingEnabled:e.sortingEnabled??!0,highlighting:e.highlighting});r.value=i;let s=i.onBatchInstruction(e=>{a(e)});i.initialize();let c=n.value;if(c){i.setViewport(c.scrollTop,c.scrollLeft,c.clientWidth,c.clientHeight);let e=new ResizeObserver(()=>{i.setViewport(c.scrollTop,c.scrollLeft,c.clientWidth,c.clientHeight)});e.observe(c),p(()=>{e.disconnect(),s(),r.value=null})}}),C(()=>e.dataSource,e=>{if(e){let t=e;if(t.subscribe){let e=t.subscribe(()=>{r.value?.refresh()});p(()=>e())}}},{immediate:!0});let{fillHandlePosition:M}=X({activeCell:t(()=>i.activeCell),selectionRange:t(()=>i.selectionRange),slots:t(()=>i.slots),columns:t(()=>e.columns),visibleColumnsWithIndices:s,columnPositions:l,columnWidths:u,rowHeight:e.rowHeight});return{containerRef:n,coreRef:r,state:i,slotsArray:m,totalHeaderHeight:o,columnPositions:l,columnWidths:u,totalWidth:d,fillHandlePosition:M,handleScroll:w,handleCellMouseDown:h,handleCellDoubleClick:_,handleFillHandleMouseDown:v,handleHeaderClick:y,handleKeyDown:b,handleWheel:x,handleFilterApply:T,handleFilterPopupClose:D,handleCellMouseEnter:O,handleCellMouseLeave:A,dragState:S,isCellSelected:U,isCellActive:B,isCellEditing:V,isCellInFillPreview:ae,buildCellClasses:ee}}export{ct as GpGrid,ct as default,T as GridCore,D as buildCellClasses,O as calculateColumnPositions,A as createClientDataSource,M as createDataSourceFromArray,G as createInitialState,P as createMutableClientDataSource,F as createServerDataSource,I as findColumnAtX,Q as getCellValue,L as getTotalWidth,z as gridStyles,te as injectStyles,re as isCellActive,ie as isCellEditing,H as isCellInFillPreview,oe as isCellSelected,W as isRowVisible,le as renderCell,de as renderEditCell,pe as renderHeader,J as useAutoScroll,X as useFillHandle,$ as useFilterConditions,me as useFilterPopup,lt as useGpGrid,q as useGridState,Y as useInputHandler};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gp-grid-vue",
   "description": "A high-performance Vue 3 data grid component with virtual scrolling, cell selection, sorting, filtering, and Excel-like editing",
-  "version": "0.5.3",
+  "version": "0.7.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/index.js",
@@ -43,7 +43,7 @@
     "nuxt3"
   ],
   "dependencies": {
-    "gp-grid-core": "0.5.3"
+    "gp-grid-core": "0.7.0"
   },
   "peerDependencies": {
     "vue": "^3.4.0"